Chapter 3.3
Macromedia Flash
Overview


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.
2
Advantages of Flash

Wide Audience



Rapid Development


98% of web viewers have the Flash player
% dropping rapidly, thanks Apple
Self-contained graphic and code
development
Easy Deployment

Flash automatically creates web pages
3
Advantages of Flash

Fast Learning Curve


Programmers and artists alike can learn
Flash ActionScript in very little time
Easily Applicable to Designers and
Programmers


ActionScript is similar to other ECMA
languages
Drawing tools are identical to most other
graphics applications
4
How Flash Works

Timeline Based

Flash uses a timeline of frames, causing
the game to run at a fixed frame rate
5
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
6
How Flash Works

Vector Engine



The base graphics engine behind Flash is a vector
engine
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
7
How Flash Works

Vector Engine



Shapes can be filled with solid colors, radial
gradients, linear gradients and even a tiled
bitmap
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
8
How Flash Works

Vector Engine


Movie Clips are the base item of all game
interaction
Movie Clips can be moved, rotated, scaled
and faded (made transparent) with
ActionScript code
9
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
10
How Flash Works

Audio Engine


Sound can be compressed as raw,
ADPCM or MP3
Music loops can be used to create a
seamless soundtrack
11
The Scripting Environment

ActionScript




Pretty much, JavaScript
Curly Braces for Code Blocks { }
Semicolon for Statement Line Endings;
if Logic conditions


if (condition) doSomething();
Loops
12
The Scripting Environment

ActionScript

Loops. Loops accomplished with standard
for, do or while.

for (j = 0; j < 100; j++)
{
}
do something 100 times;
13
The Scripting Environment

ActionScript

Variable Types

Standards




Number
String
Array
Boolean
14
The Scripting Environment

ActionScript

Variable Types

Flash Specific








Object
MovieClip
Color
Date
Camera
Microphone
Sound
TextField
15
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
languages
Created in their own files called class files, with
the format “classname.as”
16
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
17
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
18
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()
{
this._y++;
}
19
Integrating Graphics and Code

The Main Timeline code example




All of this code would apply to the movie clip
beachball
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
20
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
movie
21
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()
{
this._y++;
}
22
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
23
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
24
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
open somenewsite.com”
getURL("http://www.somenewsite.com",
"_blank");
25
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.
26
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
27
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
28
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
friction
29
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
30
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 shockwave.com
31
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
32
Macromedia Flash:
Summary

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
33
Macromedia Flash:
Summary

Flash is a vector-based graphics engine


Flash has strong support for audio






Supports lines, fills, gradients and bitmaps
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
34