Latest tutorial: Making a Movieclip face another Movieclip or point on the stage | Ask Tutorial5!
 

Get tutorials on EMail




Make a wheel rotate and move in Flash with ActionScript

(48 votes)
Written by AnaS   

1. Let's start by creating a new Flash document having width 500px and height 200px and Frame Rate: 12 fps.

2. Make two layers. Name the first wheel and second actions. The actions layer should be in top.

3. In the first frame of the wheel layer draw a wheel or import a the wheel picture below
flashwheel.gif

(File>>Import>>Import to Stage or CTRL+R).

4. Select the wheel picture or drawing and choose Modify >> Convert to Symbol (F8). Name the Symbol wheelMC, choose MovieClip for Behavior and center for Registration Point. Then from the Properties Inspector give it an instance name of wheel_mc.
flashwheelrotate.gif
5. Now all you have to do is put this code in the first frame of the actions layer.

this.onEnterFrame=function(){
wheel_mc._rotation+=5;
wheel_mc._x+=5;
}

6. Test the movie (CTRL+Enter) and you'll see the wheel goes outside of the stage. We will modify the code so that the wheel move until the right margin and then return to the left margin, and so on. In this tutorial we use some values that depens on the dimensions of the wheel_mc. So if your wheel doesn't work exactly like the one from the tutorial just change the values of the begin and end x.

Now change the code from the first frame of the actions layer with the code below:

var dir:Number=0; /* dir variable is use for retain the direction of wheel: 0 - move to the

right, 1 - move ro the left*/
wheel_mc._x=35;

this.onEnterFrame=function(){
if (dir==0){
wheel_mc._rotation+=5;
wheel_mc._x+=5;
if (wheel_mc._x==470){
dir=1;
}
}
if (dir==1){
wheel_mc._rotation-=5;
wheel_mc._x-=5;
if (wheel_mc._x==35){
dir=0;
}
}
}

7. Test the movie (CTRL+Enter) and see the result.

You need to Register in order to download the FLA file.



Subscribe now via RSS feed and get all the new tutorials

written by sampson , August 08, 2007

good
written by Guest , August 09, 2007

Lovely! Keep it up
written by unnati , August 22, 2007


Line 4, 8, 8, 9,9,10,15,16,16,17 1120: Access of undefined property wheel_mc. wheel_mc._x=35; wheel_mc._rotation =5;
I am getting errors. Please help me
written by you , August 28, 2007

How do you do it so that you can control its rolling? Like use the left arrow to make it go left, and the right arrow to make it go right, as well as up and down?
written by barefoot , August 28, 2007

this is a good description...the codes are so big!
written by Lovepreet , August 30, 2007

very keep it up. gud on ya
written by AnaSt , August 30, 2007

For rotate the wheel using the arrow keys look to this tutorial Moving an object using the arrow key in Adobe Flash 8
written by AnaSt , August 30, 2007

http://www.tutorial5.com/content/view/117/46/
written by bhaskar , October 12, 2007

Good works man, If u can pls send me more works to my email id specialy doing web design using flash and some html file. pls help me on this

Thanks
written by FUCK YOU , December 07, 2007

IS THIS for FLASH 8 actionscript 2, because it doesnt work for shit
written by lil lee , December 11, 2007

it doesnt work on my one can u email me back and give me some advice plz or give me some more actionscrips
written by bob , January 07, 2008

this is crap i could make that with my eyes closed get some decent one plz
written by gurram seetaramulu , January 18, 2008

it,s fine
written by Piotr , January 25, 2008

I made some modification, linear speed is depend on rotation speed:

var dir:Number=0;

wheel._x=35;

var D:Number=75; //diameter
a=15; //angle increase, we can change rotation speed
circuit= 3.1415*D; //circumference
c=a/360; //road increase
linear_increase=c*circuit;

this.onEnterFrame = function () {
if(dir==0){
wheel._x =linear_increase;
wheel._rotation =a;
if(wheel._x>400){
dir=1;
}
}
if(dir==1) {
wheel._x-=linear_increase;
wheel._rotation-=a;
if(wheel._x
written by hethi , April 05, 2008

how to create fire effect
written by hethi , April 05, 2008

i want lot of action script .plz help me.and send me action script
written by hethi , April 05, 2008

how to develop my creative knowlage..plz help me
written by Saurabh Gupta , April 28, 2008

nice tutorial,

But when i am change the rotation speed then this tutorial not working properly. plz. u tell me why ?
written by coolgraphs , May 21, 2008

Very nice action script tutorial.
written by pukkalla , May 21, 2008

Very simple and useful tutorial
written by scott Mulligan , June 27, 2008

i would like a very suttle smooth rotation, rotating from the middle registration point and on the spot (not side to side or up and down)
written by bharathi , August 07, 2008

i want script daily change the vibgyor color for banner
written by Karim , December 08, 2008

i've done all the above steps, but the wheel move as a projectile not a stable moving wheel, could anyone help me in this issue,
Thnx in advance:)
written by rupal , February 17, 2009

i want to rotate a pic of globe how can i do this?
written by Nick12122 , February 25, 2009

rupal, rotating a globe is different. make a stationary blue ball, and have two graphics of the continents alone move past the globe. make a mask so that the continents are only visible when over the blue ball
written by Rajeev Trivedi , February 25, 2009

Good Work
written by p.vishwanath , April 02, 2009

var dir:Number=0; /* dir variable is use for retain the direction of wheel: 0 - move to the

right, 1 - move ro the left*/
wheel_mc._x=35;

this.onEnterFrame=function(){
if (dir==0){
wheel_mc._rotation =5;
wheel_mc._x =5;
if (wheel_mc._x==470){
dir=1;
}
}
if (dir==1){
wheel_mc._rotation-=5;
wheel_mc._x-=5;
if (wheel_mc._x==35){
dir=0;
}
}
}


the above code is not working plz try it and correct plz
written by Neb3nk NyeR4t , June 20, 2009

bagus euy ...

jd ada ide baru nie ^^ hehehehe

thanks ah bagi yang dah buat n upload in

Okeh

P3ace

Do you need more help? Ask now!
 

busy
Last Updated ( Saturday, 22 March 2008 )