CS3|AS3 :: Programmer une zone sensible : Classe Rectangle
Deux façons simple de programmer une zone sensible [ 1 ]
Débutants et débutantes en programmation Flash
La programmation d'une zone sensible peut être utile sur bien des plans en Flash. Lors de l'exécution de la logique conditionnelle, nous pourrions y intégrer différents objets de chargements externes des données. Un chargeur image par exemple, ou un changement de couleur de n'importe lequel objet. Dans le premier exemple le source est très explicite puisque nous déterminons la position du pointeur en fonction de la zone sensible . Par contre la zone sensible hérite de l'objet Rectangle nommé ' zone '. C'est par une action utilisateur sur un rollOver et un rollOut que l'action trace( ); apporte les informations au Output Panel. Le script est fort simple. Cependant il a pour qualité de centralisé, dans l'objet Rectangle les valeurs de la dimension et de la position, non seulement de l'objet visuelle, mais aussi la dimension et la position de la zone sensible à programmer. Par le fait même si vous changer la valeur de la largeur de l'objet Rectangle (le troisième paramètre), vous changer la largeur de l'objet visuelle et en même temps, vous redéfinissez la largeur de la zone sensible. L'on peut affirmer dès lors que le source porte des valeurs centralisé dans l'objet Rectangle, et agissant sur tous les objets s'appropriant les données de ce même objet. On peut dire aussi que l'objet Rectangle, l'objet zoneSensible et l'objet visuelle sont soudé ensemble. C'est que l'objet zoneSensible s'accapare l'objet Rectangle et que l'objet visuelle définit sa dimension et sa position en fonction de l'objet zoneSensible. Tous les deux vont s'approprié les données de l'objet Rectangle, comme conséquence. Résultat ? - que vous arriviez de n'importe laquelle des directions, votre pointeur est détecté.
:: Attention cependant car les résultats ne sont vérifiable qu'avec le Output Panel.
:: pointeur1.fla
:: Quelques consignes
[1] :: Placer le source sur le premier keyFrame.
[2] :: ctrl + enter.
[3] :: Les résultats ne sont vérifiable qu'avec le Output Panel.
Mise en site le :: 27 Mars 2008.
Dernière modification le :: 27 Mars 2008.
:: Quelques consignes
[1] :: Placer le source sur le premier keyFrame.
[2] :: ctrl + enter.
[3] :: Les résultats ne sont vérifiable qu'avec le Output Panel.
- Code: Tout sélectionner
import flash.display.Sprite;
import flash.geom.Rectangle;
// --
// -- Définir l'objet Rectangle nommé 'zone'.
// --
var zone:Rectangle = new Rectangle(10, 10, 605, 100);
trace ('L\'objet Rectangle : ' + zone);
// --
// -- Attibuer à 'zoneSensible'l'objet 'zone'.
// --
var zoneSensible = zone;
// --
// -- Ici on voit bien que 'zoneSensible hérite bien
// -- des propriétés/valeurs de l'objet Rectangle 'zone'.
// --
trace ('La zone sensible :: ' + zoneSensible);
// --
// -- Construisons nous un objet visuelle 'f'.
// --
var f:MovieClip = new MovieClip();
f.graphics.beginFill (0xFF0000, 1);
// --
// -- Attribuons les données de l'objet Rectangle à l'objet graphique 'f'.
// -- Il faut seulement se rappeler que les valeurs de l'objet Rectangle ont été
// -- affecter à une nouvelle variable 'zoneSensible', plus explicite sur son rôle.
// --
f.graphics.drawRect (zoneSensible.x, zoneSensible.y, zoneSensible.width, zoneSensible.height);
addChild (f);
// --
// -- Construisons un Objet 'pointeur'
// -- Il serviras à récupérer la position 'x' et 'y ' du pointeur.
// --
var pointeur:Object = new Object();
// --
// -- Attribuons lui la valeur 'x' et 'y' de la position de la souris.
// --
pointeur.x = mouseX;
pointeur.y = mouseY;
// --
// -- Préparons les évènememts souris en rollOver
// -- puis en rollOut.
// --
addEventListener (MouseEvent.MOUSE_OVER, actionSourisOver);
addEventListener (MouseEvent.MOUSE_OUT, actionSourisOut);
// --
// -- Nous écrivons ici la dimension de la 'zoneSensible'.
// -- Le pointeur donnera des informations différentes si ce
// -- pointeur est à l'intérieur de la 'zoneSesible ' ou en dehors.
// --
// -- In --
function actionSourisOver (event:MouseEvent):void
{
if ((pointeur.x >= zoneSensible.x || pointeur.x <= zoneSensible.width) || (pointeur.y >= zoneSensible.y || pointeur.y <= zoneSensible.height))
{
trace ('Mon pointeur est dans la zone sensible');
}
}
// --
// -- Out
// --
function actionSourisOut (event:MouseEvent):void
{
if ((pointeur.x < zoneSensible.x || pointeur.x > zoneSensible.width) || (pointeur.y < zoneSensible.y || pointeur.y > zoneSensible.height))
{
trace ('Mon pointeur n\'est pas dans la zone sensible');
}
}
Mise en site le :: 27 Mars 2008.
Dernière modification le :: 27 Mars 2008.
Deux façons simple de programmer une zone sensible [ 2 ]
Débutant(es) en programmation
Le deuxième quant à lui và compacter le source (10 lignes en moins), par l'utilisation d'une méthode prédéfini de Flash nommé hitTestObject ( param);. Le paramêtre porte un l'objet à tester. Ici c'est l'objet visuelle que l'on veut tester et la méthode, comme vous vous y attendiez, retourne la valeur true si le pointeur entre en contact avec l'objet. C'est le même pointeur qu'au premier source . . . on le retrouve aussi sur le deuxième source.
Pour ce qui est du source, il est semblable. Voire même identique, si ce n'est qu'une méthode prédéfini vient alléger la tâche de programmation.
:: pointeur1.fla
:: Quelques consignes
[1] :: Placer le source sur le premier keyFrame.
[2] :: ctrl + enter.
[3] :: Les résultats ne sont vérifiable qu'avec le Output Panel.
Mise en site le :: 27 Mars 2008.
Dernière modification :: 27 Mars 2008.
:: Quelques consignes
[1] :: Placer le source sur le premier keyFrame.
[2] :: ctrl + enter.
[3] :: Les résultats ne sont vérifiable qu'avec le Output Panel.
- Code: Tout sélectionner
import flash.display.Sprite;
import flash.geom.Rectangle;
// --
// -- Définir l'objet Rectangle nommé 'zone'.
// --
var zone:Rectangle = new Rectangle(10, 10, 605, 100);
trace ('L\'objet Rectangle : ' + zone);
// --
// -- Attibuer à 'zoneSensible' l'objet , 'zone'.
// --
var zoneSensible = zone;
// --
// -- Ici on voit bien que 'zoneSensible' hérite bien
// -- des propriétés/valeurs de l'objet Rectangle 'zone'.
// --
trace ('La zone sensible :: ' + zoneSensible);
// --
// -- Construisons nous un objet visuelle.
// --
var f:MovieClip = new MovieClip();
f.graphics.beginFill (0xFF0000, 1);
// --
// -- Attribuons les données de l'objet Rectangle à l'objet graphique 'f'.
// -- Il faut seulement se rappeler que les valeurs de l'objet Rectangle ont été
// -- affecter à une nouvelle variable 'zoneSensible', plus explicite sur son rôle.
// --
f.graphics.drawRect (zoneSensible.x, zoneSensible.y, zoneSensible.width, zoneSensible.height);
addChild (f);
// --
// -- Construisons un Objet 'pointeur'.
// -- Il serviras à récupérer la position 'x' et 'y ' du pointeur.
// --
var pointeur:Object = new Object();
// --
// -- Attribuons lui la valeur 'x' et 'y' de la position de la souris.
// --
pointeur.x = mouseX;
pointeur.y = mouseY;
// --
// -- Préparons l'évènememt souris en rollOver
// --
addEventListener (MouseEvent.MOUSE_OVER, actionSourisOver);
// --
// -- Nous utiliserons ici la méthode 'hitTestObject( objet )' pour
// -- récupérer la valeur true, si l'objet 'pointeur' est dans 'zoneSensible'.
// -- Vous comprenez ici que l'objet en paramètre est l'objet/visuelle 'f'.
// --
function actionSourisOver (event:MouseEvent):void
{
if (hitTestObject(f))
{
trace ('Mon pointeur est-il dans la zone sensible ? : ' + hitTestObject(f));
}
}
Mise en site le :: 27 Mars 2008.
Dernière modification :: 27 Mars 2008.
Et voilà pour le source . . .
Quoique simple, ce genre particulier est fréquent sur le web. Il n'en tiens qu'à vous de faire selon les idées créatives du moment. Déterminer une zone sensible au pointeur est un source utile sur les zones de bannières interactives par exemple. On peut le considérer comme un source de détection. Par le fait même une animation peut détecter l'arrivé d'un pointeur et agir en conséquence.
Vous trouverez des informations beaucoup plus complète sur les hitTest ( ) sur le site de :
http://www.flashxpress.net/content/view/271/59/
Un très beau site avec d'excellents tutos sur flash
Par contre comprenez que ce n'est pas nécessairement CS3|AS3.
C'est plutôt du genre MX - AS1 et AS2 : mais rarement AS3.
