Filed under AS3

Tweening timeline animations with KitchenSync

by

One of the new features in KitchenSync 1.5 is the ability to tween animations on a MovieClip’s timeline… and I’m not just talking about gotoAndPlay(), I’m talking about controlling the starting and stopping points, speed, and easing functions of an animation on the timeline with code. It does this by incrementally controlling the current frame number of the MovieClip using a KSTween and a special ITweenTarget (a class used to control the values of an object) called TimelineController.

Take this FLA animation.

MovieClip animation

As you can see, there is a simple animation using a guide layer and labels on the key frames.

Continue reading

Tagged

Technique: Semaphores

by

For the past year(!) or so I’ve had a series of articles I meant to write about some intermediate programming concepts that can allow you to write code at a higher level. I regret that it’s taken so long to come around to them, but I hope they can be of some use. This series will cover semaphores, asynchronous tokens, and green threads, and I may extend it with some brief notes on assertions and iterators. Today I’d like to talk about semaphores.

Continue reading

Flash Site Experience Profile

by

This is essentially the second part to my last post. This time however, I’m concentrating on the user experience of the same campaign site (www.starbuckscoffeeathome.com) based on tracking data. I’ve used a custom-built statistics class which helped me to derive plenty of useful numbers from a normal user experience flow. My method was to record all important events and normal status data like the amount of external data loaded, the frame rate, and the memory usage. After recording the information I designed an infographic about what I discovered. You can see the graph here.

As you can see, there’s some disappointing trends. I noticed there seems to be a memory issue -something that must have become unresolved before final launch. The framerate reflects the usage on my trusty Intel 2 Ghz Mac Book Pro. Very unimpressive considering this is a decent machine really. I’m sure there’s a little bit of overhead which came from the statistics activity. Although the experience didn’t seem out of pace with the same one when the statistics class inactive. After considering when the average user leaves the site, I decided to make a second graphic which can be seen here.

And this is a little bit unfortunate. I will confess however that the connection speed on the machine I recorded the statistics with was a very slow DSL. A DSL connection would’ve produced more favorable results (assuming the user wasn’t doing other download work in the simultaneously). Although, as you can see a very large amount of time is consumed by watching a loader which brings me to the point of this post. If you build Flash sites which rely upon a pleasant user experience, then make sure all the content you load is well worth its weight.

Code Documentation

by

I recently finished a campaign site for Starbucks in order to promote the Starbucks brand of coffee available in grocery stores. The address is www.starbuckscoffeeathome.com. It was a very pleasant project to work on, but it was also quite fast paced. The project also remained in a state of high flux until launch. These two aspects combined made it nearly impossible to keep accurate comments on my code. So, after this project was complete I decided to re-write my UML for it based on the way it ended up (rather than the way I originally designed it). After doing so I’ve come to believe this serves as better and more digestible documentation for a developer than most inline commenting. Thats not to say it would completely replace code commenting, but I feel as though its more useful for another developer to see in order to get a grasp on how a body of code works. For this diagram I didn’t have the right tools available to me immediately so I used what I had (which was Adobe Illustrator). This required a greater investment of time, but the time consumed was likely on par with the amount of time required to produce sufficient written documention. For most practical situations, a simple sketch would suffice. Have a look at the diagram (and submit your critiques if you like).

Download the Starbucks basic class UML (PDF).

I’ve also conducted a certain amount of performance profiling that I will write up in the near future.

A review of popular tweening library (UPDATED)

by

The goal of next version of my (your) animation engine KitchenSync, is to be arguably the best and most complete library for animation and sequencing out there. To do this, I’ve spent the last couple of months analyzing the top existing tween libraries trying to pinpoint their strengths and weaknesses. With lots of help from the Draw Logic Blog, I think I’ve identified the contenders and put together a decent list of what (in my opinion) are their highest and lowest points. The next step will be to create a product backlog for KitchenSync based on matching these features and fixing the problems. I know there are other tween engines but these seemed to be the most prolific ones at the time. The tween engines analyzed were:

  • Tweener
  • TweenLite (and flavours)
  • Boostworthy Animation System
  • FuseKit
  • Go
  • and KitchenSync 1.1

Note: After some helpful feedback from readers (THANK YOU!) I added TweenLite to the list of libraries I reviewed. I should add here that these are fairly superficial observations about how things work and don’t go into incredible detail. If I steal any features, I’ll look closer ;-D

Keep the comments coming!

Tween Engine Comparisons (updated)

Tagged , ,