Rhythm

Rhythm is an essential consideration in the production of motion graphics. One of the most common and simple time signatures is 4/4, where four beats are evenly heard over one bar of music and each note is one beat. We’re all familiar with House music’s 4/4 beat. This method of counting time can be applied to animation. In House music, the beat is counted in cycles of eight. The rhythm is established and peaks at the fourth beat. It reduces in the next four beats, in preparation for the next set of eight beats.

Frame from Viking Eggeling’s Symphonie Diagonale, 1921-4

In this Bodyrox sample from Wikipedia at right, the syncopation of the synthesizer melody only starts to make sense when you can hear the four-on-the-floor kick once the rhythm track starts. Count off 8 beats “from the top” and you’ll be able to visualize the patterns discussed in the exercise.

Early experimental animation kept time visually with abstract shapes. Rhythm is the topic of Viking Eggeling’s film Symphonie Diagonale (1921-4). Lines, curves, and forms play in rhythm. Pay attention to the formal design relationships while watching this animation. Watch for balance and movement, form and negative space, and the expressiveness of a line. Notice how the formal balance changes over time and shapes change in size and value. Rhythm is used to create a sense of predictability within the abstraction, and departures from that predictability create drama and focus.

Viking Eggeling’s Symphonie Diagonale, 1921-4

Consider formal design properties of balance and movement while watching Oskar Fischinger’s animation, Spirals.

Oskar Fischinger, Spirals, 1926

Harry Smith’s homage to Fischinger remains abstract though it is even more layered and complicated. Notice the color harmonies and formal balance. Balance changes over time, shapes change in size and transparency. Rhythm is used to create a sense of predictability within the abstraction.

Harry Smith, No. 5: Circular Tensions, Homage to Oskar Fischinger – No. 7: Color Study, 1950-1952

Now open a new file. Click on the button for HTML5 Canvas and change the size to 600 width and 400 height. Select Create.

Inside Animate, notice a Tool Palette, Color Picker, Properties and various other palettes that we can open and close from the Window Menu. The key difference between Animate and Dreamweaver is the timeline and playhead. The timeline is located at the bottom of the screen. Animate expresses the code keyframes and durations graphically, like a video editor. For visual thinkers, this is a great help!

Use the Selection Tool to click on the stroke around the circle (in our example, the stroke is gray and the fill is dark red). Press DELETE on the keypad so the shape we make is a fill with no stroke.

In the Timeline, click on frame 7 then click Menu: Insert > Timeline > Keyframe OR right-click on frame 7 and in the contextual menu choose Insert Keyframe. Keyframes are points in time where something on the Canvas changes. We often use keyframes to add or modify content. “Tweening” is animation terminology for drawing the shapes between two keyframes so that it seems as if one morphs into another. We often use Tweening to create motion. Animate creates both shape and motion tweens. We will explore shape tweens in this chapter and motion tweens in the next.

Notice the keyframe, indicated in the Timeline by a black dot. Frames between keyframes are gray. The last frame before a keyframe is a gray rectangle. The playback head is a red rectangle over the frame number indicator at the top of the Timeline, with an accompanying red line stretched through all layers. At the bottom of the Timeline Palette, the frame number that the Playback Head rests upon is reported (in this instance, the number 7).

Click on frame 7 on the circle_ctr layer then use the Rectangle Tool to draw a square over the red circle. Notice that we set the stroke color to none. You can try a different hue for the square as you used for the circle. In our sample we chose yellow.

In the Timeline, click once on frame 1, hold SHIFT, and click once on frame 7. This selects frames 1-7; notice how they highlight. Now click Menu: Insert > Shape Tween or right-click in the highlighted frames and in the contextual menu select Create Shape Tween. Animate will construct all of the frames between the keyframes to animate the content automatically.

 Click on the stage, and notice the properties displayed in the Properties Palette on the right side. On this palette, find four tabs: Tool, Object, Frame, and Doc. Since frame rate is a document property, select Doc. Under the group Document Settings, click the arrow if contents are not visible, then find FPS, and change it to 12. Doubling the frame rate will make the animation move twice as slow.

Click, hold and drag the new circle to the right of the first circle. Note the Snap guide that helps you align the tops of the two circles. You can turn these on or off in Menu: View > Snap Align. In the Properties Palette, under the Object tab, click in the Color Palette change the color of the new circle.

Insert a new keyframe at frame 13 on the circle_rt layer.

Now we’re going to increase the length of the timeline to 25 frames. We do this by duplicating the first 13 frames of our original circle_ctr object to allow us to see it after frame 13.

Select the frames you want to copy by clicking on frame 1 of the “circle ctr” layer and holding SHIFT while clicking the 13th frame. Click Edit > Timeline > Copy Frames or right-click on the selection and select Copy Frames from the contextual menu.

Click on frame 13 on the circle_rt layer and mouse over the edge of the circle on the stage with the selection tool. The cursor changes into an arrow with a curved line. This symbol means that you can pull the edge of the circle to reshape it. Change the shape of the circle using this technique.

Now, in circle_lft, select and move the circle up or down with the Selection Tool. We start on the second keyframe at frame 25 and use SHIFT + Up Arrow six times (Shift + up + up + up+ up + up + up) to move the circle 60 pixels higher than its starting point. When you scrub the timeline it doesn’t look too bouncy yet. Create a Shape Tween between keyframes 1 and 25.