Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






ActionScript for Non-Coders

by Sham Bhangal, author of Flash Hacks

Author's note: In this article we'll look at how the Flash authoring environment allows an ActionScript coder to work and share ideas with designers who have no ActionScript experience, while at the same time allowing the designers to make full use of scripting. The article assumes Flash MX 2004.

Introduction

To use Flash effectively, you do not just use the features available in the authoring environment. To be frank, such features are fairly basic, and you won't get very far using only the directly available drawing tools and ActionScript. In many cases, you have to create your own authoring building blocks using the default Flash tools, and create your application or site with the building blocks. Nevertheless, the great thing about the Flash environment is the way it is so open-ended, once you see how it is meant to be used.

If there's an authoring building block or tool you want that you can't find, it is often easy to build it yourself, using either components or the JSAPI (JavaScript API). I'll illustrate how this works in practice, using work I have carried out over the last month (July 2004) as an example. During this time, I was working with Adam Phillips to create a web site for a future project.

Animating that Which Can't Be Animated

A while ago, Adam sent me an email. He wanted to animate some gnats.

He sent me the image (see Figure 1) to illustrate his problem.

He had a forest with a light source illuminating them from above, and to show this directional light, he wanted a small swarm of gnats at the bottom of the forest reflecting the light.

Figure 1. Adam's gnats. Click on the image to see the Flash movie (opens as a popup)
Figure 1. Adam's gnats. Click on the image to see the Flash movie (opens as a popup).

To do this with traditional tween-based animation is problematic. You need a layer full of tweens for each gnat, and to get a good-size swarm, you need an awful lot of tweens.

This reminded me of the time I went to Flash Forward (a large Flash developer conference), and a particular developer was speaking, telling us about a text effect he had spent the whole summer creating with tweened letters. He went on to learn ActionScript and realized that text effect was really a day's work (because in ActionScript, you can create a script that works for one letter, and then apply it to all your letters, thus quickly solving the problem).

(Incidentally, that's also why there are a few pages in the Flash Hacks book telling you all about creating a general text-effects engine in ActionScript.)

Summer is for the sun.

So anyway, I emailed Adam back and said, "Hey, Adam, that's a particle effect. You can do this quicker with a script. How often will you need to do this?" He told me it was one of the things that really slowed him down, because he needed to do particle effects all the time, and they take forever with tweens.

It is not just gnats either. A refection of the moon over water also takes a long time to do with tweens, but it can be done quickly with a few lines of code, because with a script, all the reflections can be controlled via the same code (see Figure 2).

Figure 2. Reflections created by a tweened and repeated particle effect.
Figure 2. Reflections created by a tweened and repeated particle effect. Click on
the image to see the Flash movie (opens as a popup).

Because Adam said he needed to create particle effects so often, and because he is an animator who doesn't use ActionScript, I decided to create a component for him. A component is a self-contained and configurable movie clip that you can just drag-drop onto the stage, configure, and you're done. Flash MX 2004 has a vast set of components that are based on a large, class-based framework, but you don't need to do anything so intense -- a few lines of code and half an hour of development time is also fine if that's all it takes.

Here's what I did to create the component (which you can have a look at by downloading it here).

  1. First I created a movie clip called "swarmEnvelope" that consists of nothing but a rectangle. This is the appearance the component will take when it is placed on the stage. The rectangular area defines the area the particle effect will appear in.
  2. Next, I selected the movie clip in the library pane and right-clicked on it (CMD click on the Mac) and selected Component Definition to bring up the Component Definition window (see Figure 3).

Here, you define the values that can be added by the developer to configure the component. I created three number values:

  • Jitter defines how often the particles change direction.
  • Speed defines how fast the particles will travel.
  • numFlies defines how many particles will be in the swarm.
Figure 3. The Component Definition window
Figure 3. The Component Definition window.

Within the component are two layers, a layer called graphics (which holds the graphic for the rectangle), and a layer called actions. The latter layer is the important one, because it contains the following code, attached to frame 1:


function flyInit():Void {
  this.speedX = Math.random()*speed;
  this.speedY = Math.random()*speed;
  this.onEnterFrame = flyMove;
}
function flyMove():Void {
  this._x += this.speedX;
  this._y += this.speedY;
  if (Math.abs(this._x-sX)>sWidth) {
    this.speedX = -this.speedX;
    this._x = this._x+this.speedX;
  }
  if (Math.abs(this._y-sY)>sHeight) {
    this.speedY = -this.speedY;
    this._y = this._y+this.speedY;
  }
  if (Math.random()<jitter) {
    this.speedX = Math.random()*speed-speed/2;
    this.speedY = Math.random()*speed-speed/2;
  }
}
function flyDie():Void {
  for (var i = 0; inumFlies; i++) {
    var fly:MovieClip = _parent["fly"+i];
    fly.removeMovieClip();
  }
}
// make speed higher to make gnats faster
// make jitter higher to make the flies take quicker, shorter paths (and stay 
closer to their initial position)
var sWidth:Number = this._width/2;
var sHeight:Number = this._height/2;
var sX:Number = this._x;
var sY:Number = this._y;
for (var i = 0; inumFlies; i++) {
  var fly:MovieClip = _parent.attachMovie("fly", "fly"+i, 
_parent.getNextHighestDepth());
  fly._x = sX+(Math.random()*sWidth*2)-sWidth;
  fly._y = sY+(Math.random()*sHeight*2)-sHeight;
  fly.onEnterFrame = flyInit;
}
this._visible = false;
this.onUnload = flyDie;

This code does the following:

  • Attaches a number of particles to the component. These can be any movie clip, but must have the linkage identifier "fly."
  • Each attached clip is then initialized (function flyInit) and then moved randomly (flyMove), with a motion that is constrained to stay within the rectangle.
  • Removes all particles if the component is ever taken off (or "unloaded") from the timeline (flyDie).

All an animator needs to do with the component is place it onto the stage and scale the rectangle. He then has to select the component and, using either the Properties panel or the Component Inspector, is able to configure the swarm by varying the values shown (as shown in Figure 4).

Figure 4. Setting up the swarm
Figure 4. Setting up the swarm.

Once configured, all the animator has to do is test the movie. The rectangle will disappear, and in its place will appear the particle effect. Click on Figure 5 to see the Flash animation.

Figure 5. The finished effect. Click the image to see a popup showing the final animation
Figure 5. The finished effect. Click the image to see a popup showing the final animation.

Of course, Adam was so pleased with never having to tween swarm animations again that he created a few animations using the component. Click on Figure 6 to see the Flash animation as a popup.

Figure 6. Another test animation showing the finished effect. Click on the image to see a popup containing the final animation
Figure 6. Another test animation, showing the finished effect. Click on the image to see a popup containing the final animation.

Although this effect is nothing new, the way I created some code encapsulated in a component for a non-programmer to include the code in their own work is one of the cool things about Flash. A team of animators/designers and one or two programmers can work together to create compelling content, without the designers having to learn coding, and without the coders having to learn the finer points of graphic design or character animation.

Pages: 1, 2

Next Pagearrow