Initiation Scratch

par l'quipe Squeakihttp://squeaki.recitmst.qc.ca

Version du 9 avril 2008

Copyright (c) 2008 RCIT MST Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License". Initiation Scratch 1

Table des matiresScratch.................................................................................................................................4 . Un langage de programmation interdit aux grands..................................................................4 Pourquoi apprendre avec Scratch? ...........................................................................................5 Quelques notes pdagogiques autour des dfis relever avec Scratch ..........................................7 Pourquoi programmer au lieu de consommer une simulation?...................................................7 On commence par quoi?......................................................................... .............................7 Choix du dfi....................................................................................................... ..............7 . Recherche sur les concepts..................................................................................................7 Temptes d'ides autour de la programmation........................................................................8 Communication du projet.......................................................................................... ...........8 Les comptences disciplinaires en science et technologie.........................................................8 Comptences en mathmatique.............................................................................. ..............9 Savoirs essentiels en mathmatique....................................................................................10 Comptences transversales (voir cette page)........................................................................10 Quelques ides de projets en science et technologie raliser avec Scratch ................................11 Des dfis pour le primaire .................................................................................................11 Le jour et la nuit ........................................................................... ...............................11 Le cycle de l'eau ......................................................................................................... .11 . La foudre .................................................................................... ................................11 Systme Soleil-Terre-Lune .............................................................................. ...............11 Circuit lectrique ......................................................................................... .................11 Transformation de l'nergie ...........................................................................................12 Attraction lectrostatique ..............................................................................................12 La photosynthse ........................................................................................ .................12 La chane alimentaire ............................................................................................ .......12 . Arbre gnalogique ......................................................................................................12 Petit chaperon rouge .................................................................................................... 12 . Dfis pour le secondaire ....................................................................................... .............13 Atome et molcules ................................................................................... ...................13 Habitat .................................................................................... ...................................13 Phnomnes astronomiques ..........................................................................................13 Autres exemples d'utilisation .............................................................................................13 O trouver Scratch et comment l'installer ............................................................................ ....14 Installation et configuration rapide......................................................................................14 Premiers pas avec Scratch .................................................................................................. ..16 . La scne:.................................................................................................... ....................16 . Raliser un script:......................................................................................... ....................17 Ajoutons des objets ................................................................................................... ..........22 . Faire parler un objet....................................................................................... ...................24 Des effets sur l'image.................................................................................. ......................25 Ajouter du son................................................................................................... ..............26 . Un peu d'animation................................................................................ ...........................27 Animation simple d'objet ............................................................................................. .........29 . Jeu simple .................................................................................................................. ........36 . Interactivit sur l'image ................................................................................ ........................38 Animation et dplacement .......................................................................................... ...........41 Glissement d'un objet .......................................................................................... .................44 Utilisation de variables ............................................................................................. ............46 . Un bouton surprise ................................................................................................... ...........53 . Crer un bouton .............................................................................................................. ....55 . Dessiner des polygones ........................................................................................................ 60 . Commenons par un simple carr....................................................................................... .60 Cration de deux variables: ct et angle.............................................................................61 Initiation Scratch 2

Amliorons le tout... ........................................................................................ .................63 Les contrles du clavier ...................................................................................................... ..66 . Suggestions pour aller plus loin ..................................................................................... .....67 Simuler le lancer d'un d .................................................................................................... ..68 . propos de ce document........................................................................................... ............70 L'quipe Squeaki MST.................................................................................... ....................70 Annexe 1: Zone de travail............................................................................. .........................71

Initiation Scratch

3

ScratchUn langage de programmation interdit aux grands...

Scratch est un nouvel environnement de programmation visuelle et multimdia bas sur Squeak destin la ralisation et la diffusion de squences anims sonorises ou non, et plus gnralement l'apprentissage de la programmation. L'intgration de Scratch peut se faire rapidement au premier cycle du primaire permettant ainsi aux lves de dvelopper rapidement l'apprentissage de la programmation. Fruit d'un long travail, Il a t dvelopp par le Media Lab du MIT en collaboration avec le KIDS research group de l'UCLA (University of California, Los Angeles). Scratch illustre vritablement les potentialits pdagogiques et ludiques de Squeak. Il existe de nombreux outils interactifs de manipulations d'images et de sons destins visualiser et produire des squences multimdia animes. Mais, la plupart du temps la visualisation de ces animations est passive hormis cliquer et cliquer encore - et il est impossible de les modifier. Quant les produire ! les outils sont souvent prformats ou d'un accs parfois difficile, voire les deux.

Scratch change radicalement la donne. Il offre une interface intuitive y compris pour les plus jeunes de dessin en bitmap, de manipulation d'images, de photos, de sons, de musiques, etc. et surtout de programmation visuelle de tous ces lments. Avec Scratch, il est facile de crer des personnages, de changer leur apparence et de les faire interagir les uns avec les autres. Il est aussi possible, conseill mme, de publier ses productions afin que d'autres puissent en bnficier voir s'en servir dans leur propres travaux. Plus prcisment, Scratch trouve son intrt le plus vident comme support d'apprentissage de la programmation informatique. Coder avec Scratch est beaucoup plus simple qu'avec un langage traditionnel, crer un script consiste assembler des briques de contrles, de variables, de test, etc. Ce script constituera lui-mme une nouvelle brique et viendra grossir le lot de celles qui existent dj. On retrouve ici le modle constructiviste de Logo ou des E-Toys de Squeak. Scratch est disponible sous Windows, Mac OS X et Linux et est diffus sous une licence libre MIT.

Initiation Scratch

4

Pourquoi apprendre avec Scratch?

Qu'est-ce que les lves apprennent quand ils crent des histoires interactives, des animations, des jeux, de la musique et de l'art avec Scratch ? Entre autres, ils apprennent plusieurs concepts mathmatiques et informatiques qui se trouvent bien intgrs dans Scratch. Pendant que les lves crent des programmes dans Scratch, ils apprennent des concepts de base en informatique tels que les processus itratifs (les boucles par exemple) et les critres conditionnels (si, alors, sinon). Ils acquirent galement les concepts mathmatiques importants tels que les coordonnes (repre dans le plan), les variables et les nombres alatoires. De faon significative, les lves apprennent ces concepts dans un contexte signicatif et motivant. Quand les lves en apprennent sur les variables dans un contexte traditionnel d'enseignement de l'algbre, ils se sentent habituellement peu attir par ce concept quelque peu abstrait. Mais quand ils ont utiliser des variables dans un projet cr dans Scratch, ils ont employer des variables immdiatement dans un contexte fort significatif: pour contrler la vitesse d'une animation, ou pour maintenir le score dans un jeu qu'ils sont crer par exemple. Pendant que les lves travaillent sur leurs projets dans Scratch, ils en apprennent galement beaucoup sur le processus de la conception. Typiquement, le projet d'un lve commence par une ide. Il cre un prototype fonctionnel (un modle), il apporte et exprimente lui-mme ses solutions, les corrige quand les choses ne fonctionnent pas comme prvu. Par la suite, il tente d'obtienir la rtroaction de ses pairs, puis il met jour selon les retours obtenus et gnralement, il remodlise. C'est une spirale continue: avoir une ide, crer un projet, qui mne aux nouvelles ides, qui mnent de nouveaux projets, et ce, indfiniment. Ce processus de conception de projet sollicite et dveloppent plusieurs comptences ncessaires aux jeunes du 21e sicle qui dsirent avoir du succs plus tard dans leur vie: pense crative, communication claire, bonne analyse systmatique, collaboration efficace, conception rflexive itrative, apprentissage continu. Crer des projets avec Scratch aide galement les lves dvelopper un niveau plus profond de matrise de la technologie numrique. Que voulons-nous dire par matrise ? Afin d'tre considr fluent dans langue anglaise, espagnole, ou autre, vous devez apprendre non seulement lire mais aussi crire; c'est aussi savoir comment s'exprimer avec la langue. De mme, pour tre l'aise ( fluent ) avec la technologie numrique, vous devez apprendre non seulement utiliser, interagir avec l'ordinateur mais aussi apprendre crer avec l'outil. Naturellement, la plupart des tudiants ne deviendront pas tous des programmeurs professionnels, tout comme la plupart d'entre eux ne deviendront pas des auteurs professionnels. Mais apprendre programmer offre des avantages chacun: il permet des lves de s'exprimer de faon pleinement crative, les aident se dvelopper en tant que penseurs logiques, et les aident comprendre les fonctionnements des nouvelles technologies qu'ils rencontrent quotidiennement dans leur vie.

Initiation Scratch

5

Lifelong Kindergarten Group, MIT Media Lab Rfrences: Rethinking Learning in the Digital Age: http://www.media.mit.edu/~mres/papers/wef.pdf Partnership for 21st Century Skills: http://www.21stcenturyskills.org/

Initiation Scratch

6

Quelques notes pdagogiques autour des dfis relever avec Scratch

Pourquoi programmer au lieu de consommer une simulation?On apprend ce qu'on fait. Voil ce sur quoi nous nous basons pour faire faire l'lve la programmation de ses projets au lieu de seulement les voir quelque part sur le web (les consommer). Je suis toujours surpris de rencontrer des jeunes gens de 20 ans qui ne savent pas programmer. Je crois qu'il leur manque une qualit essentielle pour percevoir la merveilleuse simplicit du monde. L'informatique devrait tre une matire fondamentale au mme titre que les langues ou les mathmatiques. Nous devrions tous savoir crire, compter et programmer, sinon nous ne pouvons plus comprendre le monde et nous y panouir. Pour moi, crit le mathmaticien Gregory Chaitin, vous ne comprenez quelque chose que si vous tes capable de le programmer. (Vous, et personne d'autre !) Autrement, vous ne le comprenez pas vraiment, vous pensez seulement que vous le comprenez. Thierry Crouzet (Le peuple des connecteurs, p.98, Bourin diteur, 2006)

On commence par quoi?Avant de dbuter un dfi avec Scratch, on doit d'abord avoir quelques bases du logiciel. On peut alors suivre quelques activits de cette page d'initiation. Par la suite, on peut faire raliser un petit projet (voir lesides de projets) aux lves sur un sujet dj vu en classe. Ce qui serait une rvision des concepts. Ou encore, on laisse les lves dcouvrir/apprendre les concepts ncessaires la ralisation du projet.

Choix du dfiLe choix du dfi peut tre fait par l'lve ou l'enseignant. Tout dpend du niveau de confort pdagogique de l'enseignant (si plus d'un projet se vit en mme temps dans la classe, il y a plus d'lments grer de la part de l'enseignant.

Recherche sur les conceptsPour programmer un phnomne ou autres, on doit avoir de bonnes notions propos de ce phnomne. Les lves pourraient chercher dans leurs livres ou encore sur le web des informations sur les concepts relis au dfi et crer un document (une page wiki, un billet, un article, un rseau de concepts...) les expliquant. Un peu comme un carnet de projet o on note les sources consultes, les brouillons des textes, des schmas, etc.

Initiation Scratch

7

Temptes d'ides autour de la programmationLorsque la comprhension du phnomne est suffisante, l'quipe peut planifier la programmation qui a pour but d'ajouter un lment dynamique pour expliquer aux autres les phnomnes relis au dfi. On parle ici d'un type de simulation qui aide visualiser ce qui se passe pendant une raction chimique par exemple. Durant la programmation, les essais (les projets .sb) devraient tre gards comme traces qui pourront tre analyses pour objectiver la dmarche. On garde galement des traces du travail d'quipe, des sources consultes, des problmes rencontrs, etc.

Communication du projetLes quipes se prsentent leur projet Scratch et expliquent leur dmarche l'aide des traces gardes tout au long du projet. On peut publier les projets (et autres documents) ainsi raliss sur le prsent wiki ou encore sur le site de classe ou encore dans le portfolio numrique de l'lve.

Les comptences disciplinaires en science et technologieExploiter un logiciel comme Scratch pour mieux comprendre/communiquer un phnomne permet de dvelopper au moins deux comptences de science et technologie. Voir les critres d'valuation pour saisir comment le logiciel peut devenir un atout. Les savoirs essentiels varient selon la thmatique du projet.

Comptence 1: PROPOSER DES EXPLICATIONS OU DES SOLUTIONS DES PROBLMES DORDRE SCIENTIFIQUE OU TECHNOLOGIQUE. Critres d'valuation Description adquate du problme ou de la problmatique dun point de vue scientifique ou technologique Utilisation dune dmarche approprie la nature du problme ou de la problmatique laboration dexplications pertinentes ou de solutions ralistes Justification des explications ou des solutions

Comptence 3: COMMUNIQUER LAIDE DES LANGAGES UTILISS EN SCIENCE ET EN TECHNOLOGIE. Critres d'valuation Comprhension de linformation de nature scientifique et technologique Transmission correcte de linformation de nature scientifique et technologique

Initiation Scratch

8

Comptences en mathmatiqueSelon les dfis proposs, les problmes rencontrs, les lves auront dvelopper l'une ou l'autre (ou plusieurs) comptences ci-dessous.

RSOUDRE UNE SITUATION-PROBLME MATHMATIQUE Composantes : Dcoder les lments de la situation-problme Modliser la situation-problme Appliquer diffrentes stratgies en vue d'laborer une solution Valider la solution Partager l'information relative la solution RAISONNER L'AIDE DE CONCEPTS ET DE PROCESSUS MATHMATIQUES Composantes : Cerner les lments de la situation mathmatique Mobiliser des concepts et des processus mathmatiques appropris la situation Appliquer des processus mathmatiques appropris la situation Justifier des actions ou des noncs en faisant appel des concepts et des processus mathmatiques COMMUNIQUER L'AIDE DU LANGAGE MATHMATIQUE Composantes : S'approprier le vocabulaire mathmatique tablir des liens entre le langage mathmatique et le langage courant Interprter ou produire des messages caractre mathmatique

Initiation Scratch

9

Savoirs essentiels en mathmatiqueVoici quelques savoirs mathmatique que l'on peut dvelopper l'aide du logiciel Scratch. Le tout est de proposer des dfis o ces savoirs/concepts seront ncessaires.

Comptences transversales (voir cette page)On peut dvelopper quelques comptences transversales en relevant les dfis Scratch. Comme par exemple Mettre en oeuvre sa pense cratrice ou encore Rsoudre des problmes. Le choix des comptences cibles revient l'enseignant.

Initiation Scratch

10

Quelques ides de projets en science et technologie raliser avec Scratch

Des dfis pour le primaireLes dfis ci-dessous se veulent un point de dpart pour mieux comprendre certains phnomnes naturels (au programme du primaire: Terre et Espace, Univers matriel, Univers vivant) l'aide de Scratch. Voir http://recitmst.qc.ca/pdfeq/

Le jour et la nuitEst-ce que c'est le Soleil qui tourne autour de la Terre? Comment expliquer qu'il fait jour au Qubec?

Le cycle de l'eauD'o vient la pluie? La glace sur un lac, l'eau dans une rivire et du brouillard sont-ils la mme substance?

La foudreComment se cre la foudre? D'o vient son bruit?

Systme Soleil-Terre-LuneDiffrence entre rotation et rvolution? Est-ce la lune ou le soleil qui est le plus prs de la Terre?

Circuit lectriqueQuels sont les caractristiques d'un circuit lectrique? On peut reprsenter le courant lectrique de quelle faon?

Initiation Scratch

11

Transformation de l'nergieL'nergie lectrique peut se transformer en chaleur (par un lment chauffant), comment? L'nergie du vent peut se transformer en lectricit, comment?

Attraction lectrostatiqueLes contraires s'attirent. Les charges identiques se repoussent.

La photosynthseUn plante produit sa nourriture l'aide de la lumire, du sol, et...

La chane alimentaireUn cosystme doit tre en quilibre sinon... Proie, prdateur...

Arbre gnalogiqueArbre gnalogique parlant et bougeant. L'lve fait parler (ou crire) ses aeux en cliquant sur l'objet correspondant dans l'arbre.

Petit chaperon rougeVoir le film, lire le conte et rinventer la fin de l'histoire et crer une animation (faire jeu interactif) dans Scratch. On publie les projets sur un site le permettant (un SPIP par exemple). Dveloppe: Apprcier une oeuvre littraire. Dans l'animation il y a des figures gomtriques, sens spatial. Rsolution de problmes. En Art, organisation de l'espace et reprsentation de l'espace.

Initiation Scratch

12

Dfis pour le secondaireAu secondaire, on peut se permettre d'aller plus loin dans la programmation.

Atome et molculesLe modle atomique de Dalton peut servir expliquer bien des observations. Formations de certaines molcules, ractions chimiques, changements physiques (dilution, sparation mcanique...), etc. On peut galement reprsenter les constituants de l'atome.

HabitatUn gros projet pourrait reprsenter (simuler) un habitat (cosystme). On peut rutiliser des concepts du primaire comme la chaine alimentaire pour dmontrer certains principes cologiques.

Phnomnes astronomiquesSe construire un systme solaire rpondant des lois pour expliquer les mouvements des plantes...

Autres exemples d'utilisation

Comme environnement de programmation afin de permettre aux enfants de faire l'apprentissage de la programmation (sollicitant chez eux des notions mathmatiques et scientifiques, la logique, la crativit - rfrences les crits de Papert sur Mindstorm). Cration de prsentation interactives (rapport de lecture, une histoire, etc.) Cration d'une prsentation o l'enfant parle (enregistrement digital). Cration d'histoires animes, dessins anims, bandes dessines, avec sons, narration, personnages parlant, effets sonores.) Modlisation d'un principe scientifique. Modlisation d'un problme mathmatique (dmarche, rsolution, communication) Cration d'un jeu vido (sur une thmatique lance par l'enseignant)

Initiation Scratch

13

O trouver Scratch et comment l'installer

Scratch (un nom emprunt au hip-hop, car tel un DJ, ce langage peut mixer sons, images, vidos et mme des bouts de programmes dorigines diverses) bnficiera de plus de lapport de sa communaut : les programmeurs en herbe pourront partager leurs crations sur le site, sempruntant ventuellement des mdias ou des ides, dans la grande tradition du sampling. Tous les rseaux sociaux existant aujourdhui se limitent du "tchat" entre les participants, explique Mitchel Resnick, le concepteur du projet. Ils ne permettent pas de crer et partager des crations. Notre socit prend une direction dans laquelle la pense crative va devenir de plus importante. Il ne sera plus suffisant dapprendre un ensemble statique de faits lcole. On peut voir dans cette vido de la BBC Mitchel Resnick prsenter lui mme quelques fonctionnalits de sa dernire invention.

Installation et configuration rapide1. Faites le choix de votre systme d'exploitation lors du tlchargement: http://scratch.mit.edu/pages/download 2. Installation : Procdez l'installation en double-cliquant sur le fichier tlcharg (version Mac OS X et Windows .exe). Pour ceux qui ont fait le choix du fichier au format .zip, dcompressez le tout. Vous aurez un rpertoire Scratch sur votre poste de travail que vous placerez o vous voulez. Pour les usagers Linux, vous devrez utiliser la machine virtuelle de Squeak pour dmarrer Scratch. Scratch est une image et ncessite Squeak. 3. Dmarrage et configuration : Pour franciser l'environnement de Scratch, vous devez tlcharger le fichier suivant :http://www.solinfpc.net/fichiers/fr.po et le placer dans le dossier locale de Scratch. Si le lien est mort allez ici : http://squeaki.recitmst.qc.ca/wakka.php?wiki=TrouverScratch/download&file=fr.po Version du 16/01/2008

Initiation Scratch

14

Dmarrez l'application. Vous obtiendrez ceci l'cran:

Afin que vous puissiez utiliser votre environnement en franais, cliquez sur Language et choisissez Franais

Initiation Scratch

15

Premiers pas avec Scratch

Explorons Scratch! Nous verrons que ce logiciel est assez intuitif et simple faire fonctionner. Voici un rsum de l'interface de Scratch (voir annexe 1 pour un agrandissement):

La scne:La scne est l'endroit o prend vie votre projet (histoires, jeux, animations). Les objets bougent et interagissent entre eux sur la scne. La scne mesure 480 pixels en largeur et 360 pixels en hauteur. Elle est divise sous la forme d'une grille possdant un axe x et un axe y. Le centre de la scne se situe la position x=0 et y=0.

Pour se reprer dans l'espace de travail, dplacer votre souris sur la scne et observer en bas de la scne droite. Vous verrez les positions x et y changer au gr des dplacements de votre souris.

Initiation Scratch

16

Raliser un script:Maintenant, glissez la brique bouger de dans la zone de scripts.

Double-cliquez sur la brique et regardez votre chat... il bouge!

Cliquez sur Sons et glissez une brique supplmentaire jouer persussion sous la brique bouger de pour que les deux briques s'accrochent ensemble.

Initiation Scratch

17

Double cliquez sur les deux briques imbriques et coutez!

Vous pouvez modifier facilement les sons de percussions. Cliquez sur le 48 et vous verrez un menu droulant vous offrant d'autres choix.

Cliquez sur Mouvement et ajoutez sous la brique de percussion une autre brique bouger de. Modifiez la valeur initiale 10 par -10.

Cliquez sur Sons et ajoutez une autre brique jouer percussion sous la dernire brique ajoute et modifiez le son initial 48 par 61.

Double-cliquez sur votre ensemble de briques... Votre chat avance et recule et vous entendez des sons! Initiation Scratch 18

Nous allons maintenant ajouter une brique de contrle intressante. Cliquez sur Contrle et glissez la brique rpter indfiniment dans la zone de scripts.

Glissez maintenant votre bloc de briques l'intrieur de la structure de contrle rpter indfiniment.

Vous obtenez ceci...

Double-cliquez sur ce nouveau bloc... Afin d'arrter le tout, cliquez sur le bouton d'arrt.

Ajoutez maintenant un autre contrle. Glissez quand drapeau vert press au-dessus de votre bloc rpter indfiniment.

Initiation Scratch

19

Maintenant, cliquez sur le drapeau vert et votre programme dmarre.

Arrtez maintenant votre programme en cliquant sur le bouton Arrt. Nous allons essayer quelque chose de diffrent... Cliquez sur Apparence et glissez la brique changer l'effet dans votre zone de script.

Double-cliquez sur la brique dpose et observez les modifications qui se produisent sur votre chat! Nous allons continuer dans notre exploration... Cliquez sur Contrle et glissez la brique quand space est press et allez l'accrocher la brique prcdente changer l'effet.

Initiation Scratch

20

Appuyez maintenant la barre d'espace sur votre clavier... Que se passe-t-il? Intressant... Il est possible d'affecter diffrentes touches du clavier pour provoquer une action. Cliquez sur space et un menu droulant vous apparatra.

Cliquez maintenant sur le drapeau vert pour dmarrer votre programme et appuyez sur la touche que vous avez programme pour changer les teintes de couleur de votre chat... Intressant! En cliquant sur le bouton arrt le tout revient l'tat initial.

Initiation Scratch

21

Ajoutons des objets

Nous allons repartir de notre ralisation prcdente afin d'aller un peu plus loin dans notre dcouverte de Scratch. Nous avons prcdemment conu un script qui s'apparentait ce qui suit:

Nous allons ajouter un objet dans notre scne. Si vous observez votre environnement, vous trouverez sous la scne trois boutons qui vous serviront; Crer votre propre objet Choisir un nouvel objet partir d'un fichier Choisir un objet au hasard dans la banque Cliquez sur et dans le dossier People choisissez jodi1.

Initiation Scratch

22

Votre scne devrait se ressembler ceci:

Si vos objets sont superposs, vous utilisez votre souris et vous cliquez et glissez l'objet l'endroit dsir.

Initiation Scratch

23

Faire parler un objetNous pouvons maintenant dire notre nouvel objet de faire autre chose que notre petit chat. Allonsy! Cliquez sur Apparence et cliquez sur la brique dire Hello! et glissez celle-ci dans la zone de script de votre objet jodi1.

Cliquez sur Hello! et modifiez le message par Bonjour!.

Double-cliquez sur cette brique et regardez ce qui se passe...

Initiation Scratch

24

Des effets sur l'imageDans la section Apparence, cliquez sur changer l'effet et glissez la brique dans la zone de script de jodi1.

Dans le menu droulant de la brique, faite le choix d'un effet qui vous plat.

Double-cliquez sur la brique... Que s'est-il pass avec jodi1? Voici le rsultat ave l'effet mosaic.

Essayez d'autres effets... Rappelez-vous que vous devez cliquer sur le bouton Arrt que votre scne reprenne sa forme initiale...

afin

Initiation Scratch

25

Ajouter du sonCliquez sur l'onglet Sounds.

En cliquant sur Record, il est possible d'enregistrer un son. Vous pouvez aussi importer un son en cliquant sur Import.

Par la suite, cliquez dans la section Sons et glissez la brique jouer son dans la zone de script de votre objet. Cliquez sur le menu droulant et choisissez votre son.

Double-cliquez sur la brique afin d'entendre le tout...

Initiation Scratch

26

Un peu d'animation...Il est possible de faire des animations en mixant des costumes. Ajoutons un costumes jodi1. Pour ajouter un costume jodi1, cliquez sur l'onglet Costumes de jodi1.

Cliquez sur Import afin de choisir un second costume pour jodi1. En cliquant sur Import, retournez dans le rpertoire People et choisissez jodi2. Vous obtiendrez ceci dans la zone Costumes.

Maintenant, cliquez l'onglet de script pour l'objet jodi1. Dans la section Contrle, cliquez la brique rpter indfiniment et glissez-l dans votre zone de script.

Initiation Scratch

27

Dans la section Apparence, cliquez la brique costume suivant et glissez-l dans la boucle de contrle rpter indfiniment.

Revenez la section Contrle. Cliquez sur la brique attendre 1 secondes et ajoutez-celle-ci dans la boucle de contrle rpter indfiniment sous la brique costume suivant.

Votre script sera comme ceci:

Double-cliquez ce script et observez Jodi... Intressant!! Cliquez sur le bouton Arrt que votre scne reprenne sa forme initiale...

afin

Initiation Scratch

28

Animation simple d'objet

Nous allons raliser une animation simple d'un objet que nous modifierons de son format initial.

Cliquez sur le bouton

afin d'aller chercher un objet. Double-cliquez sur le dossier Fantasy.

Slectionnez le fantme ghost1

Initiation Scratch

29

Dans votre scne, il est possible que votre fantme se superpose au chat initial. Nous allons nous dbarasser du chat. Cliquez sur le chat dans la section o se trouve tous vos objets.

Avec le bouton droit de votre souris, cliquez sur le chat et choisissez delete.

Initiation Scratch

30

Votre chat a maintenant disparu et vous devez avoir seulement l'cran votre fantme.

Initiation Scratch

31

Cliquez sur l'onglet Costumes.

Nous allons affectuer une copie de notre objet original. Cliquez sur

. Vous obtiendrez ceci.

Slectionnez le noueau costume cr, et cliquez sur le bouton graphique.

. Vous allez accder un diteur

Initiation Scratch

32

Modifions quelque peu notre fantme afin de lui donner une apparence un peu plus menaante. Prenez note des diffrentes possibilits de l'environnement d'dition graphique. Reprez le bouton Undo... cela peut-tre pratique!

Initiation Scratch

33

Cliquez sur OK quand vous serez satisfait de votre oeuvre. Nous avons maintenant deux costumes pour notre objet. Crons un script simple qui nous permettra d'animer notre objet. Cliquez dans la section Contrle et choisissez quand drapeau vert et glissez la brique dans la zone de script de l'objet. Dans la mme section, glissez la brique rpter indfiniment et accrochez celle-ci la brique dj dans votre zone de script. Glissez aussi deux briques attendre 1 secondes dans la zone de script. Ne les accrochez pas tout de suite. Cliquez dans la section Apparence et glissez deux briques basculer sur le costume. Ne les accrochez pas tout de suite. Accrochez vos briques afin d'obtenir le script suivant:

N'oubliez pas de modifier les costumes correctement dans les menus droulants... Initiation Scratch 34

Cliquez sur le drapeau vert pour dmarrer le tout! Cliquez sur le bouton d'arrt pour stopper l'excution de votre script. Dans la section Contrle cliquez et glissez dans votre zone de script quand space est press. Accrochez-y la brique bouger de 10 pas que vous trouverez dans la section mouvement. Choisissez dans le menu droulant de la brique quand space est press la touche right arrow. Dmarrez vos scripts en cliquant sur le drapeau vert.

Appuyez maintenant sur la touche de votre clavier correspondant la flche vers la droite. Que se passe-t-il? Dfis: 1. Comment faire pour faire reculer notre fantme quand on appuie sur la flche vers la gauche? 2. Comment faire pour faire agrandir notre fantme quand on appuie sur la flche vers le bas? 3. Comment faire pour faire rapetisser notre fantme quand on appuie sur la flche vers le haut?

Initiation Scratch

35

Jeu simple

Nous allons faire un petit jeu jeu vraiment simple. Le jeu du chat qui court aprs la souris. Crer un nouveau projet et faites disparatre le chat original qui se trouve sur la scne au dpart.

Par la suite, cliquez sur le bouton cat2 dans le rpertoire Animals.

pour accder aux fichiers de Scratch. Allez chercher le fichier

Initiation Scratch

36

Dans la zone de script, glissez

que vous prenez dans la section Contrle.

Accrochez-y la brique Ajoutez maintenant la brique

que vous trouverez dans la mme section. qui se trouve dans la section Mouvement. Accrochez

votre brique dans la boucle

. Modifiez la valeur dans le menu droulant :

Finalement, il ne reste qu' ajouter la brique

que vous allez accrocher sous

. Modifiez la valeur de pas 3 au lieu de 10. Votre script final aura l'allure suivante:

Cliquez maintenant sur . Est-ce que votre chat court votre souris sur la scne? Est-ce que vous pouvez faire miauler votre chat? Voir le vido: http://squeaki.recitmst.qc.ca/wakka.php?wiki=VideoChat

Initiation Scratch

37

Interactivit sur l'image

Nous allons explorer certaines caractristiques amusantes de Scratch nous permettant de modifier de faon interactive une image. Crez un nouveau projet et faites disparatre le chat original qui se trouve sur la scne au dpart.

Par la suite, cliquez sur le bouton pour accder aux fichiers de Scratch. Allez chercher le fichier squirrel1 dans le rpertoire Animals.

Initiation Scratch

38

Dans la zone de script, glissez

que vous prenez dans la section Contrle.

Accrochez-y la brique

que vous trouverez dans la mme section. dans la

Par la suite, dans la section Apparence, cliquez et glissez la brique

boucle

. Modifiez la valeur du menu droulant pour whirl.

Finalement, cliquez la section Capteurs. Choisissez la brique 0 de la brique . Voici ce qui se produit:

et glissez cette brique sur le

Vous obtiendrez un script ayant l'apparence suivante:

Cliquez sur le drapeau vert

pour dmarrer le tout! Observez la position de la souris en bas

Initiation Scratch

39

droite de la scne . Lorsque votre souris se dplace vers la droite ou vers la gauche notre pauvre cureuil se fait dfigurer!

Essayez les diffrents effets disponibles. Rappelez-vous que vous n'avez pas arrter votre programme pour apporter vos modifications.

Cliquez sur le bouton d'arrt

pour stopper l'excution de votre script.

Initiation Scratch

40

Animation et dplacement

Nous allons explorer certaines caractristiques amusantes de Scratch nous permettant de modifier de faon interactive une image. Crez un nouveau projet et faites disparatre le chat original qui se trouve sur la scne au dpart.

Par la suite, cliquez sur le bouton pour accder aux fichiers de Scratch. Allez chercher le fichier parrot1-a dans le rpertoire Animals.

Initiation Scratch

41

Cliquez sur l'onglet Costumes.

Cliquez sur le bouton Import et dans le rpertoire Animals, rcuprez le fichier parrot1-b.

Maintenant cliquez sur le premier costume parrot1-a. Glissez l'objet sur la scne en haut gauche de celle-ci. Cliquez sur le bouton de rapetissement afin de diminuer la grandeur de notre objet. Cliquez dix fois sur votre objet parrot1-a dans la scne.

Vos deux costumes ont maintenant la mme taille.

Cliquez sur la flche Crez le script suivant:

afin de revenir au mode prcdent de saisie.

Initiation Scratch

42

Cliquez sur le drapeau vert et observez le rsultat. Que se passe-t-il lorsque votre perroquet est arriv la limite de la scne? Notre perroquet tourne... mais probablement pas comme on le dsire...

Comment faire pour rgler notre problme? Nous allons modifier la rotation sur l'objet. Dans la zone au-dessus de votre script, vous avez une miniature de votre premier costume. Juste gauche, vous trouverez les outils ncessaires pour modifier le type de rotation de votre objet. Par dfaut vous avez:

Cliquez sur le deuxime petit bouton.

Redmarrez votre script maintenant. Est-ce que le rsultat est le mme? Intressant!

Initiation Scratch

43

Glissement d'un objet

Nous allons apprendre dans le petit projet suivant que nos objets peuvent glisser dans la scne facilement. Crez un nouveau projet et faites disparatre le chat original qui se trouve sur la scne au dpart.

Par la suite, cliquez sur le bouton pour accder aux fichiers de Scratch. Allez chercher le fichier ghost1 dans le rpertoire Fantasy.

Initiation Scratch

44

Cliquez sur le bouton de rapetissement

et rduisez la taille du fantme. Cliquez sur la flche

afin de revenir en mode de saisie. Dplacez votre fantme dans le coin infrieur gauche de votre scne. Lors du dplacement de votre objet, vous pouvez voir sa position dans la zone au-dessus du script:

Crez le script suivant:

Cliquez sur le drapeau vert afin de tester votre script. Incroyable! Un dplacement simple, facile raliser. Amusez-vous apporter des modifications votre script! Pouvez-vous associez un glissement une touche du clavier?

Initiation Scratch

45

Utilisation de variables

Nous allons ajouter une facette de plus dans notre programmation sur Scratch. Nous allons crer un petit jeu simple : un gros poisson court aprs un petit poisson. S'il russit le capture le score augmentera de 1 point. Prt? Allons-y! Nous allons apprendre dans le petit projet suivant que nos objets peuvent glisser dans la scne facilement. Crez un nouveau projet et faites disparatre le chat original qui se trouve sur la scne au dpart.

Par la suite, cliquez sur le bouton pour accder aux fichiers de Scratch. Allez chercher le fichier shark1-b dans le rpertoire Animals.

Initiation Scratch

46

Cliquez nouveau sur le bouton fish3 dans le rpertoire Animals.

pour accder aux fichiers de Scratch. Allez chercher le fichier

Actuellement dans la scne, nos deux poissons sont pas mal de la mme taille. Initiation Scratch 47

Rapetissez le fish3 en utilisant le bouton

. Vous devriez avoir quelque chose comme ce qui suit:

Sous la scne, vous avez vos deux objets qui se nomment maintenant grospoisson et petitpoisson.

Vous pouvez modifier leur nom en cliquant sur l'objet et en modifiant le nom original dans la zone d'dition...

Initiation Scratch

48

Cliquez sur votre flche sur Nouvelle variable

. Cliquez maintenant sur Variables .

. Par la suite, cliquez

Vous verrez une fentre de dialogue apparatre. Nommez votre variable score.

Dans la scne vient d'apparatre une palette score.

Et dans la zone Variables est apparu des briques supplmentaires:

Crez maintenant le script suivant pour le gros poisson:

Initiation Scratch

49

Vous pouvez importer d'autres sons. Ici, nous avons import Slurp des fichiers que nous offre Scratch. Vous pourriez vous enregistrer votre propre son aussi. Cliquez sur le drapeau vert afin de dmarrer votre script. Votre requin court-il un peu partout afin de capturer sa proie? Lorsqu'il lui touche votre score augmente automaitquement de 1 point.

Initiation Scratch

50

Afin d'ajouter un peu de ralisme, nous allons modifier notre scne rapidement. Cliquez sur Stage sous la scne o se trouvent vos objets poissons actuellement.

Maintenant, cliquez sur Backgrounds dans les onglets au-dessus de la zone de scripts.

Par la suite, cliquez sur Import Backgrounds slectionnez underwater et cliquez OK.

et dans le rpertoire

Initiation Scratch

51

Votre scne est maintenant plus raliste...

Dfi: Pouvez-vous faire un script qui fera en sorte que votre petit poison se dplace dans l'aquarium? Peuttre pourra-t-il se sauver du requin? Ou faites un script qui vous permettra de guider le petit poisson hors de la porte du requin...

Initiation Scratch

52

Un bouton surprise

Nous allons crer un bouton cliquable partir d'un objet insr dans notre scne. Crez un nouveau projet et faites disparatre le chat original qui se trouve sur la scne au dpart.

Par la suite, cliquez sur le bouton drum1 dans le rpertoire Things.

pour accder aux fichiers de Scratch. Allez chercher le fichier

Initiation Scratch

53

Renommez votre objet boutondrum.

Crez maintenant le script suivant:

Comme vous le constatez, le son est choisi au hasard dans la banque avec la brique . Cliquez maintenant sur votre batterie dans la scne... chaque fois que vous cliquez sur la batterie, celle-ci change de couleur et un son diffrent se fait entendre. Donc, il est trs facile de rendre un objet interactif dans votre projet. Faites d'autres essais afin d'explorer cette faon de faire simple. On pourrait simplement faire parler un personnage dans notre scne en cliquant sur celui-ci... Allez-y! Essayez-le! Un personnage qui dit quelque chose quelqu'un mais qui pense autre chose lors de la discussion...

Initiation Scratch

54

Crer un bouton

Comment crer un bouton qui fera avancer un objet? Dans cette activit, nous allons crer un bouton nous permettant de faire avancer le chat de quelques pas. Allons-y! 1. Cliquer sur l'outil vous permettant de crer un objet (palette dessiner)

Vous obtiendrez la palette suivante:

2. Dessiner maintenant un bouton quelconque. Voici celui raliser avec la superposition de deux cercles dgrads.

Cliquer sur OK afin de faire apparatre l'objet ralis dans votre espace de travail.

Initiation Scratch

55

3. Cliquer sur le bouton Contrle en haut gauche.

Glisser la brique

dans l'espace de script.

4. Glisser la brique obtiendrez ceci:

et accrocher celle-ci la brique

. Vous

5. Glisser la brique ceci:

et accrocher-la l'intrieur de

. Vous obtiendrez

Initiation Scratch

56

6. Cliquer sur ceci:

et placer la brique suivante

dans votre condition si comme

7. Cliquer sur

et glisser

dans la premire partie du si.

Cliquer sur le menu droulant de

et choisir mouse-pointer.

. Glisser maintenant cette brique ceci dans la zone de script : dans la seconde condition du si. VOus aurez

8. Retourner dans la zone des contrles en cliquant sur dans la structure du si

. Glisser la brique

Initiation Scratch

57

9. Cliquer sur le menu droulant apparatra:

et cliquer sur new. La fentre suivante

crire Avance dans la fentre:

et cliquer sur OK pour valider le tout. Votre script devrait tre comme ceci:

10. Cliquer maintenant sur votre objet chat dans la zone de vos objets disponibles:

Initiation Scratch

58

. Ceci fera apparatre la zone de script de votre objet chat. Sinon, cliquer sur l'onglet Script. 11. Cliquer sur le bouton Contrle en haut gauche.

Cliquer sur

et glisser la brique dans la zone de script.

. 12. Cliquer sur le bouton Mouvement en haut gauche.

Cliquer sur

et accrocher la brique celle dj en place.

13. Cliquer sur

pour dmarre votre programme. Cliquer sur votre bouton. Que se passe-t-il?

Dfi : Crer un bouton qui permet de faire revenir sur ses pas votre chat!

Initiation Scratch

59

Dessiner des polygones

Nous allons raliser un petit projet mathmatique utilisant des variables. Notre projet permettra de dessiner diffrents types de polygones en utilisant des variables. Allons-y! Afin de vous aider, voici une information qui vous sera utile dans votre programme: la mesure de rotation d'un angle externe pour un polygone = 360 / (nombre de cts).

Commenons par un simple carrNous allons fix ds le dpart notre chat afin que celui-ci pointe vers le haut et par la suite, dessiner un carr ayant comme mesure de ct 50 pas. Voici le programme: pointer en direction 0 (vers le haut) rpter 4 fois avance de 50 pas tourner de 90 degrs Ce qui se traduit sous Scratch comme suit: (n'oubliez pas de double-cliquez sur chaque brique pour que sa tche se ralise. Nous aurons un programme plus complet un peu plus tard...)

Voici le rsultat:

Facile! Voil pour un carr. Nous allons tenter de faire voluer notre travail...

Initiation Scratch

60

Cration de deux variables: ct et angleVoua allez maintenant crer deux variables que nous nommerons "ct" et "angle". Dans la section "Variables", cliquez sur . Vous obtiendrez cette fentre:

crivez "ct" et cliquez sur le bouton "Pour cet objet seulement" et sur "OK" pour valider le tout. Refaites la mme opration pour crer la variable "angle". Vous aurez quelque chose de semblable ceci:

Et sur la scne est apparu ceci:

Nous allons maintenant modifier notre script original (celui crer dans la section prcdente). Insrez les variables "ct" et "angle" afin d'obtenir une procdure polygone qui ressemble ceci:

Par la suite, faites l'opration suivante:

Initiation Scratch

61

Dans la section gauche de l'opration, inscrivez 360 et dans la section droite, glissez la variable "ct".

Modifiez votre script comme suit:

Maintenant, vous allez double-cliquer sur la brique "changer ct par 1" afin que l'indicateur de votre variable soit 3. Double-cliquez sur la brique "mettre angle 360/ct". L'indicateur de la variable "angle" devrait tre 120.

Et pour terminer, double-cliquez sur votre script. Votre chat devrait avoir dessiner un triangle.

Pour faire apparatre votre variable comme un glisseur, cliquez le bouton droit de la souris sur votre variable et choisissez "potentiomtre" (faites un test avec les autres styles disponibles...)

Initiation Scratch

62

Amliorons le tout...Nous allons maintenant terminer notre programme de faon plus lgante. Insrez la brique de contrle "rpter jusqu'" dans votre zone de script et modifiez celle-ci avec la structure d'galit provenant de la section "Nombres" et la variable "ct" que vous avez cr. Vous devez avoir ceci:

Attachons maintenant notre script afin d'avoir un petit programme qui se tient...

Vous pouvez dfinir un minimum et un maximum pour votre potentionmtre. Cliquez le bouton droit de votre souris sur la variable "ct" et slectionnez "dfinir le min et le max du potientionmtre".

Fixez le minimum 3 et le maximum 9 pour l'instant...

Initiation Scratch

63

Finalement, dessinez les diffrents polygones correspondant aux cts variant de 3 9...

Si vous redmarrez votre script, vous verrez qu'il reste des amliorations apporter...

Initiation Scratch

64

Pourquoi ne pas crer un script qui rinitialise le tout? Le dfi vous est lanc! Bonne Chance!

Initiation Scratch

65

Les contrles du clavier

La brique quand "space" est press est trs importante si on veut contrler des objets partir du clavier. En cliquant sur le "space", on vous offrira les touches du clavier. Aussitt que vous associez un script contenant cette brique l'objet, elle devient active. Autrement dit, Scratch est toujours conscient de la touche qui est press au clavier. Il effectuera sans problme les ordres sous cette brique s'il dtecte la bonne touche. Dans ce programme, le poisson ragira si l'on presse les flches ou les touches a,r,g,d. De mme, si vous avez du son, la touche "espace" en provoquera un.

Initiation Scratch

66

Suggestions pour aller plus loinDsigner une touche pour baisser ou lever le crayon. Dsigner des touches pour la couleur et l'paisseur du crayon. Faire une variable qui compte le nombre de touches presses. Faire une variable qui compte le nombre de fois que l'objet croise sa propre trace.

Initiation Scratch

67

Simuler le lancer d'un dPour lancer le d, appuyer sur le drapeau vert. Pour le slectionner, appuyer la touche 1. (http://squeaki.recitmst.qc.ca/wakka.php?wiki=LancerUnDe/v) Dans ce tutoriel, vous apprendrez vous servir de la tuile "nombre alatoire". Vous verrez une utilit des variables. Pour raliser ce projet, j'ai d'abord crer les costumes 1 6. Puis, partir de ces derniers, j'ai ajout une couleur de fond. Les costumes sont numrots 7 12. Noter que le de de valeur 1 (numro 1) a pour correspondant le costume numro 7 (soit 1 +6). De mme, le costumes de valeur 2 a pour correspondant le costume numro 8 (soit 2+6), etc. Donc, le d de valeur X (numro X) a pour correspondant le costume numro (X + 6). partir de cette observation, tudions le script.

J'ai d'abord cr une variable (appele valeurdude). Cette variable sera une espce de mmoire qui retiendra la valeur du d lanc. Par la suite, j'ai tout simplement utilis la brique "valeur alatoire entre 5 et 10" pour rpter entre cinq et dix fois un changement de costume. Cela donne l'illusion d'un d qui roule. Par la suite, j'assigne la variable la dernire valeur obtenue.

Initiation Scratch

68

Je change ensuite le costume du d pour qu'il colle la bonne valeur. J'ai ajout un petit script qui permet au joueur qui touche le 1 (un) sur le clavier, d'indiquer graphiquement qu'il vient de choisir le d 1. Cet ajout, inutile ici, peut cependant devenir intressant dans le cas d'un jeu o plusieurs ds seraient lancs et o il faudrait en choisir certains. L'ide du script est simple : il suffit de modifier le costume du d pour qu'il prenne le costume qui vaut 6 de plus que lui-mme !

Initiation Scratch

69

propos de ce documentLe prsent document a t cr sur le wiki de l'quipe Squeaki MST l'adresse suivante:

http://squeaki.recitmst.qc.caIl contient les divers textes, tutoriels, ides de projets, que l'quipe a laiss sur le wiki. Nous avons donc rassembl les diffrentes partie du wiki pour fin d'impression. Une version papier est souvent plus facile suivre quand on veut s,approprier une application.

L'quipe Squeaki MST

Sylvie Francoeur sfrancoeur@csmm.qc.ca Gilles Jobin gilles_jobin@yahoo.com Franois Rivest francois-rivest@cspi.qc.ca Pierre Couillard pierre@recitmst.qc.ca Pierre Lachance pierre.lachance@recitmst.qc.ca

Initiation Scratch

70

Annexe 1: Zone de travail

Initiation Scratch

71