Through this program you will learn to develop and create an 'Interactive Storyboard' in the Scratch Jr app. In doing this you will select a picture book (either from home or from the amazing collection at your local Isaac library) and create your own interpretation of it through the basics of coding. By creating this you will develop a broad understanding of the app and the coding involved in basic movements. This will then aid you in future projects in the Scratch Jr App, the Scratch website, and any other coding endeavors you may wish to undertake.

To create an interactive storyboard through coding that represents the likeness of the original picture book in which you have chosen. In this instance we will be working with 'I Dare you' by Reece Wykes.

Creating the backdrop for the game
In order to begin our storyboard we will need to start with the basics, such as creating a backdrop for the story to take place across. As is in the story we are using, we will be choosing the jungle backdrop as seen in the image below. You will also be able to see, on the right hand side of the image, a big plus sign representing a blank canvas where we can add the additional backdrops. Through this part we will add 4 jungle backdrops.

Backdrop 1: Characters
This storyboard has a number of characters throughout. In order to create a likeness between the characters in the book and the characters we create, we need to be able to edit our characters. Before we do this we will need to delete the existing cat character from our screen. To do this, just hold your finger down on the cat until you see the red X appear. Now that we have no character we can go and add those that suit our story. For this, we select the big plus on the top right hand corner of the screen, which will bring us to the character selection page. Select the yellow monkey and edit using the tools available to create both an orange and blue monkey. You will also be creating a bug character using the fly. In the edit section (represented by the paintbrush button in the top right hand corner) of a character you will find at the top of the screen that you can also edit the name. This comes in handy when you have multiples of the same character such as we are using in this example.

Backdrop 1: Coding the Orange Monkey
Once you have edited your character to create the Orange Monkey and dragged it to a place on the screen that you think suits the story, it is time to begin coding. A great suggestion is to always talk through what you intend to have the character do, this helps to visualise the coding blocks we will need to select in order to have the character achieve this. In this backdrop setting we want the Orange Monkey to speak, make some movement and then follow up with a question. The dialogue we use will be that which is printed in the book (In dialogue block 1, enter: I'm bored –> In dialogue block 2, enter: I dare you…to eat this bug!) You can see this reflected in the code below.

Backdrop 1: Coding the Blue Monkey
Following along with the book, we would like our Blue Monkey to wait while the Orange Monkey speaks and then move toward the fly character that will appear. Once he reaches the fly we have then coded him to make some noises. In this case he is eating the fly so we have recorded some munching noises using the sound blocks. After this has happened we have ended the code with a block that will see us transition from backdrop 1 to backdrop 2.

Backdrop 1: Coding the Fly
Our fly code will appear to be the most difficult to construct in this backdrop. However, this is only due to the movement we want to create in order to give the fly some more 'bug-like' characteristics. We will code the fly to stay hidden for the duration of the Orange Monkey's code and appear soon after. It will then disappear when the Blue Monkey reaches it to simulate that it has been eaten.

Backdrop 2: Characters
In backdrop 2 we will reintroduce our recurring characters, the Orange Monkey and the Blue Monkey. We will also be introducing a new character, this being a bird. We will need to go in and edit the bird so that the colour of it is similar to that of the bird character in the picture book we are following along with. In the book our bird is a beautiful pink colour.

Backdrop 2: Coding the Orange Monkey
In this backdrop the Orange Monkey will be be waiting while the Blue Monkey has dialogue, and then it will move across the screen in a motion following the bird character. When it reaches the bird character we have sound recording similar to that of the Blue Monkey's in backdrop 1, where it will make eating noises then will say 'Delicious' or something along those lines to insinuate that it has eaten the bird. After this the code ends by transitioning us to backdrop 3.

Backdrop 2: Coding the Blue Monkey
The blue monkey will be coded to speak, move and then speak again according to the dialogue in the book (In dialogue block 1, enter: Well I dare you… –> In dialogue block 2, enter: To eat this bird.) This can be seen in the image below.

Backdrop 2: Coding the Bird
We want the bird to be hidden during the initial interaction of the Monkey's, wait, and then reappear after the Blue Monkey has finished speaking. After this the bird will travel across the screen and disappear once the Orange Monkey reaches it.

Backdrop 3: Characters
Backdrop 3 will see the return of our Monkey characters once again. Our new character in this backdrop will be a rock. Characters need not be a 'living' thing, they can be the introduction of any new object to the Scratch project. The Scratch Jr App does not have a rock that we are able to select as a character, but this is where we can get a little creative and make our own. Go to add a new character like we have in previous steps. You will see a blank box at the top right hand side of the character images. Once you have selected this it will be highlighted orange and you can select the paintbrush in the top right hand corner of the screen. This will take us to the editing area that we have used previously. Now is where we select our colour and use our finger to draw a rock of any shape or size we like. Once you are satisfied with your new character creation click the tick on the top right hand corner and it will be added to your backdrop.

Backdrop 3: Coding the Orange Monkey
The orange monkey will be coded only to speak in this backdrop (Dialogue block 1, enter: Right. I dare you… –> Dialogue block 2, enter: To eat this rock) The code is as follows.

Backdrop 3: Coding the Blue Monkey
The blue monkey will be coded to wait for the duration of the orange monkey's code, move down and across the screen after the rock, make some crunching sounds, and then speak. After this the code will end with a transition to backdrop 4, our final backdrop.

Backdrop 3: Coding the Rock
The rock will also be coded to wait for the duration of the orange monkey's code, then will move across and down around the screen, before hiding once being 'eaten' by the blue monkey.

Backdrop 4: Characters
In this backdrop we will be creating 2 additional characters. These characters will be a purple monkey and 'The end'. Our purple monkey will be created in the same way as our other monkey characters, and our 'The end' character will be created just as we did with the rock in the previous background.

Backdrop 4: Coding the Orange Monkey
In our final backdrop this monkey will start off by speaking, then moving forward across the screen before speaking again. After this it will wait, speak some more, wait and then disappear. (Dialogue block 1, enter: I dare you… –> Dialogue block 2, enter: to eat ME! –> Dialogue block 3, enter: hahahahaha)

Backdrop 4: Coding the Blue Monkey
The Blue Monkey will be coded to wait while the orange monkey's code plays out. After waiting it will then speak, wait some more, then move forward across the screen, make a big gulping sound and then speak once again. (Dialogue block 1, enter: hehehehehe –> Dialogue block 2, enter: …)

Backdrop 4: Coding the Purple Monkey
The Purple Monkey is one of our new characters and will not be seen for the first part of coding on this backdrop. It will start out by hiding and waiting like that for quite some time. After this we will code it to appear, move forward and then speak. (Dialogue block, enter: You look bored)

Backdrop 4: Coding the 'The end'
This character will be coded much the same as the Purple Monkey. It will be hidden for the duration of the other character's code before appearing on screen to state 'The end'.

CONGRATULATIONS!!
You have now completed your interactive storyboard and created your very own masterpiece! Now that you have an understanding of how the Scratch Jr program works, you have the coding world at your feet. We would love to hear about any coding creations you dream up in the future.

Back to Scratch Jr Programs