So I had a few minutes this morning to knock up a quick example of how to use Native Events with AS3Signals. While this example is ‘billy basics’ it should hopefully give you an idea of how to use Signals to handle regular AS3 Event’s, if not, give me a shout and I’ll put something else together! There are a number of benefits for using a Signal Event even though we have to still use a Native Event such as the Signals ease of adding, removing listeners, passing data and of course the impressive speed increase of using Signals over Native Events which you can read about here: http://alecmce.com/as3/events-and-signals-performance-tests.

So in this example we’re going to look at how we use Signals to interact with the Native MouseEvent.MOUSE_DOWN when invoked on a Sprite.

This is an entirely different project from what we had last time but it’s only made up of two classes. The first being CircleThingy.as which extends Sprite and is simply a class that draws a circle of different colours. Then we have our usual Main.as as the Document Root, this class creates a load of CircleThingys, adds them to the Stage and when they are pressed invokes a Listener. Let’s start by having a look at the CircleThingy.as class.

package
{
	import flash.events.MouseEvent;
	import org.osflash.signals.natives.NativeSignal;
	import flash.display.Sprite;
 
	/**
	 * A simple class that extends Sprite and
	 * draws, well, a circle thing.
	 *
	 * @author Anton Mills
	 * @version 12/09/2010
	 */
	public class CircleThingy extends Sprite
	{
		// local vars
		private var randSize:Number;
		public var signalMouseDown:NativeSignal;
 
		/**
		 * constructor
		 */
		public function CircleThingy()
		{
			// create the MouseEvent as a Signal
			signalMouseDown = new NativeSignal(this, MouseEvent.MOUSE_DOWN, MouseEvent);
 
			// generate a random Number for the CircleThingy size
			randSize = (Math.random() * 10) + 10;
 
			// draw the off state
			drawStateOff();
		}
 
		/**
		 *  draws the CircleThingy's off state
		 */
		public function drawStateOff():void
		{
			graphics.clear();
			graphics.beginFill(0x666666, 1);
			graphics.drawCircle(randSize, randSize, 0 - (randSize/2));
		}
 
		/**
		 *  draws the CircleThingy's on state
		 */
		public function drawStateOn():void
		{
			graphics.clear();
			graphics.beginFill(0xff1234, 1);
			graphics.drawCircle(randSize, randSize, 0 - (randSize/2));
		}
	}
}

Hopefully this should look pretty straightforward, we have two public methods that draw a circle of different colours (pink for on, grey for off) using a variable called randSize. Then in the Constructor we define randSize using rand() and as we have done before we’ve instantiated a new Signal (which is public don’t forget!) but this time we have created a NativeSignal, this is a Signal just as we have used before but this time we pass it an object to listen to (ie ‘this’), an Event to Listen for (ie MouseEvent.MOUSE_DOWN) and finally the type of Event (ie MouseEvent). We don’t have to concern ourselves with AddEventListener and all that, it will automagically listen for the Native Event, intercept it and Dispatch the Event on the Signal.

We can see how this works in the Main.as file below:

package
{
	import flash.events.MouseEvent;
	import flash.display.Sprite;
 
	/**
	 * A quick example of how to use AS3 native events
	 * with AS3Signals.
	 *
	 * @author Anton Mills
	 * @version 12/09/2010
	 */
	public class Main extends Sprite
	{
 
		/**
		 * constructor
		 */
		public function Main()
		{
			// set up a load of CircleThingys
			for (var i : int = 0; i < 50; i++)
			{
				// create and position a CircleThingy
				var circle:CircleThingy = new CircleThingy();
				circle.x = Math.random() * stage.stageWidth;
				circle.y = Math.random() * stage.stageHeight;
				addChild(circle); 
 
				// add the listener
				circle.signalMouseDown.add(mouseDownListener);
			}
		}
 
		/**
		 * invoked when MOUSE_DOWN on a CircleThingy
		 *
		 * @param event MouseEvent (as per usual)
		 */
		private function mouseDownListener(event:MouseEvent):void
		{
			// get reference to the clicked CircleThingy and change it's state
			var circle:CircleThingy = CircleThingy(event.target);
			circle.drawStateOn();
 
			// remove the listener, soooo much easier!
			circle.signalMouseDown.removeAll();
		}
	}
}

So in the constructor we create a whole bunch of CircleThingys, position them randomly, add them to the DisplayList and the most important part, attach a Listner to the CircleThingys Signal. The Listener method itself is a regular Listener, we still have to tell AS3 that an event of type MouseEvent will be passed through as a property and we still get a reference to the object through event.target but you can see how easy it is to remove the Listener from the Signal at the end, ohhhh so much nicer don’t you think?

So hopefully, if all is up and running you should get something like this:

Like I said, ‘billy basics’ but you get the idea!

anton.