(1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

After completing the graphic for Hole 1 I could move to the next phase, adding audio and animation.

Importing Audio
Bringing audio into LiveMotion is a straightforward process. Use the File - Place - command to add the audio track to the 'timeline.' The green 'keyframe' bar in the timeline matches the length of the audio file - 13.3 seconds. I then shifted the green audio bar right 1 frame. I did not want the audio file to play until someone pressed the 'Go' button which starts the animation.

The audio track defines the length of the keyframe bar

You can adjust the 'volume' and 'panning' of an audio file by expanding the object's hierarchy. For example you could have the audio start very low, increase in volume and then fade out. For this project I wanted the audio to play at 100% from beginning to end.

Creating Rollover Buttons
Adding interactivity to Hole 1 will give visitors the power to Play and Reverse the Shockwave animation. The first step was to create two rollover buttons using VHS style controls.

Go Button
I will detail how to create a 'Go' button. You can create the 'Reverse' button using the same method.

I used the 'ellipse' tool to create a circle filled with bright green (0,200,0) (Green for Go). I then added a black arrow shape. I called the button 'Go button' and the arrow 'Go arrow.'

Go button

Now I brought up my 'Rollover' palette. This tool enables you to create rollover buttons painlessly. Click the 'New Rollover State' button. Select 'over' from the drop down menu. Now in the 'Color' palette I darkened this rollover state to a dark green (0, 100, 0). Click 'New Rollover State' button again and select 'down' and change color to a medium green (0, 150, 0).

Rollover Palette

You can now test the rollover effect by selecting - File - Preview in and click on an available browser. When you put the cursor over the button it turns dark green, when you press down it turns medium green.

Now create the 'reverse' button. I used - Edit - Duplicate - to duplicate the 'go' button, moved it across the window and made my edits. Here are the colors for the 'normal state' (255, 255, 0), the 'over' state (140, 140, 0) and the 'down' state (210, 210, 0).

Control buttons

(1) (2) (3) (4) (5) (6) (7) (8) (9) (10)