Font Embedding with Flash Builder 4
I’ve been noodling around a bit with Flash Builder 4 lately. After creating a few simple apps I decided to look into font embedding. There are quite a few posts to be found via Googling about embedding fonts in Flex. Some are very good, others not so much, but I think I managed to compile the info into a useful example. My goal was to create custom font swfs, load them into flex, and then apply them to a text field through the use of some type of selector.
1. Create the Font SWF
The first step is to use Flash to create a font swf. To do so, create a new Flash document and add a dynamic text field to the stage. Select the text field and choose the font you want to use in your Flex application. Next, click the Character Embedding button from the Property panel and choose the characters that you want available to your Flex application. Choose only the characters you need as each extra character will add unnecessary size. Finally, publish the swf and place a copy in your Flex application folder.
Make a font swf for each font you want to use in your Flex application then close Flash.
2. Embed the Font SWF
The next step is to pull those font swfs into your Flex application and create classes, or styleNames, for them. This is done inside the fx:Style tag (mx:Style in Flex 3)
<fx:Style >
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@font-face {
src: url("fonts/calvin.swf");
font-family: "Calvin and Hobbes";
}
@font-face {
src:url("fonts/lcd.swf");
font-family:"LCD";
}
@font-face {
src:url("fonts/ransom.swf");
font-family:"RansomNote";
}
.calvin {font-family: "Calvin and Hobbes";}
.lcd {font-family: "LCD";}
.ransom {font-family: "RansomNote";}
</fx:Style>
Note that the font-family is the name of the font as listed in the Flash IDE. Once this is done I can assign the styleNames “smack”, “square”, and “curlz” to an mx:Text field and it will be presented in that font, something like this:
<mx:Text id="myText" text="This is my text" styleName="calvin" />
If you stop here you will have a text field using your embedded font.
3. Create a Font Selector
We can take this an additional step by adding a radio button group and a simple function to allow dynamic switching between fonts:
<fx:Declarations> <s:RadioButtonGroup id="radiogroup1"/> </fx:Declarations> <mx:Text id="myText" x="159" y="28" text="Select another font" styleName="calvin" fontSize="20"/> <s:RadioButton id="calvin" x="10" y="10" label="Calvin" groupName="radiogroup1" click="handleChangeFont(event)" selected="true"/> <s:RadioButton id="lcd" x="10" y="36" label="LCD" groupName="radiogroup1" click="handleChangeFont(event)"/> <s:RadioButton id="ransom" y="62" label="Ransom Note" groupName="radiogroup1" click="handleChangeFont(event)" x="10"/>
Note that, as an id for each radiobutton I used the class name they will invoke. This will allow me to use only one line of code in one function to assign the appropriate styleName to my text field:
<fx:Script>
<![CDATA[
protected function handleChangeFont(evt:Event):void {
myText.styleName = evt.target.id;
}
]]>
</fx:Script>
The finished product looks something like this:
Right-click on the swf and then click “View Source” to view or download the source.
Simple XML-Driven Flash AS3 Slider
Download the source here
When I was creating my coding portfolio I wanted a slider app that would display a series of screenshots from some of my recent projects. While it was easy to find several WordPress widgets that presented slideshows, it was very difficult to find one that allowed multiple instances on the same page. Many didn’t even allow multiple instances across the blog.
I decided it would be easiest to create one myself. Admittedly it’s nothing flashy, but it fit the purpose well and I thought it may be useful to post. It utilizes Tweener, an amazingly simple open-source tweening library, for transitions. The library is included with the source. Other version and documentation are available on Google code.
How to set up a slider
- Create a subfolder under the folder where the slider swf will be stored. Each slideshow must have its own separate subfolder.
- Create a series of 250px(w) x 175px(h) images and place them in the subfolder.
- Create an XML file named slides.xml in the subfolder with your images. This involves adding the image name, an optional title, and an optional description. The structure is as follows:
<?xml version="1.0" encoding="UTF-8"?> <slides> <slide> <title>Slide 1 Title</title> <desc>Here is a description of Slide 1</desc> <image>slide1.png</image> </slide> <slide> <title>Slide 2 Title</title> <desc>Here is a description of Slide 2</desc> <image>slide2.png</image> </slide> </slides>
- VERY IMPORTANT: Pass the folder path to the SWF as a flashvar named contentfolder. For example, if you’re using Adobe’s embedding method and your xml and images are on your site under /swf/myslides, you would add ‘flashvars’,'contentfolder=/swf/myslides/’ at the end of the AC_FL_RunContent function (don’t forget to add a comma before it to separate it from the other values).
Tips
- The code is in a document class named CustomDocument.as under the com subfolder.
- If you want to change the navigation buttons, you can change them in the library. nextGraphic and prevGraphic are the base graphics and Next and Prev apply filtering and state modifications.
- If you want slides of a different size, it should only take a couple of tweaks. First, resize your document ( Modify > Document ). Then, modify the buttons and Slide to accommodate your new size. These objects are in the library (The Next and Previous buttons, and the Slide itself, are all in the library ( Window > Library ). Finally, modify the nextX and nextY variables in the CustomDocument.as file. nextX is the X coordinate where the first slide will be placed. nextY is the Y coordinate.
- The source is packaged using the _sans device font. You can change the font inside the Slide movie clip. Remember to embed the characters or your font will not appear!
- If your images won’t load then you’re probably either forgetting to pass the contentfolder flashvar, or your images aren’t in the right place. Firebug is a great tool for troubleshooting this issue.
Glenn
FBTracer: Flash Tracer Chocolate in Firebug Peanut Butter
As a longtime fan of both Flash Tracer, the Firefox Flash tracing extension, and Firebug, arguably the best free web development extension available, I was ecstatic to hear that Alessandro Crugnola had created a FlashTracer plug-in for Firebug.
While it’s possible to have both individual Flash Tracer and Firebug extensions running at the same time, performance often suffers significantly. Adding Flash Tracer as a Firebug extension seems to have improved performance while making it more convenient and accessible.
As of this writing, it’s still in early beta but it’s working well enough for me. Check it out for yourself at sephiroth.it .
- Glenn
