Let's get things in motion!

Post date: Dec 1, 2014 3:13:40 PM

Over the first quarter and half of the year, we've been working with Adobe Illustrator and Photoshop to create, edit and arrange still images. Still images make up a significant amount of the visual content around us, but the world around us is always in motion and often the creative content we see is as well.

Beginning today for the next couple months, much of our work will be in motion. If that's the object in motion or a camera dollying into/panning around the object, something will most always be in motion.

As we begin to work our way into animation, Adobe Flash is a great place to start. The application is familiar to the other Adobe products we've used thus far and the animation process is 2D and quick. Tweens are a couple clicks results take little rendering time/resources.

Animated by Cento Lodigiani

Beginning animators rely on little to say a lot and that's valuable skill as your animation abilities grow and/or the software gets more complex. Pixar's top animators rely on strong character "voice" through non-verbal ways (i.e. eyes, eyebrows, clothing and character movement).

Step 1: Symbol Building

Make sure you're in Object Drawing mode. This will speed up moving objects and making symbols.
Draw a black V shape with your brush. Select it and make it a symbol called "Bird."
Draw an off-white circle. Make it a symbol called "Moon."
Draw a gray rectangle the width of your canvas. I used the color #666666. Make it a symbol called "Road."
Draw a line. Make it yellow (#FFCC00) with the width of 7 and dashed (15 dash/35 spacing). Make it a symbol called "Dashes."
With Object drawing selected, create a rectangle. Change the properties so it's 1200px wide and 440px tall. We will fill it with a linear gradient (#0000FF to #000000). Make it a symbol called "Background."
Get each symbol on its own layer.
Rename layer to match Symbol. 5 symbols = 5 layers.
Save.

Step 2: Keyframing and Tweens

Go back to top Scene.
Add 120 frames to all layers.
Apply a motion tween to the Background symbol/layer. At frame 1, make sure the black edge is aligned to the left side of the canvas. At frame 120, make sure the blue edge is aligned to the right side of the canvas. This should make it appear as though -- over the 120 frames -- the scene is going from night to day.
Go back to the top Scene.
View the Dashes symbol. Hold that keyframe for 5 frames. Insert a 2nd keyframe at frame 5. With the Selection tool, move the dashes a little over. When viewing in the Onion Skin mode, the dash from the 2nd keyframe should fill the gap of the original. Hold this for 5 frames as well. Place them for the time being above the Road layer.
On the Bird layer, we want to apply a Motion tween. At frame 0, we want the bird to the left of the moon, and at frame 120, we want it to the right. Using our Selection tool, we can bend the path as we want. In the example, I move it into a curve so the bird flies up a little into the Moon.
View the Bird symbol. Using the black brush and Onion Skins, add a total of 3 wing states: Wing at the starts, Wing down, Wing Midway. Hold each position for 3 frames. The bird should look like it's flapping. Place it for the time being above the Moon layer.
Save.

Step 3: Masks & Placing/Animating the Car

Create a new layer called Moon Mask. It will be a Copy of the Moon layer/symbol. Move it above your Bird layer. We are going to limit the visibility of the bird to only the time it's in front of the moon. This is called a mask. If you have an object that you want seen but only in a certain area of the Scene, masks are great ways to do this.
Select the Moon. Copy it (Ctrl + C), select the Moon Mask layer and Paste In Place (Shift, Ctrl + V). This will have the Moon in the exact same place on both layers (Moon and Moon Mask). Make the Moon Mask layer a functioning mask. Right click on the layer Moon Mask and convert it to a Mask layer. When you watch your animation, you will now see the Bird only in the area of your moon. We're done with the Bird and the Moon.
Now on to the last part of this animation: the car. Create a new layer called Car. This will be where we create symbols, but also where we animate our completed Car. We need to File > Import the image we have for the car and tire linked below. Once the image is into Flash, we'll edit it and make it a functioning car.
Drag both the car and the tire onto the Stage.
Select the Car and F8 Create a symbol. Name it Car.
Select the Tire and create a symbol for it as well. Name it Tire.
Double-click the Tire symbol or access it through the Library window. We need rotating wheels. In the Tire symbol, create a new keyframe at frame 120. Apply a Classic tween in the timeline between those keyframes. On the Properties panel, adjust the tween to have a CCW 7 rotation. This will make the wheel look as though it's going forward when it's going backwards.
Double-click to access the Car symbol. Modify > Break Apart. Go back into the car symbol. Drag in two copies of our Tire symbol. This will confirm that anything happening to one tire is also happening to the other.
Save.

Step 4: Customize and Polish Overall Animation

Create a new layer called Text. Make sure you are on Frame 1. This will be where we place our text.
On the main toolbar, go to the Text tool (looks like “T”)
Drag a box in the upper center of your stage. This is where your text will go.
In the Properties Tab, choose a Family (font type), Size – make sure it is large enough to be read, and a Color that easily shows against your background.
There will be four lines of Text: 1) A title for your animation, 2) Your Name and 3) Today’s Date.
Insert a Key Frame at Frame 24 and another one at Frame 48.
On Frame 48 get your Selection Tool and then move your text OFF screen.
Right Click ANY frame Between Frames 24 and 48 and choose Classic Tween.
Test your animation. Your text should be stationary for one second and then move off screen by the end of the 2nd second.
Save your finished file.