Creating and using markers to sync animation with audio
Video: Creating and using markers to sync animation with audioNo doubt, as a motion graphics designer, you'll have plenty of occasions where you'll need to time out your graphics to some audio. Now in our project here, we actually need to import some audio to sync our animation. If you have 07_02 open, navigate in your file browser to the Audio folder in your Media folder for your exercise files. In there, we want to import the Pump_Silk.aiff track. If it starts automatically playing, you can stop the preview by clicking the Play/Pause button up here in the top of your file browser.
Viewers: in countries Watching now:
In Motion: Principles of Motion Graphics, Ian Robinson shares the core concepts and techniques used to create real-world motion graphic elements in Apple Motion. The course starts with finding the initial inspiration for a project and then covers how to bring those ideas to life using the tools in Motion, including type treatments, filters, textures, and lighting. Two projects demonstrating how to animate a title sequence and how to assemble a graphics package are also included. Exercise files accompany the course.
- Shortcuts for previewing and setting type
- Using type as a design element
- Creating dynamic transitions
- Creating and using color palettes
- Working with particles to create depth
- Adding details with lighting
- Integrating audio in a project
- Editing techniques
- Animating a lower 3rd
- Animating and styling a map
- Building a storyboard
Creating and using markers to sync animation with audio
No doubt, as a motion graphics designer, you'll have plenty of occasions where you'll need to time out your graphics to some audio. Now in our project here, we actually need to import some audio to sync our animation. If you have 07_02 open, navigate in your file browser to the Audio folder in your Media folder for your exercise files. In there, we want to import the Pump_Silk.aiff track. If it starts automatically playing, you can stop the preview by clicking the Play/Pause button up here in the top of your file browser.
Click the Import button to add it into your Timeline. Now, let's watch our comp. (music playing) So I think that sounds pretty cool, but what we need to do is cut out all this extra empty space at the beginning and then actually add some animation to the timing of the audio. So let's start by pressing F6 to open the Timing pane. Down here at the bottom, I want you to make sure the audio track is visible, and you can do that by clicking this button if you don't see it.
With the audio track visible, also make sure you're not set to the smallest magnification. You want to be at least one of these other three, so you can actually see the waveform. So to reposition this, all we have to do is just slide the waveform forward in the Timeline until just about the first section where it just starts in the project. So now if we press Play, (music playing) the audio starts immediately. So that's great! Now, let's see if we can time out some other things to the audio.
(music playing) So let's get started by timing the object's appearance on the screen. We can better do that if we add some composition markers. See, in Motion you can add object markers, which happen when you select an individual layer, or you can add composition markers when nothing is selected. When none of the objects in the Timeline are selected, and you press M, a marker will automatically get added wherever your playhead is. See? Now if I press M with the Text layer selected, you can see I've added an object marker.
Now the advantage of a comp marker is the fact that you can see it all the time and it doesn't slide with the different objects in your scene. It's always tied to the ruler. So I am just going to undo those last two things here. I want you to listen through the track, and as the audio is playing back, go ahead and press M. But before you do that, make sure nothing is selected in your Timeline. (music playing) I added markers right to the beat of every one of those little hi-hat hits.
Now another great thing about markers is the fact that you can navigate with them. If you hold down Command and Option and hit the right arrow, you can move down the Timeline, and Command+Option+Left Arrow will move you back forwards towards the front. Another way, if you hold down Shift as you slide, the playhead will snap to the marker. So let's minimize the Timeline. It's kind of faint, but you can see the comp markers actually in the Timeline. They are these really, really thin green lines. Another way to make sure that your markers actually line up, if you hold down Option as you're dragging the playhead, now I know that that marker lined up directly on top of that hit, because as I do that, I'm hearing nothing but that noise, because the audio is scrubbing under my playhead.
(music playing) So that's pretty good. Now we need to actually time the appearance to some of these objects. I actually want to add one more object into the scene. Now, I thought it was kind of interesting, because I found this graphic, and there was something hidden in it. So let me show you what I am talking about. If you go to the Library tab, under Replicators, I want you to search for the graphic called Bow, and in here it was very kind of cool graphic that was pre-built. Now let's go ahead and click Apply to import it in our project.
As we scrub through, you can see that it's a bunch of graphics just sort of rotating. (music playing) I thought that that was pretty cool. But if you actually press F5 and open up your Layers palette, you can see I actually created a group for this Bow to reside on. So I am just going to click and Shift+Click, and drag all these objects right into the Bow layer. Now, open up the Replicator and select the Axes replicator cell. In your Inspector, I want you to go down under the Replicator Cell tab, and make sure you have the opacity gradient open right here.
It's kind of interesting. If you click and drag on this one object, you can see now I'm getting all these other gray marks here, and I thought that that was so cool I wanted to actually animate the appearance of these marks directly at the same time each time we hear the tick of the hi-hat. Before we do that, let's go ahead and make sure the appearance of everything lines up first in our scene. So, move your playhead back to the beginning of a scene. Now, I am just going to minimize my Groups right now, and let's go ahead and press Play.
(music playing) Okay, so the first couple of keyboard hits is when I want things to appear, and I'd like this graphic to actually slide up when we hear that 'sss' kind of come in the first time. I know that was very descriptive, so let's see a first keyboard hit. We'll listen for that. (music playing) Okay, that very first boop. (music playing) There it is. Let's bring in this graphic first. Select the two-color spinner and that make sure you have the Spinner's group layer selected, and just press I to turn the in point.
Now let's listen for our next keyboard hit. (music playing) All right! So it's rights around here. (music playing) Again, I am holding down Option to scrub the audio. Perfect! And that one will actually have the word 'Intricacies' pop up. So make sure Intricacies is selected, and press I. Now there is one left for the big graphic to appear. So let's go ahead and listen. (music playing) There we go! That's what we are looking for. (music playing) Perfect! Now we just need to add a marker just for that.
So let's go ahead and press M. Now I am going to open up my Timing pane just to see. I want to delete this marker, so let's go ahead and just Ctrl+Click or right-click on it and choose Delete Marker. If you have a layer selected, like I have this Intricacies layer selected, you can still add a comp marker. All you have to do is hold down Shift and M, and it will automatically add a comp marker as opposed to a layer marker. With that marker added in the Timeline, that added it to the comp, because it was timed to the actual audio itself.
Now, we need to actually move the bow graphic to come in with this new element. Now, if we scrub our playhead to the beginning, notice the bow graphic doesn't really come up full until later in the Timeline. So, let's scroll down and see if we can figure out, okay, so it's right around here this line. There is a keyframe there. I want to line this keyframe up with that marker. The easiest way to do that is to select the Bow layer and add a marker to the actual graphic layer itself.
Now, when we start to reposition the graphic layer, if you hold down Shift, it will snap to that in marker. So we can go ahead and preview our animation and check it out. (music playing) Okay, that'll work, and now we have to animate each one of these markers appearing. Now, this is going to be kind of fun. Go ahead and select the Bow replicator and make sure that you have the Axes Replicator cell selected. Okay, now go ahead and click right on this Opacity color chip.
Let's slide that back towards the left, so none of the lines have appeared yet. I am just going to scrub my audio to make sure that these line up. (music playing) Perfect! Turn on automatic key framing. You can press A, and notice now it's active. What we want to do is just go ahead and slide this marker down until we see the very first hatch mark, and then just slide down the Timeline with your playhead. You can hold down Shift and it'll snap to each marker, and then just reposition the Opacity slider, and just do that through the rest of the Timeline.
It's tedious, but you'll end up with a really cool graphic at the end of this. Okay, now before I do anything else, I'm going to turn off automatic key framing, and then preview this. (music playing) You notice things aren't quite lining up, and that just has to do with keyframes. So let's open the Keyframe editor, and you'll notice there is an untitled set here with nothing in it. Even if we go up to Animated, you won't find anything even though this is animated.
What you need to do is go to the Keyframe pulldown menu right next to the Opacity Gradient-- there we go--and then go down and choose Show in Keyframe Editor. Here you'll see all the keyframes that we created along with the markers. Since they are set to Linear, the gradient is just linearly moving through, so all of these are appearing rather randomly. So what we need to do is draw a selection around all of these red keyframes. So if I just draw a selection box all the way around here--and actually, I'll just do it around all the keyframes just to play it safe-- now all you do is Ctrl+Click or right-click directly on one of the keyframes, and change the Interpolation to Constant.
Now, you notice I get stair-stepping between my keyframes. If we go ahead and preview our animation, now things should line up. (music playing) Okay, that's pretty good. Now obviously we could sit here and keep tweaking and sliding to our heart's content. But all in all, I think you guys have a pretty strong understanding as to how to use markers to time your audio, and how to use object markers to help slide your graphics and time out accordingly.
There are currently no FAQs about Motion: Principles of Motion Graphics.