Scratch exercise 68

Coloured bars

In this exercise your will create a motion and colour effect that responds to the movement of the mouse. Multiple bars (or stripes) react when the mouse passes over them.


1. Create a new Scratch game .. File>New



2. Right-click on the cat sprite beneath the stage and delete it.



3. Use the paint bucket to fill the stage background with black.



4. Create the following new variable (for all sprites) and hide them on the stage ..



5. Select the stage and then add these scripts to it ..

You will use these variables to ..



6. CLick the "Paint new sprite" button under the stage and set the Zoom/magnify to maximum zoomed out ..

Next, use the line tool in the paint window to draw a single vertical red line using the 5th biggest brush size ..

Set the costume centre as shown in the image above, about a quarter of the way down. There is no need to name this sprite.



7. Save your game .. File>Save. Name it something like "Coloured bars".



8. Add the following script to your first bar sprite ..

Notice how the x position is defined with the value from the "bar x-pos" variable at -233. Because the bar you drew should be exactly 13 pixels wide, this is calculated as the left edge of the screen (-240) minus approximately half the width of the sprite (13). You may need to edit this value in the stage script until the bar is precisely against the left edge of the screen with no gap showing.

If you have set the centre point correctly, the y position of -150 should be OK.

Test this sprite by pressing "B" and moving your mouse over it. It should rise and change colour when the mouse is near and fall back to its original position and colour when the mouse is moved more than 50 pixels away from its centre point.

DO NOT continue until this is working correctly.



9. Save your game again using File>Save.



10. Duplicate the first sprite and edit its first script to this ..

Notice that the x-position of this sprite will be the same as the first sprite plus "bar width" (13 pixels) (x 1). The * symbol is used to indicate multiplication.

Test the script by pressing the "B" key. You must ensure the bars meet with no gap between them. If there is a gap, try a value of 12 pixels for the "bar width" variable.



10. Save your game again using File>Save.



11. You must now duplicate your second sprite and edit its first script ..

Notice how its x-position is now at bar-x-pos + bar width x 2.



12. Continuing duplicating the sprite and advancing their x-position multiples .. *3, *4, *5, *6, *7 etc.


Keep going until the bars stretch across the screen like this ..

You will need approx 38-39 bar sprites.



13. Save your game again using File>Save.



14. Press the "B" key to start your game. Move the mouse over the bars.



15. Press the "E" key to stop your game.



16. Well done. You've finished. Experiment with modifying the value of these variables ..