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

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (12)