Gd - 8th - Web Game Design Using Flash

1,132 views
1,064 views

Published on

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,132
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
51
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • New in mx 2004ActionScript now runs at least twice as fast, sometimes even fasterNew ActionScript methods and objectsYou can now connect Flash Video files (FLV) and stream them to the Player without needing Flash Communication ServerThe file size of the Player is still amazingly small (for Internet Explorer users on a PC, the downloaded file is only 450Kb).The Player can now connect to Web Services via the SOAP protocolText can now be viewed as both alias and anti-aliasSupport for legacy versions of Flash Content (1–6)Tighter securityNew in Flash 8:Filter EffectsFile Referrence
  • 2006: Flash 9 + ActionScript 3.0 & Flash Lite 2.x & Flex Builder 2
  • 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 />

    ×