Understanding Pixel Density

While iOS devices have a smaller physical screen size compared to desktop monitors, they have a much higher pixel density. Pixel density is typically measured in pixels per inch (PPI) and indicates the amount of detail that can be shown on a screen. The higher the pixel density, the greater the detail that can be shown within a square inch. For example, while both the iPhone 3GS and iPhone 4 have the same physical screen size, the iPhone 4 has a superior pixel density, allowing it to display twice the number of horizontal and vertical pixels.

Pixel density can have a serious impact on your existing UI. Text may become illegible and users will typically find it difficult to interact with UI components such as buttons when using a smaller and more compact screen. Flash content designed to be viewed on a monitor will need to be re-designed for the screen resolutions of the iOS devices you decide to target. The pixel density of these devices should be a key consideration when doing this.

Whether you’re designing using an image editor such as Adobe Photoshop or authoring within Flash Professional, your desktop monitor’s lower pixel density can mislead you. Therefore it’s critical you frequently check your designs on target devices rather than relying solely on your monitor.

The easiest way to do this is to copy images to a device before viewing them at full-screen within its photo gallery. For this recipe however, we’ll write a very simple iOS app in Flash to let you view your artwork – it’s important you become comfortable editing content within Flash on a stage that looks physically larger than your target device’s screen. This recipe should help you with that.

This tutorial is a previously unreleased recipe from Flash iOS Apps Cookbook and supplements the content found in Chapter 4, Porting Flash Projects to iOS.
Flash iOS Apps Cookbook provides the recipes required to build native iOS apps using your existing knowledge of the Flash platform. Whether you want to create something new or simply convert an existing Flash project, the relevant steps and techniques are covered, helping you achieve your goal.

Getting Ready

An FLA and various graphics resources have been provided. Download this recipe’s accompanying source bundle and use it as a starting point.

Open chapter4/recipe8/recipe.fla into Flash Professional. The FLA may appear empty but its AIR for iOS settings have already been applied, saving you the time and effort when you eventually need to build and deploy the recipe to a device.

How to do it…

Four concept images have been provided for your use.

Select File | Import | Import to Library. From the Import to Library panel, browse to chapter4/recipe8/resources.
Select the following files: game.png, loading.png, menu.png and paused.png. Click Open. All four images will be loaded and imported into your library.
Create a keyframe for each image on Layer 1 of the timeline. Do this by selecting Insert | Timeline | Keyframe (F6) from the drop-down menu, three times.
Move to frame 1 and drag loading.png from the library onto the stage. Using the Properties panel, set the bitmap’s x and y positions to 0.
On frame 2, drag menu.png onto the stage and set its x and y positions to 0.
Drag, game.png to frame 3 and paused.png to frame 4. Position both at (0,0) on the stage.
Within the library, click on game.png, then hold Shift and click on paused.png to select all four bitmaps. Now right-click on one of the highlighted symbols and select Properties from the context menu.
From the Editing Properties for 4 Bitmaps dialog box, select Lossless (PNG/GIF) from the Compression field’s drop-down box. Click the panel’s OK button.
You now have four concept images laid out across your main timeline. Now all that’s needed is some ActionScript to allow you to move between the frames whenever the screen is tapped. Save the FLA.

Create a document class for your FLA. Name the class Main and add the following code to it:

package {
  
  import flash.display.MovieClip;
  import flash.events.MouseEvent;
  
  public class Main extends MovieClip {
        
    public function Main() {
      stop();
      stage.addEventListener(MouseEvent.CLICK,
        screenPressed);
    }
        
    private function screenPressed(e:MouseEvent):void {
      if(currentFrame == totalFrames)
      {
        gotoAndStop(1);
      }
      else
      {
        nextFrame();
      }
    }
  }
}

The above code is straightforward. The timeline is initially stopped on the first frame, with the playhead being moved on by one frame every time the stage receives a CLICK event. Once the end of the timeline is reached, the playhead is moved back to the start of the timeline, allowing the user to cycle through the images again.

Save the class and when prompted name the file Main.as.
Test you FLA using ADL (Control | Test Movie | in AIR Debug Launcher (Mobile)) to ensure there are no compiler errors. Finally publish your app for iOS.
The FLA will be compiled and a file named c4-r8.ipa will be created. Deploy the file to your device and test it.

How it works…

With the app you’ll be able to cycle through the images by tapping the screen. As you examine the images, compare their physical size on your device with the versions sitting on the stage within Flash Professional. It’s unlikely that they’ll match.

Depending on your monitor’s current screen resolution and pixel density you’ll typically find that the stage is larger than your iOS device’s physical screen. This is especially true when working with the Retina display found on iPhone 4, 4th generation iPod touch, and iPad 3.

To further illustrate the point, change your stage size to match the iPhone 4’s screen resolution of 640×960. Import chapter4/recipe8/resources/menu@2x.png and swap one of the existing bitmaps on the stage with it. menu@2x.png is an image specifically designed for the iPhone 4’s screen resolution. It will most likely look huge sitting on your stage, but when deployed to an iPhone 4 the image will fit exactly within the iPhone’s 3.5-inch diagonal screen.

There’s more…

Now let’s talk about some other pieces of general information that are relevant to this recipe.

Adding additional images to the example app

You can easily add additional images to this recipe’s example app. Simply import the images to your library; create a keyframe for each new image; and drag the images onto the stage. No code changes are required.

Information density

Closely related to pixel density is information density, which describes the compactness of a user interface in terms of the amount of information.

Given the reduced size of mobile phone screens, you should consider how much information you can realistically display legibly. In most circumstances it will be significantly less than a desktop version of your application, even if the screen resolution of the iOS device you’re targeting is greater than the pixel dimensions of your desktop version.

Remember, mobile devices are often used on the move and under varying lighting conditions making it difficult to identify important information. When porting existing Flash applications to iOS you should redesign your UI to convey only the most important information to the user. Try reducing the amount of explanatory text, simplifying labels and maximizing the space between UI elements.

Additional information can be found within Apple’s iOS Human Interface Guidelines at developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG.

Copying images to the photo gallery

One of the quickest ways to test your designs is to simply copy them onto an actual device using iTunes.

First, ensure that the images you’re copying match the device’s screen resolution. Connect your device to your computer via USB and when iTunes launches, select your device from the DEVICES section. Click the Photos tab within the iTunes browser. From this page, click the Sync Photos from checkbox and select the folder where your images live. Once you’re ready, click the Apply button and the images will be copied to your device.

Once copied, move to the Photos app on your device and view your images in full-screen.