Simple Flash Animation

Flash is a powerful graphics-oriented animation and programming environment. Flash has many uses, from simple movie animations to interactive games. This example contains no user interaction so it is not necessary to learn Flash’s programming language – ActionScript, but it will step you through creating a movie that runs for a specific period of time.

1. StartAll ProgramsAdobe Adobe Flash Professional CS6. To make a new movie, click on File New, and in the dialogue box, select “ActionScript 3.0” and click OK. 2. On the top of the flash interface that appears on the screen, you will see a classic Windows-style menu bar. Below the menu bar, is the stage, which looks like this:

The stage shows the frame of your movie that was selected along the timeline. This is your design workspace. Below this is the timeline which looks like this:

The timeline tells you which file is currently active, which layer is currently active, and at which frame in the movie you are. To the right of the window is a properties window. This is where you adjust the settings of the different objects you add to your movie. There is also a Library tab with all of the files. To the right of this window is a bar with various tools. 3. The first step in making your movie is to set up your workspace, which is unique to every movie. You should always name your file before you do anything. (FileSave AS …) If you know your canvas size, input that now by clicking the button in the properties panel.

Next, make the background color similar to the one on your destination. Digital signage monitors in the College of Engineering have a light yellow/brown background, so pick a light yellow by clicking on the Stage color palette below the size button.

Next, adjust your frame rate by clicking on the blue number to the right of FPS. 30 frames per second (fps) makes a nice, smooth movie. There is a trade off to adding more frames though; if you set a movie to 30 fps as opposed to 15, and they are both “x” seconds long, the 30 fps movie will have twice the frames as the 15 fps movie. In theory, this is not a problem, but while actually making the movie, there is a tendency to cut things too short. With this said, 30fps is ideal for viewing, 12 is on the low end and will look choppy, and higher than 30 can get unmanageable while making the movie. Now that the workspace is set up, we can start designing the first frame.

4. To add text, select the “T” icon from the vertical toolbar on the Right side of the window. Click once where you want the text to go, and start typing. You can adjust font, size, color, and other settings in the properties pane while the text (box) is selected. 5. Graphics can simply be added to the stage by dragging them in. If you have many graphics, see Flash help to use the image library. You can adjust an image’s proportions using the free transform tool, third from the top of the vertical toolbar.

To resize an image without losing proportions, grab a corner while holding down the shift key, resize, then let up on the mouse before letting up on the shift key 6. Now that you have an idea of how to design in the Flash window, the next step is to animate your objects. In order to keep things simple and not take away from the message trying to be conveyed, make animations simple. They need not do anything more than provide a smooth transition between ideas. There are many ways to animate in Flash. If you want to learn ActionScript, you can code your own animations, giving you the ultimate flexibility in design. For our purposes, motion tweening does a fine job, and is simple to learn and use. 7. To use motion tweening, you need to have the object, or group of objects that will be animated on their own unique layer. Right click the object(s), and select “distribute to layers”.

8. Once all the objects are on their own layers, you need to tell Flash how and when you want the object to begin and end. Flash will take care of getting it from beginning to end. The following example shows how to transform a large circle into a small circle.

9. Start off by drawing a large circle on its own layer. To do this, select the oval tool from the shapes menu, ninth from the top on the vertical tool bar on the

Right. Once the tool is selected, shift-drag to make a large circle. (dimensions of 252x252 would be ideal). Right-click the circle and select “distribute to layers” to put the circle in a new layer.

10. You just drew the first frame of the animation. Shapes, lines, and text in Flash need to be converted to symbols before they can be animated. When an object is converted to a symbol, we can create instances of it. This limits the amount of editing that can be done to the object to only simple procedures, like using the free transform tool. To convert an object to a symbol, either right-click the object and select “convert to symbol”, or tap the F8 key. Click OK when the dialogue box shows up. You now have a symbol that can be animated. 11. Depending on how long you want the animation to be, and the amount of fps you chose, click the frame on the timeline where you want the animation to end. Tap the F5 key. You will notice that all the frames up to and including the one you clicked turned gray. If you drag the playhead (the red bar over the timeline) over this gray area, you will not see anything change over the duration of those gray frames. Now that you have a static clip you will need to earmark the end as a keyframe. This lets Flash know that you either want to start or end an animation at that point. Click the last frame in the timeline and tap the F6 key. You will notice a black dot appear on that block. This means that the particular frame is a keyframe.

12. Now that the start and endpoint of the animation are defined, you need to make the end different from the beginning. Select the keyframe that you just made, (the one with the black dot) and transform the circle to a smaller one using the free

transform tool.

13. If you were to play the movie as it is now, the circle would be big, and jump to a small one all of a sudden. To make a smooth animation out of this, which takes up the entire area between the beginning and the keyframe, select any frame before the ending keyframe. In the top menu bar click on insert, then Classic Tween. The gray box should turn light purple, and you will see an arrow pointing right over the length of the box.

14. To test out the animation, bring the timeline back to the beginning and tap the Enter key. To get a Flash movie that can be played on digital signage in .swf format, select “test movie” under the control menu, or tap Ctrl+Enter. Not only will a finalized movie looping in its own screen, but a movie in .swf format will show up in the same directory of the original movie.

15. Between the free transform tool and motion tweening, you will be able to make many neat-looking animations in Flash. Be creative. If you need inspiration, there are many sites on the internet that show simple Flash animations. Below are some basic guidelines, but the rest is up to you.

Helpful Hints:

SAVE OFTEN!!! • The more frames per second (fps), the smoother the animations. 12 should be the minimum, although keep it in mind that it looks choppy. 30 frames per second are nice and smooth, just make sure your animations don’t go by too quickly. • Find out your canvas size before you start • Be aware of your background color. The white, default stage color in your Flash window will not show up on digital signage; it will typically be a light brown or yellow on the big screen, so set your background to a similar color before you start. • Make your text BIG. Digital signage is like a highway billboard for the hallways; be sure it is readable at least ten feet from the screen. • Use Simple fonts that can be bolded for clarity, but AVOID WRITING IN ALL CAPS; proper writing style applies here as well. • Use contrasting colors for text. If you have a busy background, and one color won’t show up over everything, consider outlining the text. • Stay close to primary colors that are calming to the eyes. Have you ever tried reading something in neon or fluorescent colors? • Rule of Thumb: If it takes 10 seconds to read a headline, it should stay up for close to 20 seconds. • A complete message should take no more than half a minute to convey. • Transitions look great, but people will not read moving text. Make sure it freezes long enough for a person to read it completely. • It is easy to get carried away with graphics and animations. Don’t make your movie too busy: its purpose is to grab attention, then deliver a message. • Be aware of the resolution whenever you incorporate graphics. Keep in mind how big the screens are. High definition is not forgiving of low-resolution, pixilated graphics. • .gif images have a transparent background, and look great when animated, just keep the background color in mind. SAVE OFTEN!!!