So a couple people have asked for this post on the final implementation we used for the runtime shared font libraries for Flash AS2. I finally got the time (or others had the time to help me – I never have the time hehe) to gather up all the related required framework classes and even put some documentation around the whole process. Not sure how many people are doing Flash 7/8 AS2 stuff still but we still are so I guess that means something. One thing I originally wasnt going to release with this but decided to is our framework classes for EventDispatching and such. Pretty cool stuff with event bubbling and the sorts for AS2. Anyways this implementation has been used for some of our very LARGE clients with great success. There are some minor gotchas, but they should be in the docs. The zip file contains the runtime font framework classes, the font library creation tools (with step by step how to), and the a sample application using the runtime css driven model. Also the below info is in the docs as well. Thanks goes out to one of our rock star developers (Nils Thingval) here at RealEyes for putting these goodies together in a nice package and documenting.
//USING FONTS WITH THE RE FRAMEWORK//
This is a brief overview of the process of using runtime
fonts with the RealEyes Media Framework. The core classes are the
RE_StyleManager that loads in an external stylesheet and the RE_FontManager
that loads in fonts contained in the external stylesheet. The fonts need to be
prepped into SWFs, which will be loaded in by the app. The fonts are applied
through CSS styles used in the HTML text of the text field.
1. Create your font libraries and load them to the server where they will reside. See the Directions for Creating Font Libraries document for instructions.
2. Create the stylesheet for your application. You can create it as normal, but at the beginning create a class called .fonts and specify the URLs for your font library SWFs in the font-src attribute as a comma-delimited list.
.fonts{
font-src:[PATH TO FONT],[PATH TO ANOTHER FONT];
}
3. In the ActionScript for your application, import the classes necessary for using the RE_StyleManager and RE_FontManager to bring in an external stylesheet and load in the external fonts.
com.re.v2.events.RE_EventBroadcaster;
com.re.v2.events.RE_EventDispatcher;
import mx.utils.Delegate;
import com.re.v2.utils.style.RE_FontManager;
import com.re.v2.utils.style.RE_StyleManager
4. Create an instance of the RE_EventBroadcaster on the _root timeline called dispatcher.
_root.dispatcher = com.re.v2.events.RE_EventBroadcaster.getInstance();
5. Allow for domain access to the SWF
System.security.allowDomain(“*”);
System.security.allowInsecureDomain(“*”);
6. Create an instance of the RE_StyleManager class and set its waitForFonts property to true.
var styleManager:RE_StyleManager = RE_StyleManager.getInstance();
styleManager.waitForFonts = true;
7. Use the instance’s loadStyle method to load in a stylesheet. The first parameter is the stylesheet’s URL and the second is the name the app will use to refer to it.
styleManager.loadStyle(“css/test.css”, “TEST_CSS”);
8. Add an event listener to the RE_StyleManager instance that will listen for the event that signals the completion of the font loading.
styleManager.addEventListener(“COMPLETE”, mx.utils.Delegate.create(this, cssLoaded));
9. Create a method, in this case cssLoaded, that then preps the text field that the style will be applied to.
function cssLoaded(p_evt:Object):Void
{
output_txt.embedFonts = true;
output_txt.html = true;
output_txt.condenseWhite = true;
output_txt.styleSheet = p_evt.style;
output_txt.htmlText = “<p><span class=’header’>Header Class.</span>
<br/><span class=’body’>I am body styled text. </span>
I am unstyled text. </p>”
}
