AS3 - 倒数计时器酒吧 - 方法文档/教程？ [英] AS3 - Countdown Timer Bar - HowTo / Tutorial?

问题描述

我期待创造60秒的倒计时吧。我已经有计数从60回文本计时器，但我也想有一个可视化的绿条，减少随着时间的滴答下来。我包括两个图形显示我尝试去创造。

I'm looking to create a 60 second countdown timer bar. I've already got a text timer that counts back from 60, but I'd also like to have a visual green bar that reduces as time ticks down. I'm including two graphics to show what I'm trying to create.

任何人都可以点我在正确的方向？无论是一些生code或在线教程的工作，那将是极大的帮助，因为我有点停留在这部分我的项目。

Can anyone point me in the right direction? Whether it's some raw code to work with or an online tutorial, it would be tremendously helpful, as I'm a bit stuck on this part of my project.

感谢您了！

推荐答案

由于这是关系到一个<一个href="http://stackoverflow.com/questions/24516267/as3-countdown-timer-color-change/24517552">$p$pvious问题，我使用的是code，从这个问题的答案为出发点：

Since this is related to a previous question, I'm using the code from that answer as a starting point:

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 属性所产生平滑的外观。这仅仅是一个裸露的骨头的例子，让你开始。

Please note: there are many better ways of doing this. For example, I would probably draw the rectangle at full width, and then tween the scaleX property for a smoother look. This is just the a bare bones example to get you started.

这篇关于AS3 - 倒数计时器酒吧 - 方法文档/教程？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！