Les boutons

Les boutons sont des symboles interactifs qui réagissent aux clics de la souris, à un survol ou à d'autres actions.
Les boutons sont composés de 4 images : les 3 premières images affichent les 3 états du bouton (haut, dessus, abaissé) et le 4ème définit la zone active du bouton (la zone sur laquelle l'action peut se faire).

 

Créer un bouton
Prenez une animation existante et insérez un nouveau calque pour créer le bouton dessus.
Ne cliquez pas sur une image, mais vous gardez ce nouveau calque sélectionné "1" (il doit être surligné de noir).
Dessinez un rectangle "2", blanc avec un contour noir "3"et des coins cassés "4" avec un rayon de 10 points, "5".
Et maintenant vous pouvez tracer votre rectangle sur la scène ! Vous pouvez convertir votre rectangle en symbole graphique pour le réutiliser ultérieurement, ou le convertir en bouton immédiatement.
Avec l'outil "flèche noire", encadrez votre rectangle pour le sélectionner : ouvrez le menu insertion puis convertir en symboles. Sélectionnez le symbole "bouton" et donnez un nom à votre bouton dans le champ "nom".
Double-cliquez sur ce bouton sur la scène pour ouvrir le symbole et le modifier.
Vous pouvez voir son nom en haut "6", il est composé de 4 images "7", mais une seule de ces images pour l'instant comporte un élémént : l'état haut.
L'état "haut" : c'est bouton tel que vous le voyez dans l'animation.
L'état "dessus" : c'est bouton comme vous le voyez quadn vous passez avec la souris dessus (le rol over).
L'état "abaissé" : c'est bouton que vous voyez quand vous cliquez dessus.
L'état "cliqué" : c'est la zone sensible du bouton, vous ne voyez pas cet état, c'est une zone invisble qui réagit au clic de la souris.
Postionnez-vous sur l'image du 1er état : vous pouvez modifier la couleur du bouton, en la sélectionnant dans le panneau "remplir".

Insérez une nouvelle image-clé (F6) pour l'état "dessus", modifiez sa couleur, vous pouvez mettre un dégradé si vous le désirez.

Faite de même pour l'état "abaissé".
Vous pouvez faire modifier un dégradé : sélectionnez l'outil "pot de peinture" puis cliquez sur le bouton d'option "8", double cliquez sur l'image que vous désirez modifier. Vous pouvez faire pivoter le dégradé en déplaçant le petit cercle en haut à droite que vous voyez apparaître, ou redimensionner ce dégradé à la taille du bouton en déplaçant le petit carré blanc du bas.

Insérez une nouvelle image (F5) pour l'état "cliqué".

Retournez sur la scène et testez votre bouton en ouvant le menu "contrôle" puis "tester l'animation" : cliquez sur le bouton avec votre souris. Vous pouvez aussi en avoir un pareçu sur votre scène, en cliquant sur le menu "contrôle" puis "activer les boutons simples".

Vous pouvez ajouter un texte sur un calque placé au dessus des images du bouton

  • soit un texte valable pour tous les états du bouton
  • soit un texte sur chaque état du bouton, en insérant des images dans ce nouveau calque
Vous pouvez constater que l'animation se lit en boucle. Grâce au bouton vous pouvez spécifier que la lecture se fera quand le bouton aura été cliqué.

Sélectionnez le calque sur lequel vous avez placé le bouton dans la scèene 1 et affichez le panneau "actions".

  • 1ère méthode : cliquez sur "actions de base", double-cliquez sur goto
    le code par défaut
    on (release) {
    gotoAndPlay (1);
    }
    signifie que l'action sera lue, au relâché du bouton, depuis l'image 1.
  • 2ème méthode : cliquez sur le signe "+" en haut à gauche "ajoute un nouvel élément au script" ; cliquez sur actions de base, puis cliquez sur goto .
    Fermez la fenêtre actions.
Si vous sélectionnez la première image du calque du bouton, vous pouvez déplacer cette image jusqu'à la dernière image de votre animation : le bouton n'apparaîtra qu'à la fin de la lecture de l'animation pour relancer la lecture, à condition que vous ayez défini une action stop sur cette dernière image de l'animation (actions, actions de base, sélection de stop).

 


Présentation de Flash5


Retour à l'accueil

Votez au Weborama