Chapter 3.3 Macromedia Flash

Document Sample
Chapter 3.3 Macromedia Flash Powered By Docstoc
					Chapter 3.3
Macromedia Flash
   Flash is one of the leading web game
    development platforms
   Flash evolved from embarrassing and
    pathetic into another scripting language
    with features similar to other general
    purpose (non-web) languages.

Advantages of Flash
   Wide Audience
       98% of web viewers have the Flash player
       % dropping rapidly, thanks Apple
   Rapid Development
       Self-contained graphic and code
   Easy Deployment
       Flash automatically creates web pages
Advantages of Flash
   Fast Learning Curve
       Programmers and artists alike can learn
        Flash ActionScript in very little time
   Easily Applicable to Designers and
       ActionScript is similar to other ECMA
       Drawing tools are identical to most other
        graphics applications
How Flash Works
   Timeline Based
       Flash uses a timeline of frames, causing
        the game to run at a fixed frame rate

How Flash Works
   Timeline Based
       Code is placed on frames of the timeline
       Designers and artists will be more likely to make
        use of this timeline to draw and animate character
        animations, motion graphics, etc
       Programmers, on the other hand will tend to place
        all of their ActionScript on one single frame, and
        keep their timeline only one frame long

How Flash Works
   Vector Engine
       The base graphics engine behind Flash is a vector
       All graphics and shapes are defined in terms of
        mathematical shapes like lines, spline curves,
        vertices, circles and stroke / fill information
       Advantage of using a vector engine is that a game
        can be scaled to any size, and its graphics will
        continue to look sharp and crisp

How Flash Works
     Vector Engine
         Shapes can be filled with solid colors, radial
          gradients, linear gradients and even a tiled
         The more complex the vector, the slower it
          will be rendered in Flash, and the more it will
          be likely to slow down the game performance
         Once a shape is defined, it can then be
          converted into a movie clip

How Flash Works
   Vector Engine
       Movie Clips are the base item of all game
       Movie Clips can be moved, rotated, scaled
        and faded (made transparent) with
        ActionScript code

How Flash Works
   Audio Engine
       We can easily create sound effects, music
        or voice-overs in an audio application,
        and then import these sounds into Flash
       We can create an instance of the Sound
        object in ActionScript, and then trigger a
        sound any time we need it

How Flash Works
   Audio Engine
       Sound can be compressed as raw,
        ADPCM or MP3
       Music loops can be used to create a
        seamless soundtrack

The Scripting Environment
   ActionScript
       Pretty much, JavaScript
       Curly Braces for Code Blocks { }
       Semicolon for Statement Line Endings;
       if Logic conditions
            if (condition) doSomething();
       Loops

The Scripting Environment
   ActionScript
       Loops. Loops accomplished with standard
        for, do or while.
            for (j = 0; j < 100; j++)
                 do something 100 times;

The Scripting Environment
   ActionScript
       Variable Types
            Standards
                 Number
                 String
                 Array
                 Boolean

The Scripting Environment
   ActionScript
       Variable Types
            Flash Specific
                 Object
                 MovieClip
                 Color
                 Date
                 Camera
                 Microphone
                 Sound
                 TextField

The Scripting Environment
   ActionScript
       Classes
            In Flash MX 2004, Macromedia introduced
             ActionScript 2.0
            ActionScript 2.0 introduced the ability to create
             true classes with all of the standard class
             elements available to other OOP ECMA
            Created in their own files called class files, with
             the format “”

The Scripting Environment
   ActionScript
       The Draw API
           Flash has a series of ActionScript commands
            that are available to use at runtime called the
            Draw API
           The Draw API allows us to draw shapes and
            graphics at runtime by using a few routines
                moveTo, lineTo, lineStyle, beginFill, endFill

Integrating Graphics and Code
   The Main Timeline
       This is where we have several movie clips on
        the stage, and we place ActionScript on frame
        one of the main timeline
       All movie clips on the stage can be referred to
        in this frame by simply addressing their
        instance names

Integrating Graphics and Code
   The Main Timeline code example
       beachball._alpha = 10;
        beachball._rotation = 90;
        beachball._x = 214;
        beachball._y = 12;
        beachball._xscale = 50;
        beachball._yscale = 50;
        beachball.onPress = function()

Integrating Graphics and Code
   The Main Timeline code example
       All of this code would apply to the movie clip
       It would set the _alpha transparency to 10
        percent, making the beachball almost invisible
       Then it would set its _rotation to 90 degrees, its
        _x position to 214, _y position to 12, and then set
        its scale to 50 percent by adjusting _xscale and
        _yscale to 50
       Would create an onPress function on the
        beachball, which would be triggered whenever the
        user clicked the mouse on the beachball

Integrating Graphics and Code
   The Movie Clip timeline
       Its also possible to place code on the first
        frame of a movie clip itself
       We can go into its timeline and place code
        on any one of its frames, just like the main

Integrating Graphics and Code
   The Movie Clip timeline code example
       this._alpha = 10;
        this._rotation = 90;
        this._x = 214;
        this._y = 12;
        this._xscale = 50;
        this._yscale = 50;
        this.onPress = function()

Backend and
Server Connectivity
   Other powerful feature of Flash is its ability
    to load external files and resources at
    runtime, from a URL
   Can be used to load data from a server
    through ASP, JSP, PHP or any other
    scripting language

Backend and
Server Connectivity
   loadMovie
       The design of Flash is so modular that we
        can actually load other SWF movies into
        other SWF movies
       The loadMovie method can also be used to
        load JPEG images at runtime

Backend and
Server Connectivity
   getURL
       We can use the getURL command to open up a
        link in a browser. For example, we can have a
        movie clip that displays the text “Click here to
       getURL("",

Backend and
Server Connectivity
   LoadVars
       The loadVars object is an ActionScript object that
        is capable of sending and receiving data to and
        from a URL. The URL would normally contain an
        ASP, JSP or PHP script that we had written.
       We can use the loadVars object to send and load
        variables to and from a backend script. We could
        use this to load game data like a list of online
        users, or a list of high-scores.

Where Flash Struggles
   Flash does not have the ability to do serious
    real-time 3D graphics*
   Flash also struggles when we have too
    many things going on at once
       When we have hundreds of movie clips, all
        running their own onEnterFrame code, with user
        interaction and sound, Flash will have difficulty
        keeping all of this going, and still maintaining
        our desired frame rate

Where Flash Struggles
   Flash doesn’t actually compile the
    ActionScript to a low-level machine
    language form
       Instead Flash converts the ActionScript into
        codes that are several bytes in size
        (bytecode), and then parses them at runtime
       In essence, a SWF file still contains scripted
        code, even though it has been compressed

Where Flash Excels
   Physics and Motion
       Given the x, y grid-based design of the
        Flash stage
            We can apply all sorts of standard physics
             concepts to Flash games
            We can easily do things like translation
             (movement), collision, gravity, bounce and

Where Flash Excels
   Bitmap-based Tile Games
       With a few careful tricks, Flash can be
        used to recreate all of the bitmap games
        of the 1980s and early 1990s
       Re-creating a Super Mario Brothers type
        of platform game is relatively easy using
        bitmap tiles and it will run very, very fast

Where Flash Excels
   “Old School” games
       We can use Flash to easily recreate all of
        the games of the early 1980’s, like Pac
        Man, Galaga, Asteroids, etc
   Popular Puzzle Games
       Flash excels at puzzle games, like the
        ones found online at

Where Flash Excels
   Games for Devices
       Flash player is available on dozens of
        platforms, so we can technically create
        games that work on all of these platforms
       Can create games that play on devices like
        the Pocket PC, cell phones and watches

Macromedia Flash:
   Flash games
       Have an instant potential audience of millions
       Can be rapidly and easily developed
       Can be deployed easily and quickly
   Both programmers and artists can learn flash
    quickly and easily
   Flash moves along based on a timeline that
    proceeds at a specified frame rate

Macromedia Flash:
   Flash is a vector-based graphics engine
        Supports lines, fills, gradients and bitmaps
   Flash has strong support for audio
        MP3, ADPCM and RAW compression
   Flash uses a powerful scripting language called ActionScript to
    program the game
   ActionScript 2.0 has a powerful class structure, 3.0 more so
   Graphics and code are integrated into one unit in the Flash IDE
   The Draw API can be used to create graphics at runtime
   Flash can communicate with external servers to retrieve files
    and data


Shared By: