La Réalisation
Storyboard de l’épisode 2
La semaine dernière, Fred vous a parlé de ses réflexions à propos de l’opposition Flash/HTML5. Pendant cet article, il montrait déjà une photo du storyboard de l’épisode 2, que j’ai tenté de monter sous Flash, en test. Je vais vous parler aujourd’hui de cet essai, dont j’aborde justement la réalisation dans l’épisode de Changing Screens de Vendredi dernier! (Ainsi tout s’imbrique parfaitement! 😉 )
J’entame le story board en me disant que celui-ci va ma servir d’étalon pour tester le logiciel Flash et les premiers essais de turbomédia, dans une séquence entièrement statique: une discussion (l’opposé, donc, du premier épisode qui montre plutôt une séquence d’action). Je démarre par les crayonnés, mais contrairement au storyboard de l’épisode précédent, je détaille un peu plus, qu’il soit correctement lisible. (images a et b)
(image a)
(image b)
Il me semble intéressant de bien faire le lien avec la scène précédente, donc je montre un plan large du hangar des robots, avec de l’activité sur ceux-ci par des images verticales qui apparaissent progressivement: la forme verticale induit un clic rapide de la part du lecteur. Je fais rapidement aussi un Gif animé pour créer une animation de lien-apparition-de-case entre l’image 1 et la 3. En relisant, je me dis que le crayon à l’écran manque de lisibilité, donc je repasse prestement quelques contours au fineliner noir. (images c et d)
(image c)
(image d)
Comme l’ensemble de la séquence consiste en un lent travelling avant, de l’extérieur d’un bâtiment vers l’intérieur d’une pièce, j’opte pour un découpage très classique-BD: des cases juxtaposées. Les cases apparaîtront au fur et à mesure des clics du lecteur. Je pense aussi aux dialogues et à leurs apparitions suivant les clics, et donc décide de les écrire séparément. (images e et f)
(image e)
(image f)
Puis comme je viens de le dire, j’écris les dialogues sous forme de bulles simples, mais lisibles. À ce stade, je ne suis pas encore parfaitement familier avec le montage donc je pars sur du “tout fait-main”! (image g)
(image g)
Pour ce storyboard poussé, je travaille sur A4, en recto-verso (image h) et j’obtiens donc un découpage lisible et compréhensible. (image i)
(image h)
(image i)
Je décide donc maintenant -après un montage succinct des différents écrans dans Photoshop- de créer le turbomédia avec Flash: je galère, je bidouille, je ne réussi qu’à faire un diaporama simple, (cliquer sur les flèches pour avancer ou reculer) sans chercher la difficulté, vu le temps que je passe déjà dessus à comprendre le logiciel. Le résultat fonctionne, sans plus, c’est vrai. Mais la définition n’est pas bonne (ça c’est de ma faute), je ne peux l’utiliser qu’avec une souris et je ne peux pas le lire sur mon iPhone, ni sur l’iPad… Voyez vous-même le résultat de mon essai laborieux:
Devant ce résultat très moyen je tente d’utiliser notre logiciel maison pour en faire une version HTML5. Je commence donc par ouvrir le dossier contenant les images (image j), puis les sélectionne toutes en ayant précédemment nommé ces images pour les mettre dans l’ordre d’apparition. Même le Gif animé. (image k)
(image j) (image k)
Je fais glisser ces images dans la barre de traitement (image l) puis finis de vérifier l’ordre des écrans avant d’exporter le résultat! (image m)
(image l)
(image m)
Voici le résultat, avec notre lecteur maison qui permet de lire en plein écran et d’utiliser le clavier pour passer d’un écran à l’autre:
La semaine prochaine, la suite de la réalisation du Turbomédia!
Merci pour le comparatif! Il n’y a pas photo!
Oui, hein? 🙂