Alright, where we are going now is Part 1, Lesson 03. Please, select that project in Flex Builder, right click and Open the project. Much of what we are going to discuss in this entire lesson relates to the use of fonts in Flex Builder. An important concept to know about Font use inside of the Flash Player which is the destination for these SWF flies we compile from Flex is how it handles fonts and whether or not that font information is embedded within in the SWF binary.
By default, Flash and Flex are going to use Device Fonts meaning the font information already in the web browser of the target device the application runs within. However, we are going to explore the use of embedded fonts as well because as we are about to learn, Device Fonts have limitations. Please open the file Fonts_wt1.mxml. Let's review the file briefly. First scroll to the bottom and let's see the controls that are currently in use.
We have a text control which has the words Rotate this text displayed within it and we have a button control with a label of 'Hover me' but also tooltip text that says 'This is a ToolTip'. We can control behaviors related to a ToolTip through a class called the ToolTipManager which has been implemented here. If you look in the script block, you will see that the ToolTipManager has been imported and a function called Set ToolTips has been declared and it's being called as the application initializes.
When set ToolTips runs, a fade effect named fadeIn is being applied. The fadeIn effect fades from transparent Tool Pick over the course of 1000 milliseconds or 1 second. That effect is being applied to the showEffect trigger of the ToolTipManager. So when our ToolTip displays, it will fade in.
Now run the application. It's very simply. You will see the text, Rotate this text and you see the button with the label 'Hover me' and when you roll over the button, notice the ToolTip. The point I want you to notice is that the text appears immediately, the fade effect is applying only to the background. Notice how the background fades in but not the text. Go back in the Flex Builder.
The source of this limitation is the fact that by default your Flex application is going to use Device Fonts. Notice that we haven't specified what font to use anywhere within the application and so Flex is defaulting to an Aerial type face and it's looking for it on the device, finding it and using it. So that's what we see.
The problem with using Default Device Fonts is that the Flash Player has limited ability to control that font visually. One easy example of how this creates a problem is if you try to rotate the text. Place your cursor within the text field and add a Rotation property of 45. Run the application again and you will see that the text has completely disappeared.
The Flash Player cannot rotate text, if it's using a Device Font. So we are going to change this and begin using Embedded fonts. Return to Flex Builder and close the file.
Transcription by:
Scribe4you Transcription Services