Unit 14 - Year 2 Lessons

Overview

Students will build simple parallax scenes in pixel art and then recreate layered movement in Wick Editor.

Target skills:

• Animation Planning
• Frame Sequencing
• Creative Problem Solving

Tools:

• Pixilart
• Wick Editor
• Google Drive

Outputs:

• Parallax pixel-art scene
• Wick Editor parallax animation

Week 1 - Parallax Pixel Art

Lesson 1 - Build a Train Parallax Scene

Goal: TRAIN parallax.

Teacher prep:

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

Steps:

1. TRAIN parallax
   
2. Canvas size 100x100
   
3. Make and rename the layers - train - House - ground
   
4. CLICK on GROUND layer - bucket fill for sky - SQUARE TOOL - with FILL ON - Green for the ground click and pull to make a the ground from one side to other - Grey for the TRAIN tracks
   
   
5. CLICK on HOUSE layer - go to stamps - Search HOUSE -click on a house
   
6. CLICK on TRAIN layer - Go to stamps - Search TRAINS - Move the train on to the “tracks”
   
7. Go to HOUSE layer - Using MOVE TOOL - Turn on PARALLAX
   
   
8. Turn LOCK FRAMES PANEL on
   
9. COPY FRAME
   
10. Move the house to the left about half of the house size. REPEAT this step until at the other side.
    
    
11. Finished DOWNLOAD - x5 -DOWNLOAD .GIF
12. • GO to GOOGLE DRIVE - STUDENTS - STUDENTS NAME - TRAIN.GIF
      
13. Other ideas
14. Flowers +bugs
15. Boat and clouds or water
    

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 - Create a New Parallax Variation

Goal: Continue again, choice another idea but same process.

Teacher prep:

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

Steps:

1. Continue again, choice another idea but same process
2. 3 layers - TRAIN / BOAT / bee
3. • Water / house / FLOWER
4. • GROUND / sky

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 - Parallax Motion in Wick Editor

Lesson 1 - Animate a Parallax Scene in Wick Editor

Goal: Download picture(items) from PIxil art or draw the necessary images.

Teacher prep:

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

Steps:

1. Download picture(items) from PIxil art or draw the necessary images
2. Canvas size 100x100
3. Go to stamps
   
4. SEARCH CAR
   
5. Pick a car and download to students folder -
   
6. Reset canvas
   
7. Go to stamps Students can pick either a tree / house / or something else that will be moving past the car.
   
   
   
8. Download again to students folder
   
9. After getting the stamps
10. Open wickeditor
    
11. Import pictures from students folder GOOGLE DRIVE - STUDENTS - STUDENTS NAME - THE CAR AND OTHER OBJECT
    
    
12. USE square tool to make the ground - change colors
    
13. Click and drag or ADD TO CANVAS the car RESIZE and move to the “ground”.
    
14. Make New layer (layer 2 ) Click and drag or ADD TO CANVAS RESIZE the tree and move to the left side or the side the car is going towards.
    
15. Click on layer 2 - green dotted box and change the length to 20
    
16. Make sure your on layer 2 Enable Tweening Move the tree to the opposite side of the car.
    
    
17. Finished
18. Save a gif
19. Refer to the image example for this step.
    
20. Export GIF
    
21. Go to students files and save. In GOOGLE DRIVE - students - students file

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 - Repeat With a New Design

Goal: Repeat this activity but with some other design.

Teacher prep:

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

Steps:

1. Repeat this activity but with some other design

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.