I know this has been a long discussed topic. And I’m not going to re-invent the wheel. I have been searching for a long time now and have found many ways to dynamically load fonts at runtime in AS3, there are a lot of good solutions out there. But yesterday I found a font manager class and WOW, that’s a really smart method. So all I did was wrapping it in another class, to make the handling even easier. Here it is.

You should start with this tutorial for the basic font loader manager class by etcs.ru (translated). Excerpt: “What the fontloader does is reading the swf bytecode and extract all fonts from it and registers it to the flash font class.”

What I did is creating a wrapper class for this, that makes the handling even easier and traces the CSS output file to the output window in the Flash IDE, so you can just copy it and paste in into a new style.css file.

Here is the code to load the fonts and listen to the events:

import net.kaegi.utils.FontManager;
import net.kaegi.events.FontManagerEvent;
var fontManager:FontManager = new FontManager();
fontManager.addEventListener(FontManagerEvent.LOAD_PROGRESS, onFontManagerLoadProgress, false, 0, true);
fontManager.addEventListener(FontManagerEvent.LOAD_COMPLETE, onFontManagerLoadComplete, false, 0, true);
fontManager.addEventListener(FontManagerEvent.LOAD_ERROR, onFontManagerLoadError, false, 0, true);
fontManager.init("resources/fonts.swf", "resources/style.css")

function onFontManagerLoadProgress(event:FontManagerEvent) {
	trace("FontManager LOAD Progress... "+event.params.type+": "+event.params.perc+"% ("+event.params.bytesLoaded +"/"+event.params.bytesTotal+")");
}
function onFontManagerLoadComplete(event:FontManagerEvent) {
	trace("FontManager LOAD Complete!");
	trace(event.params.displayFonts);
	trace(event.params.cssFileOutput);
}
function onFontManagerLoadError(event:FontManagerEvent) {
	trace("FontManager LOAD Error!");
	trace(event.params.msg);
}

Here is the output of the css trace, ready to use: You can copy and paste it into a new style.css file, then edit it to your needs.

.font1 {
	font-family: "Verdana";
	font-size: 12;
	color: #000000;
	/*font-weight: normal;*/
	/*font-style: normal;*/
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

.font2 {
	font-family: "Arial Unicode MS";
	font-size: 12;
	color: #000000;
	font-weight: bold;
	/*font-style: normal;*/
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

.font3 {
	font-family: "Helvetica CY BoldOblique";
	font-size: 12;
	color: #000000;
	font-weight: bold;
	font-style: italic;
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

Here are all the source files.

Some more useful links and resources about this topic:
http://etcs.ru/pre/FontLoaderDemo/
http://www.thetechlabs.com/tutorials/flash/dynamically-loading-fonts-with-fontloader-and-applying-styles-with-css-stylesheet-in-as3/
http://lab.revoke.ca/2010/02/as3-external-font-loading-class/
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/StyleSheet.html

Even though I don’t need it in the font loading method described here, while searching the web I found a nice site to get unicode ranges: http://www.tillschneidereit.de/unicode_range_tool.html If you are embedding your founds using the EMBED tag you might find it useful.

OK, now back to daily business!

Cheers,
Christian

I just came across a blog entry by Grant Skinner about BitmapSlice9. This is awesome news for the global navigation. I will check it out and post a sample project soon (ok, as soon as I have time…)

Cheers,
Christian

Use the browser scrollbar
This seems to be the obvious choice. I do this sometimes, and if I do I use SWFFIT. This is a really good solution, but there is a drawback when you use this method: you can only scroll the flash movie as a whole. This is a problem if you want to keep a background image in your flash movie in place and only scroll part of your site.

Use a scrollpane
Because I prefer to have more control, I used to do the scrolling by using  a scrollpane: I just put the whole flash site into a scrollpane. This works fine, I did this in many sites: dlog.ch, marviva.net etc. But it also has drawbacks: I cannot click on anything which is behind the scollpane, and, more annoying: I cannot take control over the scroll amount (at least until today I have not found out how to do it). If the content loaded into the scrollpane contains for example movieclips placed at the far bottom (masks, movieclips placed “off stage” as starting positions of animations etc.), this will make the movieclip too big (height). And you are limited to the frame of the scrollpane: The content is always “inside” (and therefor masked by) the scrollpane which is not always desired.

Use a third party scrollbar
Every now and then I like to use the Advanced Scrollbar from flashtuning.net or the Ultimate Scroller Pro from flashloaded.com, but only to scroll “small things”.

Take full control with the UIScrollbar!
I always thought that the UIScrollbar was for scrolling text only. How wrong I was! Today I do all my scrolling with the UIScrollbar, because you can not only scroll textfields, but movieclips as well. And the best thing is: I can precisly control the scroll amounts. Have a look at the SWF below. Click here to test the mousewheel.

The simple trick is to not assign a scroll target to the scrollbar, but a scroll amount only. Then just listen to the scroll events and scroll whatever you like:

// setScrollProperties(pageSize:Number, minScrollPosition:Number, maxScrollPosition:Number, pageScrollSize:Number = 0):void
var scrollbar_height:uint = 200;
var extra_height:uint = 10;
sb_vertical.setScrollProperties(200, 0, scroll_target.height - scrollbar_height + extra_height, scrollbar_height);
sb_vertical.addEventListener(ScrollEvent.SCROLL, onVerticalScrollHandler);
//
function onVerticalScrollHandler(event:ScrollEvent):void{
scroll_target.y = -event.position + sb_vertical.y + 5;
}

Download the source files here. I have also included the files needed to enable mouse wheel scrolling on the mac.

Update 2009/12/01: Here is a real example of a website using the UI Scrollbar for full site scrolling.

Happy scrolling!
Christian

How does it work?

It takes the content (movieclip or sprite), resizes it (keeping its aspect ratio) so that the width fits to the width of the selected paper format (landscape or portrait) and calculates the number of pages.

Try it out in the SWF below:

You can find the documentation and download of all source files here.

Here is a real example that makes use of the multipage printing class.

.

new VarLoader("yourscript.php",{var1:value1, var2:value2})

But before explaining everything in detail, lets look at this example:

The complete AS3 code in varloader.swf:

import net.kaegi.loaders.VarLoader;
var vl:VarLoader;
//
sendBtn.addEventListener(MouseEvent.CLICK,sendBtnHandler);
function sendBtnHandler(e:MouseEvent) {
// Variables sent by POST-Method:
var varObj:Object = {};
varObj.textinput0 = escape(textinput0.text);
varObj.textinput1 = escape(textinput1.text);
// additionally another variable is sent by the GET method:
vl = new VarLoader("http://www.flashcmsframework.ch/wp-content/data/varloader/varloader.php?var_get=I was sent by GET!", varObj);
vl.addEventListener(Event.COMPLETE, onVarsLoaded);
vl.addEventListener(Event.CANCEL, onVarsCancel);
}
function onVarsLoaded(e:Event) {
var msg:String = "Communication with the server was successful.\n\n";
msg += "bulla -> "+e.target.vars.bulla+"\n";
msg += "gogull -> "+unescape(e.target.vars.gogull)+"\n";
msg += "var33 -> "+unescape(e.target.vars.var33)+"\n";
msg += "var_get -> "+unescape(e.target.vars.var_get)+"\n";
msg += "textinput0 -> "+unescape(e.target.vars.textinput0)+"\n";
msg += "textinput1 -> "+unescape(e.target.vars.textinput1)+"\n";
tf_servermsg.textColor = 0x009900;
tf_servermsg.text = msg;
}
function onVarsCancel(e:Event) {
tf_servermsg.textColor = 0x990000;
tf_servermsg.text = e.target.errormsg;
}

…and the code in varloader.php:

// coming from flash (GET)
$var_get = $_GET["var_get"];

// coming from flash (POST)
$textinput0 = $_POST["textinput0"];
$textinput1 = $_POST["textinput1"];

// internal
$bulla = "Blabla. I am just some lonely text.....";
$gogull = "WOW! I was fetched from the server as well! Cool!";
$var33 = "Hey, my name is 'var33'! What's yours?";

// result:
$result = "foo=bar";     // In AS3 the first variable MUST NOT have an '&', otherwise you will get an error message! So just use some dummy vars to make flash happy.
$result .= "&bulla=".rawurlencode($bulla);
$result .= "&gogull=".rawurlencode($gogull);
$result .= "&var33=".rawurlencode($var33);
$result .= "&var_get=".rawurlencode($var_get);
$result .= "&textinput0=".rawurlencode($textinput0);
$result .= "&textinput1=".rawurlencode($textinput1);

echo $result;

?>;

Download source code and example file

I hope someone can use this!

Update 12/28/2009: Some useful links regarding url encoding:
escape()
unescape()
encodeURI()
encodeURIComponent()
decodeURI()
decodeURIComponent()

Cheers,
Christian