adobe flash actionscript tutorial

7/30/2019 adobe Flash Actionscript tutorial

1/15

Adobe Flash Professional CS5.5

Creating Image thumbnail

Niranjan Khadka

Center for Teaching and Learning


2/15

Adobe Flash Professional CS5.5

The Interface


3/15

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 toolsselected at the current moment (if tools panel is not showing, click Windows menu or Ctrl+F2).

STAGEThe large white rectangle which represents the displayed area of your movie/animation is called

the stage.

STAGE SIZEClicking 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 setyour dimensions first. The dimensions are the size of your image. You do not want them to betoo large or too small to be visible.


4/15

FRAMEThe 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 means1second of animation would

require 12frames. The greater the frame rate is, the smoother the animation will be (highquality 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 willseem 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.

KEYFRAMEThe keyframe is the frame from where transitions start and end. Any change (animation) has to

be in a keyframe.

Keyframe


5/15

III. Creating the Image thumbnail

A. Setting up Stage for the Pictures1. 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


6/15

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 inthe figure below. Click on the arrow beside it and from the list of items which

appears, select DESIGNER.

Dro -down Menu


7/15

4. Then, click on the drop-down menu at the top right of the white screen calledStage (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 Timelinepanel on the screen. Click on the new layerbutton 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]

New Layer

Button

Inserted Layers

Timeline Panel


8/15

B. Getting Pictures

1. Choose any four pictures from your computer, but make sure they are largerthan 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 chosenpictures inside the folder.

Importing pictures to Flash CS5 Stage

1. Firstly, Click on File at the top-left corner of the screen. Select the optionImport, and then choose Import to library from the list.

2. Browse for the animations folder in the box that appears on screen. Select allthe pictures in the folder, and clickopen.

3. You will now have the names of the four pictures inside the Library Panel ina list under the Name section (similar to the example below).

4. Click on the Thumbnail layer to select it, and then go back to the Library anddrag 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 bythe following steps:

Library Panel

Name


9/15

Click on the picture, and you will see the Position and Size section inthe properties panel with options:

X: Y: W: H:

Click on each of these options one by one and enter the followingvalues (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 ofyour 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 spacedas shown below.


10/15

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 selectConvert to Symbol.

2. A box Covert to Symbol shows up. In the name section, type btn1 and selectthe Type as button. Then click OK.

3. Then go to the Properties panel, and enter the Instance name as button1byclicking in the text box .

4. Repeat the above three steps for all the pictures at the bottom of the stage, oneby one. But, keep in mind to change the btn1, button 1 to btn2, button 2 and so

on for the remaining pictures.

Four Images


11/15

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 keyboardand selecting them.

2. Right click on the selected Timeline sections and select Insert Frame. Youwill notice frames inserted in the thumbnail layers.

3. From the Timeline select the first frame ofPicture 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.

Instance name

Convert to

symbol


12/15

5. Now drag the first picture from the Library panel. Make sure that the picturemust 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 secondframe of the Picture layer select Insert Blank Keyframe.

8. Repeat steps 4, 5 and 6 for the remaining pictures. Make sure you InsertBlank keyframe in each section and name pic2, pic3 and pic4 for the

remaining pictures. Dimensions will be same for all pictures.


13/15

9. After you are done with step 8, select Action layer from the Timeline.10.Click on the first section ofAction layer and press F9 or right click and select

Action to go to theAction Scriptpanel.

Application ofAction 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");

}



{


}



{

Picture layer withnew key frame

Picture aligned at the

center of the stage


14/15


}



{gotoAndStop("pic4");

}

(The purpose of this action script is to give command to the buttons to show

thumbnail view of the picture when clicked.)

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 animatedimage thumbnail in preview window.

Action Script


15/15

F. Saving/exporting animated image thumbnail to a video file

1.Go to File and to Save. Save this file inside the animation folder. Thesaved 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

adobe flash actionscript tutorial

Documents