tutorials flex compilator_01
Stage and compilation
When starting the compilation of a new animation in Flex2, it is good to be able to define the background colour, the speed of the animation, etc. There are several methods to define these properties by default during the launch of a compilation. I will try to give you the principal elements which will enable you to understand this subject a little better.
There are at least 2 different ways to create a swf, either by using AS3 code or by using an .mxml file containing an MXML document which will be used as a support to the compiled animation.
Let’s see now how to clearly define properties for the animation and its main stage using the compiler.
The compiler
It is possible to paramterize the basic configuration of a swf with the AS3 compiler which is based on command line switches. You can read an excellent article on Senocular’s blog which will discusses all you need to know about Flex 2’s mxmlc.exe compiler: Beginners Guide to Getting Started with AS3 (Without Learning Flex). It is therefore possible using only the AS3 compiler to create swfs without using Flex2. You probably already know but Flex’s compiler is free and therefore can be used in different contexts to Flash or Flex2.
Regarding the mxmlc.exe compiler’s parameters, we will concentrate particularly on the properties:
- -default-background-color : allows you to define the background colour of the animation by default.
- -default-script-limits : allows you to regulate the maximum number of recurrences and the time delay of loops in the swf
- -default-frame-rate : allows you to define the speed of the animation in frames per second.
- -default-size : allows you to define the height and width of the swf by default.
With these 4 commands you can easily manage the basic display of your application.
Example of command line to add to the ActionScript Compiler section of the property panel of your project.
-default-background-color 0x7f7f8e -default-script-limits 5000 10 -default-frame-rate=24 -default-size 740 400
Note: I have not yet managed to make the -default-size parameter work properly yet. Each time I use only this command line in the properties of my Flex2 project I always have a stage at 100%. If anybody has any ideas why this would be left out of the compiler I would love to know! :)
Using AS3 code only
If we have to go via the compile time parameters each time, it could become annoying to manage the compilation of several applications each having totally different parameters. Also it is possible to parameterise the background colour, the speed of the animation and the width and height of the stage directly in the code… To do this there are many possibilities.
1 - Using a meta-tag [SWF]:
package { import flash.display.Sprite ; import flash.display.StageScaleMode ; import flash.text.TextField; import flash.text.TextFieldAutoSize import flash.text.TextFormat; [SWF(width="740", height="400", backgroundColor="#B1D7EF", frameRate=48)] public class TestStage extends Sprite { // ----o Constructor public function TestStage() { stage.scaleMode = StageScaleMode.NO_SCALE ; trace(stage.stageWidth + " : " + stage.stageHeight) ; var tf:TextField = new TextField() ; tf.x = 25 ; tf.y = 25 ; tf.autoSize = TextFieldAutoSize.LEFT; tf.defaultTextFormat = new TextFormat("arial", 12) ; tf.text = "Hello World." ; addChild(tf) ; } } }
Note: The position of the tag in your code is important! When I started I tried to put the tag before the imports and they don’t seem to work there!
You will notice in your tests that when you delete the width and height properties that the animation takes the maximum size available (100% in both height and width by default).
2 - Using the class properties directly on the stage
It is also possible by manipulating Stage class properties to manage certain basic parameters like the frame rate. In AS3 there is a frameRate property which allows you to change the speed of the animation at any time with a value in frames per second.
stage.frameRate = 48 ;
Using MXML and Adobe’s MX framework
It is imperative to use the Adobe’s MX framework for Flex2 and therefore to at least use the mx.core.Application class and a MXML file to publish the application. The possibilities therefore become numerous (but the swf’s file size will also grow!).
<mx:Application frameRate="48" width="740" height="400" backgroundColor="#B1D7EF" backgroundAlpha="125"> </mx>
In looking closer at the Application class you will see that there are numerous properties to customise your animation like the backgroundGradientColors property which allows you to define a colour table to create a gradated background colour. You just need to make a choice between full-on use of Adobe tools which avoid having to reinvent the wheel but which increase the size of your .swf or you can completely create your application without touching the MXML or the Adobe code (which is what I prefer doing but for a quick back office MXML and its MX framework wouldn’t be flexible enough).
By ALCARAZ Marc aka eKameleon (2006) - You can find this tutorial and its comments on my blog.
Mediabox Training Centre © 2000 - 2008 All rights reserved.
Adobe Authorized Training Centre. State convention under number 25 14 02167 14.
Mediabox : SARL au capital de 62.000€ - Activity number: 25 14 02167 14 - SIRET : 493 716 468 00027
MEDIABOX, 102 Avenue des Champs Elysées, 75008 PARIS - Tel. +33(0)2.31.91.96.89 - Fax. +33(0)2.72.68.56.42



