Throw a ball with a sling physics Flash tutorial: Part 2 by Kevin Ward

Only 2 days. That’s how much time Kevin Ward needed to solve and publish the solution of the problem posted in Throw a ball with a sling physics Flash tutorial.

You may know Kevin for his excellent post about a different approach to create a game like Line Rider, and now he come with the second part of the sling tutorial.

Take your honour, Kevin, you deserve it!!

This is the movie Kevin created:

And this is the actionscript, with comments in some critical parts:

This is an excellent solution to the problem, and I think this should be an inspiration for the ball physics Flash game design competition.

Download the source and say “good work Kevin!”.

  • Pingback: Throw a ball with a sling physics Flash tutorial at Emanuele Feronato()

  • Monkios

    Great Tut Kevin.

    The only problem I see from your solution is that when the ball goes on either side of the sling, the elastic automagicly goes and gets the ball making it impossible for it to fall off-screen.

    When your like if the ball’s y is lower than bot points, you should also look if it’s x is to the left of Point1 (xP2 ie: 450)

    You should also change the ball’s reference point for something else beacause if the points are not placed on y=200, your check for ball’s y = 187 will be wrong.

    The same tutorial with moveable points would be great.

  • Matthew

    Forgive me if im wrong but because Im only 12 i don’t realy understand the maths that well. So I made a much easier way to do this which although it doesnt look exactly the same you hardly notice it.
    Below is the code (if you want to use it just copy it to the main timeline, youll need three balls in your library linkaged as ball,node1 and node2. Also center the registration points of the two nodes and for the ball choose the middles bottom one)

    //Attach some movieclips to the stage
    var node1:MovieClip = _root.attachMovie(“node1”, “node11”, 3, {_x:50, _y:350});
    var node2:MovieClip = _root.attachMovie(“node2”, “node22”, 4, {_x:650, _y:350});
    var ball:MovieClip = _root.attachMovie(“ball”, “balll”, 5, {_x:350, _y:200});
    var node2:MovieClip = _root.attachMovie(“node2”, “node22”, 4, {_x:650, _y:350});
    //The movieclips we will use as lines
    var line1:MovieClip = _root.createEmptyMovieClip(“lines1”, 1);
    var line2:MovieClip = _root.createEmptyMovieClip(“lines2”, 2);
    line1.lineStyle(2,0×000000);
    line2.lineStyle(2,0×000000);
    line1.moveTo(node1.x,node1.y);
    line1.lineTo(node2.x,node2.y);
    //Define some variables we can use later on
    var friction:Number = 0.99;
    var xspeed:Number = 0;
    var yspeed:Number = 0;
    var gravity:Number = 0.5;
    var spring:Number = 1;
    var dragging:Boolean = false;
    //These are for dragging the ball

    ball.onPress = function() {
    this.startDrag();
    yspeed = 0;
    xspeed = 0;
    gravity = 0;
    spring = 0;
    dragging = true;
    };

    ball.onRelease = function() {
    this.stopDrag();
    yspeed = 0;
    gravity = 0.5;
    spring = 1;
    dragging = false;
    };

    //When you click on one of the nodes the ball is placed back in its original position
    node1.onRelease = function() {
    _root.ball._x = 350;
    _root.ball._y = 200;
    xspeed = 0;
    yspeed = 0;
    };
    node2.onRelease = function() {
    _root.ball._x = 350;
    _root.ball._y = 200;
    xspeed = 0;
    yspeed = 0;
    };

    //The main function
    this.onEnterFrame = function() {
    //Moves the ball
    yspeed = gravity;
    ball._y = yspeed;
    xspeed *= friction;
    ball._x = xspeed;
    line1.clear();
    line2.clear();
    //If its lower than the node
    if (ball._y>node1._y) {
    //Check how far to the right and left the nodes are
    var xpos1:Number = node1._x-ball._x;
    var xpos2:Number = node2._x-ball._x;
    xpos1 = -xpos1;
    //If your not dragging the ball
    if (dragging == false) {
    //If it is further to the right than the left
    if (xpos1>xpos2) {
    //Move it to the left
    xspeed -= 0.3;
    }
    //Other way round
    if (xpos2>xpos1) {
    xspeed = 0.3;
    }
    }
    //Otherwise it would keep going down
    yspeed -= spring;
    //Draw the lines again so they are connected to the ball
    line1.lineStyle(2,0×000000);
    line2.lineStyle(2,0×000000);
    line1.moveTo(node1._x,node1._y);
    line1.lineTo(ball._x,ball._y);
    line2.moveTo(node2._x,node2._y);
    line2.lineTo(ball._x,ball._y);

    } else {
    //If it isnt below the two points draw the line so it connects the two nodes
    line1.lineStyle(2,0×000000);
    line1.moveTo(node1._x,node1._y);
    line1.lineTo(node2._x,node2._y);
    }
    };

  • Matthew

    oops I just relised it doesnt add the plus symbol for some reason so
    in your code change

    yspeed = gravity;
    ball._y = yspeed;
    xspeed *= friction;
    ball._x = xspeed;

    to

    yspeed (plus symbol)= gravity;
    ball._y (plus symbol)= yspeed;
    xspeed *= friction;
    ball._x (plus symbol)= xspeed;

    obviously replaing the (plus symbol) with the actual symbol

    also you will need to change any quotation marks to normal ones
    just delete them and then put them in again as normal ones

    o and gd luck to everyone entering the Jayisgames comp :)

  • Matthew

    o and also change this:
    if (xpos2>xpos1) {
    xspeed = 0.3;
    }

    to

    if (xpos2>xpos1) {
    xspeed (plus symbol)= 0.3;
    }

  • Izy

    You’re very correct. I’ve made some consideration on that, but I didn’t want to take too large a step from Emanuele’s original tutorial.

    A good tweak would also be to allow the two points to be at different elevations.

  • herman

    hey could somebody help me? I don’t understand these lines ->

    var xOffset:Number=
    Math.cos(angle1+Math.PI/2)*radius;

    var yOffset:Number = Math.sin(angle1+Math.PI/2)*radius;

    How can you know ,you should add “Math.PI/2”
    to get to the right position?

    Please tell me the idea !

  • toworth matthew
    its funny how u can write actionscript so well and not know math :) but anyway
    i’ve been putting ur codes in a flash movie, and besides the faults u said there is also this one

    at least at my flashstage (pro 8)
    all the lines like this one give errors, because the asterix * gets changed to a “x”
    line1.lineStyle(2,0*000000);

    oh and i just noticed, (i was changing the coordinates to get the things in screen) and u have the node2 2 times in the top lines, u create it 2 times? i don’t realy see use for it i deleted it and it still works :) just that u know its double ;)

    i placed ur game here
    http://users.telenet.be/architectural_inspiration_peter_stals/matthew.swf

  • question i would like to make something similar i would like to make a trowable ball without the sling part and with boundries so that you can trow it with your mouse but i dont want gravity i think you know what i mean try to find a way to do this thanks

  • This was a nice read, thanks :)

  • William

    I made an exetremely similar tutorial, only… This my one allows you to move the points on the elastic. Actually they happen to be strikingly similar, I just came across this now.

    http://willasss.deviantart.com/art/Tutorial-Ball-Band-Collision-166528666

  • edgar

    Good work Kevin, Thanks for sharing