/message30101940t.mp3

  • Lancement du premier épisode de la BD en ligne « Le Portrait d’Esther », « une bande dessinée numérique de Romain Bonnin et Pierre Jeanneau », consacrée aux biens juifs spoliés durant la guerre, pour le compte des Musées d’Angers :
    http://portrait-esther.fr

    C’est évidemment du #SPIP #HTML5 #responsive. Mais la grosse nouveauté ici, c’est la gestion d’une bande dessinée animée (« turbomedia », mélange de BD statique et d’animation) avec un outil que j’ai développé.

    Le principe de cet outil est de permettre d’ajouter des « scènes » (ou des « cases » si c’est une BD) dans les articles de SPIP, et à chaque scène d’ajouter (par glisser-déposer) des « couches » qui s’empilent les unes au-dessus des autres (façon Photoshop). Ça donne par exemple ce genre d’interface :

    La scène a une durée qui définit la durée des animations de l’ensemble des couches. Chaque couche a une situation de départ et une situation finale, le système fera l’animation en interpolant entre le départ et l’arrivée, éventuellement avec un délai défini pour chaque couche (par exemple l’apparition de plusieurs phylactère les uns après les autres).

    Les éléments qui peuvent être animés sont : position horizontale, position verticale, zoom, flou, opacité, visibilité.

    C’est très succinct parce que l’idée n’est pas de faire un outil d’animation de dessin animé, mais d’animer les scènes dessinées par l’illustrateur. C’est donc un outil conçu pour être simple pour que le dessinateur puisse lui-même concevoir les animations. Mais c’est déjà à mon avis plus amusant que les outils de « turbo-media » que j’ai vus pour l’instant (qui sont plutôt une succession d’images façon « click-click-click »).

    Bon, ce premier épisode n’est pas encore extrêmement animé, ce que j’ai vu de l’épisode II l’est déjà plus. On est en train d’apprendre ce qu’on peut faire avec l’outil (« nous » étant le dessinateur, le scénariste, Mosquito et moi) et quel équilibre trouver entre la narration « classique » et l’animation.

    Avec Emmanuel, on est très curieux d’avoir des retours là-dessus, des idées, tout ça. On se dit qu’il y a des choses intéressantes à faire avec ça, mais on n’a pas encore les idées très fixées.

    Sinon, un détail rigolo, c’est la première fois qu’on utilise mon réglage « Ken Burns » sur une image intégrée dans l’article. Ici sur le portrait de Pétain, effet de zoom lent :
    http://portrait-esther.fr/article11.html
    Le raccourci pour faire ça est :
    <img11|right|large|largeur=360|kenburns=1.4>

    • ça marche super bien, sur la bédé, les petites ruptures, les petits déplacements et décalages, l’arrivée des bulles dans un second temps.

      J’ai remarqué qu’en grand (grand) écran, le temps de chargement des images fait qu’on a d’abord l’image floue pendant un délai trop long… tu devrais peut-être précharger ?

      PS : pense à régler le favicon

    • Superbe !

      Pas de problème avec Chrome (47 me dit gg) que j’ai ouvert parce que j’en avais avec Safari (un vieux, 6.1.6, le tout sous MacOS 10.7.5) chargement un peu long, parfois affichage partiel de l’image).

      Du point de vue de l’interface, ce serait bien que le lecteur puisse savoir a priori s’il y a une animation ou pas.

      Dans les 2 environnements, je n’ai pas d’image du maréchal :-(
      Heureusement, j’ai (un bout) du son
      http://www.marechal-petain.com/sons/message30101940t.mp3

    • @azerttyu Oui, la présentation « mode planche », c’est une idée à développer.

      Je l’avais proposé, mais ce projet-là ciblait spécifiquement les téléphones portables, en fait. Du coup pas de mode planche. De plus, on se tâtait pour introduire différentes sortes de transitions entre les planches : actuellement c’est un fondu enchaîné, mais on se disait qu’on pourrait avoir différents effets (slide vers la gauche, slide vers le bas…). Et dans ce cas, le mode planche pouvait entrer en conflit avec des enchaînements de cases plus spécifiques (genre : on prévoit un slide vers le bas pour passer à la case du dessous, en utilisant un élément commun aux deux cases, histoire de faire un effet marrant, mais quand on passe en mode planche l’effet est tout cassé…).

      Bref : sur ce projet on l’a écarté, mais c’est tout de même quelque chose à voir.

    • @simplicissimus Il y a une petite animation (très discrète) en haut au centre de l’écran qui dure le temps que se déroule l’action. Pas d’animation si pas d’action.

      C’est pas super-visible, parce que sinon ça devient trop envahissant au détriment de la lecture de la BD. (Surtout sur un téléphone portable, on est quasiment sur le dessin.)

    • Superbe ! Nickel sur Chromium mais même souci que fil et intempestive sur Firefox (c’est super lent et je n’ai pas l’animation qui indique que ça charge) (Firefox à jour sur OSX).

    • Super intéressant ! Je serais curieux de voir l’outil côté privé.

      Pour avoir participé à une expérience turbomédia de mon côté je suis très curieux de voir apparaître ce genre d’outil, et sous spip en plus !

      Par contre comme il a été dit, j’ai buté de première abord sur le préchargement trop long, je ne sais pas si c’est prévu mais j’ai démarré sur mon ordi en plein écran directement et les anims saccadent bien chez moi... Je dois tester sur mon smartphone pour voir ce que ça donne.

      Niveau narratif je trouve les fondus pesants et inutiles. C’est un code cinématographique particulier qui marque l’ellipse, le passage d’une période à une autre... Donc, restons simple !!

      Avec ma petite expérience je peux confirmer que ce mode de lecture (le turbomédia et toutes ses formes) pousse le lecteur à cliquer assez rapidement (et c’est bien addictif pour le coup). Il faut donc impérativement que la machine suive et toute attente pour cause de chargement devient insupportable (si on reste dans l’esprit du turbomédia). La règle est qu’une anim ne doit pas dépasser 3 secondes dans ce cadre, c’est le max avant le prochain clic.

    • Très intéressant mais je ne sais pas si je profite de tout. Techniquement
      J’ai un vieux mac en 10.6.8 dont le processeur a crié très fort avec !
      – Firefox 43.0.4 ça bloque sur le premier écran qui reste en fond noir et où rien n’est cliquable.
      – Safari 5.1.10 c’est mieux mais les fondus sont par à-coups.
      – Opéra 12.16, le menu en colonne gauche reste ouvert et ça fait des sauts, le panneau en glissé horizontal n’existe pas (41).
      – Chrome, ok.

      Je suis curieuse du processus mais j’ai pourtant quelques critiques. Je comprends que c’est l’effet expérimental qui fait qu’entre BD/Animation/Internet/Interactivité/Films muets/ ça fait beaucoup à connaitre comme codes narratifs qui s’entrechoquent (6) mais je trouve pas ça très étonnant au final, comme si un code annulait l’autre. Il ne doit pas être facile que les « animations » soient pertinentes pour éviter notamment le renforcement de la linéarité du récit (un comble sur du numérique) comme avec une deuxième case qui est noire puis se remplit après (31). Le mode de lecture restreint l’action du lecteur au clic avancer/reculer, il pourrait cliquer pour autre chose peut-être ? Concernant les fondus, je me souviens que dans le montage film certains monteurs interdisaient d’utiliser les fondus de façon systématique parce que c’est trop facile et que ça ramollit, mais j’ai l’impression que c’est dut à mon ordi qui passe les panneaux en fondus. Une des scènes que je trouve la plus réussie est celle (70-73) où Jakob doit prendre la décision de se séparer du tableau.

      Ah, et aussi ce serait chouette d’avoir la possibilité de rejouer une animation avec un bouton recharger.

      Merci en tout cas de faire toutes ses recherches, j’avais abandonné avec regrets Director et Flash parce qu’ils ne correspondaient pas à une ligne politique aussi intéressante que celle de SPIP et j’espère retrouver des envies grâce à tes nouvelles idées !

    • il a fallut que je m’y reprenne à plusieurs fois pour que tout charge. J’avais l’impression à vos commentaires que je loupais quelque chose. Ce qui est perturbant c’est que je ne sais pas quand il faut que j’attende que ça charge ou quand je peux avancer dans l’histoire car c’est une image seule... J’ai aussi des pages blanches, je ne sais pas si c’est fait exprès. Puis cela clignote à partir des pages 68/69. A lire les posts précedents, il doit y avoir du son, que je n’ai pas. Je suis sous firefox 43.0 sous linux mint.