Flash is the primary medium for animation on the internet and even in other formats such as television. Creating a simple Flash animation is pretty easy, because Flash offers many useful tools that help in the process. If you have an idea for a Flash animation or cartoon, you can probably make a first draft in a few hours. Start with Step 1 below to learn how.
Steps
Part 1 of 3: Creating a Frame-By-Frame Flash Animation
Step 1. Understand the basics of frame-by-frame animation
This is considered the "traditional" method of animation, and each frame contains the same image, only slightly altered. When the frames are played back in series, the images appear to move. This is the same basic technique used by hand artists, and takes more time than tweening (see next section).
By default, Flash produces animations at 24 frames per second (fps). This means that one second of animation will contain 24 frames, but not every frame has to be different. You can choose the setting you prefer, and many Flash animations are done at 12 FPS, but with 24 you'll get smoother looking animations
Step 2. Install Flash Professional
There are many 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 joining Adobe's Creative Cloud isn't your thing. The remainder of this article will refer to Flash Professional or any other editing program such as "Flash".
Step 3. Create your assets
Since frame-by-frame animation requires multiple images with slight differences, you'll need to create all of these assets by hand. You can create them all before you start, or design them during production. You can use the Flash program to draw directly on the project or you can draw the assets with your favorite image creation program.
If you want your images to scale without sacrificing quality, you will need to create them as vectors and not raster. Vector images will be redrawn once scaled, and will not result in pixellation or aliasing. Raster images are the traditional images you are probably used to (photos, Paint images, etc.). They don't scale well and can get ugly if you make them bigger
Step 4. Create your first frame
When you open Flash, you will see an empty layer and Timeline. When you add frames, the timeline will be populated automatically. You will be able to interact with the layers as you would in Photoshop.
- Before adding your images, create a basic background for your movie. Rename Layer 1 as "Background" and then lock it. Create a second layer and name it whatever you like. This will be the layer in which to create the animations.
- Add the designs to the canvas in the first frame. You can import drawings 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 create a new keyframe every time the image changes.
- Keyframes are indicated by a black dot on the timeline.
- You won't need a new image in every frame. In general, you will be able to create a good animation with a keyframe every four to five pages.
Step 5. Turn the drawing into a "symbol"
By doing this, you can easily add it multiple times in a frame. This is especially useful if you need to quickly craft a lot of objects, such as a school of fish.
- Select the entire design. Right click on the selection and click "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 can re-add by dragging the object from the Library. You can add the same design to the scene multiple times with ease.
Step 6. Add blank frames
When you have the first frame ready, you can add blank frames between the first keyframe and the second. Press F5 four or five times to add blank frames after the first keyframe.
Step 7. Create the second keyframe
Once you've added a few blank frames, you're ready to create the second keyframe. Essentially there are two different ways to do this: you can copy the existing keyframe and make small changes, or you can create an empty keyframe and insert a new image. If you are using graphics created in another program, you will need to use the second method. If you created graphics using Flash's drawing tools, use the first method.
- To create a keyframe using the contents of the previous keyframe, press F6. To create an empty keyframe, right click on the last frame of the timeline and select "Insert Blank Keyframe". All drawings will be removed from the scene.
- Once you have created the second keyframe, you will need to make some changes to the image to give the effect of movement. If you are using the Flash drawing tools, you can use the Transform tool to select elements of the drawing and move them slightly, such as a stick man's arm.
- If you are inserting a new outer design for each keyframe, make sure you position them correctly on the screen. This way you can be sure that the graphics won't jump between frames.
Step 8. Repeat the process
Now that you've created two keyframes, it's time to iterate. You will have to repeat the same process until you have completed the animation. Add some blank frames between each keyframe, and make sure the movements are smooth.
Make small incremental changes. Your animation will look smoother if you make very small changes to the keyframes. For example, if you want to wave a stick man, your second keyframe shouldn't be the end of the greeting. Instead, use some keyframes to jump from the beginning of the greeting to the end. The animation will be much smoother
Part 2 of 3: Creating a Tweening Animation
Step 1. Understand the basics of "tweening"
Flash contains a feature called tweening, which basically allows you to set starting and ending points for your objects. Flash will move and transform the object based on the settings between these two points, creating the illusion of animation. You won't have to create images for each keyframe like you would with frame-by-frame animations.
- Tweening is particularly useful for creating "morphing" effects, where one object becomes another during the course of the animation.
- You can use frame-by-frame animation and tweening in the same movie.
- You can only move one object at a time. This means that if you want to animate multiple objects at a time, they must all be on separate layers.
Step 2. Create your first object
Unlike frame-by-frame animation, you don't have to create multiple objects to create an animation with the tween function. Instead, you will need to create an object, and then change its properties during the operation.
- Before adding your image, create a basic background for your movie. Rename Layer 1 to "Background" and then lock it. Create a second layer and name it whatever you like. This will be the layer where you will create the animation.
- It is strongly recommended that you use Flash's built-in drawing tools or import images from a vector graphics program. Vectors can be easily scaled without distortion, while traditional raster images will not be scaled and transformed well.
Step 3. Convert your objects to symbols
In order to tween your objects, you will need to convert them to symbols. This is the format that Flash uses to be able to manipulate objects. If you try to tween an object that has not been turned into 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 the Library, which will allow you to easily clone the objects
Step 4. Create your first animated tween
An animated tween moves the object from one position to another. Right click on the symbol in the scene and select "Create animated tween". 24 frames will be added to the timeline, which is the default length of a tween. Remember, by default Flash will animate at 24 frames per second, which means that the tween will be one second long.
When you create an animated tween, you will jump directly to the last frame of the tween
Step 5. Create the trajectory
Once the tween is created, you can move the object to the position where you want the movement to end. Flash will display the trajectory line, which will be dashed to show the position of the object for each frame in the tween.
When you create the trajectory, it will be a straight line from the starting point to the end point
Step 6. Extend the background frames
If you play your animation now, the object will move along the path, but the background will disappear after one frame. To fix this, you will need to stretch the background across all frames of the animation.
Choose the background layer in the timeline. Click on the last frame of the timeline, which should also be the last frame of the animated tween. Press F5 to insert frames up to this point, and display the background for the duration of the tween
Step 7. Add the keyframes
By adding keyframes to the trajectory you can transform the object during the animated tween. You will only be able to make these changes if an object is in keyframe. To add keyframes to the trajectory, first select the frame in the timeline that you want to turn into a keyframe. Then, click and drag the object to the desired position in the course of the frame. The trajectory will be adjusted automatically, and a keyframe will be added to the timeline. Keyframes are indicated by diamond icons in the timeline.
Step 8. Adjust the trajectory of the tweens
To change the path of the object, you can click and drag each frame position marker on the path to a new position. Avoid making too many changes to the path, or the object will move inconsistently (unless that's your goal!).
Step 9. Transform your object
Once the keyframes and trajectory are established, you can transform your object, so that it changes as it moves along the trajectory of the animated tween. You can change the shape, color, rotation, size and all other properties of the object.
- Choose the frame in which you want the transformation to take place.
- Open the Properties panel of the object. You can press Ctrl + F3 if the panel is not currently visible.
- Edit the values in the Properties window to change 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 freely change the shape of the object as you like.
Step 10. Give your tween the finishing touches
Test the animation by pressing Ctrl + ↵ Enter. Make sure the transformation looks right and the animation is moving at the correct speed. If the animation is moving too fast, you can reduce the FPS of the scene or increase the tween duration.
- By default, the FPS is 24, so try reducing it to 12. To do this, click outside the scene and then change the FPS in the Properties panel. Changing the setting to 12 will double the duration of the animation, but you can achieve a "jerky" effect.
- To change the duration of the tween, select the layer that contains the tween and use the selector. If you want to double its duration, extend it to 48 frames. Make sure you insert empty frames into the background layer so that the background doesn't disappear midway through the animation. To extend the background, select the layer, click on the last frame of the animation in the timeline, and then press F5.
Part 3 of 3: Adding Sounds and Music
Step 1. Record or find sound effects and music
You can add sound effects to animation actions to make them stand out and give them personality. Music allows you to create a more immersive animation and then turn a beautiful cartoon into an amazing one. Flash supports files of many different formats, including AAC, MP3, WAV, and AU. Choose the one that gives you the best quality and smallest file size.
MP3s will typically give you perfectly acceptable sound with minimal file sizes. Avoid WAV files if possible, which are very large
Step 2. Import the sounds into the Library
Before you can add sounds to your project, you'll need to add them to the Flash Library. This will allow you to easily add them to the project later. Click File → Import → Import to Library. Browse folders on your computer for files. Make sure the files have an easy-to-remember name so you can easily find them in the menu later.
Step 3. Create a new layer for each sound
This is not strictly necessary, as you can add sounds to existing layers, but placing each file in its own layer will give you much more control over fades, start and stop times, and moving sounds.
Step 4. Create a keyframe at the starting point of the sound
In the sound layer, select the animation frame in which you want to play the audio. Press F7 to insert a blank keyframe. For example, if you want to include a music file that plays for the entire duration of the animation, select the first frame of that file's layer. If you are adding dialogue for a character, select the frame in which the character starts speaking.
Step 5. Add the sound or music file
In the Properties pane, you will see the Sounds section. You may have to expand it to see that entry. Click on the "Name" menu and select the file you want from the Library.
Step 6. Configure the audio file
Once you have chosen a file, you can configure its playback. You will have to make your choices based on the use of sound in animation. You will be able to change the Effects, Sync and Repeat settings for each sound using the menu under Name in the Properties pane.
- Effects - this menu allows you to add effects to the sound, such as fades or echoes. You can choose from preset configurations from the drop-down menu, or you can click the pencil icon next to the menu to create your own custom settings.
- Synchronization - this menu determines how the audio is played in the animation. "Event" will play the sound until finished. If the same sound is inserted again before the audio ends, the sections will overlap. "Start" acts as an Event, but stops the audio if the sound is played a second time. "Stop" stops the sound in that frame. If you want to use this function in combination with other sound properties, create a new keyframe to stop the sound and use this option. "Stream" will try to match the playing sound with the number of frames in that layer. It is more suitable for dialogue.
- Repeat - this setting allows you to decide how many times the sound repeats. You can play it once, or leave it on a loop as many times as you like. If your animation is a loop, you should set the music to an infinite loop.
Step 7. Finish your project
When you're done with your project, save it as a SWF file. This is the format used to play the movie. You can play it in almost any browser, or use a dedicated Flash player to watch it. There are also many sites that you can upload it to for other people to see, such as Newgrounds, Albino Blacksheep, and Kongregate.
Step 8. Create more advanced projects in the future
This guide covers the basics of creating an animation, but there are tons of other things you can learn and do. Add some buttons and paths to multiple trajectories, and you've created a game. You can take a quick course in ActionScript and learn how to have much more control over the smallest details in animation. Keep experimenting, and you will soon find that you learn all kinds of tricks and implementations.
