AS3 - 倒数计时器栏 - HowTo / Tutorial？

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 =>