Animation 101: How to Teach Students Adobe Flash

Teaching students basic animation skills in Adobe Flash can unleash creativity that extends well beyond the classroom.

The Adobe Creative Suite of graphic design, video editing and web development applications allows users to create multimedia content. As students master the basics of Adobe Flash, an animation and multimedia tool within the collection, they not only become producers of engaging content while completing their coursework, they also strengthen their technology credentials in preparation for college or the workforce.

For this lesson, students will hone their media production skills by creating an animated public park scene that transitions from day to night and identifies local flora, constellations and celestial bodies.

Begin by having students draw a sky-blue rectangle the size of the Adobe Flash stage. The rectangle should occupy its own timeline layer and have no stroke. All drawn objects have two parts: a fill and a stroke. The stroke is the outline. If students want clouds in the sky, they should place the clouds on a separate timeline layer. Objects in the same layer get animated as one object. If the clouds are animated to move across the stage, so, too, will the sky.

The second layer should be filled with the elements that are found in a park — the ground itself, trees, plants and benches, for example. Have students research the identities of the indigenous plants that would be found in their park and label their renditions accordingly using Flash’s text tool.

Next, help students animate their rectangles to transition from blue to black with a 120-frame “motion tween.” A motion tween is Flash’s way of creating animations without doing frame-by-frame drawings evidenced in traditional animations, such as animated flipbooks. Motion tweens allow the designer to have two points on an animation timeline to modify or transform an object while Flash makes all of the animation adjustments in between the points (giving the process its name).

Extend the park layer so its length matches that of the sky layer (the one with the blue rectangle). Then, challenge students to draw the sun on its own layer and animate it to set behind the park when they believe sunset would fall along the animation timeline. Similarly, have students add the moon to rise on its own layer when they believe it would rise as the sky transitions from dusk to night.

The scene also should include a twinkling star, which must be created using the software’s “Movie Clip” symbol. Movie clips are self-contained objects that can be animated and manipulated independently from a project’s main timeline. To do this, instruct students to click Insert Menu on the application toolbar, select “New Symbol” and then “Movie Clip Symbol Type.” On this independent timeline, have students draw a small yellow star and animate it to fade to “alpha transparency zero” for 10 frames. Alpha transparency refers to making the star transparent or invisible. On frame 10, make sure there is a keyframe (a point along the animation timeline inserted by the user to allow objects to be placed on the stage). Open the Properties Palette, select color effect, then Alpha, and move the slider to zero to achieve this effect.

Students should then return to the main timeline by clicking the clapperboard icon identified as “Scene One” and create a final layer. In this layer, students should add a keyframe at the moment when they think the first star would appear in the night sky. They should then open the “Library” icon and drag in an animated star. From there, they can add keyframes along the timeline and drag in more stars. They must be careful, however, not to add more than three stars in a single keyframe as they build the final layer. Otherwise, the stars will blink in synchronization; for this project, the stars should twinkle independently of one another.

Finally, challenge students to add authentic constellations and other celestial bodies that they’ve studied in their middle school and high school science classes.

Test the animation by running “Test Movie” from the software’s Control menu. To stop the animation from looping, so that viewers can enjoy nighttime stargazing, add a “stop action” command on the last keyframe of the main timeline. Do this by typing “stop();” in the Action Panel.

Once the animation work is completed, have students share their animations. Begin a class discussion in which students can ask the designer about specific approaches and techniques used in the development of his or her animation. This exercise also allows students to demonstrate their engineering and design processes.

Subject Area

This project was developed to teach science and technology skills to students in grades six through 12, but it could be adapted to a variety of subjects and grade levels.

Grading Rubric

Students’ work should be evaluated based on the following rubric. Grades are given according to the number of categories in which students achieve a “4” rating. Descriptions include examples of the content either missing or provided by students to achieve a particular rating in a particular category.

Category 1 2 3 4
Written Park Description Student doesn’t submit a written park description. Park description contains only location. The submission isn’t typed. The submission is typed, but there are inconsistencies between known local flora and that which is identified in the Flash animation. Student includes details such as the location of the park, year-round weather conditions and indigenous plant life, and labels them accordingly in the Flash. animation.
Park Elements The park is lacking a ground layer or separation between elements. Student includes a ground layer (such as grass) but no indigenous flora or benches. There are clear distinctions between the ground, the Flash stage and the park elements. At least one park element is present. The project includes several park elements, multiple flora types and depth of field.
Sky Transition The sky transition isn’t tweened correctly and jumps to black. The sky moves its location during the animation. The sky transitions smoothly to black. A separate cloud layer is lacking, however. The sky transitions smoothly to black. A separate cloud layer has been included.
Sunset A separate sun layer either is missing or isn’t animated. A separate sun layer is present, but the sun’s animation isn’t in sequence with the sky’s transition to night. The sun sets in front of the park elements. The sun sets behind the park elements; the timing is almost perfect. The sun sets behind the park elements; the timing is impeccable.
Moonrise A moon layer is missing or isn’t animated. A separate moon layer is present. The moon’s animation isn’t in sequence with the sky’s transition to night. The moon rises in front of the park elements. The moon rises behind the park elements; the timing is almost perfect. The moon rises behind the park elements; the timing is impeccable.
Extra Animated Elements The project contains no extra animated elements. The project has one extra animated element, such as a bird. The project contains two extra animated elements. The project contains three or more extra animated elements.
Animated Stars There’s no star layer. Stars aren’t animated. Too many stars are twinkling at the same time. There are too many animated stars in the same keyframe. There’s no depth of field. All the animated stars are the same size. Most stars aren’t twinkling at the same time. A depth of field, with stars of various sizes, is present.
Identified Celestial Bodies and Constellations There are no celestial bodies or attempts to create a constellation. A single celestial body is drawn, but not very well. There are no constellations. At least one well-drawn celestial body is present, but the included constellation is slightly off or inaccurate. At least one celestial body and a well-executed constellation are present.
Source Validation No source is identified. A source is identified, but no explanation is provided. The source used can’t be considered a reliable one. A single, reliable source is used and the material presented is accurate. Two or more sources are used. The sources are reliable and the material presented is accurate. Each source reinforces the veracity of material provided by other sources.
<p>Hemera/ThinkStockPhotos</p>
Nov 19 2013

Sponsors