Roadbook

Caroline Boulanger

 Page précédente - Page suivante 

Différentes utilisations de boutons

Télécharger les fichiers

1 - Bouton simple : lien vers site

Créer un bouton (insertion / symbole / bouton), et y placer une image (identique) sur les 4 états : Haut, dessus, abaissé, cliqué, pour ne pas que le bouton change d'apparence selon des actions.
Déposer le bouton sur la scène, dans un calque et lui donner un nom d'occurence grâce au panneau Propriétés "occ_bouton_normal". Dans le panneau "Actions" (touche F9 pour faire appara^tre le panneau), mettre le code suivant :

		// ajoute un listener à notre bouton
			occ_bouton_normal.addEventListener(MouseEvent.CLICK, gotoAuthorPage);
		// fonction pour ouvrir une url lors du clic
			function gotoAuthorPage(event:MouseEvent):void
			{
				var targetURL:URLRequest = new URLRequest("http://www.rtai.fr/");
				navigateToURL(targetURL, "_blank");
			} 
		

2 - Bouton qui change de couleur au survol

Créer un bouton (insertion / symbole / bouton), et y placer une image (identique) sur les 3 états : Haut, abaissé, cliqué. Placer une image différente sur l'image "Dessus".

3 - Bouton animé lors du clic

Créer un bouton (insertion / symbole / bouton), et y placer une image (identique) sur les 3 états : Haut, dessus, cliqué. Placer une image différente sur l'image "Abaissé". Y ajouter une animation, par exemple sous la forme d'un movie-clip animé de la bibliothèque. L'aimation se lancera lorsqu'on clique sur le bouton.

4 - Bouton invisible qui devient visible au survol

Créer un bouton (insertion / symbole / bouton), et y placer une image (identique) sur les 3 états : dessus, abaissé, cliqué. Supprimer l'image sur le calque "haut". Le bouton, une fois sur la scène, sera invisible sauf lorsque la souris passera dessus et cliquera.

5 - Bouton switch "ON" / "OFF"

Créer deux movie-clip : une image représentant le bouton "ON" et une autre presqu'identique, repésentant le bouton "OFF". Créer ensuite un movie-clip "bouton-switch", dans lequel on place le bouton "ON" sur la première image, et le bouton "OFF" sur la deuxième image. Sur un calque "actions", placer le code stop(); sur les 2 images.

Placer sur la scène le bouton switch et lui donner un nom d'occurence "occ_btn_switch". Aller dans le panneau "Actions" (touche F9)

		//ajout du listener sur le bouton
			occ_btn_switch.addEventListener(MouseEvent.CLICK, gotoSwitch);
		// fonction qui fait naviguer entre l'image 1 et 2
			function gotoSwitch(event:MouseEvent):void
			{	
				if (occ_btn_switch.currentFrame == 2) 
				{ 
					occ_btn_switch.gotoAndPlay(1); 
				} 
				else 
				{ 
					occ_btn_switch.gotoAndPlay(2); 
				}
			}
		

L'animation en HTML5

Conversion avec Swiffy

Comparatif de poids

Fichier source (.FLA)

Fichier Flash Player (.SWF)

Fichier HTML5 (.HTML)

Poids

34 ko 13 ko 38 ko

 Page précédente - Page suivante