20 – La réalisation – partie 13 : Storyboard épisode 2

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! 😉 )

art24 image f

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)

art24 image a

(image a)

 

art24 image b

 (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)

art24 image c

(image c)

 

art24 image d

(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)

art24 image e

(image e)

 

art24 image f

(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)

art24 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)

art24 image i

(image h)

 

art24 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:

Votre navigateur ne prend pas en charge Flash 

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)

art24 image j        art24 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)

art24 image l

(image l)

 

art24 image m

(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:

écran d'accueil Test épisode2 storyboard

LIEN VERS LE TURBOMEDIA

La semaine prochaine, la suite de la réalisation du Turbomédia!

2 commentaires sur “20 – La réalisation – partie 13 : Storyboard épisode 2

Laisser un commentaire

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