Gd - 8th - Web Game Design Using Flash

Web Game Design using Flash

[ 1 ][ Hadziq Fabroyir . Department of Informatics ]

[ Hadziq Fabroyir . 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 ]

Historyof Flash & ActionScript

[ 6 ]

[ Hadziq Fabroyir . Department of Informatics ]

[ 7 ]

[ Hadziq Fabroyir . Department of Informatics ]

1996: FutureSplash Animation by Microsoft & Disney1997: Flash 1.0 & Flash 2.01998: Flash 3.02000: Flash 4.02001: Flash 5.0 + ActionScript 1.02002: Flash MX2003: Flash MX 2004 + ActionScript 2.0 & Flex2005: 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 AnimationHow 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 timeEach 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 circleDouble-click on object to select it, then Insert>Convert to Symbol

Click on frame 1 in the timelineInsert>Create MotionTweenClick on another frame (e.g., 30)Insert>KeyframeMotion tween appearsDrag circle to another locationGo to frame 1Press 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 transparencyTint changes the color valuesOr 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 objectsDraw a circle in center of stageIn frame 30, Insert>Blank KeyframeDraw a square in center of stageGo back to frame 1In Properties, Tween: select ShapeNotice 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 tweenSelect Add Motion GuideIn 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 settingsCtrl-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 Player 9

Adobe AIR (Adobe Integrated Runtime)

Flash Lite

Flash Client Runtime

Environments

[ 29 ]