So if you currently own one of the many Buzz! branded games with wireless buzzers for the PS3, and you want to make your own PC-based quiz game…here’s how to do it!

First you need to get the buzzers working as standard game controllers on a PC. Then we’ll map those buttons to keyboard keys. From there you can use the devices just as you would a normal keyboard – in my case, via Flash. This process was tested successfully on WinXP SP3, Vista, and Windows7. There’s a way to do this on OSX as well, but I won’t vouch for it.

You’ll first need to download two simple programs. Joy2Key and SimpleHIDWrite.

1) Plug the USB Buzz! reciever into your PC.
2) Wait for it…
3) Windows should automatically install a driver labelled WBuzz. It’ll show up in your Game Controllers Control Panel, but nothing will work just yet.
4) Sync each of the buzzers you’ll be using. This is done the same way you would on the PS3. Turn on each buzzer. Wait a second or two. Then hold the power button up for 4-seconds. The blue light at the bottom of the buzzer will come on and hold blue. While its on, press and hold the small button on the USB receiver for four seconds. The controller and the receiver’s lights should blink eight times confirming that they’ve been synced. Repeat this for each buzzer you want to use. I found that sometimes, after doing the first buzzer, each buzzer I turned on afterwards would automatically sync.
5) Run SimpleHIDWrite.
6) Select WBuzz in the top portion of the application.
7) Fill each of the boxes at the very bottom of the application with zeros – I don’t believe zeros in the “ReportID” box is needed.
8 ) Click the Write button – this sends a control signal that “activates” the buzzers. You should see all of the synced buzzers blink.
9) Press some buzzer buttons. You should see events logged for each button press in the bottom portion of the HID application.
10) In the Game Controllers Control Panel, click WBuzz, then click properties. Pressing the buttons on the buzzers should light up the appropriate buttons in the control panel. These are joystick buttons that you can now map to any program you want. Note that there are enough buttons for up to four buzzers per USB receiver.
11) Write down each joystick button number and what they are mapped to on each of the Buzz buzzers.
12) Write up a simple piece of Flash that accepts keyboard commands.
13) Now run Joy2Key.
14) Double-click a joystick button, tap a key on the keyboard that you want to assign, and click OK.
15) Run the Flash game you’ve made and tap away on the buzzers. You should now be seeing real working results!
16) Save your profile in Joy2Key. It will become the default settings the next time you run it. You’ll otherwise lose all of the mapped settings when you close the program.

Troubleshooting:
– I learned the hard way that when a computer returns from standby, you have to turn off all of the buzzers, turn them back on, and then resend the control signal from HID.
– If the buzzers are synced and the control signal has been sent, you should see the button presses being logged in HID. Its a good feeling when you do.
– If the Game Controller Control Panel is not actually the top focused window, you won’t see the buttons being pressed. i.e. you have to physically click on the panel in order to see the button presses. Why? Ask Microsoft.

Here’s some pics from the booth!

http://www.politico.com/2010/maps/

For those who don’t know, the JSFL API (Javascript Flash API), included with the Flash IDE, allows you to script *almost* anything you would normally do manually in Flash. Click here, change that option, change this color, select this, etc – all of it can be written up in a script that you can then run at any point in time.

I’ve been working with it on and off for the past and thought I’d share a few snags.

The API is especially incredibly useful for anything that needs to be done in bulk. For instance, say you have tons of shapes on the stage and they all need to be uniquely named movieclips? In JSFL you could loop through all of the shapes, and for each one – create a movieclip, create a class linkages, name the instance, etc.

In one project, similar to the above, I had thousands of completed strokes, each in a separate layer, and wanted to add a fill to each one. Unfortunately, this isn’t something JSFL can apparently do. I ran into two major issues.

The first few tests resulted in a crash, for instance, something like the following:

fl.getDocumentDOM().selectAll();
var fill = fl.getDocumentDOM().getCustomFill();
fill.style = "solid";
fill.color = 0x00FF33;
fl.getDocumentDOM().setCustomFill(fill);

According to some, this results in a crash because all of the fill parameters must be set before doing setCustomFill(). Not sure if that’s true or not.

The real issue here is that you can’t “add” a fill to a stroke if the stroke doesn’t already have a fill, or if you’re not creating the object with JSFL. In fact, in Flash, if you were to add a fill manually, you’d have to select the paint bucket tool and click inside the stroke.

But what I found, in Flash, is that if I first do the Union command on a stroke (which converts it to a “drawing object”) and then change the fill setting, it will “add” a fill. So I tried just that in JSFL:

fl.getDocumentDOM().selectAll();
fl.getDocumentDOM().union();
var fill = fl.getDocumentDOM().getCustomFill();
fill.style = "solid";
fill.color = 0x00FF33;
fl.getDocumentDOM().setCustomFill(fill);

This unfortunately still causes a crash in Flash.

So how about an example straight out of the Flash CS3 Help?

fl.getDocumentDOM().selectAll();
fl.getDocumentDOM().union();
var fill = fl.getDocumentDOM().getCustomFill();
fill.style = 'radialGradient';
fill.colorArray = ['#00ff00','#ff00ff'];
fill.posArray = [0, 255];
fill.focalPoint = 100;
fill.linearRGB = false;
fill.overflow = 'repeat';
fl.getDocumentDOM().setCustomFill(fill);

Shockingly, this actually works, but produces only a black fill. Broken down, I learned that this would produce the same thing, without crashing Flash:

fl.getDocumentDOM().selectAll();
fl.getDocumentDOM().union();
var fill = fl.getDocumentDOM().getCustomFill();
fill.style = 'radialGradient';
fl.getDocumentDOM().setCustomFill(fill);

So the key is setting fill.style to something other than solid.

So to produce a solid fill, simply do the fill twice:

fl.getDocumentDOM().selectAll();
fl.getDocumentDOM().union();

var fillA = fl.getDocumentDOM().getCustomFill();
fillA.style = 'radialGradient';
fl.getDocumentDOM().setCustomFill(fillA);

var fillB = fl.getDocumentDOM().getCustomFill();
fillB.style = "solid";
fillB.color = 0x00FF33;
fl.getDocumentDOM().setCustomFill(fillB);

IMHO ridiculous, but it works.

The final script looked something like this, where each closed stroke was on a separate layer:

var doc = fl.getDocumentDOM()
var tl = doc.getTimeline()
var layers = tl.layers;

tl.setSelectedLayers(0);

for (var l=0; l<layers.length; l++) {
	doc.selectNone();

	doc.selection = layers[l].frames[0].elements;
	doc.union();

	if (doc.selection != null) {
		doFill();
	} else {
		fl.trace("no selection")
	}
}

function doFill() {
	var fillA = doc.getCustomFill();
	fillA.style = 'radialGradient';
	doc.setCustomFill(fillA);

	var fillB = doc.getCustomFill();
	fillB.style = "solid";
	fillB.color = 0x00FF33;
	doc.setCustomFill(fillB);
}

Another slight annoyance however is that event.target is overwritten when an event is redispatched. As far as I can tell, there’s no way around this.

For instance, I might have a custom class (MyDispatcher) dispatching a custom event (CustomEvent) to its parent (FirstListener), where it needs to know some property of the original dispatcher. But perhaps its parent (SecondListener) also needs the same event. I’ll typically just redispatch the event. But what you’ll find is that event.target will always be the class that has done the last dispatch, regardless of who originally dispatched the event, so in the case of the root parent, SecondListener, event.target will be FirstListener, not MyDispatcher. Sure you still have any data relevant to the event and can create as many properties as you might need in the custom event, but that seems rather bothersome to me if there’s alot of properties to access in the original dispatcher.

As a workaround, I start with a single, generic property in my custom class that can take any data type (_data:* = null). I then pass into that the this keyword when I first dipsatch the event, taking with it the entire instance of the original dispatcher – as long as the original dispatcher isn’t a huge memory beast.

The benefit here is instead of using event.target I can always use event.data and know that I’m getting all of the public properties of the original dispatcher. Its also correctly typed, even if you haven’t imported the dispatcher’s class.

public class CustomEvent extends Event {
	import flash.events.Event;
	private static const MY_EVENT:String = "myEvent";
	private var _data:*;
	public function CustomEvent(type:String,data:*=null) {
		_data = data;
		super(type,data);
	}
	public override function clone():Event  {
		return new CustomEvent(type,data);
	}
	public function get data():* {
		return _data;
	}
}

public class MyDispatcher extends Sprite {
	import flash.display.Sprite;
	import CustomEvent;
	private var myVar:String = "some public property";
	public function MyDispatcher() {
	}
	public function sendEvent():void {
		dispatchEvent(new CustomEvent(CustomEvent.MY_EVENT,this));
	}
	public function get myVar():String {
		return myVar;
	}
}

public class FirstListener extends Sprite {
	import flash.display.Sprite;
	import MyDispatcher;
	import CustomEvent;
	public function FirstListener() {
		var myDispatcher:MyDispatcher = new MyDispatcher();
		myDispatcher.name = "myDispatcher";
		myDispatcher.addEventListener(CustomEvent.MY_EVENT,myEventHandler,false,0,true);
	}
	public function init():void {
		myDispatcher.sendEvent();
	}

	private function myEventHandler(evt:CustomEvent):void {
		trace(this.name,"received an event");
		trace("evt.target.name is ",evt.target.name); // is MyDispatcher
		trace("evt.data.name is ",evt.data.name); // is MyDispatcher
		dispatchEvent(evt);
	}
}

public class SecondListener extends Sprite {
	import flash.display.Sprite;
	import CustomEvent;
	public function SecondListener() {
		var firstListener:FirstListener = new FirstListener();
		firstListener.name = "firstListener";
		firstListener.addEventListener(CustomEvent.MY_EVENT,myEventHandler,false,0,true);
		firstListener.init();
	}
	private function myEventHandler(evt:CustomEvent):void {
		trace(this.name,"received an event");
		trace("evt.target.name is ",evt.target.name); // is NOT MyDispatcher, but FirstDispatcher instead
		trace("evt.data.name is ",evt.data.name); // is MyDispatcher
	}
}

I’ve found a fairly simple solution to this particular issue – i.e. a case where the user has their own webpage, on their own domain, their own embed code, and where the URL to the SWF is linking directly to your host or where they’ve copied your SWF to their host. This is only one of many ways in securing your publicly available SWFs.

var referrer:String = String(ExternalInterface.call("self.location.href.toString"));
if (referrer == "http://www.mydomain.com/mySWFlocation/mywebpage.html") {
     // continue loading
} else {
     // halt loading
}

This is a bit kludgy, but it works. it makes a call to javascript in the browser to see what domain the webpage is on that is embedding the SWF. If the SWF has been copied and is embedded on a different domain, it will fail. If the SWF is simply linked to from some other domain, it will still fail, because javascript is specifically checking the domain of the HTML the browser is currently at, not the URL of the SWF.

If you don’t want to specify the entire URL to the SWF, but only a domain instead, the Javascript Reference shows other useful possibilities, such as self.location.host, which will only return the domain.

My question to the world is can self.location be spoofed? I know window.location can (i.e. iframes), but I haven’t been able to figure out a way for self.location to be changed without the user being redirected.

Perhaps there’s a way to retrieve the domain of the embedding webpage in actionscript only?

I ran into a random annoyance though – I wanted to edit the text of an Alert control, after it was made, without removing it and recreating it. In my case, simply showing the counting down of a timer in an Alert’s text.

As mentioned in the docs, the show() method of Alert is static. But in looking through the Alert and AlertForm classes (mx\controls\Alert.as and mx\controls\alertClasses\AlertForm.as) you’ll find that some variables have the mx_internal namespace.

Sure enough, you can in fact access properties with this namespace (see code) and open quite a bit of editing that Adobe probably wouldn’t necessarily want to have available.

var timeoutPrompt:Alert;
timeoutPrompt = Alert.show("Added...");
timeoutPrompt.mx_internal::alertForm.mx_internal::textField.text = "Edited...";
timeoutPrompt.mx_internal::alertForm.mx_internal::textField.selectable = false;

CF Timestamp to AS3 Date

This function will take a ColdFusion formatted timestamp (i.e. {ts ‘2009-04-29 15:59:36.11′}) and return an AS3 Date Object.

package com.qnotemedia.utils
{
	public class CFtimestamp
	{
		public static function toDate(rawCFtimestamp:String):Date {
			var date:String = rawCFtimestamp.split("'")[1].split(" ")[0];
			var time:String = rawCFtimestamp.split("'")[1].split(" ")[1].split("'")[0];
			var year:uint = date.split("-")[0];
			var month:uint = date.split("-")[1] - 1;
			var day:uint = date.split("-")[2];
			var hour:uint = time.split(":")[0];
			var minute:uint = time.split(":")[1];
			var second:uint = time.split(":")[2].split(".")[0];
			var millisecond:uint = time.split(":")[2].split(".")[2];
			return new Date(year,month,day,hour,minute,second,millisecond);
		}
	}
}

Using it is quite simple:

var myCFtimestamp = "{ts '2009-04-29 15:59:36.11'}";
var as3Date = CFtimestamp.toDate(myCFtimestamp);

AS3 Date formatted with ColdFusion’s DateFormat function

Another useful function. It takes an AS3 Date Object and returns a string, where the masking syntax is based on ColdFusion’s DateFormat() function.

Note that short, medium, long, and full are included.

package com.qnotemedia.utils {
	public class DateFormatter {
		private static var monthNames:Array = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
		private static var dayNames:Array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");

		private static var monthAbbrs:Array = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec");
		private static var dayAbbrs:Array = new Array("Sun","Mon","Tues","Wed","Thurs","Fri","Sat");

		public static function monthByName(num:uint):String {
			return monthNames[num];
		}
		public static function monthByAbbr(num:uint):String {
			return monthAbbrs[num];
		}
		public static function dayByName(num:uint):String {
			return dayNames[num];
		}
		public static function dayByAbbr(num:uint):String {
			return dayAbbrs[num];
		}
		public static function includeZero(num:uint):String {
			var numStr:String = num.toString();
			if (num > -1 && num < 10) {
				numStr = "0" + numStr;
			}
			return numStr;
		}

		public static function toCFdateString(dt:Date,msk:String):String {
			// d: Day of the month as digits; no leading zero for single-digit days.
			// dd: Day of the month as digits; leading zero for single-digit days.
			// ddd: Day of the week as a three-letter abbreviation.
			// dddd: Day of the week as its full name.
			// m: Month as digits; no leading zero for single-digit months.
			// mm: Month as digits; leading zero for single-digit months.
			// mmm: Month as a three-letter abbreviation.
			// mmmm: Month as its full name.
			// yy: Year as last two digits; leading zero for years less than 10.
			// yyyy: Year represented by four digits.

			// The following masks tell how to format the full date and cannot be combined with other masks:
			// short: equivalent to m/d/y
			// medium: equivalent to mmm d, yyyy
			// long: equivalent to mmmm d, yyyy
			// full: equivalent to dddd, mmmm d, yyyy

			switch (msk) {
				case "short":
					msk = "m/d/yy";
					break;
				case "medium":
					msk = "mmm d, yyyy";
					break;
				case "long":
					msk = "mmmm d, yyyy";
					break;
				case "full":
					msk = "dddd, mmmm d, yyyy";
					break;
			}

			var returnedString:String = "";
			var currChar:String = "";
			var currIndex:uint = 0;
			var arMSK:Array = new Array();
			for (var i:uint=0; i < msk.length; i++) {
				var char:String = msk.charAt(i);
				if (char == currChar) {
					arMSK[currIndex] = arMSK[currIndex] + char;
				} else {
					currIndex += 1;
					currChar = char;
					arMSK[currIndex] = currChar;
				}
			}
			for (var j:uint=0; j < arMSK.length; j++) {
				var mskItem:* = (arMSK[j] == undefined) ? "" : arMSK[j];
				switch (mskItem) {
					case "dddd":
						mskItem = dayByName(dt.getDay());
						break;
					case "mmmm":
						mskItem = monthByName(dt.getMonth());
						break;
					case "yyyy":
						mskItem = dt.getFullYear();
						break;
					case "ddd":
						mskItem = dayByAbbr(dt.getDay());
						break;
					case "mmm":
						mskItem = monthByAbbr(dt.getMonth());
						break;
					case "dd":
						mskItem = includeZero(dt.getDate());
						break;
					case "mm":
						mskItem = includeZero(dt.getMonth()+1);
						break;
					case "yy":
						mskItem = dt.getFullYear().toString().slice(2,4);
						break;
					case "d":
						mskItem = dt.getDate();
						break;
					case "m":
						mskItem = dt.getMonth()+1;
						break;
					case "y":
						mskItem = dt.getFullYear().toString().slice(2,4); // same as "yy"
						break;
				}
				arMSK[j] = mskItem;
			}

			return arMSK.join("");
		}
	}
}

Again - easy to use:

var myAS3date:Date = new Date(2009,3,29,15,59,36,11);
var myAs3dateFormatted:String = DateFormatter.toCFdateString(myAS3date,"mm dd, yyyy")

Or combine them both!:

var myCFtimestamp = "{ts '2009-04-29 15:59:36.11'}";
var myAs3dateFormatted:String = DateFormatter.toCFdateString(CFtimestamp.toDate(myCFtimestamp),"mm dd, yyyy")

I’m using JPGEncoder from AS3CoreLib to properly encode and save images with Air and realized that the app was stalling during JPGEncoder’s encode().

Fortunately, a fellow forum member at actionscript.org, Jerion, had also experienced this and wrote a simple fix – use events!

Here’s the how to use JPGEncoder as originally designed:

package {
	...
	import com.adobe.images.JPGEncoder;
	...
	public class ImageSaver() {
		...
		public function saveImage(bitmapData):void {
			var jpgEncoder:JPGEncoder = new JPGEncoder(85);

			// application stalls until the following line is complete
			var jpgStream:ByteArray = jpgEncoder.encode(bitmapData);

			// continues fine from here...
			var imageFile:File = File.desktopDirectory.resolvePath("imagesFolder");

			try {
				var filestream:FileStream = new FileStream();
				filestream.open(imageFile,FileMode.WRITE);
				filestream.writeBytes(jpgStream);
				filestream.close();
			} catch(e:Error) {
				trace("Error saving image: " + e)
			}
		}
		...
	}
}

Works great, but everything in the application stops while jpgEncoder.encode() is run. If the image is large, the user experiences a “halted” application. In my case, I’m looping many small images, and the experience is a constant “stutter” as the images are looped. Nicely animated preloaders become stop animations.

The solution is to rewrite JPGEncoder so that it fires an event when it is done encoding.

Simply download this new JPGEncoder code and replace the original from AS3CoreLib – again, a special thanks to Jerion for coding this!

Once replaced, here’s what the new encode code would look like, and the app just runs along nice and smooth!

package {
	...
	import com.adobe.images.JPGEncoder;
	...
	public class ImageSaver() {
		...
		private var _bitmapData;
		...
		public function saveImage(bitmapData):void {
			_bitmapData = bitmapData;

			var jpgEncoder:JPGEncoder = new JPGEncoder();
			jpgEncoder.addEventListener("ImageDone",imageEncodeComplete);
			jpgEncoder.encode(_bitmapData,85);
		}
		private function imageEncodeComplete(evt:Event):void {
			var jpgStream:ByteArray = evt.currentTarget.imageBytes;
			var imageFile:File = File.desktopDirectory.resolvePath("imagesFolder");

			try {
				var filestream:FileStream = new FileStream();
				filestream.open(imageFile,FileMode.WRITE);
				filestream.writeBytes(jpgStream);
				filestream.close();
			} catch(e:Error) {
				trace("Error saving image: " + e)
			}
		}
		...
	}
}

I spent alot of time last year learning design patterns, specifically MVC. The basic premise is having a Model that holds and controls the non-visual or data-based stuff, a bunch of Views that make up the visual pieces we interact with, and a Controller that manages the state of the system and what needs to happen when. The general theory – I think – is that the Model is the data and the Controller manages the graphics (Views). Unfortunately, most design pattern descriptions then go straight into much more detailed definitions of precisely what these things should look like in code, what each class MUST and MUST NOT do and that if you don’t follow such rules, you’re a moron.

But what I’ve learned is that these rules are meant to be broken. Building a strict design pattern can be alot of work, making your simple little project take alot longer than it should.

Fortunately, I’ve found ways to implement these theories slowly without going too deep into pattern mechanics. And yes, you should absolutely learn the detailed stuff about patterns because it teaches you when to divvy up into classes and when not to – but I’ll show here some basic code here that I use to keep a small sized project small, manageable, and easily updateable and scalable.

The “Main” class
Open a new FLA file and save it someplace.

The first wierdness when it comes to developing with Flash and MVC is how the Document class plays a part. Most design pattern books I’ve read do not cover this very well. When building apps with Flash and AS3, its typically best to have all of your code external from the FLA itself, including the Document class. This is linked to in one of three places:

• the Properties Panel of the FLA Document – left click a blank area of the stage, and open the Properties Panel
• choose the Modify Menu -> Document
• choose the File Menu -> Publish Settings… -> Flash Tab -> Settings… button next to the “Actionscript version” drop-down box

The file you’re linking to in the Document box is going to be the base class for the FLA. Its an external file that will setup the bare root of the entire project. Most of the time, this is “Main.as” or “Document.as,” but you need to type in only the class itself, not the full filename. Almost 99% of the time this is the filename without the extension.

Assigning the Document Class in the Actionscript 3.0 Settings Panel

Now that the class is linked, we have to create the file “Main.as” and place it in the same folder as the FLA. Its going to start out like this:

package {
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {

		}
	}
}

This is a bare class that does nothing but get constructed. Note that since we’re developing in the Flash IDE, we must extend the MovieClip class for the document class.

The basic flow for our MVC is the Document class is going to instantiate our Model and Controller, and the Controller, with direct reference to the Model, is going to instantiate the Views. Lets start with the Model.

The “Model” class
Create a new actionscript file called “Model.as” in the same folder as your FLA. This is going to handle our data and it might look something like this:

package {
	import flash.events.Event;
	import flash.events.EventDispatcher;
	public class Model extends EventDispatcher {
		private var _data:Array = new Array();

		public function Model() {

		}
		public function initData():void {
			for (var i:uint=50; i<59; i++) {
				var lineOfData:uint = i;
				_data.push(lineOfData);
			}
			dispatchEvent(new Event(Event.COMPLETE));
		}
		public function get data():Array {
			return _data;
		}
	}
}

Model is non-visual so it really doesn't need to extend anything. But since we are going to dispatch Events from it with dispatchEvent(), we have to extend the class from EventDispatcher.

When the Model is instantiated, it'll do nothing. But when initData() is run, the Model will populate the _data array with some data (consisting of 10 values with the numbers 50 through 59), and dispatch a Complete event when its done. Our Main class is going to listen for that Complete event. This allows us to have a chain of events (no pun intended) occur so that things get done in a specific order. More on that later.

Note also the get data function. This is done so that our _data Array is easily accessible to other classes. We don't need a set _data because we only want the Model to control it - basically a read-only permission to the Array.

Lets look at the Controller next.

The "Controller" class
Create a new Actionscript file and call it "Controller.as" in the same folder as your FLA. Our Controller is going to create views when they need to be created and tell them what to do as we interact with our project. Here's a starting point:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class Controller extends Sprite {
		private var _model:Model;
		private var _views:Object = new Object();

		public function Controller(model:Model) {
			_model = model;
		}
		public function initViews():void {
			// setup default views here
			dispatchEvent(new Event(Event.COMPLETE));
		}

		private function addView(view):void {
			_views[view.name] = view;
			addChild(view);
		}
		private function removeView(view):void {
			removeChild(view);
			delete _views[view.name];
			view = null;
		}
	}
}

Firstly, note the addView and removeView functions, as mentioned in my previous posting. We need to extend the Sprite class because the Controller is going to hold visual stuff. Note also that the Controller is getting a reference to the Model in its constructor, and its placed in a variable that can be accessed from anywhere in the class. We are creating a direct link to the Model from our Controller, even though the Model knows nothing about the Controller.

Finally, lets add a View.

The first "View" - a Circle class
We'll call this view "Circle.as" and all it'll do is draw a circle:

package {
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.events.Event;
	public class Circle extends Sprite {
		private var _views:Object = new Object();

		public function Circle() {

		}
		public function drawCircle(radius,color):void {
			var circle:Shape = new Shape();
			circle.name = "circleA";
			circle.graphics.beginFill(color,1);
			circle.graphics.drawCircle(0,0,radius);
			circle.graphics.endFill();
			addView(circle);
			dispatchEvent(new Event(Event.COMPLETE));
		}

		private function addView(view):void {
			_views[view.name] = view;
			addChild(view);
		}
		private function removeView(view):void {
			removeChild(view);
			delete _views[view.name];
			view = null;
		}
	}
}

Once again, we have addView() and removeView() and are extending the Sprite class. drawCircle() is expecting two arguments to decide what the radius and color of the circle is going to be. The x and y values are zero, but we can simply assign x and y on the circle class when its instantiated by the Controller. Not much else to our circle.

Completing the circle of events
Now, let's move backwards and start instantiating everything. In the Controller's initViews(), we'll instantiate the Circle class, add a listener for its Complete event, and run the drawCircle method. We also need a new function, viewsInited, to handle the Complete event:

		...
		public function initViews():void {
			var myCircle:Circle = new Circle();
			myCircle.name = "myCircle";
			myCircle.x = 100;
			myCircle.y = 100;
			myCircle.addEventListener(Event.COMPLETE,viewsInited,false,0,true);
			addView(myCircle);

			myCircle.drawCircle(50,0x000000);
		}
		private function viewsInited(evt:Event):void {
			dispatchEvent(new Event(Event.COMPLETE));
		}
		...

So - when Controller's initViews() runs, it instantiates the circle and waits for the Complete event. When the circle sends its Complete event, the Controller in turn sends its own Complete event in viewsInited() to its parent, Main.

So, in the Main class, we need to instantiate the Model and Controller and listen and handle Complete events from both. Here's our new Main.as:

package {
	import flash.display.MovieClip;
	import flash.events.Event;
	public class Main extends MovieClip {
		private var _model:Model;
		private var _controller:Controller;

		public function Main() {
			_model = new Model();
			_model.addEventListener(Event.COMPLETE,modelInited,false,0,true);

			_controller = new Controller(_model);
			_controller.addEventListener(Event.COMPLETE,controllerInited,false,0,true);
			addChild(_controller);

			_model.initData();
		}
		private function modelInited(evt:Event):void {
			_controller.initViews();
		}
		private function controllerInited(evt:Event):void {
			// all done!
		}
	}
}

Notice that I've turned to the path of simplicity here with using addChild() instead of addView(), because, as of now, I know I'll never do much of anything else with the Document Class (which has actually backfired on me before, but lets keep it simple...). I will never need to remove either the Model nor the Controller since they form the structure of my project. Note too that the Model is being passed as an argument into the Controller's constructor to create that direct communication between the Model and Controller. You're ready to run your project and should see a circle on the stage.

Keep it sequential!
So you might be wondering what exactly is going on here. So much work for a single circle? And why all of the Events?

Again, the goal is to keep things sequential and leave room for scalability. Lets look at keeping it sequential first.

Say the radius value of the circle is something we want to have dynamically in the data array of the Model. Maybe each of our data Array's values are different radii of circles? Since we have a reference of the Model in the Controller, we could get those values directly from it and use it when we draw the circle in the Controller:

...
myCircle.drawCircle(_model.data[0],0x000000);
...

The first value in the Model's data Array is 50, so that's going to be the radius of the circle. But what if the Model's initData() function hasn't run yet? You'll get an error. Thus the need for this chain of events to occur.

So here's the final order of things:

1. The Document Class, Main, is constructed
2. Model is constructed
3. Controller is constructed
4. Main tells the Model to retrieve and build some data and waits for a response
5. Model sends a Complete event to Main when its done
6. Document tells Controller to initialize its views and waits for a response
7. Controller constructs a Circle and waits for a response
8. Circle sends a Complete event to Controller
9. Controller sends a Complete event to Main

And that's about it! In my next post, we'll add more views, talk about scalability, and create a new circle of direct communication from Views to the Model as well as create Sub-Controllers of the Controller.

Here's a zip of the source for this post:
A Little Bit of MVC Source Files

• AS3 My Way: Intro
• AS3 My Way: Name Everything!
• AS3 My Way: Adding, Removing, and Memory Usage
• AS3 My Way: A little bit of MVC