Control a flash animation inside a Flex application
August 21st, 2009 in Flex | 11 CommentsIn this tutorial, we’ll see how to control the timeline of a flash animation created with Flash and loaded inside a Flex application.
1. Create a new flex project and set the layout of the main MXML application to vertical.
2. Inside Flash CS3 or CS4 create a new Actionscript 3 file and save it as flash.fla. Set its framerate to 24 to match with the Flex framerate. Create a simple animation and publish the swf file.
3. Import the flash.swf file inside your flex project. Open the main application to edit the code.
Use the SWFLoader component to load the swf file and add to it a complete event listener so that you know when the content loading is complete.
<mx:SWFLoader id="loader" source="flash.swf" complete="initMovie()"/>
4. Add a Script tag and declare a private variable datatyped as a MovieClip named “flashMovie”.
Inside the Script section, write the initMovie function that gets a reference of the swf by using the content property of the SWFLoader object and cast it as a MovieClip.
<mx:Script>
<![CDATA[
private var flashMovie:MovieClip;
private function initMovie():void{
flashMovie = loader.content as MovieClip;
}
]]>
</mx:Script>
5. Next add two buttons to control the swf animation that call the play() and stop() methods of the MovieClip.
<mx:Button label="Play" click="flashMovie.play()"/> <mx:Button label="Stop" click="flashMovie.stop()"/>
Note that you can also use the gotoAndPlay, gotoAndStop, prevFrame, nextFrame methods to control the playback of the MovieClip.
6. By using this method, we have only simple timeline control of the flash file. In a future tutorial, we will see a more advanced method to have more control by creating flash movies as flex components.
Here’s the final code, run the application to test it.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #CBCBCB]">
<mx:Script>
<![CDATA[
private var flashMovie:MovieClip;
private function initMovie():void{
flashMovie = loader.content as MovieClip;
}
]]>
</mx:Script>
<mx:SWFLoader id="loader" source="flash.swf" complete="initMovie()"/>
<mx:Button label="Play" click="flashMovie.play()"/>
<mx:Button label="Stop" click="flashMovie.stop()"/>
</mx:Application>
Aug 24th, 2009
Great tut, I was searching for that …
Thanks
Aug 25th, 2009
Thanks !
Aug 30th, 2009
tks
Aug 30th, 2009
If you use @Embed this doesn’t work, so make sure you upload the SWF and load it on the fly.
Sep 8th, 2009
But if I need to control gotoAndPlay(frame_number)??? In my experience this it not running.
The swf in flash not responding correctly the command.
Sep 8th, 2009
What exactly do you get ?
Because if you test the code above and change just the line for the Play button, it works for us.
click=”flashMovie.gotoAndPlay(20)”
The ball begins now from the bottom and not from the left.
Feb 23rd, 2010
nice tutorials … but quiet to easy …
u have tutorial to control something else from flash .. not a movie or animation?
Apr 22nd, 2010
Thanks.
Simple but of great help.
May 3rd, 2010
does anyone know how to do it when the swf file is located on a remote server? (source=”http:…).
there some security issues.
Thanks
May 13th, 2010
Hello, Firstly great tutorial!
Secondly could you please explain to me how to create the swf. I have tried everything to create my own, in Flash CS4, but i dont get the same response from flex when i then embed it. I am using the exact same flex code as you. Your flash.swf works fine, but when i try to make my own swf it fails to work, any advice?
May 25th, 2010
Perhaps your CS4 exports to the FlashPlayer10, but Flex uses FlashPlayer9 to debug.