Write an article based on this "Understand the basics of frame-by-frame animation. Install Flash Professional. Create your assets. Create your first frame. Turn your drawing into a symbol. Add some blank frames. Create your second keyframe. Repeat the process."
This is considered the "traditional" method of animation, in that each frame has the same picture but slightly altered. When the frames are played together, the images appear to move. This is the same basic technique used by traditional hand-animators, and is more time-consuming than tweening (See the next section). By default, Flash will produce animations at 24 frames per second (FPS). That means one second of animation will have 24 frames, but not every frame has to be different. You can adjust this if you'd like, and many Flash animations use 12 FPS, but 24 will produce much "smoother"-looking animation. There are a variety of Flash animation programs available, but the most powerful is Adobe's Flash Professional CC. You can install the trial for free, or you can use another product if subscribing to Adobe's Creative Cloud doesn't appeal to you. The rest of this article will refer to Flash Professional or any other editing program as "Flash". Because frame-by-frame animation requires multiple images with slight differences, you will need to create all of these assets by hand. You can create them all before you begin, or make them as you go. You can use the Flash program to draw directly in your project, or you can draw your assets in your favorite image creation program. If you want your images to scale without sacrificing quality, you will want to create them as vectors instead of rasters. Vector images will redraw themselves whenever they are scaled, which means there won't be any pixelation or aliasing. Raster images are the traditional images you're probably used to (photos, Paint images, etc.). These do not scale well, and can look quite ugly if you want to make them larger. When you first start Flash, you will have a blank layer and an empty Timeline. As you add frames, your timeline will be populated automatically. You can interact with layers much in the same way that you would in Photoshop. Before adding your image, create a basic background for your movie. Rename Layer 1 to "Background" and then lock the layer. Create a second layer and name it whatever you'd like. This will be the layer that you create your animation on. Add your drawing to the canvas in the first frame. You can either import your drawing from your computer, or you can use Flash's drawing tools to create a drawing directly in the program. Your first frame will be a keyframe. Keyframes are frames that have an image, and form the backbone of your animation. You will be creating a new keyframe each time the picture changes. Keyframes are denoted by a black dot in the timeline. You don't need a new image in each frame. In general having a keyframe every four-five frames will produce a good animation. By turning your drawing into a symbol, you can easily add it multiple times in a frame. This is especially useful if you need to quickly create multiple objects, such as a school of fish. Select your entire drawing. Right-click on the selection and select "Convert to Symbol". This will add the image to your Library where you can quickly access it in the future. Delete the drawing. Don't worry! You will be adding it back to the scene by simply dragging the object from your Library. You can add multiple instances of the same drawing to your scene with ease! Once you have your first frame ready, you can add your blank frames that will exist between the first keyframe and the second keyframe. Press F5 four or five times to add blank frames after your first keyframe. Once you've added a few blank frames, you're ready to create your second keyframe. There are essentially two different ways you can do this: you can copy your existing keyframe and make small adjustments, or you can create a blank keyframe and insert a new image. If you are using art created in another program, you'll want the second method. If you created your art using Flash's design tools, use the first method. To create a keyframe using the contents of the previous keyframe, press F6. To create a blank keyframe, right-click on the last frame in your timeline and select "Insert Blank Keyframe". Anything in your scene will be removed. Once you've created your second keyframe, you will need to make adjustments to the image to give the effect of motion. If you're using Flash's design tools, you can use the Transform tool to select aspects of your drawing and move them slightly, such as the arm of a stick-person. If you're inserting new art for each keyframe, you will want to ensure that it is placed in the same location or in the next logical location on the screen. This will ensure that the art doesn't jump around between frames. Now that you've created two keyframes, it's time to iterate. You will be repeating essentially the same process until you are finished with your animation. Add a few blank frames between each keyframe, and ensure that your movements look fluid. Make small, incremental changes. Your animation will look much smoother if you make very small changes to the keyframe. For example, if you want a stick person waving an arm, your second keyframe should not be the other end of the wave. Instead, use a few keyframes to transition from the beginning of the wave to the end. This will produce a much smoother animation.