blank blank blank blank blank
blank       blank
blank  

.:|:. home .:|:. resources .:|:. links .:|:. contact .:|:.
  blank
blank       blank
blank
blank       blank
blank  
Movie Clip Rotation With Actionscript

  • If you are currently using motion tweens to create circular motion for your movie clips I urge you to use actionscript instead.
  • Not only is it easier, it is also more adaptable.
  • For example if you want to change the rotational speed of the clip simply change the number that controls it.
  • Another advantage is file size, especially when the motion is slow. Added frames equals greater .swf file size.
  • As the examples below show there are also many variations you can use.
  • If you are new to actionscript you need to know that code can be attached to a frame or to a movie clip. They are distinctly different. The "onClipEvent" handler will only work when attached to a movie clip.
  • When code is attached to a frame you will see a lower case "a" in the frame.
  • Click the movie clip so that the code is attached to the clip and not to the frame. You should not see a lower case "a" in the frame when it is attached to the movie clip.
  • The animation to the right shows an important property of movie clip rotation in Flash. After 180 degrees, Flash interprets the rotation as a negative number.
  • The code attached to the outer (slowest) ring is:

    onClipEvent (enterFrame)
        {
        this._rotation+=1;
        }


  • The number "1" specifies how many degrees the clip will rotate each frame. This number varies for each ring which is why they rotate at different speeds.
  • At first glance it would seem that "_rotation" would increment endlessly and necessitate additional code to reset it back to zero after "_rotation" reaches 360 degrees.
  • You will need to keep this in mind when using the "_rotation" property of a movie clip to determine the angle of the movie clip.
  • If you need to know the degrees of rotation as a factor of 360, a simple conversion code like that shown below will do the trick.

    onClipEvent (enterFrame)
        {
        this._rotation+=1;
        clipAngle=this._rotation;
        if(clipAngle<0)
            {
            clipAngle=180+(180+this._rotation);
            }

        }


  • This version accelerates the rotation constantly.

    onClipEvent (enterFrame)
        {
            //This version uses multiplication so
            //rotateIncrement cannot equal zero
        if(this._rotation==0) {rotateIncrement=.1;}
            //This code resets the max speed flag
        if(rotateIncrement<=1) {accelFlag=1;}
            //This code sets the max rotational
            //speed shown here as 30 degrees per frame
            //If max acceleration has occured the
            //code resets the speed flag
        if(rotateIncrement>30) {accelFlag=0;}
            //This code sets the acceleration speed
        if(accelFlag==1) {rotateIncrement=rotateIncrement*1.1;}
            //Use rotateIncrement=rotateIncrement to
            //maintain max speed
        if(accelFlag==0) {rotateIncrement=.1;}//rotateIncrement;}
            //Increment the rotational speed
        this._rotation+=rotateIncrement;
        }


  • This version accelerates the rotation steadily.

    onClipEvent (enterFrame)
        {
            //This code resets the max speed flag
        if(rotateIncrement<=1) {accelFlag=1;}
            //This code sets the max rotational speed
            //shown here as 15 degrees
            //If max acceleration has occured the
            //code resets the speed flag
        if(rotateIncrement>15) {accelFlag=0;}
            //This code sets the acceleration speed
        if(accelFlag==1) {rotateIncrement+=.1;}
            //This code resets rotational speed back to zero
            //Use rotateIncrement=rotateIncrement to
            //maintain max speed
        if(accelFlag==0) {rotateIncrement=0;}//rotateIncrement;}
            //Increment the rotational speed
        this._rotation+=rotateIncrement;
        }


  • This version accelerates then decelerates the rotation.

    onClipEvent (enterFrame)
        {
            //This version uses multiplication so
            //rotateIncrement cannot equal zero
        if(this._rotation==0) {rotateIncrement=.1;}
            //This code resets the acceleration
            //flag to accelerate
        if(rotateIncrement<=.1) {accelFlag=1;}
            //20 sets the maximum speed
            //If rotateIncrement reaches 20 the flag
            //is set for deceleration
        if(rotateIncrement>20) {accelFlag=0;}
            //Increase the speed of rotation
        if(accelFlag==1) {rotateIncrement=rotateIncrement*1.1;}
            //Decrease the speed of rotation
        if(accelFlag==0) {rotateIncrement=rotateIncrement*.9;}
            //Rotate the movie clip
        this._rotation+=rotateIncrement;
        }


  • This version gives a trip hammer effect.

    onClipEvent (enterFrame)
        {
            // Check to see if the clip is at zero rotation
            // If it is, change it to one so that it can
            //be multiplied
        if(this._rotation==0) {rotateIncrement=1;}
            //Set the flag for the downstroke
        if(rotateIncrement<=1) {accelFlag=1;}
            //Set the flag to bring the hammer back
            //90 indicates the total degrees of movement the
            //hammer will make before returning
        if(rotateIncrement>90) {accelFlag=0;}
            //Add acceleration to the downstroke
        if(accelFlag==1) {rotateIncrement=rotateIncrement*1.1;}
            //Bring the hammer back up
        if(accelFlag==0) {rotateIncrement=rotateIncrement*.9;}
        this._rotation=rotateIncrement;
        }


  blank
blank       blank
blank
blank       blank
blank     blank
blank       blank
blank blank blank blank blank