Abstracting Assets from Actionscript in AS3.0 - Asset Libraries

Introduction

I write this article because it seems to me that quite a few people still have no idea how to duplicate external assets (such as duplicating MovieClips, for example). Thus, I decided to take this opportunity despite there being quite a few articles that document this. If I haven’t bored your by now, read on!

First, Some History

Assets in Flash are normally quite coupled with the SWF. This is probably a result of the long years of timeline scripting that has been burnt into our memories. In Actionscript 2.0, however, the process of abstracting Assets from Actionscript was slightly alleviated through the copious use of duplicateMovieClip(). I too, used to be an avid user of duplicateMovieClip(), until I made the transition to Actionscript 3.0, But before then, duplicateMovieClip() was my quick and dirty solution to many situations I came across in Flash.

Abstracting Assets from Actionscript in Actionscipt 2.0 was relatively simple. One need only separate his/her assets into separate swf files, and simply loadClip() them into the SWF, and employ the use of duplicateMovieClip(). In Actionscript 3.0, however, this situation has changed as Adobe saw fit to remove (or shall we say, omit) the duplicateMovieClip() method.

Now, Adobe recommends the use of the “new” keyword to instantiate multiple instances of a Class. From the Actionscript 2.0 Migration reference:

In ActionScript 3.0, use the new operator to create a new instance.

This doesn’t really help us abstract our Assets from Actionscript. Most of us who have played around enough in Actionscript 3.0 would know that this requires that the Class be part of the SWF calling it, and in facts forces us to embed our assets within the SWF. Using the Loader class to import external SWFs does not expose any classes that we may use to invoke the “new” operation. At least, not obviously, as we shall see later.


Asset Libraries

Today we will go through a step-by-step process on how to create an Asset Library. Note, of course, that this isn’t the only way to handle External Assets, but this is the way I like to do it.

Creating an Asset

First things first, we create an Asset. This can be anything from a Shape to a Sprite.

AssetLibraries 1

At this point you need to note the “Class” field. This field is important as it is how you will be referencing this class externally.

Next, click OK, and ignore the prompt that pops up when you do. Now, you may export your SWF (Lets call it “circle.swf”). Once that is done, start another SWF, which is where we will try to load our external Asset.

Loading an Asset

Now we get to the nitty gritty of it all. First we need to create some code that will load our Circle, so that we can duplicate it. Let us create an event handler too, to handle Event.COMPLETE.

AssetLibraries 2

Above you see some code for loading external SWFs using the Loader class. So now what we are going to do is use what is called the ApplicationDomain to get the class definitions from within Circle.swf!

AssetLibraries 3

Lets explain what we did there. We accessed the ApplicationDomain of the SWF we loaded, and then we got the definition of the Class we wanted, in this case the Circle class we did in the first SWF. Note that the name of the definition has to be exactly the same.

AssetLibraries 4

Now let us compile, and see what we get!

AssetLibraries 5

Closing
Using this technique, it is simple to create a library of assets, that you can load into your main SWF and duplicate them! While this isn’t the only technique, nor the only method of utilising the ApplicationDomain, this is (in my humble opinion) the best way to go about Abstracting Assets from Actionscript.

Links
Here are some links if you want more information, as well as a zip of source code so that you may look at the code directly.

http://blogs.adobe.com/rgonzalez/2006/06/applicationdomain.html
http://livedocs.adobe.com/flex/2/langref/flash/system/ApplicationDomain.html
Asset Libraries Tutorial Files

Tags: , , , , , , ,

31 Responses to “Abstracting Assets from Actionscript in AS3.0 - Asset Libraries”

  1. Daedalus Says:

    Nice article, been trying to sort that out for a while now.

    Is it possible to access an asset as a shape insted of a movieclip?

    You can only access the linkage panel of a symbol if it is a movieclip not a graphic so you can’t set the class for the shape. I need my assets to be as lightweight as possible as I have lots of them so having all the baggage of the movieclip class when all I need is flash.display.Shape is far from ideal. Even exporting as a sprite would be better than movieclip.

    I tried setting the base class to flash.display.Shape but it just changes it back to movieclip again. However when I set it to sprite it works. However i’m not quite sure if flash is exporting it as a movieclip cast to a sprite or if it really is a sprite without all the movieclip baggage.

  2. Daryl Says:

    Unfortunately the Flash IDE doesn’t even let you export to Shape at all. Shapes are vastly different from Sprites and MovieClips.

    Everything created in Flash IDE is a DisplayContainer (as in they can hold other DisplayObjects as well) which a Shape is not. Therefore it is not possible (as far as I can see).

    Quoted from the AS3.0 Reference:
    The Shape class is used to create lightweight shapes by using the ActionScript drawing application program interface (API). The Shape class includes a graphics property, which lets you access methods from the Graphics class.

    Therefore the only reason why you would use Shape is to use the Drawing API. This means you can just as easily create a class definition that extends Shape and draws using the API.

    Hope that helps! Let me know how it goes :)

  3. fucrate Says:

    Thanks a lot for posting this daryl. I’ve had a lot of trouble finding how to access the library from a loaded SWF.

  4. Daryl Says:

    Glad you like it :)

  5. Jerry Says:

    Why can’t people just read the documentation? It’s pretty clear in there.

  6. Daryl Says:

    If people were reading the documentation and understanding it, I wouldn’t be seeing this question asked on a regular basis :)

  7. pei Says:

    hi,
    i have two questions- does it have to be load external swfs? can it be a movieclip in the library?

    would this work if i want to make these duplicated circles as mask?

    bear me that i am new to as 3. i did my_mc.mask = loader; and didn’t work.
    i know i must have missed something.

  8. pei Says:

    update: i tried
    var mask_mc0:MovieClip = new MovieClip();
    mask_mc0.addChild(loader);
    but only one circle did the masking, the rest shown as shapes.

  9. Daryl Says:

    @pei: there is no point in using this method to handle Internal assets. To duplicate Internal assets you use the “New” keyword.

    For your other question… the problem is you’re using the Loader to mask. Using this method, you are using 1 Loader so of course you will only have 1 masked.

    What we are doing above is duplicating a specific asset from an external library (that 1 Loader). So you need to be working with the instances that are created, not the Loader.

  10. pei Says:

    Hi Daryl,
    thanks for your reply.

    what i want to do is having circles duplicated more and more, so the mask becomes bigger and bigger.

    do you mean, if i want to have the mask with duplicated shapes, i should use “new” instead of loading external swf into a loader? thanks!

  11. cooljackD Says:

    hi,

    would that work with a component in the targeted external swf’s library

  12. cooljackD Says:

    how would you then reference it in the linkage id
    and then call it back in the document class ?

  13. Daryl Says:

    not too sure about that, cooljack. :( Sorry.

  14. fishTacoGuy Says:

    Hey, helpful. I found the adobe docs on this a little confusing myself and the part I thought made sense didn’t work

    . Now what if one where in a situation where they had a lot of published swfs that were done in as 3.0, but there was no way to go and assign linkages in the library.

    In other words can you suggest a way to load a .swf file, and knowing nothing about what’s inside, create a new instance of that .swf?

  15. Daryl Says:

    Hi fishTacoGuy:

    the easiest solution would be to just … Load it again.

  16. fistTacoGuy Says:

    So are you saying it’s impossible, or just not easy?

  17. Daryl Says:

    It is “impossible” to do so with the method above, unless you have assigned a DocumentClass to your .swf. But that would require you to know the inside of your .swf.

    Another method you might want to look at is a deep-copy using ByteArray.

    But seriously, just load it again, and save yourself a ton of pain.

  18. jvc Says:

    FYI, You can have a library of symbols and export each out of the Library by right clicking each one and exporting a SWF from there.

    Helpful if you have a large .fla and only want a few of the assets.

  19. brian davis Says:

    thanks…
    might i suggest a standard i hope to put in place in my work
    of encapsulating all content of any external loaded swfs in a MovieClip called _content
    and setting its export to _content, that way a single swfLoader class can always look for _content… and that would be the only strict requirement of the swfs

    i would then make a separate new swfLoader for each type of object i load, and refer back to it when ever i need a duplicate of it

    a method could also be made to account for when _content does not exsist, and then have it just load a new swf each time a new copy is requested… for my purposes i would have it also trace an alert in such cases however, because this would never be the desired result in my applications.

    thank you for this insight on how to duplicate movieClips Daryl. it has been difficult for me to locate such an article in the past.

  20. Daryl Says:

    I don’t exactly agree with that. The beauty of this thing is that we don’t have to use multiple swfs for each asset! We can work with just 1 swf, and work from there.

    I’m glad the article was helpful :) That was my goal when I wrote it.

  21. jeff Says:

    Hey daryl,

    how can i access the linked movie clip in a buttton state? im currently using tweenlite and just wanted some basic interactivity but it seems it can only be fired at runtime, and not on a button handler.

    function assetLoaded(e:Event):void {

    var circle:Class = e.target.applicationDomain.getDefinition(”Circle”);

    var temp:DisplayObject = new circle();
    this.addChild(temp);

    TweenLite.to(temp,.5,{y:100, delay:1});

    }

    function toggled(event:MouseEvent):void {

    trace(”hit”);
    TweenLite.to(temp,.5,{y:10, delay:1});

    }

  22. Daryl Says:

    Hi Jeff,

    I’m unsure what your question is? What is a MovieClip in a Button State?

    I’m also not familiar with tweenlite, so I’m afraid I cannot help you there.

  23. george Says:

    Hi guys
    quick question, how would you deal with abstract classes ??

  24. Daryl Says:

    Abstract classes are not supported in AS3.0. Your best bet at implementing some sort of abstract functions would be to use Interfaces.

  25. georg Says:

    sorry, just meant classes that are not linked from library. Would having them imported in the loaded swf make them available in the same manner?

  26. Daryl Says:

    If the Class is compiled, then yes. It does not necessarily need to be a DisplayObject.

    Cheers
    Daryl

  27. Cor van Dooren Says:

    Nice explaination! Thank you!

    What is the purpose/goal that you set the parameter useWeakReference on TRUE?

    Regards
    Cor

  28. Daryl Says:

    Hi Cor.

    The UseWeakReference simply means that the EventListener does not count as a reference to the Object. This means you don’t need to remove the event listener for Garbage Collection to occur.

    Just makes things easier for me :)

    Daryl

  29. mors3 Says:

    Just want to say, I’m brand spangly new to actionscript scripting, but knowing roughly the possibilities of as1-2 and have landed myself a big project at work.
    The duplicateMovieClip function is one of the last little bits I needed to work out before finishing it so spectacular thanks on a extremely well written article (it’s filled in innumerate other holes in my understanding).

  30. Shaun Tollerton Says:

    Hi,

    I have a website (http://designwithoutsleep.co/random) where I need to mask duplicated moveclips so they appear within a white rectangle on the stage.

    I am pretty confused with this article due to my beginner level of Flash 8. Any ideas what I should do?

  31. Anthony Says:

    Cheers for the article, i really wish adobe hadn’t bought marcomedia, somehow i don’t think they would of pulled this kind of stuff…

    Alas anyway cheers for the article it was very useful

Leave a Reply