Result

Requirements

Adobe Flex v3.02

Away3D v3.3.3 source code

Pre-Requisites

You should read the previous articles in this series.

Adding collisions

Last time we saw how to add a player and some enemies to the level. While they could both move around they did not interact with each other as you would expect; namely by crashing. This is because the neither the player nor the enemies had any idea where the other was. In order for the ships to start colliding we need a way to define the space that they are currently taking up. This is done in the MeshObject class.

MeshObject.as

package
{
	import away3d.core.base.Object3D;

	internal class MeshObject extends BaseObject
	{
		public var model:Object3D = null;
		public var collisionName:String = CollisionIdentifiers.NONE;

		public function MeshObject()
		{
			super();
		}

		public function startupMeshObject(engineManager:EngineManager, model:Object3D):MeshObject
		{
			super.startupBaseObject(engineManager);
			this.model = model;
			this.engineManager.view.scene.addChild(model);
			return this;
		}

		public override function shutdown():void
		{
			if (model != null)
				engineManager.view.scene.removeChild(model);
			model = null;
			super.shutdown();
		}

		public function intersects(other:MeshObject):Boolean
		{
			// Use up to 6 separating planes
			if ( this.model.maxX + this.model.x < other.model.minX + other.model.x )
				return false;
			if ( this.model.maxY + this.model.y < other.model.minY + other.model.y )
 				return false;
			if ( this.model.maxZ + this.model.z < other.model.minZ + other.model.z )
				return false;

   			if ( this.model.minX + this.model.x > other.model.maxX + other.model.x )
   				return false;
   			if ( this.model.minY + this.model.y > other.model.maxY + other.model.y )
   				return false;
   			if ( this.model.minZ + this.model.z > other.model.maxZ + other.model.z)
				return false;

			// otherwise, must be intersecting
			return true;
		}
	}
}

We have added a property called collisionName, which identifies the type of object this is to the collision system (which will be implemented in the EngineManager class later on). This will allow us to specify which objects should collide - like players with enemies, enemies with the players bullets, the player with enemy bullets etc.

There is also a new function called intersects, which is used to find out of two MeshObjects are currently colliding. It does this by using the bounding box defined by the minX, maxX, minY, maxY, minZ and maxZ properties of the Away3D Object3D class. If the two objects are intersecting (or colliding) true is returned, otherwise false is returned.

CollisionIdentifiers.as

package
{
	public class CollisionIdentifiers
	{
		public static const NONE:String = "None";
		public static const PLAYER:String = "Player";
		public static const PLAYERWEAPON:String = "PlayerWeapon";
		public static const ENEMYWEAPON:String = "EnemyWeapon";
		public static const ENEMY:String = "Enemy";
		public static const POWERUP:String = "Powerup";
	}
}

Even though the collisionName property of the MeshObject is a string, it is handy to define these values as constants so the Flex compiler can pick up any spelling mistakes, instead of having to track down a misspelled collisionName yourself.

EngineManager.as

package
{
	import away3d.cameras.Camera3D;
	import away3d.containers.View3D;
	import away3d.core.math.Number3D;
	import away3d.core.render.Renderer;
	import away3d.events.*;

	import flash.display.*;
	import flash.events.*;
	import flash.utils.*;

	import mx.collections.*;
	import mx.core.*;

	public class EngineManager extends UIComponent
	{
		public static const version:String = "1.0.0";
		protected static const MEASURED_MIN_WIDTH:int = 25;
		protected static const MEASURED_MIN_HEIGHT:int = 25;
		protected static const MEASURED_WIDTH:int = 100;
		protected static const MEASURED_HEIGHT:int = 100;

		// Away3D view
		internal var view:View3D = null;
		// Away3D camera
		internal var cam:Camera3D = null;
		// a collection of the BaseObjects
		protected var baseObjects:ArrayCollection = new ArrayCollection();
		// a collection where new BaseObjects are placed, to avoid adding items
		// to baseObjects while in the baseObjects collection while it is in a loop
		protected var newBaseObjects:ArrayCollection = new ArrayCollection();
		// a collection where removed BaseObjects are placed, to avoid removing items
		// to baseObjects while in the baseObjects collection while it is in a loop
		protected var removedBaseObjects:ArrayCollection = new ArrayCollection();
		// the last frame time
		protected var lastFrame:Date;
		// the application manager
		protected var applicationManager:ApplicationManager = null;
		// true if we need to shutdown the engine during the next frame and drop back to the main menu
		protected var myNextStateChange:String = "";
		// collision mappings
		protected var collisionMap:Dictionary = new Dictionary();

		internal function get MyApplicationManager():ApplicationManager
		{
			return applicationManager;
		}

		public function EngineManager()
		{
			super();
			addEventListener(Event.REMOVED_FROM_STAGE, this.shutdown);
			addEventListener(Event.ADDED_TO_STAGE, this.initializeEngine);
		}

		override protected function measure():void
		{
			super.measure();

			// set a bunch of predefined sizes
			this.measuredMinWidth = MEASURED_MIN_WIDTH;
			this.measuredMinHeight = MEASURED_MIN_HEIGHT;
			this.measuredHeight = MEASURED_HEIGHT;
			this.measuredWidth = MEASURED_WIDTH;
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);

			if (view != null)
			{
				// place the viewport in the middle of the control
				if(this.width / 2 != this.view.x)
					this.view.x = this.width / 2;
				if(this.height / 2 != this.view.y)
					this.view.y = this.height / 2;
			}
		}

		public function set nextStateChange(value:String):void
		{
			myNextStateChange = value;
		}

		protected function initializeEngine(event:Event):void
		{
			if (!view)
			{
				myNextStateChange = "";

				cam = new Camera3D({x:0, y:0, z:-100, lookat:new Number3D(0, 0, 0)});

				view = new View3D({x:stage.width/2, y:stage.height/2, camera:cam});
				view.renderer = Renderer.BASIC;
				view.mouseEnabled = true;
				addChild(view);

				addEventListener(Event.ENTER_FRAME, enterFrame);
				addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);
				addEventListener(MouseEvent.MOUSE_UP, this.mouseUp);
				addEventListener(MouseEvent.MOUSE_MOVE, this.mouseMove);
				addEventListener(MouseEvent.CLICK, this.click);

				// set the initial frame time
				lastFrame = new Date();

				// start the application manager
				applicationManager = new ApplicationManager().startupApplicationManager(this);
			}
		}

		protected function shutdown(event:Event):void
		{
			if (view)
			{
				applicationManager.shutdown();

				shutdownAll();

				removeChild(view);

				removeEventListener(Event.ENTER_FRAME, enterFrame);
				removeEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);
				removeEventListener(MouseEvent.MOUSE_UP, this.mouseUp);
				removeEventListener(MouseEvent.MOUSE_MOVE, this.mouseMove);
				removeEventListener(MouseEvent.CLICK, this.click);

				applicationManager = null;
				view = null;
				cam = null;
				myNextStateChange = "";
			}
		}

		protected function enterFrame(event:Event):void
		{
			if (view != null)
			{
				// Calculate the time since the last frame
				var thisFrame:Date = new Date();
				var seconds:Number = (thisFrame.getTime() - lastFrame.getTime())/1000.0;
		    	lastFrame = thisFrame;

		    	// sync the baseObjects collection with any BaseObjects created or removed during the
		    	// render loop
		    	removeDeletedBaseObjects();
		    	insertNewBaseObjects();

		    	// allow each BaseObject to update itself
		    	for each (var baseObject:BaseObject in baseObjects)
		    		if (baseObject.inuse)
		    			baseObject.enterFrame(seconds);		  

		    	checkCollisions();  			

		    	// render the 3D scene
		    	view.render();
	  		}

	  		// set the currentState to MainMenu, which drops us back to the menu
	  		if (myNextStateChange != "")
	  		{
	  			Application.application.currentState = myNextStateChange;
	  			myNextStateChange = "";
	  		}
		}

		public function addBaseObject(baseObject:BaseObject):void
		{
			newBaseObjects.addItem(baseObject);
		}

		public function removeBaseObject(baseObject:BaseObject):void
		{
			removedBaseObjects.addItem(baseObject);
		}

		protected function insertNewBaseObjects():void
		{
			for each (var baseObject:BaseObject in newBaseObjects)
				baseObjects.addItem(baseObject);

			newBaseObjects.removeAll();
		}

		protected function removeDeletedBaseObjects():void
		{
			for each (var removedObject:BaseObject in removedBaseObjects)
			{
				var i:int = 0;
				for (i = 0; i < baseObjects.length; ++i)
				{
					if (baseObjects.getItemAt(i) == removedObject)
					{
						baseObjects.removeItemAt(i);
						break;
					}
				}

			}

			removedBaseObjects.removeAll();
		}

		public function shutdownAll():void
		{
			// don't dispose objects twice
			for each (var baseObject:BaseObject in baseObjects)
			{
				var found:Boolean = false;
				for each (var removedObject:BaseObject in removedBaseObjects)
				{
					if (removedObject == baseObject)
					{
						found = true;
						break;
					}
				}

				if (!found)
					baseObject.shutdown();
			}

			removeDeletedBaseObjects();
		}

		public function click(event:MouseEvent):void
		{
			for each (var gameObject:BaseObject in baseObjects)
				if (gameObject.inuse)
					gameObject.click(event);
		}

		public function mouseDown(event:MouseEvent):void
		{
			for each (var gameObject:BaseObject in baseObjects)
				if (gameObject.inuse)
					gameObject.mouseDown(event);
		}

		public function mouseUp(event:MouseEvent):void
		{
			for each (var gameObject:BaseObject in baseObjects)
				if (gameObject.inuse)
					gameObject.mouseUp(event);
		}

		public function mouseMove(event:MouseEvent):void
		{
			for each (var gameObject:BaseObject in baseObjects)
				if (gameObject.inuse)
					gameObject.mouseMove(event);
		}

		public function addCollidingPair(collider1:String, collider2:String):void
		{
			if (collisionMap[collider1] == null)
				collisionMap[collider1] = new Array();

			if (collisionMap[collider2] == null)
				collisionMap[collider2] = new Array();

			if ((collisionMap[collider1] as Array).indexOf(collider2) == -1)
				collisionMap[collider1].push(collider2);
			if ((collisionMap[collider2] as Array).indexOf(collider1) == -1)
				collisionMap[collider2].push(collider1);
		}

		protected function checkCollisions():void
		{
	    	for (var i:int = 0; i < baseObjects.length; ++i)
			{
				var gameObjectI:MeshObject = baseObjects.getItemAt(i) as MeshObject;

				if (gameObjectI)
				{
					for (var j:int = i + 1; j < baseObjects.length; ++j)
					{
						var gameObjectJ:MeshObject = baseObjects.getItemAt(j) as MeshObject;

						if (gameObjectJ)
						{
							// early out for non-colliders
							var collisionNameNotNothing:Boolean = gameObjectI.collisionName != CollisionIdentifiers.NONE;
							// objects can still exist in the baseObjects collection after being disposed, so check
							var bothInUse:Boolean = gameObjectI.inuse && gameObjectJ.inuse;
							// make sure we have an entry in the collisionMap
							var collisionMapEntryExists:Boolean = collisionMap[gameObjectI.collisionName] != null;
							// make sure the two objects are set to collide
							var testForCollision:Boolean = collisionMapEntryExists && collisionMap[gameObjectI.collisionName].indexOf(gameObjectJ.collisionName) != -1

							if ( collisionNameNotNothing &&
								 bothInUse &&
								 collisionMapEntryExists &&
								 testForCollision)
							{
								if (gameObjectI.intersects(gameObjectJ))
								{
									gameObjectI.collision(gameObjectJ);
									gameObjectJ.collision(gameObjectI);
								}
							}
						}
					}
				}
			}
		}
	}
}

The actual detection of the collisions is done by the EngineManager.

The addCollidingPair function maps the collisionName properties of the MeshObject against each other. This mapping tells the EngineManager that these two types of MeshObjects should be tested for collisions against each other.

The checkCollisions function is where the collisions are actually determined and any colliding MeshObjects notified via their collision function.

for (var i:int = 0; i < baseObjects.length; ++i)
{
	var gameObjectI:MeshObject = baseObjects.getItemAt(i) as MeshObject;

	if (gameObjectI)
	{
		for (var j:int = i + 1; j < baseObjects.length; ++j)
		{
			var gameObjectJ:MeshObject = baseObjects.getItemAt(j) as MeshObject;

			if (gameObjectJ)
			{
			...
			}
		}
	}
}

The baseObjects collection is looped through twice in a way that ensures that every MeshObject is tested against every other MeshObject once.

// early out for non-colliders
var collisionNameNotNothing:Boolean = gameObjectI.collisionName != CollisionIdentifiers.NONE;
// objects can still exist in the baseObjects collection after being disposed, so check
var bothInUse:Boolean = gameObjectI.inuse && gameObjectJ.inuse;
// make sure we have an entry in the collisionMap
var collisionMapEntryExists:Boolean = collisionMap[gameObjectI.collisionName] != null;
// make sure the two objects are set to collide
var testForCollision:Boolean = collisionMapEntryExists && collisionMap[gameObjectI.collisionName].indexOf(gameObjectJ.collisionName) != -1

Next we need to make sure that the two MeshObjects we are looking at should be able to collide with each other. This is where the mappings set up in the addCollidingPair function are used.

if ( collisionNameNotNothing &&
	 bothInUse &&
	 collisionMapEntryExists &&
	 testForCollision)
{
	if (gameObjectI.intersects(gameObjectJ))
	{
		gameObjectI.collision(gameObjectJ);
		gameObjectJ.collision(gameObjectI);
	}
}

Assuming all the necessary conditions have been met, the intersects method is used to determine if the two MeshObjects are actually colliding. If so they are both notified through their collision function.

ApplicationManager.as

package
{
	import away3d.primitives.Cube;

	import mx.core.Application;

	public class ApplicationManager extends BaseObject
	{
		protected static const TIME_BETWEEN_BUILDINGS:Number = 2;
		protected static const TIME_BETWEEN_ENEMIES:Number = 1;
		protected static const TIME_TO_LEVEL_END:Number = 1;
		protected var timeToEndGame:Number = TIME_TO_LEVEL_END;
		protected var timeToNextBuilding:Number = 0;
		protected var timeToNextEnemy:Number = TIME_BETWEEN_ENEMIES;
		protected var levelHasEnded:Boolean = false;

		public function ApplicationManager()
		{
			super();
		}

		public function startupApplicationManager(engineManager:EngineManager):ApplicationManager
		{
			this.startupBaseObject(engineManager);
			this.engineManager.addCollidingPair(CollisionIdentifiers.ENEMY, CollisionIdentifiers.PLAYER);
			return this;
		}

		public function startLevel1():void
		{
			timeToNextBuilding = 0;

			new BackgroundPlane().startupBackgroundPlane(engineManager);
			new Player().startupPlayer(engineManager);

			// prepopulate the city
			for (var i:int = 0; i < 5; ++i)
			{
				var building:BackgroundBuilding = new BackgroundBuilding();
				building.startupBackgroundBuilding(engineManager);
				building.enterFrame((i + 1) * 2);
			}
		}

		public function levelEnded():void
		{
			levelHasEnded = true;
		}

		public override function shutdown():void
		{
			super.shutdown();
		}

		public override function enterFrame(dt:Number):void
		{
			timeToNextBuilding -= dt;
			if (timeToNextBuilding <= 0)
			{
				timeToNextBuilding = TIME_BETWEEN_BUILDINGS;
				new BackgroundBuilding().startupBackgroundBuilding(engineManager);
			}

			timeToNextEnemy -= dt;
			if (timeToNextEnemy <= 0)
			{
				timeToNextEnemy = TIME_BETWEEN_ENEMIES;
				new Enemy().startupBasicEnemy(engineManager);
			}

			if (levelHasEnded)
			{
				timeToEndGame -= dt;
				if (timeToEndGame <= 0)
				{
					engineManager.nextStateChange = "MainMenu";
				}
			}
		}
	}
}

The ApplicationManager is used to specify which MeshObjects should collide with which.

this.engineManager.addCollidingPair(CollisionIdentifiers.ENEMY, CollisionIdentifiers.PLAYER);

Here, in the startupApplicationmanager function, a call to the EngineManagers addCollidingPair function is made specifying that enemies and players should collide with each other.

if (levelHasEnded)
{
	timeToEndGame -= dt;
	if (timeToEndGame <= 0)
	{
		engineManager.nextStateChange = "MainMenu";
	}
}

We also want to be able to drop back to the main menu once the player has died, but we don’t want this to happen instantly. So instead we define a new proeprty called levelHasEnded, which will be set to true by the player dies via the levelEnded function. When the player has signalled that the level should end the timeToEndGame property starts counting down, and after a period of time the EngineManagers nextStateChange property is set the ‘MainMenu’ to indicate that on the next frame the state should be changed.

Enemy.as

package
{
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Plane;

	public class Enemy extends MeshObject
	{
		protected static const ENEMY_X_LIMIT:Number = 70;
		protected static const ENEMY_Y_LIMIT:Number = 60;
		protected static const ENEMY_X_START:Number = 65;
		protected static const ENEMY_Y_START:Number = 55;
		protected static const ENEMY_WIDTH:Number = 16;
		protected static const ENEMY_HEIGHT:Number = 5;
		protected static const BASIC_ENEMY_SPEED:Number = 50;
		protected var logic:Function = null;

		public function Enemy()
		{
			super();
		}

		public override function shutdown():void
		{
			super.shutdown();
			this.logic = null;
		}

		protected function startupEnemy(engineManager:EngineManager, material:BitmapMaterial):Enemy
		{
			var plane:Plane = new Plane(
				{material:material,
				width:ENEMY_WIDTH,
				height:ENEMY_HEIGHT,
				yUp:false});
			super.startupMeshObject(engineManager, plane);

			this.collisionName = CollisionIdentifiers.ENEMY;

			return this;
		}

		public function startupBasicEnemy(engineManager:EngineManager):Enemy
		{
			this.startupEnemy(engineManager, ResourceManager.Enemy_Tex);
			this.logic = basicEnemyLogic;
			this.model.x = ENEMY_X_LIMIT;
			this.model.y = MathUtils.randRange(-ENEMY_Y_START, ENEMY_Y_START);
			return this;
		}

		public override function enterFrame(dt:Number):void
		{
			if (logic != null)
				logic(dt);

			if (this.model.x > ENEMY_X_LIMIT ||
				this.model.x < -ENEMY_X_LIMIT ||
				this.model.y > ENEMY_Y_LIMIT ||
				this.model.y < -ENEMY_Y_LIMIT)
				this.shutdown();
		}

		protected function basicEnemyLogic(dt:Number):void
		{
			this.model.x -= BASIC_ENEMY_SPEED * dt;
		}

		public override function collision(other:BaseObject):void
		{
			this.shutdown();
		}
	}
}

We only need to make two changes to the Enemy class.

this.collisionName = CollisionIdentifiers.ENEMY;

The first is to specify the collision name, which identifies this MeshObject as an enemy to the collision system.

public override function collision(other:BaseObject):void
{
	this.shutdown();
}

The second is to override the collision function, and call the shutdown function when a collision has been detected.

Player.as

package
{
	import away3d.core.math.Number3D;
	import away3d.events.MouseEvent3D;
	import away3d.primitives.*;

	import flash.events.*;
	import flash.geom.*;
	import flash.media.*;

	import mx.core.*;

	public class Player extends MeshObject
	{
		protected static const PLAYER_X_LIMIT:Number = 52;
		protected static const PLAYER_Y_LIMIT:Number = 38;
		protected static const PLAYER_WIDTH:Number = 16;
		protected static const PLAYER_HEIGHT:Number = 5;
		protected static const COLLISION_PLANE_WIDTH:Number = 150;
		protected static const COLLISION_PLANE_HEIGHT:Number = 100;
		protected var collisionPlane:MeshObject = null;

		public function Player()
		{
			super();
		}

		public function startupPlayer(engineManager:EngineManager):Player
		{
			var plane:Plane = new Plane(
				{material:ResourceManager.Player_Tex,
				width:PLAYER_WIDTH,
				height:PLAYER_HEIGHT,
				yUp:false});
			super.startupMeshObject(engineManager, plane);

			var collisionPlaneMesh:Plane = new Plane(
				{material:new NullMaterial(),
				width:COLLISION_PLANE_WIDTH,
				height:COLLISION_PLANE_HEIGHT,
				yUp:false});
			collisionPlane = new MeshObject().startupMeshObject(engineManager, collisionPlaneMesh);
			collisionPlaneMesh.addEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);

			this.collisionName = CollisionIdentifiers.PLAYER;

			return this;
		}

		override public function shutdown():void
		{
			collisionPlane.model.removeEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);
			collisionPlane.shutdown();
			collisionPlane = null;
			super.shutdown();
		}

		override public function enterFrame(dt:Number):void
		{
			super.enterFrame(dt);

			if (this.model.x > PLAYER_X_LIMIT)
				this.model.x = PLAYER_X_LIMIT;
			if (this.model.x < -PLAYER_X_LIMIT)
				this.model.x = -PLAYER_X_LIMIT;

			if (this.model.y > PLAYER_Y_LIMIT)
				this.model.y = PLAYER_Y_LIMIT;
			if (this.model.y < -PLAYER_Y_LIMIT)
				this.model.y = -PLAYER_Y_LIMIT;
		}

		public function mouseMove3D(event:MouseEvent3D):void
		{
			if (this.model)
			{
				this.model.x = event.sceneX;
				this.model.y = event.sceneY;
			}
		}

		public override function collision(other:BaseObject):void
		{
			engineManager.MyApplicationManager.levelEnded();
			this.shutdown();
		}
	}
}

The same two changes are made to the Player class. However, before the shutdown function is called (in the collision function), we first notify the Applicationmanager that the current level should end by calling the levelEnded function.

Collisions.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute"
 xmlns:ns1="*"
 width="600"
 height="400"
 currentState="MainMenu"
 frameRate="100"
 backgroundGradientAlphas="[1.0, 1.0]"
 backgroundGradientColors="[#040522, #162654]">

	<mx:states>
		<mx:State name="MainMenu">
			<mx:AddChild position="lastChild">
				<mx:Button x="10" y="368" label="Start" id="btnStart" click="{Application.application.currentState = 'Game';}"/>
			</mx:AddChild>
			<mx:AddChild position="lastChild">
				<mx:Image x="281" y="10" source="@Embed(source='../media/frontscreen.png')"/>
			</mx:AddChild>
			<mx:AddChild position="lastChild">
				<mx:Image x="465" y="265" source="@Embed(source='../media/thetechlabs_logosmall.png')"/>
			</mx:AddChild>
			<mx:AddChild position="lastChild">
				<mx:Text x="10" y="10" text="Away3D Shoot'em'Up tutorial" color="#FFFFFF" fontSize="16"/>
			</mx:AddChild>
			<mx:AddChild position="lastChild">
				<mx:Text x="10" y="42" text="Brought to you by The Tech Labs" color="#FFFFFF" fontSize="16"/>
			</mx:AddChild>
			<mx:AddChild position="lastChild">
				<mx:Text x="10" y="74" text="Written by Matthew Casperson" color="#FFFFFF" fontSize="16"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="Game">
			<mx:enterState>
				<![CDATA[
					engineManager.MyApplicationManager.startLevel1();
					Mouse.hide();
				]]>
			</mx:enterState>
			<mx:exitState>
				<![CDATA[
					Mouse.show();
				]]>
			</mx:exitState>
			<mx:AddChild>
				<ns1:EngineManager x="0" y="0" width="100%" height="100%" id="engineManager"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
</mx:Application>

One final change has to be made to the MXML file. When the level is started (because the Game state has been activated) we want to hide the mouse cursor by calling Mouse.hide(). Then when the main menu is shown (because the MainMenu state has been activated) we want to show the mouse cursor by calling Mouse.show().

With collision detection enabled we can detected when the player and an enemy collide, remove both from the game, and end the level (after a short delay). We can also use the same collision detection routines to implement weapons, which we will do in the next article.

Related posts:

• Create a 3D Sliding Puzzle Game in Flex with ActionScript 3.0 and Away3D
• Alternativa 3D Series - Tutorial 5 - Creating Interactivity
• Alternativa 3D Series - Tutorial 1 - Getting Started
• Simulating PicLens with Flex and Away3D – Part 3
• Alternativa 3D Series - Tutorial 3 - Loading Model

Requirements

To go through the code examples presented here, you will, of course, need the BetweenAS3 library added to your class path. The library can be downloaded from the .svn depository here. You’ll notice that there are two branches to the library - one for Flash Player 9 and one for Flash Player 10. Although the syntax for the two branches is the same, I’ve used the Flash Player 10 branch for the examples here. I’ve also written the examples here as a pure Actionscript project, so something that can compile actionscript projects, such as FlashBuilder/Flexbuilder or FlashDevelop plus the Flex SDK is also required. Flash CS4 can also be used if each example class is used as a .fla document class. The included download contains all actionscript files plus the FlashDevelopment project file.

Pre-Requisites

As the name BetweenAS3 implies, all code presented will be in Actionscript 3. While it would be helpful (and is assumed) that the reader has at least a basic working knowledge of Actionscript 3, this isn’t 100% necessary.

Basic Syntax and Functionality

Primarily, BetweenAS3 relies on several static method calls. Each of these static methods will return an instance of an ITween interface. Because of this, BetweenAS3 offers a great deal of flexibility as each of these static methods may nest any number of additional methods thereby building extremely complex tweens from relatively simple syntax.

In its most simple form, a basic BetweenAS3 tween may look like this:

var tween:ITween = BetweenAS3.tween(targetObject, toObject, fromObject, time, easingMethod);

Once created, the tween can be started using the play() method, stopped using the stop() method or controlled with the Movieclip like methods gotoAndPlay(time) or gotoAndStop(time). You can determine the length of the tween in seconds with the duration property, the current time of the tween with the position property and can determine whether or not the tween is playing at any given moment with the aptly named isPlaying property.

Like all good tweening engines, with BetweenAS3 you are able to trigger actionscript methods when the tween starts, stops, updates or completes. Unlike most tweening engines, though, BetweenAS3 offers two ways of doing this. You can either use the standard AS3 event model and listen for a BetweenEvent, or you can use a more AS2 style approach and add callback methods to the tween instance. For example, say you wanted to call the method named tweenDone when a tween completes. You could say:

tween.addEventListener(BetweenEvent.COMPLETE, tweenDone);

private function tweenDone(event:BetweenEvent):void {
	// the tween is complete
}

Or, instead, you could say:

tween.onComplete = tweenDone;

private function tweenDone():void {
	// the tween is complete
}

Using this latter approach, it is also possible to pass parameters to the callback method by passing an array of parameters to the tween instance’s onCompleteParams property like so:

tween.onComplete = tweenDone;
tween.onCompleteParams = ["hello", 3];

private function tweenDone(param1:String, param2:int):void {
	trace(param1, param2);
}

Now that we are armed with some basic knowledge of how BetweenAS3 operates, let’s take a look at some specific examples of this powerful tweening engine in action.

The Basic Tween

Before diving straight into examples, let’s first create a couple simple class files that we can reuse throughout this tutorial. The first thing we’ll want is a target to tween. For this we’ll simply extend the Sprite object and use its graphics property to draw a small grey square. This then is our TweenTarget class:

package  {

	import flash.display.Sprite;

	/**
	 * Simple DisplayObject to demonstrate BetweenAS3
	 */
	public class TweenTarget extends Sprite {

		public function TweenTarget() {
			graphics.beginFill(0x999999);
			graphics.drawRect(0, 0, 25, 25);
			graphics.endFill();
		}
	}
}

The second bit of code we’ll want to get out of the way is a template that we can use with each example. This class will just create an of a textfield (that simply says to click to start or stop the tween), and a tween instance class property. It will also contain a toggleTween method that, using the methods mentioned above, will allow our ITween instance to start or stop by clicking the stage. Once our template is made, the only things that will change from example to example are the name of the class (unless you’d like to overwrite each example), the initTween method which creates our class property tween instance, perhaps the easing method imports, and possibly a few other small details. The general template, then will look like this:

package  {

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.Expo;
	import org.libspark.betweenas3.tweens.ITween;

	[SWF(width='540', height='200', backgroundColor='#000000', frameRate='60')]
	public class TweenExample extends Sprite {

		private var _tween:ITween;
		private var _tf:TextField;

		public function TweenExample() {
			addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(event:Event):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);

			initText();
			initTween();

			stage.addEventListener(MouseEvent.CLICK, toggleTween);
		}

		private function initText():void {
			var fmt:TextFormat = new TextFormat("_sans", 12, 0xFFFFFF);
			_tf = new TextField();
			_tf.selectable = false;
			_tf.mouseEnabled = false;
			_tf.autoSize = TextFieldAutoSize.LEFT;
			_tf.defaultTextFormat = fmt;
			_tf.text = "Click to start/stop tween.";
			_tf.x = Math.round(stage.stageWidth * .5 - _tf.width * .5);
			_tf.y = Math.round(stage.stageHeight - _tf.height - 10);
			addChild(_tf);
		}

		private function initTween():void {
			// will change from example to example
		}

		private function toggleTween(event:MouseEvent):void {
			// if the tween is playing, stop it
			if (_tween.isPlaying) {
				_tween.stop();
			} else {
				// otherwise if the tween is at the end, start it over
				if (_tween.position == _tween.duration) {
					_tween.gotoAndPlay(0);
				// if it's not at the end, simply play the tween
				} else {
					_tween.play();
				}
			}
		}
	}
}

Now that we are armed with these basic items, let’s roll up our sleeves and dig into a concrete example of BetweenAS3 in action. As mentioned earlier, the syntax for creating a basic tween looks like this:

_tween = BetweenAS3.tween(target, toObject, fromObject, time, easing);

In more detail, the target is the obejct whose property or properties we wish to tween, the toObject is an object containing properties and their corresponding ending values. Likewise, the fromObject is an object containing the same properties as the toObject, but with their beginning value. Time is the duration of the tween in seconds, and easing is an IEasing interface instance which we can get from the org.libspark.betweenas3.easing package. In our initTween method, then, let’s create a TweenTarget instance, add it to the display list and use it as the target of our tween instance. So initTween becomes:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 20;
	targ.y = 60;
	addChild(targ);
	_tween = BetweenAS3.tween(targ, { x:500 }, null, 2.0, Expo.easeOut);
}

Notice that we passed a null in place of a fromObject. By doing so, we are telling BetweenAS3 to use the tween target’s current properties. We already created the toggleTween method which will play the tween when you click the stage, so go ahead and compile the .swf. You should get something like the example below:

Delaying a Tween

As mentioned, complex tweens can be built with BetweenAS3 by nesting various static methods of the class. So far we have looked at only one of those methods, tween. Let’s look at another, now, delay. Like the tween method, delay returns an instance of an ITween interface. The delay method syntax looks like this:

var tween:ITween = BetweenAS3.delay(ITweenToDelay, delayTime, postDelayTime);

Here, the ITweenToDelay is a tween instance we wish to delay, the delay time is how many seconds the tween should be delayed before the tween starts and the postDelayTime is how many seconds the tween should be delayed before the next tween starts. The postDelayTime defaults to 0.0 and, in this example, we will leave it so.

So, let’s go back to our TweenExample template and change the initTween method to look like this:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 20;
	targ.y = 60;
	addChild(targ);
	var t:ITween = BetweenAS3.tween(targ, { x:500 }, null, 2.0, Expo.easeOut);
	_tween = BetweenAS3.delay(t, 1.0);
}

Now, when we compile our example, we see that when we click on the stage, there is a one second delay before the tween target tweens its way across the stage like below.

Parallel and Serial Tweens

The next static methods of the BetweenAS3 class we’ll consider are parallel and serial. The parallel method lets you run any number of tween instances at the same time. Similarly, the serial method allows you to run any number of tween instances in a row (one after another). Syntactically, both methods are identical, you simply pass any number of ITween instances as parameters.

For our parallel example, let’s change our initTween method to look like this:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 25;
	addChild(targ1);

	var targ2:TweenTarget = new TweenTarget();
	targ2.x = 20;
	targ2.y = 60;
	addChild(targ2);

	var t1:ITween = BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Expo.easeOut);
	var t2:ITween = BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Expo.easeOut);
	_tween = BetweenAS3.parallel(t1, t2);
}

Once compiled, that will look like this:

And for our serial example, try this for the initTween method:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 25;
	addChild(targ1);

	var targ2:TweenTarget = new TweenTarget();
	targ2.x = 20;
	targ2.y = 60;
	addChild(targ2);

	var t1:ITween = BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Elastic.easeOut);
	var t2:ITween = BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Elastic.easeOut);
	_tween = BetweenAS3.serial(t1, t2);
}

Note that we’ve tried a different easing method here which means a different easing method will need to be imported from the org.libspark.betweenas3.easing package before compiling. Once compiled, though, you’ll see something like this:

At this point it should start to be obvious what was meant when it was stated that very complex tweens could be built up by nesting simpler tweens. For example, you could easily pass two parallel tweens and a delayed tween to the BetweenAS3 serial method and so on.

Reversing and Repeating Tweens

The next two static methods we’ll look at are reverse and repeat. The reverse method, as its name suggests, reverses a tween and takes two parameters, the tween to reverse and a boolean indicating whether or not to reverse the tween’s position. Most often you would simply leave this boolean set to its default state of true. The repeat method, true to it’s name, repeats a specified tween. Repeat accepts two arguments: the tween instance to repeat and the number of times it should repeat.

This time our initTween method will be a little bit trickier and we’ll really start to see the power of nesting BetweenAS3 calls. We’ll begin by creating a basic tween that moves our TweenTarget instance across the stage with a nice elasticity. Nothing new there. Then, though, we’ll create a repeated tween that repeats four times. That repeated tween will be passed an instance of a serial tween that tweens first the basic tween then the reverse of the basic tween. Our initTween method then will look like this:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 60;
	addChild(targ1);
	var t1:ITween = BetweenAS3.tween(targ1, { x:500 }, { x:targ1.x }, 2.0, Elastic.easeInOut);
	_tween = BetweenAS3.repeat(BetweenAS3.serial(t1, BetweenAS3.reverse(t1)), 4);
}

Compiled, you should get a result such as this:

Adding and Removing Children

One of the interesting benefits of using BetweenAS3 is the ability to add and remove child display objects as a tween using the static methods addChild and removeFromParent respectively. The addChild method expects two arguments: the child to add and the parent the child should be added to. The removeFromParent accepts only a single argument, the child to remove. Both of these methods, again, return ITween instances and can be nested into other BetweenAS3 methods to build up complex tween sequences.

In this example, we’ll instantiate three TweenTarget instances, use the BetweenAS3.addChild method to add them to the display list with a .5 second delay, tween them all across the stage in parallel, then use the removeFromParent method to get remove them from the display list. This time our initTween method looks like this:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 25;

	var targ2:TweenTarget = new TweenTarget();
	targ2.x = 20;
	targ2.y = 60;

	var targ3:TweenTarget = new TweenTarget();
	targ3.x = 20;
	targ3.y = 95;

	var t1:ITween = BetweenAS3.delay(BetweenAS3.addChild(targ1, this), .5);
	var t2:ITween = BetweenAS3.delay(BetweenAS3.addChild(targ2, this), .5);
	var t3:ITween = BetweenAS3.delay(BetweenAS3.addChild(targ3, this), .5, .5);
	var t4:ITween = BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Elastic.easeOut);
	var t5:ITween = BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Elastic.easeIn);
	var t6:ITween = BetweenAS3.tween(targ3, { x:500 }, null, 2.0, Elastic.easeInOut);
	var t7:ITween = BetweenAS3.parallel(t4, t5, t6);
	var t8:ITween = BetweenAS3.delay(BetweenAS3.removeFromParent(targ1), .5);
	var t9:ITween = BetweenAS3.delay(BetweenAS3.removeFromParent(targ2), .5);
	var t10:ITween = BetweenAS3.delay(BetweenAS3.removeFromParent(targ3), .5);

	_tween = BetweenAS3.serial(t1, t2, t3, t7, t8, t9, t10);
}

Note that for the sake of legibility, I created several single ITween instances, but if you really wanted to, you could actually create the _tween instance in a single line like so:

_tween = BetweenAS3.serial(BetweenAS3.delay(BetweenAS3.addChild(targ1, this), .5), BetweenAS3.delay(BetweenAS3.addChild(targ2, this), .5), BetweenAS3.delay(BetweenAS3.addChild(targ3, this), .5, .5), BetweenAS3.parallel(BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Elastic.easeOut), BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Elastic.easeIn), BetweenAS3.tween(targ3, { x:500 }, null, 2.0, Elastic.easeInOut)), BetweenAS3.delay(BetweenAS3.removeFromParent(targ1), .5), BetweenAS3.delay(BetweenAS3.removeFromParent(targ2), .5), BetweenAS3.delay(BetweenAS3.removeFromParent(targ3), .5));

Such is the power of nesting tween methods in BetweenAS3.

Whichever method you choose to create your tween instance, the compiled .swf will look like the example below:

Color Tweening

In addition to nesting ITween instances it is also possible with BetweenAS3 to nest property objects to build complex tweens. In this example we’ll take a look at how to tween the properties of the colorTransform property of the transform property of the TweenTarget instance. This time in our initTween method, we’ll enlarge our TweenTarget instance, then tween its color. Our initTween method will look like this:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 235;
	targ.y = 40;
	targ.scaleX = 3;
	targ.scaleY = 3;
	addChild(targ);
	_tween = BetweenAS3.tween(targ, { transform:{colorTransform:{ redOffset:-255, greenOffset:-255, blueOffset:255 }} }, null, 4.0, Expo.easeOut);
}

Compiled, you should see something like the below:

Filter Tweening

Again, by nesting property objects, BetweenAS3 can also be used to tween DisplayObject filters. In this quick example, we’ll take a look at tweening a glow filter back and forth. Before we begin though, there is one other property of the ITween interface to take a look at: the stopOnComplete property. This property is a boolean that tells the tween to stop when it is finished. If set to false, as it will be in this example, the tween will run indefinitely starting at it’s beginning each time it completes. In this example, we’ll again enlarge our TweenTarget instance, add a GlowFilter object to its filters property, then, finally tween that filter. Our initTween method will look like this:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 235;
	targ.y = 40;
	targ.scaleX = 3;
	targ.scaleY = 3;
	addChild(targ);
	targ.filters = [new GlowFilter(0xFFFF00, 1, 0, 0, 2, 3)];
	var t1:ITween = BetweenAS3.tween(targ, { _glowFilter: { blurX:32, blurY:32 } }, { _glowFilter: { blurX:0, blurY:0 }},  1.0, Expo.easeOut);
	_tween = BetweenAS3.serial(t1, BetweenAS3.reverse(t1));
	_tween.stopOnComplete = false;
}

Compiled our glow filter example will look like this:

In case you’re wondering where that “_glowFilter” property came from, BetweenAS3 will, by default, recognize the following filter properties: “_bevelFilter”, “_blurFilter”, “_colorMatrixFilter”, “_convolutionFilter”, “_displacementMapFilter”, “_dropShadowFilter”, “_glowFilter”, “_gradientBevelFilter”, “_gradientGlowFilter”, and “_shaderFilter”.

Tweening Array Members

Possibly one of my favorite features of BetweenAS3 is its ability to tween the members of Array instances just like they were properties of an object (which, when you think about it, they are). Why would you want to tween array members, you ask. Well, one possible example is that you want to tween an image from “normal” to “embossed” and back again. You can easily emboss an image using a ConvolutionFilter, but to tween the transition will require tweening an array.

If you’re not familiar with the ConvolutionFilter object, you create one using a matrix array. Creating a ConvolutionFilter with an array like this (0,0,0,0,1,0,0,0,0), will not affect the image to which it’s applied. Using an array like this however, (-2,-1,0,-1,1,1,0,1,2), will emboss the image.

So, in this example, we will embed an image, create a tween that tweens the members of the array that change and then tweens them back, and add an event listener to that tween so as the tween updates, a ConvolutionFilter has its matrix property updated then the filter is applied to our image.

Because this script is so completely different from all the others, I will present it in its entirety below:

package  {

	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.filters.ColorMatrixFilter;
	import flash.filters.ConvolutionFilter;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.Quad;
	import org.libspark.betweenas3.events.BetweenEvent;
	import org.libspark.betweenas3.tweens.ITween;

	[SWF(width='540', height='450', backgroundColor='#000000', frameRate='60')]
	public class MatrixTween extends Sprite {

		[Embed(source = "../assets/prague.jpg")]
		private var JPG:Class;

		private var _image:Sprite;
		private var _tween:ITween;
		private var _tf:TextField;

		private var _matrixArray:Array = [ 0, 0, 0, 0, 1, 0, 0, 0, 0];
		private var _convFilter:ConvolutionFilter = new ConvolutionFilter(3, 3, _matrixArray);

		// IDENTITY ARRAY:	(0,0,0,0,1,0,0,0,0)
		// EMBOSS ARRAY:	(-2,-1,0,-1,1,1,0,1,2);

		public function MatrixTween() {
			_image = new Sprite();
			_image.addChild(new JPG());
			addChild(_image);

			initText();
			initTween();

			stage.addEventListener(MouseEvent.CLICK, toggleTween);
		}

		private function initText():void {
			var fmt:TextFormat = new TextFormat("_sans", 12, 0xFFFFFF);
			_tf = new TextField();
			_tf.selectable = false;
			_tf.mouseEnabled = false;
			_tf.autoSize = TextFieldAutoSize.LEFT;
			_tf.defaultTextFormat = fmt;
			_tf.text = "Click to start/stop tween.";
			_tf.x = Math.round(stage.stageWidth * .5 - _tf.width * .5);
			_tf.y = Math.round(stage.stageHeight - _tf.height - 10);
			addChild(_tf);
		}

		private function initTween():void {
			var t1:ITween = BetweenAS3.tween(_matrixArray, { 0: -2, 1: -1, 3: -1, 4:1, 5:1, 7:1, 8:2 }, { 0:0, 1:0, 3:0, 4:1, 5:0, 7:0, 8:0 }, 2.0, Quad.easeInOut);
			_tween = BetweenAS3.serial(t1, BetweenAS3.reverse(t1));
			_tween.addEventListener(BetweenEvent.UPDATE, applyFilter);
		}

		private function applyFilter(event:BetweenEvent):void {
			_convFilter.matrix = _matrixArray;
			_image.filters = [_convFilter];
		}

		private function toggleTween(event:MouseEvent):void {
			if (_tween.isPlaying) {
				_tween.stop();
			} else {
				if (_tween.position == _tween.duration) {
					_tween.gotoAndPlay(0);
				} else {
					_tween.play();
				}
			}
		}
	}
}

Notice how the index numbers of the array members are used as property names. Compiling the .swf will yield the results below:

In conclusion, even though still in version 0.00 (Preview) at the time of writing this, BetweenAS3 is already a powerful tween engine addition to any actionscript coder’s arsenal. As always, I always recommend using the right tool for the job and BetweenAS3 may certainly not be right for every time a tween is required, but at the cost of a measly 14k or so, it is definitely worth keeping handy. For more information regarding BetweenAS3, check out this slide show created by the engine’s author.

Related posts:

• Alternativa 3D Series - Tutorial 1 - Getting Started
• Create Cool Line Effects using Actionscript 3.0 in Flash CS4 or Flex Builder 3

The aim of this article is to show you available options that present a full Flash Front End, no matter if the back end is using a PHP or other kind os script / platform. Now lets take a look!

GLU (Currently on Beta)

GLU is a sophisticated, next generation rich media platform, intelligently combining a rich media community, management system and flexible development framework.

In so doing GLU brings together a cross-section of online Communities, Designers, Developers, Content Providers and Commercial Enterprise.

GLU provides the bond and creates the synergies for these audiences to collaborate, create and participate in engaging user experiences. This is achieved through its Rich Media Management System and Flexible Development Framework.

Rich Media Management System

GLU’s Rich Media Management System (”RMMS”) is a web-based administration interface which features:

- MANAGEMENT, capabilities for rich media projects,

- MODERATION, for user generated content,

- MEDIA ENCODING, and publishing in real-time, and

- DELIVERY, of content to end-users.

The GLU have various features which you can check your self, but i would like to remark the following:

• Google Analytics Event Tracking - use your own GA IDs;
• Google Analytics Page View Tracking;
• ActionScript 2.0
• ActionScript 3.0
• Real-time media encoding;

Where to start:

• Official tutorial page
• Request a free account to test it at account register page

Silex

SILEX is an open source RIA which lets you build Flash websites for Flash Player 7, 8 and 9. All multimedia file formats can be assembled in SILEX WYSIWYG editor for publishing website online, in a local computer and on CD-R.

Features

• Intergation with CS3;
• Automatic SEO system;
• Multilingual Contexts Management;
• online editing (RIA) – intuitive WYSIWYG;
• layout system and themes;
• components system;
• automatic deep linking;
• automatic HTML version generated on the fly for search engines;
• Flash ActionScript API;
• rich text player with wiki syntax;
• integration with other open sources applications (such as Wordpress);

Requirements for web deployment

• PHP5 Hosting;

Where to start

• Look at the Online demo
• Browse the documentation and see some samples

Secretary (Free for open-source or non-profit projects)

Secretary is an, easy to use easy to set up, content management system. It’s specifically made for flash and comes with some very need tools for flash-developers. The front-end gives the user a unique and smooth experience and makes the administration very inviting. However, an integration between Secretary and other open source applications might be painfull, as Secretary is a full Flash site.

Features

• Dynamic xml structure;
• Very simple Installation (Copy files to your server);
• WYSIWYG texteditor;
• Secure 128 bit password protection;
• Dynamic thumbnail generation;
• Drag’n’drop editing;
• Dynamic font loading;
• Developer framework for xml parsing and loading;
• Simple and nice userexperiense;
• Easy search and rss integration;
• Extendible userinterface;

Where to start

• See the official page for more info

FlashMoto (Currently on Beta)

Flash Moto CMS is a revolutionary content management system aimed at Flash developers and designed to simplify the publication of Web content to Flash websites. Our Flash CMS is fast, flexible and extensible. It provides a powerful development platform that enables you to extend functionality with presentation. The ease of use and richness of Flash CMS were reached due to the diligent work and great efforts of our team of professionals.

Where to start

• Flashmoto blog
• Getting started demo video

10CMS

10CMS is a platform for building and deploying User eXperience Applications (UXAs). A number of pre-build UXAs are available from 10CMS for customization, or completely new can be created. These components extend the standard Flash Professional components with in-line WYSIWYG content editing and XML management capabilities.

Works with SWFObject and SWFAddress to enable SEO, and data is stored in XML.

Where to start:

• Demo page

TypoFlash

Typoflash.net have developed a new convenient interface where you can edit all elements of Flash websites either images or any other content. New images can be easily added to your Flash website and existing images can be replaced, re-sized and etc. Creating search engine friendly urls and editing existing ones isn’t a problem as well.

Features

• extends Typo3 CMS to manage any flash content;
• makes it possible to maintain both html and flash version of the same data;
• harnesses flash remoting communication;
• makes extensive use of caching of complex data queries;
• full multilanguage support;
• implements many search engine optimization features;
• is userfriendly, ie. enables bookmarking, use of backbutton and deeplinking;
• is your friend when you want to boost your data driven site with features such as fullscreen video and playing mp3;
• is a framework for Rich Internet Applications (RIAs) within Typo3;
• supports both AS2 and AS3;
• supports AMFPHP;

Requirements

• Typo3 CMS;

Where to start

• Based on typo3, you can find getting started tutorials here

FlashDance CMS

FlashDance CMS is a flash Content Management System framework and application to build and maintain flash web sites and flash offline projects. It provides developers an extendable api and tools to generate a customized web site or flash presentation with a built in and also customizable Content management system. And end users a fairly easy way to build / maintain their site. The weak point on this nice option is that doesn’t accepts Actionscript 3.0.

• Multilingual content development.
• Customizable navigation sidebars and menus with different visuals and functions.
• Sectionwise page headers if wanted.
• Some breadcrumbs implementation.
• Drag and Drop WYSIWYG page content editing with CSS support.
• You may develop new custom components and plugins from scratch using core API calls and connections through a notification system.
• You may also do this by modifying and recompiling from original fla or actionscript sources.
• SwfAddress integration is default, and allows the use of SEO URLs, deep linking, back and forward browser button functionality and per page title customization.
• Audio and Video Players and Playlists (in development, almost finished)
• Easylly skin default audio and media players, either via swfmill and MTASC or by editing original -skin only- fla files. (in development, almost finished)
• Flexible and feature rich Photo Gallery plugin you may also customize, fully AS2 both in website Engine and Admin.
• Some metadata and other HTML handling from configurations
• Lots of reusable code for animation tweening, user interfaces, and event handling.
• Many custom built (or borrowed) lightweight ui components for use on any project. (Scrollbars, scrollpad, SimpleList, Combos, tooltips, really simple buttons, ruler set, tree, various form fields)
• Lots of PHP code to handle uploads, file and directory listings, exif handling on jpgs, mailing etc…
• SQL files provided to build default user admin tables.

Requirements

• PHP4/5
• MySQL

Where to start

• Offical page

Now tell us what you think about using a flash CMS, and which of the above would fit better your needs.

Related posts:

• Freebie: lynda.com offers Free Access to Adobe Flash Catalyst Training

Result

Requirements

Adobe Flex v3.02

Away3D v3.3.3 source code

Pre-Requisites

You should read the previous articles in this series.

Adding a player

As before the ApplicationManager will be used to create both the player and the enemies that the player will face. This is done in the same fashion as the BackgroundPlane and BackgroundBuildings that were added in the last article.

ApplicationManager.as

package
{
	import away3d.primitives.Cube;

	import mx.core.Application;

	public class ApplicationManager extends BaseObject
	{
		protected static const TIME_BETWEEN_BUILDINGS:Number = 2;
		protected static const TIME_BETWEEN_ENEMIES:Number = 1;
		protected var timeToNextBuilding:Number = 0;
		protected var timeToNextEnemy:Number = TIME_BETWEEN_ENEMIES;

		public function ApplicationManager()
		{
			super();
		}

		public function startupApplicationManager(engineManager:EngineManager):ApplicationManager
		{
			this.startupBaseObject(engineManager);

			return this;
		}

		public function startLevel1():void
		{
			timeToNextBuilding = 0;

			new BackgroundPlane().startupBackgroundPlane(engineManager);
			new Player().startupPlayer(engineManager);

			// prepopulate the city
			for (var i:int = 0; i < 5; ++i)
			{
				var building:BackgroundBuilding = new BackgroundBuilding();
				building.startupBackgroundBuilding(engineManager);
				building.enterFrame((i + 1) * 2);
			}
		}

		public override function shutdown():void
		{
			super.shutdown();
		}

		public override function enterFrame(dt:Number):void
		{
			timeToNextBuilding -= dt;
			if (timeToNextBuilding <= 0)
			{
				timeToNextBuilding = TIME_BETWEEN_BUILDINGS;
				new BackgroundBuilding().startupBackgroundBuilding(engineManager);
			}

			timeToNextEnemy -= dt;
			if (timeToNextEnemy <= 0)
			{
				timeToNextEnemy = TIME_BETWEEN_ENEMIES;
				new Enemy().startupBasicEnemy(engineManager);
			}
		}
	}
}

As you can see the player is represented by the new Player class, a new instance of which is created in the startLevel function.

The enemies are represented by the new Enemy class. Instances of the Enemy class are created at regular intervals, just like the BackgroundBuildings, in the enterFrame function.

Player.as

package
{
	import away3d.core.math.Number3D;
	import away3d.events.MouseEvent3D;
	import away3d.primitives.*;

	import flash.events.*;
	import flash.geom.*;
	import flash.media.*;

	import mx.core.*;

	public class Player extends MeshObject
	{
		protected static const PLAYER_X_LIMIT:Number = 52;
		protected static const PLAYER_Y_LIMIT:Number = 38;
		protected static const PLAYER_WIDTH:Number = 16;
		protected static const PLAYER_HEIGHT:Number = 5;
		protected static const COLLISION_PLANE_WIDTH:Number = 150;
		protected static const COLLISION_PLANE_HEIGHT:Number = 100;
		protected var collisionPlane:MeshObject = null;

		public function Player()
		{
			super();
		}

		public function startupPlayer(engineManager:EngineManager):void
		{
			var plane:Plane = new Plane(
				{material:ResourceManager.Player_Tex,
				width:PLAYER_WIDTH,
				height:PLAYER_HEIGHT,
				yUp:false});
			super.startupMeshObject(engineManager, plane);

			var collisionPlaneMesh:Plane = new Plane(
				{material:new NullMaterial(),
				width:COLLISION_PLANE_WIDTH,
				height:COLLISION_PLANE_HEIGHT,
				yUp:false});
			collisionPlane = new MeshObject().startupMeshObject(engineManager, collisionPlaneMesh);
			collisionPlaneMesh.addEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);
		}

		override public function shutdown():void
		{
			collisionPlane.model.removeEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);
			collisionPlane.shutdown();
			collisionPlane = null;
			super.shutdown();
		}

		override public function enterFrame(dt:Number):void
		{
			super.enterFrame(dt);

			if (this.model.x > PLAYER_X_LIMIT)
				this.model.x = PLAYER_X_LIMIT;
			if (this.model.x < -PLAYER_X_LIMIT)
				this.model.x = -PLAYER_X_LIMIT;

			if (this.model.y > PLAYER_Y_LIMIT)
				this.model.y = PLAYER_Y_LIMIT;
			if (this.model.y < -PLAYER_Y_LIMIT)
				this.model.y = -PLAYER_Y_LIMIT;
		}

		public function mouseMove3D(event:MouseEvent3D):void
		{
			if (this.model)
			{
				this.model.x = event.sceneX;
				this.model.y = event.sceneY;
			}
		}
	}
}

The Player class extends MeshObject, because it will display a 3D model in the scene. In this case though the 3D model is just a textured plane. This is because of the performance limitations of the Flash runtime. In order to maintain a decent framerate I choose to implement the player (and the enemies) essentially as 2D objects. While you might get away with using 3D models that have only a few hundred triangles, even these models would soon slow the game down if you have a few on the screen at once.

public function startupPlayer(engineManager:EngineManager):void
{
	var plane:Plane = new Plane(
		{material:ResourceManager.Player_Tex,
		width:PLAYER_WIDTH,
		height:PLAYER_HEIGHT,
		yUp:false});
	super.startupMeshObject(engineManager, plane);

	var collisionPlaneMesh:Plane = new Plane(
		{material:new NullMaterial(),
		width:COLLISION_PLANE_WIDTH,
		height:COLLISION_PLANE_HEIGHT,
		yUp:false});
	collisionPlane = new MeshObject().startupMeshObject(engineManager, collisionPlaneMesh);
	collisionPlaneMesh.addEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);
}

The startupPlayer function is where the player is constructed. We create a new Plane and then pass this to the MeshObject startupMeshObject function. The only special thing we do here is specify the yUp property of the Plane to be false, which causes the Plane to be constructed in the X/Y axis (and therefore facing the camera).

The Player will be moved around on the screen so it is always under the mouse pointer. This sort of control scheme will be immediately obvious to anyone playing the game, but it does raise the question: how do you find the position of the mouse cursor in a 3D world? There are two ways. The hard way is to calculate and project a ray into the world and then find a collision with a plane. You can find this procedure detailed here, but I warn you now it’s not pretty. The easy way is to use the mouse events built into Away3D.

Basically the procedure is this: you create a Plane, texture it with an invisible texture, attach a function to the MouseEvent3D.MOUSE_MOVE event, and then read the scene coordinates from the supplied MouseEvent3D object passed to the event listener.

var collisionPlaneMesh:Plane = new Plane(
	{material:new NullMaterial(),
	width:COLLISION_PLANE_WIDTH,
	height:COLLISION_PLANE_HEIGHT,
	yUp:false});

The first three of these steps is done here in the startupPlayer function. We create a new Plane instance and set it’s material to a new NullMaterial instance. The Nullmaterial is a class that extends the ITriangleMaterial interface (as we will see later), and it’s only purpose is to provide a material that doesn’t draw anything to the screen. This is necessary because mouse events don’t appear to be triggered on models whose textures have an alpha of 0 (or set to transparent).

collisionPlane = new MeshObject().startupMeshObject(engineManager, collisionPlaneMesh);

Once the Plane has been created we assign it to a new MeshObject instance so it will be placed in the scene.

collisionPlaneMesh.addEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);

We then attach the mouseMove3D function to the MouseEvent3D.MOUSE_MOVE event. This causes the mouseMove3D function to be called when the mouse moves over the Plane.

public function mouseMove3D(event:MouseEvent3D):void
{
	if (this.model)
	{
		this.model.x = event.sceneX;
		this.model.y = event.sceneY;
	}
}

Now in the mouseMove3D function we take the sceneX and sceneY properties of the supplied MouseEvent3D object and assign these to the position of the Plane that represents the player.

override public function enterFrame(dt:Number):void
{
	super.enterFrame(dt);

	if (this.model.x > PLAYER_X_LIMIT)
		this.model.x = PLAYER_X_LIMIT;
	if (this.model.x < -PLAYER_X_LIMIT)
		this.model.x = -PLAYER_X_LIMIT;

	if (this.model.y > PLAYER_Y_LIMIT)
		this.model.y = PLAYER_Y_LIMIT;
	if (this.model.y < -PLAYER_Y_LIMIT)
		this.model.y = -PLAYER_Y_LIMIT;
}

The last step we need to do is to make sure the player never leaves the screen. The screen limits are defined in the PLAYER_X_LIMIT and PLAYER_Y_LIMIT
constants. These values were manually picked through trial and error rather than being calculated.

Enemy.as

package
{
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Plane;

	public class Enemy extends MeshObject
	{
		protected static const ENEMY_X_LIMIT:Number = 70;
		protected static const ENEMY_Y_LIMIT:Number = 60;
		protected static const ENEMY_X_START:Number = 65;
		protected static const ENEMY_Y_START:Number = 55;
		protected static const ENEMY_WIDTH:Number = 16;
		protected static const ENEMY_HEIGHT:Number = 5;
		protected static const BASIC_ENEMY_SPEED:Number = 50;
		protected var logic:Function = null;

		public function Enemy()
		{
			super();
		}

		public override function shutdown():void
		{
			super.shutdown();
			this.logic = null;
		}

		protected function startupEnemy(engineManager:EngineManager, material:BitmapMaterial):Enemy
		{
			var plane:Plane = new Plane(
				{material:material,
				width:ENEMY_WIDTH,
				height:ENEMY_HEIGHT,
				yUp:false});
			super.startupMeshObject(engineManager, plane);
			return this;
		}

		public function startupBasicEnemy(engineManager:EngineManager):Enemy
		{
			this.startupEnemy(engineManager, ResourceManager.Enemy_Tex);
			this.logic = basicEnemyLogic;
			this.model.x = ENEMY_X_LIMIT;
			this.model.y = MathUtils.randRange(-ENEMY_Y_START, ENEMY_Y_START);
			return this;
		}

		public override function enterFrame(dt:Number):void
		{
			if (logic != null)
				logic(dt);

			if (this.model.x > ENEMY_X_LIMIT ||
				this.model.x < -ENEMY_X_LIMIT ||
				this.model.y > ENEMY_Y_LIMIT ||
				this.model.y < -ENEMY_Y_LIMIT)
				this.shutdown();
		}

		protected function basicEnemyLogic(dt:Number):void
		{
			this.model.x -= BASIC_ENEMY_SPEED * dt;
		}
	}
}

Like the Player class, the Enemy class also extends MeshObject. And like the Player, the Enemies are also represented by a Plane rather than a full 3D model.

The Enemy class has two startup functions. This is because there will eventually be a number of different types of enemies, each with different materials and behaviours. The startupEnemy function provides the common functionality required to construct the Enemy class, but it is the other startup functions, startupBasicEnemy in this case, that define the type the enemy.

The behaviour of the Enemy class is defined by a function referenced by the logic property. The startupBasicEnemy function has assigned the basicEnemyLogic function to the logic property. Then in the enterFrame function the function referenced by the logic property is called. You can think of the logic property as being the Enemy’s brain - it defines what the Enemy  will do during the render loop. In this the basicEnemyLogic function simply moves the enemy across the screen in a straight line, but nearly any kind of behaviour could be implemented here.

The last thing we need to do is remove the Enemy from the game when it has moved off the screen. Just like the Player some screen limits have been defined (the ENEMY_X_LIMIT and ENEMY_Y_LIMIT constants), and when the Enemy moves beyond these limits the shutdown function is called.

NullMaterial.as

package
{
	import away3d.core.base.Object3D;
	import away3d.containers.View3D;
	import away3d.core.draw.DrawTriangle;
	import away3d.materials.ITriangleMaterial;

	public class NullMaterial implements ITriangleMaterial
	{
		public function NullMaterial()
		{
		}

		public function get visible():Boolean
		{
			return true;
		}

		public function renderTriangle(tri:DrawTriangle):void
		{
		}

		public function updateMaterial(source:Object3D, view:View3D):void
		{
		}

		public function addOnMaterialUpdate(listener:Function):void
		{
		}

		public function removeOnMaterialUpdate(listener:Function):void
		{
		}

	}
}

As mentioned earlier the Nullmaterial class allows a model to be added to the scene, not be visible, but still receive mouse events. It is basically an empty implementation of the ITriangleMaterial interface.

So we now have a player that can be controlled by the mouse and a stream of enemies. Currently though there is no interaction between the two: the player can fly straight through an enemy. We will see how to add collision detection in the next article.

Related posts:

• Create a 3D Sliding Puzzle Game in Flex with ActionScript 3.0 and Away3D
• Simulating PicLens with Flex and Away3D – Part 3
• Simulating PicLens with Flex and Away3D – Part 1
• Create in Flex a 3D Image Gallery using Actionscript 3.0 and Alternativa3D
• Simulating PicLens with Flex and Away3D – Part 2

So, why the XML term in title? Easy, the gallery will work also with a xml if you want to, just change two lines of code and it is working with a XML file.

And the PHP? If you want the gallery to auto load and discover the photos, you will need to have two simple php files on any web/local server (php support is mandatory). One of this files will automatically discover the images in folder and create the XML with them, when this creation is done it informs flash of it’s location.

Final Result:

This gallery will have some cool final result features, lets take a brief look:

• Auto find images in folder (works with PNG,JPEG,JPG)
• Write an XML file automatically
• Can work only with a XML file and without php
• Have a full screen option
• Fit’s automatically the screen center.
• Can customize the speed of slideshow.
• Automatically generate thumbnails of images in folder *
• Spread the thumbnails automatically on the screen *
• Make the slideshow static (only open’s in thumbnail click) *
• Can be configured without any XML (with flash vars) *

This project will be divided into two parts, on the first we will focus the first 6 topics, and on the second part the other ones.

Requirements.

• Have Flash CS4
• A amp server (or similar like wampserver), any online hosting with php support works to.
• The TweenLite engine that you can download here

Pre Requirements

• Know a little of PHP
• Understand the concept of constraint layout in flash (auto position content)
• A good knowledge of Flash, especially Action Script 3

Getting started

Keep in mind that this is a complex tutorial and you will need to pay some attention to details, so… if you are following this tutorial or if you got the source and have any doubts you should not ignore any step… follow them carefully.

Step 1 - Setting up PHP

Make sure you got an installed php server, go to your web server root (if local and using wamp server, something like c:/wamp/www) and create a folder called gallery, inside it create two php files named discover.php and imageHandler.php these files will handle any request from flash, discover the image files in folder, create a images.xml file and output his name to flash.

Write down this code on imageHandler.php:

<?php

  class imageHandler {
  	public function getImageList($path="") {
	  		if(file_exists($path))
	  		{
			  $i1="jpg";
			  $i2="png";
			  $i3="jpeg";
			  foreach(array_diff(scandir($path),array('.','..')) as $f) {
				  if(is_file($path.'/'.$f) && (($i1)?ereg($i1.'$',$f):1) ||
					(($i2)?ereg($i2.'$',$f):1) || (($i3)?ereg($i3.'$',$f):1) ) $l[]=$f;
				 }
			  return $l;
		   }
		  else return "Path do not Exists!";
		}

		public function ary2xml($arr, $d=0, $forcetag='', $file_name='') {

		  $data="<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n";
		  $data.="<images>\r\n";
		  for($h=0; $h<count($arr); $h++) {
			  $data.="<image nameI=\"".$arr[$h]."\" thumb=\"".$arr[$h]."\" />\r\n";
		  }
		  $data.="</images>";

		  if($file_name!='') {
			  @unlink($file_name);
			  $myFile = $file_name;
			  $fh = fopen($myFile, 'w');
			  fwrite($fh, $data);
			  fclose($fh);
			  return $file_name;
		  }
		  else return $data;
   	}
  }
?>

This PHP Class has two different functions, one is to discover all the JPG, JPEG and PNG files and output them in an array, the second one is a function to create an images.xml file, that will output a XML file something like this:

<images>
	<image nameI="adv2.jpg" thumb="adv2.jpg" />
	<image nameI="logo-trans.png" thumb="logo-trans.png" />
	<image nameI="logo.png" thumb="logo.png" />
	<image nameI="preview.jpg" thumb="preview.jpg" />
	<image nameI="pub.png" thumb="pub.png" />
	<image nameI="stocks-20090608.jpg" thumb="stocks-20090608.jpg" />
	<image nameI="ttl_contributer.png" thumb="ttl_contributer.png" />
</images>

On the second part of this tutorial we will change a little the php class to create and write down the images thumbnails in here, for now only the structure.

On the other php document, discover.php, write this down:

<?php
  include_once("imageHandler.php");

  $tm=new imageHandler();

  $data=$tm->getImageList("./");

  echo($tm->ary2xml($data,0,'',"images.xml"));
?>

This will call the getImageList function, then with the images array we call the function to write down the images.xml, this last function returns the filename when done: images.xml.

That’s all, just put some pictures in this folder, we will need them to continue in flash.

Step 2 - Creating a new project in Flash

This is quite simple, create a new project and define his stage size 850×470px. The stage size is not important because our flash gallery will automatically fetch the stage area, so you do not need to respect this size…but make it similar…

On our timeline, create 4 layers, name the top one “actions”, the second “masker”, the third masker and the bottom one “imageLoader”. This is all that we need. After creating this layers, you should have something link this:

These layers disposition is very important, in the controls layer we will put a custom preloader, and a movieclip with two icons to control the normal/full screen mode and the speed of our slideshow. In the masker layer, we will simply put a movieclip to mask the imageLoader (to create the mask effect). On the imageLoader we will put a movieclip that will hold the loader to load our images and on the actions layer we will write down our code.

First of all lets create the preloader, the mask and the imageLoader movieClip’s.

Save your file.

Step 3 - Creating the image preloader

The image preloader is very simple, just create a new empty movieclip and name it preloader (Menu Insert->New Symbol or CTRL+F8), After this on our movieclip create 3 layers, name the top one “Loader” the middle one “Mask” and the bottom one “Bar”. On the “Loader” layer create a static text and write “Loading…” And on the mask layer create a rectangle with 104×15, and color like #CCCCCC then put it behind the Loading Text.. size the loading text field to fit this rectangle…

On the last layer, the Bar, create another rectangle, color it #999999 and put it on the left side of the loading text and convert it into a symbol (name it masker_bar), after these steps you must have the things like this:

Now, extend the 3 layers till the frame 100 (click on each layer frame 100 and right-click->Insert key frame). This will allow us to make a animation from 0 to 100, creating the loading effect.

On the bottom layer, the bar one, right click on frame 10/15 and select Create Classic Tween, then select the frame 100 of this layer, then select the Left masker_bar symbol and put it over the loading area, make sure it covers it all, something like this:

This will create a smooth move animation, the final part is to put some stop actions on the start and end frames, click on frame one of the Mask layer, then click F9 (actions) and write stop(); do the same on layer 100. Then mask the bar: Right-click on the mask layer and then select Mask.

We have finished our image preloader:

Time to save your project.

Step 4 - Creating the image loader

The image loader is quite simple, if still inside the preloader, go back main stage, select menu Insert->New Symbol then name it “imageLoader”. After this, do nothing inside the imageLoader, leave it empty… we need this that was so we can add a loader into it as child, that will load our image.

Go back to main stage.

Step 5 - Creating a mask movieClip.

Do the same steps to create a new movieClip, but name this one “masker” and inside him, on the first layer and frame simply draw a small rectangle…10×15px is enough. This rectangle movieCLip will be used as mask, we will resize it according to each image size, so it masks the image correctly.

Step 6 - Creating the animation lines

Another very simple step. Insert a new movieClip, name it Liner but this time export it to action script, we will need this to call the lines into Action Script code, the MovieClip properties should be like this (it’s in French, but you will easy understand when looking at the options):

Then in this movieClip select the line tool and make a long horizontal line, with +- 2500px, make sure it starts on the x=0 and y=0 coordinates, like this:

This is done, save it and go back to main stage.

Step 7 - Creating the control buttons

For this step, you will need my images that can be downloaded here, take those two png images (max.png and speed2.png) and import them into flash; File->Import to stage, and select those two images. On the stage, just put the two images side-by-side and then convert them into a “slideControls” movieClip.

Open this movieclip and here we need to do some stuff.

Click on the arrows image, and then convert it onto a movieClip named “fullScreen”, and do the same to the other left icon and name it “speed”. On the properties of each movieClip on the instance name write down “fullscreen” for the fullScreen button and “speedBtn” for the speed button. This will allow us to identify this clips in action script.

Now, double Click on the speed button, we will make a static image click able on the small arrows, for this inside the speed button, create a new layer, name it backBtns, and on this one create a small rectangle, color it #CCCCCC and with +- the size of each small arrow, then convert it into a backBtn movieClip. Copy a new instance of it from library and put them over the small arrows, like this:

Name the top instance on properties panel of “up” and the bottom one “down”. Go to right panel, choose style, and alpha property equal to 0.

This is now ready to receive some code.

Now, create a new Layer above the existent, name it actions and go to panel actions to write this down:

	up.useHandCursor=true;
  up.buttonMode=true;
  up.addEventListener(MouseEvent.CLICK, onClick);
	down.useHandCursor=true;
  down.buttonMode=true;
  down.addEventListener(MouseEvent.CLICK, onClick);

	function onClick(evt:MouseEvent):void {
	  if(evt.target.name.toString()=="up") {
  	//go up
		  dispatchEvent(new Event("speedUp"));
  	}
  	else {
  	//go down
  	dispatchEvent(new Event("speedDown"));
  	}
 }

stop();

This will dispatch two custom events that we will listen on main stage to perform the speed change action. The events names are “speedUp” when user clicks to increase speed and “speedDown” to decrease.

Go back inside the slideControls movieClip, add a new layer on top, name it “actions” and in the panel actions write this down:

	fullScreen.buttonMode=true;
  fullScreen.useHandCursor=true;
  fullScreen.addEventListener(MouseEvent.CLICK, onFullMouse);
  fullScreen.addEventListener(MouseEvent.MOUSE_OVER, onFullMouse);
  fullScreen.addEventListener(MouseEvent.MOUSE_OUT, onFullMouse);

	function onFullMouse(evt:MouseEvent):void {
	  if(evt.type==MouseEvent.CLICK) {
  	(stage.displayState==StageDisplayState.NORMAL) ?
		stage.displayState=StageDisplayState.FULL_SCREEN :
		stage.displayState=StageDisplayState.NORMAL;
	  }
   else if(evt.type==MouseEvent.MOUSE_OVER)
		{
  	fullScreen.alpha=0.5;
  	}
  else {
		fullScreen.alpha=1;
  }
}

This will make our fullScreen image behave as a button, and add 3 listeners on it. In this case i use only one function to handle the 3 events, because they have something in common, the argument is on the 3 cases a MouseEvent, so i use only one function and compare the event type. If it’s a CLICK the flash checks if the displayState is in full screen and turn it on normal state or do the inverse.

The stage.displayState = StageDisplayState.FULL_SCREEN transform flash in full screen, but only if we make a small transformation on the publishing argument “allowFullScreen” of the HTML to true. We will see this later.

Well, save your project again.

Step 8 - Place movieClip’s on stage.

It’s now time to put all things on our stage. Because all of our stuff will be automatically sized and placed on stage, we do not really need to concern about the position of elements, just make sure you set up the good instance names and put them on the correct layers.

So, go to main stage, click on the layer “controls” and drag and drop the “preloader” and “slideControls” movieClip’s from the library into the stage, the place does not matters. Click now on the preloader movieclip and name it’s instance “preloader”, do the same on slideControls movieClip and name it’s instance to “galControls”.

Click now on layer masker, and drag the masker movieClip from library into stage, name it’s instance “masker”.

Finally click on “imageLoader” layer and drag the “imageLoader” movieclip into stage (because it’s an empty movieClip pay some attention to the place and the small round circle, this is where your imageLoader is) and name the instance as “imageLoader”.

Note: Naming these instances is very important, or you will get some errors while accessing to the movieClip’s from Action Script.

Now you just need to mask the layer mask; Right-click on it and select Mask.

You should get something like this…

Well… we are almost done, now is time to code… but before…

Step 9 - Understanding stage constraint

When, the things might be a little confusing, but this image will help you out, we will have a image (box) on screen and we need to center it, easy, but if the stage size changes (when going to full screen) the center of the stage changes, so we need to reset it’s position. We simply add an event to listen resizeEvents on stage to reposition the box on screen center, so.. look at the following image, it will help you out on the code.

So, now that we learn a little more about the layout, lets take a quick view on the tasks we have to make (from top to bottom order):

• Setup elements positions on screen.
• Call the discover service (discover.php) and wait for it’s response.
• Read the xml file returned from the discover service.
• Transform the xml data to an array.
• Preload first photo
• Animate and show first photo, load the timer to loa next photos

These are the main things we have to do in Action Script, so lets begin.

Step 10 - Declare all the variables and imports

So, click the actions layer and on frame one actions write this down and make sure you got the gs folder of TweenLite in the same folder of your flash file:

import gs.TweenLite; //tween classes
import gs.plugins.*; //tweenlite sizePlugin

  //variables
  var HOST:String="http://www.msdevstudio.com/mywork/gallery/"; //gallery host
  var CUR_PHOTO:int=-1; //actual photo
  var FIRST_RUN:Boolean=true; //first run
  var IMAGE_LOADED:Boolean=false; //is there a loaded image?
  var IMAGES:Array = new Array(); //images array
  var SPEED:Number=3000;

	var timex:Timer = new Timer(SPEED); //timer to change photos
  var LT:Liner = new Liner(); //our lines
  var LB:Liner = new Liner();

	var ldr:Loader = new Loader(); //our image loader
  var PhpLoader:URLLoader = new URLLoader(); //the php loader / discover service
  var XmlLoader:URLLoader = new URLLoader(); //xml loader

	//file loaders, discover.php and the XML result file
	PhpLoader.addEventListener(Event.COMPLETE, onPhpComplete); //php discover
  XmlLoader.addEventListener(Event.COMPLETE, onXmlComplete); //php loader

 	//stage properties, align left and no scale
  stage.scaleMode = StageScaleMode.NO_SCALE;
  stage.align = StageAlign.TOP_LEFT;

	//activate the tweenLite setSize() plugin
  TweenPlugin.activate([SetSizePlugin]);

	//add the loader to imageLoader and set his alpha to 0;
  imageLoader.addChild(ldr);
  imageLoader.alpha=0;

	//galLoader events
  galControls.speedBtn.addEventListener("speedUp", changeSpeed);
  galControls.speedBtn.addEventListener("speedDown", changeSpeed);

  //out image loader listeners
  ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageComplete)
  ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);

  //Add Resize listener
  stage.addEventListener(Event.RESIZE, onResizeS);

  //timer event for image transitions
  timex.addEventListener(TimerEvent.TIMER, onTime);

The main declarations are many, you will find comments on code that will help you out, you just have to change the path for your server on the HOST variable (make sure to add a ending slash.) If you want, you can leave it like that… well, at least it will work on your localhost.

Now we need to create the functions to handle all this stuff…

Step 11 - Create handling functions

These are the functions that will handle all the events and requests of our code, you will get comments on each one, and what for it’s used.

Write this next to previous step code:

/*** function to increase/decrease speed ***/

function changeSpeed(evt:Event):void {
	if(evt.type.toString()=="speedUp") {
		SPEED+=1000; //+1 second
	}
	else SPEED-=1000;
	if(SPEED<1000) SPEED=1000; //minimum speed;
	timex.delay=SPEED; //change our timer speed
}

/*** image load progress, used to set the preloader animation state ***/
function onProgress(evt:ProgressEvent):void {
	var percentLoadede:Number = evt.bytesLoaded/evt.bytesTotal;
	var percent:Number = Math.round(percentLoadede * 100); //percentage loaded
	preloader.gotoAndStop(percent); //set the correct frame of preloader anim.
	if(percent==100) preloader.gotoAndStop(1); //if complete, goto to first frame
}

/****************Setup the lines at screen center ********************/
function setLines():void {
	LT.width=stage.stageWidth; //total screen size
	LT.y=(stage.stageHeight/2)-7.5; //middle - 7.5px the loader has 15px height
	LT.x=0; //at 0

	LB.width=stage.stageWidth;
	LB.y=(stage.stageHeight/2)+7.5;
	LB.x=0;

	addChild(LT); //add lines as stage childs.
	addChild(LB);
}

/*****called when image loading process is complete ********************/
function onImageComplete(evt:Event):void {
	TweenLite.to(preloader,1,{alpha:0}); //hide the preloader with smooth alpha effect 

  imageLoader.height=ldr.height; //change size of the imageloader according to image size
  imageLoader.width=ldr.width;

  imageLoader.x=(stage.stageWidth/2)-(imageLoader.width/2); //imageLoader on center x
  imageLoader.y=(stage.stageHeight/2)-(imageLoader.height/2); //imageLoader on center y

  imageLoader.alpha=1; //show the imageLoader MC
  IMAGE_LOADED=true; //the image is loaded
  CUR_PHOTO++; //increese photo loaded;

  if(FIRST_RUN==true) { //if is the first run
  	timex.start(); //if it's first run, activate the timer to load next images.
 		FIRST_RUN=false; //now it's not the first run
  }
  AnimateToImage(); //animate the mask and lines to make the appear effect
}

/*********** function to reset imageLoader to orignial screen center position ****/
function fixLoader():void {
	imageLoader.height=ldr.height; //fetch the imageloader size to image size
	imageLoader.width=ldr.width;

	imageLoader.x=(stage.stageWidth/2)-(imageLoader.width/2); //imageLoader center x
	imageLoader.y=(stage.stageHeight/2)-(imageLoader.height/2); //imageLoader center y
	masker.width=stage.stageWidth;
	masker.x=0;
	masker.y=(stage.stageHeight/2)-(imageLoader.height/2);
	masker.height=(imageLoader.height/2);
}

/******************* function to load separated images *********************/
function loadImage(img:String=null):void {
	setPreload(); //set the preloader original position
	TweenLite.to(preloader,1,{alpha:1}); //make it appear
	ldr.load(new URLRequest(img)); //laod the requested image
}

/***** Animate the lines and mask to show the image loaded *******/
function AnimateToImage():void {

  TweenLite.to(imageLoader, 1, {alpha:1}); //alpha the imageLoader
  TweenLite.to(masker, 1, {setSize:{height:imageLoader.height}, y:masker.y-(imageLoader.height/2)+7.5}); //resize the mask
	//make lines close the image to original position
  TweenLite.to(LT, 1, {y:imageLoader.y, setSize:{width:stage.stageWidth, height:1}});
  TweenLite.to(LB, 1, {y:imageLoader.y+imageLoader.height, setSize:{width:stage.stageWidth, height:1}});
  //animation is done, so lets start the timer again
  timex.start();
 }

/*** put preloader at center position *********/
  function setPreload():void {
      preloader.x=(stage.stageWidth/2)+4;
  	preloader.y=(stage.stageHeight/2)+7.5;
 }

/****** set the controls on bottom ****/
  function setControls():void {
	    galControls.x=stage.stageWidth-(galControls.width+20);
  	galControls.y=stage.stageHeight-(galControls.height+20);
 }

/*** Set mask original position ****/
  function setMasker():void {
  	masker.width=stage.stageWidth;
  	masker.x=0;
  	masker.y=(stage.stageHeight/2)-7.5;
  	masker.height=15;
 }

/*** Set the imageLoader original position **/
  function setLoader():void {
  	imageLoader.width=stage.stageWidth;
  	imageLoader.x=0;
  	imageLoader.y=(stage.stageHeight/2)-7.5;
  	imageLoader.height=15;
}

/*********** Called on Resize, reset the lines at center screen **/
function ReloadLines():void {
	//if the is an image loaded
	if(IMAGE_LOADED==true)
	{
		//position the lines to center screen
		TweenLite.to(LT, 1, {y:(stage.stageHeight/2)-(imageLoader.height/2), setSize:{width:stage.stageWidth, height:1}, overwrite:0});
		TweenLite.to(LB, 1, {y:(stage.stageHeight/2)+(imageLoader.height/2), setSize:{width:stage.stageWidth, height:1}, overwrite:0});
		TweenLite.to(imageLoader,1,{x:(stage.stageWidth/2)-(imageLoader.width/2), y:(stage.stageHeight/2)-(imageLoader.height/2), overwrite:0})
		TweenLite.to(masker,1,{x:0, y:(stage.stageHeight/2)-(masker.height/2),overwrite:0, setSize:{width:stage.stageWidth}})
	}
	else
	{
		//Kill existing tween, if a tween is running, force stop at the end of effect
		TweenLite.killTweensOf(LT, true);
	 	TweenLite.killTweensOf(LB, true);
		TweenLite.killTweensOf(imageLoader, true);
		TweenLite.killTweensOf(masker, true);
	 	//animate the lines to original "closed" position
		TweenLite.to(LT, 1, {y:(stage.stageHeight/2)-7.7, setSize:{width:stage.stageWidth, height:1},overwrite:0});
		TweenLite.to(LB, 1, {y:(stage.stageHeight/2)+7.5, setSize:{width:stage.stageWidth, height:1},overwrite:0});
		TweenLite.to(masker, 1, {x:0, y:(stage.stageHeight/2)-7.5, setSize:{width:stage.stageWidth, height:15},overwrite:0});
		TweenLite.to(imageLoader, 1, {y:(stage.stageHeight/2)-7.5, setSize:{width:stage.stageWidth, height:15},overwrite:0});
		//we run this to fix a bug founded when passing to fullscreen during a transition.. this resets all this to original position;
		//do not ask me why this happens, but it happens some times, maybe because a tweenlite bug!
		TweenLite.killTweensOf(LT, true);
	 	TweenLite.killTweensOf(LB, true);
		TweenLite.killTweensOf(imageLoader, true);
		TweenLite.killTweensOf(masker, true);
	}
	//move controls and loader to new position.
	TweenLite.to(galControls,1,{x:stage.stageWidth-(galControls.width+20), y:stage.stageHeight-(galControls.height+20), overwrite:0})
	TweenLite.to(preloader,1,{x:(stage.stageWidth/2)+4,y:(stage.stageHeight/2)+7.5, overwrite:0})
}

/******* on screen resize ***/
function onResizeS(evt:Event):void {
	ReloadLines();
}

/**** send lines back to original position, close effect ****/
  function resetLines(loadNext:String=null):void {
		TweenLite.to(imageLoader, 1, {alpha:0});
  	TweenLite.to(masker, 1, {setSize:{height:15}, y:(stage.stageHeight/2)-7.5});

		setPreload();

		TweenLite.to(LT, 1, {y:(stage.stageHeight/2)-7.5, setSize:{width:stage.stageWidth, height:1}});
		TweenLite.to(LB, 1, {y:(stage.stageHeight/2)+7.5, setSize:{width:stage.stageWidth, height:1}});

	 if(loadNext!=null) {
  	TweenLite.to(preloader, 1, {alpha:1, onComplete:loadImage, onCompleteParams:[HOST+"/"+IMAGES[CUR_PHOTO+1].imageName]});
  }
  else  TweenLite.to(preloader, 1, {alpha:1});
}

/******* On time function, load next image ***/
function onTime(evt:TimerEvent):void {
	timex.stop(); //stop the timer so images don't load befor that previous load is complete
	if((CUR_PHOTO+1)>(IMAGES.length-1)) CUR_PHOTO=-1; //if it's the final photo, load next

	if(IMAGE_LOADED==true) { //if it is loaded, reset the lines and load photo after that
		IMAGE_LOADED=false;
		resetLines(HOST+"/"+IMAGES[CUR_PHOTO+1].imageName); //load image after reseting lines
	}
	else {
		loadImage(HOST+"/"+IMAGES[CUR_PHOTO+1].imageName);
	}
}

/*** on php discover response ****/
function onPhpComplete(evt:Event):void {
 	 XmlLoader.load(new URLRequest(HOST+"/"+PhpLoader.data))
}

/*** on xml loaded, build images array ***/
function onXmlComplete(evt:Event):void {
  IMAGES = xml2Array(evt.target.data); //load images into array
  onTime(new TimerEvent(TimerEvent.TIMER)); //load first;
}

/*** tranform xml response into array ****/
function xml2Array(dados:String):Array {
			var menuXML:XML = new XML(dados);
			//just in case
			menuXML.ignoreWhitespace = true;
			//get XML item's entrys
			var XMLItems = menuXML.descendants("image");
			//load all items into an array
			var itemsArray:Array = new Array();
			var itemObj:Object;
			for(var i in XMLItems)
			{
				itemObj=new Object();
				itemObj.imageName=XMLItems[i].@nameI; //save image path into imageName
				itemObj.imageThumb=XMLItems[i].@thumb; //save image thumb path
				itemObj.itemID="image-"+i;
				itemsArray.push(itemObj);
			}
		return itemsArray;
}

Almost done! The main function are all done, we just need to initialize the things up.

Step 12 - Writing initialization code

Just add this after all this code:

setLines();
setControls();
setPreload();
setMasker();
setLoader();

var req:URLRequest = new URLRequest(HOST+"discover.php");
PhpLoader.load(req);
stop();

This will start all the slide and gallery process, you should not get any errors, but if you find some one just say.

Save your file and run your movie.

Step 13 - Allowing fullScreen on HTML

Full screen will into work, we need to make some changes into the published HTML, first of all Publish your project; File->Publish

After this, you will get an HTML file with the same name of your project, you just need to browse the source code of that HTML file, and find (usually) the 3 “allowFullScreen” parameters in the embed code, set all these 3 to “true”;

Save your HTML File, and load it on a browser! Now you have full screen mode available, just click in the arrow’s on bottom.

Final Notes

The first part of this tutorial is now complete, you will have some time to understand the code and why not suggest improvements, some things could be simplified, maybe… but this is up to you. Want to test with your own pictures? Just change the HOST path, and put some pictures on that folder.

If you want the slideshow to read the XML instead auto-discovering the images, just go to the end of the code, and replace this:

var req:URLRequest = new URLRequest(HOST+"discover.php");
req.method = URLRequestMethod.GET;
PhpLoader.load(req);

by this:

var req:URLRequest = new URLRequest(HOST+"images.xml");
XmlLoader.load(req);

And make sure you have the same structure that i have on the XML file. (Step 1).

Related posts:

• Create a Flash Actionscript 3.0 Slideshow with XML
• Extending the Actionscript 3.0 / Flash CS3 Slideshow with XML
• Learn How-to Create Flash Components using Actionscript 3.0, XML and Flickr API
• Create in Flex a 3D Image Gallery using Actionscript 3.0 and Alternativa3D
• Create and Skin a Photo Gallery with Flickr, Flex and Actionscript 3.0