Swinging ball on an elastic band with Flash
Friday, March 28, 2008

  1. Here is the code to start with. All you need is ActionScript 3.0 Flash project and on the stage a Textbox with the name mouseX_txt and another Textbox with the name mouseY_txt. They must be set to Dynamic Text (not the default Static Text) for the type of textbox.

    The following code all goes in Frame #1 of Layer #1, which should be your only Layer and only Frame (and Keyframe) for this application.

    2. addEventListener(Event.ENTER_FRAME, followMouse);
 
function followMouse( evt : Event ) {          
    mouseX_txt.text = String(mouseX);      
    mouseY_txt.text = String(mouseY);
}
  2. After you get the above code working, you should be able to guess where the mouse is even if there is no mouse pointer. Add the following statement to the code. Do not add it inside the followMouse() function. It can be anywhere outside that function. 
    
Mouse.hide();
  3. Now, create a Library Symbol of type Movie Clip. It will be given the name ballSymbol in the Library.

    1. Convert a perfect circle Shape into a Movie Clip type Symbol using the F8 key or the Insert New Symbol method.
    2. Make sure it has the center registration point. We have always been accepting the default upper left hand corner registration point.
    3. Be sure that you displayed the Advanced portion of the Convert to Symbol dialogue box and checked the Export for ActionScript checkbox and the Export in First Frame checkbox. Otherwise, ActionScript 3.0 statements cannot be used on the movie clip symbol.
    4. Name an instance of the ballSymbol with the name theBall.

    Add the following two lines of code to the followMouse() function. 

    theBall.x = mouseX; 
theBall.y = mouseY;

    Now, if your application is working you should again be able to see where the mouse is. The instance of ballSymbol named theBall will follow your mouse around on the stage.If you comment out the Mouse.hide(); statement, you will see the mouse pointer again, but the ball will be right underneath it. 

    // Mouse.hide();       <<==== comments out the Mouse.hide(); statement with the // technique.
  4. Create another instance of ballSymbol and give it the instance name of striker.

    Here is the code for striker that goes outside of the followMouse() function. 

    striker.vx = 0;        
striker.vy = 0;
  
var spring:Number  = .1; 
var damping:Number = .9;

    And here is the code that goes inside the followMouse() function. (After the existing 4 statements and at the end of the followMouse() function is the best place to position these statements in the algorithm). 

    var xDist = (theBall.x - striker.x);  
var yDist = (theBall.y - striker.y);
 
striker.vx += xDist * spring;         
striker.vy += yDist * spring;
 
striker.vx *= damping;               
striker.vy *= damping;
 
striker.x += striker.vx;           
striker.y += striker.vy;

    Try out the code now. You should see that the striker blue ball follows theBall red ball around. Can you make it orbit the red ball by getting the mouse movements just so?

  5. Finally we are ready to attach the elastic rubber band so it looks as if the red handle is moving and swinging around the larger blue striker ball as we move our mouse. The red handle and the blue striker ball are connected by an elastic band.

    Code you wil need to add outside of the function followMouse() consists of the following: 

    var lineCanvas:Shape = new Shape();
addChild(lineCanvas); 
   
function drawLine():void { 
    with (lineCanvas) {
        graphics.clear();                           
        graphics.moveTo(theBall.x, theBall.y);
        graphics.lineStyle(1, 0x4C5AD8);            // Choosing 0x5A77EE or 0x22FFFF or 0xFF00FF would be okay too. 
        graphics.lineTo(striker.x, striker.y);
    }
}

    Finally, the very last statement you need to add inside of the followMouse() function is drawLine(); which actually uses the drawLine() function you defined in ActionScript 3.0 (definition is shown just above here). 

    function followMouse( evt:Event ) { 
    
   ...
   drawLine();
}
  6. Experiment with the finished appliction.
    1. Comment out the graphics.clear(); statement with // to see what happens when you do NOT erase the previous lineCanvas before you draw the next line. // graphics.clear();
    2. Try graphics.lineStyle(8, 0x0000FF); to see what lineStyle of size 8 and color BLUE looks like. This is in the drawLine() function.
    3. Try changing the spring from .1 to .4 to see what the effect is on the graphics when you move the moouse.
    4. Try changing the damping from .9 to .5 to see what the effect is (After you change the spring back to .1, of course!)

  7. Modify menu, Arrange, Bring to Front command might need to be done to make theBall be in front of striker. Otherwise, the striker blue ball will hide theBall red handle smaller ball. This is altering the z-order. (x is horizontal position, y is vertical position and z is the 3rd dimension). Thus the term z-order of the objects and graphics.