Twine : Réponses aux questions - Imagemap et Tableaux
Aujourd'hui je répond à des questions qui m'ont été posé sur twine, donc on va voir comment réaliser des imagemap, des tableaux, des champs de saisie et des boutons dans Twine, place à la vidéo...
14 commentaires:
Luc Moreau
a dit…
Merci pour ce tuto. Dans la balise area elle-même peut-on modifier une variable sans "data-passage" et donc en restant sur le passage où l'on est ? Sinon peut-on passer par un passage où là, juste la variable est modifiée puis un retour se fait au passage précédent sans affichage (et donc par un passage invisible) ?
je vais faire quelques test, j'ai bien compris l'idée et en effet ce serai utile ^_^ donc je vais tester et si je trouve une méthode simple j'expliquerai ^_^
encore une fois c'était rapide ^_^" donc oui sugarcube ajoute en fait quelques attributs html, data-passage pour indiquer un passage vers lequel envoyer le joueur mais il y a aussi data-setter qui permet de modifier des variable on peux donc ajouter dans la balise area data-setter="$variable += 2" pour que par exemple la variable $variable augmente de 2 à chaque clic mais l'attribut data-passage semble être obligatoire pour que cela fonctionne mais rien n’empêche de rediriger vers le passage actuel donc imaginons par exemple on à un passage "configuration" qui affiche une image map avec pleins de zone définit avec la balise area, on a des balise qui renvoie sur d'autre passage avec data-passage="passagedujeu" et on a quelques zone qui doivent que modifier des variable et pour cest area on indique data-passage="configuration" donc le passage actuel et on ajoute data-setter="$mavariable += 1" ou data-setter="$mavariable -= 1" ainsi on peux faire des flèche cliquable pour augmenter ou diminuer ou redéfinir des variables
Merci de votre réponse. J'ai fait un petit jeu avec Twine mais je n'ai pas besoin du volet de gauche et préférerais avoir un plein écran. Y a t-il une possibilité ?
oui bien sur, pour retirer le volet de gauche dans sugarcube voilà la méthode : tu clic sur la flèche en bas à droite du nom de ton projet pour ouvrir le déroulant et tu clic sur le lien tout en haut : "Modifier le Javascript de l'Histoire", une fenêtre s'ouvre "Javascript" ici tu ajoute ceci :
et tu ferme la fenêtre, quand tu lancera ton histoire le volet de gauche ne sera plus là, si tu souhaite remettre il te suffit d'allez effacer les deux ligne dans la fenêtre javascript ^_^
Merci beaucoup. Merci pour ta réactivité aussi ! ça marche. Une question encore... Dans mon jeu j'utilise des images map. Je pensais mettre mes images sur google drive. Mais le lien donné par ce drive est ignoré par Twine le jeu alors affiche un petit carré à la place de l'image... j'ai même essayé de mettre le fichier html sur google drive (avec les images dans le même dossier) mais un lien sur ce fichier dans un email n'ouvre que le code source du fichier html au lieu de l'ouvrir avec un navigateur... (google drive ne propose même pas de l'ouvrir dans google chrome !) Dans ton tuto l'image du chat vient d'un cloud et semble t-il le lien, là, se fait bien. Solution ? Merci de tes conseils.
j'utilise le service http://www.zupimages.net/ c'est gratuit sans inscription, il n'y a pour le moment aucune limitation de durée de stockage, on upload donc les images dessus et pour chaque image zupimages fournit plusieurs lien pour afficher l'image dans un forum, dans du html etc et un des lien est le lien direct vers l'image qui peut être utiliser dans Twine... je parle de zupimages parce que je l'utilise mais il existe d'autre hébergeur d'image qui fournissent des liens direct vers les images cependant en trouver un qui ne supprime pas les images après une période c'est rare ^_^" et par contre pour le fichier html il y a ce service : http://philome.la/ donc les image sur zupimages, le html sur philome.la et toute l'histoire est en ligne sinon il y a également des service d’hébergement de page web gratuit comme sur lesquels tu peux mettre à la fois le html et les images : http://www.webou.net/ https://www.hebfree.org/ http://www.hebergratuit.com/ https://www.virtual-info.info/cart.php?gid=1 à vérifier je ne les ai pas tester, il y a aussi la possibilité d'héberger tes fichiers sur l'espace web de ton FAI si il en propose un, free doit le faire http://www.free.fr/assistance/52.html , orange aussi : https://pages.perso.orange.fr/ suivant la box internet que tu dispose ou si tu dispose d'un NAS tu peux envisager d'auto héberger ton histoire vue que c'est juste une page html et quelques images voir plus mais généralement une histoire twine ce n'est pas très lourd ^_^
J'essaye d'afficher une image avec Twine l'image fait 1600x900 ce qui exactement la résolution de mon écran. En utilisant align="left" ou align="top" avec ou sans guillemets Twine affiche l'image avec une marge noire en haut et a gauche et donc avec une barre scrolling en bas et a droite avec ou sans F11. Comment faire pour un plein écran exact ? Merci.
en fait il y a des marge de mise en page dans les page de sugarcube pour rendre la page plus agréable, on peux voir le html utilisé par sugarcube ici : http://www.motoslave.net/sugarcube/2/docs/html.html et les fichiers css utilisé par sugarcube ici : http://www.motoslave.net/sugarcube/2/docs/css.html connaissant cela on peux voir que le contenu des passage s'affiche dans un div #story" et donc il doit probablement posséder une marge en haut donc pour la retirer on va dans les css de l'histoire donc dans "Modifier la feuille de style de l'histoire" et on ajoute #story {margin:0; padding:0;} pour retirer les marges externe et interne du div #story, ainsi les images mises dans un passage collerons au bord haut de la fenêtre du navigateur, je pense que cela retire aussi la marge de gauche mais je ne sais pas si il y as un truc à gauche du passage qui aurai ses propre marge, je ne crois pas il faut tester
J'arrive après la bataille et je m'en excuse, j'espère que le sujet est toujours actif quand même. D'abord merci pour le tutos, ils sont vraiment sympas, bien fait et expliqué. J'aurais une question concernant les images/vidéos. J'aimerais créer une sorte de diaporama d'images et de petites vidéos (sorte gif mais au format mp4) et j'ai testé un code mais ils ne fonctionne pas, je n'ai qu'une vidéo qui s'affiche...J'avoue que je ne comprends pas trop le code et comment lui faire comprendre l'ordre de la série d'image/vidéo. Voici le code testé :
JAVASCRIPT : window.onload = function () { var imgs = ["Video1","Video2","Image1","Video3"], image = document.getElementById("Video4"), index = 0; function hop () { image.src= imgs[(index++)%imgs.length]; }; cool = setInterval(hop,6000); }; ---------------------------------------------------------------------------- DANS LE PASSAGE :
etc...
Les images doivent défiler en plein écran avec environ 5 secondes d'intervalle (ajustable selon durée des vidéos)
merci pour les compliments, et les discussion sont toujours ouverte pas de soucis. alors pour la création d'un diaporama je ne suis pas certains que twine soit très adapté, je ne pense pas que l'on puisse jouer une vidéo pleins écran avec du HTML, on peux jouer des vidéo dans Twine ça pas de soucis, on peux forcer leur lecture dès le chargement et on peux changer de passage automatiquement après un temps définit mais enchainé les vidéos cela demande un peu plus de travail, après quel est le but du diaporama ? c'est pour illustrer un passage ? ou pour faire une page diaporama avec twine sans histoire autour ? si c'est pour illustrer personnellement je ferai un montage vidéo de toutes les vidéos à passé pour avoir qu'une seule vidéo à jouer sinon pour faire un diaporama je procéderai de cette façon je pense (je n'ai pas tester encore mais j'explique mon raisonnement) je ferai un passage avec une série de conditions if et une variable le passage vérifierai la valeur de la variable (0 au début) puis afficherai la première vidéo et augmenterai la valeur de la variable de 1 puis une fois un temps écoulé on recharge le même passage donc même série de condition mais cette fois la valeur n'étant plus 0 mais 1 c'est la seconde condition if qui est vrai et qui joue donc la seconde vidéo à et augmente encore de 1 la variable puis on recharge encore le même passage cette fois la variable vaux 2 donc c'est la condition suivante qui est vrai et qui joue la 3eme vidéo et augmente la variable encore de 1 et ainsi de suite... c'est un peu bourrin comme méthode mais c'est simple il faudrai que je teste mais je pense que cela marcherai ^_^
Merci pour les explications ! En fait le but du "diaporama" était de passer d'une vidéo à une autre sans qu'il n'y ait l'écran noir de chargement. Je pourrais faire une vidéo en une mais le soucis c'est qu'entre chaque séquence vidéo, il y a des images qui seront cliquable. En gros pour expliquer, ce sera une enquête, la vidéo et les images représente un bureau sur lequel il y a des éléments cliquable pour trouver des indices et à certains moment il y a des animations (comme par exemple un zoom sur un écran) d'où les courtes vidéos. Peut-être y'a-t-il tout simplement un moyen de faire cela sans qu'il n'y ait d'écran de chargement ? En utilisant la fonction replace ? Merci !
14 commentaires:
Merci pour ce tuto.
Dans la balise area elle-même peut-on modifier une variable sans "data-passage" et donc en restant sur le passage où l'on est ?
Sinon peut-on passer par un passage où là, juste la variable est modifiée puis un retour se fait au passage précédent sans affichage (et donc par un passage invisible) ?
je vais faire quelques test, j'ai bien compris l'idée et en effet ce serai utile ^_^ donc je vais tester et si je trouve une méthode simple j'expliquerai ^_^
encore une fois c'était rapide ^_^"
donc oui sugarcube ajoute en fait quelques attributs html, data-passage pour indiquer un passage vers lequel envoyer le joueur mais il y a aussi data-setter qui permet de modifier des variable on peux donc ajouter dans la balise area data-setter="$variable += 2" pour que par exemple la variable $variable augmente de 2 à chaque clic mais l'attribut data-passage semble être obligatoire pour que cela fonctionne mais rien n’empêche de rediriger vers le passage actuel donc imaginons par exemple on à un passage "configuration" qui affiche une image map avec pleins de zone définit avec la balise area, on a des balise qui renvoie sur d'autre passage avec data-passage="passagedujeu" et on a quelques zone qui doivent que modifier des variable et pour cest area on indique data-passage="configuration" donc le passage actuel et on ajoute data-setter="$mavariable += 1" ou data-setter="$mavariable -= 1"
ainsi on peux faire des flèche cliquable pour augmenter ou diminuer ou redéfinir des variables
Merci de votre réponse.
J'ai fait un petit jeu avec Twine mais je n'ai pas besoin du volet de gauche et préférerais avoir un plein écran. Y a t-il une possibilité ?
oui bien sur, pour retirer le volet de gauche dans sugarcube voilà la méthode :
tu clic sur la flèche en bas à droite du nom de ton projet pour ouvrir le déroulant et tu clic sur le lien tout en haut : "Modifier le Javascript de l'Histoire", une fenêtre s'ouvre "Javascript" ici tu ajoute ceci :
$('#ui-bar').remove();
$(document.head).find('#style-ui-bar').remove();
et tu ferme la fenêtre, quand tu lancera ton histoire le volet de gauche ne sera plus là, si tu souhaite remettre il te suffit d'allez effacer les deux ligne dans la fenêtre javascript ^_^
Merci beaucoup. Merci pour ta réactivité aussi !
ça marche. Une question encore... Dans mon jeu j'utilise des images map. Je pensais mettre mes images sur google drive. Mais le lien donné par ce drive est ignoré par Twine le jeu alors affiche un petit carré à la place de l'image... j'ai même essayé de mettre le fichier html sur google drive (avec les images dans le même dossier) mais un lien sur ce fichier dans un email n'ouvre que le code source du fichier html au lieu de l'ouvrir avec un navigateur...
(google drive ne propose même pas de l'ouvrir dans google chrome !)
Dans ton tuto l'image du chat vient d'un cloud et semble t-il le lien, là, se fait bien. Solution ? Merci de tes conseils.
j'utilise le service http://www.zupimages.net/
c'est gratuit sans inscription, il n'y a pour le moment aucune limitation de durée de stockage, on upload donc les images dessus et pour chaque image zupimages fournit plusieurs lien pour afficher l'image dans un forum, dans du html etc et un des lien est le lien direct vers l'image qui peut être utiliser dans Twine...
je parle de zupimages parce que je l'utilise mais il existe d'autre hébergeur d'image qui fournissent des liens direct vers les images cependant en trouver un qui ne supprime pas les images après une période c'est rare ^_^"
et par contre pour le fichier html il y a ce service : http://philome.la/
donc les image sur zupimages, le html sur philome.la et toute l'histoire est en ligne
sinon il y a également des service d’hébergement de page web gratuit comme sur lesquels tu peux mettre à la fois le html et les images :
http://www.webou.net/
https://www.hebfree.org/
http://www.hebergratuit.com/
https://www.virtual-info.info/cart.php?gid=1
à vérifier je ne les ai pas tester, il y a aussi la possibilité d'héberger tes fichiers sur l'espace web de ton FAI si il en propose un, free doit le faire http://www.free.fr/assistance/52.html , orange aussi : https://pages.perso.orange.fr/
suivant la box internet que tu dispose ou si tu dispose d'un NAS tu peux envisager d'auto héberger ton histoire vue que c'est juste une page html et quelques images voir plus mais généralement une histoire twine ce n'est pas très lourd ^_^
Merci. Je vais tester tout ça.
Bonjour,
J'essaye d'afficher une image avec Twine l'image fait 1600x900 ce qui exactement la résolution de mon écran. En utilisant align="left" ou align="top" avec ou sans guillemets Twine affiche l'image avec une marge noire en haut et a gauche et donc avec une barre scrolling en bas et a droite avec ou sans F11. Comment faire pour un plein écran exact ?
Merci.
en fait il y a des marge de mise en page dans les page de sugarcube pour rendre la page plus agréable, on peux voir le html utilisé par sugarcube ici :
http://www.motoslave.net/sugarcube/2/docs/html.html
et les fichiers css utilisé par sugarcube ici :
http://www.motoslave.net/sugarcube/2/docs/css.html
connaissant cela on peux voir que le contenu des passage s'affiche dans un div #story" et donc il doit probablement posséder une marge en haut donc pour la retirer on va dans les css de l'histoire donc dans "Modifier la feuille de style de l'histoire" et on ajoute
#story {margin:0; padding:0;}
pour retirer les marges externe et interne du div #story, ainsi les images mises dans un passage collerons au bord haut de la fenêtre du navigateur, je pense que cela retire aussi la marge de gauche mais je ne sais pas si il y as un truc à gauche du passage qui aurai ses propre marge, je ne crois pas il faut tester
J'arrive après la bataille et je m'en excuse, j'espère que le sujet est toujours actif quand même. D'abord merci pour le tutos, ils sont vraiment sympas, bien fait et expliqué. J'aurais une question concernant les images/vidéos. J'aimerais créer une sorte de diaporama d'images et de petites vidéos (sorte gif mais au format mp4) et j'ai testé un code mais ils ne fonctionne pas, je n'ai qu'une vidéo qui s'affiche...J'avoue que je ne comprends pas trop le code et comment lui faire comprendre l'ordre de la série d'image/vidéo. Voici le code testé :
JAVASCRIPT :
window.onload = function ()
{
var imgs = ["Video1","Video2","Image1","Video3"],
image = document.getElementById("Video4"),
index = 0;
function hop () {
image.src= imgs[(index++)%imgs.length];
};
cool = setInterval(hop,6000);
};
----------------------------------------------------------------------------
DANS LE PASSAGE :
etc...
Les images doivent défiler en plein écran avec environ 5 secondes d'intervalle (ajustable selon durée des vidéos)
Merci pour vos réponses !
merci pour les compliments, et les discussion sont toujours ouverte pas de soucis.
alors pour la création d'un diaporama je ne suis pas certains que twine soit très adapté, je ne pense pas que l'on puisse jouer une vidéo pleins écran avec du HTML, on peux jouer des vidéo dans Twine ça pas de soucis, on peux forcer leur lecture dès le chargement et on peux changer de passage automatiquement après un temps définit mais enchainé les vidéos cela demande un peu plus de travail, après quel est le but du diaporama ? c'est pour illustrer un passage ? ou pour faire une page diaporama avec twine sans histoire autour ?
si c'est pour illustrer personnellement je ferai un montage vidéo de toutes les vidéos à passé pour avoir qu'une seule vidéo à jouer
sinon pour faire un diaporama je procéderai de cette façon je pense (je n'ai pas tester encore mais j'explique mon raisonnement)
je ferai un passage avec une série de conditions if et une variable
le passage vérifierai la valeur de la variable (0 au début) puis afficherai la première vidéo et augmenterai la valeur de la variable de 1 puis une fois un temps écoulé on recharge le même passage donc même série de condition mais cette fois la valeur n'étant plus 0 mais 1 c'est la seconde condition if qui est vrai et qui joue donc la seconde vidéo à et augmente encore de 1 la variable puis on recharge encore le même passage cette fois la variable vaux 2 donc c'est la condition suivante qui est vrai et qui joue la 3eme vidéo et augmente la variable encore de 1 et ainsi de suite... c'est un peu bourrin comme méthode mais c'est simple il faudrai que je teste mais je pense que cela marcherai ^_^
Merci pour les explications ! En fait le but du "diaporama" était de passer d'une vidéo à une autre sans qu'il n'y ait l'écran noir de chargement. Je pourrais faire une vidéo en une mais le soucis c'est qu'entre chaque séquence vidéo, il y a des images qui seront cliquable. En gros pour expliquer, ce sera une enquête, la vidéo et les images représente un bureau sur lequel il y a des éléments cliquable pour trouver des indices et à certains moment il y a des animations (comme par exemple un zoom sur un écran) d'où les courtes vidéos. Peut-être y'a-t-il tout simplement un moyen de faire cela sans qu'il n'y ait d'écran de chargement ? En utilisant la fonction replace ? Merci !
je ne pense pas que l'on puisse précharger les vidéos, le chargement est du au poids du fichier vidéo et de la vitesse de connexion je suppose
Enregistrer un commentaire