Tag Archives: flash ide

Flesh Builder

The official statement came yesterday from @LeeBrimelow.
Flex Builder will have a new name from the next version, it will be called Flash Builder.
There is a lot of fuzz over the web about this change. I’ll try to describe things from my perspective.
First of all let me try to define a few things by trying to simplify them.

FLEX
People are mostly use the term Flex for:
the Flex Framework: is build on top of AS3 and basically means that you use components to build SWFs.
You can use a combination of AS3 and MXML which is a declarative language, think of it as xml. If you still don’t get it think the Flex framework as a REALLY advanced components panel like the one in Flash IDE.

the Flex Builder: a tool based on Eclipse. It’s more of a development environment but you can call it “an Adobe remix of Eclipse in a good way”.
When you download it (its free for Education and developers that lost their job thanks to the economic crisis) you get the Flex Builder AND a plug in for Eclipse, the choice for which one to use its yours. If you still don’t get it, first of all forgive me cause its 06:00 AM and English is not my native language, but you can (in a way) think of Flex Builder as a Flash IDE without the timeline but with an awesome AS3 editor.
More on the tool later*

FLASH
People are mostly use the term Flash for:
the Flash Player, browser plug in or desktop app: You don’t really expect me to describe Flash baby Player right?

the Flash IDE or Flash CS3, CS4, CS5 or Flash Professional : The tool that we all love and hate. The one that combines vector graphics, bitmap graphics, sound, video, fonts, code and so much more to create beautiful things and some not so beautiful things (banners, skip intros etc).

swf files: These little files that have changed the web. They can be simple banners, full sites, presentations, applications, games and SOOOO many things.

*Now more on the tool.
Adobe created Flex Builder for the developers to be able to code easily Flex and later Air apps. But Flex Builder is an awesome Actionscript 3 editor too.
So this nice editor can export stuff for the web and the desktop.
For the desktop, Flex Builder exports apps that run on the Adobe Air runtime.
For the web, Flex Builder exports ONLY SWFs. The exact same files that Flash IDE exports.

If you are still here, reading this post, I’m sure you ‘ve faced the confusion with some of your customers, boss, friends etc or even with your self. I’m talking about the confusion when someone uses the word Flash or Flex to describe some or all of the above list. Its clear that Adobe had to do something about it. So that’s why Flex Builder will be called Flash Builder from the next version (version 4,  codenamed Gumbo – and I’m telling you it’s awesome!).

I’m almost sure that this is a good move but its not complete yet in order to make things more clear. Flash Builder is a tool that publishes stuff for the Flash Platform and that stuff can be created either by using pure AS3 code or code from the Flex framework but in the end all you get are SWFs.

The only reason I could think on why the change might concern your clients is because Adobe did a good job on marketing the Flex brand and there is so much buzz around it while the same time some really “nice” guys are using the black days (and uses) of flash to show how bad flash is “in general”. But you know what.. even this doesn’t make ANY sense. If you are ready to make a proposal for a project that it has to be build using the Flex framework then go ahead and propose it. The customer doesn’t have to know the name of the tool you are going to use.
Don’t even consider that I’m suggesting you to “hide” the word Flash for the love of Macromedia!
If someone thinks that Flash is all about skip intros and banners my first reaction is of course to try to open his eyes. Everyone deserves a chance. If he/she still doesn’t get it then fine he/she can go use this silverLITE thing and he/she will have my blessings.

Other than that the Flex framework is called Flex framework. In the next months it will be more easy when someone uses just the word Flex because the framework will be the only thing that will have that name. So I think with this renaming Adobe cleared a lot the confusion around the term “Flex”.

The big problem although was and I’m afraid still is the “Flash” word. You see Flash means so many things and now there is even one more product name that includes that word. If the confusion remains after this it will be only because the term Flash is used again. If lets say for example Flex Builder became Adobe Builder (NO I’m not suggesting anything here!) it would be more clear to new people what this tool is all about. Now using the term Flash, some people might think that this is ANOTHER .fla IDE.

I think Adobe has in mind more re-brandings starting with the Flash IDE. @PeterElst and many others had  a nice suggestion to rename Flash IDE on something like Flash Designer.  Maybe that would be enough, I don’t really need such a change but many others do as with the Flex Builder. I totally understand that such move can shake the web (I don’t know if its going to be on the same magnitude as the “Google down” day) but renaming Flex Builder I guess was an easier move.
Even if this happens I don’t really mind that much. In the end of the day the only thing that I notice was a change in the  name of the product.

I like the Flash Builder name but people have to realise that this “Flash” on the name refers to the FLASH PLATFORM.

Now if they tried to change the name of the platform or lets say the player I would be the first to go to Redmond and sell my soul. (but I don’t worry about it cause I think they are is a good way.. right?)

Good night

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 🙂