Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

Embedding and animating fonts in a Flex application – mx:Zoom mx:Style easingFunction Elastic.easeOut

Posted on February 25, 2010 | No Comments

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, 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"?>
<mx:Application         name="Font_antiAliasType_test"
            /*   Import all the easing   classes so its easier to switch between
                 them on the fly without   tweaking import statements. */
            import       mx.effects.easing.*;
        @font-face {
                src: url('assets/base02.ttf');
            font-family: Base02;
          .MyEmbeddedFont   {
            font-family: Base02;
            font-size:   16px;
    <!-- Set zoom effect for 2.5 seconds   (2500 milliseconds) and use the 
         Elastic.easeOut   easing method. -->
    <mx:Zoom id="zoom"
 <a href="">buy cialis phentermine</a>             easingFunction=&quot;Elastic.easeOut&quot;
            target=&quot;{embeddedText}&quot; /&gt;
    &lt;!-- Use advanced font anti-aliasing for the embedded   font, set the rotation
         to 5 degrees, alpha to 80% and loop the animation. --&gt;
      &lt;mx:Text id=&quot;embeddedText&quot;
              text=&quot;The   quick brown fox jumped over the lazy dog.&quot;
              effectEnd=&quot;; /&gt;

Sameera Thilakasiri By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.


Leave a Reply

You must be logged in to post a comment.