Adding Flash/Actionscript Content to a Flex Project

In my recent quest to quick cram as much Flex knowledge possible into my head, I thought I’d take a look at injecting Flash or pure actionscript content into Flex. For those who’ve been using Flex, this will be old hat. For those such as myself, though, who are just making their way into Flex from a Flash development point of view, this may just save a bit of frustration and aggravation.

Probably the easiest way to add a little Flash to a Flex project is to load in a compiled .swf file using the SWFLoader component. Let’s begin with a basic rotating cube made with Actionscript and Papervision3D. I’ll add this to a package named com.onebyonedesign.cube which will later be in the Flex project’s classpath, but for a moment, I’ll just be using good ol’ Flash.

CubeExample.as

Now, let’s open up Flash and compile a 400×400 pixel .swf containing the CubeExample using the following document class:

Now, fire up a new Flex project however you normally do so (personally I use the FlashDevelop Actionscript editor and the free Flex SDK). Make sure the .swf you just generated above (we’ll call it “cube.swf”) is in your output directory (usually named “bin”) and create the following Main.mxml file:

Now, after building that file you should wind up with a nice rotating red cube in a black panel.

All good and well, but what if you want to simply use Actionscript to do the work for you rather than precompiling a .swf file in Flash. It’s a little trickier but not much. In order to use the addChild() method of Flex components it’s necessary for your display object to either extend the mx.core.UIComponent object or implement the IUIComponent interface. Since it’s much easier to extend than implement (at least in this case), we’ll go that route. First create a new package com.onebyonedesign.components and add to that package a slightly modified version of our original document class:

As you may have noticed, it’s essentially the same as the document class we used to compile our cube in Flash, but now extends the mx.core.UIComponent class rather than the flash.display.Sprite class. And, believe it or not, that is all we need. Now we can add our CubeComponent instance using a teensy bit of actionscript which we’ll call once the application fires its applicationComplete event. Here’s the new .mxml file:

And, now that our CubeComponent is a bonafide Flex component, we can take this one step further (or at least one step over). If we add a new namespace to our application tag, we can actually add our cubecomponent in .mxml like so:

Regardless of which one of the above methods you use – the final product will end up looking something like this.