Sujet: Animations de texte Lun 27 Aoû 2007 - 15:58
Introduction
Les sites Flash sont souvent des démonstrations de savoir faire ( société ) ou des sites évènementiels. Ils doivent donc tapper dans l'œil du visiteur. Comme vous le savez de plus en plus de logiciels permettent de réaliser des effets de texte en grand nombre…. Cependant ne vous y fiez pas … les effets de textes qu'ils produisent sont ensuite importés au format SWF ce qui rend vos animations très lourdes… De plus n'en avez vous pas marre de voir toujours les mêmes effets de textes sur le net… produits par Swish ou par Wildform ? Et bien ce tutorial vous montrera comment animer vos textes vous même !! Avec un nombre infini de possibilités.
C'est cette méthode que j'utilise pour animer les textes de mon site perso en version 1 : http://dubucm.free.fr ( regardez vous verrez que ça vaut largement des effets de swish ! )
Alors je vais vous livrer mon secret …
Compatibilité Flash 4 - Flash 5 :
Cette méthode est utilisable aussi bien sous le 4 que le 5 ... il suffit d'utiliser les fonctionnalités propres à chacun au départ j'utilisais cela sur le 4 et sur mon site je l'ai passé sur le 5 sans aucun pb. !
Quelques réflexions/explications :
Je ne suis pas parti de zéro pour créer cela... j'avais trouver à l'époque un tutorial sur comment animer un texte en flash fort bien fait... mais la technique restait assez basique et peu réutilisable. J'ai utilisé quelques bouts de code adaptés et rendu le tout un peu plus... optimisé...
Cependant attention ! ne lancez pas 50 effets de textes en même temps... chaque effet de texte est calculé par le processeur... il faut donc faire bien attention à tester ces anims sur des machines peu performantes comme des pII 300 ...
Notre but est donc de créer une procédure d'effet de texte qui soit : facilement réutilisable, qui permette de créer une infinité d'effets, très peu lourds... impossible ? on va voir !!!
Conception de cette "application"
Le tout devra être inclus dans des Movie Clip afin de pouvoir être réutilisé facilement. La technique utilisera en fait trois Movie Clip :
- Movie Clip "d'action" : le premier movie clip que nous utiliserons permettra de controler le reste de l'animation
- Movie Clip "d'effet" : qui sera l'effet d'une lettre et qui sera utilisé pour le reste des lettres de la phrase ( moduler ce movie clip permetra de changer d'effet )
- Movie Clip "de texte" : qui sera formé d'une lettre type et qui permettra de choisir la police et la taille et la couleur du texte
Il faut aussi savoir que cette application a été créé pour flash 4 au départ... le code n'est donc pas parfait.. si certains puristes voientt des trucs qui clochent... qu'ils n'hésitent pas à mettre les corrections sur le forum je corrigerais. ( Plutôt que de se contenter de critiquer ! )
Le movie Clip Texte
Celui-ci permet comme nous venons de le dire de définir UNE lettre ... en fait cette définition s'appliquera ensuite à toutes les lettres qui forme la phrase...
Il est important lorsque l'on utilise une police "exotique" en gros pas du "verdana" ou du "times" ... d'exporter le font outline... comme ça l'animation flash contient la police et pourra donc animer le texte avec. ( voir photo ci-dessous )
N'exportez pas toutes les lettres de la police donnée... exportez uniquement ce qui vous est utile pour le texte sélectionné... soucis d'optimisation.....
Ce Movie Clip est constitué d'une seule "keyframe", avec une lettre dans la police,couleur,taille choisie. je vous conseille de prendre une lettre large ( m par ex. ) afin d'éviter les problèmes d'enchevêtrement des lettres....
Le Movie Clip d'effet
Créez un nouveau Movie clip et insérez-y le movie clip de Texte ( que j 'ai appellé Letters dans l'exemple... ). Nommez l'occurence du movie clip ( voir image .. je l'ai appellé letters.. ) ).
En modifiant le mouvement du MC letters vous obtiendrez un effet différent au final donc c'est là et dans le MC définissant une lettre que vous devrez apporter des modifs pour avoir le résultat que vous voulez ! ( c'est aussi simple que swish ! bcp bcp plus efficace et aux possibilités infinies !!! ).
LA 2eme partie des interpolations sert à faire l'effet de sortie des lettres... nommez la "end" ... et n'oubliez pas l'action "Stop()".... Je vous laisse regarder les captures d'écran pour bien comprendre le principe de fonctionnement... les actions sur les keyframes sont des "stop()".
Le Movie Clip d'action
J'ai essayé de commenter le code pour que chacun comprenne un peu comment tout marche... ce n'est pas très compliqué... en gros le tout se décompose en trois parties :
1/ On initialise toutes les variables ... C'est notamment ici qu'on met le texte qu'on veut dans son effet...
2/ C'est la partie qui gère les lettres et le déroulement de l'effet
3/ On joue les animations de Fin des lettres.
Voilà à quoi ressemble la "timeline" du Movie Clip "ActionScript"
[color:92e9=black:92e9][/size][/size]
[size=7][size=7][color=black]Note : En ajoutant des Images clés vides entre la frame 10 et la frame 11 ( boucle ) vous pouvez augmenter le temps entre l'animation de 2 lettres... ( n'oubliez pas de changer le "Goto" dans l'Action Script ) de même pour la boucle de "fin".
Etape 1 - Initialisation :
Voila le code ActionScript commenté
Etape 2 - Déroulement - Frame 10 :
Voila le code ActionScript commenté
Puis on boucle a la frame 11 :
Etape 3 - Séquence de fin des lettres - Frame 21-22 :
On dit a chaque MC de lettre de jouer sa séquence de fin.
A la frame 22 :
Exemple de résultat :
Voila vous n'êtes pas obligé de tout comprendre pour utiliser cette technique. Vous aurez seulement à changer le texte, l'effet, la couleur .... et puis 2 ou 3 variables dans les initialisations...
Si vous faite des textes long rajoutez à la fin du Clip qui anime vos lettres un "removeMovieClip" pour ne pas laisser toutes les instances de vos movie clip sur votre scène. ( vous pouvez aussi faire jouer le MC sur un level et décharger le level... )
Vous pouvez downloader la source en cliquant ici ce qui vous facilitera la vie je pense :=) ! N'hésitez pas à utiliser les forums si vous avez des pb. !
Lun 27 Aoû 2007 - 15:58
) ).
[/size][/size]
