Wednesday, November 2, 2011

Dynamic Asset & Resource Loading: Flixel Tutorial in Flashdevelop

Flixel SWF Dynamic Asset & File Resource Loading Tutorial in Flashdevelop

A most important subject is that of using loader content as embedded classes in Flixel.

Many forums present pieces of a full solution and so I will present to you your options for For my flixel asset loader I use Bulk-Loader which will be featured in the examples.

Loading Unpackaged Asset Files In Flixel

Necessary for direct file loading as Flixel is used to working with embedded classes and does not support run-time files without modification.

External Image Direct File Loading

ExternalImage.setData(MyStaticClass.staticBulkLoaderInstance.getBitmap(ProfileImg).bitmapData, ProfileImg);
var profile:FlxSprite = new FlxSprite(0, 0);
profile.loadGraphic(ExternalImage); profile.x = profile.y = 5; profile.add(profile);


Loading SWF-packaged Asset Files In Flixel

An easier way to load resources without modifying flixel and in a more organized fashion is to create a separate SWF file with all of your graphic embeds.

Your will have to create a standalone swf with nothing but includes of the public static type in addition to the class extending movieClip.

Here is the structure of the SWF file:

package { import flash.display.MovieClip;
public class MyAssetClassStub extends MovieClip
{ [Embed(source = "data/asset1/asset.png")] public static var BattleScreenEnemy:Class;
[Embed(source = "data/video/assset1/movie.swf", mimeType = "application/octet-stream")] public static var zephalapodKingSlap:Class;
[Embed(source = "data/sfx/sound1.mp3")] public static var AttackSound1:Class; } }

The loading code goes as follows:

bulkLoader = new BulkLoader("mainpageloader");

bulkLoader.add("http://test.com/media/assets/MyAssetClass.swf", { id:"MyAssetClass", priority:100 } );
As long as you've checked that the download progress is 100% then you can do the following to access the packaged asset classes for use in Flixel FlxSprite.
name = "MyAssetClass";
assets = Game.bulkLoader.getMovieClip("http://test.com/media/assets/"+name+".swf"); //BY URL or by ID as the doc says but probably need custom object with .id instantiated
test = assets.loaderInfo.applicationDomain.getDefinition(name + "Stub") as Class;

Now you can either save references to classes (created by embedding assets) in the asset SWF file.
var SoundOne:Class = test.SoundOne as Class;
//this extra step is useful in playing videos using ByteArrays by instantiating from the test.SoundOne class.

Likewise, the classes can be access directly from the class instance with the data from getMovieClip.

Using SWF files to package your assets provides for an excellent way to map and combine assets in logical packages for dynamic loading without creating new file structures for a re-organization of files. Using SWF files is also important for drastically reducing the amount of calls to the server compared to dynamically loading a large group of files individually.

2 comments:

  1. My cousin recommended this blog and she was totally right keep up the fantastic work!

    Flash Development

    ReplyDelete
  2. Thanks for this tutorial, this really help us a lot in coding flash. Hope to see more on your post here and keep it up!

    Cris | Flash Developer Philippines

    ReplyDelete