In Storytelling, students use computer science to tell fun and interactive stories. Storytelling emphasizes creativity by encouraging club members to tell a unique story each day.
In Friends, students are encouraged to sign up with a friend or make a new friend in the club. Friends emphasizes teamwork by allowing club members to tell the story of how their friendship started and imagine a company together.
In Fashion & Design, students learn how computer science and technology are used in the fashion industry while building fashion-themed programs, like a fashion walk, a stylist tool, and a pattern maker.
In Art, students create animations, interactive artwork, photograph filters, and other exciting, artistic projects.
In Social Media, students create fun social media style applications and games while learning about the computer science concepts that enable these programs to work.
In Sports, students use computer science to simulate extreme sports, make their own fitness gadget commercial, and create commentary for a big sporting event.
In Music & Sound, students use the computer to play musical notes, create a music video, and build an interactive music display while learning how programming is used to create music.
In Game Design, students learn basic video game coding concepts by making different types of games, including racing, platform, launching, and more!
Students create fun and complex animated projects. This is an advanced curriculum, which means it teaches new concepts that are recommended for students who have already participated in at least two other CS First themes.
In this sample activity students animate an ocean wave to create a setting, then tell a story that takes place on the high seas.
In this sample activity students tell a story using the characters from Cartoon Network’s "The Amazing World of Gumball."
Be a designer and programmer – bring the Google logo to life using code.
Time to end your story with a cool animation and the words “the end.” To do this, you’ll add some costumes to one of the sprites, each one slightly different from the one before it. You’ll also add letters to spell out “the end.” Then, you’ll quickly change between the costumes, creating an animated effect. Each picture that makes up an animation is called a “frame.” In each frame, the character changes a tiny bit to create an animated effect when the frames are run one after another.
First, click the sprite you will use. This example will use the knight. Then, click the “costumes” tab. Note that this add-on only works with “vector” sprites. To check what type of sprite you have, look in the bottom right corner. If you only have “bitmap” sprites, add a new sprite by clicking “choose sprite from library,” then click “Vector” under “Type.”
Duplicate one of the sprite’s costumes by right clicking on it, then clicking “duplicate.”
Next, make small changes to the new costume to create a frame. In this example, the knight will raise its helmet plume and arms, then drop its sword in celebration.
Use the zoom tool to zoom into the sprite, so it’s easier to work with. Then, click the sprite. You can’t edit the knight’s arms or helmet separately. To change this, click the “ungroup” tool. Neat! Now you can work with the knight’s head, body, limbs, and sword individually. Click and drag each part to move it, or use the handle to rotate it. Don’t worry if you make a mistake. Just use the “undo” tool to take the sprite back to how it looked previously. To preview what you’ve made, click back and forth between the original costume and the new costume. Move the knight’s arm, plume, and sword slightly upwards. But wait! The knight’s head moves as a whole, but only the plume should move. When you select the knight’s head, the box around it is orange. That means you can ungroup it further. Click the knight’s head, then use the “ungroup” tool again.
Neat! Now you can move just the plume. Use the text tool to write the letter “T” in your favorite font and color somewhere next to the sprite. This is the start to the words “The End.” Once you’re done with this frame, duplicate it. Then, edit the new frame the same way. Add more letters. Duplicate this again, and repeat editing these costumes until the animation is complete, and you’ve spelled out “The End."
For the last frame in this example, the knight will move its right arm to the side. To do this, select the arm, then click the “flip left right” button. Drag the flipped arm into place. Cool!
Next, create code to animate this. Click the “scripts” tab. Drag out a “next costume” block. Since there are 5 costumes in this example, the knight will need to switch costumes 4 times to cycle through all the costumes. To do this, add a “repeat” block around the “next costume” block, and change its value to 4. Click this stack to test it out.
Whoah, that was fast. Use a “wait” block to slow down the animation. Tinker with the value in this block until the animation looks good to you.
To make sure that the story starts on the right costume, add a “switch costume” block after the “when flag clicked” block, and select the first costume in the dropdown.
Click the flag to test it.
The story plays, but not the animation. That’s because there’s no broadcast message telling the animation to play.
Add a “broadcast” block to the end of the story. Open the dropdown, and click “new message.” Name this message “The End.” Then, add a “when I receive The End” block to the block stack that animates the ending.
Click the flag to test again.
Great, it works! Now, it’s your turn!
Create a new animation frame by duplicating a sprite’s costume, ungrouping it, and making small changes. Add the first 1 or 2 letters of “The End.”
Duplicate this costume, and add more letters. Repeat this process until you create all of the frames for the ending animation. Animate the sprite using the “next costume,” “wait,” and “repeat” blocks. Make sure the program starts with the right costume by adding a “switch costume” block. Start the ending animation with a broadcasted message using a “broadcast” and “when I receive” block.