Cette entrée a été publiée dans Toile infinie le par .
apercu2

La Toile Infinie de Scott MacCloud

La toile infinie, concept de BD numérique proposé par Scott MacCloud depuis des années, consiste à utiliser l’espace de l’écran comme une page qui peut prendre la taille et la forme désirée. Finie la contrainte de la feuille A4, les cases peuvent se succéder en ligne droite pendant très longtemps, ensuite pourquoi pas tourner vers le haut etc.

Mais concrètement, comment s’y prendre, comment mettre en ligne une page facilement explorable ?

J’ai testé ça sur une BD où l’on suit les déplacements des personnages dans un décor, mais on peut tout à fait appliquer ces systèmes pour une BD avec des cases.

Je vous propose plusieurs solutions, suivant l’effet désiré et le support utilisé :
1. LE PLAN GENERAL + ZOOM
2. COMICS COMPOSER
3. LE ZOOM SIMPLE

- SOLUTION 1 : LE PLAN GENERAL + ZOOM.

Aperçu ci-dessous, Ici en plein écran.

LE PRINCIPE : Sur un ordinateur classique, le déplacement vertical dans une page web est facile, mais le déplacement horizontal est difficile. Pour remédier à ce problème, une solution consiste à utiliser le zoom : la BD apparaît en entier à l’écran en très petit et la lecture se fait dans une fenêtre de zoom au niveau de la souris.

LA REALISATION :Pour obtenir ce résultat, vous devez avoir un hébergement web et y mettre dans un même dossier votre image avec votre page html et les deux fichiers javascripts que vous pouvez trouver ici et ici. Dans la page html, il faudra insérer les codes suivants dans la balise <head> :

<script type="text/javascript" src="zoom.js"></script>
 <script type="text/javascript" src="ddpowerzoomer.js"></script>
 <script type="text/javascript">
 jQuery(document).ready(function($){ //fire on DOM ready
 $('#myimage').addpowerzoom()
 })
 </script>

et dans la balise <body> :

<img id="myimage" src="le nom de votre fichier pour moi toys.png" 
alt="tjpzoom picture title" href="de nouveau le nom de votre fichier" 
style="width:100%" />

Et voilà, donnez l’url de la page html à vos lecteurs et c’est parti !

Ces codes sont basés sur des programmes du site www.dynamicdrive.com/ (à voir, il y a plein de codes intéressants).

- SOLUTION 2 : COMICS COMPOSER.

Aperçu ci-dessous, Ici en vrai.

LE PRINCIPE : On utilise ici un sens de lecture original, le lecteur peut être un peu perdu, il peut éventuellement intéressant d’utiliser le logiciel « comics composer » qui permet de créer une lecture animée, la lecture est plus facile, mais le lecteur est aussi plus passif.

LA REALISATION : La création se fait donc via le logiciel comics composer, vous pouvez trouver deux bons tutoriels sur le site esprit bd ici et ici.

- SOLUTION 3 : LE ZOOM SIMPLE (tablettes et smartphones).

Aperçu ci-dessous, Ici en plein écran.

LE PRINCIPE : Pour la lecture sur les supports tactiles, on peut simplement faire confiance à la technologie et proposer l’image grand format telle quelle et laisser le lecteur explorer et déplaçant et zoomant avec ses doigts. C’est la solution que je préfère avec mon parcours fléché sur le principe du jeu de piste, mais elle fonctionne à la seule condition que le lecteur ait la possibilité de se déplacer facilement dans l’image. Malheureusement pour un ordinateur classique, je n’ai pas trouvé de code pour permettre au lecteur de faire un cliquer-déplacer comme dans googlemap. Si vous en connaissez un, prévenez-moi que je complète l’article.

LA REALISATION : mettez simplement votre image en ligne. L’exemple ci-dessus appelle l’image par le code suivant :

<iframe src="adresse de mon image" height="340" width="600" frameborder="no" 
scrolling="yes"></iframe>

Et voilà pour aujourd’hui, j’espère que vous trouverez la solution qui vous convient et que ce tutoriel a pu vous aider.

A la prochaine.
Galax

3 réflexions au sujet de « La Toile Infinie de Scott MacCloud »

  1. Tony

    Là aussi j’ai proposé un outil similaire, mais plus pratique: une div avec des ascenseurs. On peut donner la dimension qu’on veut à la div (y compris, donc, la taille de la fenêtre). On peut aussi positionner l’image pour faire démarrer l’histoire n’importe où, par ex en plein milieu de la planche.

    Bref, je me dis qu’on devrait se rencontrer pour parler de tout ça!

    Répondre
    1. gaillotfrancois2401 Auteur de l’article

      Pour cette BD, j’aurais vraiment aimé proposer un cliquer-glisser pour se déplacer comme dans google maps vu qu’on est sur un système de carte à explorer, mais je n’ai pas trouvé le code idéal.

      Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>