Tutoriels Trucsweb
          

Créer un bouton en Flash 5

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

Django (Oznog) Blais, Trucsweb (28 novembre 2000)


  • · 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).

.

Partager | Print AmiE Haut de page
[Mod] Dernière mise à jour : 2010-01-05
TrucswebTrucsweb



sp
 S U R   L E   S U J E T 
sp
Créer un bouton en Flash 5 - Trucsweb
Créer un bouton en Flash 5 - Votre premier bouton animé et interactif simple
Syndication du sujet
 
 
sp
 T U T O R I E L S 
sp
· ASP / VBscript
· C/C++
· CSS
· DHTML
· CGI / Perl
· HTML
· Java/JSP
· Javascript
· PHP
· SSI
· WAP/WML
· XML/XSL
· Infographie
· Flash et Shockwave
· Audiovisuel
· Hébergement
· Analyses de logiciels
· Internet et Protocoles
· Veille intégrée
· Référencement
· Sécurité
· Outils gratuits
 
sp
 F O R U M S 
sp
· Forum Javascript
· Forum HTML/CSS
· Forum ASP/VBScript
· Forum Flash
· Tous les forums
 
sp
 S E R V I C E S 
sp
Generateur Trucsweb
· Générateur
· Répertoire
· Logithèque
· Glossaire
· Forum
· Nouveautés Dev Zone
· Ajouter un site
· Ajouter un logiciel
· Ajouter un tutoriel
· Fil d'info sur votre site
· Tester votre site
 
sp
 A P P L I C A T I O N S 
sp
· twCompteur 1.0 sp
· twCalende 1.0 sp
· twLiMenu 1.0 sp
· twValide 2.2 sp
· twAliste 1.0 sp
· twASPDate 2.0 sp
· twASPLivre 1.0 sp
 
sp
 R É F É R E N C E S 
sp
· W3C HTML 4.0
· W3C XHTML 1.0
· Web Design Group
· W3C SMIL 2.0
· W3C XML 1.0
· XML Cover Pages
· W3C CSS LEVEL 2
· Netscape Javascript 1.5
· Netscape Javascript 1.4
· Netscape Javascript 1.3
· Netscape DHTML
· Gecko DOM ref.
· IE DHTML
· VBScript Language Ref.
· JScript Language Ref.
· ASP Object Quick Ref.
· ADO API Reference
· Microsoft IIS5
· MSDN Library
· RFC Editor Site
· HTML 4.0 code de caractères
· Unicode fonts
· Manuel PHP
· Documentation Perl
· Perl 5 Reference Guide
· Flash actionscript FAST
· ActionScript dictionary
· MySQL Manual
· SQL Pro (F. Brouard)
· Java Language Spec.
· Java 2 SDK Doc. V1.3.1
· JavaServer Pages Ref.
· C/C++ Language Ref.
· Python Library Reference
· Les Navigateurs
· Terminologie d'Internet
· Traduction
· Traduction systran
· Traduction d'interface client
· Extensions de fichiers
· Virus Wildlist
· Virus Alerts
 
sp
 P U B 
sp
 
sp
 C O P Y R I G H T  
sp

 

accueil | tutoriels | logithèque | répertoire | forum



© 1997-2014
Django Blais
L'Isle-Verte, Québec
Ajouter à votre Sidebar  RSS 1.0
 
Conception Oznog co. Multimédia

Hit-Parade    Tout navigateurs   

12 visiteurs