Want to make creations as awesome as this one?

Transcript

Créer rapidement une histoire interactive avec Glide

P. Nadam

Le pas-à-pas

À vous de jouer en suivant nos conseils pour reproduire ou exploiter le modèle

03

Le principe

02

L'exemple-modèle

01

03

Bien comprendre le fonctionnement de Glide et du modèle créé.

02

Un exemple simple facile à reproduire et que vous pouvez récupérer comme modèle.

01

01

01

02

02

03

03

Un exemple simple à copier

Un autre exemple pour tester et voir d'autres possibilités

https://heros.glideapp.io/

https://foretdesenchantee.glideapp.io/

Avec Glide il est facile de créer sous la forme d'une appli Web, une aventure interactive à la manière d'un livre dont vous êtes le héros, ou d'un mini-escape game virtuel.

Un exemple simple à tester

(cliquez pour découvrir)

(cliquez pour découvrir)

01

01

02

02

03

03

Glide récupère les champs d'un document en ligne (Google Sheet) et les affiche avec une mise en forme paramétrable.

Le principe 1/2

Suite

01

01

02

02

03

03

Les choix alternatifs proposés dans le jeu sont gérés par des liens entre les cellules du tableau. Une formule permet de créer cette relation entre les colonnes.

Le principe 2/2

Nom de la colonne cible correspondant aux étapes

Nom de la feuille (de l'onglet)

La formule =NomDeLaFeuille:Nomdelaciblepermet de lier les cellules entre elles. Par exemple ici, les cellules de la colonne choixA renvoient à une des cellules de la colonne ETAPE.

Pour l'étape 5, le choixA renvoie à l'étape 2.

01

01

02

02

03

03

Le pas-à-pas 1/15

Créez un nouveau Google Sheet avec deux feuilles de calcul (deux onglets) DEPART et ETAPES.

Nom du fichier

Suite

01

01

02

02

03

03

Le pas-à-pas 2/15

Dans la feuille DEPART, créez trois colonnes IMAGE, TEXTE et DEBUT=ETAPES:ETAPE.Dans la cellule A2, tapez (ou collez) l'adresse de l'image d'introduction.Tapez votre texte d'introduction dans la cellule voisine.Dans la cellule C1, tapez 1.

Cela correspond à votre page d'accueil du jeu

Permet de lier l'introduction à la première étape

Texte d'introduction

Image d'introduction

Suite

Retour

Retour

01

01

02

02

03

03

Le pas-à-pas 3/15

Dans la feuille ETAPES, créez six colonnes ETAPE, ACTION, SITUATION, choixA=ETAPES:ETAPE et choixB=ETAPES:ETAPE. Dans la colonne ETAPE, tapez les numéros des étapes (de 1 à 11). La Colonne ACTION correspond aux intitulés des choix. Tapez les adresses des images illustrant les étapes dans la colonne IMAGE. La colonne SITUATION correspond aux descriptifs des étapes. ChoixA et ChoixB permettent de relier les étapes entre elles.

Cela correspond aux diverses étapes et leurs relations

Suite

Retour

01

01

02

02

03

03

Le pas-à-pas 4/15

Créez un compte Glide (https://www.glideapps.com/) et connectez-vous.Dans le tableau de bord, créez une nouvelle app.

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 5/15

Sélectionnez le fichier Google Sheet à associer avec votre nouvelle appplication Glide.

Fichier à sélectionner

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 6/15

Voilà à quoi doit ressembler votre Glide si le fichier Google Sheet est bien paramétré.Cliquez sur la Relation.

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 7/15

Videz les champs Details et Image.Décochez l'option Show title when image is not available.Cliquez sur le bouton COMMENCER de votre application.

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 8/15

Le lien fonctionne et la première étape s'affiche. Supprimez les champs Title ACTION et Basic Text ETAPE.Puis cliquez sur le + pour ajouter un élément.

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 9/15

Sélectionnez image, puis modifiez les paramètres pour afficher l'image en sa totalité.Cliquez sur la flèche pour valider.

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 10/15

Faites glisser le champ Image vers le haut de la liste.Puis, modifiez les deux Relations choixA et choixB pour ne garder que les titres.

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 11/15

Dans le menu de gauche, cliquez sur Tabs, puis sur le champ ETAPES.Cliquez sur la poubelle en haut à droite pour supprimer cet onglet.

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 12/15

Dans le menu de gauche, cliquez sur Settings.Modifiez l'icône et choisissez un des thèmes.

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 13/15

Sur la droite, cliquez sur PRIVACY.Choisissez le mode de publication (Public, avec un mot de passe ou avec enregistrement).

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 14/15

Dans le menu de gauche, cliquez sur Share app.Puis, sur la droite, cliquez sur Publish app.Vous pouvez modifier le nom du lien court avant de le partager.

Retour

Suite

01

01

02

02

03

03

Le pas-à-pas 15/15

Pour terminer, changez le nom de l'onglet.

Retour