Tag Archives: AS3

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!

Air Windows..

In this post I will try to describe the window types that we can create on Adobe Air by using Flex Builder and the Flex framework. This is a reference for me so if you think I miss some points please feel free to comment above. Air 1.5 Cookbook by O’reilly will be next to me as I go through this post. *

The First Window is automatically created by AIR.
The properties of this window can be set on the¬†application descriptor file¬†under the initialWindow node(The app descriptor file is named after the project name -‚ÄĚproject name‚ÄĚ.xml and is located on the src folder of the project).
Those properties are title, systemChrome, transparent, visible, minimizable, maximizable, resizable, width, height, x, y, minSize, maxSize and some others. Many of these properties have a default value which is the most useful for most of the cases so you don’t have to bother. The only required attribute for the initialWindow node is the content (the path to the swf/html file) but if you are using Flex Builder, Flash IDE or DreamWeaver they manage to do the job for you!

Other Windows:

NativeWindow: creates a native operating system window.
We instantiate the NativeWindow class and pass the constructor a NativeWindowInitOptions object.
That object contains the properties of the look and feel of the window.
These properties are: maximizable, minimizable, resizable, systemChrome, transparent, type(normal, utility, lightweight).

Here is a simple example:

<mx:WindowedApplication¬†xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”createAnotherWindow()” title=”Core Window>
<mx:Script>
<![CDATA[
private function createAnotherWindow():void
{
//properties fot the new window
var options:NativeWindowInitOptions = new NativeWindowInitOptions();
options.maximizable = 
true;
options.minimizable = 
true;
options.resizable = 
true;
options.systemChrome = NativeWindowSystemChrome.STANDARD;
options.transparent = 
false;
options.type = NativeWindowType.NORMAL;
//the new window
var window:NativeWindow = new NativeWindow(options);
window.title = 
“Second Window”;
window.width = 200;
window.height = 
this.nativeWindow.height;
window.x = 
this.nativeWindow.x + this.nativeWindow.width;
window.y = 
this.nativeWindow.y;
//show it
window.activate();
}
]]>
</mx:Script>
</mx:WindowedApplication>


There are 3 types of windows in AIR and they are defined on theNativeWindowInitOptions type property.

Normal: Appears on the Windows taskbar or the Mac window menu. Chrome from the operating system is used and it looks like that:

Utility: Does not appear on the Windows taskbar or the Mac window menu. Chrome from the operating system is used but in a lighter version (there are no minimize/maximize btns etc).

Lightweight**: Does not appear on the Windows taskbar nor on the Mac window menu, it doesn‚Äôt use the system chrome and it ‚Äúlooks‚ÄĚ like that:

**Remember that in order to have a Lightweight window we have to set the systemChrome to false.

Notice that the core window doesn’t have focus and that is because I clicked on the Lightweight window which is completely transparent but it exists and it stands on the right side of the core window!

All examples above have being created with the exact same code as the example provided, the only difference between the 3 of them is the type property and in the case of the Lightweight window I also had to change the NativeWindowSystemChrome from STANDARD to NONE.

From now on we can add whatever we like on each stage of each window just by referring to it like that:

window.stage.addChild(‚ÄĚsomething to add‚ÄĚ);

The Flex Framework offers 2 classes for windows, the WindowedApplication and the Window.

As in our example the WindowedApplication acts as the application container for our Flex-based Air app. So the content of that container is actually the content of our initial window. We can use the Window component as a container for additional windows that we might need and we should keep in mind that this component CANNOT be nested inside anyting else because it is a top-level layout container!

Both of these classes have an underline NativeWindow object that they use for creating and controlling the native OS windows. We gain access on that NativeWindow object by using the stage.nativeWindow property of any display object.

As a best practice as I can think and as the Air CookBook suggests is that we should create the extra windows as a separate components based on the <mx:Window> tag and activate them when we need them via MXML or AS.

At first I create an mxml component in a folder called components under the src folder which looks like that:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Window¬†xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” width=”800” height=”600” title=”BrowserWindow>
<mx:Script>
<![CDATA[
private var url:String;
public function set theUrl(url:String):void
{
this.url = url;
browser.location = url;
}
public function get theUrl():String
{
return(this.url);
}
]]>
</mx:Script>
<mx:Label¬†text=”MY BROWSERWINDOW” fontWeight=”bold” fontSize=”17” textAlign=”center” width=”100%” height=”50/>
<mx:HTML¬†id=”browser” width=”100%” height=”100%/>
</mx:Window>

Then I use that component via Actionscript:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication¬†xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”init()”>
<mx:Script>
<![CDATA[
import components.BrowserWindow;
private function init():void
{
var browser:BrowserWindow = new BrowserWindow();
browser.open(true);
browser.theUrl =¬†“http://www.macromedia.com”;
}
]]>
</mx:Script>
</mx:WindowedApplication>

..or via MXML like that:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:browser=”components.*”>
<mx:Script>
<![CDATA[
private function init():void
{
browserWindow.open(true);
browserWindow.theUrl = “http://www.macromedia.com”;
}
]]>
</mx:Script>
<browser:BrowserWindow id=”browserWindow” creationComplete=”init();”/>
</mx:WindowedApplication>

* This post was¬†meant¬†to be a lot bigger but since its in my drafts for over 2 weeks I thought I should release it and when I’ll find some time to extend it more I’ll do it. From the start¬†of writing this post I upgrade WordPress to 2.7 (awesome¬†guys), moved to (mt) (love them so far),¬†traveled¬†400 kms away from my base in Athens and it took me only 45 minutes since I used a plane for the 1st time for this trip and I spend MANY hours to find a decent WordPress plugin that can format nicely MXML + AS3 in order for you to be able to just copy and paste the code but I finally decided to not use any of them simply because they dont do the job I want.

Thanks for reading, cheers to a happy, flashy, flexy and sexy 2009 full of love, piece and Flash baby Player goodness. 

Be proud and thankful for the best piece of software out there.. the one and only 

Macromedia – Adobe Flash Player!

Savvas