Log in

View Full Version : Movie Gallery


jadepearl
05-21-2008, 04:33 PM
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!
Medyman
05-22-2008, 03:00 PM
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 (http://gotoandlearn.com/player.php?id=27).


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:

<style text="text/css">
.hide {
display:none;
}
</style>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>

Add this to your html:


<div id="flash1" class="hide">
<!-- Embed code for the first flash movie -->
</div>
<div id="flash2" class="hide">
<!-- Embed code for the second flash movie -->
</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.
jadepearl
05-23-2008, 05:37 AM
Medyman - Thanks for your info and the javascript. Will try it out and see. Thanks once again!:)
jadepearl
05-23-2008, 02:15 PM
Medyman - I was wondering if this can be done for my "360 pano flash movies"? Found this javascript here - http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_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!:):)
Medyman
05-23-2008, 05:49 PM
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.
jadepearl
05-24-2008, 04:09 AM
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">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>

</head>

<body>
<table width="687" border="0">
<tr>
<th width="171" scope="col"><div id="pool.swf" class="hide">
<!-- Embed code for the first flash movie -->
</div>
<div id="condo.swf" class="hide">
<!-- Embed code for the second flash movie -->
</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">&nbsp;</th>
</tr>
</table>
<p>&nbsp;</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!:)
Medyman
05-24-2008, 01:42 PM
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.
jadepearl
05-24-2008, 05:11 PM
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">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>

</head>

<body>
<table width="687" border="0">
<tr>
<th width="171" scope="col"><div id="pool" class="hide">
<!-- play the pool movie-->
</div>
<div id="condo" class="hide">
<!-- play the condo movie-->
</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">&nbsp;</th>
</tr>
</table>
<p>&nbsp;</p>
</body>
</html>

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

Try replacing
<div id="pool" class="hide">
<!-- play the pool movie-->
</div>
<div id="condo" class="hide">
<!-- play the condo movie-->
</div>

with


<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.
jadepearl
05-26-2008, 05:11 AM
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!:)
jadepearl
05-27-2008, 01:43 PM
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">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</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>&nbsp;</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!:)
Medyman
05-27-2008, 01:54 PM
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.


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 (http://code.google.com/p/swfobject/).

Documentation on SWFObject is here (http://code.google.com/p/swfobject/wiki/api). Examples are here (http://code.google.com/p/swfobject/wiki/test_suite). Code generator is here (http://www.swffix.org/swfobject/generator/). FAQs are here (http://code.google.com/p/swfobject/wiki/faq).
jadepearl
05-27-2008, 02:06 PM
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!
Medyman
05-27-2008, 02:15 PM
Ahh, I see.
That's because you have this:


<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:


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

Similarly, you can get rid of the
<a href="vmcondo.swf"></a> as well.
jadepearl
05-27-2008, 02:31 PM
Hi Medyman,

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

Thanks!:)
Medyman
05-27-2008, 02:50 PM
You're missing closing quotes in the toggle_visibility parameter. Add highlighted:

<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
jadepearl
05-27-2008, 02:57 PM
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!!!
Medyman
05-27-2008, 06:38 PM
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

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>

to


<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';

if(e.id == 'condo') document.getElementById('pool').style.display = 'none';
if(e.id == 'pool') document.getElementById('condo').style.display = 'none';
}
//-->
</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).
jadepearl
05-28-2008, 02:19 AM
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!!!:)