We present here a simple piece of Flash art. It is a very minimalist animation of sliding and rotating rectangles, which combine to create an evolving tapestry of colors. It also serves as a tutorial for a few interesting aspects of ActionScript, including blend modes, alpha values, and a technique to prevent Tweens from quitting unexpectedly due to garbage collection.
Download the commented source files corresponding to the effect above:
The rectangles added to the display in the animation are instances of a custom extension of the Sprite class, which we have named the SpriteExtension class. This class simply extends the Sprite class by adding a few variables which will be used in the animation.
These Sprites will have evolving alpha values. The alpha value of each Sprite changes at a rate stored as the alphaRate variable. We keep track of the alpha of each Sprite with a special floatAlpha variable. The reason we are using this variable instead of the usual alpha value for a Sprite is that we would like fine-tuned control of the smoothly transitioning alpha. However, the assigned and the true values of the alpha differ as explainned in our tutorial: Assigned versus True Values of Alpha Property in AS3 - How to Deal with Discrepancies.
The combination of colors is the result of the "hardlight" blend mode used for the Sprites. This blend mode has the effect of sometimes brightening and sometimes darkening the combined colors, and we have found the colors produced this way to very pleasing. You can experiment with different blend modes here to give different characters to the animation.
On each frame, we use random variables compared to probability parameters to decide if a shape should begin to shift or rotate. The motion is controlled by Tweens. Here we ran into an important issue that is a frequent source of AS3 code not running properly: oftentimes the tweens would quit before they were complete.
The topic of quitting Tweens warants a separate post and we will address it in a soon-to-be-posted tutorial. Let us only say here that most often prematurely stopping Tweens are a result of AS3 garbage collection. For example, if the variable that stores your Tween is a local variable, defined within a function, the variable becomes ellegible for garbage collection after the function ends. The function may end before the tween ends. Once the variable storing the Tween is gabage-collected, the Tween abruptly quits. Here are a few rules that will prevent such behavior.
- Store instances of the Tween class in global variables (class-level variables) and not in local variables.
- If you are using multiple Tweens, store them as elements of a global Array (or a Vector) variable and not in one variable as you may overwrite a Tween before it ends.
In our example, we are creating many Tweens dynamically. We are storing them as elements of a global Array variable, which prevents them from being garbage collected. Since we may want this Flash movie to run indefinitely, this Array has the potential to grow very large. So when it reaches a certain length, we cut it in half, disposing Tweens that are certainly no longer needed.