Flash Tutorial: Auto-play Image Gallery

1. Flash Auto Play Image Gallery
w/
Thumbnails
Fisheries Information Management Center
Prepared by: Lyndon Jeorge A. Mendoza

2. Overview
In this tutorial we will show you how to create an auto-
play image gallery with thumbnails in Flash CS5. We will apply
a couple of simple, yet nice transitions to the images and
thumbnails. This will require you to get the hands a bit dirty in
animation and action scripting. However, this is going to be
easy and fun! So here we go.

3. Added Feature
Auto-play Image Gallery with Thumbnails in Flash CS5
also has a feature that when you click a particular thumbnail,
the gallery will not continue playing till the mouse cursor is not
remove over the thumbnail (see the Final Result video).

4. Starting tutorial…
AUTO-PLAY IMAGE GALLERY
W/ THUMBNAILS

5. Step 1
Open your Adobe Flash CS5
and we will start creating your own
Flash Auto-play Image Gallery with
Thumbnails.

6. …cont. of
Step 1
Create a new file with ActionScript
3.0 and modify the document just
by clicking the „Edit‟ button like it‟s
shown on the screenshot . You can
enter the document properties via
the admin panel (follow the
highlights in red) or pressing Ctrl+J.
On this tutorial I made mine to a
width of 600px by 500px of height
with white background.

7. Step 2
After customizing your document,
we are now ready to add some
layers.
Just right-click your mouse on the
Layer Area and choose „Insert
Layer‟ or click the small button
highlighted in red for shortcut .

8. …cont. of
Step 2
After creating the three new layers,
give them the names Thumbnails,
Big Images and Actions.
To rename a layer, double click on
it and type the text. See the
screenshot.

9. Step 3
Add four images from your
computer to your library. To do this
press File => Import => Import to
Library. You can also import the
images directly to the stage, by
pressing Ctrl+R.

10. …cont. of
Step 3
Now choose the images you want
to put one your Image Gallery.
You can choose as many as you
want but for this tutorial, I use only
four images.

11. …cont. of
Step 3
You can see on the Library the
images that you have chosen.

12. Step 4
Go to the Buttons layer and select
the first frame on the timeline. Drag
the images from your library to the
stage (in case you haven‟t imported
them right to the stage already).
Notice that the first frame of each
layer has a small circle on it. This is
a blank keyframe. Once you put
anything on the stage, the circle
transforms into black dot which
corresponds to the filled keyframe.

13. …cont. of
Step 4
And modify their size to 129×86 px.
Be sure to drag the images to our
document area which we‟ve made
white earlier.
Do the same steps to the 3
remaining images to complete the
set of our thumbnails.

14. Step 5
After completing the set, now you
have your thumbnails on the stage.
Set image alignment by
selecting Align in Window menu, or
just press Ctrl+K.

15. …cont. of
Step 5
Align the images to the bottom and
distribute horizontal center like it‟s
shown on the screenshot.

16. Step 6
Our thumbnails are going to be
buttons, so now we need to convert
the images into the Button symbols.
Using the Selection Tool, right click
on the first thumbnail image and
choose “Convert to Symbol”, or
simply hit F8.

17. …cont. of
Step 6
In the opened window set the type
Button and name the symbol btn1.
Click “OK” to save the changes. Do
this for the other three images and
give them the
names btn2, btn3 and btn4,
respectively.

18. …cont. of
Step 6
Now we have to give each of these
the same Instance Name which is a
name to refer to your symbol or
object in ActionScript.
Instance Name can be set in the
„Properties‟ panel which you can
enter by selecting the necessary
object on the stage. Instance Name
of the btn1 button will be btn1 and
so forth.

19. Step 7
Right click on the first frame of the
Buttons layer, select Copy Frames,
go to the fourth frame and Paste
Frames the same way. Or you can
just drag the first frame up to the
fourth cell to copy it.

20. …cont. of
Step 7
As you notice, there‟s a Keyframe
at the end of the layer. We don‟t
need that so we have to delete it.
Just right-click on the Keyframe and
choose „Clear Keyframe‟ to delete
and you will see the result on the
second screenshot.

21. Step 8
OK, let‟s put the images that we will
be exactly viewing in our gallery.
Switch to the Big Images layer and
select the first frame on the
timeline. Drag the image that
corresponds to the first thumbnail
from your library to the stage. Size
it down to 558×320 px and set its
position to 18×0.05.
Of course, you may set your own
dimensions and place the pictures
whatever you like; this is just what
we use for this tutorial.
Insert three more blank keyframes (F6) and do the same
operation with the rest of the images.

22. …cont. of
Step 8
You can change the image by
clicking the „Swap‟ button
(highlighted in red). This will allow
you to swap the current shown
image to other image. Just be sure
that you‟re on the frame you want to
change the image.
After changing or swapping the
image, resize it again to have the
standard size same on what we did
on the first one.

23. Step 9
After changing all the images‟
properties, we are now to create the
actionscript for the images‟ timer.
This is important since we wanted
an auto-play image gallery.
Switch to the Actions layer and
select the first frame on the
timeline.
Right-click on the frame and choose
„Actions‟ or simply hit F9 for
shortcut.

24. …cont. of
Step 9
Now we have the blank area ready
for typing the code for our timer.
Just type in the window the
following code:
var nextImage:Timer = new
Timer(6000);
nextImage.addEventListener(Timer
Event.TIMER, playNext);
nextImage.start();
function
playNext(event:Event):void{
nextFrame();
}
The code will give the function to automatically start the movie,
play the next image and put time interval for showing each images.

25. Step 10
After putting up some actions, we
need to reset the play. This is
important in order to play our
gallery continuously and get back to
the first image again.
We just have to create another
blank keyframe for our actionscript
to reset the time of the gallery.
Just right-click on the frame (under
the Big Images layer next to the last
keyframe) and choose „Insert Blank
Keyframe‟.

26. …cont. of
Step 10
Now we have a blank keyframe
ready for adding the actionscript.
Right-click on the blank keyframe
and choose „Actions‟ of simply hit
F9 for shortcut.
Now type in the following code on
the pop-up window shown on your
screen:
nextImage.stop();
nextImage.reset();
gotoAndPlay(1);
This will give the function to stop the next image, reset the timer
and play the first frame again.

27. Step 11
Now we have to create another
function that will call the image
when you click one of the
thumbnails.
Switch to Actions layer and do the
same steps of adding actionscripts
shown on the previous slides and
type the following codes (see
screenshot or see the next slide).

28. Actionscript for the buttons:
stop();
///////////////////////////First///////////////////////////// /////////////////////////Third//////////////////////////////
btn1.addEventListener(MouseEvent.CLICK,play1); btn3.addEventListener(MouseEvent.CLICK,play3);
function play1(event:MouseEvent):void{ function play3(event:MouseEvent):void{
nextImage.stop(); nextImage.stop();
gotoAndStop (2); gotoAndStop (4);
btn1.addEventListener(MouseEvent.ROLL_OUT, btn3.addEventListener(MouseEvent.ROLL_OUT,
rollout); rollout);
function rollout(event:MouseEvent):void{ function rollout(event:MouseEvent):void{
nextImage.reset(); nextImage.reset();
nextImage.start(); nextImage.start();
} }
} }
//////////////////////////Second///////////////////////////// //////////////////////////Fourth/////////////////////////////
btn2.addEventListener(MouseEvent.CLICK,play2); btn4.addEventListener(MouseEvent.CLICK,play4);
function play2(event:MouseEvent):void{ function play4(event:MouseEvent):void{
nextImage.stop(); nextImage.stop();
gotoAndStop (3); gotoAndStop (5);
btn2.addEventListener(MouseEvent.ROLL_OUT, btn4.addEventListener(MouseEvent.ROLL_OUT,
rollout); rollout);
function rollout(event:MouseEvent):void{ function rollout(event:MouseEvent):void{
nextImage.reset(); nextImage.reset();
nextImage.start(); nextImage.start();
} }
} }

29. Now our image gallery is almost done but if you test the
movie, you will notice that after playing the last image you will
see a fast blink. And that is some kind of a problem to me. So
I try to find an alternative to that and you will see it on the next
slide.

30. Step 12
To remove the “blink effect” on our
image gallery, we have to create
blank keyframes just by clicking the
first frames on both Thumbnails and
Big Images layer. Hold Shift then
drag the frames one step.

31. …cont .of
Step 12
Now you will notice that you have
already blank frames on both
Thumbnails and Big Images layer.
What we need to do next is to copy
the first filled frame one by one on
both layers.
Switch to Big Images layer and
right-click on the first filled keyframe
and choose „Copy Frames‟.

32. Step 13
Now paste the copied frame on the
first frame and you will see that the
blank key frame is filled now.
Do the steps also on Thumbnails
layer and see the result.

33. Step 14
To add some spice to our images
when they come in, let‟s learn how
to animate them in Flash CS5.
So, go down to your Big Images
layer and select the first frame then
the image. To be able to add some
animation to our images, we need
to convert them to symbols and
choose graphic as the type.

34. …cont. of
Step 14
On the pop-up window, set the
name of the symbol to mov1 and
change its type to Movie Clip like
shown on the screenshot.
Repeat this operation for each of
the four images. Let the names
be movie1, movie2, movie3 and
movie4.

35. …cont. of
Step 14
Now double-click the newly
converted symbol. What we need to
do now is to add 3 more layers.
Same on the previous steps, right-
click on the layer area and choose
„Insert Layer‟ or just click the button
below for shortcut.

36. …cont. of
Step 14
After creating the three new layers,
give them the names Content, Title,
Launch and Actions. To rename a
layer, double click on it and type the
text (see screenshot).

37. Step 15
What to do next is to add title.
Switch to Title layer and choose on
the Properties panel and press the
letter „T‟ button or just hit „T‟ on your
keyboard for shortcut to toggle „Text
Tool.

38. …cont. of
Step 15
Now click on the stage and start
typing the title for your image.
Remember to switch on the Title
layer before putting your title on the
stage.

39. Step 16
Now it‟s time to add the link button
for the content of our image.
Do the same steps on how to add
title and what we need to add is just
to convert it to button.
Switch to Launch layer, type in your
title then click anywhere to the
stage in order to set that your done
typing. Right-click on your title and
choose „Convert to Symbol‟ or
simply hit F8.

40. …cont. of
Step 16
On the pop-up window, name your
button to btnlnk1, change its type to
Button and click OK.

41. Step 17
Next is to add the actionscript that
will call the page of your image.
Switch to Actions layer and right-
click the blank keyframe or hit F9
for you to type in the codes.

42. …cont. of
Step 17
On the pop-up window, type in the
following codes:
btnlnk1.addEventListener(MouseEv
ent.CLICK,
fl_ClickToGoToWebPage);
function
fl_ClickToGoToWebPage(event:Mo
useEvent):void
{
navigateToURL(new
URLRequest("../pages/AboutUs/ne
ws/IIMCplant_bicol.htm"), "_blank");
}
This actionscript will give the function to navigate the content page
of the image into new tab when the button is being clicked.

43. Step 18
Now it‟s time to add some
animation on our image, title and on
the link button.
First, switch to the Content layer.
Now choose the desired span of
time then right-click on that
particular frame and choose „Insert
KeyFrame‟ or simply hit F6 for
shortcut.

44. …cont. of
Step 18
You can see that it automatically
inserts some frames; the number of
frames inserted depends on your
frame rate. Let‟s cut it down to 15
frames per second.
Select the image on the stage. Go
to the object properties,
choose Alpha in the Style
menu and put it 0%.

45. …cont. of
Step 18
Click Ctrl+Enter to test your movie.
You will see that the Movie plays
over and over again and we don‟t
want this loop happen. Stop action
comes in handy here.
Return to your movie clip window.
Then go to the last frame and
hit F9. Type stop() in the Actions
window and that should fix the
problem.

46. …cont. of
Step 18
Now let‟s create a sleek fade-in
effect by means of some color
effects and motion tween.
Just right-click on any area between
the first and last keyframe and
choose „Create Classic Tween‟.
Do the same steps on both Launch
and Title layer to have the same
effects on your title and link button.

47. Step 19
After having all the effects for the
images, title and link button, switch
to the action layer and insert a
blank keyframe same with the
length time span of the other layers.
This is just to make the actionscript
available on the time span of the
gallery while playing.

48. Step 20
Another cute effect we‟re going to
apply is rollover.
Double click on the first button in
the thumbnail line, which is btn1.
You can see four frames on your
timeline – Up, Over, Down and Hit.
These are the states of our button.
•The Up frame is the inactive stage when
nothing is happening, the button is
displayed as it is.
•The Over is the stage when the mouse
hovers over the button.
•The Down frame is the stage when the
button is clicked on.
•The purpose of the Hit frame is to define
the clickable area or the coordinates of
the button.

49. …cont. of
Step 20
Now you will see that the UP frame
is already filled. What we need to
do is to fill the other frames and
we‟re ready to add some effects.
Hit F6 to the succeeding frames
one by one to fill.

50. …cont. of
Step 20
Switch to UP frame and right-click
the first thumbnail and convert it to
symbol.
On the pop-up window name your
newly converted thumbnail button
to btnup1 and select Graphic as the
type of symbol.

51. …cont. of
Step 20
To add effects, you can choose
whatever kind you want. For this
tutorial I‟ve chosen Tint to add color
effects.
Go to the Properties panel, click the
Style dropdown menu and choose
„Tint‟ and set the tint to 50%, red to
59%, green to 142%, and blue to
173% (follow the highlights in red)
to have this color effects for your
thumbnail button.

52. Step 21
After having the color effects, we
are now to create an emphasizing
effects on our thumbnail.
Switch to OVER frame, right-click
the thumbnail and convert it again
to symbol. Name it btnover1 and
select Graphic as style.

53. …cont. of
Step 21
Now to add an emphasizing effects,
click the thumbnail and move it a
little bit higher than the other
thumbnails.

54. …cont. of
Step 21
To add effects when the thumbnail
is clicked, do the previous steps on
how to convert it to symbol with a
graphic style and name it
btndown1.
Select the Style to Tint and set the
colors to 0% (follow the highlights in
red).
This will give you the effect of
making your thumbnails color black
when clicked.

55. …cont. of
Step 21
Move on to the Hit area and using
the Rectangular Tool draw an area
you want to be clickable on your
thumbnails. Repeat this step for the
other three thumbnails.

56. …cont. of
Step 21
To get back into movie clip area,
click the blue arrow button on the
upper left of the stage (see the
screenshot).

57. Step 22
After having all the effects for your
thumbnails, go to Control => Test
Movie => Test or press Ctrl +
Enter to see the result of your
image gallery.
Now you know how to create an
auto-play image gallery with
thumbnails and spice it with some
nice effects.

58. Final Result

59. References
• How To Create A Simple Image Gallery In Flash
CS4 http://tuts.flashmint.com/how-to-create-a-simple-
image-gallery-in-flash-cs4/
• Flash Tutorial: Create A Simple Image Gallery! -HD-
http://www.ilmugrafis.us/flash-tutorial-create-a-simple-
image-gallery-hd.html
• Flash Slideshow Image Gallery
http://layersmagazine.com/flash-slideshow-image-
gallery.html

60. Comments and Suggestions?
If you have questions or suggestions regarding
to this tutorial, please send me your email at
mendozalyndeorge@yahoo.com. Thank you!