Six Months on AIR

Attention AIR developers: Are you interested in learning about caching images in binary format, SQLite database migration, re-using existing view components, memory fragmentation and general tips / tricks about developing your application using Adobe AIR? If you answered YES than you should attend Minh Vu and Chris Black’s session at Flashbelt on June 8th at 1:30PM. We’re going to have a killer presentation for everyone interested in developing Adobe AIR desktop applications.

Can’t attend Flashbelt?
I would highly recommend attending Flashbelt. Networking opportunities, great presentations and lots of fun! OK, if you absolutely can go than check out our presentation below.

Who should attend?
Developers that are currently developing AIR applications or are interested in doing AIR development in the future. Project managers would also benefit from knowing the decisions that go into creating large scale applications. How about designers? This presentation is geared towards the development side of AIR but designers are welcome.

BulkLoader with Binary data format:
link

About the presenters:
Chris Black is a Senior Developer at Sierra Bravo who focuses on ActionScript development with Adobe Flex and AIR, and is interested in integrating social networking APIs into Rich Internet Applications. He covers these topics as well as sharing solutions to the problems he encounters when working with Flex and AIR on his blog, blackcj.com. Chris has a degree in Computer Science from the University of Wisconsin – Eau Claire, and when he’s away from the computer he enjoys rock climbing, backpacking, and tennis.

Minh Vu is a Developer at Sierra Bravo who works on interactive development with ActionScript, JavaScript, and iPhone. He has a strong interest in applying Model Driven Development to Flash or AIR applications. Minh studied at the University of Minnesota Duluth where he got his degree is in Information System & Technology. In his spare time he enjoys disc golfing, snowboarding and ultimate frisbee.

Re-Learning ActionScript 2

It’s amazing how easy it is to forget the little niches in programming languages after going almost a year without using them. I recently had the pleasure of working on an ActionScript 2 project after almost a year of doing primarily ActionScript 3 development. This post will highlight a few things that can make ActionScript 2 development a bit more like 3. I’ll also provide links to resources that helped get me back in the mindset of AS2.

Event dispatching.
One of the toughest parts of going back to AS2 is the event handling. AS3 does this much better and one of my co-workers (@rexeisen) sent me this great link: AS3 Style Events in AS2

Singleton design pattern.
I found a great PDF outlining how to implement the singleton design pattern using AS2: Singleton Design Patter with AS2

My singleton implementation:

import com.cb.Utils.messaging.*;
import com.cb.events.Event;
import mx.utils.Delegate;

class com.sierrabravo.Utils.messaging.MessageManager
{
    private static var instance:MessageManager;
	private var _container:MovieClip;
	private var _currentContent:MovieClip;
	private var _tint:MovieClip;

    private function MessageManager()
    {
        // Do nothing
    }

    public static function getInstance():MessageManager
    {
        if(MessageManager.instance == null)
        {
	    	MessageManager.instance = new MessageManager();
        }
        return MessageManager.instance;
    }

	public function setParent(parentClip:MovieClip):Void
	{
		_container = parentClip;
	}
	
	public function updatePosition():Void
	{
		if(_currentContent){
			_currentContent._x = (Stage.width - _currentContent._width) / 2;
			_currentContent._y = (Stage.height - _currentContent._height) / 2;
		}
		if(_tint){
			_tint._width = Stage.width;
			_tint._height = Stage.height;
		}
	}
	
	public function addMessageWindowContent(contentWindow:MessageContentBase):Void
	{
		tint();
		_currentContent = _container.createEmptyMovieClip( "content", _container.getNextHighestDepth() );
		contentWindow.init( _currentContent );

		_currentContent._x = (Stage.width - _currentContent._width) / 2;
		_currentContent._y = (Stage.height - _currentContent._height) / 2;
		contentWindow.addEventListener(Event.CLOSE, Delegate.create( this, closeWindow ));
	}
	
	public function closeWindow():Void
	{
		trace('close window');
		_currentContent.removeMovieClip();
		clearTint();
	}
	
	public function clearTint():Void
	{
		_tint.removeMovieClip();
	}

	public function tint():Void
	{
		_tint = _container.createEmptyMovieClip("rectangles", _container.getNextHighestDepth());
		
		_tint.beginFill(0x000000, 50);
		_tint.lineStyle(1, 0x000033, 100);
		_tint.moveTo(0, 0);
		_tint.lineTo(Stage.width, 0);
		_tint.lineTo(Stage.width, Stage.height);
		_tint.lineTo(0, Stage.height);
		_tint.endFill();
		_tint.onRelease = function(){
			//DO NOTHING
		}
		_tint.useHandCursor = false;
	}
}

Preventing click through.
In the above example the screen is tinted to put focus on the pop up window. Unfortunately, even though there is a movie clip on top of everything else, it does not prevent interaction with the elements layered below it. In order to get around this I added an onRelease to the _tint movie clip along with a useHandCursor of false. This prevents interaction with elements below the tint. Here is the link to where I found this solution: Disable “Click-Through” on MovieClips in Flash

Debugging in ActionScript 2.
For the project we were working on it was not possible to use the built in debugger for Flash. Another great opportunity to use the Singleton design patter to include a trace window that can have text dumped out from any part of the application.

class com.cb.Utils.debug.Debugger
{
    private static var instance:Debugger;
	private var _textField:TextField;
	private var _parentClip:MovieClip;

    private function Debugger()
    {
        // Do nothing
    }

    public static function getInstance():Debugger
    {
        if(Debugger.instance == null)
        {
	    	Debugger.instance = new Debugger();
        }
        return Debugger.instance;
    }

    public function init(myText:TextField, parentClip:MovieClip):Void
    {
        _textField = myText;
        _textField.wordWrap = true;
        _textField.background = true;
        _textField.border = true;
        _textField.multiline = true;
        _parentClip = parentClip;
    }
	
    public function output(myString:String):Void
    {
        if(_textField) {
             _textField.swapDepths(_parentClip.getNextHighestDepth());
             _textField.text += myString + "\n";
        }
    }
}

XML parsing.
Parsing XML is a key part of AS2 and AS3. I found a great tutorial on Loading XML data in Flash using ActionScript 2. This is my code for parsing XML.

public function init(clip:MovieClip):Void
{
	example_xml = new XML();
	example_xml.ignoreWhite = true;
	example_xml.load("xml/BookDefinition.xml");
	example_xml.onLoad = Delegate.create(this, onLoadEvent);
}
function onLoadEvent(success:Boolean):Void {
	if (success) {
		var myImage = example_xml.firstChild.firstChild.childNodes;
		for (var i = 0; i<myImage.length; i++) {
			var pageNumber:Number = parseInt(myImage[i].childNodes[0].firstChild);
			var imageURL:String = myImage[i].childNodes[1].firstChild;
			var keywords:String = myImage[i].childNodes[2].firstChild.toString().toLowerCase();
		}
	}
}
<book>
	<pages>
		<page>
			<pageNumber>1</pageNumber>
			<pageFlash>thumbnails/page01.jpg</pageFlash>
			<pageText>This is page 1.</pageText>k
		</page>
		<page>
			<pageNumber>2</pageNumber>
			<pageImage>thumbnails/page02.jpg</pageImage>
			<pageText>This is page 2.</pageText>
		</page>
	</pages>
</book>

Delegate functions.
Notice above that a delegate function was used to keep the scope of the function with the current class. More information on delegate functions can be found here: The Delegate Class

That’s it for now. I know that I’ll be using this post as a reference the next time I have to jump on another AS2 project. Being able to use design patterns, event dispatching, and debugging actually made coding in AS2 fun! Enjoy.

Additional resources.
http://www.flashmobileblog.com/tag/flash-lite-31/
http://www.adobe.com/products/flashlite/features/

Prevent Scaling in ActionScript Projects

Problem:
The scale mode for ActionScript projects is set to allow zooming by default even when the width and height are set to fixed sizes. This can distort your website when the user uses ctrl-mouse scroll wheel or hits ctrl-plus / ctrl-minus.

Solution:
Set the stage scaleMode to “noScale” and configure the containing div to stretch at 100% for the height and with. You may also want to set the stage alignment to “T” which will align your content to the top of the page. This will work in AS2 as well but the ‘S’ is capitalized in Stage.

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	import mx.core.BitmapAsset;

	[SWF(width="700", height="265", frameRate="27", backgroundColor="#ffffff")]
	public class ScalingApplication extends Sprite
	{
		[Embed(source="assets/background.jpg")]
		private var Background:Class;
		private var _background:BitmapAsset = new Background();
		
		public function ScalingApplication()
		{
			// Prevents distortion / zooming
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			// Aligns content to the top center
			stage.align = StageAlign.TOP;

			this.addChild(_background);
		}
	}
}

For full screen pages use the following CSS:

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
}

You will also want to set your Flash element and div with / height to 100%.

Uses:
Setting the scaleMode to “noScale” allows the ActionScript project to behave more like a Flex application. Benefits to having an ActionScript project will come in a later post. The “noScale” mode gives the developer more control to create a pixel perfect design. The stage height and width variables are still available so the web application can be sized based on its own set of rules rather than having the whole application scale. This method can also be used to produce websites that scale to the full size of the browser, for example: JDesignFactory.

Disadvantages:
The scaling within browsers is intended for people that may need to have a larger font in order to read the text. From a design perspective you need to be aware that you are potentially limiting your audience by preventing the application scaling. This drawback can be overcome by setting up scaling rules within your ActionScript or allowing the user to change font sizes. Another solution would be to have an HTML version of your site that would allow users to scale the content without having to sacrifice your Flash design quality.

Sample Code

Resources:
Stage Livedocs link
StageScaleMode Livedocs link
StageAlign Livedocs link

Live Blogging TC Code Camp VI

This is my first time attending the Twin Cities Code Camp and first impressions have been great! Here are the presentations I’ve attended so far today:

Increasing your Productivity with Visual Studio by Jeff Klawiter
I haven’t developed in Visual Studio for a number of years but this talk was still very engaging. Seeing all of the tips and tricks in Visual Studio has inspired me to do some research on customizations available for Flex Builder 3. The specific key commands may be platform specific but the concepts defiantly apply across development tools. Jeff’s blog: http://www.jeffklawiter.com/

DemoFEST: SQL 2008, AJAX and the Virtual Earth SDK by Mike Benkovich
Very nice demo about integrating Microsoft Live maps into a browser and applying geographical data from a database to the map. This looks like something that can be integrated into AIR using the HTMLLoader. It was very interesting to see data visualization from within SQL Server 2008. More information about Mike and his work: http://www.benkotips.com/

Building Better Applications with UX Principles by Corey Miller
Everyone can benefit from effective UX Principles. This presentation was about bridging the gap between designers, developers and users. I believe that user experience is very important in the success of both webpages and desktop applications. One of the main problems we have had is getting clients to ‘buy in’ to spending the time and money up front on UX. Corey has blog posts about UX here: http://www.coreysportfolio.com/?tag=/ux

This code camp has been pretty Microsoft heavy but the principals in these presentations definitely apply across platforms. With the wide variety of topics, great people, and free admission you really can’t go wrong attending #TCCC. I would recommend this code camp to any developers in the Twin Cities area.

More information can be found here:
http://www.twincitiescodecamp.com/