Flashing Button with Flex/Action Script

1
votes

I want to make a button flash red in response to an event, and then stop flashing whenever the button is pressed. This would be much like the master alarm button in an aircraft. So the flashing effect needs to be something that I can programmatically stop.

I saw one example using a timer, but I want to avoid using a timer because I don't like to use timers unless I really have to. It just seems really chaotic to have all this timers going just to do trivial little things.

My hope is that there is some way to do a little animation with flash or something, on the button, and just tell the animation to play to make the button flash, and then stop/reset the animation to put it back at the original not flashing state.

I am using Flex Builder 3. I am new to Action Script and Flex/Flash.

Can someone give information on how to do this or point me to some information?

Thanks.

3
flashactionscript-3flex3

3 Answers

1
votes

As Cay points out - when it comes to programmatic animation you really want to use a Tween library. Fact is, someone has probably already written a more efficient solution than you can - and will give it to you for free.

There are many, many options. The maintainer of TweenLite has a speed comparison of ActionScript 3 tween engines on his website.

  • Tweener is a very popular library but it has been superseded in performance and size by other libraries recently.
  • TweenLite is a small and fast library that is gaining in popularity. The developer also maintains TweenMax which is a more featureful tweener.
  • Tweensy another lib claiming to be really fast
  • gTween is another tweener from AS3 guru Grant Skinner.

The syntax to do what you want will depend on the library, but pulsing a button red will be trivial in each one. I suggest you become familiar with one or more tween libraries for doing this sort of thing -- it will save you a huge amount of time in the long run.

3
votes

I would try with a tweening engine... something like this:

function flash() {
   TweenLite.to(button, .5, {tint:0xFF0000, onComplete:unflash});
}
function unflash() {
   TweenLite.to(button, .3, {removeTint:true, onComplete:flash});
}

function deleteFlashing(e) {
   TweenLite.killTweensOf(button);
   TweenLite.to(button, .2, {removeTint:true});
}