Q: How to associate linked SWC MovieClip asset with a Class in FlexBuilder Actionscript project

Question

I'm using Flex Builder more and more and attempting to create a fairly asset heavy application all in Flex Builder. I know how to publish or export Flash assets as SWC's so they are available in Flex Builder, but what if you have a button MovieClip with frame states in Flash, which is either exported or included in the swf published as a SWC, and you then want to associate a Class file created in Flexbuilder with this SWC asset?

I want to avoid unnecessary roundtripping...every time I need to make an edit to a Flash authored MovieClip class I would need to edit the Class and re -publish or reexport to a SWC so it is available in Flex Builder. ie I want to do ALL my coding in Flexbuilder while authoring graphical assets in Flash.

Answer 1

There are two ways to look at this. The first way (that I use fairly often) is to include the FLAs in my lib folder of my Flex project. Then, in the FLA I set the path to ../src/ (Publish Settings - > Flash Tab -> ActionScript 3 Button) so that Flash can reach the same packages as the rest of my Flex application. This means the SWC is just a compiled version of the classes I already have in Flex (hence I don't even have to add the SWC to the Flex project technically)

They other way of doing something like this is to create the assets inside of Flash and just assign the various assets dummy classes - Flash will create the classes for these assets for you automatically. Then you import that SWC into your Flex project. The assets, by themselves, will obviously just be dumb MovieClips - but you can write your own classes that instantiate the assets and control them.

Answer 2

Thanks Branden. One issue I'm having is when using flash assets that are multiframe, say such as MovieClip buttons with _up, _over and_down labels and a stop() action on the first frame. Using embed removes any frame based actionscript. Is there a 'best' solution for this scenario?

Answer 3

I’ve been trying to come up with a good solution for this myself. The best solution I’ve found is using the decorator pattern, where you use one class to decorate another class. Let’s say I wanted to load a button from flash and encapsulate the rollover behavior in the button it might look something like this:

public class AnimatedButton extends Sprite
{
    private var mc:MovieClip;

    public function AnimatedButton( mc:MovieClip )
    {
     this.mc = mc;

     addChild(mc);

     mc.addEventListener(MouseEvent.CLICK, onClick);
     mc.addEventListener(MouseEvent.ROLL_OVER, onRollOver);
     mc.addEventListener(MouseEvent.ROLL_OUT, onRollOut);
    }

    protected function onClick ( event:MouseEvent ):void
    {
     mc.gotoAndPlay("clicked");
     dispatchEvent( event) );
    }

    protected function onRollOver ( event:MouseEvent ):void
    {
     mc.gotoAndPlay("over");
     dispatchEvent( event) );
    }

    protected function onRollOut ( event:MouseEvent ):void
    {
     mc.gotoAndPlay("out");
     dispatchEvent( event );
    }
}

then when i want to add the rollover states to a button i would decorate it like so:

private var btn:AnimatedButton = new AnimatedButton( new FlashButton() );

this basically creates the button with the newly adorned functionality. The cool thing is now I can use this on any button that has the "over" "out" and "clicked" frames.

Answer 4

hello gordon, any real live example or make the above working?