Galerie
Durant cette activité, les makers vont programmer une galerie où ils pourront exposer par thème les images qu’ils auront créées sur Vizcom.
Objectifs pédagogiques
Faire découvrir des bases de code aux makers qui ne les connaitraient pas encoreCompétences informatiques
- Découverte de l’interface de Vizcom
Compétences techniques
- Changement d’arrière-plan via le code
- Envoie de message
- Génération d’image via l’IA de Vizcom
La place dans le module
Cette activité vient après Le voyage de Juno et avant la capture de monstre
Jour 1
Jour 2
Jour 3
Jour 4
Jour 5
1h
🤩
30 min
🤩
30 min
🤩
1h
🤩
Déroulé de l'activité
Segmentation de l’activité
Détail de l’activité
Segment 1 (1h) : découverte de Vizcom et codage de la galerie
Accueil (15 min) : Présentation de Vizcom
Commence par montrer le site Vizcom et ses particularités, comment créer une image et comment utiliser des images déjà existantes en référence et surtout comment faire un croquis pour l’utilisé en référence.
Tu peux pour ça t’aider de la fiche ressources ou la distribuer à la fin de ton explication.
Démo active (45 min) : Expérimentation des makers
Demande aux makers de choisir deux thèmes pour leur image (par exemple, personnage et décor), puis invite-les à générer au moins deux images par thème. Certains makers ne mettront que 15 minutes, tandis que d’autres prendront jusqu’à 45 minutes. Adapte-toi à leur rythme sans dépasser ce temps maximum. Les makers auront à nouveau du temps sur Vizcom à la fin de l’activité pour enrichir leur galerie.
Segment 2 (30min) : Importation des images et bases du code
1/ Importation des images et bases du code (15 min)
Fais ensuite une démonstration pour télécharger une image depuis Vizcom et l’importer dans CreatiCode. Assure-toi que chaque image soit rangée dans les costumes d’un sprite portant le nom du thème associé (voir image).
Il ne faut rien ajouter en arrière-plan !
Puis montre-leur comment coder le changement de costumes lors du clique.
4/ Création des boutons (15 min)
Il faut maintenant créer les boutons permettant de changer de thème. Explique aux makers le principe des messages et leur intérêt. Montre-leur une interaction simple avec un message (par exemple, lorsqu’on clique sur un sprite, un autre dit une phrase).
Ensuite, demande-leur de créer un système où, en fonction du bouton appuyé, le sprite associé apparaît tandis que les autres disparaissent.
Segment 3 (30min) : Code de mise en forme
1/ Réflexion (5min)
Maintenant qu’on a un code fonctionnel, demande aux makers les soucis qu’ils remarquent :
- On peut déplacer, les images
- Les bouton sont parfois derrière les images
- Quand les boutons sont devant, ils cachent les images
Pour les rendre plus investit, demande-leur quel bug ils aimeraient corriger en premier.
2/ Corrections (25 min)
Les makers peuvent eux même corriger facilement avec un peu de recherche dans les blocs les 2 premiers soucis.
Pour le cas des boutons qui cache les image, c’est plus complexe, si ton groupe est à l’aise avec le code donne-leur uniquement des pistes, s’ils sont novice fait leur une démonstration active.
Segment 4 (1H) : Bonus
1/ Bonus (45 min)
Comme d’habitude désormais à la fin des activité, on prévoit un temps bonus, si tu n’as pas eu le temps de finir, prendre ce temps supplémentaire pour rattraper le retard. Sinon, propose-leur d’ajouter une troisième catégorie avec son bouton afin de consolider leurs acquis. Il est essentiel que tu les aides le moins possible durant cette phase : si un maker parvient à reproduire les étapes précédentes de manière autonome, cela signifie qu’il a véritablement assimilé les notions travaillées.
2/ Présentation (15 min)
Les makers peuvent eux même corriger facilement avec un peu de recherche dans les blocs les 2 premiers soucis.
Pour le cas des boutons qui cache les image, c’est plus complexe, si ton groupe est à l’aise avec le code donne-leur uniquement des pistes, s’ils sont novice fait leur une démonstration active.