Flash Tutorial: how to create a motion tween [very basic]

Go down

Flash Tutorial: how to create a motion tween [very basic]

Post by HatFetish on Sat Sep 06, 2008 3:24 am

Hi there.
This tutorial shows you how to make a motion tween using Flash MX 2004.

I'll start by explaining what a motion tween does. Imagine you saw a box on the left of the table. Then, it dissappeared and reappeared to the right of where it was. Not very impressive, is it? You'd wonder how the box got to the new position. What a motion tween does is allows you to animate the movement of the box from one position to the other, rather than just jumping from left to right. Sound good? Great. Let's get started.

1) Open flash. Select a new document. You should have a white square drawing area (or stage). Click on the rectangle tool in the toolbar on the left and draw a square by clicking and dragging, making sure to draw the square to the left of the white drawing area. I'll explain why we're drawing it here later. Your screen should now look something like this:

2) Look at the timeline (this is the long area near the top with numbers and lots of small rectangles in it). You'll notice that the first rectangle has a dot in it. This means there is something there. The 'something' that's there is the square you just drew. Now, find number 20 on the timeline and right click it. Select ''Insert keyframe''. A dot should appear in the 20th rectangle. This is good.

3) Make sure you have the 20th frame in the timeline selected by clicking on it with your mouse pointer. Also notice the square is selected. Now, you need to move the square to where you want it to move to. For this example, let's just move it to the right. To do this, press the right arrow a few times on your keyboard until you're happy with the position of the square. Make sure it doesn't go off the white stage. If you move it too far, you can move it back using the left arrow. You should now have a screen that looks like this:

4) Before we move on, let's check that everything's going well. Click on the first frame in the timeline with your mouse pointer, and you notice the square jumps to the left. Now, click on the 20th frame in the timeline. Notice the square jumps to the right. Don't worry, this is just because we haven't added the motion tween yet.

5) Now it's motion tweening time! Click on frame 1 and hold down the mouse while dragging it along the timeline to highlight all the frames from 1 to 20. While they're all highlighted, right click and select ''create motion tween''. If all goes well, the squares will turn a purpleish colour and you'll see an arrow going along the frames.

Notice that whereever you click on the frames in between, the square is in a stage somewhere between the original place you drew it and the place you wanted to move it to. This means you've suceeded in creating your first motion tween. Well done! To see it work, click Ctrl + enter. It'll take you to a white stage where you can watch your square move smoothly from left to right over and over again. Yay!

Thanks for viewing my first tutorial, and I hope it helped you out with your first steps towards becoming a flash animator. If you have any questions, reply below and I'll get back to you as soon as possible. There will be more tutorials to come, so watch this space! Big Grin

Number of posts : 42
Age : 26
Location : Can be usually found close to uranus
Rank : Moderator
Badge :
Comment : I like hats.
Mood : Tired - walking around on crutches makes your arms ache. Sad
Registration date : 2008-01-20

View user profile

Back to top Go down

Back to top

- Similar topics

Permissions in this forum:
You cannot reply to topics in this forum