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:
-
-
/* CSS file */
-
@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.
-
-
<?xml version="1.0"?>
-
<!– 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 Image may be NSFW.
Clik here to view.![:P]()
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