We launched a new IT training category! Check out the 140+ courses now.

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

Creating elements in real time

From: Motion: Principles of Motion Graphics

Video: Creating elements in real time

If you're joining me from the last video, this was the title design that got approved. So, we're going to use this as inspiration. In the last video, I did mention that there were textures that were sent off for inspiration again, and they were approved. Now, one of the things I'd like to do when I start animating is pre-render as much as possible. Obviously, I haven't done very much animation just yet, but I want to show you the QuickTime that I've pre-rendered, and I'll explain why in just a second. If you go to the File browser, in your Media folder, head to the PreRenders folder, and in there, you'll find a Background Materials movie.

Creating elements in real time

If you're joining me from the last video, this was the title design that got approved. So, we're going to use this as inspiration. In the last video, I did mention that there were textures that were sent off for inspiration again, and they were approved. Now, one of the things I'd like to do when I start animating is pre-render as much as possible. Obviously, I haven't done very much animation just yet, but I want to show you the QuickTime that I've pre-rendered, and I'll explain why in just a second. If you go to the File browser, in your Media folder, head to the PreRenders folder, and in there, you'll find a Background Materials movie.

Let's just go ahead and drag and drop that right into our canvas. If we press Play, we can preview our animation, and here you can see all this is just these textures cutting back and forth. The animation stops after a few seconds. So we're going to go ahead and deal with that, but the title open needs to be 10 seconds long. So even if I'm just working on noodling around to create a general direction, if I know it's going to be 10 seconds long, I do like to rough out very rough timings.

Most of the time when you're designing a title, you'll have some element that is repeated in the background. Now, that could be a video that's edited and you've stylized a color treatment for, or it could be a graphic element that's constantly repeated. I'm actually going to use this background element that I pre-rendered, which obviously is just a bunch of cuts. I'm going to use that as the main impetus for my inspiration outside of the text treatment. So the first thing we need to do is look at how long this file is.

To do that, select the QuickTime file and go to the Inspector, and in the Properties section, if you scroll down to the bottom, when you have video selected, notice there's a whole Timing pane, and in here, we have our QuickTime and it's playing back. So let's go ahead and play that. Okay, for a title open, I think that's moving a little slow. Now again, its preference, and since we're not completely in the animatic phase yet, I'm just doing this sort of off the cuff.

But we'll change our speed here, and I want to speed it up, so let's just change it to 200%. Now we should also deal with the fact that the clip ends at 119. If you look down all the way at the bottom, there is a pulldown for End Condition. Let's change that to Loopable. This way with this QuickTime file, I could just click right here on the right side of it and drag it out and loop it for as long as I needed it to be, in the comp. Again, since this element is going to be repeating, I just wanted to make sure it was as long as it needed to be.

I know this is going to work fine based on what the element is, but a lot of times when we have a looping piece of video, you want to move your playhead down and just go ahead and check the transition, which this one works perfectly fine, and I definitely love that pacing. So you may notice in our project, I already have a 3D camera, and I did that because I know I'm going to want to move in Z space. This section right here contains our title. Let me go ahead and turn off my background video. I know this title got approved based on its font, size, and placement, so I'm actually going to leave it in this placement for right now.

Now, the next section down is Open Textures. I am just going to drag and drop my background video right in there, and we're going to work on building an open texture that we can again repeat throughout. Now, these other two groups contain transitional elements. See, when I'm designing a 10-second title, I know there's most likely going to be at least two, if not three, transitions and that's just, again, me sort of roughing it out in my head. Obviously, you can decide what you want to do with your own projects, but based on what I was thinking, two or three transitions.

That's why I have these comps, and you notice I've also made them roughly three seconds apiece. Obviously, all of this timing can change once we start the actual animation phase; I am just trying to build some animated elements to see if I could inspire the overall design. Being in Motion, I can't help but think about using the Replicator in my project. I just love using the Replicator. Part of the reason I've pre-rendered this file as a QuickTime is the fact that Replicator can do some amazing things with video files.

So let's get started building our open texture. Make sure you have the background QuickTime selected and go up to Replicate in the toolbar. I know this looks kind of crazy right now because the video file is extraordinarily large, but what we want to do is just reposition this out to the sides. Now, I'm just dragging one of the corners out to the sides, and since the video is so large, I can't really see what's happening. So what we need to do, in the Replicator section, go to the Inspector tab, under Replicator, and we need to adjust the scale.

So let's go down and look at the scale and just drag that down to the left until everything gets kind of small. I would like these to be really kind of tiny, so let's set it around 15. And that's an off a lot of black space, so let's look at the number of rows and columns. So all that Replicator is doing is just repeating the same graphic element, and now we actually have control over how many columns and how many rows. So, let's go ahead and crank that up to 6 and 6.

Now, I like how this is looking, but there's still a little bit too much black space, so what I'm going to do is go back to my Replicator tab here and I'm just going to a tweak the Size settings. So initially when I was making adjustments to the Replicator, I was adjusting in the canvas, but once you set your initial adjustment, I recommend going in and adjusting the size with these menus here. If you try and drag the slider, notice it doesn't quite go far enough, so click in the number well and drag it out towards 1090. Let's resize the height as well, and as I'm resizing this, I just want to get the black area really tight and precise so it's the same horizontally and vertically.

So yeah, okay, we can leave it at 666. All right! So, now we're ready to actually look at our animation. If I move down and press my play from beginning here, we'll go ahead and check it out. And as you can see, everything is changing all at once. So, one of the great things about the Replicator is the fact that you can tell the video to just play random frames. So scroll down to the bottom of the Replicator tab in your Inspector and choose Random Start Frames, right underneath the Play Frames options.

Now, if we play from the beginning, you'll notice it's actually looking pretty darn cool. This is relatively close to where I want to be in terms of my inspiration. I just like to see these actually build on, because graphically, I'm trying to recreate a representation of what happens in the show, which is redesign, remodeling, rebuilding. So I want these graphics to actually build on. I'll just do a rough build right now. So, if you select the Replicator, you can go up to Add Behavior, and we want to sequence the Replicator, so if we go to Replicator, choose Sequence Replicator.

By default, nothing is set up to Sequence, so we need to add a parameter. So let's change that to Opacity, and we'll have this build on. And for this to function, we want to start at 0 and actually build to full Opacity. If we start at 0 and we look at the Sequence Controls down here, we don't want to Sequence To; we want to Sequence From 0. And then let's go ahead and play and see what that looks like.

It's going to continue building on like this for 10 seconds, so let's actually move our playhead right to around two seconds, because I want this to be fast, and press O for out. And now, if we go ahead and watch our Sequence Replicator, you should see it kind of build on till two seconds. Now I know I'm not getting a real-time preview, but this is definitely the look that I was going for. We'll obviously tweak this animation when we actually get to the animation phase, but again, I just wanted to use this as inspiration, so I can sort of visually confirm what I was thinking mentally, and that has occurred.

The next phase usually is building the animatic. Now to recap, I used the Replicator to inspire my open. Now obviously we haven't really started building the open yet. But I did have a theory behind what I was building, and that's really one of the core principles of animation and creating motion graphics. If you're creating a title open, you don't want to just build something because it looks cool. I mean a lot of us will start there, but for this graphic specifically, I started with the textures that were inspired by remodeling, and then graphically, I tried to rebuild the process of building with our graphics using the Replicator.

Show transcript

This video is part of

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

41 video lessons · 14985 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 preferences from 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.