Skip to content

Please update your browser

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

Transcript

Hi, my name is Olga, and I work in Google's Computer Science Education department.

And I'm Fiona.

I teach CS First classes and I'm a team leader with 4-H, America's largest youth organization where kids learn by doing.

Yeah.

In this activity, you'll use code to-- Drum roll, please.

(drum roll)

Animate a name!

Computer science uses code to give computers instructions, which is super cool because you can create anything you can imagine.

Computer science is a subject you can study in school, and it's a also a career, or something you can do just for fun.

You could use computer science to protect the environment, make music, launch rocket ships, save lives, and so much more.

Today you'll use computer science concepts like sequencing, events, and loops to animate a name.

To start, choose a word to animate.

You could choose your name, a pet's name, an animal, a sport, a place, or anything you like.

Your animation can express the emotion or personality of the word, tell a story, or just dance and be silly.

(laughs)

It's all up to you!

After watching this video, click the Starter Project link.

This will open Scratch in a new tab.

Scratch uses code blocks to give character called sprites instructions like when a sprite is clicked, make it change color.

After opening Scratch, return to this tab and choose videos to learn how to add and animate letters to make your project come to life.

Watch as many videos and add as many letters as you like.

And here's a helpful trick.

While you work, pause a video and go to the Scratch tab to complete a step in your project.

Or better yet, rearrange your windows to show Scratch and the video at the same time.

Fiona, what did you make for your project?

I animated the name of my 4-H club.

Wow!

Well, I animated the name of my home country Colombia.

Now it's your turn.

Open Scratch in a new tab.

Title your project with the name you're going to animate.

Return to this tab and select a video.

Watch the video and complete the steps in your project.

Then watch more videos to complete your animation.

It's time to get creative.

It's time to get coding!

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.

Spin

Add a letter and rotate it when it’s clicked.

Bounce

Move the sprite up and down and add a sound as it bounces

Wave

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.

Instructions

Para hacer esta actividad en español, haz clic aquí.

  1. Watch the introduction video.
  2. Open the Starter Project below.
  3. Return to this page and watch more videos to customize your project.

Attributions
  • "NYSD - Pet Name" by techwonder21 (https://scratch.mit.edu/projects/226242085/editor) -- Licensed under CC BY-SA 2.0 (https://creativecommons.org/licenses/by-sa/2.0/)
  • Animate a Name is based off of the 'Animate Your Name' Scratch tutorial (http://scratch.mit.edu/name) developed by Scratch team at the MIT Media Lab. It was adapted and re-developed by Google in partnership with 4-H (http://4-h.org/), West Virginia University and Utah State University for National Youth Science Day 2018 (https://4-h.org/parents/national-youth-science-day/), 4-H's largest annual STEM challenge.
  • "4H_Emblem" by US Government (https://commons.wikimedia.org/wiki/File:4H_Emblem.svg) -- Licensed by CC0 Public Domain (https://creativecommons.org/share-your-work/public-domain/cc0/)
  • "NYSD - Adjective Name" by techwonder21 (https://scratch.mit.edu/projects/226481973/editor) -- Licensed under CC BY-SA 2.0 (https://creativecommons.org/licenses/by-sa/2.0/)