This is a fairly basic tutorial, to show you how some basic actionscript can be used to alter a movie clips position. Your final result (in about 5 mins!) will be something like this:
Nothing fancy, but it does its job. Well, let us begin!
STEP 1
First of all as always, we need to set up the stage. Create a new actionscript 2 file and set the framerate to 31. Rename the first layer to ’stuff’ and create a new layer called ‘actions’. Lock the actions layer and select the stuff layer. Select the shape tool and draw a shape on stage.
As always I went all out and drew a blue square, again.
Select the square and press f8 top convert to symbol. Select movie clip and call it MC_square. In the properties panel set the instance name to MC_square. Lock the stuff layer, and select the actions layer.
STEP 2
Now we add the actionscript. Now the first thing we bneed to do is to create a variable to store a numbered value. This will be used to constantly move MC_square, and i’ll show you how. Press f9 to enter the actions panel and enter the following code:
var i:Number = 0;
This creates a variable called ‘i’, which has a ‘Number’ value, currently set to ‘0′.
STEP 3
Now we need to add the function to control the counter and move our square. Enter the following code into the actions panel:
onEnterFrame = function(){
if(i<124){
i++;
MC_square._x +=2;
}
}
Now I will explain the code.
The first line listens for an event, in this case entering this frame, and then runs the function ( ‘onEnterFrame = function(){’ ). The next line is checking if the value of ‘i’ is less than 124. If it is less than 124 ( ‘if(i<124){’ ), then flash will run the next lines of code. ( ‘i++’ ) increases the value of ‘i’ by 1 every time this function runs, and ( ‘MC_square._x +=2;’ ) will increase the squares x-position by 2 every time. The following brackets close the ‘if’ statement, and then close the function. Once ‘i’ is equal to 124, the movement will stop.
STEP 4
Hit Ctrl + Enter, ta-da! Sorted.
Signing Off,
The Dude
Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!
Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.
Help me out by voting for this tutorial
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
Hi I’m working on a site and on the home page i have some images that are basic timeline motion tweens, I was wondering if i can do this with action script, I want them to fade into each other like on the site, basic vertical or horizontal movements would be fine but do you know how to change the alpha setting towards the end of the movement. and also when the image is near the end of the movement is there away it can trigger the movement of the next image.
website is http://www.samaramorris.com
thanks
Hi Ryan,
I have looked at your site and i am unsure exactly what you mean. To change the alpha of something towards the end of its movement, you need to tell actionscript to check the position of the movie clip and fade the alpha accordingly after a certain point. For example, if you had a moviclip called MC_square going from an ‘x’ position of 0->400, you can check if the x-position is over 300, then reduce the alpha by ‘x’amount each frame. This can work the same with triggering the next one, so if the x position of MC_square is greater than 350, start to move MC_square2.
Does that make sense to you? Nice looking site tho btw
The Dude
very good and nice blog
This is working perfectly for me, but just a quick question - how do I tell it to reset when it reaches a set value for i, so I can loop the animation? I’ll keep trying, but a pointer would be great!
Thanks for the tutorial, saved a whole lot of timeline frames!
Ok, couple of things:
This is NOT the most efficient way to do this. It’s actually really processor intensive. (I’m running a Mac Pro, and tweening two 1k MCs at the same time bogs it down.) That being said, if you want to loop, as Will Jones requested, do the following:
replace the actionscript from above with this:
stop();
var i:Number = 0;
onEnterFrame = function(){
if(i<500){
i++;
your_MC._x +=2;
}
else{
clearInterval(scroller);
gotoAndPlay(1);
}
}
scroller = setInterval(onEnterFrame, 20);
Now insert a blank keyframe immediately following the keyframe with your actions attached. It’s kindof a sketchy workaround, but it works (although like I said, it’s pretty processor-heavy.)
Nice tutorial !
____________________
Saguenay-IT, (IT Outsourcing, SOA, PHP, ASP, Flex, ActionScript, JavaScript…)
yoyoyo oi oi thanks man, got nightclub in me bedroom but this post is dappa!
Hey,
Is it possible to control the speed of the motion?
My MC had to move over a few pixels, but this way it’s moving too fast.
What about EASING?
there might be a need to ease it in or out, how could it be achieved using Action Script?
Hi, that was great, but please tell me how to make the square move continuosly, or to loop. please reply quickly, thanks
Hi again i realised i wrote the wrong e-mail address, kindly show me how to make the square move continously please. thanks again.