Schriften für die neue Text Engine des Flash Player 10 einbetten

/ Autor: Jürgen, 31 Jul 2009

Eines der Dinge die mir in der Vergangeheit am meisten Zeit und Nerven gekostet haben im Bezug auf Flex und Flash war die Darstellung von Text. Vor allem wenn das Screendesign wieder mal eine Schrift vorgesehen hat, die keine Systemschrift war. Und selbst dann musste die Schrift eingebettet werden um Anti-Aliasing, Rotation oder Alpha darauf anwenden zu können. Das alles soll sich nun mit der neuen Text Engine des Flash Player 10 ändern. Schauen wir uns das mal genauer an.

Seit Flash CS4, dem Flex SDK 3.2 und AIR 1.5 kann schon das neue Flash Text Layout Framework (TLF) verwendet werden, siehe mein Beitrag von 3. April. Dieses benutzt die Text Engine des Flash Players 10.
Die neuen Spark Komponenten in Flex 4 (Codename Gumbo) (siehe Beitrag von Artur) benutzen auch schon diese neuen Funktionalität.

Doch jetzt zum eigenlichen Thema, das einbetten von Schriften: Wie schon gesagt, müssen Systemschriften nicht mehr eingebettet werden um Anti-Aliasing, Rotation oder Alpha verwenden zu können. Aber wenn eine Schrift verwendet werden soll, von der nicht auszugehen ist, dass sie bei jedem der Benutzer auf dem Rechner installiert ist, muss diese natürlich nach wie vor ins swf eingebettet werden.
Es gibt nun zwei Arten Schriften einzubetten: Um Schriften für die “alten” Halo-Komponenten verwenden zu können muss die alte Art und Weise “DefineFont3″ verwendet werden. “DefineFont4″ heißt die neuen Methode, die für Schriften verwendet werden muss die im Text Layout Framwork oder in den neuen Spark-Komponenten benutzt werden sollen.

Beispiel

<fx:Style>

	@namespace s "library://ns.adobe.com/flex/spark";
	@namespace mx "library://ns.adobe.com/flex/halo";

	/* Einbetten für Halo Komponenten im DefineFont3 Format.
	    Heir ist alles wie gehabt */
	@font-face {
		src: url("arial.ttf");
		fontFamily: "ArialDF3";
	}

	/* Einbetten für Spak Komponenten und TLF im DefineFont4 Format.
	    Hier muss cff auf true gesetzt werden */
	@font-face {
		src: url("arial.tff");
		fontFamily: "ArialDF4";
		cff: true;
	}

	/* Das DataGrid wurde in Flex 4 (Beta) nicht überarbeitet
	    es ist also noch eine alte Halo Komponente und
	    braucht deswegen die Schrift im DefineFont3 Format */
	mx|DataGrid {
		fontFamily: "ArialDF3";
	}

	/* Das Texteingabefeld wurde für Flex 4 überarbeitet
	    ist also nun eine Spark Komponente und braucht deshalb
	    die Schrift im DefineFont4 Format */
	s|TextInput {
		fontFamily: "ArialDF4";
	}

</fx:Style>

Eingebettete Schriften im Text Layout Framwok verwenden
Um die eingebetteten Schriften im TLF zu verwenden müssen diese erstens im DefineFont4 Format eingebettet werden und zweitens muss bei dem verwendeten CharacterFormat “fontLookup” sowie “renderingMode” auf “cff” gesetzt sein:

var cf:CharacterFormat = new CharacterFormat();
cf.fontFamily = "ArialDF4";
cf.fontLookup = FontLookup.EMBEDDED_CFF;
cf.renderingMode = flash.text.engine.RenderingMode.CFF;
textFlow.characterFormat = cf;
textFlow.flowComposer.updateAllContainers();

Fazit
Es ist wie so oft, einiges wird besser, doch eine Neuerung macht nicht alles perfekt. Wird nämlich die gleiche Schrift für Spark und auch Halo Komponenten verwendet, muss sie zweimal eingebettet werden was zu größeren SWFs führt. Adobe ist wohl gerade dabei dafür eine Lösung zu finden, es ist ja noch Zeit bis zum endgültigen Release von Flex 4.
Beim Einbetten von Schriften ist es aber grundsätzlich sinnvon den UnicodeRange auf die Zeichen zu begrenzen die benötigt werden. (siehe Beitrag von Alex)
Eine andere Möglichkeit ist die Schriften zur Laufzeit zu laden (siehe mein Beitrag von 24. Juli)

This entry was posted on Freitag, Juli 31st, 2009 at 7:25 and is filed under Flash, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.