Flash: Moving a Movieclip With the Arrow Keys

Introduction: Flash: Moving a Movieclip With the Arrow Keys

Have you ever played a flash game online? Ever thought "hey, I could make something better than this?", but you don't know how? Well, all that's about to change with these (if people like them) instructables on Flash.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Why?

Why am I doing this, you might ask. Well, there are a lot of reasons.
1) When I tried to learn flash, I had to search everywhere to find tutorials.
2) There aren't any that I can find here.
3) It's fun and good practice.
4) I have nothing else to do.
There. Do you feel informed now? Empowered because I did something you wanted me to do? Good. You'll get less frustrated later during debugging(if you need it).

Step 2: Getting Started

Well, if you haven't figured this out yet, the first thing that you need to do is get flash. This can be done in a few ways, because there are at least two versions out there that are being widely used. The first is Adobe Flash CS4, and you can sign up to get a free demo here.
The program that I will be using is Flash CS3, which you can't get a demo for, but can buy at many places online.
The last type that I know is Flash MX, which I have no idea where you could get, except downloading it illegally*.

*Note: Illegally downloading software is a crime, and should not be done. That said, I take no responsibility for what you do. Ever. Nada.
P.S. For those who don't know, you WILL get a fine when you are caught. Just don't do it and save yourself the trouble.

Step 3: First Things First

Now, after you have Flash, you have to open it. Duh.
Then, you need to open a new document. Make sure that it is ActionScript 2.0, and not 3.0.
You should get a new screen with a white box in the center. That is good. We can work with that.

Step 4: Making a Movieclip

Now we need to make a movieclip. First, click the rectangle tool and make a rectangle on the stage. That's the white square on the gray backround. I made my rectangle red. Now, select it (make sure you get the outline and the fill). Go to Modify -> Convert to Symbol. You should get a box like the one in the picture below. Make sure the registration is in the center box, and the type is Movie clip. Name the symbol something original like "man" or "box" or "ship". I chose box, myself. Good job, now you have something that we can program!

Step 5: Programing

Now for the work. Ready? No? Well, too bad. I'm going on anyway. Go recoup in a corner or something and return when you can handle it.
Go to Window -> Actions. This will open up the ActionScript programing panel. Make sure that you have selected your symbol. What you have to program is in the picture below, so you can't just copy and paste, you actually have to type it out and learn it a little.

Step 6: Meaning

I guess you want some explanation of what all those lines mean.

This means every time this frame is entered and this movie clip is present. So if the frame rate is 12, whatever is in the brackets will happen 12 times a second.

This means that when the right arrow key is down, the movieclip will move to the right five pixels.
The same thing happens with left, up and down, using the x,y coordinate grid.

Step 7: Testing

Now for the testing. Go to Control -> Test Movie. A new screen will pop up with your rectangle on it. Use the arrow keys. Does it move? If so, good job! You did it! Now you can make anything move however you want. If not, you can PM me with your problem, and if enough people have the same one, I'll add them to the Instructable.

Thanks for reading! If you have any comments or suggestions, they would be greatly appreciated.

Be the First to Share


    • Magnets Challenge

      Magnets Challenge
    • Snow Challenge

      Snow Challenge
    • Wearables Contest

      Wearables Contest

    3 Discussions

    Flash learner
    Flash learner

    3 years ago

    hey i Cant make my charactor jump help me out pls


    4 years ago

    The person that made this forgot to add _root. to the code.

    Here's the fixed code:



    _root.heart._x += 5;



    _root.heart._x -= 5;



    _root.heart._y -= 5;



    _root.heart._y += 5;




    5 years ago on Step 7















    //this is my code//