In Flash, you can only see objects that are on the stage in a particular frame where you place the playback head. If you have objects that are extended throughout several frames this may be ok. But if you have objects that only occupy one or a few frames and then change with keyframes, you can't see all the objects and their changes over the space of time. Onion skins enable you to view a range of frames in order for you to arrange the objects on the stage in relationship to one another. They are very useful in frame-by-frame animation.
Enabling Onion Skins
Let's practice. Follow along.
1. Create a new Flash movie 300 x 100 with white background and name it onion-skin.fla.
2. Open the library for this movie by pressing Control + L. Download this movie_clips.fla movie.
3. Drag an instance of the Fish Movie Clip to your current movie's library for onion-skin.fla. Save your movie.
Drag the symbol from of the Fish Movie Clip to your current library.
The result of dragging from one library to another library shows that the supporting graphic files are included with movie clip.
4. The fish movie clip in your current onion-skin.fla library includes all the supporting graphic files used to create the fish. See the third library on the right of above illustrations.
5. Close the common library. Double click on the Fish Animated Graphic in your library to open the animated graphic symbol in symbol editing mode. This animation is 96 frames long and is used to create the Fish Movie Clip. Set your screen so you can view frames 1 through 45 of the timeline for the Fish Animated Graphic Symbol. Click the onion-skin button on the bottom of the timeline. It's the first button to the right of the center playback head button which is to the right of the trash can for the layers.
6. When you turn on onion-skinning, the top row of your frames with the frame numbers will display the Onion Skin Marker as illustrated below.
7. Drag the right edge of the Onion Skin Marker to span 30 frames.
Your screen now displays all 4 positions of the 4 keyframes in frame 1, frame 25, frame 27 and frame 30. This enables you to go back into each of the keyframes and tweak the position, location and appearance of the fish in order to create a smooth animation between each frame.
The Onion Skin Marker is a translucent rounded rectangle which displays over the frames row to indicate a selected range of frames. You can adjust each end of the marker or move the entire marker to a different range of frames by dragging the playback head to a different frame. You can also adjust the markers from the Modify Onion Markers drop-down menu located three buttons to the right of the Onion Skin Marker button.
Onion Skin Buttons
Onion Skin Marker Button:
Click and view a dimmed representation of the animation path. This button only allows you to view the path, not modify it. You can only modify objects within the frame where the playback head is positioned with onion-skin marker button on. The marker will follow the path of the playback head position unless you anchor the onion-skins with the Anchor Onion option below.
Onion Skin Outlines Button:
Same as above marker button displaying only the outline of the shapes on each of frames within the marker's range.
Edit Multiple Frames Button:
You can modify all objects in all keyframes within the marker's range even if the playback head is not in the frame you want to modify. The objects are not dimmed as they are in the Onion Skin Modes above. You can select objects on several frames within the span of the marker.
Modify Onion Markers Button:
You can select from options on the drop-down menu:
Always Show Markers - displays the marker end pieces with no translucent center. The markers are displayed even when the Onion Skin Button is turned off. Anchor Onion - anchors or locks the onion-skins to the current position to prevent the marker following the playback head position. Onion 2 - displays 2 frames before and 2 frames after the selected frame. Onion 5 - displays 5 frames before and 5 frames after the selected frame. Onion All - displays all frames before and after the selected frame.
If you have locked any layers, onion-skins will not display for those locked layers.
Onion skinning is very useful in frame-by-frame animation which is a more old-fashioned way of modifying the artwork on each frame with a timeline of keyframe after keyframe after keyframe. This form of animation often produces jerky motion in contrast to the smooth animation resulting from tweening.
Please continue to the next section of this lesson.
