Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

arrow_back Draw a Letter


Instead of picking a sprite, in this video, you will learn to draw your own.

This will allow you to add creativity and personality to your project.

To start, decide which letter from the name you will draw.

This example draws and animates the letter A, but you will draw a letter for the name you're animating.

Click paint new sprite.

This takes you to the costumes tab where you will draw your letter.

Use the paint brush to draw the outline of your letter.

(soft music)

Add color.

Use lines to outline or add character to your letter.

Experiment with the different tools until you have drawn a letter you like.

If you make a mistake or don't like something you drew, use the eraser.

Then, move your letter to where it appears on the stage.

Next, add movement to the letter you made so it makes some action in your animation.

Click the code tab.

Make sure the sprite you drew is selected.

Click the motion menu.

Click, hold, and drag out a move block.

Click the block a few times.

The sprite moves, but only in one direction.

The move block contains a value that is a positive number.

To make the sprite move in the opposite direction, drag out another move block and change the value to -10.

Don't connect the two blocks to each other, click the block.

The sprite moves back the other way.

Next, make the sprite move back and forth repeatedly.

Connect the two move blocks, then click the control menu and drag out a repeat block.

Place a repeat block around the two move blocks.

Click the block stack.

The sprite didn't move!

It actually did move, but it moves too fast to see.

To fix this, from the control menu drag out a wait block and place it between the two move blocks.

Drag out a second wait block and place it under the second move block.

Change the values in both wait blocks to a shorter amount of time like 0.1.

Click the block stack.

The sprite moves back and forth repeatedly!

Make your animation run when the sprite is clicked.

From the events menu, drag out a when this sprite clicked block and snap it to the top of your block stack.

The sprite you created moves back and forth when you click it.

Now it's your turn.

Draw your own letter sprite, add two move blocks, one with a positive value and one with a negative, add a repeat block, add two wait blocks and change the values to 0.1 and add a when sprite clicked event.

Once you've finished these steps, return to this page to select another add-on to try.

Choose an Add-On
Change Color
Change the color of a letter when it’s clicked.
Grow and Shrink
Change the size of a sprite when it’s clicked and add a sound to match the animation.
Draw a Letter
Draw your own letter and make it move.
Add a letter and rotate it when it’s clicked.
Move the sprite up and down and add a sound as it bounces
Create and change to different costumes.
Bounce Everywhere
Move the sprite all around the stage, then make it return to a specific point.
New Backdrop
Switch to a different backdrop by clicking the letter or sprite.
Say Something
Make the letters talk to each other when the green flag is clicked.
Sprite Dance
Make a sprite dance when the sprite is clicked.
Add Background Music
When you click a sprite, play a song and change the background
Play a Beat
Play a drum beat when the sprite is clicked.
Next arrow_forward
  1. Watch the introduction video.
  2. Open the Starter Project below.
  3. Return to this page and watch more videos to customize your project.
  • "NYSD - Pet Name" by techwonder21 ( -- Licensed under CC BY-SA 2.0 (
  • Animate a Name is based off of the 'Animate Your Name' Scratch tutorial ( developed by Scratch team at the MIT Media Lab. It was adapted and re-developed by Google in partnership with 4-H (, West Virginia University and Utah State University for National Youth Science Day 2018 (, 4-H's largest annual STEM challenge.
  • "4H_Emblem" by US Government ( -- Licensed by CC0 Public Domain (
  • "NYSD - Adjective Name" by techwonder21 ( -- Licensed under CC BY-SA 2.0 (