rss twitter

My daily use of Assets in FDT

Hey,
yesterday I had to explain to someone why and how to use Assets in Powerflasher's FDT. I thought of summing it up to show how I (almost daily) deal with that topic.

For those not knowing: When talking of Assets I mean Classes & Symbols which are exported to a SWC file from Adobe Flash itself and then used as a Linked Library in FDT - I know this term might not be 100% precise but I'm used to it, I just claim it's a proper name because of it's capital A. :) These Assets can be fonts, audio files, videos, bitmaps and of course DisplayObjects. The advantage of using Assets on the one hand is that you do not have to use Embed-Tags to include media files or fonts - as long as they are supposed to be compiled with the project and not loaded on runtime. On the other hand you can export animated clips from the Flash IDE and then add them to your stage and set up your code in FDT. You can even nest clips into another and still refer to them.

In general I distinguish between two ways of using an Asset:

  • Either directly add the exported clip to the DisplayList
  • or extend the Asset and use the new class.

This usually depends on the Asset's complexity. If it's a clip which has absolutely no responsibility in the App (like a graphical element somewhere) I just create and animate it in the Flash IDE and export it. Then you can simply initiate it and add it to the DisplayList. Here's an example of this simple workflow.

Exporting a Clip from the Flash IDE

After creating the clip itself in Flash you can (either while converting it into a symbol or by pressing "Properties" on the library-item) export it for Actionscript. Just check the button which can be found in the Linkage-Tab.

To finally export the SWC which will be used as Linked Library in FDT you have to go to your Publish-Settings in Flash (CMD / CTRL + SHIFT + F12), navigate to the Flash-Tab (at the top) and then check Export SWC. Now go for a compile. In the directory your .swf file is located then there should be a file named the same but with a .swc file extension.

Matan Uberstein recently posted an article on how to export a SWC without the SWF - for everyone who's interested in that: give it a watch!

Making it accessible / Embed it in FDT

Now - if you haven't - copy this file into your project folder (I recommend an assets-folder or using a lib-folder). Having done so your FileBrowser within FDT should show it up. With rightclicking it you can assign it as a Linked Library.

As you can see it's just one click and then you're up. The fileicon changes into and from now on you can use the exported Classes however you like to.

With this library linked to your project you can access any class within it. We can now simply initiate the exported Header with a clip and add it to the stage.


Actionscript:
  1. package {
  2.     import flash.display.Sprite;
  3.  
  4.     /**
  5.      * @author Marvin Blase
  6.      */
  7.  
  8.     public class AssetDemonstration extends Sprite {
  9.         private var _header:Header;
  10.        
  11.         public function AssetDemonstration() {
  12.             _header = new Header();
  13.             addChild(_header);
  14.         }
  15.     }
  16. }

Nested Clips

Having understood this basic setup it's easy to go on. Imagine your header consists of several clips which all should be controlled by your Class in FDT. All you have to do is giving the children, which are added on the exported clip's stage, a name.

As you can see on the screenshot (which is shot inside the exported header) it doesn't matter if it's a TextField or any other DisplayObject. Just give it an instance-name. Now you can access this TF easily in FDT.

Actionscript:
  1. package {
  2.     import flash.display.Sprite;
  3.  
  4.     /**
  5.      * @author Marvin Blase
  6.      */
  7.  
  8.     public class AssetDemonstration extends Sprite {
  9.         private var _header:Header;
  10.        
  11.         public function AssetDemonstration() {
  12.             _header = new Header();
  13.             _header.greetingTF.text = "This is a demonstration.";
  14.             _header.lightStroke.alpha = .5;
  15.  
  16.             addChild(_header);
  17.         }
  18.     }
  19. }

By the way, one advantage of using TextFields as an Asset is that you can completely style and setup it in Flash (even with Font-Including!) and then just add and use it instead of creating a TextFormat and all the like.

Timeline Scripts

Yea! One of my favourite features when working with Assets. When exporting a MovieClip with an animation in it, the timeline is handled as a timeline should be. Even scripts are executed. So basically you could dispatch an Event at the end of the clip to inform the class that the animation has finished. Or you can declare ROLL_OVER & ROLL_OUTs, buttonModes, etc. directly in your Asset without blowing up your class. I'm doing so pretty often - and only the CLICK-Listener is set up in the class itself then.

After adding the clip to stage (in FDT) the MovieClip will start playing (you also can use stop(); in the first frame of course to prevent this - just call _header.play(); then) and after 15 frames there will be a trace in your console.

Extending an Asset

If the clip you're going to export is part of a complex architecture and is therefor not only meant as "This is just the Graphic which has been prepared in Flash" I usually extend the Asset and use the new class. I'm doing so because I need the clip as a kind of component which has e.g. a SET- and a GET-method, a constructor which expects some params or something like this. Anything which would make sense not using timeline script. And this happens often :) In most cases I use a suffix for the exported classes then, e.g. HeaderAsset.

Actionscript:
  1. package {
  2.  
  3.     /**
  4.      * @author Marvin Blase
  5.      */
  6.  
  7.     public class Header extends HeaderAsset {
  8.         private var _greetingText:String;      
  9.  
  10.         public function Header(greetingText:String, lightStrokeAlpha:Number) {
  11.             greetingTF.text = greetingText;
  12.             lightStroke.alpha = lightStrokeAlpha;
  13.  
  14.             _greetingText = greetingText;         
  15.         }
  16.  
  17.         public function set greetingText(value:String):void {
  18.             greetingTF.text = value;
  19.             _greetingText = value;
  20.         }
  21.     }
  22. }

Actionscript:
  1. package {
  2.     import flash.display.Sprite;
  3.  
  4.     /**
  5.      * @author Marvin Blase
  6.      */
  7.  
  8.     public class AssetDemonstration extends Sprite {
  9.         private var _header:Header;
  10.        
  11.         public function AssetDemonstration() {
  12.             _header = new Header("This is a demonstration", .5);
  13.             addChild(_header);
  14.         }
  15.     }
  16. }

Obviously this example is just longer as the previous one and without any benefit, but imagine you register some Events, add a meta-navigation to it which has to dispatch some Events to the framework and so on. As soon as your Asset does more than just being a graphical element with a hover or the like you should extend it to gain a better control.

Of course this is only my point of view - there are several workflows when working with graphical elements / components. I have just got used to this way and am most efficient with it.

Some resources

23 Responses to “My daily use of Assets in FDT”

  1. [...] This post was mentioned on Twitter by Alena and Bruno Fonzi, Marvin Blase. Marvin Blase said: @matanube i hope it's okay i've mentioned you at http://bit.ly/d18Ghh (under "resources") [...]

  2. riWind says:

    hi marvin,
    thanks for your effort, but i still have got one question: can you tell if it is possible to let the exported clips communicate with each other? i mean that the one exported clip is telling the other one to do something now...

    thanks in advance!!

  3. Marvin Blase says:

    Hey,
    yea - but you're simply doing this in FDT then. Just instantiate both clips and then you can let them communicate. Usually you don't do so in the Assets itself.

  4. Jim B. says:

    thumbs up. i love it when there are pictures and a well formatted code. this makes learning much easier!

  5. Marshall says:

    this is a great sum-up! thank you very much for it, i didn't find anything like that yet and am happy now i finally understood this workflow!

  6. pechkinator says:

    it was very interesting to read.
    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  7. jkaris says:

    nice work - is exactly how i do it also. good to see someone else does it the same.

  8. Pavel fljot says:

    I prefer asset to extend class with some functionality.
    pros:
    1. You/designer can prepare group of nested graphical objects with functionality.
    2. You can have several different objects (ie manually drawn) with same functionality (ie menu custom buttons)

    any cons?

  9. Marvin Blase says:

    Hey Pavel,
    I agree. :) No cons in mind yet.

  10. Pavel fljot says:

    Only thing I noticed is that asset class is dynamic (at least FDT shows this from swc). So you deal with bunch of dynamic classes actuallym, event if u define them as base class.

    Example:

    dynamic public class ButtonAsset extends Button

    -----

    var button:Button = new ButtonAsset();

  11. Marvin Blase says:

    This ain't essentially necessary:
    public class Tooltip extends TooltipAsset {

    works fine as well :) But yea, asset-classes are exported as dynamic.

    Btw. are we doing it reversed in name's convention?

  12. Pavel fljot says:

    Eemm.. I thought we're talking about assets(graphic objects in fla-swc library) extending as-classes, so instatnces u're working with are instances of dynamic classes.

  13. Marvin Blase says:

    Ah, I see what you mean. Yea, true - when having a class you can extend it from it works - but usually you set up a BaseClass while exporting which exactly does so. I talked about extending this exported Asset then so you can setup the whole coding stuff in FDT.

  14. Pavel fljot says:

    The thing is that u can do all stuff in FDT(any other IDE, talk about mxmlc actually). You can set up a fake BaseClass, empty one (simply ClassName extends Sprite/MovieClip, no other code). So this is what "usually" for me. You compile swc once, then do everything in FDT, but at compile time it will kinda inject actual code for base classes instead of empty ones. Got it?

  15. Panel says:

    SWC as assets container is great idea THX ;)

  16. Allan says:

    You mention embedding video, but the only way I can see to embed video is to include it in a MovieClip. Is there a way I can embed just an FLV file and load it into a video player later?

  17. [...] : the screenshot for FDT is from the beautify code website and the screenshot for FlashDevelop is from the polygonal [...]

  18. Since I do not have FDT, I took the liberty of "borrowing" your screenshot for a blog post I did : http://cote.cc/blog/linking-swc-files-in-your-actionscript-editor

    If you do not agree, tell me and I'll remove it. By the way, I linked back to this post.

  19. פייזה says:

    Thank you, I have just been looking for info approximately this topic for ages and yours is the greatest I've discovered till now. But, what about the conclusion? Are you sure concerning the supply?

  20. Thanks for the ideas shared on your own blog. Something also important I would like to express is that weight reduction is not exactly about going on a celebrity diet and trying to reduce as much weight that you can in a couple of days. The most effective way to shed pounds is by using it slowly and gradually and using some basic recommendations which can enable you to make the most from the attempt to shed weight. You may realize and already be following these tips, but reinforcing expertise never affects.

  21. Deena says:

    Hello There. I found your blog using msn. This is a very well written article.
    I'll make sure to bookmark it and come back to read more
    of your useful info. Thanks for the post.
    I will certainly comeback.

    Here is my blog post - Payday 2 Hack download (Deena)

  22. I loved as much as you'll receive carried out right here.

    The sketch is tasteful, your authored material stylish.
    nonetheless, you command get bought an shakiness over that you wish be delivering the following.

    unwell unquestionably come further formerly again since exactly the
    same nearly very often inside case you shield this hike.

    My webpage ... Asphalt 8 Airborne Hack (http://www.gameinformer.com)

  23. Hello this is somewhat of off topic but I was wanting to
    know if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I'm starting a blog soon but have no coding knowledge so I wanted to get guidance
    from someone with experience. Any help would be enormously
    appreciated!

    Here is my blog ... How To Build a Greenhouse

Leave a Reply

Powered by WordPress | Free T-Mobile Phones for Sale | Thanks to Palm Pre Blog, Video Game Music and Get Six Pack Abs