There are several ways to embed fonts for use in Flash projects. One of the most common ways in Flex (that is now supported in Flash with CS4) is using the Embed metadata tag with unicode ranges. Lee has a good example of using this technique with Flash CS4 on gotoAndLearn(). This seems to be the suggested best-practice technique, but I still don’t find it the easiest.
Instead, I like to use Flash’s character embedding options when possible:
- Create a new Flash file and add a dynamic text field on stage (I usually like to enter in the name of the font I’ll be embedding as the field’s text).
- Select the text field’s font (family and style in CS4).
- Now open the Character Embedding panel and select the range of characters you would like to embed. You don’t want to embed the entire font or else your SWF will be very bloated.
- Now to be able to use this font you need to be able to reference it. Before Flash CS4, this was typically the font name that you selected from the font list. In CS4 however this doesn’t work. With CS4, Flash has finally updated their font list to match how other Adobe products list fonts (by family with styles grouped under the family). This is much better when looking for a specific font and trying to match fonts used in Photoshop, etc but it does make it more confusing when trying to determine the name of the font to reference for our purposes. To confirm what font name to reference add the following script to the Flash file to iterate over the embedded fonts:
var fontList:Array = Font.enumerateFonts(); for( var i:int=0; i<fontList.length; i++ ) { trace( "font: " + fontList[ i ].fontName ); }This will list out all of the embedded fonts in the Flash file by the name you should use to reference them.
- Compile the Flash file and your external font SWF is ready for embedding.
- Now create a Flex or ActionScript project in Flex Builder and create a property to reference your font like this:
[Embed( source="/assets/swf/fonts.swf", fontFamily="Helvetica Neue LT Std 95 Black" )] public static var HelveticaNeueLTStd95Black:Class;
In the Embed metadata, set the source parameter to point to the SWF we created and set the fontFamily parameter to the font reference we discovered above using enumerateFonts(). The actual property name of the Class can be anything you want.
- Add a TextField in your project and set its embedFonts property to true. There are two ways to use the embedded font with this TextField:
- Create a TextFormat object and set the font property to the fontFamily name you used in the Embed tag above. Now set the defaultTextFormat of the TextField to this TextFormat object.
- Create a CSS file and set the font-family property of a selector to the fontFamily name you used in the Embed tag above. Load and parse the CSS into a StyleSheet object and set the styleSheet property of the TextField to this StyleSheet object. Make sure your text is using the selector from the CSS file.
That’s it!
No need to figure out the unicode range of the characters you want to embed. Just use Flash’s Character Embedding panel that you’ve probably been using forever.
It should be noted that Lee’s technique referenced at the top of this post is probably still the best way to do runtime font loading.
As I mentioned in an earlier post, I was working on building a chat room using XMPP (Jabber) and the XIFF AS3 API.
If you aren’t sure how to get started with XMPP and XIFF, make sure to check out that post to get you up and running.
Once I had successfully worked out using XIFF to connect with XMPP and pass data back and forth between the server and the client, I soon realized that I wanted to associate custom data with each user in the chat rooms.
The core protocol used in XMPP to express a user’s current network availability (offline or online, etc) is Presence.
On IM, you know when your buddies come online and become unavailable, etc because you subscribe to their presence.
The user’s presence is also sent to a chat room when he/she joins the room.
The default presence data typically only incorporates information about the user’s status (away, busy, available, etc).
The issue that I soon ran into with my chat rooms, was that our site already had a large collection of users with data associated with each user (id, username, picture, etc) and I wanted to associate this data with the chat users without duplicating the data.
The best place seemed to be their presence since its already linked directly with each user. The only issue I had was figuring out how to do that.
As I soon realized, the XMPP spec is extremely extensible and well thought through and XIFF has tried to manage this extensibility in its library as well.
In XIFF, extensions can be added to any
XMPPStanzathat is sent to the XMPP server.By default, there are three core XMPP stanzas,
IQ,MessageandPresence.Each of these stanza classes has an
addExtension()method.What I needed to do was write a custom extension class that I could pass into the Presence’s
addExtension()method.Digging in to the code, all XIFF extensions need to extend the
Extensionclass and implementIExtensionandISerializable.To implement
IExtension, you will need to addgetNS()andgetElementName()methods.getNS()will return the custom unique namespace that you will need to create and associate with this extension.eg: http://yourdomain.com/extensionname
getElementName()will return the base XML element name to associate with this extension.eg: extension_name
To implement
ISerializable, you will need to addserialize()anddeserialize()methods.serialize()will convert the typed extension into XML data to be passed to the server whiledeserialize()will do the opposite and convert the received XML data into the typed extension.For more detailed information on this, make sure to look at some of the existing extensions in XIFF’s library.
Once the class is complete, you will need to register the extension with XIFF. This registration process informs XIFF of the particular extension so that it knows how to handle it when it is received over the network.
This can be done by calling
ExtensionClassRegistry.register( CustomExtension )anytime before you try to pass the extension over XMPP.Most extensions provide a static
enable()method with the above code in it to handle this registration process.At this point, you can create an instance of any of the core XMPP stanzas (IQ, Message, or Presence) and an instance of your new extension and then use the
addExtension()method of the core stanza to pass in your extension.The last step is to call the
send()method on your XMPP connection passing in the XMPP stanza.To finish up my particular example, I created a custom user extension that had the user’s id, name, picture, etc and attached it to the user’s presence.
This as mentioned above could be passed with the send method on the XMPP connection and anyone subscribed to my user’s presence would receive the custom extension as well.
One thing that I wanted to do was join a chat room and have this custom data associated with the presence information of all of the existing users in the room that gets broadcast out.
It took me a little bit to realize that the Room class has a feature for this already. Like I said, XMPP has thought of everything already.
When you join a chat room, you call the Room’s
join()method and the second parameter allows you to add an array of Presence extensions. Just instantiate your custom Presence extension and wrap it in an array and pass it into thejoin()call.Hopefully this helps out others that got stuck on sending custom data over XMPP with XIFF.
Let me know if you have any questions or want any other XIFF/XMPP tutorials.