Multiple AS3 (boutons MovieClip) pour animer un MovieClip

Question

Je développe une application de bureau. J'utilise ActionScript 3 via Adobe Animate CC. J'ai conçu l'application, animé l'interface graphique et commencé à coder. Les fonctions principales ont bien été codées avec succès, mais j'ai ajouté quelques fonctionnalités supplémentaires qui sortent du cadre des objectifs initiaux de l'application. Tout cela juste pour lier l'application à un site Web et d'autres informations, ce qui m'a rendu complètement fou parce que j'ai passé trop de temps avec très simple if déclaration LOGIC!

Quoi qu'il en soit, j'ai créé un menu avec trois boutons MovieClip. Ces clics de bouton de menu affectent un MovieClip qui a un fond blanc qui se déplace à chaque clic. J'ai besoin d'être un arrière-plan pour montrer le bel effet de easeIn et easeOut tweens d'animation en cliquant sur chaque bouton.

A propos cliqués

Galerie cliqués

Contactez cliqué

Pour le rendre facile à comprendre, je recréé le code avec une balle très simple et 3 boutons. Si vous cliquez sur le premier bouton, la balle se déplace vers la droite au-dessus du 2ème bouton. Ensuite, le premier bouton devrait être décoché, sauf si un autre bouton est cliqué. Si l'on clique sur le deuxième bouton, la balle se déplace vers la droite au-dessus du troisième bouton. Ensuite, le second bouton devrait être non cliquable aussi, sauf si un autre bouton est cliqué. La même chose vaut pour le troisième bouton.

Maintenant, si le premier bouton est cliqué à nouveau, l'animation du fond blanc ne devrait pas commencer à partir de la position par défaut lors du démarrage de l'application! Il est animé de retour de sa position actuelle à la position par défaut ... et ainsi de suite ...

Je remplace le fond blanc avec une balle pour la simplicité

Ceci est très facile, mais je l'ai perdu avec le eventListeners, eventHandlers, et if instructions! :/

J'ai aussi fait ce tableau qui étudie les cas:

Je sais que ma technique de codage est pas assez intelligent, mais c'est parce que je déteste en utilisant des classes, les paquets, les dossiers de projet ... etc ..

Même si le code est trop long & répétitions, ce serait mieux pour moi pour la simplicité, car la programmation n'est pas mon travail de jour!

S'il vous plaît, toute aide et une réponse rapide serait très appréciée!

code:

import flash.ui.Mouse; 
import flash.events.MouseEvent; 

one.addEventListener(MouseEvent.CLICK, moveToSecondPos); 
two.addEventListener(MouseEvent.CLICK, moveToThirdPos); 
//three.addEventListener(MouseEvent.CLICK, moveToFirstPos); 

var buttonState:Boolean; 
one.buttonState = 0; 
two.buttonState = 0; 
//three.buttonState = 0; 

function moveToSecondPos(event:MouseEvent){ 
    if(one.buttonState == 0){ 
    theBall.gotoAndPlay("go1"); 
    one.buttonState = 1; 
    } 
    else if(two.buttonState == 1){ 
    theBall.gotoAndPlay("backToOne"); 
// two.buttonState = 0; 
// one.buttonState = 1; 
    } 
    else{ 
    //disable About Button 
    one.removeEventListener(MouseEvent.CLICK, moveToSecondPos);  
    } 
} 

function moveToThirdPos(event:MouseEvent){ 
    if((two.buttonState == 0)&&(one.buttonState == 0)){ 
    theBall.gotoAndPlay("goProducts"); 
    two.buttonState = 1; 
    } 
    else if(one.buttonState == 1){ 
    theBall.gotoAndPlay("go2"); 
// two.buttonState = 1; 
// one.buttonState = 1; 
    } 
    else{ 
    two.removeEventListener(MouseEvent.CLICK, moveToThirdPos);  
    } 
} 

//function moveToFirstPos(event:MouseEvent){ 
// if(three.buttonState == 0){ 
// theBall.gotoAndPlay("go3"); 
// three.buttonState = 1; 
// } 
// else{ 
// three.removeEventListener(MouseEvent.CLICK, moveToFirstPos);   
// } 
//} 

Answer 1

D'abord, vous avez mentionné que vous vouliez avoir la

fond blanc ne devrait pas commencer à partir de la position par défaut lors du démarrage de l'application

Pour cela, vous aurez besoin d'un ShareObject ou d'une méthode comparable de sauvegarde et de chargement Les données. Deuxièmement, il semble que vous essayiez d'en faire une partie avec les cadres des Scènes et de la Timeline. Je vous encourage fortement à ne pas poursuivre cela.

Voici une solution aux problèmes que vous avez mentionnés. Remarquez que sans votre projet, j'ai dû recréer la scène. Vous pouvez copier & coller la solution dans une nouvelle scène et il va compiler.

• Pour éviter que les boutons d'être cliqué, vous pouvez supprimer l'écouteur d'événement en appelant myButton.removeEventListener("click"). Sinon, vous pouvez simplement empêcher l'objet de répondre aux événements de la souris en définissant sa propriété mouseEnabled sur false. Pour animer la boîte en douceur, vous pouvez utiliser le Tween class intégré. Sinon, je vous dirais Greensock's TweenLite.
• Parce que vous sembliez vouloir qu'une série d'étiquettes apparaisse en fonction du bouton cliqué, j'ai créé un tableau qui stocke des données spécifiques à chaque bouton (btns:Array). En utilisant une structure organisée, il est plus facile d'écrire du code réutilisable qui ne dépend pas de fonctions explicites. Notez qu'il n'y a qu'une seule fonction btnListener() qui fonctionne pour tous vos boutons.

Solution

import flash.display.Sprite; 
import flash.events.Event; 
import flash.text.TextField; 
import fl.motion.Color; 
import fl.transitions.*; 
import fl.transitions.easing.*; 

// the list of buttons we want, along with the descriptions for each 
var btns:Object = [ 
    { 
     "label":"About", 
     "desc":"Learn more about us", 
     "btn":null 
    }, 
    { 
     "label":"Gallery", 
     "desc":"See our photos", 
     "btn":null 
    }, 
    { 
     "label":"Contact", 
     "desc":"Write, call, or message", 
     "btn":null 
    } 
]; 

var nav:Sprite; // our navigation bar of buttons 
var whiteBox:Sprite; // the "ball" with the content text 
// where we save the coordinates of the whiteBox between loads 
var settings:Object = SharedObject.getLocal("foo"); 

init(); 
function init():void { 
    // Create our navigation of three buttons 

    // our container for buttons 
    nav = new Sprite(); 

    // reference to the last button 
    var last:Sprite = null; 

    // loop through the list of buttons 
    for each (var entry:Object in btns) { 
     // For each button, create a new button 
     var btn:Sprite = createButton(entry.label); 
     entry.btn = btn; 
     nav.addChild(btn); 

     // If there was a previous button, place this beside it. 
     if (last != null) { 
      btn.x = last.x + last.width + 1; 
     } 

     last = btn; 
    } 

    // Place the nav onscreen 
    addChild(nav); 
    nav.x = stage.stageWidth/2 - nav.width/2; 
    nav.y = stage.stageHeight - nav.height*2; 

    // Create the whitebox 
    whiteBox = new Sprite(); 
    whiteBox.graphics.beginFill(0xFAFAFA); 
    whiteBox.graphics.drawRect(0, 0, 150, 50); 
    whiteBox.graphics.endFill(); 

    var txt:TextField = new TextField(); 
    txt.name = "txt"; 
    txt.width = 150; 
    whiteBox.addChild(txt); 
    nav.addChild(whiteBox); 

    // Load the settings from the last run of the program. 
    if (settings.data.hasOwnProperty("x")) { 
     whiteBox.x = settings.data.x; 
     whiteBox.y = settings.data.y; 
    } 
} 

function createButton(label:String):Sprite { 
    // Creates a simple button 

    // Create the label 
    var txt:TextField = new TextField(); 
    txt.text = label; 

    // Create the background 
    var btn:Sprite = new Sprite(); 
    btn.graphics.beginFill(0xA1A1A1); 
    btn.graphics.drawRect(0, 0, txt.width + 60, txt.height + 30); 
    btn.graphics.endFill(); 
    btn.addChild(txt); 
    btn.name = label; 
    txt.x = 30; 
    txt.y = 15; 

    // Hookup events 
    btn.addEventListener("mouseOver", btnListener); 
    btn.addEventListener("mouseOut", btnListener); 
    btn.addEventListener("click", btnListener); 

    return btn; 
} 

function btnListener(e:Event):void { 
    var btn:Sprite = e.currentTarget as Sprite; 
    var c:Color = new Color(); 
    var entry:Object; 

    // Find our button in the list. 
    for each (entry in btns) { 
     if (entry.label == btn.name) { 
      break; 
     } 
    } 

    switch (e.type) { 
     case "mouseOver":   
      if (btn.mouseEnabled) { 
       c.setTint(0x0096ff, 0.5); 
       btn.transform.colorTransform = c; 
      } 
      break; 
     case "mouseOut": 
      if (btn.mouseEnabled) { 
       c.setTint(0x00, 0); 
       btn.transform.colorTransform = c; 
      }   
      break; 
     case "click": 
      // Set the text, and position of our whitebox 
      whiteBox.getChildAt(0)["text"] = entry.desc; 
      whiteBox.y = -whiteBox.height; 

      var tween:Tween = new Tween(whiteBox, "x", Regular.easeOut, whiteBox.x, btn.x, 0.35, true); 
      tween.addEventListener("motionFinish", saveState); 

      for each (var v:Object in btns) { 
       if (v.btn == btn) { 
        // make our button unclickable 
        btn.mouseEnabled = false; 
        c.setTint(0xFFFFFF, 0.5); 
        btn.transform.colorTransform = c; 
       } else { 
        // Make the other buttons clickable; 
        v.btn.mouseEnabled = true; 
        c.setTint(0x00, 0); 
        v.btn.transform.colorTransform = c; 
       } 
      } 
      break; 
    } 
} 

function saveState(e:Event):void { 
    settings.data.x = whiteBox.x; 
    settings.data.y = whiteBox.y; 
    settings.flush(); 
}