1. Introducing Scratch Learning resources for the implementation of the scenario pSkills@ced.tuc.gr

2. Purpose and contents Present the stages of the learning scenario entitled “Introducing Scratch” Provide additional resources designed to support the teacher and student in learning how to develop and use this scenario

3. The stages of the scenario 1.Introduction of the topic of computer animation Show a video presentation about the making of movies such as "Alice" or "Avatar" Introduction of Scratch Show some (2-4) programs to demonstrate the possibilities of Scratch 2.First contact Introduce the user interface of Scratch (panels, menus, buttons and functions) Introduce the programming style of Scratch Make the first, very simple program 3.Our first project (Show how to create "Catch the mouse" project) Make a sprite move Make another sprite move randomly Event handling How to change background 4.Publishing a Scratch project Show how to publish student project on Scratch webpage in a gallery

4. Resources supporting the scenario 1. Introduction of the topic of computer animation Resource types: Slides1, Slides2, Slides3 2. First contact Resource types: Slides1, Slides2, Slides3 3. Our first project (Show how to create "Catch the mouse" project) Resource types: Slides1, Slides2, Slides3, Slides4, Scratch project Optional resource: Screencast 4. Publishing a Scratch project Resource types: Slides1

5. Introduction of the topic of computer animation STAGE 1

6. Computer animation (1/3) Computer animation is the process used for generating animated images by using computer graphics. (http://www.celebritynetworth.com/wp-content/uploads/2010/09/animator-300x168.jpg)

7. Computer animation (2/3) Short video about the computer animated film Avatar: (http://www.youtube.com/watch?v=xq_nRfoBSm0)

8. Computer animation (3/3) Short video about making computer animations (http://www.youtube.com/watch?v=WgBf74_R2n0)

9. Introduction of Scratch (1/4) You can find Scratch on the Web: http://scratch.mit.edu/

10. Introduction of Scratch (2/4) What is Scratch? – a programming language – a tool to create interactive stories, animations, games, music, and art – a portal where your projects can be shared

11. Introduction of Scratch (3/4) Scratch Portal helps you to be informed by – Scratch Tours Scratch Tours – Video Tutorials Video Tutorials – ScratchEd ScratchEd

12. Introduction of Scratch (4/4) Visual overview of Scratch (http://www.celebritynetworth.com/wp-content/uploads/2010/09/animator-300x168.jpg)

13. Demonstartion of Scratch (1/6) You can find a lot of projects on web portal of Scratch

14. Demonstartion of Scratch (2/6) Click on the name of a project to get the FLASH based application Start application by green flag

15. Demonstartion of Scratch (3/6) Use the 'Search' box to find projects by special requirement Search for the expression 'transporter' Select a project from the list

16. Demonstartion of Scratch (4/6) Search for this project and try it: 'transporter'

17. Demonstartion of Scratch (5/6) Search for this project and try it: 'Maze Game'

18. Demonstartion of Scratch (6/6) Search for this project and try it: 'Simple Paint'

19. First contact STAGE 2

20. User interface of Scratch (1/4) When you open Scratch this is the first page The screen is divided into 3 main parts

21. User interface of Scratch (2/4) On the left is the code block area There are eight different blocks affecting appearance, control, movement and using other devices block area at the left

22. User interface of Scratch (3/4) The middle is the work area where code is dragged and dropped

23. User interface of Scratch (4/4) The right side is divided in two The top is the stage, where you can see what your programming can do The bottom is for choosing the type and number of sprites

24. Programming (1/5) Drag and drop program blocks from the palette to the sprite area

25. Programming blocks (2/5) There are 8 types of block all colour coded Have a table 2 columns 4 rows with each type and a keyword or two underneath eg. MOTION – all movement

26. To make a program (3/5) Take some of the blocks and 'snap' them together BUT in a certain order CONTROL – starting and repeating actions LOOKS, SOUND, MOTION – the type of movement and action OPERATOR, SENSING – control movement

27. Programming style (4/5)

28. Programming style (5/5) You can get help by right clicking on the block and selecting from the pop-up menu

29. Simple program (1/5) Make a simple program (Cat sprite displays 'Hello' message, then clear the message and repeat this again for 10 times) Create a new Scratch project ('File' menu, 'New' item)

30. Simple program (2/5) Select default cat sprite (Click on 'Sprite1') Select 'Looks' category from the code block area

31. Simple program (3/5) Drag two 'Say...' blocks ( ) Edit the inner parameter and join the blocks Drag 'Repeat...' block from Control category and impact the previous blocks into it

32. Simple program (4/5) Drag 'when... clicked' block from the Control category and join it to the beginning of other block

33. Simple program (5/5) Click on green flag and watch the program how it works!

34. Our first project (Show how to create "Catch the mouse" project) STAGE 3

35. Make a sprite move (1/3) Press on the green flag to run your program and press on the red one to stop it

36. Make a sprite move (2/3) Open Scratch and select the cat sprite Start with this code Select a certain key

37. Make a sprite move using the keyboard (3/3) Add keys to other directions (down, left, right) Rewrite related parameters (use the „change …” function) Press on the green flag and see what happens if you press certain buttons

38. Make another sprite move randomly (1/3) Choose new sprite from file Select the mouse sprite

39. Continual movement (2/3) Start with this code and set the sprite to the left upper corner Use the function ‘Show’ for the mouse sprite to appear Click ‘glide’ into ‘forever’ so that the mouse always moves continuously

40. Random movement (3/3) Use „pick random …” function to generate uncontrolled movement Choose numbers from the 'range' for the x and y directions Press on the green flag

41. Handle the event of „catch”(1/5) We are going to program the cat to catch the mouse Select the cat sprite first to program Add „if” with condition „touching” Select touching object from the list

42. Handle the event of „catch”(2/5) Add „broadcast …” to send an event message to all other objects Add „play sound …” to hear sound Add „say …” to get written message on the screen

43. Handle the event of „catch”(3/5) Embed „if” into a „forever” function Press on the green flag

44. Handle the event of „catch”(4/5) We now program the mouse Select the mouse sprite to get its script Add „when I receive …” function and select „catchYou” message

45. Handle the event of „catch”(5/5) Use „hide” to clear mouse sprite from the screen and „wait” for waiting for the new stage background Use „go to …” function to the new starting position of mouse spirit Use „show” function to get mouse sprite Press on the green flag and see what happens When the mouse gets the event message then this program block runs

46. Changing background picture (1/5) You need to change the background picture when the cat catches the mouse Select „Stage” to get its script

47. Changing background picture (2/5) Select „Backgrounds” tab You can add new backgrounds by clicking on „Paint”, „Import” or „Camera” buttons

48. Changing background picture (3/5) Click on „Import” button Select suitable background picture from the list

49. Changing background picture (4/5) Click on „Scripts” tab to get its script Start with this code Add „catchYou” parameter to „when I receive …” function Add „wait …” function Add „next background” to change picture

50. Changing background picture (5/5) When the cat sprite catches the mouse, this generates „catchYou” event message This message can be captured by the mouse sprite and the background called „Stage” You can see four different pictures as the event message has been captured by the „Stage”

51. Publishing a Scratch project STAGE 4

52. Sharing your project (1/10) To upload a scratch project you need an account. Please see your teacher for this information. Your first step is to upload your project to your account.

53. Sharing your project (2/10) Open your project in the Scratch editor Click on 'Share this project' button

54. Sharing your project (3/10) Fill the form with your account data

55. Sharing your project (4/10) If you are successful then you can see the uploaded project in your profile

56. Sharing your project (5/10) Check to see your project working on-line on the site page

57. Sharing your project (6/10) You have to create a gallery to share your project Click on 'my stuff' Galleries box Click on 'create a gallery' link

58. Sharing your project (7/10) Fill data fields and press 'Create'

59. Sharing your project (9/10) Add your project to the empty gallery

60. Sharing your project (10/10) To share your projects to other sites goto http://scratch.mit.edu/forums/viewtopic.php?id=191