Angelina Quansah

Adobe Flash previously known as Macromedia Flash has become a popular method for adding animation and interactivity to web pages; creating amazing effects for advertisements, integrating video into web pages and more recently developing rich Internet applications.

Examples Examples Examples Examples

Basic Flash Drawing Tools Develop Flash Movies Creating buttons Add interactivity to buttons Import graphics and create slide show Add sound to Flash Movies Create special effects

Stage

timeline

stage

property inspector

paneldocumen

twindow

tool bar

layers

The white square called stage is the working space.

This is the visible area when movie is viewed It can be customized to suit user

The first four tools are the selecting and modifying objects

The next six tools are for creating and drawing in Flash.

The next four tools are for modifying strokes and shapes.

- stroke is an outline of a shape fill is the inner color

The next two tools are for viewing the art work

The next two tools sets the stroke and fill color of your shape

The bottom area is the option tools and changes depending on the tool selected

selection tools

Drawing tools

modifying tools

viewing tools

setting colors

option tools

The timeline is above the document window It shows an animation or movie divided into

frames. Drag play head to preview animation Frames represented in numbers help you

navigate through the time line frame rate is the speed at which the movie is playing

Layers are created here to control individual frames of the animation

Onion skin allows you to view multiple frames at a time

layers

key frames

play head

to create frames Frame rate

Current frame

length of movie played

frames

onion skin

This is where the open panels are kept The default panel has the color panel and

the library panels The list of all the panels are in the

window menu. Its possible to collapse and add new

panels Panels can be saved for future use.

This area is below the document window It displays the attributes of the elements

you are working with.

Rectangle and Oval primitive tools. This allows creative modification of ovals

and rectangle. The integration of Photoshop and

Illustrator Programming language – ActionScript 3.0

An flash file with the extension fla is the main document to create all the flash contents.

A movie created in Flash on the web is a swf file.

Videos with Flash interface on the web are known as flv files.

Flash uses vector graphics – a drawing with lines and shapes and mathematical formulas.

Scaling vector graphics does not affect the shape

Vector graphics give a small file size

Morphing a square shape into an oval shape

Open new document from file Use the rectangle tool to create a square Click on frame 10 Choose Insect - timeline – blank key frame Create an oval with the oval tool on the stage. Click in between the two key frames on the

timeline. In the property inspector, click tween - shape Flash morphs the rectangle into a star

tween shape

property inspector

Frame 1Frame 10

Onion Skin allows you to view multiple frames at a time

It serves as a guide in moving objects when animating

Manipulating the small circle on the play head

determines the numbers of frames for the preview

Previous frames in focus to guide the animation

onion skin markers indicatingthe view range

Multiple shapes add to file size Converting to symbols produces multiple

instances of the object without affecting file size

Symbols can be edited independently Create a shape – click Convert to Symbol

in the Modify menu Set the variable name to gfcBall, type is

Graphic and Registration to top left. The symbol registers in the library panel

Naming Conventions Graphic symbols names begin with a lowercase

letter normally then uppercase letter. (eg. gfcBucket)

No spaces required Its an error to begin with numbers btn for buttons and mc for movies

Animating a ball Drag an instance of the ball on stage Create key frames on frame 12 and frames 20 On frame 12, move ball down Click in between frames 1 and 12 In the property inspector, click tween- motion

Motion tweening are for symbols and shape tweening for shapes Key frames represent a transition on the time line

Buttons have four states Up State – when the button has not been

clicked on

Over State – when the mouse is over the button

Down State – when the mouse is off the button

Hit State – the area of the button that reacts when mouse is over

The four states of the button

Create a button and convert to symbol Assign variable name (eg. btnButton),

type button and registration top left. Double click button symbol in the library

to enter symbol editing mode Create a key frame in the Over State Modify the button Drag the Up key frame to the Down State

and press the Alt key to copy Create an ordinary frame on the hit state

Up State Over State

Movies clips is self contained and plays independently.

It is not linked to the timeline Movie clips act as a flash movie in a flash

movie. An animation in a movie clip can be re-

used

Brief introduction to ActionScript - - action Script is the scripting language use in

Flash - adds interactivity to Flash movies - script assist helps you write the script

Script assist

Code hints in actionScript

How to Create a stop and play button for an animation

Create two button for stop and play Create layer for each Create a layer for action script - Preferably the top player Assign instance name to buttons (eg. btn_stop

and btn_play). Instance names differentiate instances of symbols on stage.

Click on the first key frame of the action script layer

Open action script and write code

play stop

actionScript

Using Bitmap graphicsBitmap graphics can be compresses to reduced file

size File – import –import to stage - flash imports all images at once if they have

the same prefix and are in order Images are loaded into the timeline Click on the document window and in the

property inspector, change the frame rate. Preview animation by pressing Ctrl-Enter

Some of the sound files flash supports are WAV file System 7 sound Mp3 files

Import sound to Library from file Create a new layer with name sound Select the first key frame of the sound

layer Drag the sound icon from library to stage The timeline is automatically updated Preview slide show

Flash loops an animation by default Create a new layer fro actionScript Click on the frame that you want the

animation to stop and open action script Write - stop(); and close the script to

stop the animation

Three different type of text Static – a simple graphic as title, headlines etc.

It can converted to button or movie clips for

animation.

Dynamic - changes by outside variable

through actionScript

Input - user input (actionScript can be used)

Create movie clip with static text Add text Modify – Break Apart Modify timeline –Distribute to Layers Add frames to layers as desired Alter the text at the first keyframe Separate the frames for each letter on

the timeline Playback animation.

Some files that flash support are avi files dv files mov mpeg Its better to encode video as an flv files than to

embed videos into swf unless files are very small. (Flash video encoder is required)

Video clips can be embedded into movie clips or graphics

Embedding Flash swf file into an XHTML document enables web browsers to display Flash content.

Flash can either be used for a complete website or part of a website

The following code tells the browser to play the Flash movie and where to locate the Flash player plug in if not already installed

<object width="425" height="350"> <param name="movie" value=“animation.swf"> </param> <param name="wmode" value="transparent"> </param> <embed src=“animation.swf" type="application/x-

shockwave-flash" wmode="transparent" width="425" height="350">

</embed></object>(where animation.swf is the name of the flash movie)

Additional recourses for flash tutorials www.tutvid.com www.adobe.com/downloads