Flash IDE for Designers - Flexbuilder for Developers!
I used Flexbuilder for a couple of big AS3 and Flex projects and once you start to develop in Flexbuilder (Eclipse) you maybe don’t wanna go back and use a normal Text Editor. So i was looking for a way to use Flexbuilder for heavy graphical sites that also need the Flash 9 IDE.
I think the best way to work on big projects is for designers to work in the Flash IDE and for Developers to add functionality with a professional programming tool like Flexbuilder.
I was playing around with swc’s but it just didn’t work the way a wanted it to work.
Josh came up with the idea of loading swf-files and accessing the assets through the swf, not through a swc. I tested it the way I like it to use in Flexbuilder and it works perfectly (ie. code completion and code checking still works). You can add all functionality after you compile the asset-swf. This is the perfect way to work hand in hand with designers.
So here are the basic steps:
First prepare your assets in Flash 9
- Create a new AS3 file. Create a MovieClip and add a Class-Name (like ‘com.bigspaceship.test.GreyRectangle’) in the Linkage Property Window of the Movieclip.
- Create a minimal version of the Class:
package com.bigspaceship.test{
import flash.display.MovieClip;
public class GreyRectangle extends MovieClip{
public function GreyRectangle() : void {
}
}
} - Compile/Publish the swf.
Within Flexbuilder: adding the functionality
- Create a new AS3 project and add the same classpath that you used in your Flash 9 File (com.bigspaceship.test).
- Embed or load your Asset.swf in your Main-Class. The Embed tag only works in Flexbuilder so if you also wanna compile it from Flash 9 you should load the asset.swf.
Note: you cannot access the embedded assets inside the constructor so i added a little work around to initialize my assets after the constructor is called.
Example for a document/main Class embedding the swf (Flex only):
package{
import com.bigspaceship.test.*;
import flash.display.MovieClip;
import flash.events.Event;
public class MainFB extends MovieClip{
[Embed(source=’../bin/assets2.swf’)] private var AssetsClass : Class;
public function MainFB():void{
// instantiate the embeded assets2.swf-Class to access it’s library.
// it doesn’t work without that line of code.
var assets : MovieClip = new AssetsClass() as MovieClip;
// workaround to init my assets after the constructor call.
// maybe you know something better. it works good for me.
this.addEventListener(Event.ENTER_FRAME, this._myInit);
}
private function _myInit($evt:Event):void{
// removeEventListener to make sure that this function is only called once.
this.removeEventListener(Event.ENTER_FRAME, this._myInit);
// create an instance of the BlueRectangle MovieClip
// that is inside the assets2.swf library
var b:BlueRectangle = new BlueRectangle();
b.y = 200;
addChild(b);
}
}
}
Example for a document/main Class loading the swf (works in Flex and Flash 9):
package{
import com.bigspaceship.test.*;
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLRequest;
import flash.display.Loader;
public class MainFBFL9 extends MovieClip{
public function MainFBFL9():void{
// loading asset library swf
var assetLoader:Loader = new Loader();
assetLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, _onAssetsLoad, false, 0, true);
assetLoader.load(new URLRequest(”assets1.swf”));
}
private function _onAssetsLoad($evt:Event):void{
// called when assets1.swf is completely loaded
// create an instance of the BlueRectangle MovieClip
// that is inside the assets1.swf library
var r:GreyRectangle = new GreyRectangle();
addChild(r);
};
}
} - Now you can add functionality to your Movieclip:
package com.bigspaceship.test{
import flash.display.MovieClip;
import flash.text.TextField;
public class GreyRectangle extends MovieClip{
/*
Define all variables whose instances are created within your GreyRectangle MovieClip in the Library. All vars are already instantiated within the MovieClip. So, if you instantiate one of them again you are going to overwrite the variable and lose the reference to the Object that is already within your MovieClip
*/
public var tf : TextField;
public var bg : MovieClip;
public function GreyRectangle() : void {
tf.text = 'hello world !';
}
}
} - Compile your Project from Flex and be surprised that actually everything works!
It seems like Flash is now compiling all Classes again and uses them instead of the Classes that are compiled within the asset.swf.
I put together some example files that play with different asset-files and nested MovieClips:
Source Files
Have fun!
EDIT: 11/13/2007
To get that all to work it is important to uncheck “Automatically declare stage instances” within “AS 3.0 Settings” in your Assets.fla file.
