..

WWW.MYANMARTUTORIALS.COM ..

IT-LEARNING EBOOK GROUP .. WWW.MYANMARTUTORIALS.COM .........................

WWW.WYTUMYANMAR.COM

IT -learning group admins .. KYAW ( shwe.young.lin@wytumyanmar.com ) ( pyittinehtoun@gmail.com )

( If u wanna learn more , join with us )

 PROFESSIONAL FLASH GAME DEVELOPMENT Professional Flash Game Development Tutorials Tutorial Series Total Game Play Myanmar Tutorials Tutorials Myanmar Tutorials Myanmar Online Game Portal

Chapter 1
Flash Flash Macromedia Photoshop web multi-media content Adobe software company Flash web site web application Flash

Game Flash Flash game Flash code Flash Flash code Flash game developer Language Flash game development concept Flash game PC game Flash game PC game download run component player () Flash Player () Flash authoring tool Flash platform Flash platform Component () Internet C++ game game computer language game intuitive Built-in animation system Beginner Flash code

animation

Flash

reuse C++ game Flash Flash game ActionScript Flash authoring tool authoring tool artist PC game game

install

Flash Development ActionScript program

Flash Player Flash Player file web browser Flash Player plug-in Flash Player plug-in Web browser Flash file SWF Flash web browser Flash version update Internet 90% Flash Player Flash developers Flash internet platform plug-in

version game game

Flash platform

Flash Authoring Tools Flash Flash authoring tool Flash authoring tool library object vector graphic animation objects scene Flash game Flash authoring tool Adobe Adobe Flash CS 4 Flash authoring tool Adobe companies Flash authoring tool coding Adobe Flash CS 4 authoring tool SWF file

Flash

concept

ActionScript Flash authoring tool Flash languages ActionScript object logic language javascript javascript animation ActionScript support Object scripting language Flash open scripting javascript ActionScript

ActionScript editor environment) IDE

text editor Adobe Flash CS4 ActionScript text syntax highlight, auto-complete features IDE (integrated development ActionScript IDE VisualStudio FlashDevelop

Flash Authoring Tool Adobe Flash CS 4 Adobe Flash CS 4

Flash game Flash CS 4

Adobe Flash CS4 Start-up User Interface

Flash CS 4 New version oriented 3.0

Start-up page options Flash File (ActionScript 3.0) 2.0 ActionScript language support Flash file 2.0 object oriented flash file ActionScript version 3.0

files

Flash files Create

latest ActionScript 3.0 2.0 object obsolete

Adobe Flash CS4 User Interface

default Essentials interface interface interface

interface ESSENTIALS

game drop down menu interface layout

save

Flash CS

interface working area Game Workspace flash game workspace flash file asset animation asset Asset workspace Workspace flash file flash file export assets

Workspace: workspace game area Library Panel: Library Library Library Library

 Properties Panel: Properties Panel context menu Object properties

select

object Properties panel

set Toolbox tool frame

Toolbox: Adobe Photoshop Flash CS Toolbox Photoshop shortcut Artist toolbox workspace programmer toolbox tool Timeline: Timeline animation frame manage frame Timeline animation frame

Flash CS game

interface

game player click

cartoon -> Import -> Import to Stage

graphic

Flash CS 4 File Dialog

File graphic

Importing a Graphic into Flash CS4

graphic Bitmap Flash coding control Symbol Symbol graphic Symbol Symbol workspace graphic select Convert to Symbol menu Convert to Symbol Dialog Box Name Enemy Type Movie Clip

Graphic

Modify ->

Convert to Symbol Dialog Box graphic Panel symbol Bitmap Instance name Symbol Option coding Instance name Workspace Instance name enemy1 Properties Instance name reference enemy1

coding Timeline Frame ActionScript panel select Right-Click -> Actions

ActionScript Panel ActionScript panel code enemy1.x = 100; enemy1.y = 100; enemy1 object properties properties graphic coordinate 100 Window run code graphic copy Instance name dot . OOP language x y enemy1 x y coordinate Graphic object default properties x y coordinate game Ctrl + ENTER game run workspace graphic coordinate (100, 100) code Frame run execute

Run

animation ActionScript panel

Animation

code

addEventListener( Event.ENTER_FRAME, DoGameLoop ); var nXDir : int = 1; var nYDir : int = 1; var nSpeed : int = 10; function DoGameLoop(e : Event) {

enemy1.x += nXDir * nSpeed; enemy1.y += nYDir * nSpeed; if ( enemy1.x > nXDir = -1; if ( enemy1.x < nXDir = 1; if ( enemy1.y > nYDir = -1; if ( enemy1.y < nYDir = 1; 610 ) 30 ) 450 ) 30 )

enemy1.scaleX = nXDir; }

addEventListener() Flash Event.ENTER_FRAME listen function animation animate

default frame

function event listen function execute DoGameLoop DoGameLoop function DoGameLoop function enemy1 x y nSpeed code run graphic screen

graphic

click addEventListener() function italic

code

mouse click event mouse click function ActionScript panel

addEventListener(Event.ENTER_FRAME, DoGameLoop); var nXDir : int = 1; var nYDir : int = 1; var nSpeed : int = 10; function DoGameLoop(e : Event) { enemy1.x += nXDir * nSpeed; enemy1.y += nYDir * nSpeed; if ( enemy1.x > nXDir = -1; if ( enemy1.x < nXDir = 1; if ( enemy1.y > nYDir = -1; if ( enemy1.y < nYDir = 1; 610 ) 30 ) 450 ) 30 )

enemy1.scaleX = nXDir; } addEventListener(MouseEvent.CLICK, DoClick); function DoClick(e : MouseEvent) { if ( enemy1.hitTestPoint( e.stageX, e.stageY ) ) removeEventListener(Event.ENTER_FRAME, DoGameLoop); }

addEventListener(MouseEvent.CLICK, DoClick); function DoClick(e : MouseEvent) { if ( enemy1.hitTestPoint( e.stageX, e.stageY ) )

removeEventListener(Event.ENTER_FRAME, DoGameLoop); } enemy1.hitTestPoint() function point hit-test MouseEvent properties stageX stageY DoGameLoop function event listener remove Point mouse coordinate hit-test graphic

Flash Develop Editor game

game code

Ctrl+ENTER

Chapter 2
Flash game Macromedia version 3 ActionScript ActionScript scripting language Adobe upgrade ActionScript ActionScript 3 Object Oriented Programming OOP language C++/C#/Java tutorial ActionScript language programming concept language programming language

programming

ActionScript

variable

var i : Number = 0;

var

keyword

variable variable variable type 0 initialize

colon :

= 0 variable type
Variable Type int Number

variable name variable type Number ActionScript

Description Integer Integer Floating-point Number Floating point Floating point

Boolean uint String

Boolean Unsigned integer String

True or False integer String ActionScript basic data type

basic data type

object member variable member function int.MAX_VALUE integer

member variable language value

function dot .

function
public function MyFunction( var parameter : int = 0 ) : int { return 0; }

Function public function function function parameter list Parameter function return variable type class
package { class MyClass extends MovieClip { // constructor public function MyClass() { super(); } } }

public variable

private

protected function colon :

keyword

package

Java

package

C++

namespace class parent class

object keyword class MovieClip child class parent class

default main package class keyword class inherited ActionScript inherited

package keyword main package extends MyClass C++

Constructor class function public function constructor Constructor function return value parent class constructor ActionScript parent class super keyword parent class member function foo

super()

super.foo();

ActionScript destructor C++ memory manage

ActionScript ActionScript

Java function

garbage collection inheritance override

polymorphism override keyword

class A { public function DoSomething() // process A } } class B extends A {

override public function DoSomething() { // call parent super.DoSomething(); // process B } }

super.DoSomething() function ActionScript library C++ Library

parent class

function

Parent class

class function include import Timer object

class

import keyword package

import flash.utils.Timer;

flash.utils

class

import

import flash.utils.*;

FlashDevelop import

class name ActionScript language

IDE

ActionScript Game Adobe Flash Flash programming ActionScript ActionScript graphic Adobe Flash CS Symbol Insert -> New Symbol New Symbol dialog box

Flash game ActionScript link Flash

ActionScript

bitmap Symbol

Flash game Convert to Symbol

Create New Symbol Dialog Box Symbol symbol Edit Mode double-click (Right-click -> Edit )

Editing Symbol (Right Click -> Edit) Scene 1 Symbol scene Scene 1 Symbol edit graphic main scene Symbol text graphic Symbol animation frame animation frame ActionScript Symbol logic symbol symbol symbol symbol symbol level symbol character symbol Flash ActionScript Coding Manager window symbol class nested level level ActionScript link symbol class Flash symbol symbol graphic control symbol Animation Symbol nested complex character symbol symbol game screen main graphic Library edit symbol ( )

symbol animation

Frame game

code

ActionScript Flash game character nested background

FlashDevelop FlashDevelop project name right-click

FlashDevelop class add (Project Manager window

project Project View ->

Project Manager Class dialog box

context menu

Add -> New Class

New

New Class Dialog Box Filename TestSymbol Flash CS symbol link symbol Library panel Right click -> Properties Test Symbol class Adobe Flash CS4 select (Symbol symbol Symbol Properties dialog box class link )

Symbol Properties Dialog Box Linkage classes Export for ActionScript Class flash.display.MovieClip class file class link TestSymbol class MovieClip FlashDevelop extends MovieClip FlashDevelop import Linkage class Advance button TestSymbol Base icon

Symbol MovieClip

base classes extend

flash.display.MovieClip class code

package { import flash.display.MovieClip; /** * ... * @author mkt */ public class Character extends MovieClip { public function Character() { } } }

New symbol

class MovieClip Type

extends Movie Clip

Graphic

Button

type
Type Movie Clip Extends Class MovieClip

Movie Clip class extend

Comment MovieClip extend animation frames

MovieClip class

extend

symbol control MovieClip symbol Function

move, rotate, scale functions MovieClip Graphic DisplayObject MovieClip control Symbol extend

function light-weighted

Button

SimpleButton

Flash

button

MovieClip class properties

extend symbol methods

symbol screen

screen control animation properties

functions MovieClip methods

MovieClip Properties
Name x : Number y : Number scaleX : Number Description X Y Width scaleX = 0.5; scaleX = 2.0; scaleX = -1.0; scaleY : Number width : Number Height Graphic process .width height: Number alpha : Number Graphic Graphic width return graphic query height return transparency 0.5 visible : Boolean Symbol screen transparent 1.0 0.0 opaque width mirror scaleX TestSymbol.x = 10 X scaleX object Mirror x coordinate 10

visible = false;

symbol

visible = true; currentFrame : int parent : DisplayObject Play head Animation symbol symbol symbol root : DisplayObject numChildren : int parent object symbol symbols symbol

symbol symbol frame

root nested scene symbol scene child symbol parent

parent symbol nested root symbol return

Properties

MovieClip class

Methods

MovieClip Methods
Name addChild(child : DisplayObject) Description Symbol Flash time addEventListener(type:String, listener:Function) getChildAt(index:int) getChildByName(name:String) Event mouse-click listen Symbol Symbol function symbol frame animation play play frame listen user input child symbol retrieve child symbol child symbol frame remove frame retrieve symbol dynamically run time programming symbol mouse-click event symbol design symbol edit

removeChild(child:DisplayObject) Symbol nextFrame() prevFrame() stop() play() gotoAndPlay(frame:Object) Play-head Play-head Animation Animation

symbol animation frame play-head play play symbol point stop

animation gotoAndStop(frame:Object) Play-head function hitTestPoint(x:Number, y:Number ) Symbol hitTestObject(obj:DisplayObject) Symbol

function

MovieClip class Flash method property game Flash

methods properties help file chapter game

methods MovieClip

Pong

game Flash CS Project

intro screen Create New -> Flash File (ActionScript 3.0) Filename Pong FlashDevelop (Project -> New Project) ActionScript 3 Flash IDE Project

file New

Project

Pong

Flash file save

Main class Main class C++ main() function program run entry point Flash Main class main scene control MovieClip object game Movie Clip symbol Main class main scene select Main scene select select select Escape key select main scene Properties Panel Class Pong

FlashDevelop class extends Flash game graphic rectangle library circle

Pong

class game

MovieClip project setup game

Pong game graphic

graphic

ball

paddle Flash CS

Insert -> New Symbol ActionScript on Class Ball OK GfxBall symbol Edit Mode Oval tool Horizontal Center Vertical Center

GfxBall Base class Circle select

Export for flash.display.MovieClip Tool box Modify -> Align

Paddle New Symbol GfxPaddleLeft Class name PaddleLeft Base class Paddle Base class MovieClip extend class Paddle Left Right Paddle Paddle Paddle parent class extend OOP OK FlashDevelop Paddle class Paddle class MovieClip extends OK GfxPaddleLeft Edit Mode rectangle Tool box Rectangle Tool Rectangle scene ( Alignment commands )

paddle PaddleRight

base class Paddle

symbol name GfxPaddleRight class name symbols scene

Pong Game Setup ball MovieClip Ball.as

package { import flash.display.MovieClip; import flash.events.Event; /** * ... * @author mkt */ public class Ball { protected var protected var protected var

Ball extends

class code

FlashDevelop

add

extends MovieClip m_nDirX : int = 1; m_nDirY : int = 1; m_nSpeed : int = 5;

public function Ball() { addEventListener(Event.ENTER_FRAME, OnFrameMove); }

public function OnFrameMove(e : Event ) { x += m_nDirX * m_nSpeed; y += m_nDirY * m_nSpeed; if ( y < 15 || y > 465 ) m_nDirY *= -1; if ( x < 15 || x > 625 ) { x = 320; y = 240; m_nDirX *= -1; } } } }

addEventListener(Event.ENTER_FRAME, function frame ( ) code ball direction direction Direction -1 opposite direction x Paddle class class Paddle.as
package { import flash.display.MovieClip; import flash.events.Event;

OnFrameMove) animate Ball -1 -1 -1 y

OnFrameMove OnFrameMove() Direction -1 x -1 = 1 1 1 -1 Game

ball screen code

paddle Paddle class ball code Paddle

/** * ... * @author mkt */ public class Paddle extends MovieClip { public var m_lpBall : Ball; public var m_nMoveY : int; public var m_nSpeed : int = 6; public function Paddle() { addEventListener(Event.ENTER_FRAME, OnFrameMove); } public function OnFrameMove(e : Event) { if (hitTestObject(m_lpBall)) m_lpBall.m_nDirX *= -1; y += m_nMoveY * m_nSpeed; if ( y > 480 ) y = 480;

if ( y < 0 ) y = 0; } } }

OnFrameMove m_nMoveY Paddle class (delegated) PaddleLeft.as

ball

hitTestObject() function paddle Y direction player key value child class value User input PaddleRight class child classes

x direction

user input PaddleLeft

package { import flash.events.KeyboardEvent; /** * ... * @author mkt */ public class PaddleLeft extends Paddle { public function PaddleLeft() { stage.addEventListener(KeyboardEvent.KEY_DOWN, OnKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, OnKeyUp); } public function OnKeyDown(e : KeyboardEvent) { if (e.keyCode == 87) // W key m_nMoveY = -1; if (e.keyCode == 83) // S key m_nMoveY = 1; } public function OnKeyUp(e : KeyboardEvent) { m_nMoveY = 0; } } }

PaddleRight.as
package { import flash.events.KeyboardEvent; /** * ... * @author mkt */ public class PaddleRight extends Paddle {

public function PaddleRight() { stage.addEventListener(KeyboardEvent.KEY_DOWN, OnKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, OnKeyUp); } public function OnKeyDown(e : KeyboardEvent) { if (e.keyCode == 38) // Up key m_nMoveY = -1; if (e.keyCode == 40) // Down key m_nMoveY = 1; } public function OnKeyUp(e : KeyboardEvent) { m_nMoveY = 0; } } }

addEventListener(KeyboardEvent.KEY_DOWN, OnKeyDown) key input Listen function listener stage add key input Key input stage listen key input listen stage. addEventListener() listen code key press key code 87: W key 83 : S key 38 : Up arrow key 40 : Down arrow key left paddle W S right paddle up down arrow

select

ball paddle classes instance name Instance name ball paddleRight Pong class

instances Flash CS 4 paddle

Screen

ball paddleLeft

Pong.as
public class Pong extends MovieClip { public function Pong() { var lpPaddleLeft : PaddleLeft = PaddleLeft(getChildByName("paddleLeft")); var lpPaddleRight : PaddleRight = PaddleRight(getChildByName("paddleRight")); var lpBall : Ball = Ball(getChildByName("ball")); lpPaddleLeft.m_lpBall = lpBall; lpPaddleRight.m_lpBall = lpBall; } }

Constructor instance name error

game paddle

run Ball

scene object m_lpBall Null

run

Pong game Pong game score

coding score

Chapter 3
Using Timeline and Frame Chapter Timeline Symbol Frame Edit Mode (symbol double-click ) Timeline Symbol chapter Flash game symbol

feature

Timeline in Symbol Edit Mode Timeline 1 Frame frame frames Frame Play-head frame Flash Frame Game run Play-head frame frame Play-head frames rate Timeline Flash game ActionScript ActionScript code ActionScript code run

rate

Adobe Toolbox

Flash

CS Symbol

Flash

file (Insert -> New Symbol)

frame

Oval Tool frame animation Right-click -> Insert Keyframe frame select Selection Tool ) Frame frame frame

Timeline Timeline

frame select frame (pixel frame animation

Using Frames to animate ball bouncing frame area Key frame frame Keyframe animation rotation Animation Right-click -> Actions frame play-head run play-head

key frame position Keyframe position run run ActionScript panel frame
Using Tweening

frame

frame stop()

select code code

run

Animation manually animation frame

Keyframe Tween animation Tween

position Tween frame frame

frame

frame Right-Click -> Remove Frames Frame 10 select Frame Keyframe Frame 1 select Right-click -> Create Classic Tween

frame Frame

Shift key

select

animation animation Frame 10

smooth

frame 20 40 Right-click -> Insert normal frames Frame 10 normal frame select

Creating a Tween

frame

select Tween Frame 20 select animation

Right-click -> Insert Keyframe frame frame select Right-click -> Create Classic Tween keyframe Example Game Using Frames

game

frame graphic

game

graphic

game

Memory question mark

game game graphic graphic

Screen Screen click

Project save

Flash CS FlashDevelop

Memory class Flash CS Stage class Memory (skeleton chapter 2 ) symbol Symbol frame GfxCard graphic frame Symbol Library Panel Frame 5

New Document Memory Memory New Project MovieClip extend game skeleton game game

(Insert -> New Symbol)

Question mark effect frame 5 select select 100% 5% ( 100%

Insert -> Keyframe 5% Transformation panel Ctrl-T Transformation panel frame 10 Key frame Frame 10

Tween

Animation

Enter

ActionScript symbol tween (

code

) frame 15 20 keyframe frame Transformation panel

5%

code

frame code frame 6 select Keyframe maintain Frame 6

frame

frame close Keyframe frame Keyframe Right-click -> Convert to Keyframe open animation frame 10 frame 10 stop() ActionScript code Frame 11 close0 frame 16 Convert to Keyframe open0 open0 clode0 code integer Frame 20 stop() code frame 5 frame ActionScript panel complex code maintain MovieClip extend open0 animation class frame ActionScript panel FlashDevelop Card class GfxCard simple Card link code class

code

Card class
public class Card extends MovieClip { public var m_nFace : int;

public function Card() { m_nFace = 0; } public function set Face(f : int) { m_nFace = f; } // open the card to current face public function OpenCard() { // move to the "face" animation frame gotoAndPlay( "open" + m_nFace ); } }

OpenCard() function open + m_nFace

gotoAndPlay()

m_nFace 0 open1, open2 Flash CS frame 5 select OpenCard() frame 5 Card class OpenCard() OpenCard() function frame Card class frame code member function member variables card click even Card class

animation frame open0 code ActionScript panel function GfxCard symbol link class

constructor

public function Card() { addEventListener( MouseEvent.CLICK, OnClick, false, 0, true ); mouseEnabled = true; buttonMode = true; useHandCursor = true; }

addEventListener() function

card click OnClick() function symbol (Button symbol ) mouse event mouseEnabled = true; mouse input event buttonMode useHandCursor properties mouse cursor card cursor OnClick() function
// on click card public function OnClick(e : MouseEvent) { Memory(root).OpenCard( this ); }

root class card Memory class

delegate

card process Card OpenCard() function Memory class

public class Memory extends MovieClip { public var m_CurCard1 : Card;

public var m_CurCard2 : Card; public var m_nCardIndex; // Open the card when the card is clicked public function OpenCard(c : Card) { m_nCardIndex++; if ( m_nCardIndex == 1 ) { m_CurCard1 = c; // open up the card m_CurCard1.gotoAndPlay("close"); } else if ( m_nCardIndex == 2 ) { m_CurCard2 = c; // open up the card m_CurCard2.gotoAndPlay("close"); } } ..... ..... }

Card

click card CloseCard() function card

Memory class

// Close the card public function CloseCard(c : Card) { if ( m_nCardIndex > 1 ) { // check if card faces r shown if ( m_CurCard1.m_nFace == m_CurCard2.m_nFace ) { m_CurCard1.SetShown(); m_CurCard2.SetShown(); } else { // close both card back m_CurCard1.gotoAndPlay("close" + m_CurCard1.m_nFace); m_CurCard2.gotoAndPlay("close" + m_CurCard2.m_nFace); } // reset card count m_nCardIndex = 0; } }

Card SetShown() function

public class Card extends MovieClip { public var m_bShown : Boolean; public function Card() { ...... ...... m_bShown = false;

shown Card class

card

SetShown() function

} // set the card as shown public function SetShown() { m_bShown = true; mouseEnabled = false; buttonMode = false; useHandCursor = false; } ................ }

CloseCard() function CloseCard() function CloseCard() function delegate

frame Card class Memory class

public class Card extends MovieClip { .............. .............. // close the card face public function CloseCard() { stop(); Memory(root).CloseCard( this ); } }

Flash CS panel level GfxCard Game

GfxCard Frame 20 Card class level

CloseCard()

function

ActionScript

GfxCard Edit mode

Workspace

Drop a few GfxCards into Workspace is all you need to build a game level

level workspace Editor

Flash level

game level Flash CS game GfxCard run

Symbol Level Card

Add more graphic in the similar way Tween close1, close2, close3 frame open1, open2, open3, ActionScript

card

m_nFace value

randomize

Randomize

Memory class

public class Memory extends MovieClip { public static const CARD_COUNT = 6; public var m_ItemList : Array; // start a new level public function StartLevel() { m_nCardIndex = 0; m_ItemList = new Array(); // retrieve items from the scene var i : int; var c : Card; var nFace : int = 0; var nSet : int = 0; for ( i = 0; i < numChildren; i++ ) { if ( getChildAt(i) is Card ) m_ItemList.push( getChildAt( i ) ); } // randomize var index1 : int; var index2 : int; for ( i = 0; i < 1000; i++ ) { index1 = Math.random() * m_ItemList.length; index2 = Math.random() * m_ItemList.length; // shuffle

c = m_ItemList[index1]; m_ItemList[index1] = m_ItemList[index2]; m_ItemList[index2] = c; } for ( i = 0; i < m_ItemList.length; i++ ) { c = Card( m_ItemList[i] ); // randomize the card face if ( nSet == 0 ) { nFace++; if ( nFace >= CARD_COUNT ) nFace = 0; } nSet++; if ( nSet == 2 ) nSet = 0; c. m_nFace = nFace; // set the close face c.gotoAndPlay("open"); } } .................... .................... }

StartLevel() function game run Workspace Actions ActionScript panel Memory game Memory.as
package { import flash.display.MovieClip;

Workspace timeline workspace play-head frame 1 (Edit mode ) frame 1 Right-click StartLevel() game run code

/** * ... * @author mkt */ public class Memory extends MovieClip { public static const CARD_COUNT = 6; public public public public var var var var m_ItemList : Array; m_CurCard1 : Card; m_CurCard2 : Card; m_nCardIndex;

public function Memory() { } // start a new level public function StartLevel() { m_nCardIndex = 0;

m_ItemList = new Array(); // retrieve items from the scene var i : int; var c : Card; var nFace : int = 0; var nSet : int = 0; for ( i = 0; i < numChildren; i++ ) { if ( getChildAt(i) is Card ) m_ItemList.push( getChildAt( i ) ); } // randomize var index1 : int; var index2 : int; for ( i = 0; i < 1000; i++ ) { index1 = Math.random() * m_ItemList.length; index2 = Math.random() * m_ItemList.length; // shuffle c = m_ItemList[index1]; m_ItemList[index1] = m_ItemList[index2]; m_ItemList[index2] = c; } for ( i = 0; i < m_ItemList.length; i++ ) { c = Card( m_ItemList[i] ); // randomize the card face if ( nSet == 0 ) { nFace++; if ( nFace >= CARD_COUNT ) nFace = 0; } nSet++; if ( nSet == 2 ) nSet = 0; c.m_nFace = nFace; // set the close face c.gotoAndPlay("open"); } } // Open the card when the card is clicked public function OpenCard(c : Card) { m_nCardIndex++; if ( m_nCardIndex == 1 ) { m_CurCard1 = c; // open up the card m_CurCard1.gotoAndPlay("close"); } else if ( m_nCardIndex == 2 ) { m_CurCard2 = c; // open up the card m_CurCard2.gotoAndPlay("close"); } }

// Close the card public function CloseCard(c : Card) { if ( m_nCardIndex > 1 ) { // check if card faces r shown if ( m_CurCard1.m_nFace == m_CurCard2.m_nFace ) { m_CurCard1.SetShown(); m_CurCard2.SetShown(); } else { // close both card back m_CurCard1.gotoAndPlay("close" + m_CurCard1.m_nFace); m_CurCard2.gotoAndPlay("close" + m_CurCard2.m_nFace); } // reset card count m_nCardIndex = 0; } } } }

Card.as
package { import flash.display.MovieClip; import flash.events.MouseEvent; /** * ... * @author mkt */ public class Card extends MovieClip { public var m_nFace : int; public var m_bShown : Boolean; public function Card() { mouseEnabled = true; buttonMode = true; useHandCursor = true; m_bShown = false; addEventListener( MouseEvent.CLICK, OnClick, false, 0, true ); } // set the card as shown public function SetShown() { m_bShown = true; mouseEnabled = false; buttonMode = false; useHandCursor = false; } // open the card to current face public function OpenCard()

{ // move to the "face" animation frame gotoAndPlay( "open" + m_nFace ); } // close the card face public function CloseCard() { stop(); Memory(root).CloseCard( this ); } // on click card public function OnClick(e : MouseEvent) { if ( !m_bShown ) Memory(root).OpenCard( this ); } } }

Flash

code

level

game Frame Tween Memory game GfxCard Level Frame

frame game level frame Chapter 4 stop() )

animation

code

level (Hint level

frame

Chapter 4
Building a Game UI Game Interface) Symbol game game navigate character graphic game Flash UI game UI (User

Button Symbol Flash Insert -> New Symbol Create New Symbol Dialogbox Type MovieClip Button Symbol ( ) Symbol Button

Create New Symbol Dialog for Button Symbol

Frame Set for Button Symbol Button Symbol Frame Timeline Up, Over, Down Hit frame Up frame graphic button up ( ) Over mouse button graphic Down mouse button Graphic button graphic bitmap Flash Tool Text object MovielClip button Flash

Flash Button button print screen

Windows Bitmap

button save

Windows Flash

Button Button - Click function function code button addEventListener() function

ActionScript code

function

button

ClickMe

// attach event listener to button var button : SimpleButton = getChildByName("ClickMe"); button.addEventListener(MouseEvent.CLICK, OnClick); // Button click event function public function OnClick(e : MouseEvent) { trace("You click on a button"); }

button

Text Game object UI button Text Button Symbol Flash Toolbar game Text tool Text

Text Tool Properties Panel

Text Tool

Workspace text object Text object Text Tool select text object select Properties Panel text object properties property text Static Text Dynamic Text Input Text Static Text value game version game Static Text

Dynamic Text Dynamic Text Static Text input Input Text

information Dynamic Text ActionScript run-time resource

game Highscores Static Text Dynamic Text Static Text Input Text

Font Family text bold, italic run system configuration font generic Properties Panel Font Family drop down list font _sans _serif _typewrite generic font

Flash game text font family _sans

Sans

font

font

generic Font

font embedded font Library Panel New Font

font Flash embedded computer context menu button context menu Font Symbol Properties dialog box

Font Properties dialog box Dialog box font Linkage Class ActionScript Embedded font ActionScript checkbox on font family drop down list text OK embedded font font Class Export for FntArial

text

Text object Dynamic Text ( ) Input Text run-time ActionScript text text object instance name HighScores HighScores code

Instance Name ActionScript

// set new highscores var scores : int = 1000; var txtHighscores : TextField = getChildByName("HighScores"); txtHighscores.text = "Player Highscores: " + scores;

Components

Button menu

text

game UI Components Component Panel

Component Panel

UI Window -> Components

Component Panels Components Panel Windows controls program language (VB, C#) Flash Components component control Components Panel Workspace CheckBox control Properties Component Inspector Component Inspector Window -> Component Inspector Component Inspector Window

Component Inspector Panel

Component Inspector panel generic game double-click

control

options Control Edit Mode

Control Symbol

Editing Checkbox Control CheckBox control state double-click symbol nested symbol double-click edit mode control graphic VB C# programming language graphic UI Menu Game UI screen screen menu Menu menu game menu symbol main CheckBox symbol selected_up Flash control

Flash Memory game Game

Chapter 3

Menu Game Main Menu flash main scene frame in-game menu Scores Lives symbol game run frame

menu

menu Chapter 3 drag save Main Menu frame #2 memory.fla Flash file frame #1

frame #1

mouse

Memory.fla from Chapter 3

Center

blur Filter Icon

Start Game button GfxStartGame Button Symbol Text object Font Family Arial Style Bold Alignment Size 32 (background ) Text Static Text ( text run-time text Static Text ) Filter Filter Photoshop Layer Style symbol shadow gradient glow effect Text click select Glow Properties Panel Color Filters Blur X Blur Y Add Filter 5

Add Glow Filter to START GAME Text Over Frame Right-click -> Insert Keyframe Text object Size 34 Blur X Blur Y 7 Blur Color Down frame Insert Keyframe frame Blur X Blur Y 3 Blur Color ( ) frame text object Frame Size 30

button Start Game button frame #1 Game frame #1 code right-click -> Actions ActionScript panel stop(); ( game logo credit text )

frame #1 filter

Memory Game Main Menu Screen Start Game function screen frame button ActionScript code Game screen frame #2 ActionScript code addEventListener() Start Game game gotoAndPlay() function

// attach event listener to button var button : SimpleButton = SimpleButton(getChildByName("butStartGame")); button.addEventListener(MouseEvent.CLICK, OnStartGame); // Button click event function function OnStartGame(e : MouseEvent) { gotoAndPlay(1); } stop();

Code frame #2
StartLevel(); stop();

Start Game button Instance Name ActionScript code

butStartGame (chapter 3

Memory game run

Main Menu

Game

Ctrl-ENTER

Building Levels Main Menu Memory game card Insert Blank Frame frame level code level Level

frame #3 frame#3

Library frame #2

GfxCard code

ActionScript panel

StartLevel(); stop();

Chapter 3 Memory.as card Card

Memory.as function Card m_bShown true WinGame() function

FlashDevelop m_bShown property Memory class

// check whether all cards are opened public function WinGame() : Boolean { var i : int; var card : Card; for (i = 0; i < m_ItemList.length; i++) { card = m_ItemList[i]; if (!card.m_bShown) return false; } return true; }

CloseCard() function
// Close the card public function CloseCard(c : Card) { if ( m_nCardIndex > 1 ) { // check if card faces r shown if ( m_CurCard1.m_nFace == m_CurCard2.m_nFace ) { m_CurCard1.SetShown(); m_CurCard2.SetShown(); // check if the game is won and go to next level if (WinGame()) { if (currentFrame == totalFrames) gotoAndPlay(0); else nextFrame(); } } else {

// close both card back m_CurCard1.gotoAndPlay("close" + m_CurCard1.m_nFace); m_CurCard2.gotoAndPlay("close" + m_CurCard2.m_nFace); } // reset card count m_nCardIndex = 0; }

WinGame() function frame ( (currentFrame == totalFrames) frame level frame level code frame

true level

frame ) Main Menu level nextFrame() if function

Insert Blank Frame

level Flash

frames

StartLevel() function animation Memory game

Memory.as package { import flash.display.MovieClip; import flash.events.MouseEvent; import flash.display.SimpleButton; /** * ... * @author mkt */ public class Memory extends MovieClip { public static const CARD_COUNT = 6; public public public public var var var var m_ItemList : Array; m_CurCard1 : Card; m_CurCard2 : Card; m_nCardIndex;

public function Memory() { } // start a new level public function StartLevel() { m_nCardIndex = 0; m_ItemList = new Array(); // retrieve items from the scene var i : int; var c : Card; var nFace : int = 0; var nSet : int = 0; for ( i = 0; i < numChildren; i++ ) { if ( getChildAt(i) is Card ) { Card(getChildAt(i)).Initialize(); m_ItemList.push( getChildAt( i ) ); } }

// randomize var index1 : int; var index2 : int; for ( i = 0; i < 1000; i++ ) { index1 = Math.random() * m_ItemList.length; index2 = Math.random() * m_ItemList.length; // shuffle c = m_ItemList[index1]; m_ItemList[index1] = m_ItemList[index2]; m_ItemList[index2] = c; } for ( i = 0; i < m_ItemList.length; i++ ) { c = Card( m_ItemList[i] ); // randomize the card face if ( nSet == 0 ) { nFace++; if ( nFace >= CARD_COUNT ) nFace = 0; } nSet++; if ( nSet == 2 ) nSet = 0; c.m_nFace = nFace; // set the close face c.gotoAndPlay("open"); } } // Open the card when the card is clicked public function OpenCard(c : Card) { m_nCardIndex++; if ( m_nCardIndex == 1 ) { m_CurCard1 = c; // open up the card m_CurCard1.gotoAndPlay("close"); } else if ( m_nCardIndex == 2 ) { m_CurCard2 = c; // open up the card m_CurCard2.gotoAndPlay("close"); } } // Close the card public function CloseCard(c : Card) { if ( m_nCardIndex > 1 ) { // check if card faces r shown if ( m_CurCard1.m_nFace == m_CurCard2.m_nFace ) { m_CurCard1.SetShown(); m_CurCard2.SetShown();

// check if the game is won and go to next level if (WinGame()) { if (currentFrame == totalFrames) gotoAndPlay(0); else nextFrame(); } } else { // close both card back m_CurCard1.gotoAndPlay("close" + m_CurCard1.m_nFace); m_CurCard2.gotoAndPlay("close" + m_CurCard2.m_nFace); } // reset card count m_nCardIndex = 0; } } // check whether all cards are opened public function WinGame() : Boolean { var i : int; var card : Card; for (i = 0; i < m_ItemList.length; i++) { card = m_ItemList[i]; if (!card.m_bShown) return false; } return true; } } }

Card.as
package { import flash.display.MovieClip; import flash.events.MouseEvent; /** * ... * @author mkt */ public class Card extends MovieClip { public var m_nFace : int; public var m_bShown : Boolean; public function Card() { } // Initialize the card public function Initialize() { mouseEnabled = true;

buttonMode = true; useHandCursor = true; m_bShown = false; addEventListener( MouseEvent.CLICK, OnClick, false, 0, true ); } // set the card as shown public function SetShown() { m_bShown = true; mouseEnabled = false; buttonMode = false; useHandCursor = false; } // open the card to current face public function OpenCard() { // move to the "face" animation frame gotoAndPlay( "open" + m_nFace ); } // close the card face public function CloseCard() { stop(); Memory(root).CloseCard( this ); } // on click card public function OnClick(e : MouseEvent) { if ( !m_bShown ) Memory(root).OpenCard( this ); } } }

END