www2.it.lut.fi/courses/08-09/CT30A8550/slides/3Fla...

farrightΛογισμικό & κατασκευή λογ/κού

15 Αυγ 2012 (πριν από 5 χρόνια και 2 μήνες)

312 εμφανίσεις

Flash basics

What Flash is


Annoying animations


Complete waste of resources


Might be if done wrong but


Flash can be used to


Create dynamic content to websites


Add interactivity


user <
-
> computer


user <
-
> user


Create complete applications, games, etc.


In addition Flash can be used with


Databases


Flash media server


XML files



Powerful tool if used correctly

Examples


Yksinkertaisia animaatioita


http://www.macloo.com/examples/flash/animation/martini.htm


http://www.macloo.com/examples/flash/paths/index.htm


Dynaaminen tiedonlataus


http://www.macloo.com/examples/flash/dynamictext/index.htm


Pop
-
up ikkuna äänen kanssa


http://www.macloo.com/examples/flash/minitest/index.htm


Ääniä kontrollin kanssa


http://www.macloo.com/examples/flash/sound/index.htm


Powerpointin korvaaja


http://www.macloo.com/examples/flash/navpres/index.htm


Netbeans demo


http://www.netbeans.org/download/flash/netbeans_55b/web
-
service
-
orchestration.html


Joukkueen kotisivut


http://www2.lut.fi/~sautio/sivu.html


Notions


Fire up your Flash MX2004 (Note. Version 8 in these
computers is only a trial so do not use that)


Layer = One level in the timeline


Frame = One block in the layer


Key frame = User created change in animation


Symbol = Basic part of flash, every symbol has its own
timeline


Graphic = Used for single images and shapes


Button


Movie clip) = More advanced interactions and multilayered
actions are done with this

Simple motion animation


Rename layer1 to motion


Draw an oval to the frame1 of animation layer


Select the whole object


One click only selects inside or border


Convert the object to a symbol


Graphic type and give some name to it


Insert key frames to frames 20 and 40


Move the symbol in these frames to different location


Click (with right mouse button) somewhere between the frames 1
-
20 in the
timeline and


Select create motion tween


Do the same between frames 20
-
40


Test


Movement seems sticky


Increase the framerate


Save (we will use this later)

Shape animation


Cannot be done to symbols!


Create another layer


name it to shape


Draw an oval to the frame 1


Insert key frames to 20 and 40


Modify the drawn oval in frame 20 (size, color, shape)


Replace the oval in frame 40 with a rectangle


Insert shape tween between frames 1
-
20 and 20
-
40


Test



OK, but how can I do an animation that both changes the
position and shape of an object?


SOLUTION: Animation inside animation

Simple button


Lazy way


Windows


Common Libraries


buttons


and just select suitable and drag to screen


Own way


Draw some shape to screen and convert it to button
symbol


Enter the button timeline


Add key frames to over and down states


Modify those states as you wish


Keep this open, we will use it a bit later

Action script 2


Simple script language


Makes it possible to create complete applications with
flash


Properties


Case sensitive


Object oriented


Strict data typing


Places where to put AS


To the timeline (frame script)


Good practice is to use separate layer for frame actions


To object


Many errors are due to wrong placement of AS!

Button continue


Add key frames to 10 and 20 to the button layer


Open actions frame


Select the button in frame 1


In actions frame


Select global functions


movie clip control


on


pop
-
up window appears


select on release


Add global functions


timeline control


gotoandstop


1

10, 10

20, 20

1


More coder friendly way is to create movie clip buttons
and address those directly from the frame script


things inside buttons are not addressable with actionscript


e.g. you cannot change the button text with AS if the text is
inside the button

Customised mouse cursor


Import (or draw) a small image / shape to the
screen


Change it to movie type symbol


Add the following code to the symbols’ action
panel (ensure that the symbol is selected)


onClipEvent (load) {




startDrag(this, true);




Mouse.hide();

}


Test

Publish


Open the saved motion animation


Enter the publish settings (in file menu)


Unselect html


publish


Now you can import this .swf file into
dreamweaver