Yusuke96

Hi

 

In this tutorial I am going to show you how to make a ball move around the screen realistically and if the ball hits a side of the stage it will bounce.

Background colour white.

550x400

50 fps

 

The first thing you need to do is draw a circle on the stage (50x50) then select it and press F8. (You may want to put a line or something through the ball so that you can see it rotate).

Set it as a MovieClip.

Now double click on the circle to edit it, position the ball to be in the very center.

 

Now go to the main screen and click on the first frame and open the actions panel (F9).

 

First put in some variables for what we will be making. Copy this into the actions panel

var Xspeed:Number = 0;var Yspeed:Number = 0;/*--*/var friction:Number = 0.15;var gravity:Number = 0.70;var ballSpeed:Number = 1.24;/*--*/

The part that says Xspeed has a value of 0. In a while we will be increasing or decreasing this value when the left or right key is pressed.

The same apply's for Yspeed.

 

Now we need to make a function that will move the ball around.

Copy and paste this code:

function moveBall() {    if (Key.isDown(Key.RIGHT)) {        Xspeed += ballSpeed;    }    if (Key.isDown(Key.LEFT)) {        Xspeed -= ballSpeed;    }    if (Key.isDown(Key.DOWN)) {        Yspeed += ballSpeed;    }    if (Key.isDown(Key.UP)) {        Yspeed -= ballSpeed;    }}

Each time one of these arrow keys are pressed, either the Xspeed or the Yspeed value will be changing.

 

Add this to your script just where after it says

"var ballSpeed:Number = 1.24;/*--*/" :onEnterFrame = function () {    moveBall();};

This means that every time we enter this frame it will repeat this function.

 

Add this to the end of your script:

function applyMovement() {    ball._x += Xspeed;    ball._y += Yspeed;    ball._rotation += Xspeed;}/*--*/

Now you have made is so that the speed of the ball that is moving is the value of what ever the Xspeed or Yspeed and the ball rotation speed is the same speed that the ball is moving on the X axis.

 

Go back to the "onEnterFrame" and paste this under where it says "moveBall":

applyMovement();

Now it will be moving the ball at that speed every 50th of a second, test your movie and you should be able to move the ball around with your arrow keys and the ball should look like it is rolling realisticly.

 

Now to add some friction to the ball but only while it is moving.

 

Add this to the end of your code:

function ballFriction() {    if (Xspeed > 0) {        Xspeed -= friction;    }    if (Xspeed < 0) {        Xspeed += friction;    }    if (Yspeed > 0) {        Yspeed -= friction;    }    if (Yspeed < 0) {        Yspeed += friction;    }}

This part of the script is saying that if the ball is not staying still it will apply friction to the oppisite direction of whatever way the ball is moving.

Dont forget to add the name of the function to the "onEnterFrame" or it will not be repeating this function.

 

So far your code should look like this:

function ballFriction() {    if (Xspeed > 0) {        Xspeed -= friction;    }    if (Xspeed < 0) {        Xspeed += friction;    }    if (Yspeed > 0) {        Yspeed -= friction;    }    if (Yspeed < 0) {        Yspeed += friction;    }}

Next you have to add the gravity which is easy.

Copy and paste this script at the end of your code:

/*--*/function ballGravity() {    Yspeed += gravity;}

This means that it will constantly be adding the gravity to the Yspeed.

Add this function name to the "onEnterFrame" part again and if you test your movie now it should have gravity but fall through the floor.

 

We now need to make some boundries and and a extra boundry around it just incase it gets caught in it.

Add this to your code:

function boundries() {    if (ball._x >= 525) {        Xspeed = -Xspeed;        //Right boundry    }    if (ball._x <= 25) {        Xspeed = -Xspeed;        //Left boundry    }    if (ball._y >= 375) {        Yspeed = -Yspeed;        //Bottom boundry    }    if (ball._y <= 25) {        Yspeed = -Yspeed;        //Top boundry    }    /*--*/    if (ball._x >= 526) {        ball._x -= 3;        //Right boundry    }    if (ball._x <= 24) {        ball._x += 3;        //Left boundry    }    if (ball._y >= 376) {        ball._y -= 3;        //Bottom boundry    }    if (ball._y <= 24) {        ball._y += 3;        //Top boundry    }}/*--*/

You now have boundries going all the way round your stage and a backup incase the first set dont work.

The bouncing works be if the ball hits the first set of boundries it will turn either the Xspeed into a -Xspeed or the Yspeed into a -Yspeed for example:

 

Xspeed = 3

when it hits the wall:

Xspeed = -3

 

Add the function name "boundries()" to the "onEnterFrame" to repeat it.

 

You have finished this tutorial and i hope you have enjoyed it.

We are going to need animation and I don't like to use time-line animation so I use AS to code my animation. A very good reason to not use timeline animation is this: Say in my example (located here: http://www.creativenetdesign.com/rg-erdr.php?_rpo=t) say I made the little red squares animate with a time-line animation and when the user rolls over the button I tell it to start. Say the red square is half way through its animation and I rollOff of it. The red square will automatically "jump" to the rollOut animation which will make it appear to change size from say half size to it's whole size and then start to shrink. That would look really bad. But if we use code to do the sizing this will not happen because the code does not care what size it currently is, it will just tell it to become large or small.

 

Hope I didn't loose you there. My point is we are going to need some imported code to make the AS animation. I like to use Fuse. You can get fuse at http://forums.xisto.com/no_longer_exists/. In this tutorial/article I will show you how to use it.

 

Make a directory named "com" in the root directory of your project and in there place the mosesSupposes directory that you just downloaded. Trust me, it is very simple to use (Fuse CAN get much more complex but that is for another article).

 

Create your buttons

 

In order to have rollOvers we need buttons. To do this I created a simple rectangle, selected it and hit F8 to make it a MovieClip called button, and gave it an instance name of button0. I opened up that button and made a red rectangle (again use the example as a guide) and then selected it, hit F8 to select it and called it scaler with an instance name of scaler. Then in my root I selected button0 and copied it twice so now there are three buttons on the stage with instance names of button0, button1, and button2.

 

Now lets code!

 

Import Fuse

In order to use Fuse for animation we have to tell Flash that it exists. This is pretty simple:

// import Fuseimport com.mosesSupposes.fuse.*;// set up  zigoEngine to use just simple shortcut animationZigoEngine simpleSetup(Shortcuts);

That was simple wasn't it?

 

Now lets code the buttons!

 

Coding the Buttons

 

When a button is clicked we need to know which one it is, and so does everyone else because when we make functions to scale the buttons down (actually just scales down the red MovieClip in the button) we don't want to scale down the button that was just clicked. Lets declare that variable now:

// declare the variable that will be the button that is clicked (MovieClip)var buttonClicked:MovieClip;

Now lets create an Array that holds the names of our buttons so we can assess them in a for loop:

// create the array to hold all the names of the movieClipsvar myButtonsArray:Array = new Array(this["myButton0"], this["myButton1"], this["myButton2"]);

Now lets add the code for the first button (button0):

//myButton0.onRelease = function():Void  { // create the variable that we pass into the scaleButtonDown func var exception = this; // run the scale buttons down function scaleButtonsDown(exception); // set the buttonClicked to this buttonClicked = this;};//

The above code creates an exception variable with a value of this (this IS button0) and passes it to the scaleButtonsDown function so that function will scale down all buttons except the "exception" variable.

 

it also sets the buttonClicked to this (again, this refers to itself [button0]).

 

Now we will create the rollOver and RollOut functions for button0:

myButton0.onRollOver = function():Void  { // run scale buttons up func and pass in this scaleButtonsUp(this);};//myButton0.onRollOut = function():Void  { // run scale buttons down function scaleButtonsDown();};//

Now before we create the functionality for the other two buttons lets make the scaleButtonsUp and scaleButtonsDown functions because it will become very simple to understand what is happening with only code for one button.

// scale buttons up functionscaleButtonsUp = function (args):Void { // scale the args (remember the button passed in this) to 100 over 1 seconds args.scaler.scaleTo(100, 1);};

This function takes the args (remember we passed in this [button0]) and scales the button's scaler to 100% over one second. This occurs when the user rolls over the the button.

 

Simple hu? Now lets make the scale buttons down function, it is a little more complex but easy to understand.

// scale buttons down funcscaleButtonsDown = function ():Void { // loop through myButtonsArray for (var i:Number = 0; i<myButtonsArray.length; i++) {  // scale all buttons down over a 1 second period  myButtonsArray[i].scaler.scaleTo(0, 1);  // make the buttonClicked scale to 100 over zero seconds }   buttonClicked.scaler.scaleTo(100, 0);};

this function creates a loop that will loop as many times as we have items in our myButtonsArray (that'll be three times because our array has 3 items, mybutton0, mybutton1, and myButton2).

 

In this loop we tell myButtonArray scale to 0% in one second .

 

Outside the loop we tell buttonClicked (remember we set this to THIS when the button was clicked?).

 

Then all you have to do is copy the code for button0 and paste it and make it the code for button1 (do the same for button 2)

//myButton1.onRelease = function():Void  { buttonClicked = this; var exception = this; scaleButtonsDown(exception);};//myButton1.onRollOver = function():Void  { scaleButtonsUp(this);};//myButton1.onRollOut = function():Void  { scaleButtonsDown(null);};//myButton2.onRelease = function():Void  { buttonClicked = this; var exception = this; scaleButtonsDown(exception);};//myButton2.onRollOver = function():Void  { scaleButtonsUp(this);};//myButton2.onRollOut = function():Void  { scaleButtonsDown(null);};

The very last thing you need to do it to tell all the buttons on the stage to scale down their scaler movieClips as we don't want them big until the user rolls over them:

// scale all buttons down at start of moviescaleButtonsDown();

That's it we are done and now you have buttons that do something on rollOver and something on rollOut but when clicked the rollOver state stays on that button.

 

Here is all of the code together:

import com.mosesSupposes.fuse.*;// set up zigoEngineZigoEngine.simpleSetup(Shortcuts);// declare the variable that will be the button that is clicked (MovieClip)var buttonClicked:MovieClip;// create the array to hold all the names of the movieClipsvar myButtonsArray:Array = new Array(this["myButton0"], this["myButton1"], this["myButton2"]);//myButton0.onRelease = function():Void  { // create the variriable that we pass into the scaleButtonDown func var exception = this; // run the scale buttons down functino scaleButtonsDown(exception); // set the buttonClicked to this buttonClicked = this;};//myButton0.onRollOver = function():Void  { // run scale buttons up func and pass in this scaleButtonsUp(this);};//myButton0.onRollOut = function():Void  { // run scale buttons down function scaleButtonsDown();};//myButton1.onRelease = function():Void  { buttonClicked = this; var exception = this; scaleButtonsDown(exception);};//myButton1.onRollOver = function():Void  { scaleButtonsUp(this);};//myButton1.onRollOut = function():Void  { scaleButtonsDown(null);};//myButton2.onRelease = function():Void  { buttonClicked = this; var exception = this; scaleButtonsDown(exception);};//myButton2.onRollOver = function():Void  { scaleButtonsUp(this);};//myButton2.onRollOut = function():Void  { scaleButtonsDown(null);};//// scale buttons down funcscaleButtonsDown = function ():Void { // loop through myButtonsArray for (var i:Number = 0; i<myButtonsArray.length; i++) {  trace(myButtonsArray[i]._name);  // scale all buttons down over a 1 second period  myButtonsArray[i].scaler.scaleTo(0, 1);  // make the buttonClicked scale to 100 over zero seconds   } buttonClicked.scaler.scaleTo(100, 0);};// scale buttons up functionscaleButtonsUp = function (args):Void { // scale the args (remember the button passed in this) to 100 over 1 seconds args.scaler.scaleTo(100, 1);};// scale all buttons down at start of moviescaleButtonsDown();