Posts in Category "Mobile"

Accessing Compass Data With AIR 3

I just finished writing a simple compass application for AIR 3 that uses an ANE (AIR Native Extension) to get orientation data from the Android operating system. All the code (AIR application, Java native extension, and "glue" library code) is available on Github if you want to see how it works.

New Audio Capabilities in AIR 3

AIR 3 has two important new audio capabilities:

  1. Device speaker selection. Play audio through a phone’s speaker, or through its earpiece.
  2. Background audio playback on iOS. Keep audio playing in the background when a user switches away from your application, and even when the screen is switched off.

Device Speaker Selection

Toggling between a phone’s speaker and earpiece for playing audio is as easy as setting the audioPlaybackMode property on SoundMixer like this:

// Play audio through the speaker:
SoundMixer.audioPlaybackMode = AudioPlaybackMode.MEDIA;

// Play audio through the earpiece:
SoundMixer.audioPlaybackMode = AudioPlaybackMode.VOICE;

Background Audio

Background audio playback has always worked on Android because of the nature of the Android’s multi-tasking implementation. Starting with AIR 3, it works on iOS, as well. To allow audio to continue playing when your application is closed — and even when the device’s screen is turned off — add the following to your application descriptor:

<iPhone>
    <InfoAdditions>
        <![CDATA[
            <key>UIBackgroundModes</key>
            <array>
                <string>audio</string>
            </array>
        ]]>
    </InfoAdditions>
</iPhone>

I wrote a sample application that demonstrates both these concepts called DeviceSpeakerExample. The code is available on github, and/or you can download the Flash Builder project.

The 50×50 Icon Size for the iPad

If you’ve built iOS applications using AIR for iOS (also known as the Packager for iPhone in Flash Professional), you may have come across an inconsistency in icon sizes. According to the iOS Human Interface Guidelines, Apple says you need a 50×50 icon for iPad applications (for use in Spotlight search results), but AIR doesn’t support 50×50 icons. Instead, we support a 48×48 icon both on the desktop, and for the iPad. There are two reasons we stuck with the 48×48 icon size rather than 50×50:

  1. Apple trims a one pixel border from the icon in order to add a shadow, so the icon is really 48×48.
  2. Since we already support 48×48 icons for the desktop, and since Apple turns your 50×50 icon into a 48×48 icon anyway, we figured we should just stick with the 48×48 icon.

Unfortunately, there’s one problem: Apple is currently trimming the one-pixel border off the 48×48 icon, so your 48×48 icons are actually 46×46. The good news is that this is a known issue and we’re fixing it in a very cool way. Rather than supporting 50×50 icons, we’re planning to continue to support 48×48 icons, but we will add a one-pixel border around the icon for you which Apple will then trim off. That means you can design your 48×48 icons without having to worry about the fact that you are going to lose two pixels in both dimensions.

I can’t say when this fix will be out just yet, but I can confirm that it’s in the works.

The Importance of Setting a Background Color When Deploying to Mobile Devices

The video below demonstrates the importance of setting a background color when you deploy to devices which support orientation changes:


The code below shows how to use SWF metadata to set a background color and avoid the ugly white bars:

package
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    
    [SWF(frameRate="24", backgroundColor="#666666")]
    public class ReversiIphone extends Sprite
    {
        private var reversi:Reversi;
        public function ReversiIphone()
        { 
            super();
            this.stage.scaleMode = StageScaleMode.NO_SCALE;
            this.stage.align = StageAlign.TOP_LEFT;
            this.reversi = new Reversi(-1);
            this.addChild(this.reversi);
        } 
    }
}

How to Build an AIR Application for Both the iPhone and iPad

If you want to build an AIR application that targets both the iPhone and the iPad, it’s easy. Just follow these steps:

1. Make Sure Your Application Scales

First and foremost, make sure your application will scale properly. Tips and tricks for making your content scale across screens is a topic for another post, but avoid obvious pitfalls like using a background bitmap scaled only for the iPhone’s smaller screen. Assuming your application is designed to scale properly, read on.

2. Specify the UIDeviceFamily

In your application descriptor, add the following as a child of the application tag:

<iPhone>
    <InfoAdditions>
        <![CDATA[
            <key>UIDeviceFamily</key>
            <array>
                <string>1</string>
                <string>2</string>
            </array>
        ]]>
  </InfoAdditions>
</iPhone>

The “1” represents the iPhone and iPod touch, and the “2” represents the iPad. Including both means your IPA targets both classes of devices.

3. Include All Necessary Icons

Make sure you include all the necessary icon sizes:

  • 29×29
  • 48×48 (in place of the 50×50 that Apple requests)
  • 57×57
  • 72×72
  • 512×512 (for iTunes)

4. Include Multiple Default.png Files

In the root of your project, you will need multiple Default.png files to accommodate the two screen sizes, and to account for the fact that iPad applications can start up in landscape mode:

  • Default.png (for the iPhone and iPod touch)
  • Default-Portrait.png (for the iPad)
  • Default-Landscape.png (for the iPad)


That’s all you have to do. Your IPA is now ready for all iOS devices. All we need now is support for the retina display (coming soonish).

(For an example of a project that works on both the iPhone and the iPad, see ReversiIphone.)

Running iReverse on the BlackBerry PlayBook

After watching this excellent MAX session by Julian Dolce, I decided to see what it was like developing AIR applications for the BlackBerry PlayBook using the BlackBerry Tablet OS SDK. As it turns out, the experience is great. It’s very easy to get started, and everything worked as expected. I went from nothing to a fully configured development environment and a working application in just about an hour.


If you’re interested in getting started developing for the PlayBook using the BlackBerry Tablet OS SDK, I recommend the following:

Have fun, and remember that if you submit an application to BlackBerry App World and it gets accepted, RIM will send you a free PlayBook.

Porting an AIR Application from iPhone to Android

I recently decided to port my AIR Twitter client called TweetCards from iPhone to Android. The process primarily consisted of:

  • Resizing assets to compensate for the larger and higher resolution screen.
  • Changing the orientation of the application from portrait to landscape (to take advantage of the higher resolution screen).
  • Adding keyboard controls to take advantage of the D-pad on the Droid.

The entire process probably took about six hours tops. Below is a video of the end result.

Continue reading…

Installing an AIR Application on Android

Now that AIR and Flash for Android are in private beta, I thought I’d show the process of turning an AIR application into an Android app. The process is incredibly simple and fast, and the end result works great.

(Apologies for the shaky camera work — I had to film this one all by myself.)

Continue reading…

How to Take Screenshots on Android Devices

I’ve been playing around with Android recently, and I ran into a situation where I needed to take screenshots of applications running on the device (as opposed to on my desktop with the emulator). Most of the information I found on Google recommended that I install a third-party application, but I learned a quick and simple way to do it without having to install anything.

Assuming you have the Android SDK installed (which, if you’re doing development, you obviously do), simply:

  1. Connect your Android device (I’m using a Droid) via USB.
  2. Run android-sdk-mac_86/tools/ddms (hint: put the tools directory in your path to make your life much easier).
  3. Select the device in the Dalvik Debug Monitor.
  4. Type Control + s, or go to Device > Screen Capture.

Not quite as easy as taking screenshots on the iPhone (simply press the power button, then the menu button at the same time), but if you need the screenshot on your desktop rather than in your photo album on your phone, it’s a very efficient solution.

Free Flash Lite 1.1 Online Seminar

Bill Perry Jonathan Duran is going to be giving an free online seminar this Wednesday on the new mobile features in Flash 8. From the site:

Join the Macromedia Mobile and Devices product team for a live, 90 minute online seminar and learn how you can develop rich, engaging, and easy-to-use content using the new mobile authoring features in Flash Professional 8.

The morning slot is already filled, but there’s an evening slot (9:00PM – 10:30PM Eastern) that still has some openings. If you’re interested, better hurry.