DynamicSprite Demo Application

If you are building a multilingual application (or any application that requires dynamic, runtime loaded assets), swapping and managing assets can easily become tedious and messy.

Recently, for projects requiring special characters (such as Chinese, Arabic, Japanese and Hindi) and where dynamic or input text is not required, we have been creating library SWFs for each language and using static textfields to populate content. This saves file size, as unnecessary characters are not embedded, and it eases the process of including different character sets (and even fonts) for each language. It also means that we can include text in the same runtime loaded library as general display assets.

Introducing DynamicSprite

Using this process, a language specific library SWF is loaded at startup, or at runtime when the users selects a language, and once complete all dynamic assets are updated accordingly. This can get very messy for two reasons. Firstly, it means that each individual asset has to be destroyed and tidied up to release memory before it is replaced. Secondly, if you have a complex application architecture, you will end up dispatching a ton of events and implementing countless methods within every view or component, in order to rollout the update to each desired DisplayObject.

This is where DynamicSprite comes in handy. Using DynamicSprite you can effortlessly update any amount of DisplayObjects from any amount of library SWFs at runtime, whilst keeping the SWF loading logic centralised in your proxy or loader class. No events, no asset update APIs in your views and no cleaning up after yourself.

Bored? Skip straight to the examples and download

How It Works

The concept is very simple. Each instance of DynamicSprite is registered globally at a class level, you need only call a static update method once and all DynamicSprite instances will update themselves automatically. Each instance of DynamicSprite is given a class definition, which can be set or changed at runtime if desired. When a new library is loaded, it will look inside the SWFs applicationDomain and if it finds a matching asset, update itself and destroy any existing instances of that asset it might own. You can also create DynamicSprite instances at runtime anytime after an asset library has been loaded – they will check previously loaded libraries for their class definition when created. This works with any display asset, Sprites, MovieClips, Bitmaps (etc) – BitmapDatas are also detected and destroyed during the cleanup process.

Furthermore, you can load any amount of libraries per language, at different times if necessary – DynamicSprites will only update themselves when applicable, making it easy to manage your language specific libraries and even individual libraries per language if you choose to (each type of library has it’s own ID).

A DynamicSprite instance will also dispatch an event (named DynamicSprite.INSTANCE_UPDATED) when it has changed it’s asset. You can listen for this event if you need to respond to new asset dimensions. You can also listen for two events on the class itself (through a static, encapsulated EventDispatcher) which are dispatched when a library is added or updated but before all instances have changed (DynamicSprite.LIBRARY_UPDATE_START) and when all instances have finished updating themselves (if necessary) from the added / updated library SWF (DynamicSprite.LIBRARY_UPDATE_COMPLETE).

Example Implementation 

Here is a simple example of how to use DynamicSprite. Although this example only loads one SWF (the code for the multi SWF example is included in the download), it demonstrates how DynamicSprite can also be useful for single language applications where you still choose to load your assets at runtime.

public function SimpleExample()
{
	// Create a DynamicSprite instance and provide a class definition for it's asset
	var example : DynamicSprite = new DynamicSprite("assets.example.HelloWorld");
	addChild(example);
	
	// Load a library SWF
	var loader : Loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
	loader.load(new URLRequest("assets_en.swf"));
}

private function onLoadComplete(event : Event) : void 
{
	// Call the static update method once to update all DynamicSprites
	DynamicSprite.update("example", LoaderInfo(event.target).content);
}

Another advantage of DynamicSprite is that you need not worry about synchronising loading with the update process. Any existing DynamicSprite instance will be updated if required when a library is loaded, however you can also create new instances after a required library has been loaded (useful for highly dynamic content) and any loaded libraries will be searched for matching assets upon creation. This snippet demonstrates this feature.

public function SimpleExample()
{
	// Load a library SWF
	var loader : Loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
	loader.load(new URLRequest("assets_en.swf"));
}

private function onLoadComplete(event : Event) : void 
{
	// Register this library
	DynamicSprite.update("example", LoaderInfo(event.target).content);
	
	// Creating a DynamicSprite after a library is loaded still works fine
	var example : DynamicSprite = new DynamicSprite("assets.example.HelloWorld");
	addChild(example);
}

Download DynamicSprite

You can download the DynamicSprite class and the demo below. Also check my code repository for updates. If you find any bugs or have any suggestions please leave them in the comments.

Download: DynamicSprite
Posted on 21 May 2010
21 Comments
0 Trackbacks

Meta

Hello Dynamic Sprite was posted on May 21st 2010 in the category Code / Actionscript 3.0, Code, Design, Flash, Lab, Open Source and tagged; , , , , .

You can Leave a comment.


Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 410 Gone in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

10 Responses to Hello Dynamic Sprite

Leave a Reply

  1. xerode 6 years ago

    Seem to have an issue getting the Hindi version to work in the example – other than that, looks very useful!

    Reply to this comment

    1. Soulwire 6 years ago

      Hey. Are you having problems with the online demo or downloaded version? It is that the asset SWF isn’t loading or perhaps a problem with the embedded font? If you can elaborate a little on the issue, I’ll get it fixed!

    2. xerode 6 years ago

      In the online demo when it fires up in the lightbox all the Hindi characters appear as white rectangles. Tried this on two machines at work using Flash 10 and get the same behaviour when I try to load http://blog.soulwire.co.uk/wp-content/uploads/2010/05/assets_in.swf directly (which _loads_ fine, so it’s not that!).

    3. Soulwire 6 years ago

      Interesting, I’ll look into it. Thanks for the description man.

  2. seth 6 years ago

    The preview on this page works fine for me.

    Reply to this comment

    1. Seth 6 years ago

      ..however, when posting the comment the PHP didn’t refresh the page after I clicked on ‘Submit Comment’; instead, I had to click the back button in my browser.

      thought you’d like to know.

    2. Soulwire 6 years ago

      Cheers Seth. That’ll be my caching! I’ll look into it ;)

  3. bruno 6 years ago

    Man, This is REALLY useful!

    thanks a lot for sharing!!!

    keep rocking!

    Reply to this comment

  4. Glidias 6 years ago

    THis kinda reminds me of Decal bitmap classes used in Flash Camo.

    Wouldn’t a simple “is BitmapData” check be faster compared to a getQualfiiedClassName() reflection method?

    Reply to this comment

  5. Prakash 6 years ago

    Hey buddy,

    It sounds great man. You have done a great job by posting this Dynamic Sprite with Action Scripting codes. Thx for sharing lot of useful & informative notes through this sweet stuff.

    Reply to this comment