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

Find some music you want to use.  You can bring an mp3 file from your personal music collection.  If you find something on YouTube, you can use the many services that can be found by searching “YouTube to mp3” to download an mp3 copy of the audio.  Here is a site that works, but be careful not to click on ads.

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.  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

Find a picture.  Save it to the desktop or some other folder.  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.

Double click it to open in Preview

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.

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.