Création de boutons avec Animate

Choisissez le type de bouton le mieux adapté à vos besoins.

La plupart des utilisateurs préfèrent les symboles de bouton, car ils offrent plus de souplesse. Les symboles de bouton contiennent un scénario interne propre à l’état des boutons. Vous pouvez facilement créer des états Relevé, Enfoncé et Survolé visuellement différents. Par ailleurs, les symboles de bouton modifient automatiquement leur état en réponse aux actions de l’utilisateur.

Vous pouvez utiliser un symbole de clip pour créer des effets de bouton sophistiqués. Les symboles de clip peuvent contenir pratiquement tout type de contenu, notamment une animation. Néanmoins, les symboles de clip ne disposent pas des états RelevéEnfoncé et Survolé intégrés. Vous pouvez créer ces états vous-même à l’aide d’ActionScript. L’un des inconvénients des fichiers de clip est qu’ils sont plus volumineux que les fichiers de bouton. 

Utilisez un composant de bouton si vous nécessitez uniquement un bouton standard ou un bouton bascule, et ne souhaitez pas le personnaliser outre mesure. Les composants de bouton ActionScript 2.0 et 3.0 disposent de code intégré permettant de modifier l’état des boutons. Par conséquent, il n’est pas nécessaire de définir l’aspect et le comportement des états de bouton. Il suffit de déplacer le composant vers la scène.

• Les composants de bouton ActionScript 3.0 permettent quelques personnalisations. Vous pouvez lier le bouton à d’autres composants, et partager et afficher les données de l’application. Ils disposent de fonctions intégrées, telles que la prise en charge de l’accessibilité. Les composants Button, RadioButton et CheckBox sont disponibles. 

• Les composants de bouton ActionScript 2.0 ne sont pas personnalisables. Ce composant permet de modifier l’état des boutons. 

Définissez les états de votre bouton.

Aspect du bouton lorsque l’utilisateur n’interagit pas avec.

Apparence du bouton lorsque l’utilisateur est sur le point de le sélectionner.

Aspect du bouton lorsque l’utilisateur le sélectionne.

Zone sensible aux clics de l’utilisateur. La définition de l’image Cliqué est facultative. Si votre bouton est de petite taille ou si sa zone graphique n’est pas contiguë, il peut être utile de définir cette image.

• Le contenu de l’image Cliqué n’est pas visible sur la scène lors de la lecture.

• Assurez-vous que le graphique de l’image Cliqué est une zone pleine suffisamment grande pour englober tous les éléments graphiques des images Relevé, Enfoncé et Survolé.

• Si vous ne spécifiez pas une image Cliqué, l’image de l’état Relevé est utilisée.

  Vous pouvez créer un bouton qui répond lorsque vous cliquez sur une autre zone de la scène ou la survolez (survol discontinu). Placez le graphique de l’image Cliqué à un emplacement différent de celui des graphiques de l’image du bouton.

Associez une action au bouton.

Pour qu’une réaction se produise lorsque l’utilisateur sélectionne un bouton, ajoutez du code ActionScript au scénario. Placez le code ActionScript dans les mêmes images que les boutons. Le panneau Fragments de code dispose de code ActionScript 3.0 pré-écrit pour de nombreux cas d’utilisation de bouton. Voir Ajout d’interactivité à l’aide de fragments de code.

 ActionScript 2.0 n’est pas compatible avec ActionScript 3.0. Si votre version d’Animate fait utilise ActionScript 3.0, vous ne pouvez pas coller du code ActionScript 2.0 dans votre bouton (et inversement). Avant de coller du code ActionScript d’une autre source dans vos boutons, vérifiez que la version est compatible.

Choisissez Modifier > Tout désélectionner ou cliquez sur un emplacement vide de la scène pour vous assurer qu’aucun élément n’est sélectionné.

Choisissez Insertion > Nouveau symbole.

Dans la boîte de dialogue Créer un symbole, entrez un nom. Pour le Type de symbole, sélectionnez Button.

Animate bascule en mode d’édition de symbole. Le scénario change et affiche quatre images consécutives, Relevé, Survolé, Enfoncéet Cliqué. La première image, Relevé, est une image-clé vide.

Pour créer l’image du bouton dans un état Relevé, sélectionnez l’image Relevé dans le scénario, puis utilisez les outils de dessin, importez un graphique ou placez une occurrence d’un autre symbole sur la scène.

Vous pouvez insérer des symboles graphiques et de clip dans un bouton mais pas un autre symbole de bouton.

Dans le scénario, cliquez sur l’image Survolé, puis choisissez Insertion > Scénario > Image-clé.

Animate insère une image-clé qui duplique le contenu de l’image Relevé précédente.

Sans désélectionner l’image Survolé, remplacez ou modifiez l’image du bouton sur la scène pour créer l’apparence requise de l’état Survolé.

Répétez les étapes 5 et 6 pour l’image de l’état Enfoncé et pour l’image facultative Cliqué.

Pour attribuer un son à un état du bouton, sélectionnez l’image correspondant à cet état dans le scénario et choisissez Fenêtre > Propriétés. Sélectionnez ensuite un son dans le menu Son de l’inspecteur des propriétés. Seuls les sons que vous avez importés vous sont proposés.

Lorsque vous avez terminé, choisissez Modifier > Modifier le document. Animate revient au scénario principal de votre fichier FLA. Pour créer une occurrence du bouton que vous avez créée sur la scène, faites glisser son symbole du panneau Bibliothèque vers la scène.

Pour tester la fonctionnalité d’un bouton, choisissez la commande Contrôle > Tester. Vous pouvez également afficher un aperçu des états d’un symbole de bouton sur la scène en choisissant Contrôle > Activer les boutons simples. Vous pouvez ainsi afficher les états Relevé, Survolé et Enfoncé d’un symbole de bouton sans utiliser la commande Contrôle > Tester.