Programmatic Movement (Animating with ActionScript)


Flash offers two ways to create animations: by drawing the keyframe content "by hand" in the authoring environment or by drawing the frame contents with ActionScript. Even better, you can combine the two approaches as best suits your project needs.

Chapter 10 covered Flash animation basics. Recall that with tweens, you can set the starting point and destination of a symbol instance, and then have Flash "tween" the intermediate frames. You can do much the same thing with ActionScript with the help of the onEnterFrame method of the movieClip object. Anything within an onEnterFrame method executes on every frame. It's a continuous loop.

The syntax is as follows:

my_mc.onEnterFrame = function() {     // your statements here }


To stop an onEnterFrame loop, you must remove the onEnterFrame with the delete operator.

For example,

//An onEnterFrame loop, that counts to 20 and stops this.i = 0; this.onEnterFrame = function(){     i++;     trace(i);     if(i>=20){         delete this.onEnterFrame;     } }


With this approach, you can also move the movie clip holding your shape across the stage and stop it when it reaches a certain position.

// move myShape, until it's x-coordinate >= 600 myShape.onEnterFrame = function(){     this._x += 10;     if(this._x >= 600){         delete this.onEnterFrame;     } }


As you've seen in the previous example, you can essentially program your own motion tweens with ActionScript. You can also program your own shape tweens with the drawing API. Rather than draw in your clip, and then move the clip, you can redraw the line into a new shape and position repeatedly with an onEnterFrame loop. The object stays in one place, but its shape changes. This is analogous to shape tweening.

You can think of your movie clip as a sticky note with your drawing on it. Programming a motion tween is like asking an assistant to move that sticky paper to a specific point at regular time intervals. Programming a shape tween is like asking the same assistant to leave the sticky note where it is while erasing and redrawing the picture a little differently at regular time intervals.

The following code draws a slowly growing shape. When new lines are drawn, the previously drawn lines remain visible. To create a line that slowly stretches, insert a this.clear() statement just above the lineStyle() statement. This way, instead of adding additional lines, you replace the previous line.

this.createEmptyMovieClip("mycurve", 100); // save starting x-coordinate for curve control point mycurve.controlX:Number = 200; // stretch curve toward new control point mycurve.onEnterFrame = function(){     var x:Number = this.controlX++     if(this.controlX <=400){         this.lineStyle(2,0x333366, 100);         this.moveTo(100,100);         this.curveTo(x, 30, 300, 300);     } else {         delete this.onEnterFrame;     } }


You can modify this code so that the line stretches when the user moves the mouse. Now the curve is redrawn when the mouse is moved and stops when the mouse is still.

// save starting x-coordinate for curve control point mycurve.controlX:Number = 200; // stretch curve toward new control point mycurve.onMouseMove = function(){     var x:Number = this.controlX++     this.clear();     this.lineStyle(2,0x333366, 100);     this.moveTo(100,100);     this.curveTo(x, 30, 300, 300); }




Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net