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
written by manish jain , December 15, 2008
it's nice tutorials...............i needed this.... how can i use filter effect in flash with action script.... don't mind english is poor...........
written by Mimmi Purmonen , January 15, 2009
This example doesnt work at all.At first you have to got a button to be able to release it. It doesnt work with a movieclip. For the second, the .fla file has a incorrect format and isnt able to be opened.
written by clarissa , January 21, 2009
Hi, This is an excellent tutorial. It worked well and I tried with 6 jpeg images. The only problem is it does not stay for a long time. Kindly help. What else code should be added so that the image stays for a longer time when a viewer is going through the same.
written by James Baldwin , February 04, 2009
I need to have the buttons load dynamically when the flash starts. Is there anyway to load the images into the buttons when it comes up? In other words, "Is there a way to us loadMovie to assign images to buttons?". If not, is there any other way to do it? I tried having a button reference a MovieClip but evidently it does not recognize the instance of it.
written by VARUN.S.I , February 11, 2009
Hi Can you tell me how to write a action script to scroll pictures up and down in vertically.
written by prabin , March 31, 2009
It's very nice tutorials.How to move world and sattelight around it.
written by Kim Heard , April 03, 2009
I want to add my own images, what do I need to change in the action code? I think I just need to replace the URL but to what. The images are in a folder on my hard drive.
written by s , April 15, 2009
Kim Did you ever find out how to use your own images? Trying to do the same.
written by sima , April 22, 2009
Hi, It's very nice tutorials.
written by Just call me Dean , May 15, 2009
This worked perfectley bro - many thanks indeed!!
written by danni durham , June 13, 2009
Doesn't work at all. I'm getting undefined properties for every line. NEED HELP ASAP!!!! WORKING ON FINAL FOR SCHOOL!!!!
written by karl , July 04, 2009
this tutorial is very helpful! but i have another problem how can i put a loader or a mini graphic that will tell the viewer that the file is loading and he/she needs to wait 'till it finish to load. pls pls pls help me with this problem
written by RemcoNLN , July 20, 2009
hey nice tutorial, but I have one problem. In order to make it work I want to load the pictures form my own computer. How can incorporate this in the code?
written by Jacques. , September 25, 2009
Hi. Excellent tutorial, I've been looking for a simple thumb 'fade' code for a while. Firstly, I can't get the first image to open when 'enter frame'. I'm trying to encorporate this into a gallery website, and it just doesn't open (but does when it's thumb is pressed...) I'm using this code for the initial opening: this.onLoad=function(){ loadMovie("images/bellflowers.jpg", content_mc); content_mc._alpha=0; } Then your code continues, and works fine. Also, how would you update this to use XML to load the thumbs/images? I assume it's all to do with the loadMovie path. And would you be able to keep the thumb MC's in one place, and re-use them for other page's positions? As I want many on a page, but don't want to clutter my library (or would you use AS to create new empty MC's and position them?) Thanks,
written by Kambui , December 31, 2009
Is there a fix for the image disappearing after a short period of time? It normally happens if you don't move the mouse. Otherwise I love the actionscript - it's working great for my client's site.
written by Nods , January 12, 2010
Good day! i finish everything but it couldn't work out, the problem is how to get the exact URL? my images doesn't affair pls help me with this......
written by augusto gonzalez , March 07, 2010
esta genial el tutorial as2 le doy a las miniaturas, si me mustra las fotos ampliadas pero desplasadas del lugar donde deberia estar. quien me puede ayudar
written by satheesh_benji , March 11, 2010
I need to play a movieclip while clicking another movie clip with som time delay..can any one help me..!
written by reTrOBIAS , March 12, 2010
Been searching for help for hours now and everyone had a solution - but this is the absolutely the best. Its short, easy and it works perfectly! Thank you very much for this. The only thing that is missing is the if (container._alpha Do you need more help? Ask now!
|
|
| Last Updated ( Friday, 21 March 2008 ) |
