:::: MENU ::::

Creating Your First Chumby Widget – Part One: Creating Your Application

With all the new devices coming out these days (tablets, mobile phones, set-top boxes, etc.), it can be a bit overwhelming to try and figure out just how you’re supposed to create and submit apps for all the different platforms that are becoming available. Enter Chumby: With no strict API’s to learn, and running plain-old .swf files for all of its applications, all you have to worry about is learning a few tricks on how to upload, test, and debug your app on a Chumby device. To make things even better, Chumby runs on a number of different platforms, from mobile devices, to tablets, to HD TV’s; so once you have learned the basics, you will be able to immediately start developing apps for any of these devices! OK, enough with the sales pitch, let’s get started building your first Chumby Widget!

In this tutorial I will be walking you through the process of building a simple clock using Actionscript 3.0 and Flash CS5 Professional. This will most likely be way too basic for many of you, so feel free to skip to the end, download the example files, and move on to the next tutorial where I will be discussing testing and debugging your application on a Chumby device. If you’re still with me, you can either download the starter files for this tutorial here: ChumbyClockStart.zip or simply create your own as we go through the steps.

First things first, let’s create a new AS3 Flash file and save it as “ChumbyClock.fla”

The next step is to make sure our applications is set to the correct size for our device.

For this tutorial I will assume that you are developing for either the Chumby 8 or the Insignia Infocast 8″, both of which have a display size of 800×600.

Go ahead and set the Stage dimensions for your widget to 800×600 to match our target device size.

Now that we have the proper dimensions, we have to make sure that we are publishing to the correct Flash Player version. Under the Flash Publish Settings (File -> Publish Settings), be sure that you have selected Flash Player 10 and Actionscript 3.0 as your publishing options.

Create two new layers: one named “Text” which will hold the textfield that displays our time, and the other named “Logo” which will hold our logo graphic. Once you have your layers setup, drag a copy of the logo graphic from the library to the stage and place it on the “Logo” layer.

If you did not download the starter files, you can simply insert any graphic you like, or use none at all.

Next, add a new text field to the “Text” layer, and give it an instance name of “timeTxt” (without the quotes).

In order to ensure that our text shows up properly on all devices, we will need to embed our font (in this case, I have chosen to use Helvetica). Under the Font Embed options, choose to embed “Basic Latin.” This will include all the basic characters, as well as numerals, and some punctuation (such as the colon symbol which will be using in our clock).

With all our assets in place, it’s time to make this clock do something. Create a new layer and name it “Actionscript.” This layer will contain all the Actionscript code for our widget. Select the first frame on the Actionscript layer, then open the Actions panel and insert the following code:

If you publish your movie, you should now see the current time displayed on the screen.

That’s it! A simple working clock. Now as cool as this is, wouldn’t be a lot cooler to see your clock working on your Chumby device!? In the next tutorial, I will show you how to test your widgets on the Chumby device!

Source Files

  • You can download the complete files from this tutorial here: Chumby Clock.zip
  • I’ve also created a second version of this example that uses a Document class instead of placing the Actionscript code inside the .Fla file. You can view the class based example here: Chumby Clock Class Based.zip

Key Points to Remember When Developing Apps for the Chumby:

  1. Make sure your movie and assets are sized correctly for the device you are targeting. In the case of this tutorial, we were targeting the Chumby 8 and Insignia Infocast 8″ which both have a display size of 800×600.
  2. Double check that your publish settings are set to Actionscript 3.0 and Flash Player 10.
  3. Embed your fonts.




3 Comments

So, what do you think ?