Importing ASDocs into FDT is a great help, because at any point you can press F1 and the related ASDocs will open in your help panel. Unfortunately Adobe changed the way the supply their ASDoc with CS5, it now comes with Adobe Community Help (AIR app that updates/manages all Adobe products help files). With FDT4 M4 you can’t import these new help files from CS5, due to Adobe changes. I have file a feature request on FDT’s jira, please vote for it.

I really like this FDT feature, but I had to come up with a temporary solution to this problem.

1. Download the ASDocs

• AS3LCR – Sorry, had to dual pack it. So extract the ZIP and then extract the RAR somewhere on your computer.

2. Import/Update help in FDT

Go to Preferences -> FDT -> Tools -> Flash Help. Under the “Advanced Settings” section at the bottom click “browse…”. Path to where you extracted the AS3LCR folder and select it.

Click “Update Help” to start the updating process, it might take a while, but be patient it’s worth it. You’ll be prompted to restart FDT once the process is complete.

3. Try it out and have fun!

To use this all you need to do is; put your cursor on the class/keyword/function/property/whatever you’d like help with and press F1. Simple as that!

Here I’m viewing my ColourFilter class, it’s got a ColorMatrixFilter protected property, but I can’t remember what all the properties of the ColorMatrixFilter mean!!! What do I do??? Put my cursor on ColourMatrixFilter and press F1.

Now I can see the search results of help for ColorMatrixFilter (there might be more than one result, e.g. put your cursor on “class”, you’ll see keyword “class” and the class “Class”. hehe), now just click on what you want to see:

Great! Now you have the ASDocs where they matter most, quick and easy! Really useful for those everyday things a person forgets, in my case I always need to check what the parameter order is of Array splicing! I always forget!

Hope you’ve found this useful! If I’ve missed something important, please leave a comment!

Trying to think of a good example/tutorial for AssetLoader isn’t easy, because is so versatile. If I had so show you everything you can do with AssetLoader, you’ll be reading for 2 days straight! So I’m going to keep it super simple, for your sake and mine. For this post I’m assuming you have good Robotlegs knowledge, if not – please get with it!

For this example we’re building a small application that loads in HTML, CSS and a header IMAGE. I just pulled out the most important parts relating to AssetLoader; Mapping, Adding, Managing IDs and Collecting. Sources ZIP available here and at the bottom of this post.

Mapping

I would advise mapping your primary AssetLoader as a singleton.

package mu.sample
{
	import mu.sample.controller.ConfigLoadedCommand;
	import mu.sample.controller.StartupCompleteCommand;
	import mu.sample.utils.FlashVars;
	import mu.sample.view.Canvas;
	import mu.sample.view.CanvasMediator;

	import org.assetloader.AssetLoader;
	import org.assetloader.core.IAssetLoader;
	import org.assetloader.events.AssetLoaderEvent;
	import org.robotlegs.base.ContextEvent;
	import org.robotlegs.mvcs.Context;

	import flash.display.DisplayObjectContainer;

	/**
	 * @author Matan Uberstein
	 */
	public class AssetLoaderSampleContext extends Context
	{
		public function AssetLoaderSampleContext(contextView : DisplayObjectContainer = null, autoStartup : Boolean = true)
		{
			super(contextView, autoStartup);
		}

		override public function startup() : void
		{
			//Commands
			commandMap.mapEvent(ContextEvent.STARTUP_COMPLETE, StartupCompleteCommand, ContextEvent, true);

			//Not required if you aren't passing a config FILE to your IAssetLoader.
			commandMap.mapEvent(AssetLoaderEvent.CONFIG_LOADED, ConfigLoadedCommand, AssetLoaderEvent, true);

			//Services
			injector.mapSingletonOf(IAssetLoader, AssetLoader);

			//Views
			mediatorMap.mapView(Canvas, CanvasMediator);

			//Utils
			injector.mapSingleton(FlashVars);

			//Dispatches ContextEvent.STARTUP_COMPLETE
			super.startup();
		}
	}
}

Manage your asset IDs

AssetLoader relies on IDs to operate, you need to give each asset/group an ID in order for you to retrieve your payloads or access the loader. I would recommend creating a class that contains public static constants with their string values.

package mu.sample.model.ids
{
	public class AssetId
	{
		public static const HEADER_IMAGE : String = "HEADER_IMAGE";
		public static const GLOBAL_STYLESHEET : String = "GLOBAL_STYLESHEET";
		public static const HTML_BODY : String = "HTML_BODY";
	}
}

Adding assets to the queue

There are few ways of adding assets to your loading queue:

• add – Pass your own URLRequest.
• addLazy – URLRequest created automatically, thus you only pass the URL.
• addUnit – Construct your own ILoadUnit.
• addConfig – Parses XML or JSON representation of asset queue. Can also accept an URL or String format of data. Please see the wiki section on Github.

For this example we will only be using addLazy, but in the source bundle I’ve added the addConfig equivalent.

package mu.sample.controller
{
	import mu.sample.model.ids.AssetId;
	import mu.sample.utils.FlashVars;
	import mu.sample.view.Canvas;

	import org.assetloader.core.IAssetLoader;
	import org.robotlegs.mvcs.Command;

	import flash.display.StageAlign;
	import flash.display.StageScaleMode;

	/**
	 * @author Matan Uberstein
	 */
	public class StartupCompleteCommand extends Command
	{

		[Inject]
		public var assetLoader : IAssetLoader;

		[Inject]
		public var flashvars : FlashVars;

		override public function execute() : void
		{
			contextView.stage.scaleMode = StageScaleMode.NO_SCALE;
			contextView.stage.align = StageAlign.TOP_LEFT;

			//Configure my assets and loading queue.

			//Just for the hell of it.
			assetLoader.numConnections = 1;

			// Note: Not passing type parameter, because these will be automatically detected.
			assetLoader.addLazy(AssetId.HEADER_IMAGE, flashvars.basePath + "images/header.png");
			assetLoader.addLazy(AssetId.GLOBAL_STYLESHEET, flashvars.basePath + "data/default.css");
			assetLoader.addLazy(AssetId.HTML_BODY, flashvars.basePath + "data/body.html");

			//PLEASE NOTE:
			//All the above could have been replace by:
			//assetLoader.addConfig(flashvars.basePath + "data/assets.xml");
			//Check out the xml layout of the assets.xml file in the data folder.

			//Adding my primary view the stage to ensure that it's already listening for the events before they fire.
			contextView.addChild(new Canvas());

			//Telling assetloader to start!
			assetLoader.start();
		}
	}
}

Collecting your assets

AssetLoader automatically dispatches into you shell’s eventDispatcher, which means that you can map commands and/or use the eventMap within Actors/Mediators. For this example all we need to do listen to when our assets are loaded. There are a few events we can listen to:

• AssetLoaderEvent.ASSET_LOADED – dispatches when any one of your assets are finished loading. Always dispatches no matter what the asset type is.
• Type related events – e.g. When you have an IMAGE type asset, ImageAssetEvent.LOADED will dispatch. Advantage here is that these related events carry strongly typed payloads.
• Extracting the ILoader from the IAssetLoader and listening to the Event.COMPLETE – Each ILoader (could be anything, ImageLoader, XMLLoader, CSSLoader, etc) dispatches Event.COMPLETE when it has finished loading. Advantage here is that you don’t have to check the id of the asset inside the handler.

In this particular case we could have only listened to the AssetLoaderEvent.COMPLETE event, because it’s a simple case.

Below is an example of each:

package mu.sample.view
{
	import mu.sample.model.ids.AssetId;

	import org.assetloader.core.IAssetLoader;
	import org.assetloader.core.ILoader;
	import org.assetloader.events.AssetLoaderEvent;
	import org.assetloader.events.ImageAssetEvent;
	import org.robotlegs.mvcs.Mediator;

	import flash.events.Event;

	/**
	 * @author Matan Uberstein
	 */
	public class CanvasMediator extends Mediator
	{
		[Inject]
		public var view : Canvas;
		[Inject]
		public var assetLoader : IAssetLoader;

		override public function onRegister() : void
		{
			// Extract ILoader
			var cssLoader : ILoader = assetLoader.getLoader(AssetId.GLOBAL_STYLESHEET);
			eventMap.mapListener(cssLoader, Event.COMPLETE, cssLoaded_handler, Event);

			// Listen to generic AssetLoaderEvent.
			eventMap.mapListener(eventDispatcher, AssetLoaderEvent.ASSET_LOADED, textLoaded_handler, AssetLoaderEvent);

			// Listen to type specific events.
			eventMap.mapListener(eventDispatcher, ImageAssetEvent.LOADED, imageLoaded_handler, ImageAssetEvent);

			view.init();
		}

		/**
		 * This will only fire once, because we listening directly to the loader we need.
		 *
		 * Pros:
		 * Only fires once.
		 *
		 * Cons:
		 * Casting, strong data type lost.
		 */
		protected function cssLoaded_handler(event : Event) : void
		{
			var cssLoader : ILoader = ILoader(event.target);
			view.styleSheet = cssLoader.data;

			eventMap.unmapListener(cssLoader, Event.COMPLETE, cssLoaded_handler, Event);
		}

		/**
		 * This will fire for all assets, thus we need to check the id before reacting.
		 *
		 * Pros:
		 * It works... I guess... hehe
		 *
		 * Cons:
		 * Fires for all assets - just a con in this case.
		 * ID checking.
		 *
		 */
		protected function textLoaded_handler(event : AssetLoaderEvent) : void
		{
			if(event.id == AssetId.HTML_BODY)
			{
				view.text = event.data;
				eventMap.unmapListener(eventDispatcher, AssetLoaderEvent.ASSET_LOADED, textLoaded_handler, AssetLoaderEvent);
			}
		}

		/**
		 * This will fire for all IMAGE type assets, thus we need to check the id before reacting.
		 *
		 * Pros:
		 * Only fires for related type assets.
		 *
		 * Cons:
		 * ID checking.
		 */
		protected function imageLoaded_handler(event : ImageAssetEvent) : void
		{
			if(event.id == AssetId.HEADER_IMAGE)
			{
				view.logo = event.bitmap;
				eventMap.unmapListener(eventDispatcher, ImageAssetEvent.LOADED, imageLoaded_handler, ImageAssetEvent);
			}
		}
	}
}

Sample Application

Built with FDT, Robotlegs, minimalcomps, FlashVarsDynamic and AssetLoader of course.

Source

• AssetLoaderExample – Includes all source.

I have a new idea for a Flash panel, but I need some statistics on how flash developers are using the generated classes from the Flash IDE. Look at the sample uses below before voting.

Update: Late entry “Embedding”, see George’s comment for example.

Extending:

package app.view
{
	import assets.ButtonAsset

	public class CustomButton extends ButtonAsset
	{
		public function CustomButton()
		{
		}

		public function get label() : String
		{
			return field.text;
		}

		public function set label(value : String) : void
		{
			field.text = value;
		}
	}
}

Wrapping:

package app.view
{
	import flash.display.Sprite;

	import assets.ButtonAsset

	public class CustomButton extends Sprite
	{
		protected var _asset : ButtonAsset;

		public function CustomButton()
		{
			_asset = new ButtonAsset();
			addChild(_asset);
		}

		public function get label() : String
		{
			return _asset.field.text;
		}

		public function set label(value : String) : void
		{
			_asset.field.text = value;
		}
	}
}

Direct:

package app.view
{
	import flash.display.Sprite;

	import assets.ButtonAsset

	public class SomeClass extends Sprite
	{

		protected var _button : ButtonAsset;

		public function SomeClass()
		{
			_button = new ButtonAsset();
			_button.field.text = "Some text";

			addChild(_button);
		}
	}
}