Macromedia FLASH Les symboles boutons. Comme nous l`avons

Macromedia FLASH
Les symboles boutons.
Comme nous l’avons indiqué, il existe trois types de symboles. Les symboles graphiques, les symboles boutons, les symboles clips.
Dans la famille des symboles les boutons sont dédiés à l’interactivité.
Avec eux, l’utilisateur peut interagir avec l’animation.
Rappel :
Comme tout les symboles, les boutons sont conteneurs.
Création d’un symbole bouton
Comme pour la création d’un symbole graphique, sélectionnez l’onglet Insertion/Nouveau Symbole (MAJ+F8)
On inscrit un nom btRond
On choisit la radio
Bouton
S’ouvre la fenêtre “créer un symbole”. On sélectionne la puce “Bouton”. Dans notre exemple nous donnons à notre symbole le nom btRond.
Une fois validé nous nous retrouvons à l’intérieur du symbole. Nous y découvrons une scène vide (aucun motif n’a encore été placé dedans). Au centre la
croix indiquant le centre du symbole. Ce qui diffère de ce que nous connaissons, c’est la zone scénario. Au lieu d’avoir une ligne de temps, nous avons
quatre cellules “Haut”, “Dessus”,”Abaissé”,”Cliqué”.
Logo des symboles Boutons
Le repère nous indique que l’on est à l’intérieur du symbole btRond
Pour revenir sur la
scène principale
Le scénario d’un symbole bouton ne contient
pas de ligne de temps, mais quatre cellules,
“Haut”, “Dessus”, “Abaissé”, “Cliqué”
Macromedia FLASH
A quoi correspondent ces cellules du scénario ?
A des états du bouton par rapport à une action de la souris.
En effet, les boutons sont des objets dont l’état est étroitement lié aux actions de la souris qui elle même est contrôlée par l’utilisateur.
Qu’est ce qu’une action de souris ?
Pour le comprendre, intéressons nous à ce qu’est une souris.
Une souris c’est un périphérique, c’est à dire un outil extérieur à la structure propre de l’ordinateur, qui peut communiquer avec ce dernier.
Bref c’est une sorte d’interprète qui permet à l’utilisateur (humain) de donner des instructions à l’ordinateur(machine).
Pour l’utilsateur, la souris a deux formes.
_ Une forme physique : C’est un objet qu’on déplace équipé d’ un ou deux bouton surlesquels ont peut appuyer.
_ Une forme virtuelle : A l’écran la souris est représentée par un curseur. Par convention, le curseur par défaut est une flêche blanche tournée vers le coin
haut gauche de l’écran.
Il est important de noter que dans sa représentation virtuelle, la souris obéit à des conventions et des règles définies en amont par les premiers programmateurs des interfaces graphiques.
Comprendre ces règles, qui pour les utilisateurs que nous sommes semblent aller de soit, est très pertinent pour expliciter ce qu’est une souris et par la
même qu’est ce qu’une action de souris et qu’est ce qu’un état de bouton.
On l’a vu, par défaut, une souris à l’écran c’est une flèche. L’utilisateur en bougeant sa souris physique, peut déplacer ce curseur à la surface de l’écran.
On le sait par habitude, si cette flêche survole un élément suceptible d’être cliqué, il se produit en général un”évènement” pour l’indiquer :
Une surbrillance (dans les menus, le fond de la zone devient bleu), voir un changement de la forme du curseur (la flêche devient une main blanche qui
pointe du doigt) etc...
Tout cela c’est de la convention.
Synthétiquement on pourrait dire qu’une souris à l’écran c’est une représentation graphique qui se modifie quand celle-ci survole une zône suceptible
d’interaction.
Cette notion de zône est très importante. Une souris ça interagit, (dans la plupart des cas), avec une “zône sensible”.
Hors de cette zône sensible, la souris ne peut pas interagir.
Par exemple, il existe au niveau du scénario, “le bouton” séquence 1 qui permet de revenir sur la scène principale. Au survol de ce dernier, le texte
séquence 1 apparaît en souligné, et le curseur flêche devient une main.
Si l’on clique en dehors de la zone correspondant à séquence 1, on ne reviendra pas sur la scène.
Bref, l’interaction n’est possible avec une souris qu’a partir du moment où il y a eu le survol d’une zone sensible.
Sur cette base là, l’interaction s’élabore souvent grâce à un clic de la souris.
Cela dit, cette interaction est un peu plus complexe qu’un simple clic.
Là encore faisons un test.
Plaçons la souris au dessus du “bouton” séquence 1.
Cliquons dessus sans relacher le clic de la souris puis déplaçons la hors de la zone séquence1 et relachons le clic.
Rien ne se passe.
Pour que nous rebasculions sur la scène principale, il faut non seulement que la souris survole la zone sensible, mais encore que le relachement du clic se
fasse alors que la souris survole encore la zone sensible.
Macromedia FLASH
Contrairement à ce que l’on pourrait penser, ce mécanisme ne va pas de soi. Il résulte de choix et d’une programmation.
Retenons cela, nous verrons en effet par la suite que par de la programmation, nous pourrons au niveau de nos animations contrôler comment les symbole et plus justement les occurences qui en découlent répondront aux commandes qui leur sont données (souvent par la souris).
Bref, on peut synthétiser les actions de souris en trois familles.
L’absence d’interaction.
Le survol
Le clic
C’est en rapport avec ces actions que se comprennent les 4 cellules du scénario du symbole bouton.
La première cellule “Haut” correspond à l’apparence qu’aura le bouton quand il n’y a aura pas d’interaction.
La deuxième cellule “Dessus” correspond à l’apparence qu’aura le bouton si il est survolé par la souris
La troisième cellule “Abaissé” correspond à l’apparence qu’aura le bouton si la souris est en survol au dessus et que l’on clic
La quatrième cellule “Cliqué” est très importante. C’est elle qui définit la zone sensible.
Pour comprendre, intégrons un motif à notre symbole bouton.
Plaçons la tête de lecture au nivreau la première cellule du scénario.
Dessinons au centre de la scène un rond rouge.
La tête de lecture est positionnée sur la première cellule
Une image clé apparait sous la cellule haut
Dessinons au centre de la scène un rond rouge
Macromedia FLASH
Retournons sur la scène principale en cliquant en haut du scénario sur séquence 1.
Faisons glisser la scène vide de la bibliothèque le symbole btRond.
Ouvrons la fenêtre de test d’animation (CTRL entrée)
Nous constatons que lorsque la souris survol le rond rouge, la souris change d’apparence. Au clic il ne se passe rien.
On comprendra que si les cellules “Dessus”, “Abaissé”, “Cliqué” ne sont pas remplies, elle prennent par défaut la valeur de la cellule “haut”.
Concernant la zone sensible, cela veut dire que la zone sensible à laquelle réagit le curseur de souris est semblable au motif présent en cellule “haut”.
Retournons à l’intérieur du symbole btRond.
Pour cela sur la scène principale double cliquons sur l’occurence de btRond.
Sélectionnons la cellule sous la cellule “Dessus”.
Celle ci gère l’apparence du bouton lorqu’il est survolé par la souris.
Nous allons faire en sorte qu’au survol, il change de couleur.
Pour cela crééons une image clé pleine (F6).
Sur la scène il y a à présent positionné en plein centre un rond rouge.
La cellule dessus sélectionné, on insère une image clé pleine
Un rond rouge apparaît au centre de la sène
Le rond rouge sélectionné, ouvrons la palette couleur et avec la pipette colorons le en vert.
Ouvrons à nouveau le testeur d’animatrion.
Au survole de la souris notre bouton devient vert.
Macromedia FLASH
Revenons à notre scène de symbole.
Sélectionnons la cellule “Abaissé.”
Insérons une image clé pleine.
Au centre apparaît le rond vert.
Sans le panneau transformer, nous allons modifier sa taille et chosir un rapport de proportion de 70%.
Dans le panneau transformer, on choisit un rapport
de 70 %
Lançons le testeur d’animation.
Quand la souris survol le bouton et que l’on clique dessus. Apparaît le bouton vert réduit.
Comme nous l’avons dit, la cellule “Cliqué” si elle n’est pas remplie est considéré par défaut comme semblable à la cellule haut.
Pour bien comprendre que c’est le motif rattaché à cette cellule qui définit la taille la forme et la localisation de la zone sensible du bouton, nous allons
créer une zone sensible de qui sera placé à côté du bouton. Ainsi c’est au survol de cette zone qui restera invisible que le bouton changera de couleur,
puis de taille.
Sélectionnons la cellulle “cliqué” et insérons une image clé vide (F7).
Sur la scène dessions un carré noir éloigner du centre
Macromedia FLASH
On insert une image clé vide dans la cellule cliquée. Le carré déssiné sur la scène,
elle se tranforme en image clé pleine
On dessine un carré noir loin du centre de la scène
Lançons la fenêtre de test de l’animation.
Quand la souris survol le bouton sur la scène il ne se passe rien.
Déplaçons le curseur de la souris sur la droite là où l’on a placé la zone sensible.
Le bouton change de couleur !