But all that hard work is now done for the first time, so it should become a little easier for the next couple of tutorials. So, if you fancy the visual side of tutorials instead of just reading the blog post, you can now view my very first one here. Of course, you can still read the blog post on the subject in the blog section of the Flexpert website.

Enjoy !!!

When I’m using view states, I apply transitions to make the view state changes more fluent an attractive. There seems to be a problem though, because when I have a component in the second view state that I want to fade out upon returning to the base state, that effect is never played. Do you have a clue why this doesn’t happen and if there a solution for this problem?

Solution:

If you are using view states and want to apply certain transitions between these states, there are some things to keep in mind. When adding components to a state, the transition effects (also called behaviors) are applied to that component while adding it. So this means that the effects will be visible during initialization of the view state. However, when you go back to the original base state, the component is removed again before the effects have had the chance of being displayed. Luckily, in Flex there are a couple of ways of dealing with this issue.

The first way of making sure the effects are visible is to not make use of a transition when going back to the base state. Instead, you use the effect triggers of the component itself to trigger the effect. When the component is removed, you need to use the removedEffect trigger like in the following example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
<!-- The font needs to be embedded for the texxt to fade out
as well. Otherwise, the button will fade, but the text
will simply remain fully opaque througout the effect -->
<mx:Style>
@font-face {
src: local("Verdana");
fontFamily: myFont;
fontWeight: bold;
}
 
global {
fontFamily: myFont;
}
</mx:Style>
 
<!-- This is the Fade effect we are going to use when the component is removed 
          from the display list -->
<mx:Fade id="fade" alphaFrom="1" alphaTo="0" duration="2000"/>
 
<!-- Define the view state -->
<mx:states>
<mx:State name="extraButton">
<mx:AddChild>
<!-- This button will fade in through the transitions and will fade out via the 
          removedEffect trigger -->
<mx:Button id="btn2" label="Click me now" click="currentState=''" removedEffect="{fade}"/>
</mx:AddChild>
</mx:State>
</mx:states>
 
<!-- Define the view state transition -->
<mx:transitions>
<mx:Transition fromState="" toState="extraButton">
<mx:Fade target="{btn2}" alphaFrom="0" alphaTo="1" duration="2000"/>
</mx:Transition>
</mx:transitions>
 
<!-- This component will be visible by default and triggers the second view state -->
<mx:Button id="btn1" label="Click me" click="currentState='extraButton'"/>
 
</mx:Application&gt;

The problem with this approach is that the transition effects are scattered throughout your code. However, there is also a second, in my opinion more appropriate way of dealing with this transition problem and that is through the use of transitions. This means that all of your transitional code will be located in 1 spot and this is so much easier to maintain.

But how do we solve the issue of the effect not being shown? Well, in fact (and this is not often mentioned in books and courses), you do have total control of when an item is being added or removed considering the effects that need to be played on the component. To do this, you can simply use the <mx:AddChildAction> and <mx:RemoveChildAction> tags. Just place them in the right order within a <ms:Sequence> tag after the appropriate effect and your effect will be displayed properly. Just take a look at this example code:<

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
<!-- The font needs to be embedded for the texxt to fade out as well.
Otherwise, the button will fade, but the text will simply remain fully opaque
througout the effect -->
 
<mx:Style>
@font-face {
src: local("Verdana");
fontFamily: myFont;
fontWeight: bold;
}
 
global {
fontFamily: myFont;
}
</mx:Style>
 
<!-- Define the view state -->
<mx:states>
<mx:State name="extraButton">
<mx:AddChild>
<!-- This button will fade in and out through the transitions -->
<mx:Button id="btn2" label="Click me now" click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>
 
<!-- Define the view state transition -->
<mx:transitions>
<mx:Transition fromState="" toState="extraButton">
<mx:Fade target="{btn2}" alphaFrom="0" alphaTo="1" duration="2000"/>
</mx:Transition>
 
<!-- The fade out effect is accomplished by adding a sequence with the 
          RemoveChildAction after the effect -->
<mx:Transition fromState="extraButton" toState="">
<mx:Sequence target="{btn2}">
<mx:Fade alphaFrom="1" alphaTo="0" duration="2000"/>
<mx:RemoveChildAction/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
 
<!-- This component will be visible by default and triggers the second view state -->
<mx:Buttonid="btn1" label="Click me" click="currentState='extraButton'"/>
 
</mx:Application>

You can view the results of the latter solution in the application below.

I’m trying to develop a Flex application that uses a Text component which will take an html rendered text. So far, no problem there. However, I would like to use more than 1 font (regular, bold, italic) in this text component and I’m not sure if the fonts are all on the user’s computer. What’s the best way of tackling this problem?

Solution:

If you don’t know for sure the fonts are installed on the user’s computer (because it’s some exotic font or some typical OS dependant font, the best way of dealing with that would be to embed the font in your Flex application (or any Actionscript application). Now, how do you do this exactly when you want to embed multiple fonts for a single component? Well, I’ll show you.

There are actually 3 ways of embedding your fonts in an application:

1. embed fonts in your Actionscript code
2. embed fonts directly in CSS
3. embed fonts in CSS using a SWF file that has (part of) the fonts embedded

1. Embed your fonts directly in Actionscript

To embed a font in Actionscript, you’ll have to assign it to some static variable to be able to incorporate it in the compilation of your application. Just before that variable definition, you specify a metadata tag “Embed” (just like you would if you were to embed an image). The properties for this metadata tag are:

• source: the location of your font file
• fontName: the name you want to use in the application for your font. I’ve chosen to use myFont to indicate it can be anything you like. But you could also choose the font name itself if you prefer it like that
• fontStyle: italic if it is an italic font (can be in combination with fontWeight)
• fontWeight: bold if it is a bold font (can be in combination with fontStyle)
• mimeType: e.g. application/x-font-truetype if it’s a truetype font

Repeat this step for all the different fonts you want to embed, but make sure that the fontName property is exactly the same for all of them. So, when for example you want to embed a Verdana font in regular, bold, italic and boldItalic, your code would look something like this:

[Embed(source="C:\\Windows\\Fonts\\Verdana.ttf",
       fontName="myFont",
       mimeType="application/x-font-truetype")]
public static const VerdanaTTF:String;
 
[Embed(source="C:\\Windows\\Fonts\\VerdanaBold.ttf",
       fontWeight="bold",
       fontName="myFont",
       mimeType="application/x-font-truetype")]
public static const VerdanaBoldTTF:String;
 
[Embed(source="C:\\Windows\\Fonts\\VerdanaItalic.ttf",
       fontStyle="italic",
       fontName="myFont",
       mimeType="application/x-font-truetype")]
public static const VerdanaItalicTTF:String;
 
[Embed(source="C:\\Windows\\Fonts\\VerdanaBoldItalic.ttf",
       fontWeight="bold",
       fontStyle="italic",
       fontName="myFont",
       mimeType="application/x-font-truetype")]
public static const VerdanaBoldItalicTTF:String;

2. Embed your font directly in CSS

Now, you can do exactly the same using only an external CSS file. The embedding part itself is a little bit different though. You would have to use the @font-face style for each of the separate font styles you want to incorporate in the resulting SWF file and provide it with the following attributes:

• src: the location of your font file.
• fontFamily: the name you want to use in your application for your font. Again, I’ve chosen to use myFont to indicate it can be anything you like. But you could also choose the font name itself if you prefer it like that
• fontStyle: italic if it is an italic font (can be combined with fontWeight)
• fontWeight: bold if it is a bold font (can be combined with fontStyle)

The src style attribute can either point to a file on the local file system or to a file somewhere on the web or another location. For embedding a font which resides on the local file system, you would specify local(“<font name>”) . The font name will remain the same for all the variations you want to embed, because it’s the style attributes that will make up the difference here. You’ll probably use this local specification most of the time, because you’ll probably want to embed a font that you have on your own computer. However, if you were to incorporate a font file which resides somewhere on a remote location, you would use url(“<path to font file>”). This path can either be a relative or absolute path.

Of course you need to repeat the @font-face style for every font variation you want to embed. Again, make sure that the fontFamily property is exactly the same for all of them, because you will use that name in the fontFamily attribute of the style you are going to apply on the component in order to use the different font styles.

For the same Verdana font definitions, your code should look like this:

@font-face {
	src: local("Verdana");
	fontFamily: myFont;
}
 
@font-face {
	src: local("Verdana");
	fontFamily: myFont;
	fontWeight: bold;
}
 
@font-face {
	src: local("Verdana");
	fontFamily: myFont;
	fontStyle: italic;
}
 
@font-face {
	src: local("Verdana");
	fontFamily: myFont;
	fontWeight: bold;
	fontStyle: italic;
}

3. Use a SWF file with partially embedded fonts

These first 2 methods work just fine. However, they do add several hundreds of kilobytes to your SWF file size. And this is only for 1 specific font, so imagine what it would do to a SWF file that compiles a couple of fonts into your application. This is due to the fact that a font is more than just alphabetical characters. Most of the time you don’t need all of those characters, but just the basic ones like digits, lowercase and uppercase letters and punctuation signs.

Fortunately, there is also another solution that allows you to limit the number of glyphs (this is what the individual font signs are called) to incorporate in your application. To be able to do this, we are going to have to take our development out of Flex Builder (or Flash builder of course) and bring it into Flash.

So, in Flash, you start by creating a new ActionScript 3 Flash file. On the stage, you place a text field and type some text. In the properties of that text field, you have to set it to Dynamic Text. In the Character subframe of the properties panel, you then select the font you want to embed as well as the style (regular, bold, italic or bold italic).

At the bottom of that same properties panel, you also see a button labeled “Character Embedding”. Just click on that one and you’ll get a dialog box which allows you to select the glyphs you want to embed in the Flash file. Select the uppercase, lowercase, numerals and punctuation glyphs and click ok to embed them in the SWF.

Now, perform the same procedure for the other font styles you want to embed, so you’ll eventually end up with 4 different dynamic text fields that all include a different style of your font.

The next step is then to compile your SWF file, so you can use it in your Flex or AIR application. To do that, you’ll first have to go to the Publish Settings, which you can find in the File menu. In the Format tab of the settings dialog, make sure that only Flash type is selected and then click on Publish. A SWF file will now be generated and that file will contain all the characters from the different font styles that you’ve just indicated.

Go back to Flex Builder (or Flash Builder of course) and add a fonts directory to your project. In this directory you place the SWF file that you have just generated. Now, to actually use the embedded fonts from the SWF file, we have to rely again on CSS. This is quite similar to the second method I’ve explained. However, this time the fontFamily property must be exactly the same as the actual font that you have included. So, in my example here, it has to be “Verdana”. You cannot choose the fontFamily name you want to use in your application freely anymore.

So, enter the different @font-face styles that match the embedded fonts from the SWF file in the same way as you would do when using the second method, bearing in mind that the font name is fixed now. Your code should look like this:

@font-face {
	src: url("../fonts/Verdana.swf");
	fontFamily: Verdana;
}
 
@font-face {
	src: url("../fonts/Verdana.swf");
	fontFamily: Verdana;
	fontWeight: bold;
}
 
@font-face {
	src: url("../fonts/Verdana.swf");
	fontFamily: Verdana;
	fontStyle: italic;
}
 
@font-face {
	src: url("../fonts/Verdana.swf");
	fontFamily: Verdana;
	fontWeight: bold;
	fontStyle: italic;
}

When you take a closer look at the generated SWF file, you will certainly notice a big difference in file size between the first 2 methods and this last one. This is because now, not all glyphs are embedded in the SWF file.

All you have to do now, is just set the fontFamily for the necessary components to the name you’ve just used in your CSS or Actionscript style embedding of the fonts, make sure you use the htmlText property and you’re all set to go.

This is the very first post on this website to clarify a little bit what the flexpert is all about. This is by no means intended to be just another blog about Flex, AIR and LiveCycle related subjects. For techical matters on those things, I kindly refer to our company’s blog at http://blog.multimediacollege.be.

This site however is meant to be a site with specialist info on those topics with articles on demand. However, I’m not starting up a helpdesk website with trivial issues which can easily be found by using google. So please, no ordinary requests about how to structure a project or whether or not to use VBoxes and HBoxes. Every other technical or analytical request is welcome and I’ll try to write an interesting article about it, hoping the community can benefit from it.

If you have a request, please use the contact form on this website and I’ll try to convert it into an article as soon as possible.

So bring on those requests,

The flexpert