Publishing System Settings Logout Login Register
Movieclip Control basics: Learn to move objects around using the keyboard
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on July 23rd, 2005
5693 views
Adobe Flash

Intro


This tutorial is an adaption of a script I have previously made, I have removed most of the hard to understand statements that newcomers to flash probably wouldn�t understand. It involves a small amount of triginometry so some may not understand whats happening some of the time.

For this tutorial I will be using a car but you can do whatever object you like like a helicopter or whatever, and thanks to flash you can also edit it the design of your object later by double clicking it.

If you would like to use the car then you can download it in the .fla file mentioned at the end of this tutorial

The Tutorial


1. First we create a shape to represent the car and then convert it to a movieclip make sure your movieclip is pointing upwards for example the front of the car is pointing upwards

user posted image

2.. Next normal click your movieclip so that a little circle with a cross in it appears.. then open the Actions panel. If you do not know how to do this simply go WINDOW->DEVELOPMENT PANELS->ACTIONS or WINDOW->ACTIONS in some versions of flash.

3.. Now type or copy/paste the following code into the actions panel.

onClipEvent (load) {
//listen for key presses
downCapture = new Object();
downCapture.onKeyDown = function () {
switch (Key.getCode()) {
case Key.LEFT: left = true; break;
case Key.RIGHT: right = true; break;
case Key.UP: up = true; break;
case Key.DOWN: down = true; break;
}
}
Key.addListener(downCapture);
//listen for key returns
upCapture = new Object();
upCapture.onKeyUp = function () {
switch (Key.getCode()) {
case Key.LEFT: left = false; break;
case Key.RIGHT: right = false; break;
case Key.UP: up = false; break;
case Key.DOWN: down = false; break;
}
};
Key.addListener(upCapture);
rotateBy = 9; //how much we should rotate every frame (L/R key is pressed)
accelleration = 5; //how much we should move every frame (when Up key is pressed)
function radtodeg(deg) { //convert radians to degrees (for later)
return (deg/180) * Math.PI;
}
}
onClipEvent (enterFrame) {
if (left) { _rotation -= rotateBy } //rotate counter-clockwise
if (right) { _rotation += rotateBy } //rotate clockwise
if (up) {
if (accelleration < 10) { //if is below accelleration limit then allow to accellerate
accelleration++;
}
//calculate where the car will move to:
angle = _rotation;
angle = radtodeg(angle-90);
by_x = accelleration * Math.cos(angle)
by_y = accelleration * Math.sin(angle)
_x +=by_x //move the car here
_y +=by_y // and here
}
}



The Movie should now work but if your interested in what happened then ill explain it here....


onClipEvent (load) {


The script inside this is executed ONLY when the movieclip first appears in the movie

downCapture = new Object();
downCapture.onKeyDown = function () {
switch (Key.getCode()) {
case Key.LEFT: left = true; break;
case Key.RIGHT: right = true; break;
case Key.UP: up = true; break;
case Key.DOWN: down = true; break;
}
}
Key.addListener(downCapture);


This "captures" when the user presses down on one of the arrow keys (left, right, up and down) and stores the result in a variable.. for example when the down key is pressed the d variable is set to true

upCapture = new Object();
upCapture.onKeyUp = function () {
switch (Key.getCode()) {
case Key.LEFT: left = false; break;
case Key.RIGHT: right = false; break;
case Key.UP: up = false; break;
case Key.DOWN: down = false; break;
}
};
Key.addListener(upCapture);


This "captures" when any one of the arrow keys (left, right, up and down) spring back up, or are released as some say. for example when the down key is released by the user the d variable is set to false

rotateBy = 9;
accelleration = 5;
function radtodeg(deg) {
return (deg/180) * Math.PI;
}


rotateBy is the number of pixels the movieclip will rotate when the left or right buttons are pressed.
accelleration is the accelleration of the movieclip (how fast it moves) when the up button is pressed

function radtodeg(deg) { bit is for converting radians to degrees, we need this in order to make the trig functions to work the way we want to later in the script.

onClipEvent (enterFrame) {


this executes the script inside every time the frame is loaded (by default 12 times per second)
if (left) { _rotation -= rotateBy }
if (right) { _rotation += rotateBy }


every time the left button is pressed the movieclip will rotate by rot number of degrees (counter-clockwise)

same for the right button, but the other direction (clockwise)
if (up) {


Executes the script inside whenever the up button is pressed

if (accelleration < 10) {
accelleration++;
}


If accelleration is less than 10 then the acceleration will increase by 1. This prevents the movielip from exceeding a certain speed. change the number 10 to a higher number to allow it to go faster.

angle = _rotation;
angle = radtodeg(angle-90);
by_x = accelleration * Math.cos(angle)
by_y = accelleration * Math.sin(angle)
_x +=by_x
_y +=by_y


This part involves triginometry, it basicly determines the amount the movieclip should move horizontally (x-axis) and vertically (y-axis) and then moves it according to the result it got.

Conclusion


The movie should now work, to test it simply go CONTROL->Test Movie or hold down the CTRL-ENTER buttons simultainiously

Example








If you would like to download the .fla source file of this tutorial please go here
http://www.pixel2life.com/twodded/staff/pr0jekt/tutorials/CarControl/cartut.fla
Premium Publisher
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
pr0jekt

Hello World!
I am a 17 Year old student from South
Australia. Im a web developer and
programmer most of the day when im not
sleeping :).
I also work on the Pipeline Content
Managment System and Forums.
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top