Flex Builder to Flash IDE on Valentine’s day: “I love you baby, lets have some swfs!”

Well “Loaded + Embedded assets in AS3 project” would be a better name for this post..

Flex Builder is an amazing tool for me. Amazing not just because it makes the use of the Flex framework so easy but because it gives me freedom when I’m comparing it to the Flash IDE. Flex Builder IS NOT just for Flex. It is also an amazing actionscript editor, actually the best ActionScript editor that Adobe has ever created.

But as you might have guess a tool that creates swf files without a timeline, a symbols library and all the other cool stuff that Flash IDE has to offer can be really tricky sometimes.

In this post I will explain how can we get both of each IDEs advantages to do the job. Feel free to leave a comment if you think you have a better way to do such stuff.

I must give credits to Ted Patrick for an older post on the subject. (wow he just tweeted “Waking”, this is fun!)

The scenario is that you want to build a pure AS3 project (no Flex framework @ all) but you also want to use some assets that you created on Flash IDE.

First move would be to add all the stuff, like images, sounds, movieclips etc to the library of our lets say “Assets.fla”.

There is no need to have them on stage because the next step is to give a linkageID on each one of them and that should be enough in order to have access from our AS3 project in Flex Builder.

On Flex Builder we create a new Actionscript project and this is where we have to decide about another thing.


Lets start with the Embedded assets from FLA.

Our project’s name is RuntimeFlashEMBEDDED and it will include 3 files.

One is the main project’s file, another one is a separate class for embedding the swf (the code on this one could be easily on our main file but anyway) and the last file is of course the swf exported from Flash IDE file which includes all the assets.

Here is the basic code on the main file of our project:

package {
import flash.display.Sprite;
[SWF(backgroundColor="0x000000", frameRate="60", width="900", height="600")]
public class RuntimeFlashEMBEDDED extends Sprite
private var myMC:Sprite = Includes.MyMovieClip;
private var myJPG:Sprite = Includes.MyJpg;
private var myPNG:Sprite = Includes.MyPNG;
public function RuntimeFlashEMBEDDED()

Here is the code of the Includes.as file which embeds the specific symbols that I need:

import flash.display.Sprite;
public class Includes
[Embed (source="assets.swf", symbol="myMovieClip")] //*
private static var $MyMovieClip:Class
public static var MyMovieClip:Sprite = new $MyMovieClip();
[Embed (source="assets.swf", symbol="myJpg")]
private static var $MyJpg:Class
public static var MyJpg:Sprite = new $MyJpg();
[Embed (source="assets.swf", symbol="myPNG")]
private static var $MyPNG:Class
public static var MyPNG:Sprite = new $MyPNG();

*Even though I Embedded the “myMovieClip” symbol as a Sprite, the animation this movieclip contains is still.. “animated” ­čÖé

Next Loaded assets from FLA:

In this case, because we will load the swf library which carries all our assets after the initialization of our app the least we can do it to be sure that the whole swf has been loaded and then start using its symbols.

On the FLA we need a function on the first frame in order to make it capable of talking to our Flex Builder – AS3 code.

It looks like that:

function getInstance( id:String ):MovieClip
switch ( id ) {
case "myMovieClip":
return new myMovieClip();
case "myJpg":
return new myJpg();
case "myPNG":
return new myPNG();
return new MovieClip();

This function will be called from our project and all it does is to return one of the library objects so make sure the objects exist on library and have linkageID.

This time since we wont embed anything, the only files that we need in Flex Builder is the main one called RuntimeFlashLOADED and of course the assets.swf.

This is the code:


package {
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;
[SWF(backgroundColor="0x000000", frameRate="60", width="900", height="600")]
public class RuntimeFlashLOADED extends Sprite
private var _loader:Loader = new Loader;
public function RuntimeFlashLOADED()
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.INIT, swfLoaded);
_loader.load(new URLRequest("assets.swf"));
private function swfLoaded(evt:Event):void
var sav:MovieClip = MovieClip(evt.currentTarget.content).getInstance("myMovieClip");

So first we load the swf and when its fully loaded we can call the getInstance() function which lives on the assets.swf !

Flex Builder is way much better in coding AS3 than Flash IDE. Flash IDE is way better for animations, drawings and organizing our visual-audio elements than Flex Builder.

We love them both so why not using them both?

* I promise to use a code colorer plugin soon ­čÖé

MTVGreece widgets!

I’ve build 2 widgets for Mtv Greece but I didn’t had the time to blog about them so far..
The first one is for my beloved Twitter and the other one is for music.

The twitter widget looks like this:

(you can click on the image to see it)

Special thanks to Paulius Uza for his help on this and especially for the server side which caches the tweets so we don’t have to mess with Twitter’s API limitations.

The radio widget looks like this:

(you can click on the image to see it)

It streams Live Radio from Mtv Greece through Akamai.
On this one I use Ben Stucki’s amazing audio visualizer.

On the demo below the widget plays an mp3 which is located on my server.  The reasons for this are two. The 1st one is because I have no idea if I am allowed to and the 2nd is because I wanted to present the widget on this post as it was originally ment to be. Unfortunately on the live version of this widget, which you can see on MTVGreece.gr, the visualizer is turned off because I get this security violation error. I guess this is because Ben is using the computeSpectrum to read the audio (and create the beautiful visuals) and since this is stream I probably need a crossdomain policy file (right?).

I have to make another post some time for the Akamai Stream – Flash Player communication because there is not much information out there..

Anyway you can click on the visualizer to change mode, all credits for this goes to the man,┬áBen Stucki and if any error occurs you can blame me. ­čÖé
Thanks a lot for sharing your beautiful work Ben.

Oh did I mention that both of them are pure AS3?
Ok both of them are pure AS3 projects!