Taking a snapshot, scaling it and repeating

Question

I'm trying to scale text from 1 to 5, a sort of zoom in type of look. I'm using the code below:

<s:Scale target="myLabel" autoCenterTransform="true" 
         duration="2000" 
         scaleYFrom="1" scaleYTo="5" scaleXFrom="1" scaleXTo="5"
         >

The text scales terribly. So my goal is to take a snapshot of the text label at a large font, add it to the display list, set the scale to a 5th and then animate the scale up to 1. After that I have to set the text again and do it all over again.

This is a Flex app and that's where my question comes in. I don't know how to take a snapshot, then what to add it to (group?) and then how to erase it and start over again? Any advice in any of this would be appreciated.

Answer 1

Here's a very simple approach which animates the fontSize style, instead of animating the scale properties:

Depending on what you're doing this may not perform well b/c it is setting a new style so frequently. Also, if you play this animation slowly, it looks like the individual characters "wobble" (they move or shake a teeny bit).

I'll post something on taking a snapshot and scaling that next...

<?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>
        <s:Animate id="scaler" target="{scaledText}" >
            <s:MotionPath property="fontSize">
                <s:Keyframe time="0" value="12"/>
                <s:Keyframe time="1500" value="48"/>
            </s:MotionPath>
        </s:Animate>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[

            protected function onLabelClick():void
            {
                scaler.play();
            }

        ]]>
    </fx:Script>

    <s:Label id="scaledText" text="this is some text" click="onLabelClick()" />
</s:Application>

And here is the approach that takes a snapshot of the text. This has the same problem as your original solution, the scaled text is very jagged. But this does show how to take a snapshot of something and use the snapshot in another Flex object:

<?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>
        <s:Scale id="scaler" target="{drawingTarget}" scaleXFrom="1" scaleXTo="5" scaleYFrom="1" scaleYTo="5"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import spark.core.SpriteVisualElement;

            protected function onLabelClick():void
            {
                var data:BitmapData = new BitmapData(200,200,true, 0xFFFFFF);
                data.draw(scaledText);

                var g:Graphics = drawingTarget.graphics;
                g.beginBitmapFill(data);
                g.drawRect(0,0, 200,200);
                g.endFill();
            }

            protected function onBitmapClick(event:MouseEvent):void
            {
                scaler.play();
            }

        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Label id="scaledText" text="this is some text" click="onLabelClick()" />
    <s:SpriteVisualElement id="drawingTarget" width="200" height="200" click="onBitmapClick(event)"/>
</s:Application>