Twine : Personnalisevotre aventure

Twine : Personnalisez l'apparence de votre aventure

C'est parti !

TWINE

Personnalisez votre aventure

Quelque chose n'est pas clair, besoin d'un coup de main ? N'hésite pas à demander aux professeurs !

MODIFIER LA FEUILLE DE STYLE

Inserer des sons

INSERER UNE IMAGE

Démarche en réédition

POUR ALLER PLUS LOIN

UTILISER LE HTML

TWINE

Personnalisez votre aventure

Pour quoi faire ?

Utiliser le HTML peut vous permettre d'insérer des images, de la musique, mettre le texte en gras, italique, surligné ou encore de faire des tableaux par exemple. : Ce site vous permet de faire votre mise en page à gauche et de récupérer le code à insérer à droite. Pensez à effacer l'exemple d'abord pour que le tout soit plus lisible !

Comment faire ?

Utiliser le HTML

TWINE

Personnalisez votre aventure

Choisir ses images

Les images doivent être libres de droit, c'est à dire que l'auteur des images doit être d'accord pour qu'elles soient réutilisées. Il existe des banques d'image libres de droit : - https://www.everypixel.com/

INSERER UNE IMAGE

+ info

TWINE

Personnalisez votre aventure

Héberger son image

Maintenant que les images sont téléchargées, il va falloir ... Les héberger !

Pour héberger une image, vous pouvez aller sur https://www.cjoint.com/ Une fois l'image herbergée, le lien qui vous servira sera le lien source (en dernier).

INSERER UNE IMAGE

TWINE

Personnalisez votre aventure

Insérer son image

Pour cela, je la mets à l'endroit voulu avec :

<img src="URL DE L'IMAGE">

INSERER UNE IMAGE

TWINE

Personnalisez votre aventure

Choisir un son

Insérer un son peut permettre de rajouter une ambiance à votre histoire (grincement de porte, battement de coeur ...)

Voici plusieurs banques de sons libres de droit : - https://lasonotheque.org - https://freesound.org - https://www.sound-fishing.net

Démarche en réédition

INSERER UNE SON

TWINE

Personnaliser votre aventure

Héberger le son

Comme pour les images, il va falloir héberger les sons pour obtenir une URL.

Démarche en réédition

Pour cela, j'utilise : https://www.cjoint.com Note : Le champ "adresse mail" n'est pas obligatoire. Une fois le lien créé, je clique dessus. 1. "Créer le lien Cjoint" 2. Cliquer sur le lien. 3. Clic droit sur l'adresse derrière "Document joint" et "Copier le lien". 4. Vous pouvez passer à l'étape suivante !

INSERER UNE SON

TWINE

Personnaliser votre aventure

Intégrer le son au passage

Pour cela, je mets dans le corps de texte du passage : <audio src="URL DU SON" autoplay></audio>

Démarche en réédition

INSERER UNE SON

TWINE

Personnalisez votre aventure

Pour quoi faire ?

La feuille de style va permettre de modifier la police (fonte, taille, couleur ...) ou encore l'arrière plan (changer la couleur ou mettre une image).

Comment faire ?

MODIFIER LA FEUILLE DE STYLE

1. Ce tutoriel est valable pour le format SugarCube 2.30.0 : premièrement, je vais dans le menu pour sélectionner ce format. 2. Je vais dans le menu, "Modifier la feuille de style de l'Histoire".

Changer les couleurs

Changer la police

TWINE

Personnalisez votre aventure

Changer les couleurs

"Background-color" indique que je souhaite changer la couleur du fond. Lorsqu'il ne s'agit d'éléments comme les liens, je met simplement "color"

tw-story { background-color: #CODECOULEUR;}

MODIFIER LA FEUILLE DE STYLE

"tw story indique l'élément que l'on souhaite modifier. Ici, il s'agit de l'espace où est écrite l'histoire. (autres éléments modifiables : tw-sidebar, tw-link, tw-link.visited)

Pour les codes couleur, c'est par ici :

TWINE

Personnalisez votre aventure

Changer la police

body, tw-story { font-family: Nom de la police; font-size: 12px; text-align: center }

Change la famille de police

MODIFIER LA FEUILLE DE STYLE

Change la taille du texte

Change l'alignement du texte (justify/right/left)

Liste des familles de polices et d'autres possibilités concernant le style du texte ici :

TWINE

Personnalisez votre aventure

Encore beaucoup de possibilités !

Twine est un outil plein de possibilités, que nous n'aurons pas le temps de voir ! Pour aller plus loin si tu le souhaites dans un futur plus ou moins proche et voir les possibilités que t'offrent les formats d'histoire, le CSS, les variables, il existe plusieurs sites qui proposent des explications et des guides : Pour des articles et des tutoriels en français Pour un guide complet, le Wiki de Twine 2 (en anglais)

POUR ALLER PLUS LOIN