How to create a simple image gallery in flash cs5
Download as PPTX, PDF4 likes13,903 views
This document provides instructions for creating a simple image gallery in Flash CS5 with the following key steps: 1. Import images and create layers for buttons, images, and actions. Add the images as button symbols to the buttons layer. 2. Add actionscript code to the actions layer to make the buttons navigate to the corresponding image frames when clicked. 3. Animate the images on the images layer by converting them to movie clips and adding fade-in effects using motion tweens. 4. Add rollover effects to the buttons by changing their graphic properties on mouseover and click frames.
How to create a simple image gallery in flash cs5
- 1. How To Create A Simple Image Gallery In Flash CS5 Prepared by: Lyndon Jeorge A. Mendoza
- 2. Overview In this tutorial we will show you how to create an simple 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. Step 1 Create a new file with ActionScript 3.0 and modify the document like itโs shown on the screenshot below. You can enter the document properties via the admin panel (follow the highlights in red) or pressing Ctrl+J.
- 4. Step 2 Add 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, by pressing Ctrl+R. Next, create three new layers and give them the names Buttons, Images and Actions. To rename a layer, double click on it and type the text. See the shot below.
- 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 the images from your library to the stage (in case you havenโt imported them right to the stage already) and modify their size to 114ร85 px. Be sure to drag the images to our document area which weโve made black earlier.
- 6. Now you have your thumbnails on the stage. Set image alignment selecting Align in Window menu, or just press Ctrl+K. Align pics to the bottom and distribute horizontal center like itโs shown below.
- 7. Step 3 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. 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.
- 8. 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. 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. Step 4 OK, letโs put the images that we will be exactly viewing in our gallery. Switch to the 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 the 358ร268 px and set its position to the 93ร18. 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.
- 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 because weโre going to reference frame labels in the ActionScript later. Weโve got four frame labels: model, dreamy, dancing and teacher, respectively.
- 11. Step 5 So far weโve got a thumbnail gallery where each of the thumbs is a button. Our next step is to add some action script so we could click on the button to play the right frame. Go to the Actions layer and drag the first frame up to the fourth cell. Your timeline should have the following look by this moment:
- 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 in great 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. After you have copied and pasted the above code, go to Control => Test Movie or press Ctrl + Enter to see the result gallery. Here is what you should get:
- 14. Letโs look closer at what youโve just done and learn more about AS functions. The first 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. And here goes the definition of that function function 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 the mouse 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 and stops from progressing further. All right, this is the initial script that allows our image gallery to work properly. As you see, this piece of code repeats for the rest of the buttons, we change only instance names and frame labels.
- 16. Step 6 To add some spice to our images when they come in, letโs learn how to animate them in Flash CS5. So, go up to your Images layer and select the first frame. To be able to add some animation to our images, we need to convert them to movie clip symbols. To do this hit F8 and select Movie Clip in the Type menu. Repeat this operation for each of the four images. Let the names be movie1, movie2, movie3 and movie4.
- 17. Choose the Selection tool from your toolbar and double click on the first movie clip weโve just created. Now we can animate it. Right click on the movie clip on the stage and select Create Motion Tween.
- 18. Step 6 To add some spice to our images when they come in, letโs learn how to animate them in Flash CS5. So, go up to your Images layer and select the first frame. To be able to add some animation to our images, we need to convert them to movie clip symbols. To do this hit F8 and select Movie Clip in the Type menu. Repeat this operation for each of the four images. Let the names be movie1, movie2, movie3 and movie4.
- 19. You can see that it automatically inserts some frames; the number of frames inserted depends on your frame rate. By default Flash CS4 has a frame rate of 24 frames per second. 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 down to the one we need. Now letโs create a sleek fade-in effect by means of some color effects and motion tween. Select the image on the stage while the playhead is on the last frame. Go to the object properties, choose Alpha in the Style menu and put it 0%.
- 20. Move the playhead back and forth and you will see that weโve created a fade-out effect for our image โ itโs completely transparent on the last keyframe. Right click anywhere on the motion tween area and select Reverse Keyframes. Now we have the fade-in effect applied to the picture. 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, right click on the motion tween area and select Convert to Frame by Frame Animation. Then go to the last frame and hit F9. Type stop() in the Actions window and that should fix the problem.
- 21. Step 7 Another cute effect weโre going to apply is rollover. Wouldnโt it be nice to have the thumbnails change a bit when the mouse hovers over? And thatโs pretty easy to do, here we 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. Go to the Over and select the button on the stage. In order to modify the way it is rendered, we need to convert it into a graphic symbol. Press F8 and selectGraphic in the Type menu. Now go to the object properties and do some changes to the color effect. You may do whatever you want, we changed the RGB parameters, for example (see the screenshot below). Switch to the Down frame and apply some effects if you want the button to change its state 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 be clickable on your button. Repeat this step for the other three buttons and press Ctrl+Enter to see the result and thatโs it. Now you know how to create a simple image gallery with thumbnails and spice it with some nice effects.