Flash AS3 - Objets interactifs

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.

---

Francais attroce ! ... sortie google translate a revoir .....

Objectifs d'apprentissage Le but de ce tutoriel est aller un peu au-delà du traitement de clics de souris, de boutons et de composants de bouton. Vous allez par exemple apprendre à modifier les propriétés d'objets (comme la position, la taille et la visibilité):

• Constructions ECMAScript (langage de programmation la base de ActionScript et JavaScript)
• Savoir manipuler quelques proprietes d'objets
• Connaitre plus d'evenements

Prérequis

• Univers Flash CS4
• Flash CS3 - Créer et modifier les calques et les images
• Flash CS4 - Créer des dessins avec les outils de dessin‎‎
• Flash CS4 - Transformer des dessins (une partie)
• Flash CS4 - Arranger des dessins
• Flash CS4 - Composant bouton

Matériel (fichiers *.fla à manipuler)

• http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/

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.

Ce texte vise des Flash 'designers', et non pas des programmeurs ActionScript 3, bien que les programmeurs peuvent lire ce texte pour obtenir un "feeling" concernant les propriétés d'objets avant d'aller creuser dans une vraie documentation.

Prochaines étapes

• ....

Autres versions

• ActionScript_3_interactive_objects_tutorial
• ActionScript_3_event_handling_tutorial
• Flash_ActionScript_3_overview

La gestion des événements

(a faire .....)

Manipuler les objets == ==

Le principe de la manipulation (simple) l'objet est assez simple: 'modifier les propriétés d'un objet d'affichage. La chose la plus délicate est de savoir ce que'vous pouvez changer sur une espèce donnée de l'objet. Certains changements sont faciles à faire, d'autres sont vraiment dur. Typiquement, la plupart des objets sont non modifiables (ses objets qui le composent sont peut-être). Il est facile de changer la taille et la position d'un objet d'affichage, par exemple les opérations que vous pourriez faire sur les objets et les cas groupés symbole avec l'outil de transformation ou le panneau de paramètres.

Ci-dessous, nous montrons quelques exemples peu qui montrent comment manipuler les objets avec les événements de souris (voir la ActionScript 3 de gestion des événements tutoriel pour plus de détails). Tous les objets de la scène (Black_Cat, par exemple) sont des instances de symboles clip. Il s'agit d'une sorte d'objet interactif et de réagir aux évènements souris et clavier. Le genre de trucs que nous montrent loi sur 'instances nommées' des symboles de la bibliothèque. En termes techniques: Nous allons travailler avec des objets d'affichage qui sont assignés à une variable.

Fichier:Flash-cs3-named-symbole instance.png

instances symbole que vous souhaitez manipuler doivent être nommés

Vous pouvez imaginer des dizaines d'autres exemples simples, mais ce n'est pas si facile de comprendre la documentation technique ActionScript qui est faite pour les programmeurs et les concepteurs pas. Si vous vous sentez plus aventureux, vous mai ont un regard sur la hiérarchie des classes décrites dans le Flash ActionScript 3 Vue d'ensemble, et notamment la Afficher Object et ses enfants. Suivi d'un lien vers la documentation Flash et voyez si vous pouvez trouver d'autres propriétés qui sont faciles à manipuler ...

Pour comprendre ce qui se passe ci-dessous, vous souhaitez mai à charge ce fla fichier.

Exemple simple repositionnement

Pour repositionner un objet, il suffit de modifier son projetxetYPropriétés. Dans l'exemple suivant, lorsque vous cliquez sur l'objet interactif (une instance de symbole que l'on appelle "Black_Cat"), il va se déplacer vers la position x = 200 et Y = 200. Note: la position est définie par le centre de l'objet d'affichage (à savoir le petit signe "+" qui est la valeur dépend de la façon dont vous l'avez fait).

<source lang="actionscript"> (black_cat.addEventListener MouseEvent.CLICK, MOVECAT);

MOVECAT function (event: MouseEvent): void (

 black_cat.x = 200;
 black_cat.y = 200;

) </ source> Un énoncé comme <source lang="actionscript">

 cat.x = 100;

</ source> est appelé cession '' et moyens: La propriété x de l'objet chat peut devenir «100».

Si vous souhaitez déplacer le chat en avant et arrière, vous voulez plutôt utiliser ce code: <source lang="actionscript"> (black_cat.addEventListener MouseEvent.CLICK, MOVECAT); / / Chat peut être en position d'origine ou non (true, false) black_cat_ori_pos var = true;

MOVECAT function (event: MouseEvent): void ( if (black_cat_ori_pos == true) ( black_cat.x + = 200; black_cat.y + = 200; black_cat_ori_pos = false; ) autre ( black_cat.x -= 200; black_cat.y -= 200; black_cat_ori_pos = true; ) ) </ source> Dans cette fonction, nous utilisons un soi-disant 'if-then-else'. La ligne <source lang="actionscript">

 if (black_cat_ori_pos == true)

</ source> black_cat_ori_pos vérifie si la variable a la valeur true. Si cela est vrai, nous exécutons alors la clause (black_cat.x + = ... ; Black_cat.y ..... ) </ code> qui suit. Si ce n'est pas vrai que nous appliquons cette clause {...} autre après l'autre.

Notez également la différence entre une cession et ("'=") un test 'égalité ("=="). Celui-ci permettra de tester si deux valeurs sont les mêmes. Note aux débutants: Ne jamais utiliser simplement le signe «=» dans la condition d'un "si". Utilisez "==".

Let's décrire ce à un niveau plus conceptuel:black_cat_ori_pospeut être appelé un «drapeau» variable, car il sera enregistré si le chat est dans une position nouvelle ou l'ancienne position d'origine. Si c'est dans la nouvelle, nous feront revenir, et l'inverse. Ainsi <source lang="actionscript">

 black_cat_ori_pas == true

</ source> essais, si le chat est assis dans sa position initiale.

X et Y sont définis par rapport au coin supérieur gauche. Par exemple si x est de 100 et y est 100, le point central de l'objet enregistré est de 100 pixels à droite et 100 pixels vers le bas. L'instruction: <source lang="actionscript">

 x + = 100;
 -= x 100;

</ source> signifie "ajouter 100 à X" ou "soustraire 100 à partir de x". Alors, c'est un raccourci pourx = x + 100;, à savoir "La nouvelle valeur de xdevientancienne valeur de x et de 100".

Changer la taille === ===

Modification de la taille, les moyens de changer la largeur'ethauteurPropriétés. Dans l'exemple suivant, lorsque vous cliquez sur l'objet interactif (une instance de symbole que l'on appelle "blue_cat"), il va doubler sa taille lorsque vous maintenez le bouton de la souris et revenir à la normale lorsque vous la relâchez. Note: Si vous maintenez enfoncée la touche, puis déplacez la souris en dehors (en maintenant enfoncé), et seulement ensuite relâcher le bouton, la souris sera grand séjour car il ne le fera jamais attraper la souris jusqu'à l'événement.

<source lang="actionscript"> (blue_cat.addEventListener MouseEvent.MOUSE_DOWN, resizeCat);

resizeCat function (event: MouseEvent): void (

 blue_cat.width = blue_cat.width * 2;
 = blue_cat.height blue_cat.height * 2;

)

(blue_cat.addEventListener MouseEvent.MOUSE_UP, resizeCat2);

fonction resizeCat2 (event: MouseEvent): void (

 blue_cat.width = blue_cat.width / 2;
 = blue_cat.height blue_cat.height / 2;

) </ source>

Ce code mai pas faire exactement ce que vous voulez. Comme nous l'avons dit, si l'utilisateur maintient enfoncé le bouton de la souris 'et' le déplace, l'événement MOUSE_UP n'arrivera jamais, à savoir le chat va croître de façon permanente. Une meilleure solution peut être trouvée dans l'exemple de code que nous avons inclus à la fin de cette section.

Visibilité === ===

Dans l'exemple suivant, nous ferons un chat blanc invisibles lorsque vous cliquez dessus. Note technique: Il est toujours là, mais l'utilisateur ne peut pas cliquer dessus.

<source lang="actionscript"> (white_cat.addEventListener MouseEvent.CLICK, hideCat);

hideCat function (event: MouseEvent): void (

  white_cat.visible = false;

) </ source>

Une fois que le chat est caché, l'utilisateur ne sera jamais capable de le ramener. Par conséquent, dans l'exemple suivant, nous avons décidé de mettre en œuvre un commutateur entre un chat et un chien:

<source lang="actionscript"> / / Ne peut pas voir le chien pour des démarreurs brown_dog.visible = false;

(brown_dog.addEventListener MouseEvent.CLICK, hideShow); (white_cat.addEventListener MouseEvent.CLICK, hideShow);

hideShow function (event: MouseEvent): void (

  / / Au lieu d'utiliser des faux = white_cat.visible; on passe juste à l'opposé
  white_cat.visible =! white_cat.visible;
  brown_dog.visible =! brown_dog.visible;

)

</ source> Le «! </ Code>" utilisés pour white_cat.visible </ code> dans la fonction hideShow signifie que la propriété "visible" sera mis à son contraire. Par exemple Si la valeur estvraiil deviendrafaux, et l'inverse. Même technique pour le chien (qui est invisible pour commencer).

Que l'exemple glisser utilisateur

L'exemple suivant montre comment permettre à un utilisateur de faire glisser l'objet chat rouge avec la souris (bouton enfoncé), puis déposez le chat lorsque l'utilisateur relâche le bouton de la souris.

<source lang="actionscript"> (red_cat.addEventListener MouseEvent.MOUSE_DOWN, startDragging); (red_cat.addEventListener MouseEvent.MOUSE_UP, stopDragging);

fonction startDragging (event: MouseEvent): void

 (
    red_cat.startDrag ();
 )

fonction stopDragging (event: MouseEvent): void (

    red_cat.stopDrag ();

) </ source>

Pour un tutoriel sur le glisser-déplacer, voir la Flash drag and drop tutorial qui montre comment mettre en œuvre jeu éducatif pour enfants de Simple. Vous apprendrez par exemple comment faire pour tester si un objet abandonné siègera sur le dessus d'une autre.

Transformations === ===

Les soi-disant "transforme" d'un non-affichage d'objets modifiables sont plus difficiles. Nous venons de vous démontrer comment changer la teinte d'une couleur transformer. Vous avez aussi peut biaiser un objet avec une stratégie similaire. Toutefois, ce type de code est vraiment un peu trop difficile à comprendre sans une initiation préalable à la programmation orientée objet.

'Couleurs': La classe ColorTransform vous permet d'ajuster les valeurs de couleur dans un objet d'affichage. L'ajustement de la couleur ou la transformation de couleur peut être appliquée à tous les quatre canaux: rouge, vert, bleu, et la transparence alpha. Voici la formule selon la Manual, extraites 20:58, 8 Octobre 2007 (MEST):

• La nouvelle valeur rouge = (ancienne valeur de rouge * redMultiplier) + redOffset
• La nouvelle valeur vert = (ancienne valeur de vert * greenMultiplier) + greenOffset
• La nouvelle valeur bleu = (ancienne valeur de bleu * blueMultiplier) + blueOffset
• Nouvelle valeur alpha = (ancienne valeur alpha * alphaMultiplier) + alphaOffset

L'embêtant est que vous avez à des transformations de programme avec un objet ColorTransform temporaire et puis copiez cet objet à la propriété colorTransform l'objet d'affichage si j'ai bien compris le droit manuel. Voir le code vers la fin du code exemple complet ci-dessous.