Web Game Design using

Flash

[ Hadziq Fabroyir . Department of Informatics ] [1]

[ Hadziq Fabroyir . Department of Informatics ] [2]
 Casual Gamers
Issue
TRADITIONAL
 CASUAL GAMERS


 Young males with  All ages, male & female

 High-end computers  With low-end computers
 Who will pay for  Who want free
 Deep and complex  Quick and simple
 Fast action games  Familiar turn-based games

[ Hadziq Fabroyir . Department of Informatics ] [3]

[ Hadziq Fabroyir . Department of Informatics ] [4]
 What can you
do with it?
 MAKE YOUR OWN !

 Animated movies

 Web - based banner ads

 Games

 Web - based applications

 Special Effects

[ Hadziq Fabroyir . Department of Informatics ] [5]

 History
 of Flash & ActionScript

[ Hadziq Fabroyir . Department of Informatics ] [6]

[ Hadziq Fabroyir . Department of Informatics ] [7]
 Timeline ~
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

[ Hadziq Fabroyir . Department of Informatics ] [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 ]
 Basics
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

[ Hadziq Fabroyir . Department of Informatics ] [ 13 ]

 Basics
Flash files -- .swf extension

May be implemented in several ways:

Object of a webpage
Played in the Flash Player
Self-executing Flash movie

[ Hadziq Fabroyir . Department of Informatics ] [ 14 ]

 What is Action
Script?
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

[ Hadziq Fabroyir . Department of Informatics ] [ 15 ]

 Ex: ActionScript
Code
onClipEvent(load) onClipEvent(enterFrame)


{function reset() {
{ this._x-=this.speed;
if(this._name=="face")
{
this._visible=false;  if(this._x<-40)
} 

{
else this.reset();
{ }
this._visible=true;
} }
this.dead=0;
this.speed=random(4)+3;
this._x=600;
this._y=random(400);
}
this.reset();
}

[ Hadziq Fabroyir . Department of Informatics ] [ 16 ]

 How does it
compare?

[ Hadziq Fabroyir . Department of Informatics ] [ 17 ]

 Why Flash is
better
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


[ Hadziq Fabroyir . Department of Informatics ] [ 18 ]

 Flash Animation
How To

[ Hadziq Fabroyir . Department of Informatics ] [ 19 ]

 Frame-by-frame
animation
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

[ Hadziq Fabroyir . Department of Informatics ] [ 20 ]

 Motion tweens
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

[ Hadziq Fabroyir . Department of Informatics ] [ 21 ]

 Color and size motion
tweens
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
[ Hadziq Fabroyir . Department of Informatics ] [ 22 ]
 Shape tweens
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

[ Hadziq Fabroyir . Department of Informatics ] [ 23 ]

 Motion guides
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

[ Hadziq Fabroyir . Department of Informatics ] [ 24 ]

 Publishing Flash
movies
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


[ Hadziq Fabroyir . Department of Informatics ] [ 25 ]

 ActionScript 3 . 0

[ Hadziq Fabroyir . Department of Informatics ] [ 26 ]

 Goals
OOP Supports

Safety

Simplicity

Performance

Compatibility

Robust

[ Hadziq Fabroyir . Department of Informatics ] [ 27 ]

 Tools for Writing
Code
Flash authoring tool: Adobe Flash CS3

Adobe Flex Builder 2 (an IDE)

Notepad + Flex 2 SDK

[ Hadziq Fabroyir . Department of Informatics ] [ 28 ]

 Flash Client
Runtime
Environments
Flash Player 9

Adobe AIR (Adobe Integrated Runtime)

Flash Lite

[ Hadziq Fabroyir . Department of Informatics ] [ 29 ]