Learn Flash

7/31/2019 Learn Flash

1/116

1Flash 5

Getting Started

C h a p t e r Topics:

In t roduct ion

An Over view of

Flash Ar t and Techn ical Skills

In st ru ct ion al A p

Lea rnin g St ra teg

Icon s for Q uick

U sing the Book On Your Ow n

U sing the Book W ithin a Classro

W indow s vs. M a

Get tin g You r CoReady

Take a Look a t tCD-ROM

File Ex ten sion s aDescriptions

O pening a N ew in Flash

W hat s N ew in

Sum m ar y


2/116

Introduction

In this f irs t chapter, you w il l get a quick intr od uct io n to Flash and de tai led infor mat ion tha t w i ll he lp you in w or king w i th the res t oand the C D -RO M tha t accom panies it . The chapter concludes wirev iew o f the new features in Flash 5 . W e hope you w i ll find our bful in your quest for kno w ledge, and th at yo u w il l f ind Flash a pow etoo l t o u se.

By the end o f the chapter you w il l be able to:

l ist ski lls that are frequently needed to create m ult im edia project

l ist the Learning Strategies used in this book.

describe the Icons for Q uick Access used in this book.

create a directory on your com puter for saving the exercises youlthis book.

locate necessary exercise f i les on the included CD-ROM .

open the Fla sh 5 p rogram.

l ist the new fea tures of Flash 5 .

An Overview of Flash

Macromedias Flash is one of the industrys leading authoring sofgr am s being used t o create high-impact W eb si tes that include grapm ation, sound and inter act ivi ty. Flash uses a highly visual inter face

e lements can be in t ro duced , pos it ioned and easi ly an im ated w i thheavy-duty programming that was commonly required only a few yFlash in tegra tes drawing and pa in t too ls s imi la r to those fM acro m edias Freehand and A do bes Illustr ator, so you can easily ce lements fro m scra tch , or impor t and mo di fy them i f deve loped igr aphics pro gram.

Flash 5 can out put (o r Publish) files using a variety o f file fo r m aincreasing the dis tr ibut ion opt ions for your projects .The programsw i th Flash can . . .

. . . run in a W eb browser as a s tand-a lone program.

. . . be easi ly inserted in H TM L files.

. . . be exported as anim ated GIF f iles .

. . . be expor ted in QuickTim e video form at .

. . . be exported in other form ats that a l low you to use Flash for m anm ult im edia projects .

2

C H A P T E R 1


3/116

Flash Art and Technical Skills

Learning how to use Flash (or any other authoring software program) is onlyone aspect o f w hat is required to create a funct ion al and pr ofessional loo kingmu lt imedia program o r W eb si te . G eneral ly there are m any different ski ll setsinvolved.These different skills may exist within a single individual or may berepr esented in t he com posi te ski lls that ex ist amo ng a team o f people.

A t a m inimum , these ski l ls m ay include pro ficiency in:

design and layout pr incipa ls

ar t is t ic creat ivi ty and execution

wr i ting (t ext and na r ra t ion )

program / m essage / or instruct ional design

aud io / v ideo t echniques

use of the au thor ing sof tware p r oje ct m a n a ge m e nt

Figure 1-1 Flash Applications Require Technical Skill

3

Getting Started


4/116

Figure 1-2 Flash Applications Require Artistic Talent

Although the focus of this book is to help you learn how to use autho r ing softw are pr ogram, the acquisi t ion of t hese technical ski l lscons idered wi th in the context of the o ther sk i l l s tha t may be reqext ent to w hich you m ay need these ot her ski l ls w il l depend to a laupo n the type o f applicat io n you are creat ing, i ts intended use and hfessional yo u w ant t he end resul t to be.

W e real ize that m any o f you m ay no t h ave an ar t backgrou nd andw ant t o have fun w i th Flash for your ow n personal use .T herefor e ,cises included in our book do not require an ar t background al thcan be enhanced on yo ur ow n, if you do have ar t is t ic talent . In the exercises, you w il l be asked to dr aw sim ple objects , as a m eans of

t ion t o the dr aw ing to ols. I f you do have ar t i st ic ta len t , w e encouratake creat ive l icense to m od ify and em bell ish the subject m atteexerc ises, ar t w or k w i ll be suppl ied w i th the exerc ises so tha t yable to create m or e real is t ic and pr ofessional loo king pro jects.

Instructional Approach

Because of the many features and functions,Flash may at first seem ing. W e dont w ant to o verw helm you w i th lo t s of de tai ls al l-atinstead will introduce the aspects of Flash that are the most practho se that are m ost co m m only used to bui ld pro gram s in to days re

W e hope t o help you lear n Flash in an intui t ive w ay w hile pract icithe t echniques and shor t cuts that are t ypical of w hat W eb designersas they create Flash pro ducts for real-w or ld applicat ion s.Each chaupo n the last , adding new featur es of Flash to your bui lder s to olbo

The chapters w i th in our boo k br eak up the m ater ial in to learn inthat are abo ut r ight for m ost peo ple during a single session, w hethe

4

C H A P T E R 1


5/116

l earn ing on your ow n o r using th is boo k w i th in a c lassro om se t t ing. TheLear ning Str ategies used w ithin these chapter s are cent ered aro und t he con -cept of learn-by-doing. These Learning Strategies represent the synthesis ofteaching mult im edia softw are pro gr am s for over nine year s as an A utho rized

M acro m edia Training Pro vider.U nder standing the intent behind th ese LearningStr ategies m ay help you to m ost effect ively use w hat is provided her e to learnand under stand t he Flash softw are pro gr am .

Learning Strategies

Introduction each chapter sta r t s off wi th a br ief in t ro duct ion to the to p-ics to be covered, including a br ief l ist ing of lear ning ob ject ives for tho se ofyou w ho find such things useful.

Conceptual Overviews pro vides a 50,000-foo t over view o f the subject

m att er befor e w e get into the narro w ly focused details of bui lding som ething.Guided Tour som e chapters m ay inc lude a st r uc tured w alk- through ofhow to do som eth ing l ike making m enu / window se lec t ions or look ing at thevar ious pro per t ies or op t ions li sted . A G uided Tour i s no t real ly an exerc ise ,but fol low s the no t ion of lear ning by act ively loo king and d oing.

Practice Exercise m ost chapters w il l include hands-on exper iences intro -ducing the basic skills for using tools and techniques to build structures thatare typical o f real-w or ld applicat io ns.T he scope o f the exercise is fair ly nar-ro w, focusing on th e concepts and ski l ls that have just been intr od uced in thechapter.The co nt ent is gener ally sim ple so t hat the em phasis rem ains on build-ing the s tr uctur es and using the t echniques and is not dependent o n pr e-exist-ing ar t i st ic ta len t . A gain , i f you do have ar t i st ic ta len t , p lease mo di fy andembell ish the co ntent that you f ind w ithin the exercises.

Figure 1-3 H ands-on Learning

5

Getting Started


6/116

Each Practice Exercise includes project elements that reflect aspec real -wor ld developm ent process:

Description provides a general descript ion of the purpose and cnents that w i ll be used w i th in the exerc ise . G eneral ly real -wor ldinclude a pro ject descript ion, al tho ugh it w il l typical ly be much m othan what we include here.

Take-a-Look asks you t o m ake use of the C D -RO M supplied wboo k, to load and play a f ile that is the co m pleted version o f the exeyou are about to create .This sect ion wil l help you visual ize the gcompleted exercise.

Storyboard:On-Screen pro vides screen captures of w hat w il l be sescreen when the exerc ise i s com pleted , to serve as a pr in ted re ferSto r yboard that includes on-screen descript ions o r i l lustrat ions is a

w or ld pr o jec t de liverable .Storyboard:Behind-the-Scene provides screen captures il lustratingauthoring s tructures that are used in the completed version of the to serve as guidepos ts for deve lopm ent . A Sto r yboard tha t inclugramming descript ions or i l lustrat ions is a vi tal real-world projable.

Go Solo You wil l see this Icon immediately fol lowing the Storybt ions . A t t h i s po in t in an exerc ise , you should have the infor m at ionto comple t e t he exerc i se on your o w n . . . and we encourage you to

t r y. I f you need he lp ,ho w ever . . . un l ike the real -wor ld , you can usby-Step Instruct ions that fol low .

Step-by-Step Instructions are for those who would l ike s tructuredw ith t he details of the tasks involved in the ex ercise.T he num bered s w hat needs to be done, w hile the let tered sub-steps describe how

Summary each chapter concludes with a bul leted l is t of the majcepts and t op ics presented.

Application Chapters Project

Each Applicat ion C hapter focuses on an exer cise t hat serves as a coof a real -wor ld appl icat ion , tha t w hen combined , w i ll cont r ibu teplete Flash A pplicat io n Project . Each A pplicat io n Exercise pro videexperience in bui lding s tructures that synthesize the concepts alearned across several preceding chapters.

The C D -RO M suppl ied w i th the book conta ins the com pleted versiA pplicat io n Exercise, so you m ay skip over som e cont ent areas an

6

C H A P T E R 1


7/116


8/116

Go Solo A t t h i s po in t you have enough infor mat ion to com pexerc ise on your o w n go for i t .

Keep in mind that th ere general ly is not one-w ay to bui ld sommay end up creating the exercise using different steps than what included and t hats fine i f your str uctur e does w hat i t needs to d

Step-by-Step Instructions more de ta i l s for those who need or wthem.

Numbered Steps state w h a t needs to be done

Lettered sub-steps describe h o w to do i t

Using the Book W ithin a Classroom

A s i nst r u c t o r s fo r Fl ash , A u t h o r w ar e , D ir e ct o r, D r e am w e av er,Firew or ks (and o ther s) w e also th ink t hese sam e Learn ing Str atesented som ew hat different ly) are equal ly effect ive in t he classro oclassro om , w e use the bo ok as a po int o f reference and or ganizat iofor the presentat ion o f mater ial . A s a poin t o f re ference w e dofrom the boo k nor ask s tudents to do so . But w e use the book tothe c lassro om presentat ion . W e encour age students to t ake notes,t h e b o o k . W it h e ac h ch ap t er w e p r o v id e:

Conceptual Overviews present ing the highl ights from the bo ok andinstr ucto r general ly adds her/his ow n addit ional detai ls or point s of

Guided Tours using a project ion device at tached to the instructorputer, as a class w e w alk-thr ou gh the essence of the t our.

Exercises again using a pro ject ion d evice, as a class w e w alk-thr oubeginning of an exer cise.

Take-a-Look look at t he com pleted vers ion o f the exerc ise , poout not ewo r thy charac ter i st ics.

Storyboard use the com pleted vers ion to look at w hat i s on-and w hat is pro gr am m ed (m aking reference to the screen capturbook) .

Go Solo ask s tudents at t h i s po in t t o t r y to com plete the exertheir o w n. If s tudents need help, w e suggest loo king f ir st a t the nsteps tha t sta te w hat needs to be done , then t r y to f igure out do i t .

Instructor Help we walk around the classroom providing heladdit ion al inform atio n as needed.

8

C H A P T E R 1


9/116

Tips each ins t ruc tor cont r ibutes her /h is own addi t iona l in format ionbased on professional experience.

W indows vs. Macintosh

Flash 5, l ike m ost of M acro m edias softw are, is vir t ually the sam e on bot hM acinto sh and W indow s based com puter s.T he biggest variat io n stem s fromm inor differences in a few keyboard keys and t he absence of the r ight but to non t he Macintosh mo use . The char t be low compares t he W indow s andM acinto sh keybo ard keys:

W indows Macintosh

A lt in co m b in at io n w it h an o t he r key O p t in co m b in at io n w it h an o t he r key

C t r l in co m b in at io n w i th an o th er k ey C m d i n co m b in at io n w i th an o t her k ey

Right m o use but t o n click C t r l w it h m o use click

Thr oughout t he boo k t hese d i ffe rence are m inimized in that w e mo st o f tenmake select ions through the use of Menu options,which are the same acrossboth p lat form s unless o therw ise noted . A s we pro gress thro ugh exerc ises,how ever, w e w i ll make use of one of our Icons Shor t C uts , provid ing bot hM acinto sh and W indow s vers ions of Keyboard Shor t C uts .

In order to provide a cons isten t loo k for sc reen captures , m ost i l lust r at ionsw i ll depict the W indow s vers ion of Flash 5 . W hen needed ,M acin to sh screencaptures are also provided.

Getting Your Computer Ready

Prerequisite Knowledge

It is assumed that you already have the skills necessary to work in the basicW indow s or M acin tosh enviro nment pr ior to under t ak ing learn ing Flash .

Specifically you sho uld be able t o :

use the m ouse and keyboard for basic input and select ion.

se lect and drag objec ts.

r esiz e w i nd ow s.

locate directories (folders) .

locate f iles within directories .

c rea te and name d irector ies.

co p y f ile s.

9

Getting Started


10/116

Preparing Your Computers Hard D rive

T hro ughout t he cour se of this boo k, you w il l be creat ing m any Flasw i ll w ant t o save on your com puter. In order to m ake i t easie r to lof iles and com m unicate to you about t hese fi les , i t is s t ro ngly recotha t you crea te a new di rec tory ( fo lder ) on your computer s hardstore these files.

1 . O n t h e r o o t d i r ec t o r y o f y o ur c o m p u t er s h ar d d r i ve , p l ease c rd i r ec to r y ( fo lder ) named . . . SaveW or k .

2 . Refe r t o t he app rop r i at e i ll ust r a t ion below.

Figure 1-4 C reate N ew D irectory for M acintosh - SaveW ork

Figure 1-5 C reate N ew D irectory for W indows SaveWork

10

C H A P T E R 1


11/116

Take a Look at the CD-ROM

T his boo k m akes use o f num ero us learning act ivi t ies that include pr e-exist ingFlash files and a variety o f media element s. A ll of these files and element s areconta ined on the C D -RO M inc luded wi th th i s boo k.

1 . Plac e t h e C D - RO M su p pl ie d w i t h t hi s b o o k i n t o yo u r c o m p u t e r sC D -RO M player.

2 . U se yo u r c o m p ut er t o v iew t h e c o nt en t s o f t h e C D - RO M .

3 . The il lu st r a t ion be low show s the main d i r ec to r y st ruc tu re o f t heC D - R O M .

Figure 1 -6 M ain D i recto ry St ructu re O n CD -RO M

N ot i ce t here ar e t h r ee t ypes o f di r ecto r i es on the CD -RO M. They are :C hapter s, M acro m edia and Toys.

Chapters T here is a folder for each chapter in the boo k. Each C hapterfolder cont ains al l the f i les needed for the G uided Tour s,Pract ice Exercises orA pplicat io n Exercise for that C hapter.

Macromedia this directory contains demo copies of a variety ofMacromedia software.They are free to use within the restr ict ions describedin the instal lat ion pr ocedur es.

Toys this directo r y co ntains a var iety o f different m edia fi les that are sam -ples of applications and media elements available from third party vendors.They are free to use within the restr ict ions described in the instal lat ion pro-cedures.

11

Getting Started


12/116

File Extensions and Descriptions

Please note the following basic file extension names and descriptionused wi th in the book. O ther impo r t and expor t f il e form ats wi l l bein greater detai l in a later chapter as we loo k at th e opt ions that us

.fla Flash M ovie file; editable M ovie files.

.swf Sho ckw ave f iles; Expo r ted Flash f i les that can not be edi ted, bplayed using the stand-alone Flash Player, o r em bedded int o H T M L

.swt G enera tor Template ; al low s you to use the Flash M ovMacromedias Generator.

.mov M ovie fi le for mat ; Flash al low s Movies to be expor ted in Qvideo for m at .

.gif A nimated gif ;co m pressed gr aphic fi le for m at that can be used tMovie animations without interact ivi ty.

.bmp G raphic f ile for m at; on e of many that can be expo r ted fro m

.tif G r aphic fi le for m at; one o f m any that can be expor ted fro m F

.jpg G raphic f ile for m at; on e of many that can be expo r ted fro m F

.png G raphic f ile for mat na t ive to M acrom edias Fi rewo rk s; onethat can be exported from Flash.

Opening a New File in Flash

W indows Computer

A fter you have successful ly instal led Flash on your com puter, you cl ike any o ther W indow s sof tw are pro gram.

1 . O p en t he Pr o gr am s M enu in W in do w s.

2 . O pen the Macrom ed ia Fl ash 5 Fo lde r. See t he il lu st r a t ion be low

Figure 1-7 O pening the M acromedia Flash 5 Folder (PC)

3 . Se lect F lash 5 . See Figu re 1 -8 .

12

C H A P T E R 1


13/116

Figure 1-8 Selecting Flash 5 (PC)

4. A s Flash opens , i t p r esents an opening t i t l e sc reen .The exac t appearanceof this screen (see i l lustrat ion below) wil l differ depending on whetheryou have a commercial version that can be used to develop and dis tr ib-ute Flash programs or an Educational version that can only be used in aneducat ional inst i tut ion and not for commercial dis tr ibut ion.

Figure 1- 9 Flashs T itle Screen

5. O nce Flash has loaded, you should see Flashs main interface including theToo l Palet te , M enu Bar,Stage ,Tim eline,W or k A rea and Inspector s. W e w i llgo through these elements of Flashs interface in greater detail inC h ap t er 2 .

Macintosh Computer

A fter you have successful ly instal led Flash on your com puter, you can o pen i tl ike any other Macintosh software program

1. D ouble-c lick to open the Macintosh hard dr ive w here you instal led Flash 5 .

13

Getting Started

If you accident ally one of t hese inter fawindows ,you canreo pen i t by select ithe appropriate Meopt ion .W e ll p r ac tdoing this later.


14/116

2. O pen the Macro media Flash 5 Folder. See the fo l low ing i llust r a

Figure 1-10 O pening the M acromedia Flash 5 Folder (M ac)

3 . Se lect F lash 5 . See t he il lu st r a t ion be low.

Figure 1-11 Selecting Flash 5 (M ac)

14

C H A P T E R 1


15/116

4. A s Flash o pens, i t p resents an o pening t it l e sc reen.The ex ac t appearanceof this screen (see the i l lustr at ion below ) w ill differ depending on w hetheryou have a commercial version that can be used to develop and distributeFlash pr ogr ams or an Education al version t hat can only be u sed in an edu-

cat ional inst i tut ion and not for co m m ercial distr ibut ion.

Figure 1-1 2 Flashs T itle Screen (M ac)

5. O nce the t i t l e sc reen has e rased , you should see Flashs main in te r faceinc lud ing the Too l Pal et t e , Menu Bar, St age , Time l ine , W or k Ar ea andInspecto r s . W e w il l go t hro ugh these element s of Flashs inter face ingreater d etail in C hapter 2.

W hats New in Flash 5?

W ith ever y new r elease of Flash, m or e featur es are added to give you them ost up-to -date too ls to help you cr eate a com pell ing m ult imedia exper iencefor your W eb si te users . If you are new to Flash, these featur es w il l s im ply bepar t o f the learn ing pro cess for t he rest of the pro gr am . If you have som eexper ience w ith pr eviou s versions of Flash,yo u w il l f ind th at m any of the newfeatur es add co nvenience and po w er t o Flashs design t oo ls. H ere are som e ofthe outstanding new features in Flash 5.

Common User Interface

W i th t he developmen t o f t he C om mo n Use r In t e r f ace , M acrom ed ia hasstr eam lined how Flash can be used in tandem w ith ot her M acro m edia autho r -ing pro gr am s. C ustom izable keyboard shor tcut s as well as a m or e fam il iarToo lbox Layout , M enu Str uctur es and Float ing Panels m ake it easier to learn

15

Getting Started

Macin tosh computedo not require f i leex tensions, how eveorder to c reate c roplatform or Shockwdel iverable Mo viesshould m ake sure tinclude the pr oper extensions with allFlash Movie files.


16/116

and apply featur es in a var iety of M acro m edia pro ducts . T he neManagement feature also al lows you to customize your workspaceing and snapping panels in any arr angem ent.

Bezier Pen ToolT he Bezier Pen To ol gives you added co ntr o l over the cr eat io n ofor use in your Flash Movies.This tool is a lready a famil iar f ixtui l lustr at io n pr ogr am s such as M acro m edias Freehand. D esigner s famthe pen to o l in ot her such pro grams w il l f ind that Flashs Beziergives you the same precise anchor point control over drawing andlating gr aphics.

Movie Explorer

The new Movie Explorer a l lows you to v iew the s t ruc ture of yM ovies and com plex W eb appl icat ions in one pr in tab le window . TExplo rer t r anslates your Flash project int o a nested (str uctur ed) m abe searched and edi ted.The abi l i ty to view your applicat ions this wit easier for teams to manage complex Flash applications by probehind- the-scenes loo k a t how pro jec ts are s t ruc tur ed , w i thout v iTimeline of the .fla file.

Enhanced ActionScript Development Tools

A ctionScr ipt Too ls give developer s used to m or e t r adit io nal proenvironments an alternate interface for adding interactivity to Flast io ns.T his gro up of to ols includes the A ctionScr ipt Edito r, w hich Flash script ing language and allow s pro gramm er s access to a languain syntax t o JavaScript .T he A ctionScr ipt Editor can be used in the Exper t m od e, to aid users of varied exper ience levels. Flash 5 alsoextensive documentat ion regarding ActionScripts in the Flash HeA not her to ol , the D ebugger, helps develop ers check applicat io ns fousing A ctio nScr ipt Var iables.

MP3

W ith F lash 5 , you can now impor t M P3 f iles in to your M ovies for ufiles.This feature allows you to bring in high quality audio with smaYou can also export audio f i les in the MP3 format when publishinished Movies.

16

C H A P T E R 1


17/116

HTML Text Support

F la sh deve lope r s can no w use H T M L t ex t a long w i th F l ash s fami l i ar an t i -al i ased d i sp l ay t ex t .Th e new Tex t O p t io ns Pane l i n Fl ash 5 g ives u ser s t heo p t i o n o f fo r m a t t i n g t e x t w i t h H T M L 1 .0 t ags. A l so , H T M L t e x t fi le s c r e -at e d i n D r e a m w e av e r o r o t h e r e d i t o r s c an n o w b e u se d t o a u t o m at i c al lyupda te t ex t con ten t on pub l i shed F l a sh s i t e s .

X ML Support

X M L Extens ib le Mark up Language i s a re lat ive ly new w ay of w or kingw i th i n fo r m at ion o n the W eb . X M L i s a se t o f guides u sed to fo r m at s t ruc -tur ed da ta such as spreadshee ts in to tex t f iles.A l tho ugh, loo se ly re lated t oH T M L, X M L is used to c rea te o ther languages spec i fic to cer ta in types ofcon ten t o r sub jec t s. W i th Fl ash 5 , X M L st r uc tu red dat a can now be usedw ithin Flash applicat io ns.

Summary Flash is a widely used authoring software program used for creat ing high-im pact

W eb sites that include vector graphics , anim ation, audio and sophist icated interactivity.

The Learning Strategies used within the book are designed to accom m odate self-paced learning and classroom situat ions.They are:

A G uided Tour a s t ructured walk-through of how to do som ething l ike making menu / window select ions.

A Practice Exercise an introductor y, hand s-on experience in learning the basic tools and skills of Flash 5.

An App licat ion Exercise provides han ds-on experience in building structures that combine the concepts and skills learned across several chapters.

The Inside M acrom edia Ser ies uses a num ber of Icons, appear ing in the m inor colum n, to p rovide quick, visual cueing to par t icular types of inform ation.

All files that you work on in the exercises in this book w ill be saved in a directory you must create on the root directory of your computer s hard drive.This directory (folder) should be named SaveWork.

This book m akes use of num erous learning act ivit ies that include pre-exist ing Flash f i les and a variety of m edia elem ents . All of these fi les and elem ents , and a great deal more are contained on the CD -ROM that ha s been included w ith this book.

There are a num ber of new features of Flash 5.0, which have been described in this chapter.

17

Getting Started


18/116


19/116

C H A P T E R 2Flashs Interface

Chapter Topics:

Introduction

Flash s Metaphor

Flash s Interface

Guided Tour Flash sDefault Interface

The Stage

The Work Area

The Timeline

The Toolbox

The Menus

The Toolbar (Windows Only)

The Panels The Library

The Controller

The Movie Explorer

Flash s Help

Summary


20/116

Introduction

With Flash, you can go well beyond creating two-dimensional animation.Youcan create Web-delivered content that allows your users to interact with thecontent. The current chapter is designed to introduce you to some of themost important aspects of Flashs interface and will help you begin to work with some of the basic tools. Chapter 28 contains all the elements of Flashsinterface, including lots of illustrations. Chapter 28 is included as a file locatedon the CD-ROM in the folder named Chapter 28. Please take the time rightnow to print this file so you can use this material as reference as you continuethrough the rest of the book.You will find that Chapter 28 will be very help-ful to refer to as you begin working with Flash and later on for reference. Bythe end of this chapter, you will be able to:

explain Flash s metaphor as it is reflected in the interface components.

list Flash s major interface components. list Flash s tools.

Flashs Metaphor

Before we dive into looking at how Flash works, it would be useful to con-sider the metaphor that has been used to build the Flash interface. Themetaphor and many of the interface elements are very similar to anotherMacromedia software program Director.

Flashs metaphor is the key to understanding the program s interface, devel-

opment process, and the language used to create projects.The metaphor isbased on the theme of movie or theater production.

Think of it like this: You are creating a production essentially creating aMovie . Each time you work on a project in Flash, we refer to it as a Movie.Your role is Executive Producer. It is your task to decide on the setting for theMovie, how the story line will play out, who the main characters will be, whatactions they will take, and what kind of special effects will be needed to makeyour Movie appeal to audiences.

Everything that appears (or that is heard) in your Movie takes place on the

Stage (like a Hollywood sound stage).The actors, scenery and props that willbe used in the production are referred to as Objects within Flash. Just likeon a sound stage, Objects can appear on Stage, to varying degrees toward thefront or back of the Stage. Although Flash works as 2-D animation, you cancreate the illusion of depth by placing objects in the foreground or back-ground of the Stage. Objects appear more toward the front or back of theStage by placing them in different Layers that are either in front of or in back

20

CHAPTER 2


21/116

of each other. The action on the Stage is captured in individual Frames. AFrame is like a single moment of time that includes everything in every Layer

at just that moment. As each one of these Frames are created, they arestrung together to make up a Timeline, which consists of the entire Movie

production from beginning to end.We will look at each one of these interfaceelements in more detail as we proceed through the chapter.

Flash s Interface

Flashs interface provides you with a complete workshop of authoring toolsthat you can use in the creation of your Movie.The major components of theFlash interface include:

The Stage

The Work Area

The Timeline Layers

The Toolbox

The Menus

The Tool Bar

The Panels

The Library

The Controller

There are a number of windows that are part of this interface, containingtools for developing your Movie. During the development process, you willhave the opportunity to either keep all of these windows open and availablefor immediate use,or close some of them for later use. As you begin to work with Flash, you will find that there will be a few of these windows that you willkeep open most of the time, as they are central to development. All of thewindows can be opened or closed at any time you wish by accessing theappropriate Menu option.

You can also customize the Flash interface to fit your specific needs and styleof working.Your customized settings are saved in a Preferences file. If you havealready opened your copy of Flash and looked at the interface, you may havealready changed some of these default settings, perhaps without even know-ing that you have done so. Changes to the default setting could include any-thing from moving the windows around, to changing unique controls.

21

Flash s Interface


22/116

Guided Tour Flash s Default Interface

1. Open the Programs Menu (in Windows).

or

Double-click to open the Macintosh hard drive where you installed Flash 5.

2. Select the Macromedia Flash 5 Folder.

3. Select Flash 5.

Figure 2-1 The Flash Interface

4. Six windows will open when the program is fully loaded.The placementof these windows or panels may vary slightly according to the resolutionof your monitor, but should look similar to what is in the illustrationabove. To maintain consistency of appearance, the screen captures pre-sented in this book will illustrate the Windows version of the Flash soft-ware. On occasion, Macintosh screen captures will also be provided.

5. You may want to keep Flash open to refer to as you continue through the

rest of this chapter. In this way, you can refer to not only the screen cap-tures provided in the book, but look at the actual software as well.

22

CHAPTER 2

If Flash has been openbefore, your computerscreen may initiallylook different fromthe screen capturesin this book. If this isconfusing to you, youcan revert to a defaultscreen layout bychoosing Window /Panel Sets / DefaultLayout from theWindow pull downmenu. Selecting thisoption opens thepanels that appearedwhen Flash was firstlaunched and placesthem in their originallocation on the screen.


23/116

The Stage

When your program opens, the white rectangle you see in the middle of yourscreen is called the Stage. Following through with our metaphor of the the-ater or movie production, the Stage is the window that will display the finishedprogram. Aptly named, the Stage is where your Movie is created and whereall the action is played out.This is where you will place every element that youwant to be seen by the user.

There are a number of ways to change the way your finished Movie looks justby changing certain attributes of the Stage. For example, you can change thesize of the Stage and its background color by changing the Movie Properties,as you will learn in the next chapter. At 100%, the Stage will appear in theauthoring mode as it will appear during playback through the Flash Player. SeeFigure 2-2.You will find that the need may arise to increase the viewable sizeof the Stage and zoom-in on different sections on the Stage.This will help youmake precise visual edits with items placed on the Stage.You can use the PullDown Menu on the Stage to select different Zoom settings. See Figure 2-3.

Because Flash can have multiple windows and tools open at the same time,your screen can get crowded pretty quickly. To help you better manage thescreen real estate, you can zoom out,decreasing the size of the stage and pro-viding more room on screen.This can also help you more easily view anima-tions that start or end at positions off the viewable Stage.

Figure 2-2 The Stage at 100%

23

Flash s Interface


24/116

Figure 2-3 Zoom Pull Down Menu

The Work Area

The gray area surrounding the Stage is called the Work Area, similar to thebackstage or wings of a theatre stage. See Figure 2-4. If you have a smallscreen, you may need to scroll to the left/right or up/down to see where theedge of the Stage ends and the Work Area begins. You can also zoom out

using the pull-down menu (shown in Figure 2-3), decreasing the size of theStage until the surrounding Work Area is visible. The Work Area allows youto view objects placed partly or entirely off the Stage, where they are nolonger in the viewable region of the Movie. In a sense, Objects placed on theWork Area are waiting in the wings to make their big entrance into the FlashMovie.The Work Area gives you the option of moving Objects on and off themain Stage area while you are in the process of creating animated effects onthe main Stage.

24

CHAPTER 2

If you currently don tsee the Work Area,

you can turn the Work Area on and off byselecting the Menuoption View /

Work Area.


25/116


26/116

The Timeline

The next component of the interface that is essential in creating projects withFlash, is the Timeline. Any action that takes place on the Stage is controlledby what happens in the Timeline. The Timeline organizes all the Objectsinvolved in a Movie and determines how the different media elements willperform.The major components of the Timeline are Layers, Frames , and thePlayhead.

As you look at the Timeline in the illustration below, you can see that we arelooking at what appears to be a grid pattern of rows that have names (differ-ent Layers) and columns that are numbered (numbered Frames ).The redsquare (and red line extending below it) represent the Playhead. ThePlayhead resides on the row that contains the Frame numbers and can bedragged from Frame to Frame. See the illustration below.

Figure 2-6 The Timeline Layers, Frames and Playhead

Layers Content placed in your Flash Movie is contained in a Layer. Layersare a common organizational feature in most graphics programs and work ina similar manner in Flash.They can be thought of as a stack of transparencies,each containing a graphic element. With the use of Layers, objects can beplaced in front of or behind other objects. Layers can be given specific namesthat correspond with the objects placed on them. Placing an item on a Layerprotects it from being altered by items placed on other Layers. As you willsee in later chapters, you can add, delete, and control the attributes of Layers

including locking, hiding and outlining a Layer.

Frame A Frame is a single point in time and a unit on the Timeline.Thesmall rectangles that appear in the Timeline, as illustrated in Figure 2-6, delin-eate individual Frames. Each Frame is numbered in the Timeline and you canhave multiple layers for each Frame.Whatever you see or hear on the screenat any one given point in time (in a particular Frame), is a result of combiningthe content in each Layer, for that particular Frame. For example, if we look

26

CHAPTER 2

In Flash 5, the Timelinecan become a floatingwindow or can bedocked at the bot-tom or top of thescreen.To separatethe Timeline from itsdocked position, click in the gray area aboveLayers in the Timeline,or in the gray areawhere the Scene Icon

appears, and drag theTimeline away fromits default location.When you releaseyour mouse, theTimeline will becomea free-floating window.To dock the Timeline,repeat these steps anddrag the window to itsdesired position.


27/116

at Frame 7 on the Stage, what we see is the result of adding up all the con-tent, in all Layers, in Frame 7.

Keyframe A Keyframe is a specially defined Frame that contains either anaction or a change in an animated sequence.When you insert a Keyframe, youare telling the Timeline that some kind of change will occur or begin with thatparticular Frame. A filled circle, as illustrated below, depicts Keyframes thatare associated with content on a Layer in your Timeline.

Figure 2-7 The Keyframe Indicator

Playhead The Playhead in Flash is analogous to the playback head on avideo tape player, it picks up and displays whatever it is currently alignedwith.You can drag (scrub) the Playhead back and forth along the Frames of theTimeline. As you drag the Playhead along the Timeline, you will see yourMovie play out on the Stage.

Putting it Together

Here is another way to think about Layers, Frames and the Timeline.Think of the Timeline as an electronic strip of a movie film.When you hold up this stripof film (lets say from the movie s opening title screens) to a light source, yousee a series of movie frames. Each frame is the final result of different layersthat were put together to represent the total movie at that particular pointin time. If we look at a movie frame from the opening title, there were a num-ber of contributing layers a layer for the background scenery; a layer for thetext containing the title of the movie; and a layer for the sound track. In a like

27

Flash s Interface


28/116

manner, within Flash, a single Frame represents the total movie at a singlepoint in time.

As a Flash Movie is viewed from beginning to end, the Playhead moves alongthe Timeline, from left to right, playing all the content from all Layers, as itreaches each Frame.

The Toolbox

The Toolbox is an assortment of drawing,paint and text tools that can be usedto create objects for use in your Movies.The drawing tools found in the FlashToolbox are very similar to the tools found in many other graphics programs,including Macromedia s Freehand and Director. With these tools you have aconvenient way to create elements for use in your Flash projects, or to mod-ify graphics that have been imported from other software programs. The

Toolbox can also be used to manipulate elements on the Stage by positioning,scaling, and rotating objects, or changing their color attributes.

Figure 2-8 The Toolbox

The Toolbox is divided into four sections:Tools,View, Colors, and Options. Inthe pages that follow, we have provided a brief description of the tools foundin each section of Toolbox.You ll get an opportunity to practice using thesetools in later chapters.

Tools

View

Colors

Options

28

CHAPTER 2


29/116

The Tool Section

Figure 2-9 The Tool Section

The Arrow Tool is used to make selections, move or manipulate objects onthe Stage.

The Subselect Tool is used to view and select anchor points that make upvector objects drawn on the Stage.

The Line Tool is used to draw straight lines. Holding down the shift keyrestricts the lines to a vertical or horizontal axis or to a 45-degree angle.Thewidth, color, and style of the line is determined by the selections located at

the bottom of the palette and in the Stroke Panel.The Lasso Tool is used to make freeform selections of objects on the Stage.

The Pen Tool is used to draw Bezier paths on the Stage, using path points.

The Text Tool is used to add text to the Stage.

The Oval Tool is used to create elliptical shapes on the Stage. Holding downthe shift key restricts the shape to a perfect circle.

The Rectangle Tool is used to create rectangular or square shapes on theStage. Holding down the shift key restricts the shape to a perfect square.

The Pencil Tool is used to draw freeform outlines of shapes.

The Brush Tool is used to paint fluid shapes and apply color fills to objectson the Stage.

The Paint Bucket Tool is used to fill shapes and outlines with color.

Eye Dropper

Ink Bottle

Pencil

Oval

Pen

Line

Arrow

Eraser

Paint Bucket

Brush

Rectangle

Text

Lasso

Subselect

29

Flash s Interface


30/116

The Ink Bottle Tool is similar to the Paint Bucket Tool, but instead is usedto apply color and other stroke attributes to lines in your drawings.

The Eyedropper Tool is used to select colors and line styles for reuse inother objects.

The Eraser Tool is used to delete objects, or portions of objects onthe Stage.

The View Section

Figure 2-10 The View Section

The Hand Tool allows you to move the Stage around your screen instead of scrolling.

The Zoom Tool allows you to increase or decrease the magnification of objects on the Stage.You can double-click on the Zoom Tool to immediatelychange back to 100%.

The Colors Section

Figure 2-11 The Colors Section

The Stroke Selector allows you to change the stroke (line) color of anobject selected on the Stage.

The Fill Selector allows you to change the fill color of an object selected onthe Stage.

Default Colors changes the Stroke and Fill color swatches to the colorsoriginally selected when Flash was launched.

Stroke (Line) Selector

Fill Selector

Swap ColorsDefault Colors

No Color

30

CHAPTER 2


31/116

No Color changes the Stroke or Fill swatches to transparent.

Swap Colors switches the colors of the selected Stroke and Fill swatches.

The Options Section

Figure 2-12 The Options Section

The Options Section changes depending on the tool selected,but generally allowsyou to control additional attributes of the tool, or the selection on the Stage.Youwill see the details of some of these options as we encounter them during prac-tice exercises in the chapters that follow.

The Menus

The Menus (and many of the options within the Menus) found in Flash are fairlytypical in organization and function to those found in many software programs.See the illustration below. In Chapter 30,you will find a complete listing of each

of Flashs Menus, including all the options for each Menu and keyboard short-cuts. We will take a closer look at many of the options in each Menu as weencounter them during the exercises. Below you ll find a brief description of the functionality of each Menu with a note about a few of the options.

Figure 2-13 Menus in Flash

File MenuThe options listed in the File Menu pertain to things that you can do toFlash files.The common options include creating a New file,Open an exist-ing file, and Save a file. You also use this Menu to Import graphics fromother programs for use in Flash, as well as Export and Publish your Moviefiles in various formats.

31

Flash s Interface


32/116

Edit Menu

The options listed here are the same ones that you ve used in most softwarepackages: Cut, Copy, Paste, Select All, and of course the indispensableUndo. Cut Frames, Copy Frames, and Paste Frames allow you to usethese same type of editing options in the Frames of the Timeline.

View Menu

The options in the View Menu provide the capability to turn on or off vari-ous display options.We will make use of these during the exercises.The Grid,Guides, and Rulers options are provided for use as layout tools whendesigning your Movies.

Insert Menu

The options listed here allow you to insert or delete Frames, Keyframesand other elements into the Timeline of the Movie. It also allows you to insertnew Symbols into the Library of your Movie.

Modify Menu

The options listed under the Modify Menu provide the capability to changethe characteristics of the Flash file as well as most of its major interface ele-ments.There are options to change the Instance, Frame, Layer, Scene andMovie properties. You can also Transform shapes (scale or rotate) orGroup objects on the Stage. Numerous other options allow you to change

other attributes of objects on the Stage.

Text Menu

The options listed under the Text Menu control the formatting of text onthe Stage.You can change the Font, Size, Alignment and other text attrib-utes with the commands found under this menu.

Control Menu

All the options listed with the Control Menu are pertinent to running/viewing either the entire file or a portion of it.We will make use of some of these options later.

Window Menu

The options listed within the Window Menu control the display (orabsence) of a variety of different types of information windows. Of greatestinterest will be the Panels and Library options.

32

CHAPTER 2


33/116

Help Menu

The options listed within the Flash Help Menu offer a variety of different meth-ods to obtain additional information including:Using Flash;ActionScript Reference;ActionScript Dictionary; Flash Support Center as well as other options.

The Toolbar (Windows Only)

The Toolbar, also called the Standard Toolbar, helps you navigate withinFlashs interface. The Toolbar contains shortcuts to Flash s menus andwindows. By clicking on the button icons in the Toolbar you have quick andconvenient access to many of Flash s more frequently used functions and capa-bilities. See the illustration below, which includes descriptive labels for eachbutton on the Toolbar.

Figure 2-14 The Toolbar (Windows only)

The Panels

Panels are a new addition to Flash 5 and make modifying elements of your FlashMovie a snap! Panels enable you to view and edit elements of your Movie usingsimple, subject-based dialog windows.The addition of Panels makes the Flashinterface much more similar to Fireworks, Freehand, and other frequently usedgraphics programs. These Panels, or floating windows, can be displayed andhidden using the Window Menu.There are 17 such Panels, each with specificcapabilities. All of these Panels are described in greater detail in Chapter 28(located on the CD-ROM). The following illustration shows you the DefaultPanels that open when Flash is launched.The tabs at the top of each windowallow you to activate different Panels within the set. In Flash, you can also cre-ate your own unique Panel Sets, based on the way you like to work, by drag-ging the Panel tabs and combining them into new sets.

NewPrint

PreviewSnap ToObjectSave Copy Undo Straighten Scale

Open Print Paste Redo Rotate AlignCut Smooth

33

Flash s Interface


34/116

Figure 2-15 Flash s Default Panel Sets

Opening and closing Panels in Flash is easy when you make use of theLauncher.The Launcher contains a series of icons found at the bottom right-hand corner of the Stage Window.These icons open and close commonly usedPanels with just one click. See the illustration below.

Figure 2-16 The Launcher

The Library

The Library is where certain types of objects used in a Flash Movie arestored. In Flash, some of these objects are referred to as Symbols. Symbolsare elements that can be re-used throughout the Movie.There are three maintypes of Symbols used in Flash Graphics, Buttons, and Movie Clips. Whenyou drag one of these Symbols from the Library and place it on the Stage, youare creating an Instance of that Symbol. Flash allows you to edit theseInstances without altering the original Symbol.This provides greater efficiency

Show Mixer

Show InfoShow

Character Show

Movie Explorer Show

Library

Show Show

34

CHAPTER 2


35/116

as you create your Movies. Symbols and Symbol terminology will be coveredin greater detail in a later chapter. Although the Library is mainly used forstoring Symbols, it can also store bitmap images, sound files and fonts.

Using Symbols can also significantly reduce the size of your Flash file, becauseregardless of how many Instances of a Symbol you create on Stage, Flashstores the Symbol only once in the Library. By storing these Symbols in theLibrary, Flash can keep your Movies smaller.This is an important factor whenconsidering distributing your application across a narrow bandwidth (typicalInternet modem connection).

Flash 5 includes a variety of useful Libraries that you can incorporate withinyour Movies or allows you to create a Library of your own.You can also useLibraries that have already been created in other Flash files.They can eitherbe shared, or you can use the File / Open as Library Menu option to pullSymbols out of other Movies and use them in your current Movie.

Figure 2-17 The Library

The Controller

The Controller contains all the controls needed to play, pause, rewind, fast-forward and step through the Frames in a Movie Timeline and preview theaction on the Stage.The Flash Controller has buttons that are similar to thosefound on a VCR. See Figure 2-18. Unlike most VCRs, however, with theController you can play the Movie using the Step Back and Forward feature,which allows you to preview one Frame at a time.

35

Flash s Interface

Flash comes with sixCommon Libraries:Buttons, Graphics, MovClips, Sounds, LearningInteractions, and SmartClips.These containgraphics and otherSymbols that you canuse in your Movies.To open one of theseLibraries use the Menuoption Window /Common Librariesto explore these built-inLibraries.


36/116

Figure 2-18 The Controller

The Movie Explorer

The Movie Explorer is a new feature in Flash 5 that allows you to view allthe elements of your Flash Movie in a branching list.This feature is designedspecifically to aid development teams as they work collectively on Flashapplications.Teams can more efficiently view the overall structure of a com-plicated Flash application all in one window. Plus, work groups can print theMovie Explorer window and use it as reference. Teams can also choose toview all the elements in the Movie Explorer or only certain elements, such asSymbols, Scenes, Labels, bitmaps, or Actions.

Figure 2-19 The Movie Explorer

RewindStop

Step Back

Play

Step Forward

GoTo End

36

CHAPTER 2

To play your Movieonce from the begin-

ning without using theController, press theEnter Key.


37/116

Flash s Help

Flash has built-in help files that are both convenient and intuitive.These files area great reference tool as you begin to work with Flash, and will also be usefulin the future if you forget a technique or function previously learned.These filesare formatted as HTML files that can be viewed in your browser without con-necting to the Internet.The help files are located in the Menu option: Help /Using Flash. If you are connected to the Internet, you can join other Flashdevelopers in the Flash Support Center on the Macromedia Web site.

Summary

In this chapter you have been introduced to the major components of theFlash interface.We have also reviewed some terms that you will find useful asyou begin working with Flash.

Flash uses a metaphor analogous to movie production or the theater. Flash sinterface windows are named and use some of the same terminology as ele-ments of movie production.

Flash s Interface

The Stage is where your Movie is created and displayed.Every element thatyou want to appear on screen, must be placed on the Stage.

The Work Area is the gray area around the Stage.The Work Area allowsyou to view objects placed partly or entirely off the Stage where they are no

longer in the viewable region of the Movie.The Timeline is comprised of individual Frames and Layers.The Timelineorchestrates all of the symbols, actions, and animated effects that take place ina Movie.

The Toolbox is an assortment of drawing, paint and text tools that can beused to create graphic elements and text for your Movie.

The Toolbar contains an assortment of icon-based shortcuts to Flash smenus and windows.

The Panels are floating windows that allow you to create or modify ele-ments of your Movie.

The Library contains all the Symbols used in your Movie.

The Controller contains all the controls needed to play, stop, rewind, andfast-forward through a Movie on the Stage.

37

Flash s Interface


38/116

Key Terms

Layers are the horizontal rows in the Timeline. Content placed in yourFlash Movie is contained in a Layer.

Frames are the vertical columns in the Timeline. A Frame includes thecontent of all Layers, at a single point in time.

Keyframe a Frame that contains either an action or a change in an ani-mated sequence.

Playhead The Playhead in Flash displays the Frame with which it is currentlyaligned.The Playhead automatically moves from left to right on the Timelineas the Movie is played on the Stage. However, it can also be manually draggedback and forth in order to view one Frame at a time, or to move yourTimeline to a particular Frame.

38

CHAPTER 2


39/116

C H A P T E R 3Opening,

Playback, and

Control of Movies

Chapter Topics:

Introduction

Guided Tour The Controller and Playhead

The Timeline

Playback Speed

Guided Tour Movie Properties

Summary


40/116

Introduction

The focus of this chapter is to introduce you to Flashs Controller, Playhead,Control Menu and Movie Properties so that you can preview Movies andbecome familiar with the basic features of Flashs Timeline. Using these con-trol features will allow you to test your Movies as they are being created,preview any animation Frame-by-Frame, and enable buttons in the Stage area.If you are unfamiliar with the concept behind a timeline-based program, prac-ticing with these controls will also give you a better understanding of howanimations are created.

Later in this book you will learn about more advanced features of the ControlMenu in order to use elements such as the Bandwidth Profiler to optimizeyour Movie files for efficient performance on a Web site.

By the end of the chapter you will be able to:

open Movies.

control the playback of Movies.

test Movies.

Guided Tour The Controller and Playhead

In this Guided Tour, you will open an existing Flash Movie and learn how topreview the Movie using the Controller and the Playhead on the Timeline.These tools allow you to preview the Frames in the Timeline of a Movie as itis being developed. By the time you complete this Tour, you will have a betterunderstanding of how these features help you preview a Flash Movie,and howyou can step through the individual Frames of a Movie.

1. First we need to open the file named Lesson3.fla that is located in theChapter03 Folder, on the CD-ROM supplied with this book.a) Use the Menu option File / Open.b) For PC In the Dialog Window that opens, use the pull down

browse function within the Look In Field to locate and select theCD-ROM Drive.For Mac use the pull down browse function to navigate to the

CD-ROM.c) Locate, select and look inside the Chapter03 Folder.d) Locate,select and open the Lesson3.fla file by either double click-

ing on the file name or by selecting it and then clicking on the OpenButton.

2. Take a moment to look at the file.

40

CHAPTER 3


41/116

Figure 3-1 The Stage

Figure 3-2 The Timeline

3. Now it s your turn to take control of the Timeline of the Movie. Let s usethe Controller and the Playhead to step through the completed Moviefile. First, we need to open the Controller.

a) If you are using a Mac, with the Lesson3.fla file still open on theStage, open the Controller by selecting Window / Controller.b) If you are using a PC, with the Lesson3.fla file still open on the

Stage, open the Controller by selecting Window / Toolbars /Controller.

4. The Controller Buttons look very similar to a VCR s buttons, and servethe same functions in the Flash environment.

Figure 3-3 The Controller

RewindStop

Step Back

Play

Step Forward

GoTo End

41

Opening, Playback, and Control of Movies

The Controller is foundin different places onthe PC and on the Mac.The Controller on aMac is a floating palettthat can be moved andpositioned anywhere onthe screen. On the PC,the Controller is adockable window, whiccan be docked any-where under the Menuor at the bottom of theStage near the Launche


42/116

a) Press the Play Button on the Controller to run through the entireTimeline of the Movie until it reaches the last Frame and stops. Noticethat the Playhead in the Timeline moves through each Frame of theMovie in sequence,displaying the contents of every Frame on the Stage.

b) Press the Rewind Button and then play the Movie again.This time,pressthe Stop Button before the Playhead reaches the end of the timeline.

Figure 3-4 The Rewind and Stop Buttons

c) Use the Step Back and Step Forward Buttons to step throughindividual Frames in the Movie Timeline. Notice how the Playheadmoves in sequence with any action in the Controller.

Figure 3-5 Step Back and Step Forward Buttons

5. Now, instead of using the Controller, move through each Frame by drag-ging the Playhead to the left or right along the Timeline. As the Playheadmoves,the red line descending from the Playhead shows you which Frameyou are on in each Layer of the Timeline.

Figure 3-6 The Playhead

6. You can modify the playback of your Movie by using Control Menuoptions.To use these options you must also play the Movie by selectingthe Menu option Control / Play.

Playhead

Step Back Button Step Forward Button

Rewind Button Stop Button

42

CHAPTER 3

If you want to playthrough all the Framesof your Movie withoutusing the Controller,press the Enter Key.The Playhead willmove down the Time-line and stop at thelast Frame. PressEnter again to startthe Movie from thebeginning.


43/116

a) To play the Movie in a continuous loop select the Menu optionControl / Loop Playback.

b) To play all the Scenes in a Movie select the Menu option Control /Play All Scenes.

c) To play a Movie without sound select the Menu option Control /Mute Sounds.

7. We re finished here, let s move on.You can leave this file open, as we willuse it in the next Guided Tour.

The Timeline

By now you probably realize that the Timeline is the central controlling ele-ment in a Flash Movie. The Stage displays all the objects and elements in amovie that the viewer sees. However, any action that takes place on the Stage

is controlled by what happens in the Timeline. In the previous Guided Tour, asyou moved the Playhead along the Movie Timeline, you saw how individualFrames triggered events displayed on the Stage. When working with theTimeline in Flash, objects, actions, or animations will be activated by the con-tents of these individual Frames in the Timeline.

Flash provides the capability to include multiple Layers in the Timeline so thatyou can create very complex Movies with many different animated objects. Inaddition, by using Symbols you can also place a sub Timeline within themain Timeline or in other words, nest Timelines within other Timelines.This is an advanced feature of Flash, which we will look at later in the book,

as it is one of the features of Flash that makes it so versatile and powerful.The basic concept and structure of the Timeline is rooted in the way tradi-tional Frame-by-Frame animation was created in the early days of the movieindustry.When animators first started creating cartoons, each Frame of actionin the movie was drawn by hand. After the first Frame was drawn, animatorsplaced translucent paper (onionskin paper) on top of the first Frame so thatthey could see the previous Frame and draw incremental changes on this sec-ond sheet of onionskin.They then overlaid another sheet of onionskin for thenext Frame with incremental changes. Putting hundreds or thousands of these sheets together eventually made up an animated scene.

In a similar way, as children, many of us created our own cartoons by draw-ing a simple figure on the edge of many pages of a book, with each page con-taining a small change in the figure.When you flipped through these pages,you saw an animation of the figure. Although a crude form of animation, theseflip-books use the same concept as traditional Frame-by-Frame animation.

43



44/116

While the Timeline interface for Flash is based on this traditional Frame-by-Frame concept, Flash also has built-in features that allow you to work muchfaster than early animators.The Tweening features in Flash make it easier tocreate animation by taking the tedium out of creating each individual Frame

within the animation.With the Tweening feature, you create the beginningand end figures,and let Flash create the in-be tween Frames, saving you a lotof time and effort.

A simple example might clarify the difference between Frame-by-Frameanimation and Tweening. In our example below, the effect that we want tocreate is to make it appear like a large ball is moving away from us on adiagonal path. The start (or first Frame) and the end (last Frame) forboth Frame-by-Frame and Tweening will be exactly the same.Take a look atthe illustrations below.

Figure 3-7 First Frame

Figure 3-8 Last Frame

In the first Frame of the animation there is a large ball located in the lower left-hand side of the Stage. In the last Frame, the ball is much smaller and locatedin the upper right-hand corner of the Stage. In this example, let s assume thatthere will be 20 Frames between the first Frame and the last Frame.

44

CHAPTER 3


45/116

With Frame-by-Frame animation you would need to make modifications inthe second and all other in between Frames. In each Frame you would needto draw the ball just a little bit smaller and move it slightly to the upper right.In other words, you end up drawing the ball in all 22 Frames.

With Tweening, you draw the first and the last Frames and use Frame Paneloptions to have Flash automatically create the necessary changes to all theFrames in between the first and last Frames.The term Tween is really a playon words with this concept in beTWEEN Frames.

In one of the chapters a little later on, you will get into the details of Motionand Shape Tweening, with lots of hands-on practice with Tweening.

Playback Speed

The Playback Speed of a Flash Movie is controlled by the Frame Rate chosenin the Movie Properties.You can think of this as setting a speed limit of howfast the Playhead runs through the length of the Movie. Flash measures thespeed of a Movie in terms of Frames Per Second (FPS). If the Frame Rate isset to 30, Flash displays 30 Frames Per Second. By increasing the Frames PerSecond, you affect a Movie in two ways. First, the animation will play faster.And second, the animation will play more smoothly (assuming your com-puter s processor is fast enough to handle the faster FPS). It is important tounderstand that the Frame Rate does not control factors such as slowInternet connections or processor speed.

What Frame Rate is best for your application? There really isn t a correct generic answer that will work for every situation. There are several factorsthat will influence how well your Flash Movie will playback. These factorsinclude: the user s computer CPU speed; the user s graphic card/monitor; thedelivery medium (CD-ROM; Internet modem connection; Internet broadbandconnection; Intranet broadband connection, etc.); the animation itself thesize of the objects and complexity of motion; and whether additional mediaelements (audio / video) are involved in the presentation. Faster, newer com-puters will be able to handle higher Frame Rates.

Whatever Frame Rate you select, it should accommodate the typical user that

you expect will access and view your application.You may find that a FrameRate between 12 and 20 will serve as the best lowest common denomina-tor for your target audience. However, the best advice is to experiment withdifferent Frame Rates while you test these rates with various computersand connections that are typical of what your viewers will use.

Take a look at the following illustration.The Frame Rate is displayed at thebottom of the Layers in the Timeline.This portion of the Timeline is called the

45



46/116

Status Bar, because it displays the vital statistics of the current Movie.Whenyour Movie begins to play, this Status Bar will tell you if the Frame Rate dipsbelow the FPS setting because of complex animation that taxes your com-puter. Information such as the number of Frames, Frames Per Second and the

estimated run-time of the Movie is displayed in this area.

Figure 3-9 The Status Bar Including Frame Rate

Guided Tour Movie Properties

This Guided Tour will show you how to control the basic elements of aMovie the Movie Properties. It is important to remember that these settingsare applied globally to the Timeline of the current Movie and are used onlywithin the Movie in which they are set.

1. In this Guided Tour we will continue to use the Lesson3.fla file that wefirst opened in the previous Guided Tour in this chapter.

2. If you do not currently have the Lesson3.fla file open,please refer to theprevious Guided Tour and follow the instructions in Step 1 (a-d) to openthe Lesson3.fla file.

3. Now let s change the Movie Properties of this Flash file.

4. Open the Movie Properties Window by selecting the Menu optionModify / Movie. The Movie Properties Window now opens.This windowwill give you several options to customize your Movie and Stage settings.See the illustration below.

Figure 3-10 The Movie Properties Window

46

CHAPTER 3


47/116

5. Change the Frame Rate to 45 fps. This will significantly speed up the ratein which the Playhead moves through the Movie.

6. The Movie Properties Window also allows you to change the pixeldimensions of your Movie. Change the pixel dimensions to 300 x 300.

This setting changes the physical size of the Stage.7. Customize your Stage further by changing the color of the background.

Click on the Background Color Button to bring up the Color Well.Selectany color from the Color Well as your background color.

Figure 3-11 Background Color Button and Color Well

8. Click OK once you are finished editing the Movie Properties settings.Press the Play Button on the Controller to see the changes to thePlayback Rate.

Summary In the first Guided Tour, you were introduced to the Controller: how to open it

and use the basic buttons to Play, Stop, Rewind, Step Back and Step Forward.You also saw how you could use the Control Menu to Loop Playback and other options.

Any action that takes place on the Stage is controlled by what happens in theTimeline. All objects, actions, or animations displayed on the Stage originatefrom the individual Frames that are contained in the Timeline.

The basic concept and structure of the Timeline is rooted in the way traditional Frame-by-Frame animation was created in the early days of the Movie Industry.

47


The higher the numberin the Frames Per

Second setting, the fastethe Movie will play. It isimportant to rememberthat slow processorspeeds and a slowInternet connection maycause the Movie topause or render slowly.

As you are creatingyour Movie, you maywish to alter the sizeof the Stage and makeyour Movie dimensionssmaller or larger. It isimportant to understandhow Flash re-sizes theStage in order to avoidlong production delaysthat can arise from thissituation.

When you re-size theStage, Flash uses the toand left as constantedges. Any pixelsadded or subtractedfrom the Stage will betaken from the bottomor right edge.

For example, if you makthe dimensions of yourMovie smaller, anything the right or bottom that

extends past the newdimensions will no longebe on the Stage.TheBottom line if you areunsure of the final dimensions of your Movie,usethe top and left as fixedsides of your Movie.


48/116

With Frame-by-Frame animation you need to make modifications to every Frame that is being used to depict a change in motion or shape.

With Tweening, you draw the first and the last Frames and use Menu and Panel options to have Flash automatically create all the necessary changes to all

the Frames in between the first and last Frames.The term Tween is really aplay on words with this concept in beTWEEN Frames.

The Playback Speed of a Flash Movie is controlled by the Frame Rate chosen inthe Movie Properties.You can think of this as setting a speed limit of how fastthe Playhead runs through the length of the Movie.

Whatever Frame Rate you select, it should accommodate the typical user that you expect will access and view your application.

In the second Guided Tour, you saw how you can use the Modify / Movie optionsto customize your Movie and Stage settings.

48

CHAPTER 3


49/116

C H A P T E R 4Drawing

with Flash

C h a p t e r Topics:

In t roduct ion

Grap hic Form ats

T he Ben efit s of Vector G raph ics

Pra ct ice ExerciseD rawing Simp le

Pra ct ice ExerciseU sing th e Tool M

Guided Tour Introduction to L

Sum m ar y


50/116

Introduction

W hile the anim atio n to ols in Flash are w hat real ly sets it apar t f roautho r ing pro gr am s, Flash also has a pow erful set of dr aw ing and pthat make i t possible for designers to create complex animations aest ing designs al l within o ne pro gr am .W ith the dr aw ing and painFlash, you can create ever ything from ob jects to be animated to designs,w itho ut th e aid of any other gr aphics pro gram . In addit ion ,see in a later chapter,Flash also al low s you to impo r t ar t w or k createvector-based programs l ike Macromedias Freehand or a bi tmap eAdobes Photoshop.

W ith t he release o f Flash 5, veteran user s of Flash w il l be pleasedaddi t ion of the Bezier Pen too l , a too l s imi lar to the pen too ls in ogr am s like Macro m edias Freehand and Firewo r ks. N ovice users w icover that w ith Flashs draw ing to ols , you can easily create shardesigns, w itho ut m uch design exper ience.

A s you open u p the Flash Too lbox , get r eady to explo re al l the desbi l it ies avai lable to you w ith t hese pow erful dr aw ing to ols .

By the end o f this chapter, you w il l be able to:

brief ly describe the difference betw een Raster and Vector Grap hic

ident ify the drawing tools in Flash.

use the drawing tools to create simp le shapes.

app ly colors to your designs.

ident ify the different par ts of the Layers Panel .

Graphic Formats

W hen creat ing and using graphics, i t is impo r tant to under stand the betw een the tw o t ypes of graphic f ile for m ats: Raster and Vecto r.Thtion of a Raster graphic l ies within a two-dimensional matr ix (basand columns) composed of individual pixels that are defined byby) specific X (ro w ) and Y (colum n) coo rd inates . Raster gr aphics quently referred to as a bi tmapped graphic) are created in paint

that bu i ld an im age by electr onically defining specific pixels. For eor der to create a l ine in a bi tm ap for m at , pixels are painted (eleturned on) as the drawing tool moves over the surface.The l ine is c

50

C H A P T E R 4


51/116

of painted pixels laying side by s ide,d efining the length and w idth of t he l ine.The Raster f i le must s tore the locat ion and propert ies of each one of thesepixels.T he stren gth o f bitm apped gr aphics is that t hey are capable of very h ighresolut io ns,w ith br i l liant co lor s .T he dow nside is that bi tm apped gr aphics tend

to have large file sizes (because of all the information being stored) and aredifficul t to r esize and o ther w ise manipulate . Bitm ap gr aphics are th e mo stcom m on graphic t ype used o n t he W eb to day, since m ost W eb graphics are ine ither the G IF or JPEG form at w hich are both b i tmap graphic types. Both ofthese bi tmap f i le formats are compression formulas designed to reduce thesize of specific types of graphics.

Figure 4-1 N orma l Bi tma p and M agnified Bitmap (Showing Individual Pixels)

In contrast ,Vector graphic f i les contain algori thms (mathematical equat ions)that are used to generate the objects they represent . A lgor i thm s can easi lyrepresent c i rc les, arcs, l ines, squares and o t her such objec ts. A s you m ightguess,Vector graphics have file sizes that are much smaller than their bitmapcousins, but the do w nside is that t hey general ly do not possess the br i l lianceof b i tmaps tha t m ay conta in com plex co lor pat te r ns wi th m i ll ions of co lor s.T he Figures 4-2 and 4-3 clear ly show the d ifference in how each for m at d is-plays a circle . N ot e the jagged edge (due to the pixels) in the Bitm ap.

Figure 42 Vector Graphic of Circle

51

D rawing with Flash

A pixel is the smalleuni t of measuremen

w h e n w o r k i n g w i tbitm ap gr aphics. Eagraphic is made up lots o f different pixwith varying shadescolor.These pixels asmall that when thegraphic is viewed am al size , t he pixelsvar io us color s blentoge ther to fo rm aimage recognizablethe hum an eye, suchpicture o f a D uck.Ycomput e r m oni to rolution is defined it e r m sof pixels: 800 pixel(along the X -Ax is)by 600 pixels (alonY-A xis) .The larger number o f p ixe ls, thm o r e in fo r m at i o n ,detail the image cotains.


52/116

Figure 4 -3 Bitma pped Graphic o f Circle

W hen w or king w i th vecto r graphics in F lash , w hat you see i s the al ine of the graphic objec t you cr eated . C onverse ly, the softw are o n yputer reads vector graphics as algor i thm s and then tr anslates them

display o f lines and cur ves that are seen as reco gnizable shapes to youVector graphics differ greatly from bitmap graphics and will be didet ail in a later chapter.

Figure 4 -4 Comp lex Vec tor Graph ic W i th M any Anchor Po int s

The Benefits of U sing Vector Graphics

O ne of th e greatest benefits of using vecto r gr aphics in Flash anis that vector graphics can be scaled proport ional ly to any size smaller and stil l ret ain t he sam e cr isp shape and o ut line as their o r

T his char acter ist ic is not t r ue of bi tm ap images. Since the vector fornative gr aphic for m at of Flash Mo vies, M ov ies created in Flash canproport ional ly,depending on the s ize of the display window,withouimage qual ity.In t he W eb enviro nm ent , this capabil i ty m eans that dem ult iple com puter display resolut ions is now mu ch easier t han it u

52

C H A P T E R 4


53/116

Another benefi t of vector graphics is that they tend to have a much smallerf i le s ize and usual ly perform faster (wri te- to-screen t ime) than bi tmaps.Thereason for this is that th e infor m atio n in a vecto r gr aphic cont ains m athema-t ical equat ions, rather than large am ou nts o f data describing each individual

p ixel . A s any W eb user k now s, the smal le r and m or e e ff ic ien t t he f ile size , thequicker i t dow nloads over t he Inter net .Th e use of mo re efficient m edia t r ans-lates to a bet ter exper ience for the user.

N ot only do graphics benefi t f rom Flashs vec tor form at , so does tex t . Textcreated in Flash (w ith the use of anti-aliasing) can be as crisp and clean as textused in a pr in ted publ icat ion . W e w i ll t a lk m or e about tex t op t ions in late rchapters.

Practice Exercise Drawing Simple Shapes

Description

This exercise wil l introduce you to the use of the drawing tools in the FlashToolbox (see i l lustrat ion below) by creat ing s imple objects of your owndesign. In later chapter s , you w il l impr ove on these ski l ls by creat ing m or ecom plex graphics. For now , lets concent rate on the fundam entals.

Figure 4 -5 The Toolbox , I t s Tools and M odif ie r s

Tools

View

Colors

Options

53

D rawing with Flash


54/116

Take-a-Look

First , le ts take a loo k at the co m pleted exercise by loo king at t he fLesson4.fla located in the Chapter04 Folder on the CD -RO M .T he

you draw may be different from what is i l lustrated here.1 . Fi rs t we need to o pen the fi le nam ed Lesson4. fla tha t is locate

C hapter04 Folder,o n the C D -RO M supplied w i th th is boo k.a) U se t he M enu o pt io nFile / Open.b ) In t h e D i al o g W i nd o w t h at o p en s, u se t h e p ul l- d o w n b r o w se

w i th in t heLook In Field to locate and select t heCD-ROM Drive.c ) L o cat e , s ele ct an d lo o k i n sid e t h eChapter04 Folder.d ) L o cat e , se lec t an d o pe n t h eLesson4.fla f ile by ei ther do uble cl i

ing on the f i le name o r by select ing i t and then cl icking on tBu t ton .

2 . Tak e a m o m e n t t o lo o k at t h e file .

Please note the following properties of the completed exercise: a) W i th t he u se o f each Too l in t he Too lbox , p lease no t e t hat t

different m od ifier o pt io ns avai lable for that t oo l .b ) The Ar row Too l w i ll al low you to m ove ob ject s. Be care fu

both the St ro ke and Fi ll , i f you w ant to mo ve them bot h .c ) U ngrouped and Gro uped ob jec t s behave qu it e d iffe r ent ly. N

difference.

Storyboard:On-Screen

For this exercise, the end resul t of w hat you create is s t r ic t ly up to yexample, here is w hat w e cam e up w ith as w e drew objects for this

Figure 4 -6 O bject s O n-Screen

54

C H A P T E R 4


55/116

Storyboard: Behind-the-Scene

For th i s exerc ise , there i s no pr ogramm ing to show you and thus no i llus-tr at io n.W e have lef t this sect ion header her e to m aintain consistency amo ng

the Pract ice Exercises in t he bo ok .

Step-by-Step Instructions:

1. Lets star t w ith a new file by select ing the M enu opt ionFile / New.

2. N ow t ake a loo k a t t he Too lbox . Let s ge t t o w or k .a) In t heToolbox select theLine Tool.

Figure 4 -7 The Line Tool

b) W it h yo u r m o u se b ut t o n ,click anyw here o n th e Stage and co ntinuet o hold down the mo use bu t ton .Drag out f rom where you havecl icked, pro ceeding abo ut 4 inches.Release the mouse bu t ton toform a l ine.

c ) Take a few m om ents and exper iment w i th draw ing l ines and shapesusing th eLine Tool.

d ) L o o k at t h e C o lo r Se ct io n o n t h e b o t t o m p o r t io n o f t he To o l b o x .The f i r s t op t ion i s the S t roke Color Modif ie r.Click on t he small

box and continue tohold down t he mouse button to br ing upt he Color W ell. See Figure 4-8 . U se the Eyedropper C ursor toselect a color. Try dr aw ing a few l ines w ith this new co lor.

55

D rawing with Flash

The Keyboard Shorfor selecting the LiTool is pressing theKey on both the PCand Mac.

Keyboard shor t cu tare factor y predefinduring installation.Flash 5 gives you thoppor tun i ty to a l t e

se t your ow n keybocommands .Shouldyou want to do th iselectEdit / KeyboardShortcuts to v iew, sor edi t any keyboarshor tcu t s .I f you decide to a l tex i st ing com mandsever, be aw are t hat shortcuts may no locor r espond w i th th

provided in this bo


56/116

Figure 4 -8 St roke C olor Color Wel l

e ) Let s make the li ne a l it t l e b it t h i cke r. Se lect t he M enuW indow / Panel / Stroke. T his op ens the Str oke Panel . N ot e this panel has options for changing the type of line (solid orof dashed l ines) in t he f i rs t f ield w ith a pul l-dow n m enu. Seet r at ion be low . C hange the l ine type. D raw a l ine or tw o.

Figure 4-9 Stroke Panel Line Type Field

f) T h e n ex t o p t io n i n t he St r o k e Pan el is fo r li ne w i d t h .Click-on t hepull-down arrow. A slider appears.Click on and drag t he han-dle up and no te h ow this makes the l ine thicker.You can alsoa number instead o f opening the s lider. D raw a line or tw o.

Stroke W idth

Stroke Type

56

C H A P T E R 4


57/116

g) W h en yo u ar e do n e, sele ct t h e M e nu o p tio nEdit / Select All.h ) W e arent go ing to save any of these basic draw ings, so se lec t the

M enu op t ionEdit / Clear.

3 . N o w let s tr y t h e C ir cle To o l.

a) In theToolbox select theCircle Tool.

Figure 4 -10 The C i rc le Tool

b) W it h yo ur m o use b ut t on,click anywh ere o n th e Stage anddrag o utabout 3 inches to form an oval .Release t h e m o u se b u t t o n . N o t i cethat the spot w here you f i rs t c licked is the po int of or igin for the ovaltha t you have created . A lso no te tha t w hatever St ro ke mo di fiers you

set pr eviou sly l ine thickness and l ine (Str oke) co lor co ntinue tobe used as you draw.c ) L o o k a t t h e C o l o r s ec t io n o f t h e To o l b o x agai n bu t t h is t im e , lo o k

at the second option Fi l l Color.Click on t he small box and con-t inue tohold down t he mouse button to br ing up theColorWell. U se the Eyedro pper C ursor t oselect a color. Try drawing afew circles w ith t his different f il l color.

d ) N o w c r eat e an o th er o v al . . . b u t fir sthold down t he Shift Key an dcont inue to hold i t down as youclick anywhere on the Stage anddrag the mo use aw ay fro m t he poin t of or ig in . N ot ice how the ovalis now constrained to a perfect c ircle .

Circle Tool

57

D rawing with Flash

The Keyboard Shorfor select ing the C iTool is pressing theO K ey (O fo r O v a

both t he PC and M


58/116

Figure 4-11 Creat ing a Perfect Circle with the Shif t Key

4 . Let s u se ano the r t oo l t o m od i fy t h is c ir c l e.a) In t heToolbox select th eArrow Tool. Click anywhere along th

Stroke (outl ine) of your circle .Click and drag on the selectedStroke, then r elease. O nly the Str oke (o ut l ine) has been se

and m oved, not the F il l.

Figure 4 -12 St roke M oved But N ot the Fi ll

b ) Sele ct t he M e nu o p t io nEdit / Undo.c) Click anyw here w ithin the inner area of your circle .Click and drag

the selectedFill. N o t i ce t hat o n ly t heFill has been selected andmo ved , no t t he St roke .

Figure 4 -13 Fi ll M oved But N ot the St roke

d ) Selec t t h e M e nu o p t io nEdit / Undo.

58

C H A P T E R 4


59/116

e) Double click wi th in theFill o f t he c ir c le . N o t i ce t hat bo t h t heFilland theStroke have been selected .Click and drag t o m o v e b o t ht he Fill and th eStroke.

Figure 4 -14 Both St roke and F il l a re M oved

f) Take a few m om en t s t o expe r imen t w i th d raw ing oval s and c ir c l esusing theCircle Tool, as well as theStroke an d Fill Modif iers .W hen you a re done , se lect t he M enu op t ionEdit / Select All.

g) Se lec t t h e M e nu o p t io nEdit / Clear.

5 . N o w fo r so m e t hi ng a li t t le d iffe r en t , t h e Pe n To o l .a) Select t hePen Tool.

Figure 4 -15 The Pen Tool

b) W it h yo ur m o use bu tt o n,click anyw her e on

Date post:	05-Apr-2018
Category:	Documents
Upload:	tushar-menon
View:	215 times
Download:	0 times

Learn Flash

Documents