BUILDING A SIMPLE GAME WITH FLASH PRO

BUILDING A SIMPLE GAME WITH FLASH PRO 

Adobe MAX 2013 Lab by Tom Krcha (Sr. Creative Cloud Evangelist at Adobe) 

Follow me on Twitter: @tomkrcha 

Building a simple game with Flash Professional. MAX 2013 Lab by Tom Krcha (@tomkrcha) 1

Prerequisites: 

-‐ Flash Pro CS6 

-‐ Flash Builder 4.7 

-‐ Knowledge of AS3 

-‐ Citrus Engine library (included with demo assets) 

Demo Assets: 

-‐ Beginner tutorial for Citrus Engine 

o MAXBeginner.zip 

o Quick intro into Citrus Engine for platformer based games 

-‐ Level Building tutorial 

o MAXLevelBuilding.zip 

o Desiging a level in Flash Professional 

o Launching the level with Citrus Engine in Flash Builder 

-‐ DragonBones Extension 

o dragonbones_v2.0.zip 

o install into Flash Pro 

-‐ Animations tutorial 

o MAXAnimations.zip 

o Using Dynamic spritesheets via a SWF animation 

o Using Spritesheets 

o Using Skeletal animations via DragonBones extension 

All the zipped files are ready made Flash Builder projects. 


BEGINNER’S TUTORIAL 

You are going to learn Citrus Engine (http://citrusengine.com) basics. Citrus Engine 

is lightweight GPU accelerated game engine for Flash and AIR and includes 

platformer kit for side-‐scroller platform games. It runs on top of Starling Framework 

(2D) and Away3D framework (3D) and you can choose one of the physics engines 

that are included as well – Box2D, NAPE, AwayPhysics. For our game we are going to 

use Starling + Box2D combination. 

Setup the most basic scene with Citrus Engine. 

Start Flash Builder 4.7 and later we are going to use Flash Pro for level design and 

animations , but project management and coding will be done in Flash Builder as it’s 

more suitable for it. Design = Flash Pro, Programming = Flash Builder. 

Create a new project in Flash Builder 

File -‐> New -‐> ActionScript Project 

(name the project MAXBeginner or similar) 

Link Citrus library 

Right click on the project -‐> Properties -‐> ActionScript Build Path -‐> Add SWC 

(locate CitrusEngine’s SWC file) -‐> OK 

In the main class add following code: 

package 

{ 

import citrus.core.starling.StarlingCitrusEngine; 

} 

[SWF(frameRate="60", width="1024", height="768")] 

public class MAXBeginner extends StarlingCitrusEngine 

{ 

public function MAXBeginner() 

{ 

setUpStarling(true); 

} 

} 

state = new GameState(); 


Create new class GameState that extends StarlingState 

File -‐> New -‐> ActionScript Class 

package 

{ 

import Box2D.Dynamics.Contacts.b2Contact; 

import citrus.core.starling.StarlingState; 

import citrus.objects.platformer.box2d.Coin; 

import citrus.objects.platformer.box2d.Enemy; 

import citrus.objects.platformer.box2d.Hero; 

import citrus.objects.platformer.box2d.MovingPlatform; 

import citrus.objects.platformer.box2d.Platform; 

import citrus.physics.box2d.Box2D; 

public class GameState extends StarlingState 

{ 

public function GameState() 

{ 

super(); 

} 

override public function initialize():void{ 

super.initialize(); 

var physics:Box2D = new Box2D("box2D"); 

physics.visible = true; 

add(physics); 

var floor:Platform = new Platform("floor",{x: 512, y: 768, width:1024, height: 40}); 

add(floor); 

var p1:Platform = new Platform("p1", {x:874, y: 151, width: 300, height:40}); 

add(p1); 

var mp:MovingPlatform = new MovingPlatform("mp",{x:220, y:700, width:200, height: 40, 

startX: 220, startY: 700, endX:500, endY: 151}); 

add(mp); 

var hero:Hero = new Hero("hero", {x:50, y:50, width: 70, height: 70}); 

add(hero); 

var enemy:Enemy = new Enemy("enemy", {x:900, y:700, height:70, width: 70, leftBound: 10, 

rightBound:1000}); 

add(enemy); 

var coin:Coin = new Coin("coin", {x: 967, y: 90, width: 79, height: 79}); 

coin.onBeginContact.add(function(c:b2Contact):void{ 

trace("CONTACT"); 

}); 

add(coin); 

} 

} 

} 


LEVEL BUILDING TUTORIAL 

In this part you are going to learn how to build basic levels for your game using 

Flash Pro visually. 

Open Level1.fla and look into Library panel. You should see Box2D objects: 

This gives you a possibility to layout easily 

components on the stage. 

Hero, Platform, Enemy, Coin, Sensor, Cannon, 

Box2DPhysics 


You can set component parameters in 

Properties Panel. 

Add Hero on stage and set the view property 

to a PNG file that will represent the hero. 

You can also adjust jumpHeight and 

jumpAcceleration. 


Loading a level into your game 

In this part you will load a SWF file exported from original Level.FLA file. You can 

embed the SWF or use Loader. Loader is better as it makes sure you always have the 

latest file. 

package 

{ 

import flash.display.Loader; 

import flash.events.Event; 

import flash.net.URLRequest; 

import citrus.core.starling.StarlingCitrusEngine; 

[SWF(frameRate="60",width="1024",height="768")] 

public class MAXLevelBuilding extends StarlingCitrusEngine 

{ 

public function MAXLevelBuilding() 

{ 

setUpStarling(true); 

} 

} 

var loader:Loader = new Loader(); 

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _levelLoaded); 

loader.load(new URLRequest("../assets/Level1.swf")); 

} 

private function _levelLoaded(evt:Event):void { 

} 

state = new Level1(evt.target.loader.content); 

evt.target.removeEventListener(Event.COMPLETE, _levelLoaded); 

evt.target.loader.unloadAndStop(); 

Now you need to setup the Level1 class, that consumes 


Initializing the level 

Define physics. Use ObjectMaker2D to init the level from a MovieClip. Setup the hero 

and the sensor. 

package 

{ 

import flash.display.MovieClip; 

import Box2D.Dynamics.Contacts.b2PolygonContact; 

import citrus.core.starling.StarlingState; 

import citrus.objects.platformer.box2d.Hero; 

import citrus.objects.platformer.box2d.Platform; 

import citrus.objects.platformer.box2d.Sensor; 

import citrus.physics.box2d.Box2D; 

import citrus.utils.objectmakers.ObjectMaker2D; 

public class Level1 extends StarlingState 

{ 

protected var level:MovieClip; 

private var hero:Hero; 

public function Level1(_level:MovieClip) 

{ 

super(); 

level = _level; 

var objectsUsed:Array = [Hero, Platform, Sensor]; 

} 

override public function initialize():void{ 

super.initialize() 

} 

var physics:Box2D = new Box2D("physics"); 

physics.visible = true; 

add(physics); 

ObjectMaker2D.FromMovieClip(level); 

hero = getObjectByName("hero") as Hero; 

hero.acceleration = 0.2; 

var sensorGate:Sensor = getObjectByName("sensorGate") as Sensor; 

sensorGate.onBeginContact.add(sensorGateOnBeginContact); 

private function sensorGateOnBeginContact(contact:b2PolygonContact):void 

{ 

trace("Sensor touched"); 

} 

} 

} 


ANIMATIONS’S TUTORIAL 

This tutorial will discuss 2D Animations support in Citrus Engine. Basically anything 

that is supported by Starling is supported by Citrus as well, however Citrus simplifies the 

workflow even more. 

There are currently 3 types of supported animations and all of them can be created within 

Flash Pro: 

• Dynamic sprite sheets from SWFs 

• Pregenerated sprite sheets 

• Skeletal animations via Dragon Bones extension 

DYNAMIC SPRITE SHEETS FROM A SWF FILE 

The easiest method for attaching animations in Citrus.Just set a SWF file to a view 

parameter in Components parameters in Properties panel and Citrus generates a sprite 

sheet on the fly and assigns it to an instance on stage in runtime. 

Coin 

The actual animation looks like this: 


Hero 

-‐ For a hero, you have to define several MovieClips like walk, jump, idle.This is 

how the jump animation looks like. 

Put all animations on stage and give them an instance name: walk, jump, idle in the 

Properties panel. 

To make dynamic spritesheets work, you don’t have to write a single line of code, it 

just works! 

The drawback is of dynamic spritesheets is init time as all animations have to generated 

at runtime and possibly the memory usage. The next two approaches are more controlled 

environments. This one is the simplest. 


PREGENERATED SPRITE SHEETS 

Beginning with Flash Pro CS6, you can export sprite sheets from timeline animations. 

Select all MovieClips that you want to export in the Library panel (idle, walk, jump), 

right-click and choose Generate Sprite Sheet… 

You should get something similar to this image + an XML file, defining the animations 

sequence. 


 

 

 

 

 

 

 

 

As you can see, each sequence begins with an animation name: jump, walk, idle. 


Embed the pregenerated sprite sheet to your level class by creating two variables this 

way: 

[Embed(source="../levels/hero.png")] 

private var heroAnimBitmap:Class; 

[Embed(source="../levels/hero.xml",mimeType="application/oc 

tet-stream")] 

private var heroAnimXML:Class; 

Now you can add this animation sequence to a hero using this code: 

var ta:TextureAtlas = new 

TextureAtlas( 

Texture.fromBitmap(new 

heroAnimBitmap()), XML(new 

heroAnimXML())); 

var animationSeq:AnimationSequence = new 

AnimationSequence(ta,["walk","idle", "jump"],"idle",24); 

hero.view = animationSeq; 

Where ["walk", "idle", "jump"] is an array of available animations and “idle” is the 

default state, 24 defines the frame rate (fps). 


SKELETAL ANIMATIONS WITH DRAGON BONES 

Dragon Bones is an open source skeletal animation extension for Flash Pro that allows 

you to export your animations into 3 files – texture atlas (XML + PNG) and animation 

metadata. 

Install Dragon Bones extension (SkeletonAnimationDesignPanel.zxp) using Adobe 

Extension Manager and activate the panel in Flash Pro. Then select a MovieClip 

animation in the Library panel and click Import button in Dragon Bones. This will import 

the timeline animation and create a sprite sheet composed only of separate elements used 

within the animation, unlike frame-by-frame snapshots as in the pregenerated or dynamic 

spritesheet examples above. Using Dragon Bones is very memory efficient. 

The animations sequence for Dragon Bones has to be in a single MovieClip and each 

animation begins with a labeled frame (e.g. walk, jump, idle…). 

Once you are done, select the MovieClip (“allAnimations” in this case) in Library, open 

SkeletalAnimationDesignPanel and hit Import button. You should see this: 

Hit Export button and save the exported file as “PNG (XML merged)“, this will encode 

all animation information inside PNG, so you will have only a single file that defines 

assets and animations. 


In the code, embed the png this way: 

// Dragon Bones 

[Embed(source="../levels/herodb.png",mimeType="application/ 

octet-stream")] 

private var heroAnimBitmapAndXML:Class; 

And assign the hero.view property this way in the initialize function. If your game is 

running e.g. 60 fps and your animation was done within a lower frame rate (fps), you can 

adjust the animation speed via timeScale property as demonstrated below. 

/** SKELETAL ANIMATION **/ 

var armature:Armature; 

var factory:StarlingFactory = new StarlingFactory(); 

factory.addEventListener(Event.COMPLETE, 

function(event:Event):void{ 

armature = factory.buildArmature("allAnimations"); 

armature.animation.timeScale = 0.7; 

hero.view = armature; 

}); 

factory.parseData(new heroAnimBitmapAndXML()); 

DragonBones generated spritesheet looks like this, so you can see there are only 

elements that are being animated. The PNG file contains also XML file that describes the 

animations. 

`

BUILDING A SIMPLE GAME WITH FLASH PRO

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?