RE: [flexcoders] How to make the effect smooth
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=0xFF fontWeight=bold text=1234567890/
/mx:HBox
--
mx:TextInput backgroundColor=blue fontWeight=bold color=0xFF
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
Re: [flexcoders] How to make the effect smooth
I have the numbers 0 to 9 typed into Flash file, broken down into vector
graphics.
They scale up okay, but I treat each digit as a movieClip imported into
Flex from a swc.
Placing the digits is a lot of work, but you don't need a particular font.
John
Chet Haase wrote:
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=0xFF fontWeight=bold
text=1234567890/
/mx:HBox
--
mx:TextInput backgroundColor=blue fontWeight=bold
color=0xFF 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
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Alternative FAQ location:
https://share.acrobat.com/adc/document.do?docid=942dbdc8-e469-446f-b4cf-1e62079f6847
Search Archives
[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=0xFF
fontWeight=bold text=1234567890/
/mx:HBox
--
mx:TextInput backgroundColor=blue fontWeight=bold
color=0xFF 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
