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).

black_cat.addEventListener(MouseEvent.CLICK, moveCat);
 
function moveCat(event:MouseEvent):void {
 black_cat.x = 200;
 black_cat.y = 200;
}
</ source>
Un énoncé comme
<source lang="actionscript">
  cat.x = 100;

est appelé une assignation: 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:

black_cat.addEventListener(MouseEvent.CLICK, moveCat);
// cat can be in original position or not (true,false)
var black_cat_ori_pos = true;
 
function moveCat(event:MouseEvent):void {
	if (black_cat_ori_pos == true)
	{
		black_cat.x += 200;
		black_cat.y += 200;
		black_cat_ori_pos = false;
	}
	else
	{
		black_cat.x -= 200;
		black_cat.y -= 200;
		black_cat_ori_pos = true;
	}
}

Dans cette fonction, nous utilisons un soi-disant 'if-then-else'. La ligne

  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 <code> (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_pos''peut ê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

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:

 x += 100;
 x -= 100;

signifie "ajouter 100 à X" ou "soustraire 100 à partir de x". Alors, c'est un raccourci pourx = x + 100;, à savoir "La nouvelle valeur de x devient l'ancienne valeur de x plus 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.

blue_cat.addEventListener(MouseEvent.MOUSE_DOWN, resizeCat);
 
function resizeCat(event:MouseEvent):void {
 blue_cat.width =  blue_cat.width * 2;
 blue_cat.height =  blue_cat.height * 2;
}
 
blue_cat.addEventListener(MouseEvent.MOUSE_UP, resizeCat2);
 
function resizeCat2(event:MouseEvent):void {
 blue_cat.width =  blue_cat.width / 2;
 blue_cat.height =  blue_cat.height / 2;
}

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.

white_cat.addEventListener(MouseEvent.CLICK, hideCat);
 
function hideCat(event:MouseEvent):void {
  white_cat.visible = false;
}

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:

// can't see the dog for starters
brown_dog.visible=false;
 
brown_dog.addEventListener(MouseEvent.CLICK, hideShow);
white_cat.addEventListener(MouseEvent.CLICK, hideShow);
 
function hideShow(event:MouseEvent):void {
  // instead of using white_cat.visible = false; we just switch it to the opposite
  white_cat.visible = !white_cat.visible;
  brown_dog.visible =!brown_dog.visible;
}

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 est vraie (true) elle deviendra fausee (false(, et l'inverse. Même technique pour le chien (qui est invisible pour commencer).

Drag and drop (glisser un objet)

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.

red_cat.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
red_cat.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
 
function startDragging(event:MouseEvent):void
 {
    red_cat.startDrag();
 }
 
function stopDragging(event:MouseEvent):void
{
    red_cat.stopDrag();
}

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.