Creating the MP3 Player application demo

Sony Ericsson Mobile Communications Ab

Description

Tutorial
October 2009
Creating the MP3 Player
application demo
with Sony Ericsson Flash Lite™ UI componentsTutorial | MP3 Player application demo
Preface
About this tutorial
This tutorial demonstrates how Sony Ericsson UI components can be used to create real interactive
mobile applications and also gives a general overview of Project Capuchin.
Sony Ericsson Developer World
At www.sonyericsson.com/developer, developers find the latest technical documentation and
development tools such as phone White papers, Developers guidelines for different technologies, Getting
started tutorials, SDKs (Software Development Kits) and tool plugins. The Web site also features news
articles, go-to-market advice, moderated discussion forums offering free technical support and a Wiki
community sharing expertise and code examples.
For more information about these professional services, go to the Sony Ericsson Developer World Web
site.
This document is published by Sony Ericsson
This Tutorial is published by: Mobile Communications AB, without any
warranty*. Improvements and changes to this
text necessitated by typographical errors, Sony Ericsson Mobile Communications AB,
inaccuracies of current information or SE-221 88 Lund, Sweden
improvements to programs and/or equipment,
may be made by Sony Ericsson Mobile
www.sonyericsson.com/ Communications AB at any time and without
notice. Such changes will, however, be
incorporated into new editions of this document. © Sony Ericsson ...

Sujets

• Baladeur numérique
• Song Yu
• Application linéaire
• Sony Ericsson W800i
• Samurai champloo
• Clavier d'ordinateur

Informations

• Publié par: Ictae
• Nombre de lectures: 136
• Langue: English

Extrait

Tutorial

October 2009 Creating the MP3 Player application demo with Sony Ericsson Flash Lite™ UI components

Preface

About this tutorial

Tutorial | MP3 Player application demo

This tutorial demonstrates how Sony Ericsson UI components can be used to create real interactive mobile applications and also gives a general overview of Project Capuchin.

Sony Ericsson Developer World

At www.sonyericsson.com/developer , developers find the latest technical documentation and development tools such as phone White papers, Developers guidelines for different technologies, Getting started tutorials, SDKs (Software Development Kits) an d tool plugins. The Web site also features news articles, go-to-market advice, moderated discussion forums offering free technical support and a Wiki community sharing expertise and code examples. For more information about these professional services, go to the Sony Ericsson Developer World Web site.

This document is published by Sony Ericsson This Tutorial is published by:  Mobile Communications AB, without any warranty*. Improvements and changes to this Sony Ericsson Mobile Communications AB,  text necessitated by typographical errors, inaccuracies of current information or SE-221 88 Lund, Sweden  improvements to programs and/or equipment, m/  may be made by Sony Ericsson Mobile  www.sonyericsson.co Communications  AB at any time and without notice. Such changes will, however, be © Sony Ericsson Mobile Communications AB,  incorporated into new editions of this document. Printed versions are to be regarded as temporary 2   0 li 09. All    r t i o g   h d t o s  w re n s lo er a v d e  a d n .  d Y /o o r u     p a r r i e n   t  h a e   r c e o b p y y     g o r f a  t n h t i e s d     reference copies only. a cense document. *All implied warranties, including without Any rights not expressly granted herein are  limitation the implied warranties of reserved merchantability or fitness for a particular . purpose,  are excluded. In no event shall tion (October 20 )  Sony Ericsson or its licensors be liable for First edi 09  incidental or consequential damages of any Publication number: 1233-4351.1  nature, including but not limited to lost profits or commercial loss, arising out of the use of the information in this document.

2

October 2009

Tutorial | MP3 Player application demo

Typographical conventions

In this document code examples are written in Courier font: softKeys sks. MSK = "Play"; _ _ Names of labels, buttons, laye rs and menus are written in italics, for example, Select File - Install extension . Names of edited values, file names and input text are within quotes, for example, "MXP files.zip".

Trademarks and acknowledgements

Adobe, Adobe Flash Lite and Adobe Flash are either trademarks or registered trademarks of Adobe Systems Incorporated in United States and/or other countries. Java and all Java based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc, in the U.S. and other countries. Other product and company names mentioned herein may be the trademarks of their respective owners.

Document history

Change history 2009-10-12

Doc. no. 1233-4351.1 First version published on Developer World

3

October 2009

Contents

Tutorial | MP3 Player application demo

Introduction .................................................................................................................5 Skill level ................................................................................................................... .5 Requirements ............................................................................................................5 Content of the zip file ................................................................................................7 UI components used in this tutorial ..........................................................................7 Tutorial ...................................................................................................................... ...8 Creating the application ............................................................................................8 Frame 1 – Main screen ........................................................................................10 mcPlayer Frame 1 – Player definitions ................................................................13 mcPlayer Frame 2 – Player startup ......................................................................15 mcPlaylist Frame 1 – Songs playlist ....................................................................16 Testing .....................................................................................................................18

4

October 2009

Introduction

Tutorial | MP3 Player application demo

This tutorial shows how to use Sony Ericsson Flash Lite™ 2.0 UI Components in developing real mobile applications. The MP3 Player application lists MP3 files in the “music” folder on the memory card in the phone, builds a playlist and gives the user possibility to play a selected song or go to next/previous song. The following data is displayed for the song being played: ID3 tag (if available), music length and remaining time. Note : Support for Project Capuchin is required for the application to run on the phone. A list of phones supporting Project Capuchin can be found at: http://developer.sonyericsson.com/device/ searchDevice.do?defaultSearch=true&attributes=e3b7531a-468c-40c5-9e54-8b1ce192ebb3 . To see the final demo app lication, test the MP3Pla yer.jar and MP3Player.jad files in your Capuchin enabled phone. For more information about testing, see “Testing” on page 18.

Skill level

Intermediate – Good skills in Action Script 2.0. Adva nced skills in Adobe Flash CS3 or CS4 IDE.

Requirements

The applications and tools required to execute this tutorial are listed below. • Adobe Flash CS3/CS4 A multimedia authoring application used to create web applications, games, movies, and content for embedded devices. It features support for ve ctor and raster graphics and ActionScript. http://www.adobe.com/products/flash/ • Adobe Extension Manager Adobe tool devoted to install new extensions for Adobe Flash CS3/CS4. http://www.adobe.com/exchange/em_download/ • Java runtime environment (JRE) The latest version of JR E and installation instru ctions are available at http://www.java.com/en/download/manual.jsp • Sony Ericsson UI Components The Sony Ericsson UI components are available at http://developer.sonyericsson.com/site/global/docstools/flashlite/p_flashlite.jsp . Install them using the Adobe Extension Manager and read the help documentation for further information on applic ation architecture.

5

October 2009

Tutorial | MP3 Player application demo

• Project Capuchin Kit The Project Capuchin Kit extends Adobe Flash CS3 and CS4 to support creating and publishing Flash content as a Project Capuchin application. This file can be downloaded from http://developer.sonyericsson.com/site/global/docstools/projectcapuchin/p_projectcapuchin.jsp .

The following Sony Ericsson Project Capuchin Platform Services are needed: • File • Multimedia These files can be downloaded from http://developer.sonyericsson.com/site/global/docstools/projectcapuchin/p_projectcapuchin.jsp

After successfully installin g all MXP packages, they sh ould be listed in the Adob e Extension Manager as in the image below:

6

October 2009

Content of the zip file

Tutorial | MP3 Player application demo

The "MP3Player.zip" file contains the folder structure and content described below:

• “Capuchin Services” folder: _ p to list files from a specific folder. • “File 4.01.mx ”: Used • “Multimedia 4.0.2.mxp”: Used to play media files. _ • “Installation Files” folder: • “MP3Player.jar” and “MP3Player.jad”: The insta llable application (MIDlet) for your Capuchin enabled Sony Ericsson phone. • “Source File” folder: • “MP3Player.fla”: The Flash source of the MP3 Player application. This tutorial describes how the Flash file was implemented, using the Sony Ericsson UI components beta version. • “Tutorial” folder: • “tutorial_flash_ui_mp3_player _r1a.pdf”: This document.

UI components used in this tutorial

The following Sony Ericsson Flash Lite UI components are used in this tutorial: • List Single-row: Lists the MP3 files found in the “music” folder in the phone. • Soft Keys: Holds the actions for the application and for the current highlighted object. • Progress Indicator: Displays the Playback time progress of the song being played. • Text: Displays media details (Title, Author, Album, and Playback time).

7

October 2009

Tutorial

Creating the application

Tutorial | MP3 Player application demo

Open the "MP3Player.fla" file. In the Library , you find MovieClips, an Image, Capuchin Services and the four Sony Ericsson Flash Lite components used: List Single-row, Progress Indicator, Soft Keys and Text.

The application has the following layers: ActionScript, SoftKeys and Container. Mobile phones have a small amount of available memory to run Flash Lite, which forces us to a strict use of it. The MP3 Player application is structured considering this memory limitation: unused items (unshared) are removed from memory when the view changes and they are no longer needed. There are two MovieClips in the Library ( Window > Library ) that contains an entire screen (view) of the application: mcPlayer and mcPlaylist . The mcPlayer view contains the current opened song information, such as Artist, Track name, Album and playback time. It is also the main screen, since the application is started with this view loaded.

8

October 2009

Tutorial | MP3 Player application demo

The mcPlaylist view contains the list of all so ngs found at the specified path ( Memory card > Music folder). The songs are played in the same order that they are listed in the playlist, and this view helps the user easily find the desired song.

The views are switched when the user interacts with the Soft Keys. The mcContainer_mc MovieClip (placed in the Container layer) holds the current view, discarding the elements of the other view. For instance, if the mcPlayer is opened and the left soft key (LSK) is pressed to open the mcPlaylist , mcContainer_mc unloads mcPlayer and loads mcPlaylist view instead.

As mentioned before, the Sony Ericsson Flash Lite UI Components used are:

Soft Keys: Shared resource used for both mcPlayer and mcPlaylist views, responsible for the actions in each view.

List Single-row: Placed inside the mcPlaylist view (unshared), displays all songs available in the specified folder on the phone.

Progress Indicator: Placed inside the mcPlayer view (unshared), gives a visual feedback of the elapsed time of the song.

Text: Used inside the mcPlayer view (unshared) to show song information.

9

October 2009

Frame 1 – Main screen

Tutorial | MP3 Player application demo

The code on the main level of the application, initialises the File and Multimedia services of Capuchin, preparing the whole environment of the MP3 Player. This screen also creates a key listener to interact with the Left and Right navigation keys, which allows the user to skip or go back to a song without opening the playlist.

The Soft Keys component ( softKeys_sks instance) is always visible and is responsible for switching views, for playing or pausing a song, for selecting a new song or exit the application. There are three Soft Keys: left (LSK), middle (MSK) and right soft key (RSK). Their labels can be customised either using the Parameters panel ( Window > Properties > Parameters ) or using code. The instance placed on stage already has its labels customised via the Parameters panel with the following values:: Parameter LSK content (text or path) MSK content (text or path) RSK content (text or path)

Value "Playlist" "Play" "Back"

10

October 2009

Tutorial | MP3 Player application demo

The Soft Keys labels vary when the playlist view is loaded or when the song state (playing or paused) changes. This modification during runtim e is possible using ActionScript code. The code below shows the customisation of MSK when the song starts to play: _ _ softKeys sks. MSK = "Pause"; The following table shows all the values that each soft key can assume in the application: LSK label MSK label RSK label Application starts "Playlist" "Play" "Back" mcPlayer view is loaded "Playlist" "Play" "Back" A song starts to play with mcPlayer view "Playlist" "Pause" "Back" loaded A song is paused with mcPlayer view "Playlist" "Play" "Back" loaded mcPlaylist view is loaded "" "Play" "Back" The Soft Keys component dispatches two events when any soft key is selected: onSoftKeyDown (when a Soft Key is pressed) and onSoftKeyUp (when a Soft Key is released). This application uses the onSoftKeyDown event with the following structure to respond to user interaction: _ _ softkeys sks.onSoftKeyDown = softkeys sksPressed; function softkeys_sksPressed(softkey:String):Void { switch(keyPressed) { case "LSK": // Left soft key actions. break; case "MSK": // Middle soft key actions. break; case "RSK": // Right soft key actions. break;  } } The function of each soft key may vary according to the selected view, since the views can redefine the Soft Keys onSoftKeyDown event handler. The openScreen method allows the user to switch between views. The following code is implemented on the left soft key of main frame 1: openScreen("Playlist"); If the application does not have songs to play, LSK and MSK are disabled to avoid unauthorised interactions:

11

October 2009