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.

  1. Create a new Flash (or Animate) ActionScript 3.0 document.
  2. Select the OVAL TOOL, set the FILL COLOUR to black, the STROKE COLOUR to grey, the STROKE SIZE to about 15 pt and draw a large circle on the stage.
  3. Use the TEXT TOOL to add the speeds to the speedo.
    TS0427.png
  4. TS0428.png
    Rename the layer ‘Speedo’, add 30 frames to the layer by clicking on Frame 30 and pressing the F5 key, then lock the layer.
  5. Save the file in your storage folder as: Flash Exercise 5.

Creating the dial

  1. Create a new layer and rename it ‘Dial’.
  2. Use the OVAL and LINE tools to create a dial on the speedo.
    TS0429.png

Converting the dial to a symbol

The dial needs to be a symbol so that it can be animated.

  1. Use the SELECTION TOOL and <Shift> key to select all the dial components then display the MODIFY menu and select CONVERT TO SYMBOL.
  2. TS0430.png
    Call the symbol, Dial, set its TYPE to GRAPHIC, leave REGISTRATION at the CENTRE position and select OK.
  3. TS0431.png
    Double click on the symbol to open the EDIT SYMBOL MODE screen.
  4. Press the DOWN ARROW key on the keyboard to move the symbol down until the REFERENCE POINT (+) is at the top of the dial.
  5. TS0432.png
    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.
TS0433.png

Animating the dial

  1. Click on Frame 1 of the DIAL layer and select MOTION TWEEN from the INSERT menu to create the animation.
  2. Click on Frame 10 in the DIAL layer and select the FREE TRANSFORM TOOL. Move the pointer over the bottom right ‘handle’ of the dial until the ROTATION icon is added to the pointer.
  3. 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.
  4. TS0434.png
    Click on Frame 20 in the DIAL layer, move the pointer over the bottom right ‘handle’ of the dial and drag the ROTATION icon to the 100 km/h mark, keeping the top of the dial at the centre of the speedo.
  5. Test the animation to check that it works correctly.
  6. 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.