Scratch Story Starter with Character Interaction
Scratch is a coding environment for creating applications and games. It can also be used to create interactive stories. These interactive stories can be used to teach vocabulary and language skills.
Scratch is a free online application that can be used on most computers. Scratch still uses the Flash extension, so you will need to use a computer with a browser and the Flash plugin. Most computers have this plugin installed.
Creating an Account
Open your browser and go to https://scratch.mit.edu.
We can create a Scratch application from the home page, but it is best to create an account so we have a location to save the Scratch application. Click the Join Scratch link.
You will be prompted to create a username and password. I recommend students use their district email address account for the username and their student ID for the password.
Students might want to attach yisd to the end of their username, so the username is unique.
Click the next button.
Provide your birth month, year, center and country information.
We selected an age that is under 13 and this generated a prompt for students to provide their guardian’s email address to confirm the account. Students will need to provide the teacher’s email address, so the teacher can confirm the accounts.
The account will be created, and the student will be able to begin working on their Scratch project.
Creating A New Project
Click the Create link in the menu bar.
The Scratch environment is divided into three sections. The section on the left is our stage where we get a visual of what we program with scripts. The stage includes a white background and a character. This cat character is called Scratch and is referred to as a Sprite.
The center section contains a panel with different scripts and script categories. This is where we begin to build our application. The scripts connect to one another like puzzle pieces.
The section on the right is the coding canvas. This is where we build the application from the scripts in the center panel.
The Stage
Before we begin the project, let us set the stage and our characters. Below the stage on the left, we have some tools to import or create our stage. Click on the choose image icon.
The Backdrop library contains several images that can be used for the stage. This story is going to take place indoors so we need a backdrop image of the indoors. Click on the Indoors category.
Click on the Room 1 backdrop.
Click the Ok button to insert the backdrop onto the stage. We can also double-click the image to insert the backdrop.
The backdrop will appear below the stage in the backdrop section next to the Sprites. The Stage box informs us that we have two backdrops.
When we add the backdrop, Scratch opens the Backdrops tab. In the Backdrop tab, we see the image we added and the original white backdrop.
The Characters
Scratch the cat is on the stage in front of the backdrop we added. Scratch isn’t the only character Sprite we can use in our application.
Click the New sprite icon to add a Sprite from the Sprite library. We can also create or import our Sprites. The Sprites in our library are a good place to begin until we become more familiar with the Scratch development process.
There are many images in our Sprite library. Click the People category.
Find and click on the Abby character. The Abby character will be selected. Below the Abby character name, we see the Costumes 4 descriptor. We will learn more about this as we develop our story. Double-click the character to add her to our application library, or click the OK button in the lower left-hand corner.
Abby will be placed in the Sprites section and selected.
She is also placed on the stage next to Scratch.
Let’s add another Sprite. Click on the sprite icon to add another sprite and select the people category. Find Avery and add her to the application Sprite library. Double-click her image or click the OK button.
Avery will be added to the application Sprite library and placed on the stage with the other Sprite characters.
In this story, we won’t be needing Scratch. We can either hide Scratch or delete him from our application library. Click once on Scratch and click the “i” icon.
The Sprite information panel will open for Scratch. We don’t need to delete Scratch. He can have a part in our story later. To hide Scratch, we will remove the check mark from the Show option.
Scratch will be removed from the stage.
Click the back arrow to return to the Sprite library.
Positioning the Characters
Click and drag the Abby character to the left of Avery.
The Avery character is facing to the right like the Abby character. I would like for her to face Abby. Click on the Avery character in the Sprites library and click the “i” icon.
Click the flip image icon so it turns blue.
Turn the direction handle to the left.
Close the Avery Sprite configuration panel.
The Welcome Dialogue
Scripts are associated with elements on the stage. Sprites are one of those elements. Abby will begin the conversation and welcome Avery. Click once on the Abby Sprite.
Click on the Events’ category in the Scripts panel. Look for the When clicked script.
Click and drag the script onto the programming canvas. This script is used to begin the whole scripting process. There are other ways to begin a script, but this is the usual way to begin a script when we are learning to use Scratch.
Click the “Looks” category and look for the “Say Hello” script.
Click and drag this script onto the programming canvas. Make sure it attaches to the bottom of the first script we added. A white border will appear between the pieces when they are close enough to connect.
Click once on the word Hello! This is the text argument field. Modifications we make to the script are called arguments in coding.
Change the text so it reads Hello!, my name is Abby.
The Avery character will be responding to Abby. Like real people characters, Avery will listen for Abby to same something. The “Say” script has the information that will be sent to Avery with another script called broadcast. Click the Events category.
Find the “broadcast” and wait script. Add it to the program on the canvas below the previous script.
The broadcast script is a container, like an envelope. This container has the message spoken by Abby. The name of the container is called message1. This is the generic name for the message. We want our message to be a little more personalized.
Click on the disclosure arrow to the right of the word message1 and select new message.
A new message box will open so we can provide a name for the message container.
Type “Abby Hello” in the box and click the OK button.
When we run the program, the message said by Abby will be sent in the Abby Hello container.
Let’s have Avery respond to abby. It would be rude not to reply. Click on the Avery Sprite character in the Sprite library.
The program canvas for Avery is empty. Each Sprite gets their coding canvas. The Events’ category should still be selected. Find the “When I receive” script and place it onto the canvas.
The container we created with Abby’s message is already in the script. This means that Avery is already listening to the message sent by Abby. Avery needs to respond to Abby.
Click on the “Looks” category and place the Say script below the first script.
Let’s type something for Avery to say. How about, Hello!, my name is Avery.
Testing the project
Okay, that’s a good start. Let’s see what we have built so far. It’s a good idea to check your progress and your program regularly to make sure everything is working as you want. Click the green flag above the stage.
A speech bubble will appear above Abby for two seconds.
After the two seconds, a speech bubble will appear above Avery.
Wow! That looks great! Let’s add some more to the conversation. Click on the Abby Sprite.
Place a “Say” script below the broadcast script and type “Welcome to my school library.” into the text argument.
Go to the Events category and place a broadcast script below the Say script. The broadcast script still has the previous container in the argument container. If we don’t create a new container for the new message, the broadcast script will broadcast the same message as before to Avery.
Click the disclosure arrow and create a new message.
Title it “Abby Welcome” and click the Ok button.
The broadcast script will update to include the new message container.
Costumes Please!
I think you can see where this is going. Before we go over to Avery and have something for her to say, let’s change things up, so the characters don’t look so plastic. Let’s give them some movement.
Click on the Looks category and find the “Switch costume” script.
Insert the script after the first broadcast script. A white border will appear when we can release the script.
Click on the costume selector and select abby-b.
Click on the Avery Sprite.
Click on the Events category and place another “When I receive” script on the canvas.
Click on the listening selector and choose “Abby Welcome”.
Add a say script and type “This is a really great library!” in the text argument.
Switch to the Look category and place a Switch costume before the Say script. Use costume Avery-b.
Act II Scene 1!
Let’s see what we’ve done. Click the green flag.
When Abby speaks the second time, her posture changes. This is the costume change we added.
Avery’s posture changes, too, when she speaks for the second time.
Click on the green flag to run the script again. Notice that Abby and Avery’s position are stuck from the last position they were in when we ran the program before.
To prevent this from happening, we need to make sure they are in the proper costume when the program starts.
Click on the Abby Sprite. Go to the Looks category and place the Switch costume script at the beginning and select the first costume, abby-a.
Click on the Avery Sprite and add the Switch costume script to the first receive code block before the Say hello script. Select the avery-a costume.
Saving your project
The project is constantly being saved, but it is a good idea to provide a descriptive name for the application so we can easily find it later. Click above the stage, replace the Untitled name.
There is no save button because the project is saved automatically.
