Chumby Flash Tutorials

From Chumby Wiki
(Redirected from Chumby Tutorials)
Jump to: navigation, search

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. If you intend to test your widget on Virtual Chumby: Click the Embed button in the Properties pane for the text field, and select all character sets required to display your message text. (see this Chumbysphere forum message for details)
  5. Give the text field an instance name of hello_txt_fld.
  6. 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 an .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, you 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. Adjust and add the following code 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);

Create a function to play the video:

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

Create a function to 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. Add the following ActionScript to the buttons:

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.

Capturing a Screen "Swipe"

In this tutorial we will capture a large "swipe" on the Chumby screen. A "swipe" is the act of pressing your finger on the screen and dragging it a specific direction, then lifting your finger.

A large "swipe" runs from one border, either the top, bottom, right, or left, to the opposite border.

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. Create a new Dynamic Text field on the main stage.
  4. Give the text field an instance name of swipe_txt_fld.
  5. Add the following ActionScript to frame 1 of the main time line.
var swipe_start_x:Number = 0;
var swipe_start_y:Number = 0;
function startSwipe () {
 swipe_start_x = _xmouse;
 swipe_start_y = _ymouse;
}
function endSwipe () {
 var swipe_end_x:Number = _xmouse;
 var swipe_end_y:Number = _ymouse;
 var swipe_dist_x:Number = Math.round(swipe_end_x - swipe_start_x);
 var swipe_dist_y:Number = Math.round(swipe_end_y - swipe_start_y)
 //check for a swipe to the right
 if (!isNaN(swipe_dist_x) && (swipe_dist_x > 200)) {
  swipedRight();
 }
 //check for a swipe to the left
 if (!isNaN(swipe_dist_x) && (swipe_dist_x < -200)) {
  swipedLeft();
 }
 //check for a swipe towards the top
 if (!isNaN(swipe_dist_y) && (swipe_dist_y < -130)) {
  swipedUp();
 }
 //check for a swipe towards the bottom
 if (!isNaN(swipe_dist_y) && (swipe_dist_y > 130)) {
  swipedDown();
 }
}
function swipedRight () {
 swipe_txt_fld.text = "swiped right";
}
function swipedLeft () {
 swipe_txt_fld.text = "swiped left";
}
function swipedUp () {
 swipe_txt_fld.text = "swiped up";
}
function swipedDown () {
 swipe_txt_fld.text = "swiped down";
}
this.onMouseDown = function () {
 startSwipe();
}
this.onMouseUp = function () {
 endSwipe();
}

This is just one approach on capturing a screen "swipe". You can add any functionality you need triggered by adding code to the 4 following functions:

function swipedRight () {
 swipe_txt_fld.text = "swiped right";
}
function swipedLeft () {
 swipe_txt_fld.text = "swiped left";
}
function swipedUp () {
 swipe_txt_fld.text = "swiped up";
}
function swipedDown () {
 swipe_txt_fld.text = "swiped down";
}

You can adjust the "trigger point" of the "swipe" by adjusting the numbers in these 4 functions:

//check for a swipe to the right
if (!isNaN(swipe_dist_x) && (swipe_dist_x > 200)) {
 swipedRight();
}
//check for a swipe to the left
if (!isNaN(swipe_dist_x) && (swipe_dist_x < -200)) {
 swipedLeft();
}
//check for a swipe towards the top
if (!isNaN(swipe_dist_y) && (swipe_dist_y < -130)) {
 swipedUp();
}
//check for a swipe towards the bottom
if (!isNaN(swipe_dist_y) && (swipe_dist_y > 130)) {
 swipedDown();
}

If you want to disable the "swipe" reading at anytime, you can do the following:

delete this.onMouseDown;
delete this.onMouseUp;

Used properly, a screen "swipe" can add another level of interaction to your widgets.


Creating a Mute Toggle Button

It is good practice to allow a Chumby user to turn on and off the audio on a widget. In this short tutorial you will do just that.

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. Add the following ActionScript to frame 1 of the main time line.
var global_snd:Sound = new Sound();
var current_volume:Number = global_snd.getVolume();
var is_muted:Boolean = false;
function toggleMute () {
 if (!is_muted) {
  current_volume = global_snd.getVolume();
  global_snd.setVolume(0);
  is_muted = true;
 } else {
  global_snd.setVolume(current_volume);
  is_muted = false;
 }
}

Create a new button on the stage and add the following code to activate the mute toggle:

on (press) {
 toggleMute();
}

If you would like the sound to be muted when your widget starts, add the following code after the toggleMute function:

toggleMute();

This will work on any audio source, video included.


Creating a Custom Timer

In some cases you may need the ability to trigger events in your widget based on an elapsed time. Let's take a look at how to do it.

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. Create a new Dynamic Text field on the main stage.
  4. Give the text field an instance name of timer_txt_fld.
  5. Add the following ActionScript to frame 1 of the main time line:
var timer_id:Number = setInterval(updateTimer, 2000);
function updateTimer () {
 timer_txt_fld.text = "I am a timer!";
 clearInterval(timer_id);
}

Run the widget and after 2 seconds you should see the text I am a timer! on the screen.

The setInterval() function counts in milliseconds, so 2000 = 2 seconds.

In the example above the timer will trigger after 2 seconds and then stop. If you would like the timer to trigger every 2 seconds continuously, you would remove the clearInterval() function from the code:

var timer_id:Number = setInterval(updateTimer, 2000);
function updateTimer () {
 timer_txt_fld.text = "I am still a timer!";
}

It is good practice to make sure that you clear the timer interval when it is no longer needed.

For a more advanced approach we can use functions:

var timer_id:Number;
function startTimer (timer_amt:Number) {
 timer_id = setInterval(updateTimer, timer_amt);
}
function updateTimer () {
 timer_txt_fld.text = "I am also a timer";
}
function stopTimer () {
 clearInterval(timer_id);
}

Create 2 buttons on the stage and add the following code to control the timer:

Start the timer button:

In this case we are passing 5000 to the startTimer() function, creating a 5 second timer. Pass a different number to adjust the length of time.

on (press) {
 startTimer(5000);
}

Stop the timer button:

on (press) {
 stopTimer();
}

In the above example the timer will continually run and trigger every 5 seconds until the stopTimer() function is triggered by the button.

To set the timer using minutes, you can do something like this:

function startTimer () {
 var timer_min:Number = (1000*60) * 10;
 timer_id = setInterval(updateTimer, timer_min);
}

The above code creates a timer that would trigger every 10 minutes until the stopTimer() button is pressed.

You can create multiple timers by using a unique timer_id variable for each one. For example:

var timer_a_id:Number = setInterval(updateTimerA, 2000);
var timer_b_id:Number = setInterval(updateTimerB, 10000);
function updateTimerA () { //triggered after 2 seconds
 timer_txt_fld.text = "I am timer A";
 clearInterval(timer_a_id);
}
function updateTimerB () { //triggered after 10 seconds
 timer_txt_fld.text = "I am timer B";
 clearInterval(timer_b_id);
}

It is very important to note that you must call clearInterval() before starting another setInterval() using the same timer_id. If you forget to do this you will lose your reference to the timer you started, and will no longer be able to stop it using clearInterval().

Also, the timers are only active while your widget is running, and do not carry over when the widget is loaded again.

Creating a crossdomain.xml File

If you need to access assets outside your widget, like loading external images, video, etc., you will need a crossdomain.xml file on the web server hosting the assets. Here is how to create one.

  1. Open a plain text editor and create a blank document.
  2. Copy and paste the following code into the text file.
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*.chumby.com" />
</cross-domain-policy>

Save the text file as crossdomain.xml and upload the file to your web server root.

This will allow any access to external assets originating from chumby.com for your widget. If you need to open up the access even further you can use the following instead:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*" />
</cross-domain-policy>

Note that this will allow any .SWF file, originating from any domain, access to your hosted assets.