How do I manage library symbols with linked classes in Flash CS4 to compile/debug in Flash Builder 4?

Question

I'm building a video player using Flash CS4 (hereby referred to as "Flash") to create the graphic symbols and compiling and debugging with Flash Builder 4 ("FB4"). Here are the steps I take in my current workflow:

--Create the graphic symbols in Flash. I've created a few different symbols for the player, but I'll focus on just the play/pause button ("ppbutton") here.

--In the Library panel, I go to the ppbutton symbol's Linkage properties and link to a class named assets.PlayPauseButtonAsset that extends MovieClip. I do not actually have an assets package nor do I have a class file for PlayPauseButtonAsset as Flash will create them for me when I publish.

--In Flash's Publish settings, I set the project to export a SWC that will be used in FB4, called VideoPlayerAssets.swc.

--After the SWC is created, I create my FB4 project called "VideoPlayer" and add the SWC to my path. FB4 creates the class VideoPlayer in the default package automatically.

--In VideoPlayer.as, I import assets.*, which imports all of the symbol classes I created in Flash and are available via VideoPlayerAssets.swc. I can now instantiate the ppbutton and add to the stage, like this:

var ppbutton:PlayPauseButtonAsset = new PlayPauseButtonAsset();
addChild(ppbutton);

At this point ppbutton doesn't have any functionality because I didn't create any code for it. So I create a new class called video.controls.PlayPauseButtonLogic which extends assets.PlayPauseButtonAsset. I add some logic, and now I can use that new class to put a working ppbutton on the stage:

var ppbutton:PlayPauseButtonLogic = new PlayPauseButtonLogic();
addChild(ppbutton);

This works fine, but you may be asking why I didn't just link the ppbutton symbol in Flash to the video.controls.PlayPauseButtonLogic class in the first place. The reason is that I have a designer creating the UI in Flash and I don't want to have to re-publish the SWC from Flash every time I make a change in the logic. Basically, I want my designer to be able to make a symbol in Flash, link that symbol to a logically named class in Linkage properties, and export the SWC. I do not want to have to touch that .fla file again unless the designer makes changes to the symbols or layout. I'm using a versioning system for the project as well and it's cleaner to make sure only the designer is touching the .fla file.

So, finally, here's the issue I'm running into:

--As the design gets more complex, the designer is nesting symbols to position the video controls on the control bar. He creates a controlbar symbol and links it to assets.ControlBarAsset. The controlbar symbol contains the ppbutton symbol.

--The designer publishes the SWC and ControlBarAsset is now available in FB4. I create new class called video.controls.ControlBarLogic that extends assets.ControlBarAsset so I can add some logic to the controlbar, and I add the controlbar to the stage:

var controlbar:ControlBarLogic = new ControlBarLogic();
addChild(controlbar);

--This works, but the ppbutton doesn't do anything. That's because ppbutton, while inside controlbar, is still only linked to PlayPauseButtonAsset, which doesn't have any logic. I'm no longer instantiating a ppbutton object because it's part of controlbar.

That's where I'm stuck today. I can't seem to simply re-cast controlbar's ppbutton as PlayPauseButtonLogic as I get a Type error. And I don't want to have to make a class that has to instantiate each of the video player controls, the place them at their x and y values on the stage according to how the designer placed them, as that would require me to open the .fla and check the various properties of a symbol, then add those values to the code. If the designer made a change, I'd have to go into the code each time just to update those properties each time. Not good.

How do I re-cast nested symbols to use the logic classes that I create that extend the asset classes? Remember, the solution is not to link Flash symbols to actual classes so I don't have to keep recompiling the SWC, unless there's a way to do that without having to re-compile the SWC. I want the designer to do his thing, publish the SWC, and be done with it. Then I can take his SWC, apply my logic to his assets, and be able to debug and compile the final SWF.

Answer 1

Here is the solution that i use sometimes:

Instead of making PlayPauseButtonLogic extends PlayPauseButtonAsset, use this class as a warpper of PalyPauseButtonAsset, use composition instead of inheritance ! ; ).

You will get something like this in your ControlBarLogic class:

//constructor exemple
public function ControlBarLogic(){
     //all logic of PPButton is inside PlayPauseButtonLogic
     //you just pass a reference to the PlayPauseButtonAsset button contained inside ControlBarAsset
     var ppButtonLogic: PlayPauseButtonLogic=new PlayPauseButtonLogic(refToButtonAsset)
     //the warper class can extends EventDispatcher so you will be able to listen to custom or redisatched events
     ppButtonLogic.addEventListener("ppPause",onPause)
}

hope it will help you

Answer 2

You can have two classes, one holding functionality and the other providing its graphical implementation (asset/skin)

Have PlayPauseButtonLogic extend AssetWrapper.

A simple way to solve your issue regarding event listeners, you can do the following:

package {

    import flash.display.DisplayObjectContainer;
    import flash.events.Event;
    import flash.events.IEventDispatcher;

    public class AssetWrapper implements IEventDispatcher {
        private var _skin:DisplayObjectContainer;

        public function AssetWrapper( skin:DisplayObjectContainer = null ) {
            if ( skin ) setSkin(skin);
        }

        public function setSkin(skin:DisplayObjectContainer):void{
            _skin = skin;           
        }


        public function dispatchEvent(event:Event):Boolean{
            _skin.dispatchEvent(event);
        }

        public function hasEventListener(type:String):Boolean{
            return _skin.hasEventListener(type);
        }

        public function willTrigger(type:String):Boolean{
            return _skin.willTrigger(type);
        }

        public function removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void{
            _skin.removeEventListener(type, listener, useCapture);
        }

        public function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void{
            _skin.addEventListener(type, listener, useCapture, priority, useWeakReference);
        }


    }
}

EDIT: You can then, of course, just add as many properties/methods to AssetWrapper that delegate to the DisplayObject (skin) as you need. It also gives you more control onto those properties/methods. i.e:

public function get x( ):Number {
    return _skin.x;
}

public function set x( v:Number ):void {
    if ( _skin.x = v ) return;
    if ( _useWholePixels ) _skin.x = Math.round(v);
    else _skin.x = v;
}

That way, for instance, you can tween your AssetWrapper instance directly. Also, you can control if you want it to be placed in round numbers (x=100) or not (x=100.5)

For methods, just the same idea:

public function addChild( child:DisplayObject ):DisplayObject {
    return _skin.addChild( child );
}

Then to use it, you would extend AssetWrapper and implement a concrete behavior:

package {
    import flash.display.DisplayObjectContainer;
    import flash.events.MouseEvent;


    public class SimpleButton extends AssetWrapper {


        public function SimpleButton( skin:DisplayObjectContainer = null ) {
            super(skin)
        }

        override public function setSkin( skin:DisplayObjectContainer):void {
            super.setSkin( skin );      
            addEventListener(MouseEvent.ROLL_OVER, _onRollOver );
            addEventListener(MouseEvent.ROLL_OUT, _onRollOut );         
        }

        protected function _onRollOver(e:MouseEvent):void {
            _skin.alpha = .5;
        }
        ...
}

And you would use it as follows:

//you can get your graphical assets in many different ways
var buttonSkin:Sprite = new LibraryButtonSkin
//or
var ButtonSkinClass:Class = this.loaderInfo.applicationDomain.getDefinition("SimpleButtonSkin") as Class;
buttonSkin = new ButtonSkinClass;

var button:SimpleButton = new SimpleButton(buttonSkin);
button.addEventListener(MouseEvent.CLICK, _handleButton);

It is just a guide, in the real implementation you want to make sure you check for things like if a skin already exists, then remove all added listeners. You would probably could listen for an ADDED_TO_STAGE event and trigger a initialize method... Also is a great to clean up after your instance by implement a destroy() method where you make sure all added listeners are removed and null/stop things like timers, sounds, etc.

Answer 3

Wow all the flow and we sunk in the finish line....

well, what about something like this

1. AbstractButtonBehavior
2. PlayButtonBehavior extends...
3. The trick, the graphic components should all implement some interface that allow them to pass a behavior at instantiation time, or even better, at runtime. The you just plug the login in, the logic will always remain outside and the poor assets will keep asking or answering to the same interface call, allowing you to work outside them.

could be?.