Chapter 3.3Macromedia Flash

2

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.

3

Advantages of Flash

Wide Audience 98% of web viewers have the Flash player % dropping rapidly, thanks Apple

Rapid Development Self-contained graphic and code

development Easy Deployment

Flash automatically creates web pages

4

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

5

How Flash Works

Timeline Based Flash uses a timeline of frames,

causing the game to run at a fixed frame rate

6

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

7

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

8

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

9

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

10

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

11

How Flash Works

Audio Engine Sound can be compressed as raw,

ADPCM or MP3 Music loops can be used to create

a seamless soundtrack

12

The Scripting Environment

ActionScript Pretty much, JavaScript Curly Braces for Code Blocks { } Semicolon for Statement Line

Endings; if Logic conditions

if (condition) doSomething(); Loops

13

The Scripting Environment

ActionScript Loops. Loops accomplished with

standard for, do or while. for (j = 0; j < 100; j++)

{ do something 100 times;}

14

The Scripting Environment

ActionScript Variable Types

Standards Number String Array Boolean

15

The Scripting Environment ActionScript

Variable Types Flash Specific

Object MovieClip Color Date Camera Microphone Sound TextField

16

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”

17

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

18

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

19

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++;}

20

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

21

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

22

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++;}

23

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

24

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

25

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");

26

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.

27

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

28

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

29

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

30

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

31

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

32

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

33

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

34

Macromedia Flash:Summary 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