dynamically tweening arrows 1

[dwnhllr]

I'm working on an animation where I am using arrows (an arrow-like shape with a gradient fill) to represent airflow in an engine. I can get these arrows to move along a linear path, but it gets difficult when I start to animate around corners because the condition where an arrow will bend around a corner varies according to the state-flow conditions during runtime. I wrote a routine to draw these arrows using a combination of arcs, lines and fills, but it seems to be eating lots of CPU. I'm hoping that the tweening engine for Flash MX is alot more efficient, and I have some data to support that assumption. However, I have not been able to locate any references on how to tween between two images in a private timeline.

Also, I'm having another issue with these arrows. I would like to visualize heat transfer by showing wavy arrows move across a medium while changing color. I'm able to get the entire arrow to change color by modifying its alpha, but I would like to create a masking effect where a "cooler" (bluer) part of the arrow is revealed as it passes across the medium. Is there a common strategy for creating this effect? Should I just create an arrow with a mask, and then resize the mask with scripting? Suggestions?

Thanks!

 

[wangbar]

I take it you're creating the arrows with the standard Flash Drawing API? It is very CPU intensive but tweening isn't going to provide much of a solution here I think as there's not an engine as such: in code the only way to alter the position of a clip is to address the _x and _y properties.

Depending on what your arrow looks like as it takes the corner you may be able to use a shape tween to get between keyframes but this can't be scripted, it has to be animated as a sequence of frames in a timeline.

Maybe it will be possible to have a 'cornering' movieclip that you can attach to the main timeline when necessary which provides the right look?

To change the colour you have a couple of options:

1) Use the arrow shapes as masks which reveal a colour layer underneath. The colour layer could be a gradient which is blue where appropriate to the main animation and red elsewhere, as the arrows move over the layer they will change colour accordingly.

2) Use the Color() object which allows you to dynamically tint or fill any clip with actionScript.

Here's what I mean:

http://www.wangbar.co.uk/tek-tips/arrows/

Here's the .fla if you want to use it:

http://www.wangbar.co.uk/tek-tips/arrows/arrows.fla