Animation Lesson Part 1 - Snap!

Snap is a programming environment where developers can drag and drop blocks of code to create applications. Go to https://snap.berkeley.edu/snapsource/dev/snap.html to begin!

Page Sections

  • Blocks: This pane on the left is where the Snap blocks live. They can be dragged to the Scripts section to create code.
  • Scripts: This central part is where the code for the program lives. Drag blocks from the Blocks section into this section to create code.
  • Stage: On the top right, this is where the program will execute. This is how users interact with the developed applications.
  • Sprites: On the bottom right, this is where all of the sprites appear. A sprite is a character or object within a Snap application that can interact with the user.

Basic Sprite Movement

  1. At the top of the Blocks section, click Control to view the Control blocks
  2. Find the block, and drag it to the Scripts area
  3. At the top of the Blocks section, click Motion to view the Motion blocks
  4. Find the "change x by {10}" block, and snap it under the "when" block in the Scripts area:
  5. On the "when" block, click the dropdown where it says "space" and change it to "right arrow"
  6. On the Stage, see the sprite move to the right while pressing the right arrow key!

Create similar movement scripts for left, up, and down. Note that the "change x by..." block will move the sprite horizontally (left and right), and the "change y by..." block will move the sprite vertically (up and down).

Left and Right

  1. Within the "if" blocks for left and right movement, add blocks so that the sprite faces the proper direction
    • Use the dropdown to set the direction
  2. Above the Sprites area, click the two-sided arrow to make the sprite only face left or right, not upside down:

Smoother Movements

With the existing code, the sprite does not move very smoothly. Update the code so that it constantly checks if a keys are pressed instead of simply responding to keypresses.

  1. Drag all of the code scripts out of the stage so they disappear
  2. Drag over a block from the Control section
    • This will cause the following blocks to execute when the user clicks the green flag
  3. Under the "When" block, drag over a block from the Control section
    • This will cause the blocks within to execute repeatedly forever
  4. Within the "forever" block, drag a block
  5. In the empty space next to the "if", drag a block from the Sensing section
  6. Within the "key pressed" block, click the dropdown where it says "space" and change it to "left arrow"
    • This will cause the blocks within the "if" to execute only if the left arrow key is pressed
  7. Within the "if" block, drag a block from the Motion section
    • Change the value to "-3"
  8. Above the "change" block, add a block so that the sprite faces the proper direction
    • Use the dropdown to set the direction
  9. Above the Sprites area, click the two-sided arrow to make the sprite only face left or right, not upside down:
  10. Click the green flag, and see the sprite move on the Stage while pressing the right arrow key!

Note: If the sprite goes off the screen, right click it in the Sprites section and select "show"

Update the movement scripts for right, up, and down as well. Make sure to point in the proper direction when moving to the right!

Changing the Background

In Snap!, it is possible to change the background to an image.

  1. Open a new tab in Google Chrome, and go to Google images
  2. Find a suitable background image that is the proper size
    • The default size for a Snap! stage is 480x360
  3. Right click the image, and save it to the desktop
  4. Go back to Snap!, and in the Sprites area, click on the Stage
  5. Click on the "Backgrounds" tab
  6. Drag the new background image into the Backgrounds area!

Animation with Costumes

In Snap!, it is possible to give costumes to sprites. Developers can create animations by switching a sprite's costumes quickly.

Setting up the Costumes

  1. In the top menu, click the File icon and select "Costumes..." from the list:
  2. In the costume selection pop-up, scroll down and double click on "avery walking a", "avery walking b", "avery walking c", and "avery walking d":
  3. Verify that each costume appears in the sprite's Costumes area:

Animating the Sprite

The costumes should change when the sprite is walking. This happens when either the right key OR the left key is pressed.

  1. Drag over another block
  2. Under the "When" block, drag over another block
  3. Within the "forever" block, drag a block
  4. From the Operators section, drag a block into the Scripts area
    • This block allows developers to check if one thing or another are true
  5. Drag a block into the first space in the "or" block
  6. Drag another block into the second space in the "or" block
  7. Set the dropdown for the "key pressed" blocks to be "left" and "right"
  8. Within the "if" block, drag a from the Looks section
    • This will switch the costume of the sprite!
  9. Test out the code and see the animation happen when moving the sprite left or right!

Slower Animation Speed

Add a block under the "next costume" block so the costumes do not change constantly. Update the value in the "wait" block to change the animation speed.

Final Snap! Code

Next Steps

results matching ""

    No results matching ""