Getting Started with Flash Lite 2.
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 About the Flash Lite 2.0 Update for Flash Professional 8 . . . . . . . . . . . 5 Guide to instructional media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Contents
Introduction This manual describes how to develop applications for Macromedia Flash Lite 2.0 and how to test your content in the Flash Lite emulator. This chapter contains the following sections: About the Flash Lite 2.0 Update for Flash Professional 8 . . . . . . . 5 Guide to instructional media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Typographical conventions . . . . . . . . .
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 2.x 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. ■ Developing Flash Lite 2.
Typographical conventions The following typographical conventions are used in this manual: ■ 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: Hello World Flash Lite application (Flash Professional only). . . . . 9 Flash Lite authoring features in Flash Professional 8 (Flash Professional only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Workflow for authoring Flash Lite applications (Flash Professional only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 About Flash Lite content types . . . . . . . . . . . . . . . . . . . . . . . .
To configure and create a simple Flash Lite application: 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 2.0 from the Version pop-up menu. Click OK. 3. To open the Device Settings dialog box, select File > Device Settings or click Device Settings in the Property inspector (Window > Properties> Properties). Device Settings button 4.
6. 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 the ones indicated by the Available Stage property in the Device Settings dialog box. You may want to save this document as a template to save time when you create other Flash Lite applications. A template lets you create a new document that’s pre-configured with document and device settings.
Flash Lite authoring features in Flash Professional 8 (Flash Professional only) This section discusses the features in Flash Professional 8 that are designed specifically for Flash Lite developers. The following features are available only when your document’s Version setting on the Flash tab of the Publish Setting dialog box is set to target the Flash Lite player. For information on how to specify your document’s SWF file version, see “Setting publish options for the Flash SWF file format” in Using Flash.
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 target a Flash Lite player version.
Create and test your application in Flash Flash Professional 8 includes a Flash Lite emulator that lets you test your application without having to transfer it to a device. You use the Flash Lite emulator to refine your application design and fix any problems before you test it on a mobile device. 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.
About Flash Lite content types Before you start developing a Flash Lite application, you need to know the following: ■ The device or devices on which the content will run (target devices). The Flash Lite player is installed on a variety of devices. For a list of devices that have Flash Lite installed, see the Supported Devices page on the Macromedia website at www.macromedia.com/mobile/ supported_devices/. ■ The Flash Lite content types that the target devices support.
Creating a Flash Lite document template (Flash Professional only) When you’re developing Flash Lite content, you’ll often target the same device, or group of devices, and Flash Lite content type. For example, you might be content for the stand-alone Flash Lite player running on the Series 60 devices from Nokia.
11. Click OK to close the Device Settings dialog box. 12. Select 13. In the Save As Template dialog box, type Flash Lite 2 - Generic in the Name text box. 14. In 15. File > Save As Template to save the document as a template. the Category pop-up menu, type Flash Lite 2. If desired, enter a description of the template in the Description text box (as many as 255 characters). The description appears when the template is selected in the New Document dialog box. 16. Click OK.
CHAPTER 2 Tutorial: Creating a Flash Lite Application (Flash Professional Only) 2 In this tutorial, 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, watch a video about the chef, and call the restaurant to make reservations. Users also set their preferred location for making reservations using a shared object, which stores their preference between application sessions.
To select a menu item, the user presses their device’s up and down navigation keys to give the desired menu item focus, and then presses the select key to confirm the selection. On this screen, the user can also exit the application by pressing the right soft key, or set their preferred location for making reservations by pressing the left soft key.
To view a short video about the café, the user selects the View Video menu option on the home screen. They use the left soft key to pause and play the video, as well as restart it when the video has finished playing. Video screen If the user selects the Reservations menu option on the home screen, the application initiates a phone call to the restaurant.
On the set location screen, the user can select the restaurant they’d like to set as their default location for making reservations. The location information is saved to a shared object, which persists between application sessions. The user can press the left soft key (Save) to save their new location setting, or press the right soft key (Cancel). Screen to set location preference View the completed application (Flash Professional only) A completed version of the café application is installed with Flash.
3. To interact with the application, do the following: ■ On the home screen, click the down 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 home screen. ■ Select the View Video menu item to watch the video.
■ Creating the specials screen. On this screen, users can press the device’s right soft key to navigate between images and descriptions for each lunch special at the café, or press the left soft key to return to the home screen. (See “Create the specials screen (Flash Professional only)” on page 29.) ■ Creating the video screen. A video plays when this screen loads. Users can press the device’s left soft key to return to the home screen, or press the right soft key to restart the video.
4. Select Standalone Player from the Content Type pop-up menu. 5. In the list of available devices, double-click the Flash Lite 2.0 folder to expand it, double-click the Generic folder, and then double-click the Generic Phone device to add it to your list of test devices. 6. Click OK to close the Device Settings dialog box. 7. Save the file as cafe_tutorial.fla or another name. Now that you’ve selected the test devices and content type, you’re ready to create the application.
8. With the reservations button selected, in the Property inspector, type reservations_btn in the Instance Name text box. The Stage of your application should look something like the following example: specials_btn video_btn reservations_btn 9. In the Timeline, select Frame 1 in the layer named ActionScript. 10.
11. Add the following code to handle button events for the menu buttons, and for selection focus: // // // if Set initial focus when the application starts and also upon returning to the main screen from another screen. (selectedItem == null) { Selection.setFocus (specials_btn); } else { Selection.setFocus (selectedItem); } // Assign onPress event handlers to each menu button, // and set selectedItem variable to selected button // object: specials_btn.
When the user selects the Reservations option, the onPress handler dials the phone number specified in the location_so shared object. (Later in this procedure, you’ll create code to create the shared object.) If the user hasn’t yet specified a location to call for reservations, the application sends the playback head to the frame labeled “options”, where the user selects their preferred location for making reservations. 12.
14. To test your work so far, select Control > Test Movie. At this point you should be able to select a menu item by giving the corresponding button focus, and then pressing the emulator’s select key (or the Enter key on your computer keyboard). In the following sections, you’ll create the specials and video screens, as well as the screen to specify the default location.
To create the animation, you’ll use a prebuilt movie clip that contains images of all of 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 views the final image.
5. In the Images layer, insert keyframes in Frames 20, 30, 40, and 50, as the following image shows: 6. In the Timeline, select the keyframe in Frame 20. 7. On the Stage, select the Images movie clip, and set its y coordinate to -100 in the Property inspector. This moves the movie clip upward on the Stage 100 pixels. 8. Select the keyframe in Frame 30 in the Timeline, select the images movie clip, and set its y coordinate to -200 in the Property inspector. 9.
15. Using the Rectangle tool in the Tools palette, create a rectangle over the first (uppermost) 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. To make sure the rectangle covers the entire image area, double-click the rectangle to select it, and then use the Property inspector to set its x and y coordinates both to 0, its width to 176, and its height to 100. 17.
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 “Add navigation and text to the specials screen (Flash Professional only)” on page 33, you’ll add ActionScript that stops the animation at each keyframe, as well as user interface elements that let the user navigate between images.
5. Create another text field below the first text field to display a short description of the specials that the user is viewing. 6. Using the Selection tool, resize the new text field so that it’s about three times as tall as the text field above it. Text field to display description of special 7. 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. ■ Type description_txt in the Instance Name text box.
10. In the ActionScript layer, select the keyframe in Frame 20 and enter the following code in the Actions panel: stop(); title_txt.text = "Chinese Noodle Salad"; description_txt.text = "Rice noodles with garlic sauce, shitake mushrooms, scallions, and bok choy."; 11. In the ActionScript layer, select the keyframe in Frame 30 and enter the following code in the Actions panel: stop(); title_txt.text = "Seared Salmon"; description_txt.
3. Open the Actions panel and enter the following code: Key.removeListener (myListener); var myListener:Object = new Object (); myListener.onKeyDown = function () { var keyCode = Key.getCode (); if (keyCode == ExtendedKey.SOFT1) { // Handle left soft key event gotoAndPlay ("home"); } else if (keyCode == ExtendedKey.SOFT2) { // Handle right soft key event play (); description_txt.text = ""; title_txt.text = ""; } }; Key.
4. Type a name for the video symbol in the Symbol text box (cafe Video, for example). 5. In the Video Properties dialog box, select the option to bundle the source video in the SWF file, and then click Import. 6. Browse to the Samples and Tutorials/Tutorial Assets/Flash Lite 2.0/ cafe/ folder located in the Flash Professional 8 installation folder on your hard disk, select the file named cafe_townsend.3gp, and click Open.
8. To add the video object to the Stage, in the Timeline select the keyframe in Frame 51 of the layer named Video, as shown in the following example: 9. From the Library panel, drag the cafe Video object to the Stage. 10. In the Property inspector, type cafeVideo in the Instance Name text box, and set the object’s x position to 0, its y position to 45, its Width to 176, and its Height to 144. 11. 38 In the Timeline, select the keyframe in Frame 51 of the layer named ActionScript.
12. Open the Actions panel (Window > Actions) and type, or copy and paste, the following code: // Stop timeline, register soft keys, and start video. stop (); fscommand2 ("SetSoftKeys", "Home", "Pause"); caféVideo.play (); var playing:Boolean = true; // Soft key event handler code: Key.removeListener (myListener); var myListener:Object = new Object (); myListener.onKeyDown = function () { var keyCode = Key.getCode (); if (keyCode == ExtendedKey.
13. Save your work and test the application in the emulator. 14. Select the View Video option on the application’s home screen to view the video. Try pausing the video by pressing the right soft key, and pressing the same key again to resume playback. When the video completes, you can press the right soft key again to play the video again.
7. Repeat step 6 for the two buttons in the library named location_PA and location_BK and give them instance names of pa_btn and bk_btn, respectively. The Stage of your application should look something like the following example: sf_btn sj_btn pa_btn bk_btn 8. In the Actions panel (Window > Actions), enter the following code: stop (); fscommand2 ("SetSoftKeys", "Save", "Cancel"); showCurrentLocation(); // // Soft key event handler code // Key.
// User selected San Francisco. location_so.data.phoneNumber = "415-555-1212"; break; case "_level0.sj_btn" : // User selected San Jose. location_so.data.phoneNumber = "408-555-1212"; break; case "_level0.bk_btn" : // User selected Berkeley. location_so.data.phoneNumber = "510-555-1212"; break; case "_level0.pa_btn" : // User selected Palo Alto. location_so.data.phoneNumber = "650-555-1212"; break; } } // // Function: showCurrentLocation().
Index A M available Stage size 9 mask layers 29 C P Cafe Townsend application about 20 creating navigation 33 creating the specials animation 29 creating the specials screen 29 content types 16 creating navigation creating a key catcher button 33 using the soft keys 33 Property inspector 14 S soft keys 33 T Device Settings dialog box 13 dynamic text fields 33 target devices 16 test devices 16 text fields dynamic 33 setting properties 33 tweened animation 29 F W Flash Lite authoring overview 14
Index
