Adobe AIR Questions Wiki



Good news! Now, there is a wiki to get help on all your AIR-related questions.

See Adobe AIR Questions Wiki.

Use this Wiki to find answers to all your AIR problems. You can also contribute to the Wiki by either posting new questions or by adding more information to the existing solutions posted by the community. All contributions are encouraged.

If you’re looking for an answer to a technical question not listed in this Wiki, post your question to the AIR or Flash forums. You may also want to check out the AIR Support page.


ActionScript Tip: Splicing and Slicing



Array.splice() and Array.slice() are 2 powerful functions that you can use to manipulate the content of your List component. If used effectively, you can achieve a List filtering effect without using any other complex filtering techniques.

First off, what happens when you do this:

var myArray1:Array = new Array();
var myArray2:Array = new Array();

//Push an object to Array1
myArray1.push(new String("ALL"));

//Assign Array1 content to Array2
myArray2 = myArray1;

//Push another object to Array1
myArray1.push(new String("Only for Array1"));

 

Whatever objects you add to myArray1, automatically gets into myArray2 because of the Array assignment. In your application if you want the 2 arrays two share the content initially but not bound together at a later stage, you need to ‘slice’ the Array:

//Do not do this
myArray2 = myArray1;

//Do this to create a copy of myArray1
myArray2 = myArray1.slice(0);

 

Splicing, is another technique that will allow you to modify the content of the array without creating a copy of it.

//Remove the first element of myArray1 and assign the content to myArray2.
//When you modify myArray1, myArray2 will also change.

myArray2 = myArray1.splice(0,1);

 

You can follow these Array manipulation techniques in your application to create List components with filters, which will bind different arrays to the list at run time.

Here’s an application I built for the Android market, a simple action items tracking system using associative arrays and filters:

See also:



Design Considerations for Building Mobile Applications



Mobile computing has grown hugely popular over the last several years. The growing capabilities of the mobile phones has meant that the phone has become an appealing and persuasive platform for application developers to build both consumer and enterprise applications. Today, developers have started building applications that are ubiquitous and multiscreen-capable. However, the trick is to build a mobile application that will work on phones having different software and hardware capabilities. How do you achieve this? While you have no control over the phone’s platform segmentation, you can build mobile applications following certain considerations, widely recognized as the ‘best practices’ for building mobile applications.

Here are some design considerations for building mobile applications:

  1. Decide on the application type. It is the high order bit! Do you want to build a native application or a Flash/AIR-based application? Whatever you decide, understand that it is very expensive to rollback this decision. Developing native application has its own benefits and shortcomings. For very trivial application, go native. For complex applications, go Flash.
  2. Don’t worry about the phone’s platform fragmentation. For any open system to proliferate, fragmentation is important. Do not worry if your application does not work well on some devices. Find out other ways to filter out your application from those devices.
  3. Storage. There is no such thing as a 1 TB SD card! Use the phone’s data memory judiciously.
  4. Connection and bandwidth. Understand that the users pay for every byte transmitted and received. Before you open up a data connection or before you start downloading that large piece of data from a service, warn the user.
  5. Tombstoning. Handle system interrupts effectively. When your application is pushed to the background, pause those game timers, disable those animations, and save the state of your application.
  6. Memory usage. Nothing much can go wrong here if you design your application well. Never get overwhelmed by the memory usage statistics reported by the phones. For AIR-based applications, the memory usage may also include the AIR Runtime footprint. Don’t panic if the memory usage for your AIR application is around 50 MB.
  7. Battery. Battery consumption is very important. If your application utilizes the hardware sensors, you may need to build an appropriate model to conserve the battery. For instance, if you are building a location-aware application, do not query the GPS sensor every few milliseconds. Also, implement Tombstoning to give those sensors a break!
  8. Graphics. With all those friendly IDEs and tools, anyone can build a mobile application. What differentiates your application from the ‘other’ applications is UI responsiveness and graphics. Spend more time in formulating the UI.
  9. Formats and Sync. If your mobile application connects to external services, understand the protocols and syncing methods. Will your application interact with a SOAP/REST-based service or an AMF endpoint? Also, understand the synchronous and asynchronous way of interacting with the remote services. How will you handle push messages? How will you sync the local data store with the remote store?
  10. Cloud. When you are building a mobile application that connects to the cloud, you need to understand the semantics of the cloud. The response returned from the cloud varies and it is your application’s responsibility to handle such disparities. For instance, in your application, if you are using UTF methods to read and write strings returned from a web service, your application may crash if the web service starts returning long strings. The cloud need not understand the semantics of the client but the client should understand the semantics of the cloud! Also, the cloud provides resilience, elasticity, and performance for your mobile applications. Always build applications that are controlled by the cloud.
  11. Finally, do not just build applications. Build solutions.



Tombstoning in AIR-Mobile Applications



When you are building AIR-based mobile applications, you can handle Tombstoning in your application in a very elegant way. Tombstoning is a technique by which you freeze the state of your application whenever a system interrupt occurs.  For instance, when the user receives a cellular call, your application will become invisible and may get deactivated or pushed to the background. During that time, there is no point in running those game timers or animations. You can suspend all CPU/GPU intensive activities and resume all of them when the application gets activated again.

Tombstoning is an absolutely required feature that your application should support to provide a less frustrating experience to the users.

In AIR-based mobile applications, handling Tombstoning is absolutely simple.

When you are creating the mobile view, just remember to handle the view-activate and view-deactivate events:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"  
            title="HomeView" 
            viewDeactivate="handleDeactivate()" 
            viewActivate="handleActivate()">
    
    <fx:Script>
        <![CDATA[

            protected function handleDeactivate():void
            {
                   //Pause game timers
                   //Suspend animations
            }

            protected function handleActivate():void
            {
                   //Restart game timers
                   //Resume animations
            }

        ]]>
    </fx:Script>
</s:View>

You can also use these techniques to gracefully shutdown your application as the deactivate event is called on the View when the user taps the back key. Note: Tombstoning will not work if you are building AIR applications with 2.5 or lower namespace.


Garroter, a Hangman clone for Android



I’ve built an AIR-based connected mobile application, ‘Garroter’ for Android devices. Garroter is just like any other classic Hangman game. I’ve built this game to illustrate the idea of making your mobile applications services-aware. Your AIR-based application can have the capability of performing a live update by connecting with external web services.

Garroter’s built-in dictionary can be updated over HTTP. In this way, the game data can be updated without pushing the updated application to the market. There will be a clear demarcation between your application and your application’s data.

Try the application ‘Garroter‘ in the Android Market.


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?


Creating Flex SDK from AIR SDK



It’s easy to make a Flex SDK from an AIR SDK for which you don’t have a corresponding Flex SDK. This is what you do:

1. Download AIR SDK.
2. Locate the existing Flex SDK.
For a default installation, it’s available in the C:\Program Files\Adobe\Adobe Flash Builder Version\sdks folder.
3. In this location, extract AIR SDK to a new folder .
4. Copy the contents of your existing Flex SDK and paste it to the folder where you have AIR SDK, WITHOUT over writing any of the files.
Flex SDK is ready. When you create a new project, use this as the SDK.


FutuRIA- Helping define the future of RIA



FutuRIA is an Adobe community focused on connecting like-minded enterprise technology professionals to share their experience and bring the future of Rich Internet Applications directly to you.

Welcome to FutuRIA

Welcome to FutuRIA

By registering as a community member you will have access to the following:

  • Win a Samsung Galaxy tablet: By registering at the launch at QCon you are automatically entered into a prize draw to win one of 3 Samsung Galaxy Tablets.
  • News: The pick of the latest industry events curated on your behalf so you need look no further for the hot tickets across Europe.
  • Inspiration: Bringing a showcase of talent, inspiration and success stories from web to desktop and mobile.
  • Tutorials: Unique and specialist training brought together for you.
  • Jobs: The latest industry opportunities across Europe in one place.
  • Profile: Create your own profile and express your individuality and very own inspirations.
  • Portfolio: Showcase your talents and promote your skills.
  • Message Center: Network with fellow community members.

Come join FutuRIA and be a part of the best.

Win a Samsung Galaxy tablet: By registering at the launch at QCon you are automatically entered into a prize draw to win one of 3 Samsung Galaxy Tablets.
News: The pick of the latest industry events curated on your behalf so you need look no further for the hot tickets across Europe.
Inspiration: Bringing a showcase of talent, inspiration and success stories from web to desktop and mobile.
Tutorials: Unique and specialist training brought together for you.
Jobs: The latest industry opportunities across Europe in one place.
Profile: Create your own profile and express your individuality and very own inspirations.
Portfolio: Showcase your talents and promote your skills.
Message Center: Network with fellow community members.



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!


AIR-Mobile Tip #1 Passing key-value pairs between views



This blog will start featuring tips and tricks for AIR-based application development on mobile devices. The tips are primarily for AIR and ActionScript developers who want to learn some tricks for quickly and effectively building applications for the mobile devices.

Tip: You can easily pass a key-value pair from one view to another view.

Here is a simple example:

MyView 1

<?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" title="Home">

        <fx:Script>

          <![CDATA[
          protected function button1_clickHandler(event:MouseEvent):void
          {
              navigator.pushView(views.MyView2,{userKey:"someValue"});
          }
          ]]>

        </fx:Script>
      <s:Button x="178" y="196" label="Button" click="button1_clickHandler(event)"/>
   </s:View>

In MyView1, we are passing a key-vale pair to MyView2 using the navigator.pushView method.

MyView 2

<?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" title="MyView" 
       viewActivate="view1_viewActivateHandler(event)" >

       <fx:Script>
          <![CDATA[
            import mx.events.FlexEvent;

            private var userValue:String;

            protected function view1_viewActivateHandler(event:FlexEvent):void
            {
                userValue = data.userKey;
                trace(userValue);
            }
          ]]>
      </fx:Script>
   </s:View>

In MyView2, we are receiving the key-value pair when the view gets activated.

Why would you need to pass key-value pairs between views? You can use this technique:

  • when you want to pass form values from one view to another.
  • when you want to pass user preferences.
  • when you want to route the view based on a key.
  • when you want to change the behavior of the view based on some keys. For instance, in a game, a view can read from the application storage directory and load the saved game or just start with a new game based on the values passed.

Apart from a key-value pair, you can also pass any untyped object from one view to another.


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>
==



Flash platform in the Hall of Fame of Front Line Awards



Front Line Awards is the annual ranking of the best tools enabling game development for professional video game creators. These are given by the Game Developer Magazine. Besides the annual awards, one inductee to the Front Line Awards Hall of Fame is also chosen for its outstanding contribution to the game development industry for five years or more. This year Adobe’s Flash platform is included in the Hall of Fame!

GameSutra article says, “The Front Line Awards Hall of Fame is reserved for those landmark tools that have served developers mightily over multiple iterations and multiple years, including past winners such as Microsoft’s DirectX, Adobe Photoshop, Epic’s Unreal Engine series, and Rad Game Tools’ Bink Video.”

The Hall of Fame description goes further praising the Flash platform thus: “The Flash platform’s speed, graphical prowess, and easy development language make it simple to start building games quickly. Because the Flash Professional IDE is also very extensible, it’s entirely possible to write custom panels, controls, and scripts to automate repetitive tasks during development. Combined with Adobe AIR, Flash can access most points of interest on the desktop, such as the file system.”

Also Photoshop CS5 won the Front Line Award in the Art tool category. Other finalists are mentioned on this page.

To know more about the awards and the criteria for selection visit this page.

Congratulations to the users and the development team at Adobe of Flash platform and Photoshop CS5. And of course Adobe AIR goes hand in hand with the Flash platform.


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.


Adding mobile profiles in Flash Builder Burrito



Adobe Flash Builder “Burrito” allows you to quickly debug your mobile applications on an integrated emulator for desktops. Mobile profiles have been pre-configured for most of the supported devices. In case, if you would like to add a custom device to the profile, perform the following tasks:

  1. Right-click your AIR application.
  2. Select Run As > Run Configurations…
  3. Select your mobile application under the Mobile Application tree node.
  4. In the Main tab, in the Launch method section, Click Configure.
  5. A Preferences (Filtered) window will appear. Click Add and provide the resolution of your mobile device.

Here, we have added the Samsung Galaxy S (I9000) international version to the list. Also, you can directly run the application on your USB-connected mobile devices by selecting the On device: option under the Launch method: section.


Flash Player 10.2 Beta



We hope you did not miss the Flash player 10.2 beta release, for Windows, Mac, and Linux, last week. In case you did, get quickly started here.

What’s the big deal?

Flash player reaches almost every device being used in the world. You can deliver or consume high quality videos smoothly, and across all devices like never before.

A new API (Stage Video) allows for playback of high-resolution video across all platforms, with stunningly high performance. Before you think twice, watch this video of a demo at Adobe MAX 2010. For you this means, your video plays smoothly across browsers, platforms, and devices. The user-experience will be great because of low CPU consumption.

Flash player comes with support for full screen playback with multiple monitors. For you this means, across two different displays you can play full-screen video and work, simultaneously.

Support for custom mouse cursors means that developers can get creative and design their own cursors. Needless to mention how it helps in customizations and enhancing the user experience.

Quick Links

So what’s holding you back? Just follow these quick links and get developing!

  • Download it from Adobe labs here.
  • Discuss the release in the forum here.
  • Submit bugs here. If you encounter one, you belong to the rare class of users :—)



Tour de Mobile Flex



Tour de Flex is now available on Android!

You  can start building Flex applications for mobile devices with the Flex Hero prerelease. To learn the basics of developing cool applications for your mobile devices, use the Tour de Mobile Flex from the Android Market. Tour de Mobile Flex has been created using Flex Hero and AIR for Android. Try this application today. This is a great way to explore the capabilities of Adobe AIR and Flex on mobile devices. Get it from the Android Market by searching for “Tour de Mobile Flex”!

Guess what? You can try running Tour de Mobile Flex on your Blackberry Playbook!


Android Market filters



Android Market uses filter restrictions to determine whether to show your application to a user who is browsing or searching for applications on a given device. A filtered application may not be visible on all Android devices.

When you publish your AIR-based applications, you get the Android Market filter notification indicating that your application will be available for download only on specific devices. In the figure shown above, the Android Market filtering notification denotes that the application is only available for touch-based Android devices having an ARMv7-A processor.


Android Memory Issues



In Android, the AIR runtime is loaded as part of the application itself and has the same privilege as the application. The AIR runtime is started as a separate process only in a very few cases. For instance, when invoking the File Open/Save dialog. However, if there are multiple AIR applications running, Android may manage a shared copy of the AIR runtime for all those applications.

Android automatically shuts down selected applications  when memory is low and when  memory is required by other applications that are ’visible’ to the user. Hence, your inactive AIR applications may get closed by the OS.

Use your device’s memory management settings to clear inactive processes before running multiple AIR applications.


Getting Started with AIR Development on Android



If you are an ActionScript developer, you can start building applications for Android using the AIR APIs. To get you quickly started, here are a few technical articles:

Happy learning!


AIR 2.5 SDK updated



The AIR 2.5 SDK has recently been updated.

It comes with a fix, which is mentioned thus, in the release note: “Fixed issue in previous AIR 2.5 SDK that prevented Flex-mojos plugins from working properly.”

There are a couple of new things in this SDK about which you can read here. The security improvements are mentioned here. There are some known issues for Desktop and Android too. You can read about them in the release notes here.

The SDK itself can be downloaded from the SDK download page.

Do share your feedback, in the comments section below.