1. Flash basics

2. 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 –Create complete applications, games, etc. In addition Flash can be used with –Databases –Flash media server –XML files  Powerful tool if used correctly

3. Examples Yksinkertaisia animaatioita –http://www.macloo.com/examples/flash/animation/martini.htmhttp://www.macloo.com/examples/flash/animation/martini.htm –http://www.macloo.com/examples/flash/paths/index.htmhttp://www.macloo.com/examples/flash/paths/index.htm Dynaaminen tiedonlataus –http://www.macloo.com/examples/flash/dynamictext/index.htmhttp://www.macloo.com/examples/flash/dynamictext/index.htm Pop-up ikkuna äänen kanssa –http://www.macloo.com/examples/flash/minitest/index.htmhttp://www.macloo.com/examples/flash/minitest/index.htm Ääniä kontrollin kanssa –http://www.macloo.com/examples/flash/sound/index.htmhttp://www.macloo.com/examples/flash/sound/index.htm Powerpointin korvaaja –http://www.macloo.com/examples/flash/navpres/index.htmhttp://www.macloo.com/examples/flash/navpres/index.htm Netbeans demo –http://www.netbeans.org/download/flash/netbeans_55b/web-service- orchestration.htmlhttp://www.netbeans.org/download/flash/netbeans_55b/web-service- orchestration.html Joukkueen kotisivut –http://www2.lut.fi/~sautio/sivu.htmlhttp://www2.lut.fi/~sautio/sivu.html

4. 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

5. 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)

6. 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

7. 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

8. 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!

9. 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

10. 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

11. 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