Mobile Me(dia)

Week 8 - Mobile Application Development with Mobile Processing Continued and Flash Lite

Mobile Processing GUI Development

Mobile Processing makes development of JME apps easier in quite a few ways. One such way is in GUI (graphical user interface) development.

Below is an example of an application which uses PContainers, PButtons and PLabels to allow switching between screens in a Mobile Processing application.

/*
This example shows how screens and buttons can be used with Mobile Processing
*/
import processing.core.*;
public class MPGUIExample extends PMIDlet
{
/*
First we declare some PContainers
These hold different GUI elements and we can use them
to hold all of the GUI elements for any particular screen
http://mobile.processing.org/reference/reference.php?name=PContainer
(Ignore the scrollbar stuff in the docs, it causes problems)
*/
PContainer screen1;
PContainer screen2;
/*
Declaring some buttons to use
http://mobile.processing.org/reference/reference.php?name=PButton
*/
PButton button1;
PButton button2;
/*
Declaring some labels to use
http://mobile.processing.org/reference/reference.php?name=PLabel
*/
PLabel label1;
PLabel label2;
PContainer currentContainer;
void setup()
{
/*
Instantiate the PContainers
No arguments for the constructor
*/
screen1 = new PContainer();
screen2 = new PContainer();
/*
Instantiate the PButtons
Pass in a String to display on the button
*/
button1 = new PButton("Hi");
button2 = new PButton("World");
/*
Set the bounds (the size and position for the buttons)
x, y, width, height
*/
button1.setBounds(10,10,100,20);
// Allowing button2 to decide how big it should be
// to fit it's text based upon the dimensions we supply
button2.calculateBounds(0,0,width,height);
// Using those dimensions and the screen dimensions to
// decide where to place it and how big to make it (centered on the screen)
button2.setBounds(width/2-button2.width/2,height/2-button2.height/2,button2.width,button2.height);
/*
Add the buttons to the containers
*/
screen1.add(button1);
screen2.add(button2);
/*
Instantiate the PLabels
Pass in a String to display on the label
*/
label1 = new PLabel("Click the button");
label2 = new PLabel("Go ahead");
/*
Set the size and location of the labels
*/
label1.setBounds(5,5,width,10);
label2.setBounds(5,5,width,50);
/*
Add the labels to the containers
*/
screen1.add(label1);
screen2.add(label2);
/*
Tell the containers to start doing their thing
*/
screen1.initialize();
screen2.initialize();
/*
Set current container equal to the container we want to display to start
*/
currentContainer = screen1;
}
void draw()
{
background(200);
/*
Draw the current container
We are switching up what the current container points to (is equal to) to change what is displayed
*/
currentContainer.draw();
}
/*
If a key is pressed, pass it along to the currentContainer
*/
void keyPressed()
{
currentContainer.keyPressed();
}
/*
If a key is released, pass it along to the currentContainer
*/
void keyReleased()
{
currentContainer.keyReleased();
}
/*
When a container registers a keyPress and it thinks a button has been pressed
it passes it along to that button which generates a library event
*/
void libraryEvent(Object library, int event, Object data)
{
// Check which button it is (which object)
if (library == button1)
{
// Switch the screen..
currentContainer = screen2;
}
else if (library == button2)
{
currentContainer = screen1;
}
}
}

Flash Lite Introduction

Flash is a relatively newcomer to the mobile development scene but it has made some big waves already. Since there is a large community of developers and designers who use Flash in their daily lives, being able to run Flash based applications on mobile phones is a big deal.

Aside from that, Flash, due to it's history is a pretty strong fit for mobile development, it has a small footprint, the apps are small, it is somewhat close to a write once run anywhere type of platform and so on. It is also very strong in some areas that Java has been weak such as animation and media playback.

In our ongoing quest to utilize the mobile device as media centric device, it is worthwhile to look at Flash, especially now that Flash Lite 3 supports FLV content (the seeming format of choice for web based video) along with MPEG-4 (variants such as 3gp and 3g2 depending on the device).

Currently Flash Lite 3 does not come pre-installed on many devices (perhaps the N95 8GB model) but can be downloaded for free from Adobe: Download Adobe Flash Lite 3 Developer Edition (This is an application that must be installed on the phone.)

To author for Flash Lite 3 you need to use Flash CS3 or greater. You can auther for previous versions of Flash Lite using previous versions of Flash but you loose out on many of the goodies that Flash Lite 3 offers.

Hello World with Flash Lite (using Flash CS3)

Open Flash CS3 (Professional)

New File, Flash File (Mobile)

Choose Flash 3 device, set Player Version to Flash Lite 3.0, ActionScript 2.0, Standalone Player

Click "Create"

This opens up Flash with the settins for publishing to that device (any Flash Lite 3 phone

In the Tools panel, select the "T" for text and click on the workspace. Type in "Hello World".

Make sure in the properties panel that it is "Static Text"

Under "Control" select "Test Movie" and it will open in the emulator portion of the Device Central application.

Following that, back in the Flash program you can publish and send it to your phone for testing

Flash Lite Video Player

This describes how to make a video player in Flash Lite 3.

Create a Flash document as described above.

In the Library panel, select "New Video", leave it's default name and make sure "Video (ActionScript-controlled)" is selected. Don't select Bundle source in SWF since we are going to loading from the network.

Drag the new item into your workspace and position it where you would like.

Select it and in the properties panel give it an instance name such as "test_video" (if you want it to work out of the box with the actionscript we are using below).

Create a new layer and select the actions panel

In that panel, paste in the below actionscript code which is commented.