Mobile Me(dia)

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

Mobile Processing GUI Development

/*
  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

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

Flash Lite Video Player

• 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.
• Following that, test and publish as above...

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);     
 }