a good photshop manual

8/19/2019 a good photshop manual

1/80

2004 Prentice Hall, Inc. All rights reserved. 2004 Prentice Hall, Inc. All rights reserved.

Chapter 17 – Macromedia Flash MX

2004: Building Interactive nimations

Outline

17.1 Introduction

17.2 Flash Movie Development

17.3 Learning Flash with HandsOn !"amples

17.3.1 #reating a $hape with the Oval %ool

17.3.2 &dding %e"t to a 'utton 17.3.3 #onverting a $hape into a $(m)ol

17.3.* !diting 'utton $(m)ols

17.3.+ &dding ,e(-rames

17.3. &dding $ound to a 'utton

17.3.7 /eri-(ing #hanges with %est Movie

17.3.0 &dding La(ers to a Movie 17.3. &nimating %e"t with %weening

17.3.1 &dding a %e"t Field

17.3.11 &dding &ction$cript


2/80


Chapter 17 – Macromedia Flash:

Building Interactive nimations

17.* #reating a ro4ector 5.exe6 File with u)lish

17.+ Manuall( !m)edding a Flash Movie in a e) age

17. #reating $pecial !--ects with Flash

17..1 Importing and Manipulating 'itmaps

17..2 #reating an &dvertisement 'anner with Mas8ing

17..3 &dding Online Help to Forms17.7 #reating a e)$ite Introduction

17.0 &ction$cript

17. e) 9esources


3/80


O)4ectives

•

In this tutorial, you will learn: – To learn Flash M 2004 !ulti!edia develo"!ent.

– To learn Flash ani!ation techni#ues.

– To learn Action$cri"t 2.0, Flash%s o&'ect(oriented

"rogra!!ing language.

– To create an ani!ation that "reloads o&'ects into a Flash

!ovie.

– To add sound to Flash !ovies.

– To e!&ed a Flash !ovie into a )e& "age.


4/80


17.1 Introduction

•

Flash – Produce interactive, ani!ated !ovies

• )e&(&ased &anner advertise!ents

• Interactive )e& sites

• *a!es

• )e&(&ased a""lications

– Provides tools +or drawing gra"hics, generating ani!ation

and adding sound and video

– Tools +or coding in its scri"ting language, Action$cri"t

• Flash Player "lug(in – Installed in a )e& &rowser to "lay +lash !ovies


5/80



• $tart page

– ontains a nu!&er o+ hel"+ul o"tions

• #reate From %emplate

• Open a 9ecent Item

• reating &lan- Flash docu!ent

– lic- Flash Document under the #reate :ew heading

• %ools section

– ontains tools that select, add and re!ove gra"hics +ro! Flash !ovies

• /iew section

– ontains two tools that !odi+y what "ortion o+ stage

•

#olors section – Provides colors +or sha"es, lines, and +illed areas

• Options section

– ontains settings +or the active tool


6/80



Toolbox Layers Main menu Timeline Frames Panel windows

&ctions panel Help panel ropert( Inspector Stage

Fig. 17.1 Flash MX development environment.


7/80 2004 Prentice Hall, Inc. All rights reserved. 2004 Prentice Hall, Inc. All rights reserved.

17.2 Flash Movie DevelopmentSeletion tool

Line tool

Pen tool

!val toolPenil tool

Free trans"orm tool

#n$ bottle tool

%ropper tool

&and tool

Subseletion toolLasso tool

Text tool'etangle tool

(rush toolFill trans"orm toolPaint bu$et tool

)raser tool

*oom tool

Stro$e olor

Fill olor

Tool Options

Fig. 17.+ Flash MX Toolbox.



17.3 Learning Flash with HandsOn

!"amples

•

"en a new Flash !ovie +ile – $elect :ew +ro! the File !enu

– In the :ew Document dialog, select Flash Document under

;eneral ta& and clic- O,

– hoose $ave &s




!"amples

;eneral tab %emplates tab

Fig. 17., :ew Document dialog.




!"amples

'ac8ground color 'ight li$ menu

Fig. 17.- Flash MX +- Document roperties dialog.




!"amples

/ew ba$ground

olor

&exadeimal olor

notation

0olor seletion

eyedropper

Fig. 17. Seleting a ba$ground olor.




•

Flash creates sha"es using vectors – ectors are !athe!atical e#uations that de+ine sie, sha"e and

color

• $o!e gra"hics a""lications create raster gra"hics – /e+ined &y areas o+ colored "i1els

• val – $tro-e color

• olor o+ a sha"e%s outline

– Fill color

•

olor that +ills the sha"e – 'lac8 and hite &utton

• 3esets the stro-e color to &lac- and the +ill color to white

– $wap #olors

• $witches the stro-e and +ill color




/o olor

(la$ and 2hite

Stro$e olor

Fill olor

Swap 0olors

Fig. 17.3 Setting the "ill and stro$e olors.


14/80




Fig. 17.5 Ma$ing multiple seletions with the seletion tool.




Seletion width and height Seletion loation

Stro$e and "ill olor Stro$e width Stro$e style

Fig. 17.6 Modi"ying the sie o" a shape with the ropert( Inspector .




8radient "ills'ed radialgradient "ill

Fig. 17.1 0hoosing a gradient " ill.



17.3.2 &dding %e"t to a 'utton

•

Te1t tool – Adds te1t to Flash !ovies




Font type Font seletor Font height

Text 9"ill: olor

(old

#tali

Text alignment

0harater Spaing Lin$ed ;'L 0harater position )dit "ormat options

Fig. 17.11 Setting the "ont "ae< sie< weight and olor with the ropert( Inspector .




Fig. 17.1+ =dding text to the button.



17.3.3 #onverting a $hape into a $(m)ol

•

Flash !ovie – Parent !ovie

• A scene

• ontains the entire !ovie including all gra"hics and sy!&ols

• 3eusa&le !ovie ele!ents

– *ra"hics

• Ideal +or static i!ages and &asic ani!ations

– uttons

• &'ects that "er+or! &utton actions

–

Movie cli"s• Ideal +or recurring ani!ations

– Movie e1"lorer

• /is"lays the !ovie structure


22/80



Fig. 17.1, Seleting an ob>et with the seletion tool.


23/80



Fig. 17.1- 0reating a new symbol with the 0onvert to Symbol dialog.


24/80



Symbol list

/ew Symbol Folder

0reate /ew Symbol

Symbol Properties %elete symbol

Fig. 17.1 Li)rar( panel.


25/80



Fig. 17.13 Movie )xplorer "or ceoassist.fla.


26/80



•

!dit $(m)ols &utton – Four +ra!es

• utton states

– =p state

• /e+ault state &e+ore user "resses the &utton or rolls

over with !ouse

– Over state

• 5ser rolls over the &utton with !ouse

– Down state

•

Plays when user "resses a &utton• Hit state

– 6ot visi&le when viewing the !ovie

– /e+ines active area o+ the &utton


27/80



Main sene =tive symbol )dit sene )dit symbols

'eturn to

main sene*oom

perentage

4ey"rames

(utton states

Fig. 17.17 Modi"ying button states with a button?s editing stage.

0urrent "rame


28/80


17.3.+ &dding ,e(-rames

SeletedOver "rame

Insert ,e(-rame

Frame options

Fig. 17.15 #nserting a $ey"rame.


29/80



•

Flash i!"orts sounds in the W AV 7)indows8,AIFF 7Macintosh8 or M P3 +or!ats

• "ti!ie as needed


30/80



Sound added to the Down "rame

$ound

$(nc

Fig. 17.16 =dding sound to a button.


31/80



Sound name

#ompression

reprocessing

$ample rate

Sound lip sie and

ompression

Fig. 17.+ !ptimiing sound with the $ound roperties dialog.


32/80



•

Pu&lished Flash !ovies – $hoc-wave Flash e1tension .sw f

• $elect %est Movie +ro! #ontrol !enu to e1"ort

!ovie into the Flash Player


33/80



;p state!ver state

Fig. 17.+1 8! button in its up and over states.


34/80


17.3.0 &dding La(ers to a Movie

•

Insert La(er &utton – Places a layer na!ed La(er 2 a&ove the selected layer


35/80



'ename a layer by

double li$ing its

name

#nsert a

new layer %elete layer

Fig. 17.++ 'enaming a layer.


36/80



Le"t >usti"y

0enter >usti"y 'ight

>usti"y

Full >usti"y

=lias text

Fig. 17.+, Setting text alignment with the ropert( Inspector .


37/80



Fig. 17.+- 0reating a title with the text tool.


38/80


17.3. &nimating %e"t with %weening

•

Two !ethods to tween o&'ects – $ha"e tweening

• Mor"hs an o&'ect +ro! one sha"e to another

– Motion tweening

• Moves o&'ects around the stage

• an &e a""lied to sy!&ols or grou"ed o&'ects


39/80



Fig. 17.+ =dding a $ey"rame to reate an animation.


40/80



Motion tween

Fig. 17.+3 0reating a motion tween.


41/80



=tions toolbox

=dd sript item

0he$ Syntax

Show 0ode &ints

'e"erene

%ebug !ptions

Sript /avigator stop ation Sript window @iew !ptions

=tion applied to "rame

Fig. 17.+7 =dding =tionSript to a "rame with the =tions panel.


42/80



•

Te1t +ield – ontains a string that changes every ti!e the user "resses the &utton


43/80



Fig. 17.+5 0reating a text "ield.


44/80



Text type

Line type @ariable name

Fig. 17.+6 0reating a dynami text " ield with the ropert( Inspector .


45/80



•

Add Action$cri"t to the &utton – hange the contents o+ the te1t +ield every ti!e a user clic-sthe &utton


46/80



Fig. 17., =dding an ation to a button with the =tions panel.

17 * #reating a ro4ector 5 exe6 File with


47/80


17.* #reating a ro4ector 5.exe6 File with

u)lish

•

Pu&lish Flash in two +or!ats – $elect u)lish $ettings


48/80


17.* #reating a ro4ector 5.exe6 File with

u)lish

2indows )xeutable

9.exe:

Flash 9.fla:

Flash Player Movie9.sw f:

Fig. 17.,1 Published Flash "iles.

17 + Manuall( !m)edding a Flash Movie in a


49/80


17.+ Manuall( !m)edding a Flash Movie in a

e) age

• Add Flash !ovies to )e& sites – object

• Ma-es !ovie viewa&le in Internet 91"lorer

– em bed• Ma-es !ovie viewa&le in 6etsca"e

Outline

1 2


50/80

2004 Prentice Hall, Inc.

All rights reserved.

Outline

em!edFlash"html

3 "htt+,##---.-%.or#T/#xhtml1#DTD#xhtml1tr)nsition)l.t">

*

+

.

7

0

1

11 4in 2l)sh to 5o6r $e site

12

13

1*

1+

1.

17

10

1

2

21

Outline

22


51/80

2004 Prentice Hall, Inc.

All rights reserved.

Outline

em!edFlash"html

2* 9oe)se = "htt+,##o-nlo).m)9romei).9om#+6#sho9@-)ve#

2+ 9)s#7l)sh#s-7l)sh.9)Aversion=;B0B0B0" >

2.

27

20

2 3

31

32

33

3+

3.

37

30

3 This $e site 9ont)ins the CEO 4ssist)nt 1.0

* 2l)sh movie. Yo6 m6st h)ve the 2l)sh Pl)5er

*1 +l6in to vie- the 2l)sh movie.

*2

*3

**

*+

*.

*7


52/80


17..1 Importing and Manipulating 'itmaps

• asso tool – $elects areas o+ sha"es

– Magic wand• $elects areas o+ si!ilar colors

– Polygonal !ode• $elects straight(edged areas

• 9raser tool – 3e!oves sha"e areas &y clic-ing and dragging across

• Paint&rush tool – A""lies color the sa!e way the eraser re!oves color

•

Paint &ehind – $ets the tool to only "aint in area void o+ color in+or!ation

• Paint inside – Paints inside a line &oundary

17 2 #reating an &dvertisement 'anner


53/80


17..2 #reating an &dvertisement 'anner

with Mas8ing

• Mas-ing – Hides "ortion or layers

– Mas-ing layer

• Hides o&'ects in the layers &eneath it



54/80



with Mas8ing

Free trans"ormtool

anhor

Fig. 17.,, 'esiing an image with the "ree trans"orm tool.



55/80



with Mas8ing

/o 0olor

'ainbowgradient "ill

Fig. 17.,- 0reating the oval graphi.



56/80



with Mas8ing

Mas$ layer

Mas$ed layer

Lo$ed "or

editing

Fig. 17., 0reating a mas$ layer.



57/80



with Mas8ing

Fig. 17.,3 0ompleted banner.


58/80


17..3 &dding Online Help to Forms

• A""lying all the techni#ues "reviously to the

creation o+ an online +or! that o++ers interactive

hel"


59/80



'ight >usti"yLineAspaingad>ustment

Fig. 17.,7 =d>usting the line spaing with the Format !ptions panel.

O


60/80



9ound 9ectangle

9adius option

Fig. 17.,5 0reating a retangle with rounded orners.

17 3 &ddi O li H l t F


61/80



Fig. 17.,6 0reating multiple instanes o" a symbol with the Library panel.



62/80



Line typeText type

Fig. 17.- #nput and password text "ield reation.



63/80



Frame La)el "ield

'ed "lag indiates presene o" "rame label

Fig. 17.-1 =dding Frame Labels using the ropert( Inspector .



64/80



2idth

&eight

Position

0enter alignment

Fig. 17.-+ 0entering an image on the stage with the ropert( Inspector .



65/80



Frame 1 Frame

Frame 1

Shape tween

Fig. 17.-, 0reating a shape tween.



66/80



Fig. 17.-- =dding the "ield symbol to the nam eW indow movie lip.



67/80



Fig. 17.- 0reating an animation with the "orm "ield symbol.

17 3 &dding Online Help to Forms


68/80



)dit sene )dit symbols

Symbol to

edit

0urrent

symbol

Fig. 17.-3 %upliating movie lip symbols with the Li)rar( panel.



69/80



Frames "or animation

%eleting aletter "rom

eah

subseBuent

"rame

Fig. 17.-7 0reating a "rameAbyA"rame animation.



70/80



Fig. 17.-5 Bug2Bug.com help "orm.

17 7 #reating a e) $ite Introduction


71/80


17.7 #reating a e)$ite Introduction

• Preloader – $i!"le ani!ation that "lays while the rest o+ the )e& "age is

loading



72/80



9otate

times "ield

Fig. 17.-6 0reating a rotating ob>et with the motion tween 9otate option.



73/80



Fig. 17. #nserted movie lips.



74/80



8radient olor swath

8radient range

#nner olor

8radient preview

&exadeimal value

=lpha value

!uter olor

Fig. 17.1 0hanging gradient olors with the 0olor Mixer panel.

Fill type



75/80



0li$ and drag to add or remove a olor

Fig. 17.+ =dding an intermediate olor to a gradient.

'esulting gradient



76/80



;p state

&it state

Fig. 17., %e"ining the hit area o" a button.

17 7 #reating a e)$ite Introduction


77/80



'otating

ounterA

lo$wise

Text

hyperA

lin$ed

buttons

Fig. 17.- 0reating an animation to preload images.

17 0 &ction$cript


78/80


17.0 &ction$cript

• )ith the +ollowing +unctions, you can &uild so!e

+airly co!"le1 Flash !ovies

17.0 &ction$cript


79/80


p =tion

%esriptiongoto ;u!" to a +ra!e or scene in another "art o+ the !ovie.

pla $tart a !ovie at certain "oints at which the !ovie !ay have &een sto""ed.

stop $to" a !ovie.

toggle!ig"#ualit Turn anti(aliasing on and o++. )hen it is turned o++, the !ovie is a&le to "lay +aster, &ut renders with rough edges.

stopAll$ounds $to" the sound trac- without a++ecting the !ovie.

get%&' :oad a 53: into a new or e1isting &rowser window.

F$(ommand Insert ;ava$cri"t or other scri"ting languages into a Flash !ovie.

loadMo)ie*unloadMo)ie

:oad a $)F or ;P9* +ile into the Flash Player +ro! the current !ovie. an also

load another $)F into a "articular !ovie.

ifF+ame'oaded hec- whether certain +ra!es have &een loaded.

on(lip,)ent Assigns actions to a !ovie cli" &ased on s"eci+ic events. The events include load,

un'oad, ente+F+ame, mouse%p, mouse-own, mouseMo)e, .e%p,

.e-own and data.

on Assign actions such as P+ess, &elease and &oll/)e+ to a &utton.

if $et u" condition state!ents that run only when the condition is true.

w"ile*do w"ile 3un a collection o+ state!ents while a condition state!ent is true.

setP+ope+t hange the attri&utes o+ a !ovie cli" while the !ovie "lays.

duplicateMo)ie(lip*+emo)eMo)ie(lip /yna!ically add a !ovie cli" to a !ovie or re!ove a cli" +ro! a !ovie.

sta+t-+ag*stop-+ag Move a !ovie cli" while the !ovie is running.

t+ace /is"lay "rogra!!ing notes or varia&le values while testing a !ovie.

** 7co!!ent8


80/80

17. e) 9esources

• w w w.m ac+om edia.com

• w w w.m ac+om edia.com *softw a+e*flas"• w w w.actionsc+ipts.o+g

• w w w.flas"it.com

• w w w.m ooc.o+g

• w w w.opensw f.o+g

• w w w.w ebm one.com *m ultim edia*s"ocw a)e0flas"

• w w w.s"ocw a)e.com

Documents

a good photshop manual