Creating Cell Animation using Onion Skin in Flash CS5

Onion skinning is an animation technique that allows you to draw frame by frame animation. In traditional animation, very thin paper was used to see through to the graphic below. This paper was so thin it was called "onion skin" paper and it would allow you to accurately trace the object below it and make very subtle changes. Animation software, such as Flash, allows you to use this technique in a little different format.

Step One: Let's add some lightning to our little movie. In order to do this, we'll need to use Cell Animation. In this art form, you'll manually create the particular cells to illustrate lightning by tracing over a previous drawing. RECALL BOAT6.FLA and create New Layer(s) to do the following.  Begin by creating a New Symbol (CTRL-F8), named `Lightning` with Movie Clip Properties.

Step Two. OK, let's place Blank Keyframes on frames 1, 3, 5, 7, 9, 11, 13, and 15 by using the F7 key.

Step Three: Now, begin by selecting the pencil tool , and draw the beginning of a lighting bolt on the first keyframe. Then go onto frame 3.

Step Four: It's hard to remember what the first frame looked like (at least for me!!!), so let's use something that animators have used since Steamboat Willie sailed the river, Onion Skinning (also known as Celluloid or Disney Style Animation). To turn this on, click on the onion skinning setting at the bottom of your Timeline.

Notice how the area at the top of the timeline changes. The red timeline marker shows you which frame you are currently on, while the grayed area is the frames you will see "onion skinned". Try drawing here. If you cannot see the previous frames in onion skin mode, try temporarily switching your background to black so that the faded yellow from previous frames is more visible.

Step Five: Go ahead and draw in your lightning. As you progress through the frames 5, 7, 9, 11, 13 and 15 trace your lightning an add more or less spikes as you go on. At the end you should have an animation of a "flash" of lightning. Press Enter to see it playback.

Step Six: When done, click back to your movie editor by choosing Scene 1 in the upper left corner of the screen. NOTE: Make sure to turn OFF the onion skinning. Create two new layers and call them `lightning1` and `lightning2`.

Step Seven: Now add keyframes randomly along each of the layers timelines. We'll place our movie symbol (Lightning) on them by dragging them from the Library F11. It will play for a while, then disappear for a bit.

Step Eight: Test your movie, by pressing CTRL-Enter.  Save your file as:  BOAT7.fla

Back to home