Artkabis

Salut !!!
Si vous êtes membre du forum, vous pouvez vous connecter.
Au cas contraire vous avez la possibilité de créer gratuitement un compte...

Forum d'entraide en graphisme et webdesign. Formation pour Flash, Photoshop et les langages: as2, as3, html, php, javascript, etc.


    Rotation dynamique de texte (facile)

    Partagez

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Rotation dynamique de texte (facile)

    Message par artkabis le Lun 27 Avr - 18:05

    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:


    Dernière édition par artkabis le Lun 8 Mar - 18:54, édité 4 fois

    briseur
    Nouveau membre
    Nouveau membre

    Messages : : 9
    Age : : 40
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 24/04/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Rotation dynamique de texte (facile)

    Message par briseur le Lun 27 Avr - 18:29

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

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Rotation dynamique de texte (facile)

    Message par artkabis le Lun 27 Avr - 18:42

    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 grand sourire


    _________________
    J'me fais de la pub et na tongue

    megalex
    Ceinture jaune
    Ceinture jaune

    Messages : : 343
    Age : : 24
    Logiciels : Logiciels : : photoshop cs3, flash cs4,flex builder 3,gimp,code::blocks, notepad++,et bien d'autres...
    Date d'inscription : 12/04/2009

    Re: Rotation dynamique de texte (facile)

    Message par megalex le Lun 27 Avr - 19:12

    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

    djuls69
    Ceinture blanche
    Ceinture blanche

    Messages : : 61
    Age : : 31
    Logiciels : Logiciels : : Photoshop, Illustrator, Dreamweaver, Cinema 4D
    Date d'inscription : 20/04/2009

    Re: Rotation dynamique de texte (facile)

    Message par djuls69 le Mar 28 Avr - 8:37

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

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Rotation dynamique de texte (facile)

    Message par artkabis le Mar 28 Avr - 9:09

    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?


    _________________
    J'me fais de la pub et na tongue

    djuls69
    Ceinture blanche
    Ceinture blanche

    Messages : : 61
    Age : : 31
    Logiciels : Logiciels : : Photoshop, Illustrator, Dreamweaver, Cinema 4D
    Date d'inscription : 20/04/2009

    Re: Rotation dynamique de texte (facile)

    Message par djuls69 le Mar 28 Avr - 9:49

    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 colère

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Rotation dynamique de texte (facile)

    Message par artkabis le Mar 28 Avr - 10:32

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


    _________________
    J'me fais de la pub et na tongue

    djuls69
    Ceinture blanche
    Ceinture blanche

    Messages : : 61
    Age : : 31
    Logiciels : Logiciels : : Photoshop, Illustrator, Dreamweaver, Cinema 4D
    Date d'inscription : 20/04/2009

    Re: Rotation dynamique de texte (facile)

    Message par djuls69 le Mar 28 Avr - 11:10

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

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Rotation dynamique de texte (facile)

    Message par artkabis le Mar 28 Avr - 14:58

    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


    _________________
    J'me fais de la pub et na tongue

    djuls69
    Ceinture blanche
    Ceinture blanche

    Messages : : 61
    Age : : 31
    Logiciels : Logiciels : : Photoshop, Illustrator, Dreamweaver, Cinema 4D
    Date d'inscription : 20/04/2009

    Re: Rotation dynamique de texte (facile)

    Message par djuls69 le Mar 28 Avr - 15:17

    ... et si je te dis que sa ne marche toujours pas, tu me crois ? t'es lourd
    Je vois d'où vient le problème, mais je ne sais pas comment le résoudre..
    Rotation(X, Y, ou Z) est considéré comme un mot clé pour Flash.
    Le mot rotation change bien de couleur, mais dès que je lui rajoute un axe, c'est fichu...

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Rotation dynamique de texte (facile)

    Message par artkabis le Mar 28 Avr - 16:01

    mais écris-tu bien ceci: rotationY, car sinon ce n'est pas possible, je suis sur à 100% que tu fait une faute de frappe, copie ceci: rotationY et colle le dans ton projet, tu verras tout fonctionnera correctement


    _________________
    J'me fais de la pub et na tongue

    djuls69
    Ceinture blanche
    Ceinture blanche

    Messages : : 61
    Age : : 31
    Logiciels : Logiciels : : Photoshop, Illustrator, Dreamweaver, Cinema 4D
    Date d'inscription : 20/04/2009

    Re: Rotation dynamique de texte (facile)

    Message par djuls69 le Mar 28 Avr - 16:16

    Ben non, j'ai même ouvert ton fichier source sans rien modifier du tout.
    ... et sa ne marche pas, donc sa ne vient pas d'une faute de frappe

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Rotation dynamique de texte (facile)

    Message par artkabis le Mer 29 Avr - 7:09

    surpris alors là nous naviguons dans la 4eme dimension, je t'avoue que je n'arrive pas à comprendre ce qui peut se passer, c'est chiant, car si tu ne peux pas utiliser cette fonction, ceci peut te bloquer dans d'autres tutos où même tes projets. Je vais essayer de voir de mon côté s'il existe des précédents...


    _________________
    J'me fais de la pub et na tongue

    rahjuliano
    Ceinture blanche
    Ceinture blanche

    Messages : : 80
    Age : : 34
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? Photoshop CS4, illustrator CS4, flash CS4, Dreamweaver CS4, mais aussi Accessoirement Encore CS4, Première CS4, indesign CS4, Bridge CS4, blender :p
    Date d'inscription : 21/01/2009

    Re: Rotation dynamique de texte (facile)

    Message par rahjuliano le Mer 29 Avr - 7:30

    Merci pour le tuto, et d'ailleurs particulièrement dans ce tuto, tu as fais qqchose que tu ne fais pas d'habitude et qui est TRES agréable c'est le zoom sur ton code Wink D'habitude, je t'avouerai que j'ai du mal à lire ton code et celà meme en HD bien sur. C'est pourquoi les zoom que tu as fais, sont grandement appréciés. Alors merci encore pour ce petit 'plus', et rdv dans la section aide fumer

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Rotation dynamique de texte (facile)

    Message par artkabis le Mer 29 Avr - 7:35

    En effet, cette vidéo est hébergée par moi-même est pour pouvoir l'intégrer facilement j'ai adapté la taille à 640 et mon logiciel à donc automatiquement ajouté des zooms.

    Par contre, quand une vidéo est en HD, il faut absolument la mettre en pleine écran, car sinon, la visibilité est réduite...


    _________________
    J'me fais de la pub et na tongue

    ceza03
    Nouveau membre
    Nouveau membre

    Messages : : 17
    Age : : 28
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 28/02/2009

    Re: Rotation dynamique de texte (facile)

    Message par ceza03 le Jeu 30 Avr - 21:20

    pk je n'arive pas a ouvrir la source ? j'ai flash CS3
    merci

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Rotation dynamique de texte (facile)

    Message par artkabis le Jeu 30 Avr - 21:50

    Regardes dans les messages précédents, je donne la source pour flash cs3, sinon j'utilise flash cs4, c'est pour ça que tu ne peux pas ouvir le fichier


    _________________
    J'me fais de la pub et na tongue

    toutclic
    Ceinture blanche
    Ceinture blanche

    Messages : : 168
    Age : : 26
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 30/05/2009

    Re: Rotation dynamique de texte (facile)

    Message par toutclic le Mar 2 Juin - 14:59

    Bonjour,
    je voudrais savoir si on peut mettre un autre fond que le noir du genre un joli image ?

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Rotation dynamique de texte (facile)

    Message par artkabis le Mar 2 Juin - 15:27

    Alors pour la jolie image, je pense que ceci va être difficile, car il te faudrait manipuler chaque image, soit par l'API soit par la classe Bitmapdata. Donc ça doit être possible, mais à quelle prix.


    _________________
    J'me fais de la pub et na tongue

    toutclic
    Ceinture blanche
    Ceinture blanche

    Messages : : 168
    Age : : 26
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 30/05/2009

    Re: Rotation dynamique de texte (facile)

    Message par toutclic le Mar 2 Juin - 15:34

    Bon vu que je debutant je crois que je vais me contenter du fond noir Smile

    Invité
    Invité

    Re: Rotation dynamique de texte (facile)

    Message par Invité le Mar 2 Juin - 17:45

    ca ne marche pas nan plus pour moi la rotation
    je suis sur cs3 et j ai remplacé aussi avec ton tweenmax

    *edit
    alors j ai testé et il n y a que avec CS4 que ca peux fonctionner je pense
    la fla pour CS4 c est bon mais celui du CS3 meme avec flash CS4 ca ne marche pas

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Rotation dynamique de texte (facile)

    Message par artkabis le Mar 2 Juin - 18:34

    Ceci est tout à fait normal, car c'est avec la version cs4 qu'est arrivé la gestion des outils 3D...


    _________________
    J'me fais de la pub et na tongue

    Invité
    Invité

    Re: Rotation dynamique de texte (facile)

    Message par Invité le Mar 2 Juin - 18:42

    chez greensock ils disent ca

    Changed "shortRotation" syntax - Previously,
    shortRotation could only affect the "rotation" property of an object,
    not 3D rotations like rotationX, rotationY, and rotationZ. Now [after
    activating the shortRotation plugin] you can pass an object with any
    number of properties that should be affected, like TweenMax.to(mc, 2,
    {shortRotation:{rotationX:-170, rotationY:100}}).


    *edit
    ok tant pis alors merci Smile

    graph74
    Nouveau membre
    Nouveau membre

    Messages : : 22
    Age : : 42
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 30/05/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Rotation dynamique de texte (facile)

    Message par graph74 le Lun 15 Juin - 12:18

    hello artkabis,

    peux-tu me dire si ton tuto est adapté pour la version pro 8 (as2) ?
    parceque j'ai essayé et j'avais un message d'erreur (je ne l'ai pas gardé) donc je voulais savoir si c'est moi qui ai fait une mauvaise manip ou si c'est simplement le codage qui ne convient pas à l'AS2.

    Contenu sponsorisé

    Re: Rotation dynamique de texte (facile)

    Message par Contenu sponsorisé Aujourd'hui à 2:12


      La date/heure actuelle est Dim 11 Déc - 2:12