How to Modify Scratch Sprites with Visual Effects

By Derek Breen

When creating collages in Scratch, you can make some of the foreground sprites a bit transparent, so you can see part of the image behind them. This method of blending photographs and other graphics together takes a tiny bit of programming in Scratch, but the results are totally worth it!

Make sprites transparent

For now, you will just make two elements of your collage transparent.

  1. Click the first sprite you want to make transparent (Anne’s portrait in this example) and then click the Scripts tab.

  2. Drag the WHEN GREEN FLAG CLICKED and SET EFFECT TO blocks into the Scripts Area.

  3. Inside the SET EFFECT TO block, click where it says Color and select Ghost.

  4. In the same block, click the 0 (zero) and type 30.

    image0.jpg

Now, if you click the Green Flag button above the Stage, your sprite should suddenly appear transparent. (See why they call it the “ghost” effect?)

image1.jpg

When you click the Stop button above the Stage, the sprite effects turn off until you click the Green Flag button again.

You could follow the same steps to make your next sprite transparent, too, but here is a shortcut.

  1. Go to the Scripts area on the sprite you just modified, click the WHEN GREEN FLAG CLICKED block, and drag the code blocks over to the icon of the other sprite (beneath the Stage) that you wish to make transparent.

    image2.jpg

  2. Click the second sprite, and you should see that the WHEN GREEN FLAG CLICKED and SET EFFECT TO blocks have been copied.

  3. Change the value from 30 to 50 so the second sprite (the star here) will blend a bit more.

  4. Click the Green Flag button to see your changes.

    image3.jpg

You can drag as many code blocks from one sprite to another, but they must be snapped together to copy over. You also can drag costumes and sounds from one sprite to another.

Adjust sprite brightness

See how the color of the text almost pops out at you when placed in front of the transparent images?

Another way to draw attention to specific images or to make others less noticeable is by adjusting brightness. Draw a bit more attention to Anne Frank’s portrait by making the building behind her (where she hid with her family) appear darker.

  1. Click the sprite you want to adjust.

  2. Drag the following blocks into the Scripts Area and change the values to match.

    image4.jpg

  3. Click the Green Flag button (or click right on the code block) to see the change.

  4. Keep adjusting the brightness value for your sprite until you find the look that works best for your image.

    image5.jpg

Making the photograph of the building a bit darker made it blend better with the bookcase, so there is not such a distinct line between them. You also can use the brightness effect to draw attention to your most important element. What happens if you add a SET BRIGHTNESS EFFECT TO block with a value of 20 to the Anne portrait?

image6.jpg

Adjust sprite color

A SET EFFECT TO block also enables you to adjust the color of sprites. It works best on brightly colored sprites.

image7.jpg

For black-and-white sprites (or grayscale), the color effect adds a subtle tint.

image8.jpg

Remember how you hid some of your sprites? Now, you can gradually unhide each one (shift-click the icons beneath the Stage and select Unhide) and try out different color, brightness, and ghost effects. Isn’t this a blast?

If you wish to reset sprites to their original appearance while your project is still running, use the CLEAR GRAPHIC EFFECTS block.