Flash TutorialFlash Tutorial

Prepared by Tsang Kin Ting, VincentPrepared by Tsang Kin Ting, Vincent

OutlineOutline

Flash IntroductionFlash Introduction SymbolsSymbols

– Graphics, Buttons, Movie clipsGraphics, Buttons, Movie clips TweeningTweening

– Shape tweening, Motion tweeningShape tweening, Motion tweening DemoDemo

Part A - IntroductionPart A - Introduction

What is Flash?What is Flash?

graphics and animation tool by Macromgraphics and animation tool by Macromediaedia

Mostly used with Firework and DreamweMostly used with Firework and Dreamweaveraver

.fla and .swf files.fla and .swf files 30-day Trial version available at 30-day Trial version available at

www.macromedia.com/software/trial_dwww.macromedia.com/software/trial_download/ownload/

What can you do in Flash?What can you do in Flash?

TextText GraphicsGraphics Movie clipsMovie clips ButtonsButtons SoundSound

and more…and more…

Workspace - Stage

Drawing Tools

Timeline

TimelineTimeline

Show the time of each frame in the animationShow the time of each frame in the animation Keyframe (F6)Keyframe (F6)

– specify exactly what you want to be shownspecify exactly what you want to be shown Normal frame (F5)Normal frame (F5)

– same as the previous keyframesame as the previous keyframe– transient frame if tweening involvedtransient frame if tweening involved

Drawing in FlashDrawing in Flash

Usual tools Usual tools – Lines, oval/rectangle, lasso tool, textbox…Lines, oval/rectangle, lasso tool, textbox…

LayersLayers– Things on upper layer cover things on lower Things on upper layer cover things on lower

layerslayers Grouping and breaking apartGrouping and breaking apart

– (to be revisited in tweening)(to be revisited in tweening)

Adding SoundAdding Sound

Import sound files into libraryImport sound files into library– [File] -> [Import to Library…][File] -> [Import to Library…]

Drag and Drop to stageDrag and Drop to stage Sound added to current layerSound added to current layer

Adding ActionsAdding Actions

Select the frame/object which you want Select the frame/object which you want to have action associated withto have action associated with

Choose action from Action PanelChoose action from Action Panel

Add action itemRemove action item

Choose action item here

Part B - SymbolPart B - Symbol

What is symbol?What is symbol?

For reusing same object in the flash For reusing same object in the flash moviemovie

3 types: Graphic, button, movie clip3 types: Graphic, button, movie clip Kept in Library (Ctrl-L to open)Kept in Library (Ctrl-L to open) Drag-and-drop to put on stageDrag-and-drop to put on stage Only one copy is saved in flash no Only one copy is saved in flash no

matter how many times it is usedmatter how many times it is used

=> file size greatly reduced!=> file size greatly reduced!

How to create symbols?How to create symbols?

Define object and select itDefine object and select it [Insert] -> [Convert to Symbol][Insert] -> [Convert to Symbol]

OROR [Insert] -> [New Symbol…][Insert] -> [New Symbol…] Define symbol there!Define symbol there!

GraphicsGraphics

Static imagesStatic images Reusable animations tied to the Reusable animations tied to the

movie timelinemovie timeline No SoundNo Sound

Note: All graphics symbols are Note: All graphics symbols are grouped!grouped!

ButtonButton

4 states: Up, Over, Down, Hit4 states: Up, Over, Down, Hit Up – pointer is not over itUp – pointer is not over it Over – pointer is over itOver – pointer is over it Down – button is clickedDown – button is clicked Hit – define the invisible area that Hit – define the invisible area that

will respond to mouse clickwill respond to mouse click ActionsActions

Note: Layers can still be used!Note: Layers can still be used!

Movie clipMovie clip

Reusable piece of animation with Reusable piece of animation with individual timelineindividual timeline

(vs. graphics symbols)(vs. graphics symbols) Define as you do in main sceneDefine as you do in main scene

(can add sound/buttons/other movie (can add sound/buttons/other movie clips into it)clips into it)

Part C - TweeningPart C - Tweening

TweeningTweening

Tweening = interpolation by computerTweening = interpolation by computer Basic ideaBasic idea

– Specify what sth looks like in the beginning Specify what sth looks like in the beginning keyframe and ending keyframekeyframe and ending keyframe

– Choose to apply tweening from property paChoose to apply tweening from property panelnel

– Computer generate movement/change betComputer generate movement/change between two keyframesween two keyframes

Tweening (cont’d)Tweening (cont’d)

2 types2 types– Motion tweening Motion tweening

rotation, scaling, position of grouped objects/insrotation, scaling, position of grouped objects/instancestances

– Shape tweening Shape tweening shape change thru timeshape change thru timeNOT for grouped objects!NOT for grouped objects!

Part D - DemoPart D - Demo