Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Découverte d'outils de programmation créative

Présentation de 4 outils pour la mise en place d'ateliers de programmation créative : Scratch, Makey Makey, Touchboard et Wick Editor

  • Identifiez-vous pour voir les commentaires

Découverte d'outils de programmation créative

  1. 1. Découverte d’outils de programmation créative Scratch - Makey Makey - Bare Conductive Touch Board - Wick Editor
  2. 2. Le code informatique est partout autour de nous, il permet de faire fonctionner votre ordinateur, votre smartphone, votre micro-onde, votre voiture, etc …
  3. 3. Pourquoi faire des ateliers de création créative en bibliothèque ? Faciliter le développement des compétences de base pour utiliser l'information et l'informatique
  4. 4. Accompagner la littératie numérique L'aptitude à comprendre et à utiliser le numérique dans la vie courante, à la maison, au travail et dans la collectivité en vue d’atteindre des buts personnels et d’étendre ses compétences et capacités Rapport du Conseil national du numérique, « Citoyens d’une société numérique »
  5. 5. Stimuler l’imagination et la créativité des plus jeunes Faire des outils numériques des outils d’expression et de création
  6. 6. Jay Silver co-créateur de la carte Makey Makey Invention literacy is the ability to read and write human made stuff, from toasters to apps. People think inventors perform magic, but invention is no more magical than reading and writing a sentence. There is a grammar to inventing from mechanical tools, to design thinking, coding, and beyond. There is a literature of inventions, from bicycles to televisions, all around us to draw inspiration from. Just as Thoreau read Emerson’s writings, so too did Edison read Tesla’s inventions.
  7. 7. Qu’est-ce qu’un programme ? Si la touche « espace » est appuyée, Alors le fichier « Miaou » est lu
  8. 8. A chaque fois qu’un signal est détecté : un bouton appuyé, un écran tactile touché, il y a un programme qui indique à l’appareil ce qu’il doit faire Si la touche « espace » est appuyée, Alors le fichier « Miaou » est lu
  9. 9. Si la touche « espace » est appuyée, Alors le fichier « Miaou » est lu Condition ou signal détecté Tâche à effectuer A chaque fois qu’un signal est détecté : un bouton appuyé, un écran tactile touché, il y a un programme qui indique à l’appareil ce qu’il doit faire
  10. 10. Condition ou signal détecté Tâche à effectuer onEvent('keypressed', function () { playSound("miaou.mp3") }); A chaque fois qu’un signal est détecté : un bouton appuyé, un écran tactile touché, il y a un programme qui indique à l’appareil ce qu’il doit faire
  11. 11. Condition ou signal détecté Tâche à effectuer onEvent('keypressed', function () { playSound(« miaou.mp3") }); A chaque fois qu’un signal est détecté : un bouton appuyé, un écran tactile touché, il y a un programme qui indique à l’appareil ce qu’il doit faire
  12. 12. Scratch : http://scratch.mit.edu Un logiciel d’initiation à la programmation
  13. 13. Scratch simplifie l'initiation à la programmation en proposant une interface de programmation graphique onEvent('keypressed', function () { playSound(« miaou.mp3") }); =
  14. 14. Même si la présentation est différente, la logique de programmation et le résultat obtenu restent identiques Condition ou signal détecté Tâche à effectuer
  15. 15. Rendez-vous sur http://scratch.mit.edu Cliquez sur « Commencer à créer »
  16. 16. Il est également possible de télécharger le logiciel : https://scratch.mit.edu/download
  17. 17. Que peut-il faire ? Des films d’animation, des jeux, des installations interactives, . . .
  18. 18. Votre premier programme
  19. 19. N’oubliez pas de brancher un casque ou des enceintes
  20. 20. Présentation
  21. 21. Ajouter de nouveaux sons
  22. 22. Ajouter de nouveaux sons
  23. 23. Sélectionner un son depuis la bibliothèque de Sons
  24. 24. Sélectionner un son depuis la bibliothèque de Sons
  25. 25. Sélectionner un son depuis la bibliothèque de Sons
  26. 26. Importer un fichier son déjà existant
  27. 27. Les fichiers doivent être au format .mp3 ou .wav
  28. 28. Les fichiers apparaissent ensuite dans Scratch
  29. 29. Si vous disposez d’un micro vous avez la possibilité de vous enregistrer directement dans Scratch
  30. 30. Si vous disposez d’un micro vous avez la possibilité de vous enregistrer directement dans Scratch
  31. 31. Conseil : Si votre PC ne possède pas de micro, vous pouvez brancher vos écouteurs de téléphone sur la prise casque de votre PC.
  32. 32. Les barres rouges permettent de raccourcir votre enregistrement En cliquant sur « Jouer » vous obtenez un aperçu Cliquez sur « Sauvegarder » pour valider votre enregistrement
  33. 33. Modifier le nom de votre enregistrement Mettez un nom explicite faisant référence au contenu du fichier. Cela facilitera l’organisation de votre projet
  34. 34. Vous pouvez modifier un son de la bibliothèque ou un enregistrement en y appliquant des effets
  35. 35. Modifiez un fichier son en sélectionnant uniquement la partie qui vous intéresse
  36. 36. Créer une animation Une animation est composée de plusieurs images qui vont défiler rapidement de manière à donner l’illusion d’un mouvement
  37. 37. Pour cela nous allons modifier l’apparence du sprite
  38. 38. En rouge : les costumes disponibles pour le sprite sélectionné En orange : les outils de dessin pour modifier le costume sélectionné En vert : la zone de travail
  39. 39. Nous allons programmer l’alternance des costumes pour donner l’illusion du mouvement Costume 1 Costume 2
  40. 40. Quand la touche espace est pressée alors on passe au costume suivant
  41. 41. On rajoute un déplacement afin de compléter l’animation
  42. 42. Comment faire pour que l’animation se répète automatiquement ?
  43. 43. Je vous laisse chercher ;-)
  44. 44. Le bloc « répéter 10 fois » permet de répéter l’action Le bloc « attendre 0.5 secondes » permet de laisser le temps au spectateur de voir le changement de costume
  45. 45. Conseil : Prévoyez un programme pour effectuer rapidement une remise à zéro de votre programme. Cela vous permettra de gagner du temps lors de vos tests
  46. 46. Faites-Passer : Démarrez l’écriture d’une histoire sur scratch puis échangez de PC avec un autre participant. Présentations interactives : Atelier d’écriture au choix Poursuivez son histoire, puis échangez à nouveau avec une autre personne. Répétez jusqu’à ce que l’histoire soit terminée • D’où venez-vous ?˝ • Qu’aimez-vous ? (nourriture, musique, films, . . .) ˝ • Avez-vous une passion ? un hobby ? Présentez-vous aux autres participants : N’oubliez pas de mettre des images et du son !
  47. 47. A partir de ces 9 blocs imaginez votre premier programme Atelier :
  48. 48. Makey Makey : https://makeymakey.com/ Un carte pour connecter le monde physique et le monde numérique
  49. 49. A quoi ça sert ? La carte Makey Makey permet de créer facilement des installations interactives en permettant de relier nos objets du quotidien à un ordinateur
  50. 50. +- C’est un chemin qui commence et finit au même endroit. Pour circuler l’électricité a besoin de matériau conducteur : câbles électriques, encre conductrice, métal, . . . Qu’est-ce qu’un circuit électrique?
  51. 51. +- L’électricité circule toujours du + vers le - les piles, mais également certains composants disposent d’une côté + et d’un côté -
  52. 52. Branchez la carte Makey Makey avec le câble USB Premier branchement - étape 1 :
  53. 53. Etape 2 Refusez les demandes d’installation de pilote ou de mise à jour
  54. 54. Etape 3 Branchez un câble crocodile sur la partie « Earth » de la carte. Il s’agit du côté - du circuit électrique.
  55. 55. Etape 3 Tenez le câble par la partie métallique, vous êtes maintenant connecté à la masse.
  56. 56. Avec l’autre main, appuyez sur le cercle « Space » une lumière verte doit s’allumer Etape 4
  57. 57. Votre PC doit réagir comme si vous appuyiez sur la barre d’espace de votre clavier Etape 4
  58. 58. Etape 5 Essayez de relier votre carte aux objets autour de vous
  59. 59. Câble crocodiles, cordons M/M, câbles audio, câbles électriques . . . Quels matériaux conducteurs ?
  60. 60. Cuivre adhésif, papier aluminium, vis, plaque de métal, . . . Quels matériaux conducteurs ?
  61. 61. Fruits, pâte à modeler, . . . Quels matériaux conducteurs ?
  62. 62. Encre conductrice et crayons papiers contiennent du graphite qui possède des propriétés conductrices Quels matériaux conducteurs ?
  63. 63. Animaux, plantes, collègues, amis, . . . A vous de tester ! Quels matériaux conducteurs ?
  64. 64. https://makeymakey.com/blogs/how-to-instructions/apps-for-plug-and-play Une Sélection d’applications en ligne à découvrir pour Makey Makey :
  65. 65. Scratch + Makey Makey =
  66. 66. Scratch + Makey Makey =
  67. 67. Retournez dans Scratch Activez les blocs Makey Makey
  68. 68. Activez les blocs Makey Makey dans vos projets Scratch
  69. 69. Une histoire se compose d’un début, un milieu et une fin. Pour chaque case, dessinez une situation et imaginez les dialogues. Dans scratch, enregistrez les dialogues. Atelier première histoire sonore :
  70. 70. Une fois les dessins et les enregistrements terminés créez un programme dans scratch pour déclencher un enregistrement lorsque l’on appuie sur l’un des dessins. Faites les branchements et testez votre première installation Atelier première histoire sonore :
  71. 71. Si votre PC ne possède pas de micro, vous pouvez brancher vos écouteurs de téléphone sur la prise casque de votre PC.
  72. 72. Si cette solution ne fonctionne pas pour vous, utilisez l’application dictaphone de votre Smartphone
  73. 73. Music as Material Ne comptez pas uniquement sur les matériaux conducteurs, explorez de nouvelles façon d’interagir et de connecter des objets
  74. 74. Fruitophone
  75. 75. Tour du monde à vélo - Google bike
  76. 76. Touch board : https://www.bareconductive.com/ Un carte pour réaliser ses installations interactives
  77. 77. A quoi ça sert ? La carte Touch Board permet de créer des installations interactives. Elle peut être utilisée de manière autonome.
  78. 78. Elle utilise la même technologie présente sur les écrans des smartphones, permettant ainsi de détecter un signal sur une seule électrode. Elle incorpore également une carte mémoire et une sortie casque
  79. 79. Prenez des objets conducteurs qui se trouvent autour de vous. Imaginez ce qu’ils pourraient raconter. Atelier les objets ont la parole - Etape 1 :
  80. 80. Etape 2 : Enregistrez vos textes à l’aide d’un dictaphone ou d’un service en ligne comme https://online-voice-recorder.com
  81. 81. Etape 2 : Vous pouvez également télécharger des sons libres de droit sur : http://soundbible.com
  82. 82. Etape 3 : Transférez vos fichiers sons sur la carte mémoire. Vos fichiers doivent être renommés de la façon suivante : TRACK000.mp3, TRACK001.mp3, TRACK002.mp3, . . . TRACK011.mp3
  83. 83. Branchez votre carte Touch Board, connectez votre casque/enceinte, mettez l’interrupteur sur « On » Etape 4 :
  84. 84. Connectez vos objets à l’aides des pinces crocodiles Etape 5 :
  85. 85. Une fois les objets connectés, recalibrez votre carte en appuyant sur le bouton « Reset ». Attendez que la lumière orange s’éteigne et testez. Etape 6 :
  86. 86. A l’aide des tubes d’encre électrique, réalisez un dessin sonore Atelier première histoire sonore (bis) :
  87. 87. Faites un test sur un morceau de papier avant de vous lancer Etape 1 :
  88. 88. Vous pouvez utiliser un modèle à colorier ou vous lancer dans votre propre création. Laissez sécher 15 minutes Etape 2 :
  89. 89. Etape 3 : Enregistrez vos textes à l’aide d’un dictaphone ou d’un service en ligne comme https://online-voice-recorder.com
  90. 90. Etape 3 : Vous pouvez également télécharger des sons libres de droit sur : http://soundbible.com
  91. 91. Etape 4 : Transférez vos fichiers sons sur la carte mémoire. Vos fichiers doivent être renommés de la façon suivante : TRACK000.mp3, TRACK001.mp3, TRACK002.mp3, . . . TRACK011.mp3
  92. 92. Branchez votre carte Touch Board, connectez votre casque/enceinte, mettez l’interrupteur sur « On » Etape 5 :
  93. 93. Une fois que votre dessin est sec, appliquez un point d’encre à l’emplacement des électrodes. Etape 6 :
  94. 94. Avec précaution, placez votre carte, puis mettez un second point d’encre sur les électrodes. Laissez sécher. Etape 7 :
  95. 95. Une fois les objets connectés, recalibrez votre carte en appuyant sur le bouton « Reset » Attendez que la lumière orange s’éteigne et testez. Etape 8 :
  96. 96. Borne audio de musique libre - Centre Culturel d’Isbergues
  97. 97. Détection à distance : En modifiant le logiciel interne de la carte Touch Board, il est possible d’activer la détection à distance. Le Tutoriel (en anglais) est disponible sur le site de Bare Conductive : https://www.bareconductive.com/make/proximity/
  98. 98. Créez vos propres expositions interactives
  99. 99. Wick Editor : https://www.wickeditor.com Flash revisité
  100. 100. A quoi ça sert ? Wick Editor est un logiciel libre en ligne permettant de créer des animations et de les rendre interactives. On peut ainsi créer des gif, des films d’animation, des jeux vidéo ou des histoires et documentaires interactifs.
  101. 101. Atelier création de .Gif
  102. 102. Présentation de l’interface
  103. 103. 3 - La zone de dessin le premier dessin de mon animation 1 - La frise chronologique chaque case correspond à une étape de votre animation 2 - la barre d’outils, ici le pinceau est sélectionné
  104. 104. 2 - Présentation « Onion Skin » ou pelure d’oignon qui permet d’avoir un aperçu des dessins des cases adjacentes 1 - La frise chronologique Pour continuer mon animation, j’ai sélectionné la seconde case de la frise
  105. 105. Complétez les différentes étapes de votre animation
  106. 106. Jusqu’à ce que vous ayez terminé
  107. 107. Appuyez sur le bouton « Play » pour avoir un aperçu de votre animation
  108. 108. Si l’animation est trop rapide ou trop lente, cliquez sur l’engrenage
  109. 109. Modifiez le nombre d’image par seconde (Frame Per Second - FPS) et sauvegardez (passez par exemple de 12 à 8)
  110. 110. Si vous êtes satisfait du résultat, cliquez sur « export »
  111. 111. Nous allons exporter notre animation au format .gif, mais vous avez également la possibilité de l’exporter dans un format vidéo
  112. 112. Une fois l’export terminé, le fichier .gif se télécharge sur votre PC
  113. 113. Vous pouvez ensuite partager votre création en ligne et sur les réseaux sociaux
  114. 114. Partagez vos créations via giphy : https://giphy.com
  115. 115. Ou détourner des oeuvres d’artistes et du domaine public Les oeuvres de Kevin Weir Les détournements de Gallica
  116. 116. Atelier histoire interactive
  117. 117. Etape 1 Créez 3 scènes : la première scène - la maison
  118. 118. Etape 1 Créez 3 scènes : la seconde scène - l’intérieur de la maison
  119. 119. Etape 1 Créez 3 scènes : la troisième scène - la souris
  120. 120. Etape 2 Si je clique sur le bouton play, l’animation va se déclencher. Je dois d’abord bloquer l’animation
  121. 121. Etape 2 Cliquez sur la première scène Modifiez le script « default » en cliquant sur « edit »
  122. 122. Etape 2 Cliquez sur « timeline » puis sur « stop » Si vous cliquez sur « play » le programme reste maintenant sur la première scène
  123. 123. Etape 3 Nous allons maintenant ajouter des zones cliquables pour que le joueur puisse passer d’une scène à l’autre
  124. 124. Etape 3 Sélectionnez la porte puis cliquez sur « make interactive » et « convert to button »
  125. 125. Etape 3 Cliquez sur « add script » puis sur « mouseclick »
  126. 126. Etape 3 Dans l’onglet timeline, cliquez sur la fonction « gotoAndStop » indiquez le n° de la scène suivante
  127. 127. Etape 4 Répétez l’opération pour les scènes 2 et 3.
  128. 128. Etape 5 Ajoutez un son de victoire pour la dernière scène
  129. 129. Etape 5 Dans la case « Asset library » cliquez sur le + pour ajouter une ressource
  130. 130. Etape 5 Sélectionnez votre fichier et cliquez sur « ouvrir »
  131. 131. Etape 5 Votre fichier apparait maintenant dans votre bibliothèque de ressources. Faites attention à bien les renommer cela facilitera l’organisation de votre projet
  132. 132. Etape 5 Sélectionnez la souris et modifiez le script « Mouseclick »
  133. 133. Etape 5 Ajoutez la fonction « playSound » sur la première ligne de votre programme
  134. 134. Etape 6 Ajoutez un écran titre
  135. 135. Etape 6 Sélectionnez les 3 scènes et décalez-les vers la droite.
  136. 136. Etape 6 Sélectionnez les 3 scènes et décalez-les vers la droite.
  137. 137. Etape 6 Comme la première scène a été déplacée, vous devez modifier le script « default » de la première scène en y ajoutant la fonction « stop »
  138. 138. Etape 6 Entrez le titre de votre jeu
  139. 139. Etape 6 Sélectionnez votre texte pour faire apparaitre les options de mise en forme
  140. 140. Etape 6 Nous allons créer un script pour faire démarrer le jeu lorsque la touche A est appuyée
  141. 141. Etape 6 Sur le script « default » de la première scène, Ajoutez un script qui déclenchera le jeu lorsque la touche A du clavier sera appuyée
  142. 142. Etape 6 Sélectionnez « Keydown » puis dans la rubrique input, sélectionnez la fonction « isKeyDown »
  143. 143. Etape 6 Rajoutez ensuite la fonction « gotoAndStop » et précisez le numéro de la scène suivante. Pensez à modifier les valeurs des autres scènes.
  144. 144. Etape 7 Exporter votre jeu en ligne
  145. 145. Etape 7 Il est possible d’exporter votre jeu en ligne. Cliquez sur « Export » puis sur Interactive. Actuellement seule l’option fichier .zip fonctionne
  146. 146. Etape 7 Pour mettre le jeu en ligne, il faut passer par le service d’hébergement de jeux itch.io
  147. 147. Etape 7 Créez-vous un compte (cela peut être le compte de la bibliothèque) puis cliquez sur « upload new project »
  148. 148. Etape 7 Complétez le formulaire
  149. 149. Etape 7 Dans la rubrique « Kind of project » sélectionnez HTML
  150. 150. Etape 7 Puis dans la rubrique « uploads » sélectionnez le fichier .zip exporté Cliquez sur save
  151. 151. Etape 7 Votre jeu est maintenant jouable en ligne dans un navigateur : https://julanimtic.itch.io/mouse
  152. 152. Créer un jeu vidéo Wick Editor permet également de déplacer des éléments à l’aide des touches de clavier, les tutoriels (en anglais) sont disponibles sur la chaine youtube du projet : https://www.youtube.com/channel/UCXUM4laL0jXCO4wJjY15xqg
  153. 153. Bib Goes Home (Game Jam game 2019)
  154. 154. Merci pour votre participation Julien Devriendt Responsable numérique - Médiathèques de Choisy-le-Roi @julanimtic julien.devriendt@animtic.fr

×