Archive for November, 2010

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.

URI Handlers in AIR for Android: Phone Calls, Email, Text Messages, Maps, Market, and URLs

The code below demonstrates five URI handlers that AIR for Android currently supports:

  • tel
  • sms
  • mailto
  • market
  • http and https

Invoking applications with URIs is pretty straightforward except in the case of maps. Although AIR does not support the Android "geo" URI intent (it’s not fully supported by Google yet, apparently), the code below demonstrates a very good work-around. Rather than explicitly opening the Maps application with a URI, you can just go to maps.google.com, and Android will ask users if they want to open the URL in the browser or in the Maps application. Simple and effective.

<?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[

      import flash.sensors.Geolocation;

      private var geo:Geolocation;

      private function onCallAdobe():void
      {
        navigateToURL(new URLRequest("tel:4085366000"));
      }

      private function onTextAdobe():void
      {
        navigateToURL(new URLRequest("sms:4085366000"));
      }

      private function onEmailChristian():void
      {
        navigateToURL(new URLRequest("mailto:christian.cantrell@adobe.com?subject=AIR%20Rocks"));
      }

      private function onSearchMarket():void
      {
        navigateToURL(new URLRequest("market://search?q=iReverse"));
      }

      private function onChristiansBlog():void
      {
        navigateToURL(new URLRequest("http://blogs.adobe.com/cantrell"));
      }

      private function onGetCurrentLocation():void
      {
        this.geo = new Geolocation();
        this.geo.addEventListener(GeolocationEvent.UPDATE, onLocationUpdate);
      }

      private function onLocationUpdate(e:GeolocationEvent):void
      {
        this.geo.removeEventListener(GeolocationEvent.UPDATE, onLocationUpdate);
        var long:Number = e.longitude;
        var lat:Number = e.latitude;
        navigateToURL(new URLRequest("http://maps.google.com/?q="+String(lat)+","+String(long)));
      }
    ]]>
  </fx:Script>

  <s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" gap="20">
    <s:Button label="Call Adobe" click="onCallAdobe();"/>
    <s:Button label="Text Adobe" click="onTextAdobe();"/>
    <s:Button label="Email Christian" click="onEmailChristian();"/>
    <s:Button label="Search the Market" click="onSearchMarket();"/>
    <s:Button label="Read Christian's Blog" click="onChristiansBlog();"/>
    <s:Button label="Map Your Current Location" click="onGetCurrentLocation();"/>
  </s:VGroup>
</s:View>

My MAX 2010 Presentation is Online: How to Build Adobe AIR Apps for the iPhone and Android

My MAX 2010 presentation is now online. It’s about an hour long, and it covers the following:

  • Some philosophy around the proliferation of devices.
  • Why write for multiple screens?
  • Why writing for multiple screens is a challenge.
  • How to write a cross-screen applications (tips and tricks).
  • Cross-screen development workflows.
  • The future of cross-screen development.

There are tons of other great MAX sessions available online, as well, so go have a look.

Update: My slides are now available as a PDF, as well.