oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Getting Started with Quartz Composer

by Erica Sadun

Apple's free developer tool collection contains many overlooked gems. These aren't limited to programming-specific utilities. Mac enthusiasts of all stripes and all experience levels can regularly find tools to help them enhance their day-to-day use of OS X applications. It's just a matter of knowing where to look.

Take Quartz Composer, for example. It's a free utility that can bring new life and interest to your iMovie projects. In this article, you'll learn how to use your own pictures to create a simple but flashy animation.

Getting Started

After installing Apple's developer distribution, you'll find Quartz Composer in the Developer/Applications/Graphic Tools folder. Double-click its application icon to launch the program.

If you're running the latest version of Quartz Composer, an Assistant window opens at launch. Click Cancel and then choose File -> New (Command-N). Older versions of Quartz Composer don't have the Assistant. They just open a new editor.

The Quartz Composer interface consists of editor windows, where you lay out components and viewers where you preview the animation. These windows are labeled in their title bars ("Untitled - Editor," "Untitled - Viewer," etc.). Notice the Inspector button at the top right of each editor. Pressing this opens an inspector window where you can adjust settings for any selected object.


Building a Simple Animation

In the following steps, you'll create a basic animation: flying a picture across a screen. To do this, you'll use an image from your personal library and the Billboard renderer, a simple component whose job it is to display pictures.

  1. Add a picture. Drag an image from your Pictures folder onto the new Editor window. A small green-labeled component appears. It's named after the image you dropped; in this case, "OS05002."

  2. Add a billboard. Locate the Patch Library list on the left side of the editor. Click Name to sort the patch list by name (I find this makes it easier to find specific patches) and then drag a copy of Billboard onto the editor. The pink label indicates that this patch renders a result to your viewer. The yellow number "1" shows that this is the first rendering layer. Rendering layers display in order from back to front. Layers with larger numbers appear on top of layers with smaller numbers.

  3. Connect the image to the billboard. Move your cursor to the dot to the right of the word Image on your green, original image component. This is the output produced from the image. Drag from this dot to the image input, the dot to the left of the word Image, on the Billboard. When the connection turns yellow, release the mouse.

  4. Check out the Viewer. Making this connection allows the Viewer to display your image, courtesy of the billboard renderer that does all the heavy lifting.

  5. Add a timing element. Meet the interpolation controller patch. This patch creates intermediate numbers between two values you specify as a function of time. With this patch, you can animate an item's position, size, rotation, or other attribute.
    Locate the Interpolation patch and drag it onto the workspace. Then, select this new patch and open the Inspector.
    To make your adjustments, first choose Input Parameters from the pop-up menu at the top of the Inspector. This displays the various input settings you can adjust. Set the start value to 1.5, the end value to -1.5, and the duration to 10. You'll use these values to move your picture from just off of the right side of the viewer (1.5) across the viewer to just off the left side of your viewer (-1.5) in about ten seconds.

  6. Connect the interpolation patch to the billboard. Drag from the interpolation patch's Result output to the billboard's X Position input. Release the mouse when the connection turns yellow.

  7. Watch the animation. Turn your attention to the viewer. Your image should now animate, moving in from the right side of the viewer and out to the left.

  8. Add a background. The moving image is all well and good, but you'll want to add something to the background of your viewer, so it's not just flying over nothingness.
    Locate the Gradient patch (in the Renderer category) and drag it onto your editor. Immediately, your animation disappears and is replaced by a simple gradient image. Notice the yellow "2" on the gradient patch? The gradient is rendering in front of your billboard.

  9. Adjust the rendering layer. Right-click (Control-click) the Gradient patch and choose Rendering Layer -> Layer 1. This reorders your layer, moving it behind the billboard.

  10. Examine the results. Your animated image now appears over the background, while still moving from the right to the left.

  11. Save to disk. Choose File -> Save, and save your new animation to the desktop as MyFirst.qtz. (You do not have to add the extension; Quartz Composer does that for you.)

  12. Launch iMovie. Create a new project to use with the animation you just created.

  13. Add your clip. Drag the MyFirst file onto the Clips pane in iMovie. Wait as the file imports. It may take several minutes for file to load and render. Once rendered, the clip should be 30 seconds long.

  14. Add the clip to the Clip viewer. Drag the newly imported clip from the Clips pane down into the Clip viewer at the bottom of the iMovie window and then play your new movie. The animation should repeat three times, corresponding to the ten-second length you specified for your Interpolation patch.

Digital Video Production Cookbook

Related Reading

Digital Video Production Cookbook
100 Professional Techniques for Independent and Amateur Filmmakers
By Chris Kenworthy

Pages: 1, 2, 3

Next Pagearrow