Pourquoi ? > Présentation > Robot > Robot A > Robot B > Robot C > Simu > Robot D > Blocs graphiques > OzoBlockly > + loin > Jeu plateau
Créer des animations avec des blocs graphiques : Le langage graphique Snap!
Snap! = Scratch en mieux ^^ ! (sans Flash)
Préférez les navigateurs modernes comme Firefox, Chrome, Opéra, Safari, etc. Evitez Internet Explorer ou Edge !
Pas besoin d'internet : Copier Snap! 
sur une clé USB et installer le navigateur Firefox sur votre ordinateur.
(mise à jour 03/02/2017)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
A/ Qu'est-ce que Snap! ? (Snap! en ligne) 
B/ Installer Snap! (Pour une utilisation sans internet, un simple copier-coller)
C/ Créer un nouveau personnage (un lutin)
D/ Faire parler un personnage. (bulle de BD)
E/ Faire parler un personnage. (audio)
G/ Ajouter un autre costume au lutin. (attitude et expression)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
A/ Qu'est-ce que Snap! ? (Snap! en ligne) Snap! = Scratch en mieux !
Si vous voulez, vous pouvez le choisir en langue française comme ci-dessous : (cliquer sur l'image)
Comme vous pouvez le voir, il ressemble énormément à Scratch, car c'est Scratch... ou plutôt, une ré-écriture de Scratch !
Snap! (sur Wikipedia) : Le principe de Snap! est le même que celui de Scratch : Déplacer des blocs qui s'assemblent, ou pas, grâce à leurs formes à encastrement pour former un programme.
Le projet sur Github où on peut le télécharger sous forme de fichier zip.
Snap!, développé par l'université de Berkeley est entièrement basé sur HTML5 et ne nécessite aucune installation de logiciel en local. ". Et ça change tout ! Plus besoin d'installer Flash avec Adobe Air ! Du coup, Snap! fonctionne sur tous les ordinateurs, toutes les tablettes et même les smartphones, avec ou sans internet !
<Sommaire>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
B/ Installer Snap! (Pour une utilisation sans internet)
Un simple copier-coller !
- Snap! zippé
: (Cliquer droit, "Enregistrer la cible du lien sous...") - Extraire le fichier "Snap--Build-Your-Own-Blocks-master.zip".
- Double-cliquer sur le fichier index.html
- C'est tout ! (Préférez quand même le navigateur Firefox pour les utilisations hors-ligne)
Rien à installer !
<Sommaire>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
C/ Créer un nouveau personnage (dans Snap!, comme dans Scratch, un personnage ou un objet, on appelle ça un "lutin")
- Image téléchargeable pour vos essais, "chien-100" : 
(Cliquer-droit sur l'image pour la télécharger, "Enregistrer l'image sous...")
- Cliquer sur l'onglet "Costumes".
- Glisser-déposer une image dans l'aire des costumes.
Mon personnage est au format .png car ce format gère la transparence ! Voir mon tutoriel ici...
<Sommaire>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
D/ Faire parler un personnage. (Afficher une bulle de BD...)
Chaque lutin a sa page de "Scripts, Costumes et sons", mais, il n'y a pour l'instant, qu'un lutin sur la page, donc pas de confusion possible.
En cas de doute, cliquer sur le lutin pour le sélectionner.
La programmation de Snap! étant une programmation événementielle, il faut réfléchir à déclencher un événement pour qu'un programme ou un groupe de blocs se lance.
J'ai choisi de faire aboyer le chien quand je le touche.
-Dans l'onglet "Scripts" du lutin chien, déposer le bloc événement "Quand je suis cliqué" qui vient de la catégorie "Contrôles" (couleur beige) :
<Sommaire>
-Attacher, sous ce bloc, le bloc "dire Salut pendant 2 sec." qui vient de la catégorie "Apparence" (couleur mauve) :
<Sommaire>
-Changer le texte "Salut !" par "Ouaf !" en cliquant dessus.
-Essayer votre script en cliquant sur le chien :
<Sommaire>
Au bout de 2 secondes, la bulle disparaît :
<Sommaire>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
E/ Faire parler un personnage. (audio : diffuser un son...)
Le fichier son "ouaf.mp3" à télécharger pour vos essais : 
(Cliquer-droit sur la bulle, "Enregistrer la cible du lien sous..." pour l'enregistrer le fichier mp3 sur votre ordinateur.)
-Glisser-déposer un son dans l'onglet "Sons" du lutin "chien" : ici, "ouaf.mp3"
<Sommaire>
Le son est disponible et on peut le tester en appuyant sur "jouer" :
<Sommaire>
-Dans l'onglet "Scripts", placer un bloc "jouer le son (...)" après le 1er changement de costume :
<Sommaire>
-Sélectionner le son "ouaf" dans le bloc "jouer le son (...)" :
<Sommaire>
-On peut essayer le programme en cliquant sur le chien :
-Le fichier d'exportation du projet : leChienAudio.xml
<Sommaire>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Il faut penser à un événement qui déclenchera le déplacement.
Exemple quand on clique sur le drapeau vert, le personnage avance de 10 pixels :
<Sommaire>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
G/ Ajouter un autre costume à un lutin. (Le chien aura plusieurs attitudes ou expressions. Ici, il va ouvrir la gueule et quand on le touchera.)
Qu'est-ce qu'un "costume" ?
Dans Snap! comme dans Scratch, un lutin peut avoir plusieurs apparences, attitudes ou expressions. Exemple, un personnage peut sourire, fermer la bouche, ouvrir la bouche, etc.
A chaque expression, correspond un "costume". En fait une image différente.
Il existe des blocs qui permettent à un lutin de changer de "costume" à la demande et donc, d'animer le lutin.
Il va falloir s'organiser car nous serons vite perdus !
-Commencer par renommer le 1er lutin en l'appelant "chien" au lieu de "lutin" :
<Sommaire>
- Image téléchargeable du chien tirant la langue pour vos essais, "chien2-100" : 
(Cliquer-droit sur l'image pour la télécharger, "Enregistrer l'image sous...")
-Glisser une image du chien tirant la langue sous le 1er costume :
<Sommaire>
-Ajouter un bloc "basculer sur le costume [...]" avant le bloc "dire [Ouaf !]...". Y mettre "chien2-100" comme nom de costume.
et un bloc bloc "basculer sur le costume [...]" après le bloc "dire...". Y mettre "chien-100" comme nom de costume :
Maintenant, quand le chien aboie, il tire la langue...
-Le fichier d'exportation du projet : leChien2Costumes.xml
<Sommaire>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
H/ Interaction entre 2 lutins. (Quand je touche la niche, le chien aboie et tire la langue.)
- Image téléchargeable pour vos essais, "niche-100" : 
(Cliquer-droit sur l'image pour la télécharger, "Enregistrer l'image sous...")
-Cliquer sur "ajouter un nouveau lutin Tortue" :
<Sommaire>
-Glisser la niche sans l'onglet "Costumes" du 2è lutin que l'on vient de créer :
<Sommaire>
Le 2è lutin n'a pas la bonne orientation ! Comment faire ?
-Cliquer sur la flèche "le lutin ne pivote jamais" pour remettre la niche dans le bon sens :
<Sommaire>
Le principe :
Quand on touchera le lutin "niche", il émettra un message. J'ai choisi "touché". On peut choisir un message quelconque (penser à ne pas utiliser 2 x le même message dans un programme).
Le lutin "chien" écoutera et quand il recevra ce message "touché", ça déclenchera un événement.
Ici, en réponse à cet événement "J'ai reçu le message [ touché ]", le chien aboiera.
-Renommer le nom "lutin" en "niche" et dans l'onglet "Scripts" du lutin "niche", déposer les blocs suivants :
<Sommaire>
-Entrer un message, ici "touché" dans le bloc "envoyer à tous" :
<Sommaire>
-Changer d'événement déclencheur. Détacher les blocs en les glissant vers le bas:
<Sommaire>
-Pour supprimer l'événement "Quand je suis cliqué", cliquer-droit dessus, puis sur "supprimer" :
<Sommaire>
-Mettre à sa place "Quand je reçois (...)" et sélectionner le message "touché" :
<Sommaire>
-Tester le programme en cliquant sur la niche :
<Sommaire>
-Le fichier d'exportation du projet : leChienInteraction.xml
Pourquoi ? > Présentation > Robot > Robot A > Robot B > Robot C > Simu > Robot D > Blocs graphiques > OzoBlockly > + loin > Jeu plateau
Denis Galipot