Flash photo gallery using ActionScript loadMovie() method |
| Written by AnaS | |
|
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]);
URL - is the relative or absolute path to the external file to be loaded; 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: 1. Prepare 3 nice pictures having dimensions 180x180 pixels and 3 thumbnails for those pictures with dimensions 60x60 pixels. I gave them the names image1.jpg,image2.jpg,image3.jpg and thumb1.jpg, thumb2.jpg, thumb3.jpg. 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.
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.
//this code ads the fade effect to photos
You need to Register in order to download the FLA file.
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 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...
written by Ezis , May 18, 2008
Thanks, but how can I move the these frames to frame 5 and stop.. (I try write comand "stop;" at comandline 1, but moovie loops anyvay)
written by Ezis , May 18, 2008
I did it! :) Thanks!
written by Welli , May 20, 2008
I need something like this: 1. A button - I already did it 2. When the button is cliked - go to other page - I already did it. 3. When a cursor hover a button - a preview (jpg file) of the page in no.2 pop-up Can you help me with number 3? Does the button need to be a movie clip too to use the loadMovie() action script?
written by Kathryn Rose , May 26, 2008
I am very new to all of this but I need to use AS3 in Flash. Could you do the same tut but for AS3?
written by Mehmet Fatih Akbulut , June 17, 2008
to Kathryn Rose, do each steps in tutorial above till the as codes. (step 8) then copy the codes below: images_mc.addEventListener(Event.ACTIVATE, imgonLoad); images_mc.addEventListener(Event.ENTER_FRAME, dothis); thumb1_mc.addEventListener(MouseEvent.CLICK, dothumb1); thumb2_mc.addEventListener(MouseEvent.CLICK, dothumb2); thumb3_mc.addEventListener(MouseEvent.CLICK, dothumb3); function imgonLoad(evt:Event) { images_mc.alpha=0; var l = new Loader(); images_mc.addChild(l); l.load(new URLRequest("http://www.tutorial5.com/tutorials/image1.jpg")); } function dothis(evt:Event) { if(images_mc.alpha!=1) images_mc.alpha =0.05; } function dothumb1(evt:MouseEvent) { var l = new Loader(); images_mc.addChild(l); l.load(new URLRequest("http://www.tutorial5.com/tutorials/image1.jpg")); images_mc.alpha=0; } function dothumb2(evt:MouseEvent) { var l = new Loader(); images_mc.addChild(l); l.load(new URLRequest("http://www.tutorial5.com/tutorials/image2.jpg")); images_mc.alpha=0; } function dothumb3(evt:MouseEvent) { var l = new Loader(); images_mc.addChild(l); l.load(new URLRequest("http://www.tutorial5.com/tutorials/image3.jpg")); images_mc.alpha=0; } ps: pay attention to instances' names. it may differ with the ones in tutorial.
written by Bala , July 07, 2008
help me about in action scirpt..
written by kenny dixon , August 08, 2008
I use the as3 code for the photo gallery. It only fades in a tiny bit each click. Any advice? I am trying to use the removeChild method to remove the image. Any advice? p.s. thank you for the tutorials and advice kenny
written by Renz , September 02, 2008
Hi, I tried your method and the picture is shown on the bottom-right of the movie clip. Pls. help!
written by sameer arshad , September 09, 2008
thanks for the tutorial but i would like to open the images in a pop up and instead of clicking on each thumbnail to open up a pop up i would like to to have just one pop up with next previous buttons on it to view all the thumbnail images in a larger view and in a series. can anyone help me with the script
written by Tim.dev , September 24, 2008
what script must you use to load the image without having to use the URL Request method for the image to load from within the local server i.e. a folder in the computer? NO XML.
written by mxky , October 01, 2008
It worked right after the first try! thanks for that, I was looking for how launch popups inside flash and no using IE or FF :)
written by Pete P , October 02, 2008
Im having a bit of trouble.. it is only loading one picture, the coding and locations of pictures are all correct. i have tried loads of gallery tutorials and the same thing happens, only one picture loads. how do do i get the others to load?
written by Lillyann Kapoor , October 08, 2008
This code is really helpful for me but i want a code dat load images randomly with a fadein -fadeout transition effect as well as a thumbnail option. Could u pls help me in dis.
written by sabrina , October 13, 2008
what if some of our pictures are different sizes like some are landscape and some are portrait. How can we get them to load in the middle of the images box instead of to one side
written by veerasrinivasakumar , November 22, 2008
how to create buttons using action script 2.0 from an external text file
written by Suzy , December 01, 2008
link is not working for me ... when i dl the fla file it will not open in flash. gives me a 'unexpected file format' message. help Do you need more help? Ask now!
|
|
| Last Updated ( Friday, 21 March 2008 ) |
