SlideShare une entreprise Scribd logo
1  sur  261
Télécharger pour lire hors ligne
Découverte d’outils de programmation créative
Scratch - Makey Makey - Touch Board - Wick Editor - Micro:bit - RenPy
Julien Devriendt - CC BY-SA-NC
Le code informatique est partout autour de nous, il permet de faire
fonctionner votre ordinateur, votre smartphone, votre micro-onde, votre
voiture, etc …
Julien Devriendt - CC BY-SA-NC
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
Julien Devriendt - CC BY-SA-NC
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 » Julien Devriendt - CC BY-SA-NC
Stimuler l’imagination et la créativité des plus jeunes
Faire des outils numériques des outils
d’expression et de création
Julien Devriendt - CC BY-SA-NC
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.
Julien Devriendt - CC BY-SA-NC
Qu’est-ce qu’un programme ?
Si la touche « espace »
est appuyée,
Alors le
fi
chier « Miaou »
est lu
Julien Devriendt - CC BY-SA-NC
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
fi
chier « Miaou »
est lu
Julien Devriendt - CC BY-SA-NC
Si la touche « espace »
est appuyée,
Alors le
fi
chier
« Miaou » est lu
Condition
ou
signal détecté
Tâche à e
ff
ectuer
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
Julien Devriendt - CC BY-SA-NC
Condition
ou
signal détecté Tâche à e
ff
ectuer
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
Julien Devriendt - CC BY-SA-NC
Condition
ou
signal détecté Tâche à e
ff
ectuer
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
Julien Devriendt - CC BY-SA-NC
Scratch : http://scratch.mit.edu
Un logiciel d’initiation à la programmation
Julien Devriendt - CC BY-SA-NC
Scratch simplifie l'initiation à la programmation en proposant
une interface de programmation graphique
onEvent('keypressed', function () {
playSound(« miaou.mp3")
});
=
Julien Devriendt - CC BY-SA-NC
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 à e
ff
ectuer
Julien Devriendt - CC BY-SA-NC
Rendez-vous sur http://scratch.mit.edu
Cliquez sur « Commencer à créer »
Julien Devriendt - CC BY-SA-NC
Julien Devriendt - CC BY-SA-NC
Il est également possible de télécharger le logiciel :
https://scratch.mit.edu/download
Julien Devriendt - CC BY-SA-NC
Que peut-il faire ?
Des films d’animation, des jeux, des installations interactives, . . .
Julien Devriendt - CC BY-SA-NC
Julien Devriendt - CC BY-SA-NC
Votre premier programme
Julien Devriendt - CC BY-SA-NC
N’oubliez pas de brancher un casque ou des enceintes
Julien Devriendt - CC BY-SA-NC
Présentation
Julien Devriendt - CC BY-SA-NC
Ajouter de nouveaux sons
Julien Devriendt - CC BY-SA-NC
Ajouter de nouveaux sons
Julien Devriendt - CC BY-SA-NC
Sélectionner un son depuis la bibliothèque de Sons
Julien Devriendt - CC BY-SA-NC
Sélectionner un son depuis la bibliothèque de Sons
Julien Devriendt - CC BY-SA-NC
Sélectionner un son depuis la bibliothèque de Sons
Julien Devriendt - CC BY-SA-NC
Importer un fichier son déjà existant
Julien Devriendt - CC BY-SA-NC
Les fichiers doivent être au format .mp3 ou .wav
Julien Devriendt - CC BY-SA-NC
Les fichiers apparaissent ensuite dans Scratch
Julien Devriendt - CC BY-SA-NC
Si vous disposez d’un micro vous avez la possibilité de
vous enregistrer directement dans Scratch
Julien Devriendt - CC BY-SA-NC
Si vous disposez d’un micro vous avez la possibilité de
vous enregistrer directement dans Scratch
Julien Devriendt - CC BY-SA-NC
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. Julien Devriendt - CC BY-SA-NC
Les barres rouges permettent de raccourcir votre enregistrement
En cliquant sur « Jouer » vous obtenez un aperçu
Cliquez sur « Sauvegarder » pour valider votre enregistrement
Julien Devriendt - CC BY-SA-NC
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 Julien Devriendt - CC BY-SA-NC
Vous pouvez modifier un son de la bibliothèque ou un
enregistrement en y appliquant des effets
Julien Devriendt - CC BY-SA-NC
Modifiez un fichier son en sélectionnant uniquement la partie
qui vous intéresse
Julien Devriendt - CC BY-SA-NC
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 Julien Devriendt - CC BY-SA-NC
Pour cela nous allons modifier l’apparence du sprite
Julien Devriendt - CC BY-SA-NC
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
Julien Devriendt - CC BY-SA-NC
Nous allons programmer l’alternance des costumes pour
donner l’illusion du mouvement
Costume 1 Costume 2
Julien Devriendt - CC BY-SA-NC
Quand la touche espace est pressée alors on passe au
costume suivant
Julien Devriendt - CC BY-SA-NC
On rajoute un déplacement afin de compléter l’animation
Julien Devriendt - CC BY-SA-NC
Comment faire pour que l’animation se répète automatiquement ?
Julien Devriendt - CC BY-SA-NC
Je vous laisse chercher ;-)
Julien Devriendt - CC BY-SA-NC
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 Julien Devriendt - CC BY-SA-NC
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
Julien Devriendt - CC BY-SA-NC
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 !
Julien Devriendt - CC BY-SA-NC
A partir de ces 9 blocs imaginez votre premier programme
Atelier :
Julien Devriendt - CC BY-SA-NC
Makey Makey : https://makeymakey.com/
Un carte pour connecter le monde physique et le monde numérique
Julien Devriendt - CC BY-SA-NC
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
Julien Devriendt - CC BY-SA-NC
+
-
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?
Julien Devriendt - CC BY-SA-NC
+
-
L’électricité circule toujours du + vers le -
les piles, mais également certains composants disposent
d’une côté + et d’un côté - Julien Devriendt - CC BY-SA-NC
Branchez la carte Makey Makey avec le câble USB
Premier branchement - étape 1 :
Julien Devriendt - CC BY-SA-NC
Etape 2
Refusez les demandes d’installation de pilote ou de mise à jour
Julien Devriendt - CC BY-SA-NC
Etape 3
Branchez un câble crocodile sur la partie « Earth » de la carte.
Il s’agit du côté - du circuit électrique.
Julien Devriendt - CC BY-SA-NC
Etape 3
Tenez le câble par la partie métallique, vous êtes maintenant connecté à la
masse. Julien Devriendt - CC BY-SA-NC
Avec l’autre main, appuyez sur le cercle « Space » une lumière verte doit
s’allumer
Etape 4
Julien Devriendt - CC BY-SA-NC
Votre PC doit réagir comme si vous appuyiez sur la barre d’espace de
votre clavier
Etape 4
Julien Devriendt - CC BY-SA-NC
Etape 5
Essayez de relier votre carte aux objets autour de vous
Julien Devriendt - CC BY-SA-NC
Câble crocodiles, cordons M/M, câbles audio, câbles électriques . . .
Quels matériaux conducteurs ?
Julien Devriendt - CC BY-SA-NC
Cuivre adhésif, papier aluminium, vis, plaque de métal, . . .
Quels matériaux conducteurs ?
Julien Devriendt - CC BY-SA-NC
Fruits, pâte à modeler, . . .
Quels matériaux conducteurs ?
Julien Devriendt - CC BY-SA-NC
Encre conductrice et crayons papiers contiennent du graphite qui possède
des propriétés conductrices
Quels matériaux conducteurs ?
Julien Devriendt - CC BY-SA-NC
Animaux, plantes, collègues, amis, . . . A vous de tester !
Quels matériaux conducteurs ?
Julien Devriendt - CC BY-SA-NC
https://makeymakey.com/blogs/how-to-instructions/apps-for-plug-and-play
Une Sélection d’applications en ligne à découvrir pour Makey Makey :
Julien Devriendt - CC BY-SA-NC
Scratch + Makey Makey =
Julien Devriendt - CC BY-SA-NC
Scratch + Makey Makey =
Julien Devriendt - CC BY-SA-NC
Retournez dans Scratch
Activez les blocs Makey Makey
Julien Devriendt - CC BY-SA-NC
Activez les blocs Makey Makey dans vos projets Scratch
Julien Devriendt - CC BY-SA-NC
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 :
Julien Devriendt - CC BY-SA-NC
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 :
Julien Devriendt - CC BY-SA-NC
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.
Julien Devriendt - CC BY-SA-NC
Si cette solution ne fonctionne pas pour vous, utilisez l’application dictaphone
de votre Smartphone
Julien Devriendt - CC BY-SA-NC
Music as Material
Ne comptez pas uniquement sur les matériaux conducteurs, explorez de nouvelles
façon d’interagir et de connecter des objets
Julien Devriendt - CC BY-SA-NC
Fruitophone
Julien Devriendt - CC BY-SA-NC
Tour du monde à vélo - Google bike
Julien Devriendt - CC BY-SA-NC
Merci pour votre participation
Julien Devriendt
@julanimtic
julien.devriendt@animtic.fr
Touch board : https://www.bareconductive.com/
Un carte pour réaliser ses installations interactives
Julien Devriendt - CC BY-SA-NC
A quoi ça sert ?
La carte Touch Board permet de créer des installations interactives. Elle peut être
utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
A quoi ça sert ?
La carte Touch Board permet de créer des installations interactives. Elle peut être
également utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
A quoi ça sert ?
La carte Touch Board permet de créer des installations interactives. Elle peut être
utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
A quoi ça sert ?
La carte Touch Board permet de créer des installations interactives. Elle peut être
utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
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 Julien Devriendt - CC BY-SA-NC
Mise en route
Ajouter une enceinte, branchez la carte et touchez les électrodes
Julien Devriendt - CC BY-SA-NC
Prenez des objets conducteurs qui se trouvent autour de vous.
Imaginez ce qu’ils pourraient raconter.
Atelier les objets ont la parole - Etape 1 :
Julien Devriendt - CC BY-SA-NC
Etape 2 :
Enregistrez vos textes à l’aide d’un dictaphone ou d’un service en ligne comme
https://online-voice-recorder.com
Julien Devriendt - CC BY-SA-NC
Etape 2 :
Vous pouvez également télécharger des sons libres de droit sur :
http://soundbible.com
Julien Devriendt - CC BY-SA-NC
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
Julien Devriendt - CC BY-SA-NC
Branchez votre carte Touch Board, connectez votre casque/enceinte, mettez
l’interrupteur sur « On »
Etape 4 :
Julien Devriendt - CC BY-SA-NC
Connectez vos objets à l’aides des pinces crocodiles
Etape 5 :
Julien Devriendt - CC BY-SA-NC
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 :
Julien Devriendt - CC BY-SA-NC
Changer le code :
Installez Arduino IDE 1.8
Installez manuellement la bibliothèque Touchboard Julien Devriendt - CC BY-SA-NC
Changer le code :
Une fois Arduino installé, cliquez sur :
Fichier -> Carnet de croquis -> Touch Board Exemples -> HID_Keyboard
Julien Devriendt - CC BY-SA-NC
Changer le code :
Cliquez ensuite sur :
Outils -> Type de carte -> Bare Conductive Boards -> Bare Conductive Touch Board
Julien Devriendt - CC BY-SA-NC
Changer le code :
Enfin cliquez sur : Outils -> Port
Sélectionnez le port mentionnant votre carte TouchBoardJulien Devriendt - CC BY-SA-NC
Téléverser le code sur la carte Arduino :
Cliquez sur la flèche
Une fois le téléversement terminé, un message de confirmation apparait en bas de la fenêtre
Julien Devriendt - CC BY-SA-NC
Transformez votre carte en instrument MIDI
Atelier création d’instrument de musique :
Julien Devriendt - CC BY-SA-NC
Protocole de communication entre instruments électroniques, séquenceurs
et logiciels de musique
MIDI : Musical Instrument Digital Interface
Julien Devriendt - CC BY-SA-NC
Identifiez les ponts de soudure MIDI
Julien Devriendt - CC BY-SA-NC
Connectez les ponts de soudure MIDI
A l’aide de la peinture conductrice, connectez les ponts de soudure
Julien Devriendt - CC BY-SA-NC
Attachez la carte au clavier
A l’aide des électrodes adhésives, connectez la carte au clavier
Julien Devriendt - CC BY-SA-NC
Téléversez le code sur la carte
Cliquez sur :
Fichier -> Carnet de croquis -> Touch Board Exemples -> Midi_Piano
Julien Devriendt - CC BY-SA-NC
Téléversez le code sur la carte
Cliquez sur :
Fichier -> Carnet de croquis -> Touch Board Exemples -> Midi_Piano
Julien Devriendt - CC BY-SA-NC
Outils -> Type de carte -> Bare Conductive Boards -> Bare Conductive Touch Board (USB MIDI, iPad
Compatible)
Cliquez ensuite sur :
Julien Devriendt - CC BY-SA-NC
Enfin cliquez sur :
Outils -> Port
Sélectionnez le port mentionnant votre carte TouchBoardJulien Devriendt - CC BY-SA-NC
Enfin cliquez sur :
Outils -> Port
Sélectionnez le port mentionnant votre carte TouchBoardJulien Devriendt - CC BY-SA-NC
Branchez votre enceinte, allumez votre carte et jouez
Julien Devriendt - CC BY-SA-NC
Modifiez le code pour changer d’instrument
Liste des instruments de musique
Julien Devriendt - CC BY-SA-NC
Modifiez le code pour changer d’instrument
Liste des instruments de musique
Julien Devriendt - CC BY-SA-NC
Contrôlez des projections vidéo avec MadMapper
Julien Devriendt - CC BY-SA-NC
Configurer un projecteur
Julien Devriendt - CC BY-SA-NC
Ajustez la mire à votre surface de projection
Passez en mode projection plein écran
Output ->Full Screen Mode
Julien Devriendt - CC BY-SA-NC
Ajoutez un Quad
Julien Devriendt - CC BY-SA-NC
Modifier le contenu projeté
Cliquez sur la flèche pour assigner le contenu au Quad
Julien Devriendt - CC BY-SA-NC
Ajuster la taille du contenu projeté
Dans la fenêtre de droite, utilisez les poignées pour ajuster la taille de
l’élément projeté Julien Devriendt - CC BY-SA-NC
Remplacez l’image fixe par une vidéo
Julien Devriendt - CC BY-SA-NC
Ajustez la projection de votre vidéo à l’aide des poignées
Julien Devriendt - CC BY-SA-NC
Passez la vidéo en « lecture jusqu’à la fin de la boucle et pause »
Julien Devriendt - CC BY-SA-NC
Téléversez le code MIDI_Interface sur votre carte Touchboard
Pensez à modifier les valeurs de sensibilité de votre carte
Julien Devriendt - CC BY-SA-NC
Branchez votre carte Touchboard
Julien Devriendt - CC BY-SA-NC
Modifier les contrôleurs MIDI en cliquant sur :
EDIT -> Edit MIDI Controls
Julien Devriendt - CC BY-SA-NC
Cliquez sur la flèche « Retour au début »
Julien Devriendt - CC BY-SA-NC
Sur votre carte Touchboard, appuyez sur l’électrode 00
Julien Devriendt - CC BY-SA-NC
Cliquez de nouveau sur Edit MIDI Controls pour quitter le mode d’édition
des contrôleurs MIDI
Julien Devriendt - CC BY-SA-NC
Votre carte Touchboard contrôle désormais le lancement de votre vidéo
Julien Devriendt - CC BY-SA-NC
Détection à distance :
En modifiant le code il est possible d’activer la détection à distance.
Julien Devriendt - CC BY-SA-NC
Détection à distance :
Repérez les lignes suivantes et modifiez les valeurs
Attention la valeur de la ligne setTouchThreshold doit toujours être 2X supérieure à la valeur de la
ligne setReleaseThreshold Julien Devriendt - CC BY-SA-NC
Détection à distance :
Vous pouvez également modifier la sensibilité pour chaque électrode individuellement
Julien Devriendt - CC BY-SA-NC
A l’aide des tubes d’encre électrique, réalisez une présentation interactive
Atelier poster :
Julien Devriendt - CC BY-SA-NC
Faites un test sur un morceau de papier avant de vous lancer
Etape 1 :
Julien Devriendt - CC BY-SA-NC
Vous pouvez utiliser un modèle à colorier ou vous lancer dans votre propre
création. Laissez sécher 15 minutes
Etape 2 :
Julien Devriendt - CC BY-SA-NC
Etape 3 :
Enregistrez vos textes à l’aide d’un dictaphone ou d’un service en ligne comme
https://online-voice-recorder.com
Julien Devriendt - CC BY-SA-NC
Etape 3 :
Vous pouvez également télécharger des sons libres de droit sur :
http://soundbible.com
Julien Devriendt - CC BY-SA-NC
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
Julien Devriendt - CC BY-SA-NC
Branchez votre carte Touch Board, connectez votre casque/enceinte, mettez
l’interrupteur sur « On »
Etape 5 :
Julien Devriendt - CC BY-SA-NC
Une fois que votre dessin est sec, appliquez un point d’encre à l’emplacement
des électrodes.
Etape 6 :
Julien Devriendt - CC BY-SA-NC
Avec précaution, placez votre carte, puis mettez un second point d’encre sur
les électrodes. Laissez sécher.
Etape 7 :
Julien Devriendt - CC BY-SA-NC
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 :
Techniques de peinture
Utilisez des pochoirs et protégez vos réalisations avec du vernis en spray
Julien Devriendt - CC BY-SA-NC
Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
Créez vos propres expositions interactives
Bibliothèque BTUtils
Julien Devriendt - CC BY-SA-NC
Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
Merci pour votre participation
Julien Devriendt
@julanimtic
julien.devriendt@animtic.fr
Wick Editor : https://www.wickeditor.com
Flash revisité
Julien Devriendt - CC BY-SA-NC
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. Julien Devriendt - CC BY-SA-NC
Atelier création de .Gif
Julien Devriendt - CC BY-SA-NC
Présentation de l’interface
Julien Devriendt - CC BY-SA-NC
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é
Julien Devriendt - CC BY-SA-NC
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 Julien Devriendt - CC BY-SA-NC
Complétez les différentes étapes de votre animation
Julien Devriendt - CC BY-SA-NC
Jusqu’à ce que vous ayez terminé
Julien Devriendt - CC BY-SA-NC
Appuyez sur le bouton « Play » pour avoir un aperçu de votre animation
Julien Devriendt - CC BY-SA-NC
Si l’animation est trop rapide ou trop lente, cliquez sur l’engrenage
Julien Devriendt - CC BY-SA-NC
Modifiez le nombre d’image par seconde (Frame Per Second - FPS) et
sauvegardez (passez par exemple de 12 à 8)
Julien Devriendt - CC BY-SA-NC
Si vous êtes satisfait du résultat, cliquez sur « export »
Julien Devriendt - CC BY-SA-NC
Nous allons exporter notre animation au format .gif, mais vous avez
également la possibilité de l’exporter dans un format vidéo
Julien Devriendt - CC BY-SA-NC
Une fois l’export terminé, le fichier .gif se télécharge sur votre PC
Julien Devriendt - CC BY-SA-NC
Vous pouvez ensuite partager votre création en ligne et sur les réseaux
sociaux
Julien Devriendt - CC BY-SA-NC
Partagez vos créations via giphy : https://giphy.com
Julien Devriendt - CC BY-SA-NC
Ou détourner des oeuvres d’artistes et du domaine public
Les oeuvres de Kevin Weir Les détournements de Gallica
Julien Devriendt - CC BY-SA-NC
Atelier histoire interactive
Julien Devriendt - CC BY-SA-NC
Etape 1
Créez 3 scènes : la première scène - la maison
Julien Devriendt - CC BY-SA-NC
Etape 1
Créez 3 scènes : la seconde scène - l’intérieur de la maison
Julien Devriendt - CC BY-SA-NC
Etape 1
Créez 3 scènes : la troisième scène - la souris
Julien Devriendt - CC BY-SA-NC
Etape 2
Si je clique sur le bouton play, l’animation va se déclencher.
Je dois d’abord bloquer l’animation
Julien Devriendt - CC BY-SA-NC
Etape 2
Cliquez sur la première scène
Modifiez le script « default » en cliquant sur « edit »
Julien Devriendt - CC BY-SA-NC
Etape 2
Cliquez sur « timeline » puis sur « stop »
Si vous cliquez sur « play » le programme reste maintenant sur la première scène
Julien Devriendt - CC BY-SA-NC
Etape 3
Nous allons maintenant ajouter des zones cliquables pour que le joueur puisse passer
d’une scène à l’autre
Julien Devriendt - CC BY-SA-NC
Etape 3
Sélectionnez la porte puis cliquez sur « make interactive » et « convert to button »
Julien Devriendt - CC BY-SA-NC
Etape 3
Cliquez sur « add script » puis sur « mouseclick »
Julien Devriendt - CC BY-SA-NC
Etape 3
Dans l’onglet timeline, cliquez sur la fonction « gotoAndStop » indiquez le n° de la scène
suivante
Julien Devriendt - CC BY-SA-NC
Etape 4
Répétez l’opération pour les scènes 2 et 3.
Julien Devriendt - CC BY-SA-NC
Etape 5
Ajoutez un son de victoire pour la dernière scène
Julien Devriendt - CC BY-SA-NC
Etape 5
Dans la case « Asset library » cliquez sur le + pour ajouter une ressource
Julien Devriendt - CC BY-SA-NC
Etape 5
Sélectionnez votre fichier et cliquez sur « ouvrir »
Julien Devriendt - CC BY-SA-NC
Etape 5
Votre fichier apparait maintenant dans votre bibliothèque de ressources. Faites attention à
bien les renommer cela facilitera l’organisation de votre projet
Julien Devriendt - CC BY-SA-NC
Etape 5
Sélectionnez la souris et modifiez le script « Mouseclick »
Julien Devriendt - CC BY-SA-NC
Etape 5
Ajoutez la fonction « playSound » sur la première ligne de votre programme
Julien Devriendt - CC BY-SA-NC
Etape 6
Ajoutez un écran titre
Julien Devriendt - CC BY-SA-NC
Etape 6
Sélectionnez les 3 scènes et décalez-les vers la droite.
Julien Devriendt - CC BY-SA-NC
Etape 6
Sélectionnez les 3 scènes et décalez-les vers la droite.
Julien Devriendt - CC BY-SA-NC
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 »
Julien Devriendt - CC BY-SA-NC
Etape 6
Entrez le titre de votre jeu
Julien Devriendt - CC BY-SA-NC
Etape 6
Sélectionnez votre texte pour faire apparaitre les options de mise en forme
Julien Devriendt - CC BY-SA-NC
Etape 6
Nous allons créer un script pour faire démarrer le jeu lorsque la touche A est appuyée
Julien Devriendt - CC BY-SA-NC
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
Julien Devriendt - CC BY-SA-NC
Etape 6
Sélectionnez « Keydown » puis dans la rubrique input, sélectionnez la fonction « isKeyDown »
Julien Devriendt - CC BY-SA-NC
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.
Julien Devriendt - CC BY-SA-NC
Etape 7
Exporter votre jeu en ligne
Julien Devriendt - CC BY-SA-NC
Etape 7
Il est possible d’exporter votre jeu en ligne. Cliquez sur « Export » puis sur Interactive.
Actuellement seule l’option fichier .zip fonctionne
Julien Devriendt - CC BY-SA-NC
Etape 7
Pour mettre le jeu en ligne, il faut passer par le service d’hébergement de jeux itch.io
Julien Devriendt - CC BY-SA-NC
Etape 7
Créez-vous un compte (cela peut être le compte de la bibliothèque) puis cliquez sur « upload
new project »
Julien Devriendt - CC BY-SA-NC
Etape 7
Complétez le formulaire
Julien Devriendt - CC BY-SA-NC
Etape 7
Dans la rubrique « Kind of project » sélectionnez HTML
Julien Devriendt - CC BY-SA-NC
Etape 7
Puis dans la rubrique « uploads » sélectionnez le fichier .zip exporté
Cliquez sur save
Julien Devriendt - CC BY-SA-NC
Etape 7
Votre jeu est maintenant jouable en ligne dans un navigateur :
https://julanimtic.itch.io/mouse Julien Devriendt - CC BY-SA-NC
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
Julien Devriendt - CC BY-SA-NC
Bib Goes Home (Game Jam game 2019)
Julien Devriendt - CC BY-SA-NC
Merci pour votre participation
Julien Devriendt
@julanimtic
julien.devriendt@animtic.fr
Micro:bit : https://microbit.org/
Arduino et Makey Makey en une seule carte
Julien Devriendt - CC BY-SA-NC
A quoi ça sert ?
Micro:bit est une carte de programmation conçue par la BBC en 2016 pour équiper les écoliers
anglais. Elle est équipée de capteurs ( lumière, température, boussole, …), de sorties (3V, LED, ) et
d’une connexion bluetooth. Julien Devriendt - CC BY-SA-NC
Comment ça marche ?
Julien Devriendt - CC BY-SA-NC
Comment ça marche ?
Pour créer nos premiers programmes sur micro:bit nous allons utiliser l’éditeur MakeCode :
https://makecode.microbit.org/
Julien Devriendt - CC BY-SA-NC
Comment ça marche ?
Micro:bit fonctionne avec Scratch mais son utilisation nécessite l’installation d’un logiciel
supplémentaire et la présence d’un module bluetooth sur l’ordinateur
Julien Devriendt - CC BY-SA-NC
Comment ça marche ?
cliquez sur « Nouveau projet »
Julien Devriendt - CC BY-SA-NC
Comment ça marche ?
Donnez-lui un nom, puis cliquez sur « Créer »
Julien Devriendt - CC BY-SA-NC
Comment ça marche ?
Tout comme Scratch, MakeCode propose une interface de programmation graphique.
Julien Devriendt - CC BY-SA-NC
Comment ça marche ?
L’interface est divisée en 3 zones. A gauche un simulateur permettant d’avoir un aperçu du
programme en cours, au milieu les différentes catégories de bloc et à droite la zone de
programmation Julien Devriendt - CC BY-SA-NC
Votre premier programme
Julien Devriendt - CC BY-SA-NC
Votre premier programme
Une fois le programme écrit, cliquez sur « Télécharger »
Julien Devriendt - CC BY-SA-NC
Votre premier programme
Enregistrer le fichier .hex sur votre ordinateur
Julien Devriendt - CC BY-SA-NC
Branchez votre carte micro:bit sur votre PC à l’aide du câble micro-usb
Votre premier programme
Julien Devriendt - CC BY-SA-NC
Copiez le fichier .hex sur le lecteur micro:bit
Votre premier programme
Julien Devriendt - CC BY-SA-NC
Radio Micro:bit
Julien Devriendt - CC BY-SA-NC
Faites du bruit
Julien Devriendt - CC BY-SA-NC
Utiliser des servo-moteurs
Julien Devriendt - CC BY-SA-NC
Capteur de température
Julien Devriendt - CC BY-SA-NC
Capteur d’humidité
Julien Devriendt - CC BY-SA-NC
Merci pour votre participation
Julien Devriendt
@julanimtic
julien.devriendt@animtic.fr
RenPy :
Un outil de création de Visual Novel Julien Devriendt - CC BY-SA-NC
Votre premier projet
Julien Devriendt - CC BY-SA-NC
Cliquez sur créer un nouveau projet
Julien Devriendt - CC BY-SA-NC
Cliquez sur Continuer
Julien Devriendt - CC BY-SA-NC
Entrez le nom de votre projet, puis cliquez sur Continuer
Julien Devriendt - CC BY-SA-NC
Choisissez la résolution de votre projet
Julien Devriendt - CC BY-SA-NC
Sélectionnez un jeu de couleurs pour l’interface de votre jeu
Ce paramètre peut être modifié plus tard
Julien Devriendt - CC BY-SA-NC
RenPy configure l’environnement de développement de votre jeu
Julien Devriendt - CC BY-SA-NC
Votre projet apparait dans la colonne de gauche.
A droite vous retrouvez les liens vers les fichiers et dossier de votre projet
Julien Devriendt - CC BY-SA-NC
Cliquez sur le fichier script.rpy
Julien Devriendt - CC BY-SA-NC
Sélectionner un éditeur avec lequel vous allez modifier vos fichiers de
script Julien Devriendt - CC BY-SA-NC
Votre fichier de script : script.rpy
Julien Devriendt - CC BY-SA-NC
Label : permet d’indiquer un « chapitre » de votre jeu
Par défaut Renpy nomme le premier label start Julien Devriendt - CC BY-SA-NC
Remplacer les lignes de dialogue :
veillez à respecter l’indentation du script
 » permet d’ajouter des « » directement dans les dialogues Julien Devriendt - CC BY-SA-NC
Testez votre script en lançant le projet
Julien Devriendt - CC BY-SA-NC
Les personnages
Pour ne pas recopier le nom des personnages à chaque fois nous allons
définir des raccourcis que nous allons placer au début de notre script Julien Devriendt - CC BY-SA-NC
Les personnages
il suffit ensuite de récupérer la valeur définie et de l’associer au dialogue
correspondant Julien Devriendt - CC BY-SA-NC
Les personnages
Vous pouvez préciser la couleur du nom du personnage
Julien Devriendt - CC BY-SA-NC
Images et sons :
Ajoutez les fichiers image et son directement dans les dossiers correspondant
Julien Devriendt - CC BY-SA-NC
Images et sons :
Ajoutez les fichiers image et son directement dans les dossiers correspondant
Julien Devriendt - CC BY-SA-NC
Images et sons :
Ajoutez les fichiers image et son directement dans les dossiers correspondant
Julien Devriendt - CC BY-SA-NC
Images
Pour afficher une image en fond, écrivez scene suivi du nom de votre fichier.
Pour le personnage, écrivez show puis le nom de votre fichier Julien Devriendt - CC BY-SA-NC
Images
il n’est pas nécessaire pour les images d’indiquer l’extension du fichier. Ne mettez pas de
majuscule au nom de votre fichier Julien Devriendt - CC BY-SA-NC
Images
Vous pouvez préciser la position du personnage avec xalign et yalign
Julien Devriendt - CC BY-SA-NC
Images
Ajoutez une transition avec with suivi de dissolve ou fade, d’autres transitions sont disponibles
dans la documentation de Rendu Julien Devriendt - CC BY-SA-NC
Musique et sons :
N’oubliez pas l'extension du fichier pour les musiques. On peut également jouer un simple bruitage
avec play sound, ou encore préciser une durée de transition grâce à fadein.
Julien Devriendt - CC BY-SA-NC
Musique et sons :
Pour arrêter la musique : utilisez la commande Stop
Vous pouvez ajouter une transition avec fadeout Julien Devriendt - CC BY-SA-NC
Créer un menu :
Le premier texte est facultatif, et s'affiche en même temps que le menu de choix. Puis les
différents choix sont écrits entre guillemets " et suivis de deux points : Julien Devriendt - CC BY-SA-NC
Créer un menu :
Chaque choix renvoie ensuite à un nouveau label
Julien Devriendt - CC BY-SA-NC
Sauvegarder un choix :
nous allons écrire du Python pour créer des variables. Une variable a un nom et une valeur qui est
stockée à l'intérieur Julien Devriendt - CC BY-SA-NC
Vérifier une variable :
Julien Devriendt - CC BY-SA-NC
Sauvegarder des statistiques de personnage :
Julien Devriendt - CC BY-SA-NC
Sauvegarder des statistiques de personnage :
Julien Devriendt - CC BY-SA-NC
Modifier des statistiques de personnage :
Julien Devriendt - CC BY-SA-NC
Vérifier une valeur :
Julien Devriendt - CC BY-SA-NC
Fin du jeu :
Affichez un écran noir avec une transition
Julien Devriendt - CC BY-SA-NC
Compilez votre jeu :
pour PC Mac Linux Web Android iOS
Julien Devriendt - CC BY-SA-NC
Merci pour votre participation
Julien Devriendt
@julanimtic
julien.devriendt@animtic.fr

Contenu connexe

Similaire à Découverte outils de programmation créative

Petit guide des possibilités d'utilisation du logiciel scratch en technologie
Petit guide des possibilités d'utilisation du logiciel scratch en technologiePetit guide des possibilités d'utilisation du logiciel scratch en technologie
Petit guide des possibilités d'utilisation du logiciel scratch en technologie
خالد المشكوري
 
MRM LAB Collection - Live & Direct - avr10
MRM LAB Collection - Live & Direct - avr10MRM LAB Collection - Live & Direct - avr10
MRM LAB Collection - Live & Direct - avr10
MRM LAB
 
Workshop protodeck (french)
Workshop protodeck (french)Workshop protodeck (french)
Workshop protodeck (french)
Julien Bayle
 

Similaire à Découverte outils de programmation créative (20)

Petit guide des possibilités d'utilisation du logiciel scratch en technologie
Petit guide des possibilités d'utilisation du logiciel scratch en technologiePetit guide des possibilités d'utilisation du logiciel scratch en technologie
Petit guide des possibilités d'utilisation du logiciel scratch en technologie
 
Picardie en Ligne/Point Cyb Clermont (Oise) - Ateliers d'initiation et de for...
Picardie en Ligne/Point Cyb Clermont (Oise) - Ateliers d'initiation et de for...Picardie en Ligne/Point Cyb Clermont (Oise) - Ateliers d'initiation et de for...
Picardie en Ligne/Point Cyb Clermont (Oise) - Ateliers d'initiation et de for...
 
Tuto Storex
Tuto StorexTuto Storex
Tuto Storex
 
Tuto Storex
Tuto StorexTuto Storex
Tuto Storex
 
Le Métier d'étalonneur
Le Métier d'étalonneurLe Métier d'étalonneur
Le Métier d'étalonneur
 
ÉCRITURE, PRODUCTION, MONTAGE ET ÉDUCATION AUX MÉDIAS
ÉCRITURE, PRODUCTION, MONTAGE ET ÉDUCATION AUX MÉDIASÉCRITURE, PRODUCTION, MONTAGE ET ÉDUCATION AUX MÉDIAS
ÉCRITURE, PRODUCTION, MONTAGE ET ÉDUCATION AUX MÉDIAS
 
Filmer / Enregistrer avec son Smartphone et sa Tablette
Filmer / Enregistrer avec son Smartphone et sa TabletteFilmer / Enregistrer avec son Smartphone et sa Tablette
Filmer / Enregistrer avec son Smartphone et sa Tablette
 
Développer une application pour Android TV avec Delphi
Développer une application pour Android TV avec DelphiDévelopper une application pour Android TV avec Delphi
Développer une application pour Android TV avec Delphi
 
MRM LAB Collection - Live & Direct - avr10
MRM LAB Collection - Live & Direct - avr10MRM LAB Collection - Live & Direct - avr10
MRM LAB Collection - Live & Direct - avr10
 
2012 11 Toulibre - Open Hardware
2012 11 Toulibre - Open Hardware2012 11 Toulibre - Open Hardware
2012 11 Toulibre - Open Hardware
 
Augmenter sa visibilité grâce à la video
Augmenter sa visibilité grâce à la videoAugmenter sa visibilité grâce à la video
Augmenter sa visibilité grâce à la video
 
Audacity lp2 cd_2
Audacity lp2 cd_2Audacity lp2 cd_2
Audacity lp2 cd_2
 
Audacity lp2 cd_3
Audacity lp2 cd_3Audacity lp2 cd_3
Audacity lp2 cd_3
 
Présentation meetup Arduino, team Ekino
Présentation meetup Arduino, team EkinoPrésentation meetup Arduino, team Ekino
Présentation meetup Arduino, team Ekino
 
Emploi Martinique, Y
Emploi Martinique, Y
Emploi Martinique, Y
Emploi Martinique, Y
 
Point Cyb Clermont Oise - Picardie En Ligne - Livret atelier formation - sept...
Point Cyb Clermont Oise - Picardie En Ligne - Livret atelier formation - sept...Point Cyb Clermont Oise - Picardie En Ligne - Livret atelier formation - sept...
Point Cyb Clermont Oise - Picardie En Ligne - Livret atelier formation - sept...
 
Produit mobile
Produit mobileProduit mobile
Produit mobile
 
OWF13 - arduino ardu block sumo
OWF13 - arduino ardu block sumoOWF13 - arduino ardu block sumo
OWF13 - arduino ardu block sumo
 
Workshop protodeck (french)
Workshop protodeck (french)Workshop protodeck (french)
Workshop protodeck (french)
 
Logiciels 3d-112-ktcufc
Logiciels 3d-112-ktcufcLogiciels 3d-112-ktcufc
Logiciels 3d-112-ktcufc
 

Plus de Julien Devriendt

Plus de Julien Devriendt (20)

Découverte d'outils de création vidéo
Découverte d'outils de création vidéoDécouverte d'outils de création vidéo
Découverte d'outils de création vidéo
 
Prise en main Hp reveal
Prise en main Hp revealPrise en main Hp reveal
Prise en main Hp reveal
 
Espace d'apprentissage collaboratif en bibliothèque
Espace d'apprentissage collaboratif en bibliothèqueEspace d'apprentissage collaboratif en bibliothèque
Espace d'apprentissage collaboratif en bibliothèque
 
Bibliobox
BiblioboxBibliobox
Bibliobox
 
Tablette et liseuses en bibliothèque
Tablette et liseuses en bibliothèqueTablette et liseuses en bibliothèque
Tablette et liseuses en bibliothèque
 
Mise en oeuvre d'un espace multimédia - jour 2
Mise en oeuvre d'un espace multimédia - jour 2Mise en oeuvre d'un espace multimédia - jour 2
Mise en oeuvre d'un espace multimédia - jour 2
 
Mise en oeuvre d'un espace multimédia jour 1
Mise en oeuvre d'un espace multimédia   jour 1Mise en oeuvre d'un espace multimédia   jour 1
Mise en oeuvre d'un espace multimédia jour 1
 
Qu'est ce qu'un FabLab en bibliothèque ?
Qu'est ce qu'un FabLab en bibliothèque ? Qu'est ce qu'un FabLab en bibliothèque ?
Qu'est ce qu'un FabLab en bibliothèque ?
 
Ateliers numeriques
Ateliers numeriquesAteliers numeriques
Ateliers numeriques
 
Musique video et jeux video
Musique video et jeux videoMusique video et jeux video
Musique video et jeux video
 
Comment rendre visible les ressources numériques
Comment rendre visible les ressources numériques Comment rendre visible les ressources numériques
Comment rendre visible les ressources numériques
 
Ressources numeriques : les tendances
Ressources numeriques : les tendancesRessources numeriques : les tendances
Ressources numeriques : les tendances
 
médiatio
médiatiomédiatio
médiatio
 
Impression 3D en EPN
Impression 3D en EPNImpression 3D en EPN
Impression 3D en EPN
 
Livre numérique en bib 2/2
Livre numérique en bib 2/2Livre numérique en bib 2/2
Livre numérique en bib 2/2
 
Livre numérique en bib 1/2
Livre numérique en bib 1/2Livre numérique en bib 1/2
Livre numérique en bib 1/2
 
Rencontres Numériques
Rencontres NumériquesRencontres Numériques
Rencontres Numériques
 
Outils de médiation livre numérique les ulis
Outils de médiation livre numérique les ulisOutils de médiation livre numérique les ulis
Outils de médiation livre numérique les ulis
 
Jeux vidéo bibliothèque état des lieux contexte
Jeux vidéo bibliothèque état des lieux contexteJeux vidéo bibliothèque état des lieux contexte
Jeux vidéo bibliothèque état des lieux contexte
 
Jeux vidéo et ateliers de créations
Jeux vidéo et ateliers de créationsJeux vidéo et ateliers de créations
Jeux vidéo et ateliers de créations
 

Dernier

Dernier (12)

PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
 
Quitter la nuit. pptx
Quitter          la        nuit.    pptxQuitter          la        nuit.    pptx
Quitter la nuit. pptx
 
Quitter la nuit. pptx
Quitter        la             nuit.   pptxQuitter        la             nuit.   pptx
Quitter la nuit. pptx
 
Système National de Santé au- Maroc-(2017)."pdf"
Système National de Santé au- Maroc-(2017)."pdf"Système National de Santé au- Maroc-(2017)."pdf"
Système National de Santé au- Maroc-(2017)."pdf"
 
Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...
Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...
Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...
 
Comment enseigner la langue française en Colombie?
Comment enseigner la langue française en Colombie?Comment enseigner la langue française en Colombie?
Comment enseigner la langue française en Colombie?
 
Présentation sur les Risques Électriques et Leur Prévention en Algérie
Présentation sur les Risques Électriques et Leur Prévention en AlgériePrésentation sur les Risques Électriques et Leur Prévention en Algérie
Présentation sur les Risques Électriques et Leur Prévention en Algérie
 
EL KATRY Reem: Proposition de Programme Artistique et Exposition pour les Écoles
EL KATRY Reem: Proposition de Programme Artistique et Exposition pour les ÉcolesEL KATRY Reem: Proposition de Programme Artistique et Exposition pour les Écoles
EL KATRY Reem: Proposition de Programme Artistique et Exposition pour les Écoles
 
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
 
Traitement des eaux usées par lagunage a macrophytes.pptx
Traitement des eaux usées par lagunage a macrophytes.pptxTraitement des eaux usées par lagunage a macrophytes.pptx
Traitement des eaux usées par lagunage a macrophytes.pptx
 
Festival de Cannes 2024. pptx
Festival    de   Cannes      2024.  pptxFestival    de   Cannes      2024.  pptx
Festival de Cannes 2024. pptx
 
Webinaire Technologia | DAX : nouvelles fonctions
Webinaire Technologia | DAX : nouvelles fonctionsWebinaire Technologia | DAX : nouvelles fonctions
Webinaire Technologia | DAX : nouvelles fonctions
 

Découverte outils de programmation créative

  • 1. Découverte d’outils de programmation créative Scratch - Makey Makey - Touch Board - Wick Editor - Micro:bit - RenPy Julien Devriendt - CC BY-SA-NC
  • 2. Le code informatique est partout autour de nous, il permet de faire fonctionner votre ordinateur, votre smartphone, votre micro-onde, votre voiture, etc … Julien Devriendt - CC BY-SA-NC
  • 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 Julien Devriendt - CC BY-SA-NC
  • 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 » Julien Devriendt - CC BY-SA-NC
  • 5. Stimuler l’imagination et la créativité des plus jeunes Faire des outils numériques des outils d’expression et de création Julien Devriendt - CC BY-SA-NC
  • 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. Julien Devriendt - CC BY-SA-NC
  • 7. Qu’est-ce qu’un programme ? Si la touche « espace » est appuyée, Alors le fi chier « Miaou » est lu Julien Devriendt - CC BY-SA-NC
  • 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 fi chier « Miaou » est lu Julien Devriendt - CC BY-SA-NC
  • 9. Si la touche « espace » est appuyée, Alors le fi chier « Miaou » est lu Condition ou signal détecté Tâche à e ff ectuer 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 Julien Devriendt - CC BY-SA-NC
  • 10. Condition ou signal détecté Tâche à e ff ectuer 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 Julien Devriendt - CC BY-SA-NC
  • 11. Condition ou signal détecté Tâche à e ff ectuer 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 Julien Devriendt - CC BY-SA-NC
  • 12. Scratch : http://scratch.mit.edu Un logiciel d’initiation à la programmation Julien Devriendt - CC BY-SA-NC
  • 13. Scratch simplifie l'initiation à la programmation en proposant une interface de programmation graphique onEvent('keypressed', function () { playSound(« miaou.mp3") }); = Julien Devriendt - CC BY-SA-NC
  • 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 à e ff ectuer Julien Devriendt - CC BY-SA-NC
  • 15. Rendez-vous sur http://scratch.mit.edu Cliquez sur « Commencer à créer » Julien Devriendt - CC BY-SA-NC
  • 16. Julien Devriendt - CC BY-SA-NC
  • 17. Il est également possible de télécharger le logiciel : https://scratch.mit.edu/download Julien Devriendt - CC BY-SA-NC
  • 18. Que peut-il faire ? Des films d’animation, des jeux, des installations interactives, . . . Julien Devriendt - CC BY-SA-NC Julien Devriendt - CC BY-SA-NC
  • 19. Votre premier programme Julien Devriendt - CC BY-SA-NC
  • 20. N’oubliez pas de brancher un casque ou des enceintes Julien Devriendt - CC BY-SA-NC
  • 22. Ajouter de nouveaux sons Julien Devriendt - CC BY-SA-NC
  • 23. Ajouter de nouveaux sons Julien Devriendt - CC BY-SA-NC
  • 24. Sélectionner un son depuis la bibliothèque de Sons Julien Devriendt - CC BY-SA-NC
  • 25. Sélectionner un son depuis la bibliothèque de Sons Julien Devriendt - CC BY-SA-NC
  • 26. Sélectionner un son depuis la bibliothèque de Sons Julien Devriendt - CC BY-SA-NC
  • 27. Importer un fichier son déjà existant Julien Devriendt - CC BY-SA-NC
  • 28. Les fichiers doivent être au format .mp3 ou .wav Julien Devriendt - CC BY-SA-NC
  • 29. Les fichiers apparaissent ensuite dans Scratch Julien Devriendt - CC BY-SA-NC
  • 30. Si vous disposez d’un micro vous avez la possibilité de vous enregistrer directement dans Scratch Julien Devriendt - CC BY-SA-NC
  • 31. Si vous disposez d’un micro vous avez la possibilité de vous enregistrer directement dans Scratch Julien Devriendt - CC BY-SA-NC
  • 32. 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. Julien Devriendt - CC BY-SA-NC
  • 33. Les barres rouges permettent de raccourcir votre enregistrement En cliquant sur « Jouer » vous obtenez un aperçu Cliquez sur « Sauvegarder » pour valider votre enregistrement Julien Devriendt - CC BY-SA-NC
  • 34. 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 Julien Devriendt - CC BY-SA-NC
  • 35. Vous pouvez modifier un son de la bibliothèque ou un enregistrement en y appliquant des effets Julien Devriendt - CC BY-SA-NC
  • 36. Modifiez un fichier son en sélectionnant uniquement la partie qui vous intéresse Julien Devriendt - CC BY-SA-NC
  • 37. 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 Julien Devriendt - CC BY-SA-NC
  • 38. Pour cela nous allons modifier l’apparence du sprite Julien Devriendt - CC BY-SA-NC
  • 39. 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 Julien Devriendt - CC BY-SA-NC
  • 40. Nous allons programmer l’alternance des costumes pour donner l’illusion du mouvement Costume 1 Costume 2 Julien Devriendt - CC BY-SA-NC
  • 41. Quand la touche espace est pressée alors on passe au costume suivant Julien Devriendt - CC BY-SA-NC
  • 42. On rajoute un déplacement afin de compléter l’animation Julien Devriendt - CC BY-SA-NC
  • 43. Comment faire pour que l’animation se répète automatiquement ? Julien Devriendt - CC BY-SA-NC
  • 44. Je vous laisse chercher ;-) Julien Devriendt - CC BY-SA-NC
  • 45. 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 Julien Devriendt - CC BY-SA-NC
  • 46. 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 Julien Devriendt - CC BY-SA-NC
  • 47. 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 ! Julien Devriendt - CC BY-SA-NC
  • 48. A partir de ces 9 blocs imaginez votre premier programme Atelier : Julien Devriendt - CC BY-SA-NC
  • 49. Makey Makey : https://makeymakey.com/ Un carte pour connecter le monde physique et le monde numérique Julien Devriendt - CC BY-SA-NC
  • 50. 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 Julien Devriendt - CC BY-SA-NC
  • 51. + - 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? Julien Devriendt - CC BY-SA-NC
  • 52. + - L’électricité circule toujours du + vers le - les piles, mais également certains composants disposent d’une côté + et d’un côté - Julien Devriendt - CC BY-SA-NC
  • 53. Branchez la carte Makey Makey avec le câble USB Premier branchement - étape 1 : Julien Devriendt - CC BY-SA-NC
  • 54. Etape 2 Refusez les demandes d’installation de pilote ou de mise à jour Julien Devriendt - CC BY-SA-NC
  • 55. Etape 3 Branchez un câble crocodile sur la partie « Earth » de la carte. Il s’agit du côté - du circuit électrique. Julien Devriendt - CC BY-SA-NC
  • 56. Etape 3 Tenez le câble par la partie métallique, vous êtes maintenant connecté à la masse. Julien Devriendt - CC BY-SA-NC
  • 57. Avec l’autre main, appuyez sur le cercle « Space » une lumière verte doit s’allumer Etape 4 Julien Devriendt - CC BY-SA-NC
  • 58. Votre PC doit réagir comme si vous appuyiez sur la barre d’espace de votre clavier Etape 4 Julien Devriendt - CC BY-SA-NC
  • 59. Etape 5 Essayez de relier votre carte aux objets autour de vous Julien Devriendt - CC BY-SA-NC
  • 60. Câble crocodiles, cordons M/M, câbles audio, câbles électriques . . . Quels matériaux conducteurs ? Julien Devriendt - CC BY-SA-NC
  • 61. Cuivre adhésif, papier aluminium, vis, plaque de métal, . . . Quels matériaux conducteurs ? Julien Devriendt - CC BY-SA-NC
  • 62. Fruits, pâte à modeler, . . . Quels matériaux conducteurs ? Julien Devriendt - CC BY-SA-NC
  • 63. Encre conductrice et crayons papiers contiennent du graphite qui possède des propriétés conductrices Quels matériaux conducteurs ? Julien Devriendt - CC BY-SA-NC
  • 64. Animaux, plantes, collègues, amis, . . . A vous de tester ! Quels matériaux conducteurs ? Julien Devriendt - CC BY-SA-NC
  • 65. https://makeymakey.com/blogs/how-to-instructions/apps-for-plug-and-play Une Sélection d’applications en ligne à découvrir pour Makey Makey : Julien Devriendt - CC BY-SA-NC
  • 66. Scratch + Makey Makey = Julien Devriendt - CC BY-SA-NC
  • 67. Scratch + Makey Makey = Julien Devriendt - CC BY-SA-NC
  • 68. Retournez dans Scratch Activez les blocs Makey Makey Julien Devriendt - CC BY-SA-NC
  • 69. Activez les blocs Makey Makey dans vos projets Scratch Julien Devriendt - CC BY-SA-NC
  • 70. 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 : Julien Devriendt - CC BY-SA-NC
  • 71. 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 : Julien Devriendt - CC BY-SA-NC
  • 72. 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. Julien Devriendt - CC BY-SA-NC
  • 73. Si cette solution ne fonctionne pas pour vous, utilisez l’application dictaphone de votre Smartphone Julien Devriendt - CC BY-SA-NC
  • 74. Music as Material Ne comptez pas uniquement sur les matériaux conducteurs, explorez de nouvelles façon d’interagir et de connecter des objets Julien Devriendt - CC BY-SA-NC
  • 76. Tour du monde à vélo - Google bike Julien Devriendt - CC BY-SA-NC
  • 77. Merci pour votre participation Julien Devriendt @julanimtic julien.devriendt@animtic.fr
  • 78. Touch board : https://www.bareconductive.com/ Un carte pour réaliser ses installations interactives Julien Devriendt - CC BY-SA-NC
  • 79. A quoi ça sert ? La carte Touch Board permet de créer des installations interactives. Elle peut être utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
  • 80. A quoi ça sert ? La carte Touch Board permet de créer des installations interactives. Elle peut être également utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
  • 81. A quoi ça sert ? La carte Touch Board permet de créer des installations interactives. Elle peut être utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
  • 82. A quoi ça sert ? La carte Touch Board permet de créer des installations interactives. Elle peut être utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
  • 83. 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 Julien Devriendt - CC BY-SA-NC
  • 84. Mise en route Ajouter une enceinte, branchez la carte et touchez les électrodes Julien Devriendt - CC BY-SA-NC
  • 85. Prenez des objets conducteurs qui se trouvent autour de vous. Imaginez ce qu’ils pourraient raconter. Atelier les objets ont la parole - Etape 1 : Julien Devriendt - CC BY-SA-NC
  • 86. Etape 2 : Enregistrez vos textes à l’aide d’un dictaphone ou d’un service en ligne comme https://online-voice-recorder.com Julien Devriendt - CC BY-SA-NC
  • 87. Etape 2 : Vous pouvez également télécharger des sons libres de droit sur : http://soundbible.com Julien Devriendt - CC BY-SA-NC
  • 88. 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 Julien Devriendt - CC BY-SA-NC
  • 89. Branchez votre carte Touch Board, connectez votre casque/enceinte, mettez l’interrupteur sur « On » Etape 4 : Julien Devriendt - CC BY-SA-NC
  • 90. Connectez vos objets à l’aides des pinces crocodiles Etape 5 : Julien Devriendt - CC BY-SA-NC
  • 91. 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 : Julien Devriendt - CC BY-SA-NC
  • 92. Changer le code : Installez Arduino IDE 1.8 Installez manuellement la bibliothèque Touchboard Julien Devriendt - CC BY-SA-NC
  • 93. Changer le code : Une fois Arduino installé, cliquez sur : Fichier -> Carnet de croquis -> Touch Board Exemples -> HID_Keyboard Julien Devriendt - CC BY-SA-NC
  • 94. Changer le code : Cliquez ensuite sur : Outils -> Type de carte -> Bare Conductive Boards -> Bare Conductive Touch Board Julien Devriendt - CC BY-SA-NC
  • 95. Changer le code : Enfin cliquez sur : Outils -> Port Sélectionnez le port mentionnant votre carte TouchBoardJulien Devriendt - CC BY-SA-NC
  • 96. Téléverser le code sur la carte Arduino : Cliquez sur la flèche Une fois le téléversement terminé, un message de confirmation apparait en bas de la fenêtre Julien Devriendt - CC BY-SA-NC
  • 97. Transformez votre carte en instrument MIDI Atelier création d’instrument de musique : Julien Devriendt - CC BY-SA-NC
  • 98. Protocole de communication entre instruments électroniques, séquenceurs et logiciels de musique MIDI : Musical Instrument Digital Interface Julien Devriendt - CC BY-SA-NC
  • 99. Identifiez les ponts de soudure MIDI Julien Devriendt - CC BY-SA-NC
  • 100. Connectez les ponts de soudure MIDI A l’aide de la peinture conductrice, connectez les ponts de soudure Julien Devriendt - CC BY-SA-NC
  • 101. Attachez la carte au clavier A l’aide des électrodes adhésives, connectez la carte au clavier Julien Devriendt - CC BY-SA-NC
  • 102. Téléversez le code sur la carte Cliquez sur : Fichier -> Carnet de croquis -> Touch Board Exemples -> Midi_Piano Julien Devriendt - CC BY-SA-NC
  • 103. Téléversez le code sur la carte Cliquez sur : Fichier -> Carnet de croquis -> Touch Board Exemples -> Midi_Piano Julien Devriendt - CC BY-SA-NC
  • 104. Outils -> Type de carte -> Bare Conductive Boards -> Bare Conductive Touch Board (USB MIDI, iPad Compatible) Cliquez ensuite sur : Julien Devriendt - CC BY-SA-NC
  • 105. Enfin cliquez sur : Outils -> Port Sélectionnez le port mentionnant votre carte TouchBoardJulien Devriendt - CC BY-SA-NC
  • 106. Enfin cliquez sur : Outils -> Port Sélectionnez le port mentionnant votre carte TouchBoardJulien Devriendt - CC BY-SA-NC
  • 107. Branchez votre enceinte, allumez votre carte et jouez Julien Devriendt - CC BY-SA-NC
  • 108. Modifiez le code pour changer d’instrument Liste des instruments de musique Julien Devriendt - CC BY-SA-NC
  • 109. Modifiez le code pour changer d’instrument Liste des instruments de musique Julien Devriendt - CC BY-SA-NC
  • 110. Contrôlez des projections vidéo avec MadMapper Julien Devriendt - CC BY-SA-NC
  • 111. Configurer un projecteur Julien Devriendt - CC BY-SA-NC
  • 112. Ajustez la mire à votre surface de projection Passez en mode projection plein écran Output ->Full Screen Mode Julien Devriendt - CC BY-SA-NC
  • 113. Ajoutez un Quad Julien Devriendt - CC BY-SA-NC
  • 114. Modifier le contenu projeté Cliquez sur la flèche pour assigner le contenu au Quad Julien Devriendt - CC BY-SA-NC
  • 115. Ajuster la taille du contenu projeté Dans la fenêtre de droite, utilisez les poignées pour ajuster la taille de l’élément projeté Julien Devriendt - CC BY-SA-NC
  • 116. Remplacez l’image fixe par une vidéo Julien Devriendt - CC BY-SA-NC
  • 117. Ajustez la projection de votre vidéo à l’aide des poignées Julien Devriendt - CC BY-SA-NC
  • 118. Passez la vidéo en « lecture jusqu’à la fin de la boucle et pause » Julien Devriendt - CC BY-SA-NC
  • 119. Téléversez le code MIDI_Interface sur votre carte Touchboard Pensez à modifier les valeurs de sensibilité de votre carte Julien Devriendt - CC BY-SA-NC
  • 120. Branchez votre carte Touchboard Julien Devriendt - CC BY-SA-NC
  • 121. Modifier les contrôleurs MIDI en cliquant sur : EDIT -> Edit MIDI Controls Julien Devriendt - CC BY-SA-NC
  • 122. Cliquez sur la flèche « Retour au début » Julien Devriendt - CC BY-SA-NC
  • 123. Sur votre carte Touchboard, appuyez sur l’électrode 00 Julien Devriendt - CC BY-SA-NC
  • 124. Cliquez de nouveau sur Edit MIDI Controls pour quitter le mode d’édition des contrôleurs MIDI Julien Devriendt - CC BY-SA-NC
  • 125. Votre carte Touchboard contrôle désormais le lancement de votre vidéo Julien Devriendt - CC BY-SA-NC
  • 126. Détection à distance : En modifiant le code il est possible d’activer la détection à distance. Julien Devriendt - CC BY-SA-NC
  • 127. Détection à distance : Repérez les lignes suivantes et modifiez les valeurs Attention la valeur de la ligne setTouchThreshold doit toujours être 2X supérieure à la valeur de la ligne setReleaseThreshold Julien Devriendt - CC BY-SA-NC
  • 128. Détection à distance : Vous pouvez également modifier la sensibilité pour chaque électrode individuellement Julien Devriendt - CC BY-SA-NC
  • 129. A l’aide des tubes d’encre électrique, réalisez une présentation interactive Atelier poster : Julien Devriendt - CC BY-SA-NC
  • 130. Faites un test sur un morceau de papier avant de vous lancer Etape 1 : Julien Devriendt - CC BY-SA-NC
  • 131. Vous pouvez utiliser un modèle à colorier ou vous lancer dans votre propre création. Laissez sécher 15 minutes Etape 2 : Julien Devriendt - CC BY-SA-NC
  • 132. Etape 3 : Enregistrez vos textes à l’aide d’un dictaphone ou d’un service en ligne comme https://online-voice-recorder.com Julien Devriendt - CC BY-SA-NC
  • 133. Etape 3 : Vous pouvez également télécharger des sons libres de droit sur : http://soundbible.com Julien Devriendt - CC BY-SA-NC
  • 134. 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 Julien Devriendt - CC BY-SA-NC
  • 135. Branchez votre carte Touch Board, connectez votre casque/enceinte, mettez l’interrupteur sur « On » Etape 5 : Julien Devriendt - CC BY-SA-NC
  • 136. Une fois que votre dessin est sec, appliquez un point d’encre à l’emplacement des électrodes. Etape 6 : Julien Devriendt - CC BY-SA-NC
  • 137. Avec précaution, placez votre carte, puis mettez un second point d’encre sur les électrodes. Laissez sécher. Etape 7 : Julien Devriendt - CC BY-SA-NC
  • 138. 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 :
  • 139. Techniques de peinture Utilisez des pochoirs et protégez vos réalisations avec du vernis en spray Julien Devriendt - CC BY-SA-NC
  • 140. Créez vos propres expositions interactives Julien Devriendt - CC BY-SA-NC
  • 141. Créez vos propres expositions interactives Julien Devriendt - CC BY-SA-NC
  • 142. Créez vos propres expositions interactives Julien Devriendt - CC BY-SA-NC
  • 143. Créez vos propres expositions interactives Bibliothèque BTUtils Julien Devriendt - CC BY-SA-NC
  • 144. Créez vos propres expositions interactives Julien Devriendt - CC BY-SA-NC
  • 145. Créez vos propres expositions interactives Julien Devriendt - CC BY-SA-NC
  • 146. Créez vos propres expositions interactives Julien Devriendt - CC BY-SA-NC
  • 147. Merci pour votre participation Julien Devriendt @julanimtic julien.devriendt@animtic.fr
  • 148. Wick Editor : https://www.wickeditor.com Flash revisité Julien Devriendt - CC BY-SA-NC
  • 149. 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. Julien Devriendt - CC BY-SA-NC
  • 150. Atelier création de .Gif Julien Devriendt - CC BY-SA-NC
  • 151. Présentation de l’interface Julien Devriendt - CC BY-SA-NC
  • 152. 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é Julien Devriendt - CC BY-SA-NC
  • 153. 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 Julien Devriendt - CC BY-SA-NC
  • 154. Complétez les différentes étapes de votre animation Julien Devriendt - CC BY-SA-NC
  • 155. Jusqu’à ce que vous ayez terminé Julien Devriendt - CC BY-SA-NC
  • 156. Appuyez sur le bouton « Play » pour avoir un aperçu de votre animation Julien Devriendt - CC BY-SA-NC
  • 157. Si l’animation est trop rapide ou trop lente, cliquez sur l’engrenage Julien Devriendt - CC BY-SA-NC
  • 158. Modifiez le nombre d’image par seconde (Frame Per Second - FPS) et sauvegardez (passez par exemple de 12 à 8) Julien Devriendt - CC BY-SA-NC
  • 159. Si vous êtes satisfait du résultat, cliquez sur « export » Julien Devriendt - CC BY-SA-NC
  • 160. Nous allons exporter notre animation au format .gif, mais vous avez également la possibilité de l’exporter dans un format vidéo Julien Devriendt - CC BY-SA-NC
  • 161. Une fois l’export terminé, le fichier .gif se télécharge sur votre PC Julien Devriendt - CC BY-SA-NC
  • 162. Vous pouvez ensuite partager votre création en ligne et sur les réseaux sociaux Julien Devriendt - CC BY-SA-NC
  • 163. Partagez vos créations via giphy : https://giphy.com Julien Devriendt - CC BY-SA-NC
  • 164. Ou détourner des oeuvres d’artistes et du domaine public Les oeuvres de Kevin Weir Les détournements de Gallica Julien Devriendt - CC BY-SA-NC
  • 165. Atelier histoire interactive Julien Devriendt - CC BY-SA-NC
  • 166. Etape 1 Créez 3 scènes : la première scène - la maison Julien Devriendt - CC BY-SA-NC
  • 167. Etape 1 Créez 3 scènes : la seconde scène - l’intérieur de la maison Julien Devriendt - CC BY-SA-NC
  • 168. Etape 1 Créez 3 scènes : la troisième scène - la souris Julien Devriendt - CC BY-SA-NC
  • 169. Etape 2 Si je clique sur le bouton play, l’animation va se déclencher. Je dois d’abord bloquer l’animation Julien Devriendt - CC BY-SA-NC
  • 170. Etape 2 Cliquez sur la première scène Modifiez le script « default » en cliquant sur « edit » Julien Devriendt - CC BY-SA-NC
  • 171. Etape 2 Cliquez sur « timeline » puis sur « stop » Si vous cliquez sur « play » le programme reste maintenant sur la première scène Julien Devriendt - CC BY-SA-NC
  • 172. Etape 3 Nous allons maintenant ajouter des zones cliquables pour que le joueur puisse passer d’une scène à l’autre Julien Devriendt - CC BY-SA-NC
  • 173. Etape 3 Sélectionnez la porte puis cliquez sur « make interactive » et « convert to button » Julien Devriendt - CC BY-SA-NC
  • 174. Etape 3 Cliquez sur « add script » puis sur « mouseclick » Julien Devriendt - CC BY-SA-NC
  • 175. Etape 3 Dans l’onglet timeline, cliquez sur la fonction « gotoAndStop » indiquez le n° de la scène suivante Julien Devriendt - CC BY-SA-NC
  • 176. Etape 4 Répétez l’opération pour les scènes 2 et 3. Julien Devriendt - CC BY-SA-NC
  • 177. Etape 5 Ajoutez un son de victoire pour la dernière scène Julien Devriendt - CC BY-SA-NC
  • 178. Etape 5 Dans la case « Asset library » cliquez sur le + pour ajouter une ressource Julien Devriendt - CC BY-SA-NC
  • 179. Etape 5 Sélectionnez votre fichier et cliquez sur « ouvrir » Julien Devriendt - CC BY-SA-NC
  • 180. Etape 5 Votre fichier apparait maintenant dans votre bibliothèque de ressources. Faites attention à bien les renommer cela facilitera l’organisation de votre projet Julien Devriendt - CC BY-SA-NC
  • 181. Etape 5 Sélectionnez la souris et modifiez le script « Mouseclick » Julien Devriendt - CC BY-SA-NC
  • 182. Etape 5 Ajoutez la fonction « playSound » sur la première ligne de votre programme Julien Devriendt - CC BY-SA-NC
  • 183. Etape 6 Ajoutez un écran titre Julien Devriendt - CC BY-SA-NC
  • 184. Etape 6 Sélectionnez les 3 scènes et décalez-les vers la droite. Julien Devriendt - CC BY-SA-NC
  • 185. Etape 6 Sélectionnez les 3 scènes et décalez-les vers la droite. Julien Devriendt - CC BY-SA-NC
  • 186. 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 » Julien Devriendt - CC BY-SA-NC
  • 187. Etape 6 Entrez le titre de votre jeu Julien Devriendt - CC BY-SA-NC
  • 188. Etape 6 Sélectionnez votre texte pour faire apparaitre les options de mise en forme Julien Devriendt - CC BY-SA-NC
  • 189. Etape 6 Nous allons créer un script pour faire démarrer le jeu lorsque la touche A est appuyée Julien Devriendt - CC BY-SA-NC
  • 190. 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 Julien Devriendt - CC BY-SA-NC
  • 191. Etape 6 Sélectionnez « Keydown » puis dans la rubrique input, sélectionnez la fonction « isKeyDown » Julien Devriendt - CC BY-SA-NC
  • 192. 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. Julien Devriendt - CC BY-SA-NC
  • 193. Etape 7 Exporter votre jeu en ligne Julien Devriendt - CC BY-SA-NC
  • 194. Etape 7 Il est possible d’exporter votre jeu en ligne. Cliquez sur « Export » puis sur Interactive. Actuellement seule l’option fichier .zip fonctionne Julien Devriendt - CC BY-SA-NC
  • 195. Etape 7 Pour mettre le jeu en ligne, il faut passer par le service d’hébergement de jeux itch.io Julien Devriendt - CC BY-SA-NC
  • 196. Etape 7 Créez-vous un compte (cela peut être le compte de la bibliothèque) puis cliquez sur « upload new project » Julien Devriendt - CC BY-SA-NC
  • 197. Etape 7 Complétez le formulaire Julien Devriendt - CC BY-SA-NC
  • 198. Etape 7 Dans la rubrique « Kind of project » sélectionnez HTML Julien Devriendt - CC BY-SA-NC
  • 199. Etape 7 Puis dans la rubrique « uploads » sélectionnez le fichier .zip exporté Cliquez sur save Julien Devriendt - CC BY-SA-NC
  • 200. Etape 7 Votre jeu est maintenant jouable en ligne dans un navigateur : https://julanimtic.itch.io/mouse Julien Devriendt - CC BY-SA-NC
  • 201. 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 Julien Devriendt - CC BY-SA-NC
  • 202. Bib Goes Home (Game Jam game 2019) Julien Devriendt - CC BY-SA-NC
  • 203. Merci pour votre participation Julien Devriendt @julanimtic julien.devriendt@animtic.fr
  • 204. Micro:bit : https://microbit.org/ Arduino et Makey Makey en une seule carte Julien Devriendt - CC BY-SA-NC
  • 205. A quoi ça sert ? Micro:bit est une carte de programmation conçue par la BBC en 2016 pour équiper les écoliers anglais. Elle est équipée de capteurs ( lumière, température, boussole, …), de sorties (3V, LED, ) et d’une connexion bluetooth. Julien Devriendt - CC BY-SA-NC
  • 206. Comment ça marche ? Julien Devriendt - CC BY-SA-NC
  • 207. Comment ça marche ? Pour créer nos premiers programmes sur micro:bit nous allons utiliser l’éditeur MakeCode : https://makecode.microbit.org/ Julien Devriendt - CC BY-SA-NC
  • 208. Comment ça marche ? Micro:bit fonctionne avec Scratch mais son utilisation nécessite l’installation d’un logiciel supplémentaire et la présence d’un module bluetooth sur l’ordinateur Julien Devriendt - CC BY-SA-NC
  • 209. Comment ça marche ? cliquez sur « Nouveau projet » Julien Devriendt - CC BY-SA-NC
  • 210. Comment ça marche ? Donnez-lui un nom, puis cliquez sur « Créer » Julien Devriendt - CC BY-SA-NC
  • 211. Comment ça marche ? Tout comme Scratch, MakeCode propose une interface de programmation graphique. Julien Devriendt - CC BY-SA-NC
  • 212. Comment ça marche ? L’interface est divisée en 3 zones. A gauche un simulateur permettant d’avoir un aperçu du programme en cours, au milieu les différentes catégories de bloc et à droite la zone de programmation Julien Devriendt - CC BY-SA-NC
  • 213. Votre premier programme Julien Devriendt - CC BY-SA-NC
  • 214. Votre premier programme Une fois le programme écrit, cliquez sur « Télécharger » Julien Devriendt - CC BY-SA-NC
  • 215. Votre premier programme Enregistrer le fichier .hex sur votre ordinateur Julien Devriendt - CC BY-SA-NC
  • 216. Branchez votre carte micro:bit sur votre PC à l’aide du câble micro-usb Votre premier programme Julien Devriendt - CC BY-SA-NC
  • 217. Copiez le fichier .hex sur le lecteur micro:bit Votre premier programme Julien Devriendt - CC BY-SA-NC
  • 219. Faites du bruit Julien Devriendt - CC BY-SA-NC
  • 220. Utiliser des servo-moteurs Julien Devriendt - CC BY-SA-NC
  • 221. Capteur de température Julien Devriendt - CC BY-SA-NC
  • 223. Merci pour votre participation Julien Devriendt @julanimtic julien.devriendt@animtic.fr
  • 224. RenPy : Un outil de création de Visual Novel Julien Devriendt - CC BY-SA-NC
  • 225. Votre premier projet Julien Devriendt - CC BY-SA-NC
  • 226. Cliquez sur créer un nouveau projet Julien Devriendt - CC BY-SA-NC
  • 227. Cliquez sur Continuer Julien Devriendt - CC BY-SA-NC
  • 228. Entrez le nom de votre projet, puis cliquez sur Continuer Julien Devriendt - CC BY-SA-NC
  • 229. Choisissez la résolution de votre projet Julien Devriendt - CC BY-SA-NC
  • 230. Sélectionnez un jeu de couleurs pour l’interface de votre jeu Ce paramètre peut être modifié plus tard Julien Devriendt - CC BY-SA-NC
  • 231. RenPy configure l’environnement de développement de votre jeu Julien Devriendt - CC BY-SA-NC
  • 232. Votre projet apparait dans la colonne de gauche. A droite vous retrouvez les liens vers les fichiers et dossier de votre projet Julien Devriendt - CC BY-SA-NC
  • 233. Cliquez sur le fichier script.rpy Julien Devriendt - CC BY-SA-NC
  • 234. Sélectionner un éditeur avec lequel vous allez modifier vos fichiers de script Julien Devriendt - CC BY-SA-NC
  • 235. Votre fichier de script : script.rpy Julien Devriendt - CC BY-SA-NC
  • 236. Label : permet d’indiquer un « chapitre » de votre jeu Par défaut Renpy nomme le premier label start Julien Devriendt - CC BY-SA-NC
  • 237. Remplacer les lignes de dialogue : veillez à respecter l’indentation du script » permet d’ajouter des « » directement dans les dialogues Julien Devriendt - CC BY-SA-NC
  • 238. Testez votre script en lançant le projet Julien Devriendt - CC BY-SA-NC
  • 239. Les personnages Pour ne pas recopier le nom des personnages à chaque fois nous allons définir des raccourcis que nous allons placer au début de notre script Julien Devriendt - CC BY-SA-NC
  • 240. Les personnages il suffit ensuite de récupérer la valeur définie et de l’associer au dialogue correspondant Julien Devriendt - CC BY-SA-NC
  • 241. Les personnages Vous pouvez préciser la couleur du nom du personnage Julien Devriendt - CC BY-SA-NC
  • 242. Images et sons : Ajoutez les fichiers image et son directement dans les dossiers correspondant Julien Devriendt - CC BY-SA-NC
  • 243. Images et sons : Ajoutez les fichiers image et son directement dans les dossiers correspondant Julien Devriendt - CC BY-SA-NC
  • 244. Images et sons : Ajoutez les fichiers image et son directement dans les dossiers correspondant Julien Devriendt - CC BY-SA-NC
  • 245. Images Pour afficher une image en fond, écrivez scene suivi du nom de votre fichier. Pour le personnage, écrivez show puis le nom de votre fichier Julien Devriendt - CC BY-SA-NC
  • 246. Images il n’est pas nécessaire pour les images d’indiquer l’extension du fichier. Ne mettez pas de majuscule au nom de votre fichier Julien Devriendt - CC BY-SA-NC
  • 247. Images Vous pouvez préciser la position du personnage avec xalign et yalign Julien Devriendt - CC BY-SA-NC
  • 248. Images Ajoutez une transition avec with suivi de dissolve ou fade, d’autres transitions sont disponibles dans la documentation de Rendu Julien Devriendt - CC BY-SA-NC
  • 249. Musique et sons : N’oubliez pas l'extension du fichier pour les musiques. On peut également jouer un simple bruitage avec play sound, ou encore préciser une durée de transition grâce à fadein. Julien Devriendt - CC BY-SA-NC
  • 250. Musique et sons : Pour arrêter la musique : utilisez la commande Stop Vous pouvez ajouter une transition avec fadeout Julien Devriendt - CC BY-SA-NC
  • 251. Créer un menu : Le premier texte est facultatif, et s'affiche en même temps que le menu de choix. Puis les différents choix sont écrits entre guillemets " et suivis de deux points : Julien Devriendt - CC BY-SA-NC
  • 252. Créer un menu : Chaque choix renvoie ensuite à un nouveau label Julien Devriendt - CC BY-SA-NC
  • 253. Sauvegarder un choix : nous allons écrire du Python pour créer des variables. Une variable a un nom et une valeur qui est stockée à l'intérieur Julien Devriendt - CC BY-SA-NC
  • 254. Vérifier une variable : Julien Devriendt - CC BY-SA-NC
  • 255. Sauvegarder des statistiques de personnage : Julien Devriendt - CC BY-SA-NC
  • 256. Sauvegarder des statistiques de personnage : Julien Devriendt - CC BY-SA-NC
  • 257. Modifier des statistiques de personnage : Julien Devriendt - CC BY-SA-NC
  • 258. Vérifier une valeur : Julien Devriendt - CC BY-SA-NC
  • 259. Fin du jeu : Affichez un écran noir avec une transition Julien Devriendt - CC BY-SA-NC
  • 260. Compilez votre jeu : pour PC Mac Linux Web Android iOS Julien Devriendt - CC BY-SA-NC
  • 261. Merci pour votre participation Julien Devriendt @julanimtic julien.devriendt@animtic.fr