Posts tagged "Flash Builder"

Building Native Installers for Adobe AIR Using Burrito

There is an excellent post on quickly building native installers for Adobe AIR. Native installers are required if you are building AIR applications, which takes advantage of the extensibility options available from the native process API. The advantage is, you can start distributing your AIR-based desktop applications as native installers.

If you are using Adobe Flash Builder Burrito, you can build native AIR installers quicker than the steps mentioned in other blogs/sites.

  1. Click Project > Export Release Build…
  2. Select ‘Export and sign a native installer’ and click Next.
  3. Provide  a path to your PKCS12 certificate or create a new certificate from the interface.

That is all to it! Depending on your platform, you’ll see a native installer for your AIR application.

Isn’t this faster?

Building your first AIR-based mobile game in Burrito

The Adobe Flash Platform provides an elegant way to build, distribute, monetize, and play games on the  mobile platform. Once you learn the basics of ActionScript, Flex, and AIR, you can easily build simple to advanced games targeting various mobile devices.

Mobile games have gained immense popularity in the recent years primarily because of their ability to provide entertainment on the go. What does it mean for developers? There are numerous opportunities for game developers to produce and monetize their games on different online channels including the Android Market.

While you can use any language and tool to produce mobile games,  Flash Builder allows you to develop market-ready games with minimal effort. Moreover, Flash Builder provides a neat interface for building your game engine/levels and also allows you to debug your game on a connected device.

In this post, I’ll show you how you can build a simple Accelerometer-based game for the Android market using Adobe AIR and Flash Builder (Burrito). The objective of this game is to guide the earth ( image) towards the black hole (image) by using the accelerometer of the mobile device.

Now, if Accelerometer is available on the mobile device, you can initialize and handle the Accelerometer event as follows:

var acl:Accelerometer;
...
accl.setRequestedUpdateInterval(200);
acl.addEventListener(AccelerometerEvent.UPDATE, handleACLUpdate);
...

private function handleACLUpdate(event:AccelerometerEvent):void{

    rollingX = (event.accelerationX * FACTOR) + (rollingX * (1-FACTOR));
    rollingY = (event.accelerationY * FACTOR) + (rollingY * (1-FACTOR));
    rollingZ = (event.accelerationZ * FACTOR) + (rollingZ * (1-FACTOR));

    earth.x = Math.round(earth.x - (rollingX*rollingSpeed));
    earth.y = Math.round(earth.y - (rollingY*rollingSpeed));
    ...
}

Accelerometer data obtained from the device has some degree of inaccuracy. You can use a moving average of recent data to smooth out the movement of the earth. For more information on the Accelerometer class, read the documentation.

You can move the earth by simply tilting the mobile device on any particular direction. You should also remember to align the earth back in to the stage when it moves out of screen bounds. To achieve this, we’ll use the Flex effects:

<s:Bounce id="beffect" />

<s:Move id="topbounce" target="{earth}" yBy="2" duration="100" />
<s:Move id="bottombounce" target="{earth}" yBy="-2" duration="100"   />
<s:Move id="leftbounce" target="{earth}" xBy="2" duration="100"
        easer="{beffect}" repeatCount="1"  />
<s:Move id="rightbounce" target="{earth}" xBy="-2" duration="100"
        easer="{beffect}" repeatCount="1"  />

The trick is to move the earth by a very few pixels in the opposite direction with a short animation so that the continuous Accelerometer effect on the earth image does not make the earth movement jerky. You can also vary the duration of the animation and the amount of pixels to move to achieve better smoothness.

At this point, you should read the Flex 4 documentation for more information on Flex effects.

You can use Flash Builder to create mobile views for adding the media assets. Learn more on Flex Mobile Views and Navigators. You can drag and drop images on the stage using the design view.

You need to embed the images for the effects to work.

After obtaining the Accelerometer inputs, you can choose to calculate the distance between the Black Hole image and the earth’s image. If the center points of both the images collide, raise an event to handle the collision. In our game, we increase the score. You can use the same concept to decrease the score when the earth hits any other rigid body apart from the black hole. The game play involves steering the earth to the black hole by carefully avoiding any stationary or moving objects.

I have built this simple game that will enable you to:

  • Create game levels. In this game, each View is a level.
  • Build ActionScript game engines. You can view and modify the sample code pertaining to health, score, and HUD management.
  • Understand and handle timers. Game timers control the duration of the game play. Excessive usage of timers will affect the game’s performance. Be warned!
  • Persist game data. You can serialize the game objects to the application storage directory. The sample game stores high scores for each level and supports auto saving.

Getting Started

  1. Before you begin, download and install Flash Builder Burrito.
  2. Download the Black Hole Flash Builder Project. Extract the archive to get the BlackHole.fxp file.
  3. Click File > Import Flash Builder Project and select BlackHole.fxp
  4. To run the sample game, select Run > Run. For the launch method, select ‘On device’ and click Run. Make sure that your Android device is connected to your computer through USB.

Also, in the sample game, you can drag and drop the earth in to the black hole if you get tired of using the Accelerometer. This test game is also available in the Android Market as ‘Black Hole’.

Happy Gaming!

Accessing the StageWebView object

Recently, for one of my articles on StageWebView, a reader has commented that he gets an error while calling a stage object through a preperationComplete event. I must say that while preparing the article, I never thought about that kind of a scenario. This blog entry is to explain how to sort this issue out.
This was the example that I provided:

==
<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"  
        xmlns:s="library://ns.adobe.com/flex/spark"  
        xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" creationComplete="init()"> 
 <fx:Declarations> 
  <!-- Place non-visual elements (e.g., services, value objects) here --> 
 </fx:Declarations> 
<fx:Script>
 <![CDATA[
  import flash.geom.Rectangle; 
  import flash.media.StageWebView; 
  import flash.net.*; 
  import flash.net.URLRequest; 
  public var webView:StageWebView = new StageWebView(); 
  public function init():void 
  { 
   webView.stage = this.stage;
   webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
   webView.loadURL("http://www.bbc.com");
  }  
 ]]>
</fx:Script>  

</s:WindowedApplication>

===
Compiling the code generates the following error: “Cannot access a property or method of a null object reference.” When a creationComplete event fires, the stage is still null. It is not initialized yet. The stage property acquires a value only after the display object has been added to the stage’s display list. Here, we don’t have any display object added to the stage. If you are accessing the function through another component, say a button, you don’t find this issue.

One solution is to wait for the addedToStage event. This event gets fired whenever the stage is initialized and obtains a value. The issue I explained above has nothing to do with the StageWebView api. See the code below. Using the creationComplete event, I called in the init() function which listens for the addedToStage event. After it’s fired, the target function accesses the stage object.

The following code works without any issues:

==
<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"  
        xmlns:s="library://ns.adobe.com/flex/spark"  
        xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" creationComplete="init()"> 
 <fx:Declarations> 
  <!-- Place non-visual elements (e.g., services, value objects) here --> 
 </fx:Declarations> 
<fx:Script>
 <![CDATA[
  import flash.geom.Rectangle; 
  import flash.media.StageWebView; 
  import flash.net.*; 
  import flash.net.URLRequest; 
  public var webView:StageWebView = new StageWebView(); 
  public function init():void 
  { 
   this.addEventListener(Event.ADDED_TO_STAGE , handleLoad );
  } 
  public function handleLoad(e:Event):void
  {
   webView.stage = this.stage;
   webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
   webView.loadURL("http://www.bbc.com");        
  }
 ]]>
</fx:Script>  

</s:WindowedApplication>
==

If you have got ideas for RIA-related technologies

… we, at Adobe, are listening!

Ideas Home is a portal run by Adobe Labs. You can suggest ideas around existing Adobe technologies or new technologies. Besides other Adobe technologies you can submit ideas for AIR, Flash Builder, Flash Catalyst, Flash Professional, and Flex SDK. All you need is a free login on Adobe.com. This is another great way to interact with the community including the Adobe team, power-users, and innovators.

You can we well,

  • view submitted ideas.
  • search to see if an idea is already submitted or not.
  • promote (or demote) submitted ideas.
  • engage in a discussion on a particular idea.
  • review only the most popular of the ideas, based on votes by other users.
  • access ideas falling in a particular category, via the tag cloud.

Needless to say any and all ideas are welcome.

So just signup/signin at Adobe.com and play a role in defining the future! Please note that the portal is not for collecting bugs in existing products/technologies.