Nous venons de peaufiner le bateau en apprenant à utiliser l'outil Dégradé.
Dans cette vidéo, je vais vous montrer comment créer rapidement un effet d'éclair dans Photoshop, l'importer dans Animate via les bibliothèques Creative Cloud et finaliser le tout en appliquant des effets de couleur.
C'est parti !
Je commence par lancer Animate.
Avant de concevoir un effet d'éclair pour l'animation, je dois déterminer la taille du document à créer.
Je vais pour cela vérifier la taille de la scène de l'animation.
Je choisis Modification > Document (Cmd + J).
Ce champ indique que la taille de la scène est de 640 x 480 pixels.
La taille du document de l'éclair doit donc être au moins égale à celle de la scène.
Je clique sur OK.
Je passe dans Photoshop et j'ouvre un nouveau fichier en choisissant Fichier > Nouveau.
Vous pouvez le faire également chez vous, c'est très facile.
Je définis une largeur de 700 pixels, une hauteur de 500 pixels, et je clique sur OK.
N'oubliez pas, le document doit être légèrement plus grand que la scène.
À présent, je vais définir les couleurs par défaut en cliquant ici ou en appuyant sur la touche D.
Le noir et le blanc seront les couleurs par défaut.
J'active l'outil Dégradé ou j'appuie sur la touche G.
Le dégradé ira du noir au blanc, comme vous pouvez le vérifier en cliquant ici : « Noir, blanc », c'est bien un dégradé du noir au blanc.
Je clique sur OK et je fais glisser de la gauche vers la droite de la scène.
J'ouvre le menu Filtre… Filtre > Rendu > Nuages par différence.
Ensuite, je choisis Image > Réglages > Négatif, ou j'appuie sur Cmd + I.
Je rouvre le menu Image > Réglages > Niveaux, ou j'appuie sur Cmd + L.
Dans le panneau Niveaux, je clique sur le point de réglage gris et je le fais glisser vers la droite, mais pas complètement.
Je reviens un peu à gauche pour voir l'éclair et quelques nuages.
Comme ça, c'est parfait.
Si cela ne vous plaît pas, vous pouvez répéter la procédure autant que vous voulez.
Vous obtiendrez un éclair différent à chaque fois et un résultat très naturel.
Je clique sur OK.
Je peux ensuite appuyer sur Cmd + U ou choisir Image > Réglages > Teinte/Saturation.
Je coche la case Coloriser et j'ajoute une teinte bleue proche de la couleur du ciel, comme ceci, et je clique sur OK.
L'éclair est terminé.
Je dois maintenant l'importer dans Animate.
Je pourrais choisir Fichier > Exportation > Enregistrer pour le Web, enregistrer l'éclair dans un fichier, passer dans Animate et l'importer, sélectionner le fichier, l'ouvrir, etc.
Mais pourquoi faire tout ça ?
Il est plus rapide et efficace d'utiliser la bibliothèque Creative Cloud.
Dans le menu Fenêtre de Photoshop, j'ouvre le panneau Bibliothèques, qui affiche la bibliothèque Creative Cloud.
J'ai déjà un dossier pour Animate.
Vous pouvez, de votre côté, créer facilement de nouvelles bibliothèques en cliquant sur ce menu et en sélectionnant Créer une bibliothèque.
Il est super facile d'ajouter des éléments dans une bibliothèque.
Je peux faire glisser un calque directement dans la bibliothèque pour le synchroniser avec mes bibliothèques Creative Cloud.
Avec l'outil Déplacer, je peux aussi faire glisser un élément de la scène dans la bibliothèque.
J'ai ainsi deux instances de l'éclair à utiliser dans mon animation.
Pour supprimer un élément, rien de bien compliqué non plus : je le sélectionne et je clique sur la corbeille.
Je peux à présent passer à Animate, cliquer sur le menu Fenêtre et ouvrir les bibliothèques CC.
Tout le contenu de ma bibliothèque est accessible depuis l'ensemble des applications Adobe Creative Cloud.
C'est formidable.
Je clique sur l'éclair et je le fais glisser dans la scène.
Une boîte de dialogue d'importation s'ouvre.
Je peux choisir d'importer l'éclair sous forme d'image bitmap aplatie ou, en activant cette option, de le placer dans un symbole.
C'est ce que nous allons faire.
Cliquez sur OK.
Parfait.
L'éclair apparaît maintenant dans la scène, à l'intérieur d'un symbole de clip, et un calque d'arrière-plan intitulé Background a été créé dans la scène.
C'est le nom du calque que j'ai ajouté dans la bibliothèque Creative Cloud depuis Photoshop.
Je vais changer son nom.
Je double-clique, je tape « Lightning » et je le fais glisser entre les calques « boat » et « sky ».
Attention, le calque est guidé : il apparaît en retrait et dépend désormais du guide.
Or, ce n'est pas du tout ce que je veux.
Je clique avec le bouton droit sur le calque, j'affiche ses propriétés, je remplace Guidé par Normal et je clique sur OK.
Voilà, il n'est plus en retrait, c'est un calque normal.
Autre technique : je le fais glisser sous le calque « sky » et je déplace ce dernier après le calque « Lightning », ce qui ne modifie pas son type.
Ensuite, je clique ici sur l'éclair et j'ouvre le panneau Aligner, dont le raccourci est Cmd + K.
Je m'assure que la case Aligner sur la scène est cochée et je clique ici pour aligner l'éclair horizontalement et verticalement.
Je vais à présent dans la bibliothèque où je vois que l'importation de cette ressource depuis la bibliothèque Creative Cloud a également créé un dossier « Background.psd Asset », qui contient le bitmap « Background », ainsi que le nouveau symbole « Background », que je renomme également « Lightning » pour qu'il soit plus facilement identifiable.
Tout est prêt pour créer l'effet d'éclair.
Je commence par faire glisser la première image clé du calque « Lightning » pour qu'il n'apparaisse pas avant 45 images, soit environ deux secondes.
L'image 1 contient une image clé vide.
Si je parcours le scénario, arrivé au niveau de la 45e image, la foudre s'abat.
Nous allons donc maintenant appliquer un effet de flash.
La foudre s'abat, immédiatement suivie d'un flash blanc.
Trois images plus loin, je clique avec le bouton droit et j'insère une image clé.
Je clique sur l'instance dans la scène pour actualiser les propriétés et afficher la section Effets de couleur.
Je sélectionne le paramètre Teinte et le blanc, avec une opacité de 100 %.
L'effet Teinte permet d'appliquer une couleur selon un pourcentage donné.
Utilisez les effets de couleur avec parcimonie, car la plupart ne sont pas compatibles avec les fichiers Canvas.
Nous nous contenterons d'utiliser le blanc et la transparence alpha.
Cette teinte de blanc reste donc affichée pendant deux images.
Sur la troisième, je vais créer une autre image clé.
Au lieu de cliquer avec le bouton droit, je clique sur la nouvelle icône Insérer une image-clé, ce qui ajoute directement une image clé.
Je clique sur l'image clé et au lieu de cliquer sur l'instance dans la scène, je peux sélectionner l'onglet Objet du panneau Propriétés.
Je remplace Teinte par Aucun pour afficher de nouveau l'éclair.
On a donc successivement l'éclair, le flash blanc, puis à nouveau l'éclair.
J'aimerais que cet éclair soit encore plus réaliste.
Mais je ne veux pas en créer un nouveau ni importer d'autre bitmap.
Je pourrais tout simplement essayer de transformer celui-ci.
Je clique avec le bouton droit sur la scène et je choisis Transformer > Retourner horizontalement, ce qui donne un éclair différent.
Sur l'image suivante, je vais ajouter une image clé pour modifier la durée.
J'insère l'image clé, je retourne dans le panneau Objet et je resélectionne la teinte blanche.
J'ai donc deux images d'éclair, deux images de flash blanc, puis une image d'éclair et une image de flash blanc.
Juste après, je choisis la commande contextuelle Insérer une image-clé vide.
Voyons ce que ça donne.
Je clique sur le bouton Lire pour lancer l'animation.
L'effet d'éclair est assez réaliste !
Je vais essayer d'ajouter un autre effet de flash, peut-être un peu plus loin.
J'aurai ainsi les deux premiers flashs, une pause, puis à peu près à cet endroit, une nouvelle image clé.
Pour cela, je peux sélectionner des images clés qui existent déjà : les deux premières images de l'éclair et les deux suivantes de l'effet de flash blanc.
Les quatre images étant sélectionnées, je maintiens la touche Option enfoncée et je fais glisser les images de cet éclair au niveau de l'image 75.
Pour obtenir un rendu différent, je clique sur l'image de l'éclair, je clique avec le bouton droit sur la scène et cette fois-ci, je choisis Transformer > Retourner verticalement.
À présent, l'animation semble contenir trois éclairs différents : un premier ici, un deuxième là, qui est différent, et un troisième ici.
Regardons l'animation.
Parfait !
Cet éclair pourrait même durer une image de plus pour encore plus de réalisme.
Cet éclair couvre deux images, celui-ci n'en couvre qu'une seule, et le dernier en couvrira trois.
Si je place le pointeur dans la partie supérieure du scénario, je peux insérer une image en appuyant sur F5.
L'éclair s'affichera à présent durant trois images avant l'effet de flash blanc.
Voyons ce que ça donne.
Parfait.
L'éclair varie à chaque fois : parfois il zèbre le ciel, parfois il produit un flash instantané, ce qui lui confère bien plus de réalisme.
Il reste un dernier détail.
Le ciel pourrait s'assombrir juste avant que l'orage n'éclate.
Pour cela, je sélectionne le calque d'arrière-plan « Sky ».
Si je clique sur la scène, vous voyez qu'il s'agit toujours d'un bitmap.
On va donc le convertir en symbole.
L'objet étant sélectionné, je choisis Modification > Convertir en symbole.
Je le nomme « Sky » et je clique sur OK.
Un message m'indique que ce nom est déjà utilisé.
J'ajoute un tiret à la fin du nom.
J'aurai donc un bitmap nommé « Sky », et un symbole « Sky- ».
Je clique sur OK.
« Sky- » étant un symbole, je peux lui appliquer des effets de couleur.
Environ une seconde avant que la foudre ne s'abatte, je vais créer une image clé à l'aide du nouveau bouton Insérer une image-clé : un simple clic, et le tour est joué.
Plus loin dans le scénario, aux alentours de ce point, j'ajoute une autre image clé.
Je crée une interpolation classique entre les deux, via le menu contextuel.
Je souhaite agir sur la teinte du symbole.
J'aimerais la changer afin d'obtenir un gris foncé, avec une opacité moindre.
Le problème, c'est que cela ne marchera pas avec un fichier Canvas.
Mais j'ai une solution.
Si je sélectionne l'option Alpha, l'opacité du ciel diminue progressivement, ce qui a pour conséquence de l'éclaircir.
Or, ce n'est pas ce que je veux.
Mais si je désactive la visibilité du ciel, il ne reste plus qu'un fond blanc que je peux modifier en l'assombrissant.
Je choisis Modification > Document et je sélectionne un gris foncé pour la couleur de la scène.
Je clique sur OK.
À présent, si je réactive la visibilité du ciel, à mesure que la transparence alpha diminue, le ciel s'estompe et laisse apparaître l'arrière-plan gris foncé.
Je vais choisir un gris plus foncé.
C'est mieux.
Le ciel semble s'assombrir progressivement, comme si le temps se couvrait… Et la foudre s'abat.
On va créer l'effet inverse à la fin.
Juste après l'éclair, à cet instant, la lumière du soleil réapparaîtra.
Le calque « Sky » étant sélectionné, j'ajoute une image clé.
J'avance dans le scénario et j'en ajoute une autre.
Je crée une interpolation classique entre les deux via le menu contextuel et je modifie la seconde image clé.
Dans l'onglet Objet, je passe du paramètre Alpha à Aucun.
L'animation passe donc d'un temps ensoleillé à un temps couvert… Et la foudre s'abat deux fois.
On va à présent tester l'animation pour voir le résultat.
Euh… Houston, on a un problème !
Aucun flash blanc n'est visible dans l'animation, en raison du problème d'exportation des effets de couleur avec HTML5 Canvas.
Pour contourner ce problème, je vais dans la bibliothèque et je duplique le symbole « lightning ».
Je le nomme « lightning copy ».
Si je permute ce symbole dans le panneau Propriétés, je peux le remplacer par la copie.
Idem pour celui-ci, je remplace l'éclair d'origine… par sa copie.
Et le dernier.
Je clique sur la scène et je remplace le symbole par la copie.
Et j'appuie sur Cmd + Retour.
C'est terminé.
L'utilisation de deux instances différentes résout le problème.
Dans la vidéo suivante, nous ajouterons du son.
À bientôt !
