Salut les loulous, bon et bien on va dire que c'est le dernier tuto de la journée, qui aura été riche en tutoriels. Donc revenons à nos moutons, dans ce tuto je vais vous expliquer comment il est possible de créer un effet plutôt sympa sur vos textes, en effet nous allons nous amuser à appliquer une rotation sur des lettres en fonction du passage de la souris sur ceux-ci. Sachez que vous n'aurez qu'à effectuer 3 étapes pour que votre application fonctionne (séparation, modification des lettres et codage)

Pour ce tutoriel, vous aurez besoin de la librairie TweenMax (un tuto explique toutes les étapes pour la télécharger et aussi l'installer).

Voyons ce que vous serez capable de faire après ce tutoriel:


Le code:

Code:


//Import tweenmax
import com.greensock.TweenMax;
 
//boucle pour recupération des lettres de la scéne
for (var i=0; i < this.numChildren; i++) {
   var mc:Object = getChildAt(i);
   mc.addEventListener(MouseEvent.MOUSE_OVER, overLettre);
   TweenMax.to(mc, .2 , {tint:0xffffff});
}

//fonction  permettant la rotation et la coloration des lettres
function overLettre (e:Event):void {
   var lettre:MovieClip = (MovieClip) (e.target) ;
   TweenMax.to(lettre, .8 , {rotationY: -180, tint:0xff8800, onComplete: retour, onCompleteParams:[lettre]});
}

//fonction joué une fois la tween de la fonction overLettre terminé, remet en place les effets
function retour(lettre:MovieClip):void {
   TweenMax.to(lettre, .4 , {delay: .5, rotationY: 0, tint:0xffffff});
}


Si vous souhaitez intégrer ce projet dans un autre swf, vous devrez alors donner des noms d'occurrences à vos lettres, ensuite il suffit de créer un tableau qui les contients. Voici donc un autre exemple qui utilise les noms d'occurrences : l_1, l_2, l_3, l_3...

Code:

//Import tweenmax
import com.greensock.TweenMax;

//tableau contenant les noms d'occurrence de toutes les lettres
var tab:Array = new Array ( l_0 , l_1 , l_2 , l_3 , l_4 , l_5 , l_6 , l_7 );

//boucle pour recupération des lettres de la scéne
for (var i=0; i < tab.length; i++) {
            //mc contient l'enssemble des lettres
   var mc:MovieClip = tab[i];
   mc.addEventListener(MouseEvent.MOUSE_OVER, overLettre);
   TweenMax.to(mc, .2 , {tint:0xffffff});
}

//fonction  permettant la rotation et la coloration des lettres
function overLettre (e:Event):void {
   var lettre:MovieClip = (MovieClip) (e.target) ;
   TweenMax.to(lettre, .8 , {rotationY: -180, tint:0xff8800, onComplete: retour, onCompleteParams:[lettre]});
}

//fonction joué une fois la tween de la fonction overLettre terminé, remet en place les effets
function retour(lettre:MovieClip):void {
   TweenMax.to(lettre, .4 , {delay: .5, rotationY: 0, tint:0xffffff});
}

Le tutoriel


La source:

le lien de téléchargement de la source est mort il me semble merci

C'est remis en place, en tout cas j'espère que tu fais bien le tuto avant de télécharger la source ???? Hein

O.o mais quelle productivité! x)

je me demandais justement comment faire cet effet il y a quelques jours, voila de quoi répondre à ma question :D merci

Nickel ton tuto ! A part la rotationY qui ne marche pas chez moi

Ce n'est pas normale, as-tu bien vérifié si tu n'avais pas fait une faute? Car si rotationX et rotationZ fonctionne alors rotationY devrait lui aussi fonctionner.
Sinon, quand tu télécharges la source, la rotationY fonctionne?

Ni la X, Y, ou Z ne marche, je ne sais pas pourquoi.
Et lorsque je veux ouvrir ton fichier source, sa me dit:
"format de fichier inattendu".
Pour le moment, ce n'est vraiment pas une histoire d'amour avec flash

Si tu veux, voici le fichier source version cs3: rotation_lettre_cs3.fla

Merci pour ton fichier.
Mais le problème de rotation Y est toujours là....
Du coup, sa se teinte juste en orange....

Incroyable ce problème, perso je te conseille de télécharger ma classe TweenMax et de remplacer la tienne par celle-ci:
TweenMax.zip