Flash Tutoriel - Utilisation d'un compteur

De EduTech Wiki
Aller à : navigation, rechercher

1 Définition du compteur

Un compteur est une variable de type int qui est utilisée dans une instruction conditionnelle pour compter le nombre de réalisation de l’instruction. A la création de cette variable, la valeur 0 lui est attribuée :

    Var compteur : int ;
    Compteur =0 ;

2 Utilisation

Le compteur est très utile quand nous avons besoin de compter combien de fois une chose se réalise. Il est utiliser entre autres choses pour déterminer les scores dans un jeu.

Nous pouvons donc compter le nombre de bonnes réponses en incrémentant un compteur nombre_de_point. Nous pouvons ensuite déterminer si le joueur a gagné avec une instruction simple de type :

if (nombre de point == 6) { textField.text="Bravo, c'est gagné";}

Les compteurs permettent également de déclencher des méthodes après un certain nombres d'évènements. Il permettent donc de scénariser une application en obligeant l'utilisateur à acquérir des points, accomplir des actions, avant de pouvoir avancer dans l'application/le jeu.

3 Exemple simple d'utilisation d'un compteur de score

Cet exemple vous montrera comment insérer un compteur de score, plus particulièrement dans un drag and drop.

Commencez par nommer et définir la variable que vous souhaitez ajouter. Dans cet exemple, nous l'appellerons "score" et mettons sa valeur de départ à 0.

var score = 0;

Ensuite, insérez dans votre code la valeur que vous souhaitez ajouter à votre score lorsque la condition est remplie (score = score +...). Pensez à ajouter et nommer une zone de texte dynamique sur votre page afin de pouvoir afficher le score. Nous l'avons ici appelée score.text. Remplacez également le texte qui s'affichera dans la zone de texte créée sur la page.

	// Teste si les paires vont ensemble
	if (dict[target] == obj)
	{
		score = score + 1;
		score.text = "Votre score est de " + score;		
	}

Vous pouvez également choisir de diminuer le score lorsque la condition n'est pas remplie (score = score - ...) et choisissez la valeur que vous souhaitez soustraire. Vous pouvez conserver la même zone de texte et le même texte que ci-dessus ou les modifier si vous le souhaitez.

	else
	{
		obj.x = ori_x;
		obj.y = ori_y;
		score = score - 1;
		score.text = "Votre score est de " + score;
	}

Cet exemple est basé sur un code de drag and drop disponible ici : Flash tutoriel drag and drop pour en savoir plus.

4 Exemple d’utilisation avec test de position

Dans cet exemple, nous allons créer plusieurs pommes rouges déplaçables. Nous afficherons des messages en fonction de leur position.

4.1 création des pommes

//variable tableau contenant vos pommes rouges
var liste_pommes = new Array;

//fonction pour créer les pommes
function creer_pomme (x,y) {
 	var pomme = new PommeRouge; 
        //les pommes sont cliquables et donc déplaçables
	pomme.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
	pomme.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
	pomme.buttonMode=true ; //changer le curseur de la souris sur les pommes
        pomme.x = x;
        pomme.y = y;
        stage.addChild(pomme); //permet d’ajouter des pommes
       liste_pommes[] = pomme;
}

//vous créez vos 5 pommes sur votre scène. Insérez ces lignes dans l'ActionScript de votre
//premier frame afin que vos pommes apparaissent dès l'ouverture de la scène
creer_pomme (100, 200) 
creer_pomme ( 120, 210)
creer_pomme (130, 200)
creer_pomme (140, 210)
créer_pomme (150, 200)

4.2 Tests des positions

4.2.1 solution 1

Nous voulons que 3 pommes se trouvent à gauche sur la scènes et 2 pommes à droite.

Pour être à gauche, la valeur de pomme.x doit être entre 300 et 500.

Pour être à droite, la valeur de pomme.x doit être entre 100 et 0.

La première chose à faire est de créer la/les variable(s) compteur et de leur assigner la valeur 0.

var compteurDroit :int =0 ;
var compteurGauche. :int=0 ;

//cette fonction teste la position des toutes les pommes.
//quand l'utilisateur place les pommes à gauche et à droite, la fonction vérifie les positions et modifie les compteurs

for each ( var pomme :MovieClip in liste_pommes ){

//1 est ajouté au compteur chaque fois qu’une pomme à une valeur de x entre 300 et 500
	
if (pomme.x < 500 && pomme.x > 300) {
	compteurGauche +=1 ;
}

//1 est ajouté au compteur chaque fois qu’une pomme à une valeur de x entre 0 et 100
if(pomme.x < 0 && pomme.x> 100)
{
compteurDroit +=1 ;
}
}

4.2.2 solution 2

Il existe une autre solution pour tester la position de mes pommes. Il s'agit de définir un symbole (par exemple un carré) ou une zone de texte dynamique sur ma scène qui contiendront mes pommes déplcées. Ensuite, je donne à mon carré ou à ma zone de texte un nom d'instance ici :conteneurD et conteneurG.

Je dois ensuite écrire ce code :

//reliée à la fonction mousDownHandler associée à mes pommes lors de leur création
function mouseDownHandler(evt:MouseEvent):void {
	var object = evt.target;
	ori_x = object.x;
	ori_y = object.y;
	// le déplacement de l'objet doit se faire à l'intérieur de la zone
	object.startDrag();
}

//reliée à la fonction mousUpHandler associée à mes pommes lors de leur création
function mouseUpHandler(evt:MouseEvent):void {
	var obj = evt.target;
	// obj.dropTarget va donner la référence de la forme ou déposer l'objet
		var target = obj.dropTarget;

	if (target != null)
	{       //appelle à la fontion pour tester si la pomme est sur la cible, ici le conteneur
		test_match(target, obj);
	}
	obj.stopDrag();
}

function test_match(target,obj) {
// test si les paires sont justes pour le conteneur droit
	if ( (target == conteneurD && obj == pomme1) ||
	(target == conteneurD && obj == pomme2) ||
	(target == contenurD && obj == pomme3) )
	{
		//incrémente le compteur droit
		compteurDroit +=1 ;
		
		// l'objet ne peut plus être bougé
		obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
		obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		
		

// test si les paires sont justes pour le contenur gauche
	if ( (target == conteneurG && obj == pomme1) ||
	(target == conteneurG && obj == pomme2) ||
	(target == contenurG && obj == pomme3) )
	{
		compteurGauche +=1 ;
		
		
		// l'objet ne peut plus être bougé
		obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
		obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		
	
	}
	
		
	
}

Dans ce code, pour chaque pomme associée au bon conteneur, le compteur est incrémenté. Cette solution est bien plus simple que d'utiliser les coordonnées x et y.

Pour plus de détails sur la deuxième solution, consultez le Flash tutoriel drag and drop

4.3 Tests avec la valeur des compteurs

//bouton test active les tests de position
test.addEventListeneur(MouseEvent.CLICK, testerPosition) ;

function testerPosition (event :MouseEvent) :void
{
//des messages d’erreur sont présents sur la scène mais ils ne sont pas visibles
messageErreurGauche.visible=false ;
messageErreurDroit.visible=false ;

//insérer ici le code présenté au point précédant

//si les 2 pommes sont à droite et 3 à gauche, nous avançons dans le frame suivant
if (compteurDroit == 2 && compteurGauche ==3){
 gotoAndStop (2) ;
}

//si le nombre de pomme à gauche n'est pas égal à 3, un message apparait et l'indique
else if (compteurDroit ==2 && compteurGauche != 3){
messageErreurGauche.visible=true ;
}

//si le nombre de pomme à droite n'est pas égal à 2, un message apparait et l'indique
else if (compteurDroit !=2 && compteurDroit ==3){
messageErreurDroit.visible=true ;
}
// 2 messages apparaissent car les pommes ne sont justes ni à gauche ni à droite
else if (compteurDroit !=2 && compteurDroit != 3){
messageErreurDroit.visible=true ;
messageErreurGauche.visible=True ;
}