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