Posts tagged "android"

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?

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.

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.

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.1 now available

Adobe has released AIR 2.5.1, for desktop and mobile operating systems. The version for Windows, Linux, and Mac can be found on Adobe’s Download Center and that for Android, on Android market.

This AIR release provides you with bug fixes, optimization for Gingerbread (latest Android version by Google), addresses compatibility issues, and other minor changes. Also AIR 2.5.1 is backward compatible. So apps which ask for AIR 2.5.1 to run, will work fine on Android 2.2. Developers are requested to update their apps to use 2.5.1, instead of 2.5.

If users upgrade to Gingerbread without upgrading to 2.5.1, the app will not load.

Find more details on Adobe AIR Team’s blog here. Please do leave your comments to let us know how you find it.

Creating an apk File Using FlashBuilder 4.0

Using FlashBuilder 4.0, you cannot create an apk file through the GUI elements. You need to use AIR SDK commands for accomplishing this. The steps for creating an apk file is provided below:

  (The bin directory refers to the bin directory in your latest AIR SDK. Do the following after you create an SWF file.)

1. In the application descriptor file, edit the supported profiles to <supportedProfiles>mobileDevice</supportedProfiles>.

2. Create a certificate file (.pfx file).

bin\adt -certificate -cn <any-name> 1024-RSA <certificate-file-name>.pfx <password>

3. Assign the certificate to the swf file.

bin\adt -package -storetype pkcs12 -keystore <certificate-file-name>.pfx -storepass <password> <air-application-name>.air <application-descriptor>.xml <swf-file-name>.swf

This command creates a digitally signed air application.

4. Create an apk file.

bin\adt -package -target apk-emulator -storetype pkcs12 –keystore <test_cert.pfx> <name-apk>.apk <application-descriptor>.xml <swf-file-name>.swf

This command creates a valid apk file that you can install in an emulator. You need to provide the password you set in step 3.

5. Install the apk file in the emulator.

<emulator-install-dir>\tools\adb install <apk-name>

InMarket-Android App Store

At the MAX conference, Adobe announced an online store for Android applications! InMarket as it is called will help developers expand the reach of their apps to a wider crowd and multiple Android app markets. Be it eBooks, tablets, smartphones, and special carrier Market apps, or stores across different device types from Acer, Intel, etc., the developers can now distribute and sell their applications far easily.

Upon publishing, Adobe and store partners will validate your application within ten days. Of course, Adobe manages the credit card processing, hosting, and marketing. For providing the backbone and services Adobe will split the sales revenue in 30/70 ratio with developers getting 70% of the money.

Get started with InMarket at Adobe Developer Connection here. Also right now Adobe is offering a coupon for a free code-signing certificate.

AIR for Android

Adobe AIR enables you to use a single development platform and reuse existing code to quickly build applications that run outside the browser, across multiple screens, devices and platforms. Now, AIR is coming to Android.  Really fast!

Sign up for the pre-release program to get access to the AIR for Android SDK and tools.

AIR 2.5 runtime is already available in the Android market.

The device requirements for running AIR applications are:

  • Android 2.2 (Froyo) or higher
  • ARMv7-A Processor
  • OpenGL ES2.0
  • H.264 & AAC H/W Decoders
  • 256 MB of RAM

For more information, read the Adobe AIR blog.