Almer/Blank Labs

One of my favorite things about using PureMVC as my application framework are the standards established for organizing application code.  For notification names the common ways that I have seen these organized is by declaring constants on the concrete Facade, or by externalizing them to external classes.  I have tried both approaches, but my preferred method is to externalize the constants to notification classes.  Not only do I feel like its more organized because the notification names for a section of the application are centralized to different notification classes.  But, it is also a good way to clean up the amount of imports in the concrete Facade and centralize the Command registrations to these notification classes.

package com.project.controller.notifications
{
	import com.project.controller.commands.LoginCommand;
	import com.project.controller.commands.LogoutCommand;
 
	import org.puremvc.as3.interfaces.IFacade;
 
	public class LoginNotifications
	{
		static public const LOGIN:String = "LOGIN_NOTIFICATION";
 
		static public const LOGOUT:String = "LOGOUT_NOTIFICATION";
 
		public function LoginNotifications( facade:IFacade )
		{
			facade.registerCommand( LOGIN, LoginCommand );
			facade.registerCommand( LOGOUT, LogoutCommand );
		}
	}
}

Above is an example of a notification class. The constructor requires an IFacade object that it uses in the constructor to map notifications to commands using the IFacade object that is passed into the constructor. You can see how a bigger group of commands can be nicely organized into this class. Below is an example concrete Facade.

package com.project
{
	import com.project.controller.notifications.LoginNotifications;
 
	import org.puremvc.as3.patterns.facade.Facade;
 
	public class ProjectFacade extends Facade
	{
		public function ProjectFacade()
		{
			super();
		}
 
		static public function getInstance():ProjectFacade
		{
			if (!instance) instance = new ProjectFacade();
 
			return instance;
		}
 
		override protected function initializeController():void
		{
			super.initializeController();
 
			new LoginNotifications( this );
		}
	}
}

In the example above we can see the usage example for the notifications class for the login group. In the override for the initializeController() method, after initializing the controller, a LoginNotifications object is started with a reference to the IFacade instance that is the concrete facade, or simply "this". The amount of imports is reduced in the concrete facade, and there are less lines required in the initializeController() method, creating a neater, shorter concrete facade class.

This kind of organization is almost always based on personal preference, this just happens to be mine. =)

1. Direct references: which even your grandmother knows not to use if possible, since direct references create less maintainable, less reusable, and more spaghetti-ish code.
2. Events: which are dispatched and heard, and are like butter to work with

• are objects
• that can travel

1. the capture phase: the event is heard down from the stage to the 'target' or source of the event
2. the target phase: the event is heard on the target itself
3. the bubbling phase: the event is heard back up the display list, from the target to the stage

addEventListener ( MouseEvent.CLICK , _onClick , true ) ;

Recently I was working on some bug fixes for a client project when I came across a bug with getBounds().  The issue that needed to be fixed had to do with an application that has an alignment feature.  Originally I had coded the alignment command to examine the x/y coordinates and the dimensions of the objects in order to figure out which coordinates to move the items.  This approach works correctly as long as the objects being aligned do not have any rotation set.

Throwing rotation into the mix no longer guarantees that the registration point is the top left coordinate of the item being aligned, which renders the first approach incorrect.  The first part of this blog post will go into the getBounds() method, what the bug is, and how to get the accurate bounds.

This SWF above demonstrates the issues with the getBounds() method.  On the stage is a MovieClip instance with a triangle shape in it, the MovieClip's rotation is set to 0 at start up.  Pressing the "Toggle MC Border" button draws a 1 pixel red line around the border of the MovieClip that has the triangle.  Pressing the "Toggle Unrotated getBounds()" displays the rectangle returned by the getBounds() method before the MovieClip has been rotated.  Before explaining the last two buttons, lets shift focus to the Rotation input at the top.  The first two buttons show the border and the unrotated bounds border.  The Rotation input lets us modify the rotation of the MovieClip.  If the object is rotated to 45 degrees by typing in 45 and clicking the "Set Rotation" button the first two buttons still perform the same function.  Except that now that the MovieClip is rotated the unrotated bounds rectangle now longer contains the shape inside of it.  If you turn off both the MC Border and the Unrotated getBounds(), and click on "Toggle Rotated getBounds()", you will see that the red border does not accurately draw to the expected size.  The top and right borders are further away from the right edge, which should meet at the top right of the shape.  If you click on "Toggle MC Border", you can visually see why.  The getBounds() method calculates the bounds Rectangle object by using the actual borders of the MovieClip, instead of actual graphical space that the MovieClip occupies.  If you now click on the fourth button, "Toggle getAccurateBounds()", you will see the blue rectangle drawn to the expected shape.  If the MovieClip's border is still on, the blue rectangle will be the same size as the red rectangle as seen in the screenshot below.

This is because the red 1 pixel border showing the MovieClip's border is taken into account, accurately, by the getAccurateBounds() method that I wrote.  That results in the bounds rectangle to do the same thing that getBounds() does.  If you press "Toggle MC Border" and turn off the MovieClip's border, and then turn the accurate border off and back on, you will see the difference in how the new actual bounds is actually wrapping the rotated triangle accurately.

Below is the _getAccurateBounds() method that is calculating the blue rectangle we see above.  This method demonstrates the technique to find the accurate bounds, but would likely need to be slightly altered to fit within real implementations depending on the actual architecture of the application its going to be used in because of the fact that it currently requires me to remove it from the stage to draw it independently of any other display objects.  It can probably also be accomplished by looping through the children of the clip's parent to turn off any visible items and turn them back on after the drawing process, but for the sake of simplicity in this example I will simply attach it to my placeholder bounds clip and then put it back.

Anyhow, the way that I accomplished this was by isolating the MovieClip that I want an accurate bounds Rectangle object from.  In my example I place it in a Sprite called boundsClip.  Next I set up a ColorTransform object with a color of blue (0×0000FF).  This ColorTransform object is used in the next step, where I create a BitmapData object sized to the clip's parent's dimensions, in this case the SWF's stage.  I then draw the boundsClip into the BitmapData object.  That is why I place the clip into a placeholder Sprite, so it can be drawn into the BitmapData in the correct position using its x,y coordinates.  In the draw() method, I use the colorTransform object to tint the bitmap blue.  This is crucial to the last step.  Before returning the accurate bounds, I place the clip back onto the stage.  And finally, I get the accurate bounds of the clip by using the getColorBoundsRect() method on the BitmapData object.  In the example application above I use this Rectangle object to accurately draw the blue rectangle, which shows the accurate bounds.

In my next post I will go into how to use the bounds rectangle to actually move the objects to a desired position.

You can download the FLA for the example application here: getBoundsBug.fla

function _getAccurateBounds( clip:Sprite ):Rectangle
{
	// Make a placeholder clip to draw the clip isolated from anything else
        // that is on stage.
        var boundsClip:Sprite = new Sprite();
            boundsClip.addChild( clip );
 
        // Make a ColorTransform object to tint the bitmap that is going to be
        // drawn based on the clip passed into _getAccurateBounds()
	var boundsColorTint:uint = 0x0000FF;
	var colorTransform:ColorTransform = new ColorTransform();
            colorTransform.color = boundsColorTint;
 
	// Draw a BitmapData object with the clip passed into _getAccurateBounds()
        // and tint the BitmapData to a color, I use blue.
        var bitmapData:BitmapData = new BitmapData( stage.stageWidth,
                                                    stage.stageHeight,
                                                    true,
                                                    0xFF000000 );
            bitmapData.draw( boundsClip, null, colorTransform );
 
        // Place the mc back onto the stage after drawing it.
        addChild( clip );
 
        // Return the Rectangle object from the getColorBoundsRect() method on
        // the BitmapData object.  This Rectangle object will contain the
        // correct bounds of the item you want the bounds of rotated or not.
        return bitmapData.getColorBoundsRect( 0xFFFFFF, boundsColorTint, false );
}

• load any Flash video from your hard-drive
• select the frame/location
• drag-resize/reposition a marquee selection
• save a JPG of the selected area to your hard-drive

• snapper.fla which includes the SnapshotRectangle MovieClip (on top of a sample image of my gorgeous golden, Lelia)
• com.rblank.snapper.SnapshotRectangle.as, to which the SnapshotRectangle MovieClip symbol is linked, and which contains all of the custom code I've written for this sample
• ActionScript 3 Core Libraries, created by the uber-scripters at Adobe, which I use here for JPEGEncoding (not inherent to the Flash Player 10 AS3 API). I'm including it in the download so it will work 'out-of-the-box' but you should of course download and use the most recent from their repository site

• Textfield instance, tf_dims, to display dimensions of the image that will be created
• A MovieClip instance, named bg, that visually indicates the size of the image that will be created
• A MovieClip instance, named nub, that will be used to resize the snapshot area
• A NumericStepper instance, named ns_quality, that will be used to determine JPG quality
• A Button instance, named btn_snap, that will be the trigger for saving the JPG

1. Create a BitmapData object and draw into it
2. Encode the BitmapData into a ByteArray, using the JPGEncoder class
3. Save the ByteArray (representing a JPG) to the user's computer, using the FileReference class

	

//create a BitmapData instance, sized to match the width and height of the bg MovieClip instance
	

_bitmapData =new BitmapData ( bg.width , bg.height );
	

//draw the entire stage into the BitmapData instance, clipping by the _matrix
	

_bitmapData.draw( stage );
	

//create a new JPGEncoder instance (an AS3CoreLib class)
	

//and pass in the current value of the ns_quality NumericStepper instance as the JPG quality
	

_jpg= new JPGEncoder(ns_quality.value);
	

//encode the _bitmapData into JPG data, stored in the _byteArray
	

_byteArray=_jpg.encode(_bitmapData);
	

//create the new FileReference instance through which to save the JPG data to the user's machine
	

_fileRef_save = new FileReference ( );
	

//save the _byteArray to the users computer, with a default name of 'RBlankSnapshot.jpg',
	

//which the user will have a chance to rename before saving
	

_fileRef_save.save( _byteArray , "RBlankSnapshot.jpg" );