1 / 60

Introducing Scratch

Introducing Scratch. Learning resources for the implementation of the scenario pSkills@ced.tuc.gr. Purpose and contents. Present the stages of the learning scenario entitled “Introducing Scratch”

helen-thomas
Download Presentation

Introducing Scratch

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • 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 • 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 • 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 • 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 animationSTAGE 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 • Video Tutorials • 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 contactSTAGE 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) • When the mouse gets the event message then this program block runs • 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

  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”

More Related