All Articles Motion
Link Magic For Pulsating Speakers in Apple Motion
Ben Balser on Sun, September 16th 0 comments
Learn how to create pulsating audio speakers that react to real sound using Motion. Ben Balser reveals how Motion's Link parameter behavior makes this a cinch!

I'm working on a project that uses a good bit of simple animations of line drawings. It's all done in Motion and the Link parameter behavior is vital. This tutorial will show you how I created pulsating audio speakers that react to actual audio. This is a detailed, involved tutorial, but once done you'll see it's much easier than it sounds (no pun intended).

Step 1 - Project Setup

I'm going to open Motion and from the Template Browser select a generic Motion Project, HD 720p, 30fps and 10 seconds in duration. When the project opens I'll immediately hit Shift-Z to fit the Canvas to the window. Be sure the playhead is at the start of the timeline and the default Group is highlighted in the Layers pane. Get to the Group tab with F4.

Template browser

From the View menu at the top right of the Canvas, turn on Rulers (Shift-Command-R). From the vertical ruler, click inside of it and drag out to the center of the Canvas. This gives us a center guide to work with.

Getting the center guide in place

Step 2 - Drawing The Cabinet

At the bottom left of the Canvas I'll get the rectangle shape drawing tool, or just hit 'R'. I'll click in the Canvas and draw a large, tall rectangle, then use Shift-S to get back to my default Transform tool. In the Shape tab I'll turn off the Fill and make the Outline white, set Width to 20. Command-2 for the Library tab, go to Filters, Stylize, Indent, apply it to the rectangle you just drew. F3 and set the following: Softness 0.75, Brightens 2.0, Ambient 0.2. Rename the rectangle layer 'Cabinet'.

Drawing the cabinet

Step 3 - Drawing The Speaker Cones

Use 'C' to switch to the Circle drawing tool. Hold the Shift key and draw a circle to be our tweeter, the smaller top cone of a speaker. Shift-S, then F4. Turn on Outline and set the Width to 1, name the layer 'Tweeter Outside'. Command-D to duplicate it, call the copy 'Tweeter Inside', F1 for the Transform controls, set Scale to 80.

F4 to the Shape tab, change the Fill parameter Fill Mode to Gradient. From the gradient preset menu at the right of the gradient bar there, select 'Grayscale'. Shift-click the Tweeter Outside layer so both are selected, right-click and chose Group, name the Group 'Tweeter Group'.

Drawing the speaker cones

Step 4 - Adding Audio

Command-tab to switch to the Finder, Command-N for a new window. Find an audio only file, drag and drop from the Finder window onto the Canvas in Motion. Poof, you now have an audio track! Something that is dialog only will give the best immediate results for learning purposes. Switch back to Motion.

Step 5 - Animating The Tweeter

Select the Tweeter Inside layer, F1, right-click on the word Scale in the Transform pane, chose Add Parameter Behavior, select Audio. You're automatically inside the Behaviors tab. To the right of the Source Audio well is a 'To' menu button. Click it and select the audio you just added, allow a few seconds for it to analyze. Set the Scale parameter at the bottom of the Audio behavior pane to 0.05. Play and watch the inside of the tweeter react to the audio clip. You should have something like this video clip.

Stop playback, position playhead at the start of the timeline. F4, click the disclosure triangle at the left of the Gradient bar. Click the white square on the bottom left of the gradient bar to select it. Down below that right-click on the title 'Location' for that parameter. Chose Add Parameter Behavior, Audio. Just like before pick your audio file from the 'To' menu. Set the Scale parameter around 0.1, 0.15, or 0.2. We want the light shine of the tweeter inside to move as if the light is hitting it differently as it bulges out. It should be a very slight effect.

F4, select the Tweeter Outside layer, right-click the Fill Opacity parameter and add an audio parameter behavior like before. Set 'To' for your audio clip, set 'Apply Mode' to Subtract, and 'Scale' to 1.0. This will make the outer ring of the tweeter darken when the inner cone bulges out.

Step 6 - Creating An Animated Woofer

Close the Tweeter Group, place the playhead at the start of the timeline, select the Tweeter Group and Command-D to duplicate it and name this new group copy 'Woofer Group' and change the layers within it form Tweeter to Woofer, also. A woofer is the big cone in a speaker. Select the Woofer Group and drag it down to the bottom half of the speaker cabinet. F1 and set scale to around 140 to 150 percent and readjust as needed. Now you should have both speaker cones animated to the audio together!

Step 7 - Fixing Possible Broken Links

If you don't see any of the cone sizes or gradients changing properly you may need to relink the parameters. With the Woofer Inside or Woofer Outside shape selected, F2 for the Behaviors tab. Verify the 'To' menu for Source Audio is set to your audio clip. Sometimes switching this to Master and back to your audio clip can kickstart it back into working. Otherwise, to verify the Outside shape, in the 'Apply To' parameter at the very bottom of the Audio behavior pane. Click its 'To' menu and go to Object, Shape, Fill, Opacity. To verify the Inside shape gradient, select that audio behavior and in the Apply To's 'To' menu: Object, Shape, Fill, Gradient, RGB, RGB1, Location. To verify the Inside shape scale change, select that audio behavior and in the Apply To's 'To' menu: Properties, Transform, Scale, All. Close up all the Tweeter and Woofer groups when done.

Step 8 - Polishing The Cabinet

Select the Cabinet layer, F4, turn off Outline, turn on Fill, set it to jet black. Then use Command-D to duplicate it, select the upper Cabinet Copy layer. Change Fill Mode to Gradient, chose Light Metal from the Gradient Preset menu. In the Gradient controls, set Start X to 300, Y to 1000. Set End X to -300, Y to -1000. F1 and set Opacity to 50% and Blend Mode to Multiply. This should give you a very slight texture to the face of the cabinet.

Polishing the cabinet

Step 9 - Lagniappe Audio Meter

Lagniappe is a little something extra. Use 'R' to get the rectangle drawing tool. Draw a tall, thin rectangle off to one side of the speaker cabinet. F4, set Fill to blue.

Use Command-D to duplicate the rectangle, and for our copy, set Fill Mode to Gradient, from the gradient preset menu select Sundown. Open the gradient controls and to the right lower half of the gradient bar there are two tiny gray buttons. The upper one that looks like 2 parallel bars, swaps the colors from one side to the other. Click it. We want red on the left, yellow on the right, so that our rectangle in the Canvas shows red at the top and yellow at the bottom. Now right-click on the center of the still selected rectangle copy in the Canvas, select Anchor Point, now you can pull the Anchor Point to the center of the very bottom edge of the shape. Shift-S to get the Transform tool back. 

Use Option-R to get the rectangle mask tool. Draw a rectangle just slightly larger than or original rectangle. With the Mask layer selected F1, open the Position controls to access X, Y and Z independently. Click and drag down on the Y parameter so the mask's top edge is just touching the shape's bottom edge.

With the mask layer still selected, right-click on the 'Y' for the Y parameter and apply the audio parameter behavior. Set Audio Source to your audio clip. Set scale so that the 'mask' reveals the color gradient only to the top of the original shape. Mine is set to 400. Start playback, poof, and working audio meter!


In this exercise you've learned how to use rulers, simple shapes, audio clips, gradients, blend modes, masks all with the audio parameter behavior. That's a lot of tools to do other much more complex project builds with! Imagine importing more than one audio clip and having each one control different parameters of one or more objects. Also you can go to the Audio tab (Command-6) and turn the audio off. Even if they are turned off, they'll still act through the audio parameter behavior! I hope this was a fun experience and that you not only learned something new, but also experiment with new and wild designs.

Related Videos
Comments (0)

You must be logged in to comment.

Animating Effects
Motion 5 105
Dream It. Do It.
Do you want to learn Animating Effects?
Yes, I want to learn!
No Thanks, I just want to read the article.
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: