Trucsweb.com

Trucsweb.com

Flash

Créer un bouton en Flash 5

RDFFav

Créer un bouton en Flash 5 - Votre premier bouton animé et interactif simple

Les boutons en Flash sont des symboles interactifs composés de quatre images. Lorsque vous créez un bouton, Flash lui désigne un scénario avec quatre images. Les trois premières images affichent les trois différents états du bouton et la quatrième définit la zone active du bouton.Onmouseevent événements release relâcher lien son relatif chemin path get url goto and play self blank parent top bouton interactif états normal rollover réactives symbole up over down hit library cadre calque layer frame bibliothèque keyframe cléCréer un bouton en Flash 5 - Votre premier bouton animé et interactif simple

  • · Niveau : DÉBUTANT
  • · Compatibilité : Flash 3, 4 et 5

Les boutons en Flash sont des symboles interactifs composés de quatre images. Lorsque vous créez un bouton, Flash lui désigne un scénario avec quatre images. Les trois premières images affichent les trois différents états du bouton et la quatrième définit la zone active du bouton. Le bouton ne fait pas partie du déroulement temporel de votre animation mais il réagi simplement aux mouvements et aux actions de la souris. Pour le rendre interactif dans une animation vous devez le placer sur la scène et lui affecter des actions. C’est très important de ne pas affecter d’actions dans le scénario du bouton mais bien directement sur la scène.

Chaque image dans le scénario d’un symbole de bouton possède une fonction spécifique :
- HAUT / UP : La première image quand la souris n’est pas au-dessus du bouton.
- DESSUS / OVER : La deuxième image quand la souris se trouve au-dessus du bouton.
- ABAISSÉ / DOWN : La troisième image quand vous cliquez sur le bouton ou plutôt sur la zone sensible.
- CLIQUÉ / HIT : La quatrième image, l’état Cliqué, définit la zone sensible qui réagit au clic de la souris.
Cette zone est invisible dans l’animation.

Enfin, lors de la création du bouton, vous pouvez attribuer un son à chaque état.

Exemple des deux boutons que nous allons réaliser. Ils ont 3 états (clip, MovieClip) et deux sons.

Notes
Dans le tutoriel suivant, les touches de raccourci sont indiquées pour les systèmes Windows, pour Macintosh vous n’avez qu’à remplacer la touche " Ctrl " par " Commande ". Pour le clic de droit, sur Macintosh vous devez faire "Commande+Clic". Les commandes sont en français suivit par les commandes anglaises pour ceux qui utilisent un logiciel en anglais. Malheureusement les exemples de fenêtre sont en anglais.

La création d’un bouton nécessite des images ou des symboles de clip (MovieClip) et des sons. Personnellement, je ne passe pas beaucoup de temps sur la scène. Le travail de la scène est un peu comme la répétition générale. Je travail surtout en mode d’édition de symboles pour créer ou importer mes images, construire mes symboles de clip (MovieClip) qui seront ensuite utilisés pour créer mes boutons. L’exemple ci-dessous montre les trois symboles que j’ai créés pour construire le premier et le deuxième bouton. Il s’agit de trois symboles de clip (MovieClip). Si vous ne savez pas comment créer un clip vous pouvez utiliser des images simples.

Images "états" du bouton #1


Images "états" du bouton #2

La création du bouton

  1. Choisissez INSERTION => Nouveau symbole [Ctrl+F8]. (INSERT => New symbol).

  2. Dans la boîte de dialogue Propriétés du symbole, entrez le nom du nouveau symbole de bouton et dans Comportement, choisissez " Bouton " (button).

  3. Flash bascule en mode édition de symboles. L’en-tête du scénario change pour afficher quatre cadres consécutifs intitulés Haut (up), Dessus (over), Abaissé (down) et Cliqué (hit). La première image, Haut, est une image-clé vide (Keyframe).

  4. Pour créer l’image du bouton dans un état Haut, utilisez les outils de dessin, importez un graphique ou placez l’occurrence d’un autre symbole comme un clip sur la scène. Pour voir vos images et autres symboles disponibles, ouvrer la bibliothèque (library) FENÊTRE => Bibliothèque [Ctrl-L]. (WINDOW => Library). Et glisser le symbole sélectionné sur la scène. Utiliser le " + " pour centrer l’image.

    Dans un bouton, vous pouvez utiliser un symbole graphique ou un symbole de clip, mais vous ne pouvez pas utiliser un autre bouton dans un bouton. Si vous souhaitez créer un bouton animé, utilisez un symbole de clip.

  5. Cliquez sur le deuxième cadre, intitulée Dessus (OVER), et choisissez INSERTION => Image-clé [F6]. (INSERT => Keyframe). Flash insère une image-clé et copie l’image Haut dans ce nouveau cadre.

  6. Remplacez l’image du bouton par l’image de l’état Dessus en vous assurant qu’elle est à la même position (à moins de vouloir faire un effet de mouvement).

  7. Répétez les étapes 5 et 6 pour les images " Abaissé et Cliqué ".

    L’image de l’état Cliqué (HIT) n’est pas visible sur la scène, mais elle définit la zone sensible du bouton qui réagit au clic. Assurez-vous que le graphique de l’image Cliqué est une zone pleine suffisamment large pour englober tous les éléments graphiques des images Haut, Abaissé et Dessus. Elle peut aussi être plus large que le bouton visible. Si vous ne spécifiez pas d’image pour l’état Cliqué, l’image de l’état Haut sert alors d’image pour l’état Cliqué. C’est pourquoi un bouton réalisé avec du texte oublige l’usager à cliquer sur le texte. Donc, si votre bouton à été créé avec du texte, assurez-vous d’ajouter une image sur le cadre Cliqué (HIT).
Ajouter du son
Pour associer un son à un état du bouton, vous devez ajouter un calque (layer) INSERTION => Calque. (INSERT => Layer), Sur le cadre (frame) de l’état du bouton où vous désirez un son, ajouter une image-clé [F6] (Keyframe). Cliquer le bouton droit de la souris sur la nouvelle image-clé et choisissez Propriétés (Properties). Dans l’onglet Son (Sound), sélectionnez dans le menu déroulant Son (Sound) le son que vous voulez. ATTENTION, vous devez au préalable importer vos sons pour qu’ils soient disponibles.

Ajouter le bouton dans votre animation
Votre bouton est terminé. Vous devez maintenant l’ajouter à votre animation. Retourner sur la scène principale. Dans le coin supérieur droit, cliquer sur le sélecteur de scène et sélectionner la scène où doit apparaître votre bouton.

Sélectionnez l’occurrence de votre bouton dans la bibliothèque et glisser le sur la scène à l’endroit ou vous le désirez. ATTENTION, il est préférable de créer un Calque (Layer) propre à chaque bouton.

Ajouter une action ou un hyperlien au bouton.
  1. Assurez-vous d’être sur le Calque (layer) de votre bouton, cliquer le bouton de droit de la souris et sélectionner Propriétés (Properties).

  2. Dans l’onglet Action, pour les versions Flash 3 et 4, sélectionnez, à l’aide du symbole " + ", l’action Lors d’un événement souris (OnMouseEvent) . Avec la version de Flash 5, dans la liste de zone d’outils, à gauche du panneau Actions, cliquez sur la catégorie Actions de base pour afficher les actions de base. Sélectionnez l’action On Mouse Event.

  3. Version Flash 3 et 4, dans Événement (event) : Cliquer l’événement " Release " (quand le bouton de la souris est relâché sur le bouton). Pour la version Flash 5, dans la section Paramètres, pour Événement, sélectionnez l’événement de souris ou de clavier " Relâcher " (quand le bouton de la souris est relâché sur le bouton).

  4. Une fois l’événement déterminé, vous devez ajouter l’action à exécuter pendant l’événement. Cliquer de nouveau sur le symbole " + " et choisissez l’action.

    - Avec un lien URL
    Pour ouvrir une nouvelle page HTML. Sélectionner l’action Get URL. Dans la section Paramètres, entrer l’URL de la nouvelle page HTML à charger. Vous pouvez utiliser un chemin relatif, par exemple : mapage.html (qui doit se trouver dans le même répertoire) ou un chemin absolu, par exemple : http:///www.adresse.com/mapage.html. Noter qu’un chemin relatif part du répertoire où se trouve la page actuelle. Vous pouvez aller vers d’autres pages en parcourant les répertoires, par exemple : répertoire1/répertoire2/mapage.html. Pour revenir dans la hiérarchie des répertoires, utiliser deux point, par exemple : ../../mapage.html (revient de deux répertoires).



    Dans Fenêtre, spécifiez la fenêtre (window) où la page HTML sera chargée, de la manière suivante :

    Choisissez parmi la liste des noms de cibles réservés suivants :
    _self : la fenêtre courante.
    _blank : une nouvelle fenêtre.
    _parent : Le parent de la page courante (pour les pages HTML avec cadre ou frame).
    _top : La fenêtre du plus haut niveau dans la fenêtre courante.

    Ou, entrez le nom d’une fenêtre ou d’un cadre spécifique tel qu’il apparaît dans le fichier HTML.

    Dans Variable, choisissez une méthode d’envoi des variables pour l’animation chargée à l’emplacement indiqué dans le champ URL. Cette option est seulement utilisée pour l’envoi de variable par un formulaire ou une commande FSCommand à un programme serveur. Ne rien mettre si le bouton ne fait qu’un lien.

    - Lien interne
    Pour un lien vers un autre cadre de votre animation ou une autre scène, sélectionner GO TO au lieu de GET URL. Choisissez la scène et le cadre où l’animation devra se poursuivre ET N’OUBLIEZ PAS de cliquer en bas l’option " And play ".

Activer et tester vos boutons
Par défaut, Flash conserve les boutons désactivés lors de leur création afin de faciliter leur sélection et leur utilisation. Lorsqu’un bouton est désactivé, il suffit de cliquer dessus pour le sélectionner. Lorsqu’un bouton est activé, il réagit aux événements déclenchés par la souris que vous avez spécifiés comme lorsque l’animation est en lecture. Vous pouvez quand même sélectionner les boutons activés. En règle générale, désactivez les boutons pour travailler dessus et activez-les pour tester rapidement leur comportement.

Activer et désactiver les boutons
Choisissez CONTRÔLE => Activer les boutons simples. Une coche apparaît en regard de la commande pour indiquer que les boutons sont activés. Choisissez de nouveau cette commande pour désactiver les boutons.

À présent, tous les boutons de la scène répondent. Lorsque vous déplacez la souris au-dessus d’un bouton, Flash affiche l’image Dessus ; lorsque vous cliquez à l’intérieur de la zone active du bouton, Flash affiche l’image Abaissé.

Pour vraiment tester vos boutons, en particulier un lien URL externe, Choisissez FICHIER => Publier un aperçu et choisissez HTML [F12]. (FILE => Publish preview > HTML).
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Bonjour, je voudrais vous remercier de cet article très utile. je souhaite mettre un bouton de paiement et je voudrai utilisé comme image de bouton un logo. Est cela est possible? si oui, pouvez vous me dire comment SVP? Cordialement, Farida BEN ASSOULA
    64x64
    Ben assoula
    Date (GMT) : 2016-08-25 13:19:21 (UTC +0000)
    • Salut, Yarrrk, beurk! Ils sont laids mes boutons ;- ) J'espère que tu ne travailles pas avec ce vieux Flash 5. Je ne conseille pas du tout d’utiliser Flash pour créer un bouton. À l'époque 100% des navigateurs étaient équipés PAR défaut avec un plugiciel Flash (de Macromedia). Ça allait de soi, c'était fluide, et très pratique pour créer une « streem » entre le serveur et le client. Mais c'était avant, avant l'achat par Apple. Depuis, cette technologie n'est plus installé par défaut, elle bâdre tout le monde avec ces mises à jour interminables et les problèmes d'autorisation et sans compatibilité avec la plupart des mobiles. Et ce, sans avoir les avantages de jadis depuis le CSS3 et le Ajax. Sinon, oui, tu peux ajouter une image en l'important et en la glissant sur le bon frame. N'hésite pas si tu as d'autres questions, j'ai sans aucun doute mal compris ton message. D'ailleurs ça m'étonne que ce vieux tutoriel complément désuet soit encore utile... Ciao
      64x64
      OZNOG
      Date (GMT) : 2016-08-30 12:31:6 (UTC +0000)


    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

           Visites : 13012 - Pages vues : 109821
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @