<< Chapter < Page Chapter >> Page >

Scratch development environment

Image 6 shows a reduced screen shot of the Scratch 2.0 development environment. The text in Image 6 is too small to read in most cases. The main purpose of Image 6 is to show you the overall layout of the Scratch developmentenvironment as it appears in your browser.

Image 6. screen shot of the scratch 2.0 development environment.

Missing image.
Image 6. Screen shot of the Scratch 2.0 development environment.

A sprite-oriented programming environment

Scratch is a sprite-oriented programming environment. Every Scratch project consists of none, one, or more sprites and a stage upon which thesprites perform the behavior for which they are designed.

A sprite is an invisible entity to which the programmer can assign numerous behaviors. Each sprite can have one or more costumes. The assignmentof a visible costume to an invisible sprite causes the sprite to also become visible.

Costumes

The Scratch development environment provides a large gallery of costumes and you can create your own costumes if you don't find any in the gallery that suityour needs. A costume is nothing more than an image. The background in the image is normally transparent. You can import images from a varietyof different file types to create costumes. Probably the most difficult task in creating a costume from an imported image is causing the background tobe transparent (if the image didn't originally have a transparent background) . A built-in paint program is provided to assist in this task. You can alsouse programs such as the free GIMP image editor to deal with the background.

Note that one of the new features in v2.0 is to use both bitmap graphics and vector graphics. I will have more to say about this in a futuremodule.

Walking-boy costumes

The project shown in Image 4 uses five costumes from a family of seven costumes that are available in the gallery. Six of the seven costumes areshown in Image 7 . The project shown in Image 4 uses only the five rightmost costumes shown in Image 7 .

Image 7. costumes for a boy walking.

Missing image.
Image 7. Costumes for a boy walking.

As you can see, the five rightmost costumes describe five stages in a boy walking. The project shown in Image 4 cycles through the five costumes in such a way as to make it appear that the boy is walking. (This process is often called frame animation and dates back to or before the earliest days ofthe Disney productions.)

The stage

The stage is the rectangular area showing the cat in Image 6 . Different images can be assigned to the stage to serve as backgrounds for the performance of thesprites. The gallery contains a large number of background images, and you can also create your own. (One of those backgrounds is shown in Image 6 . ) Usually for a background image, you don't have the transparency issue discussed earlier so backgrounds for the stage can beeasier to create than costumes for sprites.

A moonscape background from the gallery was used for the project shown in Image 4 .

Controlling the behavior of a sprite

You control the behavior of a sprite by writing one or more scripts that belong to the sprite. In reality, each script is an event handler ofsorts. Usually you will have one event handler that executes when the user clicks the green flag at the top right of the stage in Image 6 . (In v2.0, a large green flag button appears when you open a project for viewing in your browser.)

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Teaching beginners to code. OpenStax CNX. May 27, 2013 Download for free at http://cnx.org/content/col11498/1.20
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Teaching beginners to code' conversation and receive update notifications?

Ask