Flash CS5 - Composant bouton

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

Tutoriels Flash
Atelier Webmaster Flash
Outils: CS4 et CS4
Niveau: débutant

Tutoriels Flash

Introduction

Objectifs d'apprentissage

Survol des composants
Il existe(era) des tutoriels séparés pour certains composants.

Prérequis

Matériel (fichiers *.fla à manipuler)

[1] (répertoire pour CS4)
[2] (répertoire pour CS3)

Qualité et niveau

Ce tutoriel aidera les adeptes de la technique à démarrer. Le niveau de ce tutoriel est un peu haut pour les novices, mais peut servir comme des fiches pratiques dans un atelier.

Prochaines étapes

Plus d'interactivité avec ActionScript

Autres versions

en:Flash button tutorial
en:Flash component button tutorial - AS2 (pour les nostalgiques)

Dans Flash CS3/CS4, il existe deux types de boutons fondamentalement différents:

(1) Les symboles du bouton. Voir Flash CS4 - boutons. Ces symboles button sont faites avec une animation image par image de quatre cadres prédéfinis et peuvent inclure toute sorte de dessins (y compris des clips vidéo). Leur comportement visuel est hautement personnalisable.

(2) Les composants button. Ils font partie de la bibliothèque de composants intégrés et qui fournit divers composants de l'interface (également appelées widgets ou gadgets) qui sont faciles à utiliser. Techniquement parlant, ces boutons sont une sorte de clip intégré et ils sont programmés en ActionScript par Adobe. Graphiquement parlant, ces boutons sont des rectangles arrondis semi-transparent. Il n'est pas facile de changer leur look !

Les composants de buton sont plus faciles à utiliser que les symboles de bouton, puisque leur étiquette sera définit dans un panneau. Sinon, on les utilise de la même façon, c.a.d. il faut écrire un peu d'ActionScript.

2 Un menu à base de site Web avec l'AS 3 bouton composante

Objectif de conception de l'exemple

L'objectif est de faire une sorte de simple site Web instantané. L'utilisateur, à tout moment avoir un menu à gauche qui lui permettra d'accéder à des contenus différents.

Nous allons construire plusieurs versions de cette. Jetez un oeil à la base de menus exemple diaporama avant de commencer la lecture. Aussi, nous allons introduire quelques ActionScript d'une façon qui est, espérons appropriée pour les non-programmeurs.

Remarque: Dans le bouton Flash tutoriel nous avons également montré comment créer des applications similaires avec built-in et home-made symboles boutons. [modifier] 2.1 Un menu à base de site flash

Etape 0 - Assurez-vous que vous avez le droit de bibliothèque de composants

Flash 9 (CS3) et Flash 8 composantes sont différents et non compatibles. Donc, assurez-vous que vous créez un fichier Flash (ActionScript 3.0) de fichiers ou encore changer les paramètres de publication avant de commencer à utiliser la bibliothèque de composants.

Tous flash intégrée de composants sont disponibles grâce à une bibliothèque spécifique. À cette bibliothèque:

    * Fenêtre-> Composants ou appuyer sur CTRL-F7
    * Accoler quelque part (ce qui est le mieux à côté de votre propre bibliothèque)

Étape 1 - Planification des couches

Dans cet exemple, nous allons travailler avec cinq couches:

    * Actions: comprend un peu d'action code de script
    * Boutons: comprend les boutons (qui s'affiche sur tous les "pages")
    * Photos: Sommaire nous voulons afficher
    * Crédits: Une page spéciale pour le «qui est fait» (nous avons aussi pu utiliser les images pour cette couche).
    * Rappel: Un arrière-plan simple qui restera stable.

Vous couches devrait ressembler à ceci: Chronologie de la base de menus diaporama

Créer ces couches-toi! Si vous ne vous souvenez pas comment, voir les couches Flash tutorial. Comme vous pouvez le voir, le scénario est plutôt courte puisqu'il s'agit d'une application A et non une animation qui utilise le scénario principal.

Étape 2 - Ajouter des photos ou autre contenu

    * Décider nombre de photos que vous souhaitez (nous avons pris quatre)
    * Sélectionne la couche de Photos
    * Frame 1 est réservé à une page de titre.
    * Création d'un peu de nouvelles images clés vides (appuyez sur F7) et remplissez-les avec des images ou tout autre contenu ou de dessins que vous le souhaitez. Voir le bouton tutorial si vous ne savez pas comment importer des images. BTW collant une image de la scène fait aussi l'affaire.

Étape 3 - Obtenir des boutons de la bibliothèque

    * Sélectionne la couche de boutons
    * Ouvrez la bibliothèque des composants, sélectionnez "User Interface" et glissez le plus grand nombre des boutons à la scène comme vous avez des photos. Ajouter une autre pour la page des crédits.

Bouton de la bibliothèque CS3/ActionScript3 composant Flash

    * Mettez-les dans une bonne position. Vous mai utiliser le panneau Aligner pour aligner et répartir correctement (voir le Flash d'arranger les objets tutorial si nécessaire).

Étape 4 - Apprenez quelques ActionScript 3 principes

Rappelons quelques principes ActionScript ici. ActionScript 3 ne permet pas de joindre des scripts à des boutons (comme dans ActionScript 2). Afin de script d'un composant, nous avons essentiellement à faire trois choses.

   1. Donnez un nom au composant (à savoir l'instance d'animation sur la scène)
   2. Remplissez certains paramètres, par exemple ajouter une étiquette pour le bouton. Nous le ferons dans le panneau de paramètres.
   3. Ajouter un peu d'ActionScript au scénario qui permettra de:
          * Associer un événement d'interaction utilisateur (par exemple utilisateur clique) avec quelques "action" en fonction
          * Programme d'action de cette fonction

Étape 5 - Donnez un nom à chaque bouton et changer son étiquette

    * Cliquez sur un bouton (assurez-vous de verrouiller les autres couches)
    * Sélectionnez le panneau Paramètres (menu Fenêtre-> Propriétés-> Paramètres)
    * Donnez l'occurrence de bouton un nom unique: par exemple, btn_rainbow is fine. ( "btn" signifie "bouton" et "Rainbow" parce que ce bouton va conduire à une image arc en ciel). Pour être sûr:
          o Démarrer le nom du label avec une lettre
          o Pour le reste du nom que vous pouvez utiliser des lettres, des chiffres ou le caractère de soulignement "_".
          o Ne pas utiliser des espaces ou des caractères de ponctuation ou des tirets. Si vous le faites à tort, Flash va se plaindre.
          o Je suggère que vous utilisez uniquement des lettres minuscules (les noms sont sensibles à la casse)
    * Ensuite, vous devez modifier le paramètre de l'étiquette du bouton. C'est ce que l'utilisateur voit. Type de quoi que ce soit là, mais ne faites pas trop longtemps (c'est un bouton après tout).
    * Si votre texte est plus grande que l'étiquette, de changer la largeur bouton dans le même panneau, c'est à dire modifier le W: sur le terrain.

Probablement vous avez remarqué, maintenant qu'il est de travailler avec un élément par rapport à l'aide des boutons comme expliqué dans le tutoriel bouton Flash Paramètres du bouton ActionScript3

Assurez-vous que vous l'avez fait à tous les boutons.

Étape 6 - Ouvrez le panneau ActionScript

    * Cliquez dans l'image 1 du calque action devrait déjà vous avez défini (voir étape 1)
    * Hit F9 pour ouvrir les "Actions-Frame" Panneau de configuration. Au cas où il est amarré avec les paramètres, vous déconnectez-mai pour avoir un peu de place.
    * Ensuite, collez tout le code à partir du résumé juste au-dessous (étape 7, 8, 9, code). Ou bien, ouvrez le flash-cs3-simple slide-show-menu.fla fichier et copiez le code à partir de là.

Note: le code qui est délimité par / * * / représente ce qu'on appelle des commentaires, à savoir que le code n'est pas interprété par Flash, mais que nous avons inséré juste de se rappeler ce que notre code est censé faire. C'est toujours une bonne idée de documenter votre code ...

Étape 7 - Stopper l'animation de jouer dans une frame

Le stop () l'instruction arrête de clignoter en jouant tous les cadres, c'est à dire nous voulons que l'utilisateur de rester dans l'image 1 après le chargement de fichier.

 stop ();

Étape 8 - boutons associés à une fonction de gestionnaire d'événements

ActionScript programmation comprendra deux choses:

   1. Vous devez définir la fonction ActionScript est exécuté quand l'utilisateur clique sur un bouton. Pensez à une fonction, comme un ensemble nommé d'instructions que Flash sera exécutée.
   2. Vous devez définir le code ActionScript pour ces fonctions. En fait, dans cet exemple, nous allons utiliser la même fonction pour l'ensemble de nos boutons (un exemple plus simple mais plus long est le code ci-dessous).

Associer une fonction de gestionnaire pour chaque occurrence de bouton:

    Syntaxe: button_name.addEventListener (Event.type, function_name

Les lignes ci-dessous signifient:

    * Si l'utilisateur clique sur le btn_rainbow avec la souris, puis le clickHandler fonction définie ci-dessous pour exécuter et ainsi de suite ...

 (btn_rainbow.addEventListener MouseEvent.CLICK, clickHandler);
 (btn_tecfa.addEventListener MouseEvent.CLICK, clickHandler);
 (btn_bosses.addEventListener MouseEvent.CLICK, clickHandler);
 (btn_my_computers.addEventListener MouseEvent.CLICK, clickHandler);
 (btn_credits.addEventListener MouseEvent.CLICK, clickHandler);

Lorsqu'un utilisateur clique sur un bouton, un soi-disant MouseEvent qui se passe. Cet événement est ensuite donné à la fonction que nous avons appelé clickHandler pour un traitement ultérieur.

Etape 9 - Écrire une fonction clickHandler

Note: vous auriez pu choisir un autre nom, mais - comme une règle générale - nom de fonction doit avoir un sens pour vous et à d'autres personnes qui ont lu votre programme.

Regardons maintenant le code de fonction complète:

1.

       clickHandler function (event: MouseEvent): void (

2.

       switch (event.currentTarget.label)

3.

4.

       affaire "Rainbow":

5.

       gotoAndStop (2);

6.

       break;

7.

       case "TECFA":

8.

       gotoAndStop (3);

9.

       break;

10.

       Bosses ' «affaire»:

11.

       gotoAndStop (4);

12.

       break;

13.

       case "Mon ordinateur":

14.

       gotoAndStop (5);

15.

       break;

16.

       Crédits «cas»:

17.

       gotoAndStop (6);

18.

       break;

19.

20.

Lorsqu'un utilisateur clique sur un bouton, un soi-disant MouseEvent qui se passe. Cet événement est alors donné à la fonction pour un traitement ultérieur. Formellement parlant, lorsque nous avons défini la fonction clickHandler, a défini un paramètre pour les informations qu'il doit traiter. Dans notre cas, la fonction doit faire face.

 (event: MouseEvent)

signifie que l'on définit un paramètre appelé "événement" (par exemple nous le nom de l'information qui est remis) et nous indiquer à Flash que ce paramètre est de type "MouseEvent».

Nous pouvons alors utiliser utiliser cet événement "" l'information. Afin de comprendre quel bouton a été cliqué, on peut récupérer cette information de l'événement. L'expression suivante:

 event.currentTarget.label

nous dira l'étiquette du bouton qui a été la cible actuelle.

Nous utilisons cette expression dans un commutateur dites (ou le cas) déclaration. Elle débute sur la ligne 2 et termine à la ligne 19. Sa syntaxe est la suivante:

switch (value) (

  valeur_1 cas:
    / * Faire quelque chose * /
    break;
  valeur_2 cas:
    / * Faire quelque chose * /
    break;
  )

Maintenant, pour chaque étiquette on définit alors ce que Flash doit faire. Nous avons seulement besoin d'une instruction unique: Accès à l'écran x et s'arrêter de nouveau. L'instruction est

 gotoAndStop (x)

Par exemple

 gotoAndStop (2)

signifie "bouger l'animation et l'image 2" et s'arrêter là.

(Résumé) - Le code AS3 complète

Voici le code complet vous pouvez copier / coller / adapter:

stop ();

(btn_rainbow.addEventListener MouseEvent.CLICK, clickHandler); (btn_tecfa.addEventListener MouseEvent.CLICK, clickHandler); (btn_bosses.addEventListener MouseEvent.CLICK, clickHandler); (btn_my_computers.addEventListener MouseEvent.CLICK, clickHandler); (btn_credits.addEventListener MouseEvent.CLICK, clickHandler);

clickHandler function (event: MouseEvent): void ( switch (event.currentTarget.label) ( affaire "Rainbow": gotoAndStop (2); break; case "TECFA": gotoAndStop (3); break; Bosses ' «affaire»: gotoAndStop (4); break; case "Mon ordinateur": gotoAndStop (5); break; Crédits «cas»: gotoAndStop (6); break; ) )

Choses que vous avez à changer:

    * Les noms d'instance de boutons, par exemple btn_rainbow
    * Les étiquettes des boutons, par exemple "Rainbow"
    * Le cadre de sauter et de jouer, par exemple gotoAndStop (2).

Bien sûr, vous avez également pu accéder à des cadres désignés, par exemple gotoAndStop ( "Paradise"); [modifier] 2.2 Si les choses tournent mal

    * Assurez-vous que votre syntaxe est correcte. Par exemple un seul ":" missing mai pause votre programme. Dans la fenêtre, cliquez sur l'ActionScript "Vérifier l'icône« syntaxe pour tester la syntaxe correcte.

    * Tiret également votre code correctement. Il suffit de cliquer sur "Format Auto" icône.

    * Assurez-vous que la couche d'action s'étend à la fin de votre timeline. F5 Code at-il l'image 1, puis frappé à la plus à droite cadre que vous utilisez (cadre d'insérer et d'insérer des images-clés!)

    * Assurez-vous vraiment que votre code est dans l'image 1 et dans la couche d'action.

    * Assurez-vous que les noms d'instance bouton et les noms d'étiquettes sont exactement les mêmes dans le panneau Paramètres et dans votre script.

Voici l'image de la timeline de nouveau: Chronologie de la base de menus diaporama

Remarquez le petit «a» dans l'image 1 du calque Actions. Il signifie «à l'intérieur du code ActionScript":) [modifier] 2.3 Ajout URL externes à des boutons

Cela montre comment programmer un bouton qui va ouvrir une URL dans un navigateur Web (regardez le fichier d'exemple vous pouvez télécharger). Code est un peu compliqué car il sera également tester si l'URL existe vraiment.

btn_edutech_wiki.addEventListener (MouseEvent.CLICK, gotoUrl);

fonction gotoUrl (event: MouseEvent): void ( var url: String = "http://edutechwiki.unige.ch/en/Flash_components_tutorial"; var request: URLRequest = new URLRequest (url); essayer ( navigateToURL (request, '_blank'); ) catch (e: Error) ( trace ( "Une erreur s'est produite!"); ) )

Une façon plus simple de le faire sans essai:

fonction gotoUrl (event: MouseEvent): void ( var request: URLRequest = new URLRequest ( "http://edutechwiki.unige.ch/en/Flash_components_tutorial"); navigateToURL (request, '_blank');

Résultats et code source

    * Flash-cs3-simple slide-show-menu.html
    * Source: flash-cs3-simple slide-show-menu.fla
    * Grab le flash-cs3-simple-slide-show-menu à partir de fichiers .*

    http://tecfa.unige.ch/guides/flash/ex/components-intro/

Liens

Utilisation des composants ActionScript 3.0

Remerciement et modification du copyright

Cet article est aussi disponible sous le Copyright suivant: Attribution-Noncommercial-Share Alike 3.0 Unported. Une majorité du texte de cet article a été repris (avec des modifications) des manuels Adobe Using Flash et Utilisation de Flash. Vous devez également citer ces sources et répliquer le copyright. Cela concerne aussi les images de Adobe qu'on a répliquées ici.

Flash CS5 - Composant bouton

Introduction

Liens

Remerciement et modification du copyright

Menu de navigation

Rechercher