Animation Basics / Onion Skinning
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.
Learn More
Subtitles of the Movie
Now that we've had a chance to create a couple of Frame-by-Frame animations together, this would be a good time to stop and focus in on a Tool that will be indispensable for you in your Flash animation work that's the Onion Skinning Tool. I introduced the Onion Skin Tool previously, but let's focus in on this very important Tool here in this movie. Onion Skinning lets you see a ghost image of the previous Frame or Keyframe so you can see where you want to place the artwork in relation to the preceding Keyframes or the following Keyframe. For example, I have a 4 Keyframe animation that I'm setting up. The beginning animation is over to the left, the ending animation is over to the right, and I want to create an arch, or an arc of this animation, so I've created two more Keyframes and I can position the location of these middle Keyframes by kind of guessing, clicking over here and guessing where that should be to create my arc. But a better method is to use the Onion Skinning Tool by clicking on the Onion Skin icon here at the base of the Timeline. After you click on this button, a gray bar with a dragable bracket on each end appears at the top of the Timeline. These are called Onion Skin Markers. You have two of them you have the Start Onion Skin Marker over to the left and the Finish or End Onion Skin Marker over to the right. Now, notice that I've stretched that all the way out across the Timeline and now I can see ghost images of the preceding and following Keyframes in my animation that I'm setting up here. Then I can, based on the position of the preceding and following Keyframe, I can better position the Keyframe of interest. Let's say that I want to move this over there like that, and because I can see the ghost images of the Keyframes before and after, it just makes it easier for me to position things more accurately. You can show more or fewer Frames or Keyframes by adjusting the length of the bracket represented by the gray bar. I could also move this by just clicking anywhere, actually, here in the Timeline. Once the Onion Skin Tool is enabled, clicking anywhere here will allow you to move both the Playhead and the Onion Skin bracket there. Clicking on the edge will allow you to adjust the length of that. Clicking anywhere on the Timeline will allow you to move the position. Now, if I go ahead and right-click or Control-click in between the two Keyframes and create a classic Tween, you can now see this Onion Skinning Tool to great effect. Notice that when I get to the Tween there, I can actually see each of the individual Frames that Flash has interpolated between the two Keyframes there you go, like so. If we go ahead and insert another classic Tween in between the two other sets of Keyframes and extend this out, you can see the full animation sequence there that Flash will create based, again, on the positions of these Keyframes. Notice that if I move one of the Keyframes, Flash adjusts it. So, this is just a great way of seeing the animation motion all at one time because, obviously, if I rewind this and play it, the animation will play out according to the positions of each of the Frames there. So, there you have a review of this very useful Tool, the Onion Skinning Tool. That will conclude this section of the tutorial covering animation basics in Flash CS4 in this section. You've gotten some information about the Timeline. Hopefully, you understand Frames and Keyframes you've had Frames and Keyframes defined, you've also set up some Frame-by-Frame animations, how to set the Frame rate, how to insert and remove Frames and all about the Onion Skinning Tool. Let's now move on to the next section of the movie and start creating shape Tweens, including demonstrations of how to Shape Tween simple shapes, Shape Tweening lines and fills, Shape Tweening text using shape hints and much, much more.
Tutorial Information
| Course: | Adobe Flash CS4 |
| Author: | James Gonzalez |
| SKU: | 33981 |
| ISBN: | 1-935320-37-8 |
| Release Date: | 2009-04-19 |
| Duration: | 11 hrs / 126 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 