power energy bar

I am trying to develop a game where you shoot something, and it goes further away the more energy you apply, kind of like a soccer game where you load a bar with energy and when you release it’s fired.
The only problem i am having is with the graphics,
see the following example:
http://i.imgur.com/yKcVZ.jpg

so basically i want to have an arrow outline and then have a gradient behind it that fills in the arrow depending on how much energy you want.

Originally thought of doing a gradient and then having a mask applied and change the gradient size depending on the “energy” but this doesn’t work as it change the shape too and not only the masked gradient.
So i am thinking the other options it to make a sprite and show different frames depending on the energy. but i wanted to see if anybody else had a better more efficient way to do it.
Regards,
Andrew. [import]uid: 168400 topic_id: 31886 reply_id: 331886[/import]

Could you not still do it with masks? No shapes have to change.

i.e. Construct the arrow from 2 pieces, the outline (on top) and the fill (under the outline) and then apply a mask to your gradient fill graphic only, and then change the x/y of the mask based on your power level so that the mask slides off to expose gradient accordingly? [import]uid: 105599 topic_id: 31886 reply_id: 127201[/import]

Could you not still do it with masks? No shapes have to change.

i.e. Construct the arrow from 2 pieces, the outline (on top) and the fill (under the outline) and then apply a mask to your gradient fill graphic only, and then change the x/y of the mask based on your power level so that the mask slides off to expose gradient accordingly? [import]uid: 105599 topic_id: 31886 reply_id: 127201[/import]