Télécharger en tant que PDF, PPTX
Téléchargé parJulien Devriendt
Découverte et prise en main de l'outil Wick Editor
Wick Editor est un logiciel libre en ligne qui permet de créer des animations interactives, allant des GIFs aux jeux vidéo. Le document décrit les étapes de création d’animations et de jeux, en expliquant la manipulation de l'interface, la scriptabilité et l'exportation finale du projet. Il invite également les utilisateurs à partager leurs créations en ligne via des plateformes dédiées.
Découverte et prise en main de l'outil Wick Editor
- 1. Wick Editor :https://www.wickeditor.com Flash revisité Julien Devriendt - CC BY-SA-NC
- 2. A quoi çasert ? 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
- 3. Atelier création de.Gif Julien Devriendt - CC BY-SA-NC
- 4. Présentation de l’interface JulienDevriendt - CC BY-SA-NC
- 5. 3 - Lazone 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
- 6. 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
- 7. Complétez les différentesétapes de votre animation Julien Devriendt - CC BY-SA-NC
- 8. Jusqu’à ce quevous ayez terminé Julien Devriendt - CC BY-SA-NC
- 9. Appuyez sur lebouton « Play » pour avoir un aperçu de votre animation Julien Devriendt - CC BY-SA-NC
- 10. Si l’animation esttrop rapide ou trop lente, cliquez sur l’engrenage Julien Devriendt - CC BY-SA-NC
- 11. Modifiez le nombred’image par seconde (Frame Per Second - FPS) et sauvegardez (passez par exemple de 12 à 8) Julien Devriendt - CC BY-SA-NC
- 12. Si vous êtessatisfait du résultat, cliquez sur « export » Julien Devriendt - CC BY-SA-NC
- 13. Nous allons exporternotre animation au format .gif, mais vous avez également la possibilité de l’exporter dans un format vidéo Julien Devriendt - CC BY-SA-NC
- 14. Une fois l’exportterminé, le fichier .gif se télécharge sur votre PC Julien Devriendt - CC BY-SA-NC
- 15. Vous pouvez ensuitepartager votre création en ligne et sur les réseaux sociaux Julien Devriendt - CC BY-SA-NC
- 16. Partagez vos créationsvia giphy : https://giphy.com Julien Devriendt - CC BY-SA-NC
- 17. Ou détourner desoeuvres d’artistes et du domaine public Les oeuvres de Kevin Weir Les détournements de Gallica Julien Devriendt - CC BY-SA-NC
- 18. Atelier histoire interactive JulienDevriendt - CC BY-SA-NC
- 19. Etape 1 Créez 3scènes : la première scène - la maison Julien Devriendt - CC BY-SA-NC
- 20. Etape 1 Créez 3scènes : la seconde scène - l’intérieur de la maison Julien Devriendt - CC BY-SA-NC
- 21. Etape 1 Créez 3scènes : la troisième scène - la souris Julien Devriendt - CC BY-SA-NC
- 22. Etape 2 Si jeclique sur le bouton play, l’animation va se déclencher. Je dois d’abord bloquer l’animation Julien Devriendt - CC BY-SA-NC
- 23. Etape 2 Cliquez surla première scène Modifiez le script « default » en cliquant sur « edit » Julien Devriendt - CC BY-SA-NC
- 24. 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
- 25. Etape 3 Nous allonsmaintenant ajouter des zones cliquables pour que le joueur puisse passer d’une scène à l’autre Julien Devriendt - CC BY-SA-NC
- 26. Etape 3 Sélectionnez laporte puis cliquez sur « make interactive » et « convert to button » Julien Devriendt - CC BY-SA-NC
- 27. Etape 3 Cliquez sur« add script » puis sur « mouseclick » Julien Devriendt - CC BY-SA-NC
- 28. Etape 3 Dans l’onglettimeline, cliquez sur la fonction « gotoAndStop » indiquez le n° de la scène suivante Julien Devriendt - CC BY-SA-NC
- 29. Etape 4 Répétez l’opérationpour les scènes 2 et 3. Julien Devriendt - CC BY-SA-NC
- 30. Etape 5 Ajoutez unson de victoire pour la dernière scène Julien Devriendt - CC BY-SA-NC
- 31. Etape 5 Dans lacase « Asset library » cliquez sur le + pour ajouter une ressource Julien Devriendt - CC BY-SA-NC
- 32. Etape 5 Sélectionnez votrefichier et cliquez sur « ouvrir » Julien Devriendt - CC BY-SA-NC
- 33. Etape 5 Votre fichierapparait 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
- 34. Etape 5 Sélectionnez lasouris et modifiez le script « Mouseclick » Julien Devriendt - CC BY-SA-NC
- 35. Etape 5 Ajoutez lafonction « playSound » sur la première ligne de votre programme Julien Devriendt - CC BY-SA-NC
- 36. Etape 6 Ajoutez unécran titre Julien Devriendt - CC BY-SA-NC
- 37. Etape 6 Sélectionnez les3 scènes et décalez-les vers la droite. Julien Devriendt - CC BY-SA-NC
- 38. Etape 6 Sélectionnez les3 scènes et décalez-les vers la droite. Julien Devriendt - CC BY-SA-NC
- 39. Etape 6 Comme lapremiè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
- 40. Etape 6 Entrez letitre de votre jeu Julien Devriendt - CC BY-SA-NC
- 41. Etape 6 Sélectionnez votretexte pour faire apparaitre les options de mise en forme Julien Devriendt - CC BY-SA-NC
- 42. Etape 6 Nous allonscréer un script pour faire démarrer le jeu lorsque la touche A est appuyée Julien Devriendt - CC BY-SA-NC
- 43. Etape 6 Sur lescript « 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
- 44. Etape 6 Sélectionnez «Keydown » puis dans la rubrique input, sélectionnez la fonction « isKeyDown » Julien Devriendt - CC BY-SA-NC
- 45. Etape 6 Rajoutez ensuitela 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
- 46. Etape 7 Exporter votrejeu en ligne Julien Devriendt - CC BY-SA-NC
- 47. Etape 7 Il estpossible 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
- 48. Etape 7 Pour mettrele jeu en ligne, il faut passer par le service d’hébergement de jeux itch.io Julien Devriendt - CC BY-SA-NC
- 49. Etape 7 Créez-vous uncompte (cela peut être le compte de la bibliothèque) puis cliquez sur « upload new project » Julien Devriendt - CC BY-SA-NC
- 50. Etape 7 Complétez leformulaire Julien Devriendt - CC BY-SA-NC
- 51. Etape 7 Dans larubrique « Kind of project » sélectionnez HTML Julien Devriendt - CC BY-SA-NC
- 52. Etape 7 Puis dansla rubrique « uploads » sélectionnez le fichier .zip exporté Cliquez sur save Julien Devriendt - CC BY-SA-NC
- 53. Etape 7 Votre jeuest maintenant jouable en ligne dans un navigateur : https://julanimtic.itch.io/mouse Julien Devriendt - CC BY-SA-NC
- 54. Créer un jeuvidé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
- 55. Bib Goes Home(Game Jam game 2019) Julien Devriendt - CC BY-SA-NC
- 56. Merci pour votreparticipation Julien Devriendt @julanimtic julien.devriendt@animtic.fr