Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Maîtrise des dégradés sous Flash

Compatible Flash CS3. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS4. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS5. Cliquer pour en savoir plus sur les compatibilités.Par abriko (Boué Maxime), le 21 novembre 2011

Je vous propose de découvrir les possibilités de l’outil Dégradé dans Flash CS5. Ces techniques sont disponibles dans Flash CS4&5 et ultérieur. Il s’agit ici d’utiliser un outil très simple allié à des techniques créatives très faciles et rapides à apprendre mais qui vous offriront des possibilités sans limite. L’outil dégradé dans Flash est méconnu, j’ai bien cherché sur internet et je n’ai vu aucun tutoriel abordant les fonctions poussés des dégradés que bien d’autres logiciels graphique peuvent envier cet outil à Flash. Flash est un outil, il n’est limité que par l’utilisation qu’on en fait. Voyons donc les dégradés!

Prérequis

Aucune compétence requise. Si besoin vous pouvez visionner cette petite vidéo (attention il s'agit d'une version antérieure de flash, la présentation du panneau des dégradés a changé): http://ressources.mediabox.fr/tutoriaux/flashplatform/affichage/graphisme/ide/degrades_dans_ide_demo

Les basiques

Ici le texte du Chapitre 1

Passons rapidement sur les basiques, vous pouvez les voir dans la doc flash et sur des centaines que dis je des milliers de sites, podcast ou livres.

Tous les paramètres du dégradé se trouve dans le panneau «Couleur» Sélectionnez «Dégradé linéaire» dans le menu déroulant. Là apparaît en dessous des paramètres de couleur ce que j’appellerai «l’aperçu du dégradé». Ici un dégradé basique du Rouge vers le noir.

-Vous pouvez voir les couleurs utilisées grâce au curseur en dessous de l’aperçu. 
 -Cliquez sur un curseur pour le sélectionner et en changer la couleur comme vous le souhaitez à l’aide des différents paramètres de couleur au dessus. Je ne vais pas m’attarder dessus. Vous allez voir que la couleur n’est pas le centre de préoccupation de ce tuto et il s’agit d’un basique. Si vous débutez, cliquez un peu partout, vous allez vite comprendre.


-Vous pouvez déplacer les curseurs de droite à gauche et ainsi modifier le dégradé lui même.

-Si vous cliquez en dessous de cette aperçu, entre les curseurs, vous créez un nouveau curseur que vous pouvez modifier à son tour et déplacer. Vous pouvez compliquer le dégradés en en ajoutant jusqu’à 15.


-Important: chaque curseur possède sa couleur mais aussi son Alpha. Le paramètre Alpha se situe en bas à droite des paramètres de couleur. Il permet de rendre la couleur sélectionnée plus ou moins transparent. 100% la rend opaque, 0% rend la couleur complètement transparente.



Si vous n’êtes pas familier avec ces basiques, amusez vous un peu avec car cela va aller très vite ensuite !

- Le dégradé, tout comme les autres formes de remplissage s’applique sur une forme ou sur un contour.


- Pour faire nos expérimentations, créez un carré. Si votre dégradé est sélectionné alors le carré a été rempli par défaut avec le dégradé.

Un dégradé se compose de plusieurs choses:

1- la position et le nombre des curseurs de couleur

Dans ce tuto, j’afficherai juste un aperçu du dégradé à chaque changement de dégradé comme celui ci:


Ex: un rouge opaque et un noir opaque à chaque extrémité.



Ou celui ci:

Ex: un rouge opaque et un noir transparent à droite. Le noir ne se voit pas sur le curseur mais le travail n’est pas sur les couleurs elle même mais sur les dégradés donc peu importe. 
 Important : retenez seulement que même si une couleur est transparente, elle influe grandement sur le rendu du dégradé car elle se mélange petit à petit avec la couleur la plus proche. Ici le rouge se transforme petit à petit en noir transparent. Le rendu sera très différent que si le rouge se transforme petit à petit en rouge transparent.

2- le type de flux

Le flux que vous trouvez juste en dessous du menu déroulant définit la manière avec laquelle le dégradé rempli la forme. S’il se répète ou pas et de quelle manière il se répète, en miroir ou en simple répétition juxtaposée.

3- la transformation du dégradé

L’outil de transformation permet de manipuler le dégradé dans la forme. Par défaut le dégradé s’applique d’un bout à l’autre de la forme et horizontalement. Cette outil vous permet de jouer avec le dégradé, le réorienter, le faire se répéter dans le sens désiré etc. Pour l’utiliser, sélectionnez l’outil «transformation de dégradé» et cliquez dans la forme remplie préalablement d’un dégradé.

Illustrons rapidement tout ça avant que vous pensiez que ce soit compliqué.

Le Dégradé Linéaire

Flux "Couleur agrandie"

Premier exemple:

1- Position et nombre des curseurs:


2- Flux: le premier «Couleur Agrandie», le plus basique:

3-La transformation avec l’exemple (sans transformation particulière):


Pour revenir sur l’outil transformation. Sur un dégradé linéaire, il possède 3 éléments. -Une poignée centrale (petit cercle au centre) qui permet de déplacer le dégradé lui même dans la forme. -Une poignée (petit carré sur le centre d’un côté) de redimensionnement qui permet d’agrandir ou rétrécir le dégradé à l’intérieur de la forme. - Une poignée de rotation ( petit rond dans le coin du même côté) qui permet de faire pivoter le dégradé à l’intérieur de la forme.

Quelque exemple de manipulation avec le même dégradé et le même flux:


 Maintenant que nous avons vu les basiques. J’espère que vous avez les assimilé, nous allons accélérer un peu.

Flux miroir «refléter la couleur»

- Changeons le flux en répétition miroir et rétrécissons la transformation pour faire apparaître la répétition:

Voyons voir, rétrécissons encore !

- Faisons pivoter :

- Du noir opaque, passons au noir transparent (couleur de fond par défaut blanc):

- A présent, copions cette forme carré et collons la sur un calque juste en dessous. Ensuite toujours avec le carré sélectionné, faisons une transformation Menu Modification>Transformer> Renverser horizontalement ( remarquez que verticalement fonctionne aussi )
- Modifier la couleur de fond (CTRL+J), prenons un rouge foncé par exemple:

- Vous obtenez:

- Sélectionnez le carré du calque du dessus - Déplacez le curseur de droite par exemple afin que la transition soit plus courte entre les deux couleurs et laissons ainsi plus de place au noir transparent:

- Et si nous rapprochons le curseur de rouge prés du curseur noir transparent:

- Changeons la couleur du curseur rouge pour un rouge foncé et rapprochons le un peu du centre:

- Sélectionnez les deux carrés et bougez les curseurs. Les dégradés vont se mettre à jour sur les 2 carrés. Déplacez les curseurs à gauche. Cela créer un filet de ligne rouge fine et de grands carreaux. Rapide, facile, léger, que demander de plus ?


- Toujours sur les 2 carrés superposés, En bougeant les curseurs à droite, on obtient plus de rouge et moins de transparent :

- Sélectionnez le carré du dessus et changez son dégradé. Ca commence à être intéressant non ?

- Ajouter un calque en dessous des 2 existants et appliquez lui un dégradé, de haut en bas, à 100%, comme celui ci:

- Si on revient au dégradé de maillage de tout à l’heure avec le fond précédent:

- Avec l’outil transformation, vous pouvez rétrécir le maillage horizontalement, l’agrandir verticalement et obtenir ceci:

- Puis ceci:

- Ou ceci:

- Vous pouvez aussi rendre le dégradé plus complexe et obtenir des textures et maillage complexe comme celui ci:

- Ou ceci:

- Retravailler l’orientation du dégradé. Obtenez des lignes verticales en alignant la Transformation sur les deux carrés superposés :

- Ajustez le dégradé à votre souhait et obtenez le résultat que vous souhaitez:

Un motif façon mur de brique ?


Rien de plus simple, commençons ainsi: un dégradé qui créé un mince filet rouge. Travailler sur la taille de la Transformation sur les 2 carrés superposés. 2 Transformation perpendiculaires et une plus étendue que l’autre:

- Ajoutez un calque masque au dessus du calque du premier carré. Dessinez de longs rectangles d’une longueur supérieure à la longueur de votre carré et de la hauteur de vos briques:

- Copier coller les images clé sur masque et du carré qu'il masque sur de nouveaux calques. Décaler le motif d'une demi largeur de brique et décaler les rectangles du masque d'une hauteur de brique. Les rectangles de chaque masque ne doivent pas se superposer:

- Verrouiller vos masques: ( malheureusement les masques ne prennent pas en compte l’alpha d’une couleur pour traiter les surfaces cachées sinon, nous aurions pû faire encore plus facilement notre mur de brique en utilisant des dégradés à la place des rectangles)

Flux juxtaposé "Répéter la couleur"

Après ce petit aperçu, passons au mode de Flux que j’appelle juxtaposé et que flash nomme «Répéter la couleur»

- Exemple avec un premier dégradé:


Que peux-t-on faire de ça ? Changeons un peu de notre couleur de travail pour ceci:

- Configurer la couleur de fond en noir. Nous obtenons un motif métallique avec relief en quelque seconde.

- Ajoutez un calque au dessus avec toujours un carré rempli d’un dégradé en Flux «Couleur agrandie», le premier flux. (remarquez que cela marche aussi avec le Flux miroir, la Transformation serait juste différente)

- Vous obtenez ceci avec une Transformation verticale:

- Revenez à l’étape précédente et modifiez le dégradé comme ci-après et obtenez une autre texture métallique intéressante:

- Créer un nouveau calque par dessus, copier coller votre carré sur ce nouveau calque et appliquez lui ce dégradé:


- Appliquez un angle à la Transformation des 2 dégradés. Modifier légèrement l’angle de la Transformation du carré au dessus uniquement et obtenez ceci :

- Intéressant non ? A présent, appliquez au carré au dessus une Transformation perpendiculaire à celle du carré de dessous et rétrécissez la. Obtenez une autre texture intéressante:

Ceci avec grand maximum 2 minutes de travail!

Si vous avez bien intégré tous les enseignements de la première partie de ce tuto, vous êtes à présent capable de faire ce genre de chose très facilement:


Le Dégradé radial

Tout aussi utile, le dégradé radial permet aussi beaucoup de chose. Il permet de créer des motifs décoratifs mais aussi et surtout de créer le nécessaire pour les outils d’éclairage que nous allons rapidement voir ici mais qui fera l’objet d’un tutoriel à lui tout seul.
 Reprenons le dégradé de départ mais cette fois en radial. Sans toucher à la Transformation, nous obtenons ceci.


L’outil de transformation du dégradé radial possède 4 poignée.


- la poignée centrale comme pour le dégradé linéaire. La poignée centrale de la Transformation de dégradé radiale possède un curseur triangulaire qui permet de tirer la couleur centrale avec elle pour un résultat perceptible mais pas très prononcée.

la poignée rétrécissement et d’agrandissement est toujours présente mais divisée en 2:


- la poignée carré dont la fonction est la même: rétrécir et agrandir horizontalement et verticalement.
 - la poignée ronde avec flèche dont la fonction est de rétrécir et agrandir le dégradé de manière uniforme. 
- enfin la poignée de rotation qui permet de faire pivoter le dégradé radial.



Mettons en pratique ceci. En effectuant de simple petit réglage sur le dégradé sur le «halo» au dessus, il est très simple d’obtenir une belle boule :


- En bougeant le curseur de Triangle, on peut modifier l’impact de lumière sur la boule. Cela ne déplace pas le dégradé, mais modifie la transition entre les couleurs de manière douce:

- Illustrons rapidement la Transformation du dégradé. Ici un rétrécissement horizontal:

En maitrisant ces simples fonctions, tout vous est permis, comme pondre un oeuf (les 3 petits points ont été ajouté par dessus bien sûr) :

- Revenons au dégradé premier rouge et noir. Changeons simplement le flux sans toucher à la Transformation :

- A présent réduisons la Transformation à l’aide de la poignée ronde à flèche:

- Encore un peu plus :

- Changeons le dégradé à présent. Le noir devient transparent. Créons un calque en dessous, un nouveau carré de la même taille et rempli par le dégradé rouge et noir opaque sans Transformation:

- Réduisons à présent la part de rouge sur le carré du dessous :


- Pour finir, une petite composition. Déplacez le calque du dessous, au dessus. 
Sélectionnez le carré du dessus, modifiez son dégradé en choisissant un orange-jaune à la place du rouge et convertissez le carrée en symbole (F8). 
En masquant le calque en dessous, sur un fond noir, vous obtenez ceci:

-Copier coller ce symbole et réduisez la taille de celui qui se trouve au dessus afin qu’il soit à peu prés 50% plus petit que l’autre. Ils doivent être centrés l’un sur l’autre. Sélectionnez les 2 symboles halo et, dans le panneau propriété, sous Affichage, dans le menu Fusion, sélectionnez le mode Ajout.

-En dessous, le carré rempli de notre dégradé radial en flux «Répéter la Couleur» doit donner ceci:

- Affichez les 2 calques ensembles et obtenez ceci :

Cette petite composition avec un dégradé et un effet de lumière est un petit aperçu d’un prochain tuto que je prépare sur les Eclairage et Effets lumineux. Une texture comme nous venons d’en créer à besoin de reflet, impact de lumière et éclairage doux pour donner son maximum, nous verrons donc ça dans un prochain tuto.

CONCLUSION

Les possibilités des dégradés dans flash sont infinis, ce tutoriel montre comme vous pouvez explorer ces possibilités mais ne donne qu'un petit échantillon de ce que vous pouvez faire et du rendu que vous pouvez obtenir. Je vous conseille d'expérimenter par vous même, vous serez surpris des résultats que vous pouvez parfois obtenir très facilement. Il faut toutefois se méfier des dégradés avec alpha car ils requierent plus de calculs et peuvent alourdir une animation, vous pouvez toujours combiner cette technique avec des techniques géométrique classique et des techniques poussées d'éclairage enfin d'obtenir le résultat voulu. N'hésitez pas à toujours aller plus loin !