Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Panneau Transformer (motifs géométriques et perspective)

Compatible Flash CS3. Cliquer pour en savoir plus sur les compatibilités.Par nataly (Nataly), le 09 mars 2010

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ce tuto se propose de vous apprendre à tirer le meilleur parti du panneau Transformer pour obtenir des motifs géométriques et des effets de perspective avec point de fuite. Que vous utilisiez CS3 ou CS4 les techniques sont les mêmes à quelques nuances près que je détaillerai le moment venu.

Prérequis
Je suppose que vous connaissez les outils de dessins classiques : rectangle, ovale et autres remplissages. C'est tout ce dont vous aurez besoin pour vous lancer dans l'aventure.

Conventions de rédaction
Entre crochets : les raccourcis clavier
cmd = ctrl sous PC

A l'attention des utilisateurs CS4 L'outil Déco et son pinceau symétrique remplace avantageusement l'utilisation du panneau transformer pour ce qui est des motifs géométriques (mais pas toujours, c'est la pratique qui vous l'apprendra). En revanche pour une perspective telle qu'illustrée par la fuite des arbres c'est le bon vieux panneau transformer qui viendra à votre secours.

Une démo pour commencer

Quelque soit la version dont vous disposiez, c'est le champ pivoter qui nous intéresse. Une fois n'est pas coutume, une petite démo guidée sera plus parlante qu'un exposé préliminaire. Je vous propose donc de dessiner un ovale sur la scène. Pour mieux comprendre, il est préférable de choisir sans remplissage.

Affichez le panneau Transformer [cmd-T] et sélectionnez la forme à l'aide de l'outil de transformation libre [Q].

Dans le champ 'Pivoter', saisissez 12 (ou un autre angle de votre choix, pour une rosace simple il importe seulement que ce soit un sous multiple de 360), puis cliquez autant de fois que nécessaire sur le bouton 'Copier et appliquer la transformation' (en bas à droite du panneau).

Sous nos yeux ébahis une rosace se construit en une poignée de clics.

Les utilisateurs de CS4 noteront cependant la modification des échelles horizontales et verticales, après quelques clics :( … De fait, l'intitulé du bouton a changé (il affiche “Dupliquer la sélection et la transformer”), les conséquences de son utilisation aussi… Quand ça pose problème, il faut alors se tourner vers l'outil Déco et son option “pinceau symétrique”.

Le point de référence

En utilisant l'outil de transformation libre pour la sélection [Q], nous faisons apparaitre un petit cercle blanc au centre de la forme sélectionnée. C'est autour de ce point que s'établit la rotation. Comme nous n'y avons pas touché dans la démo précédente, la rotation s'est faite sur un axe central, mais nous aurions pu le déplacer pour obtenir un autre résultat. Par exemple, dessinons un ovale plein (histoire de changer), déplaçons le point de rotation sous la forme, décidons d'un angle de 36 (par exemple) et… Oh ! Une marguerite !

Essayez d'autres combinaisons pour vous familiariser avec l'outil.

La perspective

Jusque là c'était rigolo, maintenant ça va virer à franchement utile (je trouve ;))

Cette technique que nous avons utilisée avec la propriété “faire pivoter” peut aussi être déclinée avec les échelles horizontales et verticales. Elle va nous permettre de dupliquer la forme, le graphique, ou le clip de notre choix en lui appliquant une modification d'échelle, ce qui va donner un effet de perspective. L'exemple typique c'est celui de la colonnade ou des arbres le long d'une route.

Pour obtenir ça, il nous faut un clip Arbre dans la bibliothèque.
Posons une instance de ce clip sur la scène en bas à droite de la scène, ce sera le premier arbre de la perspective. N'en modifiez pas les proportions : plus rien ne fonctionnerait.

CS3

Sélectionnez le clip à l'aide de l'outil transformation libre [Q] et déplacez le point de référence (petit rond blanc) là où vous souhaitez le point de fuite de la perspective. Après vous être assuré que la case contraindre est cochée, saisissez 80 dans le champ échelle horizontale. Plus cette valeur est petite, plus l'écart entre les arbres sera grand. Ne validez pas ! Sans quoi la modification serait immédiatement appliquée, et ce n'est pas ce qu'on veut. Cliquez autant de fois que nécessaire sur le bouton 'Copier et appliquer la transformation'.

Les clips se dupliquent les uns sur les autres, aussi à la fin de la manipulation nous faut-il encore modifier les plans. C'est un peu fastidieux, le raccourci clavier sera le bien venu. Le plus rapide c'est de commencer par l'arbre du fond, le plus petit. Sélectionnez le et passez le au premier plan. Sélectionnez le suivant (l'avant dernier) passez le au premier plan, et ainsi de suite. Voilà.

CS4

Vous avez remarqué que lorsque vous saisissez une valeur dans un champ du panneau Transformer, la modification est immédiatement appliquée, sans que vous ayez à valider. Sur ce coup là, ça ne nous arrange pas :mrgreen:. Nous allons donc anticiper et dupliquer le clip sur lui même : copiez [cmd-C] et collez en place [cmd-maj-V]. Sélectionnez ce dernier clip, et après avoir contraint l'homothétie (petite chaine à droite des champs d'échelle), saisissez 80 dans le champ échelle horizontale. Plus cette valeur est petite, plus l'écart entre les arbres sera grand. Puis, cliquez autant de fois que nécessaire sur le bouton 'Dupliquer la sélection et la transformer'.

Les clips se dupliquent les uns sur les autres, aussi à la fin de la manipulation nous faut-il encore modifier les plans. C'est un peu fastidieux, le raccourci clavier sera le bien venu. Le plus rapide c'est de commencer par l'arbre du fond, le plus petit. Sélectionnez le et passez le au premier plan. Sélectionnez le suivant (l'avant dernier) passez le au premier plan, et ainsi de suite. Voilà !

C'est tellement facile que ça vous donne envie de faire l'autre côté de la route imaginaire qui se dessine le long des arbres. Qu'à cela ne tienne !

La seule chose à laquelle il convient d'être attentif, c'est de respecter le même point de fuite. Les guides pourront nous y aider.


Sélectionnez un arbre avec l'outil [Q], puis tirez un guide vertical et un horizontal depuis les règles (elles s'affichent depuis le menu affichage) de façon à ce que leur intersection marque le point de repère du clip sélectionné. Il ne vous reste plus qu'à répéter les opérations précédentes et le tour est joué.

Plus tard, c'est sur une construction de ce type que nous pourrons nous amuser à animer les arbres pour obtenir un effet de défilement perpétuel de la route…

Un flocon de neige

A titre d'exercice, et parce que le tuto qui fait neiger requiert un flocon, voici le pas à pas pour faire du flocon en quelques clics.

On y reconnait un motif qui se répète 5 fois, ce motif subit donc une rotation de 72° à chaque fois (360/5)

La branche de base avec l'outil Ligne.

Une ligne verticale.
Une oblique.
Dupliquer l'oblique, la retourner et la placer en face.
Sélectionner les deux obliques, glisser vers le bas, touche alt enfoncée pour dupliquer.
Grouper.

La petite branche Dupliquer et réduire le groupe précédemment obtenu.
Lui appliquer une rotation de 36°(72/2)

Réunir les deux branches et les grouper.

Avec l'outil [Q] déplacer le point de repère sur la base, saisir 72 dans le champ pivoter, cliquer autant de fois que nécessaire.

Ayé !

Il ne vous reste plus qu'à pratiquer pour apprivoiser l'outil