610 likes | 734 Views
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”
E N D
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” • Provide additional resources designed to support the teacher and student in learning how to develop and use this scenario
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
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
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)
Computer animation (2/3) • Short video about the computer animated film Avatar: (http://www.youtube.com/watch?v=xq_nRfoBSm0)
Computer animation (3/3) • Short video about making computer animations (http://www.youtube.com/watch?v=WgBf74_R2n0)
Introduction of Scratch (1/4) • You can find Scratch on the Web: http://scratch.mit.edu/
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
Introduction of Scratch (3/4) • Scratch Portal helps you to be informed by • Scratch Tours • Video Tutorials • ScratchEd
Introduction of Scratch (4/4) • Visual overview of Scratch (http://www.celebritynetworth.com/wp-content/uploads/2010/09/animator-300x168.jpg)
Demonstartion of Scratch (1/6) • You can find a lot of projects on web portal of Scratch
Demonstartion of Scratch (2/6) • Click on the name of a project to get the FLASH based application • Start application by green flag
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
Demonstartion of Scratch (4/6) Search for this project and try it:'transporter'
Demonstartion of Scratch (5/6) Search for this project and try it:'Maze Game'
Demonstartion of Scratch (6/6) Search for this project and try it:'Simple Paint'
User interface of Scratch (1/4) • When you open Scratch this is the first page • The screen is divided into 3 main parts
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
User interface of Scratch (3/4) • The middle is the work area where code is dragged and dropped
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
Programming (1/5) • Drag and drop program blocks from the palette to the sprite area
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
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
Programming style (5/5) • You can get help by right clicking on the block and selecting from the pop-up menu
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)
Simple program (2/5) • Select default cat sprite(Click on 'Sprite1') • Select 'Looks' category from the code block area
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
Simple program (4/5) • Drag 'when ... clicked' block from the Control category and join it to the beginning of other block
Simple program (5/5) • Click on green flag and watch the program how it works!
Our first project (Show how to create "Catch the mouse" project)STAGE 3
Make a sprite move (1/3) • Press on the green flag to run your program and press on the red one to stop it
Make a sprite move (2/3) • Open Scratch and select the cat sprite • Start with this code • Select a certain key
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
Make another sprite move randomly (1/3) • Choose new sprite from file • Select the mouse sprite
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
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
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
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
Handle the event of „catch”(3/5) • Embed „if” into a „forever” function • Press on the green flag
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
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
Changing background picture (1/5) • You need to change the background picture when the cat catches the mouse • Select „Stage” to get its script
Changing background picture (2/5) • Select „Backgrounds” tab • You can add new backgrounds by clicking on „Paint”, „Import” or „Camera” buttons
Changing background picture (3/5) • Click on „Import” button • Select suitable background picture from the list
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
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”