Categories
Articles

Using ExternalInterface To Send Messages to Firebug Console

There are times that you do not have the debugger version of Flash Player running when testing in a web browser so you cannot use various extensions and plugins such as Flashbug that will display Actionscript tracing to the browser window. Flashbug is a Firefox Firebug extension.

However you can use the Firebug console window directly from Actionscript using ExternalInterface. In fact you can use it for sending messages to any Javascript console you may have created or use.

ExternalInterface allows you to call Javascript function from within Actionscript. So we can apply it to calling the Firebug console.log method as well.

I have seen other examples of this code on the internet. Most have a few problems with handling errors. The most egregious is not testing if there is a Firebug console available. The problem is that it is easy to overlook removing Firebug console.log statements when you are working in Javascript. The result is errors when viewing the page in a browser like IE or any browser not having Firebug. The same applies to Actionscript calling Javascript functions. A test is needed to verify that the console.log method is available.

Second it the matter of fact inclusion of testing if ExternalInterface is available. ExternalInterface does not support all web browsers. You can check this out on the ExternalInterface documentation page.

This example contains a method you can add to a class in your Flash or Flex classes and call.

[ad name=”Google Adsense”]
Sending a Message To Firebug console.log Method

This log method demonstrates code you might want to use. I gave it two purposes. One to trace to the standard Flash log you see on line 3. The second is to trace to the Firebug console. Putting all of this into one method makes it easy enough to turn off all tracing by commenting out the body of the method. Of course you may want to integrate this into a singleton class and use it throughout your code.

Line 4 insures the browser has ExternalInterface capability available.

Lines 7 to 9 compose a anonymous Javascript function that looks like this:
function(){if (window.console) console.log('Hello World');}

Then line 11 calls the function.

		private function log(message:String):void
		{
			trace (message);
			if (ExternalInterface.available)
			{
				// Create Javascript function to call the Firebug console log method and append the message.
				message = "function(){if (window.console) console.log('" + message;
				// Close the Firebug console log method and the Javascript function.
				message +=  "');}";
				// Request running the function.
				ExternalInterface.call(message);
			}
		}

[ad name=”Google Adsense”]

To use the function, simply call it with your tracing message and you will get the message both in the regular Flash trace consoles you are using and as well in the Firebug console.

log("Hello Firebug Console From Actionscript");
Categories
Articles

Read Flash SWF Header in AIR with Parsley Framework

I was asked to look for open source tools to read the basic information contained in a Flash swf file. Most of the items you find are for reverse engineering swf files. In the search process I found two sources to parse the swf file header.

The first was a php script written by Carlos Falo Hervá. You need to scroll down to the end of the post to find his work. This works just fine if you want to run off a server.

The second is written in Actionscript for Flash CS5. Only the author’s handle, jared, and not the author’s name is not available at the site. The download works nice and you can run from the author’s web page. You need type or paste in a url for the swf file name. The code is all dropped in on the first frame.

This site also provided a nice link to the Adobe SWF file version 10 specifications if you care to know. Page 25 has the key information on the SWF header. This is also repeated in the SWFHeaderParser parser class presented in this post.

I took the code for the second example and created a drag and drop version Adobe Air. First I separated the code into two Actionscript classes. One for parsing and one for loading swf file bytes. These classes are named respectively SWFHeaderParser and SWFHeaderLoader. I added a value object, SWFHeader_vo, to pass around the values.

I glued those items together in an Air project using the Parsley framework. This gave me a chance to use Parsley DynamicObject for the SWFHeaderLoader class that loads the SWF file for the parser.

The result is a fully decoupled version that serves as a super example of model-view-controller using Parsley for an Air app.

Download files:
Here is the Flex project if you want to explore the code and the Air installer in case you just want the tool.

[ad name=”Google Adsense”]

SWF Parser – SWFHeaderParser.as
The parser class is first as that is what you might want to integrate into your code. Note it returns the SWFHeader_vo class. The comments are scant in this class since I did write the code and only converted it into a class, returned a value object and removed code not specific to parsing the bytes. The value object is created and populated on lines 85 – 95.

package swf
{
	import flash.geom.Rectangle;
	import flash.utils.ByteArray;
	import flash.utils.Endian;
	import vo.SWFHeader_vo;
	/**
	 * SWF Header parsing. Code adapted from http://simplistika.com/parsing-reading-swf-header/.
	 * */
	public class SWFHeaderParser
	{
		private var xByte : uint;
		private var xNBits : int;
		private var xOffset : int;
		public function SWFHeaderParser()
		{
		}
		/**
		 * Get a SWFHeader_vo object from a ByteArray
		 * @param swfByteArray Any byte array, but expecting a SWF binary file or header from SWF file.
		 * @return Parsed values in SWFHeader_vo object.
		 * */
		public function parseBytes(swfByteArray : ByteArray) : SWFHeader_vo
		{
			return fParse(swfByteArray);
		}
		/**
		 * Original code from http://simplistika.com/parsing-reading-swf-header/ changed to 
		 * return SWFHeader_vo object.
		 * */
		private function fParse(v : ByteArray) : SWFHeader_vo
		{
			/*
			Field		Type 	Comment
								Signature byte
			Signature	UI8		"F" indicates uncompressed
								"C" indicates compressed (SWF 6 and later only)
			Signature	UI8		Signature byte always "W"
			Signature	UI8		Signature byte always "S"
			
			Version		UI8		Single byte file version
			FileLength	UI32	Length of entire file in bytes
			FrameSize	RECT	Frame size in twips
			FrameRate	UI16	Frame delay in 8.8 fixed number of frames per second
			FrameCount	UI16	Total number of frames in file
			The header begins with a three-byte signature of either 0×46, 0×57, 0×53 ("FWS"); or 0×43, 0×57, 0×53 (“CWS”). An FWS signature indicates an uncompressed SWF file; CWS indicates that the entire file after the first 8 bytes (that is, after the FileLength field) was compressed by using the ZLIB open standard. The data format that the ZLIB library uses is described by Request for Comments (RFCs) documents 1950 to 1952. CWS file compression is permitted in SWF 6 or later only.
			
			A one-byte version number follows the signature. 
			The version number is not an ASCII character, 
			but an 8-bit number. For example, for SWF 4, the version byte is 0×04, not the 
			ASCII character “4? (0×34). The FileLength field is the total length of the 
			SWF file, including the header. If this is an uncompressed SWF file (FWS signature), 
			the FileLength field should exactly match the file size. If this is a compressed SWF file 
			(CWS signature), the FileLength field indicates the total length of the file after decompression, 
			and thus generally does not match the file size. Having the uncompressed size available can make 
			the decompression process more efficient. The FrameSize field defines the width and height 
			of the on-screen display. This field is stored as a RECT structure, meaning that its size 
			may vary according to the number of bits needed to encode the coordinates. The FrameSize 
			RECT always has Xmin and Ymin value of 0; the Xmax and Ymax members define the width and 
			height. The FrameRate is the desired playback rate in frames per second.
			
			Source: http://simplistika.com/parsing-reading-swf-header/
			
			*/
			var vFormat : String;
			var vSwfVersion : int;
			var vFileLength : int;
			var vFrameRate : int;
			var vTotalFrames : int;
			var vFrameSize : Rectangle;
			v.endian = Endian.LITTLE_ENDIAN;
			vFormat = v.readUTFBytes(3);
			vSwfVersion = v.readByte();
			vFileLength = v.readUnsignedInt();
			v.readBytes(v);
			v.length -= 8;
			if (vFormat == "CWS")
				v.uncompress();
			v.position = 0;
			vFrameSize = new Rectangle();
			vFrameSize.left = xfReadNBits(v, true) / 20;
			vFrameSize.right = xfReadNBits(v) / 20;
			vFrameSize.top = xfReadNBits(v) / 20;
			vFrameSize.bottom = xfReadNBits(v) / 20;
			vFrameRate = v.readUnsignedByte() / 256 + v.readUnsignedByte();
			vTotalFrames = v.readUnsignedShort();
			var swfHeader_vo:SWFHeader_vo = new SWFHeader_vo();
			swfHeader_vo.format = vFormat;
			swfHeader_vo.swfVersion = vSwfVersion;
			swfHeader_vo.sizeUncompressed = vFileLength;
			swfHeader_vo.width = vFrameSize.width;
			swfHeader_vo.height =vFrameSize.height;
			swfHeader_vo.frameRate = vFrameRate;
			swfHeader_vo.totalFrames = vTotalFrames;
			return swfHeader_vo;
		}
		/**
		 * Original code from http://simplistika.com/parsing-reading-swf-header/.
		 * */
		private function xfReadNBits(v : ByteArray, vStart : Boolean = false) : uint
		{
			var n : uint;
			if (vStart)
			{
				xByte = v.readUnsignedByte();
				xNBits = xByte >> 3;
				xOffset = 3;
			}
			n = xByte << (32 - xOffset) >> (32 - xNBits);
			xOffset -= xNBits;
			while (xOffset < 0)
			{
				xByte = v.readUnsignedByte();
				n |= (xOffset < -8) ? (xByte << (-xOffset - 8)) : (xByte >> (-xOffset - 8));
				xOffset += 8;
			}
			return n;
		}
	}
}

SWF Loader – SWFHeaderLoader.as
This is my class to load the SWF and it uses Parsley messaging. If you do not intend to use Parsley, you need to add your own messaging.

Most of this is standard URLLoader coding.

The SWFHeaderParser is called on line 62. On line 63, the actual bytes are not gotten from the SWFHeaderParser. So it can be a bit misleading that that is information found in the SWF header. The SWF header only contains the uncompressed file size.

package swf
{
	import events.SWFHeaderLoaderCompleteEvent;
	import events.SWFHeaderLoaderErrorEvent;
	import events.SWFHeaderLoaderProgressEvent;
	import flash.events.Event;
	import flash.events.HTTPStatusEvent;
	import flash.events.IOErrorEvent;
	import flash.events.ProgressEvent;
	import flash.events.SecurityErrorEvent;
	import flash.net.URLLoader;
	import flash.net.URLLoaderDataFormat;
	import flash.net.URLRequest;
	import models.SWFHeaderModel;
	import vo.SWFHeader_vo;
	/**
	 * Byte loader for a SWF file.
	 * */
	public class SWFHeaderLoader 
	{
		/**
		 * Has a URLLoader
		 * */
		private var urlLoader:URLLoader;
		/**
		 * Model
		 * */
		[Inject]
		public var model:SWFHeaderModel;
		/**
		 * Receives Parsley messages.
		 * */
		[MessageDispatcher]
		public var dispatcher:Function;
		/**
		 * Load the bytes from a file.
		 * */
		public function load(url:String):void
		{
			urlLoader = new URLLoader();
			urlLoader.addEventListener(Event.COMPLETE, urlLoader_completeEventHandler);
			urlLoader.addEventListener(ProgressEvent.PROGRESS, urlLoader_progressHandler);
			urlLoader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, urlLoader_securityErrorHandler);
			urlLoader.addEventListener(HTTPStatusEvent.HTTP_STATUS, urlLoader_httpStatusHandler);
			urlLoader.addEventListener(IOErrorEvent.IO_ERROR, urlLoader_ioErrorHandler);
			urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
			urlLoader.load( new URLRequest(url) );
		}
		/**
		 * Handler for the urlLoader ProgressEvent.PROGRESS event.
		 * */
		private function urlLoader_progressHandler(event:ProgressEvent):void 
		{
			dispatcher(new SWFHeaderLoaderProgressEvent(SWFHeaderLoaderProgressEvent.PROGRESS, event.bytesLoaded, event.bytesTotal));
		}
		/**
		 * Handler for the urlLoader Event.COMPLETE event.
		 * */
		private function urlLoader_completeEventHandler(event:Event):void
		{
			var swfHeader_vo:SWFHeader_vo = new SWFHeader_vo();
			swfHeader_vo  = new SWFHeaderParser().parseBytes(urlLoader.data);
			swfHeader_vo.sizeCompressed = urlLoader.bytesLoaded;
			dispatcher(new SWFHeaderLoaderCompleteEvent(SWFHeaderLoaderCompleteEvent.COMPLETE, swfHeader_vo));
		}
		/**
		 * Handler for the urlLoader SecurityErrorEvent.SECURITY_ERROR event.
		 * */
		private function urlLoader_securityErrorHandler(event:SecurityErrorEvent):void 
		{
			dispatcher(new SWFHeaderLoaderErrorEvent(SWFHeaderLoaderErrorEvent.SECURITY_ERROR));
		}
		/**
		 * Handler for the urlLoader HTTPStatusEvent.HTTP_STATUS event.
		 * */
		private function urlLoader_httpStatusHandler(event:HTTPStatusEvent):void 
		{
			if (event.status != 200 && event.status != 0)
			{
				dispatcher(new SWFHeaderLoaderErrorEvent(SWFHeaderLoaderErrorEvent.HTTP_ERROR));
			}
		}
		/**
		 * Handler for the urlLoader IOErrorEvent.IO_ERROR event.
		 * */
		private function urlLoader_ioErrorHandler(event:IOErrorEvent):void 
		{
			dispatcher(new SWFHeaderLoaderErrorEvent(SWFHeaderLoaderErrorEvent.IO_ERROR));
		}
	}
}

SWF Header Value Object – SWFHeader_vo.as
The value object I use in the SWFHeaderLoader and SWFHeaderParser.

package vo
{
	/**
	 * Defines the values in the SWF file header record needed for app
	 * */
	[Bindable]
	public class SWFHeader_vo
	{
		public var format:String;			//	3 characters.
											//  First character:
											//  	"F" indicates uncompressed.
											// 		"C" indicates compressed (SWF 6 and later only).
											//  Second character always "W".
											//  Third character always "S".
		public var swfVersion:Number;		//	The swf version.
		public var frameRate:Number;		//	Frame rate.
		public var totalFrames:Number;		//	Number of frames on main timeline.
		public var width:Number;			//	Stage width.
		public var height:Number;			//	Stage height.
		public var sizeUncompressed:Number;	//	File size before compression.
		public var sizeCompressed:Number;	//	Actual file size.
	}
}

[ad name=”Google Adsense”]
The remainder code listings are the wiring into a Parsley Framework and published as an Adobe Air project.

Application Class – SWFHeader.mxml

This is the application mxml file. Gotta love how Parsley helps make these application mxml files minimal.

<?xml version="1.0" encoding="utf-8"?>
<!--- 
Application container
-->
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   xmlns:parsley="http://www.spicefactory.org/parsley" 
					   xmlns:views="views.*"
					   height = "450"
					   backgroundAlpha="0"
					   showStatusBar="false" 					>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<parsley:ContextBuilder config="ParsleyConfiguration"  />
		<parsley:Configure/>
	</fx:Declarations>
	<views:Main  />
</s:WindowedApplication>

Parsley Configuration File – ParsleyConfiguration.mxml
My first example that uses a Parsley DynamicObject. It is the SWFHeaderLoader class. I had a lot of silent failures before I could get this to stick. The result is that Parsley manages objects made from SWFHeaderLoader so we can have Parsley messaging and insertions. Only tried it with one object however.

<?xml version="1.0" encoding="utf-8"?>
<!--- 
Parsley framework configuration file
-->
<Objects 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns="http://www.spicefactory.org/parsley"
	xmlns:spicefactory="http://www.spicefactory.org/parsley"
	xmlns:models="models.*" 
	xmlns:controllers="controllers.*" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	>
	<fx:Script>
		<![CDATA[
			// Required for DynamicObject SWFHeaderLoader.
			import swf.*; 
		]]>
	</fx:Script>
	<fx:Declarations>
		<!--
		Parsley defined objects.
		-->
		<spicefactory:DynamicObject type = "{SWFHeaderLoader}" />
		<models:ApplicationModel/>
		<models:SWFHeaderModel/>
		<controllers:ApplicationController/>
	</fx:Declarations>
</Objects>

Air Application Descriptor File – SWFHeader-app.xml
Key here is that this an Air 2.0 project indicated on line 2 and line 8.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/2.0">

<!-- Adobe AIR Application Descriptor File Template.

	Specifies parameters for identifying, installing, and launching AIR applications.

	xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/2.0
			The last segment of the namespace specifies the version 
			of the AIR runtime required for this application to run.
			
	minimumPatchLevel - The minimum patch level of the AIR runtime required to run 
			the application. Optional.
-->

	<!-- The application identifier string, unique to this application. Required. -->
	<id>SwfHeader</id>

	<!-- Used as the filename for the application. Required. -->
	<filename>SWFHeaderInspector</filename>

	<!-- The name that is displayed in the AIR application installer. 
	     May have multiple values for each language. See samples or xsd schema file. Optional. -->
	<name>SWF Header Inspector</name>

	<!-- An application version designator (such as "v1", "2.5", or "Alpha 1"). Required. -->
	<version>v0.01</version>

	<!-- Description, displayed in the AIR application installer.
	     May have multiple values for each language. See samples or xsd schema file. Optional. -->
	<!-- <description></description> -->

	<!-- Copyright information. Optional -->
	<!-- <copyright></copyright> -->

	<!-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->
	<!-- <publisherID></publisherID> -->

	<!-- Settings for the application's initial window. Required. -->
	<initialWindow>
		<!-- The main SWF or HTML file of the application. Required. -->
		<!-- Note: In Flash Builder, the SWF reference is set automatically. -->
		<content>[This value will be overwritten by Flash Builder in the output app.xml]</content>
		
		<!-- The title of the main window. Optional. -->
		<!-- <title></title> -->

		<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
		<systemChrome>none</systemChrome>

		<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
		<transparent>true</transparent>

		<!-- Whether the window is initially visible. Optional. Default false. -->
		<!-- <visible></visible> -->

		<!-- Whether the user can minimize the window. Optional. Default true. -->
		<!-- <minimizable></minimizable> -->

		<!-- Whether the user can maximize the window. Optional. Default true. -->
		<!-- <maximizable></maximizable> -->

		<!-- Whether the user can resize the window. Optional. Default true. -->
		<!-- <resizable></resizable> -->

		<!-- The window's initial width. Optional. -->
		<!-- <width></width> -->

		<!-- The window's initial height. Optional. -->
		<!-- <height></height> -->

		<!-- The window's initial x position. Optional. -->
		<!-- <x></x> -->

		<!-- The window's initial y position. Optional. -->
		<!-- <y></y> -->

		<!-- The window's minimum size, specified as a width/height pair, such as "400 200". Optional. -->
		<!-- <minSize></minSize> -->

		<!-- The window's initial maximum size, specified as a width/height pair, such as "1600 1200". Optional. -->
		<!-- <maxSize></maxSize> -->
	</initialWindow>

	<!-- The subpath of the standard default installation location to use. Optional. -->
	<!-- <installFolder></installFolder> -->

	<!-- The subpath of the Programs menu to use. (Ignored on operating systems without a Programs menu.) Optional. -->
	<!-- <programMenuFolder></programMenuFolder> -->

	<!-- The icon the system uses for the application. For at least one resolution,
		 specify the path to a PNG file included in the AIR package. Optional. -->
	<!-- <icon>
		<image16x16></image16x16>
		<image32x32></image32x32>
		<image48x48></image48x48>
		<image128x128></image128x128>
	</icon> -->

	<!-- Whether the application handles the update when a user double-clicks an update version
	of the AIR file (true), or the default AIR application installer handles the update (false).
	Optional. Default false. -->
	<!-- <customUpdateUI></customUpdateUI> -->
	
	<!-- Whether the application can be launched when the user clicks a link in a web browser.
	Optional. Default false. -->
	<!-- <allowBrowserInvocation></allowBrowserInvocation> -->

	<!-- Listing of file types for which the application can register. Optional. -->
	<!-- <fileTypes> -->

		<!-- Defines one file type. Optional. -->
		<!-- <fileType> -->

			<!-- The name that the system displays for the registered file type. Required. -->
			<!-- <name></name> -->

			<!-- The extension to register. Required. -->
			<!-- <extension></extension> -->
			
			<!-- The description of the file type. Optional. -->
			<!-- <description></description> -->
			
			<!-- The MIME content type. -->
			<!-- <contentType></contentType> -->
			
			<!-- The icon to display for the file type. Optional. -->
			<!-- <icon>
				<image16x16></image16x16>
				<image32x32></image32x32>
				<image48x48></image48x48>
				<image128x128></image128x128>
			</icon> -->
			
		<!-- </fileType> -->
	<!-- </fileTypes> -->

</xml>

Main.mxml
The layout is a header and a body. The header is set up to be the move area for the window. he header is the top_hg HGroup on line 60. The body is the SWFHeaderBasic component on line 62. Here you could swap another body view easily.

<?xml version="1.0" encoding="utf-8"?>
<!--- 
Main view
-->
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" 
		 xmlns:sf="http://www.spicefactory.org/parsley"
		 
		 width="100%" height="100%"
		 xmlns:views="views.*" 
		 xmlns:ui="ui.*"
		 >
	<fx:Script>
		<![CDATA[
			import ui.ApplicationCloseButtonSkin;
			/**
			 * Called once Parsley framework has reflected.
			 * */
			[Init]
			public function parsleyInit():void
			{
				top_hg.addEventListener(MouseEvent.MOUSE_DOWN, top_hg_onMouseDown);
			}
			/**
			 * Handler for top_hg MouseEvent.MOUSE_DOWN. Handles OS window move.
			 * */
			private function top_hg_onMouseDown( evt:MouseEvent):void 
			{ 
				stage.nativeWindow.startMove(); 
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<sf:Configure/>
	</fx:Declarations>
	<fx:Style>
		#appName_lbl {
			font-weight:bold;
			color: #291F65;
			font-size:18px;
		}
		#version_lbl {
			font-weight:bold;
			color: #291F65;
			font-size:10px;
		}
	</fx:Style>
	<s:VGroup width="100%" height="100%">
	<s:BorderContainer width="100%" height="100%"
					   cornerRadius="20" borderWeight="3" 
					   borderColor="0x000000" dropShadowVisible="true"
					   backgroundColor="#858282">
		<s:VGroup  verticalAlign="middle" width="100%" height="100%"
			paddingLeft="6" paddingRight="6" paddingBottom="12" 
				>
			<!--- 
			Appplication header and drag area.
			--> 			
			<s:HGroup id = "top_hg" width="100%"  verticalAlign="middle" paddingTop="12"  >
				<s:HGroup  paddingLeft="5" verticalAlign="middle" horizontalAlign="left" width="100%"  gap="30">
					<mx:Image source="@Embed(source='../assets/Adobe-swf_icon_40x40_published.png')" />
					<s:Label id = "appName_lbl" text = "SWF Header Inspection Tool"/>
				</s:HGroup>	
				<s:HGroup  paddingRight="12" verticalAlign="middle" horizontalAlign="right" width="100%"  >
					<ui:ApplicationCloseButton  
						click="NativeApplication.nativeApplication.exit()" skinClass="ui.ApplicationCloseButtonSkin"/>
					
				</s:HGroup>			
		
			</s:HGroup>
			<views:SWFHeaderBasic    width="100%" height="100%" />	
			<s:Label id = "version_lbl" text = "Version 1.00"/>
		</s:VGroup>

	</s:BorderContainer>
	</s:VGroup>	
</s:Group>

SWFHeaderBasic.mxml
Body section for the application. You can easily plug in your own view to replace this one.

<?xml version="1.0" encoding="utf-8"?>
<!--- 
Basic view.
-->
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:sf="http://www.spicefactory.org/parsley"
		 xmlns:mx="library://ns.adobe.com/flex/mx" 
		 >
	<fx:Script>
		<![CDATA[
			import events.LoadSwfUrlHeaderRequestEvent;
			import models.SWFHeaderModel;
			import mx.binding.utils.BindingUtils;
			import mx.binding.utils.ChangeWatcher;
			import mx.events.FlexEvent;
			/**
			 * File name extracted from url or path.
			 * */
			[Bindable]
			private var fileName:String = '';
			[Inject]
			[Bindable]
			public var model:SWFHeaderModel;

			[MessageDispatcher]
			public var dispatcher:Function;
			/**
			 * Called once Parsley framework has reflected.
			 * */
			[Init]
			public function parsleyInit():void
			{
				// Bind the model changes from bytesLoaded in order to call a method.
				ChangeWatcher.watch(model, "bytesLoaded", updateProgressBar);
				addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragEnterHandler);
				addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDropHandler);
			}
			/**
			 * Handler for the load_btn Mouse.Click event.
			 * */
			protected function load_btn_clickHandler(event:MouseEvent):void
			{
				fileName = url_ti.text.substr(   url_ti.text.lastIndexOf( '/' ) + 1);
				dispatcher(new LoadSwfUrlHeaderRequestEvent (LoadSwfUrlHeaderRequestEvent.LOAD, url_ti.text));
			}
			/**
			 * Handler for the load_btn Mouse.Click event.
			 * */
			private function updateProgressBar(bytesLoaded:Number):void
			{
				//trace (className + ".updateProgressBar(...) - model.bytesLoaded: " + model.bytesLoaded);	
				//trace (className + ".updateProgressBar(...) - model.bytesTotal: " + model.bytesTotal);	
				bar.setProgress(model.bytesLoaded,model.bytesTotal);
				var pct:Number = Math.round((model.bytesLoaded/model.bytesTotal) * 100);
				bar.label= "Current Progress" + " " + pct + "%";
			}
			/**
			 * Handler for the NativeDragEvent.NATIVE_DRAG_ENTER event.
			 * */
			private function onDragEnterHandler(e:NativeDragEvent):void
			{
				//trace (className + ".onDragEnterHandler(...)");	
				if(e.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT))
				{
					//Get the array of File objects
					var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
					var file:File = File(files[0]);
					//Allow only one file as only supporting one in this application and soft check it is a swf file.
					if( files.length == 1 && file.url.substr(file.url.length-4).toLowerCase() == ".swf" )
					{
						//Triggers NativeDragEvent.NATIVE_DRAG_DROP event. 
						//This is when we see the drop icon.
						NativeDragManager.acceptDragDrop(this);
					}
				}
			}
			/**
			 * Handler for the NativeDragEvent.NATIVE_DRAG_DROP event.
			 * */
			private function onDragDropHandler(e:NativeDragEvent):void
			{
				//trace (className + ".onDragDropHandler(...)");	
				var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
				var file:File = File(files[0]);
				//trace (className + ".onDragDropHandler(...) - file.url:" + file.url);
				url_ti.text = file.url;
				fileName = file.name;
				// Optional can initiate the load automatically.
				dispatcher(new LoadSwfUrlHeaderRequestEvent (LoadSwfUrlHeaderRequestEvent.LOAD, url_ti.text));
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<sf:Configure/>
		<mx:NumberFormatter id="numberFormatter" precision="0"  useThousandsSeparator="true" />
	</fx:Declarations>
	<!--- 
	Create NativeDrag target with BorderContainer
	--> 
	<s:BorderContainer 
				width="100%" height="100%"
					   borderAlpha="0"	
					   backgroundColor="0xffffff"
					   >
	<s:VGroup verticalAlign="top"  horizontalAlign="center" width="100%" height="100%"   
			   paddingTop="10"
			   >
		<s:HGroup >
			<s:Label  text="SWF URL:" paddingTop="6" />
			<s:VGroup >
				<s:HGroup  verticalAlign="middle">
				<s:TextInput id="url_ti" text="Enter swf http url or drag from desktop" width="294" />
				<s:Button  label="Load SWF" id="load_btn" click="load_btn_clickHandler(event)"/>	
				</s:HGroup>
				<!--- 
				Progress bar for slow loads such as the internet.
				--> 		
				<mx:ProgressBar id="bar"   labelPlacement="bottom" minimum="0" visible="true" maximum="100"
								color="0x323232" 
								label="Current Progress 0%" direction="right" 
								mode="manual" width="100%"/>
			</s:VGroup>
		</s:HGroup>
		<!--- 
		The result values
		--> 
		<mx:Form width="100%" height="100%"       >
			<mx:FormItem label="SWF File name: ">
				<s:Label color="0x000000" text="{fileName}"/>
			</mx:FormItem>
			<mx:FormItem label="Flash player version: ">
				<s:Label color="0x000000" text="{numberFormatter.format(model.swfHeader_vo.swfVersion)}"/>
			</mx:FormItem>
			<s:HGroup>
				<mx:FormItem label="Size uncompressed: ">
					<s:Label color="0x000000" text="{numberFormatter.format(model.swfHeader_vo.sizeUncompressed)}"/>
				</mx:FormItem>
				<mx:FormItem label="Compressed: ">
					<s:Label color="0x000000" text="{numberFormatter.format(model.swfHeader_vo.sizeCompressed)}"/>
				</mx:FormItem>			
			</s:HGroup>
			<mx:FormItem label="Frame rate: ">
				<s:Label color="0x000000" text="{numberFormatter.format(model.swfHeader_vo.frameRate)}"/>
			</mx:FormItem>
			<mx:FormItem label="Total frames: ">
				<s:Label color="0x000000" text="{numberFormatter.format(model.swfHeader_vo.totalFrames)}"/>
			</mx:FormItem>
			<mx:FormItem label="Width: ">
				<s:Label  color="0x000000" text="{numberFormatter.format(model.swfHeader_vo.width)}"/>
			</mx:FormItem>
			<mx:FormItem label="Height: ">
				<s:Label color="0x000000" text="{numberFormatter.format(model.swfHeader_vo.height)}"/>
			</mx:FormItem>
		</mx:Form>
	</s:VGroup>
	</s:BorderContainer>
</s:Group>

ApplicationCloseButton.as
Own version of the spark Button class.

package ui
{
	import spark.components.Button;
	/**
	 * Button to close the application
	 * */
	public class ApplicationCloseButton extends Button
	{
		public function ApplicationCloseButton()
		{
			super();
		}
	}
}

ApplicationCloseButtonSkin.mxml
Skin for the application close button class, ApplicationCloseButton. I had some trouble with the edges of the images causing a repeating state change on rollover. I solved this by making a transparent background on line 29 a few pixels larger than the bitmaps. The bitmaps then had their verticalCenter and horizontalCenter properities set to zero to keep them in the middle. See lines 34 and 36.

<?xml version="1.0" encoding="utf-8"?>
<!--- 
Skin for ui.ApplicationCloseButton
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
			 
			 alpha.disabled="0.5">
	
	<!-- host component -->
	<fx:Metadata>
		<![CDATA[
		/* @copy spark.skins.spark.ApplicationSkin#hostComponent 	*/
		[HostComponent("ui.ApplicationCloseButton")]
		]]>
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>
	<!--- 
	Hit area.
	-->	
	<s:Rect  left="0" right="0" top="0" bottom="0"  width="34" height="34">
		<s:fill>
			<s:SolidColor color="0xffffff" alpha="0" />
		</s:fill>	
	</s:Rect>
	<s:BitmapImage  verticalCenter="0"  horizontalCenter="0" source="@Embed('../assets/red_glossy_close_up_button_published.png')" 
				   includeIn="up, disabled, down "/>
	<s:BitmapImage verticalCenter="0"  horizontalCenter="0"  source="@Embed('../assets/green_glossy_close_up_button_published.png')" 
				   includeIn="over"/>
	
</s:SparkSkin>

ApplicationModel.as
I could have merged the two models, but as a practice in Parsley frameworks, I create an ApplicationModel by default.

package models
{
	/**
	 * Application model.
	 * */
	public class ApplicationModel
	{

	}
}

[ad name=”Google Adsense”]
SWFHeaderModel.as
The model containing all the bound data. Flex binding is magnificent for creating model-view-controller solutions.

package models
{
	import vo.SWFHeader_vo;
	/**
	 * Model for the SWF header information.
	 * */
	public class SWFHeaderModel
	{
		/**
		 * Swf header field values.
		 * */
		[Bindable]
		public var swfHeader_vo:SWFHeader_vo;
		/**
		 * Nest the ApplicationModel.
		 * */		
		[Inject]
		[Bindable]
		public var applicationModel:ApplicationModel;
		/**
		 * Bytes loaded.
		 * */
		[Bindable]
		public var bytesLoaded:Number;
		/**
		 * Total bytes to load.
		 * */		
		[Bindable]
		public var bytesTotal:Number;
		/**
		 * Initialize model values.
		 * */		
		public function SWFHeaderModel()
		{
			swfHeader_vo = new SWFHeader_vo();
		}
	}
}

ApplicationController.as
I could have created a controller just for the SWF header if I wanted a separate model-view-controller for SWF header decoupled from the application.

package controllers
{
	import events.LoadSwfUrlHeaderRequestEvent;
	import events.SWFHeaderLoaderCompleteEvent;
	import events.SWFHeaderLoaderErrorEvent;
	import events.SWFHeaderLoaderProgressEvent;
	import flash.net.URLRequest;
	import models.SWFHeaderModel;
	import mx.controls.Alert;
	import swf.SWFHeaderLoader;
	import vo.SWFHeader_vo;
	/**
	 * Application controller
	 * */
	public class ApplicationController
	{
		/**
		 * Toggle to indicate if an Alert error is being shown. All loading errors are 
		 * routed to one method and so if there are more than one per SWFHeaderLoader.load
		 * request, this prevents multiple Alert popups.
		 * @see swfHeaderErroMessageHandler
		 * */
		private var showingSwfLoadError:Boolean = false;
		/**
		 * The SWFHeaderLoader
		 * */
		[Inject]
		public var swfHeaderLoader:SWFHeaderLoader;
		/**
		 * The model for MVC.
		 * */
		[Inject]
		[Bindable]
		public var model:SWFHeaderModel;
		/**
		 * Information Alert dialog title.
		 * */
		private var lang_info_alert_title:String = "Attention";
		/**
		 * Message when file name does not contain a .swf extension.
		 * */
		private var lang_tool_requires_swf:String = "Tool is designed for Flash Movie \".swf\" files";
		/**
		 * Message when swf file could not be loaded for any reason.
		 * */
		private var lang_unable_to_load_swf:String = "Sorry, unable to load the file.";
		/**
		 * Handler for LoadSwfUrlHeaderRequestEvent. Validate file extension. Load swf.
		 * */
		[MessageHandler]
		public function swfUrlLoadRequestMessageHandler( message : LoadSwfUrlHeaderRequestEvent ):void
		{
			model.swfHeader_vo = new SWFHeader_vo();
			// File url does not have a .swf at end.
			if ( message.swf_url.substr(message.swf_url.length-4).toLowerCase() != ".swf"  )
			{
				Alert.show(lang_tool_requires_swf ,lang_info_alert_title);
			}
			// File url has a .swf at end.
			else
			{
				showingSwfLoadError = false;
				swfHeaderLoader.load(message.swf_url);
			}
		}
		/**
		 * Handler for SWFHeaderLoaderProgressEvent.
		 * */
		[MessageHandler]
		public function swfHeaderProgressMessageHandler( message : SWFHeaderLoaderProgressEvent ):void
		{
			model.bytesTotal = message.bytesTotal;
			model.bytesLoaded = message.bytesLoaded;
		}
		/**
		 * Handler for SWFHeaderLoaderCompleteEvent.
		 * */
		[MessageHandler]
		public function swfHeaderLoadedMessageHandler( message : SWFHeaderLoaderCompleteEvent ):void
		{
			model.swfHeader_vo = message.swfHeader_vo;
		}
		/**
		 * Handler for SWFHeaderLoaderErrorEvent.
		 * */
		[MessageHandler]
		public function swfHeaderErroMessageHandler( message : SWFHeaderLoaderErrorEvent ):void
		{
			if (!showingSwfLoadError)
			{
				showingSwfLoadError = true;
				Alert.show(lang_unable_to_load_swf,lang_info_alert_title);
			}
		}		
	}
}

LoadSwfUrlHeaderRequestEvent.as
Event handler for requests to load a swf. Note how Parsley simplifies the event code.

package events
{
	import flash.events.Event;
	/**
	 * Request the loading of a swf file.
	 * */
	public class LoadSwfUrlHeaderRequestEvent extends Event
	{
		public static const LOAD:String = "event.load";
		public var swf_url:String;
		public function LoadSwfUrlHeaderRequestEvent(type:String, swf_url:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			this.swf_url = swf_url;
		}
	}
}

SWFHeaderLoaderProgressEvent.as
For monitoring the loading particularly when over the internet.

package events
{
	import flash.events.Event;
	/**
	 * Progress of loading a swf file.
	 * */	
	public class SWFHeaderLoaderProgressEvent extends Event
	{
		public static const PROGRESS:String = "event_SWFHeaderLoaderEvent_progress";
		/**
		 * Bytes loaded.
		 * */	
		public var bytesLoaded:Number;
		/**
		 * Total bytes to load.
		 * */		
		public var bytesTotal:Number;
		public function SWFHeaderLoaderProgressEvent(type:String, bytesLoaded:Number, bytesTotal:Number, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			this.bytesLoaded = bytesLoaded;
			this.bytesTotal = bytesTotal;
			
		}
	}
}

SWFHeaderLoaderCompleteEvent.as
When an SWF is completely loaded. You may want to redesign to stop once the header is loaded. However I had thought it might be nice to show the SWF at one point or proceed to extract other information.

package events
{
	import flash.events.Event;
	import vo.SWFHeader_vo;
	/**
	 * Completion of loading a swf file.
	 * */
	public class SWFHeaderLoaderCompleteEvent extends Event
	{
		public static const COMPLETE:String = "event_SWFHeaderLoaderEvent_complete";
		/**
		 * Swf file header data.
		 * */	
		public var swfHeader_vo:SWFHeader_vo;
		public function SWFHeaderLoaderCompleteEvent(type:String, swfHeader_vo:SWFHeader_vo, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			this.swfHeader_vo = swfHeader_vo;
		}
	}
}

SWFHeaderLoaderErrorEvent.as
Errors in loading the Swf file.

package events
{
	import flash.events.Event;
	/**
	 * Errors from loading a swf file.
	 * */
	public class SWFHeaderLoaderErrorEvent extends Event
	{
		public static const SECURITY_ERROR:String = "event_SWFHeaderLoaderEvent_security";
		public static const HTTP_ERROR:String = "event_SWFHeaderLoaderEvent_HTTP";
		public static const IO_ERROR:String = "event_SWFHeaderLoaderEvent_IO";
		public function SWFHeaderLoaderErrorEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
	}
}
Categories
Articles

Vimeo Moogaloop Actionscript API In Flex 4

I wanted created a video switcher for Vimeo videos using Flex 4. I found my way to the Vimeo Moogaloop API page where there seemed to be a harmless Actionscript 3 class demonstrating a Flash application. Moogaloop is the name Vimeo uses for the embedded video player.

The Moogaloop player is a Flash movie that must be loaded into your Flash movie. The example on the Moogaloop API page is an example of that process. The Moogaloop player contains the API you need to interface with the video player once it is loaded.

The example showed an interface, api_loadVideo(id), to load a video into the Moogaloop player. The way the example worked is that loading of the Moogaloop player requires a video to load. Then the interface suggests this api_loadVideo is how you load a second.

I set up an Actionscript project in Flex Builder 4 and found the api_loadVideo(id) code was not loading videos. I posted my findings on the Vimeo api forum (see Does moogaloop.api_loadVideo( id); work in Flash example work?) and fairly promptly got a reply to try it again where it now worked. So it appeared I hit a bug and it was fixed.

I found more issues with switching videos with Moogaloop. They all centered around the video controls not maintaining a consistent state. After extended two day effort of multiple trial and error sessions, I solved most of the issues. The one issue still hanging is that the auto hide state of the player controls stays on after the first video plays. So if you load a second video, the player controls will auto hide until mouse rolls over the player. The user interface expectation of a new video being keyed for a first play is to have the player controls visible until the video plays. I added this observation to the original forum post to see if we get some updates that make switching videos more seamless to the user.

At this point I just have a Flex project for downloads.

[ad name=”Google Adsense”]
Application Class – VimeoMoogaloopEx01_Flex.mxml
This is the main MXML file. Nothing special here other than using the new SpriteVisualElement component to contain the VimeoPlayer class. There are two buttons switching the videos.

Note you must get an Application id from Vimeo and put that on line 21.

Also add Vimeo video ids on lines 25 and 29.

<?xml version="1.0" encoding="utf-8"?>
<!--
/**
* Demo of Vimeo Moogaloop video player switching between two videos.
* */
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   creationComplete="creationCompleteHandler(event)"
			   width="800" height="400">
	<fx:Script>
		<![CDATA[
			import com.vimeo.moogaloop.VimeoPlayer;
			
			import mx.events.FlexEvent;
			
			/**
			 * Vimeo developer id.
			 * */
			private const VIMEO_ID:String = "YOUR VIMEO APPLICATION ID GOES HERE";
			/**
			 * Vimeo video id for the first loaded video.
			 * */
			private const VIDEO_ID_1:int = PUT A VIMEO VIDEO ID HERE;
			/**
			 * Vimeo video id for the second video.
			 * */
			private const VIDEO_ID_2:int = PUT ANOTHER VIMEO VIDEO ID HERE;
			/**
			 * Properties for background
			 */
			private static const backgroundColor:Number = 0x333333;
			/**
			 * The Vimeo Moogaloop video player.
			 * */
			private var vimeoPlayer:VimeoPlayer;
			/**
			 * Event handler for creationComplete event.
			 * */
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				// Create the Vimeo VideoPlayer class instance.
				vimeoPlayer = new VimeoPlayer(VIMEO_ID,VIDEO_ID_1,460,300);
				// Add to SpriteVisualElement
				vimeoVideoPlayer.addChild(vimeoPlayer);
				// Disable the first video switching button.
				video1.enabled = false;
			}
			/**
			 * Event handler for the first video button MouseEvent.CLICK event.
			 * */
			protected function video1_clickHandler(event:MouseEvent):void
			{
				// Load the video.
				loadVideo(VIDEO_ID_1);
				// Reset the video switching button states.
				video1.enabled = false;
				video2.enabled = true;
			}
			/**
			 * Event handler for the second video button MouseEvent.CLICK event.
			 * */
			protected function video2_clickHandler(event:MouseEvent):void
			{
				// Load the video.
				loadVideo(VIDEO_ID_2);
				// Reset the video switching button states.
				video1.enabled = true;
				video2.enabled = false;
			}
			/**
			 * Loads a new video into the Vimeo Moogaloop player.
			 * */
			private function loadVideo(videoId:int):void
			{
				vimeoPlayer.loadVideo(videoId);
			}
		]]>
	</fx:Script>
	<!--
	UI
	--> 
	<s:BorderContainer id = "background_bc"
					   width="{width}" height = "{height}"
					   backgroundColor="{backgroundColor}">
		<s:layout>
			<s:VerticalLayout horizontalAlign="center"/>
		</s:layout>
		<s:SpriteVisualElement id = "vimeoVideoPlayer" width="460" height="350"/>
		<mx:HBox> 
			<s:Button id = "video1" label="Video 1" click="video1_clickHandler(event)" />
			<s:Button id = "video2" label="Video 2" click="video2_clickHandler(event)" />		
		</mx:HBox>
	</s:BorderContainer> 
</s:Application>

[ad name=”Google Adsense”]
VimeoPlayer Class
This is the class on the Vimeo Moogaloop API web site. It was modified to handle the mouse event override from the stage to the parent on line 108, removal of the player_mask Sprite and addition of seek and pause calls to the loadVideo method on lines 181 and 182.

Still not fully sure of the player_mask need for Flex. However upgrading the loader using Flex components is in order which I will explore if I stay with Vimeo for the project I have for a Vimeo user.

package com.vimeo.moogaloop
{
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	import flash.geom.Point;
	import flash.net.URLRequest;
	import flash.system.Security;
	import flash.utils.Timer;
	/**
	 * Vimeo Moogaloop player class from the Vimeo web site: http://vimeo.com/api/docs/moogaloop.
	 * <p>Modified to handle issues with playing in Flex. Mask removed. 
	 * See comments where other changes were made.</p>
	 * */
	public class VimeoPlayer extends Sprite
	{
		/**
		 * Sprite container for the Moogaloop Flash movie.
		 * */
		private var container:Sprite = new Sprite(); 
		/**
		 * The Moogaloop player.
		 * */
		private var moogaloop:Object = false; 
		/**
		 * Default width of the player.
		 * */
		private var player_width:int = 400;
		/**
		 * Default height of the player.
		 * */
		private var player_height:int = 300;
		/**
		 * Timer to delay until the Moogaloop Flash movies is loaded. Could be switched for a Flex component.
		 * */
		private var load_timer:Timer = new Timer(200);
		/**
		 * param oauth_key Vimeo developer key
		 * param clip_id Vimeo video id.
		 * param clip_id Vimeo video id.
		 * */
		public function VimeoPlayer(oauth_key:String, 
										   clip_id:int, 
										   w:int, 
										   h:int, 
										   fp_version:int = 10)
		{
			init(oauth_key, clip_id, w, h, fp_version);
		}
		/**
		 * Initialize and load Vimeo Moogaloop player.
		 * */
		private function init(oauth_key:String,
							  clip_id:int, 
							  w:int, 
							  h:int, 
							  fp_version:int = 10):void
		{
			this.setDimensions(w, h);
			Security.allowDomain("*");
			Security.loadPolicyFile("http://vimeo.com/moogaloop/crossdomain.xml");
			var loader:Loader = new Loader();
			var request:URLRequest = new URLRequest("http://api.vimeo.com/moogaloop_api.swf?oauth_key=" + oauth_key + "&clip_id=" + clip_id + "&width=" + w + "&height=" + h + "&fullscreen=0&fp_version=" + fp_version);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			loader.load(request);
		}
		/**
		 * Store the dimensions.
		 */
		private function setDimensions(w:int, h:int):void 
		{
			player_width  = w;
			player_height = h;
		}
		/**
		 * Handler for the URLRequest Event.COMPLETE event. Moogaloop Flash movie
		 * loading complete.
		 */
		private function onComplete(e:Event):void 
		{
			// Add Moogaloop Flash movie to container Sprite.
			container.addChild(e.target.loader.content);
			// Provide reference to Moogaloop Flash movie API.
			moogaloop = e.target.loader.content;
			// Add the container to this.
			addChild(container);
			// Timer to wait for Moogaloop Flash movie to complete setup.
			load_timer.addEventListener(TimerEvent.TIMER, playerLoadedCheck);
			load_timer.start();
		}
		/**
		 * Handler for load_timer TimerEvent.Timer event. 
		 * Check for Moogaloop to finish setting up.
		 */
		private function playerLoadedCheck(e:TimerEvent):void 
		{
			// Moogaloop is finished configuring
			if (moogaloop.player_loaded) 
			{
				load_timer.stop();
				load_timer.removeEventListener(TimerEvent.TIMER, playerLoadedCheck);
				// remove moogaloop's mouse listeners listener
				moogaloop.disableMouseMove();
				// Add MouseEvent.MOUSE_MOVE event listener to parent.
				// Original Vimeo code added to stage.
				parent.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
				// Broadcast COMPLETE event for Moogaloop loaded.
				dispatchEvent(new Event(Event.COMPLETE));
			}
		}
		/**
		 * Handler for parent MouseEvent.MOUSE_MOVE event.
		 * Fake the mouse move/out events for Moogaloop.
		 */
		private function mouseMove(e:MouseEvent):void 
		{
			var pos:Point = this.parent.localToGlobal(new Point(this.x, this.y));
			// Mouse event occured in this rectangle representing the player.
			if (e.stageX >= pos.x && e.stageX <= pos.x + this.player_width 
				&&
				e.stageY >= pos.y && e.stageY <= pos.y + this.player_height) 
			{
				moogaloop.mouseMove(e); // Not documented. You have to have faith.
			}
			else 
			{
				moogaloop.mouseOut(); // Not documented. You have to have faith.
			}
		}
		/**
		 * Play video in Moogaloop player.
		 */
		public function play():void 
		{
			moogaloop.api_play();
		}
		/**
		 * Pause video in Moogaloop player.
		 */
		public function pause():void 
		{
			moogaloop.api_pause();
		}
		/**
		 * returns duration of video in seconds
		 */
		public function getDuration():int 
		{
			return moogaloop.api_getDuration();
		}
		/**
		 * Seek to specific loaded time in video (in seconds)
		 */
		public function seekTo(time:int):void 
		{
			moogaloop.api_seekTo(time);
		}
		/**
		 * Change the primary color (i.e. 00ADEF)
		 */
		public function changeColor(hex:String):void 
		{
			moogaloop.api_changeColor(hex);
		}
		/**
		 * Set dimensions of this instance and Moogaloop player.
		 */
		public function setSize(w:int, h:int):void 
		{
			this.setDimensions(w, h);
			moogaloop.api_setSize(w, h);
		}
		/**
		 * Load in a different video. 
		 */
		public function loadVideo(id:int):void 
		{
			moogaloop.api_loadVideo(id);
			moogaloop.api_seekTo(0); 	// Added to code on Vimeo web site.
			moogaloop.api_pause(); 		// Added to code on Vimeo web site.
			
		}
	}
}

[ad name=”Google Adsense”]

Categories
Articles

Box2D Flash Puggle Lite Game Version of Peggle Nights


This is an update of Todd Kerpelman’s video tutorial of Puggle a game based on Peggle Nights using Box2DFlash, a free 2D physics engine for Flash that works in both Flash and Flex Builder 4. This is example involves a great deal of interaction of game components. For a simpler example of Box2d version 2.1 see my falling boxes example.

Todd’s Puggle game is really the example he uses to teach how to use Box2D. Todd’s version is based on Box2d 2.0 and I wanted to see how it applies to Box2D version 2.1. So I followed his tutorials and gleamed out the code and converted it. This was a painful process because the source code is not available and Todd spends a lot of time explaining concepts in his very helpful videos and went down some roads that he later changed perhaps to accentuate the right versus wrong way.

I did not reproduce all of the example Todd produced because I just ran out of time. However I got enough to put Puggle into working condition using Box2d 2.1 and also commented all the code extensively.

The Puggle Lite version composed from Todd’s work basically allows you to shoot balls from the gun at the top. You use the mouse to aim and fire. You can tune the code to determine the number of balls allowed in play at any one point in time. The source has this value set to 2.

A random selection of the pegs in the middle of the game are designated as goals. The remaining pegs are just that, pegs. They are colored to show goals as yellow and others as blue. They change color when hit and are removed once any ball in play leaves the game.

The moving chute at the bottom is a bonus if a ball falls into it. The game does not track points and perhaps something you may want to add.

You can build this with the free Flex SDK by using the code in the src folder and be sure to include a path to the Box2DFlash 2.1a library. For Flash CS3 and later versions, you need to create a Flash Document in the src folder and set the document class to HelloWorldFallingBoxes01 and then add a library path to the code or SWC if you created one. For your convenience the Flash CS4 example download is included with the needed SWC.

Also for Flash CS3 on up you will need some Flex library swc files because of the use of the Embed meta tag. Tareq AlJaber has good article on embedding meta data in Flash CS4.

Downloads

You can download Box2dFlash to work with the source, get the API documentation and more examples. I included a SWC library for version 2.1a in the example downloads so you will know they work despite what happens at Box2dFlash.org.

Another item used in this example is the Greensock Tweening library TweenLite for animations such as fade out. The SWC library is included in the downloads for your convenience.

This article shows the code for the Flex project. The main difference is how we stitch in the game sprites into the main class using the SpriteVisualElement.
[ad name=”Google Adsense”]
Application Class – HelloWorldPuggle01
There are a number of customization constants. I tried to extract all the data in buried in the code from Todd’s examples, but fell short for the side wall ramps. I prefer to have data either as members or other source and not buried in code.

The customization constants SHOW_BOX2D_DEBUG and SHOW_BOX2D_DEBUG_AS_OVERLAY on lines 127 and 134 respectively are useful in looking at the Box2D world visually. This helps in checking if the game assets, we call costumes, are synchronized with their physical representation in Box2D data.

The MAX_LAUNCED_BALLS_ALLOWED on line 57 is also helpful in testing. Run the number higher and more balls can be launched speeding up game action and shortening time to see coding changes.

Basically the Box2d world and the Shooter actor are created . The game is set up in the createLevel method we will visit in a later code block.

<?xml version="1.0" encoding="utf-8"?>
<!--
/**
* Demonstration of Box2D 2.1a converting Todd Kerpelman's Puggle Box2d 2.0 version 
of Peggle Nights.
* */
--><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   applicationComplete="applicationCompleteHandler(event)"
			   width = "646"
			   height = "603"
			   frameRate="30"
			>
	   <fx:Script>
		   <![CDATA[
			   import Box2D.Collision.Shapes.b2CircleShape;
			   import Box2D.Common.Math.b2Vec2;
			   import Box2D.Dynamics.b2Body;
			   import Box2D.Dynamics.b2BodyDef;
			   import Box2D.Dynamics.b2DebugDraw;
			   import Box2D.Dynamics.b2FixtureDef;
			   import Box2D.Dynamics.b2World;
			   import mx.events.FlexEvent;
			   /**
				* Properties for background
				* @see background_bc
				*/
			   private static const backgroundColor:Number = 0x333333;
			   /**
				* Tracking of all actors to call their methods.
				* */
			   private var _actors:Array;
			   /**
				* Tracking of all actors that need to be removed after each update of the Box2dWorld.
				* */
			   private var _actorsTaggedForRemoval:Array;
			   /**
				* Tracking of all peg actors that have been hit.
				* */
			   private var _pegsLitUp:Array;
			   /**
				* Tracking of all peg actors that are considered goal targets.
				* */
			   private var _goalPegs:Array;
			   /**
				* Shooter actor.
				* */
			   private var _shooter:Shooter;
			   /**
				* Total balls launched.
				* */
			   private var _totalBallsLaunced:int = 0;
			   /**
				* Maximum balls that can be in play at a time. 
				* */
			   private const MAX_LAUNCED_BALLS_ALLOWED:int = 2;
			   /**
				* Time to simulate world. Set Box2D world time step to movie frame rate. 
				* Box2D manual recommends 1/60 seconds.
				* */
			   private const STEP_SIMULATION_TIME:Number = 1 / 30;
			   /**
				* Box2D interations for the velocity constraint solver
				* */
			   private const STEP_VELOCITY_ITERATIONS:int = 6;
			   /**
				* Box2D interations for the position constraint solver
				* */
			   private const POSITION_VELOCITY_ITERATIONS:int = 10;
			   /**
				* Horizontal spacing of PegActors.
				* */
			   private const PEG_H_SPACING:int = 36;
			   /**
				* Vertical spacing of PegActors.
				* */
			   private const PEG_V_SPACING:int = 36;
			   /**
				* Boundaries for the PegActors.
				* */
			   private const PEG_BOUNDARIES:Rectangle = new Rectangle(114, 226, 418, 255);
			   /**
				* Game side wall thickness.
				* */
			   private const SIDE_WALL_THICKNESS:Number = 10;
			   /**
				* Game side wall height.
				* */
			   private const SIDE_WALL_HEIGHT:Number = 603;
			   /**
				* Position of left wall.
				* */
			   private const LEFT_WALL_POSITION:Point = new Point(0,0);
			   /**
				* Position of right wall.
				* */
			   private const RIGHT_WALL_POSITION:Point = new Point(636,0);
			   /**
				* Left boundary of movable BonusChuteActor.
				* */
			   private const BONUS_CHUTE_LEFT_BOUNDS:int = 20;
			   /**
				* Right boundary of movable BonusChuteActor.
				* */
			   private const BONUS_CHUTE_RIGHT_BOUNDS:int = 433;
			   /**
				* Vertical position of the BonusChuteActor.
				* */
			   private const BONUS_CHUTE_VERTICAL_POSITION:int = 575;
			   /**
				* Position for the Shooter actor.
				* */
			   private const SHOOTER_POINT:Point = new Point(323,10);
			   /**
				* Velocity for the BallActors
				* */
			   private const LAUNCH_VELOCITY:Number = 90;
			   /**
				* Number of PegActors set as goal targets.
				* */
			   private const GOAL_PEG_NUM:int = 22;
			   /**
				* Developer testing for visualization of the Box2D elements using b2DebugDraw. 
				* Determines if b2DebugDraw is added to stage and called.
				* */
			   private const SHOW_BOX2D_DEBUG:Boolean = false;
			   /**
				* Developer b2DebugDraw visual is shown on top of visual actors. False the 
				* visual actors hide the b2DebugDraw visuals unless removed or are not occupying
				* the intended position of the actors the Box2d world represents. Can be useful
				* to see the removal process of actors and their Box2d counterparts when set to false.
				* */
			   private const SHOW_BOX2D_DEBUG_AS_OVERLAY:Boolean = true;
			   /**
				* Handler for applicationComplete event. Setup world and begin animation.
				* */
			   protected function applicationCompleteHandler(event:FlexEvent):void
			   {
				   trace("applicationCompleteHandler(...)");
				   // Initialize member variables.
				   _actors = new Array();
				   _actorsTaggedForRemoval = new Array();
				   _pegsLitUp = new Array();
				   _goalPegs = new Array();
				   _shooter = new Shooter();
				   // Add the Shooter actor
				   box2DContainer.addChild(_shooter);
				   _shooter.x = SHOOTER_POINT.x;
				   _shooter.y = SHOOTER_POINT.y;
				   // Create the Box2d world.
				   setupPhysicsWorld();
				   // Create the game elements other than the Shooter.
				   createLevel();
				   // The ENTER_FRAME event will drive the updates to the Box2d world.
				   addEventListener (Event.ENTER_FRAME, enterFrameHandler);
				   // Handle the mouse clicks to the stage.
				   stage.addEventListener(MouseEvent.CLICK, stageMouseClickHandler);

			   }

The setupPhysicsWorld method creates a Box2D 2.1 world and checks for the state to display the debug data to be shown under the game assets using the SHOW_BOX2D_DEBUG_AS_OVERLAY constant. In the createLevel method, there is the opposite case for the more likely need of showing the debug data over the assets.

Another debugging trick is to open Actor classes and set their “costume” visual visible property to false. Then you can see the Box2d world visual representation without the game visual representation.

Line 175 routes Box2d world body contact incidents to the PuggleContactListener class discussed in a later code block.

The addDebugDraw method determines if the debug data is shown at all.

			   /**
				* Creates the Box2dWorld
				* */
			   private function setupPhysicsWorld():void
			   {
				   // Create world. Gravity and let sleeping babies be.
				   PhysiVals.world = new b2World(new b2Vec2(0,9.8), true);
				   
				   // Add b2DebugDraw under the visual actors.
				   if (!SHOW_BOX2D_DEBUG_AS_OVERLAY)
				   {
					   addDebugDraw();
				   }
				   // Set the class to handle Box2d objects contacting each other.
				   PhysiVals.world.SetContactListener(new PuggleContactListener());
			   }
			   /**
				* b2DebugDraw visualization for Box2d. 
				* */
			   private function addDebugDraw():void
			   {
				   //Debugging visualization for Box2d. Will appear under the actors.
				   if (SHOW_BOX2D_DEBUG)
				   {
					   var debugSprite:Sprite = new Sprite();
					   box2DContainer.addChild(debugSprite);
					   var debugDraw:b2DebugDraw = new b2DebugDraw();
					   debugDraw.SetSprite(debugSprite);
					   debugDraw.SetDrawScale(PhysiVals.RATIO);
					   debugDraw.SetLineThickness( 1.0);
					   debugDraw.SetAlpha(1);
					   debugDraw.SetFillAlpha(0.4);
					   debugDraw.SetFlags(b2DebugDraw.e_shapeBit);
					   PhysiVals.world.SetDebugDraw(debugDraw);
				   }
			   }

The createLevel method adds the PegActors in staggered rows and randomizes some of the PegActors to be goals. It also creates the game walls and ramps.

A big distinction that Box2D 2.1 uses over previous versions is the b2Fixture for each body to determine collisions.

			   /**
				* The only game level. Creates the walls, pegs, the ramps and the bonus chute.
				* */
			   private function createLevel():void
			   {
				   // Horizontal spacing of PegActors
				   var hSpacing:int = PEG_H_SPACING;
				   // Vertical spacing of PegActors
				   var vSpacing:int = PEG_V_SPACING;
				   // Rectangle boundaries of PegActors
				   var pegBounds:Rectangle = PEG_BOUNDARIES;
				   // Is odd numbered row
				   var oddRow:Boolean = false;
				   // Array of all PegActors created
				   var allPegs:Array = new Array();
				   // Loop from the top to the bottom of the PegActor boundaries until filled vertically.
				   for (var pegY:int = pegBounds.top; pegY < pegBounds.bottom; pegY += vSpacing)
				   {
					   // The starting x position of the PegActor is 0 or half of horizonal spacing 
					   // depending upon even or odd row state.
					   var startX:int = pegBounds.left + ((oddRow) ? 0: (hSpacing / 2));
					   // Flip odd row state.
					   oddRow = ! oddRow;
					   // Loop from the left to the right of the PegActor boundaries until filled horizontally.
					   for (var pegX:int = startX; pegX < pegBounds.right; pegX += hSpacing)
					   {
						   // Create new PegActor in PegActor.NORMAL state
						   var newPeg:PegActor = new PegActor(box2DContainer, new Point (pegX, pegY), PegActor.NORMAL);
						   // Add listener for PegEvent.PEG_LIT_UP.
						   newPeg.addEventListener(PegEvent.PEG_LIT_UP, pegEventHandler);
						   // Add listener for PegEvent.PEG_FADE_OUT_COMPLETE.
						   newPeg.addEventListener(PegEvent.PEG_FADE_OUT_COMPLETE, pegEventHandler);
						   // Add PegActor to actor tracking array.
						   _actors.push(newPeg);
						   // Add PegActor to local tracking array.
						   allPegs.push(newPeg);
					   }
				   }
				   // For the number of PegActors to set to PegActor.GOAL state.
				   for (var i:int = 0; i < GOAL_PEG_NUM; i++)
				   {
					   // Select a PegActor randomly from local tracking array
					   var randomPegNum:int = Math.floor(Math.random() * allPegs.length);
					   // Set the PegActor to PegActor.GOAL state.
					   PegActor(allPegs[randomPegNum]).setType(PegActor.GOAL);
					   _goalPegs.push(allPegs[randomPegNum]);
					   // Remove PegActor from local tracking array.
					   allPegs.splice(randomPegNum, 1);
				   }
				   // Dimensions for the walls
				   var wallShapeCoords:Array = new Array();
				   wallShapeCoords.push(
					   new Array(
						   new Point(0,0), 
						   new Point(SIDE_WALL_THICKNESS,0), 
						   new Point(SIDE_WALL_THICKNESS,SIDE_WALL_HEIGHT), 
						   new Point(0,SIDE_WALL_HEIGHT)
					   )
				   );
				   //Create the left wall.
				   var leftWall:ArbiStaticActor = new ArbiStaticActor(box2DContainer, LEFT_WALL_POSITION, wallShapeCoords);
				   _actors.push(leftWall);
				   //Create the right wall.
				   var rightWall:ArbiStaticActor = new ArbiStaticActor(box2DContainer, RIGHT_WALL_POSITION, wallShapeCoords);
				   _actors.push(rightWall);
				   // Dimensions for the left ramps.
				   var leftRampCoords:Array = new Array();
				   leftRampCoords.push(
					   new Array(
						   new Point(0,0), 
						   new Point(79,27), 
						   new Point(79,30), 
						   new Point(0,3)
					   )
				   );
				   // Add left ramps
				   var leftRamp1:ArbiStaticActor = new ArbiStaticActor(box2DContainer, new Point(0,265), leftRampCoords);
				   _actors.push(leftRamp1);
				   var leftRamp2:ArbiStaticActor = new ArbiStaticActor(box2DContainer, new Point(0,336), leftRampCoords);
				   _actors.push(leftRamp2);
				   var leftRamp3:ArbiStaticActor = new ArbiStaticActor(box2DContainer, new Point(0,415), leftRampCoords);
				   _actors.push(leftRamp3);
				   // Dimensions for the right ramps
				   var rightRampCoords:Array = new Array();
				   rightRampCoords.push(
					   new Array(
						   new Point(0,0), 
						   new Point(0, 3), 
						   new Point(-85,32), 
						   new Point(-85,29)
					   )
				   );
				   // Add the right ramps
				   var rightRamp1:ArbiStaticActor = new ArbiStaticActor(box2DContainer, new Point(646, 232), rightRampCoords);
				   _actors.push(rightRamp1);
				   var rightRamp2:ArbiStaticActor = new ArbiStaticActor(box2DContainer, new Point(646, 308), rightRampCoords);
				   _actors.push(rightRamp2);
				   var rightRamp3:ArbiStaticActor = new ArbiStaticActor(box2DContainer, new Point(646, 388), rightRampCoords);
				   _actors.push(rightRamp3);
				   // Create the bonus chute
				   var bonusChute:BonusChuteActor = new BonusChuteActor(box2DContainer, 
					   BONUS_CHUTE_LEFT_BOUNDS,
					   BONUS_CHUTE_RIGHT_BOUNDS, 
					   BONUS_CHUTE_VERTICAL_POSITION);
				   _actors.push(bonusChute);
				   // Add b2DebugDraw over the visual actors.
				   if (SHOW_BOX2D_DEBUG_AS_OVERLAY)
				   {
					   addDebugDraw();
				   }
			   }

Updating the world involves calling the Box2D world Step method. Then all the game Actor classes updateNow methods are called. Finally all the Actors tagged for removal are removed from the game. The tag and remove methodology is necessary to avoid instability in Box2D.

			   /**
				* Game ENTER_FRAME event handler.
				* */
			   private function enterFrameHandler(e:Event):void
			   {
				   updateWorld();
			   }
			   /**
				* .
				* */
			   private function updateWorld():void
			   {
				   // Step simulation time
				   var timeStep:Number = STEP_SIMULATION_TIME;
				   // Step velocity iterations
				   var velocityIterations:int = STEP_VELOCITY_ITERATIONS;
				   // Step position interactions
				   var positionIterations:int = POSITION_VELOCITY_ITERATIONS;
				   //Collision detection, integration, and constraint solutions performed.
				   PhysiVals.world.Step( timeStep, velocityIterations, positionIterations);
				   // As of version 2.1 we must clear the forces.
				   PhysiVals.world.ClearForces();
				   // You want to show debug visualizations.
				   if (SHOW_BOX2D_DEBUG)
				   {
					   PhysiVals.world.DrawDebugData();
				   }
				   // Update all the Actors.
				   for each (var actor:Actor in _actors)
				   {
					   actor.updateNow();
				   }
				   // Remove actors tagged for removal.
				   removeActors();
			   }
			   /**
				* Marks an actor for removal
				* */
			   public function markActorForRemoval(actor:Actor):void
			   {
				   if (_actorsTaggedForRemoval.indexOf(actor) < 0 )
				   {
					   _actorsTaggedForRemoval.push(actor);
				   }
			   }
			   /**
				* Remove actors. Calls their destroy methods.
				* */
			   private function removeActors():void
			   {
				   // Each Actor tagged for removal.
				   for each (var actor:Actor in _actorsTaggedForRemoval)
				   {
					   // This is a BallActor.
					   if (actor is BallActor)
					   {
						   // Reduce counter for number of BallActors in play.
						   _totalBallsLaunced --;
					   }
					   // Destroy the actor using its destroy() method.
					   actor.destroy();
					   // Remove Actor from the actors tracking array.
					   var actorIndex:int = _actors.indexOf(actor);
					   if (actorIndex > -1)
					   {
						   _actors.splice(actorIndex, 1);
					   }
				   }
				   // Reset the actors tagged for removal tracking array.
				   _actorsTaggedForRemoval = new Array();
			   }

This code handles the BallActor creation and launching. It also show handling the BallEvent.BALL_OFF_SCREEN and BALL_HIT_BONUS events.

			   
                            /**
			     * Handler for stage MouseEvent.CLICK.
			     * */
			   private function stageMouseClickHandler(e:MouseEvent):void
			   {
				   launchBall();
			   }
			   /**
				* Launch a new ball.
				* */
			   private function launchBall():void
			   {
				   
				   if (_totalBallsLaunced < MAX_LAUNCED_BALLS_ALLOWED)
				   {
					   // Get the launch position from the Shooter.
					   var launchPoint:Point = _shooter.getLaunchPosition();
					   // Subtract the coordinates of launch point from the mouse point to get direction.
					   var direction:Point = new Point(mouseX,mouseY).subtract(launchPoint);
					   // Scale by the LAUNCH_VELOCITY.
					   direction.normalize(LAUNCH_VELOCITY);
					   
					   // Create a BallActor
					   var ballActor:BallActor = new BallActor(box2DContainer, launchPoint, direction);
					   ballActor.addEventListener(BallEvent.BALL_OFF_SCREEN, ballOffScreenEventHandler);
					   ballActor.addEventListener(BallEvent.BALL_HIT_BONUS, ballHitBonusEventHandler);
					   _actors.push(ballActor);
					   _totalBallsLaunced++
				   }
			   }
			   /**
				* Handler for BallEvent.BALL_HIT_BONUS
				* */
			   private function ballHitBonusEventHandler(e:BallEvent):void
			   {
				   var ballActor:BallActor = BallActor(e.currentTarget);
				   markActorForRemoval(ballActor);
				   removePegActors();
				   ballActor.removeEventListener(BallEvent.BALL_HIT_BONUS,ballHitBonusEventHandler);
			   }
			   /**
				* Handler for BallEvent.BALL_OFF_SCREEN
				* */		
			   private function ballOffScreenEventHandler(e:BallEvent):void
			   {
				   var ballActor:BallActor = BallActor(e.currentTarget);
				   markActorForRemoval(ballActor);
				   removePegActors();
				   ballActor.removeEventListener(BallEvent.BALL_OFF_SCREEN,ballOffScreenEventHandler);
			   }

[ad name=”Google Adsense”]
Once a PegActor is hit, the process involves using Tweener to fade out the peg. The process starts in removePegActors method on line 433 and ends in the pegFadeOutState method on line 472 via the pegEventHandler method, on line 446, that handles the PegEvent.PEG_FADE_OUT_COMPLETE event .

The hit processing is handled in the pegEventHandler with PegEvent.PEG_LIT_UP event and adds the PegActor hit to the _pegsLitUp tracking array in the pegLitUpState method which you also see used in the removePegActors method to trigger the fade out process for PegActors in a lit up state.

	
			   /**
				* Fade out peg actors that have been hit (lit up). Removed from the array of lit up PegActors
				* and the fade out eventually leads to their removal.
				* */		
			   private function removePegActors():void
			   {
				   var pegNumber:int = 0;
				   for each (var pegActor:PegActor in _pegsLitUp)
				   {
					   pegActor.fadeOut(pegNumber);
					   pegNumber++;
				   }
				   _pegsLitUp = new Array();
			   }
			   /**
				* Handler for the PegActor PegEvent.PEG_LIT_UP and PegEvent.PEG_FADE_OUT_COMPLETE events.
				* */		
			   private function pegEventHandler(e:PegEvent):void
			   {
				   switch (e.type)
				   {
					   case PegEvent.PEG_LIT_UP:
						   pegLitUpState(PegActor(e.currentTarget));
						   break;
					   case PegEvent.PEG_FADE_OUT_COMPLETE:
						   pegFadeOutState(PegActor(e.currentTarget));
						   break;
				   }
			   }
			   /**
				* Add tracking for PegActors that are lit up.
				* */		
			   private function pegLitUpState(pegActor:PegActor):void
			   {
				   pegActor.removeEventListener(PegEvent.PEG_LIT_UP,pegEventHandler);
				   if (_pegsLitUp.indexOf(pegActor) < 0 )
				   {
					   _pegsLitUp.push(pegActor);
				   }
			   }
			   /**
				* Tag PegActors for removal if they have faded out.
				* */		
			   private function pegFadeOutState(pegActor:PegActor):void
			   {
				   _actorsTaggedForRemoval.push(pegActor);
			   }			   
		   ]]>
	   </fx:Script>

SpriteVisualElement is a simple way to show Sprites in Flex.

	
	   <!--
	   Background for app 
	   --> 
	   <s:BorderContainer id = "background_bc"
						  width="{width}" height = "{height}"
						  backgroundColor="{backgroundColor}">
		   
		   <!--
		   Container for the Box2D world
		   -->
		   <s:SpriteVisualElement id = "box2DContainer" />
	   </s:BorderContainer> 
</s:Application>

Shooter Class
The functionality for the shooter is basically to rotate to aim towards the mouse and providing the starting point for the BallActors to launch. These are handled in the alignToMouse, on line 46, and getLaunchPosition, on line 57, methods respectively.

The graphics source and published files are included in the downloads. Many measurements are based on the graphic and so you can open them for viewing to see where values like BALL_OFFSET are derived.

The Shooter is not added to the Box2D world to simplify coding as there is no expectation of the Box2D world’s bodies coming into contact with it. You might want to include it if you expect collisions.

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import mx.core.BitmapAsset;
	/**
	 * Defines the game shooter.
	 * */	
	public class Shooter extends Sprite
	{
		/**
		 * Using an embedded graphic.
		 * */
		[Embed(source="assets/shooter_published.png")] 
		private var ShooterGraphic:Class;		
		/**
		 * Starting stage position of BallActor relative to this Shooter.
		 * */
		private const BALL_OFFSET:Point = new Point(70,0);
		/**
		 * Constructor.
		 * */	
		public function Shooter()
		{
			// Create an instance for the graphic
			var shooterImg:BitmapAsset = new ShooterGraphic();
			// Center registration point.
			shooterImg.x -= shooterImg.width / 2;
			shooterImg.y -= shooterImg.height / 2;
			// Add the graphic
			addChild(shooterImg);
			// Listen for ENTER_FRAME events.
			this.addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);
		}
		/**
		 * Handler for the ENTER_FRAME event.
		 * */
		private function enterFrameEventHandler(e:Event):void
		{
			alignToMouse();
		}
		/**
		 * Shooter aims at the mouse position.
		 * */
		private function alignToMouse():void
		{
			// Compute the angle to the mouse.
			var mouseAngle:Number = Math.atan2(
				this.stage.mouseY - this.y,
				this.stage.mouseX - this.x) * 180 / Math.PI;
			this.rotation = mouseAngle;
		}
		/**
		 * Provide the starting stage position for BallActors.
		 * */
		public function getLaunchPosition():Point
		{
			return (localToGlobal(BALL_OFFSET));
		}
	}
}

Actor Class
This defines the basic structure of the game pieces. It keeps a reference to game piece’s b2Body and the visual component called _costume.

Most of the methods are overridden in subclasses. However the updating of the costume positions with the Box2D world is done here in the updateMyLook method on line 59. Line 46 contains the pubic interface for updating Actors which first calls updateMyLook and then allows subclasses to perform any child specific tasks.

Line 368 of the HelloWorldPuggle01 class removeActors method call the destroy method you see here on line 75. That method then calls cleanUpBeforeRemoving method, on line 82, that removes the costume and the b2Body for the Actor.

package
{
	import Box2D.Dynamics.b2Body;
	import flash.display.DisplayObject;
	import flash.events.EventDispatcher;
	import flash.events.IEventDispatcher;
	/**
	 * Defines requirements for all game actors and retains references to Box2d body and the actor's costume.
	 * */	
	public class Actor extends EventDispatcher
	{
		protected var _body:b2Body;
		protected var _costume:DisplayObject;
		/**
		 * Constructor
		 * @param body Box2D body for Actor
		 * @param costume is the visual for the Actor.
		 * */	
		public function Actor(body:b2Body, costume:DisplayObject)
		{
			_body = body;
			_costume = costume;
			// Store instance in the Box2D body for use as needed.
			_body.SetUserData(this);
			// Update the visual costume.			
			updateMyLook();
		}
		/**
		 * Handle being hit by another actor. 
		 * @param actor The actor hiting this actor.
		 * */	
		public function hitByActor(actor:Actor):void
		{
			// OVERRIDE IN EXTENDED ACTOR CLASS.
		}
		/**
		 * Handle hitting the bonus chute. 
		 * */	
		public function hitBonusTarget():void
		{
			// OVERRIDE IN EXTENDED ACTOR CLASS.
		}
		/**
		 * Updates the actor.
		 * */	
		public function updateNow():void
		{
			// This is a dynamic Actor needing its costume synchronized.
			if ( _body.GetType() == b2Body.b2_dynamicBody)
			{
				updateMyLook();
			}
			// Include any extended class updating specific to that class.
			childSpecificUpdating();
		}
		/**
		 * Updates the actor's costume position and angle.
		 * */	
		private function updateMyLook():void
		{
			_costume.x = _body.GetPosition().x * PhysiVals.RATIO;
			_costume.y = _body.GetPosition().y * PhysiVals.RATIO;
			_costume.rotation = _body.GetAngle() * 180 / Math.PI;
		}		
		/**
		 * Expected to be overridden by children
		 * */
		protected function childSpecificUpdating():void
		{
			// OVERRIDE IN EXTENDED ACTOR CLASS.
		}
		/**
		 * Handle permanent remove of Actor from game.
		 * */
		public function destroy():void
		{
			cleanUpBeforeRemoving();
		}
		/**
		 * Handles removal of Actor's costume and removal from the Box2D world.
		 * */
		protected function cleanUpBeforeRemoving():void
		{
			// Remove the costume.
			_costume.parent.removeChild(_costume);
			// Remove the Box2D representation.
			PhysiVals.world.DestroyBody(_body);
		}
	}
}	

BallShape Class
This is a simple graphic to depict a ball for the BallActor and PegActor. You could embellish it with bitmaps or more enhanced vector drawing.

package
{
	import flash.display.Sprite;
	/**
	 * Draws a filled circle to represent a ball
	 * */
	public class BallShape extends Sprite
	{
		/**
		 * The circle radius.
		 * */
		private var _radius:Number;
		/**
		 * The circle color.
		 * */
		private var _color:uint;
		/**
		 * param radius Radius of ball in pixels.
		 * param color Color of ball.
		 * */
		public function BallShape(radius:Number = 30, color:uint=0xff0000)
		{
			// Consume the parameters into member variables.
			_radius = radius;
			_color = color;
			// Draw the circle.
			draw();
		}
		/**
		 * Draws the circle
		 * */
		private function draw():void
		{
			graphics.clear();
			graphics.beginFill(_color);
			graphics.drawCircle(0, 0, _radius);
			graphics.endFill();
		}
		/**
		 * Set the fill color.
		 * */
		public function set color(colorVal:uint):void
		{
			_color = colorVal;
			draw();
		}
	}
}

BallActor Class
The class defines the Box2D representation of our ball bullets.

Two other functions are the dispatches of the BallEvent.BALL_HIT_BONUS and BallEvent.BALL_OFF_SCREEN events on line 67 and 78 respectively.

The PuggleContactListener class calls the hitBonusTarget method on line 64 for collisions.

The BallEvent.BALL_OFF_SCREEN allows the BallActor to handled for removal in the HelloWorldPuggle01 class ballOffScreenEventHandler method.

The BallEvent.BALL_HIT_BONUS currently just results in the BallActor targeting for removal in the HelloWorldPuggle01 class ballHitBonusEventHandler method. However, you can consider adding scoring logic there if you like.

package
{
	import Box2D.Collision.Shapes.b2CircleShape;
	import Box2D.Common.Math.b2Vec2;
	import Box2D.Dynamics.b2Body;
	import Box2D.Dynamics.b2BodyDef;
	import Box2D.Dynamics.b2FixtureDef;
	import flash.display.DisplayObjectContainer;
	import flash.display.Sprite;
	import flash.geom.Point;
	/**
	 * Defines ball game elements that user shoots.
	 * */
	public class BallActor extends Actor
	{
		/**
		 * The diameter for the ball
		 * */
		public static const BALL_DIAMETER:int = 12;
		/**
		 * Constructor
		 * @param parent Display container for the BallActor
		 * @param location Starting position in Box2dWorld
		 * @param initVel The starting velocity.
		 * */
		public function BallActor(parent:DisplayObjectContainer, location:Point, initVel:Point)
		{
			// Create the costume.
			var ballSprite:Sprite = new BallShape();
			ballSprite.scaleX = BALL_DIAMETER / ballSprite.width;
			ballSprite.scaleY = BALL_DIAMETER / ballSprite.height;
			// Add costume to display container.
			parent.addChild(ballSprite);
			
			// Create a b2BodyDef
			var bodyDef:b2BodyDef = new b2BodyDef();
			// This is a dynamic Box2D body.
			bodyDef.type = b2Body.b2_dynamicBody;
			// Position the BallActor body.
			bodyDef.position.Set(location.x / PhysiVals.RATIO,location.y / PhysiVals.RATIO);
			// Create the b2Body to represent the ballSprite
			var ballBody:b2Body= PhysiVals.world.CreateBody(bodyDef);
			// Body is to be treated for multiple collisions.
			ballBody.SetBullet(true);
			// Create b2CircleShape to represent this body. 
			var dynamicCircle:b2CircleShape = new b2CircleShape();
			dynamicCircle.SetRadius(BALL_DIAMETER / 2 / PhysiVals.RATIO);
			// Define b2FixtureDef - the collision detection wrapper. 
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.shape = dynamicCircle;
			fixtureDef.density = 1.5;
			fixtureDef.friction = 0;
			fixtureDef.restitution = 0.45;
			// Create b2FixtureDef - the collision detection wrapper. 
			ballBody.CreateFixture(fixtureDef);
			// Set velocity
			var velocityVector:b2Vec2 = new b2Vec2( initVel.x / PhysiVals.RATIO, initVel.y / PhysiVals.RATIO);
			ballBody.SetLinearVelocity(velocityVector); 
			super(ballBody, ballSprite);
		}
		/**
		 * Bonus target hit by this BallActor.
		 * */
		override public function hitBonusTarget():void
		{
			// Broadcast the BallEvent.BALL_HIT_BONUS event.
			dispatchEvent(new BallEvent(BallEvent.BALL_HIT_BONUS));
		}
		/**
		 * Handle the specific items for updates.
		 * */
		override protected function childSpecificUpdating():void
		{
			// Off the stage.
			if (_costume.y > PhysiVals.STAGE_HEIGHT )
			{
				// Broadcast the BallEvent.BALL_OFF_SCREEN event.
				dispatchEvent(new BallEvent(BallEvent.BALL_OFF_SCREEN));
			}
		}
	}
}

BallEvent Class
Just a basic Actionscript event class for BallActor events.

package
{
	import flash.events.Event;
	/**
	 * Defines events for BallActors
	 * */	
	public class BallEvent extends Event
	{
		public static const BALL_OFF_SCREEN:String = "ballOffScreen";
		public static const BALL_HIT_BONUS:String = "ballHitBonus";
		public function BallEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
		public override function clone():Event
		{
			return new BallEvent(type,bubbles,cancelable);
		}
	}
}

PegActor Class
The first main responsibility is to create both the costume and b2Body for the peg in the constructor.

The HelloWorldPuggle01 class removePegActors method calls the fadeOut method on line 101 where Tweener does the fade out.

The completion of fade out then triggers the PegEvent.PEG_FADE_OUT_COMPLETE event in fadeOutCompleteHandler on line 110.

The hitByActor method on line 134 is called by the PuggleContactListener for collisions. Here the state is updated and the PegEvent.PEG_LIT_UP is fired for handling in the HelloWorldPuggle01 pegEventHandler and pegLitUpState methods.

The checkPegType method on line 124 is guarantees correct values in setting NORMAL or GOAL states.

The setPegState method on line 149 sets the costume state of the PegActor.

package
{
	import Box2D.Collision.Shapes.b2CircleShape;
	import Box2D.Dynamics.b2Body;
	import Box2D.Dynamics.b2BodyDef;
	import Box2D.Dynamics.b2FixtureDef;
	import com.greensock.TweenLite;
	import flash.display.DisplayObjectContainer;
	import flash.geom.Point;
	/**
	 * Defines circle peg actor.
	 * */
	public class PegActor extends Actor
	{
		/**
		 * Normal state for PegActor
		 * */
		public static const NORMAL:int = 1;
		/**
		 * Goal state for PegActor
		 * */
		public static const GOAL:int = 2;
		/**
		 * Color for NORMAL PegActor hit state.
		 * */
		private const NORMAL_HIT_COLOR:Number = 0xff0000;
		/**
		 * Color for NORMAL PegActor not hit state.
		 * */
		private const NORMAL_NOT_HIT_COLOR:Number = 0x0000ff;
		/**
		 * Color for GOAL PegActor hit state.
		 * */
		private const GOAL_HIT_COLOR:Number = 0x00ff00;
		/**
		 * Color for GOAL PegActor not hit state.
		 * */
		private const GOAL_NOT_HIT_COLOR:Number = 0xffff00;
		/**
		 * Diameter for PegActor
		 * */
		private static const PEG_DIAMETER:int = 19;
		/**
		 * Hit state.
		 * */
		private var _beenHit:Boolean = false;
		/**
		 * Type of NORMAL or GOAL.
		 * */
		private var _pegType:int;
		/**
		 * Costume as a BallShape.
		 * */
		private var _pegSprite:BallShape;
		/**
		 * Constructor
		 * @param parent Display container for the PegActor
		 * @param location Location of the PegActor.
		 * @param pegType Valid _pegType.
		 * */
		public function PegActor(parent:DisplayObjectContainer, location:Point, pegType:int)
		{
			// Consume parameters to member variables.
			_pegType = pegType;
			
			// Create the costume
			_pegSprite = new BallShape();
			_pegSprite.scaleX = PEG_DIAMETER / _pegSprite.width;
			_pegSprite.scaleY = PEG_DIAMETER / _pegSprite.height;
			// Add to display container.
			parent.addChild( _pegSprite );
			// Create the body definitions.
			var bodyDef:b2BodyDef = new b2BodyDef();
			// Set the body as static.
			bodyDef.type = b2Body.b2_staticBody;
			bodyDef.position.Set( location.x / PhysiVals.RATIO, location.y / PhysiVals.RATIO );
			// Create the b2Body to represent the pegSprite.
			var pegBody:b2Body= PhysiVals.world.CreateBody( bodyDef );
			// Create a b2CircleShape for the Box2D world.
			var b2_circleShape:b2CircleShape = new b2CircleShape();
			b2_circleShape.SetRadius( PEG_DIAMETER / 2 / PhysiVals.RATIO );
			// Define the collision detection fixture.
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			// Set the fixture shape to the circle.
			fixtureDef.shape = b2_circleShape;
			fixtureDef.density = 0;
			fixtureDef.friction = 0;
			fixtureDef.restitution = .45;
			// Add the fixture to the BonusChute b2Body.
			pegBody.CreateFixture(fixtureDef);
			// Call super before throw statements
			super(pegBody, _pegSprite);
			// Check the pegType value.
			checkPegType(pegType);
			// Update the state.			
			setPegState();
		}
		/**
		 * Fade out the costume.
		 * */
		public function fadeOut(pegNumber:int):void
		{
			TweenLite.to(_costume, 0.3, {alpha:0, delay: .08 * pegNumber, onComplete: fadeOutCompleteHandler});
		}
		/**
		 * Handler for TweenLite onComplete event. Costume fade out complete.
		 * */
		private function fadeOutCompleteHandler():void
		{
			dispatchEvent(new PegEvent(PegEvent.PEG_FADE_OUT_COMPLETE));
		}
		/**
		 * Set the pegType.
		 * */
		public function setType(pegType:int):void
		{
			checkPegType(pegType);
			_pegType = pegType;
			setPegState();
		}
		/**
		 * Validator for pegType input.
		 * */
		private function checkPegType(pegType:int):void
		{
			if (pegType != NORMAL && pegType != GOAL)
			{
				throw(new Error("PegActor setType should be PegActor.NORMAL || PegActor.GOAL"));
			}
		}
		/**
		 * Process a collision with other Actors.
		 * */
		public override function hitByActor(actor:Actor):void
		{
			// Not in hit state.
			if (! _beenHit) 
			{
				_beenHit = true;
				setPegState();
				// Broadcase the change to a hit state.
				dispatchEvent(new PegEvent(PegEvent.PEG_LIT_UP));
			}
		}
		/**
		 * Set the state of the peg based on hit state and peg type. 
		 * Set the costume look to represent the state.
		 * */
		private function setPegState():void
		{
			if (_pegType == NORMAL)
			{
				if (_beenHit)
				{
					_pegSprite.color = NORMAL_HIT_COLOR;
				}
				else
				{
					_pegSprite.color = NORMAL_NOT_HIT_COLOR;
				}
			}
			else if (_pegType == GOAL)
			{
				if (_beenHit)
				{
					_pegSprite.color = GOAL_HIT_COLOR;
				}
				else
				{
					_pegSprite.color = GOAL_NOT_HIT_COLOR;
				}
			}
		}
	}
}

PegEvent Class
Defines the events for PegActors.

package
{
	import flash.events.Event;
	/**
	 * Defines events for PegActors
	 * */	
	public class PegEvent extends Event
	{
		public static const PEG_LIT_UP:String = "pegLitUp";
		public static const PEG_FADE_OUT_COMPLETE:String = "pegFadeOutComplete";
		public function PegEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
		public override function clone():Event
		{
			return new PegEvent(type,bubbles,cancelable);
		}
	}
}

BonusChuteActor Class
Most of the code is consumed by creating the b2Body. The b2Body creation on line 99. The b2Body is made of three parts. There are two ramps on the left and right side that BallActor will bounce off. The center marks the point the BallActor can pass into the BonusChute. I broke the creation of these parts into separate methods on lines 127, 170 and 213 respectively.

The work is done in the childSpecificUpdating method on line 263. This mainly positions and moves the BonusChute in the HelloWorldPuggle01 updateWorld method. It also keeps the BonusChute within the boundaries.

package
{
	import Box2D.Collision.Shapes.b2PolygonShape;
	import Box2D.Common.Math.b2Vec2;
	import Box2D.Dynamics.b2Body;
	import Box2D.Dynamics.b2BodyDef;
	import Box2D.Dynamics.b2FixtureDef;
	import flash.display.DisplayObjectContainer;
	import flash.geom.Point;
	import mx.core.BitmapAsset;
	/**
	 * Defines bonus chute element. This moves left and right automatically.
	 * */
	public class BonusChuteActor extends Actor
	{
		/**
		 * Using an embedded graphic.
		 * */
		[Embed(source="assets/bonus_chute_published.png")] 
		private var BonusChute:Class;
		
		/**
		 * Container for the graphic.
		 * */
		private var _bonusChute:BitmapAsset
		/**
		 * Identifies this as a bonus target and is passed along in the b2FixtureDef as user data.
		 * */
		public static const BONUS_TARGET:String = "BonusTarget";
		/**
		 * Moving left.
		 * */
		private static const LEFT:int = -1;
		/**
		 * Moving right.
		 * */
		private static const RIGHT:int = 1;
		/**
		 * Index in _bounds for the left boundary.
		 * */
		private static const LEFT_BOUND_INDEX:int = 0;
		/**
		 * Index in _bounds for the right boundary.
		 * */
		private static const RIGHT_BOUND_INDEX:int = 1;
		/**
		 * Speed in pixels.
		 * */
		private static const TRAVEL_SPEED:int = 2;
		/**
		 * The b2Body.
		 * */
		private var _chuteBody:b2Body
		/**
		 * Boundary data.
		 * */
		private var _bounds:Array;
		/**
		 * Vertical position.
		 * */
		private var _yPos:int;
		/**
		 * Current direction.
		 * */
		private var _direction:int;
		/**
		 * Display container
		 * */
		private var _displayContainer:DisplayObjectContainer;
		/**
		 * Constructor
		 * @param parent Display container for the BonusChuteActor
		 * @param leftBounds Left boundary.
		 * @param rightBounds Right boundary.
		 * @param yPos Verticle position.
		 * */
		public function BonusChuteActor(parent:DisplayObjectContainer, leftBounds:int, rightBounds:int, yPos:int)
		{
			// Consume arguments.
			_bounds = [leftBounds, rightBounds];
			_yPos = yPos;
			_direction = RIGHT; 
			_displayContainer = parent;
			
			// Create the Box2D body.
			create_b2Body();
			// Add the left ramp b2Polygon.
			createLeftRamp();
			// Add the right ramp b2Polygon.
			createRightRamp();
			// Add the center hole b2Polygon.
			createCenterHole()
			
			super(_chuteBody, _bonusChute);
		}
		/**
		 * Create the Box2d body for BonusChute.
		 * */
		private function create_b2Body():void
		{
			var leftBounds:int = _bounds[0];
			var rightBounds:int = _bounds[1];
			// Costume
			_bonusChute = new BonusChute();
			// Add costume to display container.
			_displayContainer.addChild(_bonusChute);
			// Set center as registration point.
			_bonusChute.x -= _bonusChute.width / 2;
			_bonusChute.y -= _bonusChute.height / 2;
			//_bonusChute.visible = false;  // For testing just the b2Body
			// Create b2BodyDef.
			var chuteBodyDef:b2BodyDef = new b2BodyDef();
			// This is a dynamic b2Body.
			chuteBodyDef.type = b2Body.b2_dynamicBody;
			// Does not rotate.
			chuteBodyDef.fixedRotation = true;
			// Set position converted into the physical values.
			chuteBodyDef.position.Set(
				(leftBounds + rightBounds) / 2 / PhysiVals.RATIO, 
				_yPos / PhysiVals.RATIO);
			// Create the b2Body.
			_chuteBody = PhysiVals.world.CreateBody(chuteBodyDef);
		}
		/**
		 * Create the left ramp to deflect BallActors that miss the chute opening
		 * */
		private function createLeftRamp():void
		{
			// Box2d polygon shape.
			var polyShape:b2PolygonShape;
			// Define b2FixtureDef - the collision detection wrapper. 
			var fixtureDef:b2FixtureDef;
			// Polygon points.
			var listOfPointVectors:Array;
			// Each polygon point.
			var v1:b2Vec2;
			var v2:b2Vec2;
			var v3:b2Vec2;
			// Left ramp pixels converted into the b2World dimensions.
			// Need to explore the BonusChute graphic for pixel dimensions.
			listOfPointVectors = new Array();
			v1 = new b2Vec2();
			v1.x = 1 / PhysiVals.RATIO;
			v1.y = 25 / PhysiVals.RATIO;
			listOfPointVectors.push(v1);
			v2 = new b2Vec2();
			v2.x = 19 / PhysiVals.RATIO;
			v2.y = 10 / PhysiVals.RATIO;
			listOfPointVectors.push(v2);
			v3 = new b2Vec2();
			v3.x = 18 / PhysiVals.RATIO;
			v3.y = 25 / PhysiVals.RATIO;
			listOfPointVectors.push(v3);
			// Create the b2PolygonShape.
			polyShape = new b2PolygonShape();
			polyShape.SetAsArray( listOfPointVectors, listOfPointVectors.length);
			// Define the collision detection fixture.
			fixtureDef = new b2FixtureDef();
			// Assign the b2Polygon shape.
			fixtureDef.shape = polyShape;
			fixtureDef.density = 1;
			fixtureDef.friction = .1;
			fixtureDef.restitution = 0.6;
			// Add the fixture to the BonusChute b2Body.
			_chuteBody.CreateFixture(fixtureDef);
		}
		/**
		 * Create the right  ramp to deflect BallActors that miss the chute opening
		 * */
		private function createRightRamp():void
		{
			// Box2d polygon shape.
			var polyShape:b2PolygonShape;
			// Define b2FixtureDef - the collision detection wrapper. 
			var fixtureDef:b2FixtureDef;
			// Polygon points.
			var listOfPointVectors:Array;
			// Each polygon point.
			var v1:b2Vec2;
			var v2:b2Vec2;
			var v3:b2Vec2;
			// Right ramp pixels converted into the b2World dimensions.
			// Need to explore the BonusChute graphic for pixel dimensions.
			listOfPointVectors = new Array();
			v1 = new b2Vec2();
			v1.x = 150 / PhysiVals.RATIO;
			v1.y = 25 / PhysiVals.RATIO;
			listOfPointVectors.push(v1);
			v2 = new b2Vec2();
			v2.x = 150 / PhysiVals.RATIO;
			v2.y = 10 / PhysiVals.RATIO;
			listOfPointVectors.push(v2);
			v3 = new b2Vec2();
			v3.x = 167 / PhysiVals.RATIO;
			v3.y = 25 / PhysiVals.RATIO;
			listOfPointVectors.push(v3);
			// Create the b2PolygonShape.
			polyShape = new b2PolygonShape();
			polyShape.SetAsArray( listOfPointVectors, listOfPointVectors.length);
			// Define the collision detection fixture.
			fixtureDef = new b2FixtureDef();
			// Assign the b2Polygon shape.
			fixtureDef.shape = polyShape;
			fixtureDef.density = 1;
			fixtureDef.friction = .1;
			fixtureDef.restitution = 0.6;
			// Add the fixture to the BonusChute b2Body
			_chuteBody.CreateFixture(fixtureDef);
		}
		/**
		 * Create the center chute opening
		 * */
		private function createCenterHole():void
		{
			// Box2d polygon shape.
			var polyShape:b2PolygonShape;
			// Define b2FixtureDef - the collision detection wrapper. 
			var fixtureDef:b2FixtureDef;
			// Polygon points.
			var listOfPointVectors:Array;
			// Each polygon point.
			var v1:b2Vec2;
			var v2:b2Vec2;
			var v3:b2Vec2;
			var v4:b2Vec2;
			// Right ramp pixels converted into the b2World dimensions.
			// Need to explore the BonusChute graphic for pixel dimensions.
			listOfPointVectors = new Array();
			v1 = new b2Vec2();
			v1.x = 19 / PhysiVals.RATIO;
			v1.y = 10 / PhysiVals.RATIO;
			listOfPointVectors.push(v1);
			v2 = new b2Vec2();
			v2.x = 150 / PhysiVals.RATIO;
			v2.y = 10 / PhysiVals.RATIO;
			listOfPointVectors.push(v2);
			v3 = new b2Vec2();
			v3.x = 150 / PhysiVals.RATIO;
			v3.y = 25 / PhysiVals.RATIO;
			listOfPointVectors.push(v3);
			v4 = new b2Vec2();
			v4.x = 18 / PhysiVals.RATIO;
			v4.y = 25 / PhysiVals.RATIO;
			listOfPointVectors.push(v4);
			// Create the b2PolygonShape.
			polyShape = new b2PolygonShape();
			polyShape.SetAsArray( listOfPointVectors, listOfPointVectors.length );
			// Define the collision detection fixture.
			fixtureDef = new b2FixtureDef();
			// Assign the b2Polygon shape.
			fixtureDef.shape = polyShape;
			fixtureDef.density = 1;
			fixtureDef.friction = .1;
			fixtureDef.restitution = 0.6;
			fixtureDef.isSensor = true;
			fixtureDef.userData = BONUS_TARGET;
			// Add the fixture to the BonusChute b2Body
			_chuteBody.CreateFixture(fixtureDef);
		}
		/**
		 * Handle the specific items for updates.
		 * */
		override protected function childSpecificUpdating():void
		{
			// Hit right boundary.
			if (_costume.x >= _bounds[RIGHT_BOUND_INDEX] )
			{
				_direction = LEFT;
			}
			// Hit left boundary.
			else if (_costume.x <= _bounds[LEFT_BOUND_INDEX] )
			{
				_direction = RIGHT;
			}
			// New location in pixels.
			var idealLocation:b2Vec2 = new b2Vec2(
				_costume.x + ( _direction * TRAVEL_SPEED),
				_yPos);
			// Distance to travel in one frame in pixels.
			var directionToTravel:b2Vec2 = new b2Vec2(
				idealLocation.x - _costume.x, 
				idealLocation.y - _costume.y);
			// Distance to travel in one frame in meters
			directionToTravel.Multiply( 1 / PhysiVals.RATIO );
			// The distance in one second in meters.
			directionToTravel.Multiply(PhysiVals.FRAME_RATE);
			// Set linear velocity of the center of mass.
			_chuteBody.SetLinearVelocity(directionToTravel);
			// Peform any generic child specific updating.
			super.childSpecificUpdating();
		}
	}
}

ArbiStaticActor Class
A generic class for creating static Actors like walls and ramps.

package
{
	import Box2D.Collision.Shapes.b2PolygonShape;
	import Box2D.Common.Math.b2Vec2;
	import Box2D.Dynamics.b2Body;
	import Box2D.Dynamics.b2BodyDef;
	import Box2D.Dynamics.b2FixtureDef;
	import flash.display.DisplayObjectContainer;
	import flash.display.Sprite;
	import flash.geom.Point;
	/**
	 * Defines generic static actors such as walls and ramps.
	 * */
	public class ArbiStaticActor extends Actor
	{
		/**
		 * Constructor
		 * @param parent Display container for the ArbiStaticActor
		 * @param location Location of the ArbiStaticActor.
		 * @param coordinates Point coordinates for the ArbiStaticActor.
		 * */
		public function ArbiStaticActor(parent:DisplayObjectContainer, location:Point, coordinates:Array)
		{
			// Create the b2Body.
			var myBody:b2Body = createBodyFromCoordinates(coordinates, location);
			// Create the costume.
			var mySprite:Sprite = createSpriteFromCoordinates( coordinates, location, parent);
			super (myBody, mySprite);
		}
		/**
		 * Create the costume for the AribStaticActor.
		 * @param coordinates Point coordinates for the ArbiStaticActor.
		 * @param location Location of the ArbiStaticActor.
		 * @param parent Display container for the ArbiStaticActor
		 * */
		private function createSpriteFromCoordinates(coordinates:Array, location:Point, parent:DisplayObjectContainer):Sprite
		{
			// Create a Sprite to represent the ArbiStaticActor.
			var newSprite:Sprite = new Sprite();
			newSprite.graphics.lineStyle(2, 0x00bb00);
			// Each point array.
			for each ( var listOfPoints:Array in coordinates )
			{
				var firstPoint:Point = listOfPoints[0];
				newSprite.graphics.moveTo(firstPoint.x, firstPoint.y);
				newSprite.graphics.beginFill(0x00bb00);
				// Each point.
				for each (var newPoint:Point in listOfPoints)
				{
					newSprite.graphics.lineTo(newPoint.x,newPoint.y);
				}
				newSprite.graphics.lineTo(firstPoint.x, firstPoint.y);
				newSprite.graphics.endFill();
			}
			newSprite.x = location.x;
			newSprite.y = location.y;
			parent.addChild(newSprite);
			return newSprite;
		}
		/**
		 * Create the b2Body for the AribStaticActor.
		 * @param coordinates Point coordinates for the ArbiStaticActor.
		 * @param location Location of the ArbiStaticActor.
		 * @param parent Display container for the ArbiStaticActor
		 * */
		private function createBodyFromCoordinates(coordinates:Array, location:Point):b2Body
		{	
			// Create the b2Body definitions.
			var bodyDef:b2BodyDef = new b2BodyDef();
			bodyDef.type = b2Body.b2_staticBody;
			bodyDef.position.Set(location.x / PhysiVals.RATIO, location.y / PhysiVals.RATIO);
			// Create the b2Body.
			var arbiBody:b2Body= PhysiVals.world.CreateBody(bodyDef);
			// Each point array.
			for each (var listOfPoints:Array in coordinates)
			{
				var listOfPointVectors:Array = new Array();
				// Each point.
				for (var i:int = 0; i < listOfPoints.length; i++)
				{
					var v:b2Vec2 = new b2Vec2();
					var nextPoint:Point = listOfPoints[i];
					// Convert to b2World measurements.
					v.x = nextPoint.x / PhysiVals.RATIO;
					v.y = nextPoint.y / PhysiVals.RATIO;
					listOfPointVectors.push(v);
				}
				// Create polygon shape.
				var polyShape:b2PolygonShape = new b2PolygonShape();
				polyShape.SetAsArray( listOfPointVectors, listOfPointVectors.length);
				// Define the collision detection fixture.
				var fixtureDef:b2FixtureDef = new b2FixtureDef();
				// Assign the b2Polygon shape.
				fixtureDef.shape = polyShape;
				fixtureDef.density = 0;
				fixtureDef.friction = .2;
				fixtureDef.restitution = 0.3;
				// Add the fixture to the b2Body.
				arbiBody.CreateFixture(fixtureDef);
			}
			return arbiBody;
		}
	}
}

[ad name=”Google Adsense”]
PuggleContactListener Class
On line 175 of the HelloWorldPuggle01 setupPhysicsWorld() method, this class is assigned as the b2worlds’s contact listener.

Collisions occurring during the Step method updating of the b2World fire contact events and they are received here. The BeginContact event handler on line 21 does the work we need. We are either calling the Actor’s hitByActor method as shown on lines 31 and 36 or the hitBonusTarget method on lines 43 and 50.

The BeginContact method provides GetFixtureA and GetFixtureB to represent the collision. From them we use data stored in b2Bodies or b2Fixturesto determine the Actors involved with collisions.

For example the BonusChute class createCenterHole method stores user data on line 256: fixtureDef.userData = BONUS_TARGET;. Here we see on line 40 and 47 testing for that value when user data is a String.

The other case is when the user data contains an Actor we can determine if the Actor is a PegActor or BallActor as on lines 29 and 34.

You can work out your own method of supplying and testing for user data depending on your own code.

package
{
	import Box2D.Collision.b2Manifold;
	import Box2D.Dynamics.Contacts.b2Contact;
	import Box2D.Dynamics.b2ContactListener;
	/**
	 * Handler for collisions in b2World.
	 * */	
	public class PuggleContactListener extends b2ContactListener
	{
		/**
		 * Constructor.
		 * */	
		public function PuggleContactListener()
		{
			super();
		}
		/**
		 * Contact started. Notify actors involved.
		 * */	
		override public function BeginContact(contact:b2Contact):void
		{
			// Extract user data from contacting Actors.
			var actorA:Actor = contact.GetFixtureA().GetBody().GetUserData();
			var actorB:Actor = contact.GetFixtureB().GetBody().GetUserData();
			var actorAFixtureUserData:* = contact.GetFixtureA().GetUserData();
			var actorBFixtureUserData:* = contact.GetFixtureB().GetUserData();
			// BallActor and PegActor contacted.
			if (actorA is PegActor && actorB is BallActor)
			{
				actorA.hitByActor(actorB);
			}
			// BallActor and PegActor contacted.
			else if (actorB is PegActor && actorA is BallActor)
			{
				actorB.hitByActor(actorA);
			} 
			// BallActor contacted BonusChuteActor.BONUS_TARGET.
			else if (actorAFixtureUserData is String 
				&& actorAFixtureUserData == BonusChuteActor.BONUS_TARGET
				&& actorB is BallActor)
			{
				actorB.hitBonusTarget()
			}
			// BallActor contacted BonusChuteActor.BONUS_TARGET.
			else if (actorBFixtureUserData is String 
				&& actorBFixtureUserData == BonusChuteActor.BONUS_TARGET
				&& actorA is BallActor)
			{
				actorA.hitBonusTarget()
			}
			super.BeginContact(contact);
		}
		/**
		 * Contact ended.
		 * */	
		override public function EndContact(contact:b2Contact):void
		{
			super.EndContact(contact);
		}
	}
}

PhysiValsClass

A place to store some of the values used across classes. The key value is the RATIO that converts the pixel world into the physics world’s meters.

package
{
	import Box2D.Dynamics.b2World; 

	public class PhysiVals
	{
		public static const STAGE_HALF_WIDTH:int = 323;
		public static const STAGE_HEIGHT:int = 603;
		private static var _instance:PhysiVals;			// Singleton instance
		public static const RATIO:Number = 30;
		public static const FRAME_RATE:Number = 30;
		private static var _world:b2World;
		
		public function PhysiVals(pvt:PhysiValsPrivateClass)
		{
		}
		/**
		 * Singleton instantiation method
		 * */
		public static function getInstance():PhysiVals
		{
			if (PhysiVals._instance == null)
			{
				PhysiVals._instance = new PhysiVals( new PhysiValsPrivateClass() );

			}
			return PhysiVals._instance;
		}
		public static function get world():b2World	
		{
			return _world
		}
		public static function set world(world:b2World):void	
		{
			_world = world;
		}
	}
}

/**
 * Singleton enforcer class
 * */
class PhysiValsPrivateClass
{
	public function PhysiValsPrivateClass()
	{
		
	}
}

Categories
Articles

Flixel Hello World Basic Shooter Game in Flash and Flex

Decided to try an Actionscript 3 game engine and chose Flixel to start. I started late afternoon Halloween and when the devil (local neighbor in costume) showed up with treats and pizza, I was well on the way.

The Flixel site lead me off to a “hello world” space ship shooter game laid out by Andreas Zecher. He has a nice incremental tutorial that shows the changes if you follow it. I decided to create my own game pieces and also comment all the code so I understood on a line by line basis what was happening. I also made some changes to data moving it out of the code to at least the class member level. This post shows the results of the work.

I am using version Flixel version 2.35 because and included a swc in the download files so you do not need to download it.

You can build this with the free Flex SDK by using the code in the src folder and be sure to include a path to the Flixel library. For Flash CS3 and later versions, you need to create a Flash Document in the src folder and set the document class to Main and then add a library path to the Flixel 2.35 code or SWC if you created one. For your convenience the Flash CS4 example download is included with a Flixel 2.35 SWC.

Also for Flash CS3 on up you will need some Flex library swc files because of the use of the Embed meta tag. Tareq AlJaber has good article on embedding meta data in Flash CS4.

This article shows the code for the Flex project.

Application Class – Main
The applicationCompleteHandler creates Flixel game instance variable named flxGame. It is easily added to the Flex SpriteVisualElement and we are off and playing.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   applicationComplete="applicationCompleteHandler(event)"
			   width = "644"
			   height = "484"
			   >
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			import org.flixel.FlxGame;
			/**
			 * Set the preloader.
			 * */
			[Frame(factoryClass="Preloader")]
			/**
			 * Properties for background
			 * @see background_bc
			 */
			private static const backgroundColor:Number = 0x333333;
			/**
			 * The Flixel game.
			 */
			private var flxGame:FlxGame;
			/**
			 * Handler for applicationComplete event. Setup world and begin animation.
			 * */
			protected function applicationCompleteHandler(event:FlexEvent):void
			{
				trace( className + ".applicationCompleteHandler(...)");
				flxGame = new FlxGame(640, 480, PlayState, 1 ); 
				box2DContainer.addChild(flxGame);
				// Offset to show box2DContainer evenly.
				flxGame.x = 1;
				flxGame.y = 1;
			}			
		]]>
	</fx:Script>
	<!--
	Background for app 
	--> 
	<s:BorderContainer id = "background_bc"
					   width="{width}" height = "{height}"
					   
					   backgroundColor="{backgroundColor}">
		
		<!--
		Container for the FlxGame
		-->
		<s:SpriteVisualElement id = "box2DContainer" />
	</s:BorderContainer> 
</s:Application>

[ad name=”Google Adsense”]
PlayState Class
The PlayState class does the real game specific details. Flixel does the rest of the work.

Overall the plan is to have a player space ship pointing to the right only and that moves up, down, left and right with arrow keys. The spacebar is used for firing bullets. Enemy space ships appear of the right and travel left with a slight sine wave. Collisions of bullets with enemy ships terminates them in an explosion. Collision of the player ship with an enemy ship terminates both ships and ends the game.

Enemy ships are added in more frequently as the game progress. Bullets are unlimited and have no repetition governor.

The create method on line 88 sets the game up and starts the game. In 2.5 seconds the first enemy ship appears.

The update method on line 116 represents the testing for player input and collisions. Lines 119 and 121 detect collisions.

Lines 123 – 127 test for starting the game which is done by detecting if the player ship is inactive (“dead”) and the ENTER key is pressed. Game in play is based on the player ship being active.

Lines 128 – 133 set the flag to fire a bullet when the SPACE BAR is pressed.

Lines 135 – 144 simple detect if it is time to add another enemy ship and to call resetSpawnTimer() on line 173 that adjusts the timer to a smaller interval.

The handler for an enemy ship hit with a bullet is the overlapAlienBullet method on line 188. Basically the enemy ship and bullet are destroyed and broken into exploding pixels. That code I have not studied but is handled by the createEmitter() method on line 228 and the FlxEmitter class.

The overlapAlienShip method on line 207 handles an enemy ship colliding with the play ship. The game is rendered inactive at this point, however enemy ships keep showing up in larger numbers: something I did not bother to fix. The game gets a shake using the FlxG.quake.start method on line 214.

package
{
	import org.flixel.FlxEmitter;
	import org.flixel.FlxG;
	import org.flixel.FlxGroup;
	import org.flixel.FlxPoint;
	import org.flixel.FlxSprite;
	import org.flixel.FlxState;
	import org.flixel.FlxText;
	import org.flixel.FlxU;
	
	public class PlayState extends FlxState
	{
		/**
		 * Player ship.
		 * */
		private var _playerShip:PlayerShip;
		/**
		 * FlxGroup for EnemyShip objects.
		 * */
		private var _enemyShips:FlxGroup;
		/**
		 * FlxGroup for player ship bullets
		 * */
		private var _bullets:FlxGroup;
		private var _enemyShipSpawnTimer:Number;
		/**
		 * Starting number of seconds that new enemy ships are spawned.
		 * */
		private var _enemyShipSpawnInterval:Number = 2.5;
		/**
		 * Minimum seconds that new enemy ships are spawned.
		 * */
		private var _enemyShipSpawnIntervalMin:Number = .1;
		/**
		 * Reducing factor for seconds next enemy ship is spawned.
		 * */
		private var _enemyShipSpawnIntervalReductionFactor:Number = 0.95;
		/**
		 * Game text displaying number of enemy ships hit.
		 * */
		private var _scoreText:FlxText;
		/**
		 * Score text font size.
		 * */
		private var _scoreTextFontSize:Number = 32;
		/**
		 * Score text font color.
		 * */
		private var _scoreTextFontColor:Number = 0xFF597137;
		/**
		 * Score text horizontal alignment.
		 * */
		private var _scoreTextAlign:String = "left";
		/**
		 * Game text displaying end of game message.
		 * */
		private var _gameOverText:FlxText;
		/**
		 * End of came message.
		 * */
		private var _lang_GameOverMessage:String = "GAME OVER\nPRESS ENTER TO PLAY AGAIN";
		/**
		 * Sound for exploding game ship
		 * */
		[Embed(source="assets/ExplosionShip.mp3")]
		private var SoundExplosionShip:Class;
		/**
		 * Sound for exploding enemy ship
		 * */
		[Embed(source="assets/ExplosionAlien.mp3")]
		private var SoundExplosionEnemyShip:Class;
		/**
		 * Sound for ship bullet
		 * */
		[Embed(source="assets/Bullet.mp3")]
		private var SoundBullet:Class;
		/**
		 * The game play state constructor.
		 * */
		public function PlayState()
		{
			super();
		}
		/**
		 * Create game objects
		 */
		override public function create():void
		{
			// Set the FlxState bgColor. The default background color of the game.
			bgColor = 0xFFABCC7D;
			// Set the Flixel starting score value
			FlxG.score = 0;
			// Set the costume score value
			_scoreText = new FlxText(10, 8, 200, "0");
			_scoreText.setFormat(null, _scoreTextFontSize, _scoreTextFontColor, _scoreTextAlign);
			add(_scoreText);
			// Add player ship.
			_playerShip = new PlayerShip();
			add(_playerShip);
			// Add a group for enemy ships
			_enemyShips = new FlxGroup();
			add(_enemyShips);
			// Add a group for player ship bullets
			_bullets = new FlxGroup();
			add(_bullets);
			// Reset the enemy ship spawning timer.
			resetSpawnTimer();
			// Flixel framework creating process.
			super.create();
		}
		/**
		 * Automatically calls update on everything added to the game loop.
		 * Handle custom input and perform collisions.
		 */
		override public function update():void
		{
			// Bullet hit an enemy ship
			FlxU.overlap(_enemyShips, _bullets, overlapAlienBullet);
			// Enemy ship hit player ship
			FlxU.overlap(_enemyShips, _playerShip, overlapAlienShip);
			// Ship dead and Enter key is pressed
			if(FlxG.keys.ENTER && _playerShip.dead)
			{
				// Reset the game state to start.
				FlxG.state = new PlayState();
			}	
			// Space key and ship is active
			if(FlxG.keys.justPressed("SPACE") && _playerShip.dead == false)
			{
				// Fire a bullet
				spawnBullet(_playerShip.getBulletSpawnPosition());
			}
			// Reduce enemy ship spawning timer by seconds that passed since last frame
			_enemyShipSpawnTimer -= FlxG.elapsed;
			// Enemy ship spawning timer is negative
			if(_enemyShipSpawnTimer < 0)
			{
				// Create enemy ship
				spawnEnemyShip();
				// Reset the enemy ship spawning timer.
				resetSpawnTimer();
			}
			// Update default game actions			
			super.update();
		}
		/**
		 * Launch an enemy ship at random location.
		 * */
		private function spawnEnemyShip():void
		{
			// Enemy ship starts on right off screen
			var x: Number = FlxG.width;
			// Enemy ship random y position
			var y: Number = Math.random() * (FlxG.height - 100) + 50;
			_enemyShips.add(new EnemyShip(x, y));
		}
		/**
		 * Fire a bullet.
		 * */
		private function spawnBullet(p:FlxPoint):void
		{
			// Create a bullet.
			var bullet: PlayerShipBullet = new PlayerShipBullet(p.x, p.y);
			// Add bullet to this play state.
			_bullets.add(bullet);
			// Make bullet firing sound
			FlxG.play(SoundBullet);
		}
		/**
		 * Reset the bullet and enemy ship spawning timer
		 * */
		private function resetSpawnTimer():void
		{
			// Reset the count down timer
			_enemyShipSpawnTimer = _enemyShipSpawnInterval;
			// Shorten the countdown timer interval for next pass.
			_enemyShipSpawnInterval *= _enemyShipSpawnIntervalReductionFactor;
			// Below minimum interval
			if(_enemyShipSpawnInterval < _enemyShipSpawnIntervalMin)
			{
				_enemyShipSpawnInterval = _enemyShipSpawnIntervalMin;
			}
		}
		/**
		 * Enemy ship hit by bullet.
		 * */
		private function overlapAlienBullet(enemyShip:EnemyShip, bullet:PlayerShipBullet):void
		{
			// Set the enemy ship as dead. See FlxObject.kill();
			enemyShip.kill();
			// Set the bullet as dead. See FlxObject.kill();
			bullet.kill();
			// Update score for Flixel.
			FlxG.score += 1;
			// Update score costume.
			_scoreText.text = FlxG.score.toString();
			// Explode the enemy ship.
			var emitter:FlxEmitter = createEmitter();
			emitter.at(enemyShip);
			// Play sound for enemy ship exploding.
			FlxG.play(SoundExplosionEnemyShip);
		}
		/**
		 * Play ship and enemy ship collide.
		 * */
		private function overlapAlienShip(enemyShip:EnemyShip, playerShip:PlayerShip):void
		{
			// Set the player ship as dead. See FlxObject.kill();
			playerShip.kill();
			// Set the enemy ship as dead. See FlxObject.kill();
			enemyShip.kill();
			// Shake game.
			FlxG.quake.start(0.02);
			// Explode player ship
			var emitter:FlxEmitter = createEmitter();
			emitter.at(playerShip);
			// Play player ship explosion sound.
			FlxG.play(SoundExplosionShip);
			// Update game text costume.
			_gameOverText = new FlxText(0, FlxG.height / 2, FlxG.width,_lang_GameOverMessage);
			_gameOverText.setFormat(null, 16, 0xFF597137, "center");
			add(_gameOverText);
		}
		/**
		 * Ship explosion particle emitter animation.
		 * */
		private function createEmitter():FlxEmitter
		{
			var emitter:FlxEmitter = new FlxEmitter();
			emitter.delay = 1;
			emitter.gravity = 0;
			emitter.maxRotation = 0;
			emitter.setXSpeed(-500, 500);
			emitter.setYSpeed(-500, 500);
			var particles: int = 10;
			for(var i: int = 0; i < particles; i++)
			{
				var particle:FlxSprite = new FlxSprite();
				particle.createGraphic(2, 2, 0xFF597137);
				particle.exists = false;
				emitter.add(particle);
			}
			emitter.start();
			add(emitter);
			return emitter;
		}
	}
}

[ad name=”Google Adsense”]
PlayerShip Class
This class adds the graphic for the player ship. When the Flixel framework calls the update method, the player ship is repositioned and kept with boundaries.

When the PlayerState class requires a bullet the getBulletSpawnPosition() on line 104 provides the starting position based on the graphic design for the gun barrel.

package
{
	import org.flixel.FlxG;
	import org.flixel.FlxPoint;
	import org.flixel.FlxSprite;
	
	/**
	 * Defines the player's ship.
	 * */
	public class PlayerShip extends FlxSprite
	{
		/**
		 * Starting game horizontal position.
		 * */
		private const SHIP_START_X:Number = 50;		
		/**
		 * Starting game vertical position.
		 * */
		private const SHIP_START_Y:Number = 50;		
		/**
		 * Ship movement velocity.
		 * */
		private const SHIP_MOVEMENT_VELOCITY:Number = 250;		
		/**
		 * Padding for movement of ships.
		 * */
		private const SHIP_MOVEMENT_PADDING:Number = 16;		
		/**
		 * Graphic for player ship.
		 * */
		[Embed(source="assets/ship_published.png")]
		private var ImgShip:Class;
		
		/**
		 * Player ship.
		 * */
		public function PlayerShip():void
		{
			super(SHIP_START_X, SHIP_START_Y, ImgShip);
		}
		/**
		 * Update ship.
		 * */
		override public function update():void
		{
			// Set horizontal velocity to stopped position.
			velocity.x = 0;
			// Set vertical velocity to stopped position.
			velocity.y = 0;
			
			// Left key.
			if(FlxG.keys.LEFT)
			{
				// Set horizontal velocity to left.
				velocity.x = -SHIP_MOVEMENT_VELOCITY;
			}
			// Right key.
			else if(FlxG.keys.RIGHT)
			{
				// Set horizontal velocity to right.
				velocity.x = SHIP_MOVEMENT_VELOCITY;
			}
			// Up key.
			if(FlxG.keys.UP)
			{
				// Set vertical velocity to up.
				velocity.y = -SHIP_MOVEMENT_VELOCITY;
			}
			// Down key.
			else if(FlxG.keys.DOWN)
			{
				// Set vertical velocity to down.
				velocity.y = SHIP_MOVEMENT_VELOCITY;
			}
			// Postion is near right side of screen.
			if(x > FlxG.width - width - SHIP_MOVEMENT_PADDING)
			{
				// Hold the position.
				x = FlxG.width - width - SHIP_MOVEMENT_PADDING;
			}
			// Postion is near left side of screen.
			else if(x < SHIP_MOVEMENT_PADDING)
			{
				// Hold the position.
				x = SHIP_MOVEMENT_PADDING;
			}
			// Postion is near bottom of screen.
			if(y > FlxG.height - height - SHIP_MOVEMENT_PADDING)
			{
				// Hold the position.
				y = FlxG.height - height - SHIP_MOVEMENT_PADDING;
			}
			// Postion is near top of screen.
			else if(y < SHIP_MOVEMENT_PADDING)
			{
				// Hold the position.
				y = SHIP_MOVEMENT_PADDING;
			}			
			super.update();
		}
		/**
		 * Position bullet starting position at tip of gun barrel. 
		 * */
		public function getBulletSpawnPosition():FlxPoint
		{
			// See ImgShip asset for placement offset metrics to end of gun barrel.
			var p: FlxPoint = new FlxPoint(x + 108, y + 27);
			return p;
		}
	}
}

EnemyShip Class
This class adds the graphic for the enemy ship and the initial game position when created. The PlayState spawnEnemyShip method computes the vertical starting position using some random computations and the horizontal position always off the right side of the game screen..

It mainly provides the velocity for the enemy ships which include a left only horizontal direction and a sine wave for vertical direction.

package
{
	import org.flixel.FlxSprite;
	/**
	 * Defines enemy ship.
	 * */
	public class EnemyShip extends FlxSprite
	{
		/**
		 * Horizontal velocity for enemy ship.
		 * */
		private const ENEMY_SHIP_HORIZONTAL_VELOCITY:Number = 200;
		/**
		 * Vertical velocity for enemy ship.
		 * */
		private const ENEMY_SHIP_VERTICAL_VELOCITY:Number = 50;
		/**
		 * Graphic for enemy ship.
		 * */
		[Embed(source="assets/enemy_ship_published.png")]
		private var ImgEnemy:Class;
		/**
		 * Enemy ship constructor.
		 * */
		public function EnemyShip(x: Number, y: Number):void
		{
			super(x, y, ImgEnemy);
			// Enemy ship moves left.
			velocity.x = -ENEMY_SHIP_HORIZONTAL_VELOCITY;
		}
		/**
		 * Update the enemy ship.
		 * */
		override public function update():void
		{
			// Sine wave for vertical velocity.
			velocity.y = Math.cos(x / ENEMY_SHIP_VERTICAL_VELOCITY) * ENEMY_SHIP_VERTICAL_VELOCITY;
			super.update();
		}

	}
}

[ad name=”Google Adsense”]
PlayerShipBullet Class
Defines the player ship bullet using the FlxSprite createGraphic method which simply creates a rectangular image.

The player bullet x velocity is set to right. This matches the player ship always pointing right.

It could be interesting providing an alternative sine based vertical velocity.

package
{
	import org.flixel.FlxSprite;
	
	public class PlayerShipBullet extends FlxSprite
	{
		/**
		 * Player ship bullet.
		 * */
		public function PlayerShipBullet(x: Number, y: Number):void
		{
			super(x, y);
			// Use simple flat colored square image for bullet.
			createGraphic(16, 3, 0xFF597137);
			velocity.x = 1000;
		}
	}
}

Preloader Class
This is supposed to show a nice 8-bit style preloader bar according to Andreas Zecher. I noticed a comment on histutorial that it did not work. I ran this in the Flash CS4 bandwidth profiler and could not show the preloader. All the content is in the first frame, and for that matter in Main, for CS4 and thus all needs loading before any code would run to show a preloader.

I kept the coding in and the Preloader class simply needs to know what class it is to measure for the preloading animation to run.

package
{
	import org.flixel.FlxPreloader;
	
	/**
	 * Flixel preloader.
	 * */
	public class Preloader extends FlxPreloader
	{
		/**
		 * Set Flixel preloader class name.
		 * */
		override public function Preloader()
		{
			className = "Main";
			super();
		}
	}
}

Default.css
This is blank and appears to be needed to remove the “Default css file not found” warning message in Flex Builder 4. You can see the solution for this in APPENDIX C: That Annoying Default.css Warning of an article on setting up a Flixel Actionscript project in Flex Builder.

Basically you need a blank Default.css file and add the switch -defaults-css-url Default.css to the project Actionscript Compiler Additional compiler arguments found in the project properties.

Categories
Articles

Box2D 2.1 Flash Hello World Falling Boxes

I decided it was time to try out Box2DFlash, a free 2D physics engine for Flash that works in both Flash and Flex Builder 4.

I found most examples were for version 2.02 and earlier and there is now a version 2.1a (alpha) which it appears everyone is treating as a release. I downloaded the 2.1a version and immediately was struggling to find good starting examples since the developer documentation is not ready for 2.1a save scant update notes.

I started out with a video tutorial from Todd Kerpelman who did a great job for anyone starting cold turkey. His examples are for Box2D version 2.0 and he has a note that he will update for 2.1. I also converted his Puggle version of Peggle Nights.

Todd may hold out revising videos as I read forum rumors that more major code revisions are possible with Box2D and judging from this update, there is no tolerance for maintaining backwards compatibility other than use the older version. Todd’s videos are longish and would be served better if he added code to copy for each video. However his explanations of Bxo2d in the videos are extremely helpful.

I found by taking Todd’s work and a Box2d 2.1a example by Allan Bishop, I was able to revise Todd’s example in 2.1a. Allan’s example is more basic than is Todd’s example. I also would like to point out Allan has several more 2.1a version examples that are intriguing that I intend to explore.

You can build this with the free Flex SDK by using the code in the src folder and be sure to include a path to the Box2DFlash 2.1a library. For Flash CS3 and later versions, you need to create a Flash Document in the src folder and set the document class to HelloWorldFallingBoxes01 and then add a library path to the Box2DFlash 2.1a code or SWC if you created one. For your convenience the Flash CS4 example download is included.

You can download Box2dFlash to work with the source, get the API documentation and more examples. I included a SWC library for version 2.1a in the example downloads so you will know they work despite what happens at Box2dFlash.org.

This article shows the code for the Flex project.

Application Class – HelloWorldFallingBoxes01
All the code is contained in this class except for the Box2d library. The applicationCompleteHandler creates the Box2D world. The world contains a floor and left and right walls. It also will contain a bunch of falling rectangles that I am calling falling boxes. It sets a debug feature so we can visualize the physic data computed and starts an ENTER_FRAME event to make updates.

All the measurements are in meters so there is ratio PIXELS_TO_METERS constant on line 60 to handle that conversion when you want to think in pixels.

The Box2D world works with “center” registration points and so the measurements for the container, in this case the Flash movie, are provided as constants on line 44 and 48 to create the offsets.

The MAX_WORLD_BODIES constant on line 68 is used as an upper limit in adding the falling boxes. The walls, floor and falling boxes are referred to as bodies in Box2D. The MAX_WORLD_BODIES constant along with the NEXT_BOX_IN_INTERVAL constant on line 56 will control the addition of falling boxes.

<?xml version="1.0" encoding="utf-8"?>
<!--
/**
* Demonstration of Box2D 2.01a dropping boxes into container.
* */
--><s:Application 
   		xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx" 
		applicationComplete="applicationCompleteHandler(event)"
		width = "550"
		height = "400"
		>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import Box2D.Collision.Shapes.b2PolygonShape;
			import Box2D.Collision.b2AABB;
			import Box2D.Common.Math.b2Vec2;
			import Box2D.Dynamics.b2Body;
			import Box2D.Dynamics.b2BodyDef;
			import Box2D.Dynamics.b2DebugDraw;
			import Box2D.Dynamics.b2FixtureDef;
			import Box2D.Dynamics.b2World;
			import mx.events.FlexEvent;
			/**
			 * Properties for background
			 * @see background_bc
			 */
			private static const backgroundColor:Number = 0x333333;
			/**
			 * The Box2D world
			 */
			private var _world:b2World;
			/**
			 * Frames per second. 
			 */
			private const FPS:uint = 30;
			/**
			 * Movie width 
			 */
			private const SWF_WIDTH:int = 550;
			/**
			 * Movie height
			 */
			private const SWF_HEIGHT:int = 400;
			/**
			 * Wall thickness
			 */
			private const WALL_THICKNESS:int = 5;
			/**
			 * Interval, in frames, between adding boxes to fall.
			 */
			private const NEXT_BOX_IN_INTERVAL:int = 5;
			/**
			 * Ratio of pixels to meters. 30 is a defacto standard.
			 */
			private static const PIXELS_TO_METER:Number = 40;
			/**
			 * Number of frames until next box is added.
			 * */
			private var _nextBoxIn:int = 0;
			/**
			 * Maximum bodies including boxes, floor and walls.
			 * */
			private const MAX_WORLD_BODIES:int = 80;
			/**
			 * Handler for applicationComplete event. Setup world and begin animation.
			 * */
			protected function applicationCompleteHandler(event:FlexEvent):void
			{
				trace("applicationCompleteHandler(...)");
				// Setup the world
				setupWorld();
				// Create walls and floor
				createWallsAndFloor();
				// Visualize with debugDraw
				setupDebugDraw();
				// Listen to ENTER_FRAME event.
				addEventListener(Event.ENTER_FRAME, enterFrameHandler);
			}

[ad name=”Google Adsense”]
This section updates the world. The world updates with the Step method shown on line 89.

There is also logic on line 111 – 118 to add falling boxes at the top of the animation using randomized sizes and positions we will see in the addBox() method later. Here the coding is simply trying to time the frame intervals when a new falling box is added and to deal with some of the new requirements in Box2D 2.1a for updating the world.

			/**
			 * Handler for ENTER_FRAME event.
			 * */
			private function enterFrameHandler(e:Event):void
			{
				updateWorld();
			}
			/**
			 * Update world. Add additional boxes.
			 * */
			private function updateWorld():void
			{
				//trace("Main.updateWorld(...)");
				// Box2D manual recommends 1/60 seconds 
				// set it to the SWF framerate
				var timeStep:Number = 1 / FPS;
				// velocityIterations and positionIteration with 10 being the 
				// suggested count for each. 
				// Fewer iterations boosts performances 
				// but comes at the cost of accuracy.
				var velocityIterations:int = 6;
				var positionIterations:int = 2;
				// Update the world
				_world.Step(timeStep, velocityIterations, positionIterations);
				// As of version 2.1 we must clear the forces.
				_world.ClearForces();
				// Reduce frame delay for adding box
				_nextBoxIn--;
				// Time to add another box
				if ( _nextBoxIn <= 0 && _world.GetBodyCount() < MAX_WORLD_BODIES)
				{
					addBox();
					// Reset the box frame delay
					_nextBoxIn = NEXT_BOX_IN_INTERVAL;
				}
				// Draw the debug data.
				_world.DrawDebugData();
			}

This function creates the world. The 2.1a b2Word constructor no longer requires a universe size. The constructor arguments are now down to two.

			/**
			 * Setup the world.
			 * */
			private function setupWorld():void
			{
				trace("Main.setupWorld()");
				// Define gravity. Y = 9.8 meters per second.
				var gravity:b2Vec2 = new b2Vec2( 0, 9.8);
				// Ignore sleeping babies
				var ignoreSleeping:Boolean = true;
				_world = new b2World( gravity, ignoreSleeping );
			}

[ad name=”Google Adsense”]
In the createFloor() method, the groundBody b2Body is created and represent the floor. Version 2.1a uses b2FixtureDef. You create fixture definition for material properties. You provide the shape to the fixture, and call b2Body.CreateFixture.

			/**
			 * Create the walls and floor.
			 * */
			private function createWallsAndFloor():void
			{
				trace("Main.createWallsAndFloor()");
				createFloor();
				createWalls();
			}
			/**
			 * Create the floor.
			 * */
			private function createFloor():void
			{
				trace("Main.createFloor()");
				// Define the ground body.
				var groundBodyDef:b2BodyDef= new b2BodyDef();
				// Set position
				groundBodyDef.position.Set(	(SWF_WIDTH / 2) / PIXELS_TO_METER, 
					(SWF_HEIGHT - WALL_THICKNESS) / PIXELS_TO_METER );
				// Factory design pattern to create the body.
				var groundBody:b2Body = _world.CreateBody(groundBodyDef);
				// Create our shape.
				var groundBox:b2PolygonShape = new b2PolygonShape();
				// Set the box dimensions. 
				// Width 1/2 of MovieClip less offset for left and right wall thicknesses 
				// Height = wall thickness.
				groundBox.SetAsBox( 
					( (SWF_WIDTH ) / 2) / PIXELS_TO_METER - ( WALL_THICKNESS * 2) / PIXELS_TO_METER, 
					WALL_THICKNESS / PIXELS_TO_METER);
				// Create a fixture definition for body
				var groundFixtureDef:b2FixtureDef = new b2FixtureDef();
				// Set shape
				groundFixtureDef.shape = groundBox;
				// Set density
				groundFixtureDef.density = 1;
				// Set friction 100%
				groundFixtureDef.friction = 1;
				// Create fixture
				groundBody.CreateFixture(groundFixtureDef);
			}

Creating the walls mirrors the code for creating the floor. The b2BodyDef is reused for both wall b2Body bodies because the word CreateBody method copies and does not provide a pointer to a b2BodyDef. There are computations for position and box sizes stand next to the floor.

			/**
			 * Create the walls.
			 * */
			private function createWalls():void
			{
				trace("Main.createWalls() - left wall");
				// Define the wall body.
				var wallBodyDef:b2BodyDef= new b2BodyDef();
				
				wallBodyDef.position.Set( WALL_THICKNESS / PIXELS_TO_METER, ( SWF_WIDTH - WALL_THICKNESS ) / PIXELS_TO_METER );
				// Factory design pattern to create the body.
				var leftWallBody:b2Body = _world.CreateBody(wallBodyDef);
				// Create shape.
				var leftWallBox:b2PolygonShape = new b2PolygonShape();
				// Set as a box.
				leftWallBox.SetAsBox(WALL_THICKNESS / PIXELS_TO_METER, ( SWF_WIDTH - WALL_THICKNESS )  / PIXELS_TO_METER);
				// Create a fixture definition for left and right wall bodies
				var wallFixtureDef:b2FixtureDef = new b2FixtureDef();
				// Set shape 
				wallFixtureDef.shape = leftWallBox;
				// Set density
				wallFixtureDef.density = 0;
				// Set friction 50%
				wallFixtureDef.friction = 0.5;
				// Set restitution to 30%
				wallFixtureDef.restitution = 0.3;
				// Create fixture
				leftWallBody.CreateFixture(wallFixtureDef);
				trace("Main.createWalls() - right wall");
				wallBodyDef.position.Set(
					545 / PIXELS_TO_METER, 
					( SWF_WIDTH - WALL_THICKNESS ) / PIXELS_TO_METER );
				// Factory design pattern to create the body.
				var rightWallBody:b2Body = _world.CreateBody(wallBodyDef);
				// Create our shape.
				var rightWallBox:b2PolygonShape = new b2PolygonShape();
				// Redefine shape
				wallFixtureDef.shape = rightWallBox;
				// Set as a box.
				rightWallBox.SetAsBox(
					WALL_THICKNESS / PIXELS_TO_METER, 
					( SWF_WIDTH - WALL_THICKNESS ) / PIXELS_TO_METER);
				// Create fixture
				rightWallBody.CreateFixture(wallFixtureDef);
			}

[ad name=”Google Adsense”]
The addBox method creates a new falling box. It follows the same code steps as the floor. Differences include that the boxBodyDef type is dynamic to allow for movement, the use of SetAsOrientedBox on line 238 instead of SetAsBox used for floor and walls. The SetAsOrientedBox allows for rotation. To get to the angle argument you need to provide a b2Vec2 center point.

Randomizing the box sizes and starting positions is included for some variety.

			/**
			 * Add a falling box.
			 * */
			private function addBox():void
			{
				trace("Main.addBox()");
				var boxBodyDef:b2BodyDef= new b2BodyDef();
				boxBodyDef.position.Set( 
					randomInt(15, 530) / PIXELS_TO_METER, 
					randomInt(-100, -50) / PIXELS_TO_METER );
				// Crates move.
				boxBodyDef.type = b2Body.b2_dynamicBody;
				// Here we can see the factory design pattern being used to create the body.
				var boxBody:b2Body = _world.CreateBody(boxBodyDef);
				// Create our shape.
				var boxShape:b2PolygonShape = new b2PolygonShape();
				// Randomize the crate size and convert to meters.
				var hx:Number = randomInt(5, 40) / PIXELS_TO_METER;
				var hy:Number = randomInt(5, 40) / PIXELS_TO_METER;
				// Set as an oriented box
				boxShape.SetAsOrientedBox(
					hx, 
					hy,
					new b2Vec2(hx / 2, hy / 2), 		     // Center
					(Math.random() * 360) * (Math.PI / 180)	// Rotation random degrees converted to radians
				);	
				
				// Create a fixture definition for crate
				var boxFixtureDef:b2FixtureDef = new b2FixtureDef();
				// Set shape
				boxFixtureDef.shape = boxShape;
				// Set density
				boxFixtureDef.density = 0.7;
				// Set friction 80%
				boxFixtureDef.friction = 0.8;
				// Set restitution to 30%
				boxFixtureDef.restitution = 0.3;
				// Create fixture
				boxBody.CreateFixture(boxFixtureDef);
			}

Here we have some utilities. First is the b2DebugDraw to make the physics data visual and a method to compute a random number from a range.

The b2DebugDraw is added to the SpriteVisualElement box2DContainer on line 265.

			/**
			 * Setup the b2DebugDraw
			 * */
			private function setupDebugDraw():void
			{
				trace("Main.setupDebugDraw()");
				var spriteToDrawOn:Sprite = new Sprite();
				box2DContainer.addChild(spriteToDrawOn);
				var debugDraw:b2DebugDraw = new b2DebugDraw();
				debugDraw.SetSprite(spriteToDrawOn);
				debugDraw.SetDrawScale(PIXELS_TO_METER);
				debugDraw.SetFlags(b2DebugDraw.e_shapeBit);
				debugDraw.SetLineThickness(2.0);
				debugDraw.SetFillAlpha(0.6);
				_world.SetDebugDraw(debugDraw);
			}
			/**
			 * Return a random int from a range.
			 * @param lowVal  Start of the range.
			 * @param highVal  End of the range.
			 * @return Random int from lowVal to highVal
			 * */
			private function randomInt(lowVal:int, highVal:int):int
			{
				if ( lowVal <= highVal)
				{
					return (lowVal + Math.floor(Math.random() * ( highVal - lowVal + 1)));
				}
				else
				{
					throw (new Error("Main.randomInt(...) lowVal exceeds highVal"));
				}
			}

		]]>
	</fx:Script>

These are the Flex visual components. Simply a background using the BorderContainer and a the Flex 4 SpriteVisualElement to contain the b2DebugDraw.

	   <!--
	   Background for app 
	   --> 
	   <s:BorderContainer id = "background_bc"
						  width="{width}" height = "{height}"
						  
						  backgroundColor="{backgroundColor}">
		   
		   <!--
		   Container for the Box2D world
		   -->
		   <s:SpriteVisualElement id = "box2DContainer" />
	   </s:BorderContainer> 
</s:Application>
Categories
Articles

Parsley MVC, RemoteObject, Zend AMF and MySQL Basic Flex Example

After conquering a basic Parsley Framework Flex example I wanted to create a minimal example of using the Flex Parsley framework, Zend AMF and MySQL. The Flex implementation goal is to mold a model view controller framework using Parsley and to communicate via Flex RemoteObject to Zend AMF. Eventually I applied what I learned to revamp DefineIt.com with Parsley and Zend AMF.

There are many approached to using Parsley for MVC. The Parsley documentation is very light on the subject. These also entail including using other frameworks like Caringorm. In this example I kept it simply by just using the Parsley messaging features and creating my own controller class.

I found other examples of Parsley that go further into its features. You might look at Christophe Coenraets’ example. This is referenced from the Parsley documentation . Christophe includes an update and add feature to the application. It also contains a dynamically loaded image class. It is a bit over featured and thus over involved for a pure beginner. It is void of substantive explanation leaving you to explore the Parsley documentation to try to understand why one approach was chosen over another in code. Worse code has no comments. This should be a minimum requirement for any referenced sample code. However there are some good Flex and Parsley techniques in there that can be helpful and one to bookmark for your learning process.

Learn More About Flex 4 From Adobe

Parsley 2.3 is used and the SWCs are included in the example Flex 4 project download I have here. I did appreciate these SWCs also being included in the downloads from the Parsley download page. Lets you get to learning faster.

You can build this with the free Flex SDK by using the code in the src folder and be sure to include a path to the Parsley and Spicelib library.

When you run this application, the trace log will show you the interactions between the model, controller, view and service.

Application Class – Parsley_Configuration.mxml
This is the main MXML file. Line 15 links the Parsley_Configuration.mxml file that configures Parsley framework.

Line 16 tells Parsley to include this mxml file and thus allows us to inject the ApplicationModel data.

I put all locale language into the model to simplify the example. In the effort the ApplicationModel class for application level data only contains the locale language title for the application you can see referenced in the Label on lines 26 and 39.

Line 40 contains the Panel to display the data grid.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:hellozend="com.alh.parsley.example.hellozend.*"
			   xmlns:parsley="http://www.spicefactory.org/parsley"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:sf="http://www.spicefactory.org/parsley"
			   minWidth="955" minHeight="600" 
			   xmlns:views="com.alh.parsley.example.hellozend.views.*"
			   >
	<fx:Declarations>
		<!-- 
		Parsley configuration MXML file
		-->
		<parsley:ContextBuilder config="Parsley_Configuration" />
		<sf:Configure/>
	</fx:Declarations>
	<fx:Script>
		<!&#91;CDATA&#91;
			import com.alh.parsley.example.hellozend.model.ApplicationModel;
			/**
			 * Parsley injects the ApplicationModel here.
			 * */
			&#91;Inject&#93;
			&#91;Bindable&#93;
			public var model:ApplicationModel;
			
		&#93;&#93;>
	</fx:Script>
	<!-- 
		UI
	-->
	<s:layout>
		<s:VerticalLayout gap="10" 
						  horizontalAlign="center"
						  paddingLeft="12" paddingRight="12" paddingBottom="12" paddingTop="12"
						  />
	</s:layout>
	<s:Label text="{model.lang_AppTitle}" fontSize="20"/>
	<views:AllMembersGrid/>
</s:Application>

Parsley Configuration – Parsley_Configuration.mxml
This is the file Parsley reads for configuration.

I included the RemoteObject definitions here as well. I am following Christophe Coenraets’ example on this. It makes sense to me to have this as part of the configuration file. Remember to change the YOUR_GATEWAY_URL on line 13 to reflect your link to the Zend AMF or other RemoteObject service.

You may note there is no services xml or configuration file. The channel information is in the MXML instead. You can learn more on this by reading
ZEND AMF (Action Message Format) Minimalist Example Using RemoteObject and MySQL

On lines 27 – 30 I have four Actionscript classes handling the model, view and controller. They are listed here so we can use the [Inject] metatag for Parsley.

<?xml version="1.0" encoding="utf-8"?>
<Objects 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns="http://www.spicefactory.org/parsley"
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:hellozend="com.alh.parsley.example.hellozend.*" 
	xmlns:model="com.alh.parsley.example.hellozend.model.*" 
	xmlns:services="com.alh.parsley.example.hellozend.services.*" 
	xmlns:controller="com.alh.parsley.example.hellozend.controller.*">
	<fx:Declarations>
		<s:ChannelSet id = "zend_amf_channel_set">
			<s:channels>
				<s:AMFChannel uri="YOUR_GATEWAY_URL"/>
			</s:channels>
		</s:ChannelSet>
		<!-- MembershipService RemoteObject -->
		<s:RemoteObject	id="membershipService_ro" 
						destination="zend-amf" 
						source="MembershipService" 
						channelSet="{zend_amf_channel_set}"
						showBusyCursor="true" 
						>
		</s:RemoteObject>
		<!--
			Parsley defined objects slated for injection where &#91;Inject&#93; metatag appears.
		-->
		<model:ApplicationModel/>
		<model:MembershipModel/>
		<services:MembershipServiceRemote/>
		<controller:MembershipController/>
</fx:Declarations>
</Objects>

Application Model Class – ApplicationModel.as
This class defines application level data and we only have a language variable to simplify the example for localization.

package com.alh.parsley.example.hellozend.model
{
	/**
	 * Model for application level data
	 * */
	public class ApplicationModel
	{
		/**
		 * UI language in model to simplify example
		 * 
		 * Language for Application
		 * */
		[Bindable]
		public var lang_AppTitle:String = "Minimalist Parsley Zend AMF Example Using RemoteObject";;
	}
}

Membership Model Class – MembershipModel.as
This class defines membership data. Again you can see the variables to simplify the example for localization.

The key data here is the ArrayCollection on line 13 for the member data.

package com.alh.parsley.example.hellozend.model
{
	import mx.collections.ArrayCollection;
	/**
	 * Model for membership
	 * */
	public class MembershipModel
	{
		/**
		 * List of members;
		 * */
		[Bindable]
		public var members:ArrayCollection;
		/**
		 * UI language in model to simplify example
		 * 
		 * Language for AllMembersGrid view
		 * */
		[Bindable]
		public var lang_AllMembersGridTitle:String = "Membership Listing";
		[Bindable]
		public var lang_MemberKey:String = "Member Key";
		[Bindable]
		public var lang_FirstName:String = "First Name";
		[Bindable]
		public var lang_LastName:String = "Last Name";
		[Bindable]
		public var lang_EmailAddress:String = "Email Address";
		[Bindable]
		public var lang_GetMembers:String = "Get Members";
		[Bindable]
		public var lang_ClearMembers:String = "Clear";
	}
}

IMembershipService Class – IMembershipService.as
Interface to define methods for membership service classes. We only have one in the example: MembershipServiceRemote.

package com.alh.parsley.example.hellozend.services
{
	import mx.rpc.AsyncToken;
	/**
	 * Interface to define MembershipService classes
	 * */
	public interface IMembershipService
	{
		function getAllMembers():AsyncToken;
	}
}

[ad name=”Google Adsense”]
MembershipServiceRemote Class – MembershipServiceRemote.as
This class deals with the server service. Only the controller communicates with this class by calling the get getAllMembers() method.

Line 46 is the interface back to the MVC or to the application however you want to look at it. Here a Parsley message is created for the MembershipGetAllMembersEvent.GET_ALL_MEMBERS event that you will see the MembershipController class handles.

You could have the controller pass its own result and fault handlers to the getAllMembers() method and eliminate the MembershipGetAllMembersEvent.GET_ALL_MEMBERS message.

As a further simplification, the faults are all routed to the catchAllServiceErrorHandler(…) method where a view component is inserted breaking a clean MVC. You could create a message for the fault handler to dispatch and have the controller to handle this.

package com.alh.parsley.example.hellozend.services
{
	import com.alh.parsley.example.hellozend.events.MembershipGetAllMembersEvent;
	import com.alh.parsley.example.hellozend.services.IMembershipService;
	import mx.controls.Alert;
	import mx.rpc.AsyncResponder;
	import mx.rpc.AsyncToken;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.remoting.RemoteObject;
	/**
	 * IMembershipService class to handle RemoteObject data communications with server.
	 * */
	public class MembershipServiceRemote implements IMembershipService
	{
		/**
		 * Specify the remote service for Parsley to inject.
		 * */
		[Inject(id="membershipService_ro")]
		public var service:RemoteObject;		
		/**
		 * Parsley creates an event dispatcher function
		 * */
		[MessageDispatcher]
		public var dispatcher:Function;

		/**
		 * Get all members from RemoteObject service.
		 * */
		public function getAllMembers():AsyncToken
		{
			trace ("SERVICE: MembershipServiceRemote.getAllMembers()");
			var token:AsyncToken = service.getAllMembers();
			token.addResponder(
				new AsyncResponder(getAllMembersResultsHandler, catchAllServiceErrorHandler));
			return token;
		}
		/**
		 * ResultEvent handler for service.getAllMembers()
		 * */
		protected function getAllMembersResultsHandler(event:ResultEvent, result:Object):void
		{
			trace ("SERVICE: MembershipServiceRemote.getAllMembersResultsHandler()");
			//event.result == Array.
			var members:Array = event.result as Array;
			dispatcher( new MembershipGetAllMembersEvent(MembershipGetAllMembersEvent.GET_ALL_MEMBERS, members));
		}
		/**
		 * Default handler for MembershipServiceRemote calls
		 * */
		protected function catchAllServiceErrorHandler(e:FaultEvent):void
		{
			Alert.show(e.toString());
		}
	}
}

MembershipController Class – MembershipController.as
This controller ties in the MembershipModel class and the MembershipServiceRemote class on line 18 and 24 respectively.

The controller listens for the MembershipEvent events on line 29. The Parsley [MessageHandler] tag makes this happen. These events are dispatched in the view.

On line 46 the controller listens for the MembershipGetAllMembersEvent dispatched from the MembershipServiceRemote class.

package com.alh.parsley.example.hellozend.controller
{
	import com.alh.parsley.example.hellozend.events.MembershipEvent;
	import com.alh.parsley.example.hellozend.events.MembershipGetAllMembersEvent;
	import com.alh.parsley.example.hellozend.model.MembershipModel;
	import com.alh.parsley.example.hellozend.services.MembershipServiceRemote;
	import mx.collections.ArrayCollection;
	/**
	 * Controller for Membership model and views.
	 * */
	public class MembershipController
	{
		/**
		 * Parsley injects the MembershipModel here.
		 * */
		[Inject]
		[Bindable]
		public var model:MembershipModel;
		/**
		 * Parsley injects the MembershipService here.
		 * */
		[Inject]
		[Bindable]
		public var service:MembershipServiceRemote;
		/**
		 * Parsley identified handler for MembershipEvent
		 * */
		[MessageHandler]
		public function membershipEventHandler( message:MembershipEvent ):void
		{
			trace ("CONTROLLER: MembershipController.membershipEventHandler(...) - message.type:" + message.type);
			switch (message.type )
			{
				case MembershipEvent.GET_ALL_MEMBERS:
					service.getAllMembers();
					break
				case MembershipEvent.CLEAR_ALL_MEMBERS:
					model.members.removeAll();
					break
			}
		}
		/**
		 * Parsley identified handler for MembershipGetAllMembersEvent
		 * */
		[MessageHandler]
		public function membershipGetAllMembersEventHandler( message:MembershipGetAllMembersEvent ):void
		{
			trace ("CONTROLLER: MembershipController.membershipGetAllMembersEventHandler(...)");
			model.members = new ArrayCollection(message.members);
		}
	}
}

[ad name=”Google Adsense”]
Membership Grid View – AllMembersGrid.mxml
This is a Panel containing a DataGrid and Buttons for the user interaction.

Lines 27 and 28 sets up the class to dispatch Parsley messages. Line 35 dispatches the MembershipEvent.CLEAR_ALL_MEMBERS event and line 43 dispatches the MembershipEvent.GET_ALL_MEMBERS event. The MembershipController class handles these messages to update the model and communicate with the service as needed.

This view is tied to the MembershipModel class via Parsley on line 23. The DataGrid binds to the model members variable.

Other bindings for the language localizations appear as well.

<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 xmlns:sf="http://www.spicefactory.org/parsley"
		 title = "{model.lang_AllMembersGridTitle}"
		>
	<fx:Declarations>
		<!-- 
		Parsely will manage this component.
		-->
		<sf:Configure/>
	</fx:Declarations>
	<fx:Script>
		<!&#91;CDATA&#91;
			import com.alh.parsley.example.hellozend.events.MembershipEvent;
			import com.alh.parsley.example.hellozend.model.MembershipModel;
			/**
			 * Parsley injects the MembershipModel here.
			 * */
			&#91;Inject&#93;
			&#91;Bindable&#93;
			public var model:MembershipModel;
			/**
			 * Parsley creates an event dispatcher function
			 * */
			&#91;MessageDispatcher&#93;
			public var dispatcher:Function;
			/**
			 * Dispatch MembershipEvent.CLEAR_ALL_MEMBERS event
			 * */
			protected function clearDataGrid():void
			{
				trace("VIEW: " + className + ".clearDataGrid()");
				dispatcher( new MembershipEvent( MembershipEvent.CLEAR_ALL_MEMBERS ));
			}
			/**
			 * Dispatch MembershipEvent.GET_ALL_MEMBERS event
			 * */
			protected function getAllMembers():void
			{
				trace("VIEW: " + className + ".getAllMembers()");
				dispatcher( new MembershipEvent( MembershipEvent.GET_ALL_MEMBERS ));
			}
		&#93;&#93;>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout gap="10" 
						  paddingLeft="12" paddingRight="12" paddingBottom="12" paddingTop="12"
						  />
	</s:layout>
	<mx:DataGrid  id="member_dg"  height="100" dataProvider="{model.members}">
		<mx:columns>
			<mx:DataGridColumn headerText="{model.lang_MemberKey}" dataField="memberKey"/>
			<mx:DataGridColumn headerText="{model.lang_FirstName}" dataField="firstName"/>
			<mx:DataGridColumn headerText="{model.lang_LastName}" dataField="lastName"/>
			<mx:DataGridColumn headerText="{model.lang_EmailAddress}" dataField="emailAddress" width="200"/>
		</mx:columns>
	</mx:DataGrid>
	<s:HGroup horizontalAlign="center" width="100%">
		<s:Button label="{model.lang_GetMembers}" click="{getAllMembers();}"/>
		<s:Button label="{model.lang_ClearMembers}" click="{clearDataGrid();}"/>
	</s:HGroup>

</s:Panel>

MembershipEvent.as
This is a standard Event class to inform the MVC framework all membership data is required or needs to be cleared. These free the view from being coupled with the service or updating the model.

package com.alh.parsley.example.hellozend.events
{
	import flash.events.Event;
	/**
	 * Events related to membership.
	 * */
	public class MembershipEvent extends Event
	{
		/**
		 * Request to retrieve all membership data
		 * */
		public static const GET_ALL_MEMBERS:String = "com.alh.parsley.example.hellozend.events.MembershipEvent.getAllMembers";
		/**
		 * Request to clear all membership data
		 * */
		public static const CLEAR_ALL_MEMBERS:String = "com.alh.parsley.example.hellozend.events.MembershipEvent.clearAllMembers";

		public function MembershipEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
	}
}

MembershipGetAllMembersEvent.as
This event message signals success retrieval of members data from the service.

package com.alh.parsley.example.hellozend.events
{
	import flash.events.Event;
	/**
	 * Event defining service receipt of membership data.
	 * */
	public class MembershipGetAllMembersEvent extends Event
	{
		public static const GET_ALL_MEMBERS:String = "com.alh.parsley.example.hellozend.events.MembershipGetAllMembersEvent.getAllMembers";
		/**
		 * Membership data
		 * */
		public var members:Array;
		
		public function MembershipGetAllMembersEvent(type:String, members:Array, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			this.members = members;
		}
	}
}

Zend AMF Gateway PHP Script
This is the gateway program for the Zend Amf. This is the file that you reference on line 13 of the Parsley_Configuration.mxml file. In this example it was named index.php.

<?php
/**
*  Sample Zend AMF gateway
*  @return Endpoint &#91;Zend Amf Endpoint&#93;
* */

// Configurable values
// Debugging values
$debug = true;                             // Debugging status
if ($debug)
{
	// Report all errors, warnings, interoperability and compatibility
	error_reporting(E_ALL|E_STRICT);
	// Show errors with output
	ini_set("display_errors", "on");
}
else
{
	error_reporting(0);
	ini_set("display_errors", "off");
}
// Add the Zend AMF installation folder to the include path.
// In this example the frameworks folder is a sibling folder to
// this application folder. The frameworks folder contains the Zend
// folder that is extracted from http://framework.zend.com/download/amf
ini_set("include_path", ini_get("include_path") . PATH_SEPARATOR . "..\\frameworks" );

// Instantiate the Zend Amf server
require_once 'Zend/Amf/Server.php';
$server = new Zend_Amf_Server();

// Register your service classes
require_once 'MembershipService.php';
$server->setClass("MembershipService");

//Map ActionScript value objects to the PHP value objects.
$server->setClassMap("MemberData", "MemberData");

// Return the handle.
echo ($server->handle());

?>

[ad name=”Google Adsense”]
MembershipService Class
This is the service class that contains remote methods. Generally a the database and business logic is delegated to another API you write. In this case they are all together for simplicity.

<?php
/**
*	Service class exposing the methods to deal with membership.
*   This example includes business logic for simplicity of study.
*/
require_once 'MemberData.php';
class MembershipService
{
	public function MembershipService()
	{
		// Connect to MySql database.
		// Supply your own MySQL access values.
		// These are defaults when running on your own private computer.
		mysql_connect("localhost", "root", "");
		// Select the database.
		// Supply your own database name.
		mysql_select_db("test");
	}
	/**
	*	Get all members and all fields.
	*/
	public function getAllMembers()
	{
		// Array of MemberData objects.
		$members = array();
		// Selecting all fields and all records from table.
		// Supply your own table name and optionally your own SQL statement.
		$result = mysql_query("SELECT * FROM zend_amf_members");
		// Assuming mysql_query success. Slog through records.
		while ($row = mysql_fetch_assoc($result))
		{
			// Create a MemberData value object and populate.
			$member = new MemberData();
			$member->memberKey = $row["memberKey"];
			$member->firstName = $row["firstName"];
			$member->lastName = $row["lastName"];
			$member->emailAddress = $row["emailAddress"];
			array_push($members, $member);
		}
		// Return the members array to client.
		return $members;
	}
}
?>

MemberData Value Object Class for PHP
This is the value object on the server side to define the field names for a member object. This is mapped to the client side on line 37 of the Zend AMF gateway script.

<?php
/**
 * Value object defining the member data
 * */
class MemberData
{
  public $memberKey;	// uint
  public $firstName;	// String
  public $lastName;		// String
  public $emailAddress;	// String
}
?>

SQL To Create Testing Table
The PHP script uses zend_amf_members for the table and this is the SQL to create that table. In this example the database was called test.

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Database: `test`
--

-- --------------------------------------------------------

--
-- Table structure for table `zend_amf_members`
--

CREATE TABLE IF NOT EXISTS `zend_amf_members` (
  `memberKey` int(10) unsigned NOT NULL auto_increment,
  `firstName` varchar(30) NOT NULL default '',
  `lastName` varchar(30) NOT NULL default '',
  `emailAddress` varchar(50) NOT NULL default '',
  PRIMARY KEY  (`memberKey`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='Zend Amf Examples' AUTO_INCREMENT=7 ;

--
-- Dumping data for table `zend_amf_members`
--

INSERT INTO `zend_amf_members` (`memberKey`, `firstName`, `lastName`, `emailAddress`) VALUES
(1, 'Donald', 'Duck', 'quacker@pond.com'),
(2, 'Daffy', 'Duck', 'daft_2x@farm.org'),
(3, 'Elmer', 'Fudd', 'elmer.fudd@hunters.net'),
(4, 'Bugs', 'Bunny', 'whats_up_doc@underground.org'),
(5, 'Yosemite', 'Sam', 'varmint_chaser@forest.com'),
(6, 'Wile', 'Coyote', 'ceo@acme.com');

Categories
Articles

Basic Parsley Framework Flex Example Explained

I decided to break down the Parsley framework for Flex and Flash projects. This is my own minimalist example. I am not going to extol virtues or evils with using Parsley and assume you just want to get a basic example that explains the pieces.

This does not tie into web server but I added a basic example that uses Zend AMF, PHP, MySQL, Flex Remote Objects.

Also if you want to look at a very basic Flash Actionscript example see Parsley Hello World For A Flash Builder Actionscript Project.

It was hard to find a good minimalist starter example that takes the time to explain the details. The Sitronnier (blogginglemon) examples had other technologies or unneeded features cluttering the code and was devoid of any substantive elaboration. The Sitronnier examples are linked out of the Parsley documentation and are worthwhile bookmarking to review once you get your feet wet.

The best I have found is Arturo Alvarado’s posts at Art’s Flex Notes. The 4 part series includes a comparative framework analysis and why he prefers Parsley. Art breaks his Parsley example down with one more level of granularity than I do here. I hope Art continues to add to his series as he communicates very clearly.

The “Hello World” getting started example in the Parsley documentation is also a great starting point except there is no explanation outside of comments to soothe your into it. But the comments are great and I added my own coding style to this example and simplified further along with a few changes to better illustrate some items.

My example focuses on the main structure and foundational features in Parsley. There is much more available in Parsley to learn and explore.

Learn More About Flex 4 From Adobe

Parsley 2.3 is used and the SWCs are included in the example Flex 4 project download I have here. I did appreciate these SWCs also being included in the downloads from the Parsley download page. Lets you get to learning faster.

You can build this with the free Flex SDK by using the code in the src folder and be sure to include a path to the Parsley and Spicelib library.

Application Class – ParsleyFramework_HelloWorld.mxml
This is the main MXML file. Line 12 links another MXML file, ParselyFramework_HelloWorld_Configuration, that configures Parsley framework. Other than that, this appears to be a basic Flex MXML file with two UI components.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:hw="com.alh.parsely.example.helloworld.*"
			   xmlns:parsley="http://www.spicefactory.org/parsley"
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 
		Parsley configuration MXML file
		-->
		<parsley:ContextBuilder config="ParsleyFramework_HelloWorld_Configuration" />
	</fx:Declarations>
	<!-- 
		UI
	-->
	<s:VGroup width="100%" height="98%"  gap="10" horizontalAlign="center">
		<hw:InputPanel width="50%" height="100%" title="Input Panel"/>
		<hw:OutputPanel width="50%" height="100%"  title="Output Panel"/>
	</s:VGroup>

</s:Application>

Parsley Configuration – ParsleyFramework_HelloWorld_Configuration.mxml
This is a Parsley configuration file. Parsley reads this file.

There are three model files in this application. One, InputModel, is for the InputPanel, one, OutputModel, for the OutputPanel and a shared model, SharedModel.

This configuration file identifies these for the Parsley framework to use.

<?xml version="1.0" encoding="utf-8"?>
<Objects 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns="http://www.spicefactory.org/parsley"
	xmlns:hw="com.alh.parsley.example.helloworld.*">
	<fx:Declarations>
		<!--
			Parsley defined objects slated for injection where [Inject] metatag appears.
		-->
		<hw:SharedModel/>
		<hw:InputModel/>
		<hw:OutputModel/>
	</fx:Declarations>
</Objects>

[ad name=”Google Adsense”]
InputPanel.mxml
This is a UI component for our MVC framework. It lets a user enter text and press a button to submit. It validates that the entry contains input.

Line 13 registers this UI component with Parsley.

Lines 23-25 inject or we could say include the contents of InputModel, the data for a MVC framework.

InputPanel is self contained in its messaging but broadcasts a message via the InputModel model sendInputMessage (…) method on line 44.

Line 35 was my way of demonstrating the Parsley event to notify that a model has loaded properly. I do not see it necessary here other from a demonstration point of view. More about this when we review InputModel.

I decided to use the model to store the localization language rather than Flex resource manager for simplicity. I do not like localization language embedded in UI code so this is fine for demonstration and also small apps where manual language change has a low chance of being needed. You see the language references on lines 64 and 70.

Line 80 demonstrates the use of a nested model. The InputModel contains the SharedModel. More on that when we get to look at InputModel.

<?xml version="1.0" encoding="utf-8"?>
<s:Panel 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:sf="http://www.spicefactory.org/parsley"
	enabled="false"
	updateComplete="updateCompleteHandler(event)"
	>
	<fx:Declarations>
		<!-- 
		Parsley will manage this component.
		-->
		<sf:Configure/>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			/** 
			 * Inject the model.
			 * The [Inject] metadata searches context for an object of matching type.
			 */
			[Inject]
			[Bindable]
			public var model:InputModel;
			/** 
			 * Handler from the UpdateComplete event
			 */
			protected function updateCompleteHandler(event:FlexEvent):void
			{
				// Demonstrates ways to test injection occured. See InputModel.
				// Model is injected: model != null
				// and
				// model init() was completed: model.initialized
				enabled =  model != null && model.initialized;
			}
			/** 
			 * Send a message to Parsley framework.
			 */
			private function sendMessage():void
			{
				if (input_ti.text.length > 0)
				{
					model.sendInputMessage(input_ti.text);
					input_ti.text = "";
				}
				else
				{
					Alert.show("Please enter a message.", "Attention");
				}
			}
		]]>
	</fx:Script>
	<!--
		UI
	-->
	<s:layout>
		<s:VerticalLayout gap="10" paddingLeft="12" paddingRight="12" paddingBottom="12" paddingTop="12"/>
	</s:layout>
	<s:HGroup verticalAlign="middle">
		<!--
			Reference to model
		-->
		<s:Label text="{model.lang_typeMessageHere + ' '}"/>
		<s:TextInput id="input_ti"/>
		<!--
			Reference to model
		-->
		<s:Button id ="send_button"
			label="{model.lang_send}" 
			click="sendMessage()"/>
	</s:HGroup>
	<!--
		Filler
	-->
	<s:Rect height="100%"/>
	<!--
		Use of a nested dependency. The sharedModel is a SharedModel object.
	-->
	<s:Label text="{model.sharedModel.lang_numberOfMessagesSent + ' ' +  model.sharedModel.numberOfMessagesSent }"/>
</s:Panel>

InputModel.mxml
This is data and messaging. By its name it says the model is more localized to the “input” UI component, but that is not a restriction.

Remember that the Parsley configuration mxml file, discussed above, registered this file.

Lines 20 and 21 show how to create a dispatcher method with Parsley. The dispatcher event is called on line 41.

Line 41 contains the Event, or in Parsley we say message, named InputMessage. We will look at this after we done with InputModel.

Line 39 shows the sendInputMessage(…) method used in InputPanel to broadcast the button click. This decouples the InputMessage event from the UI and places control with the model. Changing the event or adding additional logic or events leaves the UI unchanged. The UI is thus linked by the method sendInputMessage(…).

You may need to know if the model loaded properly. Parsley will call a method on its objects. You use the [Init] meta tag to identify the method and here it is shown on line 34. The init() method on line 35 sets the initialized variable in the model. The initialized variable then can be used by code dependent on the model to know it is loaded and firing. You see that back in the InputPanel code on line 34.

Lines 13 to 15 show how to inject another model. In this case the SharedModel file by its name implies having data shared by more than one area of the framework. Depending on your application structure you may find one model for all is sufficient or as demonstrated in this example having the model distributed for a modular approach.

package com.alh.parsley.example.helloworld
{
	public class InputModel
	{
		/**
		 * State of the init method executing or not. 
		 * */
		[Bindable]
		public var initialized:Boolean;
		/**
		 * Nest another model using injection. 
		 * */
		[Inject]
		[Bindable]
		public var sharedModel:SharedModel;
		/**
		 * Define a message in the model
		 * The [MessageDispatcher] metatag adds function to Parsley for sending (dispatch) messages.
		 */ 
		[MessageDispatcher]
		public var sendMessage:Function;
		/**
		 * Language
		 */ 
		[Bindable]
		public var lang_send:String = "Send";
		[Bindable]
		public var lang_typeMessageHere :String = "Type your message here:";
		
		/**
		 * The [Init] metadata tells Parsley to call the annotated method after 
		 * an instance of this object is created and configured. Used in InputPanel.
		 */ 
		[Init]
		public function init() : void 
		{
			initialized = true;
		}
		public function sendInputMessage(text:String) : void 
		{
			sendMessage(new InputMessage(InputMessage.SEND_MESSAGE,text));
		}
	}
}

[ad name=”Google Adsense”]
InputMessage.as
InputMessage is a custom Actionscript event class. Can be used in other frameworks or no framework. However the InputModel makes this a Parsley message.

package com.alh.parsley.example.helloworld
{
	import flash.events.Event;
	/** 
	 * Defines an input message for application.
	 */
	public class InputMessage extends Event
	{
		public static const SEND_MESSAGE:String = "com.alh.parsley.example.helloworld.send_message";
		/** 
		 * The message text
		 */
		public var messageText:String = "";
		/** 
		 * Constructor
		 */
		public function InputMessage(type:String, messageText:String, bubbles:Boolean = true, cancelable:Boolean = true)
		{
			super(type, bubbles, cancelable);
			this.messageText = messageText;
		}
	}
}

OutputPanel.mxml
Repeats many of the similarities of the InputPanel. There is no messaging included here. Basic binding to the Output model, that we will look at next, is set on lines 21 to 23.

Lines 32 and 40 have the bound values.

<?xml version="1.0" encoding="utf-8"?>
<s:Panel 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:sf="http://www.spicefactory.org/parsley"
	>
	<fx:Declarations>
		<!-- 
		Parsley will manage this component.
		-->
		<sf:Configure/>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			/** 
			 * The [Inject] metadata tells Parsley to inject a dependency by 
			 * searching the context for an object of matching type.
			 */
			[Inject]
			[Bindable]
			public var model:OutputModel;
		]]>
	</fx:Script>
	<!--
		UI
	-->
	<s:layout>
		<s:VerticalLayout gap="10" paddingLeft="12" paddingRight="12" paddingBottom="12" paddingTop="12"/>
	</s:layout>
	<s:Label text="{model.lang_messagesTitle + ' '}"/>
	<!--
		Using model to bind values
	-->
	<s:TextArea width="100%" height="100%" text="{ model.messages }"/>
	<!--
		Use of a nested dependency. The sharedModel is a SharedModel object.
	-->
	<s:Label text="{model.sharedModel.lang_numberOfMessagesSent + ' ' +  model.sharedModel.numberOfMessagesSent }"/>
</s:Panel>

[ad name=”Google Adsense”]
OutputModel.as
This is another local model that by its name associates with InputPanel.

The meta tag [MessageHandler] registers the sendInputMessageHandler(…) method to receive InputMessage events. You recall the InputModel is dispatching InputMessage events.

The sendInputMessageHandler(…) basically updates the messages model value.

The practice of nesting the SharedModel is repeated on lines 13 -15.

package com.alh.parsley.example.helloworld
{
	public class OutputModel
	{
		/** 
		 * Hold the appended list of text messages sent.
		 */
		[Bindable]
		public var messages:String = "";
		/**
		 * Nest another model using injection. 
		 * */
		[Inject]
		[Bindable]
		public var sharedModel:SharedModel;
		/**
		 * Language
		 */ 
		[Bindable]
		public var lang_messagesTitle:String = "Messages Received:";
		/**
		 * Route InputMessage types to this method
		 * The [MessageHandler] metadata tells Parsley to make the routing happen.
		 */
		[MessageHandler]
		public function sendInputMessageHandler( message:InputMessage ) : void 
		{
			// Increment the message count.
			sharedModel.numberOfMessagesSent++;
			// Prepend a line number.
			message.messageText = sharedModel.numberOfMessagesSent + ". " + message.messageText;
			// Update model.
			messages += message.messageText + "\n";
		}
	}
}

SharedModel.as
Model data assumed by the file name shared throughout the application. You can see this above in InputModel and OutputModel that in turn allow InputPanel and OutputPanel to use this data.

package com.alh.parsley.example.helloworld
{
	public class SharedModel
	{
		[Bindable]
		public var numberOfMessagesSent:Number = 0;
		
		[Bindable]
		public var lang_numberOfMessagesSent :String = "Number of messages sent:";

	}
}