Boxes Avoiding Getting Hit
In this Actionscript 3 tutorial, I will show you how to create boxes that will avoid being hit by a ball. The end result is seen above (click the white ball to launh the movie). Let's get started straight away!
Setting up the environment
1. Create a new Flash Actionscript 3 movie (340x200).
2. Draw a rectangle on the stage. Make it size 20x20.
3. Convert the rectangle into a movie clip. Name it however you want, just set the registration point to the center!
4. Linkage the movie clip to a class named "Box". If you are unfamiliar with movie clip linkage, check the Actionscript 3 External Classes tutorial.
5. Now draw a circle of size 10x10 on the stage.
6. Convert the circle into a movie clip. Name it however you want, just set the registration point to the center!
7. Linkage the circle movie clip to a class named "Ball".
8. Remove the circle and the rectangle from the stage.
Moving into Actionsctipt
9. Type the following Actionscript code in the first frame.
//This array will hold all the boxes
var boxes:Array = new Array();
//Set the ball's speed
var ballSpeed:Number = -4;
//This loop adds 8 boxes to the stage
for (var i = 0; i < 9; i++) {
//Create a box
var box:Box = new Box();
//Assign a position
box.y = 150;
box.x = box.width * i * 1.5 + 40;
//Add the box to the array
boxes.push(box);
//Add the box to the stage
addChild(box);
}
//Create the ball and set it to the right side
var ball:Ball = new Ball();
ball.x = 320;
ball.y =155;
//Make the ball look like a button (hand cursor)
ball.buttonMode = true;
//Add the ball to the stage
addChild(ball);
//Listen when the user clicks the ball
ball.addEventListener(MouseEvent.CLICK, ballClicked);
//This function is called when the user clicks the ball
function ballClicked(e:Event):void {
//Add ENTER_FRAME which does all the animation
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
//This function is called in every frame
function enterFrameHandler(e:Event):void {
//Move the ball to the left by 2 pixels
ball.x += ballSpeed;
for (var i = 0; i < boxes.length; i++) {
//Get a box from the array
var box:Box = boxes[i] as Box;
//Check the x distance from the ball to the box
var distX:Number = ball.x - box.x;
//Ball is coming from the right
if (distX < 50 && distX > 0 && ballSpeed < 0) {
//Animate box up
box.y -= 2;
}
//Ball is leaving to the left
else if (distX < 50 && distX < 0 && ballSpeed < 0) {
//Animate the ball down if it's not in original position
if (box.y <= 150) {
box.y += 2;
}
}
//Ball is coming from the left
if (distX < 0 && distX > -50 && ballSpeed > 0) {
//Animate box up
box.y -= 2;
}
//Ball is leaving to the right
else if (distX < 50 && distX > 0 && ballSpeed > 0) {
//Animate the ball down if it's not in original position
if (box.y <= 150) {
box.y += 2;
}
}
//Move the direction if the ball is over to the left
//or right edge.
if (ball.x + 5 >stage.stageWidth || ball.x - 5 < 0) {
//Invert the speed
ballSpeed *= (-1);
}
}
}
Test your movie! I hope you learned something new from this. Remember, if you have any questions, don't hesitate to ask in the forum.
