Animate CC 2015 HTML5 Canvas - Boutons

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Tutoriels Flash

<pageby nominor="false" comments="false"/>

Introduction

Objectifs d'apprentissage
Apprendre à créer des boutons en Flash CS4 ou CS3
Quelques notions de ActionScript
Prérequis


Matériaux
buttons-intro

Les boutons sont des composants d'interface qui permettent d'ajouter une interactivité, comme par exemple l'affichage d'informations supplémentaires, lancement d'un clip vidéo, des "sites web" faits en Flash, etc.

Il existe trois types de boutons:

  • Les boutons "Flash" discutés dans ce module
  • Les Composants de type bouton qui font partie de la bibliothèque de composants intégrés fournissant divers composants de l'interface faciles à utiliser. Ne marchent pas avec HTML5 / Canvas
  • Tout objet peut servir de bouton. A vous de programmer son animation (si nécessaire).

Le résumé - Boutons Flash

(1) Dessinez quelque chose et transformez le dessin en bouton (ça peut également être une image que vous transformez en bouton). Pour ce faire, il faut tout sélectionner, clic droit, puis Convert to symbol (ou F8). Ensuite, dans la fenêtre des propriétés, sous type, sélectionnez Button;

(2) Pour utiliser un bouton:

  • Il faut ajouter du code ActionScript, qui réagira aux gestes de l'utilisateur comme les clics de souris.
Un mot d'avertissement

ActionScript 2.0 et ActionScript 3.0 (Flash CS3 / 9 et versions ultérieures) ne fonctionnent pas de la même façon!

  • ActionScript 2.0: oubliez !
  • ActionScript 3.0: Il faut assigner un "gestionnaire d'événement" au bouton, c'est-à-dire une fonction qui sera déclenchée lorsque qqun appuie sur le bouton. Dans ce tutoriel, nous couvrirons les trois éléments de programmation nécessaires pour ce type de tâche.
  • JavaScript est similaire à ActionScript 3.0, mais tous les détails sont différents ....
Astuce

Si vous n'avez aucune expérience en programmation, on vous conseille de télécharger les fichiers sources (liens ci-dessous) et de jouer avec eux, par exemple ajouter un bouton supplémentaire et adapter le code. Vous pouvez également vous referez au "code snippets" pour donner une fonction à vos boutons. En cliquant sur code snippets, vous aurez une liste de fonctions avec un code deja écris.

Les boutons intégrés de Flash

Flash contenait une variété de boutons pré-construits jusqu'à la version CS6. Pour les utiliser, il fallait fixer le panneau Library-Buttons.fla panneau à côté de votre panneau library: MenuWindow-> Common libraries-> Library - Buttons.fla.

Si vous avez un ancien Flash, vous pouvez copier/coller ces boutons et les adapter à vos besoins (lire Flash CS4 - Boutons). Toutes les "common libraries" ont été enlevés dans Flash CC, mais on peut les récuperer de Flash CS6:

    • Dans Flash CC: File -> Import -> Open External library
    • Ensuite indiquer l'emplacement du fichier *.fla qui contient les objets de la bibliothèque, par exemple:
C:\Program Files (x86)\Adobe\Adobe Flash CS6\Common\Configuration\Libraries\Buttons.fla
etc.

Architecture des boutons

Les boutons Flash (button symbols) contiennent tous quatre frames et un nombre variable de layers. Vous pouvez tout changer, à part le nombre et le nom des frames.

Les quatre frames obligatoires pour les button symbols sont:

Up
Le dessin qui apparaît lorsque le bouton est affiché sur la scène sans être "touché" par l'utilisateur
Over
Dessin lorsque l'utilisateur déplace la souris dessus. Par exemple un effet de "highlighting" (surbrillance).
Down
Dessin lorsque l'utilisateur clic dessus
Hit
Défini la zone sensible à la souris. Son contenu ne sera pas affiché. Permet par exemple de définir une zone sensible plus réduite.

Les différentes sortes de boutons ont des différentes calques (habituellement entre trois et cinq selon la complexité des dessins). Ces couches contiennent juste des dessins pour trois états (up, down et over) du bouton. Le moteur de Flash, va sélectionner le frame approprié en fonction de l'action de l'utilisateur (souris ailleurs, souris dessus, la souris appuyé, etc.)

Les débutants sont conseillés d'utiliser ces boutons "tel quel". Il n'est pas nécessaire de changer autre chose que l'étiquette....

Différence entre les boutons livrés avec Flash et les vôtres (voir ci-dessous)

Il n'y a aucun différence entre les boutons intégrés et celles que vous pouvez créer vous-même.

Dans la section suivante, nous allons d'abord voir comment utiliser un bouton pour lancer une fusée.

Créer des boutons pour naviguer dans le scénario

Exemple lance-missiles

Flying Flash rocket

Le but c'est de faire une animation flash qui s'arrête d'abord au premier frame lors du chargement du fichier. L'utilisateur verra alors un bouton sur lequel il peut cliquer. L'animation devrait redémarrer au frame 2 une fois que l'utilisateur a cliqué.

Créez un nouveau keyframe
  • Faites un petit dessin
  • F7 (insert empty keyframe)
  • Plus tard vous pouvez ajouter une animation par exemple. (Voir Flash CS4 - Interpolation de mouvement). Pour l'instant, mettez juste un petit dessin.
Ajoutez bouton sur la scène
  • Créez un nouveau layer et donnez-lui un nom, par exemple Button
  • Ajoutez le bouton dans ce layer.
  • Vous pouvez régler sa taille avec le Free Transform Tool(mais assurez-vous que vous n'êtes pas en train d'éditer le bouton (c.f. ci-dessus)
  • Modifiez le champ de texte (double-cliquer deux fois) sur le texte, par exemple appeler l'étiquette "Go!".
Nom d'occurrence du bouton

Vous devez donner un nom à ce bouton de lancement sur la scène, sinon JavaScript ne va pas le trouver. C'est comme dans la magie: vous nommer un objets - vous le contrôlez... Appelons cette instance: 

  my_button

Dans le panneau de propriétés et remplissez le champ (voir ci-dessus si vous avez oublié). Assurez-vous que le nom est n'a pas de blancs ou des symboles spéciaux à l'intérieur (en fait, Flash va se plaindre si vous définissez un nom illégal).

Ajout de code JavaScript

Afin d'utiliser ce boutons, nous allons devoir écrire du code, c'est à dire un petit script avec le langage ActionScript. Ce code doit être défini dans le même frame que le bouton, mais nous utilisons généralement un layer différent. Les layers qui incluent un script est généralement appelée "Script" ou "action" ou "AS3".

Pour ouvrir l'éditeur JavaScript, appuyez sur F9:

Code ActionScript 3 code pour associer une action à un événement utilisateur

Donc, voici étape par étape la procédure pour ajouter le code:

Ajouter le code pour stopper le scénario (timeline)
  • Cliquez dans le premier frame
  • Ajoutez un nouveau layer et appelez-le "Actions"
  • Cliquez sur le frame 1 dans ce nouveau calque, puis appuyez sur F9 et insérez dans le panneau Actions-Frame:
this.stop ();

Ce code va simplement arrêter l'exécution du scénario principal. Flash n'affichera que le contenu de la première image (toutes les couches) et attendra...

Ajout du code pour la navigation

Maintenant, nous allons ajouter un peu plus de code au-dessous la ligne this.stop (); Cliquez encore dans le frame 1 de la couche d'action appuyez sur F9 (si le panneau n'est plus visible)

Ajouter ces lignes dessous du "stop ();": 

this.stop();

// Adds an event listener to a symbol. Very much like ActionScript

this.my_button.addEventListener("click", go_doit.bind(this));

function go_doit()
{
	this.gotoAndPlay(2);
}

Nous ne pouvons pas vraiment expliquer tous les détails du "Event Driven programming" ici, mais le principe est le suivant: Pour chaque objet qui doit réagir aux actions de l'utilisateur, vous devez définir ce qui se passera lorsque l'utilisateur fait quelque chose comme cliquer sur l'objet avec la souris.

  • Tout d'abord, il faut définir une fonction (c-a-d. un petit programme) qui "fait quelque chose", par exemple déplacer la tête de lecture dans le scénario. Dans notre cas nous avons appelé la fonction go_doit.
  • Deuxièmement, il faut associer cette fonction à l'événement "cliquer sur le bouton". La méthode addEventListener vous permet de définir que la fonction launchRocket sera appelée quand un utilisateur clique sur un bouton (appelé "my_button" dans notre cas). En d'autres termes, vous ajoutez ce qu'on appelle un "gestionnaire d'événements" au bouton.
Réutilisation du code

Bien sûr vous pouvez réutiliser ce code pour un problème similaire, à savoir, passer l'animation à un autre endroit de la timeline lorsque l'utilisateur appuie sur un bouton. Tout ce que vous avez à faire est la chose suivante:

  • Mettez un bouton sur votre scène
  • Donnez-lui un nom à l'instance sur la scène
  • Puis changez le nombre dans le code gotoAndPlay (2);. Par exemple, changez-le en 5 si vous le souhaitez sauter à l'image 5.

Astuce: Si votre code devient plus grand, détachez le panneau Actions Frame. Appuyez sur F9 pour le cacher/afficher.

Résultats

Évidemment, il manque encore la fusée. Il faudrait maintenant l'ajouter dans le frame 2.

http://tecfa.unige.ch/guides/flash/cc-html5/buttons-intro/

Exercice - Ajouter un bouton start à une de vos animations

  • Faites un copie du fichier.fla d'une de vos animations de mouvement
  • Ouvrez-le dans Flash Pro
  • Déplacez votre animation. Elle doit commence dans l'image 2. Faites glisser au moins la première image clé (keyframe). Cliquez dessus et glissez lorsque vous voyez le rectangle blanc attaché au curseur de la souris.
  • Ajout d'un nouveau calque
  • Insérez quelques graphiques / texte sur l'image 1 (sinon votre animation flash sera vide)
  • Puis, ajoutez dans un nouveau calque un bouton qui permettra à un utilisateur de sauter à l'image 2, quand il clique sur le bouton
  • Ajoutez le code JavaScript (n'oubliez pas d'ajouter également un "this.stop();".

Sites Flash à base de menus

Vous pouvez construire des petits sites "web" avec des boutons de navigation avec la même technologie. Le principe est simple:

  1. Mettez des contenu dans des frames différents (vous pouvez utiliser de multiples couches si vous avez envie).
  2. On commencera par ajouter une instruction stop(); dans le frame 1.
  3. On va ensuite créer des bouton, c.a.d. un bouton pour chaque frame X.
  4. Ensuite on va écrire le code pour chaque bouton et qui transportera l'utilisateur vers le frame "X".

Voici les étapes

Étape 1 - créer des "pages"
  • Création d'un layer "Pages"
  • Ajoutez des frames et remplissez chaque frame avec du texte, images, vidéos, etc. Pour ajouter un frame vide: appuyez sur F7.
  • Imaginez déjà où vous voulez placer les boutons (en dehors du contenu ou dans un "coin" ..)
Étape 1b - variante avec des animations
  • Vous pouvez également ajouter des animations si vous le souhaitez. Dans ce cas créez un objet movie clip et mettez l'animation dans le clip. Autrement dit, n'utilisez pas le scénario principal (timeline) pour faire des animations. Donc: double-clic sur l'objet "movie clip" et éditer sa propre timeline ....
Étape 2 - Création du menu (c.a.d. des boutons)
  • Créez un nouveau calque et nommez le "Menu" par exemple
  • Insérer dans l'image no 1 du layer "Menu" une série de boutons qui mèneront à chacune des "pages". Attention: Chaque bouton doit être une instance d'un symbole différent.
  • Pour que les boutons soient visibles partout, il faut élargir cette couche jusqu'à la dernière image de vos "pages" (appuyez sur F5).

Pour chaque bouton:

  • Faites glisser un bouton de la bibliothèque de boutons sur la scène
  • Changer l'étiquette: Double-cliquez sur le bouton, puis déverrouiller le calque de texte, changez-le.
  • Donnez un nom d'instance dans le panneau des paramètres, par exemple sunrise_btn pour un des boutons.
  • Une fois que vous avez terminé, utilisez l'outil d'alignement de distribuer et de les aligner correctement.
Étape 4 - Nom de vos frames (fr.
images)

Ici nous allons utiliser des named frames (images nommés). Si vous donnez des noms aux frames vous pouvez ensuite les déplacer sans changer le code.

Pour nommer un frame:

  • Cliquez sur chaque frame qui marque le début d'une "page" dans votre site flash et insérez un nom dans les properties
Nom de frames (CC)
Étape 5 - Vérification du boulot
  • Chaque button instance doit porter un nom différent
  • Chaque frame cible (où l'utilisateur doit pouvoir atterrir doit avoir un nom différent
Étape 6 - Créer le script
  • Créez un nouveau calque et nommez le "scripts" par exemple
  • Editer le frame 1 de cette couche ("scripts): F9
  • Rappel: Il faut étendre cette couche si nécessaire (par exemple aller dans le frame 8 et F5), sinon vous ne verrez pas vos boutons....
  • Insérez du code action script pour chaque bouton comme ci-dessous.

Nous utilisons essentiellement une action:

this.GotoAndStop ("your_frame_name"); pour passer à un frame et s'arrêter

Le script devrait alors ressembler à quelque chose comme ça. Je pense que j'ai fait aussi simple que possible pour les non-programmeurs. Le code inséré entre / * .... * / est un commentaire juste, à savoir une information que Flash ignorera mais qui est utile pour vous en tant que développeur.

Si cela ne fonctionne pas
  • Il existe peut-être des erreurs de syntaxe et Flash vous le dira dans le panneau de sortie qui apparaît. Regardez les numéros de ligne et n'ignorez pas ces messages
  • Vous avez mal orthographié un bouton ou un noms de frame dans le script. ActionScript est sensible à la casse!
Résultats

Créer vos propres boutons

Objectifs

Nous allons ici expliquer comment créer vos propres boutons et comment créer un diaporama avec des boutons "forward" et "back".

  • Nous allons d'abord apprendre comment créer vos propres boutons simples.
  • Ensuite, nous introduisons un peu plus ActionScript et qui montre comment réaliser un diaporama simple avec seulement deux boutons (avant / arrière).

Pour créer un diaporama, nous allons d'abord importer les images et ajuster la scène. Cela nous donnera une idée concernant la taille et la couleur des boutons. Ensuite, nous dessinons les boutons. Pour finir, nous ajoutons le code ActionScript

Etape 0 - Ouvrez un nouveau fichier
  • Sélectionner HTML5 Canvas
Étape 1 - Préparez quelques photos
  • Avant d'importer les photos, ajustez-les à la même taille, p.ex. en 640x480 px. Si vous travaillez sous Windows, utilisez simplement le logiciel Microsoft Office Picture Manager.
  • Importez ces photos dans la bibliothèque: Menu Fichier-> Importer-> Importer dans la bibliothèque. Sélectionnez toutes les images que vous souhaitez importer, puis cliquez sur OK. (Ou bien, faites simplement glisser les images dans le panneau de bibliothèque à partir de Windows).
  • Ces images sont des symboles maintenant, c.a.d. réutilisables si nécessaire.
Étape 2 - Ajuster la taille de la scène
  • Créez un nouveau calque, appelé "Images". Dans la première image-clé, insérez du texte avec l'Outil Texte, p.ex. "Diaporama" (vous pouvez corriger cela plus tard)
  • Créer une nouvelle image clé (keyframe) dans le frame 2 (appuyez sur F7)
  • Faites glisser une image sur la scène (image 2)
  • Ensuite ajustez la taille de la scène. La rendre au moins aussi grande que l'image. Vous pouvez aussi rendre la scène un peu plus grande et sélectionner par exemple un fond noir.
  • Pour régler la position de l'image, utilisez le properties panel par exemple.
Etape 3 - Mettez le reste de vos photos dans d'autres images-clés
  • Si vous avez 8 images, vous devez ajouter 7 nouveaux keyframes.
  • Placez votre curseur dans l'image 2 de la couche d'image, puis appuyez plusieurs fois sur F7
  • Puis glissez une image dans chacune de ces images-clés et alignez-les.
  • Contrôlez si toutes les photos sont OK et en place en déplaçant la tête de lecture de gauche à droite (rectangle rouge sur le dessus de la timeline)

Vous devriez alors avoir quelque chose comme ça.

Un scénario avec des keyframes remplis d'images
Étape 4 - Dessinez les boutons
  • Créez un nouveau calque et nommez-le "Boutons" et sélectionnez-le (verrouillez aussi la couche d'images).
  • Pour dessiner les boutons, vous pouvez utiliser n'importe quel outil de dessin, par exemple l'outil polystar (dans les tool settings changez le number of sides à 3 par exemple). Ensuite adaptez avec le subselection tool. Alternativement, vous pouvez aussi chercher un symbole dans les fontes de type "Dingbat" de votre système (et ensuite "break apart").
  • Ensuite, vous pouvez réduire le canal alpha (à savoir créer de ces boutons transparents). Dans le panneau de la couleur, mettez le Alpha entre 20 et 40%.
  • Une fois que vous avez un bouton qui pointe à gauche ou à droite, faites une copie et faites un flip horizontal (menu Modify-> Transform-> Horizontal Flip).
Étape 5 - convertir ces graphiques dans des symboles
  • Enregistrez les deux boutons en tant que button symbol (clic-droit sur chaque graphique que vous avez fait).
  • Utilisez des noms décents pour ces derniers, par exemple "button_forward"
Transformer un graphique en button symbol - Flash CS4
Transformer un graphique dans un symbole bouton - Flash CS3
  • Supprimez les graphiques qui se trouvent sur la scène (oui, vous pouvez les tuer une fois qu'il y a un symbole dans la library ....)
Étape 6 - placer les boutons et les nommer
  • Sélectionne la couche de boutons (celui qui n'a qu'une seule image-clé).
  • Glissez un bouton "précédent" et un bouton "suivant" de la bibliothèque sur la scène
  • Déplacez les deux boutons dans une position appropriée.
  • Donnez ensuite un nom à chacun de ces 2 boutons dans le panneau des propriétés: "forward_btn" et "back_btn" par exemple.

Donc maintenant vous devriez avoir 2 button symbols dans la bibliothèque et une instance nommée de chacun sur la scène.

Deux instances de boutons sur la scène (Flash CS3)
Étape 7 (facultative) - Améliorez les boutons

Il serait intéressant d'introduire du "highlighting" (surbrillance) comme sur les boutons de la bibliothèque des boutons Flash.

  • Double-cliquez sur un bouton dans la bibliothèque. Cela vous mettra en mode d'édition du symbole.
  • Dans le frame 2 ("Over") insérez un nouveau keyframe avec copie du dessin: F6
  • Changez la couleur du bouton.

Comme vous le verrez, le bouton change de couleur lorsque vous déplacez la souris dessus. Faites de même avec l'autre bouton.

Changer la couleur du frame "Over" du bouton
Étape 8 - Ajout de code de script d'action à la timeline
  • Insérez un nouveau calque, appelez-le "Action" par exemple
  • Cliquez sur le frame l de cette couche et cliquez sur F9

Tout d'abord insérez un stop pour l'animation: 

  stop ();

Ce code ActionScript var arrêter l'animation après le chargement du premier frame. En cliquant sur les autres boutons les utilisateurs pourront allez en l'avant ou en arrière.

Ensuite, insérez le code ci-dessous pour gérer la navigation dans ce diaporama: 

forward_btn.addEventListener(MouseEvent.CLICK,forward);
back_btn.addEventListener(MouseEvent.CLICK,backward);
 
function forward(event:MouseEvent) {
	if (this.currentFrame == this.totalFrames)
	{
		gotoAndStop(1);
	}
	else
	{
		nextFrame();
	}
}
 
function backward(event:MouseEvent) {
	if (this.currentFrame == 1)
	{
		gotoAndStop(this.totalFrames);
	}
	else
	{
		prevFrame();
	}
}

Ce code ActionScript 3.0 ajoute tout d'abord les gestionnaires d'événements à chaque bouton comme nous l'avons vu auparavant.

Pour que le avant-arrière marche avec tous les boutons (y compris le premier et le dernier) il faut ajouter une logique "if-then-else". 

if (this.currentFrame == this.totalFrames) { gotoAndStop(1); }
else { nextFrame(); }

Explication: Lorsque l'utilisateur clique sur le bouton Suivant, le moteur Flash va vérifier si on se trouve dans le dernier frame. Si c'est le cas, aller au frame 1, sinon passer à l'image suivante.

Pour le bouton "arrière" nous faisons la même chose: 

if (this.currentFrame == 1) { gotoAndStop(this.totalFrames); }
else { prevFrame(); }

Explication: Si nous sommes sur la première image, allez dans la dernière, sinon allez sur l'image précédente.

Afin d'utiliser ce code pour votre propre diaporama il n'est pas nécessaire de tout comprendre. Il suffit de copier-coller le code, mais assurez-vous que l'instance (sur la scène!) de votre bouton "avant" soit appelé "forward_btn" et l'instance "arrière" soit appelé "back_btn".

Astuce: Si cela ne fonctionne pas, assurez-vous que vos paramètres de publication soient réglés sur ActionScript 3. Ce code ne fonctionnera pas avec ActionScript 2. Vérifiez également les noms des button instances. Le nom des symboles n'a aucune importance, nous parlons d'instances ici!

Étape 9 - Assurez-vous que vos boutons de s'étendent à tous les frames

Les boutons doivent être affichés dans le scénario entier.

  • Sélectionnez le layer des boutons, cliquez sur la dernière image (où se trouve la dernière image) et clic-droit -> Insert Frame (ou appuyez sur F5). A la fin, vous devriez voir un rectangle blanc.

Votre timeline devrait à peu près ressembler à ceci:

La timeline pour un diaporama simple
Étape 10 - Tuning

Faites une jolie page de titre

Résultats
  • Vous pouvez regarder mon résultat publié ici
  • Source Flash: flash-cs3-simple-slide-show-as3.fla
  • Vous pouvez récupérer tous les fichiers flash-cs3-simple-slide-show-AS3 .* dans ce répertoire:
http://tecfa.unige.ch/guides/flash/ex/buttons-intro/

Le diaporama est assez simple. Maintenant, vous voulez peut-être d'utiliser des boutons plus fantaisistes. Voir les boutons animés ci-dessous.

Créer des boutons de type "liens internet"

Vous venez de voir ci-dessus comment créer des boutons à partir d'images. Sachez qu'il est aussi possible de créer des boutons sous forme de texte cliquable, à la manière de liens internet.

Voici un exemple:

  • Créez un nouveau symbole "bouton"
  • Avec l'outil "Texte", ajoutez le texte du lien
  • Dans le calque du bouton, ajoutez des images-clefs à "survol" et à "abaissé"
  • Dans l'image-clefs "survol", modifiez le texte et soulignez-le
  • Dans l'image-clefs "abaissé", modifiez la couleur du texte

Lorsque l'utilisateur survole le texte, celui-ci se souligne. Lorsqu'il clique sur le lien, le texte change de couleur.

Remarque: Le nom de l'occurrence de chaque texte doit être différent (par exemple: bouton_accueil_normal, bouton_accueil_survol et bouton_accueil_abaissé).

Créer des image maps avec des photos

Vous pouvez créer des "image maps" à partir d'un bitmap, c.a.d. insérer des hot spots sensibles à la souris. Autrement dit, transformer des bouts d'images en button symbol.

Résumé des étapes:

Préparer une image
  • Mettre une image sur la scène
  • Break apart
Sculpter un fragment
  • Désélectionner l'image!
  • Prenez une région avec l'outil Lasso (si nécessaire choisir l'option polygone)
  • Faites un clic droit -> Convertir en button symbol (c.f. ci-dessus). Vous devriez avoir maintenant avoir un bouton qui représente un fragment d'image dans la library.
  • Cassez toute-de-suite l'instance. Clic droit et break apart. L'image est comme avant maintenant. Alternativement (et mieux) tuez tout sur la scène et remettez la photo.
Modifier le nouveau bouton
  • Double-cliquez sur ce bouton dans la bibliothèque.
  • Deux fois F6 pour avoir des copies dans les frames "Over" et "Down".
  • Modify -> Union de ces copies pour obtenir des graphiques
  • Remplacez la couleur "bitmap" avec une couleur qui a un alpha faible

Voilà un joli bouton.

  • Maintenant vous pouvez le glisser sur l'image dans la scène. On vous conseille de faire cela dans un nouveau layer...
Résultats
  • Vous pouvez regarder un résultat "vite fait bien fait" publié ici ici
  • Le fichier source Flash: flash-cs3-image-map.fla
  • Répertoire
http://tecfa.unige.ch/guides/flash/ex/buttons-intro/

Boutons animés

Si vous aimez l'idée de boutons fous, vous pouvez vraiment utiliser toutes vos compétences en graphisme et en animation. Les boutons peuvent inclure toute forme de graphiques, y compris des clips vidéo intégrés.

Afin d'utiliser des animations dans un button symbol, il faut simpler créer des movie clips internes. Voir le Flash CS4 - Interpolation de mouvement). Placez ces clips dans l'un des frames du button symbol.

Résultats
  • Vous pouvez regarder mon résultat publié ici
  • Le fichier source:
flash-cs3-button-animation.fla
  • Répertoire
http://tecfa.unige.ch/guides/flash/ex/buttons-intro/

Résumé ActionScript

Dans la timeline, il faut toujours créer un layer appelée "Script" ou "Action". Utilisez uniquement ce layer pour scripter (sinon votre code devient désorganisé ...). Souvent, il faut étendre la portée d'un script en appuyant sur F5 dans la timeline principe. Rien ne vous empêche d'avoir plusieurs layers de scripting si vous voulez avoir un script valable pour tout le scénario et certains scripts qui ne marchent que dans certains frames.

Pour associer un comportement à un clic de souris, utilisez du code comme celui-ci: 

 button_instance_name.addEventListener(MouseEvent.CLICK,function_name);
 
 function function_name (event:MouseEvent):void {
   gotoAndPlay(2);
 }

Remplacer button_instance_name et function_name avec des noms appropriés.

  • Button_instance_name fait référence au nom de l'instance du bouton (dans le panneau des propriétés!
  • Function_name peut être ce que vous souhaitez (mais ne pas utilisez des espaces ou des caractères spéciaux dans les noms de fonction, sauf le trait de soulignement "_".

Voici un bon exemple: 

 go_button.addEventListener(MouseEvent.CLICK,goFrameA);
 function goFrameA (event:MouseEvent) { gotoAndPlay(2); }

Voici un mauvais exemple ( "go-button" a un tiret, et "go Frame" est en deux mots) 

 go_button.addEventListener(MouseEvent.CLICK,goFrameA);
 function goFrameA (event:MouseEvent) { gotoAndPlay(2); }
Instructions ActionScript utiles
stop();
va arrêter l'animation. Vous pouvez insérer des stop(); partout où vous le souhaitez dans votre scénario.
gotoAndStop (4)
va sauter à l'image n °4 et s'arrêter. Utilisez ceci pour les images fixes (diaporamas)
gotoAndPlay ("my_frame");
va sauter au frame appelé "my_name" et jouer ce frame et les suivants.
Utilisez ceci pour des animations qui s'étendent sur plusieurs frames. Mais considérez ensuite l'insertion d'un "stop();" dans la dernière image de cette animation.
gotoAndPlay (4)
va sauter à l'image n° 4 et jouer les autres (comme ci-dessus).
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Animate_CC_2015_HTML5_Canvas_-_Boutons&oldid=46498 »