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.
During “The Signal” episode, the characters experience a “glitch” as if they were stuck inside a television program with a poor broadcast signal.
Check it out.
<<sigh>> <<broadcaster reporting: "In other news..."
<<Wait, then why is it affecting -- >> In this video, you will upload a “lost signal” GIF and animate it to make your Gumball story go "off the air" To start, click “Lost Signal GIF” on this page to download the “lost signal” animation.
If you would like to use a different gif file, search for one that is available for free use.
To add the GIF file to your project, select the “upload sprite from file” icon.
Then, select your GIF file from the Downloads folder.
It may take a few seconds for the GIF to upload, and it might not look like the file is uploading until the GIF appears.
Once the GIF uploads, it appears in your Sprites list.
It also displays over your animation.
To resize the GIF so it fits your project, use the “grow” and “shrink” tools.
When you upload a GIF as a sprite, Scratch breaks it up into separate costumes, or frames.
To see what this looks like, click the Costumes tab, and click several costumes.
Next, animate these costumes into a moving image.
To switch costumes, click the “scripts tab,”and select the “looks” menu.
Click the “next costume” block a few times to cycle through the costumes.
Then, drag it out.
Right now, you have to click the block to make the costume change.
To make the costume change repeatedly, drag out a “repeat” block from the “control” menu, and place it around the “next costume” block.
Click the code to test.
Great, it works, but only the first few costumes show.
To make all the costumes show, change the value in the “repeat” block to a larger number.
Click on the “costumes tab,” then scroll to the bottom to see the total number of frames that make up the GIF.
Type that number into the “repeat” block.
Click the code to test.
The code worked, but the program cycles through the different costumes much faster than in the episode.
It’s too fast.
To slow it down, add a pause between costume changes.
From “control,” add a “wait” block under “next costume.”
Click your code to test.
Tinker with the values in the “wait” block to speed up or slow down the animation.
This example uses 0.2.
Test again by clicking the code.
Nice, it works, but the GIF doesn’t start on the first costume.
To set a starting costume, add a “switch costume to” block to the top of your block stack.
Then, select the first costume from the list.
Click it to try it out.
Next, show the GIF at the right time in your story.
This example programs the GIF animation to appear between scenes.
Choose a sprite to broadcast the glitch.
To “broadcast” means to send a message from one part of a program to another part by telling code to run.
This example uses “Carmen" to send the message.
You will use a “broadcast” block to send a message telling the code to run.
Add the “broadcast and wait” block to the spot in your story where you want to start your animation.
The “broadcast and wait” block will run all the code it triggers and wait until moving on to the next block.
In this example, the code will run before the backdrop switches.
Select the dropdown, and name the message “start GIF.”
Now that the message is broadcasted, set up your GIF sprite to receive it.
To start, select the GIF sprite.
Add a “when I receive” block to the top of the block stack.
Be sure the “start GIF” message is selected.
Click the flag to test.
The sprites are hidden behind the GIF.
To fix this, program the GIF to show only when it receives the broadcasted message.
From “Looks,” drag out a “Hide” block, and attach it to the end of the block stack, so the GIF hides after its code runs.
Then, add a “Show” block under the “When I receive” block, so the GIF shows when it receives the broadcasted message.
Next, program the GIF to hide at the beginning of the project.
To do this, drag out a “hide” block from the Looks menu and attach a “when flag clicked” block on top of it.
Click the flag to test again.
Now it’s your turn ….. Download the “sample” GIF and upload it as a new Sprite Use “Next Costume”, “wait”, and “Repeat” blocks to show the frames from the GIF in sequence.
Use a “Switch Costume to” block to start the GIF from the first frame.
Select a sprite who will trigger the animation, and add a “Broadcast and wait” block to that Sprite’s code.
Add a “When I Receive” block to the GIF sprite.
And finally, add “show”, “hide” and “when flag clicked” blocks to control when the GIF appears.