At this time only source code for the workspace Animation preview can be generated, but we will expand this when more content can be created.

To generate the content of an animation, go to the animation section in your makeyourflashgame.com workspace.

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

When you edit your animation you will find an button [Generate source code] in your animation’s settings.

When you choose to generate the Push Button Engine source code you can first specify some generation settings

• Application
  Application class name for the generated PBE source code.
• Resources (embed or load)
  Source is generated that will embed the resources (using ResourceBundle) or will load the resources dynamicly (using BulkLoaderResourceProvider ) .
• Resource location
  You can specify what is the path/uri to the resources.
• Mouse control
  When set to true the source is generated that lets your animation rotate (normal sprite sheet animation) or change direction (directional sprite sheet animation).
  The mouse SpriteRenderer is a dynamicly (in-memory) generated image and provided using its own – IResourceProvider – class
• Status
  When set to true , source for a status label is generated

Just press [Generate] and you have your code!

When the source display box is scrolled in top position you will find some controls that let you copy the source to clipboard. It will than be easy to create a new application file in you favorite actionscript IDE ( Flashbuilder would be my choice ).

Needless to say that you should have some knowledge from PBE and have the PBE source installed in your development environment. The resources should be put there by yourself (if embedded) or on a downloadable position in case of synamic loading, as well.

The generated source code from the animation example from this post looks like this :

// ------------------------------------------------------------------
// http://www.makeyourglashgame.com
// Generated by user [mas] on August 23, 2010, 3:31 pm
// Animation 'walking blue man'
// ------------------------------------------------------------------
package
{

	import com.pblabs.engine.PBE;
	import com.pblabs.rendering2D.ui.SceneView;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.filters.DropShadowFilter;
	import flash.text.TextField;
	import flash.ui.Mouse;

	[SWF(width="136", height="148", framerate="60")]
	public class Application extends Sprite
	{
		// ------------------------------------------------------------------
		// public methods
		// ------------------------------------------------------------------
		public function Application()
		{
			super();
			// initialize the application
			initApplication();
			// create resources
			new Resources(createEntities);
		}
		// ------------------------------------------------------------------
		// private methods
		// ------------------------------------------------------------------
		private function initApplication():void
		{
			// create background bitmap
			var bmd:BitmapData = new BitmapData(136,148,false,0);
			this.addChild(new Bitmap(bmd));

			// initialize game engine
			initEngine();

			// add status text field
			tfStatus = new TextField();
			tfStatus.x = 2; tfStatus.y = 2; tfStatus.width = width-4;
			tfStatus.height = 20;
			tfStatus.text="";
			tfStatus.textColor = 0xffffff;
			tfStatus.filters = [ new DropShadowFilter(0,45,0,1,2,2,8) ];
			this.addChild(tfStatus);

			Mouse.hide();
		}
		private function initEngine():void
		{
			// Start up Push Button Engine
			if (!PBE.started)
				PBE.startup(this);
			// Set up a simple PBE scene
			PBE.initializeScene(new SceneView());
		}
		private function createEntities():void
		{
			// create spritesheet (SpriteSheetComponent) for this animation
			new SpriteSheet("walking blue man",
				{
					cols : 15,
					rows : 8,
					frameCount : 120,
					directionsPerFrame : 8,
					filename : "assets/_myfg_spritesheet_245.png"
				});
			// create the animating sprite (SpriteRenderer) for this animation
			animation = new AnimatingSprite("walking blue man",
				{
					duration : 1,
					animationType : "L",
					frameCount : 120,
					loop : true,
					directionsPerFrame : 8,
					startDirection : "D",
					directionRotation : "CL",
					spriteSheet : "walking blue man"
				});
 			// create mouse cursor
			new RotatingMouseCursor(mouseHandler);
		}
		private function mouseHandler(event:MouseEvent):void
		{
			animation.mouseHandler(event);
			tfStatus.text = "Direction  = "+animation.direction;
		}
		// ------------------------------------------------------------------
		// private and protected variables
		// ------------------------------------------------------------------
		private var animation:AnimatingSprite;
		private var tfStatus:TextField;
	}
}

// ------------------------------------------------------------------------
// Internal classes
// ------------------------------------------------------------------------

import com.pblabs.animation.Tween;
import com.pblabs.engine.PBE;
import com.pblabs.engine.entity.EntityComponent;
import com.pblabs.engine.entity.IEntity;
import com.pblabs.engine.entity.PropertyReference;
import com.pblabs.engine.resource.ImageResource;
import com.pblabs.engine.resource.Resource;
import com.pblabs.engine.resource.ResourceBundle;
import com.pblabs.engine.resource.provider.IResourceProvider;
import com.pblabs.rendering2D.DisplayObjectRenderer;
import com.pblabs.rendering2D.SpriteRenderer;
import com.pblabs.rendering2D.SpriteSheetRenderer;
import com.pblabs.rendering2D.spritesheet.CellCountDivider;
import com.pblabs.rendering2D.spritesheet.SpriteSheetComponent;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.DropShadowFilter;
import flash.geom.Point;

class Resources extends ResourceBundle
{
	[Embed(source="assets/_myfg_spritesheet_245.png")]
	public var res1:Class;

	public function Resources(callWhenReady:Function)
	{
		super();
		callWhenReady();
	}
}
class SpriteSheet extends SpriteSheetComponent
{
	// ------------------------------------------------------------------
	// public methods
	// ------------------------------------------------------------------
	public function SpriteSheet(name:String , props:Object)
	{
		super();

		this.props = props;

		// By assigning the imageFilename attribute, the image will be automaticly loaded
		imageFilename = props.filename;		

		// Create a CellCountDivider to specify the number of columns and rows of our spritesheet
		var spriteSheetDivider:CellCountDivider = new CellCountDivider();
		spriteSheetDivider.xCount = props.cols;
		spriteSheetDivider.yCount = props.rows;

		// Hook up the SpriteSheetDivider
		divider = spriteSheetDivider;
		frameCount = props.frameCount;

		// if this spritesheet has multiple direction information the number of directions has to be set
		if (props.directionsPerFrame!=null)
		  directionsPerFrame = props.directionsPerFrame;		

		// add this spritesheet to the spritesheet repository
		SpriteSheet.add(this, name);
	}
	public static function lookup(name:String):SpriteSheet
	{
		entity = PBE.lookupEntity("spritesheets");
		if (entity != null)
			return (entity.lookupComponentByName(name) as SpriteSheet);
		else
			return null;
	}
	// ------------------------------------------------------------------
	// private methods
	// ------------------------------------------------------------------
	private static function add(spritesheet:SpriteSheet, name:String):void
	{
		entity = PBE.lookupEntity("spritesheets");
		if (entity == null)
		{
			entity = PBE.allocateEntity();
			entity.initialize("spritesheets");
		}
		entity.addComponent( spritesheet, name );
	}

	// ------------------------------------------------------------------
	// private and protected attributes
	// ------------------------------------------------------------------
	private static var entity:IEntity;
	private var props:Object;
}
class DirectionComponent extends EntityComponent
{
	public function get direction():Number
	{
		return _direction;
	}

	public function set direction(value:Number):void
	{
		_direction = value;
	}

	public function screenToDirection(screenPoint:Point):void
	{
		// transform screen mouse coordinates to world coordinates
		var worldPoint:Point = PBE.scene.transformScreenToWorld(screenPoint);
		// calculate the angle between the mouse world coordinates and the horizontal axes
		var rotationAngle:Number = Math.round((Math.atan2( worldPoint.y - render.y, worldPoint.x - render.x) * 180 ) / Math.PI);
		// display status label
		switch(orientation)
		{
			case "U":
				rotationAngle+=90;
				break;
			case "D":
				rotationAngle-=90;
				break
			case "L":
				rotationAngle+=180;
				break
		}
		if (rotation == "CC")
			rotationAngle*=-1;
		while (rotationAngle < 0) rotationAngle+=360;
		direction = rotationAngle;
	}

	public function DirectionComponent(render:DisplayObjectRenderer, orientation:String, rotation:String)
	{
		this.orientation = orientation;
		this.rotation = rotation;
		this.render = render;
		super();
	}

	private var _direction:Number = 0;
	private var orientation:String;
	private var rotation:String;
	private var render:DisplayObjectRenderer;
}
class AnimatingSprite extends Object
{
	// ------------------------------------------------------------------
	// public methods
	// ------------------------------------------------------------------
	public function AnimatingSprite(name:String , props:Object)
	{
		this.props = props;

		entity = PBE.allocateEntity();
		entity.initialize(name);

		// Create a sprite render component to display our animation
		render = new SpriteSheetRenderer();

		// assign the scene so this animatied sprite will we drawn.
		render.scene = PBE.scene;

		// Assign the spritesheet to the sprite
		if (props.spriteSheet is String)
			render.spriteSheet = SpriteSheet.lookup(props.spriteSheet);
		else
			render.spriteSheet = props.spriteSheet;

		render.alpha = 0;
		render.rotation = 0;

		render.directionReference = new PropertyReference("@direction.direction");
		entity.addComponent( directionComponent = new DirectionComponent(render, props.startDirection, props.directionRotation), "direction" );
		var target:Number = (props.frameCount/props.directionsPerFrame)-0.001;

		// Add our render component to the Animated Sprite Entity
		entity.addComponent( render, "render" );

		// create tween for the spriteIndex animation
		new Tween(entity,"@render.spriteIndex",props.duration,0,target,null,null,0,
			(props.animationType == "P")?true:false,(props.loop)?-1:1);						

		// tween render alpha from 0 to 1 so we can avoid strange positioning effects when PBE is initializing.
		new Tween(entity,render,0.1,
			{ alpha : 0 }, { alpha : 1 },null,null,0.05);
	}

	public function get rotation():Number
	{
		return render.rotation;
	}

	public function set rotation(value:Number):void
	{
		render.rotation = value;
	}

	public function get direction():Number
	{
		if (directionComponent!=null)
			return directionComponent.direction;
		return 0;
	}

	public function set direction(value:Number):void
	{
		if (directionComponent!=null)
			directionComponent.direction = value;
	}		

	public function mouseHandler(event:MouseEvent):void
	{
		if (event.buttonDown)
		{

			directionComponent.screenToDirection(new  Point(event.stageX,event.stageY));
		}
	}	

	// ------------------------------------------------------------------
	// private and protected attributes
	// ------------------------------------------------------------------
	private var entity:IEntity;
	private var render:SpriteSheetRenderer;
	private var props:Object;
	private var directionComponent:DirectionComponent;
}
class RotatingMouseCursor extends Object implements IResourceProvider
{
	// ------------------------------------------------------------------
	// public methods
	// ------------------------------------------------------------------
	public function RotatingMouseCursor(customMouseHandler:Function = null)
	{
		// register this class as an resource provider
		PBE.resourceManager.registerResourceProvider(this);
		this.customMouseHandler = customMouseHandler;

		// create mouse cursor entity
		entity = PBE.allocateEntity();
		entity.initialize("mouseCursor");

		// create the PBE resource
		mouseResource = new ImageResource();
		mouseResource.initialize(createBitmap());

		// create spriteRenderer component for the mousecursor
		createRenderer();

		PBE.mainStage.addEventListener(Event.MOUSE_LEAVE, mouseLeave);
		PBE.mainStage.addEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);
	}

	public function isResourceKnown(uri:String, type:Class):Boolean
	{
		if (uri == "mouseCursor" && type==ImageResource)
			return true;
		return false;
	}

	/**
	 * This method is called when the ResourceManager requests a known
	 * resource from a ResourceProvider
	 */
	public function getResource(uri:String, type:Class, forceReload:Boolean = false):Resource
	{
		if (uri == "mouseCursor" && type==ImageResource)
			return mouseResource;
		return null;
	}

	// ------------------------------------------------------------------
	// private methods
	// ------------------------------------------------------------------
	private function createBitmap():Bitmap
	{
		// create mouse pointer bitmap
		var bitmapData:BitmapData = new BitmapData(17,19,true,0);
		var sy:int = 3;
		var ey:int = 15;
		for (var x:int = 3; x<15; x++)
		{
			for (var y:int = sy; y<ey; y++)
			{
				bitmapData.setPixel32(x,y,0xffffffff);
			}
			sy+=1; ey-=1;
		}
		bitmapData.applyFilter(bitmapData,bitmapData.rect,new Point(0,0),
			new DropShadowFilter(0,45,0,1,2,2,8));
		return new Bitmap(bitmapData);
	}

	private function createRenderer():void
	{
		render = new SpriteRenderer();
		render.scene = PBE.scene;
		render.fileName = "mouseCursor";
		render.alpha = 0;
		entity.addComponent(render,"render");
	}

	private function mouseLeave(event:Event):void
	{
		render.alpha = 0;
	}

	private function mouseHandler(event:MouseEvent):void
	{
		if (render.alpha==0) render.alpha = 1;
		// transform screen mouse coordinates to world coordinates
		var worldPoint:Point = PBE.scene.transformScreenToWorld(new  Point(event.stageX,event.stageY));
		// calculate the angle between the mouse world coordinates and the horizontal axes
		var rotationAngle:Number;
		if (centerObject==null)
			rotationAngle = Math.round((Math.atan2( worldPoint.y, worldPoint.x) * 180 ) / Math.PI);
		else
		  	rotationAngle = Math.round((Math.atan2( worldPoint.y - centerObject.y, worldPoint.x - centerObject.x) * 180 ) / Math.PI);

		render.rotation = rotationAngle;
		render.position = worldPoint; 

		if (customMouseHandler!=null) customMouseHandler(event);
	}

	// ------------------------------------------------------------------
	// private and protected attributes
	// ------------------------------------------------------------------
	private var mouseResource:ImageResource;
	private var entity:IEntity;
	private var render:SpriteRenderer;
	private var centerObject:DisplayObjectRenderer = null;
	private var customMouseHandler:Function = null;
}

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

Did you know that using the makeyourflashgame.com website you can easily create an animation's spritesheet from a number of frames? Read it in this post

The only usefull (windows) tool I could find on the net is SpriteStrip Composer, a .NET application (download it here) developed by a member for the XNA framework. I does some good work but, when you want to specify the column count you want to set for your sprite sheet, you will be dissapointed.

So .. seeking an online tool ? Well … seek no further …

Makeyourflashgame.com just finished a tool that can merge a range of single frames into a single spritesheet. That spritesheet can be used in your games and with engines like for example the open source Push Button Flash game engine.

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

You will find this tool in your makeyourflashgame.com workspace under ‘sprite sheets’ and it is called [create new sprite sheet].

After clicking the [create new sprite sheet] button, you can select multiple frame images for upload. In the example , I am creating a ‘multi-directional’ sprite sheet out of 120 frames. The frames were rendered using the open source 3D program Blender 2.5

After all files are uploaded to the makeyourflashgame.com website, you can input some sprite sheet data, like name, visibility and , very important, the number of columns your spritesheet should have. In my case 15, because I have a 15 frame animation with 8 directions ( 15 x 8 cells ).

Pressing the [Create] button will start the merging process.

After the merging is finished you have your sprite sheet all made up in your makeyourflashgame.com workspace.

Just set the animation type, click the [Edit animation] button and your directional animation is ready to take off. You can control the direction by using your mouse while the left mouse button is pressed.

And if you would be a PBE actionscript developer, you could even save some time and generate the PBE source code for this animation. You can see how that works in this post.

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

Modifiers for effects like Bloom, Glow , Blur, Colorize, Reflection are provided with the engine, but one can easily create your own. Even modifiers that perform animating modification, like a pulsating glow for example, are possible.

See working sample

Download tutorial code here

Code uses minimal components, so import the swc into your project.

You also need to put the PBE logo image and the animating star spritesheet into the same folder as your compiled swf, for the sample to work.

Why would we need modifiers

Answer is simple … Graphics that are modified by the engine don’t need to be created and loaded as a resource. If you would have a game with animating enemies that look the same, but having a different color, you could load one enemy animation resource and create multiple colorized modified SpriteContainer or SpriteSheet objects. You would be decreasing your loading time and only need to create one resource when designing the graphics of your game.

Image that you have to create/render a reflection resource for each frame in all your animations and sprites. TORTURE!! NO NEED … there is a ReflectionModifier that turns an image in its reflection.

In addition, some effects can be real time so you can switch on-off specific modifiers at your convienience. To set a BlurModifier when an object is moving fast, could render a nice effect. Or maybe you would want to set your entire scene to grayScale when someone completes a level and you show the level score, just assign a GrayscaleModifier to the (PBE.scene as BitmapDataScene) and your done.

How do modifiers work

When you create a game using the open source PushButton flash game engine, all images and animations you use consist of BitmapData objects. These objects are loaded and maintained by the Engine and contain raw bitmap data. BitmapData is pixel color and transparency (ARGB) information about an image.

A modifier is a class that will modify the bitmap data of an image.
There are two types of modification :

- REAL-TIME
This modification is applied on each render pass. This type of modification is active when you are applying modifiers to a SpriteSheetRenderer or BitmapDataScene object.

- PRE-RENDERED
This modification is applied when the modifiers are assigned. The image data is stored in modified state. This type of modification is active when you are applying modifiers to a SpriteRenderer object or SpriteContainer subclass, like SpriteSheetComponent or SWFSpriteSheetComponent.

The classes mentioned above all have a modifiers:Array attribute. By assigning an array of one or multiple modifers to this attribute , you will activate the provided modifiers.

example : turn your scene into grayscale (only with BitmapDataScene)

(PBE.scene as BitmapDataScene).modifiers = [ new GrayscaleModifier() ];

example : apply a red colorization on a sprite

var render:SpriteRenderer = new SpriteRenderer();
render.modifiers = [ new ColorizeModifier([0.5,0.5,0.5,0,0],[0.5,0,0,0,0],[0.5,0,0,0,0],[0,0,0,1,0])];

example : apply a pulsating glow colorization on an animating sprite

var render:SpriteSheetRenderer = new SpriteSheetRenderer();
render.modifiers = [ new SizeModifier(150,150),
   new PulsatingGlowModifier( new GlowModifier(0xcc0000,.65,5,5,3,3),
   new GlowModifier(0xff2200,.9,8,8,6,10))];

Changing the assigned modifiers array has no effect, only when assigning a new Array it will show changes, a bit the same as the filters array you use with the Sprite Class.

// wrong
render.modifiers.push(GrayscaleModifier());

// wrong
render.modifiers[render.modifiers.length] = GrayscaleModifier();

// right
render.modifiers = render.modifiers.concat(GrayscaleModifier());

You can have multiple modifiers that will be applied in the modifiers Array’s order.

So, for example …. you have a nice cut-out sprite animation that you would want to apply a glow to. Because you have made such a solid sprite, having no overhead spacing pixels in your loaded image, only applying a GlowModifier would render a clipped glow. This because glow radiates outwards and therefor out off your Sprite’s boundaries.

Solution … RESIZE. To achieve a nice glow on a sprite or animation one should first size-up the image by using the SizeModifier (creating more render area for the glow) and after that apply the GlowModifier.

Set size to 100×100 pixels and apply red glow.

render.modifiers = [ SizeModifier(100,100) , GlowModifier(0xff0000) ];

One could even finish with applying another SizeModifier to downscale the glowing Sprite.

Create your own modifier

We are gonna make a ColorBlockModifier that replaces the image with a block (rectangle) of a specific color.

To create a new modifier we subclass from the Modifier Class
[com.pbe.rendering2D.modifier].

public class ColorBlockModifier extends Modifier
{
  ...
}

In the modifier constructor you can provide parameters that you can use when you are modifying. In this case the color of the block we are creating.

public var color:uint = 0xff000000;

public function ColorBlockModifier(color:uint=0xff000000)
{
	this.color = color;
	super();
}

Now we only need to override the modify function that will handle the modification:

public override function modify(data:BitmapData, index:int=0, count:int=1):BitmapData
{
..
}

data:BitmapData
image BitmapData object

index:int=0
frame index when using modifier in combination with SpriteContainer subclass or SpriteSheetRenderer

count:int=1
frame count using modifier in combination with SpriteContainer subclass or SpriteSheetRenderer

You can use index and count attributes when you want to create an animating modification. A pulsating Glow for example. In the modify function we alter en return the image data:BitmapData object.

The entire modifier code should look something like this:

	public class ColorBlockModifier extends Modifier
	{
		public var color:uint = 0xff000000;

		public function ColorBlockModifier(color:uint=0xff000000)
		{
			this.color = color;
			super();
		}

		public override function modify(data:BitmapData, index:int=0, count:int=1):BitmapData
		{
			data.lock();

			for (var y:int = 0; y<data.height;  y++)
			{
					for (var x:int=0; x<data.width; x++)
						data.setPixel32(x,y,color);
			}

			data.unlock();
			return data;
		}

	}

See working sample

Download tutorial code here

Code uses minimal components, so import the swc into your project.

You also need to put the PBE logo image and the animating star spritesheet into the same folder as your compiled swf, for the sample to work.

As you have seen, modifiers are easy to use and easy to create. So use them well …

See example of this tutorial in action

Download the AS3 code from this article (rar)

With this PBE render component (that extends the PBE BitmapRenderer component) you will be able to render an image of a specific with and height that will be filled with a bitmap you provide.

This render component exposes 2 attributes for scrolling purposes:

scroll:Point
With this point you can specify the scrolling offset for the scrolling bitmap, where scroll.x will be the horizontal scrolling value and the scroll.y will be the verical scrolling value.

scrollSpeed:Point
With this point you can specify the scrolling speed ( pixels/second ) for the scrolling bitmap, where scrollSpeed.x will be the horizontal scrolling speed and scrollSpeed.y will be the vertical scrolling speed.
The scrolling speed will automaticly adjust the scrolling offset.

By using multiple ScrollingBitmapRenderer components in different scene render layers with different scrolling speeds, you will even be able to create a nice paralax scrolling effect. This will be demonstrated in the provided sample.

The ScrollingBitmapRenderer Component Class

First we create a component class that extends the PBE BitmapRender class. By extending the BitmapRenderer things like drawing and positioning are already handled by the PushButton Engine. We get a bitmapData attribute that we can assign or draw onto that gives us control of what is displayed.

	public class ScrollingBitmapRenderer extends BitmapRenderer
	{
	}

In this component’s constructor we will create and prepare mutilple bitmapData objects. The bitmapData for the scrolling bitmap, the bitmapData for clearing and the bitmapData that will contain all display data and will be used to copy pixels from, onto the scrolling bitmap.

		public function ScrollingBitmapRenderer(bitmap:Bitmap, width:int, height:int)
		{
			// call inherited constructor
			super();
			// store bitmap that will be used to fill the scrolling bitmap
			this.srcBitmap = bitmap;
			// create a bitmapdata object for the scrolling bitmap
			this.bitmapData =  new BitmapData(width,height);
			// determine how many times the bitmap has to be drawn horizontal and vertical
			// to fill the scrolling bitmap.
			// We add an aditional so that we have enough display to scroll in any direction
			var cx:int = Math.ceil(width/srcBitmap.width)+1;
			var cy:int = Math.ceil(height/srcBitmap.height)+1;
			// the scrollrect variable will be used to draw a specific area to the scrolling bitmap
			scrollRect = new Rectangle(0,0,width,height);
			// create a bitmapData object for clearing purposes
			emptyBitmapData = new BitmapData(width,height, true, 0);
			// create a bitmapData object that will contain all display info that will
			// be used when copying pixels to the scrolling bitmap
			scrollBitmapData = new BitmapData(cx*srcBitmap.width, cy*srcBitmap.height, true, 0x000000);
			for (var ix:int = 0; ix<cx; ix++)
				for (var iy:int = 0; iy<cy; iy++)
				{
					scrollBitmapData.copyPixels(srcBitmap.bitmapData,srcBitmap.bitmapData.rect, new Point(ix*srcBitmap.width,iy*srcBitmap.height));
				}
		}

Because the extended BitmapRenderer is in fact a DisplayObjectRenderer that extends the PBE AnimatedComponent we have a onFrame event that we can override and use to adjust the scrolling offset using the scrollSpeed. We can also copyPixel the right display data onto the scrolling bitmap so it will be displayed in the PushButton Game Engine.

		public override function onFrame(deltaTime:Number):void
		{
			// call onFrame of the extended BitmapRenderer
			super.onFrame(deltaTime);
			// adjust scroll offset using the scrollSpeed
			scroll.x += scrollSpeed.x * deltaTime;
			scroll.y += scrollSpeed.y * deltaTime;
			// determine the right drawing rectangle area of the bitmapData object with all display info
			// for the copyPixel command
			// determine x offset of rectangle draw area
			var dx:int = scroll.x - (Math.floor(scroll.x/srcBitmap.width)*srcBitmap.width);
			scrollRect.x = dx;
			// determine y offset of rectangle draw area
			var dy:int = (scroll.y) - (Math.floor((scroll.y)/srcBitmap.height)*srcBitmap.height);
			scrollRect.y = dy;
			// lock the bitmapData object so no changes will be displayed until it is unlocked
			bitmapData.lock();
			// clear the bitmapData using a emptyBitmapData copy
			bitmapData.copyPixels(emptyBitmapData, emptyBitmapData.rect, new Point(0,0), null, null, false);
			// draw the right area of the bitmapData object with all display info onto the scrolling bitmap
			bitmapData.copyPixels(scrollBitmapData, scrollRect, new Point(0,0), null, null, true);
			// unlock the bitmapData object so it can be displayed
			bitmapData.unlock();
		}

Using the ScrollingBitmapRenderer Component in a sample

To create a scrolling bitmap we just allocate a PBE Entity and add a ScrollingBitmaspRenderer component to it.

			// Allocate an entity for a scrolling bitmap
			var bm:IEntity = PBE.allocateEntity();
			// Register the entity with PBE
			bm.initialize("bm_front");
			// Create a bitmap render component to display our animation
			var bmRender:ScrollingBitmapRenderer = new ScrollingBitmapRenderer(logo.image,PBE.scene.sceneView.width,PBE.scene.sceneView.height);
			// assign the scene so this animatied sprite will we drawn.
			bmRender.scene = PBE.scene;
			// position this bitmap so that it will fill the entire PBE scene
			bmRender.x = -1*(PBE.scene.sceneView.width/2);
			bmRender.y = -1*(PBE.scene.sceneView.height/2);
			// set the layer of this renderer so it will render on top
			bmRender.layerIndex = 10;
			// set the scroll speed of this renderer
			bmRender.scrollSpeed.x = 100;

See example of this tutorial in action

Download the AS3 code from this article (rar)

Because the makeyourflashgame website consists of 5 subdomains www, blog, community, base, content, and the community part is a PHPBB3 forum that has its own logon system, I had a real headbreaker in getting this to work.

however….

To learn how easy it is to create PHP sessions and cookies that span multiple sub domains sent me into a state of euforia. It launched me straight into the right direction.

I use the PHPBB forum as leading for userid/passwords. I added some additional scripts to PHPBB and integrated my own code in some PHPBB base script files .

If someone authenticates using the header fields in any sub-domain, a little flash app is used to do a secure call (URLRequest) to a user validation script within the PHPBB domain. PHPBB will log in and cookies/sessions are set. I integrated my code into PHPBB so if someone loggs in the normal PHPBB way the right cookies and session data is set as well and the person is logged into the sub-domains as well.

I tested it on IE8, Firefox, Chrome and Safari (for windows)

now for some code ….
I am not gonna reveal to much of my own code but if someone wants to know how to create a cookie that spans multiple domains… with .makeyourflashgame.com as an example…

public function setCookie($cookie, $value)
{
   $expire = $this->si->addTime(52,"w");
   setcookie($cookie,$value,$expire,"/",".makeyourflashgame.com");
}

public function clearCookie($cookie)
{
   $expire = $this->si->addTime(-1,"w");
   setcookie($cookie,null,$expire,"/",".makeyourflashgame.com");
}

and to create cross subdomain session state (on the same machine) you need to set the session.cookie_domain before starting the session

// set session cookie domain to main domain so the session will be available in all subdomains
$pos = strpos($_SERVER['SERVER_NAME'],".");
$server_name = $_SERVER['SERVER_NAME'];
ini_set('session.cookie_domain',substr($server_name,$pos,strlen($server_name)-$pos));
// start domain wide session
session_start();

If this website should become a success and the subdomains have to be split up into different servers, I will have to use create some other way to manage session data across multiple servers. Will probably be putting this data into a MySQL Database and use a cross domain session id cookie to access this data.

Next is …. user workspace management system.

Download the AS3 code from this article (rar)

See example of this tutorial in action

The Flint particle engine is THE actionscript 3.0 open source particle engine available on the net. It lets you create all kinds of particle effects like smoke, fire, explosions , trails and more.

Because it would be very nice to have this available in the PushButton Engine I gave it a go….

The Flint system uses particle emitters that can be configured and that produce particles with specific behaviour that render to a specific render class. Flint has several render classes like BitmapRenderer, BitmapLineRenderer, DisplayObjectRenderer, PixelRenderer and VectorLineRenderer.

Because I am no Flint specialist I can not really tell the difference between all these renderers but the process of integration will probably be the same for all.

In this article I used the Flint example examples\examples2D\FireAndSmoke\PureAS3. In this example a Flint BitmapRenderer class is created with 2 emitters (fire/smoke).

The Flint BitmapRenderer is a subclassed Sprite class that holds a Bitmap and on this Bitmap particles are being rendered using this Bitmap’s BitmapData object. Because the PBE DisplayObjectRenderer is be able to render sprites , it shouldn’t be very problematic to wrap this in a PBE renderer class, .

! Important note. Both Flint and PBE have a BitmapRenderer and DisplayObjectRenderer class, so to combine these in your source files, be sure to use the full namespace when you refer to a specific class.

Step 1 – Creating a FlintBitmapRenderer Class for PBE

The first thing we will do is to create a base FlintBitmapRenderer class that we can subclass in the future to create specific particle render classes.

Because I want to do this the easy way, and the Flint BitmapRenderer class is essentially a Sprite, I will subclass the DisplayObjectRenderer class to get to a FlintBitmapRenderer class.

public class FlintBitmapRenderer extends DisplayObjectRenderer
{
	     ...
}

I need to store the Flint BitmapRenderer class and the Flint emitters.

  private   var _renderer:BitmapRenderer;
  protected var emitters:Array = new Array();

It would be nice to have an attribute to access the Flint sprite so we can set filters etc.

public function get sprite():Sprite
{
    return _renderer as Sprite;
}

Because the Flint BitmapRenderer class takes width and height as constructor parameters we get these from our constructor.

In the constructor an function addEmitters is called. The function addEmitters() must be overridden by the derrived class and will add the emitters to the emitters:Array

When the emitters are added to the Flint BitmapRenderer, we set the renderer as the displayObject of our PBE DisplayObjectRenderer.

public function FlintBitmapRenderer(width:int, height:int)
{
  super();

  // create the bitmap renderer object
  _renderer = new BitmapRenderer( new Rectangle( 0, 0, width, height ) );

  // add emitters to the emitters:Array
  addEmitters();

  for (var e:int=0; e < emitters.length; e++)
    _renderer.addEmitter( emitters[e] );

  this.displayObject = _renderer;
}

Step 2 - Creating a subclass for the FireAndSmoke

To create a PBE FireSmokeRenderer class we can subclass the FlintBitmapRenderer class and add the emitters.

We create a canvas 250 pixels wide and 300 pixels high using the function super(250,300); in our constructor.

The emitters : Fire() and Smoke() are taken from the Flint example, sources are in the code download from this article. The emitters are added to the emitters:Array in the overridden function addEmitters().

	public class FireSmokeRenderer extends FlintBitmapRenderer
	{
		private var smoke:Emitter2D;
		private var fire:Emitter2D;

		public function FireSmokeRenderer()
		{
			// create a 250 x 300 particle canvas
			super(250,300);
		}

		protected override function addEmitters():void
		{
			emitters.push(smoke = new Smoke());
			smoke.x = 125;
			smoke.y = 290;
			smoke.start();

			emitters.push(fire = new Fire());
			fire.x = 125;
			fire.y = 290;
			fire.start();
		}
	}

Step 3 - Adding the FireSmokeRenderer to the scene

To add this to a PBE scene we have to create an PBE entity, add a SimpleSpatial component and the FireSmokeRenderer component.

We set the layerIndex of the render component to 1 so the rotating green star sprite will always be behind the smoke.

	    private function createFlintEntity():void
	    {
	       // Allocate an entity for our animated sprite
	       var flint:IEntity = allocateEntity();
	       // Register the entity with PBE
	       flint.initialize("flint");

	       var spatial:SimpleSpatialComponent = new SimpleSpatialComponent();
	       spatial.position.x = -125;
	       spatial.position.y = -150;

	       flint.addComponent(spatial,"spatial");

	       flintRender = new FireSmokeRenderer();
	       flintRender.scene = PBE.getScene();
	       flintRender.layerIndex = 1;
	       flintRender.positionProperty = new PropertyReference("@spatial.position");
	       flint.addComponent(flintRender,"render");

	    }

To add a nice color changing glow effect I created an onFrame event handler on the PBE.mainStage that will rotate glow colors for the FireSmokeRenderer.sprite glow filter.

	    private var glowColor:uint = 0x000000;
	    private var nextColor:uint = 0x000000;
	    private var lastTimer:int = 0;
	    private function onFrame(event:Event):void
	    {
	    	var elapsed:int = getTimer()-lastTimer;
	    	if (elapsed>2000)
	    	{
	    		// change color each second
	    		glowColor = nextColor;

	    		nextColor =
	    		   (Math.random()*0xff)*0x010000+
	    		   (Math.random()*0xff)*0x000100+
	    		   (Math.random()*0xff)*0x000001;

	    		lastTimer = getTimer();
	    		elapsed = 0;
	    	}
	    	flintRender.sprite.filters = [new GlowFilter(Color.interpolateColor(glowColor,nextColor,elapsed/2000))];
	    }

Download the AS3 code from this article (rar)

See example of this tutorial in action

To run the sample you need to put the green star sprite into the folder where the compiled swf is located.

The changes in a nutshell

• The Scene2DComponent class has been replaced by the DisplayObjectScene class.
• The Scene2DBitmapDataComponent class has been replaced by the
  BitmapDataScene class.
• The basic rendering is done using the DisplayObjectRenderer class that has a scene property
• The DisplayObjectRenderer has multiple properties that can be used to influence the drawing without linking it to a spatial
  • position can be used to set the X/Y scene (screen) coordinates of the object (! not world coordinates)
  • scale can be used to resize the object ( 1 = 100% )
  • rotation can be used to rotate the object ( in degrees )
  • alpha can be used to set the object’s transparancy
  • layerIndex can be used to set the object’s layer
  • zIndex can be used to set the object’s depth within the layer
  • registrationPoint indicates the pivot point of this object. With the SpriteRenderer for example the center of the image is used as the registrationPoint so the sprite is centered upon its position and will rotate around its center.

• Each of those DisplayObjectRenderer properties has a corresponding
  {property}Property of the PropertyReference type
  we have a positionProperty, scaleProperty, rotationProperty, alphaProperty, layerIndexProperty, zIndexProperty and a registrationPointProperty.
  For example , a SimpleSpatialComponent can be used to move or rotate the object using the positionProperty and rotationProperty.
• If the positionProperty is used and the scene attribute of the renderer is set, the referenced coordinates are treated as worldcoordinates and will be transformed to the scene.
• There is a SpriteSheetRenderer class that can be used to draw spritesheet animations
• There is a SpriteRenderer class that can be used to draw a sprite on screen
• The static Global class has been renamed to PBE ( com.pblabs.engine.PBE ).
• There is a PBE.initializeScene function to quickly setup your scene.
• Find the scene you created with PBE.initializeScene using PBE.getScene()
• Find the spatialManager you created with PBE.initializeScene using PBE.getSpatialManager()

I have recoded the examples from the earlier posts.

Recoding : Create an animated spritesheet

Original post : Create an animated spritesheet

Download the 538+ code for AnimatedSprite01

Download the 538+ code and download the resources for AnimatedSprite02

see working sample

Recoding : The PBEngine Scene2D BitmapData Component

Original post : The PBEngine Scene2D BitmapData Component

Download the 538+ code and download the resources for AnimatedSprite03

see working sample

When the asteroids get really small, they just vanish. When asteroids move out of the main (circle) view they vanish as well.

In the working sample, when you have destroyed all asteroids, the level is cleared and one proceeds to the next level. The higher the level, the more asteroids at the beginning of the level. Sometimes you even get a nice additional ‘bonus’ weapon.
( pssssttt .. the + key to add one still works )

You can see the work in progress here

I created 3 different asteroid animations (143 frames) using blender.

Asteroid 1

Asteroid 2

Asteroid 3

( everyone may use these sprite sheets )

You can find the blenderfiles for these asteroids here

You can see the work in progress here

See this tutorial in action
Download the sources of this tutorial
Download the flash + assets of this tutorial

1. The BulkLoaderResourceProvider Class

The BulkLoaderResourceProvider is subclassed from ResourceProviderBase.

The constructor takes 2 parameters and will auto-register with the ResourceManager.
name:String - this is the name of the BulkLoader object that is created for this BulkLoaderResourceProvider.
numConnections:int = 12 - number of connections the BulkLoader object will use.

The BulkLoaderResourceProvider has a phase property that tells you the current loading phase. The loading phase always starts with 1 and increments after all resources of that phase have been loaded and as long as the phase has resources to be loaded.

The BulkLoaderResourceProvider has a function load(onLoaded:Function = null, onProgress:Function = null, onProvideResources:Function = null):void that can be used to start loading the resources.

• param onLoaded is a callback function that is called when all resources of the current phase have been loaded.
  function onLoaded(phase:int):void

• param onProgress is a callback function that is called when resources of the current phase are being loaded. Progress is a percentage (0-100)
  function onProgress(phase:int, progress:int):void

• param onProvideResources is a callback function that is called to get the bulkResource objects (Array) of the current loading phase. These bulkResource objects specify the resources that have to be loaded.
  function onLoaded(phase:int):void

  If this parameter is ommited the function provideResources():void is called to get the current phase bulkResource objects.

The Array of bulkResource objects that must be the result of the onProvideResources callback function or the overridden provideResources function is a normal Array that holds objects that has 2 attributes:

• url : String
  url/source of the resource to be loaded
• type : Resource
  type of Resource (ImageResource, XMLResource, MP3Resource etc )

   var bulkResourceObjects:Array = [
				      { url : "data/test1.xml", type : XMLResource },
				      { url : "data/test2.xml", type : XMLResource },
				      { url : "data/test3.xml", type : XMLResource }
				    ];

The BulkLoaderResourceProvider has a function provideResources():Array that can be overridden in a subclass that will be called when requesting the current phase bulkResource objects.

2. Subclassing the BulkLoaderResourceProvider class

If one wants to create a seperate class that will do multi-phase resource loading just subclass the BulkResourceProvider class and override the function provideResources():Array

Multi-phase loading can be usefull when one would like to first load some resources (xml/images/sounds) in a first pohase and display a kind of splash-screen while all other resources (the big bulk) will be loaded in phase 2.

	public class SampleResources extends BulkLoaderResourceProvider
	{
		public function SampleResources()
		{
			super("sampleLoader");
		}

		protected override function provideResources():Array
		{
			switch(phase)
			{
				case 1:
				  // return this hard-coded array of resource objects so it will
				  // be processed
				  return [
				      { url : "data/test1.xml", type : XMLResource },
				      { url : "data/test2.xml", type : XMLResource },
				      { url : "data/test3.xml", type : XMLResource }
				    ];
				break;

				case 2:
				   // create the array of resource objects programmaticly
				   var resObjects:Array = new Array();
				   for (var i:int=4; i<=6; i++)
				   {
				   	  // create a resource object
				   	  var resObject:Object = new Object();
				   	  resObject.url = "data/test"+i+".xml";
				   	  resObject.type = XMLResource;
				   	  // add the resource object to the array
				   	  resObjects.push(resObject);
				   }
				   // return the array so it will be processed
				   return resObjects;
				break;
			}
			return null;
		}
	}

As you can see in the code above, we just extend the BulkLoaderResourceProvider. We call the super("sampleLoader") constructor so that our provider is registered with the ResourceManager and the bulkloader is prepared.

We have overridden the function provideResources():Array and use that to provide the array's with bulkResource objects for each (2) phase.

We start the loading in our main application like this :

// create subclass
var sampleResources:SampleResources = new SampleResources();
// initiate the load
sampleResources.load(resourcesLoaded , resourcesProgress);

The resourceLoaded and resourcesProgress function are used to display some loading information on screen.

4. Using the BulkLoaderResourceProvider class to do a phased load

We can do a multi-phased resource loading using the BulkLoaderResourceProvider using the load function and providing a onProvideResources callback function.

We would start the loading like this:

var bulkResourceProvider:BulkLoaderResourceProvider = new BulkLoaderResourceProvider("sampleLoader");
// initiate the load - provide the provideData call back function
bulkResourceProvider.load(resourcesLoaded , resourcesProgress, provideResources);

Where the callback function provideResources(phase:int):Array would look like

		private function provideResources(phase:int):Array
		{
			switch(phase)
			{
				case 1:
				  // return this hard-coded array of resource objects so it will
				  // be processed
				  return [
				      { url : "data/test1.xml", type : XMLResource },
				      { url : "data/test2.xml", type : XMLResource },
				      { url : "data/test3.xml", type : XMLResource }
				    ];
				break;

				case 2:
				   // create the array of resource objects programmaticly
				   var resObjects:Array = new Array();
				   for (var i:int=4; i<=6; i++)
				   {
				   	  // create a resource object
				   	  var resObject:Object = new Object();
				   	  resObject.url = "data/test"+i+".xml";
				   	  resObject.type = XMLResource;
				   	  // add the resource object to the array
				   	  resObjects.push(resObject);
				   }
				   // return the array so it will be processed
				   return resObjects;
				break;
			}
			return null;
		}

The callback function provideResources(phase:int):Array and subclassed function provideResources():Array are almost the same except the phase parameter of the callback. This because phase is a known property of the subclass.

See this tutorial in action
Download the sources of this tutorial
Download the flash + assets of this tutorial

This post will explain about the Resource Provider Model and will show how we can create our own resource provider by implementing the IResourceProvider interface.

We will create a resource provider that will create resources ‘on the fly’ as they are requested by the ResourceManager.

We will also create a resource provider by subclassing the ResourceProviderBase and we will ‘fill’ that ResourceProvider with some dynamicly generated graphics.

See this tutorial in action
Download the sources of this tutorial

1. The Resource Provider Model

With the resource provider model implemented, the ResourceManager can have access to multiple resource providers. These resource providers are classes that implement the IResourceProvider interface and are registered with the ResourceManager using the function ResourceManager. registerResourceProvider(..).

When a resource is requested by the engine using the function ResourceManager. instance.load(..) , the ResourceManager checks with each provider if it can provide the requested resource. If a resource provider can provide the resource the ResourceManager will request that resource from the provider and caches this resource for future retrieval.

Before we had this Resource Provider Model, a Resource object had to ‘load’ itself when requested. With the Resource Provider Model implemented, the providers themselves are responsible for ‘loading’ or ‘creating’ the resources. This loading/creating can take place at the start of the game, as requested or any time really …

By implementing de IResourceProvider interface we can write our own classes that can provide resources to the ResourceManager. We could render these resources in memory, or load them from disk ourselves.

2. The Resource Provider Classes

You will find the resource provider classes in the library :

src\com\pblabs\engine\resource\provider

• IResourceProvider
  This interface has to be implemented by a class so it can act as a resource provider.

• ResourceProviderBase
  This class can be subclassed to create your own resource provider class

• BulkLoaderResourceProvider
  This class can be subclassed or used to load resources. It uses BulkLoader to load resourcs. Multi phase loading is supported.
  ( this will be explained in another blog post )

• EmbeddedResourceProvider
  This (singleton) class is used internally to provide the embedded resources that were specified using the ResourceBundle class or ResourceBinding class

• FallbackResourceProvider
  This (singleton) class is used internally to act as a resource loader fallback if no resource provider can provide a requested resource. It uses BulkLoader to load the requested resource

3. The IResourceProvider interface

    public interface IResourceProvider
    {
        /**
         * This method is called when the ResourceManager gets a load request
         * for a resource and will check all known ResourceProviders if it has
         * the specific resource
         */
        function isResourceKnown(uri:String, type:Class):Boolean;

        /**
         * This method is called when the ResourceManager requests a known
         * resource from a ResourceProvider
         */
        function getResource(uri:String, type:Class, forceReload:Boolean = false):Resource;
    }

The function isResourceKnown(uri:String, type:Class):Boolean will return a value of true if the resource provider has access to the requested resource with the specific uri and of that specific type.

The uri:String is usally the url or filename of the resource but could also be some internal format you choose yourself when you are generating your resources in memory.

The type:Class can by any of the Resource Class types like : ImageResource, XMLResource, SWFResource, MP3Resource and DataResource

The function getResource( uri : String, type : Class, forceReload : Boolean = false ) :Resource; will provide the requested resource.

4. Implementing the IResourceProvider interface

See this tutorial in action
Download the sources of this tutorial

In the code sample with this tutorial I implemented the IResourceProvider interface on my main application class so that the main application becomes a resource provider as well.

   [SWF(width="400", height="400", frameRate="32")]
   public class SampleDynamicResourceProvider extends Sprite implements IResourceProvider
   {
       ...
   }

I register this resource provider with the ResourceManager in the application class constructor , after I have initialized the PBEngine using the function Global.startup(this)

      public function SampleDynamicResourceProvider()
      {
         // Start up PBE
         Global.startup(this);
         // register our Dynamic Resource Provider
         ResourceManager.instance.registerResourceProvider(this);
         ...
      }

Our dynamic (render on the fly) resource provider will catch all resources of the ImageResource type that are requested using the format ‘@circle(width,height,color)’.

   	  public function isResourceKnown(uri:String, type:Class):Boolean
   	  {
   	  	// capture only @circle(..) resource source requests
		if (uri.toLowerCase().indexOf("@circle(")==0)
		  return true;

		// otherwise we dont know the requested resource
		return false;
   	  }

It will create the ImageResource by rendering a Bitmap with the specified width and height drawing a coloured circle on it. It will create this resource as it is requested (on the fly) by the ResourceManager.

   	  public function getResource(uri:String, type:Class, forceReload:Boolean = false):Resource
   	  {
   	  	// split the params of the '@circle(params)' source to an params:Array
	 	var sparams:String = uri.split("(")[1];
	 	sparams = sparams.split(")")[0];
	 	var params:Array = sparams.split(",");

	 	// convert params to the right types
	 	var width:int = int(params[0]);
	 	var height:int = int(params[1]);
	 	var color:uint = uint(params[2]);

	 	// create a Sprite object
	 	var sprite:Sprite = new Sprite();

	 	// draw a filled circle with a thick black line
	 	sprite.graphics.beginFill(color,1);
	 	sprite.graphics.lineStyle(2,0x000000);
	 	sprite.graphics.drawCircle(width/2,height/2,(width/2)-2);
	 	sprite.graphics.endFill();

	 	// draw this sprite onto a BitmapData object
	 	var bitmapData:BitmapData = new BitmapData(width,height,true,0);
	 	bitmapData.draw(sprite);

	 	// create an ImageResource
	 	var resource:ImageResource = new ImageResource();

	 	// set the image resource filename
	 	resource.filename = uri;

	 	// initialize this ImageResource using the BitmapData object
	 	resource.initialize(new Bitmap(bitmapData));

	 	// return the resource to the ResourceManager
	 	return resource;
   	  }

We can now create sprite entities that use SpriteRenderComponent where this @circle(..) will be provided as the loadFromImage property.

         createSprite(0,0,"@circle(75,75,0x00cc00)");
         createSprite(-20,-20,"@circle(35,35,0x0000cc)");
         createSprite(20,20,"@circle(50,50,0xcc0000)");

5. Subclassing the ResourceProviderBase

See this tutorial in action
Download the sources of this tutorial

The ResourceProviderBase is a nice class we can derrive from to render or load resources ‘on beforehand’ and store them so that the ResourceManager can access them using this resource provider.

When we create this Resource Provider class in our application’s constructor, the resources are created and stored within the resource provider.

      public function SampleDynamicResourceProvider()
      {
         // Start up PBE
         Global.startup(this);                                                

         // register our Dynamic Resource Provider
         ResourceManager.instance.registerResourceProvider(this);

         // create our SampleResourceProvider
         new SampleResourceProvider();
         ...
       }

If we subclass the ResourceProviderBase and call the super(); from within our constructor, the provider is auto-registered with the ResourceManager.

	public class SampleResourceProvider extends ResourceProviderBase
	{
		public function SampleResourceProvider()
		{
			// call the constructor of the ResourceProviderBase so this
			// provider is registered with the ResourceManager
			super();

			// create the resources of this resource provider
			createResources();
		}
                 ...
             }

Using the function addResource(src:String, type:Class, resource:Resource) we can add our own resources to this resource provider and the ResourceManager has access to them.

		/**
		 * This method will create a resource and add it to this
		 * ResourceProvider
		 */
		private function createResource(src:String ,color:uint):void
		{
		 	// create a Sprite object
		 	var sprite:Sprite = new Sprite();

		 	// draw a filled circle with a thick black line
		 	sprite.graphics.beginFill(color,1);
		 	sprite.graphics.lineStyle(2,0x000000);
		 	sprite.graphics.drawRect(0,0,150,150);
		 	sprite.graphics.endFill();

		 	// draw this sprite onto a BitmapData object
		 	var bitmapData:BitmapData = new BitmapData(150,150,true,0);
		 	bitmapData.draw(sprite);

		 	// create an ImageResource
		 	var resource:ImageResource = new ImageResource();

		 	// set the image resource filename
		 	resource.filename = src;

		 	// initialize this ImageResource using the BitmapData object
		 	resource.initialize(new Bitmap(bitmapData));

		 	// add the resource to this ResourceProvider
		 	addResource(src, ImageResource, resource);		 		 			 	 		 	 	

		}

		/**
		 * This method will create all resources this
		 * resource provider 'knows'
		 */
		private function createResources():void
		{
			createResource("yellow",0xffff00);
			createResource("blue",0x0000ff);
			createResource("white",0xffffff);
			createResource("green",0x00ff00);
			createResource("red",0xff0000);
		}		

	}

We can request the colored rectangles ‘yellow, blue, white, green and red’ using this resource provider.

         createSprite(-100,-100,"blue");
         createSprite(100,100,"red");
         createSprite(100,-100,"green");
         createSprite(-100,100,"yellow");
         createSprite(0,0,"white");

See this tutorial in action
Download the sources of this tutorial