CRÉER AVEC TWINE 2/5

Dans le premier tutoriel, vous avez appris à créer des passages et des liens entre les passages. Dans ce second tutoriel, nous allons voir comment ajouter des images et comment exporter votre travail en un format HTML.

ETAPE 3 : Comment ajouter des images dans Twine ?

L'ajout d'image dans Twine est un peu plus complexe que ce que vous avez pu faire dans le tutoriel 1.

Il faut d'abord créer un nouveau passage puis écrivez la ligne de code suivante :

Deux choix s'offre à vous ensuite :

1. L'image est sur internet ?

Récupérez son adresse url (clic droit sur l'image > copier l'adresse de l'image) puis coller l'url entre les guillemets de la ligne de code.

Voici un exemple avec l'icône du site SVT de Créteil.

2. L'image est sur votre ordinateur ?

Twine ne reconnait pas les fichiers png, jpeg ou gif. Il faut d'abord les convertir en un format appelé base64.

Pour cela, je vous conseille le site Base64 Image Explorer . Ce site est performant et ne nécessite aucune installation. Vous pouvez bien sur trouver et utiliser un autre logiciel de votre choix. Dans Base64, importez l'image de votre choix et laissez le site faire le travail. Il est possible d'importer des gif animés, des png ou jpeg. Veillez à privilégier les images les moins lourdes possibles.

Dans BASE64 image, cliquez sur le bouton "copy image" puis coller ce que vous venez de copier entre les guillemets dans le passage de Twine selon la logique suivante :

Vous devriez obtenir quelque chose avec de très nombreux caractères incompréhensibles. C'est normal.

Donnez un nom à votre passage. Je fais le choix de toujours appeler ces passages par un nom commençant par img_ pour mieux me repérer dans les passages. En effet, Thyp possède plus de 50 passages.

Dans ce tutoriel, appelons cette première image img_essai.

img_essai

Le symbole underscore "_" permet d'avoir des noms sans espace. Cela est une habitude à avoir lorsque l'on code.

NOTE IMPORTANTE :La seconde méthode est à préférée si vous voulez exporter votre travail plus facilement et que les élèves puissent travailler sans avoir de connexion internet.

Comment insérer l'image dans un passage ?

Sélectionnez le passage start (ou un autre passage selon votre choix) pour l'éditer. Pour insérer l'image, écrivez le code suivant à l'endroit de votre choix. Les apostrophes et les signes "supérieur/inférieur" sont obligatoires.

<<include 'img_essai'>>

La fonction include indique à Twine d'insérer le passage de votre choix dans le passage. Si vous vous rappelez ma comparaison entre un passage et une diapositive, vous voyez maintenant pourquoi un passage n'est pas tout à fait une diapositive.

Lancez le projet ou faites F5 pour actualiser votre onglet (version en ligne uniquement) pour vérifier que l'image apparaît bien.

Quelques astuces concernant les images :

Si vous souhaitez centrer l'image, ajouter un peu de code HTML comme ci-dessous

<center><<include 'img_essai'>></center>

SI vous souhaitez redimensionner l'image, vous pouvez modifier le passage qui contient l'image en ajoutant le code HTML suivant :

Les attributs heigth et width permettent de définir respectivement la hauteur et la largeur de l'image. Le chiffre entre guillemets correspond au nombre de pixels. Sauf erreur de ma part, pour un projet sur téléphone, 480 pixels de large est idéal, tandis que sur PC, vous pouvez aller jusqu'à 1200.

NOTE : Pour l'ajout de vidéo ou de fichier audio, cela demande beaucoup plus de compétences et je vous laisse consulter le guide officiel de Twine.

ETAPE 4 : Exporter son travail

Lorsque votre projet est fini, il faut pouvoir le partager aux élèves. Pour cela, il suffit de se rendre dans le menu de l'histoire en bas à gauche et de cliquer sur "Publier vers un fichier".

Twine génère alors un fichier HTML. C'est ce fichier que vous pouvez partager avec les élèves. Les élèves auront juste à ouvrir le fichier pour retrouver votre travail. Ce fichier fonctionne sur tous les supports : téléphone, pc et tablettes...

Attention : ce fichier HTML est le résultat final de votre projet. Vous ne pouvez pas modifier ce fichier. Si vous souhaitez faire une sauvegarde de votre travail, il faut générer une archive. Pour cela, cliquer sur l'icone "Maison". Vous arriverez sur la page d'accueil de Twine. Il est alors possible de générer une archive en cliquant dans le menu de droite sur le bouton "archive". Cette archive pourra être ouverte ultérieurement ou sur une autre machine en cliquant sur "Importer depuis un fichier".

ETAPE 5 : Publier sur internet

SI vous souhaitez publier votre travail sur internet, une des solutions est d'héberger votre travail chez Netlify. C'est un site qui peut héberger gratuitement et sans pub (indispensable en milieu scolaire). Vous devrez cependant créer un compte.

Pourquoi Netlify ? Parce que la plupart des autres hébergeurs que j'ai essayé n'acceptent pas que l'on dépose directement un fichier HTML produit par Twine. J'avoue que je n'en sais pas plus et que je remercierais toute personne qui aurait une réponse plus précise.

Ensuite, sur votre ordinateur, créez un nouveau dossier, déposez votre fichier HTML dans ce dossier vide. Puis renommez votre fichier HTML en index.html

Glissez-déposez votre dossier avec le fichier index.html sur la page d'accueil du site netlify. Après quelques secondes, le site est disponible. Vous pouvez personnaliser votre adresse mais elle se finira toujours par "netlify.com". Et voilà !

Dans le prochain tutoriel, on verra comment améliorer votre projet et ajouter des logiques conditionnelles.