Difference between revisions of "Chumby Flash Tutorials"

From Chumby Wiki
Jump to: navigation, search
(Playing .FLV Files Using NetConnection)
(Playing .FLV Files Using NetConnection)
Line 58: Line 58:
 
  }
 
  }
  
You can wrap everything up using functions as follows:
+
For a more advanced approach, you can wrap everything up using functions as follows:
 
  var connection_nc:NetConnection = new NetConnection();
 
  var connection_nc:NetConnection = new NetConnection();
 
  connection_nc.connect(null);
 
  connection_nc.connect(null);

Revision as of 00:18, 5 August 2008

Say Hello Using Parameters

Personalize a message for the owner of the Chumby. This tutorial also touches on using the Chumby properties. You can find more properties in the Chumby Property Dictionary.

This short tutorial uses the Adobe Flash IDE, so go ahead and open it up.

  1. Create a new document - 320px in width, 240px in height, at 12 frames per second.
  2. Make sure you are set to publish using Flash Player 8 or Flash Lite 3.0.
  3. Create a new Dynamic Text field on the main stage.
  4. Give the text field an instance name of hello_txt_fld.
  5. Add the following ActionScript to frame 1 of the timeline.
hello_txt_fld.text = "Hello ," + _root._chumby_user_name;

Run your widget on the Chumby or Virtual Chumby. If everything goes as planned, you should see Hello, Joe User on the screen (actual name may vary).


Playing .FLV Files Using NetConnection

In this tutorial you will learn the recommended way to stream a .FLV through the Chumby.

We will be using the Adobe Flash IDE, so go ahead and create a new document.

  1. Set the document to 320px by 240px, at 12 frames per second.
  2. Make sure you are set to publish using Flash Player 8 or Flash Lite 3.0.
  3. Open the Library Panel from the Window menu if it is not currently visible.
  4. Click the little arrow in the upper right hand corner of the Library Panel.
  5. Select New Video... from the drop down menu. This will open the Video Properties dialog box.
  6. In the Symbol field enter my_video and click OK.
  7. This will place a blank video object in your library titled my_video.
  8. Drag the my_video video object from the library to the main stage.
  9. Click to select the video object on the stage and using the Info panel set the width to 320, and the height to 240. Go ahead and center the video object if needed.
  10. With the my_video video object selected on the stage, enter my_video as the instance name in the Properties panel.
  11. Add the following ActionScript to frame 1 of the time line:
var connection_nc:NetConnection = new NetConnection();
connection_nc.connect(null);
var stream_ns:NetStream = new NetStream(connection_nc);
my_video.attachVideo(stream_ns);
stream_ns.play("http://path-to-your-flv/video.flv");

Run your widget on the Chumby or Virtual Chumby. You should see your video playing on the screen.

You can add the following code to pause the video:

this.onMouseDown = function () {
 stream_ns.pause();
}

Each time the screen is touched the video will be toggled between playing and paused.

To stop the video and clear the .FLV stream use the following code:

stream_ns.close();

When stopping the stream, your may notice that the video is still visible on the stage. If you would like to clear it completely use the following code:

my_video.clear();

You can easily add any of the code above to buttons to control the video. For example a stop button might look like:

on (press) {
 stream_ns.close();
 my_video.clear();
}

For a more advanced approach, you can wrap everything up using functions as follows:

var connection_nc:NetConnection = new NetConnection();
connection_nc.connect(null);
var stream_ns:NetStream = new NetStream(connection_nc);
my_video.attachVideo(stream_ns);

Create a function to play the video:

function playVideo () {
 stream_ns.play("http://path-to-your-flv/video.flv");
}

Create a function toggle the pause state:

function togglePause () {
 stream_ns.pause();
}

Create a function to stop and clear the video:

function stopVideo () {
 stream_ns.close();
 my_video.clear();
}

Create 3 buttons and place them on the main stage, with the following code:

The play button:

on (press) {
 playVideo();
}

The pause button:

on (press) {
 togglePause();
}

The stop button:

on (press) {
 stopVideo();
}

Now you can add video to your widgets the Chumby way! Enjoy.