Wind Redux...Redux...

Large version.

Source.

I have decided to go back to an old project and rewrite it in AS3. I've probably not 100% optimized this to the point that it COULD be, but I just wanted to see how difficult it would be to convert something from AS2 to AS3. Turns out, not too hard! Though I do have to say that dealing with dynamic text is a bit more involved than in AS2. Gone are the days of just dropping in a dynamic text field and saying "go!". Ah well...

I've not yet added the little tag that pops up the beads, but that probably wouldn't be too crazy to do. Just add a text field to the Bead class that ties in to the ID.

I tried to add a blur filter to faster moving beads, and it was working well. HOWEVER, I ran into some really odd behavior when it came to blurred objects and rollOvers. If a blurred object was rolled over just on the edge, it would spaz out and jump between being considered rolled over, and being rolled out of. I'm not sure what the deal with that is! So...no blur! Of course, if we threw out the idea of rolling over, then we could dump the blur in. VERY easy and very nifty!

I've provided the source at the request of mikeland.us.

I Feel I Have Arrived...

Large version here.

Phew. I'm feeling pretty good. Why is that? Because the above is my first thing ActionScript 3 that I can say I'm pretty happy with! That's right! I have made great strides in AS3 tonight!

I'm all giddy with the possibilities...

As for the coding itself, there's nothing too awfully insane here. We've got a ship that follows the mouse cursor loosely; it does this by moving the distance between itself and the mouse times a fraction of the distance every frame. In other words, if it's 50 pixels from the mouse and we've moving with .5 drag, it will move 25 pixels, then 12.5 pixels, then 6.25 pixels, etc. etc. until it reaches 0.

The bomb is simply a class that initializes with a movement speed on the y axis of -10. Instantly and in every frame, that movement speed increases by .5, giving the illusion of acceleration.

Once the bomb hits, it is removed from the stage and replaced by a shape tweened circle. I manually animated the growth via timeline, but it would be very possible to do so with straight code. That little rainbow flourish you see as the explosion fades is just me playing with code tweens and the ColorTransform object. I simply tween the ColorTransform from a random color to another random color.

There you have it! AS3...I'm warming up to you!

PS:I found this tutorial to be incredibly helpful in learning to get classes to speak to one another. Be sure to download the AS3 source code. Interestingly enough, I had my "a-ha moment" with the AS2 version of this tutorial...hmm...they must be doing something right!

8 Points

Large version.

This is an offshoot of something I was trying to which was, actually, radically different. Originally, I meant to create grid of dots that would react to your mouse position. In a way of testing when a dot was near enough to the mouse cursor, I had a line tracing between the mouse and dot. Quickly moving around, I noticed you got some nifty little patterns going.

And so, this was born. I had to drastically cut down the number of dots, as the original number (about 80, I think) caused a lot of slowdown.

I could see a simpler version (say just 4 dots/lines) being a nifty little way to add a bit of interest to a simple menu.

UPDATE: I noticed that eventually, this would get draggier and draggier...this was because I wasn't actually able to clear out an array that contained all of the lines. As a quick fix, I set the array to reset every 10 seconds, SO if you see all the lines suddenly blink out of existence, that's what you're seeing.

The Colors!

Large version.

This is a result of me learning a bit about adjusting the color of a movie clip via actionscript. It was surprisingly very easy! Here's a quick trimmed down version of it. Keep in mind, this is contained within the onLoad function of a the colored panel's Class file.

var colorful = new Color(this);
var colorTransform = new Object();
colorful.setRGB(0x003366);
colorTransform = {ra:Math.random() * 100, rb:'0', ga:Math.random() * 100, gb:'0', ba:Math.random() * 100, bb:'0', aa:'100', ab:'100'};
colorful.setTransform(colorTransform);


The first line sets up a Color object and assigns it "this", or whatever movie clip you want it to adhere to. After that, we create an Object called "colorTransform" which will contain all the information for the actual color transformation. That information includes, as you can see, a long list of parameters such as "ra" and "ba". It seems like a long list, but there are essentially two types of parameters that relate to the red channel, green channel, blue channel, and alpha channel. The three I'm dealing with here are the ra, ga, and ba parameters which is a number from -100 to 100 and controls the percentage of that parameter's color. So, something like ra:100, ga:50, and ba:50 would yield a pinkish color.

Once we've set up what the colorTransform IS, we simply set it to our original Color object. Simple, eh? You can experiment a ton with it and even set up color tweens with this.

Bonus! You can use this on photos, too! Just be sure to set the imported picture to be cached as a Bitmap and the above code will work on it.

Enjoy!