a. the costumes tab and costumes panel

Size: px

Start display at page:

Download "a. the costumes tab and costumes panel"

Derick Kelley
5 years ago
Views:

space When you click the Costumes tab you see the Paint Editor area as well as the current sprite s costumes.

This is especially useful when editing costumes. costume 89x0 The cat sprite has costumes by default. A costume is the current or alternative picture of a sprite.

0 When Scratch starts up, the Scripts tab near the top of the screen is to the front, revealing the Motions palette and the scripting area.

1 Skills Training a. the costumes tab and costumes panel File This is the Costumes tab Costume Clear Import This is the Costumes panel costume 93x0 This is the Paint Editor area backdrop Sprite Give yourself more working space When you click the Costumes tab you see the Paint Editor area as well as the current sprite s costumes. You can increase the amount of working space on the right by reducing the size of the stage. To do that, click the Edit menu and choose Small stage layout. This is especially useful when editing costumes. costume 89x0 The cat sprite has costumes by default. A costume is the current or alternative picture of a sprite. costumes Click the Costumes tab to see the current sprite s costumes. Click the Scripts tab to see the current sprite s scripts (You cannot see scripts and costumes at the same time). 0 When Scratch starts up, the Scripts tab near the top of the screen is to the front, revealing the Motions palette and the scripting area. To the right of the Scripts are two other tabs, Costumes and Sounds. Click the tabs now and have a look at the screen changes. You will notice some familiar symbols and a few new ones. Read the pop-up tool tips. The Sounds tab opens the Sound editor and there is a a meow sound to match the default cat sprite. Leave the Sound editor until page3. Click the Costumes tab to open the Costumes panel. Take a closer look at what you see. The large chequered area on the right is the Paint Editor area. An enlarged image of the current sprite sits in the centre. If you click the image you get an orange bounding box to tell you that it is selected for editing. Down the right hand side there is a Tool Bar. It s not in the picture above because, later in Chapter 3 you can learn about the tools and how to use them to draw and paint your own sprites and costumes. For now, we ll just concentrate on Costumes. Click costume and then click costume. You can manually animate the sprite by clicking the costume thumbnails and you will see the cat on the stage, the sprite thumbnail and the image in the Paint Editor all animate too. You can type a new name for the costume if you like. The following pages will introduce the code blocks that let you programme a sprite s costumes. Costume blocks are in the Looks palette.

Skills Training B. the next costume block. Stroll in the Desert _0 desert_stroll www.scratch.mit.edu/projects/3007384 To do: Animate a sprite.

backdrop Sprite Get the desert backdrop from the Backdrop Library. Extra: Make the cat say something as he strolls in the desert. e.g. Walking is great exercise. Thanks.

. The next costume in a forever block loop simply iterates (repeats) through costume to costume to costume to costume and so on.

SAVE your work: if you are using the Scratch online editor your work is automatically saved once you are logged in.

Bats in the Wood www.scratch.mit.edu/projects/3007430 To do: Animate several sprites _0 bats_in_wood This forever block has 5 blocks inside its loop.

2 Skills Training B. the next costume block. Stroll in the Desert _0 desert_stroll To do: Animate a sprite. Click the Scripts tab to build your code costume 93x0 This forever block expands to fit in each new block. It now has 4 blocks in its loop. backdrop Sprite Get the desert backdrop from the Backdrop Library. Extra: Make the cat say something as he strolls in the desert. e.g. Walking is great exercise. Thanks. costume 89x0. This script is similar to the scripts you ve already used in Chapter. Get the next costume block from the Looks palette (picture p. 3).. The next costume in a forever block loop simply iterates (repeats) through costume to costume to costume to costume and so on. Click the green flag and observe the activity in the sprite and costume thumbnails. SAVE your work: if you are using the Scratch online editor your work is automatically saved once you are logged in. If you are using the Scratch offline editor you need to save your work. When you name and save your project the name can be seen in the bar above the stage. e.g. _ desert_stroll. Bats in the Wood To do: Animate several sprites _0 bats_in_wood This forever block has 5 blocks inside its loop. bat-a 5x5 backdrop bat bat bat 3 bat 4 Get the woods backdrop from the Backdrop Library. bat-b 0x03 The bat sprite has costumes by default.. Get the bat from the library before deleting the cat. The code is much the same. Drag the cat s code to the bat s thumbnail. Delete the cat.. Add the new block to the script then duplicate the bat three times. The code copies with each bat. 3. Change the turn and move values slightly for each bat to make each one move differently.

Skills Training C. graphic Effects & size blocks To do: Animate a sprite.

edu/projects/3007444 _03 squawking_parrot (A) The forever block has 6 blocks inside its

parrot-a 7x43 Parrot backdrop Q: What two actions happen simultaneously when the green

as shown. The parrot comes with two costumes, parrot-a and parrot-b.

They start at the same time when the green flag is clicked.

The parrot will also say Squawk repeatedly, in a speech balloon with a half second pause

The colour effect has a range from 0 to 00 (see below).

The ghost effect makes the sprite invisible at 00.

3 Skills Training C. graphic Effects & size blocks To do: Animate a sprite. Add colour effects and sound. 3. Jungle Colours _03 squawking_parrot (A) The forever block has 6 blocks inside its loop. Squawk! parrot-a 7x43 Parrot backdrop Q: What two actions happen simultaneously when the green flag is pressed? (B) parrot-b 3x35 The parrot sprite has costumes by default. Experiment and find out.. Get the parrot and the jungle lake backdrop from the libraries and script the sprite as shown. The parrot comes with two costumes, parrot-a and parrot-b.. This animation has two separate scripts (A) and (B). They start at the same time when the green flag is clicked. The first script animates the parrot and produces a riot of colour through the change colour effect block. The second, separately instructs the sprite to play the background cricket sound. The parrot will also say Squawk repeatedly, in a speech balloon with a half second pause between each squawk. the effects list Explore the effects list. The colour effect has a range from 0 to 00 (see below). Other effects in the drop list range from 0 to 00. The ghost effect makes the sprite invisible at 00. To restore a sprite to its original setting, set the particular effect to 0 or use the clear graphic effects block. It s a good idea to put clear graphic effects in the set up code just after the green flag block but before the forever loop. The change size and set size blocks have no upper limit. You can set the size of a sprite to any amount. The Scratch colour effects range based on the order of colours in the spectrum Does the order of the blocks in the loop make a difference? The Forever Loop The 'C-shaped' forever block doesn t have a bump at the bottom, so it can't have script locked into it from underneath. Code outside a forever loop can only run if it s triggered separately by a green flag, a broadcast or a key press. Two scripts running at the same time are known as parallel or concurrent scripts. (Broadcasts are explained on page 57.)

Skills Training D. the sound editor this is the sound editor New sound: cricket 00:00. cricket Click the Sound tab to see the Sound Editor.

Sound Sources You can choose a sound from the Sound Library, Record your own voice or music, or Import a sound from a folder on your own computer.

Edit Effects drum set drum duck eggs fairydust finger-snap hand clap hip hop horse gallop horse human beatbo human beatbox medieval meow meow motorcycle passing owl

sound effect you want is not in the library you may find it on the internet. There are many web sites offering free sound effects.

When you have found the sound you want download to your computer and use the Upload from file button in the Sound Editor to bring it into Scratch.

How many sounds are in the library? If your computer has a sound card and speaker, listen to some of the sounds. Try recording. cave 00:07.

4 Skills Training D. the sound editor this is the sound editor New sound: cricket 00:00. cricket Click the Sound tab to see the Sound Editor. Click the New Sound button to open the Sound Library. Sound Sources You can choose a sound from the Sound Library, Record your own voice or music, or Import a sound from a folder on your own computer. Be advised: Large size sound files can effect the speed of your animation. The number under the sound s name is the length of the sound in minutes and seconds. Edit Effects drum set drum duck eggs fairydust finger-snap hand clap hip hop horse gallop horse human beatbo human beatbox medieval meow meow motorcycle passing owl party noise Microphone volume: scream-male screech shaker singer singer sneeze-femal sound fx on line Sound Blocks Importing sounds into your Scratch project: If the sound effect you want is not in the library you may find it on the internet. There are many web sites offering free sound effects. Start by searching for free soundfx in your search engine. Use only royalty free sounds. When you have found the sound you want download to your computer and use the Upload from file button in the Sound Editor to bring it into Scratch. The mp3 file format works best in Scratch. Motion Sound Control Experiment in the the Sound Editor and get inspiration from the sounds in the library. How many sounds are in the library? If your computer has a sound card and speaker, listen to some of the sounds. Try recording. cave 00:07.4 To do: Get the cave sound from the sounds library and add a sound effect to Bats in the Wood, Project.. p. The meow sound is there from the start. Your sound is added to the list after it has been brought in from the library or from another source. sound blocks Try this: Experiment with the blocks in the Sound palette with drum beats, notes, rests and musical instruments. Create your own musical composition or, if you like, why not replicate electronically, your favourite song or tune. 3

Skills Training e. easy new-costume tricks 4. Rolling Ball _04 rolling_ball www.scratch.mit.edu/projects/300746 To do: Duplicate and rotate a costume.

Don t accidentally rotate the first costume. Make sure it s the duplicate costumes you are rotating.

You want to make the ball roll across the stage, bounce on an edge and roll back across the stage continuously. Try your own ideas first then try this.

(a) Duplicate the costume three times. The soccer ball has only one costume and you will need four. Duplicate again and again until you have four costumes.

(B) (d) Create script to move the ball Create script (B) to move the ball across the stage. The two scripts must run in parallel when the green flag is clicked.

5 Skills Training e. easy new-costume tricks 4. Rolling Ball _04 rolling_ball To do: Duplicate and rotate a costume. soccer ball Clear Import Right click soccer ball 65x65 duplicate delete save to local file backdrop Soccer Ball soccer ball 65x65 Make two more costumes and rotate each another 90º. Don t accidentally rotate the first costume. Make sure it s the duplicate costumes you are rotating. Moving a sprite across the stage is one thing, but moving a ball across the stage wouldn t make much sense. It should roll. You want to make the ball roll across the stage, bounce on an edge and roll back across the stage continuously. Try your own ideas first then try this. Try the turn clockwise and turn anticlockwise blocks. Another method is to use costumes. Begin by getting the Soccer ball from the library and follow these steps. (a) Duplicate the costume three times. The soccer ball has only one costume and you will need four. Duplicate again and again until you have four costumes. (b) Rotate each duplicate 90º, 80º, 70º Highlight costume. In the Paint Editor turn the ball 90º. The turning handle should face to the right. Turn the third costume 80º. Turn the fourth 70º. (B) (d) Create script to move the ball Create script (B) to move the ball across the stage. The two scripts must run in parallel when the green flag is clicked. Work on getting the correct number of steps and correct wait time, and you can make the ball appear (c) Click the tab to Script (A) This script just rotates the ball when the green flag is clicked. The ball simply rotates itself but remains in the centre of stage. You need to script the ball to move left-right, rightleft while rotating at the same time. That will require a second script with a forever loop. Alternatively, you can add more code to the script you already have. Try two parallel scripts and one single script. Two scripts gives you two wait times. 4 Q. Can you make the cat appear to dribble the ball across the stage? Q. Can you make a sprite do a cartwheel across the stage?

Skills Training 5. Dancing Girl www.scratch.mit.edu/projects/3007804 To do: Duplicate and flip a costume.

about costumes, sound and repeat loops to create a dancing girl.

4 ballerina-c ballerina-d Right click duplicate delete save to local file This is the flipped duplicate of costume 4 5 (a)

Feel free to choose your own music if you like. Script Ava as follows.

ballerina_e NOTE: The next costume block would be less fun for this dance routine. Better to use the switch costume block.

Listen to how it matches the beat. Ava has 4 costumes and you can easily make a mirror costume from costume #4.

Click the flip left-right button in the top right corner. You now have costume #5 which is a mirror-image of costume #4.

6 Skills Training 5. Dancing Girl To do: Duplicate and flip a costume. _05 danceroutine ballerina-e Clear Import Flip left-right ballerina-a 3 ballerina-b backdrop Ballerina Use all you learned about costumes, sound and repeat loops to create a dancing girl. A project like this is achieved by trying an idea, testing it out and having fun. Keep track of the split seconds. 4 ballerina-c ballerina-d Right click duplicate delete save to local file This is the flipped duplicate of costume 4 5 (a) Import the beat and listen to it. (A) (B) Import the sound human beatbox from the Sound Library. Feel free to choose your own music if you like. Script Ava as follows. (A) the beat, (B) Ava standing introduces herself and her dance routine. (b) Duplicate costume #4. ballerina_e NOTE: The next costume block would be less fun for this dance routine. Better to use the switch costume block. Remember that costume #, ballerina-a is a standing pose. Use repeat loops to run a routine again and again. Listen to how it matches the beat. Ava has 4 costumes and you can easily make a mirror costume from costume #4. Duplicate costume 4. Click the image in the Paint Editor to select it. You get an orange coloured surrounding box. Click the flip left-right button in the top right corner. You now have costume #5 which is a mirror-image of costume #4. Name each costume. (c) Code the inside loop (C) (i) (ii) This routine takes 4 seconds right-leg out stand left-leg out stand squat The e-a-d-a routine is repeated 4 times. Then costume ballerina-b is activated just once as it s outside the loop. You need two more repeat loops wrapped around this one but first put a wait 0.5 secs block at X. Continued next page. 5

Skills Training (A) Dancing Girl continued from previous page (d) Code the outer loops around the inner loop.

Loop, The red inside loop (a) to (d) is scripted and costume ballerina-b (e) plus a wait block are next after the loop. Put Loop (green) around Loop and (e).

(i) (ii) (e) Complete scripting the performance. Finish the dance routine with Ava in a standing position, costume ballerina-a (g) and give her some words to say (h).

If you add up the seconds Ava uses in her introduction, you may not want the music beat to start simultaneously on the green flag. (f) Complete scripting the sound.

Before the forever loop? inside the loop before the play sound block? or inside the loop after play sound?

Play around with the beat and dance routine and get as much enjoyment you can from it. Nested Loops A loop within a loop is known as a nested loop.

Next page should help. right-leg out stand left-leg out (a) (b) (c) Q. How many nested loops are in this script? Q. For how many seconds does the script run - introduction, dance and That s all folks, included?

7 Skills Training (A) Dancing Girl continued from previous page (d) Code the outer loops around the inner loop. Use the picture below as you continue to assemble your script. You can also learn how nested repeat loops work. Loop, The red inside loop (a) to (d) is scripted and costume ballerina-b (e) plus a wait block are next after the loop. Put Loop (green) around Loop and (e). To follow the pattern, add costume ballerina-c and a wait block after Loop. Wrap a repeat X Loop 3 (blue) around as shown. (i) (ii) (e) Complete scripting the performance. Finish the dance routine with Ava in a standing position, costume ballerina-a (g) and give her some words to say (h). Lock the dance routine, script (C) into Ava s introduction (B). The performance will now begin when the green flag is clicked. If you add up the seconds Ava uses in her introduction, you may not want the music beat to start simultaneously on the green flag. (f) Complete scripting the sound. You must add a long wait before the play sound block. You have two decisions to make. How long should the wait last? Where should you insert the time lapse? Before the forever loop? inside the loop before the play sound block? or inside the loop after play sound? (B) (C) NOTE: The colours on the loop blocks are only for explanation. They are not part of Scratch. (g) Experiment and have fun! Play around with the beat and dance routine and get as much enjoyment you can from it. Nested Loops A loop within a loop is known as a nested loop. Code in the innermost loop is activated first. Try following the precise sequence of activity which follows triggering the Event by clicking the green flag. Next page should help. right-leg out stand left-leg out (a) (b) (c) Q. How many nested loops are in this script? Q. For how many seconds does the script run - introduction, dance and That s all folks, included? Q3. Is it correct that the costume you made yourself, ballerina-e is activated 3 times? (d) stand squat (e) Loop (a), (b), (c) and (d) are the main routine. This repeats X4 and the routine finishes outside the loop at (e) with ballerina-b seconds. splits (f) (g) (h) Loop Loop 3 (a), (b), (c), (d) and (e) are repeated X4. Outside the loop at (f) with ballerina-c seconds. (a), (b), (c), (d), (e) and (f) are repeated X. and finish at (g) with ballerina-a + seconds That s all folks. 6

Concept Training the language of code. Nested Loops and Events When locked into each other, Scratch blocks make a set of instructions that the computer understands.

First you use the pen up block, to lift the pen up off the 'paper' - so to speak.

You could tell it to draw one straight line, then turn 90º and to repeat those two actions over and over (to loop four times).

- introducing Nested Loops with the Pen palette To tell the computer to start drawing the square in the first place, you create a starter event with the green flag block.

8 Concept Training the language of code. Nested Loops and Events When locked into each other, Scratch blocks make a set of instructions that the computer understands. The computer reads the script from top to bottom in sequence. Getting the computer to draw shapes with Scratch pen commands is a good way to learn more about loops, especially nested loops. First you use the pen up block, to lift the pen up off the 'paper' - so to speak. If you want the computer to draw a square, use the pen down command and instruct it to draw four lines and four right angles. You could tell it to draw one straight line, then turn 90º and to repeat those two actions over and over (to loop four times). After looping through four lines and angles the square is drawn and you simply use the pen up command again. - introducing Nested Loops with the Pen palette To tell the computer to start drawing the square in the first place, you create a starter event with the green flag block. In programming language, an event is when one action causes another action to happen. e.g. Click a flag to start drawing a square, Press the spacebar to shoot bullets, Click a sprite to make it spin. The drawing, shooting and spinning are caused by an event handler. In Scratch event handler blocks that cause events to happen are the hat shaped blocks found in the Events palette. They all begin with the word when. We are now going to illustrate loops and nested loops by getting the computer to draw three squares.. Use the Pen to Draw 3 Coloured Squares. This exercise will demonstrate the concept of nested loops and also introduce the Pen palette. We will draw 3 squares on top of each other - not as illustrated. Every Scratch sprite owns a pen. You instruct the sprite to use its pen with the pen command blocks. Saved online as: _06 ThreeSquares (a) (b) (c) (d) (e) (f) (g) (h) (i), (k), (m),(o), (r), (t), (v), (x) (j), (l), (n), (p), (s), (u), (w), (y) (q), (z) (a) (b) (i) to (p) (r) to (y) (c) to (j) (c), (e), (g), (i) (d), (f), (h), (j) Q. Where is the pen set to red Q. Where is it set to green? Q3. Where is it set to blue? You can even hide the sprite and still use its pen. The hide block is in the Looks palette. (See bottom next page). In this lesson we don t quite make the cat sprite disappear, we shrink him so small that he doesn t block our view of the action! If you want a particular colour, line thickness or length of side, you tell the computer all these things first. This is known as initialising and it is the purpose of commands (a) to (f). You can change these settings later in the script. Our three squares will have different colour outlines but no inside colour. It might appear complicated until you look at it closely. When you have constructed the script, run the programme. Then take time to read the script yourself. Consider the purpose of each block and what each block is instructing the computer to do. Don't worry about the wait blocks as they just slow down the action so that you can see it happening. They don t affect the sequence of the code. The pen color numbers in (c), (q), (a) correspond to the color code as shown in the picture on page. Motion 7

Concept Training. Random Stamped Images www.scratch.mit.edu/projects/300750 Use the stamp and pick random blocks to scatter 00 stars all over the stage.

clear the stage of previous show make a star sprite do the following 00 times print an image of the star.

If you like the book and would like to continue beyond this point please buy the book www.scratch.mit.

Decide on the starting position of the original sprite and work out the x and y offsets (distance between x and y position of each stamped image.

When you stamp the image of a sprite you see both the sprite and the stamped image also. The pick random block is in the Operators palette.

_08 squares_in_order start the performance!

BUY A BOOK in main menu (a) (b) (c) The nested loop runs six times at first after each 6-loop iteration the sprite goes back to starting x (left) and

You should see one extra square that you don't really need! Try to drag the extra square with your mouse pointer. Try to drag the stamped images.

9 Concept Training. Random Stamped Images Use the stamp and pick random blocks to scatter 00 stars all over the stage. Change the colour of each star to give a confetti effect. _07 starsdisarray start the show! clear the stage of previous show make a star sprite do the following 00 times print an image of the star. Stamp Rows and Columns pick a point anywhere on the stage change colour of next image What is special about the numbers in the two pick random blocks? If you like the book and would like to continue beyond this point please buy the book or contact me at Use the stamp block in a nested repeat loop to arrange 8 images of a square sprite in 3 rows of 6 (as shown). Decide on the starting position of the original sprite and work out the x and y offsets (distance between x and y position of each stamped image.) seamus@weandus.ie. The stamp block in the Pen palette 'stamps' the image of a sprite on the stage. When you stamp the image of a sprite you see both the sprite and the stamped image also. The pick random block is in the Operators palette. Use this block to get the computer to pick any number between (and including) the two numbers you type in the input windows. _08 squares_in_order start the performance! show the original sprite at the start position of original sprite clear the stage of previous performance repeat three 6-loops and make 3 rows Click BUY A BOOK in main menu (a) (b) (c) The nested loop runs six times at first after each 6-loop iteration the sprite goes back to starting x (left) and goes down to start the next row 3 times Experiment: Try this! Don't hide the original sprite at the end of the script and see what happens. You should see one extra square that you don't really need! Try to drag the extra square with your mouse pointer. Try to drag the stamped images. The square that can be dragged is the original sprite. The other 8 images are like rubberstamped images of the original. Better hide the original when the loops have completed their final iteration. hide the original sprite at the end When you use the hide block anywhere in a script, it's always a good idea to put the show block immediately after the hat block that triggers the script. What happens in the nested loop six times? (a) stamps an image (b) moves 40 steps to the right (c) changes the colour for the next stamped image 8

Scratch for Beginners Workbook

Scratch for Beginners Workbook for Beginners Workbook In this workshop you will be using a software called, a drag-anddrop style software you can use to build your own games. You can learn fundamental programming principles without