Most of the problems I tackle as a Flash Developer are logical/programmatic challenges, however on occasion a project presents me with aesthetic demands that require alternative approaches. That is to say (and I may not admit to this later), not all problems are best solved with code.

The circular preloader is a classic example. Now let’s be clear that I’m not talking about a segmented ring, a la Youtube.

In fact, these are relatively easy to create. The preloader in YouTube’s player could be recreated in 8 frames. I’m talking about a ring that fills in the same manner as a standard progress bar. These animations have been around for as long as people have been preloading content in Flash, so it shouldn’t be difficult. Right?

The problem is that Flash doesn’t offer any good tools for animating circular fills. The Oval Primitive tool seems like it would solve this problem at first glance, but try applying a shape tween to one and you’ll see why it’s not appropriate. The only reliable way to accomplish the effect is to animate a mask, by hand, using the brush tool, around the outside of your ring.

There are two big problems with this method:

1. It’s very time consuming.
2. It’s difficult to make sure that the bar grows at a consistent rate.

Unfortunately, this is mostly as good as it gets. I’ve worked at devising code-based solutions to this problem in the past (and I will again in the future) with limited success.

Because I expect that you, like me, will turn to the timeline next time you’re asked to produce one of these preloaders, I’ve gone ahead and created some assets that should (hopefully) give your efforts a kick start. Consider the demo below:

The animated ring in the center is a 360 frame animated mask (1 frame per degree!) constructed using the Oval Primitive tool. I know that I previously said that you can’t effectively tween an Oval Primitive in the way we need, and that remains true. This animation is done frame-by-frame. Yes, I really sat here and created a single keyframe for every degree in a 360 degree fill.

These are all vector graphics, so you can scale/rotate to your heart’s content without worrying about losing quality. My recommendation on how to use the animation goes something like this:

// Assuming your preloader is named "preloader"

function updatePreloader(progress:Number):void {

preloader.gotoAndStop(Math.round(progress*360));

}

You can get a feel for how this all works by checking out the source files. Let me know if these are any help to you, and if so I’ll try to provide more assets in the future to solve other common problems.

I saw this today and felt compelled to post it.

Recently, while working on my portfolio, I was presented with the problem of displaying YouTube content extracted from an RSS feed in Flash. On the one hand there was the difficulty of parsing embed and object tags and extracting relevant data from the mess I was given, and on the other hand there was the problem of displaying the content itself.

YouTube provides documentation for their api, but after digging around online I was surprised to find that nobody had gone through with packaging it in a format I was willing to work with. There is an ActionScript 3 YouTube Wrapper available online, but it presumes that the Chromeless YouTube Player (http://www.youtube.com/apiplayer?version=3) you download to play videos with will be accessed using a combination of the static ExternalInterface class and external JavaScripts.

This seems, to me, to be unnecessarily complicated.

I’ve gone through the trouble of picking through the API and creating a simple class that loads a chromeless player and exposes methods you can use to manipulate it and display content from YouTube, without requiring any external javascript.

The application above is written in Actionscript 3. Basic usage is as follows:

import com.agitcraft.youtube.YouTube;
import com.agitcraft.youtube.YouTubeEvent;
_tube = new YouTube();
_tube.cueURL("http://www.youtube.com/v/-CsA1CcA4Z8", 0);
addChildAt(_tube, 0);

Each of the methods made available in the official YouTube API is available in some form or another via this set of classes. When I have a little more time I’ll follow up with official documentation and availability via google code.

Download AS3 YouTube Classes