AS3 多个（影片剪辑按钮）为一个影片剪辑设置动画

Posted 2023-02-16

【中文标题】AS3 多个（影片剪辑按钮）为一个影片剪辑设置动画

【英文标题】：AS3 multiple (movieclip buttons) to animate one movieclip

【发布时间】：2018-01-13 12:04:55

【问题描述】：

我正在开发一个桌面应用程序。我正在通过 Adob​​e Animate CC 使用 ActionScript 3。我设计了应用程序，为 GUI 设置了动画，然后开始编码。主要功能已成功编码，但我添加了一些超出应用程序原始目标范围的附加功能。所有这些只是为了将应用程序链接到一个网站和一些其他信息，这让我非常抓狂，因为我花了太多时间在非常简单的if 语句逻辑上！

无论如何，我创建了一个包含三个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);        
//  
//

【参考方案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();