Question

我正在学习AS3 atm并且我正在尝试构建一个AS3轮播，但我不明白旋转木马背后的逻辑...因此我为什么会被困在那里。

这有点长的解释，请光临我 - 基本上我有一个800w的动画片段，其中包含4个彼此相邻的面板，每个面板有200个宽度（See picture here）。当我单击并拖动鼠标时，它会检测鼠标的方向，并根据方向向左或向右移动面板200。

我的问题是我希望这个循环，所以当它到达左侧面板时，它会继续向左移动，反之亦然，当它到达正确的面板时，我应该能够继续点击和拖动动作。

我不确定这是否被认为是旋转木马？

无论如何这就是我到目前为止......我已经发表了两条评论“现在发生了什么”toLeftTween()和toRightTween()来表明我被困在哪里。请不要嘲笑我的代码，我只是个新手：p

import com.greensock.*;
import com.greensock.easing.*;


var selectX:Number = 0;
var mouseX1:int = 0;
var mouseX2:int = 0; 
var mcPosX:int = 0;

var contents:MovieClip = all_mc;
var draggable:Boolean = true;

contents.buttonMode = true;
contents.mouseChildren = false;
contents.x = 0;
contents.y = 70;

addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseDownHandler(e:MouseEvent):void {  
    //select the correct point on mc
    selectX = contents.x - mouseX;

    //for prediction direction later - mouse point 1
    mouseX1 = stage.mouseX;
    //trace("1: " + mouseX1);   


    // move mc with mouse
    if (draggable) {
        addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
    } else {
        trace("unable to drag");
    }
}

function mouseUpHandler(e:MouseEvent):void {
    //for prediction direction later - mouse point 2
    mouseX2 = stage.mouseX;
    //trace("2: " + mouseX2);

    //remove mc move with mouse
    removeEventListener(Event.ENTER_FRAME, onEnterFrameHandler);    
    //check for direction of the mc based on mouseX1 and mouseX2
    mouseDirection();
}

function onEnterFrameHandler(e:Event):void {
    contents.x = parent.mouseX + selectX;
}

function mouseDirection():void {
    if (mouseX1 > mouseX2) {
        trace("to the left");
        toLeftTween();
    } else if (mouseX1 < mouseX2) {
        trace("to the right");
        toRightTween();
    } else {
        trace("nothing happened");
    }
}

function toLeftTween():void {
    if(contents.x<1 && contents.x>199) {
        mcPosX = 0;
        trace("to left - Panel 1");
    } else if(contents.x<-1 && contents.x>-199) {
        mcPosX = -200;
        trace("to left - Panel 2");
    } else if(contents.x<-201 && contents.x>-399) {
        mcPosX = -400;
        trace("to left - Panel 3");
    } else if(contents.x<-401 && contents.x>-599) {
        mcPosX = -600;
        trace("to left - Panel 4");
    } else if(contents.x>-600) {
        //What happens now?
    }
    var toLeftTween:TweenLite = new TweenLite(contents,0.25, {x:mcPosX});           
}

function toRightTween():void {
    if(contents.x<-601 && contents.x>-799) {
        mcPosX = -600;
        trace("to right - Panel 4");
    } else if(contents.x<-401 && contents.x>-599) {
        mcPosX = -400;
        trace("to right - Panel 3");
    } else if(contents.x<-201 && contents.x>-399) {
        mcPosX = -200;
        trace("to right - Panel 2");
    } else if(contents.x<-1 && contents.x>-199) {
        mcPosX = 0;
        trace("to right - Panel 1");
    } else if(contents.x<-2) {
        //What happens now?
    }
    var toRightTween:TweenLite = new TweenLite(contents,0.25, {x:mcPosX});
}

Answer 1

干得好。当你看到它时，解决方案实际上非常简单。

你需要检查每个帧的起始鼠标点和当前鼠标点之间的距离，看起来你正在使用selectX和mouseX。你的问题是，当你经过一定距离后，你没有逻辑来处理你的循环。

因为它是一个循环，你想检查你的起点和当前点之间的距离是否大于你的轮播动画片段的宽度，即800.如果是这样，你需要逻辑循环回来。（但是，我不确定为什么你的toLeftTween和toRightTween函数会检查contents.x是否在负范围内....我想这是因为movieclip上的注册点？）< / p>

（编辑：我看到你做了什么 - 为什么你有负数。你正在根据需要将动画片段向左滑动。现在我正在看你做这个的方式，模数实际上不会因为你正在检查-600到200之间的范围，而不是0到800之间的范围... ...

你需要这样的东西。

function toLeftTween():void {
    // If contents.x is divisible by the width of the movieclip, it's greater than the mc width.
    // We check this here, and grab the remainder.

    if (contents.x > 800 || contents.x < -600)
        contents.x = contents.x % 800; // Modulus operator. Returns remainder.

    if(contents.x<1 && contents.x>199) {
        mcPosX = 0;
        trace("to left - Panel 1");
    } else if(contents.x<-1 && contents.x>-199) {
        mcPosX = -200;
        trace("to left - Panel 2");
    } else if(contents.x<-201 && contents.x>-399) {
        mcPosX = -400;
        trace("to left - Panel 3");
    } else if(contents.x<-401 && contents.x>-599) {
        mcPosX = -600;
        trace("to left - Panel 4");
    } else if(contents.x>-600) { // I think you flipped a sign here... -lunchmeat
        //What happens now?
        // Due to the modulus, we should never find ourselves in this situation!
    }
    var toLeftTween:TweenLite = new TweenLite(contents,0.25, {x:mcPosX});           
}

这应该是或多或少的伎俩。您需要将此添加到两个补间功能。（可能需要稍微调整一下。）如果您遇到任何问题，请告诉我。祝你好运！

Answer 2

如果你想要像

这样的话

（注意：数字代表面板，索引0代表初始点。）

索引0 1 - 2 - 3 - 4

索引1的

2 - 3 - 4 - 1

表示索引-1 4 - 1 - 2 - 3

好像你走错了路。

首先，如果你需要继续循环，你必须将不在视觉范围内的动画片段移动到最后。并且您需要在项目末尾克隆第一个元素以继续查看。我更喜欢使用内容的bitmapData，所以你不需要克隆第一个元素，它会更快地计算，并且方式更容易。

AS3：如何使这个轮播工作？

2 个答案: