4.6 Fixed point animations
There are times when you want an object to stay fixed at one end and move around that point. Some examples of this are the hands of a clock, the dials on speedometers or fuel gauges, or levels in a computer game. In the next exercise a car speedo with an animating dial will be created.
Flash animation exercise 5
Creating the speedo
Skills practised
- Using layers
- Drawing tools
- Motion tweens
- Editing a symbol
- Rotating a symbol
- Editing animations
The instructions in this exercise feature Adobe Flash, but may also be followed step-by-step for Adobe Animate.
- Create a new Flash (or Animate) ActionScript 3.0 document.
- Select the
OVAL TOOL
, set theFILL COLOUR
to black, theSTROKE COLOUR
to grey, theSTROKE SIZE
to about 15 pt and draw a large circle on the stage. - Use the
TEXT TOOL
to add the speeds to the speedo. - Rename the layer ‘Speedo’, add 30 frames to the layer by clicking on Frame 30 and pressing the F5 key, then lock the layer.
- Save the file in your storage folder as: Flash Exercise 5.
Creating the dial
- Create a new layer and rename it ‘Dial’.
- Use the
OVAL
andLINE
tools to create a dial on the speedo.
Converting the dial to a symbol
The dial needs to be a symbol so that it can be animated.
- Use the
SELECTION TOOL
and<Shift>
key to select all the dial components then display theMODIFY
menu and selectCONVERT TO SYMBOL
. -
Call the symbol, Dial, set its
TYPE
toGRAPHIC
, leaveREGISTRATION
at theCENTRE
position and selectOK
. -
Double click on the symbol to open the
EDIT SYMBOL MODE
screen. - Press the
DOWN ARROW
key on the keyboard to move the symbol down until theREFERENCE POINT
(+) is at the top of the dial. -
Click on the
SCENE 1
icon at the top of the screen to return to the normal Flash screen and move the dial back to the centre of the speedo.
Animating the dial
- Click on Frame 1 of the
DIAL
layer and selectMOTION TWEEN
from theINSERT
menu to create the animation. - Click on Frame 10 in the
DIAL
layer and select theFREE TRANSFORM TOOL
. Move the pointer over the bottom right ‘handle’ of the dial until theROTATION
icon is added to the pointer. - Drag the dial to the 50 km/h mark, keeping the top of the dial at the centre of the speedo. A
PROPERTY KEYFRAME
is added at Frame 10. -
Click on Frame 20 in the
DIAL
layer, move the pointer over the bottom right ‘handle’ of the dial and drag theROTATION
icon to the 100 km/h mark, keeping the top of the dial at the centre of the speedo. - Test the animation to check that it works correctly.
- Try animating the dial to 150 km/h at Frame 30 of the
DIAL
layer then test the animation again.
Note: You might like to try adding some extra keyframes and frames to make the dial return to the 0 position.