Flash AS3流体导航栏

时间:2009-10-10 00:26:01

标签: flash actionscript-3 navigation

我对AS3很恐怖。我已经尝试了许多不同的方法。我想在AS3中找到一个类似这样的导航栏。

  

A | B | C | d

点击C栏幻灯片即可

  

C ^ | A | B | d

点击D栏幻灯片即可获得

  

D | A | B | C

等等。

非常感谢帮助或帮助链接。现在我有这么多。

david_btn.addEventListener(MouseEvent.CLICK, menuNav);
kate_btn.addEventListener(MouseEvent.CLICK, menuNav);
robin_btn.addEventListener(MouseEvent.CLICK, menuNav);
aaron_btn.addEventListener(MouseEvent.CLICK, menuNav);
ken_btn.addEventListener(MouseEvent.CLICK, menuNav);
ann_btn.addEventListener(MouseEvent.CLICK, menuNav);

function menuNav(event:MouseEvent):void {
 gotoAndStop(event.target.name);
}

每个都进入动画片段,中途播放并停止播放。现在我需要在进入下一个指定标签之前播放另一半。

2 个答案:

答案 0 :(得分:1)

只需确保初始x位置的第一个按钮为14.或者相应地调整代码。

示例http://www.hupcapstudios.com/slideNav.swf

import caurina.transitions.Tweener;

var btnArray:Array = new Array(btn1,btn2,btn3,btn4);
var btnNames:Array = new Array("Tom","Dick","Harry","Marco");

for(var i:int=0;i<btnArray.length;i++)
{
    btnArray[i].btn_txt.text = btnNames[i];
    btnArray[i].addEventListener(MouseEvent.CLICK, slideBtn);
}

function slideBtn(e:Event):void
{
    var aPos:Number = e.currentTarget.x;
    var bPos:Number;
    var zeroBtn:*; 

    trace(aPos);

    if(aPos !== 14)
    {
        for(var p:int = 0;p<btnArray.length;p++)
        {
            if(btnArray[p].x == aPos)
            {
                bPos = aPos;
                break;
            }
        }
        for(var q:int = 0;q<btnArray.length;q++)
        {
            if(btnArray[q].x == 14)
            {
                zeroBtn = btnArray[q];
                break;
            }
        }

        Tweener.addTween(e.currentTarget, {x:14, time:.4,transition:"easeOutQuint"});
        Tweener.addTween(zeroBtn, {x:bPos, time:.4,transition:"easeOutQuint"});
    }
}

答案 1 :(得分:1)

嗨我已经给了Jascha的答案,因为它符合目的,但是我只是引导你完成下面的代码,这样你就可以理解这种事情是如何实现的。它还有许多额外的检查/配置等。

//these are your button instances
var originalOrder:Array = [tom, dick, harry, jane];

//this is a reference to the currently selected item
var selectedItem:MovieClip = tom;

//these are the co-ordinates of where the first item should be placed
var offsetX:Number = 100;
var offsetY:Number = 100;

//this is how much padding you want between items
var padding:Number = 8;

addEventListener(MouseEvent.CLICK, mouseClickHandler);

private function mouseClickHandler(e:Event):void
{
    var index:int = originalOrder.indexOf(e.target);
    //if the thing have clicked is in our array of buttons it is valid, we
    //could have clicked something else interactive
    if(index > -1)
    {
        //update the reference to the newly selected item
        selectedItem = originalOrder[index];
        //move the items about
        calculatePlacement();
    }
}


private function calculatePlacement():void
{
    //we want to start with our x-position being the current offset
    //plus the selectedItem's width plus the padding
    var cumlativeWidth:Number = offsetX + selectedItem.width + padding;
    var item:MovieClip;

    //loop over all the items in our list in the order they are specified
    for( var i:int = 0; i<originalOrder.length; i++)
    {
        //assign item to the currently looped item
        item = originalOrder[i];
        //if the item we are looking at is the selected item, place it at the
        //offset position
        if(item == selectedItem)
        {
            item.x = offsetX;
            item.y = offsetY;
            //We could tween using Tweener/TweenLite 
            //TweenLite.to(item, 1, {x:offsetX, y:offsetY});
        }
        //otherwise put it at our x-position, then add on its width + padding
        //to the cumulative x-position.
        else
        {
            item.x = cumlativeWidth;
            item.y = offsetY;
            //We could tween using Tweener/TweenLite 
            //TweenLite.to(item, 1, {x:offsetX, y:offsetY});
            cumlativeWidth += item.width + padding;
        }
    }
}