What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

Getting Started with Flash Lite in Flash

What's new in Flash Lite authoring

Guide to instructional media

Typographical conventions

Flash Lite Overview

About Flash Lite technology

Flash Lite 1.x availability

About Flash Lite content types

Workflow for authoring Flash Lite applications (Flash Professional Only)

Flash Lite authoring features in Flash Professional 8
(Flash Professional Only)

Using Flash Lite document templates (Flash Professional Only)

Hello World Flash Lite application (Flash Professional Only)

About the stand-alone Flash Lite player

Creating a Flash Lite Application (Flash Professional Only)

Café application overview (Flash Professional Only)

Viewing the completed application (Flash Professional Only)

Creating the application (Flash Professional Only)

Selecting your test devices and content type (Flash Professional Only)

Creating the menu for the main screen (Flash Professional Only)

Creating the specials screen (Flash Professional Only)

Creating the image animation (Flash Professional Only)

Adding navigation and text to the specials screen
(Flash Professional Only)

What's new in Flash Lite authoring

TOP

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. The emulator can configure itself to mimic the features available on any supported device. The emulator also provides debugging information that alerts you to potential problems and incompatibilities on the target device.

Device Settings dialog box You use the Device Settings dialog box to select your test devices and Flash Lite content type. When you test your content in the Flash Lite emulator, you can choose the test device you want the emulator to mimic.

Device document templates Flash Professional 8 includes document templates to let you quickly start creating content for specific devices and content types.

 

Guide to instructional media

TOP

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.

  • Developing Flash Lite 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 1.x ActionScript Language Reference describes all the ActionScript language features available to Flash Lite developers, and provides example code.

  • Learning Flash Lite 1.x ActionScript complements the language reference and provides additional code examples and an introduction to writing Flash 4 ActionScript, upon which Flash Lite 1.x ActionScript is based.

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

 

Typographical conventions

TOP

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.

     

Flash Lite Overview

TOP

This chapter contains the following topics:

About Flash Lite technology

Flash Lite 1.x availability

About Flash Lite content types

Workflow for authoring Flash Lite applications (Flash Professional Only)

Flash Lite authoring features in Flash Professional 8 (Flash Professional Only)

Using Flash Lite document templates (Flash Professional Only)

Hello World Flash Lite application (Flash Professional Only)

About the stand-alone Flash Lite player

 

About Flash Lite technology

TOP

Flash Lite is a version of Macromedia Flash Player designed for mobile phones. It balances Flash features and capabilities with the processing power and configurations of today's mass market mobile phones. There are currently two versions of Flash Lite: Flash Lite 1.0 and Flash Lite 1.1. Flash Lite consists of the following features:

The core rendering engine The rendering engine handles all vector and bitmap rendering.

ActionScript interpreter Flash Lite supports the version of the ActionScript language used in Flash Player 4, including many mobile-specific commands, such as getting time and date information from the device. This hybrid of Flash Player 4 ActionScript and commands with properties specific to Flash Lite is collectively called Flash Lite 1.x ActionScript.

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 Working with Text and Fonts in Developing Flash Lite Applications.

Sound Flash Lite 1.0 and Flash Lite 1.1 both support device audio formats (such as MIDI or MFi). Flash Lite 1.1 also supports standard Flash audio. For more information about working with sound in Flash Lite, see Working with Sound in Developing Flash Lite Applications.

Network connectivity Flash Lite 1.1 supports the ability to load external data and SWF files, as well as commands and properties for getting connectivity and HTTP request status information.

Device and platform integration Flash Lite provides access to several system features and commands, such as the ability to initiate phone calls and short message service (SMS) messages, get platform capability information, and get user input using the device's standard input dialog box.

 

Flash Lite 1.x availability

TOP

Flash Lite 1.0 and Flash Lite 1.1 are supported on a variety of mobile devices that are available in a number of different geographic regions and markets. Some of these devices are available globally, while others are available only in specific geographic regions or from specific mobile operators. Some devices come with Flash Lite pre-installed from the device manufacturer or mobile operator, while on others it can be installed after purchase.

For the most current list of devices that support Flash Lite, see the Supported Devices page located at www.macromedia.com/mobile/supported_devices/.

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 stand-alone 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). For more information about the stand-alone Flash Lite player, see About the stand-alone Flash Lite player.

As of this writing, the Flash Lite stand-alone player is not pre-installed on any globally available devices. You can purchase the stand-alone player for development purposes from the Macromedia online store at www.macromedia.com/store/.

Regionally available devices that support Flash Lite comprise a larger group of devices than are available globally. As of this writing, these devices are available primarily in Japan and come with Flash Lite pre-installed. On these devices, Flash Lite enables several different types of content, such as Flash screen savers or animated ring tones. For more information about Flash Lite content types, see About Flash Lite content types.

 

About Flash Lite content types

TOP

Before you start developing a Flash Lite application, you need to know the following:

  • The device or devices on which the content will be running, or target devices. The Flash Lite player is installed on a variety of devices. For a full list of devices with Flash Lite installed, see the

  • Supported Devices page on the Macromedia website at www.macromedia.com/mobile/supported_devices/.

The Flash Lite content types supported by the target devices. Each Flash Lite installation supports one or more application modes, or content types. For example, some devices use Flash Lite to enable Flash-based screen savers or animated ring tones. Others 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's running as a screen saver is not typically allowed to make network connections or download data.

 

Workflow for authoring Flash Lite applications (Flash Professional Only)

TOP

The process for creating Flash Lite content is an iterative one that involves the following steps:

Identify your target device(s) 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.

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 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. After testing your application on a device, you may find that you need to refine the application's design in theFlash authoring tool.

The following figure illustrates the iterative development and testing process described above.

Flash Lite authoring features in Flash Professional 8
(Flash Professional Only)

TOP

 
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. For information on how to specify your document's SWF 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.

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 to the selected test device running as the selected content type.

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.

Document templates provide a starting point for you to create different types of Flash Lite content for different categories of devices. For more information, see Using Flash Lite document templates (Flash Professional Only).

 

Using Flash Lite document templates (Flash Professional Only) 

TOP

Flash Professional 8 includes several templates that provide starting points for creating Flash Lite content for various devices and content types. When you create a new document from one of the Flash Lite templates, your document is preconfigured with the proper Stage size, publish settings, and device settings for the device type that you specify. In some cases, you may need to adjust the Stage size from the default dimensions for your target device.

The first step in most of the examples and sample applications in this documentation is to create a new document from one of the Flash Lite document templates.

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. The Japanese Phones category contains templates for creating content for devices available in the Japanese market. For more information about Flash Lite availability in global and regional markets, see Flash Lite 1.x availability.

To create a new document from a Flash Lite template:

  1. In Flash, select File > New.

  2. Select the Templates tab in the New Document dialog box.

  3. Select a category from the list of categories:

    • Select Global Phones if you're developing a Flash Lite application for a phone available globally.

    • Select Japanese Phones if you're developing an application for a phone only available in the Japanese market.

  4. Select a template from the list of templates.

  5. Click OK to close the New Document dialog box.

 

Hello World Flash Lite application (Flash Professional Only)

TOP

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 Creating a Flash Lite Application (Flash Professional Only).

First, you need to decide which devices and Flash Lite content type you are targeting. For the purposes of this tutorial, we'll assume that you're developing content for the Flash Lite 1.1 stand-alone player on the Series 60 devices from Nokia. All of the supported Nokia Series 60 devices have the same available Stage size (176 x 208 pixels), so in theory, the same application (SWF file) will run on all of those devices.

To begin development, you first need to configure your Flash document's publish settings, document settings, and device settings for the target device and content type. You can do this manually using a new blank document, or you can use a Flash Lite template (see Using Flash Lite document templates (Flash Professional Only)) to create a new document that's preconfigured with the proper settings for your target device and content type. The following procedures explain how to create the same Hello World application in two ways: using a Flash Lite document template, and from a blank document.

To configure and create a simple Flash Lite application from a template:

  1. In Flash Professional 8, select File > New.

  2. In the New Document dialog box select the Templates tab.

  3. In the list of Categories, select the Global Phones category.

  4. In the list of templates, select the template named Flash Lite 1.1 - Symbian Series 60.

  5. Click OK.

    The new document is preconfigured with the proper Stage size, target platform and device settings. You're now ready to start creating the application.

  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. To open the Device Settings dialog box, select File > Device Settings, or click the Device Settings button in the Property inspector (Window > Properties> Properties).

  4. In the Device Settings dialog box, do the following:

    1. Select Standalone Player from the Content Type pop-up menu.

    2. In the list of available devices, click the Symbian folder to open it, click the Series 60 folder, click the Nokia folder, and then select one of the devices in that folder.

      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. Your Flash document's Stage size should always match the available Stage area; otherwise, Flash Lite will scale the SWF to fit the available Stage area. For more information, see About screen size and available Stage size (Flash Professional Only) in Developing Flash Lite Applications.

    3. Select the Nokia folder and click the Add button to add all the devices in that folder to your list of test devices.

  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.

  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 another device, select Nokia 6670 from the Test Device pop-up menu.

 

About the stand-alone Flash Lite player

TOP

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.

As of this writing, the stand-alone player is available globally for the following platforms and devices:

Series 60 platform:

  • Nokia 3600, 3620, 3650, 3660, 6260, 6600, 6620, 6630, 6670, 6680, 6681, 7610, N-Gage, N-Gage QD

  • Sendo X

  • Siemens SX1

UIQ platform:

  • Sony Ericsson P900, P910

If you're a developer, you can purchase the stand-alone Flash Lite 1.1 player for these supported devices from the Macromedia online store at www.macromedia.com/store/. For a list of commonly asked questions about purchasing the stand-alone player, see the Flash Lite 1.1 FAQ at www.macromedia.com/go/bb660cc2/. For help installing the player, see TechNote 4632f5aa at www.macromedia.com/go/4632f5aa.

 

Creating a Flash Lite Application (Flash Professional Only)

TOP

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)

Viewing the completed application (Flash Professional Only)

Creating the application (Flash Professional Only)

 

Café application overview (Flash Professional Only)

TOP

The café application's initial screen contains some introductory text about the restaurant and a menu listing two options: Specials and Reservations. The user selects a menu item by pressing the Up and Down arrows on their device to set the focus, and then pressing the Select key to confirm the selection.



The café application's main screen


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. Before Flash Lite dials the requested number, it always asks the user to confirm that they would like to make the call.

 

Viewing the completed application (Flash Professional Only)

TOP

A completed version of the café application is installed with Flash. You can view the completed application in the Flash Lite emulator, or if you have the stand-alone version of Flash Lite 1.1 installed on a mobile device, you can transfer the SWF file to your device to view it there.

To view the completed application in the emulator:

  1. In Macromedia Flash Professional 8, open the file named cafe_tutorial_complete.fla located in the /Samples and Tutorials/Tutorial Assets/Flash Lite/Cafe/ folder where you installed Flash Professional 8 (for example, C:/Program Files/Macromedia/Flash 8/Samples and Tutorials/Tutorial Assets/Flash Lite/Cafe/).

  2. Choose Control > Test Movie to start the application in the emulator.

  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.

  • Back on the main screen, select the Reservations menu item to start a phone call to the restaurant.

     

Creating the application (Flash Professional Only)

TOP

This section contains step-by-step procedures that show you how to recreate the cafe application. The tutorial is divided into three parts:

  • Selecting your test devices and content types. In this section, you'll configure your Flash document's publish settings, document settings, and device settings.

  • Creating the menu for the application's main screen. From this screen, the user can select from a simple menu to view images and descriptions of the day's specials, or to call the restaurant to make a reservation.

  • Creating the specials screen. On this screen, users can press the device's Left soft key to navigate between images and descriptions for each lunch special at the cafe, or press the Right soft key to return to the main screen.

This section contains the following topics:

Selecting your test devices and content type (Flash Professional Only)

Creating the menu for the main screen (Flash Professional Only)

Creating the specials screen (Flash Professional Only)

 

Selecting your test devices and content type (Flash Professional Only)

TOP

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

You use the Device Settings dialog box to select the device(s) and content type that you are targeting. When you test your application in the Flash Lite emulator, the emulator configures itself to match the configuration of the player on the target device as well as the content type.

To select your application's test devices and content type:

  1. Open the partially completed source file named cafe_tutorial_start.fla located in the /Sample and Tutorials/Tutorial Assets/Flash Lite/Cafe folder where you installed Flash Professional 8 (for example, C:/Program Files/Macromedia/Flash 8/Sample and Tutorials/Tutorial Assets/Flash Lite/Cafe/).

  2. Open the Property inspector (Window > Properties> Properties), if it's not already open.

  3. In the Property inspector, click the Device Settings button to open the Device Settings dialog box.

  4. Select Standalone Player from the Content Type pop-up menu.

  5. In the list of available devices, double-click the Symbian folder to expand it, double-click the Series 60 folder, and then double-click the Nokia folder.

  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.

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

  8. Save the file as cafe_tutorial.fla, or another name of your choosing.

Now that you've selected the test devices and content type, you're ready to start creating the application. In the next section, you'll create the menu for the application's main screen.

 

Creating the menu for the main screen (Flash Professional Only)

TOP

In this section, you'll create the menu for the application's main screen. The menu consists of two options: Specials and Reservations. The Specials option takes the user to a screen to view images and descriptions of specials at the cafe. The Reservations option initiates a phone call to the cafe so that the user can make reservations.

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. For more information about using tab navigation, see Using tab navigation in Flash Lite in Developing Flash Lite Applications.

To create the main screen's menu:

  1. In Flash Professional 8,open the file you saved in the previous section (see Selecting your test devices and content type (Flash Professional Only)).

  2. In the Timeline window (Window > Timeline), select Frame 1 on the menu layer.

  3. To create the menu, open the Library panel (Window > Library), and drag an instance of the button symbol called Specials to the Stage.

    Position the button beneath the text field (already in place) that introduces the restaurant.

  4. Drag an instance of the button symbol named Reservations to the Stage and position it below the Specials button, as the following image shows:

  5. Select the Specials button, and open the Actions panel (Window > Actions).

  6. Add the following code to the Actions panel:

    on(press) {

    gotoAndStop("specials");

    }

    This event handler code sends the playhead to the frame labeled specials when the user selects this button. You'll create the content for that frame in the next section (see Creating the specials screen (Flash Professional Only)).

  7. On the Stage, select the Reservations button and open the Actions panel again.

  8. In the Actions panel, enter the following code:

    on(press) {

    getURL("tel:1-415-555-1212");

    }

    When the user selects the Reservations menu item, Flash Lite initiates a phone call to the specified number. Flash Lite always prompts the user to allow or deny a request from a SWF file to dial a number. For more information, see Initiating a phone call in Developing Flash Lite Applications.

  9. In the Timeline, select Frame 1 on the Actions layer.

  10. Open the Actions panel and enter the following code:

    stop();\

    _focusRect = false;

    fscommand2("resetsoftkeys");

    fscommand2("setquality", "high");

    fscommand2("fullscreen", "true");

    This code does the following:

  11. Stops the playhead at this frame.

  12. Disables the yellow focus rectangle that Flash Lite draws by default around the button or input text field with the current focus (see About the focus rectangle in Developing Flash Lite Applications.

  13. Resets the soft keys to their default state. (Later in the tutorial, you'll add code that registers the soft keys for your application to use.)

  14. Sets the player's rendering quality to high. By default, Flash Lite renders graphical content at medium quality.

  15. Forces the player to display the application full screen.

  16. To test your work so far, select Control > Test Movie.

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

  18. 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. In the next section, you'll add interactivity and animation to create the specials screen (see Creating the specials screen (Flash Professional Only)).

 

Creating the specials screen (Flash Professional Only)

TOP

In this section, you'll create the user interface elements that let the user browse images and descriptions of each special. The specials screen consists of the following parts:

  • An animation that transitions between images of each special.

  • Dynamic text fields that display the name and description for each special.

  • User interface elements that let the user navigate between specials and return to the main application screen.

This section of the tutorial is divided into two parts. In the first part, you'll create the animation that transitions between images of each special. In the second part, you'll add user interface elements and ActionScript to let the user navigate between the images and to display each special's name and description.

This section contains the following topics:

Creating the image animation (Flash Professional Only)

Adding navigation and text to the specials screen (Flash Professional Only)

 

Creating the image animation (Flash Professional Only)

TOP

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. You'll use a masking layer to make only one of the images visible. Then you'll create a series of tweens that move the movie clip upward, so that a different image is visible. The last image in the movie clip is a duplicate of the first one, so that the animation sequence can return to its initial state after the user has viewed the final image. The following image illustrates these concepts:

In the last section of the tutorial, you'll add ActionScript and user interface elements that let the user control the animation sequence.

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

  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. With the new movie clip instance selected, set the movie clip's x and y coordinates both to 0 in the Property inspector.

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

  5. On the Images layer, insert keyframes on Frames 20, 30, 40, and 50, as the the following image shows:

  6. In the Timeline, select the keyframe on 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 on 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 on Frame 40, select the images movie clip, and set its y coordinate to -300 in the Property inspector.

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

  11. Select the keyframe on Frame 10, and select Motion from the Tween pop-up menu in the Property inspector.

    This tweens the images movie clip's position between the keyframes on Frames 10 and 20.

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

  13. To create the mask layer, select the Images layer in the Timeline, and then select Insert > Timeline > New Layer (or click the Insert Layer button in the Timeline).

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

  15. Using the Rectangle tool in the Tools 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.

  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. 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 its contents show through the filled area on the mask. For more information about working with mask layers in Flash, see Using mask layers in Using Flash.

  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)), you'll add ActionScript that stops the animation at each keyframe, as well as user interface elements that let the user navigate between images.

 

Adding navigation and text to the specials screen
(Flash Professional Only) 

TOP

In this section, you'll add interactivity to the specials screen that lets the user control the transition between each animation. You'll also add dynamic text fields that display the name and description of each image.

To add text to display the names and descriptions of the specials:

  1. In Flash, open the file you completed in the previous section (see Creating the menu for the main screen (Flash Professional Only)).

  2. In the Timeline, select Frame 10 on 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 will display the name of the special whose image is currently being displayed.

  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. Create another text field below the first one to display a short description of the specials being viewed by the user.

  6. Using the Selection tool, resize the text field so that it's about three times as tall as the other text field.

  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.

    • Select Multiline from the Line Type pop-up menu.

    • Select Verdana from the Font pop-up menu.

    • Set the font size to 10.

    • Select Bitmap (no anti-alias) from the Font Rendering Method pop-up menu.

    • Type description in the Var text box.\

  8. In the Timeline, select the keyframe on Frame 10 on the Actions layer.

  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. On the Actions layer, select the keyframe on Frame 20 and enter the following code in the Actions panel:

    title = "Chinese Noodle Salad";

    description = "Rice noodles with garlic sauce, shitake mushrooms, scallions, and bok choy.";

    stop();

  11. On the Actions layer, select the keyframe on Frame 30 and enter the following code in the Actions panel:

    title = "Seared Salmon";

    description = "Filet of wild salmon with caramelized onions, new potatoes, and caper and tomato salsa.";

    stop();

  12. On the Actions layer, select the keyframe on Frame 40 and enter the following code in the Actions panel:

    title = "New York Cheesecake";

    description = "Creamy traditional cheesecake served with chocolate sauce and strawberries.";

    stop();

  13. On the Actions layer, select the keyframe on Frame 50 and enter the following code in the Actions panel:

    gotoAndStop("specials");

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

  14. Save your changes.

Next you'll add navigation to the specials screen that lets the user navigate between images and descriptions of each special.

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. In the Property inspector, set the graphic's x coordinate to 120 and its y coordinate to 188.

    The Stage in your application should look something like the following screen shot:

  6. In the Timeline, select the keyframe on Frame 10 on the layer named Key Catcher.

  7. From the Library, drag the Key Catcher button symbol and place it in the work area off the Stage.

    NOTE : To view the work area, in Flash choose View > 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. Select the key catcher button, and in the Actions panel, enter the following code:

    // Handle right soft key event ("Next" button):

    on(keyPress "<PageDown>") {

    play();

    }

    // Handle left soft key event ("Home" button):

    on(keyPress "<PageUp>") {

    gotoAndStop("main");

    }

    The first on(keyPress) handler advances the image animation to the next image in the sequence; the second one sends the playhead to the main application screen.

  9. Choose Control > Test Movie to test the final application in the emulator.
     

Copyright © ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash