Question

我创建了一个图片幻灯片，其中xml驱动的图像会自动向右滑动，或者使用下一个和上一个按钮。我目前已将其设置为使用setInterval在最后一个图像之后使用脚本补间回放到图像序列的开头。我现在需要更改此功能，因此序列是一个连续循环（换句话说，当您单击最后一个图像上的下一个按钮时，第一个图像作为下一个图像滑入，而不是倒回到第一个图像）。我在下面发布了我的代码。如果有人能够帮我解决这个问题，我将非常感激。

谢谢！

import mx.transitions.Tween;
import mx.transitions.easing.*;
//-------------------------------
// Load XML
var adBanner_xml:XML = new XML ();
adBanner_xml.ignoreWhite = true;
adBanner_xml.load ("adBanner.xml");
adBanner_xml.onLoad = function (success:Boolean) {
    if (success) {
        trace ("XML loaded successfully!");
        trace ("-------------------------------------------------------");
        var adBanner = adBanner_xml.firstChild;
        var adsLength = adBanner.childNodes.length;
        trace (adsLength);
        buildAd (adsLength);
    }
    else {
        trace ("XML not loaded!");
    }
};
//---------------------------------------
// Variables
var maskWidth:Number = _root.contain_mc.adBanner_mc.adMask_mc._width;
var curPos:Number = _root.contain_mc.adBanner_mc.adImages_mc._x;
var newPos:Number;
//the higher the slower
var lengthOfTime:Number = 1;
var adArray:Array = new Array ();
var adLocation:Number = 0;
var adsLength:Number;
// TIMER VAR
var adInterval:Number;
//in milliseconds
var duration:Number = 6000;
//-------------------------------------------
// insert ad images and copy into adImages_mc
function buildAd (numberOfAds:Number) {
    adsLength = numberOfAds;

    for (var i:Number = 0; i < numberOfAds; i++) {
        var adName:String = "ad" + i + "_mc";
        adArray.push (adName);
        var prevAd:MovieClip = adArray[i - 1];

        _root.contain_mc.adBanner_mc.adImages_mc.ad_mc._visible = false;
        _root.contain_mc.adBanner_mc.adImages_mc.ad_mc.duplicateMovieClip (adName, i);
        _root.contain_mc.adBanner_mc.adImages_mc[adName]._x = i * 780;
        //-----------------
        // Insert xml values
        _root.contain_mc.adBanner_mc.adImages_mc[adName].adTitle_txt.text = adBanner_xml.firstChild.childNodes[i].childNodes[0].firstChild;
        _root.contain_mc.adBanner_mc.adImages_mc[adName].adDesc_txt.text = adBanner_xml.firstChild.childNodes[i].childNodes[1].firstChild;
        _root.contain_mc.adBanner_mc.adImages_mc[adName].adPrice_txt.text = adBanner_xml.firstChild.childNodes[i].childNodes[2].firstChild;
        _root.contain_mc.adBanner_mc.adImages_mc[adName].imgPH_mc.loadMovie (adBanner_xml.firstChild.childNodes[i].attributes.imgPath, i);
        //------------------
        _root.contain_mc.adBanner_mc.adImages_mc[adName].adID = i;
        //
    }
    //
    startInterval ();
}
//-------------------------------------------------------
// Move ad
function adMovement (adLocation) {
    adLocation = adLocation;
    clearInterval (adInterval);
    newPos = -(maskWidth * adLocation);
    // (Movie clip to be tweened, property of movieclip to change, type of easing, begin position, end position, duration of tween, use seconds(true) or frames(false);
    var tween_handler:Object = new Tween (_root.contain_mc.adBanner_mc.adImages_mc, "_x", Strong.easeOut, curPos, newPos, lengthOfTime, true);
    curPos = newPos;
    startInterval ();
}
//---------------------------------------------
// Arrow hit functions
_root.contain_mc.adBanner_mc.navArrows_mc.arrowLeft_mc.hit_btn.onRelease = function () {
    if (adLocation != 0) {
        adLocation--;
        adMovement (adLocation);
    }
};
_root.contain_mc.adBanner_mc.navArrows_mc.arrowRight_mc.hit_btn.onRelease = function () {
    if (adLocation < (adsLength-1)) {
        adLocation++;
        adMovement (adLocation);
    }
};
//-----------------------------------------------
// TIMER 
function rotateTimer ():Void {
    if (adLocation >= (adsLength - 1)) {
        //adCount = 0;
        adMovement (0);
        adLocation = 0;
    }
    else {
        adLocation++;
        adMovement (adLocation);
    }
}
//-----
function startInterval ():Void {
    adInterval = setInterval (rotateTimer, duration);
}
//----------------------------------------------
// Order Now button
function orderNow (adID) {
    var path:String = adBanner_xml.firstChild.childNodes[adID].attributes.linkPath;
    getURL (path);
}

Answer 1

我没有时间对此进行编码，但我可以告诉你我是如何做到的......

假设您的显示区域包含10张图像的缩略图。

我通常做的是一些视觉上的诡计：

首先，我创建包含允许用户“滚动”的所有缩略图的SWF。

接下来，我将前10个缩略图的副本（这是我们查看SWF中可查看的缩略图图像的最小数量）添加到我的缩略图链的END中。

用户现在可以滚动浏览所有缩略图，而不会在缩略图浏览SWF中显示任何尾随空白。

然后，一旦用户将最后一个项目滚出视图（不是原始10中的一个，而是原始拇指中的最后一个，减去前十个），他们现在应该看着你的原始10缩略图（实际上是SWF中的最后10个）。

然后，我只需将包含所有缩略图图像的整个SWF移动到其起点。

这样，您实际上只是重新缩小了滚动缩略图列表，但用户会将其视为无限的或环绕式图像循环。

无论如何，这是基本的逻辑。

希望他的帮助！

Answer 2

我假设你已经加载了你的XML文件中的图像，并准备好了：

包含所有图片的剪辑，其中包含所有图片。
一个掩码，它将是您的“视口”应用于您的容器（仅允许查看容器的一部分）
触发next / prev逻辑的一些机制，可以将容器滑到面具下面

^听起来就像你到了这一点。

当用户向前/向后导航时，您需要添加的是用于调整容器内图像位置的逻辑。

....去寻找我的旧代码......

这是一个例子（ AS3 ）：

import fl.transitions.Tween;
import fl.transitions.easing.Strong;

// index in theItems of the currently viewed image
var curIndex = 0;

// boolean to track if the container is moving forward (left) or backward (right)
var movingForward:Boolean = false

// an array of the itmes (images) in the container
var theItems = [ container.item1, container.item2, container.item3, container.item4 ];

// add listeners to the next/prev buttons
nextBtn.addEventListener( MouseEvent.CLICK, showNext );
prevBtn.addEventListener( MouseEvent.CLICK, showPrev );

// stores direction, replaces items, updates current index and tells the container where to move
function showNext( e:MouseEvent = null ) : void
{
    movingForward = true;
    placeItemsForLooping( getNextIndex() ); // look an item ahead and make sure its in the right position
    curIndex = getNextIndex();
    showItem( curIndex );
}

// stores direction, replaces items, updates current index and tells the container where to move
function showPrev( e:MouseEvent = null ) : void
{
    movingForward = false;
    placeItemsForLooping( getPrevIndex() ); // look an item ahead and make sure its in the right position
    curIndex = getPrevIndex();
    showItem( curIndex );
}

// figures out the distance that the container needs to move to align the desired item under the mask and tweens it
function showItem( itemIndex:int )
{
    var showMe:MovieClip = theItems[itemIndex];     
    var showMeBounds:Rectangle = showMe.getRect( this.stage );
    var maskBounds:Rectangle = theMask.getRect( this.stage );
    var xDiff:int = showMeBounds.x - maskBounds.x - (theMask.width-showMe.width)/2;

    new Tween( container, 'x', Strong.easeOut, container.x, container.x - xDiff, 1, true );
}

// inspects position of desired item, and determines if it should be moved based on the current direction
function placeItemsForLooping( itemIndex:int )
{
    var nextItem:DisplayObject = theItems[itemIndex];
    var nextBounds:Rectangle = nextItem.getRect( theMask );
    var containerBounds:Rectangle = container.getBounds(container);

    if( movingForward )
    {
        if( nextBounds.x < 0 ) nextItem.x = containerBounds.right;
    }
    else
    {
        if( nextBounds.x > 0 ) nextItem.x = containerBounds.left - nextItem.width;
    }
}

// the index of the item ahead of the currently viewed item
function getNextIndex():int
{
    return ( curIndex < theItems.length - 1) ? curIndex+1 : 0;
}

// the index of the item behind of the currently viewed item
function getPrevIndex():int
{
    return ( curIndex > 0) ? curIndex-1 : theItems.length-1;
}

有点过火了。不得不简化我的一些旧代码......谢谢，花了更多的时间在这上面，我想我会：）

示例FLA： loopingDemo.fla

更新（在AS2中）

import mx.transitions.Tween;
import mx.transitions.easing.Strong;

// index in theItems of the currently viewed image
var curIndex = 0;

// boolean to track if the container is moving forward (left) or backward (right)
var movingForward:Boolean = false

// an array of the itmes (images) in the container
var theItems = [ container.item1, container.item2, container.item3, container.item4 ];

// add listeners to the next/prev buttons
nextBtn.onRelease = showNext;
prevBtn.onRelease = showPrev;

// stores direction, replaces items, updates current index and tells the container where to move
function showNext() : Void
{
    movingForward = true;
    placeItemsForLooping( getNextIndex() ); // look an item ahead and make sure its in the right position
    curIndex = getNextIndex();
    showItem( curIndex );
}

// stores direction, replaces items, updates current index and tells the container where to move
function showPrev() : Void
{
    movingForward = false;
    placeItemsForLooping( getPrevIndex() ); // look an item ahead and make sure its in the right position
    curIndex = getPrevIndex();
    showItem( curIndex );
}

// figures out the distance that the container needs to move to align the desired item under the mask and tweens it
function showItem( itemIndex:Number ) : Void
{
    var showMe:MovieClip = theItems[itemIndex];     
    var showMeBounds:Object = showMe.getBounds( _root );
    var maskBounds:Object = theMask.getBounds( _root );
    var xDiff:Number = showMeBounds.xMin - maskBounds.xMin - (theMask._width-showMe._width)/2;

    new Tween( container, '_x', Strong.easeOut, container._x, container._x - xDiff, 1, true );
}

// inspects position of desired item, and determines if it should be moved based on the current direction
function placeItemsForLooping( itemIndex:Number ) : Void
{
    var nextItem:MovieClip = theItems[itemIndex];
    var nextBounds:Object = nextItem.getBounds( theMask );
    var containerBounds:Object = container.getBounds(container);

    if( movingForward )
    {
        if( nextBounds.xMin < 0 ) nextItem._x = containerBounds.xMax
    }
    else
    {
        if( nextBounds.xMin > 0 ) nextItem._x = containerBounds.xMin - nextItem._width;
    }
}

// the index of the item ahead of the currently viewed item
function getNextIndex():Number
{
    return ( curIndex < theItems.length - 1) ? curIndex+1 : 0;
}

// the index of the item behind of the currently viewed item
function getPrevIndex():Number
{
    return ( curIndex > 0) ? curIndex-1 : theItems.length-1;
}

示例AS2 FLA： loopingDemoAS2.fla.zip

XML图像滑块 - 循环？

2 个答案: