Skip to content

Please update your browser

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

5. Letter Animation

Transcript

In this video, you will animate the user's name.

To start, switch the costume to each letter in the answer, and make a clone of that letter so the program spells out the word the user types in.

Add a "switch costume" block above the "create clone" block.

Each costume name matches a letter, so you can choose the specific costume for each character in the answer.

To switch to the correct costumes, select the operators menu, and drag out a “letter of” block.

This block picks an individual character out of a string.

In this example, letter 1 of the string “world” is “W.”

Add the "letter of" block to the "switch costume" block.

Click the flag.

Type in a name like “Quinn.”

There are 5 “w’s” on the stage because the name “Quinn” has 5 characters.

They are all “w’s” because letter 1 of “world” is “W.”

To switch the costume to each letter in the answer, add the “answer” block to the second space in the “letter of” block.

Then, use a variable to move to the location of each of the letters in the answer.

Create a variable, and name it something like "current letter."

Click the box next to the current letter variable to hide the display from the stage.

Add a "set current letter" block under the "when flag clicked" block.

Change the value in the block to 1.

1 is the location of the first character in a string.

Next, add the "current letter" block to the value bubble in the "switch costume" block.

Test the code.

Type a name and press “enter.”

That’s weird; five W’s appear.

The first letter of “Quinn” is Q, not W!

This happens because all the costume names are lowercase letters, and an uppercase Q was typed.

For the right costume to appear, the letter must match the costume name exactly.

You will enable the program to handle both uppercase and lowercase letters later.

For now, type names in all lowercase letters.

Test the code again.

Type Quinn with a lowercase Q.

Five Q’s now appear!

The repeat loop runs for as many characters as are in the answer.

Then, each time it runs, the costume switches to the letter in the “current letter” variable.

Right now, the "current letter" variable is always 1, so the loop displays only the first letter of the answer.

To show each of the letters in the name in order, add 1 to the “current letter” variable each time the loop runs.

Add a "change current letter by 1" block under the "change effect" block.

Click the flag, and type in a name.

Cool, it works!

Here’s what’s happening: When the flag is clicked, the "current letter" variable is set to 1.

The “Letters” sprite hides and goes to its starting location.

The user is asked a question, and the response is stored in the “answer” variable.

Then, the program repeats the following steps for every letter: Change the costume to match the value of the "current letter" variable of the answer create a clone, move to the right, and change color.

the “current letter” variable increases by 1, and loop starts over again for the next letter of the answer.

That's really cool.

Test it out some more by typing in different names.

Now, it’s your turn!

Switch the costume to each letter in the user's name using a current letter variable.

In the next video, you’ll enable the program to handle both uppercase and lowercase letters.

arrow_backward Back
Next arrow_forward
Instructions
Switch the costume to each letter in the user's name using a current letter variable.