« Les Bases de Flash : Animation simple

Les Bases de Flash : Boutons et symboles

le 15 juin 2009 • Flash • par Dawlin

Salut ! Aujourd'hui nous allons voir ce qu'est un symbole, et comment on crée un bouton !

Les Symboles

il y a trois types de symboles, stockés dans la bibliothèque de symboles :

Clip : abrégé clp : c'est une animation dans l'animation. Quand vous créez un clip et que vous insérez une animation dedans, vous pouvez l'inclure dans une autre animation. C'est une timeline dans une timeline.
Bouton : abrégé btn : un bouton, c'est un bouton, quoi !
Graphique : abrégé gfx : comme un clip, mais c'est juste un "conteneur" de dessin, il ne peut pas contenir d'animation (personnellement, je ne l'utilise jamais, je fais toujours un clip, au cas où j'en aurais besoin en tant que clp)

Note : je vous ai mis les abréviations car je les utiliserai des fois plus souvent dans mes tutoriels.

pour créer un symbole, deux solutions :

1, soit je crée ma forme, je la sélectionne et je clique sur "modification => convertir en symbole" (F8) (très important, le F8).

2, soit je clique sur "insertion => nouveau symbole" et je dessinerai dedans.

Note: je préfère la 1, parce qu'avec la 2 je suis obligé de prendre mon symbole dans la bibliothèque de symboles et le glisser où je veux sur la scène.

Dans les deux cas, une fenêtre s'ouvre :

Ici je vais prendre un bouton, pour commencer.

I - Bouton

J'ai donc mon bouton, si je double-clique dessus, je rentre dedans, c'est à dire que je me retrouverai dans mon bouton :

Et là, oh, bizarrerie, la timeline ne comporte que 4 frame... o_O... Pas de panique, la première image, c'est l'apparence du bouton normal. ici vert :

la deuxième, c'est le bouton en RollOver, c'est à dire quand on passe dessus. Ici rouge :

La troisième, c'est quand on clique dessus. Ici bleu :

On teste ?? CTRL+Entrée

Mais... ça fait rien quand je clique !!

Ben oui, aussi, on lui a pas encore dit de faire quelque chose...

Alors, on revient dans la scène principale, en cliquant sur

On clique une fois cette fois sur notre bouton et on va dans la fenêtre Actions (F9).

Là on a les actions du bouton, et uniquement du bouton. Le code qui est relatif à lui et lui seul.

Il faut savoir qu'un bouton ne supporte qu'un type de code : le gestionnaire on(){} tout ce que vous marquez comme code sera dans un truc comme ça.

Pour quand on clique, c'est


on(press){
	//Ici le code
}

donc entre parenthèse c'est "press", donc quand on clique, et entre accolades c'est tout le code qui surviendra. on peut rajouter plusieurs gestionnaires :


on(press){//quand on clique
	//Ici le code
}
on(rollOver){//quand on passe dessus
	//Ici le code
}
on(rollOut){//quand on passe dessus puis en dehors
	//Ici le code
}

Si vous tapez on( flash vous passe une liste de trucs à mettre. Vous pouvez les tester, ou regarder dans l'aide (F1) à quoi ils correspondent.

Bon, restons sur on(press){}

On va faire un lien externe vers Kommunauty, bien sûr

donc on utilise la fonction getURL(); (_blank, c'est nouvelle fenêtre)


on(press){//quand on clique
	getURL("http://www.kommunauty", "_blank");
	//dans l'aide F1, on voit comment utiliser getURL avec _POST et _GET !
}

Et ça donne.... TADAAAAAM :

Note: si je ne mets pas "_blank" ça ouvre dans la même fenêtre

Bien sûr, je ne suis pas obligé d'utiliser la fonction getURL, je peux faire que quand on clique ça fait quelque chose dans l'animation.

Trop simple, les boutons, avec Dawlin !

II - clip

Maintenant je crée un clip... Imaginons. J'ai une voiture :

Je la convertis en clip, avec F8. J'appelle ce clip voiture.

Dans ce clip voiture, je prends une roue, je la convertis en clip, je l'appelle roue1.

Je double-clique sur roue1, je rentre dedans. je fais une animation avec interpolation de mouvement où elle tourne sur elle-même, de même avec roue2 :

Bon c'est moche, mais c'est un dessin de présentation. on revient, encore, et on sur la première scène on a notre clip "voiture" qui contient le dessin de la voiture et les deux animations des roues.

Si je dis à ma voiture de bouger (comme le rond au tutoriel précédent) avec une interpolation de mouvement, ça va donner ça :

Et voilà, une animation dans une animation.

Si on combine avec l'autre bout de tutoriel maintenant, les boutons. On peut faire arrêter notre voiture en plein milieu !... on sait stopper l'animation, grâce au tutoriel précédent, on sait faire une action avec bouton... je vous laisse réfléchir au code du bouton qui fera ça :

ATTENTION ! Placez votre bouton sur un nouveau calque (clic-droit + nouveau calque) sinon vous allez casser l'interpolation !!

Allez, devinez le code... ce n'est pourtant pas compliqué...

Cliquer pour afficher la zone invisible

Fermer ce cadre

on(press) {
stop();
}

AAAAAHHH !!! mais mes roues continuent de tourner !!! Ben oui, le stop() ne s'applique qu'à la scène duquel il est lancé... On verra plus tard (je vous promet) pour arrêter les roues.

Voilà, merci d'avoir suivi ce tutoriel qui s'inscrit dans la suite de tutoriels flash,

Dawlin

Les Bases de Flash : Code : Coordonées »