Découverte et prise en main de l'outil Wick Editor

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

Présentation de l’interface

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é

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

Jusqu’à ce que vous ayez terminé

Appuyez sur le bouton « Play » pour avoir un aperçu de votre animation

Si l’animation est trop rapide ou trop lente, cliquez sur l’engrenage

Modifiez le nombre d’image par seconde (Frame Per Second - FPS) et
sauvegardez (passez par exemple de 12 à 8)

Si vous êtes satisfait du résultat, cliquez sur « export »

Nous allons exporter notre animation au format .gif, mais vous avez
également la possibilité de l’exporter dans un format vidéo

Une fois l’export terminé, le fichier .gif se télécharge sur votre PC

Vous pouvez ensuite partager votre création en ligne et sur les réseaux
sociaux

Partagez vos créations via giphy : https://giphy.com

Ou détourner des oeuvres d’artistes et du domaine public
Les oeuvres de Kevin Weir Les détournements de Gallica

Atelier histoire interactive

Etape 1
Créez 3 scènes : la première scène - la maison

Etape 1
Créez 3 scènes : la seconde scène - l’intérieur de la maison

Etape 1
Créez 3 scènes : la troisième scène - la souris

Etape 2
Si je clique sur le bouton play, l’animation va se déclencher.
Je dois d’abord bloquer l’animation

Etape 2
Cliquez sur la première scène
Modifiez le script « default » en cliquant sur « edit »

Etape 2
Cliquez sur « timeline » puis sur « stop »
Si vous cliquez sur « play » le programme reste maintenant sur la première scène

Etape 3
Nous allons maintenant ajouter des zones cliquables pour que le joueur puisse passer
d’une scène à l’autre

Etape 3
Sélectionnez la porte puis cliquez sur « make interactive » et « convert to button »

Etape 3
Cliquez sur « add script » puis sur « mouseclick »

Etape 3
Dans l’onglet timeline, cliquez sur la fonction « gotoAndStop » indiquez le n° de la scène
suivante

Etape 4
Répétez l’opération pour les scènes 2 et 3.

Etape 5
Ajoutez un son de victoire pour la dernière scène

Etape 5
Dans la case « Asset library » cliquez sur le + pour ajouter une ressource

Etape 5
Sélectionnez votre fichier et cliquez sur « ouvrir »

Etape 5
Votre fichier apparait maintenant dans votre bibliothèque de ressources. Faites attention à
bien les renommer cela facilitera l’organisation de votre projet

Etape 5
Sélectionnez la souris et modifiez le script « Mouseclick »

Etape 5
Ajoutez la fonction « playSound » sur la première ligne de votre programme

Etape 6
Ajoutez un écran titre

Etape 6
Sélectionnez les 3 scènes et décalez-les vers la droite.

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 »

Etape 6
Entrez le titre de votre jeu

Etape 6
Sélectionnez votre texte pour faire apparaitre les options de mise en forme

Etape 6
Nous allons créer un script pour faire démarrer le jeu lorsque la touche A est appuyée

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

Etape 6
Sélectionnez « Keydown » puis dans la rubrique input, sélectionnez la fonction « isKeyDown »

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.

Etape 7
Exporter votre jeu en ligne

Etape 7
Il est possible d’exporter votre jeu en ligne. Cliquez sur « Export » puis sur Interactive.
Actuellement seule l’option fichier .zip fonctionne

Etape 7
Pour mettre le jeu en ligne, il faut passer par le service d’hébergement de jeux itch.io

Etape 7
Créez-vous un compte (cela peut être le compte de la bibliothèque) puis cliquez sur « upload
new project »

Etape 7
Complétez le formulaire

Etape 7
Dans la rubrique « Kind of project » sélectionnez HTML

Etape 7
Puis dans la rubrique « uploads » sélectionnez le fichier .zip exporté
Cliquez sur save

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

Bib Goes Home (Game Jam game 2019)

Merci pour votre participation
Julien Devriendt
@julanimtic
julien.devriendt@animtic.fr

Découverte et prise en main de l'outil Wick Editor

Recommandé

Recommandé

Contenu connexe

Similaire à Découverte et prise en main de l'outil Wick Editor

Similaire à Découverte et prise en main de l'outil Wick Editor (20)

Plus de Julien Devriendt

Plus de Julien Devriendt (20)

Dernier

Dernier (15)

Découverte et prise en main de l'outil Wick Editor