PDA

View Full Version : Projects fonts in AS 3.0


ven
09-06-2006, 03:55 PM
Earlier in my projects, I have used the Flash IDE and the options "Anti-alias for readability" and "Bitmap text (no anti-alias)". This have worked excellent in Flash 8.

Now in AS 3.0 I want to replicate these features with a codeapproach, which havent been an easy task sofar, and there is not much information on the web about this. At the same time the examples in the Flex 2 documentation full of errors. (i.e. the one at TextRender)

My apologies if this thread is similar to the one i posted some days ago, but this is so much more in depth (and maybe despreate :rolleyes: ), and i couldnt edit the title in it, so i requested a delete on it.


Here is some approaches that i have tested, and only gotten sofar with:

1: Embedding TTF fontfiles into the main swf
2: Embedding Flash 8 SWFfile with fonts into the main swf (http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000795.html)
3: Sharing fonts from Flash 9 Beta IDE
4: Used CSMSettings on the fonts ive been able to get into advanced antialiasing


What do i want to achieve?

- Crisp nonantialised fonts (but can be embeded as outlined fonts like bitmap text.
- Advanced antialiased fonts
- Formatable (bold, italic, the usual htmlformatting)
- Can be masked
- Fonts included in swf, to ensure the correct font is viewing



What is the problems? Well there are several, but the biggest issues afaik:

- I cant seem to use fontFamily with embedded fonts, so they wont get formatted with i.e. htmlText <b> <i> etc.

- I have this theory that i can replicate "Bitmap text" with the manipulation of CSMSettings. However, allthough ive been able to apply CSMSettings, i seems to ignore the values i set in insideCutoff and outsideCutoff. It always looks the same.

I have uploaded a rar-file with the files ive experimented with. (http://www.frontgraph.no/project_fonts.rar)



Here is code used, if anyone should want to just browse it quickly:

package {

/* Members */
import flash.display.*;
import flash.text.*;

/* Movie settings */
[SWF(width="800", height="600", frameRate="50", backgroundColor="#FFFFFF")]

/* Class */
public class BitmapAlias extends Sprite {

/* Embed TTF-fonts*/
[Embed(source="verdana.ttf", fontName="_verdana_regular", fontFamily="_verdana")]
public var verdanaClass:Class;
[Embed(source="verdanab.ttf", fontName="_verdana_bold", fontFamily="_verdana")]
public var verdanaBoldClass:Class;
[Embed(source="verdanai.ttf", fontName="_verdana_italic", fontFamily="_verdana")]
public var verdanaItalic:Class;
[Embed(source="verdanaz.ttf", fontName="_verdana_bold_italic", fontFamily="_verdana")]
public var verdanaBoldItalicClass:Class;


/* Embed a font for CSMSetting manipulation */
[Embed(source="verdana.ttf", fontName="_verdana_CSM", fontFamily="_verdana_fam_CSM")]
private var verdanaCSMClass:Class;


/* Embed fonts through Flash 8 as shown on:
http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000795.html */
[Embed(source="_verdana.swf", fontName="Verdana")]
public var verdanaFromSWF:Class;


/* Properties */
private var fontFamily:String = "_verdana";
private var fontName:String = "_verdana_regular";
private var myFormat:TextFormat;
private var myTextfield:TextField;
private var i:int;


/* Constructor */
public function BitmapAlias() {
i++;



/***\
* Using fonts from TTFfile:
\***/

var toggleTTFFont:String = fontName;
//toggleTTFFont:String = fontFamily;


/* No anti-alias, no outline */
var deviceTitle:TextField = createTitleField("From TTF: Device (no embed):");
var deviceField:TextField = createTextField(toggleTTFFont);
i++;

/* Plain anti-alias */
var embedTitle:TextField = createTitleField("From TTF: Embed:");
var embedField:TextField = createTextField(toggleTTFFont);
embedField.embedFonts = true;
embedField.antiAliasType = AntiAliasType.NORMAL;
i++;

/* Anti-alias advanced */
var embedAdvancedTitle:TextField = createTitleField("From TTF: Embed Advanced:");
var embedAdvancedField:TextField = createTextField(toggleTTFFont);
embedAdvancedField.embedFonts = true;
embedAdvancedField.antiAliasType = AntiAliasType.ADVANCED;
i++;

/* Anti-alias with CSMSettings applied */
var embedCSMTitle:TextField = createTitleField("From TTF: Manipulated by CSMSettings:");
var embedCSMField:TextField = createTextField("_verdana_CSM");
embedCSMField.embedFonts = true;
embedCSMField.antiAliasType = AntiAliasType.ADVANCED;
var antiAliasEntry:CSMSettings = new CSMSettings(12, 3, -1);
var verdanaTable:Array = new Array(antiAliasEntry);
TextRenderer.setAdvancedAntiAliasingTable("_verdana_CSM", FontStyle.REGULAR, TextColorType.DARK_COLOR, verdanaTable);
i++;



/***\
* Using fonts from SWFfile:
\***/

i++;
var toggleSWFFont:String = "Verdana";



/* Plain */
var deviceSwfTitle:TextField = createTitleField("From SWF: Device: (This will use the systemfont *if* its installed, else nothing)");
var deviceSwfField:TextField = createTextField(toggleSWFFont);
i++;

/* Embed normal */
var embedSwfTitle:TextField = createTitleField("From SWF: Embed");
var embedSwfField:TextField = createTextField(toggleSWFFont);
embedSwfField.embedFonts = true;
embedSwfField.antiAliasType = AntiAliasType.NORMAL;
i++;

/* Embed advanced */
var embedAdvancedSwfTitle:TextField = createTitleField("From SWF: Embed advanced");
var embedAdvancedSwfField:TextField = createTextField(toggleSWFFont);
embedAdvancedSwfField.embedFonts = true;
embedAdvancedSwfField.antiAliasType = AntiAliasType.ADVANCED;


/* Toggle CSM settings for Verdana anti-aliased text. It results in another
type of result then CSMSettings for the TTF-font */

//var antiAliasEntrySWF:CSMSettings = new CSMSettings(50, 10, -10);
//var verdanaTableSWF:Array = new Array(antiAliasEntrySWF);
//TextRenderer.setAdvancedAntiAliasingTable("Verdana", FontStyle.REGULAR, TextColorType.DARK_COLOR, verdanaTableSWF);

i++;


}

/* Methods */
public function createTextField(fnt:String):TextField {
var field:TextField = new TextField();
field.defaultTextFormat = getTextFormat(fnt);
field.border = true;
field.y = i*20; i++;
field.x = 30;
field.width = 300;
field.height = 20;
field.htmlText = "Lorem <b>ipsum</b> dolor <i>sit</i> amet";
addChild(field);
return field;
}
public function createTitleField(ttl:String):TextField {
var field:TextField = new TextField();
field.y = i*20; i++;
field.x = 30;
field.width = 500;
field.height = 20;
field.text = ttl;
addChild(field);
return field;
}
public function getTextFormat(fnt:String):TextFormat {
var format:TextFormat = new TextFormat();
//format.bold = true;
format.font = fnt;
format.size = 12;
return format;
}
}
}



Here is the result swf (http://www.frontgraph.no/BitmapAlias.swf)


Is what im trying to do impossible? Ive been working two weeks with this now, searching everywhere on the web and im running out of ideas on how to try new things and wich searchterms to use...

blockage
09-07-2006, 02:20 AM
Not sure this quite what you wanted but it might give you another angle. I've managed to get bitmap fonts into my Flex 2 projects by embedding textFields (with fonts set to bitmap) into a Flash 9a swf and then loading it at run time (with a Loader). To get at each textField with AS I also have to declare them in the loaded swf's document class and recast the loader.content object to the same class; or cheat and use bracket access.

ven
09-07-2006, 12:19 PM
Fresh angels are always good :)

Your method works excellent, except that i need to duplicate the TextField that is loaded (or duplicate the imported TextField-instance settings somehow to the textfields created).


private function onMovieComplete(event:Event):void {
var myLoadedMovie:MovieClip = movieLoader.content as MovieClip;
myLoadedMovie.mask = setTextMask();
addChild(myLoadedMovie);
myLoadedMovie.myTextField.htmlText = "<b>Hello</b> <i>World</i>";
}


The example above returns either bitmap text or advanced anti-aliased fonts (depending on the formatting i set in the source swf) as "Hello World". I can mask it, format it and addChild the textfield where i want etc.

Tink
09-07-2006, 01:19 PM
http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000796.html might be useful

blockage
09-07-2006, 01:43 PM
I think the core of Ven's problem is, you can't get at all text rendering options using actionscript or mxml. There's no code option for embedding fonts as bitmap text for example. Also, in the test that I ran - when I tried to follow the livedocs example, but set the text rendering to "bitmap" in the flashtype.swf's textFields, embedding the swf fails.

blockage
09-07-2006, 01:51 PM
To get around the duplication - one option might be to use a single loaded textfield which you use as an off screen buffer and then gerenerate bitmapdata (textsnapshot?) to display the actually text? The text wouldn't be selectable but would be really fast for animation...

ven
09-07-2006, 03:04 PM
I have managed to get duplication of textfield working now with help of senoculars examples at kirupas.

duplicateDisplayObject (http://www.kirupa.com/forum/showthread.php?p=1939827#post1939827)


much much love to everyone <3

ill make an example tomorrow