Flex Examples
I meant to post this earlier, and I already touched on font embedding in an earlier post (Building a basic controller for the VideoDisplay control), but here’s a quick little way to embed a font in a Flex application.
In this example we embed a font (the awesome “Base 02″ PC TrueType font (TTF) from http://www.stereo-type.net/), animate it using the Zoom effect and the Elastic.easeOut easing method. We also set the rotation and alpha properties (which you can’t do with non-embedded fonts), and we set the fontAntiAliasType to “advanced” to give the font a cleaner look. Finally we use the effectEnd event to loop the animation.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/ --> <mx:Application name="Font_antiAliasType_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ /* Import all the easing classes so its easier to switch between them on the fly without tweaking import statements. */ import mx.effects.easing.*; ]]> </mx:Script> <mx:Style> @font-face { src: url('assets/base02.ttf'); font-family: Base02; } .MyEmbeddedFont { font-family: Base02; font-size: 16px; } </mx:Style> <!-- Set zoom effect for 2.5 seconds (2500 milliseconds) and use the Elastic.easeOut easing method. --> <mx:Zoom id="zoom" duration="2500" easingFunction="Elastic.easeOut" target="{embeddedText}" /> <!-- Use advanced font anti-aliasing for the embedded font, set the rotation to 5 degrees, alpha to 80% and loop the animation. --> <mx:Text id="embeddedText" text="The quick brown fox jumped over the lazy dog." styleName="MyEmbeddedFont" rotation="5" alpha="0.8" fontAntiAliasType="advanced" creationComplete="zoom.play();" effectEnd="zoom.play()" /> </mx:Application>
View source is enabled in the following example.
Base 02 font by www.stereo-type.net.
It is important to note that embedding fonts can dramatically increase the size of generated SWFs. The size of the SWF above is roughly 260 KB (the base02.ttf file (not included in the ZIP) on its own is 177 KB). By comparison, if embedded fonts were not used, the file size of the SWF would have been only 147 KB, although the rotation and alpha effects would not have been possible. In a future entry I’ll cover how to embed certain characters/ranges of a font-face to reduce the overall size.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
For other fonts, check out http://www.urbanfonts.com/ and http://www.dafont.com/.
I’m not picking up any rotaion or alpha. I’m only seeing an elastic zoom/settle loop.
Missing something?
Not seeing the rotation/alpha in my embedded example above, or in your file?
Peter
Rotation of text is not happening when I try to run sample as web application.
I am not seeing any text either.
I have added other components to the application and found them visible.
Could you please provider your inputs.
Thanks.
Suresh,
For the text that isn’t visible after being rotated. Is it italic or bold (or both)? If so, have you embedded the bold and/or italic versions of the font as well?
Peter
Hi,
How about there is a form. For example i’ve entered a quotation message and after that it should be appeared and animated. I mean there is a text area and a submit button. And I’m going to put some message in the text area and when i clicked the button it will now display the message that i’ve type with matching animation. And also I was able also to select font type, font sizes and type of animation. Can you provide examples on this. Your help will gladly be appreciated. Thanks in advance and more power.
Regards,
Ridge
hi,
Is there a maximum fontSize that can be displayed in a Text Component (or TextField, TextArea, etc)in Flex 2? Because whenever I try to display a font size greater than 150 ( by setting fontSize=’180′ in the Text Component definition) , the size doesn’t change past that of 150. Any help with this would be very appreciated. I’ve searched around some and I’m not seeing much written on it. I’ve tried this with both embedded and non embedded fonts.
thanks.
Diego
mx:Text id=’flash2′ text=’A’ fontSize=’270′
Yes there seems to be maximum font size. See this:
http://blog.flexcommunity.net/?p=46
I’m having a problem animating the zoom or scale properties of labels with embedded fonts.
It works smoothly as long as the label is rotated slightly (at least .5), but with out any rotation the text is very jumpy and looks like what happens if you animate some dynamic text in flash with anti-alias for readability applied.
Any tips?
The greensock tweening library seems to be much more efficient than flex effects i.e. ‘<mx:zoom. Check this out:
http://blog.flexcommunity.net/?p=165
http://blog.greensock.com/tweenmaxas3/
@Andy It might be caused by pixel hinting being turned on. When it’s not rotated, it will try to snap font edges to the pixel, so that it is sharper.