Mobile Me(dia)

Shawn Van Every Shawn.Van.Every@nyu.edu
Spring 2008
H79.2690.1

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;
    }
  }
}		
Working with other Mobile Processing GUI components is much the same.

Have a look at: PCheckBox, PImageLabel, PList and PRadioButton. I would stay away from PScrollBar for now (as it seems to have errors).

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)
  1. Open Flash CS3 (Professional)
  2. New File, Flash File (Mobile)
  3. Choose Flash 3 device, set Player Version to Flash Lite 3.0, ActionScript 2.0, Standalone Player
  4. Click "Create"
  5. This opens up Flash with the settins for publishing to that device (any Flash Lite 3 phone
  6. In the Tools panel, select the "T" for text and click on the workspace. Type in "Hello World".
  7. Make sure in the properties panel that it is "Static Text"
  8. Under "Control" select "Test Movie" and it will open in the emulator portion of the Device Central application.
  9. Following that, back in the Flash program you can publish and send it to your phone for testing


More Information
Mobile and Devices Developer Center
Getting Started with Adobe Flash Lite
Book: Foundation Flash Applications for Mobile Devices

Flash Lite Video Player

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

ActionScript Code
stop(); // Stop the animation on this frame

// fscommand2 function allows lower level access to the device
// SetSoftKeys sets the softkey of the device to be used by flash
// http://livedocs.adobe.com/flashlite/2/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000353.html
// All of the fscommand2 possibilities:
// http://livedocs.adobe.com/flashlite/2/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000353.html
fscommand2("SetSoftKeys", "", "Exit");
// A good example:
// http://www.metah.ch/blog/2006/08/23/meeting-fscommand2-with-flash-lite-20/

// Objects for opening the video stream
var ncVideo:NetConnection ;
var ns:NetStream;

// A variable for checking the playback progress
var check:Number;


// Object with onKeyDown function to test the softkey pressed
var tmpObj:Object = {};
tmpObj.onKeyDown = function():Void{
	if (Key.getCode() == ExtendedKey.SOFT2) {
          fscommand2("Quit");
          return;  
	}

	// Get the actual key pressed, chr turns it from ASCII to a number
	var index:Number = chr(Key.getCode());    
	// Make sure it is a number and in the range we want
	if(!isNaN(index) && (index >= 1 && i <= 2)){
		// 0 to 1
    	index = index - 1;
		// Call the playVideo function
    	playVideo(index);      
	}
	
	if(!check)clearInterval(check);
	    check = setInterval(getTimeInfo, 300, ns, video_txt);
}
Key.addListener(tmpObj); // Tell flash to call our tmpObj.onKeyDown function


// Here is our playVideo function
function playVideo(video_index:Number):Void
{
    
	// Give the path to the video based on the passed in video_index
	if (video_index == 0)
	{
		// An FLV video which uses NetConnection and NetStream
		
		// Initialize the NetConnection object if it isn't already
		if(!ncVideo)
		{
    		ncVideo  = new NetConnection();
    		ncVideo.connect(null);        
		}
	
		// Initialize the NetStream object if it isn't already
		if(!ns){    
    		ns = new NetStream(ncVideo);  
		}   

		ns.play("http://openvlog.mobvcasting.com:80/posts/attachment_1153009234_348.3gp.flv");
	    test_video.attachVideo(ns); // Tell our video object to play that video
	}
	else 
	{
		// A 3GP video, doesn't uses NetConnection or NetStream, just the player object
	
		// Don't use netstream and netconnection for 3gp/mp4 or non-flv content
		test_video.play("http://openvlog.mobvcasting.com:80/posts/attachment_1153009234_348.3gp");
	}
	//test_video.play("http://openvlog.mobvcasting.com/posts/attachment_1186624834_963.3gp.flv");
}

function getTimeInfo(ns:NetStream, txt:TextField):Void{ 
     txt.text = "Playing video: " + Math.round(ns.time);     
 }
More Information
Creating video content for mobile devices
Flash Lite 3 video capabilities
How to play FLV videos from YouTube using Flash Lite 3
Authoring mobile video content for Flash Lite 2.x