2.2 Draw a sprite

Students use a loop to create animation! Students create costumes, then write a script to loop through costumes at a rate of 10 frames per second.

OBJECTIVES:



OBJECTIVES: By the end of this lesson, students will:

    • observe that animation is:

    • a series of frames, shown in succession.

    • recognize the flow of control in "repeat" loop.

    • initialize, by starting animation on first costume.

TEACHER RESOURCES:

Standards

    • CSTA 2-AP-12: Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.

    • CSTA 2-AP-13: Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.

CSTA

DO NOW:

Women in Computing (5 minutes)

Watch Meghan from Tinker Crate (2.13)

    • How does animation work?

    • How do loops make animation longer?


Teacher Guidance

  • Animation is a sequence of still frames shown one after the other. Our brains are tricked into thinking the images are moving.

  • An animation track can be looped to make it seem longer. Sound tracks can also be looped.

Mini-Lesson (5-10 minutes)

What is Animation?

Animation is a visual illusion of movement. Our brain is tricked into seeing movement, when shown a series of still pictures (Frames). Show flip books. (Source: Fliptomania )

Every picture in a flipbook is a still frame. When you flip the pages quickly, it looks like it is moving! This is an illusion. Our brain blends fast moving images together, so that we think they are one continuous movement. This is know as the "Persistence of Vision". Every movie you see, every TV show you watch, every youtube video you view, every flipbook you flip, is a series of still frames.

A sprite costume in scratch is similar to a page in a flip book or a still image in a movie. Rotating through costumes is similar to rotating through still frames in a movie or cartoon. If you choose an appropriate frame rate to move through the images, you will see movement!

Frame Rate is the frequency at which frames in a television picture, film, or video sequence are displayed.

    • Movies have a frame rate of 24 frames per second. i.e. 24 frames are displayed in one second.

    • Traditional hand-drawn and stop motion animation has a frame rate of 12 frames per second.

25 frames (costumes) per second

10 frames (costumes) per second

5 frames (costumes) per second

Wait between each costume is:

1 second / 25 frames = 0.04

Example1

Wait between each costume is:

1 second / 10 frames = 0.1

Example2

Wait between each costume is:

1 second / 5 frames = 0.2

Example3

A frame rate of 25 frames per second is smooth and detailed. However, it takes a long time to create 25 frames for just one second of animation!

A frame rate 5 frames per second works but the animation is choppy.

A frame rate of 10 frames per second works well for character sprite animations in scratch.

There is always a trade off or compromise between efficiency ( cost of production) and quality of final work. The happy medium is " good enough", in this case 10 frames per second.

Project (20-30 minutes)

Today's Lesson (20-30 minutes)

Today students will make an animation using sprite costumes. Students will use a frame rate of 10 frames per second.

They will make a costume, duplicate it to make a second costume and change it slightly. Students will repeat this process until they have 5 costumes!

Using some variation of the script below, students will loop through sprites costumes, using a frame-rate that works for their animation. video tutorial showing you how.

Show students the code segment, they will still need to work out how many times to loop and how long to wait to produce their perfect animation.

Steps:

    1. Create new sprite with the paint sprite icon.

    2. Create a costume using art tool.

    3. Duplicate costume and change it ever so slightly. ( we are tricking our eyes into seeing movement).

    4. Repeat until all costumes needed are created

    5. Add code.

    6. Debug

      • Start at first costume (Places Please! Initialization)

      • Repeat by (number of costumes -1), so that animation ends on last costume.

TEACHER GUIDANCE:

    • Common error: Students mistakenly create new backdrops rather than sprites. The motion commands are not available with backdrops. (The backdrop can be animated, but you can not add code to make it move across the screen).

    • Students should take their time. It is easy to get finished in 5 minutes, but make students go back and finesse their art and animation and explore different frame rates and different number of loops. These same students then really get into this project.

    • Main points to stress are

      • use a frame rate of 10 frames per second, -wait (0.1 seconds) .

      • Start on the first costume and loop by number of costumes minus one, (since the initial costume, is outside of the repeat loop).

  • Extra reference video on frameRate (11 minutes).

Close-Out (5 minutes)

Discuss the following questions:

  1. Did I make sure my animation started on the first costume? (This is called Initialization).

  2. I want the animation to stop at the last costume.
    If I loop by (number of costumes -1) this will happen. Explain why?

  3. I'd like to animate the backgrounds. Is there a command like "Next Costume" for backgrounds? (Hint, check under Look Commands).

Potential Responses

  1. When GreenFlag pressed, switch to first costume.

  2. The first costume is the initialization costume which is outside the loop. In first loop costume will update to costume two. Loop number will always be one less than number of costumes. Therefore to end at the last costume, loop by the number of costumes minus one.

  3. Switch backdrop to <backdrop>, Command.