We just announced the winners for round 1 of tweetcoding. There was a surprise tie for first place between @tomee6’s “diagonal snake” and @piXelero’s “Tunnel of Stripes“. Thankfully, our wonderful sponsors, Adobe and Friends of Ed, were nice enough to accommodate the tie, and both winners will be getting a copy of Flash CS4 and AdvancED ActionScript 3.0 Animation.

The two runner ups, @vectorcinco’s “the drummer” and @dickwolf’s “Ghost Marquee” will each receive a copy of AdvancED ActionScript 3.0 Animation.

All three judges (me, Ted Patrick, and John Grden) had a very difficult time narrowing down the field of almost 250 entries to our winners and runner ups. We judged entries based on aesthetics, code, interaction, and uniqueness at time of submission. It’s a testament to the high quality of submissions that with 3 of us making top ten lists, we wound up with 24 different entries.

“diagonal snake” is an amazingly functional game for 140 characters of code, even having a death sequence. “Tunnel of Stripes” is highly polished with the glow effect and even some basic interaction. “the drummer” was an awesome example of interactive sound in so little code, and “Ghost Marquee” both looks good, and has some insane code powering it.

Be sure to check out the #tweetcoding round 1 winners page to see these entries, and the other 20 entries that made our judges lists.

We will definitely be holding another #tweetcoding contest in the near future. I’m working with a couple of people to polish up the interface and automate things a little more. I also want to incorporate the language translations people graciously provided. Once that’s done, I’ll probably put out an open call for people to suggest gimme code frameworks.

Thanks again to our sponsors (Adobe and Friends of Ed), our judges, @machine501, and everyone who contributed an entry, blogged it, tweeted it, or otherwise got involved. It was a ton of fun, and I can hardly wait until the next one.

I started the #tweetcoding contest on a whim, with no real expectation of what the result would be, and I’ve been absolutely floored by the level of participation, and the quality of the entries.

The idea was simple: See what people could code in 140 characters of AS3 (the number of characters in a single tweet). The results were unexpected: Hundreds of participants and entries, some of which are simply amazing.

It was really incredible to watch ideas and themes evolve as people built on them. It was educational watching people, who generally churn out boring code and proofing the best online slots they work for year in and year out, employ new tricks to squeeze out every possible character – I even learned a few things. It was entertaining to watch people get addicted to #tweetcoding, and submit entry after entry, even after swearing this one was the last (I’m looking at you Mario).

Overall, it was one of the most active, fun, and positive community activities I’ve been involved in recently. I’m really happy to have been a part of it, and am very impressed by the Flash Twitter community – it makes me wish I had started tweeting earlier.

I’d link to some of the more impressive entries, but as a judge I don’t think that would be appropriate. You can check out all of the entries on this page, which was put together by @machine501, and was instrumental in the success of the contest.

I guess I should get back to the hard work of judging, and getting ready for the next round. Thanks again to the sponsors (Adobe and Friends of Ed) for providing prizes, and to everyone that participated!

I am @gskinner on Twitter.

“140 characters isn’t good for debugging code.”

Yesterday evening, when @kevinSuttle said that to me on Twitter it sparked a thought, that grew into an experiment, that expanded into an idea, and finally ballooned into a contest.

Kevin’s tweet got me thinking… “What could you code in 140 characters of AS3?” I spent a little time experimenting, and found out the answer was “not a lot”. Still, it crystallized the idea of building a contest around it. I spent a little bit of time assembling a simple page to outline the contest, asked for feedback, revised, and launched the contest.

You can check out the #tweetcoding page for full details, but here is a quick overview. You are provided with a framework of 140 characters of “gimme” code. To this, you can add up to 140 characters of additional AS3 code. You submit your entry via Twitter, and if your work is judged as the best, you win a full copy of Flash CS4.

The thing I find coolest is how this came together so rapidly and organically. It was about 6 hours from the initial thought to the start of the contest (including an hour for dinner), and it incorporated feedback from a handful of people. Within 24 hours there were already a number of interesting entries, a prize (FlashCS4 – thanks Adobe!), and online tools to help people track and participate in the contest.

You can check out one of these online tools, made by @machine501 that compiles entries directly from Twitter using the Flex compiler, and lets you follow all the #tweetcoding action without needing to start up Flash.

Check out the #tweetcoding rules page to enter the contest, or for more information.

GTweeny is GTween‘s lightweight younger sibling. It strips a lot of the secondary features of GTween (proxy, timing modes, etc) in favour of smaller file size. It is currently under 3kb, but I’m looking for feedback on this class: is a 1.5kb savings even worth it? Should I strip it down further to make it a 2kb core tweening class?

I’m leaning towards smaller, but I’m interested to hear what other developers think, particularly those working on banner ads. We don’t typically do banner ads at gskinner.com, so we are unlikely to use GTweeny internally.

Regardless of GTweeny’s future, this ~4kb 3D image gallery makes for a pretty decent demo. Flash player 10 required.

Continue reading →

Probably the most exciting addition to GTween beta 5 is GTweenTimeline. This new class lets you easily build a virtual timeline of tweens, actions and labels, then control the whole thing as though it’s a single tween. You can even nest timelines inside each other, just like on the Flash timeline. Even better, it only adds about 1kb on top of GTween if you choose to use it.

GTweenTimeline extends GTween, which means you have the same interface, and can actually use a timeline instance as a normal tween, with a single target. You can repeat, reflect, reverse, pause, play, and jump to any point in your timeline, just like with any tween. Things get cool when you start sequencing other tweens, and tying in actions.

It gets even cooler when you pair it with the ability to synchronize frame based timeline animations with time based programmatic tweens. Suddenly you can integrate complex hand drawn effects into your code driven sequenced animation.

Here’s a look at some of the methods on GTweenTimeline:

// create a timeline, using an empty constructor because it isn't going to
// tween a target directly, and you can calculate the duration dynamically:
var timeline:GTweenTimeline = new GTweenTimeline();
// create a 2 second tween, and add it to the timeline to play at 0 seconds:
var circleTween:GTween = new GTween(circle, 2, {x: 200});
timeline.addTween(0, circleTween);
// create a 3 second tween, and add it to the timeline to start at 1.8 seconds.
timeline.addTween(1.8, new GTween(square, 3, {y: 300}) );
// add a callback at 2.2 seconds. This will execute the callback function with the specified parameters
// whenever the playback head crosses it (even in reverse). This is just like adding code to a frame
// on a timeline.
timeline.addCallback(2.2, myCallbackFunction, [param1, param2]);
// add a label at 1.8 seconds. This way you can jump to that point by name with gotoAndPlay or gotoAndStop.
timeline.addLabel(1.8, "squareStart");
timeline.gotoAndPlay("squareStart");
// calculate the timeline's duration from it's contents (tweens and callbacks).
// This way you don't have to remember to update it separately if you move things around.
timeline.calculateDuration();

Here’s a demo of it in action. All of the motion is done with tweening. The page numbers are shown with callbacks. Note that you can scrub the timeline, or even jump to any position instantly with the slider.

Continue reading →

I’ve just released GTween beta 5. As I previously mentioned, this release is a significant rewrite to the full tweening engine. It stabilizes much of the positioning logic, and makes it more predictable. It also involved some very significant changes to the API, and the introduction of two important new classes: GTweenTimeline, and GTweeny.

GTween specific enhancements include a reduction in size to 4.5kb, a more predictable positioning model, slightly enhanced performance, the ability to specify repeat counts, full read/write access to start and end property values, the ability to lock starting properties, and a clean up of the API and code.

To read more about GTween, check out some demos, or download the library, visit gskinner.com/libraries/gtween/. To get more information on what’s changed, check out the version history or the API documentation.

This was a major rewrite, which pretty much guarantees that it has introduced new bugs. Please feel free to provide bug reports and feedback in the comments below. I’m hoping the next release will be final, once this version has seen some testing, bug fixing, and revisions based on feedback.

Here’s a super simple demo, showing GTween’s ability to deal with interrupted tweens. When you click around, it simply sets new end properties on each tween, and the tween adapts to the new values (and hey, it looks kind of cool). Check out the home page for more complex demos.

Continue reading →