views:

305

answers:

1

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.

+1  A: 

Hi,

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

OXMO456
Agree, you may have a quick look on how components / skins works as well.
Theo.T
Should I be thinking of this in terms of the graphical asset being a member/property of the logic class? Let's say ControlBarLogic has to reposition the ppbutton asset by changing the x value. So instead of doing ppbutton.x = 100, I should really be calling a method of the wrapper class to do this, something like ppbutton.setX(100), which would then update the internal asset's x value?
wmid
Yes you're rightIt may sound strange, but it's the only way that i know in order to keep the FLA library without any code and maintain the ability to create complex display objects, directly inside Flash (time saving, and ability to quickly modify the application view). It's a nice topic, but unfortunatly i'am not good enough in english... so i am not able to explain better, sorry
OXMO456
Thanks, OXM0456. I spent some more time on your solution over the weekend and it seems to be a good method. I ran into a few issues where I have to remember that setting up events is slightly different since I'm now applying mouse events to the asset and not the class itself, and I also cannot just add an event listener to the main class that would normally receive a bubbling event. All in all, it is the best solution for my needs. Kudos.
wmid