How to create a simple image gallery in flash cs5

18,287 views
18,021 views

Published on

Published in: Design, Technology, Art & Photos
3 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
18,287
On SlideShare
0
From Embeds
0
Number of Embeds
99
Actions
Shares
0
Downloads
301
Comments
3
Likes
2
Embeds 0
No embeds

No notes for slide

How to create a simple image gallery in flash cs5

  1. 1. How To Create A Simple Image Gallery In Flash CS5 Prepared by: Lyndon Jeorge A. Mendoza
  2. 2. Overview In this tutorial we will show you how to createan simple image gallery with thumbnails in FlashCS5. We will apply a couple of simple, yet nicetransitions to the images and thumbnails. This willrequire you to get the hands a bit dirty in animationand action scripting. However, this is going to beeasy and fun! So here we go.
  3. 3. Step 1Create a new file with ActionScript 3.0 and modify the document like it’s shown onthe screenshot below. You can enter the document properties via the admin panel(follow the highlights in red) or pressing Ctrl+J.
  4. 4. Step 2Add four images from your computer to your library. To do this press File => Imort=> Import to library. You can also import the images directly to the stage, bypressing Ctrl+R.Next, create three new layers and give them thenames Buttons, Images and Actions. To rename a layer, double click on it andtype the text. See the shot below.
  5. 5. 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.Go to the Buttons layer and select the first frame on the timeline. Drag theimages from your library to the stage (in case you haven’t imported themright to the stage already) and modify their size to 114×85 px. Be sure to dragthe images to our document area which we’ve made black earlier.
  6. 6. Now you have your thumbnails on the stage. Set image alignmentselecting Align in Window menu, or just press Ctrl+K. Align pics to thebottom and distribute horizontal center like it’s shown below.
  7. 7. Step 3Our thumbnails are going to be buttons, so now we need to convert the images intothe Button symbols. Using the Selection Tool, right click on the first thumbnailimage and choose “Convert to Symbol”, or simply hit F8. In the opened windowset the type Button and name the symbol btn1. Click “OK” to save the changes. Dothis for the other three images and give them the names btn2, btn3 and btn4,respectively.
  8. 8. Now we have to give each of these the same Instance Name which is a name to referto your symbol or object in ActionScript. Instance Name can be set in the Propertiespanel which you can enter by selecting the necessary object on the stage. InstanceName of the btn1 button will be btn1 and so forth. 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. You timeline should have the following look by now.
  9. 9. Step 4OK, let’s put the images that we will be exactly viewing in our gallery. Switch tothe Images layer and select the first frame on the timeline. Drag the image thatcorresponds to the first thumbnail from your library to the stage. Size it down tothe 358×268 px and set its position to the 93×18. Of course, you may set your owndimensions and place the pictures whatever you like; this is just what we use for thistutorial.Insert three more blank keyframes (F6) and do the same operation with the rest of theimages.
  10. 10. Now go back to the timeline, select the first frame and go to the Properties panel.Here we will set the Frame Label. It’s important to remember about this becausewe’re going to reference frame labels in the ActionScript later. We’ve got four framelabels: model, dreamy, dancing and teacher, respectively.
  11. 11. Step 5So far we’ve got a thumbnail gallery where each of the thumbs is a button. Our nextstep is to add some action script so we could click on the button to play the rightframe. Go to the Actions layer and drag the first frame up to the fourth cell. Yourtimeline should have the following look by this moment:
  12. 12. Go back to the first frame in the Actions layer and hit F9 to open the Actions window.Copy and paste the following code into your Actions window. Don’t worry, we will explain ingreat detail what happens shortly. stop(); btn1.addEventListener(MouseEvent.CLICK,play1); function play1(event:MouseEvent):void{ gotoAndStop ("young") } btn2.addEventListener(MouseEvent.CLICK,play2); function play2(event:MouseEvent):void{ gotoAndStop ("thoughtful") } btn3.addEventListener(MouseEvent.CLICK,play3); function play3(event:MouseEvent):void{ gotoAndStop ("dancing") } btn4.addEventListener(MouseEvent.CLICK,play4); function play4(event:MouseEvent):void{ gotoAndStop ("old") }
  13. 13. After you have copied and pasted the above code, go to Control => Test Movie orpress Ctrl + Enter to see the result gallery. Here is what you should get:
  14. 14. Let’s look closer at what you’ve just done and learn more about AS functions. Thefirst thing you see in your code window is Stop action. Stop(); Any effect you create in Flash repeats continuously when you test or publish your movie. Stop action is used to actually stop it from looping. You can apply the Stop action to any keyframe and the movie will stop playing at that exact point. The next code line is btn1. addEventListener(MouseEvent.CLICK,play1); This script means that btn1, our instance name, referring to the first button in our thumbnail gallery, is responding to a mouse click and calls for the functionplay1.
  15. 15. And here goes the definition of that functionfunction play1(event:MouseEvent):void{ gotoAndStop("model") }In this line:•function play1 tells us the name of the function;•(event:MouseEvent) defines the type of the event , which is interaction with themouse here,•void is a special type used to specify that the function doesn’t return any data;•gotoAndStop (“model”) causes the playhead to jump to the frame model andstops from progressing further.All right, this is the initial script that allows our image gallery to work properly. As yousee, this piece of code repeats for the rest of the buttons, we change only instancenames and frame labels.
  16. 16. Step 6To add some spice to our images when they come in, let’s learn how to animate them inFlash CS5.So, go up to your Images layer and select the first frame. To be able to add someanimation to our images, we need to convert them to movie clip symbols. To do thishit F8 and select Movie Clip in the Type menu. Repeat this operation for each of the fourimages. Let the names be movie1, movie2, movie3 and movie4.
  17. 17. Choose the Selection tool from your toolbar and double click on the first movieclip we’ve just created. Now we can animate it.Right click on the movie clip on the stage and select Create Motion Tween.
  18. 18. Step 6To add some spice to our images when they come in, let’s learn how to animate them inFlash CS5.So, go up to your Images layer and select the first frame. To be able to add someanimation to our images, we need to convert them to movie clip symbols. To do thishit F8 and select Movie Clip in the Type menu. Repeat this operation for each of the fourimages. Let the names be movie1, movie2, movie3 and movie4.
  19. 19. You can see that it automatically inserts some frames; the number of frames inserteddepends on your frame rate. By default Flash CS4 has a frame rate of 24 frames persecond. So basically you have the number of frames that would equal one second.Let’s cut it down to 15 frames per second – just drag the border of the 24th frame downto the one we need.Now let’s create a sleek fade-in effect by means of some color effects and motiontween. Select the image on the stage while the playhead is on the last frame. Go to theobject properties, choose Alpha in the Style menu and put it 0%.
  20. 20. Move the playhead back and forth and you will see that we’ve created a fade-outeffect for our image – it’s completely transparent on the last keyframe. Right clickanywhere on the motion tween area and select Reverse Keyframes. Now we have thefade-in effect applied to the picture.Click Ctrl+Enter to test your movie. You will see that the Movie plays over and over againand we don’t want this loop happen. Stop action comes in handy here. Return to yourmovie clip window, right click on the motion tween area and select Convert to Frame byFrame Animation. Then go to the last frame and hit F9. Type stop() in the Actionswindow and that should fix the problem.
  21. 21. Step 7Another cute effect we’re going to apply is rollover. Wouldn’t it be nice to have thethumbnails change a bit when the mouse hovers over? And that’s pretty easy to do, herewe go! 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. So, insert blank keyframes (F6) into each of the frames.
  22. 22. Go to the Over and select the button on the stage. In order to modify the way it isrendered, we need to convert it into a graphic symbol. Press F8 and selectGraphic in theType menu. Now go to the object properties and do some changes to the color effect. Youmay do whatever you want, we changed the RGB parameters, for example (see thescreenshot below).Switch to the Down frame and apply some effects if you want the button to change itsstate when you click on it. In this case, we’ve added more red to it.Move on to the Hit area and using the Rectangular Tool draw an area you want to beclickable on your button. Repeat this step for the other three buttons andpress Ctrl+Enter to see the result and that’s it. Now you know how to create a simpleimage gallery with thumbnails and spice it with some nice effects.

×