Working with Pictures and Music

When choosing music and pictures for your project, please pay attention to how the work is licensed.  If it is protected by copyright, be sure your use falls under the Fair Use Doctrine.  Our class projects should be considered to be “nonprofit educational purposes” and therefore fall under Fair Use.  For music, please be sure to only use a small portion of a song.

Search for web sites with free art and music.  Soundbible.com is one you know already.  Open Game Art has free sprite sheets among other things.  You can search Flickr for pictures licensed under Creative Commons.  Wikipedia has over 20 million pictures you can use.  Google Images has the ability to search only for pictures licensed for reuse using its Search Tools.

Music

If you are using Scratch, the easiest way to add music to your project is to find it in someone else’s Scratch project and copy it to your “backpack” in Scratch so you can add it to your project.

You can also bring an mp3 file from your personal music collection, or download music from YouTube.  If you find something on YouTube, you can extract the audio to an mp3 file using this site: https://youtubemp3.today  .  There are many other websites which convert YouTube videos to mp3 files, but most have many ads, some of which are deceptive.  Please take care when using random websites!

All music must be school-appropriate:  no language or references to drugs, no misogyny or other hate-speech, no bleeped out curse words where the original lyrics are clearly inferred, no instrumental versions of songs featuring inappropriate lyrics or subject in the original version.  This excludes quite a bit of of hip hop and much classic rock as well.

To import music to Scratch, it needs to be in the .mp3 or .wav file format.  You can export a song as an mp3 from iTunes, but you will need to be sure iTunes is setup to export in mp3 format and not aac or m4a.  Here are the instructions from Apple.

Once you have your .mp3 or .wav file you should first trim it down to just the part you want for your project.  Use Garage Band to cut out the part you want and save it using the Share menu and Export song.  Choose mp3 as the format.

In Scratch, import your song or sound effects under either the specific sprite it goes with, or the stage if it is background music or sound.  Use the “upload sound from file” file folder button.

Pictures

sprite how to

Macklemore photo source:  http://commons.wikimedia.org/wiki/File:Macklemore_(8465189261).jpg

To convert a photo with unwanted background elements to a clean sprite for Scratch, there are several approaches you can take.

Step 1:  Find a picture.  Save it to the desktop or some other folder where you can find it.  On a Mac, ctrl-click on an image in the web browser to get a menu where you can save as or copy the image.

Step 2:  Edit the picture to remove the unwanted background.  There are several different options for how you can complete this task:

Option #1:  Import to Scratch and use the Scratch costume editor to remove the background (easiest option!)

Edit in Scratch.  The costume editor in Scratch has a tool for removing the background.  Import your picture as a sprite by clicking the file folder to create a new sprite from a file on your computer.  Use the Magic Wand tool to draw an outline all the way around the parts you want to keep, and then click away.  Click that link for documentation about the Scratch editor’s Magic Wand Tool.

Option #2:  Edit in the Preview application and then import to Scratch

After downloading your picture, double click it to open in the Preview application

Use the Smart Lasso selection tool to draw a lasso around the part of the picture you want to keep.  Do Edit/Copy to copy it to the clipboard.  Do File / New from clipboard to make a new image with just the part you want to keep.

You can also use the Instant Alpha selection tool to select and delete the background if it is a fairly uniform color.

Sometimes the selection tools including Smart Lasso and Instant Alpha don’t show up in Preview.  With an image file open in Preview, click the ‘Show Edit Toolbar’ button in the toolbar (looks like a box with a pencil in it) – all your selection tools should appear on a secondary toolbar beneath the main one.

Use Tools / Adjust Size to make it small enough for Scratch.  Scratch sprites and backgrounds have a maximum of 480 pixels wide by 320 pixels high.  If you are cropping or resizing a photo to use as a background, it is easiest if you get it to 480×320 before importing to Scratch.

Save it as a .png file to preserve the transparency layer.  .jpg or .jpeg will not have a transparent background.

here is a good tutorial.

You can also import the whole picture to scratch and use the tools in Scratch’s image editor to erase the parts you don’t want.

Option #3:  Edit in Pixlr and then import to Scratch

Some of the school MacBooks seem to be missing the smart lasso and instant alpha tools.  I haven’t been able to pin down why this is or how to fix it.  As an alternative, try this web site called Pixlr which has an online image editor.

Pixlr tips:

  • It can be tricky to get an image with a transparent background.  The easiest way is to select New Image and check the Transparent box when prompted.  This will give you a blank image with the checkerboard transparency as the background.  Now go the menu option Layer –> Open image as layer and open your picture from where you saved it.  Now you can use the magic wand or lasso to select areas to delete.
  • The magic wand has a tolerance setting.  Play with this to get it to select the most unwanted stuff without selecting the bits you want to keep.
  • With the lasso, select the parts you want, then do Edit –> Invert Selection to select everything else, and delete it.
  • If you make a mistake, undo!
  • Do File –> Save to save your file as a png with the transparency
  • Pixlr has good help articles you can access through the Help menu

Here is quick video showing how to get an image from the internet, edit it to have just the character’s head, save it with a transparent background, and import into a new Scratch sprite:

Here is a video showing how to combine some stick figure costumes “borrowed” from another Scratch project with the head of a character found in an image on the internet:

If you want to take your sprite editing and animation to the next level, check out Piskel, a web application made for creating and editing sprites.  You can import an animated .gif or start from a photo, make multiple costumes, and export as a .gif.  When you import an animated .gif into Scratch, Scratch automatically makes multiple costumes from the frames in the .gif file.