February 23rd, 2007 by Kyle
Tags: ActionScript, as3, css, embedded-fonts.-embedded-true-type-fonts, Flex, Flex Builder, flex-builder-2.0.1, fonts, modules, mxml, runtime, runtime-stylesheets, style-sheet, stylesheets, true-type-fonts, ttf
Posted in: Flex
This is installment 3 in the series.
The previous 2 related posts are:
Changing embedded True Type fonts at Runtime in Flex Applications
Using Modules to Change embedded True Type fonts at Runtime in Flex Applications
This approach is a little different.
The application is very similar, but instead of using a loader or module loading, I use the StyleManager to load a runtime CSS swf (which was compiled from a CSS file).
Here is one of the style sheets that is tuned into a CSS swf:
@font-face {
src:url("assets/arial.ttf");
fontFamily: myFont;
}
@font-face {
/* Note the different filename for boldface. */
src:url("assets/arialbd.ttf");
fontFamily: myFont; /* Notice that this is the same alias. */
fontWeight: bold;
}
@font-face {
/* Note the different filename for italic face. */
src:url("assets/ariali.ttf");
fontFamily: myFont; /* Notice that this is the same alias. */
fontStyle: italic;
}
@font-face {
/* Note the different filename for bold-italic face. */
src:url("assets/arialbi.ttf");
fontFamily: myFont; /* Notice that this is the same alias. */
fontWeight: bold;
fontStyle: italic;
}
.myPlainStyle {
fontSize: 11;
fontFamily: myFont;
}
.myBoldStyle {
fontSize: 11;
fontFamily: myFont;
fontWeight: bold;
}
.myItalicStyle {
fontSize: 11;
fontFamily: myFont;
fontStyle: italic;
}
.myBoldItalicStyle {
fontSize: 11;
fontFamily: myFont;
fontWeight: bold;
fontStyle: italic;
}
Here is the application.
Most of this should look familiar, except for the new stylesheet loading code.
<!– styles/runtime/BasicApp.mxml –>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="loadRuntimeStyleSheet(‘Sans’);">
<mx:Panel height="100%" width="100%">
<mx:TextArea id="input" height="100%" width="100%" fontSize="{fontSize}" />
<mx:ControlBar>
<mx:VBox>
<mx:HBox>
<mx:Button label="_sans" click="unloadStyleSheet(fontName);loadRuntimeStyleSheet(‘Sans’)"/>
<mx:Button label="Arial" click="unloadStyleSheet(fontName);loadRuntimeStyleSheet(‘Arial’)" />
<mx:Button label="Trebuchet" click="unloadStyleSheet(fontName);loadRuntimeStyleSheet(‘Trebuchet’)" />
<mx:Button label="Rotate +1" click="{++input.rotation}" />
<mx:Button label="Rotate -1" click="{–input.rotation}" />
<mx:Button label="Small" click="fontSize=6" />
<mx:Button label="Medium" click="fontSize=11" />
<mx:Button label="Large" click="fontSize=20" />
<mx:Button label="Normal" click="applyStyle(‘myPlainStyle’);this.fontWeight=’normal’;this.fontStyle=’nornmal’"/>
<mx:Button label="Bold" click="applyStyle(‘myBoldStyle’);this.fontWeight=’bold’;this.fontStyle=’nornmal’"/>
<mx:Button label="Italic" click="applyStyle(‘myItalicStyle’);this.fontWeight=’normal’;this.fontStyle=’italic’"/>
<mx:Button label="Bold Italic" click="applyStyle(‘myBoldItalicStyle’);this.fontWeight=’bold’;this.fontStyle=’italic’"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="current StyleSheet: {currentStyleSheet}"/>
<mx:Label text="fontName: {fontName}"/>
<mx:Label text="fontSize: {fontSize}"/>
<mx:Label text="fontWeight: {fontWeight}"/>
<mx:Label text="fontStyle: {fontStyle}"/>
</mx:HBox>
<mx:HBox>
<mx:Label id="l2" text="{progMessage}"/>
<mx:Label id="l1" text="{progBar}"/>
</mx:HBox>
</mx:VBox>
</mx:ControlBar>
</mx:Panel>
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
import mx.events.StyleEvent;
import mx.controls.Alert;
[Bindable]
public var fontName:String = "_sans";
[Bindable]
public var fontSize:int = 11;
[Bindable]
public var fontWeight:String="normal";
[Bindable]
public var fontStyle:String="normal";
[Bindable]
public var currentStyleSheet:String="_sans";
[Bindable]
public var progBar:String = "";
[Bindable]
public var progMessage:String = "";
public function loadRuntimeStyleSheet(fontName:String):void {
progBar = "";
progMessage = "";
this.fontName=fontName;
var StyleSheet:String=fontName+".swf";
currentStyleSheet=StyleSheet;
var myEvent:IEventDispatcher =
StyleManager.loadStyleDeclarations(StyleSheet,true);
myEvent.addEventListener(StyleEvent.COMPLETE, loadRuntimeStyleSheetComplete);
myEvent.addEventListener(StyleEvent.PROGRESS, progressEventHandler);
myEvent.addEventListener(StyleEvent.ERROR, onError);
}
public function loadRuntimeStyleSheetComplete(e:StyleEvent):void {
applyStyle(‘myPlainStyle’);
input.setStyle( "fontFamily", ‘myFont’ );
if(input.text.length==0){
setText();
}
if(this.fontName=="Sans"){
input.setStyle("fontFamily","_sans");
}
}
public function applyStyle(ss:String):void {
input.styleName=ss;
}
public function unloadStyleSheet(ss:String):void {
StyleManager.unloadStyleDeclarations(
ss, true);
}
private function progressEventHandler(e
rogressEvent):void {
progBar += ".";
progMessage = "StyleSheet " + Math.round((e.bytesLoaded/e.bytesTotal) * 100) + "% loaded";
}
public function onError(e:StyleEvent):void
{
fontNotLoaded();
}
private function fontNotLoaded():void{
Alert.show(‘font not loaded! Defaulting to _sans’);
progBar = "";
progMessage = "Module NOT Loaded!";
this.fontName="_sans";
this.fontWeight=‘normal’;
this.fontStyle=‘normal’;
setText();
progMessage = "";
}
public function setText():void {
input.text="This is the theme to Garry’s Show,\n"
+"The theme to Garry’s show.\n"
+"Garry called me up and asked if I would right his theme song.\n"
+"I’m almost halfway finished,\n"
+"How do you like it so far,\n"
+"How do you like the theme to Garry’s Show.\n\n"
+"This is the theme to Garry’s Show,\n"
+"The opening theme to Garry’s show.\n"
+"This is the music that you hear as you watch the credits.\n"
+"We’re almost to the part of where I start to whistle.\n"
+"Then we’ll watch ‘It’s Garry Shandling’s Show’.\n\n"
+"This was the theme to Garry Shandling’s show.";
}
]]>
</mx:Script>
</mx:Application>
A zip file of an entire Flex Builder 2.0.1 project with this code can be downloaded here.
I hope some of you find this demo useful.
-Kyle
Tweet
2 Comments »

March 5th, 2008 at 12:00 pm
I’m trying to add a Garamond css/swf set into this and I keep getting errors.
How exactly did you make the css.swf?
March 5th, 2009 at 5:39 am
Thanks a lot! It really helped.