How to Make Objects Bounce in AS3

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make Objects Bounce in AS3
Make a ball bounce with AS3 tween methods. (Jupiterimages/BananaStock/Getty Images)

Making objects bounce with AS3 (ActionScript) code will let you add more features to you Flash animation designs and action games. And that's because AS3 lets you create realistic custom bounces with little code and little time. Instead of having to draw complex bounce motion paths on the Flash stage, you can use the AS3 tween method to bounce your objects instead. With the Flash tween method, you bounce an object with the tween methods parameters. These parameters will let you select how fast your object bounces, how long it bounces and in which direction it bounces.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Adobe Flash Professional (CS3, CS4 or CS5) or Adobe Flash Builder or Adobe Flex

Show MoreHide

Instructions

  1. 1

    Start your Flash program. Select "New" from the "File" menu on the main Flash menu bar. Select the "ActionScript 3" file option from the dialogue box.

  2. 2

    Select the "Actions" option from the "Window" menu on the main Flash menu bar to open the "Actions" editor. Position your mouse cursor on the first line in the Actions editor. Type the code to import the "transition" classes needed to code a Tween. Type the import code as three separate lines to include the "Tween" and the "easing" and the "TweenEvent" classes as shown below.

    import fl.transitions.Tween;

    import fl.transitions.easing.*;

    import fl.transitions.TweenEvent;

    ;

  3. 3

    Code a red circle shape object and place it on the stage. Use an unsigned integer (uint) variable to store the hexadecimal code equivalent of red (ff0000), a Shape instance called "ball" to define a shape, the line Style method to assign a 1 pixel black border to the shape, the draw Circle method to define the initial position of the circle's centre and its radius, the begin Fill and end Fill methods to colour the circle the assigned red colour and the add Child method to place the circle on the stage (screen). Type the AS3 code listed below in the Actions Editor to draw an place the red circle on the stage.

    var colour: uint = 0xff0000;

    var ball:Shape= new Shape();

    ball.graphics.lineStyle(1);

    ball.graphics.beginFill(colour);

    ball.graphics.drawCircle(100,100,100)

    ball.graphics.endFill()

    stage.addChild(ball)

    var bounce:Tween = new Tween(ball, 'y', Bounce.easeIn, 0, 300, 3, true);

  4. 4

    Code a tween to bounce the "ball" object. Set the parameters in the "Tween" statement as "ball" for the object you want to tween, "y" as the direction you want to bounce the ball in (vertical), "Bounce.easeIn" to specify a bounce that starts off slow, the number zero (0) as the starting position on the y-axis to begin the bounce, the number 300 as the ending position on the y-axis of the object at the end of the tween, 3 as the time duration of the bounce, and true to specify that the time, 3, is in seconds. Assign and create the Tween to an object named "bounce" with the code below.

    var bounce:Tween = new Tween(ball, 'y', Bounce.easeIn, 0, 300, 3, true);

    Type the latter statement as the last line on the code already entered as follows:

    var colour: uint = 0xff0000;

    var ball:Shape= new Shape();

    ball.graphics.lineStyle(1);

    ball.graphics.beginFill(colour);

    ball.graphics.drawCircle(100,100,100)

    ball.graphics.endFill()

    stage.addChild(ball)

    var bounce:Tween = new Tween(ball, 'y', Bounce.easeIn, 0, 300, 3, true);

  5. 5

    Select "TestMovie" from the "Control" menu on the main Flash menu bar. Observe that a red circle starts to move slowly downward and then bounces back up to the top of the screen. Also observe that the bounce lasts for 3 seconds, the time specified.

Tips and warnings

  • Change the tween property in the "Tween" statement. Try changing the tween property in the Tween statement to scaleX, scaleY and rotate to find out how tweening different properties effect the path of the bouncing object. Add two or more tweens to an object, using two different tweens to the same object in different lines of code.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.