User manual MACROMEDIA FLASH 8 - GETTING STARTED WITH FLASH LITE 2.X

Getting Started with Flash Lite 2.x 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 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 About the Flash Lite 2.0 Update for Flash Professional 8 . . . . . . . . . . . 5 Guide to instructional media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Chapter 1: Flash Lite Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Creating a Flash Lite document template (Flash Professional only). . 17 Chapter 2: Tutorial: Creating a Flash Lite Application (Flash Professional Only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Cafe application overview (Flash Professional only) . . . . . . . . . . . . . . . 19 View the completed application (Flash Professional only) . . . . . . . . . 22 Create the application (Flash Professional only) . . . . . . . . . . . . . . . . . . 23 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 3 4 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 About the Flash Lite 2.0 Update for Flash Professional 8 The Flash Lite 2.0 Update for Flash Professional 8 lets developers create and test their Flash Lite 2.0 applications in Macromedia Flash Professional 8. The update consists of the following elements: The Flash Lite 2.0 emulator, which lets you preview Flash Lite 2.0 applications in the Flash authoring tool. The emulator mimics the features that are available in a Flash Lite application running on an actual device and includes support for playing device video as well as loading device-specific image formats (such as GIF and PNG). The Flash Lite 2.0 publish profile, which you select when targeting the Flash Lite player. New device profiles, which define the features and capabilities of devices that support Flash Lite 2.0. Flash Lite 2.0 developer documentation; for more information, see "Guide to instructional media" on page 6. 5 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.x Applications is a comprehensive guide to creating Flash Lite content and includes instructions for testing your applications in the integrated Flash Lite emulator. Flash Lite 2.x ActionScript Language Reference describes all the ActionScript language features available to Flash Lite developers and provides example code. Introduction to Flash Lite 2.x ActionScript complements the language reference and lists the differences between ActionScript for Flash Lite 2.0 and the version of ActionScript in Flash Player 7, upon which Flash Lite 2.0 is based. The Flash Lite sample applications demonstrate key concepts and best practices discussed or mentioned in the written documentation. 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.macromedia.com/devnet/devices/. For TechNotes, documentation updates, and links to additional resources in the Flash Lite developer community, see the Macromedia Flash Lite Support Center at www.macromedia.com/support/flashlite/. 6 Introduction 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 Code font italic ActionScript code. 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 ('). Typographical conventions 7 8 Introduction CHAPTER 1 Flash Lite Overview 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Creating a Flash Lite document template (Flash Professional only) 17 1 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, "Tutorial: Creating a Flash Lite Application (Flash Professional Only)," on page 19. For the purposes of this tutorial, assume that you're developing content for the Flash Lite 2.0 stand-alone player. (As of this writing, no commercially available devices support Flash Lite 2.0 so, for this tutorial, you'll target a generic device.) First, decide which devices and Flash Lite content type you are targeting. To begin development, configure your Flash document's publish, document, and device settings for the target device and content type. 9 To configure and create a simple Flash Lite application: 1. 2. Create a new document in Flash Professional 8, and save it as helloworld.fla. 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. To open the Device Settings dialog box, select File > Device Settings or click Device Settings in the Property inspector (Window > Properties> Properties). 3. Device Settings button 4. In the Device Settings dialog box, do the following: a. b. Select Standalone Player from the Content Type pop-up menu. In the list of available devices, double-click the Flash Lite 2.0 folder to open it, double-click the Generic folder, and then double-click the Generic Phone device to add it to your list of test devices. 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 your generic device, the available Stage size is 176 x 208. Your Flash document's Stage size should always match the available Stage area; otherwise, Flash Lite scales the SWF file to fit the available Stage area. For more information, see "About screen size and available Stage size (Flash Professional only)" in Developing Flash Lite 2.x Applications. 5. Click OK to close the Device Settings dialog box. 10 Flash Lite Overview 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. For more information, see "Creating a Flash Lite document template (Flash Professional only)" on page 17. 7. 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. Select Control > Test Movie to view your application in the Flash Lite emulator. 8. Hello World Flash Lite application (Flash Professional only) 11 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 Flash Lite emulator and test window let you test your content as it will run and appear on an actual device. A settings pane in the Flash Lite test window lets you select a different test device, view information about your application, and set emulator debug output options. For more information about using the Flash Lite emulator and test window, see "Using the Flash Lite emulator (Flash Professional only)" in Developing Flash Lite 2.x Applications. 12 Flash Lite Overview 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. When you preview your application in the Flash Lite test window, the emulator mimics the features available on the selected test device running as the selected content type. For more information about Flash Lite content types, see "About Flash Lite content types" on page 16. For more information about using the Device Settings dialog box, see "Selecting test devices and Flash Lite content type (Flash Professional only)" in Developing Flash Lite 2.x Applications. Flash Lite authoring features in Flash Professional 8 (Flash Professional only) 13 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. Device Settings button Current content type and test device Workflow for authoring Flash Lite applications (Flash Professional only) Creating Flash Lite content is an iterative process that involves the following steps: Identify your target devices and Flash Lite content type Different devices have different screen sizes, support different audio formats, and have different screen color depths, among other factors. These factors may influence your application's design or implementation. In addition, different devices support different Flash Lite content types, such as screen savers, stand-alone applications, or animated ring tones. The content type for which you are developing also determines the features that are available to your application. For more information about Flash Lite content types, see "About Flash Lite content types" on page 16. 14 Flash Lite Overview 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. For example, an animation that runs smoothly on the emulator might not run as quickly on the device because of its slower processor speed, or a color gradient that appears smooth in the emulator may appear banded when viewed on the actual device. After you test your application on a device, you may find that you need to refine the application's design in the Flash authoring tool. The following figure shows the iterative development and testing process: Testing in the Flash Lite emulator Editing the FLA file in Flash Professional 8 Testing on a device Workflow for authoring Flash Lite applications (Flash Professional only) 15 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. Each Flash Lite installation supports one or more application modes (content types). For example, some devices use Flash Lite to enable Flash-based screen savers or animated ring tones. Other devices use Flash Lite to render Flash content that is embedded in mobile web pages. Not all content types support all Flash Lite features. 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 is 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. This ability lets you determine if your application uses features that aren't available for the type of content that you are developing. For more information about selecting target devices and content types, see "Testing Flash Lite Content (Flash Professional Only)" in Developing Flash Lite 2.x Applications. 16 Flash Lite Overview 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. To facilitate the authoring process, it can be useful to create a template that has the appropriate Stage size, publish settings, test devices, and Flash Lite content type preconfigured for your application. In this section, you'll create a document template that has a Stage size of 176 x 208 and targets the stand-alone Flash Lite player. The following procedure describes how to create a template that you can use to create new documents. To create a new Flash Lite document template: 1. 2. 3. 4. In Flash, select File > New. On the General tab in the New Document dialog box, select Flash Document, and click OK. Select File > Publish Settings to open the Publish Settings dialog box. Click the Flash tab in the Publish Settings dialog box, select Flash Lite 2.0 from the Version pop-up menu, and then select ActionScript 2.0 from the ActionScript Version pop-up menu. Click OK. Select Modify > Document to open the Document Properties dialog box. Type 176 in the Width text box and 208 in the Height text box. Click OK. Select File > Device Settings to open the Device Settings dialog box. Select Standalone Player from the Content Type pop-up menu located at the top of the dialog box. In the list of Available Devices, double-click the Flash Lite 2.0 folder to expand it, and then double-click the Generic folder. the Generic Phone device to add it to the list of Test Devices. 5. 6. 7. 8. 9. 10. Double-click Creating a Flash Lite document template (Flash Professional only) 17 11. Click OK to close the Device Settings dialog box. File > Save As Template to save the document as a template. In the Save As Template dialog box, type Flash Lite 2 - Generic in the Name text box. 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. 12. Select 13. 14. In 15. 16. Click OK. After you create and save the template, you can use it to quickly create a new document that has the same publish settings, device settings, and Stage size. To create a new document from the template you just created: 1. 2. 3. In Flash Professional 8, select File > New. In the New Document dialog box, select the Templates tab. From the list of available template categories on the left, select Flash Lite 2, which is the name of the category that you specified when you created the template. From the list of templates on the right, select Flash Lite 2 Generic, which is the name of the template that you specified when you created the template. Click OK to create the new document. A new document that is configured with the same publish settings, device settings, and Stage size as the template appears. 4. 5. 18 Flash Lite Overview CHAPTER 2 Tutorial: Creating a Flash Lite Application (Flash Professional Only) 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. This chapter contains the following topics: Cafe application overview (Flash Professional only) . . . . . . . . . . . 19 View the completed application (Flash Professional only) . . . . . . 22 Create the application (Flash Professional only). . . . . . . . . . . . . . . 23 2 Cafe application overview (Flash Professional only) The application consists of three screens. The home screen that appears when the application starts contains some introductory text about the restaurant and a menu with three items: Specials, View Video, and Reservations. 19 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. Selected menu item Soft key labels The home screen On the specials screen, the user can navigate a list of descriptions and images of the day's lunch specials. To navigate between specials, the user presses the device's right soft key (labeled Next). To return to the application's home screen the user presses the left soft key (labeled Home). Right soft key navigates to next special. The specials screen 20 Tutorial: Creating a Flash Lite Application (Flash Professional Only)