Creating Keyframed Animation in the Canvas


You are now familiar with the concept of keyframing audio to modify levels over time. You can also apply keyframes to other object parameters to create more complex animation. Motion's behaviors provide an easy way to apply animation parameters to objects. However, sometimes you may want to create a combination of parameter changes over time, and it's easier to apply keyframes than to combine and modify a lot of different behaviors.

In the next series of exercises, you'll learn to record keyframes to animate two static imagesdoesn't sound too exciting until you see the project. You're about to re-create my first professional Motion project. Here's the backstory in a nutshell. The week that the Motion application shipped, I had just finished editing a new promotion piece for my client, Universal Studios Florida Production Group (USFPG). At the same time, USFPG announced its brand-new 22A division for producing and servicing national and international film and television productions. The executive decision was made to combine the USFPG logo with the new 22A logo at the beginning of the promo. "No problem," I said, because that's what you always say when a client asks you to do something. Then, of course, you have to live up to your words. Fortunately, I had just installed Motion on my computer and was able to use it to combine the logos in record time.

Opening the 22A Project

Let's take a look at the two logos in the 9-3 22A start project so you know what you'll be working with for the remainder of this lesson.

1.

In the File Browser, open the Lesson_09 folder, if it's not already open; then open the project 9-3 22A start.

The start version of the project includes both logos without any modi fication.

2.

Choose File > Save As and save your project in the My Motion Projects folder on the Desktop.

3.

Press the spacebar to play the project.

Animated logo

Static image

As you can see, the Universal Studios Florida Production Group logo is fully animated and exciting, while the 22A logo is just a static image. All you have to do now is come up with a creative way to combine them. As I said, no problem.

Searching for Similarities in the Objects

Combining two objects that seem so dramatically different takes a little practice and creativity. It doesn't hurt to implement one of my rules, either.

Rule #6: You can make objects seem like they belong together if you emphasize their similarities rather than their differences.

Similarities can be anything from a common color to a shape or even a letter of text. If you can find even one similarity, then you have something that you can use as a transition point between the two objects in the project.

As you watch the project in the Timeline, look for any similarities in the two logos. Usually, the best options are the things you notice first.

At first glance, I see a large, predominantly blue globe as the focal point of the animated USFPG logo. The 22A logo has a retro-futuristic look that includes a large blue circle behind the letter A. Bingo! We have a winner. All we have to do now is fade the globe from the first logo into the blue circled A on the second logo, and we're on the way to a really cool logo combo. Sound difficult? Not if you use keyframes to animate the parameters on the 22A logo.

First, let's take a look at the finished animated logo so you can see what you're aiming for with this project.

1.

In the File Browser, double-click the Logos finished.mov file to open the finished logo movie in the Viewer.

2.

Play the finished movie in the Viewer.

The two logos were combined in the same project by creating a transition between the blue circles in each logo.

3.

Close the Viewer.

Planning the Project

Now that you've seen the finished project, it's time to dive in and re-create it yourself. First, it's a good idea to have a plan. This project will also help you review some of your other Motion skills as you use various features to accomplish your goal. Here are the steps you'll follow to finish the project:

1.

Modify the timing of the elements in the Timeline.

2.

Apply a Fade Out behavior to the object with the globe so that it fades out, revealing the A object below.

3.

Transform the A object over the globe image in the Canvas to match their sizes and positions.

4.

Add a particle emitter to the A object to match the glowing animation of the globe.

5.

Animate the A object with keyframes to move it from the starting position to its final size and position.

6.

Animate the 22 object and move it to its final position.

7.

Tweak to taste.

That's the plan.



    Apple Pro Training Series Getting Started with Motion
    Apple Pro Training Series: Getting Started With Motion
    ISBN: 0321305337
    EAN: 2147483647
    Year: 2005
    Pages: 283
    Authors: Mary Plummer

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net