[Documentation] Créer un effet de lueur sous Photoshop et animé avec Flash

Les sites web animés sont maintenant monnaie courante sur la toile, avec la démocratisation de l'ADSL et le haut débit qui va avec, nous avons la possibilité de donner à nos visiteurs des sites avec des animations très perfectionnées et un superbe rendu.

Nous allons apprendre à réaliser un effet de lueur en utilisant à la suite le logiciel Photoshop et le logiciel Flash MX pour créer l'animation.
La réalisation de cet effet est assez simple et ne demande qu'un masque et un dégradé de couleur linéaire (radial de préférence), cette documentation est donc accessible au débutant.

Partie Photoshop

1 - Créez un document de 800x600 et tracez un dégradé linéaire vertical, partant du clair au foncé sur votre premier calque.

2 - Ensuite créez un nouveau calque, et retracez un dégradé linéaire vertical, mais cette fois le gris clair doit être un peu plus clair, et le foncé un peu plus foncé ...

3 - En étant sur ce nouveau calque, sélectionnez le rectangle de sélection et commencez à découper ce dégradé en petit morceaux, comme sur l'image ci-dessous.

Si j'ai mis des flèches, c'est pour vous montrer que les bords sont + découpés que le centre, en avançant dans le tutoriel vous allez comprendre pourquoi.

4 - Maintenant que c'est fait, tout ce que vous devez faire, c'est sélectionner ce calque, puis aller dans BarreMenu > Edition > Tranformation > Inclinaison , sélectionnez les coins supérieurs gauches et droits, et descendez les pour que cela crée une profondeur, et puis rentrez les coins dans le milieu, comme sur l'image ci-dessous :

5 - Maintenant, rappelez vous que je vous avais dis de + découper les bords que le centre, en fait on va effacer quelques petits rectangles ... le moyen le + rapide de le faire est de sélectionner la baguette magique (sur tolérance : 32) et effacer les petits carreaux pour former une espèce de pyramide, ensuite rajoutez une simple ombre portée, de distance 0 et taille 20.

6 - Maintenant l'opération que vous devez faire peut être un peu difficile ,mais il suffit juste de suivre les étapes :

A - En étant sur le calque des petits carreaux inclinés, maintenez la touche CTRL et cliquez sue votre calque dans la palette calques, remarquez qu'en survolant calque et en ayant la touche CTRL enfoncée, la petite main a un rectangle de sélection sur elle.

B - Maintenant, sans desélectionner, aller sur l'outil de rectangle de sélection, puis faites un deuxième click sur votre sélection et cliquez sur Intervenir, ceci va inverser votre sélection .

Pourquoi j'ai fait ça ? En inversant la sélection, les zones vides pourront être remplies,et elles nous serviront de masque dans flash.

7 - Maintenant, sans désélectionnez, créez un nouveau calque, puis remplissez ce calque de noir, étant donné que la sélection sera encore la, ça remplira l'intérieur et la partie haute de votre image.

8 - Donc, nous, tout ce qu'on a besoin c'est l'intérieur des petit carreaux, alors on va effacer tout ce qui ne sers à rien, vous pouvez le faire avez l'outil Lasso Polygonal.

Il suffit d'effacer les zones que j'ai tracées :

Voila en masquant les autres calques, vous voyez ce que ça donne:

Vous pouvez toujours rajouter un nouveau calque et retracer un dégradé allant du noir au blanc pour créer l'effet du haut, qui disons sert de "fond".

9 - La on va pouvoir enfin passer à Flash, mais avant de faire ça, on va réduire la taille de la zone de travail et exporter nos images.

-> Donc l'image est en 800 x 600 ...ce qui est trop, on va aller dans BarreMenu > Image > Taille de la zone de travail, et faire en sorte que ca ressemble a ça :

J'ai passé en 800x250 et cliqué sur la flèche de bas, comme ça mes calques s'alignent sur le bas

10 - Maintenant on va exporter nos calques !

A - D'abord vous masquez le calque qui se trouve tout en haut, c'est-a-dire le calque qui nous servira de masque dans Flash, et vous savez en JPG ...nommez le "fond".

B - Ensuite vous faites l'inverse, donc vous masquez les calques de fond, et vous affichez seulement le calque qui nous servira de masque dans Flash.

C - Sauvez celui-ci en PNG,et nommez le "masque".

Partie Flash

1 - Voila, maintenant dans Flash ça va aller assez vite, d'abord on va régler les dimensions de l'image sur 800x250 et mettre en 24 images/seconde (à moins que vous voudriez autre chose) Vous importez vos 2 images sur 2 calques différents, faites en sorte que le fond sois en dessous du calque qui servira de masque ....

Maintenant, ce qu'on a importé à partir de Photoshop doit être le masque, l'image est un PNG transparent, mais flash ne prends pas en compte cela, donc si vous créez un masque avec cette image, les zones transparentes il les comptera comme opaques car flash est un programme vectoriel, ce qu'on va devoir faire, c'est transformer cette image en forme vectorielle, pour faire cela, on va devoir tracer ce bitmap.

2 - En étant sur le calque qui nous servira de masque, allez dans BarreMenu > Modification > Tracer le bitmap ,et ajustez les options comme je l'ai fait :

Remarque : Si vous distinguez des zones grises apparaitre dans le centre, effacez les manuellement.

3 - Maintenant, sélectionnez ce calque et tapez F8 pour le transformer en symbole, une fenêtre apparaitra,choisissez le comportement CLIP.

4 - Double cliquez sur ce symbole, ça va entrer à l'intérieur de celui-ci, ensuite créez un nouveau calque et passez le en dessous du calque de la forme qu'on à vectorisé.

Remarque : Il est préférable de verrouiller ou masquer le calque de la forme vectorisée pour qu'elle ne nous gènes pas.

5 - Sélectionnez le calque vide qui se trouve en dessous,et créez une ovale (rond) assez grande en longueur pour qu'il dépasse la taille du masque (effacez le contour de l'ovale).

Sélectionnez votre ovale et allez dans BarreMenu > Fenetre > Melangeur de couleurs > Texte italique, mettez le type de remplissage sur radial, et rajoutez une couleur dans la barre de dégradés.

Faites en sorte que les réglages soient comme sur l'image Image:

Le but est de rendre le dégradé transparent sur les bords ce qui va créer un effet de lumière pendant son mouvement.

6 - Maintenant on va créer une simple interpolation de forme pour créer l'effet, sur la première image clé, soyez sur que votre ovale est en dehors de la zone de travail à gauche, avancez à 80 images sur la ligne de temps, et cliquez sur F6 pour insérer une image clé, déplacez votre ovale en dehors de la zone de travail, mais à droite.

Cliquez sur la première image de votre ligne de temps, et dans les propriétés, réglez l'interpolation sur forme.

7 - Maintenant, la dernière étape qui est assez simple, déverrouillez ou démasquez votre calque du "masque",faites un deuxième click sur le calque à partir de la ligne du temps,et choisissez masque, ceci va transformer votre forme en masque et l'ovale radial en masqué.

Résultat

Voila, fin du tutoriel .... voilà ce que j'ai obtenu ( cliquez ici ) et c'est horrible...

Enfin c'est pas assez travaillé, alors prenez votre temps, bonne chance.

(Merci à DxS pour la rédaction de cette documentation)