.
Posted by : framer on 04/10/2008 - 724 pageviews
Awaiting 3 votes.

Page 1

DOWNLOAD SOURCE FILE FOR THIS TUTORIAL

This tutorial explains step-by-step how to create a catapult game. The assumed knowledge is how to create movie clips, how to draw, and basic actionscript. I'll try to explain the rest.



We'll start out by creating the catapult. Draw a catapult to your liking. Don't draw the wheels or launch arm at this point. Select the catapult and right click -> convert to symbol. Name it catapult, make its type movie clip, and click the export for actionscript check box. Make sure the linkage identifier is also named catapult. Open up the movie clip catapult and create a new layer on top. Draw the catapult arm. Convert it to a symbol, naming it catapultarm and setting the linkage identifier to catapultarm.



Single click the catapult arm and in the properties menu, set the instance name to arm. Move the catapult arm to its location. In the movieclip catapult, position the arm and base so that the top of the arm is at the 0,0 position. You'll see a black cross at the position.
Next draw a wheel. You'll only need to draw one. The second one is just a copy of the first one. Convert it to a movieclip named catapultwheel. Copy that wheel and paste a copy of it. Position the wheels so one is in the front and the other is in the back. Select the back wheel and in the properties tab, set the instance name to backwheel. Set the instance name of the front wheel to frontwheel. The catapult is now done. Go back to the main stage and delete it off of the stage. It will still exist in the library.



Now it's time to create the grass. Draw the grass so that its width is the width of the stage, and the height at the top is the same on the left and right sides. Select the entire grass and copy paste it. Move it to the right end of the first piece. Select the entire grass and right click Convert to Symbol. Name it floor. Set the instance name to floor as well.



The launcher button is next. Draw a launch graphic. Right click it and convert it to a movieclip named launchbutton. Set the linkage identifier to launchbutton as well. Delete it from the stage, and open it back up by double clicking launchbutton in the library. Now we'll draw the high or long slider. Draw a black box with a width of 30 and height of 100. Convert it to a movieclip named highorlong with linkage identifier highorlong. Set the instance name to highorlong as well. Open up highorlong. Around frame 43, right click and select insert frame. Create a new layer on top of the other layer. Create a white box with a height of 5 and width of 30. Convert it to a symbol named highorlongslider with linkage identifier highorlongslider and instance name highorlongslider. Right click frame 23 on this new layer and insert keyframe. Move the _y of the white box to 97.5. Right click frame 43 and insert keyframe. Move the _y of the white box to 0. Right click frame 1, 23, and 43 and create motion tween. That's it for the launch button.



The fan increases the _x velocity and the trampoline increases the _y velocity. Draw a fan and convert it to a movieclip named fan with linkage identifier fan. Do the same from trampoline. Remove them from the stage. Draw a rock that will be the projectile. Convert it to a movieclip named projectile with linkage identifier projectile. Open projectile and move it so the 0,0 position is in the center of the projectile. Remove it from the stage on the main level. The only movieclip that should be on the stage now is the floor.



Draw a static text box with the text You Lose. Draw another static text box with the text score:. Draw another text box, set its type to Dynamic text, and the instance name to score. This will display the score once the player loses. Draw a static text box with text Replay, convert it to a button, and set the instance name to replay. Select all of these and convert them to a movieclip named losescreen with linkage identifier losescreen.



At the top left of the stage, create a static text field and make the text "best". To the right of that text, Create a dynamic text box, and set the var to bestdist. At the right of the stage, create a dynamic text box and set the var to dist. To the left of that, create a static text box with text "distance:".
That's it for the objects. Finally the code. Place the code on the main stage in the actions tab.

//Catapult by John Bezanis for swfspot.com

//This is an array to store the names of all of the objects created (trampolines, fans)

var objectArray:Array = new Array();

//Initialize the object count to 0.

var objectcount = 0;

//This is the distance the projectile has travelled. Initialize it to 0

var distance:Number = 0;

//Function to create a new game

function newGame() {

  //remove any objects from a previous game

  for (var i = 0; i<objectArray.length; i++) {

    removeMovieClip(objectArray[i].toString());

  }

  //Clear the array of objects

  objectArray = [];

  //If the projectile has been shot before, remove it.

  if (projectile) {

    removeMovieClip("projectile");

  }

  //Create a catapult

  createCatapult();

}

//Call the function and start a new game

newGame();

//Create the catapult and have it move on screen

function createCatapult() {

  //If there is already a catapult on the screen, remove it

  if (catapult) {

    removeMovieClip("catapult");

  }

  //Create a new catapult to the left of the screen

  this.attachMovie("catapult", "catapult", this.getNextHighestDepth(), {_x:-60, _y:250});

  //Add the catapult to the list of objects

  objectArray.push("catapult");

  //This onEnterFrame function moves the catapult until it has moved into the correct position

  catapult.onEnterFrame = function() {

    //Move the catapult 2 pixels to the right

    catapult._x += 2;

    //spin the front wheel

    catapult.frontwheel._rotation += 5;

    //spin the back wheel

    catapult.backwheel._rotation += 5;

    //If the catapult  has reached its destination, start rotating the catapult arm

    if (catapult._x>130) {

      //run the load catapult function

      loadCatapult();

    }

  };

}

//This function prepares the catapult for launch, rotating the arm back

function loadCatapult() {

  //remove the previous onEnterFrame that moved the catapult's _x position

  delete catapult.onEnterFrame;

  //Create a new onEnterFrame function that rotates the arm

  catapult.onEnterFrame = function() {

    //Bring the arm back

    catapult.arm._rotation -= 2;

    //If the arm has rotated all of the way back, stop the rotation and display the launch button

    if (catapult.arm._rotation<=-90) {

      //Show the launch display

      displayLaunchButton();

      //stop rotating the arm backwards

      delete catapult.onEnterFrame;

    }

  };

}

//This function brings up thelaunch display

function displayLaunchButton() {

  //Attach the movieclip for the launch button

  this.attachMovie("launchbutton", "launchbutton", this.getNextHighestDepth(), {_x:80, _y:240});

  //When the launch button is pressed, start bringing the arm forward

  launchbutton.onPress = function() {

    //swing the arm forward

    releaseCatapult();

  };

}

//Function to swing the arm forward

function releaseCatapult() {

  //reset the distance to 0

  distance = 0;

  //Remove the previous onenterframe if there was one

  delete catapult.onEnterFrame;

  //Create a new onenterframe to start swinging the arm forward

  catapult.onEnterFrame = function() {

    //Rotate the arm 15 degrees forward

    catapult.arm._rotation += 15;

    //If the arm is completely vertical, launch the projectile

    if (catapult.arm._rotation>=0) {

      //Stop rotating the arm

      delete catapult.onEnterFrame;

      //Shoot the rock

      fireProjectile();

    }

  };

}

//Function to launch the projectile

function fireProjectile() {

  //Create a new projectile at the tip of the catapult arm

  this.attachMovie("projectile", "projectile", this.getNextHighestDepth(), {_x:catapult._x, _y:catapult._y});

  //This is the starting x speed of the projectile. Its speed is determined by the y position of the white slider

  projectile.dx = launchbutton.highorlong.highorlongslider._y/5;

  //This is the starting y speed of the projectile. Its speed is determined by the y position of the white slider

  projectile.dy = 20-launchbutton.highorlong.highorlongslider._y/5;

  //Remove the launch button

  launchbutton.removeMovieClip();

  //This onEnterFrame runs on the main level and moves the projectile, as well as the objects

  onEnterFrame = function () {

    //Update the distance the projectile has moved

    distance += projectile.dx;

    //Update the display showing the new distance, rounded down

    dist = Math.floor(distance);

    //If the current distance launched is greater than the high score, update it

    if (dist>bestdist) {

      bestdist = dist;

    }

    //Rotate the rock 2 degrees

    projectile._rotation += 2;

    //Move the projectile to the right

    projectile._x += projectile.dx;

    //Simulate gravity. Increase the downward speed

    projectile.dy -= .2;

    //Move the _Y position according to the dy force

    projectile._y -= projectile.dy;

    //If the rock is past the halfway point of the stage, move it back and adjust the objects on the screen

    if (projectile._x>=Stage.width/2) {

      //Shift all of the objects according to how far past the centerpoint the projectile travelled

      shiftObjects(Stage.width/2-projectile._x);

      //Move the _x position to the center of the screen

      projectile._x = Stage.width/2;

    }

    //If the projectile hits the ground, move it to the ground and set it to bounce back up

    if (projectile._y>Stage.height-20) {

      //move the y position to the ground

      projectile._y = (Stage.height-20);

      //slow down the y speed and reverse it, so it will bounce back up

      projectile.dy *= -.7;

      //slow down the x speed

      projectile.dx *= .7;

    }

    //Create a random number between 0 and 99

    switch (Math.floor(Math.random()*100)) {

    //if the random number is 0, create a trampoline

    case 0 :

      //a loop to track how many trampolines are currently on the stage

      trampcount = 0;

      for (var i = 0; i<objectArray.length; i++) {

        //if the current object in the list is a trampoline, increment the trampoline count

        if (objectArray[i].indexOf("trampoline") != -1) {

          trampcount++;

        }

      }

      //create a trampoline if there are less than 3

      if (trampcount<3) {

        addObject("trampoline");

      }

      break;

    //if the random number is 1, create a fan

    case 1 :

      //a loop to track how many fans are currently on the stage

      fancount = 0;

      for (var i = 0; i<objectArray.length; i++) {

        //if the current object in the list is a fan, increment the fan count

        if (objectArray[i].indexOf("fan") != -1) {

          fancount++;

        }

      }

      //create a fan if there are less than 3

      if (fancount<3) {

        addObject("fan");

      }

      break;

    }

    //Loop through the object array, moving each object and removing objects that have passed the screen

    for (var i = 0; i<objectArray.length; i++) {

      //If the current object has passed the screen, remove it

      if (eval(objectArray[i].toString())._x+eval(objectArray[i].toString())._width<0) {

        //physically remove the object

        removeMovieClip(objectArray[i].toString());

        //remove the object from the list of objects

        objectArray.splice(i, 1);

      } else if (objectArray[i].indexOf("trampoline") != -1) {

        //if the object is a trampoline and hits it, increase the y velocity

        if (projectile.hitTest(eval(objectArray[i].toString()))) {

          projectile.dy = Math.abs(projectile.dy*1.1);

        }

      } else if (objectArray[i].indexOf("fan") != -1) {

        //if the object is a fan and hits it, increase the x velocity

        if (projectile.hitTest(eval(objectArray[i].toString()))) {

          projectile.dx *= 1.1;

        }

      }

    }

    //If the projectile moves less than one tenth of a pixel on the x and y axis, the player has lost

    if (Math.abs(projectile.dy)<.1 && projectile.dx<.1) {

      //stop the on enter frame and display the lose game screen

      delete onEnterFrame;

      loseGame();

    }

  };

}

//Adds objects to the screen

function addObject(inputObject) {

  //Add the new object to the current list of objects

  objectArray.push((inputObject)+(++objectcount));

  //Attach the object specified by inputobject

  this.attachMovie(inputObject, (inputObject)+objectcount, this.getNextHighestDepth(), {_x:Stage.width+15, _y:Stage.height});

  //Move the new object to the top of the stage

  projectile.swapDepths(this.getNextHighestDepth());

}

//Move the x position of the objects in the objectArray

function shiftObjects(shiftdistance) {

  //Move each object in the array

  for (var i = 0; i<objectArray.length; i++) {

    eval(objectArray[i])._x += shiftdistance;

  }

  //Move the floor according to the projectile's speed. Loop it if it passes the center point

  floor._x = (floor._x+shiftdistance)%(floor._width/2);

}

//The player has lost the game

function loseGame() {

  //Show the lost game screen

  this.attachMovie("losescreen", "losescreen", this.getNextHighestDepth(), {_x:Stage.width/2, _y:Stage.height/2});

  //Update the score text to the current score

  losescreen.score.text = Math.floor(distance);

  //When the replay button has been pressed, start a new game

  losescreen.replay.onPress = function() {

    newGame();

    //remove the lose screen

    removeMovieClip(losescreen);

  };

}



No comments found ! Click here to be the first adding comments for this tutorial!