Scaling text is a funny thing. Generally, you won't get what you're asking for - smooth-scaling. The problem is that to display text in any reasonable way (in a way where it won't look completely ugly), graphics engines use things like font metrics, point sizes, font hints, sub-pixel anti-aliasing, and anything else they can to make it look readable. This is quite different from simple graphic objects. This means that when you 'scale' a text string, it will always try to display itself in a point size that's appropriate to the scale factor. And that means it's going to snap as it scales up and down, as it hits different point sizes.
This problem is related to why the text would simply disappear in Flex 3 when a text component was rotated or faded - by default, we would use a device font, and that engine just couldn't display the text in any reasonable manner when it was transformed or faded. (the workaround was to use an embedded font - I'm just illustrating the problems here...) This is different in Flex 4, since we use the new Flash player 10 text engine that uses software rendering for text and avoids the device rendering issues. But still, you'll get a much different looking text string when rotated than you will when it's not rotated, because various font display tricks break down when they're not linearly displayed. The only workaround for this I know of is to attempt to capture the text as an image and scale that instead. In this case, draw your text component to some bitmap and swap it out for the duration of the effect. But even that won't give you a nice result. That is, you'll get smooth scaling of the graphics (including the text), but the text won't look very good (for the simple reason that text drawn without all of the font tricks mentioned above tends to look horrible, and scaled bitmaps of the text will look even worse), and if you swap this scaled version of the text out for the real text when the effect finishes, you'll get a snapping artifact, as we go from the bitmap display of the text to the real display of the text at the appropriate point size. I'm pretty sure this isn't what you want either. The best way I know of to deal with this harsh text reality is to work around it, and they way you do it depends on your situation. For example, you might just fade the text out at the start of the effect, scale up the text area, then fade it back in when it's done. This way you'll get good text display at the beginning and end, and will avoid the snapping artifacts as it scales. You could also do things like capture the text into a bitmap and scale it, but also apply a blur and/or fade, so that the user can see the text, but in such a way that the difference between the animated version and the before/after version is less jarring. Hope that helps. Chet. From: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On Behalf Of ilikeflex Sent: Thursday, September 24, 2009 8:47 AM To: flexcoders@yahoogroups.com Subject: [flexcoders] How to make the effect smooth Hi I am using the below sample to increase the width and height but i want that the text should also transit smoothly. Any pointers??? <?xml version="1.0" encoding="utf-8"?> <!-- Simple example to demonstrate the Zoom effect. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";> <mx:Parallel id="expand" target="{textBox}"> <mx:AnimateProperty property="scaleX" fromValue="1" toValue="2" duration="2000" /> <mx:AnimateProperty property="scaleY" fromValue="1" toValue="2" duration="2000" /> </mx:Parallel> <mx:Parallel id="contract" target="{textBox}"> <mx:AnimateProperty property="scaleX" fromValue="2" toValue="1" duration="2000" /> <mx:AnimateProperty property="scaleY" fromValue="2" toValue="1" duration="2000" /> </mx:Parallel> <mx:Panel title="Zoom Effect Example" width="95%" height="95%" horizontalAlign="center" paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5"> <!-- <mx:HBox backgroundColor="blue" width="75" id="textBox"> <mx:Text width="100%" color="0xFFFFFF" fontWeight="bold" text="1234567890"/> </mx:HBox> --> <mx:TextInput backgroundColor="blue" fontWeight="bold" color="0xFFFFFF" id="textBox" text="1234567890"> </mx:TextInput> <mx:ControlBar> <mx:Button label="Expand" click="expand.end(); expand.play();"/> <mx:Button label="Contract" click="contract.end(); contract.play();"/> </mx:ControlBar> </mx:Panel> </mx:Application> Thanks ilikeflex
