An introduction to scratch animation programming which includes variables, exercises and examples project links.

1. SCRATCH
PROGRAMMING
Anjan Mahanta
anjan.mahanta@satreephuketipc.com

2. Who Computes?
● Scientists
● Engineers
● Businessmen
● Social scientists
● Artists
● FBI agents
● Brain surgeons
● Gamers
● Grandparents
2
Everyone uses information
in some way. Computers do
information processing.

3. Introduction to Scratch Programming
● SCRATCH is a programming language that lets you create your own interactive stories,
animations, games, music, and art.
● Scratch allows children to learn coding concepts and create interactive projects without
needing to learn a text-based programming language.
● This means they won’t be slowed down by their keyboard skills or the ability to remember
complex code.
● Scratch can either be used online in a web browser, or downloaded and used offline.
● Using the online editor doesn’t require any software to be installed on the school’s network and
means that children will always be using the latest version.
3

4. What can we do with scratch?
● Learn some computing concepts
● Learn some practical algorithms
● Use Scratch as computing tool
● Have fun with Scratch creating stories, games, art
4

5. Online Scratch Editor
● Children can access the online Scratch editor at https://scratch.mit.edu
● The online editor uses Flash so check that children will have access to a browser with a Flash
plugin.
● The Scratch Online editor can be used with or without Scratch Accounts.
● When using online Scratch with user accounts children will save their work online.
● Children use File → Download to your computer to save their work and File → Upload from
your computer to continue working on a project.
5

6. Online Scratch Editor
●
6

7. Scratch Environment
● Stage is at upper right (where actors act and information is displayed)
● Sprite is another name for actor
● Instruction menus/panel at left (instructions for the actors)
● A script is another name for program or method; a script tells the actor what to do
● Programming area in center; here is where we construct scripts for the sprites
7

8. Create & Sign In Account
● Create your own account by giving a username and password with an e-mail address.
● Once you create an account you will be signed into your account.
● Now you are ready to create your project or start your programming.
● All your programs will be saved into your account.
8

9. Create Project
●
9

10. Scratch Screen
●
10

11. 1. Start Moving
● Click on Events
● Drag When Clicked to the Scripts Area
● Click on Motions
● Drag Move 10 Steps to the Scripts Area
● Click on the Green Flag to Run
11

12. 2. Adding Sound
● Click on Sound
● Drag Play Drum 1 for 0.25 beats to the
Scripts Area
● Click on the Green Flag to Run
12

13. 3. Start a Dance
● Click on Motion
● Drag Move 10 Steps to the Scripts Area
● Replace with - 10.
● Click on Sound
● Drag Play Drum 1 for 0.25 beats to the
Scripts Area
● Change the drum to 5
● Click on the Green Flag to Run
13

14. 4. Again and Again
● Click on Control
● Drag Repeat 10 to the Scripts Area
● Place the Repeat 10 under the When Clicked
wrapping around the other blocks.
● Change the Repeat to 15
● Click on the Green Flag to Run
14

15. 5. Say Something
● Click on LOOKS
● Drag Say Hello for 2 Secs to the Scripts Area
● Place it above the Repeat 10 under the When
Clicked wrapping around the other blocks.
● Change the text to I did it!
● Click on the Green Flag to Run
15

16. 6. Key Pressed
● Click on EVENTS
● Drag When Space Key Pressed to the Scripts
Area
● Place it under the When Clicked block.
● Click on the drop down menu to look for the
other options for Key Pressed
16

17. 7. Change Color
● Click on LOOKS
● Drag Change Colour Effect by 25 to the Scripts
Area
● Place it under the When Space Key Pressed
block.
● Click on the green flag to run and press the
spacebar.
17

18. 8. Add a Backdrop
● You can add a backdrop to the stage.
18

19. 8. Add a Sprite
● Each object in Scratch is called a sprite.
19

20. 9. Add Sound
● Each object in Scratch is called a sprite.
20

21. 10. Change Costumes
● Each object in Scratch is called a sprite.
21

22. 11. Animate
● Each object in Scratch is called a sprite.
22

23. 12. Save
● Each object in Scratch is called a sprite.
23

24. Animate a Name
Make your name come to life!
Animate the letters by coding in Scratch. Add sound and music too.
24

25. LOOKS & MOTION
GOALS:
● Learn Scratch Programming Environment
● Learn the looks and motion menus
● Write a sequence of instructions
25

26. LOOKS MENU
● Has instructions for setting the color,
size, and visibility of a sprite.
26

27. HELLO - SCRIPT PROGRAM
● Choose the Event menu
● Drag when Clicked to your Script Window
● Choose the Looks menu
● Click on the “say hello” lego block
● Check your sprite behavior at the right
● Then click “say hello for 2 secs” place it under the When clicked block
27

28. HELLO - SCRIPT PROGRAM
● From the Looks Menu Select the Change color effect by 25
● Select again Change color effect by 25
● Select Hide
● Select Show
● Change size by 10
● Change size by 10 again
● Set size to 100%
28

29. HELLO - SCRIPT PROGRAM
● Say “hello” for 2 seconds
● Then change color by 25
● Then think “Hmm..” for 4 seconds
● Then change color by 75
● Then change size by 200
29

30. FLOW OF INSTRUCTIONS
● The first instruction is
done first
● The second instruction is
done second
● The last instruction is
done last
30

31. WAIT Instruction
● WAIT is needed to slow down
the acting so we can see or
hear it properly (computers
are too fast sometimes)
● Get the wait instruction from
the CONTROL menu
● Ignore the other menu
options for now
● Insert a wait in our looks script
31

32. HELLO - SCRIPT PROGRAM (OUTPUT)
32

33. EXERCISE - I
Write a script to do the following
● Double the size of the sprite
● Wait for 2 seconds
● Change the color of the sprite to green
● Wait for 4 seconds
● Change the whirl effect to 100
● Say “That’s all folks!”
33

34. EXERCISE - I (SOLUTION)
●
34

35. STAGE POSITION
35

36. MOTION MENU
How to locate and orient a sprite; moving a sprite.
Position on the stage
● Using the Looks menu, shrink our cat to 25%
● Click on the Motion menu
● Click to check the box for x-position and y-position
● Drag your cat around and note its x-y position
36

37. EXERCISES
In the Motion menu, drag the “goto xy” instruction to the script panel.
Edit the coordinates and click to see the sprite’s position
● A) goto x=200, y=0
● B) goto x=-200, y=0
● C) goto x=200, y=-100
37
Where does the cat go?

38. GLIDE-TO
● Drag the “glide-to” instruction into your script panel.
● Edit the coordinate values and click to see where your sprites goes.
38

39. EXERCISE - GLIDE
● Create a script to glide the sprite along the sides of a triangle.
● The first vertex of the triangle is (-100, -100). The second vertex is
(200, -100). The third vertex is (50, 100).
● Make sure you complete the triangle.
● Change the speed of gliding and run again.
39

40. EXERCISE - GLIDE (SOLUTION)
40

41. ANGLES AND DIRECTIONS
Making your sprite go this way and that way
EXERCISE
● Start at (-100, 100)
● Move 200 steps
● Turn right 90 degrees
● Move 200 steps
● Turn right 90 degrees
● Move 200 steps
● Turn right 90 degrees
● Move 200 steps
● Turn right 90 degrees 41
Use WAITS if needed to
make the motion look slow

42. ANGLES AND DIRECTIONS
Solution
EXERCISE
● Start at (-100, 100)
● Move 200 steps
● Turn right 90 degrees
● Move 200 steps
● Turn right 90 degrees
● Move 200 steps
● Turn right 90 degrees
● Move 200 steps
● Turn right 90 degrees 42

43. ASSIGNMENT
● Sprite starts at home base at x=-100; y=-50
● Sprite says “I hit the ball” for 20 seconds
● Sprite runs (east) 200 steps to 1st base
● Sprite changes color
● Sprite runs 200 steps to 2nd base (north: left turn from 1st base)
● Sprite doubles size
● Sprite says “I hit a double” for 5 seconds
43

44. ASSIGNMENT (Solution)
44

45. IF ON EDGE BOUNCE
45

46. REPETITION AND VARIATION
Goals
● Learn how to program with repetition
● Learn how to change costumes
● Learn to control execution (behavior) using special keys
46

47. The Sneezing Cat Script
● Repeat 20 times
● Say “AAAHHHH” for a short time
● Then grow the cat 5 bigger
47

48. Exercise
● Bring the cat size down to normal
● Briefly say “CCHHEEEW” Then shrink the cat’s size by 5
48

49. Exercise
Have the cat do a flip by rotating 20 degrees 18 times
● Repeat from the Control menu: set the number of repetitions to 18
● Rotate from the Motion menu: set the size of each small rotation to 20
degrees
49

50. SOLUTION
50

51. CHANGING COSTUMES
Another way to change the appearance of a sprite
51

52. Making a new costume to animate the bat
52

53. Use a loop to make the bat fly!
53

54. Changing Coordinates
● We can randomly set the location of the bat so it will “flutter”
● Set X to a random number
● Set Y to a random number
● Move the bat to location (X,Y)
● Of course, the bat should remain on stage!
54

55. Using Pick Random
● Click the stop sign at the stage upper right to stop the forever loop
● Do we need a wait in the loop? Try it to see the change in flying
55

56. Controlling the bat’s direction
● Let’s create multiple scripts
● Click space bar for random moves
● Click right arrow to move right
● Click left arrow to move left
● The bat will behave differently depending upon which key is typed!
● (So, could a gamer catch the bat?)
56

57. Multiple Interactive Bat Flight
57

58. Adding Background
● Click on the Stage icon at lower right
● Click on Backgrounds
● Click on bat icon (Sprite 1)
● Click on Scripts
● FLY AGAIN!
58

59. Assignment
● Add a behavior (script) to move the bat up with the up arrow.
● Add a behavior to move the bat down with the down arrow.
59

60. End of Part 2 : Outcomes
● Student should be able to write a program controlled by a loop, and
execute a script by clicking special keys.
● The student should also know how to use “costumes” to change the
appearance of a sprite.
60

61. AQUARIUM - PROJECT
1. Select the backdrop Underwater 3.
2. Select the Sprites - Fish1, Fish2, Fish3, Octopus, Starfish, Crab, Shark,
Trees1, Trees2, Trees3
61

62. AQUARIUM - PROJECT
3. In the Fish 1 Sprite enter the following code:
62

63. AQUARIUM - PROJECT
4. In the Sprites Fish2, Fish3, Octopus, Starfish, Crab, Shark enter the
following code:
63

64. AQUARIUM - PROJECT
5. In the Sprites Trees1 & Trees2 enter the following code:
64

65. AQUARIUM - PROJECT
5. In the Sprites Trees3 enter the following code:
65

66. AQUARIUM - PROJECT
The output of the project
66

67. Part 3: Input/Output, Variables, Simple Computing
Goals:
● Learn how the user and the program can communicate
● Learn how to compute with formulas
● Computing an average, perimeter of a geometric figure, etc
67

68. The SENSING Menu
Getting information from the user or some other machine
68

69. Asking the age of the user
● Program wants age of user (maybe to set a level of difficulty in a game)
● Program asks user for age
● User types in age
● Program stores the answer in a variable named “answer”
69

70. What is your age?
● Depends on who you are
● For one person it’s 12
● For another person it’s 27
● For yet another, it’s 19
● IT’S VARIABLE!
70

71. Use the SENSING menu
● Ask the user for age
● User types in age
● Result stored in “answer”
71

72. OutPut: Giving the user information with say answer
72

73. We can join text and a number to say things!
73

74. Storing a value in a variable; then saying it to the user
1. Set from variables menu
2. Say from looks menu
3. Set on data menu a variable name age “Make a variable” Name as Age
4. Join from the operators menu joins your text with the “answer”
74

75. Using variables in programs
● A script might have to remember information
● How far is the cat from the dog?
● How fast is the rocket moving?
● Where did the user click on the stage?
● What is my score in the game?
● What is the user’s skill level?
75

76. Computing C=A + B
● Make 3 variables - A,B,C
● Type in the values of A & B
● Set the value of C to the sum of A & B
76

77. EXERCISE
● Let the first number be A; say A=12
● And the second number be B; say B=15
● To compute the average _______
● So, the average of 12 and 15 = _______
77

78. Programming the average
● A is the first “variable”: A = _________
● B is the second “variable”: B = ________
● V is the third variable: V= __________
● Take the value of A, add the value of B, divide this sum by 2, then set the
value of V to this answer.
● V=(A+B)/2
78

79. Average Calculation
79

80. Exercise
● Put a Wait 5 Secs in the script between the two set operations for variable V
● Execute the script and observe the changes in the value of V.
80

81. Exercise
● Modify the average program
● Ask the user for a value of A
● Ask the user for a value of B
● Compute V as the average
● Report the average of the user
● Run the program for different As and Bs
81

82. Exercise
● Average 3 numbers
● Say 12, 33 & 21
82

83. Exercise
1. Ask the name of the user
2. Use a variable to save the input name
3. Ask the age of the user
4. Use the variable to save the age of the user
5. Display the followings..
Hello..!! xxxx you are yyy years old!
6. xxxx is the input name and yyy is the input age.
83

84. Solution
84

85. Exercise
1. Ask the user to enter first number
2. Save the value in variable number1
3. Ask the user to enter second number
4. Save the value in variable number2
5. Use a variable add to number1 + number2
6. Use a variable sub to number1 - number2
7. Use a variable mul to number1 * number2
8. Use a variable div to number1 / number2
9. Display the value of add and wait for 2 secs
10. Display the value of sub and wait for 2 secs
11. Display the value of mul and wait for 2 secs
12. Display the value of div and wait for 2 secs
13. Display Thankyou! 85

86. Solution
86

87. Project Links
1. Synchronized swimming
https://codeclubprojects.org/en-GB/scratch/synchronised-swimming
2. Archery
https://codeclubprojects.org/en-GB/scratch/archery
3. Catch the ball
https://www.cs.utexas.edu/~scottm/Scratch/BabyCatch-6-4-2009-1.ppt
87