AddThis Social Bookmark Button

Listen Print Discuss
Mac OS X > Excerpts >

Getting Started with Quartz Composer
Pages: 1, 2, 3

Bam. Kick It Up a Notch.

Flying, rotating picture cube? No sweat. How about adding a sweet two-image animation? It's no trouble at all with Quartz Composer. Here's how.

  1. Add a second image. Drag a new, second image onto your editor.
    figure

  2. Make room for the new effect. Disconnect the original image from the Rotating Cube renderer. Move the existing Interpolation patch out of the way, without disconnecting it.
    figure

  3. Add the Dissolve transition. Locate the Dissolve transition in your patch library and drag it onto the editor. Dissolve creates a transition from one image to another.

  4. Add a second Interpolation patch. Drag it in from the Patch library.

  5. Connect! Make the following connections: 1) Connect your original image to the Dissolve patch's Image input. 2) Connect your new image to the Dissolve patch's Target Image input. 3) Connect the new Interpolation to the Dissolve patch's Time input. 4) Finally, connect the Dissolve patch's image output to the Rotating Cube's Image input. These connections tell the Dissolve patch which images to dissolve from and to, using the Interpolation patch as a timer.
    figure

  6. Examine the Viewer. The cube faces should now transition between your two pictures, although the change will look a little sharp to begin with.
    figure

  7. Adjust the Interpolation settings. Select the new Interpolation (the one connected to Dissolve) and open the Inspector. Choose Input Parameters from the pop-up menu. Set the Duration to 2.5, the repeat mode to Mirrored Loop, and the Sinusoidal In-Out from the Interpolation pop-up menu. The 2.5 duration divides easily into the overall ten-second core animation. Mirrored creates a transition from one image to the other and then from that image back to the first, rather than jumping at the end. Sinusoidal interpolation creates a smoother-looking progression from one image to the next.
    figure

  8. Examine the results. The animation in the viewer should look much smoother and nicer after you've applied these settings.

  9. Add a final touch. Disconnect Dissolve from the Rotating cube and drag a copy of the Bloom stylize patch between the two. Connect Dissolve to Bloom's Image input, and Bloom's Image output to Rotating Cube's Image input.
    figure

  10. Again, examine the results. Bloom adds a soft, framed, almost dreamy effect to your cube.
    figure

  11. Save to disk. Save your Quartz animation to disk as MyThird.qtz.

  12. Return to iMovie. Load in the two new animations (MySecond and MyThird) and watch them play back at full digital video quality.

As you've seen in this article, Quartz Composer can produce powerful and exciting iMovie-compatible graphic sequences with just a few minutes of work. The animations you've created here are only a taste of Quartz Composer's power. There's much, much more you can do with this incredibly powerful tool. Hopefully this article will act as a starting point and inspire you to explore and discover more of Quartz Composer's phenomenal abilities.

Erica Sadun has written, co-written, and contributed to almost two dozen books about technology, particularly in the areas of programming, digital video, and digital photography.

Return to the Mac DevCenter