MACROMEDIA FLASH 8-GETTING STARTED WITH FLASH LITE, Getting Started

Page 1: ...Getting Started with Flash Lite ...

Page 2: ...from Sorenson Media Inc 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 2005 Macro...

Page 3: ...ons Flash Professional Only 12 Flash Lite authoring features in Flash Professional 8 Flash Professional Only 14 Using Flash Lite document templates Flash Professional Only 16 Hello World Flash Lite application Flash Professional Only 18 About the stand alone Flash Lite player 23 Chapter 2 Creating a Flash Lite Application Flash Professional Only 25 Café application overview Flash Professional Only...

Page 4: ...4 Contents ...

Page 5: ...vice 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...

Page 6: ... 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 do...

Page 7: ...ont 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 ...

Page 8: ...8 Introduction ...

Page 9: ...ersion 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...

Page 10: ...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 dialo...

Page 11: ...an 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 on page 11 About Flash Lite content types Before you start d...

Page 12: ...y 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 sup...

Page 13: ...y 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 the Flash authoring tool The following figure illustrates the iterative development and testin...

Page 14: ...ash 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 applicat...

Page 15: ... 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 For more information about Flash Lite content types see About Flash Lite content types on page 11 For more information about using the Devi...

Page 16: ... Professional Only on page 16 Using Flash Lite document templates Flash Professional Only 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 ...

Page 17: ... 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 on page 10 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 th...

Page 18: ...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 on page 16 to create a new document that s preconfigured with the pr...

Page 19: ... 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 ...

Page 20: ... 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 a Select Standalone Player from the Content Type pop up menu b In the list of av...

Page 21: ...n 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 c Select the Nokia folder and click...

Page 22: ...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 ...

Page 23: ...lone 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 F...

Page 24: ...24 Flash Lite Overview ...

Page 25: ...plication overview Flash Professional Only 25 Viewing the completed application Flash Professional Only 26 Creating the application Flash Professional Only 27 Café application overview Flash Professional Only 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 th...

Page 26: ...hat they would like to make the call Viewing the completed application Flash Professional Only 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 a...

Page 27: ...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 restauran...

Page 28: ...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...

Page 29: ... 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 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 ...

Page 30: ...ng 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 on page 28 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 dr...

Page 31: ... 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 Stops the playhead at this frame Disable...

Page 32: ...sh Professional Only 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 ...

Page 33: ...p 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 ...

Page 34: ...0 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 ...

Page 35: ... 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 ...

Page 36: ...ash Professional Only 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 ma...

Page 37: ...ld 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 me...

Page 38: ...nd 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 trad...

Page 39: ...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...

Page 40: ...nal 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 ...

Page 41: ...templates about 16 global phones 16 Japanese phones 16 using 16 dynamic text fields 36 F Flash Lite authoring features in Flash Professional 8 14 authoring overview 12 availability 10 content types 11 stand alone player 10 technology overview 9 Flash Lite authoring features device settings 14 emulator 14 Flash Lite content types 11 Flash Lite emulator 14 H Hello World application 18 M mask layers ...

Page 42: ...42 Index ...