User manual MACROMEDIA FLASH 8 - DEVELOPING FLASH LITE 2.X APPLICATIONS

Developing Flash Lite 2.x Applications Trademarks 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flash Video Endocer, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev, and WebHelp are either registered trademarks or trademarks of Adobe Systems Incorporated and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Adobe Systems Incorporated or other entities and may be registered in certain jurisdictions including internationally. Third-Party Information This guide contains links to third-party websites that are not under the control of Adobe Systems Incorporated, and Adobe Systems Incorporated is not responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your own risk. Adobe Systems Incorporated provides these links only as a convenience, and the inclusion of the link does not imply that Adobe Systems Incorporated endorses or accepts any responsibility for the content on those thirdparty sites. SorensonTM SparkTM video compression and decompression technology licensed from Sorenson Media, Inc. Fraunhofer-IIS/Thomson Multimedia: MPEG Layer-3 audio compression technology licensed by Fraunhofer IIS and Thomson Multimedia (http://www.iis.fhg.de/amm/) Independent JPEG Group: This software is based in part on the work of the Independent JPEG Group. Nellymoser, Inc.: Speech compression and decompression technology licensed by Nellymoser, Inc. (http:www.nellymoser.com). Opera ® browser Copyright © 1995-2002 Opera Software ASA and its suppliers. All rights reserved. Macromedia Flash 8 video is powered by On2 TrueMotion video technology. © 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com. Visual SourceSafe is a registered trademark or trademark of Microsoft Corporation in the United States and/or other countries. Copyright © 2006 Adobe Systems Incorporated. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without written approval from Adobe Systems Incorporated. Notwithstanding the foregoing, the owner or authorized user of a valid copy of the software with which this manual was provided may print out one copy of this manual from an electronic version of this manual for the sole purpose of such owner or authorized user learning to use such software, provided that no part of this manual may be printed out, reproduced, distributed, resold, or transmitted for any other purposes, including, without limitation, commercial purposes, such as selling copies of this documentation or providing paid-for support services. Acknowledgments Project Management: Mary Leigh Burke Writing: Tim Statler Managing Editor: Rosana Francescato Editing: Linda Adler, Geta Carson, Mary Ferguson, Mary Kraemer Production Management: Adam Barnett, Kristin Conradi Localization: Luciano Arruda and Masayo Noda Media Design and Production: Yuriko Ando, Aaron Begley, Paul Benkman. John Francis, Geeta Karmarkar, Paul Rangel, Arena Reed, Mario Reynoso Special thanks to Lisa Friendly, Bonnie Loo, Erick Vera, the beta testers, and the entire Flash Lite engineering and QA teams. First Edition: January 2006 Adobe Systems Incorporated 601 Townsend St. San Francisco, CA 94103 Contents Chapter 1: Flash Lite 2.x Overview . . . . . . . . . . . . . . . . . . . . . . . . . . 5 About Flash Lite 2.0 features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Flash Lite 2.0 new features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 About components in Flash Lite 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Chapter 2: Creating Interactivity and Navigation . . . . . . . . . . . . . .11 About user interaction in Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Keys supported by Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Using default navigation in Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Handling key and button events (Flash Professional only) . . . . . . . . . 20 Chapter 3: Working with Text and Fonts . . . . . . . . . . . . . . . . . . . .33 About text in Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating and formatting text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using input text fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Font rendering methods in Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . Text field example application (Flash Professional only). . . . . . . . . . . Creating scrolling text (Flash Professional only) . . . . . . . . . . . . . . . . . . 33 34 35 38 42 44 Chapter 4: Working with Sound, Video, and Images . . . . . . . . . .47 About sound in Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Using device sound (Flash Professional only) . . . . . . . . . . . . . . . . . . . . 48 Using native Flash sounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Using device video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Loading external images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Chapter 5: Optimizing Content for Performance and Memory . . 71 Performance optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Device speed and frames per second . . . . . . . . . . . . . . . . . . . . . . . . . . . .75 Optimizing ActionScript performance . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 3 Chapter 6: Testing Flash Lite Content (Flash Professional Only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Overview of Flash Lite testing features (Flash Professional only) . . . 81 Testing features not supported by the Flash Lite emulator . . . . . . . . . 84 Using the Flash Lite emulator (Flash Professional only). . . . . . . . . . . . 84 Flash Lite error and warning messages (Flash Professional only) . . . 92 Selecting test devices and Flash Lite content type (Flash Professional only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Flash Lite content types (Flash Professional only) . . . . . . . . . . . . . . . . 97 Flash Lite platform capabilities (Flash Professional only) . . . . . . . . . .101 About playing a device video in the emulator . . . . . . . . . . . . . . . . . . . . 106 Appendix A: Warning and Error Messages (Flash Professional Only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Flash Lite emulator error and information messages (Flash Professional only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117 4 Contents CHAPTER 1 Flash Lite 2.x Overview Macromedia Flash Lite 2.0 is a version of Flash Player designed for devices. Flash Lite 2.0 is based on Flash Player 7 and supports most--but not all--features in Flash Player 7. Flash Lite 2.0 also includes features specific to mobile development that are not available in Flash Player 7. For example, in Flash Lite 2.0 you can load device-specific media types (images, sounds, video) that aren't natively supported by Flash Lite. Flash Lite 2.0 also features device integration features, such as the ability to make phone calls and send text messages, among others. This chapter provides an overview of the new features in Flash Lite 2.0, and also discusses those features in Flash Player 7 that Flash Lite 2.0 doesn't support. This chapter contains the following topics: About Flash Lite 2.0 features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Flash Lite 2.0 new features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 About components in Flash Lite 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1 About Flash Lite 2.0 features This section lists new features in Flash Lite 2.0, as well as those features available in Flash Player 7 that are not supported by Flash Lite 2.0. Flash Lite 2.0 includes the following new features, which are described more fully under "Flash Lite 2.0 new features" on page 6. ActionScript 2.0 Device video playback Local, persistent data storage (Flash Lite shared objects) Support for loading device-specific sound and image formats New system capabilities information Support for additional device keys, including QWERTY keyboard support and support for up to 11 soft keys Rich text formatting (partial support) 5 Ability to control backlight duration and set custom focus rectangle color Support for ActionScript 2.0, which lets you use advanced programming techniques including classes, interfaces, and strict data typing Synchronized device sound XML processing support Several ActionScript classes available in Flash Player 7 are unsupported or partially supported in Flash Lite 2.0. For more information about available ActionScript, see Introduction to Flash Lite ActionScript 2.x. Socket communication using the XMLSocket class Support for communication with Macromedia Flash Media Server Remote shared objects (local shared objects are partially supported) Native support for Flash Video (FLV) playback Support for Flash Application Protocol (the binary data communication protocol used by Flash Remoting) Cascading Style Sheet (CSS) formatting with text fields Masking with device fonts Bitmap smoothing while rendering at high-quality The following features in Flash Player 7 are not available in Flash Lite 2.0: Flash Lite 2.0 new features The previous versions of Flash Lite (Flash Lite 1.0 and Flash Lite 1.1) are based on Flash Player 4. Flash Lite 2.0 is based on Flash Player 7 and supports most of the features available in that version of Flash Player--including XML processing and ActionScript 2.0. Flash Lite 2.0 also provides several features not available in Flash Player 7 that are designed for mobile applications. The rest of this section describes the new features in Flash Lite 2.0. Flash Lite 2.0 ActionScript Flash Lite 2.0 ActionScript is the scripting language used in Flash Lite 2.0 applications. It shares some, but not all, of the ActionScript used in Flash Player 7. Flash Lite 2.0 also includes several ActionScript additions and extensions that let you, for example, get information about the device, make phone calls, or control the backlight duration. 6 Flash Lite 2.x Overview You can use ActionScript 2.0 or ActionScript 1.0 syntax when you develop applications for Flash Lite 2.0. ActionScript 2.0 provides authoring support for classes, interfaces, and strict data typing. Using ActionScript 2.0 syntax lets the ActionScript compiler provide better debugging information, and also encourages better program design. For more information about learning Flash Lite 2.0 ActionScript, see the following books and topics: Introduction to Flash Lite 2.x ActionScript Flash Lite 2.x ActionScript Language Reference Learning ActionScript 2.0 in Using Flash Device video playback Flash Lite 2.0 can play video in any format that's supported natively by the target device. For example, some devices record and playback video in the 3GP video format. Others support AVI or MPEG video. During playback, Flash Lite passes the original video data to the device to decode and render the data directly to the screen. You can incorporate video in your application in any of the following ways: Bundle the original video data in the SWF file. Load an external video file from the device's memory card, or over the network. To control video playback in Flash Lite 2.0 you use the ActionScript Video object. First available in Flash Player 6, the Video object in Flash Lite 2.0 has additional methods for controlling video, as the Video.play() and Video.pause() methods. You can also use the System.capabilities.videoMIMETypes array to determine what video formats a device supports. For more information about the Video object and using video in Flash Lite, see "Using device video" on page 58. Loading device-specific sound and image formats In Flash Lite 2.0, you can load any image or sound file that's in a format supported by the device. To load external images, you use the loadMovie() global function, or the MovieClip.loadMovie() method. For example, if the device supports the PNG file format, then you could use the following code to load a PNG file from a web server into the movie clip instance image_mc: image_mc.loadMovie("http://www.macromedia.com/images/mobile.png"); Flash Lite 2.0 new features 7 To load external sounds, you use the Sound.loadSound() method. In Flash Lite 2.0, you can use this method to load any sound format that the device supports (for example, MIDI or SMAF). External device sounds must fully load into memory before they can play. As in Flash Lite 1.x, in Flash Lite 2.0 you can also play device sound that's bundled in the SWF file. For more information, see "Using bundled device sound" on page 48. For more information about loading external images and sounds, see the following topics: "Loading external images" on page 68 "Playing external device sounds" on page 53 Flash Lite shared objects Flash Lite shared objects lets you save data persistently to the user's device. For example, you might use a shared object to save information between application sessions, such as user preferences or game scores. You use the SharedObject class to read and write Flash Lite shared objects. For more information about using Flash Lite shared objects, see the SharedObject class in the Flash Lite 2.x ActionScript Language Reference. The Flash Lite 2.0 implementation of shared objects does not allow multiple SWF files to share the same data. Also, Flash Lite 2.0 does not support remote shared objects with Macromedia Flash Media Server. N OT E 8 Synchronized device sound In previous versions of Flash Lite you could only synchronize native Flash sound to animation in the timeline. But this was not possible with device sounds, which are played directly by the device, rather than natively by Flash Lite. In Flash Lite 2.0, you can synchronize device sound with the timeline using the new _forceframerate property. When this property is set to true, Flash Lite drops frames as necessary from animation to maintain the frame rate specified in the SWF file. For more information, see "About synchronizing device sounds with animation" on page 54 and the _forceframerate property. Flash Lite 2.x Overview New text features The following features related to text handling are new in Flash Lite 2.0: All text in Flash Lite 2.0 is Unicode based. Flash Lite 2.0 provides partial support for HTML formatting and the TextFormat ActionScript class. For more information about working with text fields in Flash Lite 2.0, see "Working with Text and Fonts" on page 33. Additional key support Flash Lite 2.0 provides additional support for device keys, including support for QWERTY keyboards, and up to 12 soft keys (including the standard left and right soft keys). About components in Flash Lite 2.0 The components that install with Flash 8 and Flash Professional 8 (for example, DataGrid and Accordion) were designed for use in Flash desktop applications. The memory requirements and processing power that they require typically prohibit their use in Flash Lite 2.0 applications. Macromedia recommends that you don't use the standard user interface components in your Flash Lite applications. About components in Flash Lite 2.0 9 10 Flash Lite 2.x Overview CHAPTER 2 Creating Interactivity and Navigation To interact with your Macromedia Flash Lite application, a user must be able to determine which object on the screen currently has focus, navigate among objects, and initiate an action by selecting an object or another key. While these basic principles are the same as for desktop applications, some of the functionality varies for mobile devices. This chapter contains the following topics: About user interaction in Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Keys supported by Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Using default navigation in Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Handling key and button events (Flash Professional only) . . . . . . . . . . . . . . . . . . . . . 20 2 About user interaction in Flash Lite Flash Lite supports navigation and user interaction through the device's keypad, or through a stylus or touch-screen interface on devices that provide one. The options available to your application vary depending on the target device and content type. For more information about content types, see "About Flash Lite content types" in Getting Started with Flash Lite 2.x. The simplest way to add key-based interactivity to a Flash Lite application is default navigation, which uses the device's four-way keypad like the arrow keys or the Tab and Shift+Tab keys in a desktop application. The user moves the focus to the desired object and then presses the select key. The application includes event handler code to respond to these button events. Default navigation in Flash Lite works with buttons, input text fields, and, optionally, movie clips; it is typically best for simple user interactions such as menus. For more information about default navigation, see "Using default navigation in Flash Lite" on page 13. Applications can also respond to arbitrary key press events that Flash Lite generates when a user presses a particular key. Event-based navigation allows you to create Flash Lite applications like games that have a complex user interaction model. For more information about events, see "Handling key and button events (Flash Professional only)" on page 20. 11 Keys supported by Flash Lite In addition to the alphanumeric keys available on standard telephones, most mobile devices feature a navigation keypad, which let users navigate and select items on the device screen, and two (or more) soft keys. A device's soft keys are multifunctional keys that use the screen to identify their purpose at any moment. A typical navigation keypad has four navigation keys (up, down, left, and right) and a select key (typically located at the center of the keypad). Different applications can use these keys in different ways. For example, a game might use the navigation keys to let the user move a character on the screen, and then use the select key to perform another action, such as make the character jump. The following images show the most common keys on a generic keypad and on an actual device: Left and right soft keys Navigation keypad Numeric, *, and # keys Not all devices and Flash Lite content types support all these keys. For example, devices that support two-way navigation don't support the left and right navigation keys (see "Default navigation modes" on page 14). Also, not all devices have access to the device's soft keys. Flash Lite supports the following keys on mobile devices: Description Numeric, *, # Five-way keypad Keys Availability 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, *, # All devices Select, up, and down Left and right All devices Devices that support four-way navigation only (see "Default navigation modes" on page 14) Devices that support the SetSoftKeys command Soft keys Left and right 12 Creating Interactivity and Navigation Description Keys SOFT3 - SOFT12 keys Availability Devices that have more than two soft keys Keyboard keys !, ", #, $, %, &, `, (, ), *, +, ,, -, ., Devices that have a QWERTY /, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, :, ;, keyboard <, +, >, ?, @, A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z, [, \, ], ^, _, `, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, {, |, }, ~, Backspace The following System.Capabilities properties allow you to determine the navigation and selection options available on a device: hasMappableSoftKeys softKeyCount has4WayKeyAS hasQWERTYKeyboard hasStylus hasMouse For more information about the System.Capabilites class, see the Flash Lite 2.x ActionScript Language Reference. Using default navigation in Flash Lite On desktop Flash applications, the Tab and Shift+Tab keys let users switch focus among objects on the screen. The arrow keys function in a similar way in some other applications. In Flash Lite, the navigation keys on the device's navigation keypad serve the same purpose as the arrow or Tab and Shift+Tab keys in a Flash desktop application. After the desired object has focus, the user can press the select key to trigger an action in the application. You define event handlers to respond when a button or movie clip is selected; for more information, see "Handling button events (Flash Professional only)" on page 21. Default navigation in Flash Lite works with buttons and input text fields. Movie clips are also included if their tabEnabled property is set to true, or if they have event handlers associated with them and their tabEnabled property is not set to false. When an input text field has focus and the user presses the select key, Flash Lite opens the device's generic text input dialog box, in which the user can enter text. For an example of using default navigation, see "Creating a simple menu using buttons and default navigation (Flash Professional only)" on page 23. Using default navigation in Flash Lite 13 Default navigation modes Flash Lite supports three modes of default navigation: two-way, four-way, and four-way with wraparound. Different devices and Flash Lite content types support different navigation modes. For information on determining the navigation mode for a specific device and content type, see "Flash Lite platform capabilities (Flash Professional only)" on page 101. Two-way navigation in Flash Lite is analogous to tab navigation in Flash desktop applications, where the Tab and Shift+Tab keys navigate among objects on the screen. The down navigation key on the device corresponds to the Tab key, and the up navigation key corresponds to the Shift+Tab key. The default tab order in two-way navigation is generally left-to-right and top-to-bottom. For example, the following image shows a three-by-three grid of Button objects in a Flash Lite application. The numbers above each button indicate the order in which each button's will get keypad focus as the user presses their device's down navigation key repeatedly. After the button in the bottom-right corner has received keypad focus, the focus "wraps around" to the top-left button the next time the user presses the down navigation key. Example tab order in two-way navigation You can customize the tab order in two-way navigation using the tabIndex property of the Button, MovieClip, and TextField objects. For more information, see "About controlling tab order in two-way navigation" on page 20. For an example of two-way navigation, see the sample file named 2_way_nav.fla, located in the Samples and Tutorials/Samples/Flash Lite 2.0/ folder in the Flash installation folder on your computer. 14 Creating Interactivity and Navigation Four-way navigation in Flash Lite is similar to using the arrow keys on a desktop computer's keyboard to navigate among objects on the screen. The device's up, down, left, and right navigation keys correspond to the four arrow keys on a computer's keyboard. Pressing a navigation key moves the keypad focus to the object located in that direction, if one exists. If no object exists in that direction, then the keypad focus does not change from the current object. The tabIndex property is not supported on devices that support four-way navigation, but tabEnabled and tabChildren are, which is different from how these properties work in Flash desktop applications. NO TE For an example that uses four-way navigation, see the sample file named 4_way_nav.fla located in the Samples and Tutorials/Samples/Flash Lite 2.0/ folder in the Flash installation folder on your computer. Four-way navigation with wraparound functions like a combination of standard four-way navigation and two-way navigation. Like standard four-way navigation described previously, users change keypad focus using the device's four-way navigation keys. The difference is that, similar to two-way navigation, keypad focus "wraps around" to the object on the opposite side of the screen. For example, in the image below, the button with the current keypad focus is located at the bottom-right corner of the screen. If the user presses the down navigation key, the next button to receive focus is located in the middle of the top row of buttons. Next button to receive focus after user presses down navigation key Button with current focus You can test the behavior of two-way and four-way navigation modes in the Flash Lite emulator using the samples file named 2-way.fla and 4-way.fla located in the /Samples and Tutorials/Samples/Flash Lite 2.0/ folder in the Flash installation folder on your computer. Each sample file consists of the same three-by-three grid of buttons, as discussed previously. The only difference between the sample files is that each FLA file is configured to target a combination of device and Flash Lite content type that supports the navigation mode (twoway or four-way). Using default navigation in Flash Lite 15 To use each sample file, open it in Flash and test it in the emulator (select Control > Test Movie). Click the arrow keys on the emulator's keypad (or press the arrow keys on your keyboard) to see how each navigation mode affects user navigation. f Array of buttons in sample file About the focus rectangle By default, Flash Lite draws a yellow rectangle around the button or input text field that has focus. Movie clips are also included if their tabEnabled property is set to true, or if they have event handlers associated with them and their tabEnabled property is not set to false. The focus rectangle lets the user know which object on the screen will respond when the user presses the device's select key. For example, the following image shows the focus rectangle drawn around a button that has the current keypad focus: Button with current focus and default focus rectangle For buttons and movie clips, the focus rectangle's bounding box is determined by the object's hit area--the invisible region that (in Flash desktop applications) defines the part of the button or movie clip that responds to mouse clicks. For input text fields, the focus rectangle's bounding box is determined by the text field's dimensions. You can customize the color of the focus rectangle or disable it. For more information, see "Customizing the focus rectangle" on page 18. 16 Creating Interactivity and Navigation Guidelines for using default navigation The following are guidelines and considerations for using default navigation in your Flash Lite applications. If you disable the default focus rectangle by setting _focusRect to false, be sure to provide an alternative focus indicator for your buttons, input text fields, and tab-enabled movie clips. For buttons, you can do this by adding a visual element to the button's "over" state--the part of a button object's timeline that's displayed when the button has focus. For an example of this technique, see the sample application discussed in "Creating a simple menu using buttons and default navigation (Flash Professional only)" on page 23. For input text fields, you can use the Selection object to determine when the text field has received focus and display the desired focus indicator. For an example of this, see the sample application discussed in "Controlling focus with ActionScript" on page 18. Have at least two objects (input text fields, buttons, tab-enabled movie clips, or a combination) on the screen at the same time. If the screen contains only one input text field, button, or tab-enabled movie clip, the user can't change the focus and may feel stuck in the user interface. If a screen in your application contains only a single button for user interaction, consider detecting a keypress event rather than using button events. For more information, see "Handling key and button events (Flash Professional only)" on page 20. When appropriate, consider using the Selection.setFocus() method to set the initial focus to a specific object on the screen. This can help guide the user through the interface and reduce the amount of key navigation they must perform. For example, suppose that a screen in your application contains an input text field. Normally, for the user to enter a value in the text field, they would first press a navigation key to give the text field focus, and then press the select key to open the text input dialog box. You could use the following ActionScript to automatically set the keypad focus to the input text field: Selection.setFocus(inputTxt); For more information about controlling focus with ActionScript, see "Controlling focus with ActionScript" on page 18. The alignment of objects on the screen is important with default navigation. When objects are offset from each other on the screen, the sequence in which they get focus may not be intuitive for your users. (You can prevent this by making objects consistent in size and aligning them vertically and horizontally as much as possible. With two-way navigation, you can also control the sequence using the tabIndex property; for more information, see "About controlling tab order in two-way navigation" on page 20. Using default navigation in Flash Lite 17 Customizing the focus rectangle The focus rectangle is a default yellow highlight that indicates which button or input text box is currently selected. Movie clips are also included if their tabEnabled property is set to true, or if they have event handlers associated with them and their tabEnabled property is not set to false. For more information, see "About the focus rectangle" on page 16. You can disable the default focus rectangle behavior by setting the global _focusRect property to false. You can also disable the focus rectangle for specific buttons or movie clips (see _focusrect (Button._focusrect property) and _focusrect (MovieClip._focusrect property)) in the Flash Lite 2.x ActionScript Language Reference. You can also change the color of the focus rectangle from the default yellow to any other color. To do this you use the SetFocusRectColor command, which takes RGB values as parameters. For example, the following code changes the color of the focus rectangle to red: fscommand2("SetFocusRectColor", 255, 0, 0); Controlling focus with ActionScript You can use the Selection ActionScript object to get and set the current keypad focus, or to be notified when an object receives or loses keypad focus. This is useful, for example, if you want to automatically set the focus to a specific button when your application first loads. Or you may want to be notified when a specific object on the screen has received (or lost) keypad focus so that you can update the screen accordingly. For example, the following code uses the Selection.setFocus() method to set focus to the button instance named login_btn: Selection.setFocus(login_btn); The Selection.onSetFocus event listener lets you determine when the keypad focus has changed. You can use this event listener, for example, to create a custom focus manager for input text fields, rather than use the default focus rectangle. The following procedure shows how to create a custom focus manager that changes the border color of the TextField object with focus. A completed version of this application named custom_input_focus.fla is located in the /Sample and Tutorials/Samples/Flash Lite 2.0/ folder in the Flash Professional 8 installation folder on your computer. To create a custom text input focus manager: 1. Create a new document from the Flash Lite 2.0 Generic document template that you created in "Creating a Flash Lite document template (Flash Professional only)" in Getting Started with Flash Lite 2.x, and save it as custom_input_focus.fla. Using the Text tool, create a text field on the Stage. 2. 18 Creating Interactivity and Navigation 3. With the text field still selected, in the Property inspector, select Input Text from the Text Type pop-up menu, type inputTxt_1 in the Instance Name text box, and select the Show Border Around Text option. In the same manner, create another input text field below the first one with the instance name of inputTxt_2 and select the Show Border Around Text option for the second text field. In the Timeline, select Frame 1 in the layer named ActionScript. Open the Actions panel (Window > Actions) and enter (or copy and paste) the following code: // Disable focus rect globally: _focusrect = false; // Create Selection listener object: var focusListener:Object = new Object (); // Define onSetFocus method: focusListener.onSetFocus = function (oldFocus, newFocus) { // Enable/disable selection indicator: if (newFocus instanceof TextField) { // Set border color of text field with new focus to red: newFocus.borderColor = 0xFF0000; } if (oldFocus != undefined && oldFocus instanceof TextField) { // Set border color of text field with old focus to black: oldFocus.borderColor = 0x000000; } }; // Add listener to Selection object: Selection.addListener (focusListener); // Set initial focus when application loads: Selection.setFocus (inputTxt_1); // Enable full-screen mode: fscommand2 ("FullScreen", true); 4. 5. 6. 7. 8. Save your changes and test the application in the emulator. Press the emulator's the down and up arrow keys to switch keypad focus between the two text fields. The text field with focus should have a red border, and the text field without focus should have a black border. Press the select key when a text field has focus to make the text input dialog box appear. Using default navigation in Flash Lite 19 About controlling tab order in two-way navigation Two-way navigation in Flash Lite is analogous to tab navigation in Flash, and therefore supports the tabIndex property that allows you to specifically set the tab order of buttons, movie clips, and input text fields. On devices that support four-way navigation, the tabIndex property is not supported, so it's not possible to set tab order using the tabIndex property for four-way navigation. To control tab order in two-way navigation, you assign each object's tabIndex property a number that specifies the object's order in the default navigation. For example, suppose that an application contains a button (my_button), a movie clip (my_movieclip), and an input text field (my_inputTxt). The following code establishes the tab order so that the button gets focus first, then the movie clip, and finally the input text field. my_button.tabIndex = 1; my_movieclip.tabEnabled = true; my_movieclip.tabIndex = 2; my_inputTxt.tabIndex = 3; Handling key and button events (Flash Professional only) Event handlers and event listeners specify how the application will respond to user- and system-generated occurrences. For example, when a button has focus and the user presses the select key, an onPress event is generated. In addition to using default navigation and responding to related events, a Flash Lite application can listen for and respond to keypress events. Not all devices and content types support all device keys. For example, on a device that supports two-way navigation (see "Default navigation modes" on page 14) Flash Lite doesn't generate keypress events for the left and right arrow keys. For a list of keys and description of their availability, see "Keys supported by Flash Lite" on page 12. This section contains the following topics: "Handling button events (Flash Professional only)" on page 21 "Creating a simple menu using buttons and default navigation (Flash Professional only)" on page 23 "Using a key listener to handle keypress events (Flash Professional only)" on page 28 "Using the soft keys (Flash Professional only)" on page 29 20 Creating Interactivity and Navigation