gd 8th web game design using flash 091105153548 phpapp02

8/14/2019 Gd 8th Web Game Design Using Flash 091105153548 Phpapp02

1/29

[ Hadziq Fabroyir . Department of Informatics ] [ 1 ]

Web Game Design usingWeb Game Design usingFlashFlash


2/29


3/29


Casual GamersCasual Gamers

IssueIssueTRADITIONAL 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


4/29



5/29


hat can youhat can youo with it?o with it?

!AKE YOUR OWN!AKE YOUR OWN nimated moviesnimated movies -eb based banner adseb based banner ads Gamesames -eb based applicationseb based applications pecial Effectspecial Effects


6/29


Historyistory &f Flash ActionScript&f Flash ActionScript


7/29



8/29


1996: FutureSplash Animation byMicrosoft & Disney

1997: Flash 1.0 & Flash 2.0

1998: Flash 3.02000: Flash 4.0

2001: Flash 5.0 + ActionScript 1.0

2002: Flash MX

2003: Flash MX 2004 + ActionScript2.0 & Flex

2005: Flash 8 & Flash Lite 1.0

Timeline ~Timeline ~


9/29



10/29



11/29



12/29



13/29


Adobe Flash refers to the Adobe FlashPlayer and multimedia program, whichcreates animation, games, movies, etc.

Available in most web browsers

Uses vector based graphics (wont loseclarity of image with sizing)

Scripting language ActionScript

BasicsBasics


14/29


Flash files -- .swf extension

May be implemented in several ways:

Object of a webpagePlayed in the Flash Player

Self-executing Flash movie

BasicsBasics


15/29


Java-like object-oriented scriptinglanguage

Creates most of the interactivity in Flashapps

First introduced in 2000 with Flash 5

Adds interactivity to applications

What is ActionWhat is Action

Script?Script?


16/29


Ex: ActionScriptEx: ActionScript

CodeCodeonClipEvent(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


17/29


How does itHow does it

compare?compare?


18/29


Basically, it condenses several programsinto one. In Flash you can:

Draw your shapes/objects

Edit your codeSee it played (preview it before running it)

Edit timeline of events

Save it as a .swf file

Why Flash isWhy Flash is

betterbetter


19/29


lash Animationlash Animation ow Toow To


20/29


Flash animation works by playingthrough the Timeline

Each cell in a timeline is a frame, a unit of

playing timeEach row in the timeline area is a layer, inwhich different objects may appear,possibly in the same frames

Frame-by-frameFrame-by-frame

animationanimation


21/29


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


22/29


Motion tween can achieve othereffects

Click on the circle in eitherkeyframe

Select drag-down menu next toColor:

Alpha changes the transparencyTint changes the color values

Or use free transform tool to changesize and shape of object in a

keyframe

Color and size motionColor and size motiontweenstweens


23/29


Similar to morphing objects

Draw a circle in center of stage

In frame 30, Insert>Blank Keyframe

Draw a square in center of stageGo back to frame 1

In Properties, Tween: select Shape

Notice that shape tween is light green

Shape tweensShape tweens


24/29


If you want more than straight linemotion:

Right-click on layer with motion tween

Select Add Motion Guide

In frame 1 of motion guide layer, withpencil tool, draw a path (it wont bevisible)

Drag graphic to start and end points(in 1st and last keyframes)

Yey! Arbitrary path motion

Motion guidesMotion guides


25/29


File > Publish settings

Ctrl-Enter compiles .fla to .swf (swiff)

Publish .html to tell browser where to find

latest Flash player, dimensions of movieWindows projector produces stand-alone .exe program (plays withoutbrowser or Flash player)

Macintosh player does the same on Mac

Publishing FlashPublishing Flash

moviesmovies


26/29


.ctionScript 3 0.ctionScript 3 0


27/29


28/29


Flash authoring tool: Adobe Flash CS3

Adobe Flex Builder 2 (an IDE)

Notepad + Flex 2 SDK

Tools for WritingTools for Writing

CodeCode

Flash ClientFlash Client


29/29

[ Hadziq Fabroyir Department of Informatics ] [ 29 ]

Flash Player 9

Adobe AIR (Adobe Integrated Runtime)

Flash Lite

Flash ClientFlash ClientRuntimeRuntime

EnvironmentsEnvironments

gd 8th web game design using flash 091105153548 phpapp02

Documents