AS3多个(动画片段按钮)动画制作一个动画片段
我正在开发一个桌面应用程序。我通过Adobe Animate CC使用ActionScript 3。我设计了应用程序,为GUI启动了动画,并开始编码。主要功能已成功编码,但我添加了一些超出应用程序原始目标范围的附加功能。所有这些只是将应用程序链接到一个网站和一些其他信息,这让我完全疯狂,因为我花了太多时间用非常简单的if
声明LOGIC!AS3多个(动画片段按钮)动画制作一个动画片段
无论如何,我创建了三个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);
// }
//}
首先,你提到你想有
白色背景不应该从默认位置开始启动应用程序
时为此,您需要一个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();
}