Flash Platform Doc Team

Over the past year we’ve been out in the community listening to issues and gathering content. The results of our labors have been  links and code samples added to our help pages. While we feel this makes our content more dynamic, it doesn’t do much unless you know it there. So, in an effort to get  more eyes on all this great community content, we’re spicing up our pages in a couple of ways:

• Byline – This icon indicates a link to customer content. See the Enable persistence in a mobile application page for an example of this.
• Adobe recommends – This treatment includes a blurb and an image to help draw attention to the link. See the Displaying HTML content in mobile apps and Network Interfaces pages for examples of the “Adobe recommends” treatment.

And here’s one more design consideration for AIR for TV application development…

This one continues the discussion from the blog entry called Using Graphics Hardware Acceleration in AIR for TV Apps.

To perform the accelerated graphics operations, hardware accelerators use special graphics memory. If your
application uses all the graphics memory, the application runs more slowly because AIR for TV reverts to using
software for the graphics operations.

To manage your application’s use of graphics memory:

• When you are done using an image or other bitmap data, release its associated graphics memory. To do so, call the dispose() method of the bitmapData property of the Bitmap object. For example:

myBitmap.bitmapData.dispose();

Note: Releasing the reference to the BitmapData object does not immediately free the graphics memory. The runtime’s garbage collector eventually frees the graphics memory, but calling dispose() gives your application more control.

• Use PerfMaster Deluxe, an AIR application that Adobe provides, to better understand the impact of hardware graphics acceleration on your target device. This application shows the frames per second to execute various operations. Use PerfMaster Deluxe to compare different implementations of the same operation.  For example, compare moving a bitmap image versus moving a vector image. PerfMaster Deluxe is available with the Adobe® AIR® for TV MAX 2010 Hardware Developer Kit, and will soon be available at Flash Platform so you can use it with other devices, too.

And don’t forget: Do not keep bitmap objects, or any objects, on the display list when they are not visible. Whether software or hardware renders a display object, rendering it when it is not visible needlessly uses resources to render the object. If you have a good reason to hold onto a display object when it is not visible, remove the object from the display list. This best practice applies not only for AIR for TV apps, but AIR apps and Flash Player apps on all devices (mobile, desktop, tablet, and TVs).

Here’s another user interface design consideration for AIR for TV applications. (This and other tips will be incorporated soon into Adobe online documentation).

This tip considers that users of AIR for TV applications are typically seeking TV quality entertainment in a fun and relaxed environment. They are not necessarily knowledgeable about computers or technology.

Therefore, design AIR for TV applications with the following characteristics:

• Do not use technical terms.

 

• Avoid modal dialogs.  Modal dialogs confuse some users.

 

• Use friendly, informal instructions appropriate for a living room environment, not a work or technical environment.

 

• Use graphics that have the high production quality that TV watchers expect.

Here’s another design consideration for the user interface of AIR for TV applications. (This and other tips will be incorporated soon into Adobe online documentation).

Users of AIR for TV applications are in a “living room” environment. They are sitting across the room from the TV, some 10 feet away. The room is sometimes dark. They typically use a remote control device for input. More than one person can be using the application, sometimes together, sometimes serially.

Therefore, to design your user interface for usability on a TV, consider the following:

• Make the user interface elements large.This best practice might be obvious to many developers, but the temptation does exist to crowd the screen just because the screen has so much space.  Don’t give in to this temptation. When designing text, buttons, or any other user interface elements, consider that the user is sitting across the room. Make everything easy to see and read from, for example, 10 feet away. 
• Use good contrast to make the content easy to see and read from across the room.

 

• Make obvious which user interface element has the focus by making that element bright.  See the blog entry from March 8 about Managing Focus.

 

• Use motion only as necessary. For example, sliding from one screen to the next for continuity can work well. However, motion can be distracting if it does not help the user navigate or if it is not intrinsic to the application.

 

• Always provide an obvious way for the user to go back through the user interface.

And here is yet one more tip from soon-to-be-available-at-adobe.com documentation about AIR for TV application development.

AIR for TV devices provide hardware acceleration for 2D graphics operations. The device’s hardware graphics accelerators off-load the CPU to perform the following operations:

• Bitmap rendering
• Bitmap scaling
• Bitmap blending
• Solid rectangle filling

This hardware graphics acceleration means many graphics operations in an AIR for TV application can be high performing. Some of these operations include:

• Sliding transitions
• Scaling transitions
• Fading in and out
• Compositing multiple images with alpha

To get the performance benefits of hardware graphics acceleration for these types of operations, use one of the following techniques:

• Set the cacheAsBitmap property to true on MovieClip objects and other display objects that have content that is mostly unchanging. Then perform sliding transitions, fading transitions, and alpha blending on these objects.
• Use the cacheAsBitmapMatrix property on display objects you want to scale or translate (apply x and y repositioning).
  
  By using Matrix class operations for scaling and translation, the device’s hardware accelerators perform the operations. Alternatively, consider the scenario where you change the dimensions of a display object that has its cacheAsBitmap property set to true. When the dimensions change, the runtime’s software redraws the bitmap. Redrawing with software yields poorer performance than scaling with hardware acceleration by using a Matrix operation.
  
  For example, consider an application that displays an image that expands when an end user selects it. Use the Matrix scale operation multiple times to give the illusion of the image expanding. However, depending on the size of the original image and final image, the quality of the final image can be unacceptable. Therefore, reset the dimensions of the display object after the expanding operations are completed. Because cacheAsBitmap is true, the runtime software redraws the display object, but only once, and it renders a high-quality image.
  
  Note: Typically, AIR for TV devices do not support hardware-accelerated rotation and skewing. Therefore, if you specify rotation and skewing in the Matrix class, AIR for TV performs all the Matrix operations in the software. These software operations can have a detrimental impact to performance.
• Use the BitmapData class to create custom bitmap caching behavior.

Here’s another design consideration for AIR for TV applications. (This and other tips will be incorporated soon into Adobe online documentation).

Use the following tips to make an AIR for TV application as responsive as possible.

• Make the application’s initial SWF file as small as possible.
  
  In the initial SWF file, load only the necessary resources to start the application. For example, load only the application’s startup screen image.
  
  Although this recommendation is valid for desktop AIR applications, it is more important on AIR for TV devices. For example, AIR for TV devices do not have the equivalent processing power of desktop computers. Also, they store the application in flash memory, which is not as fast to access as hard disks on desktop computers.
• Make the application run at a frame rate of at least 20 frames per second.
  
  Design your graphics to achieve this goal. The complexity of your graphics operations can affect your frames per second. For tips on improving rendering performance, see Optimizing Performance for the Adobe Flash Platform.
  
  Note that the graphics hardware on AIR for TV devices typically updates the screen at a rate of 60 Hz or 120 Hz (60 or 120 times per second). The hardware scans the stage for updates at, for example, 30 frames per second or 60 frames per second for display on the 60-Hz or 120-Hz screen. However, whether the user experiences these higher frame rates depends on the complexity of the application’s graphics operations.
  
  Stay tuned for an upcoming blog entry discussing what the graphics hardware accelerators on AIR for TV devices do well, and how to take advantage of them.

• Update the screen within 100 – 200 milliseconds of user input.
  
  Users become impatient if updates take longer, often resulting in multiple keypresses.

Here’s another design consideration for AIR for TV applications. (This and other tips will be incorporated soon into Adobe online documentation).

When a user interface element has the focus in a desktop application, it is the target of user input events such as keyboard and mouse events. Furthermore, an application highlights the user interface element with the focus. Managing focus in an AIR for TV application is different from managing focus in a desktop application because:

• Desktop applications often use the tab key to change focus to the next user interface element. Using the tab key doesn’t apply to AIR for TV applications. Remote control devices do not typically have a tab key. Therefore, managing focus with the tabEnabled property of a DisplayObject like on the desktop does not apply.
• Desktop applications often expect the user to use the mouse to give focus to a user interface element.

Therefore, in your application, do the following:

• Add an event listener to the Stage that listens for Keyboard events such as
  KeyboardEvent.KEY_DOWN.
• Provide application logic to determine which user interface element to highlight to the end user. Be sure to highlight a user interface element when the application starts.

• Based on your application logic, dispatch the Keyboard event that the Stage received to the appropriate user interface element object.

  You can also use Stage.focus or Stage.assignFocus() to assign the focus to a user interface element. You can then add an event listener to that DisplayObject so that it receives keyboard events.

Choppy video. No one likes it. To stream video smoothly, start by tuning Flash Media Server for your situation. Are you streaming on-demand (recorded) or live video? If you’re streaming live, which is more important to you, scale (reaching as many people as possible) or latency (the time elapsed between the live event and when the viewer sees the live event)?

In the Configuration and Administration Guide, FMS engineers provide tuning recommendations for on-demand and live streaming:

• Configure the server to serve live media
• Configure the server to serve on-demand media

And here’s yet another design consideration for AIR for TV applications.  (This and other tips will be incorporated soon into Adobe online documentation).

Users typically interact with your AIR for TV application using a remote control. The good news is that the way you handle remote control key input is the same way you handle key input from a keyboard on a desktop application. Specifically, handle the event KeyboardEvent.KEY_DOWN.

The keys on the remote control map to ActionScript constants. For example, the keys on the directional keypad on a remote control map as follows:

AIR 2.5 added many other Keyboard constants to support remote control input. For a complete list, see the Keyboard class in the ActionScript 3.0 Reference for the Adobe Flash Platform.

To ensure your application works on as many devices as possible, Adobe recommends the following:

• Use only the directional keypad keys, if possible.

  Different remote control devices have different sets of keys. However, they typically always have the directional keypad keys.

  For example, a remote control for a Blu-ray player does not typically have a “channel up” and “channel down” key. Even keys for play, pause, and stop are not on all remote controls.

• Use the Menu and Info keys if the application needs more than the directional keypad keys.

  The Menu and Info keys are the next most common keys on remote controls.

• Consider the frequent usage of universal remote controls.

  Even if you are creating an application for a particular device, realize that many users do not use the remote control that comes with the device. Instead, they use a universal remote control. Also, users do not always program their universal remote control to match all the keys on the device’s remote control. Therefore, using only the most common keys is advisable.

• Make sure that the user can always escape a situation using one of the directional keypad keys.

  Sometimes your application has a good reason to use a key that is not one of the most common keys on remote controls. Providing an escape route with one of the directional keypad keys makes your application behave gracefully on all devices.

• Do not require mouse input.

  Obviously, a television doesn’t have a mouse. However, if you are converting desktop applications to run on televisions, make sure that you modify the application to not expect mouse input. These modifications include changes to event handling and changes to instructions to the user. For example, don’t overlook changing an application’s startup screen if it displays text that says “Click to start”.

For more information on key input handling, see Capturing keyboard input in the ActionScript 3.0 Developer’s Guide. Continue reading…

Speaking of setting AIR for TV Stage properties (which I was speaking of in my last blog entry) ….

I was looking at some sample AIR for TV applications written by a member of the AIR for TV engineering team, and was reminded of something interesting. He sets the stage properties in an event handler that handles the ADDED_TO_STAGE event.

Specifically, in the constructor for his main document class, he writes:

addEventListener(Event.ADDED_TO_STAGE, onStage);

Then in his onStage() event handler, he writes:

private function onStage(evt:Event):void

{

stage.align = StageAlign.TOP_LEFT;

stage.scaleMode = StageScaleMode.NO_SCALE;

//remove event listener

removeEventListener(Event.ADDED_TO_STAGE, onStage);

// And more initializations follow

}

It’s tempting, and seemingly logical, to put the Stage property initializations in the constructor of the main document class. But you should wait until you receive the ADDED_TO_STAGE event.  It is possible in some circumstances for the constructor of the main document class  to execute before the object has been added to the stage.  If that occurs, accessing the object’s stage property results in an exception.

For a display object that is not the main document class, this behavior is more obvious. You create a display object, and then you add it to the stage. Therefore, the object’s constructor always executes before you add the object to the stage.  So setting Stage properties in the constructor is certain to fail in these cases.  So that’s another good reason to always wait to access the stage property of any display object until after you’ve received the ADDED_TO_STAGE event.

This programming tip is not specific, by the way, to AIR for TV applications, but applies to any Flash Player or AIR app.