davidpaulrosser{blog}

I’ve just launched a small little web application I’ve been working on for the past week. As you can guess from the blog post title it’s an (deep breath) anaglyph stereoscopic 3D drawing application. If you want to play around with the app straight away click the pirate below:

The idea

During my second year at Bath Spa University we had a self directed project. I set my project on illusions. Through my research I was looking at techniques and illusions that trick the mind, this led to Stereoscopy. I was in Brighton sometime after browsing through the lanes and came across a 3D Drawing paper pad in some shop, identical to the one below:

Since then my 3D drawing pad went walkies :/.
From a recent trip to the National Science Museum I found another in their shop, so I grabbed another and thought it would be a cool little project to re-create in Flash.
As I didn’t have any previous knowledge of Bitmap programming in Flash it proved a challenging and exciting project to develop.

Development

I was originally going to develop this app with the PureMVC framework, that way I would have learned two new things at once. After reading and following some basic setup tutorials I decided not to go with the framework, the prime reason being I don’t know it well enough to build something that could turn out to be quite complex. Instead I wrote a little class library to manage the application.

For the drawing techniques in Draw3D I extended the functionality of Colin Moock’s Scribble as3 example in the O’Reilly Book: Essential ActionScript 3.0 by Colin Moock. If you don’t have that book and your starting out in AS3 I highly recommend it, as it’s not just a book, its a great reference to refer too, and a million times better than the Adobe Live docs!

I used Flash Develop along with the Flex SDK to produce the application. All graphics in the app are created entirely from AS. The only bitmaps in there are ones I’ve converted to from vector.

I’l probably write a blog post sometime in the foreseeable future on tips and tricks with Bitmap programming as I’ve learnt quite a few in the process of developing this app. If you didn’t click on the pirate above click here, grab your 3D glasses and doodle something.

Recently I’ve been revising my coding methods by shortening the amount of code I write for simple things. The code I’m using for this button example is something I picked up upon last year.

When I was migrating from AS2 to AS3 I used to write the following for simple button interactions:

// Button OVER
button1.addEventListener(MouseEvent.MOUSE_OVER, buttonEventsHandler);
button2.addEventListener(MouseEvent.MOUSE_OVER, buttonEventsHandler);
button3.addEventListener(MouseEvent.MOUSE_OVER, buttonEventsHandler);

// Button OUT
button1.addEventListener(MouseEvent.MOUSE_OUT, buttonEventsHandler);
button2.addEventListener(MouseEvent.MOUSE_OUT, buttonEventsHandler);
button3.addEventListener(MouseEvent.MOUSE_OUT, buttonEventsHandler);

Now you can already see that’s taken up a fair amount of space just for the Mouse Over and Out events.
An efficient method of doing this would be to store all button instances in an array then add event listeners to all the instances at once. Example:

// Store all button instances in a array
var buttonArray:Array = new Array(button1_btn, button2_btn, button3_btn);

// Loop through the length of the array
for (var i:int = 0; i < buttonArray.length; i++)
{
	//Add mouse event listeners to each button in the array
	buttonArray[i].addEventListener(MouseEvent.MOUSE_OVER, buttonEventsHandler);
	buttonArray[i].addEventListener(MouseEvent.MOUSE_OUT, buttonEventsHandler);
	buttonArray[i].addEventListener(MouseEvent.MOUSE_DOWN, buttonEventsHandler);

	// Enable the button hand cursor
	buttonArray[i].buttonMode = true;
	buttonArray[i].useHandCursor = true;
}

You can see how efficient the above code is. It adds mouse event listeners to each button and sets all the buttons hand cursors to true.
Now for the mouse events function I find that using switch statements the most efficient method to use. Example:

private function buttonEventsHandler(e:MouseEvent):void
{
	switch (e.type)
	{
		case MouseEvent.MOUSE_OVER:

		//doSomething

		break;

		case MouseEvent.MOUSE_OUT:

		//doSomething

		break;

		case MouseEvent.MOUSE_DOWN:

		switch(e.target)
		{
			case button1_btn:

			//doSomething

			break;

			case button2_btn:

			//doSomething

			break;

			case button3_btn:

			//doSomething

			break;
		}

	break;
}

If you wanted to target buttons individually you can switch between each button by using switch(e.target) then by writing a case for each button you wanted to do something for.

You can download the source files here.

Example.as

package
{
	/*
	* Efficient button coding
	* http://www.davidpaulrosser.co.uk/blog/?p=851
	*
	* @author David Paul Rosser
	*
	* e:info@davidpaulrosser.co.uk
	* t:@davidpaulrosser
	*
	* Efficient Button Coding by David Paul Rosser is licensed under a Creative Commons Attribution 2.0 UK: England & Wales License.
	*/

	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class Example extends MovieClip
	{

		private var buttonArray:Array;

		public function Example()
		{
			init();
		}

		private function init()
		{
			// Store the buttons inside an array.
			buttonArray = new Array(button1_btn, button2_btn, button3_btn);

			for (var i:int = 0; i < buttonArray.length; i++)
			{
				//Add mouse event listeners to each button in the array
				buttonArray[i].addEventListener(MouseEvent.MOUSE_OVER, buttonEventsHandler);
				buttonArray[i].addEventListener(MouseEvent.MOUSE_OUT, buttonEventsHandler);
				buttonArray[i].addEventListener(MouseEvent.MOUSE_DOWN, buttonEventsHandler);

				// Enable the button hand cursor
				buttonArray[i].buttonMode = true;
				buttonArray[i].useHandCursor = true;
			}
		}

		private function buttonEventsHandler(e:MouseEvent):void
		{
			switch (e.type)
			{
				case MouseEvent.MOUSE_OVER:

				//doSomething

				break;

				case MouseEvent.MOUSE_OUT:

				//doSomething

				break;

				case MouseEvent.MOUSE_DOWN:

				// You can switch between each button by using switch '(e.target)' then using 'case' for each buttons instance name
				switch(e.target)
				{
					case button1_btn:

					// Change the textfield on the stage to: button1_btn was clicked
					buttonStatus_txt.text = e.target.name + " was clicked";

					break;

					case button2_btn:

					// Change the textfield on the stage to: button2_btn was clicked
					buttonStatus_txt.text = e.target.name + " was clicked";

					break;

					case button3_btn:

					// Change the textfield on the stage to: button3_btn was clicked
					buttonStatus_txt.text = e.target.name + " was clicked";

					break;
				}

				break;
			}
		}

	}

}

Efficient Button Coding by David Paul Rosser is licensed under a Creative Commons Attribution 2.0 UK: England & Wales License.