Forums Développement Multimédia

Aller au contenu

mouseOver, mouseOut, mouseDown... Au secours !

CODE Actionscript

9 réponses à ce sujet

#1 SkZoo

    Ceinture Jaune

  • Members
  • PipPip
  • 16 messages

Posté 20 March 2013 - 16:46 PM

Salut à tous,

Mon problème est assez simple en finalité mais je ne trouve pas la solution et je commence à ne plus rien avoir sur le caillou !
J'ai créer des images qui répondent tels des boutons, ce qui permet un changement d'etat lors d'un click, de plus j'ai implanté un mouseOver et mouseOut afin de voir l'image changer lors d'un over.

  <s:HGroup width="200" horizontalAlign="center">[/size]
        <s:Image excludeFrom="etat2"  
           id="image" buttonMode="true" source="{ imageGris.source }"
           mouseOver="image.source = imageBlack.source "
           mouseOut="image.source = imageGris.source "
           click="chgmtEtat(event)"/>
        <s:Image source="{ imageBlack.source }"
           includeIn="etat2" />
   </s:HGroup>
 
Donc mes images sont bien déclaré comme ceci :

<fx:Declarations>
  <s:BitmapImage source="@Embed('imageGris.png')" id="imageGris" />
  <s:BitmapImage source="@Embed('imageBlack.png')" id="imageBlack" />
</fx:Declarations>
 
Cependant à chaque changment il y a un effet de Fade qui dure un certains temps (trés court) seulement voilà au moment où la souris passe sur l'image le changement s'effectue, quand la souris n'est pas c'est la bonne image que l'on voit par contre lorsque l'on click et que l'on eloigne la souris l'image repasse en "gris" le temp du fade et passe en noir aprés le changment d'état.

J'ai eu beau essayer d'implanter un changement de source lors du click dans la fonction, cela n'as pas fonctionné, et avec un mouseDown cela ne fonctionne pas non plus. J'ai l'impression que le mouseOut prend la priorité.

Merci de votre aide.

Skzoo

#2 DaveD

  • Members
  • PipPipPipPipPipPipPipPip
  • 2453 messages

Posté 20 March 2013 - 22:04 PM

Salut,

Juste comme ça


<s:Image source="{ imageBlack.source }"
ne devrait pas être
<s:Image source="{ imageGris.source }"

#3 SkZoo

    Ceinture Jaune

  • Members
  • PipPip
  • 16 messages

Posté 20 March 2013 - 22:31 PM

Salut

Autant pour moi j'ai oublié de préciser dans la description que lors du changement d'état donc à l'état 2 l'image est "noir" donc non du moins pour avoir l'effet avec la souris sur l'état 1 et l'avoir en noir sur l'état 2.

#4 DaveD

  • Members
  • PipPipPipPipPipPipPipPip
  • 2453 messages

Posté 21 March 2013 - 12:09 PM

Le problème c'est qu'on a pas la totalité de ton code c'est pas facile de t'aider enfin c'est mon avis

#5 SkZoo

    Ceinture Jaune

  • Members
  • PipPip
  • 16 messages

Posté 22 March 2013 - 17:34 PM

Salut DaveD,

Ok dans ce cas je vais mettre le code non pas entier mais l'équivalent pour que ce soit plus simple de compréhension alors (j'omet volontairement les balises s:application)

<fx:Script>
  <![CDATA[
   import flash.events.Event;
   import flash.events.MouseEvent;
   import mx.events.EffectEvent;
   import mx.events.FlexEvent;
   import mx.states.State;
   private var etatActuel:String;
   protected function chgmtEtatTo1(event:Mousevent):void {
        transitionFadeOut.play();
        etatActuel = "etat1";
        transitionFadeOut.addEventListener(EffectEvent.EFFECT_END, fadeIn);
   }
   protected function chgmtEtatTo2(event:MouseEvent):void {
        transitionFadeOut.play();
        etatActuel = "etat2";
        transitionFadeOut.addEventListener(EffectEvent.EFFECT_END, fadeIn);
   }
   protected function fadeIn(event:EffectEvent):void {
        currentState = etatActuel;
        transitionFadeOut.removeEventListener(EffectEvent.EFFECT_END, fadeIn);
        transitionFadeIn.play();
        trace(etatActuel);
   }
  ]]>
</fx:Script>
<fx:Declarations>
  <s:Fade id="transitionFadeOut" alphaFrom="1" alphaTo="0" duration="500"
        targets="{ [coteGauche, coteDroite] }"/>
  <s:Fade id="transitionFadeIn" alphaFrom="0" alphaTo="1" duration="500"
        targets="{ [coteGauche, coteDroite] }"/>
  <s:BitmapImage source="@Embed('image1Gris.png')" id="image1Gris" />
  <s:BitmapImage source="@Embed('image1Black.png')" id="image1Black" />
  <s:BitmapImage source="@Embed('image2Gris.png')" id="image2Gris" />
  <s:BitmapImage source="@Embed('image2Black.png')" id="image2Black" />
</fx:Declarations>
<s:states>
  <s:State name="etat1"/>
  <s:State name="etat2"/>
</s:states>
<s:VGroup>
  <s:HGroup width="200" horizontalAlign="center">
                <s:Image excludeFrom="etat2"  
                   id="image2" buttonMode="true" source="{ imageGris.source }"
                   mouseOver="image2.source = image2Black.source "
                   mouseOut="image2.source = image2Gris.source "
                   click="chgmtEtatTo2(event)"/>
                <s:Image source="{ image2Black.source }"
                   includeIn="etat2" />
  </s:HGroup>
  <s:HGroup height="80%">
         <s:VGroup id="coteGauche" width="100%" height="100%">
          //Code à insérer
         </s:VGroup>
         <s:VGroup id="coteDroite" width="100%" height="100%">
          //Code à insérer
         </s:VGroup>
  </s:HGroup>
  <s:HGroup width="200" horizontalAlign="center">
                <s:Image excludeFrom="etat1"  
                   id="image1" buttonMode="true" source="{ image1Gris.source }"
                   mouseOver="image1.source = image1Black.source "
                   mouseOut="image1.source = image1Gris.source "
                   click="chgmtEtatTo1(event)"/>
                <s:Image source="{ image1Black.source }"
                   includeIn="etat1" />
  </s:HGroup>
</s:VGroup>
 

Je pense bien que le code n'est pas totalement optimiser rien qu'en le regardant là je m'en rend compte mais bon dans le fond ce que je recherche je n'arrive pas à l'avoir :(


En éspérant que l'on trouve le moyen de résoudre mon problème :)

Bon week end a tous


#6 DaveD

  • Members
  • PipPipPipPipPipPipPipPip
  • 2453 messages

Posté 22 March 2013 - 19:15 PM

J'ai du mal a comprendre ton problème en plus tu as des problèmes de syntaxe dans ton code
j'ai fait ça mais je ne suis pas très sur si ce que tu cherches


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="320">
<fx:Declarations>
  <s:BitmapImage source="@Embed('image1Gris.png')" id="imageGris" />
  <s:BitmapImage source="@Embed('image1Black.png')" id="imageBlack" />
  <s:BitmapImage source="@Embed('image1Gris.png')" id="image1Gris" />
  <s:BitmapImage source="@Embed('image1Black.png')" id="image1Black" />
  <s:BitmapImage source="@Embed('image2Gris.png')" id="image2Gris" />
  <s:BitmapImage source="@Embed('image2Black.png')" id="image2Black" />
  <s:Fade id="transitionFadeOut" alphaFrom="1" alphaTo="0" duration="500"
    targets="{ [coteGauche, coteDroite] }"/>
  <s:Fade id="transitionFadeIn" alphaFrom="0" alphaTo="1" duration="500"
    targets="{ [coteGauche, coteDroite] }"/>
</fx:Declarations>
<fx:Script>
  <![CDATA[
   import flash.events.Event;
   import flash.events.MouseEvent;
   import mx.events.EffectEvent;
   import mx.events.FlexEvent;
   import mx.states.State;
 
   private var etatActuel:String;
 
   protected function chgmtEtatTo1(event:MouseEvent):void {
    transitionFadeOut.play();
    etatActuel = "etat1";
    transitionFadeOut.addEventListener(EffectEvent.EFFECT_END, fadeIn);
   }
   protected function chgmtEtatTo2(event:MouseEvent):void {
    transitionFadeOut.play();
    etatActuel = "etat2";
    transitionFadeOut.addEventListener(EffectEvent.EFFECT_END, fadeIn);
   }
   protected function fadeIn(event:EffectEvent):void {
    currentState = etatActuel;
    transitionFadeOut.removeEventListener(EffectEvent.EFFECT_END, fadeIn);
    transitionFadeIn.play();
    trace(etatActuel);
   }
  ]]>
</fx:Script>

<s:states>
  <s:State name="etat1"/>
  <s:State name="etat2"/>
</s:states>
<s:VGroup>
  <s:HGroup width="200" horizontalAlign="center">
   <s:Image excludeFrom="etat2"
          id="image2" buttonMode="true" source="{ imageGris.source }"
          mouseOver="image2.source = image2Black.source "
          mouseOut="image2.source = image2Gris.source "
          click="chgmtEtatTo2(event)"/>
   <s:Image source="{ image2Black.source }"
          includeIn="etat2" />
  </s:HGroup>
  <s:HGroup height="80%">
   <s:VGroup id="coteGauche" width="100%" height="100%">
   
   </s:VGroup>
   <s:VGroup id="coteDroite" width="100%" height="100%">
 
   </s:VGroup>
  </s:HGroup>
  <s:HGroup width="200" horizontalAlign="center">
   <s:Image excludeFrom="etat1"
          id="image1" buttonMode="true" source="{ image1Gris.source }"
          mouseOver="image1.source = image1Black.source "
          mouseOut="image1.source = image1Gris.source "
          click="chgmtEtatTo1(event)"/>
   <s:Image source="{ image1Black.source }"
          includeIn="etat1" />
  </s:HGroup>
</s:VGroup>
</s:Application>
 


#7 SkZoo

    Ceinture Jaune

  • Members
  • PipPip
  • 16 messages

Posté 22 March 2013 - 19:59 PM

Ok pour l'inversement script/declarations j'ai pas du faire attention en recopiant le code, bref ce que je veux en fait c'est au moent du click l'image devient et reste "imageBlack" jusqu'au FadeIn demandé or là tant que le FadeOut n'est pas terminé si on éloigne la souris de l'image-bouton elle redevient "imageGris"...
Vois tu ce que je veux dire?

#8 SkZoo

    Ceinture Jaune

  • Members
  • PipPip
  • 16 messages

Posté 22 March 2013 - 20:21 PM

Pour simplifier la chose...

Je vais récapituler le scénario désiré tout simplement :

Etat 1 :
l'image1 doit avoir un état Over et Out distinct (Over=image1Black ; Out=image1Gris), au click on change d'état

Lors de la transition d'état ET dés le click:
L'image1 doit avoir comme source "image1Black"
Puis on joue un effet Fade (FadeOut de 1 à 0) d'une durée de 500
Une fois terminé l'état passe à l'Etat 1
Effet Fade (FadeIn de 0 à 1) d'un durée de 500

Etat 2:
l'image1 doit avoir aucun effet de survol mais garde l'attribut buttonMode avec la source "image1Black"


J'y ai donc insérer la modification de la source dans la function mais cela ne fonctionne pas en rajoutant en première ligne de code de la fonction :

protected function chgmtEtatTo2(event:MouseEvent):void {
        image1.source = image1Black.source;
        transitionFadeOut.play();
        etatActuel = "etat2";
        transitionFadeOut.addEventListener(EffectEvent.EFFECT_END, fadeIn);
   }
 
Je remet le code entier pour que vous puissiez le voir (j'y ai apporté quelques modifications mais le code est valide) :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
  <fx:Declarations>
   <s:BitmapImage source="@Embed('image1Gris.png')" id="image1Gris" />
   <s:BitmapImage source="@Embed('image1Black.png')" id="image1Black" />
   <s:BitmapImage source="@Embed('image2Gris.png')" id="image2Gris" />
   <s:BitmapImage source="@Embed('image2Black.png')" id="image2Black" />
   <s:Fade id="transitionFadeOut" alphaFrom="1" alphaTo="0" duration="500"
                targets="{ [coteGauche, coteDroite] }"/>
        <s:Fade id="transitionFadeIn" alphaFrom="0" alphaTo="1" duration="500"
           targets="{ [coteGauche, coteDroite] }"/>
   </fx:Declarations>
   <fx:Script>
        <![CDATA[
         import flash.events.Event;
         import flash.events.MouseEvent;
         import mx.events.EffectEvent;
         import mx.events.FlexEvent;
         import mx.states.State;

         private var etatActuel:String;

         protected function chgmtEtatTo1(event:MouseEvent):void {
                  transitionFadeOut.play();
                  etatActuel = "etat1";
                  transitionFadeOut.addEventListener(EffectEvent.EFFECT_END, fadeIn);
         }
         protected function chgmtEtatTo2(event:MouseEvent):void {
                  transitionFadeOut.play();
                  etatActuel = "etat2";
                  transitionFadeOut.addEventListener(EffectEvent.EFFECT_END, fadeIn);
         }
         protected function fadeIn(event:EffectEvent):void {
                  currentState = etatActuel;
                  transitionFadeOut.removeEventListener(EffectEvent.EFFECT_END, fadeIn);
                  transitionFadeIn.play();
                  trace(etatActuel);
         }
        ]]>
   </fx:Script>
   <s:states>
        <s:State name="etat1"/>
        <s:State name="etat2"/>
   </s:states>
   <s:VGroup height="60%">
        <s:HGroup width="200" horizontalAlign="center">
         <s:Image id="image1" buttonMode="true" source="{ image1Gris.source }"
                  mouseOver="image1.source = image1Black.source "
                  mouseOut="image1.source = image1Gris.source "
                  click="chgmtEtatTo2(event)"
                  mouseOut.etat2 = "{ image1Black.source }"
                  source.etat2 = "{ image1Black.source }" />
         </s:HGroup>
         <s:HGroup height="80%">
          <s:VGroup id="coteGauche" width="100%" height="100%">

          </s:VGroup>
          <s:VGroup id="coteDroite" width="100%" height="100%">

          </s:VGroup>
         </s:HGroup>
         <s:HGroup width="200" horizontalAlign="center">
          <s:Image id="image2" buttonMode="true" source = "{ image2Gris.source }"
                  mouseOver="image2.source = image2Black.source "
                  mouseOut="image2.source = image2Gris.source "
                  click="chgmtEtatTo1(event)"
                  mouseOut.etat1 = "{ image2Black.source }"
                  source.etat1 = "{ image2Black.source }" />
         </s:HGroup>
   </s:VGroup>
</s:Application>


 

Modifié par SkZoo, 24 March 2013 - 13:37 PM.


#9 SkZoo

    Ceinture Jaune

  • Members
  • PipPip
  • 16 messages

Posté 26 March 2013 - 10:00 AM

Personne n'a une idée alors?
Me suis-je bien fait comprendre?
N'hésitez pas à me poser des questions si quelque chose ne vous parle pas.

SkZoo

#10 DaveD

  • Members
  • PipPipPipPipPipPipPipPip
  • 2453 messages

Posté 30 March 2013 - 23:51 PM

t'a un exemple ici ;)
http://polygeek.com/...heckedunchecked



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)