Flash picture gallery with twinkling transition

In this tutorial it will be explained how to create a flash picture gallery that can be browsed using next and previous buttons.

Prepare 5 picture having dimensions 400x300 pixels and let's start!

1. Create a new Flash document and then go to Modify >> Document (Ctrl+J) or to the Properties panel and set dimensions to 400x350 pixels.

2. Insert two new layers and rename them from top to bottom: actions, pictures, background.

3. In the background layer draw a rectangle about 400x50 using the Rectangle Tool (R). Set the Fill Color to #006699 and align it to center horizontal and bottom on vertical to Stage (choose same options like in the next picture):

Also put here two buttons from Flash collection of buttons or create two buttons (for learnig how to create buttons in Flash see Making a simple Adobe Flash 8 button – tutorial for beginners). Give to the buttons instace names of prev_btn and next_btn.

Then go to the frame 5 and choose Insert >> Timeline >> Frame (or press F5 key).

4. In the pictures layer insert blank keyframes (Insert >> Timeline >> Blank Keyframe) from frame 1 to 5. Import a different picture in each of these frames. Select File >> Import >> Import to Stage (Ctrl+R), choose the picture you want and press the Open button.

5. Select the picture from the first frame of pictures layer and go to the Properties panel. Set W: 400.0, H: 300.0. While the picture is still selected go to the Align panel and align the picture horizontal center and distribute top edge (see picture below):

6. Select the picture and go to Modify >> Convert to Symbol (F8). From the window that appears select MovieClip as Type, center for Registration point and type picture1MC in the Name field. While the movie clip is still selected go to the Properties panel and give it an instance name of picture1_mc.

7. Now double-click the movie clip (or right-click and choose Edit in Place) to edit it. You now should be in Edit mode for your movie clip (see next image):

8. Insert five new keyframes in Layer 1 (Insert >> Timeline >> Keyframe or press F6). Then go to the frame 1, 3 and 5 and delete their content (click the frame and then press the Delete key). Go to frame 6, open the Actions panel (F9) and put in the next ActionScript code:

stop();

9. Great job! repeat the steps 5, 6, 7, and 8 for each of the pictures except their names (for example for picture 3 give the name picture3MC to movie clip and picture3_mc to instance).

10. Now comes the ActionScript. Go to the first frame of the actions layer, open the Actions panel (F9) and put the following code in:

stop();
var contor=0;
prev_btn.onRelease=function(){
contor=(contor+4)%5; // % is modulo operator that returns the remainder (contor+4) divided by 5 that is the same like contor-1 if contor is greater than 0, but if conto4 is 0 (contor+4)%5 will take the value of 4
_root.gotoAndStop(contor+1);
}

next_btn.onRelease=function(){
contor=(contor+1)%5; // if contor is less than 4 then contor will take the value of contor+1, but if it is 4 then it will take the value of 0
_root.gotoAndStop(contor+1);
}

11. Now just test the movie (Ctrl+Enter) and admire your Flash picture gallery with twinkling transition.

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

Subscribe now via RSS feed and get all the new tutorials

written by Chris , November 22, 2007

How 'bout an AS3.0 example?

written by Joseph S , November 22, 2007

Hi Chris
I like very much your article on twinkling transition, but my control button end up in the middle, I'll try to move it.
Hope to find a lot more like this article especially by yourself
Thanks
Joseph S.(in Bangkok, thailand)
This e-mail address is being protected from spam bots, you need JavaScript enabled to view it

written by harrisvisa , December 01, 2007

very nice

written by iPod touch , December 06, 2007

very nice, thank you-iPod touch

written by Raj Laxmi Dash , December 18, 2007

I liked you tutorials article of the twinkling transition effect very much... Thanks..
But though I m a beginer in flash now I m still unaware of other effects, different tools utility and even basics of flash.. I hope u will help me further for it...
Bye!!!

written by Rhees , December 19, 2007

Hello,

This is my 2nd day with flash but I could not understand most of what I see. I would like to make a simple flash gallery for about 20 panorama pictures and embed it into a website. What I would like is just like a slideshow with no previous and next buttons.

Thank you in advance for any help.

written by Irvin , December 21, 2007

is there any other transition effects that i can choose??? something like that is moving a transparent vertical white background all over the picture before the image has finish to load

written by emma collins , December 28, 2007

Hi,

I am trying to create a Flash Picture Gallery for only a select image from my portfolio. Basically scene 1 has a selection of images to choose from in order to enlarge. There is one image I want to enlarge and then allow the viewer to have the option to scroll back and forth through the various other related images by using next and previous buttons.

However, I have had no luck I am using Flash CS3 and am looking desparetley for Actionscript code for 3.0.

All I need, I think is code to create the next and previous buttons in a movie symbol and then placing the movie symbol in to sene 1. So, when the image has been hoovered over the viewer then has more options to view more of a choice in respects to that particular design - does that make sense?

Hope someone can help!

M*

written by klaus , January 08, 2008

i dont get this

written by dtyler , March 06, 2008

used action script 2 - the twinkling effect does not work - sh I use actionscript 3?

Please advise.

written by james papademas , March 24, 2008

Hi

Where do I download the flash file?

written by peperina , April 16, 2008

my btns are not working maybe is sth about the contour... can you help me with that? can I just give the action for prev btn -1 and the other 1????

written by Zed , May 22, 2008

hi there

i'm new at flash, so this tute is really helpful. the only problem i'm having is the action script code for step 10...for some reason all i get are errors when i test the movie, and i cant control the picture selection, it just plays all my pictures at a million miles/h.

is there anyway you would be able to help?

regards,
Zed

written by beso1 , June 05, 2008

how can i download this tutorial?

written by abhishek khichariya , June 13, 2008

i need of coding for lyteshow flash images with "next" and "previous" option. I searched all site but not yet get any result.Because i need that coding with "next" and "previous" option

written by bryo , June 24, 2008

if i have more than 5 picture would i have to change a value on the actionscript because its only showing 5 pictures and i have about 9

written by Muhammad Iqbal , September 18, 2008

thanks a bunch.....it saved my day as a client desperately required something like this is a short time....its working perfect....

kudos :)

written by Pete P , October 15, 2008

brilliant Tutorial. Works great when testing the scene, however, when i export the movie and press the next/previous buttons, it just stops the whole movie from working. I just get left with a blacnk stage, everything else dissapears. why is this? Pete

written by Usman Arshad , October 23, 2008

thanks for sharing

written by Thomas Dingjan , November 06, 2008

hey, how do i edit this piece of code if i want more pictures... i am making a presentation that requires 8 pictures, not just 5. if you could get back to me within the next few hours it would be much appreciated
many regards. TommyD520

written by vegard11 , January 07, 2009

same question as Thomas Dingjan!? answer anyone?

written by Jan Miak , February 13, 2009

hallo everybody, what is the code like when using more then five pictures (in my case 27) and action should start at frame 20?
Thanks for answer.

written by Filipegr , March 11, 2009

how can i put more than just 5 pictures? :S

if you could mail me i will gratefull...

Thnx i'm just initiate in Flash but i did this gallery easy but i have difficult do increase the gallery, i mean more images :X...

Keep the good work!!! ;)

written by Curious Ann , April 15, 2009

is giving me compile errors of 1120: Access of undefined property _root.gotoAndStop(contor 1); I am using CS3 version 3.o actionscript

please Help

written by derjunger , April 30, 2009

It doesn't work.

written by edma , May 10, 2009

thnx nice and easy :)

written by chrismantu45 , June 07, 2009

Hi!
Am getting the following message:
1120: Access of undefined property _root.gotoAndStop(contor 1);

is this because am using FLASHCS4 action3?

written by shoaib , June 22, 2009

worst tutorial

written by ffff , June 22, 2009

ffdfd

written by pranesh , October 03, 2009

hi i need to know how to use actionscript 2.0 or 3.0 in flash what software to be used for this am working with flash8.0

written by togery , November 20, 2009

How can i do this with symbols?

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (31)