Wednesday, July 20, 2011

Creating a Frame by Frame Animation | Flash CS5 Video Tutorials for Beginners

In this Flash CS5 video tutorial for beginners, you'll learn how to create a simple frame by frame animation.

Topics covered in this short video:

  • Inserting blank keyframes
  • Onion skin
  • Copying, pasting and reversing frames
  • Previewing your Flash movie

Thanks for watching. If you liked the video, please share it with your friends.

Video transcript:

0:06 an animation
0:07 is really made up of a series of images
0:10 these images
0:11 referred to as frames
0:13 are then played in rapid succession, creating the illusion of movement
0:18 let's go ahead and learn how to create one in flash
0:22 i've got a new flash document open
0:24 and let's first take a look at the timeline
0:28 here, you see a blank keyframe represented by this empty circle inside a box
0:34 in flash
0:35 you'll need a keyframe
0:37 to be able to draw on the stage
0:39 whenever you start a new flash document
0:41 you'll always have one blank frame by default
0:45 now let's go ahead and draw a stickman
0:47 on the stage
0:49 select the brush tool
0:51 choose your desired color, size, and shape, and draw your stick man
0:59 once you've drawn your stickman
1:00 let's add another blank keyframe right after the first one
1:05 right click on the next empty box
1:07 and choose insert blank keyframe
1:10 you'll see the stickman disappear
1:12 that's because we are now on the second frame of our animation
1:16 the stickman that we just made is on the first frame
1:19 so now we start drawing the second frame of our animation
1:25 before we continue
1:26 let's activate the onion skin feature
1:28 by clicking on this button right here
1:31 after you click on the button
1:33 you're going to see a lighter version of
1:35 the stickman that you just drew appear on the stage
1:39 the onion skin feature
1:40 allows you to see what's the inside the other frames
1:43 so that you can use it as a guide
1:45 when you draw the rest of your animation
1:48 so the stickman that you see here
1:50 is not actually on the second frame
1:52 so what we want to do here is
1:54 draw over the stickman
1:56 but make some small changes in order to make our character
2:00 appear as if it's moving
2:02 for this one, i'm simply going to raise one arm slightly higher to begin the
2:06 waving action
2:08 and then we simply repeat the same process of adding a blank keyframe and
2:12 changing the position of the stickman's arm to complete the animation
2:16 so now i've got six keyframes
2:19 but my animation isn't complete yet
2:22 i've only finished half of the needed frames
2:25 what i have here so far
2:27 is the stickman
2:28 moving his arm up
2:30 to complete the waving action i now need to draw the frames that show
2:34 the stickman moving his arm down
2:37 basically what i need to draw
2:40 are the same frames i already have
2:42 except that i need to draw them in reverse
2:46 but instead of drawing the rest of the frames manually
2:49 i'm going to show you a neat little trick
2:52 that will help us finish the animation faster
2:56 i'm first going to select all of the existing frames
2:59 i'm going to click on the first one
3:02 then i'll hold down the shift key on my keyboard
3:05 and i'll click on the last one
3:07 in order to select the entire range
3:10 now that i have all these frames selected
3:13 i'm going to right click on the selection
3:16 and choose
3:17 copy frames
3:20 once the frames are copied
3:22 i'm going to right click on the next available empty box
3:26 and i'll choose
3:27 paste frames
3:29 and now that these new frames have been added
3:32 i'm going to need to reverse them
3:34 so that the arm will
3:35 move in the opposite direction
3:38 make sure that the new frames are selected
3:41 then right click on the selection and choose reverse frames
3:47 and now
3:48 the animation is complete
3:50 if we scrub through the timeline by clicking and dragging the playhead
3:54 we'll see that the arm moves up until frame six
3:58 and then moves down
3:59 as we go through
4:01 the next frames
4:03 in order to preview the animation
4:05 choose control test movie
4:08 in flash professional
4:10 or you can also press command + return on a mac or control + enter on a pc
4:16 and there's the animation
4:18 you'll notice that the animation keeps running even though we only have twelve frames
4:23 that's because by default
4:25 a flash animation is going to keep looping until you close the movie

No comments:

Post a Comment