arpit / openpyro

Home | Edit | New

Your First OpenPyro App

This example shows you how to get started writing your first AS3 application using OpenPyro using Flex Builder. [Note currently the compiled swc doesnt work with Flash IDE, I am working on fixing that soon. To use OpenPyro code with Fla’s please download the code itself and add it to the classpath of the Flash IDE].

Start a new AS3 project in Flex Builder and add the latest build of the OpenPyro.swc to the classpath. Once done type:


package{
   import flash.display.*;

   public class TestApp extends Sprite{
       public function TestApp(){
           stage.scaleMode = StageScaleMode.NO_SCALE;
           stage.align = StageAlign.TOP_LEFT;
           this.stage.addEventListener(Event.ENTER_FRAME, init);
       }  
       
       private function init(event:Event):void{
           stage.removeEventListener(Event.ENTER_FRAME, init);
           buildApplication()
      }

What we have done is just made sure the application waits for a frame before laying things out. The first frame could also be used for preloaders etc. Waiting for a frame makes sure that the stage dimensions can be read accurately once the application begins building. This is not an OpenPyro thing, more of a Flash thing.

In the buildApplication function, we can start by creating a UIContainer for our entire application.


	private function buildApplication():void{
		var container:UIContainer = new UIContainer();
		addChild(container);
		container.width = 600;
		container.height = 400;
	}

There is an important note here. The top level OpenPyro container must always have explicitly set dimensions. Everything that sits inside it can have percent based dimensions or explicit dimensions though.

Another interesting feature in OpenPyro is backgroundPainters. Painters are objects that can be assigned to any control in OpenPyro and they will paint on the graphics object of the control as needed (say for example if the container resizes).

In our case we can just add a FillPainter which will paint the entire object with the color gray


      container.backgroundPainter = new FillPainter(0xcccccc);  

Now we can add other UIControls on the main container as per your application requirements

Proceed to Simple Layout Examples

Last edited by kfitzpatrick, Tue Mar 31 10:05:14 -0700 2009
Home | Edit | New
Versions: