1. Web Game Design using Flash [ 1 ] [ HadziqFabroyir . Department of Informatics ]

2. [ 2 ] [ Hadziq Fabroyir . Department of Informatics ]

4. High-end computers

5. Who will pay for

6. Deep and complex

8. With low-end computers

9. Who want free

10. Quick and simple

11. Familiar turn-based games[ 3 ] [ Hadziq Fabroyir . Department of Informatics ]

12. [ 4 ] [ Hadziq Fabroyir . Department of Informatics ]

14. Web-based banner ads

15. Games

16. Web-based applications

17. Special Effects[ 5 ] [ Hadziq Fabroyir . Department of Informatics ]

18. History of Flash & ActionScript [ 6 ] [ Hadziq Fabroyir . Department of Informatics ]

19. [ 7 ] [ Hadziq Fabroyir . Department of Informatics ]

20. 1996: FutureSplash Animation by Microsoft & Disney 1997: Flash 1.0 & Flash 2.0 1998: Flash 3.0 2000: Flash 4.0 2001: Flash 5.0 + ActionScript 1.0 2002: Flash MX 2003: Flash MX 2004 + ActionScript 2.0 & Flex 2005: Flash 8 & Flash Lite 1.0 Timeline ~ [ 8 ] [ Hadziq Fabroyir . Department of Informatics ]

21. [ 9 ] [ Hadziq Fabroyir . Department of Informatics ]

22. [ 10 ] [ Hadziq Fabroyir . Department of Informatics ]

23. [ 11 ] [ Hadziq Fabroyir . Department of Informatics ]

24. [ 12 ] [ Hadziq Fabroyir . Department of Informatics ]

25. Adobe Flash refers to the Adobe Flash Player and multimedia program, which creates animation, games, movies, etc. Available in most web browsers Uses vector based graphics (won’t lose clarity of image with sizing) Scripting language ActionScript Basics [ 13 ] [ Hadziq Fabroyir . Department of Informatics ]

26. Flash files -- .swf extension May be implemented in several ways: Object of a webpage Played in the Flash Player Self-executing Flash movie Basics [ 14 ] [ Hadziq Fabroyir . Department of Informatics ]

27. Java-like object-oriented scripting language Creates most of the interactivity in Flash apps First introduced in 2000 with Flash 5 Adds interactivity to applications What is Action Script? [ 15 ] [ Hadziq Fabroyir . Department of Informatics ]

28. Ex: ActionScript Code onClipEvent(load){function reset() { if(this._name=="face"){ this._visible=false; } else { this._visible=true; }this.dead=0; this.speed=random(4)+3;this._x=600;this._y=random(400); }this.reset();} onClipEvent(enterFrame) { this._x-=this.speed; if(this._x<-40) { this.reset(); }} [ 16 ] [ Hadziq Fabroyir . Department of Informatics ]

29. How does it compare? [ 17 ] [ Hadziq Fabroyir . Department of Informatics ]

30. Basically, it condenses several programs into one. In Flash you can: Draw your shapes/objects Edit your code See it played (preview it before running it) Edit timeline of events Save it as a .swf file Why Flash is better [ 18 ] [ Hadziq Fabroyir . Department of Informatics ]

31. Flash Animation How To [ 19 ] [ Hadziq Fabroyir . Department of Informatics ]

32. Flash animation works by playing through the Timeline Each cell in a timeline is a frame, a unit of playing time Each row in the timeline area is a layer, in which different objects may appear, possibly in the same frames Frame-by-frame animation [ 20 ] [ Hadziq Fabroyir . Department of Informatics ]

33. Draw a graphical object on the stage, e.g., a circle Double-click on object to select it, then Insert>Convert to Symbol Click on frame 1 in the timeline Insert>Create MotionTween Click on another frame (e.g., 30) Insert>Keyframe Motion tween appears Drag circle to another location Go to frame 1 Press Enter to see effect Motion tweens [ 21 ] [ Hadziq Fabroyir . Department of Informatics ]

34. Motion tween can achieve other effects Click on the circle in either keyframe Select drag-down menu next to Color: Alpha changes the transparency Tint changes the color values Or use free transform tool to change size and shape of object in a keyframe Color and size motion tweens [ 22 ] [ Hadziq Fabroyir . Department of Informatics ]

35. Similar to morphing objects Draw a circle in center of stage In frame 30, Insert>Blank Keyframe Draw a square in center of stage Go back to frame 1 In Properties, Tween: select Shape Notice that shape tween is light green Shape tweens [ 23 ] [ Hadziq Fabroyir . Department of Informatics ]

36. If you want more than straight line motion: Right-click on layer with motion tween Select Add Motion Guide In frame 1 of motion guide layer, with pencil tool, draw a path (it won’t be visible) Drag graphic to start and end points (in 1st and last keyframes) Yey! Arbitrary path motion Motion guides [ 24 ] [ Hadziq Fabroyir . Department of Informatics ]

37. File > Publish settings Ctrl-Enter compiles .fla to .swf (“swiff”) Publish .html to tell browser where to find latest Flash player, dimensions of movie Windows projector produces stand-alone .exe program (plays without browser or Flash player) Macintosh player does the same on Mac Publishing Flash movies [ 25 ] [ Hadziq Fabroyir . Department of Informatics ]

38. ActionScript 3.0 [ 26 ] [ Hadziq Fabroyir . Department of Informatics ]

39. OOP Supports Safety Simplicity Performance Compatibility Robust Goals [ 27 ] [ Hadziq Fabroyir . Department of Informatics ]

40. Flash authoring tool: Adobe Flash CS3 Adobe Flex Builder 2 (an IDE) Notepad + Flex 2 SDK Tools for Writing Code [ 28 ] [ Hadziq Fabroyir . Department of Informatics ]

41. Flash Client Runtime Environments Flash Player 9 Adobe AIR (Adobe Integrated Runtime) Flash Lite [ 29 ] [ Hadziq Fabroyir . Department of Informatics ]