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.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 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.
I didn’t include the TrueType font in the source code ZIP. If you want to grab that exact font, head over to the creator’s site @ http://www.stereo-type.net/ and download “Base 02″.
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.
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?