Adobe Flash Professional CS5.

Creating Image thumbnail

Niranjan Khadka Center for Teaching and Learning

Adobe Flash Professional CS5.5 The Interface

TOOL PANEL It appears on either side of screen and contains tools used to create or modify graphics and text. Tools Options are listed underneath the palette and become active depending on the tools selected at the current moment (if tools panel is not showing, click Windows menu or Ctrl+F2).

STAGE The large white rectangle which represents the displayed area of your movie/animation is called the stage. STAGE SIZE Clicking on the Size button, you will get the document properties panel. The Properties Panel allows you to change the dimension of your file. This is very important because you want to set your dimensions first. The dimensions are the size of your image. You do not want them to be too large or too small to be visible.

FRAME The still images that make up your overall moving image are called frames.

Frames FRAME RATE The default frame rate is 12fps (frames per second). That means 1 second of animation would require 12 frames. The greater the frame rate is, the smoother the animation will be (high quality movie is 30fps). Accordingly, increasing the number of frames on the timeline will increase the time. (For example, when the frame rate is 3fps, compared to when it is 10 fps, the transition from frame to frame will be much quicker for the 10fps thumbnail and therefore will seem more like a movie, rather than a quick slideshow.) TIMELINE The timeline appears at the bottom of the screen. The use of timeline is to lay-out the sequence of the frames. KEYFRAME The keyframe is the frame from where transitions start and end. Any change (animation) has to be in a keyframe.

Keyframe

III. Creating the Image thumbnail

A. Setting up Stage for the Pictures 1. Open Adobe Flash Professional CS5. 2. Select the required flash file You will see four long vertical lists with the headings: Create from template Create New Learn Open a Recent Item

Under the Create New list, Click on Action script 3.0.

3. At the top right side of the screen, you will see a drop-down menu as labeled in the figure below. Click on the arrow beside it and from the list of items which appears, select DESIGNER.

Drop-down Menu

4. Then, click on the drop-down menu at the top right of the white screen called Stage (as shown in the figure below) you see at the center of the screen. Select the option Fit in window from the list that appears, to set the size of stage. 5. Create new layers Locate the Timeline panel on the screen. Click on the new layer button on the lower left of the timeline, three times to insert three new layers. Double-click on each of the inserted layers named layer1, layer2, layer3 (on the left-hand side of the panel) and rename them as: Pictures Thumbnails Actions [Refer to the figure on the next page]

Inserted Layers Timeline Panel New Layer Button

B. Getting Pictures 1. Choose any four pictures from your computer, but make sure they are larger than 500 pixels in size. Also, the pictures should be of the type: .jpeg, .png or .gif. The type is written next to the name the image was saved as. 2. Create a folder named animations on your desktop and save the chosen pictures inside the folder. Importing pictures to Flash CS5 Stage 1. Firstly, Click on File at the top-left corner of the screen. Select the option Import, and then choose Import to library from the list. 2. Browse for the animations folder in the box that appears on screen. Select all the pictures in the folder, and click open. 3. You will now have the names of the four pictures inside the Library Panel in a list under the Name section (similar to the example below).
Library Panel

Name Section

4. Click on the Thumbnail layer to select it, and then go back to the Library and drag the first pictures from the name section to the stage. 5. Now go to the properties panel, and set the size and position of the picture by the following steps:

Click on the picture, and you will see the Position and Size section in the properties panel with options: X: Y: W: H: Click on each of these options one by one and enter the following values (in pixels) in the text box beside them. These values will be template values. X: 0.00 Y: 0.00 W: 80.00 H: 80.00 [Refer to the figure on the next page]

6. Once you change the dimension of the picture, the picture will move out of your stage. So use your mouse to find the constrained picture out of your stage. 7. Drag the picture to the bottom left corner of the stage. 8. Repeat steps 4,5 and 6 for the remaining images and drag them to the bottom of the stage such that they are in a row, and are approximately equally spaced as shown below.

Four Images

C. Converting pictures to Buttons Buttons are symbols that contain four frames. Each frame of a button symbol represents a different state for the button: Up, Over, Down, and Hit. These states determine how a button visually behaves when the mouse is rolled over it or when the user clicks the button. This document explains how to create basic and advanced buttons. 1. Click on the first image on the left, and press F8 or right click and select Convert to Symbol. 2. A box Covert to Symbol shows up. In the name section, type btn1 and select the Type as button. Then click OK. 3. Then go to the Properties panel, and enter the Instance name as button1 by clicking in the text box <Instance Name>. 4. Repeat the above three steps for all the pictures at the bottom of the stage, one by one. But, keep in mind to change the btn1, button 1 to btn2, button 2 and so on for the remaining pictures.

Convert to symbol

Instance name

D. Setting corresponding pictures for the buttons 1. Select the second, third and fourth Timeline sections of the thumbnail layer. You can select them all at a time by holding the Ctrl key from the keyboard and selecting them. 2. Right click on the selected Timeline sections and select Insert Frame. You will notice frames inserted in the thumbnail layers. 3. From the Timeline select the first frame of Picture layer. 4. After you select the first layer, go to properties panel change the name to pic1. Once you change the name, you will see small red flag in the first frame of the Picture layer.

5. Now drag the first picture from the Library panel. Make sure that the picture must correspond to the small pictures that are on the bottom of the stage. 6. Go to properties panel and change the dimensions of the picture. (W: 400px, H: 300px, X: 82 and Y: 0). You will notice that the picture will be aligned at the middle of the stage right above the small pictures. 7. After you change the dimension of the first picture, right click on the second frame of the Picture layer select Insert Blank Keyframe. 8. Repeat steps 4, 5 and 6 for the remaining pictures. Make sure you Insert Blank keyframe in each section and name pic2, pic3 and pic4 for the remaining pictures. Dimensions will be same for all pictures.

Picture layer with new key frame Picture aligned at the center of the stage

9. After you are done with step 8, select Action layer from the Timeline. 10. Click on the first section of Action layer and press F9 or right click and select Action to go to the Action Script panel. Application of Action Script 1. Type this exact code below on the Action panel screen. stop( ) button1.addEventListener(MouseEvent.CLICK,play1); function play1(event :MouseEvent):void { gotoAndStop("pic1"); } button2.addEventListener(MouseEvent.CLICK,play2); function play2(event :MouseEvent):void { gotoAndStop("pic2"); } button3.addEventListener(MouseEvent.CLICK,play3); function play3(event :MouseEvent):void {

gotoAndStop("pic3"); } button4.addEventListener(MouseEvent.CLICK,play4); function play4(event :MouseEvent):void { gotoAndStop("pic4"); } (The purpose of this action script is to give command to the buttons to show thumbnail view of the picture when clicked.)

Action Script

2. Close the Action script window after you are done with typing the scripts.

E. Previewing the Thumbnail 1. Press F12 or go to Control > Test Movie > Test to view the animated image thumbnail in preview window.

F. Saving/exporting animated image thumbnail to a video file 1. Go to File and to Save. Save this file inside the animation folder. The saved file will have *.fla extension. This file can be edited later. 2. To export the animated thumbnail as a video file, go to File > Export > Export Movie. Export this file inside the same folder. This file will have *.swf extension (shockwave file). This file can be uploaded to any webpage and video hosting site