Flash Lite 2 Getting Started

8/14/2019 Flash Lite 2 Getting Started

1/44

Getting Started with Flash Lite 2.x


2/44

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 beregistered 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 AdobeSystems Incorporated is not responsible for the content on any linked site. If you access a third-party website mentioned in thisguide, then you do so at your own risk. Adobe Systems Incorporated provides these links only as a convenience, and the inclusionof the link does not imply that Adobe Systems Incorporated endorses or accepts any responsibility for the content on those third-party sites.

Sorenson Spark video compression and decompression technology licensed fromSorenson 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 RightsReserved.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 writtenapproval 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
http://www.iis.fhg.de/amm/http:///reader/full/www.nellymoser.comhttp://www.on2.com/http://www.on2.com/http:///reader/full/www.nellymoser.comhttp://www.iis.fhg.de/amm/


3/44

3

Contents

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

About the Flash Lite 2.0 Update for Flash Professional 8 . . . . . . . . . . . 5Guide to instructional media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Chapter 1: Flash Lite Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9Hello World Flash Lite application (Flash Professional only). . . . . . . . . 9Flash Lite authoring features in Flash Professional 8 (Flash Professional only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Workflow for authoring Flash Lite applications (Flash Professional only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14About Flash Lite content types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Creating a Flash Lite document template (Flash Professional only). . 17

Chapter 2: Tutorial: Creating a Flash Lite Application (FlashProfessional Only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Cafe application overview (Flash Professional only) . . . . . . . . . . . . . . . 19View the completed application (Flash Professional only) . . . . . . . . . 22Create the application (Flash Professional only). . . . . . . . . . . . . . . . . . 23

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/


4/44

4 Contents


5/44

5

Introduction

This manual describes how to develop applications for Macromedia FlashLite 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

About the Flash Lite 2.0 Updatefor Flash Professional 8The Flash Lite 2.0 Update for Flash Professional 8 lets developers createand test their Flash Lite 2.0 applications in Macromedia FlashProfessional 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 thefeatures that are available in a Flash Lite application running on anactual device and includes support for playing device video as well asloading device-specific image formats (such as GIF and PNG).

The Flash Lite 2.0 publish profile, which you select when targeting theFlash 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, seeGuide to instructional media on page 6.


6/44

6 Introduction

Guide to instructional mediaThe Flash Lite documentation package includes the following media tohelp you learn how to create Flash Lite applications:

Getting Started with Flash Lite 2.x provides an overview of Flash Litetechnology and developing Flash Lite content for mobile devices. Italso includes a step-by-step tutorial for creating a Flash Liteapplication.

Developing Flash Lite 2.x Applications is a comprehensive guide tocreating Flash Lite content and includes instructions for testing yourapplications in the integrated Flash Lite emulator.

Flash Lite 2.x ActionScript Language Reference describes all the ActionScript language features available to Flash Lite developers andprovides example code.

Introduction to Flash Lite 2.x ActionScript complements the languagereference and lists the differences between ActionScript for Flash Lite2.0 and the version of ActionScript in Flash Player 7, upon which FlashLite 2.0 is based.

The Flash Lite sample applications demonstrate key concepts and bestpractices discussed or mentioned in the written documentation.

Additional resourcesFor the latest information on developing Flash Lite applications, plusadvice from expert users, advanced topics, examples, tips, and otherupdates, see the Mobile and Devices Developer Center at

www.macromedia.com/devnet/devices/.

For TechNotes, documentation updates, and links to additional resourcesin the Flash Lite developer community, see the Macromedia Flash LiteSupport Center at www.macromedia.com/support/flashlite/.
http://www.macromedia.com/devnet/devices/http://www.macromedia.com/support/flashlite/http://www.macromedia.com/support/flashlite/http://www.macromedia.com/devnet/devices/


7/44

Typographical conventions 7

Typographical conventionsThe 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 (' ).


8/44

8 Introduction


9/44


10/44

10 Flash Lite Overview

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).

4. In the Device Settings dialog box, do the following:a. Select Standalone Player from the Content Type pop-up menu.b. 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 informationabout the selected device, including the available Stage area. Theavailable Stage size indicates the screen area that your SWF file willoccupy on the target device. For your generic device, the availableStage size is 176 x 208. Your Flash documents Stage size shouldalways match the available Stage area; otherwise, Flash Lite scalesthe SWF file to fit the available Stage area. For more information,seeAbout screen size and available Stage size (Flash Professionalonly) in Developing Flash Lite 2.x Applications .

5. Click OK to close the Device Settings dialog box.

Device Settingsbutton
http://../dev_guide/06_testing.pdfhttp://../dev_guide/06_testing.pdfhttp://../dev_guide/06_testing.pdfhttp://../dev_guide/06_testing.pdf


11/44

Hello World Flash Lite application (Flash Professional only) 11

6. Open the Document Properties dialog box (Modify > Document), setthe Stage width to176 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 whenyou create other Flash Lite applications. A template lets you create anew document thats pre-configured with document and devicesettings. For more information, seeCreating a Flash Litedocument template (Flash Professional only) on page 17.

7. In the Tools panel, select the Text tool and drag to create a text box onthe Stage.

Type Hello, world! (or other text) in the text box.8. Select Control > Test Movie to view your application in the Flash Lite

emulator.


12/44


Flash Lite authoring features inFlash Professional 8(Flash Professional only)This section discusses the features in Flash Professional 8 that are designedspecifically for Flash Lite developers. The following features are availableonly when your documents Version setting on the Flash tab of the PublishSetting dialog box is set to target the Flash Lite player. For information onhow to specify your documents SWF file version, seeSetting publishoptions for the Flash SWF file formatin 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 Litetest window lets you select a different test device, view information aboutyour application, and set emulator debug output options.

For more information about using the Flash Lite emulator and test window, seeUsing the Flash Lite emulator (Flash Professional only)inDeveloping Flash Lite 2.x Applications .
http://../Flash/8Ball/Using/18_publish.pdfhttp://../Flash/8Ball/Using/18_publish.pdfhttp://../dev_guide/06_testing.pdfhttp://../dev_guide/06_testing.pdfhttp://../Flash/8Ball/Using/18_publish.pdfhttp://../Flash/8Ball/Using/18_publish.pdf


13/44


14/44


The Property inspector contains a section that provides informationabout your current device settings as well as a button that lets you open theDevice Settings dialog box. This button is active only when yourdocuments Version setting on the Flash tab of the Publish Setting dialogbox is set to target a Flash Lite player version.

Workflow for authoring FlashLite applications(Flash Professional only)Creating Flash Lite content is an iterative process that involves thefollowing steps:Identify your target devices and Flash Lite content type Differentdevices have different screen sizes, support different audio formats, andhave different screen color depths, among other factors. These factors may influence your applications design or implementation.

In addition, different devices support different Flash Lite content types,such as screen savers, stand-alone applications, or animated ring tones. Thecontent type for which you are developing also determines the features thatare available to your application. For more information about Flash Litecontent types, seeAbout Flash Lite content types on page 16.

Device Settings button Current content type and test device


15/44

Workflow for authoring Flash Lite applications (Flash Professional only) 15

Create and test your application in Flash Flash Professional 8 includesa Flash Lite emulator that lets you test your application without having totransfer it to a device. You use the Flash Lite emulator to refine yourapplication design and fix any problems before you test it on a mobiledevice.Test the application on your target device or devices This step isimportant because the emulator doesnt emulate all aspects of the targetdevice, such as its processor speed, color depth, or network latency. Forexample, an animation that runs smoothly on the emulator might not runas quickly on the device because of its slower processor speed, or a colorgradient that appears smooth in the emulator may appear banded whenviewed on the actual device. After you test your application on a device,you may find that you need to refine the applications design in the Flashauthoring tool.

The following figure shows the iterative development and testing process:

Editing the FLA file in FlashProfessional 8

Testing in the Flash Liteemulator

Testing on a device


16/44


About Flash Lite content typesBefore you start developing a Flash Lite application, you need to know thefollowing:

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 pageon the Macromedia website at www.macromedia.com/mobile/supported_devices/.

The Flash Lite content types that the target devices support. Each FlashLite installation supports one or more application modes (content types ). For example, some devices use Flash Lite to enable Flash-basedscreen savers or animated ring tones. Other devices use Flash Lite torender Flash content that is embedded in mobile web pages. Not allcontent types support all Flash Lite features.

Each Flash Lite content type, paired with a specific device, defines aspecific set of Flash Lite features that are available to your application. Forexample, a Flash application that is running as a screen saver is nottypically allowed to make network connections or download data.

The Flash Lite testing features in Macromedia Flash Professional 8 let youtest against multiple devices and different Flash Lite content types. Thisability lets you determine if your application uses features that arentavailable for the type of content that you are developing. For more

information about selecting target devices and content types, seeTestingFlash Lite Content (Flash Professional Only)in Developing Flash Lite 2.x

Applications .
http://www.macromedia.com/mobile/supported_devices/http://www.macromedia.com/mobile/supported_devices/http://../dev_guide/06_testing.pdfhttp://../dev_guide/06_testing.pdfhttp://../dev_guide/06_testing.pdfhttp://../dev_guide/06_testing.pdfhttp://www.macromedia.com/mobile/supported_devices/http://www.macromedia.com/mobile/supported_devices/


17/44

Creating a Flash Lite document template (Flash Professional only) 17

Creating a Flash Litedocument template(Flash Professional only)

When youre developing Flash Lite content, youll often target the samedevice, or group of devices, and Flash Lite content type. For example, youmight be content for the stand-alone Flash Lite player running on theSeries 60 devices from Nokia. To facilitate the authoring process, it can beuseful to create a template that has the appropriate Stage size, publishsettings, test devices, and Flash Lite content type preconfigured for yourapplication.

In this section, youll create a document template that has a Stage size of 176 x 208 and targets the stand-alone Flash Lite player. The followingprocedure describes how to create a template that you can use to create new documents.

To create a new Flash Lite document template:1. In Flash, select File > New.2. On the General tab in the New Document dialog box, select Flash

Document, and click OK.3. Select File > Publish Settings to open the Publish Settings dialog box.4. 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.0from the ActionScript Version pop-up menu. Click OK.

5. Select Modify > Document to open the Document Propertiesdialog box.

6. Type 176 in the Width text box and 208 in the Height text box.Click OK.

7. Select File > Device Settings to open the Device Settings dialog box.8. Select Standalone Player from the Content Type pop-up menu located

at the top of the dialog box.9. In the list of Available Devices, double-click the Flash Lite 2.0 folder to

expand it, and then double-click the Generic folder.10. Double-click the Generic Phone device to add it to the list of

Test Devices.


18/44


19/44

19

2CHAPTER 2

Tutorial: Creating a Flash LiteApplication (Flash Professional Only)

In this tutorial, youll develop a Macromedia Flash Lite application thatpromotes a fictional restaurant called Caf Townsend. Users can view a listof specials at the restaurant, watch a video about the chef, and call therestaurant to make reservations. Users also set their preferred location formaking reservations using a shared object, which stores their preferencebetween application sessions.

This chapter contains the following topics:Cafe application overview (Flash Professional only) . . . . . . . . . . . 19View the completed application (Flash Professional only) . . . . . . 22Create the application (Flash Professional only). . . . . . . . . . . . . . . 23

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 therestaurant and a menu with three items: Specials, View Video, andReservations.


20/44

20 Tutorial: Creating a Flash Lite Application (Flash Professional Only)

To select a menu item, the user presses their devices up and downnavigation keys to give the desired menu item focus, and then presses theselect key to confirm the selection. On this screen, the user can also exit theapplication by pressing the right soft key, or set their preferred location formaking reservations by pressing the left soft key.

The home screen

On the specials screen, the user can navigate a list of descriptions andimages of the days lunch specials. To navigate between specials, the userpresses the devices right soft key (labeled Next). To return to theapplications home screen the user presses the left soft key (labeled Home).

The specials screen

Selected menu item

Soft key labels

Right soft key navigates to nextspecial.


21/44

Cafe application overview (Flash Professional only) 21

To view a short video about the caf, the user selects the View Video menuoption on the home screen. They use the left soft key to pause and play thevideo, 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, theapplication initiates a phone call to the restaurant. By default, it dials theflagship restaurant in San Francisco, but the user can also specify anotherrestaurant location to call by pressing the left soft key (Set Location)located on the applications home screen.


22/44


23/44


24/44


25/44

Create the application (Flash Professional only) 25

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 theGeneric 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 youve selected the test devices and content type, youre ready tocreate the application. In the next section, youll create the menu for theapplications home screen.

Create the menu for the home screen(Flash Professional only)

In this section, youll create the menu for the applications home screen.The menu consists of three options: Specials, View Video, andReservations.1. In Flash Professional 8, open the file you saved inSelect your test

devices and content type (Flash Professional Only) on page 24.2. In the Timeline window (Window > Timeline), select Frame 1 in the

menu layer.3. To create the menu, open the Library panel (Window > Library),

and drag an instance of the button symbol called specials button to

the Stage.Position the button beneath the text field (already in place) thatintroduces the restaurant.

4. With the specials button selected, in the Property inspector, typespecials_btn in the Instance Name text box.

5. Drag an instance of the button symbol named video button to the Stageand position it below the specials button.

6. With the video button selected, in the Property inspector, type video_btn in the Instance Name text box.

7. Drag an instance of the button symbol named reservations button to theStage and position it below the video button.


26/44


8. With the reservations button selected, in the Property inspector, typereservations_btn in the Instance Name text box.

The Stage of your application should look something like the followingexample:

9. In the Timeline, select Frame 1 in the layer named ActionScript.10. Open the Actions panel (Window > Actions) and enter the following

code:stop();_focusrect = false;fscommand2("SetSoftKeys", "Set Location", "Exit");fscommand2("SetQuality", "high");fscommand2("Fullscreen", "true");

This code does the following: Stops the playhead at this frame. Disables the focus rectangle that Flash Lite draws by default around

the button or input text field with the current focus (seeAbout thefocus rectanglein Developing Flash Lite 2.x Applications).

Registers the soft keys for your application to use. Sets the players rendering quality to high. By default, Flash Lite

renders graphical content at medium quality. Forces the player to display the application full screen.

When Flash Lite is in full-screen mode, the labels you specify in theSetSoftKeys command are not visible. For this reason, you must addcustom soft-key labels to the Stage.

specials_btn

video_btn

reservations_btn
http://../dev_guide/02_interactivity.pdfhttp://../dev_guide/02_interactivity.pdfhttp://../dev_guide/02_interactivity.pdfhttp://../dev_guide/02_interactivity.pdf


27/44


11. Add the following code to handle button events for the menu buttons,and for selection focus:// Set initial focus when the application// starts and also upon returning to the main// screen from another screen.

if (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.onPress = function () {

gotoAndStop ("specials");selectedItem = this;

};video_btn.onPress = function () {

gotoAndStop ("video");selectedItem = this;

};reservations_btn.onPress = function () {

if (location_so.data.phoneNumber == undefined) {// User hasn't specified location so// go to "set location" screen:

gotoAndStop ("options");}else {

// Call number in shared object:var phoneNum = location_so.data.phoneNumber;

getURL ("tel:" + phoneNum);}selectedItem = this;

};

The onPress event handlers assigned to the buttons namedspecials_btn and video_btn send the playback head to frameslabeled, respectively, specials and video. Youll create the content forthose sections later in the tutorial (seeCreate the specials screen (FlashProfessional only) on page 29and Create the Video screen (FlashProfessional only) on page 36).


28/44


29/44


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 thecorresponding button focus, and then pressing the emulators select key (or the Enter key on your computer keyboard). In the following

sections, youll create the specials and video screens, as well as thescreen to specify the default location.

Create the specials screen (FlashProfessional only)In this section, youll create the user interface elements that let the userbrowse images and descriptions of each special. The specials screen consistsof the following parts: An animation that transitions between images of each special. (See

Create the image animation (Flash Professional only) on page 29.) Dynamic text fields that display the name and description for each

special. (SeeAdd navigation and text to the specials screen (FlashProfessional only) on page 33.)

User interface elements that let the user navigate between specials andreturn to the main application screen. (SeeAdd navigation and text tothe specials screen (Flash Professional only) on page 33.)

This section of the tutorial is divided into two parts. In the first part, youllcreate the animation that transitions between images of each special. In thesecond part, youll add user interface elements and ActionScript to let theuser navigate between the images and to display each specials name anddescription.

Create the image animation (Flash Professionalonly)In this section, youll create the tweened animation that transitionsbetween images of each special. When youve completed this section, theanimation plays through without stopping. Later in the tutorial, youll addnavigation and ActionScript that lets the user control the animation withthe devices right soft key.


30/44


To create the animation, youll use a prebuilt movie clip that containsimages of all of the specials arranged in a vertical column. Youll use amasking layer to make only one of the images visible. Then youll create aseries of tweens that move the movie clip upward, so that a different imageis visible. The last image in the movie clip is a duplicate of the first one, sothat the animation sequence can return to its initial state after the userviews the final image. These concepts are illustrated in the followingexample:

In the last section of the tutorial, youll add ActionScript and user interfaceelements that let the user control the animation sequence.1. Open the file you saved inCreate the menu for the home screen (Flash

Professional only) on page 25.2. In the Timeline, select the keyframe in Frame 10 in the layer named

Images.3. Open the Library panel, and drag the symbol named Specials movie clip

to the Stage.

The rest of this tutorial refers to this movie clip simply as theImages movie clip.

4. With the new movie clip instance selected, set the movie clips x and y coordinates both to 0 in the Property inspector.

This aligns the upper-left corner of the images movie clip with theupper-left corner of the Stage.

Masking layer object

Masked movie clip of images

Tween direction

Duplicated image


31/44


5. In the Images layer, insert keyframes in Frames 20, 30, 40, and 50, asthe 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. Select the keyframe in Frame 40, select the images movie clip, and set

its y coordinate to -300 in the Property inspector.10. Select the keyframe in Frame 50, select the images movie clip, and set

its y coordinate to -400 in the Property inspector.11. Select the keyframe in Frame 10, and select Motion from the Tween

pop-up menu in the Property inspector.

This tweens the Images movie clips position between the keyframes inFrames 10 and 20.

12. To create transitions between the other images, repeat step 11 for thekeyframes located in Frames 20, 30, and 40.

13. To create the mask layer, select the Images layer in the Timeline, andthen select Insert > Timeline > Layer (or click Insert Layer in theTimeline).

14. Insert a keyframe in Frame 10 of the new mask layer.


32/44


15. Using the Rectangle tool in the Tools palette, create a rectangle over thefirst (uppermost) image in the Images movie clip.

It doesnt matter what fill color you use for the rectangle, but it must becompletely opaque.

16. To make sure the rectangle covers the entire image area, double-click therectangle 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. Right-click (Windows) or Control-click (Macintosh) the Image Mask

layer in the Timeline, and select Mask from the context menu.

The layer is converted to a mask layer, indicated by a mask layer icon.The layer immediately below it is linked to the mask layer, and itscontents show through the filled area on the mask. For moreinformation about working with mask layers in Flash, seeUsing mask

layersin Using Flash.

18. Save your changes (File > Save).

Masking rectangle

Mask layer

Masked layer

Masked regionon the Stage
http://../Flash/8Ball/Using/11_motion.pdfhttp://../Flash/8Ball/Using/11_motion.pdfhttp://../Flash/8Ball/Using/11_motion.pdfhttp://../Flash/8Ball/Using/11_motion.pdf


33/44


At this point, if you were to test the application in the emulator, theanimation you created would play through to the end and then stop. InAdd navigation and text to the specials screen (Flash Professional only)on page 33, youll add ActionScript that stops the animation at eachkeyframe, as well as user interface elements that let the user navigatebetween images.

Add navigation and text to the specials screen(Flash Professional only)In this section, youll add interactivity to the specials screen that lets theuser control the transition between each animation. Youll also adddynamic text fields that display the name and description of each image.1. In Flash, open the file you completed inCreate the menu for the home

screen (Flash Professional only) on page 25.2. In the Timeline, select Frame 10 in the Text layer.3. In the Tools palette, select the Text tool and create a text field below the

first masked-specials image.

This text field displays the name of the special whose image is shownon the screen.

4. With the text field selected on the Stage, make the following changes inthe Property inspector: Select Dynamic Text from the Text Type pop-up menu. Type title_txt in the Instance Name text box. Select the Italics text style option. Set the font size to 10. Select Use Device Text from the Font Rendering Method pop-up

menu.

Text field to display name of special


34/44


5. Create another text field below the first text field to display a shortdescription of the specials that the user is viewing.

6. Using the Selection tool, resize the new text field so that its about threetimes as tall as the text field above it.

7. With the text field selected on the Stage, make the following changes inthe Property inspector: Select Dynamic Text from the Text Type pop-up menu. Type description_txt in the Instance Name text box. Select Multiline from the Line Type pop-up menu. Set the font size to 10. Select Use Device Fonts from the Font Rendering Method pop-up

menu.8. In the Timeline, select the keyframe in Frame 10 in the ActionScript

layer.9. Open the Actions panel and add the following code:

stop();fscommand2("SetSoftKeys", "Home", "Next");title_txt.text = "Summer salad";description_txt.text = "Butter lettuce with apples, blood

orange segments, gorgonzola, and raspberryvinaigrette.";

This code displays the name description of the first special in the twodynamic text fields. It also stops the playhead on the current frame, andregisters the devices soft keys.

Text field to display description of special


35/44


10. In the ActionScript layer, select the keyframe in Frame 20 and enter thefollowing 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.text = "Filet of wild salmon with

caramelized onions, new potatoes, and caper and tomatosalsa.";

12. In the ActionScript layer, select the keyframe in Frame 40 and enter thefollowing code in the Actions panel:

stop();title_txt.text = "New York Cheesecake";description_txt.text = "Creamy traditional cheesecake

served with chocolate sauce and strawberries.";

13. In the ActionScript layer, select the keyframe in Frame 50 and enter thefollowing code in the Actions panel:gotoAndStop("specials");

This code returns the playhead to the beginning of the animationsequence. The first and last images in the animation sequence are thesame, which creates the illusion of a continuous animation.

14. Save your changes.

Next youll add navigation to the specials screen that lets the user navigatebetween images and descriptions of each special.1. Open the file you completed in the previous procedure.2. In the Timeline, select Frame 10 in the layer named ActionScript.


36/44


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 eventgotoAndPlay ("home");

}else if (keyCode == ExtendedKey.SOFT2) {

// Handle right soft key eventplay ();description_txt.text = "";title_txt.text = "";

}};Key.addListener (myListener);

The left soft key sends the playhead to the main application screen, andthe right soft key advances the image animation to the next image inthe sequence.For more information about using event listeners, seeUsing a key listener to handle keypress events (Flash Professional only)inDeveloping Flash Lite 2.x Applications .

4. Select Control > Test Movie to test the final application in the emulator.

Create the Video screen (Flash

Professional only)In this section, youll add video to the application, as well as ActionScriptcode that lets the user control playback (play, pause, replay) with the rightsoft key.

In this tutorial, youll bundle the device video file in your SWF files library,although you can also load an external video file from the devices filesystem or a network address.1. In Flash, open the file you completed inCreate the specials screen

(Flash Professional only) on page 29.2. Open the Library panel (Window > Library) if not already open.3. Open the Library options menu located in the upper-right corner of the

Library panel and select New Video.

The Video Properties dialog box appears.
http://../dev_guide/02_interactivity.pdfhttp://../dev_guide/02_interactivity.pdfhttp://../dev_guide/02_interactivity.pdfhttp://../dev_guide/02_interactivity.pdf


37/44


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 thesource 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 yourhard disk, select the file named cafe_townsend.3gp, and click Open.

If you dont see the video file listed in the Open dialog box (or if youcan see it but cant select it), select All Files (*.*) from the Files of Typepop-up menu (Windows), or All Files from the Enable pop-up menu(Macintosh). This action is sometimes necessary because the Flashauthoring tool doesnt recognize most device video formats.The Video Properties dialog box should appear as follows before you

click OK.

7. Click OK to close the Video Properties dialog box.

A new video symbol appears in your documents Library panel that isassociated with the device video file.For more information about working with a device video in Flash Lite,seeUsing device videoin Developing Flash Lite 2.x Applications .
http://../dev_guide/04_sound.pdfhttp://../dev_guide/04_sound.pdf


38/44


8. To add the video object to the Stage, in the Timeline select the keyframein Frame 51 of the layer named Video, as shown in the followingexample:

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 objects x position to 0, its y position to 45, its Widthto 176, and its Height to 144.

11. In the Timeline, select the keyframe in Frame 51 of the layer named ActionScript.


39/44


12. Open the Actions panel (Window > Actions) and type, or copy andpaste, the following code:// Stop timeline, register soft keys, and start video.stop ();fscommand2 ("SetSoftKeys", "Home", "Pause");

cafVideo.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.SOFT1) {

gotoAndPlay ("home");}else if (keyCode == ExtendedKey.SOFT2) {

if (playing) {// If video is playing, pause it,// set status variable (playing) to false,// and set right soft key label to 'Play'.cafVideo.pause ();playing = false;rightSoftKeyLabel.text = "Play";

}else {

// If video is paused, resume its playback,// set status variable (playing) to true,// and set right soft key label to 'Pause'.cafVideo.resume ();playing = true;

righttSoftKeyLabel.text = "Pause";}}

};// Register listener object:Key.addListener (myListener);//// Video status handler code.//cafVideo.onStatus = function (infoObject:Object) {

var code = infoObject.code;if (code == "completed") {

// If video has finished playing, set playing=false,// and set right soft key label to "Replay":playing = false;rightSoftKeyLabel.text = "Replay";

}};


40/44


13. Save your work and test the application in the emulator.14. Select the View Video option on the applications 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, youcan press the right soft key again to play the video again.

Create the set location screen (FlashProfessional only)In this section, youll create a new screen that lets the user select which of the four restaurant locations they want to call for reservations. The locationthe user selects on this screen determines the number thats dialed whenthey select Reservations on the applications home screen.

The first time the user starts the application and selects Reservations on thehome screen, the application takes them to the set location screen wherethey can select a location. Subsequently, when the user selects Reservations,the application immediately dials the default restaurant locations number.The application uses a shared object to save the location that the userselected between sessions.1. In Flash, open the file you completed inCreate the Video screen (Flash

Professional only) on page 36.2. In the Timeline, select the keyframe on Frame 66 of the layer named

Options Menu.3. Open the Library panel (Window > Library), and drag the button

named location_SF_button from the library to the Stage.

Position the button under the text that reads, in part, Select yourpreferred location

4. In the Property inspector, type sf_btn in the Instance Name text box.5. Drag the button named location_SJ_button from the library to the

Stage and position it directly below the location_SF button.

6. In the property inspector, type sj_btn in the Instance Name text box.


41/44


7. Repeat step 6 for the two buttons in the library named location_PA andlocation_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:

8. In the Actions panel (Window > Actions), enter the following code:stop ();fscommand2 ("SetSoftKeys", "Save", "Cancel");showCurrentLocation();//// Soft key event handler code//Key.removeListener (myListener);var myListener:Object = new Object ();myListener.onKeyDown = function () {

var keyCode = Key.getCode ();

if (keyCode == ExtendedKey.SOFT1) {// Save location:saveNewLocation ();gotoAndPlay ("home");

}else if (keyCode == ExtendedKey.SOFT2) {

// Cancel operation, go back to home screen:gotoAndPlay ("home");

}};Key.addListener (myListener);//// Function: saveNewLocation().

//function saveNewLocation () {

// Determine which button (location) the user selected:var selectedButton = Selection.getFocus ();switch (selectedButton._name) {case "sf_btn" :

sf_btn

sj_btn

pa_btn

bk_btn


42/44


43/44

43

Index

Aavailable Stage size 9

CCafe Townsend application

about 20creating navigation 33creating the specials animation 29creating the specials screen 29

content types 16creating navigation

creating a key catcher button 33using the soft keys 33

D

Device Settings dialog box 13dynamic text fields 33

FFlash Lite

authoring overview 14content types 16emulator 12

Flash Lite authoring featuresdevice settings 12emulator 12in Flash Professional 8 12

HHello World application 9

Mmask layers 29

PProperty inspector 14

Ssoft keys 33

Ttarget devices 16test devices 16text fields

dynamic 33

setting properties 33tweened animation 29

W workflow for authoring content 14


44/44

Documents

Flash Lite 2 Getting Started