Projet : jeux évolutif en flash

[Muktaditi]

Bonjour..

sur un projet de jeu évolutif, j'ai écrit ce bout de code....
pour l'heure il n'est pas complet et ne fonctionne pas...

je voudrais cependant comprendre si logiquement ça devrait fonctionner

Code: Tout sélectionner

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.filters.*;

var positionFleche1:TransitionManager = new TransitionManager(selecteur1.fleche1);
var posInitFleche1:Number = selcteur1.fleche1.rotation;
var positionFleche2:TransitionManager = new TransitionManager(selecteur2.fleche2);
var posInitFleche2:Number = selcteur2.fleche2.rotation;

var categorieSelectionne:Number=0;
var etatNomCategorie:Boolean = false;

var posInitNomContenu:Number=contenuNomSelection.x

var etatFiltre: Boolean = false;
var filtres:GlowFilter = new GlowFilter (0xff0000, 1,25, 25, 5, 1, false, false);
var listeFiltres:Array = new Array (filtres);


function survol (event:MouseEvent) {
   var selecteurVise:String = event.currentTarget.name;
      if (selecteurVise=="selec1") {
         categorieSelectionne=1;
         positionFleche1.startTransition({Rotate, Transition.IN, 1, Strong.easeInOut,false,90});
         if (etatFiltre==true) {
            appliqueFiltre();
         }else {
            desappliqueFiltre();
         }
         else if (etatNomCategorie==false){
            montreNomCategorie();
         }else{
            cacheNomCategorie();
         }
      }
   ////else if x  5////

      else {
         categorieSelectionne=0;
         cacheNomCategorie();
      }
}

function montreNomCategorie() {
   var translationNomContenu:Tween = new Tween(contenuNomSelection, "x",Strong.easeOut, contenuNomSelection.x, +200, 1, true);
   translationNomContenu.addEventListener(TweenEvent.MOTION_FINISH, contenuOui);
}
function cacheNomCategorie() {
   var translationNomContenu:Tween = new Tween(contenuNomSelection, "x",Strong.easeOut, contenuNomSelection.x,posInitNomContenu, 1, true);
   translationNomContenu.addEventListener(TweenEvent.MOTION_FINISH, contenuNo);
}
function contenuOui (evt:TweenEvent);
etatNomCategorie==true;
}
function contenuNo (evt:TweenEvent){
   if (categorieSelectionne==0){
   etatNomCategorie=false;
   }
   else{
      initCategorie();
   }
}
function initCategorie();{
   if (categorieSelectionne==1)
   contenuNomSelection.nomContenu.text="Les Animaux";
}

function appliqueFiltre (){
   event.currentTarget.filters = listeFiltres;
}
function desappliqueFiltre (){
   event.currentTarget.filters = [];
}
this.selecteur1.selec1.addEventListener(MouseEvent.MOUSE_OVER, survol);

[explainMe]

à première vu rien ne me choque.

Je ne suis pas très familiarisé avec l'utilisation des transitions (mis à part la classe Tween) donc pour le moment je ne peux me prononcer sur cette partie.

en revanche il manque l'argument sur les fonctions :

Code: Tout sélectionner

function appliqueFiltre (){
   event.currentTarget.filters = listeFiltres;
}
function desappliqueFiltre (){
   event.currentTarget.filters = [];
}

étant donné que tu souhaites influer sur le event.currentTarget, il faut que tu fournisse un event en argument à la fonction !

Deuxième chose :

Code: Tout sélectionner

if (etatFiltre==true) {
       appliqueFiltre();
    }else {
       desappliqueFiltre();
}

Si le filtre est appliqué, alors on l'applique ? Ne serait-ce pas l'inverse plutôt ?

C'est tout ce que je vois en l'état.

[Muktaditi]

pour ce qui est de la rotation, je cherche encore comment faire a dire vrai...
j'ai 2 flèches, dont le sens de rotation est variable selon le selecteur survolé...

le lien entre les deux, c'est la position du selecteur, mais je ne vois pas comment utiliser le point de référence du selecteur comme déterminant du sens de rotation de la flèche...
Il me reste donc la possiblité de déclarer 4 positions possibles pour une variable positionFleche, mais là, c'est la syntaxe qui bloque, je ne sais pas l'écrire...et de plus, je souhaiterai voir un mouvement de rotation, et donc l'utiliser dans une fonction...

Mon cheminement de pensées est celui-ci :

le rollover sur chacun des numéro des selecteurs entraine :
- un glow sur le selecteur visé
- une rotation de la flêche correspondante dans la direction du selecteur visé
- le nom de la categorie correspondante au sélecteur visé s'affiche dans un contenuNomSelection (caché derrière), qui se déplace dans le cadre prévu à cet effet...

le rollout entraine:
le retour de la flêche dans son sens de rotation 0

et le clic entraine
_l'apparition des noms des boutons correspondant

A ce stade, je vois que seule la fermeture du swf remet tout a 0, j'aurais toujours des noms dans les boutons...j'envisage un bouton reset....


j'ai mis

Code: Tout sélectionner

function appliqueFiltre (event:MouseEvent){
   event.currentTarget.filters = listeFiltres;
}
function desappliqueFiltre (event:MouseEvent){
   event.currentTarget.filters = [];
}

mais je ne suis pas persuadée de savoir ce que je fais...

donc pour ce code:

Code: Tout sélectionner

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.filters.*;

var positionFleche1:TransitionManager = new TransitionManager(selecteur1.fleche1);
var posInitFleche1:Number = selecteur1.fleche1.rotation;
var positionFleche2:TransitionManager = new TransitionManager(selecteur2.fleche2);
var posInitFleche2:Number = selcteur2.fleche2.rotation;

var categorieSelectionne:Number=0;
var etatNomCategorie:Boolean = false;

var posInitNomContenu:Number=contenuNomSelection.x

var etatFiltre: Boolean = false;
var filtres:GlowFilter = new GlowFilter (0xff0000, 1,25, 25, 5, 1, false, false);
var listeFiltres:Array = new Array (filtres);


function survol (event:MouseEvent) {
   var selecteurVise:String = event.currentTarget.name;
      if (selecteurVise=="selec1") {
         categorieSelectionne=1;
         positionFleche1.startTransition({Rotate, Transition.IN, 1, Strong.easeInOut,false,90});
         if (etatFiltre==false) {
            appliqueFiltre();
         }else {
            desappliqueFiltre();
         }
         else if (etatNomCategorie==false){
            montreNomCategorie();
         }else{
            cacheNomCategorie();
         }
      }
   ////else if x  5////

      else {
         categorieSelectionne=0;
         cacheNomCategorie();
      }
}

function montreNomCategorie() {
   var translationNomContenu:Tween = new Tween(contenuNomSelection, "x",Strong.easeOut, contenuNomSelection.x, +200, 1, true);
   translationNomContenu.addEventListener(TweenEvent.MOTION_FINISH, contenuOui);
}
function cacheNomCategorie() {
   var translationNomContenu:Tween = new Tween(contenuNomSelection, "x",Strong.easeOut, contenuNomSelection.x,posInitNomContenu, 1, true);
   translationNomContenu.addEventListener(TweenEvent.MOTION_FINISH, contenuNo);
}
function contenuOui (evt:TweenEvent);
etatNomCategorie==true;
}
function contenuNo (evt:TweenEvent){
   if (categorieSelectionne==0){
   etatNomCategorie=false;
   }
   else{
      initCategorie();
   }
}
function initCategorie();{
   if (categorieSelectionne==1)
   contenuNomSelection.nomContenu.text="Les Animaux";
}

function appliqueFiltre (event:MouseEvent){
   event.currentTarget.filters = listeFiltres;
}
function desappliqueFiltre (event:MouseEvent){
   event.currentTarget.filters = [];
}
this.selecteur1.selec1.addEventListener(MouseEvent.MOUSE_OVER, survol);


function initCategorie();{
   if (categorieSelectionne==1)
   contenuNomSelection.nomContenu.text="Les Animaux";
}
   


this.selecteur1.selec1.addEventListener(MouseEvent.MOUSE_OVER, survol);

j'ai :

1084: Erreur de syntaxe : colon est attendu devant comma .positionFleche1.startTransition({Rotate, Transition.IN, 1, Strong.easeInOut,false,90});
1083: Erreur de syntaxe : rightbrace non attendu.positionFleche1.startTransition({Rotate, Transition.IN, 1, Strong.easeInOut,false,90});
1084: Erreur de syntaxe : rightparen est attendu devant rightbrace.positionFleche1.startTransition({Rotate, Transition.IN, 1, Strong.easeInOut,false,90});
1083: Erreur de syntaxe : rightparen non attendu.positionFleche1.startTransition({Rotate, Transition.IN, 1, Strong.easeInOut,false,90});
1083: Erreur de syntaxe : else non attendu.else if (etatNomCategorie==false){
1083: Erreur de syntaxe : else non attendu.}else{

Pour les rotations, je vais revoir la doc pour mieux comprendre, mais c'est quoi comma
pour les else et else if, la logique m'échappe un peu...

[explainMe]

Pour la rotation d'un clip, regarde du côté de la propriété rotation dans la doc.

Ça permet de définir l'angle d'un MovieClip (attention cependant l'emplacement du point de référence du clip est très important ici car il servira d'axe de rotation).

Donc en gros tu peux définir une variable qui contient plusieurs angles (positifs et négatifs) rattachés aux boutons où tu fait le RollOver et lorsque tu effectue le RollOver, tu va récupérer l'angle correspondant dans ta variable et tu anime le clip qui doit tourner (sur sa propriété rotation comme nous l'avons déjà fait sur une propriété x ou y pour lui appliquer une translation), grâce à la classe Tween.

Il me reste donc la possiblité de déclarer 4 positions possibles pour une variable positionFleche, mais là, c'est la syntaxe qui bloque, je ne sais pas l'écrire..

Effectivement. Je suis en train de terminer la rédaction du chapitre 7 sur flash et j'y aborde justement ce sujet.

Pour l'application/"désapplication" des filtres c'est exactement ça.

mais je ne suis pas persuadée de savoir ce que je fais...

Code: Tout sélectionner

event.currentTarget.filters = listeFiltres;

Tu appliques tous les filtres définis et intégrés dans la variable listeFiltres (qui est un Tableau Array).

Code: Tout sélectionner

event.currentTarget.filters = [];

Tu appliques un tableau vide. Donc plus de filtres !

...mais c'est quoi comma

comma en anglais, veut dire virgule. Donc dans ta syntaxe tu as un souci au niveau d'une virgule.

pour les else et else if, la logique m'échappe un peu...

Un seul test "si" :

Code: Tout sélectionner

if( condition ) {
      action(s)si la condition est remplie
}

Un test "si", "sinon" :

Code: Tout sélectionner

if( condition ) {
      action(s) si la condition est remplie
}
else {
   action(s) si la condition n'est pas remplie
}

Test avec plusieurs possibilités "si", "sinon si", "sinon si", "sinon" :

Code: Tout sélectionner

if( condition initiale ) {
      action(s) si la condition initiale est remplie
}
else if (condition 2) {
   action(s) si la condition 2 est pas remplie
}
else if (condition 3) {
   action(s) si la condition 3 n'est pas remplie
}
else {
   action(s) si aucune des conditions ci-dessus n'est remplie
}

Dans ce dernier cas de figure, le else "seul" doit toujours êtres placé en dernier :
- un else if laisse la possibilité de tester d'autres possibilités après lui
- une esle "seul" est une solution définitive à appliquer en dernier recours si la(les) condition(s) testée(s) avant lui n'ont rien donné.

Le souci dans ton code c'est que tu as des else if après un else.

[Muktaditi]

bonjour...

Alors.. j'en suis là :

Code: Tout sélectionner

import fl.transitions.*;
import fl.transitions.easing.*;
//import flash.filters.*;


var posInitFleche1:Number = selecteur1.fleche1.rotation;
var etatFLeche1:Boolean=false;
var posInitFleche2:Number = selecteur2.fleche2.rotation;
var etatFLeche2:Boolean=false;//var etatNomCategorie:Boolean = false;
var categorieSelectionne:Number=0;   
var posInitNomContenu:Number=contenuNomSelection.x;   
var angle:Number=0;
//var etatFiltre: Boolean = false;
//var filtres:GlowFilter = new GlowFilter (0xff0000, 1,25, 25, 5, 1, false, false);
//var listeFiltres:Array = new Array (filtres);

function survol (event:MouseEvent) {
   var selecteurVise:String = event.currentTarget.name;
      if (selecteurVise=="selec1") {
         categorieSelectionne=1;
     }
     if (selecteurVise=="selec2") {
         categorieSelectionne=2;
      }
     if (selecteurVise=="selec3") {
         categorieSelectionne=3;
     }
     if (selecteurVise=="selecA") {
         categorieSelectionne=4;
     }
     if (selecteurVise=="selecB") {
         categorieSelectionne=5;
     }
     if (selecteurVise=="selecC") {
         categorieSelectionne=6;
     }
       initCategorie();
      
}

function initCategorie(){
   if (categorieSelectionne==1){
      contenuNomSelection.nomContenu.text="Les Animaux";
      angle=90;
   }
    if (categorieSelectionne==2){
         angle=180;
      contenuNomSelection.nomContenu.text="Les Véhicules";
    }
    if (categorieSelectionne==3){
         contenuNomSelection.nomContenu.text="Les Machines";
         angle=270;
    }
      var rotationFleche1:Tween=new Tween(selecteur1.fleche1, "rotation", Strong.easeOut, posInitFleche1, selecteur1.fleche1.rotation+angle, 1, true);
     deplaceContenuNomSelection();

   if (categorieSelectionne==4){
         contenuNomSelection.nomContenu.text="Les AAA";
         angle=90;
   }
   if (categorieSelectionne==5){
         contenuNomSelection.nomContenu.text="Les BBB";
         angle=180;
   }
   if (categorieSelectionne==6){
         contenuNomSelection.nomContenu.text="Les CCC";
         angle=270;
   }
    var rotationFleche2:Tween=new Tween(selecteur2.fleche2, "rotation", Strong.easeOut, posInitFleche2, selecteur2.fleche2.rotation+angle, 1, true);
   deplaceContenuNomSelection();
}

function deplaceContenuNomSelection(){
   var translationContenuNomSelection:Tween = new Tween(contenuNomSelection, "x", Strong.easeOut, contenuNomSelection.x,contenuNomSelection.x+353, 1, true);
}

function horsSurvol (event:MouseEvent){
   var rotationFleche1:Tween=new Tween(selecteur1.fleche1, "rotation", Strong.easeOut, selecteur1.fleche1.rotation, posInitFleche1, 1, true);
   initContenuNomSelection();
}
function initContenuNomSelection(){
   var translationContenuNomSelection:Tween = new Tween(contenuNomSelection, "x", Strong.easeOut, contenuNomSelection.x,posInitNomContenu, 1, true);
}


this.selecteur1.selec1.addEventListener(MouseEvent.MOUSE_OVER, survol);
this.selecteur1.selec1.addEventListener(MouseEvent.MOUSE_OUT, horsSurvol);

this.selecteur1.selec2.addEventListener(MouseEvent.MOUSE_OVER, survol);
this.selecteur1.selec2.addEventListener(MouseEvent.MOUSE_OUT, horsSurvol);
   
this.selecteur1.selec3.addEventListener(MouseEvent.MOUSE_OVER, survol);
this.selecteur1.selec3.addEventListener(MouseEvent.MOUSE_OUT, horsSurvol);

this.selecteur2.selecA.addEventListener(MouseEvent.MOUSE_OVER, survol);
this.selecteur2.selecA.addEventListener(MouseEvent.MOUSE_OUT, horsSurvol);

this.selecteur2.selecB.addEventListener(MouseEvent.MOUSE_OVER, survol);
this.selecteur2.selecB.addEventListener(MouseEvent.MOUSE_OUT, horsSurvol);
   
this.selecteur2.selecC.addEventListener(MouseEvent.MOUSE_OVER, survol);
this.selecteur2.selecC.addEventListener(MouseEvent.MOUSE_OUT, horsSurvol);

ça fonctionne, a ceci près que mes 2 flèches tournent en même temps, et que si je passe d'un sélecteur a l'autre directement, l'angle d'origine devient celui du dernier sélecteur visé.... ça ne marche en somme que si je repasse par un rollout de tout selecteur....

Comment résoudre ça

[explainMe]

Bonjour,

C'est normale que tes 2 flèches tournent simultanément car dans ta fonction initCategorie();, tes 2 Tween sont systématiquement effectuées puisqu'elles ne sont pas soumises à des conditions (elles ne sont pas dans des if par exemple). Donc à chaque fois que la fonction sera exécutée, les 2 Tween aussi, donc les 2 flèches tournent.

Pour le retour à la position initial, ce n'est pas très clair dans ton code je trouve.

Par exemple la fonction horsSurvol(); n'influe que sur fleche1, donc comment fleche2 peut-elle bouger ?

Ne faudrait-il pas que tu ai soit 2 fonction horsSurvol(); (une pour chaque flèche, à appeler lorsque c'est nécessaire), soit une seule mais qui contienne un test visant à déterminer quelle flèche elle doit faire tourner ?

[Muktaditi]

oui...c'est très clair....

A force de tourner et retourner ce code dans tous les sens, je me perds...c'est pourtant j'en suis sur hyper simple...
bon... je vais continuer ...

[Muktaditi]

je m'en suis sorti finalement.... j'ai un peu tout modifié, mais cette fois-ci ça marche

voici mon code donc :

Code: Tout sélectionner

import fl.transitions.*;
import fl.transitions.easing.*;

var categorieSelectionne:Number=0;
this.menuBouton.visible=false;
var etatClique:Boolean=false

function over1 (event:MouseEvent){
   etatClique=false;
   var selecteurVise:String=event.currentTarget.name;
   if (selecteurVise=="selec1"){
      var rotation1Fleche1:Tween=new Tween(fleche1, "rotation", Strong.easeOut, 0, 45, 1, true);
      categorieSelectionne=1;
      initCategorie();
   }
   if (selecteurVise=="selec2"){
      var rotation2Fleche1:Tween=new Tween(fleche1, "rotation", Strong.easeOut, 0, 90, 1, true);
      categorieSelectionne=2;
      initCategorie();
      
   }
   if (selecteurVise=="selec3"){
      var rotation3Fleche1:Tween=new Tween(fleche1, "rotation", Strong.easeOut, 0, 135, 1, true);
      categorieSelectionne=3;
      initCategorie();
   }
}
function initCategorie (){
   if (categorieSelectionne==1){
      categorie.nomCategorie.text="Les Animaux";
      menuBouton.bouton1.text="Le Chat";
      menuBouton.bouton2.text="Le Chien";
      menuBouton.bouton3.text="Le Cheval";
      menuBouton.bouton4.text="La Chèvre";
      menuBouton.bouton5.text="La Chouette";
   }
   if (categorieSelectionne==2){
      categorie.nomCategorie.text="Les Véhicules";
      menuBouton.bouton1.text="La Voiture";
      menuBouton.bouton2.text="Le Camion";
      menuBouton.bouton3.text="Le Train";
      menuBouton.bouton4.text="Le Bus";
      menuBouton.bouton5.text="La Moto";
   }
   if (categorieSelectionne==3){
      categorie.nomCategorie.text="Les Machines";
      menuBouton.bouton1.text="La Cafetière";
      menuBouton.bouton2.text="La Radio";
      menuBouton.bouton3.text="La Tondeuse";
      menuBouton.bouton4.text="Le lave Linge";
      menuBouton.bouton5.text="Le ventillateur";
   }
   deplaceCategorie();
}
function deplaceCategorie (){
   var translationNom:Tween=new Tween(categorie, "x", Strong.easeOut, categorie.x, 700, 2, true);
}
function out1 (event:MouseEvent){
   categorieSelectionne==0;
   var rotationFleche1:Tween=new Tween(fleche1, "rotation", Strong.easeOut, fleche1.rotation, 0,1,true);
      if(etatClique==false){
      replaceCategorie();
      menuBouton.visible=false;
      }
      else {
         categorie.x=700;
         menuBouton.visible=true;
      }
}
   


function replaceCategorie(){
   
   var translationNom:Tween=new Tween(categorie, "x", Strong.easeOut, 600, 0, 1, true);
   
}
function over2 (event:MouseEvent){
   var selecteurVise:String=event.currentTarget.name;
   if (selecteurVise=="selec4"){
      var rotation1Fleche2:Tween=new Tween(fleche2, "rotation", Strong.easeOut, 0, 45, 2, true);
   }
   if (selecteurVise=="selec5"){
      var rotation2Fleche2:Tween=new Tween(fleche2, "rotation", Strong.easeOut, 0, 90, 1, true);
   }
   if (selecteurVise=="selec6"){
      var rotation3Fleche2:Tween=new Tween(fleche2, "rotation", Strong.easeOut, 0, 135, 1, true);
   }
}
function out2 (event:MouseEvent){
   var rotationFleche2:Tween=new Tween(fleche2, "rotation", Strong.easeOut, fleche2.rotation, 0, 1, true);

}
function clic1 (event:MouseEvent){
   etatClique=true;
   menuBouton.visible=true;
}

function clic2 (event:MouseEvent){
   menuBouton.visible=true;
   categorie.x=700;
}


   
selec1.addEventListener(MouseEvent.MOUSE_OVER, over1);
selec1.addEventListener(MouseEvent.MOUSE_OUT, out1);
selec1.addEventListener(MouseEvent.CLICK, clic1);

selec2.addEventListener(MouseEvent.MOUSE_OVER, over1);
selec2.addEventListener(MouseEvent.MOUSE_OUT, out1);
selec2.addEventListener(MouseEvent.CLICK, clic1);

selec3.addEventListener(MouseEvent.MOUSE_OVER, over1);
selec3.addEventListener(MouseEvent.MOUSE_OUT, out1);
selec3.addEventListener(MouseEvent.CLICK, clic1);

selec4.addEventListener(MouseEvent.MOUSE_OVER, over2);
selec4.addEventListener(MouseEvent.MOUSE_OUT, out2);
selec4.addEventListener(MouseEvent.CLICK, clic2);

selec5.addEventListener(MouseEvent.MOUSE_OVER, over2);
selec5.addEventListener(MouseEvent.MOUSE_OUT, out2);
selec5.addEventListener(MouseEvent.CLICK, clic2);

selec6.addEventListener(MouseEvent.MOUSE_OVER, over2);
selec6.addEventListener(MouseEvent.MOUSE_OUT, out2);
selec6.addEventListener(MouseEvent.CLICK, clic2);

il me reste maintenant à creer les écouteurs (de clic) sur les boutons...
pour cette variante de jeu , 1 bouton correspond à une image et 1 son...
qu'est-il préférable de creer ??? (des clips, des swf .... avec ou sans liens xml...???)

[explainMe]

Félicitations !

Le code est propre et compréhensible en plus (5 points supplémentaires ! ).

Certains aspects peuvent encore êtres améliorés, mais c'est déjà un excellent travail. Bravo.

Pour le reste de ton projet il n'y a pas vraiment de règle, c'est un peu toi qui décide comment tu veux gérer les choses.
Si ton projet est ne nécessite pas de mise à jour, le XML n'est pas nécessaire ici, tu peux très bien ranger tes images et tes sons dans 2 dossiers, les nommer comme il convient, et pointer directement dessus lorsque tu voudra les charger dans ton application.

Pour les boutons certains préfère créer des objets de type bouton (c'est assez pratique pour créer rapidement un effet de survol), maintenant ça ne changera rien au niveau du code si ton objet bouton est de type bouton ou un clip.

[Muktaditi]

merci

je croyais ne jamais y arriver... mais je ne suis pas encore au bout de mes peines....
je refais aussi mon design, tant qu'a faire....

Pour la suite l'image n'est pas un soucis, je vais avoir plus de mal avec le son... je fouille sur le web pour trouver la méthode
mais ça pourrait être une suggestion de cours...

J'attends avec impatience la suite du site...