Getting Started with Flash Lite
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 eith
Contents Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 What’s new in Flash Lite authoring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Guide to instructional media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Contents
Introduction This manual provides an introduction to Macromedia Flash Lite and the authoring features in Macromedia Flash Professional 8 for Flash Lite developers. What’s new in Flash Lite authoring Flash Professional 8 includes the following new features to help developers create Flash Lite applications: Flash Lite emulator The Flash Lite emulator lets you preview your content as it will function on an actual device.
Guide to instructional media The Flash Lite documentation package includes the following media to help you learn how to create Flash Lite applications: ■ Getting Started with Flash Lite provides an overview of Flash Lite technology and developing Flash Lite content for mobile devices. It also includes a step-by-step tutorial for creating a Flash Lite application.
Typographical conventions The following typographical conventions are used in this book: ■ Italic font indicates a value that should be replaced (for example, in a folder path). ■ Code font indicates ActionScript code. ■ Code font italic indicates an ActionScript parameter. ■ Bold font indicates a verbatim entry. ■ Double quotation marks ("") in code examples indicate delimited strings. However, programmers can also use single quotation marks.
Introduction
CHAPTER 1 Flash Lite Overview 1 This chapter contains the following topics: About Flash Lite technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Flash Lite 1.x availability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 About Flash Lite content types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Workflow for authoring Flash Lite applications (Flash Professional Only). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
For more information about Flash Lite 1.x ActionScript, see Flash Lite 1.x ActionScript Language Reference and Learning Flash Lite 1.x ActionScript. 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 Applications. Sound Flash Lite 1.0 and Flash Lite 1.
Globally available devices 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 Macromedia Flash Professional 8 let you test against multiple devices and different Flash Lite content types.
Test the application on your target device or devices This step is important because the emulator doesn’t emulate all aspects of the target device, such as its processor speed, color depth, or network latency. For instance, an animation that runs smoothly on the emulator might not run as quickly on the device, due to its slower processor speed. Or a color gradient that appears smooth in the emulator may appear banded when viewed on the actual device.
Flash Lite authoring features in Flash Professional 8 (Flash Professional Only) This section discusses the features in Flash Professional 8 designed specifically for Flash Lite developers. With the exception of the device templates feature, the following features are only available when your document’s Version setting on the Flash tab of the Publish Setting dialog box is set to either Flash Lite 1.0 or Flash Lite 1.1.
The Device Settings dialog box lets you select the test devices and Flash Lite content type that you want to test against in the Flash Lite emulator. Different devices support different media types (for example, different types of device sound formats) as well as different Flash Lite content types, such as stand-alone player, screensaver, or browser.
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 two groups: Global Phones and Japanese Phones. The name of each template in each group includes the target Flash Lite platform (Flash Lite 1.0 or Flash Lite 1.1) and the target content type (for example, Browser or Wallpaper). The Global Phones category contains templates for creating full-screen applications for the stand-alone Flash Lite 1.1 player on Series 60 and UIQ platforms.
Hello World Flash Lite application (Flash Professional Only) In this section, you create a simple Flash Lite application and test it in the Flash Lite emulator. The purpose of this tutorial is to acquaint you with the mobile authoring and testing features in Flash Professional 8 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 (Flash Professional Only),” on page 25.
6. Select the Text tool in the Tools panel, and drag a text box on the Stage. Type Hello, world! in the text box (or whatever text you prefer). 7. Select Control > Test Movie to view your application in the Flash Lite emulator. 8. To view your application in running in another device, select Nokia 6670 from the Test Device pop-up menu.
The following procedure results in the same Hello World sample application as the previous one, but demonstrates how to manually configure your document’s settings. To configure and create a simple Flash Lite application manually: 1. Create a new document in Flash Professional 8, and save it as helloworld.fla. 2. Open the Publish Settings dialog box (File > Publish Settings), click the Flash tab, and select Flash Lite 1.1 from the Version pop-up menu. Then click OK. 3.
The bottom of the Device Settings dialog box displays information about the selected device, including the available Stage area. The available Stage size indicates the screen area that your SWF file will occupy on the target device. For a stand-alone Flash Lite application running in full-screen mode on a Nokia Series 60 device, the available Stage size is 176 x 208.
5. Open the Document Properties dialog box (Modify > Document), set the Stage width to 176 and the Stage height to 208, and then click OK. Remember that these dimensions match those indicated by the Available Stage property in the Device Settings dialog box. 22 Flash Lite Overview 6. Select the Text tool in the Tools panel, and drag a text box on the Stage. Type Hello, world! in the text box (or whatever text you prefer). 7.
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.
Flash Lite Overview
CHAPTER 2 Creating a Flash Lite Application (Flash Professional Only) 2 In this section, you’ll develop a Macromedia 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 (Flash Professional Only). . . . . . . . . . . 25 Viewing the completed application (Flash Professional Only). . .
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 (Flash Professional Only) In this section, you select the test devices and content type for the application. For this application you’ll target the family of Symbian Series 60 devices from Nokia that support the stand-alone version of Flash Lite 1.1. (This is the developer version of Flash Lite available for purchase at the Macromedia online store at www.macromedia.com/store/.
6. With the Nokia folder selected, click Add to add all the Nokia Series 60 devices to your list of test devices. When you test your application in the emulator, you’ll be able to test your application against any of your test devices for the selected content type. Standalone Player content type selected All Symbian Series 60 Nokia devices added to list of test devices 7. Click OK to close the Device Settings dialog box. 8. Save the file as cafe_tutorial.fla, or another name of your choosing.
The menu consists of two standard Flash buttons that define up, over, and down states. The user gives focus to one of the buttons by pressing the Up or Down Arrow keys on their device. When a button has focus it displays its over state. The button that has focus generates a button press event when the user presses the Select key on the device. This default tab navigation provides an easy way to create a simple user interface for a Flash Lite application.
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. You’ll create the content for that frame in the next section (see “Creating the specials screen (Flash Professional Only)” on page 32). 7. On the Stage, select the Reservations button and open the Actions panel again. 8.
11. To test your work so far, select Control > Test Movie. 12. In the emulator, click the Up or Down Arrow keys on the keypad with your mouse (or press the Up or Down Arrow keys on your computer’s keyboard) to give focus to the Specials button. When the Specials button item gets focus, you will see the button’s over state. 13. Click the Select key on the emulator’s keypad (or press the Enter key on your keyboard) to select the menu item. At this point, the specials screen contains no features.
Creating the image animation (Flash Professional Only) In this section you’ll create the tweened animation that transitions between images of each special. When you’ve completed this section, the animation will play through without stopping. Later in the tutorial, you’ll add navigation and ActionScript that lets the user control the animation with the device’s Right soft key. To create the animation you’ll use a prebuilt movie clip that contains images of all the specials arranged in a vertical column.
To create the image animation: 1. Open the file you saved in the previous section (see “Creating the menu for the main screen (Flash Professional Only)” on page 29). 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 15. a keyframe on Frame 10 of the new mask layer. Using the Rectangle tool in the Tools palette, 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 (Flash Professional Only)” on page 36), 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. NO T 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 (Flash Professional Only)” in Developing Flash Lite Applications. 8.
Index A availability of Flash Lite 10 available Stage size 18 C Cafe Townsend application about 25 creating navigation 36 creating the main menu 29 creating the specials animation 33 creating the specials screen 32 selecting test devices and content type 28 content types 11 creating navigation creating a key catcher button 36 using buttons 29 using the soft keys 36 D Device Settings dialog box 15 document templates about 16 global phones 16 Japanese phones 16 using 16 dynamic text fields 36 F Flash Lite
Index
