The eighth chapter of Flash theory course Ⅲ of slow motion and elastic movement

Back to "flash Basic Theory Class-Catalog"

Spring Chain

Here we will concatenate a few elastic balls together. In introducing the Ease section, we briefly discuss the concept of mouse following, meaning that one object follows the mouse, another object follows the object, and so on. There were no examples at that time because the effect now looks inferior. However, when we use this concept in the elastic motion, the effect is very different.

The design idea of this program: create three balls, called Ball0,ball1,ball2. The first ball, the ball0 action is the same as in the example above. Ball1 to Ball0 movement, ball2 to BALL1 movement. Each ball is affected by gravity, so they all fall down. The code is slightly more complex, and the document class Chain.as:

Package {
Import Flash.display.Sprite;
Import flash.events.Event;
public class Chain extends Sprite {
private Var Ball0:ball;
private Var Ball1:ball;
private Var Ball2:ball;
private var spring:number = 0.1;
private var friction:number = 0.8;
private var gravity:number = 5;
Public Function Chain () {
Init ();
}
Private Function init (): void {
ball0 = new Ball (20);
AddChild (ball0);
BALL1 = new Ball (20);
AddChild (BALL1);
Ball2 = new Ball (20);
AddChild (BALL2);
AddEventListener (Event.enter_frame,onenterframe);
}
Private Function Onenterframe (event:event): void {
Moveball (Ball0,mousex,mousey);
Moveball (BALL1,BALL0.X,BALL0.Y);
Moveball (BALL2,BALL1.X,BALL1.Y);
Graphics.clear ();
Graphics.linestyle (1);
Graphics.moveto (Mousex,mousey);
Graphics.lineto (BALL0.X,BALL0.Y);
Graphics.lineto (BALL1.X,BALL1.Y);
Graphics.lineto (BALL2.X,BALL2.Y);
}
Private Function Moveball (ball:ball,targetx:number,targety:number): void {
BALL.VX + = (targetx-ball.x) * SPRING;
Ball.vy + = (targety-ball.y) * SPRING;
Ball.vy + = gravity;
BALL.VX *= Friction;
Ball.vy *= Friction;
Ball.x + = BALL.VX;
Ball.y + = Ball.vy;
}
}
}

Looking at the Ball class, we find that each object instance has its own VX and VY attributes, and their initial values are all 0. So in the Init method, we just need to create the balls and add them to the display list.

Then, in the Onenterframe function, the elastic motion is realized. Here we call the Moveball method, which is much more useful than copying the three-time motion code. The parameter of the function is a ball object and the x,y coordinates of the target point respectively. Each ball calls this function, the first small ball takes the mouse's x,y as the target position, the second third ball takes the first second ball as the target position.

Finally, after determining the position of all the balls, start drawing lines, the starting point of the line is the mouse position, and then draw to each small ball, so that the rubber band is connected to all the balls. Note that the friction in the program is reduced to 0.8 in order to stabilize the ball quickly.

Create an array to hold references to all the objects in the chain, and then iterate through each of the small balls in the array and execute the motion to make the program more flexible. There are only a few minor changes to be made here. First, two new variables are required to represent the array and the number of objects:

private Var Balls:array;

private var numballs:number = 5;

In function init, use a For loop to create all objects and add object references to an array:

private function init():void {
balls = new Array();
　　　 for(var i:uint = 0; i < numBalls; i++) {
　　　　　　　 var ball:Ball = new Ball(20);
　　　　　　　 addChild(ball);
　　　　　　　 balls.push(ball);
　　　 }
　　　 addEventListener(Event.ENTER_FRAME,onEnterFrame);
}