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="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>
Tags: easingFunction | effectEnd | Elastic.easeOut | fontAntiAliasType | import mx.effects.easing.* | mx:Script | mx:Style | mx:Zoom
Author
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.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.