1.2 Introduction to Snap

This lesson will introduce you to Snap, an online drag-and-drop editor for building computer programs. We’ll cover the different sections of the editor and all of the color-coordinated categories of code blocks. This tool is best used on a laptop, desktop or tablet computer. You can access it from a smartphone, but it wasn’t designed for a small screen size, which makes it difficuilt (maybe impossible) to access and scroll to all areas of the screen. If you haven’t already, go ahead and visit the link to Snap now, then look for the button to “Run Snap”.

Along the top of the page, you’ll find File, Cloud and Gear icons which provide access to different menus. The File menu provides the standard “New, Open, Save as…” options that we’d expect from a creative program. The Cloud menu allows you to Signup or Login with a Snap account, which can be used to save your work with Snap. I suggest creating an account for this now. The Gear menu provides advanced options that we won’t use in this course, but feel free to explore these and Snap as much as you like on your own!

Stage

To the far right, you’ll see a white box with a pointer/arrow inside. This is the Stage, and it’s where you will run and interact with your program. For example, if your program needs to display content to the user, it will be drawn here. Likewise if your program needs to prompt the user to enter a number, it will be displayed here. We’ll use the various blocks to control what happens here.

Sprite pane

Below the Stage is the Sprite pane. You start out with one default sprite named “Sprite” who looks like an arrow, and can add more using a button here. Sprites are visiual objects that can be moved around the Stage.

Script pane

In the middle of the screen is an empty area called the Script pane. This is where we’ll assemble code blocks to write our programs. Snap uses the term script to refer to a sequence of connected blocks. To tie this back to terminology from the last lesson, we’ll consider a whole Snap project to be our computer program, which might include multiple scripts.

Code blocks

Finally, at the top left, just below the menu is the Code Blocks area. As you click through the different colored categories of code blocks, you’ll see the blocks along the left side change. The blocks are organized into these categories according to their purpose.

First program

This lesson wouldn’t be complete unless we actually build something using Snap!

  1. Select the Motion category of blocks.
  2. From the blue blocks that are displayed, drag the “Move 10 steps” block into the Script pane (middle of the screen). You have now created a script that is 1 block long.
  3. Click this block in the script pane to run the script, and you should see your sprite on the stage move forward by 10 steps.
  4. Now drag in two more of these blocks and connect them to the first block. You should have a script that is 3 blocks long where all of the blocks say “Move 10 steps”.
  5. Click on this script and your sprite should now jump forward by a total of 30 steps. You may have expected a pause between each “10 step” movement, but we didn’t give the computer any instruction to “wait”, so it executes these instructions as fast as it can and they appear to us as one movement.
  6. Feel free to experiment with different combinations of these blocks as much as you want, and if your Sprite jumps off the screen you can move it back to the center using the “go to x: 0, y: 0” block.
  7. If you like, you can Save this project to your Cloud account and name it “1.2 Intro”. It can be a good habit to name your Snap projects with the Chapter and Lesson number they belong to, which makes them easier to refer to later.

In lesson 1.3 Loops, we’ll learn how to use the power of code to make our job easier.