Animation Lesson Part 3 - Importing

In this activity, import an existing Piskel, edit it, and export it into Snap!

Importing an Existing Piskel

1. Right-click this WalkBase.piskel link and click "Save link as..." save it to the Desktop
   • NOTE: This activity is accessible via bit.ly/coding-activities
2. Navigate to Piskel
3. In Piskel, click the button in the upper right to create a new sprite
4. On the right side of the page, click the "Import" folder icon
   
5. Click the "Browse .piskel files" button
   
6. Select the WalkBase.piskel file to import form the Desktop
7. After the file uploads, select "Replace"
   
8. Once the Piskel is in the editor, update it by making the character green.

Exporting the New Piskel

1. After editing the Piskel, click the "Export" image icon on the right side of the page
   
2. Select the "Zip" tab
3. Click the "Download ZIP" button
   
4. Save the .zip file somewhere
5. When it downloads, show the .zip file in the containing folder
   
6. Right click on the .zip file and select "Extract All..."
   
7. Click the "Extract" button
8. Keep the folder open!

Importing the Sprite into Snap!

1. Go back to the Snap! project tab in the browser
2. Click on the Costumes tab for the walking sprite
3. Right-click and select "delete" to delete each of the existing costumes
4. Find the folder containing the different sprites from Piskel
5. Click and drag each sprite image into the Costumes section to import them
   • Make sure they stay in the proper order!

Test out the app by moving the sprite around the screen. It should have the same animation as the Piskel!

Next Steps - Options

• Update the code in Snap to make a game!
• Update the sprite costume in Piskel, and import it back into Snap!
• Create a totally new Piskel!