Coding the DocumentClass in Flex Builder

Since the dawn of Flash CS3, developers have been given the grace of the DocumentClass(explained). The DocumentClass effectively replaces the «lets write all our code on frames» approach which, frankly was more of a hackers approach to coding within the Flash IDE. The main advantage of the DocumentClass is it's life outside of the Flash IDE, it's a separate .as file.
However, there are some things to consider when jumping in to a project using the DocumentClass. One of these considerations must be, that the built in code editor in the Flash IDE, well..it's not the best environment in to be writing code. Alternative ActionScript editors exists, like TextMate(OS X) or FlashDevelop(Win). But the far superior cross platform alternative in my opinion, is Flex Builder. FB is great for many reasons, mainly because it utilizes the power of the Eclipse platform, an environment well known to Java and CF developers.
In short, Flex Builder is a powerful coding environment. But there are some considerations to take when working with a DocumentClass to be exported trough Flash.. one of them is that Flex cannot see your instance names(objects on the stage) and give you code completion on them..in fact, it will complain and claim it's an error. This can be fixed in a jiffy..

• In Flash, open the project settings.


• Click the «Settings» button to the right of the «script» drop down


• Unckeck «Automatically declare stage instances»

Now Flex will let you declare your own instances from within the DocumentClass, like they where properties of the DocumentClass itself(which they are). However, you will need to define the instances as «public» properties/variables, so the Flash compiler can see them. Okay, time for an example.

Let's say I have a blue movieclip on the stage with an instance name of "cheeseball". Here is how I access this movieclip from within my DocumentClass.

package{
import flash.display.Sprite;
import flash.display.MovieClip;

public class MainClass extends Sprite{

public var cheeseball:MovieClip;//<-----

public function MainClass(){
trace("The name of the clip is "+cheeseball.name);
}
}
}


As you can see, the «cheeseball» movieclip on the stage is now accessed by defining it as a public property, making it visible to both Flash and Flex, giving you code completion, error checking and all kinds of wonderful things. Do this and your day will be shinier!

QuickTip: MOUSE_OVER vs ROLL_OVER

So, what is the difference between the MouseEvents, MOUSE_OVER and ROLL_OVER? The short answer is that MOUSE_OUT triggers when mousing over a child of the listener object, ROLL_OUT only triggers when leaving the listener objects bounding box. Consider the following code:

var sp:Sprite = new Sprite();
sp.graphics.beginFill(0xFF0000);
sp.graphics.drawRect(0,0,200,200);
sp.graphics.endFill();

var inner:Sprite = new Sprite();
inner.graphics.beginFill(0x00FF00);
inner.graphics.drawRect(0,0,50,50);
inner.x = 75;
inner.y = 75;
sp.addChild(inner);
addChild(sp);

sp.addEventListener(MouseEvent.MOUSE_OVER, report);
sp.addEventListener(MouseEvent.MOUSE_OUT, report);
sp.addEventListener(MouseEvent.ROLL_OVER, report);
sp.addEventListener(MouseEvent.ROLL_OUT, report);

function report(evt:MouseEvent):void{
trace(evt.type);
}


The sprite "inner" is a child of "sp". When rolling over "sp", both the MOUSE_OVER and the ROLL_OVER will trigger. However, when rolling over "inner", MOUSE_OUT will trigger, succeeded by MOUSE_OVER again. ROLL_OUT will not trigger when rolling over "inner". Test it out and it will all become clear!

Flash and Flex, bridging the gap

This post is a followup of my previous post regarding Flex and Flash. Although this is a followup, the focus has changed in parallel with the internal functionality and focus of Flex Builder and Flash. Back in august 2007, Flex and Flash existed in two different worlds, this is still the case, however now there are bridges between the two worlds.
As a developer, Flex (Builder/Eclipse) is a tool far superior to the Flash editor from my point of view. But when it comes to flexible design, Flex Builder still brings little to none to the table. And as far as my understanding of Adobe strategy goes, this is done intentionally. Flash should be an animation and design tool, whereas Flex Builder focuses on the developers. Adobe does intentionally try to separate the two..smart move!

What Adobe has done to amend for the intentional wedge driven in between Flash and Flex, is to create ways for developers to remain in Flex Builder while "importing" design created from within Flash. This is done trough bridging tools like the Flex component kit and the Flex component templates. This enables designers to stay in Flash(or any other CS product), using tools familiar to them, creating the design to be implemented via Flex. This approach to creating rich interactive content is much better than the old one involving big ass .fla files and no code help what so ever(almost). The snag is, when Adobe decides to change the approach of the designer developer workflow, change is also forced upon a bunch of Adobe/Macromedia users. To change their entire workflow may seem as a daunting task for many designers and developers. However this change is a change for the better, it's just a matter of dropping the conservative mindset.

As of now, the Flex Component kit is the best way to prepare for the real transition in my mind. You can of course go ahed and do lots of CSS styling in Flex builder, not a good idea unless there's only one person working on the project, as Flex builder is needed to see the design as a whole. The real transition is of course the introduction of FXG, the new interchange format making it possible to do full designs in CS products, add interactivity in the upcoming Flash Catalyst, then do the development in Flex Builder. In this way the different tools will keep their strengths and not worry about unrelated functionality, Flash becomes a design/animation tool and Flex a development tool exclusively. Like the current workflow of movie editing suites like FinalCut Studio, you will be able to use the FXG format to pass files back an forth between the designer and the developer, maintaining the focus, never worrying about stuff outside your field of your expertise. This is a long awaited and a big step for Adobe. Along with AIR, this move will in my opinion reinforce the FlashPlayer status as the goto(pun intended) technology for cross-platform interactive content and development.

Optimizing Flash performance

Introduction
As Flash designers and developers get a hold of even more advanced tools and scripting languages, the need for performance considerations within flash projects become ever so apparent. Lately I've seen people complaining about flash apps that bug down their CPU and memory when visiting sites containing flash media. I see this problem as two parallel problems.

1. Sites relying on advertisement (often flash banners) try to cram a gazillion banners and ads into every nook and cranny available on their site. This is simply greed, a condition for which I can offer no cure.

2. The Flash editor has been an animation tool for quite some time. As a result, things common to other development platforms, like performance optimization, has not been and still isn't a priority in most Flash projects. However, this has started to change, something I will try to contribute into trough this post. So, let's get it on...

General optimization

• WMODE. First of all, if you don't have an amazingly good reason for using it, do not use wmode! In short, wmode is used to make the background of the swf file become transparent. Wmode will render the swf unreadable to screen readers, force the swf to run when on a hidden tab and make the content of your swf to render much more slowly than in normal mode. Read more about this (Tinic Uro).
• Vectors and bitmaps. If you are animating a complex static vector, that is a vector that does not change it's content, e.g. a rectangle, then use the «cacheAsBitmap» property or simply use a bitmap instead. Let's say you are tweening a vector shape across the stage. The Flash-Player(FP) will have to recalculate all the vectors in the shape for every frame. For complex shapes, this will take up a lot of CPU cycles. With «cacheAsBitmap» turned on, the FP will calculate the vectors once, create a bitmap and re-render the bitmap instead. But do note this!! For vector shapes that are changing, not static, like lines that are constantly moving inside of a movieclip, if so..do not use «cacheAsBitmap». The reason for this is that FP now have to re-render both the changed vector shape AND create a new bitmap for every frame. So «cacheAsBitmap» is only good for static vector shapes.
• MovieClips. Not every shape needs to be a movieclip. If you need frames, you do need a movieclip, but if not, use a sprite(in ActionScript) or a Shape in the editor. Shapes does not have mouse and keyboard events and leave a much smaller memory imprint than MovieClips.
• Alpha. Crop your artwork instead of using big ass areas of alpha channel. The FP do render the alpha channel areas even if you cannot see them.
• Alpha video. A flv video encoded with an alpha channel using the On2Vp6 codec is about 4 times more complex to decode than one without the alpha channel. FP do not support alpha using H.264. Read more.
  

ActionScript optimization
This section is on ActionScript 3 only and can get somewhat technical.

• Strong typing. By typing your variables and functions the performance gain is substantial, in general 10 times faster. In AS3 the byte-code produced by the compiler actually changes based on typing. Also, strong typing makes it much easier to debug your app as the compiler will give more accurate debugger results. More on this.
• Numbers. Even though strong typing is quite easy to do, it's not always clear as to what type is the most efficient one. For numbers the «int» type is the speediest of the bunch, however «Number» does not lag far behind. However, it's smart to use «int» for iterations and situations where you are working on integers only as this will make debugging more effective. But do avoid «uint», unless you really need it. The «uint» type is a turtle compared to «Number» and «int». More on this here.
• Local variables. If you are going to access a variable more than two times, store it in a local variable first. Local variables are faster because they do not require a lookup into objects. E.g:
  var fName:String = person.firstname;
if(fName == "jim" || fName == "jill")
  is faster than
  if(person.firstname == "jim" || person.firstname == "jill")
  
• Data binding. Binding in Flex is a valuable and efficient way of handling data, however bindings do take up memory and they are general type. In other words bindings don't know what part of the data that will change, therefore all the data needs to be watched. If you are going the access the data only once or twice, it's better to do an manual assignment in code.
  

That's all folks.. be sure to check out the links as well.

Quicktip:Event handling

I've been seeing a lot of this(image) following the launch of ActionScript 3. For me, having the debugger version of Flash Player installed it manifests as an error dialog box telling me that loading did never complete. If you don't have the debugger version of the Flash Player this will only result in the application stopping without any message.

What puzzles me a bit is how often I see this error and the share number of professionally build Flash sites where this occurs. Now, this is completely avoidable. It's just a question of handling your events.

Basically there are 6 event you handle when loading stuff over http(s). You don't actually need to do anything upon the occurrence of an event(however it is smart to do so), you simply need to handle it in order to avoid FP throwing an error shown above. Do this and your app will feel so much more well made to the end user.

Sound visualizer using SoundMixer

This time you'll get a complete class drawing a visualizer graph for the sound playing(or, actually the bytes in the sound). You can show the graph as a raw sound wave or as grouped by frequency(where a fourier transformation has been applied). This is just a simple demo, but you can separate out different frequencies to get some really cool effects. Play around with it and see what you get. PS: You do need to provide your own sound ;-)

package {
import flash.display.GradientType;
import flash.display.MovieClip;
import flash.events.Event;
import flash.media.Sound;
import flash.media.SoundMixer;
import flash.net.URLRequest;
import flash.utils.ByteArray;

[SWF(width='512',height='300',backgroundColor='0x000000',frameRate='30')]

public class SpectrumTest extends MovieClip{

private var _eql:Boolean = true;//Show as grouped by frequenzy
private var _completeGraph:Boolean = false;//Complete graph fill
private var _spikeAmp:uint = 100;//Amplifier for graph peaks
private var _graphFill:Array = new Array(0xFF0000, 0xFFDF21);//Colorfill for graph

private var _soundBytes:ByteArray;

public function SpectrumTest(){
var s:Sound = new Sound(new URLRequest("yoursoundfile.mp3"));
s.play(0, 3);
this._soundBytes = new ByteArray();
this.addEventListener(Event.ENTER_FRAME, drawGraphHandler);
}

private function drawGraphHandler(evt:Event):void{
graphics.clear();
graphics.clear();
graphics.beginGradientFill(GradientType.LINEAR, this._graphFill, [1,1],[0,255]);
graphics.moveTo(-1, 150);

//Get the bytes
SoundMixer.computeSpectrum(this._soundBytes,this._eql);

for(var i:uint=0; i<(stage.stageWidth * .5); i++){ 

var num:Number = -this._soundBytes.readFloat() * this._spikeAmp + stage.stageHeight * .5; 

graphics.lineTo(i*2, num); 

} 

if(this._completeGraph){ 

graphics.lineTo(512, 300); 

graphics.lineTo(0, 300); 

graphics.lineTo(-1, 150); 

} 

} 

} 

}

Briefly: SWF and FLV formats opens up

Adobe has announced the Open Screen Project which will be one big step in the openness direction of the SWF and FLV file formats. In practice this means that you can build your own Flash player, or an FLV flayer. So, iPhone Flash player anyone?

Ryan Stewart has written a more in depth explanation on what this announcement means.

Quicktip: Skewing an image using ActionScript 3

So you want to skew an image, or a MovieClip or perhaps any other DisplayObject. You could do this manually in the Flash editor of course, but what if you need to do it dynamically, or in Flex.. Here is how.

//If you prefer to draw one visually, skip down
/*var target:MovieClip = new MovieClip();
target.graphics.beginFill(0x000000);
target.graphics.lineTo(100,0);
target.graphics.lineTo(100,100);
target.graphics.lineTo(0,100);
target.graphics.lineTo(0,0);
target.graphics.endFill();
//center it on the stage
target.x = stage.stageWidth *.5-50;
target.y = stage.stageHeight *.5-50;
//add the mc to the stage
addChild(target);*/
/*****/
//Set the skewing angle
var degX:Number = 15;
var degY:Number = 15;



//Get the transform matrix for the object to skew
var m:Matrix = target.transform.matrix;
m.b = Math.tan(degY *(Math.PI/180));
m.c = Math.tan(degX +(Math.PI/180));



//Apply the matrix to the transform object
var t:Transform = new Transform(target);
t.matrix = m;



//Apply the skew
target.transform = t;


Looks like a lot of code, but remember that the first 10 lines of code(not counting comments) are just to draw a MovieClip onto the center of the stage. The actual skew is achieved in just 8 lines of code.

When applying this to a movieclip it will look something like the image in the top of the post.

Quicktip: Ducking local security in FlashPlayer

Ever needed to test a swf containing networking residing on your local hard drive? Sure, you can choose to export for only network from the publish menu in Adobe Flash. But what if you need to load some movies locally and then make a connection to your remote server at the same time? Well, out of the box, you can't. But wait, there is a simple solution to allow flash player to do both when playing locally. Only tree easy steps..

1. Open your favorite texteditor(BBEdit, Coda, Textmate..) and create a new textfile. At the first line, type the path of the folder where your project resides, e.g./Users/username/myproject

2. Save the file with a .cfg extension to: /Library/Application Support/Macromedia/FlashPlayerTrust/

3. There is no step 3

Note: You can do this for your entire user account, but I strongly recommend not to do so, cos this will allow not trusted files to run both networking and local command on your computer if you download them. You don't want that.

Briefly: New Layout

So, I decided to change the layout. More mobile device friendly layout, not more to say on that issue

Quicktip: Avoiding popup blockers in AS3

Adobe/Macromedia did change a couple of things as the release of ActionScript 3 became a reality.

For once, it's not as easy as it once was to open an external browser window. There are many solutions to this floating around, many of them involve using the "wmode" parameter in the HTML embed code for the swf. In my opinion this is not a good idea cos it will bring a bunch of new problems with it, like handling textfields and so on. I've written a possible solution for this problem which works using standard embed code in the HTML. It simply tries to use the ExternalInterface, if that fails, it falls back to navigateToURL. Hey, remember to import ExternalInterface, URLRequest and NavigateToURL in order for it to compile properly.

private function openURL(url:String, window:String = "_blank") : void {
var WINDOW_OPEN_FUNCTION:String = "window.open";
if(!ExternalInterface.call(WINDOW_OPEN_FUNCTION, url, window)){
navigateToURL(new URLRequest(url),window);
}
}


What I've done

So.. time to show off some actual results of my work I suppose. The idea is to publish new projects as they emerge. But as some old Chinese dude once said: «Things Takes Time». In layman's terms that about sums to: "I haven't got anything new to show you just yet". In the meantime I'll present thee with some "old" projects in which I have held the part of developer. Note that these projects where not created solely by me, I merely did the development part of it. To read more about some of the people involved in making these projects please visit Voyagedigital.com.
Due credits also to Kjartan over at madebykjartan for his exquisite web-design in the «lenka» project. There are many more I'm sure..please don't sue me or go into a wild rampage if I forgot to mention your name ;-)

Freia 2007
This project was developed by using Flash 8 and ActionScript 2, which where the cutting edge at the time. I know, hard to imagine AS2 cutting anything whatsoever.. Anyway, some of the features included a totally physics driven ragdoll game, where the purpose was to avoid enemies and win the princess. Hey! It's not original, but darn tutting cool. Click here to watch it live.

Lenka (The Chain)
A project with a goal of actually helping people, which was a real inspiration. This was my first Actionscript 3 project and therefore one should be kind in evaluating it's effectiveness and robustness!
Thinking back, this project should have been done using Flex, but we ended up doing it in the first release of Flash 9. Smart? Well.. But hey.. it still rocks! (offline)

Menn og kreft 2006 (Men and chancer)
This was done in Flash 8 and AS2, and boy did this project get fat. Tons of cartoons loading and cellular services adjoined by a fully fledged online video editor with exporting features. Basically we worked our collective asses of making it, and by golly it's slow to load..but still, it's worth it.. mostly because of Runes (The Art Director) way cool character design. Watch it live here.

Menn og kreft 2007(Men and cancer 2007)
The project was a followup to the project above, only this time Rune had hatched a completely spanking new and exiting idea. «How to live life», as told by a cartoon midget with a sassy attitude. This time done in Flash 9 and Actionscript 3, much more smooth and lightweight that the previous year. And to top it off, the amazing "kick my ass" game. It's the black button in the middle.
Click here to watch Steinar go bananas


That's some of them. Sorry they're all in norwegian, but still, you don't have to read the text you know. Well, I'll be back with more incredibe nerdy stuff at a later moment in time.

Quicktip: Changing the font in Flex 3 editor

Have you ever wanted to turn enlarge that font size in the code editor in Flex builder 2/3, but have thrown in the towel after several hours poking around to find this setting? Since Flex is build on Eclipse, this part of the editor is actually identical to the Eclipse interface. To change the font, choose Window -> Preferences -> General -> Appearance -> Colors and fonts.

In that small list of folders, choose Basic -> Text font and hit the change button. Tada! Kinda a lot of effort, but it will be worth it in assisting your eyes from squinting all day long.

And hey, while we're at it. If you are starting to type something in the code editor, but can't quite remember the whole variable name or whatever... hit ctrl+ spacebar. Flex will then make a suggestion. This is a very handy feature as well..

Quicktip: Actionscript 3 and number bases

"Oh my God, he's writing about numbers, how boooring!".. I bet you're thinking something like that right now, but hang on, this isn't really about numbers, it's about colors and all the cool things you can make em do.

So what does number bases has to do with colors? Well, in this exact moment you are looking at several colors, and at least two color models. The most commonly used on webpages, hexadecimal colors, like #FFFFFF or 0xffffff (in Flash/flex). In fact, hexadecimal means 16 based, as opposed to decimal or 10 based like we're used to (0-9). This is kinda good to know, because.. let's say you want your flash app to sample some colors from a picture and present the colors to a web-designer in a hexadecimal format.. how would you go about converting the premultiplied color value Flash gives you into an usable hex color?

Let's say you sample the color white, Flash gives you 16777215, completeley useless for a designer. Let's transform that value into a hex color in one line:

var myWhiteColor:uint = 16777215;

trace(myWhiteColor.toString(16));

And there you go, Flash spits out "ffffff". This happes because the toString method takes the radix or number base as a parameter and converts the passed number. To reverse the conversion you'd use parseInt("0xffffff"), that would give you the original premultiplied color value.