用as3创建可拖动的进度条

如果你不知道怎么在flash里面创建可拖动的进度条，那么这篇文字就是为你写的。首先, 我们要做的进度条是可以复用的, 它可以用于加载，滚动条, 搜索框及图表功能. 另外，使用自己做的进度条替代flash里面的进度条组件有助于减小文件体积。

实例效果如下：

http://amyflash.duapp.com//swf/dragbar.swf

文件设置

在flash里面创建一个新的ActionScript 3.0文件, 590x300px为舞台大小，文件命名为progressBar.as。我们的Progress Bar将包含 2 个元件 – bar skin(你马上会看到)和 track skin (可拖动的); 关联这两个图像, 然后创建一个新的元件, 命名为 percentBar.

拖动的时候, 你想在某处展示进度并使用该值去滚动或者做些别的事情. 为了达到目的，我们需要创建一个 info box, 用来展示百分比.首先，你得在舞台上创建一个实例名为boxInfo的元件, 再在该元件里面添加一个动态文本,并命名为 txt.

DraggableProgressBar.as

创建一个名为DraggableProgressBar.as的文件, 把progress bar里的元件全部声明为公有变量:

public var trackSkin:MovieClip;
public var barSkin:MovieClip;
public var percent:int = 0;

当trackskin被拖动的时候，percent变量将发生变化.初始函数里面我们做了如下事情:

设置progressbar为buttonMode;
设置 trackSkin的宽度为 0;
侦听鼠标的 DOWN 和 UP事件;

private function init(e:Event = null):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            trackSkin.width = 0;
            buttonMode = true;
            mouseChildren = false;

            addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
            addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
            addEventListener(MouseEvent.MOUSE_OUT, onMouseUp);
        }
当鼠标按下的时候，我们添加了一个enterframe的侦听器，因此在拖动的时候，
我们可以根据鼠标的x坐标知道trackSkin的大小为多少，当鼠标弹起的时候，移除侦听。

private function onMouseDown(e:MouseEvent):void
{
    addEventListener(Event.ENTER_FRAME, stateBar);
}

private function onMouseUp(e:MouseEvent):void
{
    removeEventListener(Event.ENTER_FRAME, stateBar);
}

让我们看看stateBar函数长啥样:

trackSkin.width = Math.min(mouseX, barSkin.width);
percent = (trackSkin.width / barSkin.width) * 100;
dispatchEvent(new Event(Event.COMPLETE));

第一行根据mouseX增加或者减少trackSkin的宽度, 不会超过最大值; 第2行计算百分比; 第三行向主类发送一个事件，通知主类百分比发生变化了。

Main Class

创建主类Main.as：

package {
import flash.events.Event;
import flash.display.MovieClip;
public class Main extends MovieClip {
public var boxInfo:MovieClip;
public var progressBar:DragBar;
public function Main() {
boxInfo.x=progressBar.x;
boxInfo.txt.text=progressBar.percent;
progressBar.addEventListener(Event.COMPLETE, getValue);
}
private function getValue(e:Event) {
boxInfo.txt.text=progressBar.percent;
boxInfo.x=Math.max(mouseX,Math.min(progressBar.x,progressBar.width));
}
}
}

保存，搞定！

逍遥居

用as3创建可拖动的进度条