I was playing with some navigation on an application the other day. I decided as I changed the elements in the view stack I wanted to fade from one to the next. I added a fade effect to the hide of the children of my viewstack so I could see how it worked. The problem showed itself right off the bat, I wasnt seeing any effect. I thought it was weird, but being a problem solver I knew I could use the dissolve effect with transitions. So I rewrote the nav real quick so that instead of using a view stack it used a container with states. That worked great.

But it really wasnt what I wanted. I just wanted to use my viewstack. So I started looking into why the viewstack with hideEffect was not working. I quickly reverted my code (source control rocks!) and started testing. I noticed that pages that had form/ui controls on them faded just fine. But text never did fade correctly. Now this was really starting to bother me. So I looked up using behaviors in the help docs. (sidenote: effects applied to components are behaviors. effects applied to state changes are called transitions) After a little digging I found this article on Using embedded fonts with effects, the important part goes something like this:


The Dissolve, Fade, and Rotate effects only work with text rendered using an embedded font. If you apply these effects to a control that uses a system font, nothing happens to the text.

And voiala! I embedded a font and just like that my fade behaviors worked just like I thought they should. You can find out more about embedding fonts here. And remember to set up a regular and bold version of your font or it wont apply you font to controls which are bold by default (ie, button, link and panel headers). Mine looked like this



@font-face {
src:local(”Harrington”);
fontFamily: myFontFamily;
flashType: true;
}
@font-face {
src:local(”Harrington”);
font-weight:bold;
fontFamily: myFontFamily;
flashType: true;
}
@font-face {
src:local(”Harrington”);
font-style:italic;
fontFamily: myFontFamily;
flashType: true;
}