Dynamic resizing of absolutely drawn Flex 4 component (drawing code generated by Catalyst)

Question

Hi, I have some code generated by Flash Catalyst, and I need it to be resizable & rotatable.

At the moment, I have no idea how to get this to happen.

The basic idea is:

• I have a windmill.
• windmill contains windmillBlades.
• windmillBlades rotate.
• windmill resizes.
• When the windmill resizes, the windmillBlades should scale dynamically with the windmill.

The code below is a simplified outline of the structure of a demo app I prepared, ready to paste into your ide:

http://gist.github.com/300207

Please check out the source and see if you can help because this is mission critical for me. :/

<s:Group id="windmill" width="50" height="200">
    <s:Group id="windmillBlades" resizeMode="scale" verticalCenter="0" horizontalCenter="0">
         <s:Line xFrom="0" xTo="140" yFrom="0" yTo="140">
            <s:stroke>
                <s:SolidColorStroke color="0xBC311E" weight="16" />
            </s:stroke>
        </s:Line>        
    </s:Group>
</s:Group>

Thanks!

edit: Note this is an abstraction of my real app, I'm not building a windmill simulator.

Answer 1

This works:

<s:Group id="windmill" width="50" height="200" x="400" y="400">
    <s:Group id="windmillBlades" resizeMode="scale" width="100%" height="100%">
         <s:Line xFrom="0" xTo="140" yFrom="0" yTo="140">
            <s:stroke>
                <s:SolidColorStroke color="0xBC311E" weight="16" />
            </s:stroke>
        </s:Line>        
    </s:Group>
</s:Group>

<s:VGroup>
    <s:HSlider id="scaler"
        minimum=".1" maximum="2" snapInterval=".01"
        valueCommit="{windmill.scaleX = windmill.scaleY = scaler.value}"/>
    <s:HSlider id="rotator"
        minimum="0" maximum="360" snapInterval="1"
        valueCommit="{windmill.rotation = rotator.value}"/>
</s:VGroup>

I'm not to sure the best way to make a full windmill (with s:Line and all, probably just a repeater?), but this is a good way for rotating the windmill. Instead of rotating every line (lots of calculations), just rotate the whole group. And if the windmillBladles width and height are 100%, they will automatically scale with the Group.

If you want to make the blades each individually rotate around their center, that's a lot harder. Luckily there's the ILayoutElement#transformAround method (which UIComponent has), which allows you to rotate/scale/transform around an arbitrary center. Try using that if that sounds better.

Good luck, Lance