• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Gd - 8th - Web Game Design Using Flash
 

Gd - 8th - Web Game Design Using Flash

on

  • 1,229 views

 

Statistics

Views

Total Views
1,229
Views on SlideShare
1,228
Embed Views
1

Actions

Likes
0
Downloads
41
Comments
1

1 Embed 1

http://www.slideshare.net 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Gd - 8th - Web Game Design Using Flash Presentation Transcript

  • Web Game Design using Flash
    [ 1 ]
    [ HadziqFabroyir . Department of Informatics ]
  • [ 2 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • Casual Gamers Issue
    TRADITIONAL
    • Young males with
    • High-end computers
    • Who will pay for
    • Deep and complex
    • Fast action games
    CASUAL GAMERS
    • All ages, male & female
    • With low-end computers
    • Who want free
    • Quick and simple
    • Familiar turn-based games
    [ 3 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • [ 4 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • What can you do with it?
    MAKE YOUR OWN!
    • Animated movies
    • Web-based banner ads
    • Games
    • Web-based applications
    • Special Effects
    [ 5 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • History
    of Flash & ActionScript
    [ 6 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • [ 7 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • 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 ]
  • [ 9 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • [ 10 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • [ 11 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • [ 12 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • 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 ]
  • 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 ]
  • 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 ]
  • 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 ]
  • How does it compare?
    [ 17 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • 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 ]
  • Flash Animation
    How To
    [ 19 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • 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 ]
  • 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 ]
  • 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 ]
  • 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 ]
  • 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 ]
  • 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 ]
  • ActionScript 3.0
    [ 26 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • OOP Supports
    Safety
    Simplicity
    Performance
    Compatibility
    Robust
    Goals
    [ 27 ]
    [ Hadziq Fabroyir . Department of Informatics ]
  • 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 ]
  • Flash Client Runtime Environments
    Flash Player 9
    Adobe AIR (Adobe Integrated Runtime)
    Flash Lite
    [ 29 ]
    [ Hadziq Fabroyir . Department of Informatics ]