Flash: bold and regular embedded fonts using a stylesheet

Often you will have to combine bold and regular fonts in the same textfield, but with a textfield generated with actionscript. First, create two font symbols with the “bold” and “regular” styles.

Then, register the font styles:

Font.registerFont(BoldStyle);
Font.registerFont(RegularStyle);

Note: there is a difference between your font family (say, “Helvetica”) and the “BoldStyle” and “RegularStyle”.

BoldStyle is a class name. “Helvetica” is a font family name.

You need to “register” your class name, but you assign your font family name as the font family.

var style:StyleSheet = new StyleSheet();

var bold:Object = new Object();
bold.fontWeight = "bold";
bold.fontFamily = "Helvetica";

var body:Object = new Object();
body.fontStyle = "normal";
body.fontFamily = "Helvetica";

style.setStyle("b", bold);
style.setStyle("body", body);

var label:TextField = new TextField();
label.styleSheet = style;
label.htmlText = "Hello World...";
addChild(label);

Crisp text in Flash (with Fullscreen or resizing)

Part 1:set the anti-alias type to ADVANCED, then you can set the grid-fit type, the sharpness and thickness:

myTextField.antiAliasType = AntiAliasType.ADVANCED;
myTextField.autoSize = TextFieldAutoSize.LEFT;

You can then set the “gridFitType” to make sure your TextField snaps to a whole number. Set it to “pixel” for left-aligned text and “sub-pixel” for right-aligned text:

myTextField.gridFitType = "pixel";

You can also set the sharpness and thickness to what you want:

myTextField.sharpness = -100; // set to what you want
myTextField.thickness = 50; // set to what you want

Part 2: If you are toggling between fullscreen or have a resize thing going on, listen for the resize event for your loaded movies or movieclips. Then the gridFitType setting above will be “activated” whenever a re-size occurs:

// below goes in your constructor or init function
myStage = this.stage;
myStage.addEventListener(Event.RESIZE, resizeDisplay);

private function resizeDisplay(e:Event):void
{
var currentWidth:int = myStage.stageWidth;
var currentHeight:int = myStage.stageHeight; 

// if you load in your movie or movieclip with a textfield
// doing this below will help keep your text crisp
myLoadedMovie.width = currentWidth;
myLoadedMovie.height = currentHeight;
}

Part 3 : when writing your fullscreen toggle function, the size of your fullScreenSourceRect matters a lot:

function onFullScreenHandler(e:MouseEvent):void
{
	// go fullscreen
	if (this.stage.displayState == StageDisplayState.FULL_SCREEN) {
		this.stage.displayState = StageDisplayState.NORMAL;
	} else {
		var screenRectangle:Rectangle = new Rectangle(0,0,my - width, -  my - height);
		stage.fullScreenSourceRect = screenRectangle;
		this.stage.displayState = StageDisplayState.FULL_SCREEN;
	}
}

If you set the rectangle to smaller than your document size it can make your text blurry.