AS3 - 倒数计时器栏 - 操作方法/教程？

Question

我希望创建一个 60 秒倒计时条。我已经有了一个从 60 开始倒数的文本计时器，但我还希望有一个可视化的绿色条，随着时间的流逝而减少。我包括两个图形来显示我正在尝试创建的内容。

谁能指出我正确的方向？无论是使用一些原始代码还是在线教程，它都会非常有帮助，因为我有点卡在我的项目的这一部分。

谢谢！

Answer 1

由于这与previous question 有关，我使用该答案中的代码作为起点：

import flash.events.TimerEvent;
import fl.transitions.Tween;
import fl.transitions.easing.None;
import flash.text.TextField;
import flash.display.Shape;

var nCount:Number = 12;
var myTimer:Timer = new Timer(1000, nCount);
timer_txt.text = nCount.toString();
var totalBarWidth:Number = 500;

// this is the shape we will be updating as the timer counts down
var bar:Shape = new Shape();
addChild(bar);

// initialize the graphics of the bar
updateBar();

myTimer.start();
myTimer.addEventListener(TimerEvent.TIMER, countdown);
// add a complete listener to fade out the TextField
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, fadeOut);

function countdown(e:TimerEvent):void
{
    nCount--;
    if(nCount == 10) 
    {
        // if the count is at 10, switch the text color to red
        timer_txt.textColor = 0xFF0000;
    }
    updateBar(); // update the graphics of the bar
    timer_txt.text = nCount.toString();
}
function updateBar():void 
{
    bar.graphics.clear();
    // figure out if we're using a green or red fill based off of nCount
    bar.graphics.beginFill(nCount > 10 ? 0x00FF00 : 0xFF0000);
    /* draw the rectangle based off the ratio of nCount to the total
    repeatCount of the timer */
    bar.graphics.drawRect(0, 0, totalBarWidth * (nCount/myTimer.repeatCount), 20);
    bar.graphics.endFill();
}
function fadeOut(e:TimerEvent):void 
{
    // I prefer GreenSock for tweening, but this is how you'd do it with the buil-in Flash Tween
    var t:Tween = new Tween(timer_txt, "alpha", None.easeNone, 1, 0, .5, true);
}

请注意：有很多更好的方法可以做到这一点。例如，我可能会以全宽绘制矩形，然后对scaleX 属性进行补间以获得更平滑的外观。这只是一个简单的示例，可以帮助您入门。

Answer 2

<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="400" align="middle" id="Bleach-Vs-Naruto-V2-3"><param name="movie" value="http://www.qiqifiles.com/gahe/13/Bleach-Vs-Naruto-V2-3.swf"><param name="quality" value="high"><!--[if !IE]>--><object type="application/x-shockwave-flash" data="http://www.qiqifiles.com/gahe/13/Bleach-Vs-Naruto-V2-3.swf" width="600" height="400"><param name="movie" value="http://www.qiqifiles.com/gahe/13/Bleach-Vs-Naruto-V2-3.swf"><param name="quality" value="high"><!--<![endif]--><a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player"></a><!--[if !IE]>--></object><!--<![endif]--></object><br><a =>