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.
In this add-on, you’ll program a fading transition to change scenes in your story.
To start, make a new backdrop that will show between scenes. To do this, click on the stage, then click on the backdrops tab. Click “paint new backdrop” to create your transition message. It’s easier to work with your text or drawing if you use vector mode, so click the “Convert to vector” button.
Next, click the “Text” tool to type your message. This example types “Later that night…” to show that there is a time lapse between the beginning of the story and the next scene. Write a message that fits your story, like “The next day…,” “Two weeks later…,” or “Meanwhile…..” Next, create a transition in which the scene will fade out before the message shows and back in after it.. Click the scripts tab, and drag out a “change effect” block. Click the dropdown to change the effect to “ghost.”
When you click this block, the stage fades and disappears. To reset the stage, click the “clear graphic effects” block in the Looks menu.
To make a slower fading out effect, add a “wait” block to the “change effect” block, and add a “repeat” loop around this block stack. Tinker with the values inside the “change effect” and “wait” blocks to control how quickly the stage fades out.
This example uses 10 in the “change effect” block and 0.1 in the “wait” block.
Test it out. Great. When the block stack is clicked, the stage fades.
Next, make the stage fade back in after the transition message shows, so the next scene can begin. Duplicate the “repeat” loop, and change the value in the “change effect” block to a negative number, like negative 10. When you test this, the stage fades back in.
Program the different backdrops to appear at the right times in your story. The first backdrop will show, then fade out. The transition slide will fade in, then fade out. Finally, the new backdrop or setting will fade in. To make this happen, you could repeat the different “repeat” loop block stacks, but that would make your code really long.
To simplify this, make 2 new blocks - one for a fade out, and the other for a fade in.
Click the More blocks menu, and click “Make a block.”
Name the block something that makes sense for the fade out effect, like “fade out,” then add the new “define” block to the top of the “repeat loop” for the “change ghost effect” with the positive number. Great. Make another block called “fade in,” and place the “define” block at the top of the block stack for the positive “change effect” block.
Drag out a “fade out” block from the “more blocks” menu, and add a “switch backdrop” block from the looks menu. Change the backdrop to the transition message you created.
Next, add a “fade in” block to make the transition slide appear. Add another “fade out” block and a “switch backdrop” block to show the next scene, and finally, another “fade in” block to make the backdrop appear. Test your code.
Feel free to add a “wait” block between the “fade in” and “fade out” blocks to make sure the transition is on the stage long enough for viewers to read it. Prompt your transition effect using “broadcast” and “when I receive” blocks. Click back to your main character sprite, add a “broadcast” message before the sprite changes scenes, and name the message. This example uses “Opening Night.” Then, click back to the stage. Add a “when I receive” block, and change the message to the correct name. Finally, when the flag is clicked, the stage should be on the first scene or backdrop, so drag out a “when flag clicked,” event, and add a “switch backdrop” block to it. Change the dropdown to the backdrop for your story’s first scene.
This is a difficult problem! Keep trying to solve it, and don’t get discouraged if the first few solutions you try don’t work.
Great. You created a transition between the scenes in your story.
Now it’s your turn. Use a “repeat loop”, a “change ghost effect,” and a “wait” block to make a fading in, and fading out effect Make two new blocks to reuse the fade in and fade out code.
Finally, program the different backdrops to appear using the “broadcast”, “when I receive”, “fade out”, “fade in”, and “switch backdrop” blocks.