Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gd - 8th - Web Game Design Using Flash

1,196 views

Published on

Gd - 8th - Web Game Design Using Flash

  1. 1. Web Game Design using Flash<br />[ 1 ]<br />[ HadziqFabroyir . Department of Informatics ]<br />
  2. 2. [ 2 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  3. 3. Casual Gamers Issue<br />TRADITIONAL<br /><ul><li>Young males with
  4. 4. High-end computers
  5. 5. Who will pay for
  6. 6. Deep and complex
  7. 7. Fast action games</li></ul>CASUAL GAMERS<br /><ul><li>All ages, male & female
  8. 8. With low-end computers
  9. 9. Who want free
  10. 10. Quick and simple
  11. 11. Familiar turn-based games</li></ul>[ 3 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  12. 12. [ 4 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  13. 13. What can you do with it?<br />MAKE YOUR OWN!<br /><ul><li> Animated movies
  14. 14. Web-based banner ads
  15. 15. Games
  16. 16. Web-based applications
  17. 17. Special Effects</li></ul>[ 5 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  18. 18. History<br />of Flash & ActionScript<br />[ 6 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  19. 19. [ 7 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  20. 20. 1996: FutureSplash Animation by Microsoft & Disney<br />1997: Flash 1.0 & Flash 2.0<br />1998: Flash 3.0<br />2000: Flash 4.0<br />2001: Flash 5.0 + ActionScript 1.0<br />2002: Flash MX<br />2003: Flash MX 2004 + ActionScript 2.0 & Flex<br />2005: Flash 8 & Flash Lite 1.0<br />Timeline ~<br />[ 8 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  21. 21. [ 9 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  22. 22. [ 10 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  23. 23. [ 11 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  24. 24. [ 12 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  25. 25. Adobe Flash refers to the Adobe Flash Player and multimedia program, which creates animation, games, movies, etc.<br />Available in most web browsers<br />Uses vector based graphics (won’t lose clarity of image with sizing)<br />Scripting language ActionScript<br />Basics<br />[ 13 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  26. 26. Flash files -- .swf extension<br />May be implemented in several ways:<br />Object of a webpage<br />Played in the Flash Player<br />Self-executing Flash movie<br />Basics<br />[ 14 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  27. 27. Java-like object-oriented scripting language<br />Creates most of the interactivity in Flash apps<br />First introduced in 2000 with Flash 5<br />Adds interactivity to applications<br />What is Action Script?<br />[ 15 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  28. 28. Ex: ActionScript Code<br />onClipEvent(load){function reset() { if(this._name==&quot;face&quot;){ this._visible=false; } else { this._visible=true; }this.dead=0; this.speed=random(4)+3;this._x=600;this._y=random(400); }this.reset();}<br />onClipEvent(enterFrame)<br />{ this._x-=this.speed;<br /> if(this._x&lt;-40)<br /> { this.reset(); }} <br />[ 16 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  29. 29. How does it compare?<br />[ 17 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  30. 30. Basically, it condenses several programs into one. In Flash you can:<br />Draw your shapes/objects<br />Edit your code<br />See it played (preview it before running it)<br />Edit timeline of events<br />Save it as a .swf file<br />Why Flash is better<br />[ 18 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  31. 31. Flash Animation<br />How To<br />[ 19 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  32. 32. Flash animation works by playing through the Timeline<br />Each cell in a timeline is a frame, a unit of playing time<br />Each row in the timeline area is a layer, in which different objects may appear, possibly in the same frames<br />Frame-by-frame animation<br />[ 20 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  33. 33. Draw a graphical object on the stage, e.g., a circle<br />Double-click on object to select it, then Insert&gt;Convert to Symbol<br />Click on frame 1 in the timeline<br />Insert&gt;Create MotionTween<br />Click on another frame (e.g., 30)<br />Insert&gt;Keyframe<br />Motion tween appears<br />Drag circle to another location<br />Go to frame 1<br />Press Enter to see effect<br />Motion tweens<br />[ 21 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  34. 34. Motion tween can achieve other effects<br />Click on the circle in either keyframe<br />Select drag-down menu next to Color:<br />Alpha changes the transparency<br />Tint changes the color values<br />Or use free transform tool to change size and shape of object in a keyframe<br />Color and size motion tweens<br />[ 22 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  35. 35. Similar to morphing objects<br />Draw a circle in center of stage<br />In frame 30, Insert&gt;Blank Keyframe<br />Draw a square in center of stage<br />Go back to frame 1<br />In Properties, Tween: select Shape<br />Notice that shape tween is light green<br />Shape tweens<br />[ 23 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  36. 36. If you want more than straight line motion:<br />Right-click on layer with motion tween<br />Select Add Motion Guide<br />In frame 1 of motion guide layer, with pencil tool, draw a path (it won’t be visible)<br />Drag graphic to start and end points (in 1st and last keyframes)<br />Yey! Arbitrary path motion<br />Motion guides<br />[ 24 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  37. 37. File &gt; Publish settings<br />Ctrl-Enter compiles .fla to .swf (“swiff”)<br />Publish .html to tell browser where to find latest Flash player, dimensions of movie<br />Windows projector produces stand-alone .exe program (plays without browser or Flash player)<br />Macintosh player does the same on Mac<br />Publishing Flash movies<br />[ 25 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  38. 38. ActionScript 3.0<br />[ 26 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  39. 39. OOP Supports<br />Safety<br />Simplicity<br />Performance <br />Compatibility <br />Robust<br />Goals<br />[ 27 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  40. 40. Flash authoring tool: Adobe Flash CS3<br />Adobe Flex Builder 2 (an IDE)<br />Notepad + Flex 2 SDK<br />Tools for Writing Code<br />[ 28 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />
  41. 41. Flash Client Runtime Environments<br />Flash Player 9<br />Adobe AIR (Adobe Integrated Runtime)<br />Flash Lite<br />[ 29 ]<br />[ Hadziq Fabroyir . Department of Informatics ]<br />

×