Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating and using markers to sync animation with audio

From: Motion: Principles of Motion Graphics

Video: 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.

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.

Show transcript

This video is part of

Image for Motion: Principles of Motion Graphics
Motion: Principles of Motion Graphics

41 video lessons · 14646 viewers

Ian Robinson
Author

 
Expand all | Collapse all
  1. 13m 59s
    1. Welcome
      55s
    2. Using the exercise files
      1m 37s
    3. Defining motion graphics
      1m 27s
    4. Workflow for creating motion graphics
      4m 49s
    5. Working in real time
      2m 13s
    6. Setting up the workspace
      2m 58s
  2. 7m 49s
    1. Finding visual inspiration
      2m 35s
    2. Listening to imagine
      2m 28s
    3. Using real-time inspiration
      2m 46s
  3. 28m 47s
    1. Essential theories of type
      5m 30s
    2. Shortcuts for previewing and setting type
      4m 41s
    3. Exploring principles for animating type
      6m 38s
    4. Using type as a design element
      11m 58s
  4. 23m 52s
    1. Creating elements with paint strokes
      9m 29s
    2. Building transitions with the Replicator
      5m 37s
    3. Creating transition effects with filters
      8m 46s
  5. 15m 40s
    1. Exploring the use of color in motion graphics
      3m 30s
    2. Creating and using color palettes
      7m 2s
    3. Applying colors to motion graphics
      5m 8s
  6. 15m 6s
    1. Creating textures with generators
      4m 4s
    2. Creating textures for type
      5m 40s
    3. Working with particles to create depth
      5m 22s
  7. 16m 19s
    1. Using material settings to enhance lighting
      5m 51s
    2. Adding final details with lights
      6m 54s
    3. Camera animation techniques for motion graphics
      3m 34s
  8. 22m 19s
    1. Understanding the role of timing in motion graphics
      1m 28s
    2. Creating and using markers to sync animation with audio
      10m 55s
    3. Using audio to drive animation
      2m 45s
    4. Editing techniques for graphics
      7m 11s
  9. 51m 22s
    1. Pitching the style
      3m 5s
    2. Creating elements in real time
      9m 25s
    3. What's next? Storyboards and/or animatics
      9m 32s
    4. Building and animating the title sequence, pt. 1
      6m 44s
    5. Building and animating the title sequence, pt. 2
      9m 8s
    6. Polishing the animation and timing
      13m 28s
  10. 24m 25s
    1. Preparing a map for animation
      7m 40s
    2. Animating and styling a map
      8m 9s
    3. Animating a lower-third graphic
      6m 42s
    4. Creating a bumper animation
      1m 54s
  11. 3m 51s
    1. Finishing a project
      2m 55s
    2. Next steps
      56s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Motion: Principles of Motion Graphics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.