Posts Tagged ‘AS3’

Creating a Chumby Configuration Widget

Friday, February 26th, 2010

In my last post, we quickly went over Writing your first Chumby widget. This time, we’ll expand on that by adding a configuration widget.

A configuration widget is another Flash file that sets up parameters for your Chumby widget, so those settings are available when the widget loads into your Chumby. For example, perhapse you have an analog clock widget. You could create a configuration widget that allows someone to choose a color for the face of the clock, or whether or not to display the second hand. The user could choose a color and save their preferences in the Chumby database. Then, when their Chumby loads your clock widget, it would look for and download any settings for that widget.

Here’s what we’ll need:

(more…)

Writing your first Chumby widget

Monday, February 1st, 2010

tic-toc-goes-the-clockSo, you got your first Chumby and have browsed through the 1500 open source widgets, and now you’re ready to contribute to the open source community by writing your own widget. There’s lots of resources out there, so we’ll just cover the basics here.

Here’s what you need:

  • A Chumby
  • Adobe Flash or other developing environment for creating SWF files
  • An account at Chumby.com

Open up Flash. Set your size to 320 x 240 and frame rate to 12 frames per second. In Publish Settings, set the Player to Flash Player 8 and the Script to ActionScript 2.0. Chumby allows widget up to 100kb in size, which is plenty of room for code, but can get tight when working with audio and video.

For this tutorial, we’ll make an analog clock. But there are hundreds of clocks already! Yes there are, but I like to have every other widget be a clock, and I’ve only found about a dozen clocks that I really like. That is one of its primary functions, after all.

First of all, set up your assets. You’ll need three clock hands, positioned in the center of the stage, with the registration point properly set. Name them hourHand_mc, minuteHand_mc, and secondhand_mc.

OK, now the code:

onEnterFrame = function() {
	dt = new Date();
	//set hour hand
	hrs = dt.getHours()+dt.getMinutes()/60+dt.getSeconds()/3600;
	angle = hrs*30;
	if (angle!=hourHand_mc._rotation) {
		hourHand _mc._rotation = angle;
	}
	//set minute hand
	mns = dt.getMinutes()+dt.getSeconds()/60;
	angle = mns*6;
	if (angle!=minuteHand_mc._rotation) {
		minuteHand _mc._rotation = angle;
	}
	//set second hand
	scs = dt.getSeconds();
	angle = scs*6;
	if (angle!=secondHand_mc._rotation) {
		secondHand _mc._rotation = angle;
	}
}

Let’s break it down. On each frame we create a new date object. Then we get the hours of the date object. We also add in the minutes and seconds because we want the hour hand to move a tiny bit every second, not just once an hour. Next we convert the hours into degrees by multiplying by 30. (360 degrees per 12 hours makes 30 degrees per hour). Next we check if the hour hand needs to be changed. It should only be changed once every 12 frames, not every frame. Using this if statement prevents unnecessary redrawing of the screen, which can save processing time and make a widget run more smoothly. Though, you’ll probably not notice any difference in this simple example.

The minute hand and second hand go through the same process.

OK, save it, publish it, and upload it to Chumby.com, but don’t make it public yet. Add it to a channel on your chumby and try it out. You’ll undoubtedly find lots of things to tweak with your clock. Did you even give your clock a face? Maybe it needs a tick sound, or a gong on every hour. Maybe you don’t want a typical analog clock. Changing the code for a digital clock should be pretty easy.

This is a simple example, but it should get you on your way. In my next post, I’ll write about creating a configuration file, and playing with the accelerometer. (unless I forget or change my mind). Until then, make a cool clock.

The Problem with Probability

Friday, January 22nd, 2010

If you were to flip a coin 10 times, and it comes up heads each time, you might think, “On the next flip, it’s SURE to come up tails – it’s due.” If you flip the coin 10 more times and again it comes up heads each time, you might think, “The next flip will surely be HEADS. Just look at the statistics.” Of course, we know that any flip has just as much chance as being heads as it does tails (assuming the coin is evenly weighted and symmetrical). So how many flips does it take to change our feeling about the next flip? Somewhere between 10 and 20 flips? (more…)

Flash Camera

Monday, December 14th, 2009

The Flash plugin is required to view this object.

On a recent project (which will be revealed later this week) we needed to save an image created in a Flash application, using AS3 and PHP. It turned out to be really easy. Here’s how we did it…

(more…)

Stopwatch for Cubers ver 2.0

Thursday, December 3rd, 2009

What do you know? I did get around to updating my timer. Introducing Cube Clock 2.0 for Rubik’s Cubers (and other cubes) with fancy new graphics, sounds, and a settings screen. See Stopwatch for Cubers for the original version.

The Flash plugin is required to view this object.

If you want to study your cube before the time starts, click the SETUP button to specify how many seconds you would like to study. The default is 0 which means the time starts as soon as you release the space bar (or click the START button). You can also toggle sounds on or off.

Let me know if you would like to see any features in the next version. And, of course, post your times in the comments.

Cube Timer v2.0 Source (FLA)

What a tasty flash game…

Thursday, November 26th, 2009

Here’s a game for all ya’ll just in time for the big turkey day. Feel free to download the .fla file and see how this game is built. Don’t forget to post your scores in the comments!

The Flash plugin is required to view this object.

Here is the FLA file.

Stopwatch for Cubers

Thursday, November 12th, 2009

A while ago I built a simple Flash app for people who can solve a Rubik’s Cube (or other cube brand).  Other apps that I’ve seen require that you use the mouse to click the start and stop buttons.  That can add a few extra seconds to your time.  On my solution, the Cube Clock, the time starts when you pick up the cube from the keyboard, releasing the space bar.  Then when you’re finished solving the cube, just tap the space bar again and the timer will stop.

Some timers have a feature that allow you to examine the cube for 15 seconds before the time starts.  I might add that feature into the next version (if there is a next version).  So, get your cube out and try out this timer.  And be sure to post your time in the comments area.

Fun with Flash: Gravity

Thursday, September 3rd, 2009

A while ago, I built a Flash animation for one of our clients that showed particles floating around while an attractor sucked them up. It was so much fun building and testing it that I started building a game out of it. I took the magnetic algorithm I was using in the animation and put it in the game, but I replaced the particles with a single missile and used multiple attractors. I turned it into planets in space with an orbiting rocket. It’s entertaining to see how long your rocket will orbit the planets before crashing into one.

Go ahead and try it out. (more…)

For Independence Day set off some particle effects!

Thursday, July 2nd, 2009

FireworkWith Independence Day (Fourth of July) just a couple days away, I thought I’d share some fireworks. But these ones are safe and eco-friendly. And, to save you some cash, I’ll show you how to make your own fireworks! Sorry, pyro-maniacs, we’ll be using Flash AS3 to generate safe particles. Take a look at the fireworks show I’ve created in Flash, and if you’re interested in creating your own, follow along with my instructions.

Here are our requirements:

  • create a particle effect that resembles a firework burst.
  • vary them in size and color.
  • celebrate our independence.

Let’s get started!

(more…)