AS3多个（动画片段按钮）动画制作一个动画片段

Question

我正在开发一个桌面应用程序。我通过Adobe Animate CC使用ActionScript 3。我设计了应用程序，为GUI启动了动画，并开始编码。主要功能已成功编码，但我添加了一些超出应用程序原始目标范围的附加功能。所有这些只是将应用程序链接到一个网站和一些其他信息，这让我完全疯狂，因为我花了太多时间用非常简单的if声明LOGIC！

无论如何，我创建了三个MovieClip按钮的菜单。这些菜单按钮点击会影响一个MovieClip，它具有随每次点击而移动的白色背景。我需要有一个背景来显示点击每个按钮时动画补间的easeIn和easeOut的美丽效果。

关于点击

画廊点击

联系点击

为了便于理解，我重新代码一个非常简单的球和3个按钮。如果你点击第一个按钮，球就会移到第二个按钮的右上方。然后第一个按钮应该是不可点击的，除非另一个按钮被点击。如果第二个按钮被点击，那么球会移动到第三个按钮的右上方。然后，第二个按钮也应该是不可点击的，除非另一个按钮被点击。第三个按钮也是一样的。

现在，如果第一按钮被再次点击，白色背景的动画不应该从默认位置启动应用程序时开始！ 应该从当前位置到默认位置动画回来......等等......

我换成了白色背景与球为简单起见

这是很容易的，但我跟丢了它eventListeners,eventHandlers和if声明！ ：/

我也做了这个表，研究了情况：

我知道我的编码技术是不够聪明，但那是因为我恨使用类，包项目文件夹...等等。

即使代码运行太长&重复，这对我来说会更好，因为编程不是我的日常工作！

请高度赞赏任何帮助和快速反应！

代码：

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

首先，你提到你想有

白色背景不应该从默认位置开始启动应用程序

时为此，您需要一个ShareObject或类似的保存和加载方法数据。其次，看起来你可能试图用场景和时间轴的框架来做一些这样的事情。我高度鼓励你不要追求这一点。

下面是您提到的问题的解决方案。请注意，如果没有您的项目，我不得不重新创建场景。您可以复制&将解决方案粘贴到新场景中，并将其编译。

• 要防止单击按钮，可以通过调用myButton.removeEventListener("click")来删除事件侦听器。或者，您可以简单地通过将对象的mouseEnabled属性设置为false来停止响应鼠标事件。
• 要顺利进行动画显示，您可以使用内置的Tween class。或者，我会指导你Greensock's TweenLite。
• 由于您似乎想要一系列标签出现，具体取决于点击的按钮，我创建了一个存储特定于每个按钮的数据的数组（btns:Array）。通过使用有组织的结构，编写不依赖显式函数的可重用代码更容易。请注意，只有一个btnListener()函数适用于所有按钮。

解决方案

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(); 
}