GETTING STARTED WITH FLASH LITE 1.
© 2007 Adobe Systems Incorporated. All rights reserved. Getting Started with Flash® Lite™ 1.x If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license.
laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741.
Contents Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 What’s new in Flash Lite authoring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Guide to instructional media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Introduction This manual provides an introduction to Macromedia® Flash® Lite™ 1.x from Adobe and describes how to test your content using the Adobe® Device Central CS3 emulator, which is part of Adobe® Flash® CS3 Professional. The primary difference between using Flash Lite in Flash CS3 and in previous versions of Flash is that the Flash Lite emulator is now part of Device Central. See the Device Central documentation for more information.
Guide to instructional media The Flash Lite documentation package includes the following media to help you learn how to create Flash Lite applications: 8 Introduction ■ Getting Started with Flash Lite 1.x provides an overview of Flash Lite 1.x technology and developing Flash Lite content for mobile devices. It also includes a step-by-step tutorial for creating a Flash Lite 1.x application. ■ Developing Flash Lite 1.
Additional resources For the latest information on developing Flash Lite applications, plus advice from expert users, advanced topics, examples, tips, and other updates, see the Mobile and Devices Developer Center at www.adobe.com/ go/developer_flashlite. For TechNotes, documentation updates, and links to additional resources in the Flash Lite developer community, see the Adobe Flash Lite Support Center at www.adobe.com/go/support_flashlite.
Introduction
CHAPTER 1 Flash Lite Overview 1 This chapter contains the following topics: About Flash Lite technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Flash Lite 1.x availability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 About Flash Lite content types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Workflow for authoring Flash Lite applications. . . . . . . . . . . . . . . . 14 Flash Lite authoring features. . . . . . . . . . . . . . .
Text and fonts Flash Lite supports static, dynamic, and input text fields. You can use fonts that are available on the device or embed font data in your published SWF file. For more information about using text and fonts in Flash Lite, see Chapter 2, “Working with Text and Fonts” in Developing Flash Lite 1.x Applications. Flash Lite 1.0 and Flash Lite 1.1 both support device audio formats (such as MIDI or MFi). Flash Lite 1.1 also supports standard Flash audio.
that support Flash Lite include the Symbian Series 60-based devices from Nokia, Sendo, and Seimens, and the Symbian UIQ-based devices from Sony-Ericcson. As of this writing, all globally available devices support only the stand-alone Flash Lite player. The standalone player installs as a “top-level” application that a user can start from the device’s application menu (just like a text messaging application or a mobile web browser, for example).
Each Flash Lite content type, paired with a specific device, defines a specific set of Flash Lite features that are available to your application. For example, a Flash application that's running as a screen saver is not typically allowed to make network connections or download data. The Flash Lite testing features in Flash let you test against multiple devices and different Flash Lite content types.
The following figure illustrates the iterative development and testing process described above. Testing in the Adobe Device Central emulator Editing the FLA file in Adobe Flash CS3 Testing on a device Flash Lite authoring features This section discusses the features in Flash designed specifically for Flash Lite developers.
The Property inspector contains a section that provides information about your current device settings, as well as a button that lets you open the Device Settings dialog box. This button is active only when your document’s Version setting on the Flash tab of the Publish Setting dialog box is set to Flash Lite 1.0 or Flash Lite 1.1.
As the following figure shows, Flash Lite document templates are organized into several groups, including Global Handsets and Japanese Handsets. The name of each template in each group includes the target device name and screen size. The Global Handsets category contains templates for creating full-screen applications for the stand-alone Flash Lite 1.1 player on Series 60 and UIQ platforms. The Japanese Handsets category contains templates for creating content for devices available in the Japanese market.
Hello World Flash Lite application In this section, you create a simple Flash Lite application and test it in the Adobe Device Central emulator. The purpose of this tutorial is to acquaint you with the mobile authoring and testing features in Adobe Flash CS3 Professional as well as the general workflow for creating Flash Lite content. For a more complete sample application, see Chapter 2, “Creating a Flash Lite Application,” on page 21.
6. In the Tools panel, select the Text tool and drag to create a text box on the Stage. Type Hello, world! (or other text) in the text box. 7. Select Control > Test Movie to export your application to Adobe Device Central and view your application in the Adobe Device Central emulator. Note: During testing in Device Central, you can change the device and content type to see your application on a different platform.
About the stand-alone Flash Lite player The stand-alone Flash Lite 1.1 player is an application that allows you to open and view SWF files that reside on your device’s memory card, that you browse to in your device’s mobile web browser, or that you receive in your device’s messaging in-box over Bluetooth® wireless technology or an infrared connection.
CHAPTER 2 Creating a Flash Lite Application 2 In this section, you’ll develop an Adobe Flash Lite application that promotes a fictional restaurant called Café Townsend. Users can view a list of specials at the restaurant and call the restaurant to make reservations. This chapter contains the following topics: Café application overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Viewing the completed application . . . . . . . . . . . . . . . . . . . . . . . . . .
If the user selects the Specials menu option, a screen for navigating a list of today’s specials appears. To browse images and descriptions of the specials, the user presses the device’s Right soft key (labeled Next). To return to the main application, the user presses the Left soft key (labeled Home). The cafe application’s specials screen If the user selects the Reservations option on the main screen, the application initiates a phone call to the restaurant.
3. To interact with the application, do the following: ■ On the main screen, click the Down Arrow key on the emulator’s keypad to select the Specials menu item. Then click the Select key on the emulator to view the specials screen. ■ On the specials screen, click the Right soft key (Next) on the emulator to view the image and description for each special. Click the Left soft key (Home) to return to the main screen.
Selecting your test devices and content type You use Device Central to select the devices and content type that you are targeting. When you test your application in the Adobe Device Central emulator, the emulator configures itself to match the configuration of the player on the target device as well as the content type. You specify these settings when you first create your Flash mobile document. For details on creating a new document from scratch, see “Hello World Flash Lite application” on page 9.
4. Drag an instance of the button symbol named Reservations to the Stage and position it below the Specials button, as the following image shows: 5. Select the Specials button, and open the Actions panel (Window > Actions). 6. Add the following code to the Actions panel: on(press) { gotoAndStop("specials"); } This event handler code sends the playhead to the frame labeled specials when the user selects this button.
10. Open the Actions panel and enter the following code: stop(); _focusRect = false; fscommand2("resetsoftkeys"); fscommand2("setquality", "high"); fscommand2("fullscreen", "true"); This code does the following: 11. ■ Stops the playhead at this frame. ■ Disables the yellow focus rectangle that Flash Lite draws by default around the button or input text field with the current focus (see “About the focus rectangle” in Developing Flash Lite 1.x Applications.
Creating the specials screen In this section, you’ll create the user interface elements that let the user browse images and descriptions of each special. The specials screen consists of the following parts: ■ An animation that transitions between images of each special. ■ Dynamic text fields that display the name and description for each special. ■ User interface elements that let the user navigate between specials and return to the main application screen.
To create the animation you’ll use a prebuilt movie clip that contains images of all the specials arranged in a vertical column. You’ll use a masking layer to make only one of the images visible. Then you’ll create a series of tweens that move the movie clip upward, so that a different image is visible. The last image in the movie clip is a duplicate of the first one, so that the animation sequence can return to its initial state after the user has viewed the final image.
To create the image animation: 1. Open the file you saved in the previous section (see “Creating the menu for the main screen” on page 24). 2. In the Timeline, select the keyframe on Frame 10 on the layer named Images. 3. Open the Library panel, and drag the symbol named Specials Images movie clip to the Stage. The rest of this tutorial refers to this movie clip simply as the images movie clip. 4.
13. To create the mask layer, select the Images layer in the Timeline, and then select Insert > Timeline > New Layer (or click the Insert Layer button in the Timeline). 14. Insert a keyframe on Frame 10 of the new mask layer. 15. Using the Rectangle tool in the Tools panel, create a rectangle over the first (top-most) image in the images movie clip. It doesn’t matter what fill color you use for the rectangle, but it must be completely opaque. Masking rectangle 16.
18. Save your changes (File > Save). At this point, if you were to test the application in the emulator, the animation you created would play through to the end and then stop. In the next section (see “Adding navigation and text to the specials screen” on page 31), you’ll add ActionScript that stops the animation at each keyframe, as well as user interface elements that let the user navigate between images.
4. With the text field selected on the Stage, make the following changes in the Property inspector: ■ Select Dynamic Text from the Text Type pop-up menu. ■ Select Verdana from the Font pop-up menu. ■ Select the Italics text style option. ■ Set the font size to 10. ■ Select Bitmap (no anti-alias) from the Font Rendering Method pop-up menu. ■ Type title in the Var text box. This is the variable name assigned to the dynamic text field. 5.
9. Open the Actions panel and add the following code: title = "Summer salad"; description = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette."; fscommand2("SetSoftKeys", "Home", "Next"); stop(); This code displays the name and description of the special that the user is currently viewing, and stops the playhead. The SetSoftKeys command registers the device’s soft keys that will let the user return to the home screen, as well as navigate between specials. 10.
To add navigation to the specials screen: 1. Open the file you completed in the previous section. 2. In the Library panel (Window > Library), locate the symbol named Home and drag it to the lower-left corner of the Stage. 3. In the Property inspector, set the Home graphic’s x coordinate to 0 and its y coordinate to 188. 4. Drag the symbol named Next from the Library to the lower-right corner of the Stage. 5.
7. From the Library, drag the Key Catcher button symbol and place it in the work area off the Stage. NOT E To view the work area, in Flash choose View > Work Area. Key catcher button Work area The purpose of this button is to “catch” ActionScript keypress events initiated by the user, and then take the appropriate action. For more information about using key catcher buttons, see “Creating a key catcher button” in Developing Flash Lite 1.x Applications. 8.
Creating a Flash Lite Application
Index A Adobe Device Central emulator 15 availability of Flash Lite 12 available Stage size 18 C Cafe Townsend application about 21 creating navigation 31 creating the main menu 24 creating the specials animation 27 creating the specials screen 27 content types 13 creating navigation creating a key catcher button 31 using buttons 24 using the soft keys 31 Flash Lite authoring features device settings 15 emulator 15 Flash Lite content types 13 H Hello World application 18 M mask layers, using 27 P Prop
