Difference between revisions of "Chapter 19 CC18"

From Digital Foundations
(CS6 copy)
 
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
=Chapter 19 - Pacing=
 
=Chapter 19 - Pacing=
  
−
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. House Music has a 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. One of the key concepts in understanding animation is visualizing time. Whether you are keeping track of the musical score or graphic frames on a timeline, counting time is important and "seeing" the count is a necessity.
+
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. House Music has a 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. One of the key concepts in understanding animation is visualizing time. Whether you are keeping track of the musical score or graphic frames on a timeline, counting time is important and "seeing" the count is a necessity.
  
−
Early experimental animation can be drawn upon as an example of seeing time kept with abstract, basic shapes. This is Oscar Fischinger's 1927 animation. (example)  Consider formal design properties of balance and movement while watching this animation.  The work we will be doing is more like his later work, "Early Abstractions" (1946 - 57).
+
Early experimental animation can be drawn upon as an example of seeing time kept with abstract, basic shapes. The work we will be doing is more like Oscar Fischinger's later work, "Early Abstractions" (1946 - 57).
−
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's homage to Fischinger remains abstract, though it is even more layered and complicated. Balance changes over time, shapes change in size and transparency. Rhythm is used to create a sense of predictability within the abstraction.
  
−
In the following exercises, we will apply some of these core principles to our basic Flash animations.
+
=Exercise 1: Adding Sound Clip and Define Length of Clip=
  
−
=Exercise 1: Visualizing time, keyframes, shape tween=
+
'''1.''' Open Adobe After Effects. Select “New Project…” in the startup menu.
  
−
1. Open Flash and notice that the interface is similar to Dreamweaver.  Click on the button for  new file using Actionscript 3.0. 
+
[[File:Fig19 Ex1 01 CC2018.png|500px]]
  
−
[[File:Fig18_Ex1_01_CS6.png|400px]]
 
  
−
2. Inside Flash you will see a Tool Palette, Color Picker, Properties and various other palettes that can be opened and closed from the Window Menu. The key difference between Flash and Dreamweaver is the timeline and playhead. The timeline is located at the top of the screen. By default, there is one empty layer and one empty frame. Double-click on "Layer 1" and name it "line." In Flash, all of the art is made or placed on the Stage or Workspace while all of the instructions about how the art is animated is inserted into frames on the Timeline. Draw a grey line in the bottom one-third of the stage. This line will serve as a baseline. Notice in the image below that the line is gray because the color selected for "Stroke color" is the gray hex value, #666666.
+
'''2.''' Select “New Composition.” Name the Composition “Pacing.” Make sure the width is set to 1920 px and the height is set to 1080 px. Set the frame rate by selecting 29.97 from the pull-down menu. Set the Duration to 2.12 seconds which is 0;00;02;12. This is because we will be using an audio file that is 2.12 seconds long. Press OK.
  
−
[[File:Fig18_Ex1_02_CS6.png|400px]]
+
[[File:Fig19 Ex1 02 CC2018.png|500px]]
  
−
3. Add a new layer by clicking on the Insert Layer button towards the bottom left of the Timeline Palette. Name it "circle ctr."  While the new layer is active (highlighted) draw a circle using the Oval Tool in the Stage. Position the circle above the center of the baseline. The stroke of a shape is the line around the outside. The fill is the color inside the outline of the shape. 
 
  
 +
'''3.''' Import the sound clip and AI file using File > Import > Multiple Files…
  
−
<table class="infobox">
+
[[File:Fig19 Ex1 03 CC2018.png|500px]]
  
−
<tr>
 
  
−
<td>''Tip:'' Like all Creative Suite applications, the SHFT key is used to constrain proportions.  Hold SHFT when using the oval tool to create a perfectly proportioned circle.</td>
+
'''4.''' Drag the sound clip from the Project Panel to the Layers panel to insert it to the composition.
−
</tr>
 
  
−
</table>
+
[[File:Fig19 Ex1 04 CC2018.png|500px]]
  
 +
=Exercise 2: Placing AI File, Draw Out Solid, Add Letter “O”=
  
−
[[File:Fig18_Ex1_03_CS6.png|400px]]
+
'''1.''' Move the AI File to the composition by dragging it to the layers. Move the Circle to the bottom left of the composition.
  
−
4. 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 DEL on the keypad so the shape is made by a fill with no stroke.
+
[[File:Fig19 Ex2 01 CC2018.png|700px]]
  
−
[[File:Fig18_Ex1_04_CS6.png|400px]]
 
  
−
5. In the Timeline, click on frame 7 then click Insert > Timeline > Keyframe.
+
'''2.''' Draw a Solid Circle using the Ellipse Tool and move it to the right side of the composition, centered vertically. You can change the fill and stroke from the toolbar.
−
Keyframes are points in time where something on the Stage 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. Tweening is often used to create motion. Flash creates both shape and motion tweens. We will explore shape tweens in this chapter and motion tweens.
 
  
−
[[File:Fig18_Ex1_05_CS6.png|400px]]
+
[[File:Fig19 Ex2 02 CC2018.png|700px]]
  
−
6. Notice that a keyframe is indicated in the Timeline by a black circle. Frames between keyframes are gray. The last frame before a keyframe is a white 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).
 
  
−
[[File:Fig18_Ex1_06_CS6.png|400px]]
+
'''3.''' Select the Type Tool and add the letter “O.” Move it to the center of the composition and make sure its anchor point is in the center using the Anchor Point Tool (Y).  Adjust the circles so that all three are roughly the same size.
  
−
7. Create another keyframe on frame 13.
+
[[File:Fig19 Ex2 03 CC2018.png|700px]]
  
−
8. Add frames for the layer containing the baseline. We do not need to add another keyframe, as the baseline will not change throughout the animation.  Click on frame 12 on the "line" layer and select Insert > Timeline > Frame.
+
=Exercise 3: Changing Position of AI File, Change Hue of Solid=
  
−
[[File:Fig18_Ex1_08_CS6.png|400px]]
+
'''1.''' Create an initial keyframe so that you can change the position of the circle. In the layers panel, click the arrow next to the “Circle.ai” layer to expand the twirl down menu. Do the same for the Transform menu, and then click the stop-watch next to Position while the playhead is at the first frame.
  
−
9. Click on frame 7 on the "circle ctr" layer then use the Rectangle Tool to draw a square. Notice that we set the stroke color to none. You can use the same color for the square as you used for the circle, or you can try a different hue.
+
[[File:Fig19 Ex3 01 CC2018.png|800px]]
  
−
[[File:Fig18_Ex1_09_CS6.png|400px]]
 
  
−
10. In the Timeline, click once on frame 1, hold SHFT and click once on frame 7. This selects frames 1-7. Now click Insert > Shape Tween.  Flash will construct all of the frames between the keyframes to animate the content.
+
'''2.''' Move the playhead halfway through the composition so that it is exactly at 1:06 seconds. You can find the time at the bottom of the composition panel. Change the position of the circle so that it is higher than its previous position.
  
−
[[File:Fig18_Ex1_10_CS6.png|400px]]
+
[[File:Fig19 Ex3 02 CC2018.png|800px]]
  
−
11. In Flash, the master file is the .FLA file. Click File > Save As and save the .FLA file if you haven't done this already.
 
  
−
12. View or "Test" the animation by pressing CMD+RETURN or use Control > Test Movie > in Flash Professional. Testing the movie creates a .SWF file, which is a playable file understood in Flash and web browsers.
+
'''3.''' Move the playhead to the last frame. Click on the first Keyframe we made in step 1, copy it, and paste it to the last frame.
  
−
=Exercise 2: Modifying the frame rate adjusts the speed of the beat=
+
[[File:Fig19 Ex3 03 CC2018.png|800px]]
  
−
The animation created in Exercise 1 is exactly one second long. The frame rate determines the length of time that each frame is played. Dividing the number of frames used in the animation (the number of the last frame - 1) by the frame rate results in the duration of the animation. In Exercise 1, the frame rate is 12 frames per second (fps), so (13 - 1)/12 = 1 second. Since the frame rate is the same for the entire timeline, it is a property of the document. In this exercise we will modify the frame rate by using the Properties Palette. 
 
  
−
1. Click on the stage, and notice the properties displayed in the Properties Palette near the bottom of the screen. These properties are specific to the stage. If you click on the timeline, you will see different properties. Use the box next to "Frame rate" to change the rate to 24 fps. Doubling the frame rate will make the animation move twice as fast.
+
'''4.''' Press SPACE to preview.
  
−
[[File:Fig18_Ex2_01_CS6.png|400px]]
+
'''5.''' Select the solid shape and make a keyframe for Color (Contents > Ellipse 1 > Fill 1) at the first frame.
  
−
2. Play music while watching your animation. Try to synchronize the animation so it is in time with the music by adjusting the frame rate. With only 12 frames moving at 24 fps, the animation will loop twice in one second of time.
+
[[File:Fig19 Ex3 05 CC2018.png|800px]]
  
−
=Exercise 3: Visualizing tempo=
 
  
−
1. Click on the "circle ctr" layer then add a new layer above it. Name it "circle rt". Select the circle on the first layer, and copy it using Edit > Copy or CMD + C. Click on the first frame of the new layer and paste the circle using CMD + V.
+
'''6.''' Move the playhead halfway (1:06) and change the Color.
  
−
[[File:Fig18_Ex3_01_CS6.png|400px]]
+
[[File:Fig19 Ex3 06 CC2018.png|800px]]
  
−
2.Hold SHFT while clicking and dragging the new circle to the right of the first circle.
 
  
 +
'''7.''' Go to the last frame and duplicate the first keyframe.
  
−
<table class="infobox">
+
[[File:Fig19 Ex3 07 CC2018.png|800px]]
  
−
<tr>
 
  
−
<td>Holding the Shift Key while dragging an object restricts the movement to 90 and 45 degrees.</td>
+
'''8.''' Press SPACE to preview.
−
</tr>
 
  
−
</table>
+
=Exercise 4: Change Opacity and Scale of “O”=
  
 +
'''1.''' For the “O”, make a keyframe for scale and opacity at the first frame.
  
−
[[File:Fig18_Ex3_02_CS6.png|400px]]
+
[[File:Fig19 Ex4 01 CC2018.png|800px]]
  
−
3. Click in the Color Palette to change the color of the new circle.
 
  
−
[[File:Fig18_Ex3_03_CS6.png|400px]]
+
'''2.''' Move the playhead halfway so that it is at 1:06 seconds. Change the scale so it is larger but not touching the other circles. Then change the Opacity to 0%.
  
−
4. Insert a new keyframe at frame 13 on the "circle rt" layer. Click on frame 25 and use the key command (Function Key) F6 to add another keyframe.
+
[[File:Fig19 Ex4 02 CC2018.png|800px]]
  
−
[[File:Fig18_Ex3_04_CS6.png|400px]]
 
  
−
5. In order to see the original circle on the "circle ctr" layer after frame 13, we will duplicate the first 13 frames. Select the frames you want to copy, by clicking on frame 1 of the "circle ctr" layer and holding SHFT while clicking the 13th frame. Click Edit > Timeline > Copy Frames. Select the first destination frame, or frame 13, and click Edit > Timeline > Paste Frames. We are pasting on top of the second keyframe. On the "line" layer, click on frame 25 and use Function key F5 to insert frames, or Insert > Timeline > Frame.
+
'''3.''' Go to the last frame and copy the key frames from the first frame to the last frame.
  
−
[[File:Fig18_Ex3_05_CS6.png|400px]]
+
[[File:Fig19 Ex4 03 CC2018.png|800px]]
  
−
There is a difference between Copy and Copy Frames. Edit > Copy will copy a shape or an object. Edit > Timeline > Copy Frames will copy the entire content of one or multiple frames.
 
  
 +
'''4.''' Press SPACE to preview.
  
−
<table class="infobox">
+
=Exercise 5: Exporting and Rendering=
  
−
<tr>
+
'''1.''' Save the composition by selecting File > Save As > Save As… and name the project “Pacing.”
  
−
<td>Key command: CMD+OPT+V is a shortcut for Edit > Timeline > Paste Frames.</td>
+
[[File:Fig19 Ex5 01 CC2018.png|400px]]
−
</tr>
 
  
−
</table>
 
  
−
6. 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.
+
'''2.''' Then Export by selecting File > Export > Add to Render Queue.
  
−
[[File:Fig18_Ex3_06_CS6.png]]
+
[[File:Fig19 Ex5 02 CC2018.png|500px]]
  
−
7. Select frames 1 through 13 on the "circle rt" layer and apply the Shape Tween in the Properties Palette.
 
  
−
[[File:Fig18_Ex3_07_CS6.png|400px]]
+
'''3.''' Change the value of “Output To:” by selecting the blue value and choosing where the composition will be exported to. Click save.
  
−
8. Test the new animation (CMD + Enter) and notice that the new tween takes twice as long as the tween in the first circle to square animation. The tempo of the new tween is slower than the tempo of the first circle.
+
[[File:Fig19 Ex5 03 CC2018.png|800px]]
  
−
=Exercise 4: Basic bouncing ball=
 
−
1. Repeat the first steps in Exercise 3 to create a new layer above "circle rt" called "circle lft." Add a third circle to the left of the original with a new hue.
 
  
−
[[File:Fig18_Ex4_01_CS6.png|400px]]
+
'''4.''' Click on Render on the right. This will export and render the video to an MOV file.
  
−
2. This circle is going to have a shorter cycle than both of the other shapes. This will result in the fastest tempo. Add a new keyframe on this layer at frame 25 so the circle will end in the same position. When an animation is supposed to cycle seamlessly, a keyframe should be placed at the end of the layer holding the same content as the first frame.
+
[[File:Fig19 Ex5 04 CC2018.png|800px]]
  
−
[[File:Fig18_Ex4_02_CS6.png|400px]]
+
=Exercise 6: Looping=
  
−
3. Insert a new keyframe every three frames. In each keyframe, move the circle up or down with the Selection Tool.  
+
'''1.''' Make a new project by selecting Composition > New Composition or by using the shortcut, CMD + N.
  
−
[[File:Fig18_Ex4_03_CS6.png|400px]]
+
[[File:Fig19 Ex6 01 CC2018.png|400px]]
  
−
We started on the second keyframe (frame 4) and used SHFT+Up Arrow three times (Shift + up + up + up) to move the circle 30 pixels higher than it's starting point. On the next keyframe, we used SHFT+Down Arrow. On the following keyframe, SHFT+Up Arrow four times. On frame 13, SHFT + Down Arrow. We repeated this pattern throughout the layer so the circle would look like a ball that bounces higher each time it hits the ground.
 
−
4. Create a shape tween between each keyframe. 
 
  
−
[[File:Fig18_Ex4_04_CS6.png|400px]]
+
'''2.''' In the Composition Settings Window, name the new composition “PacingLoop” and make the duration 10 seconds (0:00:10:00). Click OK
  
−
5. Use CMD+return to watch the new animation.
+
[[File:Fig19 Ex6 02 CC2018.png|500px]]
 +
 
 +
 
 +
'''3.''' Select File > Import > File… and select the Pacing.mov file that we created earlier.
 +
 
 +
[[File:Fig19 Ex6 03 CC2018.png|500px]]
 +
 
 +
 
 +
'''4.''' Click and drag Pacing.mov to the layers panel and press SPACE to preview. As you can see, the Pacing file only lasts for 2 seconds of our 10 seconds.
 +
 
 +
'''5.''' Right click the Pacing.mov layer and select Time > Enable Time Remapping. This will create a property with a keyframe under the layer.
 +
 
 +
[[File:Fig19 Ex6 05 CC2018.png|800px]]
 +
 
 +
 
 +
'''6.''' Option + Click the keyframe icon to create an expression. Expressions are bits of code that tell After Effects details about the property, in this case Time Remap.
 +
 
 +
[[File:Fig19 Ex6 06 CC2018.png|800px]]
 +
 
 +
 
 +
'''7.''' Click on the Expression Language Menu, which is the circle with the triangle within the expression layer.
 +
 
 +
[[File:Fig19 Ex6 07 CC2018.png|800px]]
 +
 
 +
 
 +
'''8.''' From the Expression Language Menu. Select Property > loopOut(type = “cycle”, numKeyframes = 0)
 +
 
 +
[[File:Fig19 Ex6 08 CC2018.png|800px]]
 +
 
 +
 
 +
'''9.''' Now drag the end of the Pacing.mov layer to the end of the composition. This will tell After Effects to loop until the end of the composition.
 +
 
 +
[[File:Fig19 Ex6 09 CC2018.png|800px]]
 +
 
 +
 
 +
'''10.''' Press SPACE to make check that Pacing.mov is looping for the 10 seconds. If it is, continue exporting and rendering the composition like in Exercise 5.

Latest revision as of 08:34, 13 December 2018

Chapter 19 - Pacing

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. House Music has a 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. One of the key concepts in understanding animation is visualizing time. Whether you are keeping track of the musical score or graphic frames on a timeline, counting time is important and "seeing" the count is a necessity.

Early experimental animation can be drawn upon as an example of seeing time kept with abstract, basic shapes. The work we will be doing is more like Oscar Fischinger's later work, "Early Abstractions" (1946 - 57). Harry Smith's homage to Fischinger remains abstract, though it is even more layered and complicated. Balance changes over time, shapes change in size and transparency. Rhythm is used to create a sense of predictability within the abstraction.

Exercise 1: Adding Sound Clip and Define Length of Clip

1. Open Adobe After Effects. Select “New Project…” in the startup menu.

Fig19 Ex1 01 CC2018.png


2. Select “New Composition.” Name the Composition “Pacing.” Make sure the width is set to 1920 px and the height is set to 1080 px. Set the frame rate by selecting 29.97 from the pull-down menu. Set the Duration to 2.12 seconds which is 0;00;02;12. This is because we will be using an audio file that is 2.12 seconds long. Press OK.

Fig19 Ex1 02 CC2018.png


3. Import the sound clip and AI file using File > Import > Multiple Files…

Fig19 Ex1 03 CC2018.png


4. Drag the sound clip from the Project Panel to the Layers panel to insert it to the composition.

Fig19 Ex1 04 CC2018.png

Exercise 2: Placing AI File, Draw Out Solid, Add Letter “O”

1. Move the AI File to the composition by dragging it to the layers. Move the Circle to the bottom left of the composition.

Fig19 Ex2 01 CC2018.png


2. Draw a Solid Circle using the Ellipse Tool and move it to the right side of the composition, centered vertically. You can change the fill and stroke from the toolbar.

Fig19 Ex2 02 CC2018.png


3. Select the Type Tool and add the letter “O.” Move it to the center of the composition and make sure its anchor point is in the center using the Anchor Point Tool (Y). Adjust the circles so that all three are roughly the same size.

Fig19 Ex2 03 CC2018.png

Exercise 3: Changing Position of AI File, Change Hue of Solid

1. Create an initial keyframe so that you can change the position of the circle. In the layers panel, click the arrow next to the “Circle.ai” layer to expand the twirl down menu. Do the same for the Transform menu, and then click the stop-watch next to Position while the playhead is at the first frame.

Fig19 Ex3 01 CC2018.png


2. Move the playhead halfway through the composition so that it is exactly at 1:06 seconds. You can find the time at the bottom of the composition panel. Change the position of the circle so that it is higher than its previous position.

Fig19 Ex3 02 CC2018.png


3. Move the playhead to the last frame. Click on the first Keyframe we made in step 1, copy it, and paste it to the last frame.

Fig19 Ex3 03 CC2018.png


4. Press SPACE to preview.

5. Select the solid shape and make a keyframe for Color (Contents > Ellipse 1 > Fill 1) at the first frame.

Fig19 Ex3 05 CC2018.png


6. Move the playhead halfway (1:06) and change the Color.

Fig19 Ex3 06 CC2018.png


7. Go to the last frame and duplicate the first keyframe.

Fig19 Ex3 07 CC2018.png


8. Press SPACE to preview.

Exercise 4: Change Opacity and Scale of “O”

1. For the “O”, make a keyframe for scale and opacity at the first frame.

Fig19 Ex4 01 CC2018.png


2. Move the playhead halfway so that it is at 1:06 seconds. Change the scale so it is larger but not touching the other circles. Then change the Opacity to 0%.

Fig19 Ex4 02 CC2018.png


3. Go to the last frame and copy the key frames from the first frame to the last frame.

Fig19 Ex4 03 CC2018.png


4. Press SPACE to preview.

Exercise 5: Exporting and Rendering

1. Save the composition by selecting File > Save As > Save As… and name the project “Pacing.”

Fig19 Ex5 01 CC2018.png


2. Then Export by selecting File > Export > Add to Render Queue.

Fig19 Ex5 02 CC2018.png


3. Change the value of “Output To:” by selecting the blue value and choosing where the composition will be exported to. Click save.

Fig19 Ex5 03 CC2018.png


4. Click on Render on the right. This will export and render the video to an MOV file.

Error creating thumbnail: convert: improper image header `/home/dgtlfndtns/wiki.digital-foundations.net/images/f/f5/Fig19_Ex5_04_CC2018.png' @ error/png.c/ReadPNGImage/4107. convert: no images defined `/tmp/transform_f6713445c2ca.png' @ error/convert.c/ConvertImageCommand/3229. Error code: 1

Exercise 6: Looping

1. Make a new project by selecting Composition > New Composition or by using the shortcut, CMD + N.

Fig19 Ex6 01 CC2018.png


2. In the Composition Settings Window, name the new composition “PacingLoop” and make the duration 10 seconds (0:00:10:00). Click OK

Fig19 Ex6 02 CC2018.png


3. Select File > Import > File… and select the Pacing.mov file that we created earlier.

Fig19 Ex6 03 CC2018.png


4. Click and drag Pacing.mov to the layers panel and press SPACE to preview. As you can see, the Pacing file only lasts for 2 seconds of our 10 seconds.

5. Right click the Pacing.mov layer and select Time > Enable Time Remapping. This will create a property with a keyframe under the layer.

Fig19 Ex6 05 CC2018.png


6. Option + Click the keyframe icon to create an expression. Expressions are bits of code that tell After Effects details about the property, in this case Time Remap.

Fig19 Ex6 06 CC2018.png


7. Click on the Expression Language Menu, which is the circle with the triangle within the expression layer.

Fig19 Ex6 07 CC2018.png


8. From the Expression Language Menu. Select Property > loopOut(type = “cycle”, numKeyframes = 0)

Fig19 Ex6 08 CC2018.png


9. Now drag the end of the Pacing.mov layer to the end of the composition. This will tell After Effects to loop until the end of the composition.

Fig19 Ex6 09 CC2018.png


10. Press SPACE to make check that Pacing.mov is looping for the 10 seconds. If it is, continue exporting and rendering the composition like in Exercise 5.

Retrieved from "http://wiki.digital-foundations.net//index.php?title=Chapter_19_CC18&oldid=2844"