Posts tagged "ActionScript"

Remote control input handling in AIR for TV apps

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:

Remote control’s directional keypad key
ActionScript 3.0 constant
Up Keyboard.UP
Down Keyboard.DOWN
Left Keyboard.LEFT
Right Keyboard.RIGHT
OK or Select Keyboard.ENTER

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…

When to set Stage properties

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.

AIR for TV Stage property settings

In my last blog entry discussing a TV’s safe viewing area, I mentioned the Stage.stageWidth and Stage.stageHeight properties of a full-screen application on a TV with a 1080p screen resolution.  Let’s look a little more at how to set these and other Stage properties with regard to AIR for TV apps.

Stage.stageWidth and Stage.stageHeight

If you are writing a full-screen AIR for TV application for a specific device, go ahead and  hard-code Stage.stageWidth and Stage.stageHeight to the device’s screen resolution. However, to write a full-screen application that runs on multiple devices, use the Capabilities.screenResolutionX and Capabilities.screenResolutionY properties to set your Stage dimensions. For example:

stage.stageWidth = Capabilities.screenResolutionX;
stage.stageHeight = Capabilities.screenResolutionY;

Stage scale mode

Set Stage.scaleMode to StageScaleMode.NO_SCALE, and listen for stage resize events.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, layoutHandler);

This scale mode setting results in the following:

  • When the application’s window changes size, the stage contents maintain their defined size. The runtime performs no automatic layout or scaling. Also, the runtime dispatches the Stage class’s resize event. Therefore, you have full control over how to adjust the application’s contents when the application begins and when the application window resizes.
  • You can use the stageWidth and stageHeight properties of the Stage class to determine the actual pixel dimensions of the application’s window. Therefore, in full-screen applications, these properties correspond to the screenResolutionX and screenResolutionY properties of the Capabilities class.

Stage alignment

Set Stage.align to StageAlign.TOP_LEFT:

stage.align = StageAlign.TOP_LEFT;

This alignment places the 0,0 coordinate in the upper-left corner of the screen, which is convenient for content placement using ActionScript. Therefore, this alignment works nicely with StageScaleMode.NO_SCALE, since your application is in charge of layout.

Stage display state

Set Stage.displayState in a full-screen AIR for TV application to StageDisplayState.FULL_SCREEN_INTERACTIVE:

stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

This value sets the AIR application to expand the stage over the entire screen, with user input allowed.

Stage quality

You can set the Stage.quality property for an AIR for TV application to StageQuality.Best or StageQuality.High, specifying the rendering quality for all Stage objects. For example:

stage.quality = StageQuality.High;

The StageVideo article for you

If you are developing applications for AIR 2.5 for TV or for Flash Player 10.1 Beta for GoogleTV, be sure to visit this Adobe Developer Connection article to learn about using the StageVideo class:

Delivering video and content for the Flash Platform on TV

But if you are developing applications for Flash Player 10.2 Beta, see this article instead:

Getting started with stage video

The main difference is in the events that get dispatched. Flash Player 10.2 Beta provides the StageVideoAvailabilityEvent, the StageVideoEvent, and the VideoEvent.
AIR 2.5 for TV and Flash Player 10.1 Beta for GoogleTV dispatch only the StageVideoEvent.

Develop apps for Adobe Connect 8

Adobe Connect 8 has been announced and the documentation is live. In addition to learning what’s new in Adobe Connect 8, check out these tools for developers.  You can develop apps that call Adobe Connect web services, apps that live in Adobe Connect Share pods, and custom telephony adaptors.

Docs for Global Error Handling in Flash Player 10.1 and AIR 2

One of the most anticipated features of Flash Player 10.1/AIR 2 was global error handling. Global error handling lets you use one class to handle any uncaught errors in your code:

flash.events.UncaughtErrorEvent

Very, very handy. Description and code examples in the ActionScript 3.0 Reference:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/UncaughtErrorEvent.html

Integrate your Flash/Flex/AIR app with social media: Flash Platform Services developer docs

Flash/Flex/AIR developers: if you haven’t already, check out the Adobe Flash Platform Services. They can help you add social and collaborative capabilities to your applications or websites, while also making it easier to distribute, track and earn money from them.

As of now there are three services: Promotion, Social, and Collaboration. Here’s a little bit of information about each and links to the developer documentation.

Promotion Service offers both free and paid methods for promoting applications to more than 70 social networks and services, desktops, and (as of the recent 1.5 release) mobile devices. You can also track distribution of and user engagement with your applications, and earn money by hosting ads in them. Adding a Share menu to your application enables its viral distribution. Users can add your application to their social pages, mobile devices, or desktops through the Share menu. The Share menu can be added using the extensions to Flash Professional, Flex Builder 3, or Dreamweaver.

General information about the Promotion Service, including where to download extensions
Developer documentation

Social Service lets you integrate social networks such as Facebook, Twitter, and MySpace with your applications, increasing engagement with your apps and promoting them virally. You can integrate your application with multiple social networks using Facebook Connect, Sign-in with Twitter, and MySpaceID without writing separate integration code for each network.

The Social service consists of three parts:

  • An ActionScript 3.0 API, which can be implemented in Flash or Flex, and aggregates the different social network APIs.
  • Plug-and-play widgets that use the social API for login, share, invite, select friends and other commands.
  • Dashboard analytics for reviewing and optimizing your app’s social performance.

General information about the Social Service
Developer documentation


LiveCycle Collaboration Service lets developers add real-time collaboration and social capabilities to applications. Social games are a common example of this, but users increasingly expect real-time interactivity in areas such as online customer service, e-learning applications, etc.

General information about the Collaboration service
LiveCycle Collaboration Service Forum

Flash Player 10.1 and AIR 2 are live!

Flash Player 10.1 and AIR 2 are now available for download on adobe.com.

For more information about AIR, read the announcement on the AIR blog and check out the release notes for a list of new features.

For more information about Flash Player, read the announcement on the Flash Player blog.

The ActionScript 3.0 Reference for Flash Platform includes all the Flash Player 10.1 and AIR 2 APIs.

You can filter the ActionScript Reference to display APIs for specific runtimes:
runtime_filter.jpg

Download the Flash Player 10.1 and AIR 2 mobile runtimes from Adobe Labs.

Introducing the ActionScript 3.0 Reference for the Adobe Flash Platform

We’ve just released a beta version of something that we’re all very excited about – the ActionScript 3.0 Reference for the Adobe Flash Platform. What’s the big deal? It’s all the APIs and core AS3 language stuff in one place. Today, tomorrow, forever. One URL to bookmark. One destination for Flash Player, AIR, ColdFusion, LiveCycle, Flash Professional, and Flex APIs. In addition to that, the content is filterable. You select the APIs you want to see in the reference. You can select APIs by runtime, by product, and by versions.

This is our first beta so we’d appreciate your feedback, particularly in these areas:

  • What do you think of the new structure of the reference? Please compare the experience of accessing all of the products and runtimes in one spot against the experience of using the separate product-specific language references we have published to date.
  • Is the content filtering feature useful? Content filtering lets you see only the products, runtimes, and versions you are interested in.

You can send us your feedback by using the feedback link in the version pod (top right popup in the reference).

Thanks

The Adobe Flash Platform Documentation teams

Update on the Adobe TextLayout Framework

The TextLayout Framework API has had quite a few changes since it was released on Adobe Labs last November. And the documentation is being updated, as well, to reflect these changes. While these changes are still in progress, the TextLayout Framework overview has been updated and incorporated into the “Working with Text” chapter of Programming ActionScript 3.0. You can find instructions on how to access and review a PDF of that chapter on Francis Cheng’s blog.

The API reference is availabe as part of the Flex Gumbo API Documentation, which accepts comments. Look for the flashx.textLayout.* packages

We’d love to get any feedback you might have.

If you’d like to see what people are doing with the TextLayout Framework, check out the New York Times Reader 2.0 application, which is built with Adobe AIR.