Still in the edit mode for the flameAni movie clip, we can make our next transformation. This time the wind will blow our flame slightly to the right.

5. Add a Keyframe to Frame 8. For the flame_shape layer, without changing the shape of the flame rotate it slightly to the right. Repeat for the other two movie clips.

Now we will make the flame taller.

6. Add a Keyframe to Frame 14. On the flame_shape movie clip drag the top center handle of the Transform tool upward to make the flame taller. Repeat this for the other two movie clips.

Now we will add a little bounce to the flame. If you watch a real candle flame, it sometimes bounces just a little. We will make it bounce a few times and with each bounce the flame will move a little to the left until it is upright again.

7. Add a Keyframe to Frame 16. Increase the height of the flame just a little. Also rotate the flame just a little to the left. Repeat for the other two movie clips.

For the following list of Keyframes, first adjust the flame_shape movie clip and then the flame_glow and back_glow movie clips to match.

Add a Keyframe to Frame 18 and rotate it to the left a little more.
Add a Keyframe to Frame 20 and shorten the flame and rotate to left a little more.
Add a Keyframe to Frame 22 and lengthen the flame a little, rotate until the flame is upright.

Add a Keyframe to Frame 27 and shorten the flame. This time instead of rotating the movie clip we will skew the flame a little to the left. Place your mouse over the transformation box between two handles. You will see the mouse change to a horizontal double arrow. Drag to skew the flame a little to the left.

Add a Keyframe to Frame 29 and lengthen the flame a little.
Add a Keyframe to Frame 31 and shorten the flame and skew the flame back to the upright position.

Add a Keyframe to Frame 33 and lengthen the flame.
Add a Keyframe to Frame 35 and shorten the flame.
Add a Keyframe to Frame 37 and lengthen the flame. But this time do not lengthen the two glow movie clips as much so that the tip of the flame shape is higher than the glow.

Add a Keyframe to Frame 42 and shorten all three movie clips to the same height, skew a little to the right.

Add a Keyframe to Frame 47 and heighten the flame. This time make the flame movie clip a little higher than the two glow movie clips.

Add a Keyframe to Frame 49 and shorten the flame.

Add a Keyframe to Frame 51 and heighten the flame, skew a little to the left.

Add a Keyframe to Frame 56 and shorten the flame about half, skew to upright position.

That was a little laborious but the result is nice. If you didn't learn anything else from this tutorial, you will know that you need to add a Keyframe each time you make a change to a Motion Tween.

← Back

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.