Creating a bouncing button in flex

Question

I am trying to make an effect on a button that when I mouse over it, it keeps jumping up and down smoothly and when mouse out it stops.

I tried this but the result was really bad:

<mx:Sequence id="bounceEffect" repeatCount="0">
      <mx:Move duration="2000" yBy="10" easingFunction="{Bounce.easeOut}"/>
      <mx:Move duration="2000" yBy="-10" easingFunction="{Bounce.easeOut}"/>    
</mx:Sequence>

<mx:Button id="btn" label="Request Information" rollOver="bounceEffect.play([btn])" 
    rollOut="bounceEffect.end()" fillColors="[#ff0000, #ff0000, #ff0000, #ff0000]" color="#ffffff" textRollOverColor="#ffffff"  />

Can someone help me on this?

There's something else I noticed when I mouse over the button and during the effect the text on the button becomes very hazy.

Thanks

Answer 1

Can you elaborate on what you mean by "really bad"? What exactly are you seeing that you don't like.

As for the text getting blurry, that is not surprising. Effects do weird things to text, sometimes scrunching them up, sometimes blurring them. That seems to be because they get converted to a bitmap before the effect takes place, then revert afterwards. Before the button starts moving, try setting the button's BlurFilter to a zero value, like so:

var myFilters:Array = [];
var bf:BlurFilter = new BlurFilter(0,0,0);
myFilters.push(bf);
btn.filters = myFilters;

and then onEffectEnd you set it to:

myFilters = [];
btn.filters = myFilters;

By the way, do the setting exactly as shown in the first example. If you just try to set the btn.filters to [new BlurFilter(0,0,0)] it won't work correctly.

Answer 2

Hi There, Check out dougmccune jumping button. maybee it helps http://dougmccune.com/blog/2007/03/27/updated-mxna-rss-reader-flex-app-now-with-source/