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 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"?>
<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"
 <a href="http://blogtorn.com/images/">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;
            styleName=&quot;MyEmbeddedFont&quot;
            rotation=&quot;5&quot;
            alpha=&quot;0.8&quot;
            fontAntiAliasType=&quot;advanced&quot;
                creationComplete=&quot;zoom.play();&quot;
              effectEnd=&quot;zoom.play()&quot; /&gt;
 
&lt;/mx:Application&gt;


Incoming search terms:

Author
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.

Comments

Leave a Reply

You must be logged in to post a comment.