Skip to content

Please update your browser

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

3. Animate Letters

Transcript

In this video, you will animate a row of letters to dance, spin -- whatever you would like.

Later, you will apply this animation to a user's name.

To start, click the letters sprite and the costumes tab, and select any letter.

This example uses the letter H. Click the scripts tab.

The starter project contains a function block stack that will help solve a bug later in the program.

For now, put it aside.

Begin by animating a letter.

This example will make the letter grow, wiggle, then shrink.

To make the letter move like the one in this example, add a “change size" block, and enter a number in the value space.

This example uses 5.

To make the block return to its original size, add another “change size” block, and put a negative sign in front of the number you entered in the other block.

Click the block stack to test it out.

Nothing happens!

The code runs so fast, you cannot see the letter grow and shrink.

To fix this, place a “wait” block between the two “change size” blocks, and adjust its value.

This example uses a value of 0.2 seconds.

Test the code again.

Great, the letter gets bigger, then returns to its original size.

To make the letter repeatedly change its size, select a “forever” block, and place it around your block stack.

Click the stack to test the code.

To slow down the size change, place another “wait” block under the second “change size" block.

To make the letter wiggle back and forth, add a "turn left” block above the first "wait" block and a "turn right” block above the second "wait" block.

Tinker with the value in the "turn" block to adjust how the sprite wiggles.

This example uses the value three.

Use a smaller value to get a more subtle turning effect.

or type in a larger value to get a more extreme effect.

Click the block stack to try it out.

Great!

To make sure the letter starts in an upright position, add a “point in direction” block to the top of the block stack.

Select 90 from the dropdown menu.

Click the code to try it out one more time.

Awesome.

The letter starts upright, then turns and changes size continuously.

Feel free to add more or different animation effects to the letter using blocks from the motion and looks menus.

Later, you will apply this animation to a user's name.

Next, create clones of the letter sprite to animate a row of letters.

Add a “create clone” block to the scripts area and a “repeat” block around it.

Change the value in the "repeat" block to 5.

Click the code stack to test.

The clones appear, but they are on top of each other.

To make the clones appear in a row, add a "change x" block under the "create clone" block.

Change the value in the block to 50.

Click the flag then the code stack to test.

Great.

Click “stop” to clear the clones from the stage, then drag the letter to where you would like it to start.

Add a "when flag clicked" event and a "go to" block to the top of the code stack with the "repeat" loop.

To animate the clones, add a "when I start as a clone" block to the top of the code stack with the "forever" loop.

Test it out.

The last letter in the row doesn't animate, because it's not a clone.

The clones animate, but the original sprite does not.

To hide the original sprite and show only the clones, add a "hide" block under the "when flag clicked" block and a "show" block under the "when I start as a clone" block.

Finally, to make the letters change color as they move, add a "change color effect" block under the "change x" block.

Click the flag to test.

That's cool!

Now, it's your turn.

Program the letter sprite to start upright, then repeatedly dance, wiggle, or spin using a forever loop and blocks from the motion and looks menus.

Create clones that appear in a row.

Animate the clones using the "when I start as a clone" block.

Hide the original sprite and show only the clones.

Change the colors of the clones.

arrow_backward Back
Next arrow_forward
Instructions
  1. Program the letter sprite to start upright, then repeatedly dance, wiggle, or spin using a forever loop and blocks from the motion and looks menus.
  2. Create clones that appear in a row.
  3. Animate the clones using the "when I start as a clone" block.
  4. Hide the original sprite and show only the clones.
  5. Change the colors of the clones.