Tag Archives: Actionscript

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.

EMBEDDED FLA ASSETS or LOADED FLA ASSETS?

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
 
{
//EMBEDDED ASSETS
 
private var myMC:Sprite = Includes.MyMovieClip;
private var myJPG:Sprite = Includes.MyJpg;
private var myPNG:Sprite = Includes.MyPNG;
public function RuntimeFlashEMBEDDED()
{
addChild(myMC);
addChild(myJPG);
addChild(myPNG);
}
}
}

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

package
{
 
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();
default:
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:

//LOAD AT RUNTIME

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");
addChild(sav);
}
}
}

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?
No?
Ok both of them are pure AS3 projects!

Tour de Flex!

UPDATE:Ā It seems that instead of just creating a super hot Flex Component explorer for the desktop the guys are turning it into an amazing community resource! Besides the commercial/non-commercial components, flex skins, FXs, code sample for mashing up with a lot of services and so many other stuff now the community can add stuff too. I can see the bright future of this app. TweetDeck is my most popular Air app so far but “someone” is taking place in there šŸ™‚ Thanks guys. Check Greg’s post for more info on how to put your mark on this super hot app! Ā Ā 

Greg Wilson, an Adobe Evangelist for Flex, Air, CF and other Adobe goodness blogged about a new super hot Air app (of course) with the nameĀ Tour de Flex. It is a Flex Component ExplorerĀ applicationĀ which features a very nice UI as you can see.

From Greg’s post: “The application showcases the core Flex components, AIR capabilities, Flex data access (BlazeDS and LiveCycle DS), numerous coding techniques, cloud APIs, and a growing list of community-developed components, effects, skins and more.Ā  There are 217 total samples in Tour de Flex as of this writing.Ā  We expect to add more every month and have built in a mechanism to easily push out new samples.Ā Each sample has a running demonstration, source code, links to related resources such as ASDocs, community commenting, and more.”

This is the beautiful UI of the app which I have to say that features many nice stuff.

For the Eclipse users and thanks to James Ward (aka RIA Cowboy), the guys also add an Eclipse plugin so now you can directly search from an Eclipse view window!

You can download the app from the right sidebar of this blog or visit the Tour de Flex page which isĀ of courseĀ on Flex.org/tour. There is also a pdf guide there šŸ™‚

Congrats guys!

A note to my readers: I would like to apologize for duplicating posts but sometimes there are things that amaze me and I just can’t keep my self from not posting about them. Just to be fair I would like to ask you to read the original post fromĀ Greg Wilson because besides the specific post, his blog is realy amazing. I should also mention that I really like his WP theme (so much that for a few months I used the same).

Greg I hope you are not pissed off šŸ˜‰

Thanks for the great app.