Tweening objects – basic animation techniques.
There are primarily three ways to animate using Flash, which are:
1. Motion Tweening.
2. Shape Tweening.
3. Stop-Frame animation.
Things to remember #2
Motion tweening automatically animates between two instances of the same object.
Shape tweening automatically animates between two vector-based objects.
Stop-Frame animation requires frame-by-frame drawing (not automatic)
1. Motion Tweening
The process of animating using motion tweening is as follows:
1. Turn your object into a symbol.
2. Tell Flash where to start the animation.
3. Tell Flash you want to animate.
4. Tell Flash when to stop.
A Keyframe is a mark on the timeline that tells Flash where something is going to happen.
Simple exercise using Motion Tweening
1. Start a new Flash Movie
2. In Frame 1 of Layer 1, draw a simple shape (such as a circle) on the stage
3. Using the arrow tool, double click in the shape to choose both the line and the fill
4. Press F8 or Insert > Convert to Symbol
5. On the option box choose Graphic (We will look at the other options later)
6. As you are in frame 1 you automatically have a keyframe telling flash to start the animation. If you were to do this later in your movie, you would now press F6 or Insert > Keyframe to tell Flash were to start the animation.
7. Click on Frame 1 and look at the Properties Inspector (If you can’t see it check that it is ticked in the options under Window >)
8. Where it says Tween: change the menu that says ‘None’ to ‘Motion’
9. Choose a frame along the timeline where you want the animation to stop (remember Flash defaults to 12 frames per second)
10. Press F6 or Insert > Keyframe to tell Flash were to stop the animation
11. Still on that keyframe, move the new instance of your object to where you want it to be when the animation stops
12. You should now see a blue arrow between your two instances – this means you have done the process correctly. If there is a blue broken line you have missed out a stage – start again!
13. Save your animation and preview using File>Publish Preview > HTML or Control > Test Movie. Your movie will automatically loop.
2. Shape Tweening
1. Draw or create your first instance
2. Tell Flash where to start the animation.
3. Tell Flash you want to animate.
4. Tell Flash when to stop
5. Draw or create your second instance
Simple exercise using Shape Tweening
1. Start a new Flash Movie
2. In Frame 1 of Layer 1, draw a simple shape (such as a circle) on the stage
3. As you are in frame 1 you automatically have a keyframe telling flash to start the animation. If you were to do this later in your movie, you would now press F6 or Insert > Keyframe to tell Flash were to start the animation.
4. Click on Frame 1 and look at the Properties Inspector (If you can’t see it check that it is ticked in the options under Window >)
5. Where it says Tween: change the menu that says ‘None’ to ‘Shape’
6. Choose a frame along the timeline where you want the animation to stop (remember Flash defaults to 12 frames per second)
7. Press F6 or Insert > Keyframe to tell Flash were to stop the animation
8. Still on that keyframe, select your shape and delete it.
9. Draw a second simple shape (such as a square)
10. You should now see a green arrow between your two instances – this means you have done the process correctly. If there is a broken line you have missed out a stage – start again!
11. Save your animation and preview using File > Publish Preview > HTML or Control > Test Movie. Your movie will automatically loop.
3. Stop-Frame Animation Stop - Frame animation is the traditional animation technique where the artist animates each frame individually. Flash acts as an aid to this as each frame is marked by a keyframe, which automatically copies the previous frame allowing adjustments to be made easily.
Simple stop-frame animation exercise.
1. Start a new Flash Movie
2. Draw a simple ‘stick man’ in Frame 1 of Layer 1 using the paintbrush
3. As you are in frame 1 you automatically have a keyframe telling flash to start the animation. If you were to do this later in your movie, you would now press F6 or Insert > Keyframe to tell Flash were to start the animation.
4. Select Frame 2 and press F6 or Insert > Keyframe
5. Using the paintbrush and rubber adjust the ‘stick man’ slightly
6. Repeat this process for as many keyframes as you like until you are happy with the animation.
7. Save your animation and preview using File > Publish Preview > HTML or Control > Test Movie. Your movie will automatically loop.
Summary
1 To animate movement your object must be converted to a symbol (F8)
2 The animate shape your object must be vector-based
To animate freehand you must uses (keyframe) stop-frame animation
