Hidden deep within Motion is the ability to animate movement using audio. This can yield some amazing effects without you needing to do a lot of work. The key is to use “Parameter Behaviors.” These are behaviors (animations) which you apply to settings in the Inspector (parameters) rather than objects in the project.
This article explains how this works.
Create a new Motion project. Make sure to specify the video format (top right corner) and duration that you want to create.
Because I’m not the world’s best graphics designer, I prefer to work with files that are already created in the Library. However, this technique can also be used with files that you create yourself, as well. The process is the same.
From the top left menu, click Library to open it. Then, from the Content category (on the left) choose the Gadgets subcategory (on the right).
This is a delightfully eccentric collection of animated gew-gaws and general weirdness that are delightful additions to any motion project.
Although any of these would work, I chose Altimeter 2 and dragged it into my project.
I should note that I’m using this object full-screen and all by itself. In your projects, you can scale, color, reposition, combine… all the good things you to do to totally alter an object in a project. I’m just keeping this simple so you can learn the technique.
ADD AN AUDIO CLIP
Since this is an effect that’s driven by the audio track, we need to import the audio we want to use. Select the Audio tab in the Layers panel. (This is an important step.)
Then, choose File > Import (shortcut: Cmd+I) and navigate to the media file you want to use. Here, I’m using a drum beat track.
Once you click OK, the file appears in the Audio tab of the Layers panel and the file is placed into your project.
You can verify that it is in your project because it displays a green bar in the mini-Timeline in the Viewer. If the bar does not start where you want it to start, grab the green bar and drag it.
Play the timeline and you’ll see the altimeter animate and hear the music play. This is all just ducky, but the animation bears no relationship to the music. We need to link the rotation of the pointer to the beat of the music.
We can use this technique to animate anything:
…you get the idea. Once you understand how this works, feel free to experiment on your own. The worst that happens is you create an effect that you never want to show to anyone… That’s why they invented the Delete key.
CREATE THE ANIMATION
In the Layers panel, twirl down the arrow to the left of the layer named “Altimeter 02”. This allows you to see the elements that make up this effect.
Notice the “Dial” element. It’s actually a folder.
Twirl the Dial folder arrow down and you’ll see that a Rotation behavior was added to the Dial element. Since we want to animate the rotation to move in time to the music, select and delete this Rotation behavior.
NOTE: This step is unnecessary if you selected something that doesn’t have a behavior applied to it.
In the Inspector, click Properties. Then twirl down the arrow to the left of Rotation under Transform to reveal X, Y and Z coordinates.
The rotation of the dial moves on the Z-axis. At the far right of the Z controls (just to the right of the keyframe diamond) is a small right-pointing arrow. (It appears when you hover your cursor over the Z-axis controls.)
Click the arrow to reveal a flock of additional settings. Choose Add Parameter Behavior > Audio.
NOTE: There are actually sixteen different parameter behaviors you can experiment with. All of them generate animation which is applied to a specific parameter. Extra Credit, below, provides two more examples.
The Inspector now shifts to display the new Audio behavior in the Behaviors tab.
Click the To pop-up menu and select the audio file you imported earlier. (In our example: “Drum Beat”.) Now, when you play the clip, the dial will vibrate in time with the beats of the music.
To make this more realistic, I changed the following two settings:
If the pointer moves in the wrong direction, go back to the Audio behavior (Behaviors tab) and change the Apply mode from Add to Subtract.
I often use this technique to pulse the color of an element in time to the music. Let’s say I want the small tick marks to change color with the beat. Here’s the steps:
Now, the tick marks pulse brighter and darker with the beat while at the same time changing color.
Wear your sunglasses… This is VERY cool.