Categories
Articles

Astro is Flash 10

After a summer working long hours on micro sites for clients of the advertising agency Digitas in NYC followed by a super car and hiking trip through the US Midwest (videos) for a few weeks and some “retirement” time off, I am back in the tech seat. So I saw this a while ago, but I reluctant to get glued into my PC for too much during my break.

At MAX 2007 Chicago video cameras were rolling to show Adobe’s new direction with Flash/Flex/AIR development. It is code named Astro. What we see now Flash 10 and Astro are the same.

Here is one YouTube links you can see for yourself.

As well you can follow the progress of Astro at this link at Adobe Labs.

One impressive item was the attempt to allow designers create local test data that normally would server from the internet. This will extend designers further into the development and design cycle without the need to code.

3D is starting to show up in the Flash Player. Right now it is called 3D effects. Not sure how limiting that term is but there is an indication of an API for 3D.

More image processing functionality under the name Hydra that allows custom image filters and effects. Sounds like fun for the showy needs.

There is no beta as of this writing.

Categories
Articles

Actionscript 3 Animating Sprite Rotation Following Mouse Movement

By Lon (Alonzo) Hosford

This my own version of of Keith Peter’s Foundation Actionscript 3.0 Animation: Making Things Move chapter 3 implementation of sprite rotation following a mouse.

Download files
[August 10 2010 – I updated this to an Actionscript project in Flex Builder 4. ]

Keith Peters AS3 Animation
Learn More

You can build this with the free Flex SDK by using the code in the src folder. Same for Flash CS3 and later versions. You need to create a Flash Document in the src folder and set the document class to Chapter03_Rotation_AS3. For your convenience the Flash CS4 example download is included.

This article shows the code for the Flex project.

Application Class – Chapter03_Rotation_Flex
This Flex version is a spark implementation. The SpriteVisualElement component shown on line 51 is used to add the code to the application display on line 31.

<?xml version="1.0" encoding="utf-8"?>
<!--
	Application class for showing sprite rotation following mouse movement. 
	<p>Author: Lon Hosford https://www.lonhosford.com 908 996 3773</p>
    <p>Reference: Keith Peter's Actionscript 3.0 Animation Chapter 3</p>
	
-->
<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" width="400" height="400"
			   creationComplete="creationCompleteHandler(event)" 
			   viewSourceURL="srcview/index.html">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			// Properties for background
			private static const backgroundColor:Number = 0x0000ff;
			private static const backgroundBorderColor:Number = 0x666666;
			private static const backgroundBorderWeight:Number = 2;
			/**
			 * Handler for Application creationComplete event
			 * */
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				// Create an Arrow object
				var arrow:Arrow = new Arrow();
				// Wrap arrow object into a RotateSpriteToMouse object
				var rotateToMouse:RotateSpriteToMouse = new RotateSpriteToMouse(arrow);
				// Add rotateToMouse Sprite to a SpriteVisualElement
				arrowVisualElement.addChild(rotateToMouse);
				// Center the SpriteVisualElement
				arrowVisualElement.x = background_bc.width / 2;
				arrowVisualElement.y = background_bc.height / 2;
			}

		]]>
	</fx:Script>
	<!--- 
	Background for app 
	--> 
	<s:BorderContainer id = "background_bc"
					   width="{width}" height = "{height}"
					   borderWeight="{backgroundBorderWeight}"
					   borderColor="{backgroundBorderColor}"
					   backgroundColor="{backgroundColor}">

		<!--- 
		Spark container for Sprite 
		--> 
		<s:SpriteVisualElement id="arrowVisualElement" />

	</s:BorderContainer>
					   
</s:Application>

[ad name=”Google Adsense”]
RotateSpriteToMouse Class
This is the class that does the work. Listening to the Event.ENTER_FRAME event leads to the update_rotation() method that does the work of updating the rotation.

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	/**
	 * Rotates sprite to mouse position
	 * */
	public class RotateSpriteToMouse extends Sprite
	{
		private var _sprite_to_rotate:Sprite;	// Sprite to rotate to mouse
		/**
		 * Constructor 
		 * @param sprite_to_rotate The sprite to rotate
		 * */
		public function RotateSpriteToMouse(sprite_to_rotate:Sprite)
		{
			_sprite_to_rotate = sprite_to_rotate;
			addChild(_sprite_to_rotate);
			addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);
		}
		/**
		 * The event handler for Event.ENTER_FRAME
		 * */
		private function enterFrameEventHandler(event:Event):void
		{
			update_rotation();
		}
		/**
		 * Updates the rotation of the _sprite_to_rotate
		 * */
		private function update_rotation():void
		{
			// Triangle adjacent angle side distance for the x value.
			var dx:Number = mouseX - _sprite_to_rotate.x;
			// Triangle opposite angle side distance for the y value.
			var dy:Number = mouseY - _sprite_to_rotate.y;
			// Compute angle in radians from the sprite to the mouse position.
			var radians:Number = Math.atan2(dy, dx);
			// Convert radians to degrees
			_sprite_to_rotate.rotation = radians * 180 / Math.PI;
		}
	}
}

Arrow Class
Simple arrow sprite that Keith wrote. Key here is the center registration point.

package
{
	import flash.display.Sprite;
	/**
	 * Creates an arrow sprite with fixed dimensions
	 * */
	public class Arrow extends Sprite
	{
		public function Arrow() 
		{
			draw();
		}
		/**
		 * Draw the arrow
		 * */
		private function draw():void
		{
			graphics.lineStyle(1, 0, 1);
			graphics.beginFill(0xffff00);
			graphics.moveTo(-50, -25);
			graphics.lineTo(0, -25);
			graphics.lineTo(0, -50);
			graphics.lineTo(50, 0);
			graphics.lineTo(0, 50);
			graphics.lineTo(0, 25);
			graphics.lineTo(-50, 25);
			graphics.lineTo(-50, -25);
			graphics.endFill();
		}
	}
	
}
Categories
Articles

Actionscript 3 Animation Following the Mouse to Show Velocity at an Angle

By Lon (Alonzo) Hosford

See also the same done in HTML5 canvas HTML5 Canvas Based Animation Rotate Arrow To Mouse Position

In chapter 5 of Keith Peter’s Foundation Actionscript 3.0 Animation: Making Things Move velocity at an angle is explained. I took Keith’s mouse following example demonstrating velocity at an angle and punched it up a small notch.

Download files
[August 10 2010 – I updated this to an Actionscript project in Flex Builder 4. ]

You can build this with the free Flex SDK by using the code in the src folder. Same for Flash CS3 and later versions. You need to create a Flash Document in the src folder and set the document class to Chapter05_FollowMouse. For your convenience the Flash CS4 example download is included.

Keith Peters AS3 Animation
Learn More

This article shows the code for the Flex project. This Flex version is a spark implementation.

The arrow will follow the mouse around the stage. It will stop following when requested and start again with a mouse click on the stage. It also waits patiently when the mouse leaves the stage. The arrow gets real frustrated when you put the mouse over it. It always points towards the mouse when the mouse is over the stage.

Application Class – Chapter04_SprayPaint
I added user mouse click interaction to control the start and stop movement of the _arrow sprite. See line 40 and lines 48 to 51.

The movement also stops and starts when the mouse enters and leaves the stage. To accomplish that the stage needed to register a Event.MOUSE_LEAVE event to detect the mouse leaving the stage. The stage object is available when the applicationComplete(...) event occurs. The MouseEvent.MOUSE_MOVE sufficed to detect the mouse back over the stage. The _mouseOverStage variable carries the state of the mouse over the stage.

The rotation of the _arrow sprite is continuous. Gives it a mouse awareness state.

<?xml version="1.0" encoding="utf-8"?>
<!--
	Application class to demonstrate animation trigonometry to show velocity at an angle. 
    Mouse position determines the angle. 
	<p>Author: Lon Hosford https://www.lonhosford.com 908 996 3773</p>
    <p>Reference: Keith Peter's Actionscript 3.0 Animation Chapter 5</p>
	
-->
<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" width="400" height="400"
			   applicationComplete="applicationCompleteHandler(event)"
			   viewSourceURL="srcview/index.html">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			public static const backgroundColor:Number = 0x0000ff;
			public static const backgroundBorderColor:Number = 0x666666;
			public static const backgroundBorderWeight:Number = 2;
			
			private var _instructions_tf:TextField;						// Instructions for user
			[Bindable]
			private var _lang_instructions:String = "Click to start and stop. Move mouse for animation."
			private var _arrow:Arrow;									// Animated sprite is an Arrow 
			private var _speed:Number = 5;								// Movement speed
			private var _allowMoving:Boolean = false;					// Use allowing moving state
			private var _mouseOverStage:Boolean = true;					// Mouse on the stage state
			
			/**
			 * Handler for Application applicationComplete event
			 * */
			protected function applicationCompleteHandler(event:FlexEvent):void
			{
				// Create Arrow object and add to stage. This is animated.
				_arrow = new Arrow();
				arrowVisualElement.addChild(_arrow);
				_arrow.x = (width - _arrow.width ) / 2;
				_arrow.y = (height - _arrow.height ) / 2;
				
				
				stage.addEventListener(MouseEvent.CLICK, mouseClickEventHandler);
				stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);
				stage.addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);
				stage.addEventListener(Event.MOUSE_LEAVE, mouseLeaveEventHandler);
			}
			/**
			 * MouseEvent.CLICK handler
			 * */
			private function mouseClickEventHandler(event:MouseEvent):void
			{
				_allowMoving = !_allowMoving;
			}
			/**
			 * MouseEvent.MOUSE_MOVE handler
			 * */
			private function mouseMoveEventHandler(event:MouseEvent):void
			{
				_mouseOverStage = true;
			}
			/**
			 * Event.MOUSE_LEAVE handler
			 * */
			private function mouseLeaveEventHandler(event:Event):void
			{
				_mouseOverStage = false;
			}
			
			/**
			 * Event.ENTER_FRAME handler
			 * */
			private function enterFrameEventHandler(event:Event):void
			{
				draw();
			}

[ad name=”Google Adsense”]
The draw() method on line 77 updates the animation. The dx and dy variables are the distance from the mouse to the registration point of the _arrow sprite. Radians for the angle are computed using the Math.atan2(...) method. The angle in radians is converted for Actionscript rotation property to degrees. These trigonometry formulas are covered in Keith’s book .

The state the user choose to have the mouse follow is tested and if true the moveTo() method on line 98 computes the velocity at an angle discussed in chapter 5.

The _arrow sprite is designed with a center registration point to facilitate the rotation. As a result the _arrow sprite will move until the mouse coordinates reach the registration point. I added the hitTestPoint(...) method on line 105 to adjust so that the movement stops at the edge of the pixels in the _arrow sprite. The result the _arrow sprite’s point comes very close to the mouse versus the center of the _arrow sprite.

			/**
			 * Draw
			 * */
			private function draw():void
			{		
				// Distance of arrow registration point from mouse
				var dx:Number = mouseX - _arrow.x ;
				var dy:Number = mouseY - _arrow.y ;
				
				// Get angle in radians
				var angle:Number = Math.atan2(dy, dx);
				// Rotate converting radians to degrees
				_arrow.rotation = angle * 180 / Math.PI;
				
				// Is in a mouse following state
				if (_allowMoving)
				{
					// Move based on angle
					moveTo(angle);
				}
			}
			/**
			 * Move arrow
			 * */
			private function moveTo(angle:Number):void
			{
				// Velocity based on angle
				var vx:Number = Math.cos(angle) * _speed;
				var vy:Number = Math.sin(angle) * _speed;
				
				// Mouse position overlaps shape and mouse is over a pixel in the object
				if (!_arrow.hitTestPoint(mouseX, mouseY, true) && _mouseOverStage)
				{
					// Add velocity to position
					_arrow.x += vx ;
					_arrow.y += vy ;
				}
			}
			/**
			 * Set any stage options per your needs
			 * */
			private function initStage():void 
			{
				stage.scaleMode = StageScaleMode.NO_SCALE;
			}
			/**
			 * Instructions for user
			 * */
			private function getInstructions_tf():TextField 
			{
				var tf:TextField = new TextField();
				tf.autoSize = TextFieldAutoSize.LEFT;			
				tf.background = true;
				var textFormat:TextFormat = new TextFormat();
				textFormat.font = "_typewriter";
				tf.defaultTextFormat = textFormat;
				tf.text = _lang_instructions;
				return tf;
			}
		]]>
	</fx:Script>

[ad name=”Google Adsense”]
This part of the application represents the Flex UI based in Spark components.

	<!--- 
	Background for app 
	--> 
	<s:BorderContainer id = "background_bc"
					   width="{width}" height = "{height}"
					   borderWeight="{backgroundBorderWeight}"
					   borderColor="{backgroundBorderColor}"
					   backgroundColor="{backgroundColor}">

		<!--- 
		Spark container for Sprite 
		--> 
		<s:SpriteVisualElement id="arrowVisualElement" />

	</s:BorderContainer>
	<!--- 
	Instructions 
	--> 
	<s:HGroup  horizontalAlign="center" x="0" y="378" width = "100%">
		<s:Label text="{_lang_instructions}" color="0xffffff"/>
	</s:HGroup>
					   
</s:Application>

[ad name=”Google Adsense”]

Categories
Articles

Actionscript 3 Spray Paint with BitmapData

By Lon (Alonzo) Hosford

This my own version of of Keith Peter’s Foundation Actionscript 3.0 Animation: Making Things Move chapter 4 use of the BitmapData class to create a spray paint example.

Download files
[August 10 2010 – I updated this to an Actionscript project in Flex Builder 4. ]

You can build this with the free Flex SDK by using the code in the src folder. Same for Flash CS3 and later versions. You need to create a Flash Document in the src folder and set the document class to Chapter04_SprayPaint. For your convenience the Flash CS4 example download is included.

Keith Peters AS3 Animation
Learn More

This article shows the code for the Flex project. This Flex version is a spark implementation.

Application Class – Chapter04_SprayPaint
The canvas instance of the BitmapData class is instantiated line 32. The BitmapData class setPixel32(...) method on line 83 is used to set the color and alpha transparency values of a single 32 bit pixel.

The overall user interaction is mouse down start the enter frame events that call the draw() method and also to select a random color.

<?xml version="1.0" encoding="utf-8"?>
<!--
	Application class to demonstrate use of the BitmapData class along with animation trigonometry. 
	<p>Author: Lon Hosford https://www.lonhosford.com 908 996 3773</p>
    <p>Reference: Keith Peter's Actionscript 3.0 Animation Chapter 4</p>
	
-->
<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" width="400" height="400"
			   creationComplete="creationCompleteHandler(event)" 
			   viewSourceURL="srcview/index.html">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			// Properties for background
			private static const backgroundColor:Number = 0xffffff;
			private static const backgroundBorderColor:Number = 0x666666;
			private static const backgroundBorderWeight:Number = 2;
			private var canvas:BitmapData;			// Pixel level access
			private var color:uint;					// Randomly generated spray brush colors
			private var size:Number = 20;			// Size of the spray brush
			private var density:Number = 50;		// Number of pixels sprayed per frame
			/**
			 * Handler for Application creationComplete event
			 * */
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				
				// Create BitmapData object allowing use to work with pixels
				canvas = new BitmapData( background_bc.width,background_bc.height, true, 0x00000000);
				var bmp:Bitmap =  new Bitmap(canvas);
				
				// Add itmapData object to a SpriteVisualElement
				arrowVisualElement.addChild(bmp);
				// Handlers for mouse events to signal drawing.
				addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventHandler);
				addEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
			}
			/**
			 * Event handler for MouseEvent.MOUSE_DOWN
			 * */
			private function mouseDownEventHandler(event:Event):void 
			{
				// Random color from 0 to highest color value which is white
				// and then add alpha channel of opaque
				color = Math.random() * 0xffffff + 0xff000000;
				// Start enter frame events
				stage.addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);
			}
			/**
			 * Event handler for MouseEvent.MOUSE_UP
			 * */
			private function mouseUpEventHandler(event:Event):void 
			{
				stage.removeEventListener(Event.ENTER_FRAME, enterFrameEventHandler);
			}
			/**
			 * Event handler for Event.ENTER_FRAME
			 * */
			private function enterFrameEventHandler(event:Event):void 
			{
				draw();
			}

[ad name=”Google Adsense”]
The draw method uses the density variable on line 72 to determine the number of pixels to color using randomization to compute an angle and a radius within the size of the brush.

Each pixel is basically a point on its own circle. The mouse is becomes a center point for a random circle with a diameter up to the size variable. Line 77 computes the radius for that circle.

Keith’s formulas for computing points on a circle math from chapter 3 are then used to compute the position of the pixel on lines 79 and 81.


			/**
			 * Draw
			 * */
			private function draw():void 
			{
				// Repeat for number of pixels - density.
				for (var i:int = 0; i < density; i++)
				{
					// Random angle 0 - 6.2832 radians  (0 - 360)
					var angle:Number = Math.random() * Math.PI * 2;
					// Radius is random percentage of maximum radius (size / 2)
					var radius:Number = Math.random() * size / 2;
					// Center is mouseX to compute the x point
					var xpos:Number = mouseX + Math.cos(angle) * radius;
					// Center is mouseY to compute the y point
					var ypos:Number = mouseY + Math.sin(angle) * radius;
					//Set the color and alpha transparency values of a single 32 bit pixel.
					canvas.setPixel32(xpos, ypos, color);
					
				}
			}

		]]>
	</fx:Script>

[ad name=”Google Adsense”]
The SpriteVisualElement component allows adding the canvas BitmapData object to the display list.

	<!--- 
	Background for app 
	--> 
	<s:BorderContainer id = "background_bc"
					   width="{width}" height = "{height}"
					   borderWeight="{backgroundBorderWeight}"
					   borderColor="{backgroundBorderColor}"
					   backgroundColor="{backgroundColor}">

		<!--- 
		Spark container for Sprite 
		--> 
		<s:SpriteVisualElement id="arrowVisualElement" />

	</s:BorderContainer>
	<!--- 
	Instructions 
	--> 
	<s:Label x="96" y="378" text="Click and drag mouse to spray paint."/>
					   
</s:Application>
Categories
Articles

Factory Design Pattern Actionscript 3 Print Center – Sanders & Cumaranatunge – Part 2 of 2

By Lon (Alonzo) Hosford

This is the expanded print center Factory design pattern from chapter 2 of William Sanders and Chandima Cumaranatunge Actionscript 3.0 Design Patterns.

Actionscript 3 Design Patterns Learn More

This is an ActionScript project created in Flex Builder and updated to Flex Builder 4. Download the example code. You can build this with the free Flex SDK by using the code in the src folder. Same for Flash CS3 and CS4. You need to create a Flash Document in the src folder and set the document class to Chapter02_Factory_PrintCenters. For your convenience you can download a Flash CS4 ready to go example.

This includes a basic Actionscript debugger console to display tracing statements on stage. Each class sends messages to the console to show their methods working. These messages help you follow the relationships in the Factory design pattern.

The classes that from part 1 are not repeated. Click here to review them.

Application Class – Chapter02_Factory_PrintCenters
This is the client class. It repeats the client class discussed in part 1 use or the PrintCenter classes. It also access the new HighVolPrinterCenter2 and LowVolPrinterCenter2 classes on line 48 and 54 respectively. These are subclasses of the new PrintCenter2. These are new creator classes that take parameters to determine which IPrintJob classes to select. The original PrintCenter subclasses HighVolPrinterCenter2 and LowVolPrinterCenter2 still remain and still work.

/**
 * Demonstrates a more concrete example of decoupling the client, this file, from the products.
 * In this case the products are print jobs on various printers. The print jobs are not coupled
 * to the client. This example uses parameters for the factory choices.
 * <p>
 * This is part two of the example. Additional IPrintJob classes are added along with a second creator
 * classes that take parameters for the type of printing.
 * </p>
 * */
package
{
	import com.lonhosford.util.debug.lite.DebugConsole;

	import flash.display.Sprite;

	import printcenters.HighVolPrinterCenter;
	import printcenters.HighVolPrinterCenter2;
	import printcenters.LowVolPrinterCenter;
	import printcenters.LowVolPrinterCenter2;
	import printcenters.PrintCenter;
	import printcenters.PrintCenter2;

	// {SET STAGE SIZE AND SPEED HERE}
	[SWF(width=500, height = 300, frameRate = 30)]
	public class Chapter02_Factory_PrintCenters extends Sprite
	{
		private var debugConsole:DebugConsole = DebugConsole.getInstance();
		public function Chapter02_Factory_PrintCenters()
		{
			stage.addChild(debugConsole);
			debugConsole.width = stage.stageWidth;
			debugConsole.height = stage.stageHeight;

			debugConsole.write("Actionscript 3.0 Design Patterns");
			debugConsole.write("William Sanders & Chandima Cumaranatunge");
			debugConsole.write("Chapter 2 Print Centers Example");
			debugConsole.write("\n");

			debugConsole.write("\nPrint LongThesis.doc to high volume printer.");
			var pcHighVol:PrintCenter = new HighVolPrinterCenter();
			pcHighVol.print("LongThesis.doc");

			debugConsole.write("\nPrint ShortVita.doc to low volume printer.");
			var pcLowVol:PrintCenter = new LowVolPrinterCenter();
			pcLowVol.print("ShortVita.doc");

			debugConsole.write("\nPrint LongThesis.doc to high volume BW printer.");
			var pc2HighVol:PrintCenter2 = new HighVolPrinterCenter2();
			pc2HighVol.print("LongThesis.doc", HighVolPrinterCenter2.BW);
			debugConsole.write("\nPrint SalesReport.doc to high volume COLOR printer.");
			pc2HighVol.print("SalesReport.doc", HighVolPrinterCenter2.COLOR);

			debugConsole.write("\nPrint LongThesis.doc to low volume BW printer.");
			var pc2LowVol:PrintCenter2 = new LowVolPrinterCenter2();
			pc2LowVol.print("LongThesis.doc", LowVolPrinterCenter2.BW);
			debugConsole.write("\nPrint SalesReport.doc to low volume COLOR printer.");
			pc2LowVol.print("SalesReport.doc", LowVolPrinterCenter2.COLOR);

		}
	}
}

PrintCenter2 Class
The main change over PrintCenter class is the printType parameter in the print() method on line 17 and the createPrintJob() factory method on line 27. Each PrintCenter2 subclass uses the printType parameter to determine which IPrintJob class to create. This expands the capability of unlimited new IPrintJob classes for any single PrintCenter2 creator class.

package printcenters
{
	import flash.errors.IllegalOperationError;
	/**
	 * Handles file printing. Paramatizes the type of print job.
	 * */
	public class PrintCenter2
	{
		public function PrintCenter2()
		{
		}
		/**
		 * Simulate printing a file.
		 * @param fileName Name of file to print.
		 * @param printType Name of file to print.
		 * */
		public function print(fileName:String, printType:uint):void
		{
			var printjob:IPrintJob = this.createPrintJob(printType);
			printjob.start(fileName);
		}
		/**
		 * Creates the IPrintJob products.
		 * @throws flash.errors.IllegalOperationError Must override in subclass.
		 * @param printType Name of file to print.
		 * */
		protected function createPrintJob(printType:uint):IPrintJob
		{
			throw new IllegalOperationError("PrintCenter2.createPrintJob() - override in subclass");
			return null;
		}
	}
}

HighVolPrintCenter2 Class
The key change over the HighVolPrintCenter class are the BW and COLOR constants on line 10 and 11 respectively. These are the printType parameter values for selecting the IPrintJob class to use.

The createPrintJob() function on line 23 uses the code>BW and COLOR constants to select the WorkgroupPrintJob and the new ColorLaserPrintJob product classes. Any other parameter throws an Error.

package printcenters
{
	import com.lonhosford.util.debug.lite.Debugger;
	/**
	 * HighVolPrinterCenter creator class
	 * */
	public class HighVolPrinterCenter2 extends PrintCenter2
	{
		private var debugger:Debugger = Debugger.getInstance();
		public static const BW:uint = 0;
		public static const COLOR:uint = 1;
		public function HighVolPrinterCenter2()
		{
			debugger.write("HighVolPrinterCenter2() - This is a creator.")
		
		}
		/**
		 * Create IPrintJob object.
		 * @param printType Name of file to print.
		 * @return ColorLaserPrintJob | WorkgroupPrintJob based on printType
		 * @throws Error When printType is not matched.
		 * */
		override protected function createPrintJob(printType:uint):IPrintJob
		{
			
			if (printType == BW)
			{
				debugger.write("HighVolPrinterCenter2.createPrintJob() - BW");
				return new WorkgroupPrintJob();
			}
			else if (printType == COLOR)
			{
				debugger.write("HighVolPrinterCenter2.createPrintJob() - COLOR");
				return new ColorLaserPrintJob();
				
			}
			else
			{
				throw new Error("HighVolPrinterCenter2.createPrintJob() - Invalid printer kind.");
				return null;
			}
			
		}
	}
}

LowVolPrintCenter2 Class
This mimics the HighVolPrintCenter2 class. The InkJetPrintJob and the new ColorInkjetPrintJob product classes are selected by the printerType parameter supplied to the createPrintJob(...) function on line 23. Lines 10 and 11 contain valid values for the printerType parameter.

package printcenters
{
	import com.lonhosford.util.debug.lite.Debugger;
	/**
	 * LowVolPrinterCenter creator class
	 * */
	public class LowVolPrinterCenter2 extends PrintCenter2
	{
		private var debugger:Debugger = Debugger.getInstance();
		public static const BW:uint = 0;
		public static const COLOR:uint = 1;
		public function LowVolPrinterCenter2()
		{
			debugger.write("LowVolPrinterCenter2() - This is a creator.")
		
		}
		/**
		 * Create IPrintJob object.
		 * @param printType Name of file to print.
		 * @return InkJetPrintJob | ColorInkjetPrintJob based on printType
		 * @throws Error When printType is not matched.
		 * */
		override protected function createPrintJob(printType:uint):IPrintJob
		{
			
			if (printType == BW)
			{
				debugger.write("LowVolPrinterCenter2.createPrintJob() - BW");
				return new InkJetPrintJob();
			}
			else if (printType == COLOR)
			{
				debugger.write("LowVolPrinterCenter2.createPrintJob() - COLOR");
				return new ColorInkjetPrintJob();
				
			}
			else
			{
				throw new Error("LowVolPrinterCenter2.createPrintJob() - Invalid low volume print type.");
				return null;
			}
			
		}
	}
}

[ad name=”Google Adsense”]
There are some new IPrintJob classes introduced. They simulate newer types of products available to the creator classes.

ColorLaserPrintJob Class
Nothing unusual here. Just another IPrintJob class.

package printcenters
{
	import com.lonhosford.util.debug.lite.Debugger;
	/**
	 * ColorLaserPrintJob product class
	 * */
	internal class ColorLaserPrintJob implements IPrintJob
	{
		private var debugger:Debugger = Debugger.getInstance();
		public function ColorLaserPrintJob()
		{
			debugger.write("ColorLaserPrintJob()")
		}
		/**
		 * Simulate starting an ColorInkjetPrintJob
		 * @param fileName Name of file to print.
		 * */		
		public function start(fileName:String):void
		{
			debugger.write("ColorLaserPrintJob.start() - fileName:" + fileName);
		}
	}
}

ColorInkjetPrintJob Class
Another IPrintJob class. They can be pounded out. Anyone want to make a dot matrix print job?

package printcenters
{
	import com.lonhosford.util.debug.lite.Debugger;
	/**
	 * ColorInkjetPrintJob product class
	 * */
	internal class ColorInkjetPrintJob implements IPrintJob
	{
		private var debugger:Debugger = Debugger.getInstance();
		public function ColorInkjetPrintJob()
		{
			debugger.write("ColorInkjetPrintJob()")
		}
		/**
		 * Simulate starting an ColorInkjetPrintJob
		 * @param fileName Name of file to print.
		 * */		
		public function start(fileName:String):void
		{
			debugger.write("ColorInkjetPrintJob.start() - fileName:" + fileName);
		}
	}
}

Categories
Articles

Factory Design Pattern Minimalist Example For Actionscript 3 – Sanders & Cumaranatunge

By Lon (Alonzo) Hosford

This is the minimalist Factory design pattern from chapter 2 of William Sanders and Chandima Cumaranatunge Actionscript 3.0 Design Patterns

Actionscript 3 Design Patterns Learn More

This is an ActionScript project created in Flex Builder and updated to Flex Builder 4. Download the example code. You can build this with the free Flex SDK by using the code in the src folder. Same for Flash CS3 and CS4. You need to create a Flash Document in the src folder and set the document class to Chapter02_Factory_Minimalist_Flash. For your convenience you can download a Flash CS4 ready to go example.

This includes a basic Actionscript debugger console to display tracing statements on stage. Each class sends messages to the console to show their methods working. These messages help you follow the relationships in the Factory design pattern.

Application Class – Chapter02_Factory_Minimalist
This is the client class. The class simply instantiates CreatorA and CreatorB classes and calls the doStuff() method they inherit from the Creator class. The basic idea is that the ProductA and ProductB classes are uncoupled from the client. Uncoupling is a good OOP design principle.

/**
 * Demonstrates a minimalist example of decoupling the client, this file, from the products.
 * The product classes may be modified within the package and the creators maintain the
 * direct interface to the clients.
 * */
package
{
	import com.lonhosford.util.debug.lite.DebugConsole;
	import com.lonhosford.util.debug.lite.DebugMessage;
	import com.lonhosford.util.debug.lite.Debugger;
	import com.lonhosford.util.debug.lite.DebuggerEvent;

	import flash.display.Sprite;

	import example.CreatorA;
	import example.CreatorB;

	// {SET STAGE SIZE AND SPEED HERE}
	[SWF(width=500, height = 300, frameRate = 30)]

	public class Chapter02_Factory_Minimalist extends Sprite
	{
		private var debugConsole:DebugConsole = DebugConsole.getInstance();
		private static const backgroundColor:Number = 0xffffff;
		private static const backgroundBorderColor:Number = 0x666666;
		private static const backgroundBorderWidth:Number = 2;

		public function Chapter02_Factory_Minimalist()
		{

			stage.addChild(debugConsole);
			debugConsole.width = stage.stageWidth;
			debugConsole.height = stage.stageHeight;

			debugConsole.write("Actionscript 3.0 Design Patterns");
			debugConsole.write("William Sanders & Chandima Cumaranatunge");
			debugConsole.write("Chapter 2 Factory Minimalist Example");
			debugConsole.write("\n");

			var ca:CreatorA = new CreatorA();
			var cb:CreatorB = new CreatorB();

			ca.doStuff();
			cb.doStuff();
		}
	}
}

Creator Class
This class provides a “factory method” interface to each of the subclasses. The line 16 shows the factoryMethod() method. The method name for the example emphasizes its purpose. The factory method cannot be called from a client class. The method throws an IllegalOperationError to prevent that coding option.

[ad name=”Google Adsense”]
The factoryMethod() method returns a IProduct class. Each Creator subclass will return its own product all having a manipulate() method defined by the IProduct interface discussed later in this post. This Creator class then uses the product class manipulate() method on line 13.

package example
{
	import flash.errors.IllegalOperationError;

	public class Creator
	{
		public function Creator()
		{
		}
		public function doStuff():void
		{
			var product:IProduct = this.factoryMethod(); // this is SubClass CreatorA, CreatorB etc
			product.manipulate();

		}
		protected function factoryMethod():IProduct
		{
			throw new IllegalOperationError("Creator.factoryMethod() - Abstract method. Override in subclass");
			return null;
		}
	}
}

CreatorA Class
This is a class the client classes use. The Creater super class contains the doStuff() method clients use to interact with the product classes.

package example
{
	import com.lonhosford.util.debug.lite.DebugConsole;

	public class CreatorA extends Creator
	{
		private var debugConsole:DebugConsole = DebugConsole.getInstance();
		public function CreatorA()
		{
			debugConsole.write("CreatorA()");
		}
		override protected function factoryMethod():IProduct
		{
			debugConsole.write("CreatorA.factoryMethod() - creating Product1");
			return new Product1();
		}
	}
}

CreatorB Class

package example
{
	import com.lonhosford.util.debug.lite.DebugConsole;

	public class CreatorB extends Creator
	{
		private var debugConsole:DebugConsole = DebugConsole.getInstance();
		public function CreatorB()
		{
			debugConsole.write("CreatorB()");
		}
		override protected function factoryMethod():IProduct
		{
			debugConsole.write ("CreatorB.factoryMethod() - creating Product2");
			return new Product2();
		}
	}
}

[ad name=”Google Adsense”]
IProduct Interface
This interface provides a common manipulate() method for the Creator class, and all its subclasses, in the package. Each product class implements this interface.

package example
{
	public interface IProduct
	{
		function manipulate():void;
	}
}

Product1 Class
This is the worker bee class. It must implement the manipulate() method of the IProduct interface. The Creator class uses this method in its doStuff() method. Remember the doStuff() method is how client classes interact with the products.

package example
{
	import com.lonhosford.util.debug.lite.DebugConsole;

	internal class Product1 implements IProduct
	{
		private var debugConsole:DebugConsole = DebugConsole.getInstance();
		public function Product1()
		{
			debugConsole.write("Product1()");
		}
		public function manipulate():void
		{
			debugConsole.write("Product1.manipulate()");
		}
	}
}

Product2 Class

package example
{
	import com.lonhosford.util.debug.lite.DebugConsole;

	internal class Product2 implements IProduct
	{
		private var debugConsole:DebugConsole = DebugConsole.getInstance();
		public function Product2()
		{
			debugConsole.write("Product2()");
		}
		public function manipulate():void
		{
			debugConsole.write("Product2.manipulate()");
		}
	}
}
Categories
Articles

Factory Design Pattern Print Center Actionscript 3 – Sanders & Cumaranatunge – Part 1 of 2

By Lon (Alonzo) Hosford

This is the print center Factory design pattern from chapter 2 of William Sanders and Chandima Cumaranatunge Actionscript 3.0 Design Patterns.

Actionscript 3 Design Patterns Learn More

This is an ActionScript project created in Flex Builder and updated to Flex Builder 4. Download the example code. You can build this with the free Flex SDK by using the code in the src folder. Same for Flash CS3 and CS4. You need to create a Flash Document in the src folder and set the document class to Chapter02_Factory_PrintCenters. For your convenience you can download a Flash CS4 ready to go example.

This includes a basic Actionscript debugger console to display tracing statements on stage. Each class sends messages to the console to show their methods working. These messages help you follow the relationships in the Factory design pattern.

Application Class – Chapter02_Factory_PrintCenters
This is the client class. The class instantiates HighVolPrinterCenter and LowVolPrinterCenter classes and calls their print() method inherited from the PrintCenter class. The basic idea is the same as the minimalist example to uncouple the product classes from the clientInkJetPrintJob and WorkgroupPrintJob.

/**
 * Demonstrates a more concrete example of decoupling the client, this file, from the products.
 * In this case the products are print jobs on various printers. The print jobs are not coupled
 * to the client. Clients interface with creator classes representing a type of print center. 
 * The product classes doing the work are created by the print center creator classes.
 * <p>
 * This is part one of the example. 
 * </p>
 * */
package
{
	import com.lonhosford.util.debug.lite.DebugConsole;
	
	import flash.display.Sprite;
	
	import printcenters.HighVolPrinterCenter;
	import printcenters.LowVolPrinterCenter;
	import printcenters.PrintCenter;
	
	// {SET STAGE SIZE AND SPEED HERE}
	[SWF(width=500, height = 300, frameRate = 30)]
	public class Chapter02_Factory_PrintCenters extends Sprite
	{
		private var debugConsole:DebugConsole = DebugConsole.getInstance();
		public function Chapter02_Factory_PrintCenters()
		{
			stage.addChild(debugConsole);
			debugConsole.width = stage.stageWidth;
			debugConsole.height = stage.stageHeight;
			
			debugConsole.write("Actionscript 3.0 Design Patterns");
			debugConsole.write("William Sanders & Chandima Cumaranatunge");
			debugConsole.write("Chapter 2 Print Centers Example - Part 1");
			debugConsole.write("\n");
			
			
			debugConsole.write("\nPrint LongThesis.doc to high volume printer.");
			var pcHighVol:PrintCenter = new HighVolPrinterCenter();
			pcHighVol.print("LongThesis.doc");
			
			debugConsole.write("\nPrint ShortVita.doc to low volume printer.");
			var pcLowVol:PrintCenter = new LowVolPrinterCenter();
			pcLowVol.print("ShortVita.doc");
			

			
		}
	}
}

PrintCenter Class
This class provides a “factory method” interface to each of its subclasses LowVolPrintCenter and HighVolPrintCenter. The line 25 shows the createPrintJob()() method. The factory method cannot be called from a client class. The method throws an IllegalOperationError to prevent that coding option.

[ad name=”Google Adsense”]
The createPrintJob()() method returns a IPrintJob interface. Each Creator subclass will return its own product all having a createPrintJob()() method defined by the IPrintJob interface discussed later in this post. This PrintCenter class then uses the product class start() method on line 19.

package printcenters
{
	import flash.errors.IllegalOperationError;
	/**
	 * Handles file printing.
	 * */
	public class PrintCenter
	{
		public function PrintCenter()
		{
		}
		/**
		 * Simulate printing a file.
		 * @param fileName Name of file to print.
		 * */		
		public function print(fileName:String):void
		{
			var printjob:IPrintJob = this.createPrintJob();
			printjob.start(fileName);
		}
		/**
		 * Creates the IPrintJob products.
		 * @throws flash.errors.IllegalOperationError Must override in subclass.
		 * */		
		protected function createPrintJob():IPrintJob
		{
			throw new IllegalOperationError("PrintCenter.createPrintJob() - override in subclass");
			return null;
		}
	}
}

LowVolPrinterCenter Class
This is a class the client classes use. The PrintCenter super class contains the print() method clients use to print a document. The LowVolPrinterCenter then creates the correct IPrintJob class to do the work. In this case it is the InkJetPrintJob class. If programming requires using another IPrintJob class, the change does not impact the print() method interface client classes use.

package printcenters
{
	import com.lonhosford.util.debug.lite.Debugger;
	/**
	 * LowVolPrinterCenter creator class
	 * */
	public class LowVolPrinterCenter extends PrintCenter
	{
		private var debugger:Debugger = Debugger.getInstance();
		public function LowVolPrinterCenter()
		{
			debugger.write("LowVolPrinterCenter() - This is a creator.")
		
		}
		/**
		 * Create InkJetPrintJob object.
		 * @return InkJetPrintJob
		 * */
		override protected function createPrintJob():IPrintJob
		{
			debugger.write("LowVolPrinterCenter.createPrintJob()");
			return new InkJetPrintJob();
		}
	}
}

HighVolPrinterCenter Class
This is a second subclass to the PrintCenter class. It uses the IPrintJob class WorkgroupPrintJob.

package printcenters
{
	import com.lonhosford.util.debug.lite.Debugger;
	/**
	 * HighVolPrinterCenter creator class
	 * */
	public class HighVolPrinterCenter extends PrintCenter
	{
		private var debugger:Debugger = Debugger.getInstance();
		public function HighVolPrinterCenter()
		{
			debugger.write("HighVolPrinterCenter() - This is a creator.")
		}
		/**
		 * Create WorkgroupPrintJob object.
		 * @return WorkgroupPrintJob
		 * */
		override protected function createPrintJob():IPrintJob
		{
			debugger.write("HighVolPrinterCenter.createPrintJob()");
			return new WorkgroupPrintJob();
		}
	}
}

[ad name=”Google Adsense”]
Now there are two PrintCenter classes available to client programs. Both use the print() method to print documents. Next we look at the IPrintJob classes starting with the interface.

IPrintJob Interface
This interface defines one method start() for all IPrintJob classes to implement.

package printcenters
{
	/**
	 * Sets the interface for print job product classes
	 * */
	public interface IPrintJob
	{
		/**
		 * @param fileName Name of file to print.
		 * */		
		function start(fileName:String):void;
	}
}

InkJetPrintJob Class
This class implements the IPrintJob interface and includes the required start() method on line 18.

package printcenters
{
	import com.lonhosford.util.debug.lite.Debugger;
	/**
	 * InkJetPrintJob product class
	 * */
	internal class InkJetPrintJob implements IPrintJob
	{
		private var debugger:Debugger = Debugger.getInstance();
		public function InkJetPrintJob()
		{
			debugger.write("InkJetPrintJob()")
		}
		/**
		 * Simulate starting an InkJetPrintJob
		 * @param fileName Name of file to print.
		 * */		
		public function start(fileName:String):void
		{
			debugger.write("InkJetPrintJob.start() - fileName:" + fileName);
		}
	}
}

WorkgroupPrintJob Class
Like the InkJetPrintJob class this class implements the IPrintJob interface and includes the required start() method on line 18.

package printcenters
{
	import com.lonhosford.util.debug.lite.Debugger;
	/**
	 * WorkgroupPrintJob product class
	 * */
	internal class WorkgroupPrintJob implements IPrintJob
	{
		private var debugger:Debugger = Debugger.getInstance();
		public function WorkgroupPrintJob()
		{
			debugger.write("WorkgroupPrintJob()")
		}
		/**
		 * Simulate starting an WorkgroupPrintJob
		 * @param fileName Name of file to print.
		 * */		
		public function start(fileName:String):void
		{
			debugger.write ("WorkgroupPrintJob.start() - fileName:" + fileName);
		}
	}
}

Adding to the PrintCenter class
It is relatively easy to add another PrintCenter class. Here is the FancyPrintCenter class that creates the IProduct class MultifunctionPrintJob. Create the classes in the and see if you can add them to the application Chapter02_Factory_PrintCenters class.

FancyPrinterCenter class

package printcenters
{
	import com.lonhosford.util.debug.lite.Debugger;
	/**
	 * FancyPrinterCenter creator class
	 * */
	public class FancyPrinterCenter extends PrintCenter
	{
		private var debugger:Debugger = Debugger.getInstance();
		public function FancyPrinterCenter()
		{
			debugger.write("FancyPrinterCenter() - This is a creator.")
		}
		/**
		 * Create IPrintJob object.
		 * @return MultiFunctionPrintJob
		 * */
		override protected function createPrintJob():IPrintJob
		{
			debugger.write("FancyPrinterCenter.createPrintJob()");
			return new MultiFunctionPrintJob();
		}
	}
}

MultiFunctionPrintJob class

package printcenters
{
	import com.lonhosford.util.debug.lite.Debugger;
	/**
	 * MultiFunctionPrintJob product class
	 * */
	internal class MultiFunctionPrintJob implements IPrintJob
	{
		private var debugger:Debugger = Debugger.getInstance();
		public function MultiFunctionPrintJob()
		{
			debugger.write("MultiFunctionPrintJob()")
		}
		/**
		 * Simulate starting an MultiFunctionPrintJob
		 * @param fileName Name of file to print.
		 * */		
		public function start(fileName:String):void
		{
			debugger.write ("MultiFunctionPrintJob.start() - fileName:" + fileName);
		}
	}
}

Part 2 introduces parameters for selection product classes.

Categories
Articles

Flex Builder 2.01 an Internal Build Error has Occurred Please Check the Error Log

I am using Flex Builder 2.01.

I was attempting to follow the updated ModuleLoader documentation at Adobe blogs.

The directions included:To edit the list of runnable application files:
1. Right-click the project file and select properties.
2. Select the Flex Applications option.
The list of Flex applications appears in the dialog box. This list includes all MXML files
that were added as applications, regardless of their root tags.
You can add and remove modules from this dialog box by using the Add and Remove
buttons.

Well that dialog screen does not reflect your choices later, but also created in the problems tab the message

“An internal build error has occurred. Please check the Error Log.”

This is a catch all error when Flex Builder coughs up blood. Now I can see if you are messing with files outside of an integrated product you should be prepared to see the product cough. But I noticed in searching for this error message on the web, many folks have hit it in various ways while working inside of Flex Builder.

In my case I wanted to have a source folder called modules. The error was that I also needed to create manually a bin folder named modules. When you follow the directions above to set the modules as runnable, this does not occur automatically.

Well no matter what the reason for the error message you can find out more in a file in your workspace. This file is in the folder .metadata and is named .log. Once you open it you will see dumps of Flex corpuscles, a trace of its errors, and you can perhaps dig out the problem.

In my case it was simply

java.io.FileNotFoundException: C:\Documents and Settings\Lon\My Documents\Flex Builder 2\ModuleLoader\bin\modules\BarChartModule-debug.swf (The system cannot find the path specified)

Flex had been building these in the bin folder and only after I forced it to run them. Once I got the bin/modules folder created, it started doing this on its own.