Unit 14 - Year 1 Lessons

Overview

Students will animate bouncing movement first in Pixilart and then in Wick Editor, focusing on timing, squash and stretch, and repeated motion.

Target skills:

• Animation Planning
• Frame Sequencing
• Creative Problem Solving

Tools:

• Pixilart
• Wick Editor
• Google Drive

Outputs:

• Pixilart bounce animation
• Wick Editor bounce animation

Week 1 - Ball Bouncing Across

Lesson 1 - Animate a Ball Crossing

Goal: Open pixil art.

Teacher prep:

• Prepare access to Pixilart, Wick Editor, Google Drive and any sample files needed for demonstration.

Steps:

1. 32x3 canvas
2. Pixil art
3. Open pixil art
4. NEW 100x32 canvas
   
   
5. Turn LOCK FRAMES PANEL on
   
6. Use the circle tool with FILL on
   
   
7. Draw a ball to the left side can move the ball if its out of place with
   
   
8. Copy Frame
   
9. Move the ball half away down
   
10. Copy frame and move the ball down to the ground
    
    
11. Copy frame and move the ball up slightly,
    
    
12. Copy frame and move the ball up again but no more higher than when we start from.
    
    
13. Repeat this step until maybe the 3rd or so bounce afterwards the ball is going to bounce a tiny amount.
14. Refer to the image example for this step.
    

Check for understanding:

• Students complete the core workflow for the lesson.
• Students can explain at least one design choice or animation decision.

Extension: Try the same workflow again with a new idea, subject, or visual style.

Lesson 2 - Repeat With a New Bounce

Goal: New students should start from the above activity.

Teacher prep:

• Prepare access to Pixilart, Wick Editor, Google Drive and any sample files needed for demonstration.

Steps:

1. New students should start from the above activity.
2. Or
3. Make a new pixil art with a ball just bouncing and a box going past.
4. Using use the circle tool with FILL on
   
   
5. Draw a ball Move the ball down
   
   
6. Add frame
   
7. Draw the ball again but this time slightly squished.
   
8. Repeat one more time, Add Frame, Draw ball more squished
   
9. Add frame, draw the ball squashed going up
   
10. This time And move the ball up
    
    
    
11. Add Frame and draw the ball above the previous a little squashed.
    
    
12. Add Fame and draw a ball bit higher and round.
    
13. Copy Frame this time and move the ball up slightly
    
    
14. Copy frame and move the ball down slightly
    
15. Add a frame and draw the ball squashed going down.
    
    
16. Copy frame and move the ball down a bit and finishe ! IF the ball is wobbling when previewed, click on the FRAMES individually and use to move the ball around to make it centered.
    
    
    
17. Go back to frame 1
    
18. Go to stamps and search BOX and enter.
    
    
19. And move the box to the right side
    
20. Next frame, number 2
    
21. Repeat, go back to stamps and click on the box one more time. (stamps should already be on the Box search) And move the box about halfway more then the previous box
    
22. Repeat these steps for ALL frames, go to the next frame , stamp , move the box into place halfway more than previous. == If the box is too close before reaching the ball just undo a few times and repeat steps but make the box move less than halfway of the previous box.
    
23. Save to google drive. X5 should be fine
    
24. Save to GOOGLE DRIVE > STUDENTS> STUDENTS FILE> bounce.gif

Check for understanding:

• Students complete the core workflow for the lesson.
• Students can explain at least one design choice or animation decision.

Extension: Try the same workflow again with a new idea, subject, or visual style.

Week 2 - Ball Bounce in Wick Editor

Lesson 1 - Bounce a Ball in Wick Editor

Goal: Using wickeditor.

Teacher prep:

• Teacher save also for students that may need to next lesson

Steps:

1. Https://www.wickeditor.com/editor/
2. Using wickeditor
3. Open wickeditor
4. Use circle tool, changing colors also and draw
   
5. Use this move tool to move the ball down to the “ground”.
   
6. Click the green box and change the length top-right, too 20
   
7. Click on the tween button Move the red indicator to number 3 Click the ball and squish the ball using the blue circle indicators around the ball from the top pull down to squish the ball and move it back down to the ground.
   
   
   
8. Move the RED indicator to 6 Move the ball up Adjust the balls size back to round and then squish the ball from the left or right side.
   
9. Move the RED indicator to 10 Move the ball up Readjust the ball back to round
   
10. Move the RED indicator to 14 Move the ball up
    
11. Move RED indicator to 17 Move ball down Squish the ball
    
12. Move RED indicator to 20 Move ball down and adjust ball back to normal Than squish the ball flat Finished first part Save if no time
    
13. On the right side
    
14. Save into student files. Naming is not important but can name it ball.wick
15. Teacher save also for students that may need to next lesson
16. If time allows
17. Go to Layer 2
    
18. Click the square tool > change colors > draw a box on the right side
    
19. Select move tool > Click the green box in layer 2 > change length to 20
    
20. Add tween move red indicator to 20 Click box and move to other side
    
21. Finished
22. Save a gif
23. Refer to the image example for this step.
    
24. Export GIF
    
25. Go to students files and save. In GOOGLE DRIVE

Check for understanding:

• Students complete the core workflow for the lesson.
• Students can explain at least one design choice or animation decision.

Extension: Create a second variation or extend the project with extra details if time allows.

Lesson 2 - Continue and Repeat

Goal: Continue or repeat the previous lesson.

Teacher prep:

• Prepare access to Pixilart, Wick Editor, Google Drive and any sample files needed for demonstration.

Steps:

1. Continue or repeat the previous lesson.

Check for understanding:

• Students complete the core workflow for the lesson.
• Students can explain at least one design choice or animation decision.

Extension: Try the same workflow again with a new idea, subject, or visual style.