“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 →

Another new feature I’ve added to GTween beta 5 is support for synchronizing timeline animations with scripted tweens. This lets you ensure that animations will remain synched even if you change the framerate of your FLA or if you pause, reverse, repeat, or otherwise manipulate your tweens.

Here’s a simple demo of it in action. The run cycle and fire are frame by frame animations, all other animation is done with GTween. Notice how the run cycle always lines up exactly the same with the motion tweens (despite everything being time based) and how it pauses along with the rest of the animation. The fire is not synchronized, so it will continue to play when the tween pauses, and is affected by framerate.

Also worth noting: the fire’s visibility is controlled through another new feature of beta 5, which improves on progress points. Best part, its only a few lines of fairly readable code for this whole demo.

Continue reading →

GTween beta 5 was originally going to consist of minor bug fixes, but it’s quickly become a low level rewrite of the entire tweening library. I’ve simplified a lot of the logic, added new features, increased performance, improved reliability, made the code more readable, and even slightly reduced file size.

It will be another week or so before it is released (still fixing bugs and addressing edge cases), but I thought I would post a quick demo showing the much more powerful and easy to use sequencing features in beta 5.

All of this animation is done with GTween. Notice that you can move the slider, or click on its track to jump to any position in the sequence, and everything will display properly for that position. Also note the blur filters on the buttons as they tween into position.

Continue reading →

TextFlowPro enables you to flow a series of text fields together so that they act as a single text container, and still allow users to select, edit, and copy/paste text between the textfields. It should work with any text formatting, including different text formatting on different fields. It even supports tabIndex.

In terms of the sheer number of problems I had to solve to get things working, this is one of the most complex classes I have released for free. I was originally going to release this as a commercial component alongside the Spelling Plus Library, but I never got it to a level of quality that I was happy with. While I think I could iron out the remaining bugs, I still don’t think it would reflect the quality I want our commercial offerings to show – there are simply too many player bugs, edge cases, and niggling user experience problems.

However, it represents a huge amount of work, and I didn’t want to just leave it to rot, so I’m releasing it in the hopes people can do really cool things with it. At the very least, I hope it serves as a crash course in working with some of the text metrics APIs in player 9. I’m more than happy to answer any questions about how it works in the comments below.

Here are a couple of simple demos to show what it can do. These will be familiar to you if you’ve checked out TextFlowLite or TextFlow, but these add one small thing: editing!

Continue reading →