cs5 flash tutorial

8/13/2019 CS5 Flash Tutorial

1/19

Adobe Flash Professional CS5

Creating Image thumbnail

Niranjan Khadka

Center for Teaching and Learning


2/19

Creating an Image Thumbnail in

Adobe Flash Professional CS5

I. WHAT IS FLASH?

Flash is a multimedia animation service that is widely used for various applications. It is mostlyused for designing splash pages, flash games, websites, buttons, slide shows and many other

applications. Adobe Flash Professional CS5 can be used by anyone with basic knowledge

about computers, such as saving and uploading files. The way Flash works is that everything inFlash is created by using frames to create an animation. A Flash file offers a wide range of

controlling animations. This is achieved throughAction Script, Flash's programming language.

We will use Adobe Flash Professional CS5to create an image thumbnail, which is a reduced-

sized image and each image is linked to a full version of the image. Image thumbnails are usefulfor accessing content on an online webpage, making it easier to browse through the internet.

II. GETTING STARTED

Make sure that you have either the $199.99 fullversion or the 30-day trialversion of Adobe

Flash Professional CS5. If you already have the program, skip to section IIB (Key Terms ofAdobe Flash Professional CS5). If not, follow the instructions below.

A. Downloading Adobe Flash Professional CS5.

In order to download the Adobe flash, you need to go to Adobe website. First typehttp://www.adobe.com/ on your web browser (Firefox, Internet Explorer, etc.).

Once you are in the website, select the Downloads menu on the top and you will be taken to a

window like the one shown below.
http://www.adobe.com/http://www.adobe.com/


3/19

Next, select Adobe Flash Professional CS5. The download will be a trial version.Select the Adobe Flash Professional CS5icon. You will be taken to the downloadscreen where you can select your desired language for the software. This screen will also

have the system requirement for both Windows and Mac OS. If your computer have the

under mentioned system requirement, you are good to go.

System requirements

Windows

Intel Pentium 4 or AMD Athlon 64 processor

Microsoft Windows XP with Service Pack 2 (Service Pack 3 recommended);

Windows Vista A Home Premium, Business, Ultimate, or Enterprise with Service Pack 1;or Windows 7

1GB of RAM (2GB recommended)

3.5GB of available hard-disk space for installation; additional free space required during

installation (cannot install on removable flash storage devices)1024x768 display (1280x800 recommended) with 16-bit video card

DVD-ROM driveQuickTime 7.6.2 software required for multimedia featuresBroadband Internet connection required for online services and to validate Subscription

Edition (if applicable) on an ongoing basis

Mac OS

Multicore Intel processor

Mac OS X v10.5.8 or v10.61GB of RAM (2GB recommended)

4GB of available hard-disk space for installation; additional free space required during

installation (cannot install on a volume that uses a case-sensitive file system or on removable

flash storage devices)1024x768 display (1280x800 recommended) with 16-bit video card

DVD-ROM drive

QuickTime 7.6.2 software required for multimedia featuresBroadband Internet connection required for online services and to validate Subscription

Edition (if applicable) on an ongoing basis


4/19

Select your desired language and click on download.

Once you click on download, you will need to save Adobe Download Assistant. This

file will guide you through the entire download process.

Save the file and run it.

After the Adobe Download Assistantis installed, you will be asked to create an Adobeaccount. It is necessary to sign in to Adobe.com using your Adobe ID before you can

actually start your trial download in the Adobe Download Assistant. If you dont have

an Adobe ID, create your Adobe account and sign in with your Adobe ID (email address)and password.


5/19

The Adobe Download Assistantwill start the download process after you sign in. Thedownload time depends upon your internet speed and system. The average download

time is about 20-60 minutes.

You will be asked to select a destination folder to save the trial version. Select yourdesired destination folder.

After the download is done, the Adobe Flash Professional CS5 is ready to use.


6/19

B. Key Terms for Adobe Flash Professional CS5


7/19

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 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 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.


8/19

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 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


9/19

III. Creating the Image thumbnail

A. Setting up Stage for the Pictures1. Click on Start> All Programs> 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


10/19

Under the Create Newlist, 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


11/19

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 windowfrom the list that appears, to set the size of stage.

5. Create new layersLocate 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]

Drop-down

Menu


12/19

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 click open.

3. You will now have the names of the four pictures inside the Library Panelina list under the Namesection (similar to the example below).

New Layer

Button

Inserted Layers

Timeline Panel


13/19

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:

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]

Library Panel

Name


14/19

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 spaced

as shown below.

Four Images


15/19

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 whenthe 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 andselectthe Type asbutton. 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.

Instance name

Convert to

symbol


16/19

D. Setting corresponding pictures for the buttons

1. Select the second, third and fourth Timelinesections of the thumbnaillayer.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 Timelineselect 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

Picturelayer.

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.


17/19

7. After you change the dimension of the first picture, right click on the secondframe of the Picturelayer select Insert Blank Keyframe.

8. Repeat steps 4, 5 and 6 for the remaining pictures. Make sure you InsertBlank keyframein each section and name pic2, pic3and pic4for the

remaining pictures. Dimensions will be same for all pictures.

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

Action to go to theAction Scriptpanel.

Application of Action Script

1. Type this exact code below on the Actionpanel screen.

stop( )

button1.addEventListener(MouseEvent.CLICK,play1);

function play1(event :MouseEvent):void

{

gotoAndStop("pic1");

}



{

Picture layer with

new key frame

Picture aligned at the

center of the stage


18/19


}



{gotoAndStop("pic3");

}



{


}

(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 Actionscript window after you are done with typing the scripts.

Action Script


19/19

E. Previewing the Thumbnail

1.Press F12or go to Control > Test Movie > Testto view the animatedimage thumbnail in preview window.

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

1.Go to Fileand 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

cs5 flash tutorial

Documents