Paint Box.md
Opened this issue · 1 comments
title: Crayons de couleurs
level: Scratch 1
language: fr-FR
stylesheet: scratch
embeds: ".png"
base:
translators: Eve OK
reviewers:
status: translating
...
materials: ["Club Leader Resources/.","Project Resources/.*"]
...
Introduction { .intro }
Dans ce projet, tu vas faire ton propre logiciel de peinture !
Etape 1: Faire un stylo { .activity }
Commençons par faire un stylo, qui sera utilisé pour dessiner sur la scène.
Liste d'activités { .check }
-
Commence un nouveau projet dans Scratch, et efface le personnage de chat de façon que ton projet soit vide. Tu peux trouver l'éditeur de Scratch en ligne à l'adresse jumpto.cc/scratch-new.
-
Pour ce projet, tu dois avoir un répertoire appelé 'Project Resources', contenant les images dont tu as besoin. Vérifie que tu trouves bien ce répertoire, et demande à ton enseignant si tu n'arrives pas à le trouver.
-
Maintenant, ajoute la surface ('drawing canvas') (l'arrière -plan) où dessiner dans ta scène. Clique sur la scène, et ensuite clique sur 'importer l'arrière-plan depuis un fichier".
-
Trouve le répertoire 'Project Resources' et choisi le fichier appelé 'frame.png'. Si tu n'as pas ce fichier, tu peux créer ton propre arrière-plan ! Ta scène doit maintenant avoir cette apparence :
-
Ajoute maintenant un crayon à ton projet. Clique sur "importer le lutin depuis un fichier' et choisis l'image appelée 'blue-pencil.png' dans ton répertoire 'Project Resources'. Si tu n'as pas cette image, tu peux dessiner la tienne. Clique sur l'icone
i{.blockmotion} et donne lui le nom de 'Crayon'.
-
Si tu veux utiliser la souris pour dessiner, tu voudras que le crayon suive la souris. Ajoute ce code à ton crayon :
when flag clicked forever go to [mouse pointer v] end -
Teste ce code en cliquant sur le drapeau et en bougeant la souris sur la scène. ça marche comme prévu ?
-
As-tu remarqué que c'est le centre du crayon et non la pointe, qui suit le pointeur de la souris ?
Pour corriger cela, clique sur le costume 'blue-pencil' de ton crayon et clique sur 'Définir le centre du costume' en haut à droite.
-
Tu remarques qu'un axe apparaît sur le costume. Tu peux alors faire glisser cet axe jusqu'au bout de ton crayon, pour définir ce point comme le centre du costume.
-
Clique sur l'onglet 'Scripts' et essaye à nouveau ton crayon - ça marche mieux qu'avant ?
-
Ensuite, il faut faire en sorte que le crayon dessine quand la souris est pressée. Ajoute ce code à ton crayon :
when flag clicked forever go to [mouse pointer v] if <mouse down?> then pen down else pen up end end
Tu as utilisé une boucle répéter indéfiniment {.blockcontrol} (forever) pour faire que le crayon suive la souris, et tu as utilisé une condition si {.blockcontrol} (if) pour dessiner quand tu appuies sur ta souris.
-
Teste de nouveau ton code. Déplace le crayon autour de la scène et appuie sur la souris. Peux-tu dessiner avec ton crayon ?
-
Il y a encore un problème avec le crayon - tu peux dessiner partout sur la scène, y compris l'espace en dessous de la surface de dessin !
Pour régler ça, tu dois dire au crayon de dessiner seulement quand la souris est pressée et si la y-position de la souris est plus grand que -110 (
mouse y{.blocksensing}> -110{.blockoperators}). Change la condition de ton crayonif{.blockcontrol} de cette façon :when flag clicked forever go to [mouse pointer v] if < <mouse down?> and < (mouse y) > (-110) > > then pen down else pen up end end -
Teste ton projet ; tu ne dois pas pouvoir dessiner hors de la surface de dessin.
Sauvegarde ton projet { .save }
Etape 2 : Les couleurs { .activity }
Ajoute différentes couleurs de crayon à ton projet et permet à l'utilisateur de choisir entre elles !
Liste d'activités { .check }
-
D'abord, ajoute un autre costume vert à ton crayon. Clique sur ton crayon et clique sur 'importer le costume d'un fichier' et choisi l'image du crayon vert appelée 'green-pencil.png'. N'oublie pas de définir le centre de ton nouveau costume.
-
Tu dois maintenant ajouter deux lutins (ici des boutons), qui seront utilisés pour choisir la couleur du crayon. Clique sur 'Importer le lutin depuis un fichier' et ajoute les images des boutons bleu et vert appelées 'blue-selector.png' et 'green-selector.png'.
Ta scène doit maintenant ressembler à ça :
-
Quand tu cliques sur le bouton vert (green selector icon), tu dois
envoyer{.blockevents} un message à ton crayon (lutin) pour lui dire de changer de costume et de couleur de crayon. Pour faire ça, ajoute ce code à ton bouton vert :when this sprite clicked broadcast [green v]
Pour créer l'élément envoyer {.blockevents}, clique sur << message1 >> et sélectionne dans le menu déroulant 'nouveau message'.
Tu peux écrire 'vert' comme nouveau message.
-
Maintenant, tu dois dire à ton crayon (lutin) ce qu'il doit faire en recevant ce message. Ajoute ce code à ton crayon (lutin) :
when I receive [green v] switch costume to [green-pencil v] set pen color to [#00FF00]
Pour choisir la couleur verte, clique sur la case colorée dans le bloc de sélection choisir la couleur pour le stylo {.blockpen} puis clique sur l'image du bouton du vert afin de sélectionner le vert comme couleur de ton crayon.
-
Tu peux maintenant faire la même chose pour le crayon bleu, ajoute ce code à ton bouton de sélection bleu :
when this sprite clicked broadcast [blue v]
...et ajoute ce code à ton crayon :
when I receive [blue v]
switch costume to [blue-pencil v]
set pen color to [#0000FF]
```
<!-- si la traduction ne marche pas, utiliser l'image traduite en ajoutant ce code  -->
+ Enfin, tu dois dire à ton crayon quel costume et quelle couleur choisir, ainsi que l'effacement de l'écran, quand ton projet est commencé. Ajoute ce code au début du script `quand drapeau pressé` {.blockevents} (avant la boucle `répéter indéfiniment` {.blockcontrol} ) :
```blocks
clear
switch costume to [blue-pencil v]
set pen color to [#0000FF]
```
<!-- si la traduction ne marche pas, utiliser l'image traduite en ajoutant ce code  -->
Si tu préfères, tu peux commencer avec une autre couleur de crayon !
+ Teste ton projet. Peux-tu passer du crayon bleu au crayon vert ?
 <!-- image 15, non traduite -->
## Sauvegarde ton projet { .save }
# Etape 3 : Corriger les erreurs { .activity }
Parfois, nous faisons des erreurs, il faut donc ajouter à ton projet un bouton 'effacer' et la possibilité de gommer des dessins !
## Liste d'activités { .check }
+ Pour effacer l'écran quand ton projet commence, ajoute un bouton pour effacer. Pour faire cela, ajoute un nouveau bouton (lutin) en prenant l'image 'cancel-button.png' dans ton répertoire 'Resources'.
 <!-- image 16, non traduite -->
+ Ajoute ce code afin d'effacer l'écran quand tu cliques sur ce nouveau bouton.
```blocks
when this sprite clicked
clear
```
<!-- si la traduction ne marche pas, utiliser l'image traduite en ajoutant ce code  -->
Tu n'as pas besoin d'envoyer un message pour effacer l'écran, et cela peut se produire avec n'importe quel crayon !
+ Tu peux aussi créer une gomme. Pour ça, ajoute l'image de la gomme 'eraser.png' comme nouveau costume à ton crayon (lutin) (n'oublie pas de centrer le costume) _et_ aussi comme nouveau lutin.
 <!-- image 17, traduite et plus grande pour faire voir la différence entre le "lutin" crayon en costume de gomme et le "lutin" gomme -->
+ Tu peux ajouter ce code au bouton (lutin) de sélection de la gomme, pour indiquer au crayon de devenir une gomme.
```blocks
when this sprite clicked
broadcast [eraser v]
```
<!-- si la traduction ne marche pas, utiliser l'image traduite en ajoutant ce code  -->
+ Quand le crayon reçoit ce message, tu peux créer une gomme en changeant le costume du crayon en celui d'une gomme, et en changeant la couleur du crayon en une couleur identique à celle de l'écran !
```blocks
when I receive [eraser v]
switch costume to [eraser v]
set pen color to [#8d8d8d]
```
<!-- plutôt que la traduction d'un ensemble de blocs incomplet, vous devriez utiliser cette image traduite (j'ai testé le code, ça ne marche pas tel qu'indiqué dans le manuel)  -->
+ Teste ton projet pour voir si tu arrives à effacer ce que tu as dessiné. Attention, le trait gris est fin, tu dois faire attention pour le voir.
 <!-- image 18, non traduite mais refaite pour illustrer la finesse du trait de la gomme -->
# Etape 4 : Changer l'épaisseur du trait { .activity }
Maintenant tu vas permettre à l'utilisateur de dessiner avec des crayons ayant différentes largeurs de trait.
## Liste d'activités { .check }
+ D'abord, ajoute une nouvelle variable appelée 'width' (largeur). Si tu n'es pas trop sûr de savoir comment faire, le projet Ballons pourra t'aider.
+ Ajoute cette ligne de code _dans_ la boucle `répéter indéfiniment` {.blockcontrol} du code de ton crayon et de ta gomme :
```blocks
set pen size to (width)
```
<!-- si la traduction ne marche pas, utiliser l'image traduite en ajoutant ce code  -->
La largeur de trait de ton crayon va maintenant dépendre de la valeur de ta variable 'width'.
+ Tu peux changer le chiffre de la variable en faisant un clic droit dessus (dans la surface de dessin) puis en sélectionnant 'potentiomètre'.
 <!-- image 19, traduite -->
Tu peux maintenant déplacer le curseur de façon à changer la valeur de la variable.
 <!-- image 20, non traduite -->
+ Teste ton projet et vérifie que tu peux changer la largeur du trait de ton crayon.
 <!-- image 21, non traduite -->
Si tu veux, tu peux définir les valeurs minimale et maximales de ta variable 'width'. Pour faire cela, fais à nouveau un clic droit sur ta variable et sélectionne 'définir le min et le max du curseur'. Défini le minimum et le maximum de ta variable, par exemple de 1 à 20.
 <!-- image 21, traduite -->
Continue de tester ta variable 'width' jusqu'à ce que tu sois content du réglage.
## Sauvegarde ton projet { .save }
## Défi : Raccourcis clavier {.challenge}
Peux-tu créer un raccourci clavier pour tes commandes? Par exemple :
+ b = sélection du crayon bleu
+ g = sélection du crayon vert
+ e = sélection de la gomme
+ c = effacement de l'espace de dessin
Tu peux même permettre à l'utilisateur de modifier la largeur du trait en utilisant les flèches !
## Sauvegarde ton projet { .save }
## Défi : plus de crayons {.challenge}
Peux tu ajouter des crayons rouge, jaune et noir à ton logiciel de dessin? Tu trouveras toutes les images dont tu as besoin dans le répertoire 'Resources'. N'oublie pas d'ajouter les raccourcis claviers pour ces nouveaux crayons !
Peux tu utiliser tes crayons pour dessiner un dessin ?
 <!-- image 22, non traduite -->
## Sauvegarde ton projet { .save }
