• home
  • forum
  • my
  • kt
  • download
  • Mouse Dragging

    Author: 2008-09-25 16:02:58 From:

    These circles will follow your mouse around with a nice elastic effect.
    Free Flash Tutorials, Actionscript, Navigation, Mouse Dragging

    First create two Movie Clip; one is for the smaller circle you can see above and the other for the rest of the circles.

    Drag the smaller on to the stage and give the instance name "circle1".

    Now drag the other Movie Clip 4 times, each time make it bigger and give instance names, "circle2", "circle3", etc.

    Put them together and they should look like this:
    Free Flash Tutorials, Actionscript, Navigation, Mouse Dragging

    Every one of these instances will have code, but the only difference will be on a variable value. Paste this on all of them:
    //on load declare variables onClipEvent(load) { //starting xspeed, how much to move on the _x. xSpeed = 0 //starting yspeed ySpeed = 0 //This is the "real" speed, the bigger it is //the slower the Movie Clip will move and vise versa Speed = 40 //if it is too high the Movie Clip will move very slowly //and wont have elasticity, is it too low it won�t //stop. I recommend using 1.13, but you can try different values. Stop = 1.13 } onClipEvent(enterFrame) { //move the Movie Clip _x += xSpeed _y += ySpeed //get new x and y speed, using the distance between the mouse //and the Movie Clip and the actual speed. xSpeed +=(_root._xmouse - _x) / Speed ySpeed +=(_root._ymouse - _y) / Speed //this decreases the speed, so it stops xSpeed /= Stop //if yspeed was equal to 10, after this line it will be 10/1.13 = 8.84 ySpeed /= Stop }

    Now change the speed variable for each Movie Clip:
    circle1 = 40 circle2 = 45 circle3 = 50 circle4 = 55 circle5 = 60

    Test the movie now. If you think the animation is too slow you need to increase the frame rate of you movie.
    To do that, double click the frame rate and set it to 30.
    Free Flash Tutorials, Actionscript, Navigation, Mouse Dragging

    Free Flash Tutorials, Actionscript, Navigation, Mouse Dragging

    The Movie Clips should be moving more smoothly now.

    Code Explanation

    onClipEvent(load) { xSpeed = 0 ySpeed = 0
    Two variable for the starting speed on the _x and _y coordinate.

    Speed = 40
    Speed used for an easing effect, the bigger it is the slower the Movie Clip will move and vise versa.

    Stop = 1.13
    Variable used to slow the Movie Clip down so it stops in the location of the mouse.

    } onClipEvent(enterFrame) { _x += xSpeed _y += ySpeed
    Move the Movie Clip.

    xSpeed +=(_root._xmouse - _x) / Speed ySpeed +=(_root._ymouse - _y) / Speed
    Set new speeds using the distance between the current location of the Movie Clip and the position of the mouse divided by the "Speed" variable.

    xSpeed /= Stop ySpeed /= Stop }
    These lines decrease both speeds until it gets in the mouse position.

    That's all folks! See you in next tutorial!

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      3D (20)
      Math Physics (14)
      3rd Party (5)
      Navigation (60)
      Actionscripting (26)
      Optimization (16)
      Animation (32)
      Projector (9)
      Audio (46)
      Special Effects (112)
      Backend (25)
      Text Effects (65)
      Drawing (18)
      Tips and Techniques (41)
      Dynamic Content (25)
      Tricks (6)
      Games (66)
      Utilities (19)
      Getting Started (71)
      Video (10)
      Interactivity (28)
      Web Design (29)

    New

    Hot