Flash is the main animation medium on the Internet and even in other formats such as television. Creating a simple Flash animation is actually quite easy to accomplish, as Flash provides many useful tools that simplify the entire process. If you have an idea for a Flash animation or cartoon, you can have a rough sketch ready in just a couple of hours. Read step 1 below to learn how to create an animation in Flash.
Steps
Part 1 of 3: Perform a Frame-by-Frame Animation in Flash
Step 1. Understand the basics of frame-by-frame animation
This is considered the "traditional" method of animation, in the sense that each frame has the same image, only slightly altered. When the frames are played together, the image appears to move. This is the same basic technique that animators use by hand and is more time consuming than motion tweening (see next section).
By default, Flash produces animations at 24 frames per second (FPS). This means that one second of animation has 24 frames, but not all frames have to be the same. You can adjust this if you want, and many Flash animations use 12 FPS, but 24 FPS will produce a much more "fluid" looking animation
Step 2. Install Flash Professional
There are a variety of Flash animation programs available, but the most powerful is Adobe's Flash Professional CC. You can install the trial version for free, or you can use another product if subscribing to the Adobe Creative Cloud doesn't appeal to you. The remainder of this article will refer to Flash Professional or any other authoring program as "Flash."
Step 3. Create your assets
Since frame-by-frame animation requires multiple images with slight differences, you will have to create all of these assets by hand. You can create them all before you start or make them as you go. You can use the Flash program to draw directly into your project, or you can draw the assets in your favorite imaging program.
If you want your images to be scaled without sacrificing quality, you should create them as vectors rather than raster images. Vector images will redraw themselves each time they are scaled, which means there will be no pixelation or overlap. Raster images are the traditional images that you are probably used to (photos, images in Paint, etc.). These cannot be scaled well and can look quite ugly if you want to enlarge them
Step 4. Create the first frame
When you start Flash for the first time, you will have a blank layer and an empty timeline. As you add frames, your timeline will automatically populate. You can interact with layers in much the same way as you would in Photoshop.
- Before adding the image, create a basic background for the movie. Rename Layer 1 to "Background" and then pin the layer. Create a second layer and name it whatever you want. This will be the layer on which you will create the animation.
- Add the drawing to the canvas in the first frame. You can either import the drawing from your computer or you can use Flash's drawing tools to create a drawing directly in the program.
- The first frame will be a "key frame". Keyframes are frames that have an image and form the backbone of the animation. You will create a new keyframe each time the image changes.
- Key frames are denoted by a black dot on the timeline.
- You don't need a new image in every frame. In general, having a keyframe every four to five frames will produce good animation.
Step 5. Turn the drawing into a "symbol."
By converting the drawing to a symbol, you can easily add it to a box multiple times. This is especially useful if you need to create multiple objects quickly, like a school of fish.
- Select the entire drawing. Right-click on the selection and choose "Convert to Symbol." This will add the image to your library, where you can quickly access it in the future.
- Delete the drawing. Do not worry! You will add it back to the scene simply by dragging the object from your library. You can easily add multiple instances of the same drawing to the scene.
Step 6. Add some blank boxes
Once you have the first frame ready, you can add the empty frames that will exist between the first and second key frames. Press F5 four or five times to add blank frames after the first key frame.
Step 7. Create the second keyframe
Once you have added a few blank frames, you are ready to create the second key frame. There are essentially two different ways to do this: you can copy the existing keyframe and make minor adjustments, or you can create a blank keyframe and insert a new image. If you are going to use an image created in another program, you must use the second method. If you created an image using Flash 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 the timeline and select "Enter blank keyframe." Anything in the scene will be removed.
- Once you've created the second keyframe, you need to make adjustments to the image to give it the effect of movement. If you are using Flash's design tools, you can use the transform tool to select aspects of the drawing and move them slightly, such as the arm of a stick figure.
- If you are entering a new image for each keyframe, you will want to make sure that it is placed in the same or the next logical location on the screen. This will ensure that the image does not jump between frames.
Step 8. Repeat the process
Now that you've created two keyframes, it's time to iterate. You'll essentially repeat the same process until you've finished the animation. Add a few blank squares between each key frame and make sure the movements look smooth.
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 figure to wave, your second keyframe should not be the other end of the wave. Instead, use a few keyframes to transition from the beginning of the salute to the end. This will produce a much smoother animation
Part 2 of 3: Perform a Point-to-Point Animation (Tweening)
Step 1. Understand the basics of motion tweening
Flash contains a function called interpolation, which essentially allows you to set start and end points for the object. Flash will then move and transform the object based on your settings between these two points, creating the illusion of an animation. You don't need to create images for each keyframe like you would frame-by-frame animation.
- Tweening is especially useful for creating "morphing" effects, where one object turns into another over the course of animation.
- Frame-by-frame animation and interpolation can be used together in the same movie.
- Only one object can be subject to motion tweening at a time. This means that if you want to animate multiple objects at once, they will all have to be on separate layers.
Step 2. Create the first object
Unlike frame-by-frame animation, you don't need to create multiple objects to animate using the interpolation function. Instead, you create an object and then change its properties during the interpolation process.
- Before adding the image, create a basic background for the movie. Rename Layer 1 to "Background" and then pin the layer. Create a second layer and name it whatever you want. This will be the layer on which you will create the animation.
- It is highly recommended that you use the design tools that are built into Flash or import the image from a vector drawing program. Vectors can be easily scaled without distortion, whereas traditional raster images cannot be scaled or transformed well.
Step 3. Convert the object to a symbol
In order to interpolate the object, you need to convert it to a symbol. This is the format for manipulating objects that Flash uses. If you try to interpolate an object that has not been converted to a symbol, you will be prompted to do so first.
Right click on the object and select "Convert to Symbol." The object will be added to your library, making it easy to clone objects
Step 4. Create the first motion tween
A motion tween moves the object from one location to another. Right-click on the symbol in the scene and select "Create Motion Tween." 24 frames will be added to the timeline, as this is the length of a default tween. Remember, by default, Flash will animate at 24 frames per second, which means that this motion tween will take a second to complete.
When you create the motion tween, you automatically move to the last frame of the tween
Step 5. Create the path
Once you've created the tween, you can move the object to the location where you want it to end. Flash will display the path line, which will be dotted to show the location of the object for each frame in the tween.
When you first create the path, it will be a straight line from the start point to the end point
Step 6. Lay out the background squares
If you played the animation at this point, the object would move along the path, but the background would disappear after one frame. To fix this, you have to extend the background across all the animation frames.
Select the background layer on the timeline. Click the last frame in the timeline, which should also be the frame where the motion tween ends. Press F5 to enter frames up to this point, which will keep the background on display throughout the interpolation
Step 7. Add keyframes
Adding keyframes to the path will allow you to transform the object during motion tween. You can only make changes to an object if it is in a keyframe. To add keyframes to the journey, first select the frame on the timeline that you want to make the keyframe. Then click and drag the object to the position you want it to be during that frame. The path will automatically adjust and a keyframe will be added to the timeline. Key frames are denoted by diamond icons on the timeline.
Step 8. Adjust the path of the interpolation
To change the object's path, you can click and drag each of the box position markers on the path to a new location. Avoid putting too many variations in the path or the object will move erratically (unless this is your goal!).
Step 9. Transform the object
Once you have the keyframes and path set, you can transform the object so that it changes as it moves through the motion tween path. You can change the shape, color, rotation, size and any other properties of the path.
- Select the box where you want the transformation to occur.
- Open the object's properties panel. You can press Ctrl + F3 if the panel is not currently visible.
- Change any value in the properties window to affect the object. For example, you can change the hue or color, add filters, or change the scale.
- You can also use the free transform tool to change the shape as you like.
Step 10. Put the finishing touches on the tween
Test motion tween by pressing Ctrl + ↵ Enter. Make sure the transforms look good and the animation is moving at the correct speed. If the animation is moving too fast, you can either reduce the number of frames per second in the scene or increase the interpolation period.
- By default, the number of frames per second is 24, so try reducing it to 12. To do this, click outside the scene and then change the frames per second in the properties panel. Changing them to 12 will double the length of the animation, but can make it more "erratic".
- To change the interpolation period, select the layer that contains the interpolation and use the adjustment bar. If you want the interpolation to be twice as long, extend it to 48 frames. Make sure to insert blank frames on the background layer so that the background doesn't disappear in the middle of the animation. To extend the background, select the layer, click the last frame of the animation in the timeline, and then press F5.
Part 3 of 3: Adding Sound and Music
Step 1. Record or search for sound effects and music
You can add sound effects to the actions that occur in the animation to help make it stand out and give it a bit of personality. Music makes animation more immersive and can turn a good animation into an amazing one. Flash supports a variety of file formats, including AAC, MP3, WAV, and AU. Choose the one that gives you the best quality for the smallest file size.
The MP3 format will usually give you perfectly acceptable sound quality by keeping the file size to a minimum. Avoid WAV files if possible, as these are often quite large
Step 2. Import the sound files to your library
Before you can add sounds to your project, you need to add them to the Flash library. This will allow you to quickly add them to the project later. Click "File," then "Import" and "Import to Library." Find the sound file on your computer. Make sure it has a memorable name so you can quickly find it later in the menu.
Step 3. Create a new layer for each sound file
This is not strictly necessary, as you can add sound to existing layers, but placing each file on its own layer will give you much more control over fades, when to start and stop, and makes it easier to move sounds.
Step 4. Create a keyframe where the sound will start
On the sound layer, select the animation frame where you want the sound to start. Press F7 to enter a blank keyframe. For example, if you want to include a music file that plays throughout the animation, select the first frame on the music file layer. If you are adding dialogue for a character, select the layer where the character begins to speak.
Step 5. Add the sound or music file
In the properties box, you will see a sound section. You may have to expand it to see the options. Click on the "Name" menu and select the file you want from your library.
Step 6. Configure the sound file
Once you've selected a file, you can configure how it will play. What you select will be based on what you need the sound to accomplish in the animation. You can change the effect, timing and repeat settings for each sound using the menu under the "Name" menu in the properties box.
- Effect: This allows you to add effects to the sound, such as fades or echo. You can select default settings from the drop-down menu or you can click the pencil icon next to the menu to create custom settings.
- Timing - This determines how the song plays in the animation. "Event" will play the song until it is finished. If the same sound is triggered again before the first one ends, the original will continue to play until it is finished. "Start" works like "Event", but stops if the sound is played again. "Stop" stops the sound in that frame. If you want to use this in conjunction with other sound properties, create a new keyframe where you want the sound to stop and use this option. "Continuous Download" will try to match the sound being played with the number of frames in other layers. This is best used for dialogue.
- Repeat: This setting allows you to set how long the sound repeats. You can set it to repeat only once or in a loop as many times as you want. If the animation is a looping animation, you must set the music to play in an infinite loop.
Step 7. Finish the project
When you have finally finished the project, save it as a SWF file. This is the format used to play the movie. You can play it in practically any Internet browser or use a dedicated Flash player to view it. There are also a variety of websites that you can upload it to for others to see, such as Newgrounds, Albino Blacksheep, and Kongregate.
Step 8. Take your future projects further
This guide covers the basics of creating an animation, but there is much more you can do and learn. Add a few buttons and branches and you have a set to choose your own adventure. You can take a crash course in ActionScript and gain much more control over the finer details of your animation. Keep experimenting and soon you will find yourself learning all kinds of tricks and implementations.