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
Featured Flash Professional Training Courses

For more Flash Professional training, I recommend these excellent online training courses listed below. Click on the links to find out more information about each course. Each course details page has free videos that you can view immediately. Just click on the free video links (the blue ones) under the table of contents. And as a special promotion, you can get full access to all of the videos in all of these courses by signing up for a free 10-day trial. This trial pass will give you full access to all of the courses from

No comments:

Post a Comment