Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Animation simple d'une arabesque - de A à Z

Compatible Flash. Cliquer pour en savoir plus sur les compatibilités.Compatible Illustrator. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash Professionnel. Priorité aux techniques d'animation, de dessin et recours minimum à ActionScript.. Cliquer pour en savoir plus sur les compatibilités.Par dldler (Didier Durandet), le 26 mai 2010

Bonjour, voici un petit tutoriel sur un sujet récurrent : l'animation d'arabesques. Vous trouverez ici une technique simple et passe-partout… expliquée de A à Z.

A - NIVEAU REQUIS = NUL

Il existe beaucoup de tutoriels ou de sujets sur les forums traitant de l'animation d'arabesques, mais aucune à ma connaissance n'est plus simple à mettre en œuvre que celle-ci.

Vous devez savoir :
1 - Tracer une courbe à la plume
2 - Faire une interpolation de forme
3 - Il n'y a pas de 3*.

Vous voyez, rien de complexe, pas de code, et surtout : pas de 'grattage' de masque à la main, image par image, comme on peut le trouver parfois : beaucoup trop de travail à mon goût !

* Apres divers tests auprès de cobayes courageux, on me demande de préciser que savoir remplir une forme à l'aide du pot de peinture serait un plus aprécié. C'est fait :-)

B - MAIS À CE PRIX LÀ, ON A QUOI ?

Et bien, c'est pile le moment de confirmer le dicton : une image vaut 100.000 mots :

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

Voilà le genre d'animation que vous serez en mesure de réaliser quand vous aurez lu cette page jusqu'à son point final.

Sans doute trouvez-vous cela plus ou moins 'extraordinaire' selon votre niveau. Personnellement, ce que je trouve le plus 'extraordinaire, c'est le temps passé pour réaliser cette animation : 7 minutes 30 ! Certes, la pratique aide un peu, mais je vous promets que votre 2e réalisation d'arabesque vous prendra moins de temps que de lire cet article.

C - AH OUI ? ET OÙ EST LE PIÈGE ?

Mais comment savez-vous qu'il y a un piège?

Bon, en effet, cette technique est limitée. Elle pose une contrainte forte, c'est que l'arabesque doit être de couleur unie, sur un fond uni. Ça, c'est dû au principe de base. Évidemment on peut (un peu) tricher et réaliser des arabesques blanches sur une photographie. J'insiste bien : blanche. Bon, noire aussi, ou grise à 50%, et puis quelques autres trucs permettent parfois de s'en tirer, mais il faut avoir un certain niveau graphique pour imaginer (ou comprendre) comment détourner cette contrainte. Je vous livrerai quelques solutions vers la fin de ce tutoriel.

Et donc je me répète : en principe arabesque de couleur unie sur fond de couleur unie. Si vous recherchez quelque chose de plus sophistiqué, passez directement au paragraphe Z, ou (re)partez en quête sur votre moteur de recherche préféré.

D - ET TU ES TOUJOURS AUSSI BAVARD ?

Oui. J'aime m'écouter parler écrire. Cela fait du bien à mon ego et comme je vous livre ici un truc peu (voir pas) connu, qui vous permettra de réaliser en peu de temps ce que d'autres mettent des heures à produire, j'exige en échange un minimum de vénération, un maximum d'écoute. Et rire à mes blagues potaches serait un plus apprécié.

En vrai, je suis plutôt immensément modeste, mais comme j'ai choisi d'écrire des articles 'de A à Z', j'ai besoin de meubler sur celui-ci tellement la pratique va nous prendre peu de temps.

Mais allez, c'est bon, je suis prêt.

E - DEMONSTRATION

Sans plus de préambule, ouvrez votre copie (dûment enregistrée) de Flash sur un nouveau document, nous allons dessiner un triangle et le faire croître.

  • Prenez l'outil plume et tracez un triangle comme celui qui suit sur la première image du scénario principal.
  • Dans le panneau propriété, appliquez-lui un fond de la couleur de votre choix et un contour le plus fin possible, de la même couleur que la scène. Sur l'exemple ci-dessous, j'ai mis un fond gris et un contour blanc, mais c'est seulement pour vous permettre de voir le contour, car sinon on ne voit rien (ce qui est justement l'idée de base de la technique).

NB pour les non débutants : on me glisse à l'oreille que certains d'entre vous
sont adeptes de la méthode du carré pour faire un triangle (oui, on fait un carré,
on supprime un point, on obtient un triangle. C'est très bien. Faites à votre manière.
Personnellement je fais un polygone à trois côtés, ça marche aussi ;-).
NB pour les grands débutants : si vous ne trouvez pas comment remplir votre triangle,
utilisez le pot de peinture, cliquez à l'intérieur de la forme, puis reprenez la flèche
et sélectionnez la totalité du triangle en cliquant-glissant largement autour…
…ou adoptez la méthode du carré, voire celle du polygone à 3 côtés).
  • Sur le scénario, vers l'image 100, faites un clic droit et choisissez dans le menu 'Insérer une image clef'.
  • Sur le scénario toujours, placez-vous entre les 2 images et choisissez dans le menu 'insertion' la ligne 'interpolation de forme'
  • Sur le scénario toujours, revenez à l'image 1, sélectionnez votre triangle
  • Dans le panneau propriété, prenez le curseur qui gère la taille du contour et faites le grossir en allant vers la droite jusqu'à ce que votre triangle disparaisse totalement.
  • Appuyez sur la touche 'Entrée'.

Voilà la technique de base. Very simple, n'est-il pas ?

F - EXPLICATIONS

Normalement, vous avez dû voir grandir un petit triangle, jusqu'à la taille de celui que vous avez dessiné.

Si vous avez compilé au lieu d'utiliser la touche Entrée, votre animation boucle :
un stop() en fin de scénario est nécessaire.

Alors, si vous avez du mal à comprendre ce qui se passe sous vos yeux, essayez déjà de changer la couleur du contour sur le premier triangle puis relancez l'animation avec la touche Entrée. Cette fois, vous devez voir le contour, qui se réduit peu à peu et donc révèle la forme intérieure du triangle. C'est cette apparition progressive qui donne l'impression que le triangle grandi. Enfin, l'illusion n'existe que si l'on ne voit pas le contour. C'est pour cette raison que le contour doit être de la couleur du fond.

Voici un exemple, à droite, pour visualiser le résultat. A gauche, j'ai coloré le contour juste pour vous montrer ce qui se passe.

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

Un tout petit peu plus compliqué à comprendre : la progression se fait parce que la forme est triangulaire. Nous n'avons rien précisé quand nous avons réalisé notre triangle : pas de point de départ, d'arrivée. Non. Le triangle commence à apparaître là ou il est le plus épais, il finit d'apparaître là ou il est le plus pointu. C'est purement 'mécanique' si je peux dire. Ce qui nous pose un petit souci…

G - DU TRIANGLE À L'ARABESQUE : PROBLÈME

… Un petit souci, oui. Une arabesque, c'est rarement triangulaire. C'est plutôt composé de courbes, de volutes, de spirales, mais pas de triangles. Si vous tentez l'expérience d'animer selon cette technique une forme de courbe qui n'est pas appropriée, vous allez être déçu. Comme ceci par exemple :

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

Le brin d'herbe ne 'pousse' pas de sa base, mais de son centre, ce qui est gênant (au moins pour l'effet que nous cherchons à produire).

H - SOLUTION MANUELLE

À la main, pas de miracle. Il va vous falloir un minimum de maîtrise de la plume pour dessiner des courbes qui respectent l'idée du triangle. Zoomez, observez, c'est une histoire d‘œil.

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

“Respecter l'idée du triangle” ça veut dire quoi ? Cela veut dire dessiner une forme qui va toujours en se rétrécissant. Si la chose est assez facile dans la partie du triangle la plus épaisse, cela devient plus difficile vers la pointe. Avant de vous faire souffrir du poignet, vous devriez lire le paragraphe suivant.

I - HEUREUX QUI A LA SUITE™

Oui, en vérité je vous le dis, bienheureux est celui qui a la suite Adobe. Car Illustrator peut vous aider à dessiner des courbes 'triangulaires'. Suivez le guide.

Ouvrez Illustrator sur un nouveau document, nous allons créer une forme artistique triangulaire, une astuce parfaitement adaptée à notre problématique.

  • Dessinez, à l'aide de la plume, un 'joli' triangle.
  • Dans le menu 'Fenêtre', affichez la palette des 'formes'.
  • Sélectionnez votre triangle avec la flèche noire, puis glissez-le sur la palette que vous venez d'ouvrir.
  • Une fenêtre vous donne le choix entre plusieurs options, optez pour “Nouv. forme artistique” et validez.

  • Nouvelle fenêtre, ici vous devez entrer un nom et surtout choisir le sens approprié au triangle que vous avez dessiné. Validez à nouveau.

  • Vous êtes prêts à dessiner des volutes 'triangulaires' aussi courbes que vous le souhaitez. Prenez le pinceau [b],sélectionnez une couleur de contour (et aucune couleur de fond). Amusez-vous, en cliquant-glissant, à 'jeter' des courbes à l'aide de votre mulot. Vous pouvez jouer sur l'épaisseur du contour pour rendre votre forme plus trapue ou plus élancée.

Si toutefois la forme triangulaire ne s'appliquait pas à vos nouveaux tracés, appliquez-la
via la palette 'forme', mais normalement elle devrait être active.
Toutes les formes que vous 'brosserez' avec le pinceau iront du plus large au plus étroit.
Vous pouvez également essayer avec l'outil spirale, et, en un seul geste, vous obtiendrez une spirale
adaptée à notre interpolation de forme.
Attention : si vous utilisez une tablette graphique, la pression du stylet
peut également jouer sur l'épaisseur du filet. Et dans ce cas, supprimer l'effet 'triangulaire'
qui nous intéresse. Travaillez plutôt à la souris.

Et si vous n'y connaissez rien à Illustrator, un tutoriel dédié aux formes artistiques est disponible, ici.

Pour finir sous Illustrator :

  • Sélectionnez les formes qui vous plaisent. Dans le menu 'Objet' choisissez 'Décomposer l'aspect”.
  • Enregistrez chaque forme dans un fichier, ou créez autant de calques que vous avez de formes et enregistrez.

J - RETOUR SOUS FLASH

Rien de bien compliqué maintenant : importez les formes que vous avez dessinées dans Illustrator. Pour chacune créez un clip, éditez-le (via la bibliothèque par exemple) et créez l'interpolation de forme comme au paragraphe E. Admirez vos chefs d'œuvres.

Au lieu de 100 images, n'hésitez pas à faire des interpolations beaucoup plus longues. Vous obtiendrez un effet de croissance plus convaincant.

K - ET MAINTENANT ?

Et bien, prenez-vous en main. La démonstration est terminée, tout ce qui va suivre n'est que théorie et exemples pour contourner les limites du système. Je vous avais bien dit que c'était simple ! Assemblez plusieurs formes sur votre scène principale, créez une touffe d'herbe puis lancez votre animation… Notez qu'à partir de maintenant, il vous faudra compiler pour voir le résultat, la touche entrée ne suffit plus pour visualiser les animations qui mettent plusieurs clips en œuvre.

Positionner plusieurs formes comme nos brins d'herbe entre elles est difficile car
elles sont cachées par leurs gros filets. Dites merci à Nataly pour ce truc lumineux : cochez la case
'mode tracé' des calques sur lesquels vous posez vos formes, vous les situerez facilement.

Zut. Certains d'entre vous me font signe qu'ils rencontrent un nouveau problème. J'aurais dû y penser, laissez-moi vous reprendre la main.

L - SUPERPOSITION

Nous voici confronté à la limite imposée par la contrainte : 1 couleur d'arabesque unie sur une couleur de fond unie. En effet, si vous mettez plusieurs éléments sur votre scène principale, les contours (que l'on ne voit pas parce qu'ils sont ton sur ton avec le fond) deviennent visibles quand ils recouvrent un autre élément. Ou plutôt, ils masquent cet élément. Si vous avez du mal à comprendre ce qui se passe, refaites l'exercice en mettant un contour d'une autre couleur, bien visible. Comme ceci :

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

C'est embêtant, mais il y a plusieurs solutions pour dépasser les limites, il est temps pour moi de vous les décrire.

M - PLUS BLANC QUE BLANC, C'EST 'ECLAIRCIR'

Comme ne le disait pas Coluche, plus blanc que blanc, ça n'existe pas et ceci m'arrange bien. Si je prends cet exemple en premier, c'est qu'il devrait vous faire comprendre la logique de tous les autres trucs envisageables. Prenons une arabesque, blanche, sur un fond gris (ou tout autre couleur). Plutôt que de mettre un contour de la même couleur que le fond (gris, pour ceux qui ne suivent pas), mettons le carrément noir. Le contour se voit, mais il existe un mode de fusion qui permet de ne voir que le blanc : c'est le mode “éclaircir” (pour choisir un mode de fusion, sélectionnez une occurrence de clip sur la scène et allez dans le panneau des propriétés. Il y a un menu popup 'Fusion').

Comment fonctionne le mode de fusion 'éclaircir' ? C'est simple. Si un pixel de l'objet concerné est plus foncé que le fond sur lequel il est posé, le pixel ne s'affiche pas. Comme toutes les couleurs sont plus claires que le noir, notre contour ne s'affichera jamais. Au contraire, les pixels plus clairs que le fond s'affichent. Comme le blanc est plus clair que toutes les autres couleurs, notre arabesque s'affichera, elle.

Une fois le principe compris, au lieu de mettre un fond de couleur, utilisez une photo : le phénomène est identique. C'est ce que j'ai utilisé pour l'exemple du paragraphe “B - MAIS À CE PRIX LÀ, ON A QUOI ?”.

Petit rappel ?

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

N - PLUS NOIR QUE NOIR…

Regardons quelques autres modes, voulez-vous ?

À l'exact opposé du mode 'éclaircir' il y a le mode 'obscurcir'. Comme son nom l'indique le mode de fusion 'obscurcir' affiche les pixels plus sombres que le fond et masque les pixels les plus clairs. Il est temps peut-être de bien visualiser la chose ?

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

Ce mode vous sera utile pour réaliser des arabesques noires (ou au moins sombres) sur un fond de couleur, une photographie…

O - PRODUIT VERSUS OBSCURCIR

Le mode de fusion 'produit' est très proche du mode 'obscurcir'. Tant que l'on travaille avec du noir et du blanc le résultat est identique. Avec des couleurs, l'effet est différent, mais peut s'avérer intéressant. Le choix dépendra du résultat désiré. Voici une petite comparaison :

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

Regardez les zones vertes, là ou les brins d'herbe se chevauchent. En mode obscurcir, le vert est toujours identique. En effet, le mode obscurcir ne modifie pas les couleurs. Il choisit juste entre la plus claire et la plus sombre. Le mode 'produit', lui soustrait* les couleurs (*en synthèse additive pour être précis). C'est ce qui fait que là ou les brins se chevauchent, le vert s'assombrit. Retenez que le mode obscurcir préservera la couleur choisie, le mode produit vous offrira plus de relief, mais la couleur ne sera pas respectée.

P - ÉCRAN VERSUS ÉCLAIRCIR

Les modes de fusion 'écran' et 'éclaircir' ont un effet respectivement semblable à 'produit' et 'obscurcir'. Voici la comparaison :

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

Pour les raisons exposées au paragraphe précédent, les couleurs ne changent pas sur la zone de chevauchement en mode éclaircir. En mode 'écran', le vert s'éclaircit* là où les brins se chevauchent (*en synthèse additive), dernière chance pour vous de découvrir le monde fabuleux de la couleur).

Q - INCRUSTATION VERSUS LUMIÈRE CRUE

Deux autres modes de fusion doivent retenir votre attention :'incrustation' et 'lumière crue'. Ils se situent à mi-chemin des précédents dans le sens où ils éclaircissent les couleurs claires et obscurcissent les couleurs sombres. Or, entre couleur claire et couleur sombre, il existe au juste milieu, une valeur à l'effet étonnant. Un contour de cette valeur devient invisible car il ne peut ni éclaircir ni obscurcir le fond… Cette valeur, la voici : #7F7F7F.

Voici le résultat :

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

La différence sur les zones de chevauchement est plus légère. Dans les deux cas, les couleurs deviennent de plus en plus vives, sinon je ne suis pas capable d'en expliquer les différences. À vous d'expérimenter.

R - RECAPITULATION

Les autres valeurs de fusion ne me semblent pas utiles. Mais si vous leur découvrez un intérêt, n'hésitez pas à le partager. Pour conclure cette étape, un petit récapitulatif s'impose :

  • sur fond blanc ou clair : les modes 'obscurcir' et 'produit',
  • sur fond noir ou sombre : les modes 'éclaircir' et 'écran',
  • sur fond moyen ou pour le style : les modes 'incrustation' et 'lumière crue';
  • les modes éclaircir et obscurcir préserveront la couleur choisie,
  • les modes écran et produit offriront plus de relief sur les chevauchements, mais la couleur ne sera pas respectée.

Vous avez maintenant une bonne connaissance des principes de bases, permettez-moi de pinailler sur quelques détails. Je vous emmènerai ensuite vers des compositions plus complexes.

S - ET UN TRIANGLE ROND, ÇA VOUS 'BRANCHE' ?

Derrière ce jeu de mot à double ressort croisé, je vais vous livrer ma méthode ultime pour réaliser des formes triangulaires, 'rondes' cette fois-ci.

Mais est-ce possible, me direz-vous ? Bien sûr, c'est même très facile.

Passez sous Illustrator. C'est plus facile sous Illustrator car il utilise seulement 4 points pour dessiner un cercle contre 8 pour Flash. De plus, nous allons utiliser la technique des formes artistiques.

Dessinez un cercle avec l'outil Ellipse [L], prenez le point supérieur du cercle à l'aide de la flèche blanche [a], éloignez-le vers le haut, oui, comme ça, encore plus loin… c'est fait. Vous venez de tracer une forme ronde 'triangulaire'.

Si besoin, relisez le paragraphe 'I - Heureux qui a la suite™' afin d'en réaliser une forme artistique puis testez les volutes réalisés avec cette forme grâce au pinceau [b]. Voici un exemple d'animation à partir de cette forme, juste pour en discuter.

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

Mais, quel est l'intérêt, persisteriez-vous ?

Et bien, il y en a plusieurs, des intérêts :

  • déjà, la base de la forme ronde est beaucoup plus stable que celle du triangle. Regardez ce qui se passe près de l'horizon. La forme construite sur le cercle grossit, mais reste stable, alors que le triangle semble descendre peu à peu;
  • l'animation de la forme issue du rond est moins linéaire que celle du triangle : elle fuse, puis s'épaissit donnant une croissance beaucoup plus naturelle;
  • enfin, la disparition des angles va nous permettre d'accrocher nos volutes les unes aux autres plus facilement. Et ça, c'est bon pour la suite, justement…

T - DE BRANCHE EN BRANCHE

Car, voyez-vous, une volute aux bouts arrondis, avec une croissance naturelle, me fait assez vite penser à une branche, puis, à un arbre. Et un arbre, qu'est ce que c'est ? Un tronc avec des branches qui poussent dessus, des branchettes qui poussent sur les branches, non ?

Et un tronc, qu'est ce que c'est ? Une grosse branche.

Une branchette ? Une petite branche.

Un arbre serait donc une grosse branche sur laquelle poussent des branches, sur lesquelles poussent des branches, sur lesquelles… STOP!

En programmation, ceci à un nom. On l'appelle la récursivité. C'est une technique, utile dans certains cas, où une fonction s'appelle elle-même pour poursuivre son job à un niveau inférieur. Il y a un gros danger dans cette technique : si l'on ne met pas une condition d'arrêt, la boucle est infinie et l'on plante le programme en saturant très vite la mémoire.

Pour cette même raison, dans l'IDE de Flash, on ne peut pas placer un symbole à l'intérieur de lui-même. L'effet 'mise-en-abîme' pourrait être sympa, mais son côté infini occuperait le processeur à plein temps… et jusqu'à la fin des temps.

Dommage, il y avait de l'idée pour nos branches, sur des branches, sur des branches… Tentons tout de même de trouver une méthode qui s'en approche.

U - UN PREMIER RAMEAU

Nous allons d'abord créer 'à la main' un rameau de base, un tronc avec 3 branches. Voici ce que vous devez obtenir :

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

Cette étape est la plus complexe, suivez-moi avec attention, certains détails sont importants pour la suite.

Dans un Ficher Flash, importez une 'branche' construite à partir d'une forme ronde dite 'triangulaire' (relisez le paragraphe S, si besoin) et réalisez son interpolation de contour dans un clip que nous appellerons 'niveau_0'.

Respectez les points suivants :

  • votre première branche devra être à l'échelle 1 sur la scène (soit 100%). Alors, si besoin, réduisez la forme avant de faire l'interpolation.
  • dupliquez le clip niveau_0 (par le menu contextuel ou via la bibliothèque) et donnez-lui le nom de 'tronc'.

C'est maintenant que nous allons construire notre rameau de base.

  • créez un nouveau clip [controle F8], donnez-lui le nom niveau_1
  • placez sur la scène de votre clip niveau_1 : 2 occurrences de niveau_0 qui serviront de branches et 1 occurrence de tronc. Composez-les pour obtenir quelque chose de semblable à ce qui suit. Les couleurs des branches ne sont là que pour faciliter la vision de la construction.

Pour que le réalisme soit respecté, il faut décaler la pousse des branches. Sans cela, elles pousseraient en même temps que le tronc : effet surréaliste assuré. Ceci se gère très simplement au niveau du scénario. Comme cela :

Voilà, le plus dur est fait. Le reste est bien plus amusant.

V - RÉCURSIVITÉ MANUELLE

Voici, en 5 mouvements, comment faire pousser de nouvelles branches sur votre rameau.

Vérifiez que vous êtes bien au niveau du scénario principal, un clip 'niveau_1' doit être posé sur la scène. Ouvrez également la fenêtre 'Rechercher et remplacer' (menu 'Modifier' ou [cmd-F]) et choisissez 'à la recherche de : symbole', comme ça, vous serez prêts.

  • Clic droit sur le clip 'niveau_1' : choisissez 'Dupliquer le symbole'
  • Donnez lui le nom de 'niveau_2', puis validez
  • Dans la fenêtre 'Rechercher et remplacer', choisissez le symbole 'niveau_0' et 'remplacer par : niveau_1'.
  • Pressez le bouton 'Tout remplacer'

Et c'est tout ! Compilez pour vérifier, il pousse maintenant des branches en plus sur votre rameau.

Et la récursivité alors ? Répétez les 5 mouvements ci-dessus ! Vous devez juste faire progresser tous les noms des clips 'niveau' de 1. Je précise pour ceux qui se sentent perdus, mais c'est vraiment simple :

  • Clic droit sur le clip 'niveau_2' : choisissez 'Dupliquer le symbole'
  • Donnez lui le nom de 'niveau_3', puis validez
  • Dans la fenêtre 'Rechercher et remplacer', choisissez 'niveau_1' et 'remplacer par : niveau_2'.
  • Pressez le bouton 'Tout remplacer'

Est-ce plus clair ? Vous pouvez continuer ainsi autant que vous le voulez… cela dépendra tout de même de la puissance de votre machine, du dessin de vos branches, etc.

Voici ce que j'obtiens en niveau 6 à partir de l'exemple du paragraphe U :

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

W - UN ARBRE QUI CACHE LA FORÊT

Nous voici maintenant capables de réaliser de 'jolis' petits arbres qui poussent gentiment sur nos écrans. Il reste quelques détails qui peuvent être améliorés car les arbres réalisés ainsi sont assez froids et tous identiques. C'est le défaut de la récursivité quand elle n'inclut pas un minimum d'aléatoire. Pour y remédier, voici plusieurs idées :

  • Ici, nous n'avons utilisé qu'une forme de base pour les branches. Vous pourriez en utiliser plusieurs. Évidemment, vous allez perdre en simplicité de réalisation, mais on ne peut pas tout avoir.
  • Vous pouvez également modifier les clips niveau_1, niveau_2, etc. après les avoir tous créés. Editez-les via la bibliothèque, déplacez légèrement les branches latérales.
  • Puisque la méthode récursive est assez rapide à mettre en œuvre, vous pouvez vous confectionner des essences d'arbres différentes. Il vous suffit de construire vos rameaux différemment. En resserrant l'angle entre les branches et le tronc, vous obtiendrez plutôt un peuplier… En posant les branches haut sur le tronc, un pin des landes. Et avec plus de branches dans le rameau ?
  • Ou bien même, éditez un clip de niveau, via la bibliothèque. Permutez l'une des branches vers un niveau plus bas. Ce genre de petit 'accident' donnera très facilement une 'histoire' à un arbre. Un peu comme s'il avait un vécu, une branche cassée par la foudre…

X - ET PUIS, ET PUIS

Et puis, et puis… il y a toujours une suite. Tenez, par exemple : vous voulez des feuilles ? Pour un arbre, ce serait normal…

Avec ou sans la technique du filet, pourquoi pas une simple déformation de forme, à vous de voir, il y a là pas mal de possibilités pour faire apparaître une feuille. Mais je vois bien venir votre prochaine question :

OK. J'ai une jolie feuille, que j'ai animée moi-même. Mais je la mets où, ma feuille, maintenant ?

Et bien, si votre arbre est bien construit, posez vos feuilles à l'intérieur du clip niveau_0, à la fin de l'animation. C'est le premier niveau de profondeur que nous avons construit et donc le dernier de notre arbre, le bout du bout des branches.

YES ! C'est super, sauf la couleur de mon arbre qui est moche. Je voudrais bien la modifier, mais changer la couleur branche par branche… c'est galère. Autant tout refaire… Non ?”

Non, 2 clips seulement définissent la forme et la couleur de votre arbre : le tronc et le niveau_0. Editez-les, modifiez les couleurs de votre forme de base, la forme ou la durée de votre interpolation, les modifications seront reportées sur la totalité de l'arbre. Merci la récursivité.

Le tronc, d'ailleurs, n'existe que par soucis d'économie. Vous pourriez mettre une branche à sa place, mais la construction du rameau de base fait que les branches du tronc se superposeraient aux branches à chaque niveau, n'apportant rien graphiquement (au mieux une sorte d'écho désagréable) et ralentissant beaucoup l'animation.

Tenez, par exemple, vous pourriez très bien, une fois votre arbre terminé, mettre une couleur marron foncé dans le dernier 'triangle' de votre interpolation. L'effet de croissance des branches serait renforcé : “Oh, la jolie pousse vert tendre, qui grandit et s'assombrit pour devenir une branche à la belle écorce marron…”.

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

Voyez, c'est simple.

Mais à partir de maintenant je ne répondrai plus à vos questions. Et non, il est temps pour vous de vous émanciper, d'aller creuser le terrain fertile de votre imagination, de voler de vos propres ailes. Allez…

Y - CONCLUSION

Après vous avoir montré la technique de base, puis l'avoir développée dans un exemple un peu plus complexe, voici bientôt le temps de nous quitter. Il est temps de faire le bilan.

  • La technique de base, dite 'de la forme triangulaire' est extrêmement simple. Une simple interpolation entre 2 formes identiques, pas de repères de formes, pas de masque modfié par petits bouts, image par image…
  • Les inconvénients dus au filet existent, mais on peut souvent les contourner.
  • Le style 'triangulaire' est assez identifiable, l'effet froid et répétitif du récursif peut lasser. Certes, mais avec un peu d'imagination, de méthode, il y a tout de même d'assez grands espaces de créativité à couvrir.

Alors, technique fabuleuse ou petit truc potache ? Je vous laisse vous faire votre opinion. Je crois personnellement qu'il faut bien connaître une technique pour bien choisir quand l'utiliser. Mais pour faire un choix, encore faut-il avoir plusieurs options.

Un petit tour d'horizon ?

Z - AUTRES PISTES

Voici un petit voyage au pays des arabesques, volutes et autres apparitions progressives… Ce n'est pas exhaustif, mais j'ai réuni les articles que j'ai croisés depuis que je rédige ce tutoriel.

Avec code : - il y a, ici, la magnifique classe de Tlecoz. Si vous désirez remplir une zone complexe de façon progressive, c'est une très bonne solution. Il faut juste savoir intégrer une classe à votre projet… Et si vous ne savez pas, c'est vraiment le moment d'apprendre.

Une petite compilation de méthodes/exemples, par Jano 95 vous propose différentes pistes d'animations dont une méthode par guide qui est elle aussi intéressante.

Un autre tutoriel, par Vincent Crubé. Ça date, mais c'est clair et efficace. Facile à adapter aux arabesques. je crois que c'est le même principe que l'un de ceux décrit par Jano 95, mais je ne suis pas assez entré dans le code pour comparer.

La discussion classique sur l'animation d'arabesques, à propos de la méthode manuelle, image par image qui m'effraie devant la quantité de travail nécessaire. Parfois indispensable, mais j'espère bien que la méthode proposée ici vous évitera souvent de souffrir ce martyr.

Si trouvez d'autres pistes, si vous voulez partager vos créations ou si vous avez des questions à poser, venez faire un tour dans le forum dédié aux tutoriels.

Vous pouvez télécharger tous les fichiers source
de ce tutoriel au format CS3.
Enjoy !