If you’re a Flash developer making the switch to start using Flex, then this class from Grant Skinner is for you. DisplayObjectWrapper makes life much easier by enabling developers to easily get anything that inherits from DisplayObject (Sprite, Loader and Bitmap to name a few) to become a display child of a Flex container (Canvas, ViewStack, Accordion, etc). Awesome, now here are some code examples of how to work with SWFs in Flex.
This mxml code example shows how to:
- load a Flash 9/10 SWF
- call a method within the document class of the SWF
- receive an event from the loaded SWF
One thing to keep in mind is the Flex security model. When you compile a Flex application it is by default set to be in the local-with-networking sandbox and the default for Flash 9 is local-with-filesystem which means the Flex application will not load the SWF when run locally. You will have to change the Local playback security setting in the Publish Setting window to Access Network Only.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" horizontalAlign="center" verticalAlign="middle" applicationComplete="init();"> <mx:Script> <![CDATA[ import com.gskinner.ui.DisplayObjectWrapper; import flash.display.Loader; import flash.events.*; import flash.net.URLRequest; import flash.system.ApplicationDomain; import flash.system.LoaderContext; private var loader:Loader; private var loadedSWF:DisplayObject; private function init():void { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; loader = new Loader(); configureListeners(loader.contentLoaderInfo); var context:LoaderContext = new LoaderContext(); context.applicationDomain = ApplicationDomain.currentDomain; var request:URLRequest = new URLRequest("fnine.swf"); loader.load(request,context); } private function configureListeners(dispatcher:IEventDispatcher):void { dispatcher.addEventListener(Event.COMPLETE, completeHandler); } private function completeHandler(event:Event):void { trace("completeHandler: " + event); //add the loaded swf to the display list loadedSWF = loader.content; displayArea.addChild(new DisplayObjectWrapper(loadedSWF)); //listen for an event from the loaded SWF loadedSWF.addEventListener("fnineEvent", onFnineEvent); //call a method on a loaded SWF loadedSWF["testCall"](); } private function onFnineEvent(evt:Event):void { trace("onFnineEvent: " + evt); } ]]> </mx:Script> <mx:Canvas id="displayArea" width="500" height="300" backgroundColor="0xFFFFFF" /> </mx:Application>
Also noteworthy is that the DisplayObjectWrapper is actually the parent of the loaded SWF. In very simplistic terms the display hierarchy is Flex Application > Container > DisplayObjectWrapper > SWF.
This class is the Document class for the SWF.
package { import flash.display.Sprite; import flash.events.Event; public class fnineApp extends Sprite { public function fnineApp() { trace("fnineApp.swf constructor"); } public function testCall():void { trace("testCall() method called on fnineApp.swf"); dispatchEvent(new Event("fnineEvent",true)); } } }
This basic idea will allow you to do all kinds of fun stuff. Enjoy.