Movie Gallery

Printable View

05-21-2008, 04:33 PM
jadepearl

Movie Gallery

Hi there!

I am new in flash, web development and design. But I am eager to learn as I fell in love with it. I am using Flash 8. Right now I am trying to do my very first website for my OGA. I am stuck and need your help and advice.

Firstly, I need to solve this problem:

I have created two "360 pano flash movies" and its in the SWF format. The movie can scroll to the right or to the left when you mouse over it.

Next, I want to do a movie gallery with thumbnails. When you click on the thumbnail, the 360 pano flash movie will appear in the placeholder (hope I got the term right) above it.
Here's an example of what I am thinking of - http://www.beautifulimages.biz/vt.html (Deluxe Tour) or http://www.virtualpix.co.uk/360-virt...y/gallery.html

However, when I tried creating a movie gallery and do this - File>Import and import my SWF onto stage, my swf files became bitmaps (pictures). So, what did I do wrong?

Secondly, if this is not possible, could I do something similiar with Dreamweaver MX 2004? Click on the thumbnail and the 360 pano flash movie will be played in a desinated table on the same page?

Any help or advice is appreciated.

Thank so much!
05-22-2008, 03:00 PM
Medyman

Quote:

However, when I tried creating a movie gallery and do this - File>Import and import my SWF onto stage, my swf files became bitmaps (pictures). So, what did I do wrong?

You can't directly import SWF files within the Flash IDE. Doing so breaks it up into it's constituent parts and strips the ActionScript. To be able to target another .swf file from a parent .swf file, like you're trying to do, you need to call it via ActionScript.

You would need to use the MovieClipLoader class to do this. Instead of explaining it, I'll point you towards a video tutorial (which might be easier to follow) made by Lee Brimelow and posted at gotoAndLearn(). The video is here.

Quote:

Secondly, if this is not possible, could I do something similiar with Dreamweaver MX 2004? Click on the thumbnail and the 360 pano flash movie will be played in a desinated table on the same page?

Well, it is possible. But you could also do something like this via a whole host of methods -- Ajax, javascript with url segments, just javascript. The use of Dreamweaver makes no difference (execpt maybe making it harder to insert clean code) to the functionality available to do this. Dreamweaver supports javascript and HTML, so in theory, there should be no problems. However, Dreamweaver -- and others of its ilk -- have a habit of messing with code, so it's best to insert it directly into the markup with a basic text editor instead of going through the Dreamweaver inputs.

In any case, the simplest way to do this would be to do the following:

Add this to the <head> section:

Code:

<style text="text/css"> .hide { display:none; } </style> <script type="text/javascript">  </script>

Add this to your html:

Code:

<div id="flash1" class="hide">  </div> <div id="flash2" class="hide">  </div> <img src="thumbnail1.jpg" onclick="toggle_visibility('flash1');"> <img src="thumbnail2.jpg" onclick="toggle_visibility('flash2');">

You could also use one of the Lightbox-esqe scripts to display a popup with the panoramic .swfs when you click a thumbnail.
05-23-2008, 05:37 AM
jadepearl

Medyman - Thanks for your info and the javascript. Will try it out and see. Thanks once again!:)
05-23-2008, 02:15 PM
jadepearl

Medyman - I was wondering if this can be done for my "360 pano flash movies"? Found this javascript here - http://www.hunlock.com/blogs/Everyth...ideo_Embedding
on How to make a video select list.

But since I am so new in all this, I don't understand it at all.
Could you please help me?

Thanks so much!:):)
05-23-2008, 05:49 PM
Medyman

Yeah, that's almost the same as what I suggested above (different code, same functionality).

You can use text instead of images with the code above. The important part is the onClick. You can add that within any tag and it'll work all the same. I included images because you mentioned thumbnails.
05-24-2008, 04:09 AM
jadepearl

Hi Medyman,

Thanks for your help. Apologies for asking you more Qs. I am just like a baby when it comes to JS. I just don't understand the JS at the site which I gave you. Anyway, I tried the JS that you gave me. Am not sure what I did wrong. When I tried to view it in IE by clicking on the thumbnails, nothing happened. Please advice with thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style text="text/css">
.hide {
display:none;
}
</style>
<script type="text/javascript">

</script>

</head>

<body>
<table width="687" border="0">
<tr>
<th width="171" scope="col"><div id="pool.swf" class="hide">

</div>
<div id="condo.swf" class="hide">

</div>
<p><img src="thumb01.gif" width="75" height="50" onclick="toggle_visibility('pool.swf');">
</p>
<p><img src="thumb02.gif" width="75" height="50" onclick="toggle_visibility('condo.swf');">
</p>
</th>
<th width="506" scope="col"> </th>
</tr>
</table>
<p> </p>
</body>
</html>

Secondly, how can I get the movie to be show in the table beside the thumbnails column?

Thank you so so much for your help and patient.
Hope to hear from you soon!:)
05-24-2008, 01:42 PM
Medyman

You did everything right with that code. The reason you're not seeing anything is because you don't have anything inside the condo.swf and pool.swf divs.

Anything between  notation are HTML comments and won't show up in the browser. So enter some text, or embed your flash in that spot and you'll see that it works.

Also, to eliminate problems later on, you might want to drop the .swf in the div names. Just condo and pool should work fine for those.
05-24-2008, 05:11 PM
jadepearl

Hi Medyman,

Thanks for your help! Hope I understood you correctly. Here is the code. However, its not working. Am I doing something wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style text="text/css">
.hide {
display:none;
}
</style>
<script type="text/javascript">

</script>

</head>

<body>
<table width="687" border="0">
<tr>
<th width="171" scope="col"><div id="pool" class="hide">

</div>
<div id="condo" class="hide">

</div>
<p><img src="thumb01.gif" width="75" height="50" onclick="toggle_visibility('pool);">
</p>
<p><img src="thumb02.gif" width="75" height="50" onclick="toggle_visibility('condo);">
</p>
</th>
<th width="506" scope="col"> </th>
</tr>
</table>
<p> </p>
</body>
</html>

Thank you so so much for your help and patient.
Hope to hear from you soon! :)
05-25-2008, 05:06 PM
Medyman

Not quite...

Try replacing

Code:

<div id="pool" class="hide">  </div> <div id="condo" class="hide">  </div>

with

Code:

<div id="pool" class="hide"> POOL MOVIE HERE </div> <div id="condo" class="hide"> CONDO MOVIE HERE </div>

Now, you should be able to see the script work :D
You'll need to embed the actual flash there, of course.
05-26-2008, 05:11 AM
jadepearl

Hi Medyman!

Thanks so much for your patient and help. I am just so new and so loss. I have embeded my flash files with Dreamweaver MX 2004 and this is how the codes look like. Hope I doing it right.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="297">
<param name="movie" value="/images/pool.swf">
<param name="quality" value="high">
<embed src="/images/pool.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="297"></embed>
</object>

Is this correct?

Thanks so much!:)
05-27-2008, 01:43 PM
jadepearl

Hi Medyman!

I think I finally succeeded! I place everything in the same file. Am I correct to say that when I click on the thumbnail, the swf movie will be played in a new page? If that's true, then I finally managed to get it right with this codes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style text="text/css">
.hide {
display:none;
}
</style>
<script type="text/javascript">

</script>

</head>

<body>

<div id="pool.swf" class="hide">
POOL MOVIE HERE
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="297">
<param name="movie" value="pool.swf">
<param name="quality" value="high">
<embed src="pool.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="297"></embed>
</object>
</div>
<div id="condo.swf" class="hide">
CONDO MOVIE HERE
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="297">
<param name="movie" value="condo.swf">
<param name="quality" value="high">
<embed src="condo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="297"></embed>
</object>
</div>
<p><a href="pool.swf"><img src="thumb01.gif" width="75" height="50" border="0" onclick="toggle_visibility('pool.swf);"></a></p>
<p><a href="vmcondo.swf"><img src="thumb02.gif" width="75" height="50" border="0" onclick="toggle_visibility('condo.swf);"></a>
</p>

<p> </p>
</body>
</html>

Thanks so so much! Thank you so much!
I finally learnt something new and understand it.

Question:
May I know what should I do if I want the swf movies to appear on the allocated box on the same webpage?

*Thumbnail 1* * Thumbnail 2*
___________________________

The swf movie will appear in
this box accordingly.

____________________________

Thanks so much! You are an awesome teacher!:)
05-27-2008, 01:54 PM
Medyman

Quote:

May I know what should I do if I want the swf movies to appear on the allocated box on the same webpage?

I'm not sure I know what you mean. They're currently on the same page. Do you mean you want them to show instead of being hidden?

If so, just remove class="hide" from the <div> tag.

Quote:

Thanks so much! You are an awesome teacher!

You're very welcome. Glad to help.

By the way, in IE and Opera you'll notice that the SWF files have this border around them that says "click here to activate". If you want to get rid of that you should use another embedding technique. I recommend SWFObject.

Documentation on SWFObject is here. Examples are here. Code generator is here. FAQs are here.
05-27-2008, 02:06 PM
jadepearl

Hi Medyman,

What I meant was after I pressed F12 to preview in browser, I can see 2 thumbnails on the webpage. When I click on the 1st thumbnail, the swf movie appears in a new webpage.

Thanks so much for your help!
05-27-2008, 02:15 PM
Medyman

Ahh, I see.
That's because you have this:

Code:

<a href="pool.swf"><img src="thumb01.gif" width="75" height="50" border="0" onclick="toggle_visibility('pool.swf);"></a>

You actually don't need the anchors (<a>) because the onClick javascript replicates that functionality. So the above should be:

Code:

<img src="thumb01.gif" width="75" height="50" border="0" onclick="toggle_visibility('pool.swf);">

Similarly, you can get rid of the

Code:

<a href="vmcondo.swf"></a>

as well.
05-27-2008, 02:31 PM
jadepearl

Hi Medyman,

When I remove the the anchors (<a>), somehow, when I clicked on the thumbnails, nothing happens.:confused:

Thanks!:)
05-27-2008, 02:50 PM
Medyman

You're missing closing quotes in the toggle_visibility parameter. Add highlighted:

Code:

<p><img src="thumb01.gif" width="75" height="50" border="0" onclick="toggle_visibility('pool.swf');"></p> <p><img src="thumb02.gif" width="75" height="50" border="0" onclick="toggle_visibility('condo.swf');"></p>

:D
05-27-2008, 02:57 PM
jadepearl

Hi Medyman,

It worked! :)
Yippee!!!! :)
THANK YOU SO MUCH!!!:)

But, the funny thing is:
1) When I click on Thumbnail01, the 1st swf movie will appear above of the thumbnails.
2) When I click on Thumbnail02, the 2nd swf movie will appear below of the 1st swf movie. So, I have 2 swf movies playing simultaneously.
3) When I click on Thumbnail02 again, the 2nd swf movie will disappear and only left the 1st swf movie playing.
4) When I click on Thumbnail02 again, the 1st swf movie will disappear and only left 2 thumbnails images only.

Is this how it should be?

Thanks so much!!!
05-27-2008, 06:38 PM
Medyman

Quote:

Is this how it should be?

As the javascript is now, yes. Bascially the first thumbnail toggles the first SWF, the second thumbnail goggles the second SWF. So you can turn the first SWF off/on with the first thumnail. And same logic goes for the second. They're independent of each other.

If you only want one to show at a time, change

Code:

<script type="text/javascript">  </script>

to

Code:

<script type="text/javascript">  </script>

The highlighted correspond to your HTML div id's. So change them accordingly. I think you're still using .swf in your ids (though, like I said before, that should probably be removed).
05-28-2008, 02:19 AM
jadepearl

Hi Medyman,

Thanks for being so patient and understanding!:)
I have change the codes accordingly and its working beautifully!
You are such a wonderful teacher!
THANKS SO MUCH!!!:)