[flexcoders] Re: Animating an arrow into a target

[tkraikit]

Off the top of my head, you could do something by just animating the width of 
the shaft and the x coordinate of the head in parallel, e.g.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" 
minHeight="600">
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:Parallel id="bothEffects" duration="3000">
            <s:Animate id="widener" target="{redrect}">
                <s:SimpleMotionPath property="width"
                                    valueFrom="50"
                                    valueTo="200" />
            </s:Animate>
            <s:Animate id="mover" target="{bluerect}">
                <s:SimpleMotionPath property="x"
                                    valueFrom="150"
                                    valueTo="300" />
            </s:Animate>            
        </s:Parallel>
    </fx:Declarations>
    
    <s:Rect x="100" y="100" height="50" width="50" id="redrect">
        <s:fill>
            <s:SolidColor color="red" />
        </s:fill>
    </s:Rect>
    <s:Rect x="150" y="100" height="50" width="20" id="bluerect">
        <s:fill>
            <s:SolidColor color="blue" />
        </s:fill>
    </s:Rect>
    <s:Button x="100" y="300" label="click to animate"
              click="bothEffects.play();" />
</s:Application>

(This assumes that the shaft will scale horizontally in a seamless manner.)

-- Tom


--- In flexcoders@yahoogroups.com, "valdhor" <valdhorlists@...> wrote:
>
> I have a project where I need to show the progress of a, well, project. The 
> project has seven specific stages that it must pass through.
> 
> What I would like to do is have an animated arrow move from left to right 
> across the screen until it hits a target on the right side. At any time a 
> user can navigate to the page to see what stage the project is up to. I'd 
> like the user to see the arrow move to that point and stop.
> 
> Unfortunately I am not a designer nor animator. I have looked at tweening but 
> that just seems to be able to move an object (like the arrow) from one place 
> to another but I would like the arrow to elongate as it moves (ie. The head 
> and tail stays the same but the shaft elongates).
> 
> I have PNG images of the arrow and target and can break the arrow into a 
> head, a tail and a 1-pixel wide shaft.
> 
> If anyone has any ideas on how to accomplish it, examples/tutorials or sites 
> I can visit I would be most appreciative. (I have been googling all day but 
> can't find anything useful)
>