Question

我正在尝试在Flash中创建类似jQuery的滑块。我目前正在使用补间类来移动对象的x位置，但它有点儿错误。我必须使用闪存，因为它被整合到最适合Flash的手册软件中。

当我单击右箭头按钮时，对象移动到新的x位置。当我再次点击按钮时，它会移动，但有时它会跳回到当前位置。当我点击左键时，它有时会超出目的地。

我可以创建一个简单的“单击以转到下一帧”类型的滚动条，但它不会提供相同的补间/滚动效果。

这是我正在使用的代码：

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var scrollTweenRight:Tween = new Tween(mc_scroll, "x", Strong.easeOut, mc_scroll.x, mc_scroll.x-1940, 3, true);
scrollTweenRight.stop();

var scrollTweenLeft:Tween = new Tween(mc_scroll, "x", Strong.easeOut, mc_scroll.x, mc_scroll.x+1940, 3, true);
scrollTweenLeft.stop();


// functions 
function scrollRight(e:MouseEvent){
    scrollTweenRight.start();
}
function scrollLeft(e:MouseEvent){
    scrollTweenLeft.start();
}


// listeners 
btn_right.addEventListener(MouseEvent.CLICK, scrollRight);
btn_left.addEventListener(MouseEvent.CLICK, scrollLeft);

Answer 1

使用像TweenLite / TweenMax / Tweener这样的库，内置的库不太好（也很慢）。

如果您想要定期“步骤”移动，请不要使用mc.x来确定最终位置，因为每次单击按钮时都会采用该位置。始终将“最终”（所需）位置存储在var中。例如：

var shouldMoveToX:Number = 0; //initial position value
var step:Number = 500;
function scrollLeft(e:MouseEvent):void {
  shouldMoveToX += step;
  //kill the tween if any - I dunno if this is necessary, I haven't used Tween class in ages
  //start the tween, pass the final position as shouldMoveToX
}

编辑：哦，我现在看到问题是什么 - 你将mc的X pos传递给Tween的构造函数，你实际上永远不会更新它。补间将始终从这一点开始。把它放到你的scrollLeft / Right函数中：

function scrollRight(e:MouseEvent){
    scrollTweenRight.begin = mc_scroll.x;
    scrollTweenRight.start();
}

我上面写的内容仍然适用，总是使用shouldMoveToX作为最终位置，否则快速点击时会有不规则的移动。

...所以你的完整代码应该是这样的：

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var scrollTweenRight:Tween = new Tween(mc_scroll, "x", Strong.easeOut, mc_scroll.x, mc_scroll.x, 3, true);
scrollTweenRight.stop();

var scrollTweenLeft:Tween = new Tween(mc_scroll, "x", Strong.easeOut, mc_scroll.x, mc_scroll.x, 3, true);
scrollTweenLeft.stop();

var step:Number = 100;
var shouldMoveToX:Number = mc_scroll.x;

// functions 
function scrollRight(e:MouseEvent){
    scrollTweenRight.begin = mc_scroll.x;
    shouldMoveToX -= step;
    scrollTweenRight.finish = shouldMoveToX;
    scrollTweenRight.start();
}
function scrollLeft(e:MouseEvent){
    scrollTweenLeft.begin = mc_scroll.x;
    shouldMoveToX += step;
    scrollTweenLeft.finish = shouldMoveToX;
    scrollTweenLeft.start();
}


// listeners 
btn_right.addEventListener(MouseEvent.CLICK, scrollRight);
btn_left.addEventListener(MouseEvent.CLICK, scrollLeft);

如何使用Flash AS3创建一个简单的“滑块”

1 个答案: