Taking a snapshot, scaling it and repeating - apache-flex

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>