Flash photo gallery using ActionScript loadMovie() method

How to use Flash loadMovie()?

ActionScript loadMovie() method can load .swf files, progressive .jpeg files, .png files and unanimated .gif (if you will load an animated .gif file then only the first frame will be displayed).

There are two ways of using ActionScript loadMovie() method (it doesn't matter how you use it, the result will be the same):

1. loadMovie(URL:String, target: Object, [method:String]);
2. target.loadMovie(URL:String, [method:String]);

URL - is the relative or absolute path to the external file to be loaded;
target - represents the movie clip where the external file will be loaded;
method - this is an optional parameter that specifies the HTTP method used for sending and receiving variables.

Now we'll doing a Flash photo gallery using ActionScript loadMovie() to see how this method actually works. The result will be similar with my flash photo gallery below:

2. Now create a new Flash file and save it as loadMovie.fla on your computer. Go to the Properties panel or to Modify >> Document (Ctrl+J) and set dimensions to width: 280 px, height: 200 px.

3. Insert 2 new layers and rename the layers from top to bottom: actions, images, buttons.

4. Go to the first frame of the buttons layer and insert your first thumnail. Chose File >> Import >> Import to Stage (Ctrl+R) and select thumb1.jpg from your computer and press then the Open button. While the thumbnail is still selected go to the Properties panel and assure yourself it has dimensions 60x60, then go to Modify >> Convert to Symbol (F8). In the Convert to Symbol window that appears select MovieClip as Type and type thumb1MC in the Name textfield, then press OK button. While the movieclip is still selected go to the Properties panel and in the <Instance Name> text field type thumb1_mc as in the picture below.

5. Repeat the step 4 for the orhers two thumbnails (of course give them the correspondent names for movieclip and instance). Then arrage the thumbnails on the left part of the stage like in my example.

6. Now we move to the first frame of the images layer. Using the Rectangle tool (R) draw a 180x180 rectangle on the stage (select no stroke and any color for fill color). Arrage the rectangle in the place where you want the images to appear.

7. While the rectangle is still selected convert it to movieclip (Modify >> Convert to Symbol >> choose MovieClip as type and give it the name imagesMC >> then press OK button). While the movieclip is still selected go to the Properties panel and give it an instance name of images_mc.

8. Great! Now all we have to do is adding some ActionScript code.
Go to the first frame of the actions layer and open the Actions panel (F9). Put here the following ActionScript code that uses the loadMovie() method:


this.onLoad=function(){
loadMovie("http://www.tutorial5.com/tutorials/image1.jpg", images_mc); // here is the first way of using ActionScript loadMovie() method
images_mc._alpha=0;
}

//this code ads the fade effect to photos
this.onEnterFrame=function(){
images_mc._alpha+=10;
}

// when thumb1_mc is released the image1.jpg is loaded in images_mc, the _alpha property is set to 0, but addis +10 in the onEnterFrame event we obtain the fade transition between photos
thumb1_mc.onRelease=function(){
images_mc.loadMovie("http://www.tutorial5.com/tutorials/image1.jpg"); // here is the second way of using ActionScript loadMovie() method
images_mc._alpha=0;
}

// when thumb2_mc is released the image2.jpg is loaded in images_mc
thumb2_mc.onRelease=function(){
images_mc.loadMovie("http://www.tutorial5.com/tutorials/image2.jpg");
images_mc._alpha=0;
}

// when thumb3_mc is released the image3.jpg is loaded in images_mc
thumb3_mc.onRelease=function(){
images_mc.loadMovie("http://www.tutorial5.com/tutorials/image3.jpg");
images_mc._alpha=0;
}

Hope this tutorial was helpful!

You need to Register in order to download the FLA file.

Subscribe now via RSS feed and get all the new tutorials

written by ezdownloader , March 14, 2008

How can I dynamically access the width and height dimensions of a jpg. file once it's been loaded into an empty movie clip? I thought that the empty movie clip instance's width and height properties would automatically become the same as whatever .jpg file that I load into it, but it does not.

written by Shakur , March 15, 2008

Nice and simple script to follow for a newbie, but what if I want to add more photos and scroll the thumbnails. That would be cool!

written by alex , March 20, 2008

How do I download FLA file for
Flash photo gallery using ActionScript loadMovie() method
New to this .... please help me.

Thanks

written by Daniel , March 24, 2008

Alex,
You need to register before you can download the fla.

written by alex , March 25, 2008

I am registered. But I don't see the link to download.

written by zahir , April 02, 2008

I LIke So Much for your site, very excellant for your site,
wish you all best for your future planning decision....

written by mann , April 04, 2008

can i give other effect on image (alpha)

written by pandariya Manoj , April 04, 2008

very nise job
thank you for this action script
thanks again

written by ancha , April 04, 2008

anybody help me?

how the actionscript to download file pdf ?

written by dodes , April 04, 2008

Does the actionscript load photos from an external file? I am looking for something that will allow clients to update photos in a folder and have the flash file dynamically update.

Thanks!

written by AnaS , April 06, 2008

Yes, you can load photos by using an .xml file. I'll try to write a tutorial about this in the next few days. I'll come back with more details.

written by Ross Carbutt , April 08, 2008

This seems to be only useable in actionscript 2 but im using actionscript 3

written by Ross Carbutt , April 09, 2008

Ive figured it out for actionscript 3 now

I have used a UILoader as a target frame

thumb1.addEventListener(MouseEvent.CLICK, showimage);
//thumb1 is the instance name of the thumbnail
//showimage is the function name

var link1:URLRequest = new URLRequest("image1.jpg");
//link1 is the URL request
//image1.jpg is the name of the image file

function showimage (event:MouseEvent):void
{
targetframe.load(link1);
}
//targetframe is the instance name of the UILoader

written by erick , April 11, 2008

Hola anita buen tut congratulation!!!

written by Grace , April 11, 2008

I just realized that after a long period of time the image on the right disappears when it is not touched. How can i keep the image there when a user is not touching the navigation?

Please Help

written by Elai , April 12, 2008

Ross, I have been trying to figure this out for days. Can you post the complete code or point to some sample files? Thanks!

Elai

written by Ross Carbutt , April 14, 2008

Well the code i posted is pretty much all you need, just keep copying and changing it for each different file really.

I'll make a sample file later today or tomorrow and upload it.

written by velavan , April 19, 2008

i want know clear details about photo gallery using xml with moviecliploader. thanks

written by melroy , April 24, 2008

Thnx for this tutorial, learned allot..

written by Marc Dubief , April 27, 2008

I can't open this archive...unexpected file format? I'm using Flash 8.

written by UnderDOS , May 05, 2008

Can we insert Action Script on GIF Picture...
If someone look a picture on his browser...
Script injection will executed... Maybe for redirection...

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (21)