AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Animation simple de bouton

    Partagez
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Lun 9 Fév 2009 - 1:26



    Bonsoir !
    Je viens vous proposer un tuto que j'ai d'abord commencé sous photoshop... pour finalement concevoir une vidéo complète sous Flash... ben ouais je voulais tester ce que ça donnait.

    Vous me direz ce que vous pensez de la mise en forme ainsi que du contenu du tutoriel. Si jamais ma voix suave de mâle fatiguée par une journée de bricolage ne vous convient pas, je vous fournirais une version imagée.
    Tuto Flash

    Les images
    -----Image base --------- Image hover --------- Image Cliquée
    - -

    Bonne vidéo Wink

    Lien direct: Tutoriel complet (cliquez sur lecture, mettez en pause et laissez charger 5 minutes)
    Code:
    btn1.onRollOver = function() {
       clip1.gotoAndPlay(2);
    };
    btn1.onRollOut = function() {
       clip1.gotoAndPlay(21);
    };
    btn1.onRelease = function() {
            clip1.gotoAndPlay(30);
       getURL("accueil.php");
    };

    Explications du code
    Ligne 1 :Pour l'évènement de survole du "btn1", une fonction aura pour effet de...
    Ligne 2 :...d'aller à la frame 2 du "clip1" et de commencer à jouer ce clip
    Ligne 3 :fin de la fonction pour le premier évènement
    Ligne 4 à 6 :Idem pour l'évènement RollOut (lorsque l'on quitte le bouton)
    Ligne 7 à 10 :Répétition de la même fonction pour l'évènement de clic. GetURL permet de rajouter un lien au moment du clic, ici vers "accueil.php" mais vous pouvez mettre n'importe quel lien

    Voilà, j'avais promis ce petit tuto à Shin', en espérant qu'il lui soit utile Wink

    Edit : Je referais certainement la bande son.... et même la vidéo complète, car en revisionnant la vidéo j'ai l'impression que ce tuto ne s''adresse qu'à ceux qui manipulent déjà pas mal le logiciel... il y a des points de détail que j'omets involontairement.

    Bisous


    Dernière édition par Riku Asakura le Dim 28 Nov 2010 - 23:05, édité 11 fois




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Ankajimar
    MasculinAge : 23Messages : 2478

    le Lun 9 Fév 2009 - 1:45

    Preum's !! Super tuto Riku =D J'adore ^^
    Avec la voix de Riku et tout =O c'est trop fort =D =D =D

    J'suis fan =O




    Come Back !
    avatar
    Fura
    FémininAge : 29Messages : 5881

    le Lun 9 Fév 2009 - 1:52

    Excellent Oo
    (moi je serais intéressée à savoir comment on fait la vidéo xD )
    plus sérieusement j'ai regardé vite fait (sans son, inikaam dort à côté -__-) mais je rezieuterai demain tranquilement :)
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Lun 9 Fév 2009 - 1:59

    Ah ben merci les cocos Razz
    Je ferais un tuto/astuce sur la prise de vidéo alors Wink
    En gros capture de la vidéo (sans son hélas) en .avi, rajout du son avec movie maker la narration.
    Le tout donne un fichier windows media convertible en .flv avec flash, et tu connais le suite je pense... m'enfin je détaillerai dans une prochaine astuce.

    Bisous Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Lun 9 Fév 2009 - 2:09

    Yeah ! Super Riku !

    Merci Wink



    avatar
    Gold Hawk
    MasculinAge : 23Messages : 12682

    le Lun 9 Fév 2009 - 2:14

    Plop ^^

    Très sympa, un grand merci ^^

    (la voix Suave du mâle XD Trop puissant *__* )



    avatar
    Fura
    FémininAge : 29Messages : 5881

    le Lun 9 Fév 2009 - 2:35

    Riku Asakura a écrit:Ah ben merci les cocos Razz
    Je ferais un tuto/astuce sur la prise de vidéo alors Wink
    En gros capture de la vidéo (sans son hélas) en .avi, rajout du son avec movie maker la narration.
    Le tout donne un fichier windows media convertible en .flv avec flash, et tu connais le suite je pense... m'enfin je détaillerai dans une prochaine astuce.

    Bisous Wink

    yeah merci *_*
    bah surtout pour la capture, après, je passe par Adobe première :p
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Lun 9 Fév 2009 - 12:34

    Oui d'ailleurs faudra que tu m'expliques Adobe Première... parce que je l'ai ouverts j'ai parcouru la chose... et j'en suis resté là tellement il me faisait peur XD...
    Excusez-moi, hier j'étais tellement claqué que j'en ai oublié le code Actionscript principal et ses explications.
    Je vais manger un bout et je vous le donne Wink

    Edit : voilà c'est complété.

    Je mets à disposition cette astuce pour les intéressés aussi.




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Fura
    FémininAge : 29Messages : 5881

    le Lun 9 Fév 2009 - 15:15

    Vui j'pourrais t'expliquer les bases si tu veux :p
    Il fait peur mais en fait il est assez simple^^
    (m'enfin faudra qu'je le relance avant ça fait pfouh... 6 moi qu'je l'ai pas utilisé? Oo)
    avatar
    Silver
    MasculinAge : 23Messages : 6173

    le Lun 9 Fév 2009 - 16:06

    IL A FAIT LE TUTO *-*
    Je le trouve compréhensible , j'ai débuté ya pas longtemps sauf peut être quelques endroits ou j'appellerai a l'aide ^^'
    Merci du partage ^^


    PS : Et quelle voix XD




    «L’homme exploite l’homme et parfois c’est le contraire.»



    * Art Silver *
    - -
    avatar
    Benjix
    MasculinAge : 24Messages : 625

    le Lun 9 Fév 2009 - 19:16

    Respect!!

    Bravo!!





    -------------------"I'm a Drummer"---------------------------------


    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Lun 9 Fév 2009 - 22:10

    lol merci à tous.

    J'ai refais le tuto en version longue, beaucoup plus détaillée pour les novices.
    Forcément elle est beaucoup plus longue (environ 13 minutes) et hébergée sur Free cette fois, il vous faudra donc la laisser charger (faites lecture, puis pause, et attendez 5 minutes au moins).

    Au plaisir Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Ema Nymton
    FémininAge : 29Messages : 242

    le Lun 9 Fév 2009 - 22:44

    Je te l'ai déjà dis mais bon...

    Moi je l'aime ta voix suave de mâle fatigué(et pas ée :p) par une journée de bricolage !

    💋


    Edit : Tu m'as tellement perturbée que j'en oublis de dire ce que je pense du tuto XD


    Bah même si j'utilise pas flash, j'ai presque tout compris Very Happy


    Merci Wink



    Douloureux et passif, l'Amour en négatif...
    avatar
    Silver
    MasculinAge : 23Messages : 6173

    le Lun 9 Fév 2009 - 22:46

    Heureusement que ya pas Silia dans les parages XD
    J'aime mieux la version plus détaillé enfete ^^
    J'ai bien réussi mais le truc le moins bien c'est le bouton >_<




    «L’homme exploite l’homme et parfois c’est le contraire.»



    * Art Silver *
    - -
    avatar
    Silia
    FémininAge : 30Messages : 2825

    le Lun 9 Fév 2009 - 22:50

    Si je suis là, mais je commence à avoir l'habitude silver de ce genre de chose XD
    Mais malheureusement pour certaine, je peux profiter de cette voix suave tous les jours XD, j'en ai de la chance
    bon j'arrête le flood

    Sinon bon tuto mon chéri ^^




    L'ignorance est la pire des souffrances

    avatar
    Minato
    MasculinAge : 23Messages : 2334

    le Lun 9 Fév 2009 - 23:40

    Ahahahaha la voix de Riku, elle démonte x')

    Sinon, merci pour le tuto **



    avatar
    Primo
    MasculinAge : 22Messages : 906

    le Mar 10 Fév 2009 - 9:42

    Ouais super voix Riku !
    Bref sinon super tuto je vais peut être télécharger Flash 8 même si je pense que j 'aurais du mal au début bien sûr ,franchement excellent tuto et super résultat.





    The Fire of the Light
    Si seulement je pouvais voir ton sourire chaque jours..
    avatar
    Pyrrha
    MasculinAge : 26Messages : 1985

    le Mar 10 Fév 2009 - 13:25

    Peut-être que si tu as encore le .FLV, tu pourras nous mettre en dessous de la vidéo le rendu en flash, que les gens comprennent mieux, ça parle plus de s'amuser sur un bouton! Razz

    Bon boulot! =)



    avatar
    Silver
    MasculinAge : 23Messages : 6173

    le Mar 10 Fév 2009 - 13:33

    Ben dans le tuto les boutons pause et stop ont etait fait avec la meme technique non ?




    «L’homme exploite l’homme et parfois c’est le contraire.»



    * Art Silver *
    - -
    avatar
    Ema Nymton
    FémininAge : 29Messages : 242

    le Mar 10 Fév 2009 - 14:03

    Heu oui :x



    Douloureux et passif, l'Amour en négatif...
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Mar 10 Fév 2009 - 17:30

    En fait non, seul le bouton lecture est l'équivalent du rendu, les boutons stop et pause sont fait autrement Razz
    M'enfin je peux en effet vous mettre le rendu du tuto même... ce que je vais faire de suite Wink

    Bisous, amusez-vous bien Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Pyrrha
    MasculinAge : 26Messages : 1985

    le Mar 10 Fév 2009 - 18:15

    Merci, c'est plus sympa et parlant! :)



    avatar
    Legend
    MasculinAge : 30Messages : 424

    le Mer 11 Fév 2009 - 21:47

    Pas mal du tout. Pour faire des videos format flash ya une multitude de solutions ...

    Enfin l'idée du tuto vocal c'est une bonne idée. La ptite voix genre mec blasé et sur de lui j'adore XD





    Présence rare, veuillez m'en excuser
    Tout art tire son origine d'un défaut exceptionnel
    avatar
    Shinomix
    MasculinAge : 24Messages : 3445

    le Sam 14 Fév 2009 - 16:38

    Magnifique tuto Riku ! La vidéo ça a la classe *-*
    Mais j'ai un problème X_x Je veux intégrer deux animations comme la tienne que je combine avec les codes de lecteur musical. J'ai terminé tous la mise en place sur la timeline et l'AS.
    => Avec un bouton, effet de rollover normal et démarrage de la musique.
    => Avec deux boutons, si je passe sur le deuxième c'est le premier qui s'anime.
    En gros j'ai pas d'anim sur le deuxième bouton :|

    Voilà mon code pour mon clip1 :


    Code:
    btn1.onRollOver = function() {
      clip1.gotoAndPlay(2);
    };
    btn1.onRollOut = function() {
      clip1.gotoAndPlay(21);
    };
    btn1.onRelease = function() {
            clip1.gotoAndPlay(30);
                play();
            song = new Sound();
      song.attachSound("musique");
      song.start(0,100);
    };

    Et voilà mon code pour le clip2 :

    Code:
    btn2.onRollOver = function() {
      clip1.gotoAndPlay(2);
    };
    btn2.onRollOut = function() {
      clip1.gotoAndPlay(21);
    };
    btn2.onRelease = function() {
            clip1.gotoAndPlay(30);
              stopAllSounds();
    };

    Sachant que j'ai vérifié avoir modifié les bons noms d'occurence ça ne marche pas pour autant T-T
    Merci d'avance pour ton aide (j'ai tendance à toujours compliquer xD).



    avatar
    SpanK
    MasculinAge : 24Messages : 1295

    le Dim 15 Fév 2009 - 20:12

    Parfait le rendu !
    Ça va m'aider pour mes futurs expériences graphique.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 19 Oct 2017 - 13:03