Flex Builder Tip: Use SWCs for image assets, not Embed metatags for pure Actionscript Projects

I have been using Flex Builder for a while now as my main Actionscript IDE for both Flex and Actionscript projects. Of course in the latter, I have been very sensitive to not using even an iota of the Fx library. However traditionally I had always used the [Embed] metatag to embed graphic symbols into my Swfs. What I did not realize was that the Embed tag brought in Flex code into my project. I only discovered that as I was getting a build of OpenPyro ready for a release (its going to be 0.4, isnt out yet, but probably early next week).

I was trying to build the OpenPyro swc that users could be imported into projects. However running the compc command resulted in the following error screen:

Compc Error

Apparently, using the Embed metatag was causing the graphic to be imported but then converted to an instance of the Flex SpriteAsset class. WTF, this was definitely not what I wanted. Googling (at 2 am, so I may not have used the best queries) did not bring in any meaningful results. However a friend of mine recently switched from Flex Builder to FDT and I remembered him showing me how he did it, so here are the steps:

1) Create MovieClip symbols in the Fla and export them for Runtime Sharing with appropriate class names.
2) Generate the SWC from the Fla
3) Place the SWC in the classpath of the Actionscript project.
4) Use the exported symbol’s class name to reference the graphic symbol

So this worked. I was pretty aware that the Bindable tag was Flex specific but I didnt know that Embed tag did as well. Adobe really needs to differentiate the Flex specific metatags like Bindable and Embed with the pure AS3 ones like Event. My one big complaint with Flex Builder was that it never complained considering I was in a pure Actionscript project.

I hope Gumbo fixes this.

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist.

18 thoughts on “Flex Builder Tip: Use SWCs for image assets, not Embed metatags for pure Actionscript Projects”

  1. Very nice! Thanks for sharing the problem and a solution. I was doing the same Embeds, and was convinced that my AS3 was mx free, as the swf footprint seemed to be growing by the asset sizes.
    The swc approach is probably even more elegant than using Embeds after all. Thanks again!

    Like

  2. could somebody please elaborate more on the exact steps.
    1) i’m using cs4 I create a green square, convert that to a movie clicp, export for action script, give that a class name “GreenSqare”, check export for runtime sharing give some random url, export as a swc.
    2) put the swc in my libs folder (f3)
    3) get intellinse for my movie clip and do the following.
    4)

    Like

  3. Flex Builder doesn’t complain because pure ActionScript projects automatically include the one Flex SWC required for using Embed metadata. If you removed that SWC from the build settings, it would complain. While SpriteAsset (and its siblings) are in the mx namespace, I consider them part of the Flex SDK rather than the framework. That’s a subtle difference that some may not agree with, but consider that these two are explicitly separated by Adobe (in flex.swc and framework.swc).

    It’s worth noting that metadata support is entirely dependent on the compiler. It is not part of the language at all. It’s also interesting to note that Flash CS4 now has support for adding the Flex SDK to the build process and metadata that was previously Flex SDK-only (like Embed, SWF, Frame, among others) can now be using by any Flash developer.

    Like

  4. Somebody else blogged about this the other day but I can’t find the link to properly credit them… Their solution was to monkey patch flex. Basically create a class in the projects classpath for mx.core.BitmapAsset with the correct inheritance heirarchy. Then mxmlc will build this empty class into your swf… Repeat for the classes related to the other types you are embedding…

    Ah ha! Found the link (thanks to google and because I thought to search for BitmapAsset!):

    http://blog.brokenfunction.com/2009/03/16/how-to-remove-flex-libraries-completely-from-your-as3-project/

    Like

  5. I would imagine that using SWC files shortens compilation time as well – SWC files are already compiled after all.

    Very excited to hear that OpenPyro is nearing release! Thanks for all your efforts on the project – I look forward to giving it a spin!

    Like

  6. @Kelvin Luck @sysco
    Monkey patching classes like that should be the last resort. Using assets in the swc you shouldn’t have to.

    @Mar
    Take a look at http://github.com/arpit/openpyro/blob/187d037ba27e2d3df9f835cf966f279a291bef14/src/org/openPyro/aurora/AuroraCheckBoxSkin.as, specifically the line

    private var TickGraphic:Class = checkIconSymbol;

    The checkIconSymbol is the symbol exported in the swc. Once you have reference to the graphic as a class, you can use it by creating new instances of that class.

    Like

  7. I’ve been using SWC’s for my graphical assets for awhile now. I also sometimes use SWC’s for layout purposes… So instead doing tons of myClip.x = 10 etc… I just make a movieclip in Flash, layout a logical set of things the way I want them, then export it as part of the SWC. This technique can also save you from coding lots of text format stuff.

    Like

  8. Thanks for this tip – I’ve abandoned image embedding and gone with SWCs, and it looks like it’s a much better solution altogether!

    Like

  9. I was using this process for a while and ran into a problem. If you’re using multiple swcs – say you’ve got a dev team, and both swcs have an asset names the same – say “close_button”, you’ll receive the Flex error “An internal build error has occurred” with no helpful information. There’s no easy way to solve this.

    Also, if you have multiple source swcs, you can’t easily tell which one contains the symbol you’re looking for. You can ctrl-click the class, and it sometimes points you to the swc, but if you have an error, it won’t.

    Like

  10. There is another benefit of loading your assets this way especially if you are traditionally from the Flash side of things. Flash performs quite a bit of work for us such as optimizing images, excluding unused artwork, and alike. However, Flex doesn’t perform any of these functions. If you place a 300k graphic Flex assumes you want the 300k graphic asset included as is. Be sure you have optimized your graphic assets before embedding them in a Flex Builder project.

    Like

Leave a comment