Computersight > Software > Flash

Flash Tutorial 1: Motion Tweens

A step-by-step guide on creating basic motion tweens.

This is the first volume of my flash tutorials; here I will be using an older version of flash (Flash 8). In this step-by-step tutorial I will explain how to use motion tweens.

Now we are going to look at motion tweens first:

  1. Open up Flash.
  2. Create a new Flash document, (name it whatever).
  3. You will have a blank flash stage.
  4. Select the rectangle tool (Hotkey R).
  5. Draw a box anywhere on the stage.
  6. This is what it should roughly look like:
  7. Now, on frame 10 of the time line right click and select "Insert Key Frame".
  8. Now, your time line should a bit like this:
  9. Now, while the red line is on 10, click on the selection tool (The tool that looks like a black mouse pointer Hotkey V).
  10. Highlight the entire box (including the stroke colour if you set one) and move it anywhere on the stage.
  11. Now, look at the time line there should be 2 black dots on your current layer, one on frame 1 and the other on frame 10. These are like “checkpoints” where you give the computer new information etc.
  12. When you click on frame 1, the box should be where you first drew it and in frame 10, the box should be in the moved position.
  13. Now, its time to fill in the middle frames. You could do it frame-by-frame, (On frame 2, you create a new keyframe and move it slightly forward and do that with the rest of the frames) OR you could use a tween. (Much faster).
  14. Right click anywhere before the 2nd key frame (from frames 1-9) and then select motion tween.
  15. Now your time line should look like this:
  16. Now, press CONTROL + ENTER on the keyboard (or return, whatever your keyboard has) and watch it. You will see that the box from frame 1 moves to the position where the 2nd box is.
  17. Congrats, you have successfully created a moving box. Motion tweens aren't just restricted to movement, you could use them to make an object grow/shrink, change color/transparency etc.

18
Liked It
I Like It!
Related Articles
Main Methods Of Animation  |  Flash Tutorial 3: Advanced Motion Tweens
More Articles by Harry ...
AutoCAD Tutorial 15: Project Three - Creating a Desk  |  Autocad Tutorial 14: Project Two - Creating a Soft-drink Cup
Latest Articles in Flash
How to Flash and Flex a Motorola V3r  |  Flash Games
Comments (0)
Post Your Comment:
Name:  
Copy the code into this box:  
Post comment with your Triond credentials?
Inside Computersight

Communication & Networks

 /

Computers

 /

Hardware

 /

Operating Systems

 /

Programming

 /

Software


Popular Tags
Popular Writers
Powered by
Computersight
About Us
Terms of Use
Privacy Policy
Services
Submit an Article
Advertise with Us
Contact

© 2007 Copyright Stanza Ltd. All Rights Reserved.