Scratch Overview & GUI

This tutorial shows you how to create animations in Scratch. It does this by taking you through a step-by-step procedure to create an animated sprite - i.e. one of the images or characters that populate the Scratch universe. boyThe lesson will cover the basics of working with Scratch to develop animations. It assumes no prior knowledge of scratch coding by a learner. By the end of this tutorial, learners should have a basic familiarity with the Scratch program and its interface. Also, they should be able to recognize and identify basic commands and processes required for working in Scratch. Again, they should be familiar with the steps involved in creating simple animation using the Scratch platform. As an interactive programming platform and language, the Scratch program is intended to help improve your learning experiences by enabling you to think creatively and critically. It will also help you develop skills in working easily and well with others. For more on the Scratch platform, check out their website here. We would be going through the activities in this tutorial one step at a time. As such, the pace of delivery may be slower than most learners are used to. Below is an image of the Scratch GUI, which I describe in the next section

first screen

The Scratch GUI Platform


The Scratch GUI

Now, we will explore the Scratch generic user interface (GUI). To do this:

  • Navigate to the Scratch web platform by either typing https://scratch.mit.edu/ into your browser console, or by using Google search to navigate to the official Scratch web page
  • If you already have an account, go to the top right corner of the page and sign in. Otherwise register for a new account by going through their simple, straightforward account registration process
  • When you are ready to begin, move your cursor to the top left corner of the page, locate the tab named Create, click on it, then wait for the new page to load.

  • Looking at the Scratch interface for the first time, you notice that there are so many tabs and components. However, we will focus on the main ones which are described in the table below:

    Component What it does
    Menu Used to save and load files
    Code Blocks Contain reusable code blocks to control and add behaviour to your program
    Script Editor This is the area where you build or develop your code logic
    Stage This area displays your program's execution outputs
    Program Control This feature allows you to control the starting and stopping of your program
    Sprite Control Allows you to add, update, remove and define sprites
    Backdrop Control This feature allows you to add, update, remove or define backgrounds

    Some common components of the Scratch platform and what they do

    The following image provides a more concise and detailed overview of the Scratch GUI:


    Interface

    Annoted Scratch GUI platform

    We will learn about the various components identified above as we move along in our lessons

Selecting a Sprite

We will start off our project by selecting a SPRITE we would like to animate. Normally, the default sprite is the cat character which loads automatically when the Scratch program is started. However, you can change this by moving your cursor to the panel named SPRITE CONTROL, sometimes called the SPRITE INFO PANE. This is a panel that shows all the information about our sprites and also allows a user to manipulate sprites. Users can make sprites active, or can create or delete sprites from this pane. Clicking on the blue button with the white cat face at the bottom right side of the panel will bring up an option to choose a sprite from among several.

  • Now let us scroll down the options and select the sprite named Dog2. (I find him in the 9th row from the top). See image for reference. I like dogs. how about you?
  • dog2
  • Now let us go to the top left corner of the Choose a Sprite page and click on Back to take us back to the main interface
  • You will notice that there are two sprites in the STAGE. panel now: the default cat and the new sprite we just added, Dog2.
  • You also notice that upon being added to the interface, Dog2 becomes the active sprite
  • Since we want to work with only a single sprite, Dog2, let us remove the other sprite, Sprite1
  • To do this, move your cursor to the SPRITE CONTROL panel and click on Sprite1. This makes it the active sprite now
  • Click on the bin icon on the top right corner of the Sprite1 box to delete it. We now have only one sprite named Dog2
  • Adding Background

    Now we will add a background, to give our setting a real-world feel. To do that, let us move our cursor to the BACKDROP CONTROL panel and click on the blue button with the picture icon located at the bottom of the panel. This will bring up a list of backdrop options to choose from

  • Let us scroll down and select BLUE SKY from the list (Mine shows it is located on the 2nd row from the top). After selecting this option, move your cursor to the Back option at the top and click it to take us back to the main screen agan
  • Now you should have a screen similar to the one below


  • bog2_backdrop

    The selected Blue Sky Backdrop

    It is now time to animate our sprite which we will do in the next section

    Animating the Sprite

    We are going to animate our Sprite - Dog2. To that, move your cursor to the CODE BLOCKS panel, and click on the Events tab located 4th from the top (having a round yellow button)

  • Locate a button similar to this one button1 at the top of the list of options
  • Click on it then drag or move it into the SCRIPT EDITOR.
  • Again, on the same CODE BLOCKS panel, locate the tab named Motion and then from the lists of blue buttoned commands/options, select go to x:(number) y:(number) then drag or move it into the SCRIPT EDITOR panel. See this image button for reference. On my screen, this button is located on the 5th position from the top but yours may be different. Please verify carefully

  • In the SCRIPT EDITOR panel, click on the go to x:(number) y:(number) tab then drag and connect it to the other tab already in the editor. Reference the gif below for how to perform the previous 3 activities described so far
  • bog2_backdrop

    Animating the Sprite

  • Next, move your cursor to the CODE BLOCKS panel again, and then select Control from the list of options that displays. In the list, select the control option forever (On my screen, it is positioned at 3rd from the top).
  • Having selected it, drag it into the SCRIPT EDITOR panel, just like you did previously
  • In the SCRIPT EDITOR panel, move the control option forever towards the other options already present, and drop it below go to x:(number) y:(number) option.
  • See gif below for reference


    bog2_backdrop

    Adding control function

    Finishing

    We are almost done.

    • Now move the cursor to the CODE BLOCKS panel again, then select the Looks option from the list of codes (it is the purple button located 2nd on the list from the top)
    • From the list of options in the Looks code, on the right, select Next Costume, and drag it into the SCRIPT EDITOR panel.
    • .
    • Insert it into the Control option, forever. See the gif below on how to do this
    • bog2_backdrop

      Adding the looks function

    Now, the last but not least, step

    .
    • Move your cursor to the CODE BLOCKS panel one last time and select Control from the options on the left.
    • From the list of Control options, select the one which looks similar to this button btn (NOTE!! it is the first option on the list)
    • Now drag it to the SCRIPT EDITOR, then hover it near the bottom of the Next Costume option. The pane will automatically open to allow you to insert the button into it.
    • Once this is done, click the number 1 on the button, when it becomes highlighted, click the backspace of your keyboard to delete it and enter the following figure to replace it: 0.1. See the clip below on how to complete this
    • bog2_backdrop

      Controlling the animation speed

      Congratulations!!!. We've created our first sprite animation in Scratch.

    • To see how it works, move your cursor to the PROGRAM CONTROL panel and click on the green flag icon option that looks like this image flag
    • Upon clicking on the icon, you should see our sprite, Dog2, animated in a manner similar to the clip below
    • bog2_backdrop

      Animated Srite
    • To stop the animation, click the red octagon icon next to the flag icon on the PROGRAM CONTROL panel
    • Now, lets save our project. To do this, we move our cursor to the menu bar at the top, and then click on the tab labeled Untitled-#.
    • Doing this highlights the label, and we can either delete it outrightly or edit it with a preferred label. I will label my project Dog2 Animation
    • So, that's it. Thanks for sticking around for this tutorial


    Summary

    In this lesson, we familiarized ourselves with the Scratch program and GUI. We then created an animated sprite by first choosing a sprite then selecting a backdrop, and then used various menu functions to animate our sprite

    To learn more about Scratch, check out the following free resources: