Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

flash-rockt · 22-04-2010, 10:51

Hi Folks,

ich habe folgendes Anliegen: Ich habe eine Flash App erstellt, die über eine XML-Schnittstelle Text erhält. Dieser Text ist mit einer einfachen HTML Formatierung gestylt. Nehmen wir als Beispiel:

HTML-Code:

Ich bin ein <b>fetter Text</b>.

Diesen Text lese ich nun aus dem XML aus und fülle ein TextField. So weit so gut. Das TextField soll nun mit einem bestimmten Font (Nicht-Systemstandart) ausgegeben werden.

Also erstelle ich ein neues Schriftart-Symbol in der Bibliothek und hake 'Export für ActionScript' an. Wir nehmen als Bsp. Schriftart 'Helvetica Neue' - Stil '77 Bold Condensed'. Als Export Name gebe ich 'HelveticaNeueBold' ein.

Soviel zur Ausgangslage - hier das Problem:

Bei einer Zuweisung als TextFormat wird der gesamte Text bold angezeigt, er verliert also die Formatierung.

Bei einer Zuweisung mit Stylesheet wird die Formatierung erhalten, jedoch nicht der richtige (embedded) Font angezeigt, sondern eine Systemstandartschrift.

Hat jemand eine Idee, wie ich dieses Problem elegant lösen kann?

Hier nochmal beispielhaft der Code:

HTML-Code:

var helvetica:Font = new HelveticaNeueBold();
var textFromXML:String = 'Ich bin ein <b>fetter Text</b>.';


//Option A : TextFormat

var descFormat:TextFormat = new TextFormat();
	descFormat.font = helvetica.fontName;
	descFormat.size = 16;
	descFormat.align = 'left';
	descFormat.color = 0xffffff;

var desc:TextField = new TextField();
	desc.htmlText = textFromXML;
	desc.embedFonts = true;
	desc.setTextFormat(descFormat);


//Option B : StyleSheet

var body:Object = new Object();
	body.fontFamily = helvetica.fontName;
	body.fontSize = 16;
	body.textAlign = 'left';
	body.color = '#ffffff';
	
var style:StyleSheet = new StyleSheet();
	style.setStyle("body", body);
	
var desc2:TextField = new TextField();
	desc2.styleSheet = style;
	desc2.htmlText = '<body>'+textFromXML+'</body>';

Flashesjetzt · 22-04-2010, 13:03

Statt:

PHP-Code:

  desc2.htmlText = '<body>'+textFromXML+'</body>';

vielleicht so:

PHP-Code:

  desc2.htmlText = '<body>textFromXML</body>';

Flashesjetzt · 22-04-2010, 13:07

Ach nee sorry, vergiss es.

figure8 · 22-04-2010, 13:35

schau dir mal F*CSS|Flash's Missing CSS Parser an. jesse hat da was echt schönes gezaubert, was bei solchen sachen super anwendbar ist.

flash-rockt · 22-04-2010, 13:49

Danke - schaue ich mir gleich mal an.

flash-rockt · 22-04-2010, 14:54

Ich habe mir F*CSS nun mal ausgiebig angesehen. Das ist echt eine mächtige Komponente, danke für den Link.

Doch in meinem Fall hilft mir diese leider nicht weiter. F*CSS parst zwar CSS in AS3 Anweisungen, doch genau das Problem, dass ich habe, wird auch hier nicht abgedeckt

Hat jemand noch eine andere Idee?

(Alternative)

... wäre eigentlich nur, sich einen eigenen Parser zu bauen:

Step 1: Die Positionen aller HTML Tags ermitteln und in Arrays speichern
Step 2: setTextFormat über anfangIndex und endeIndex auf diese Bereich anwenden
... so müsste das doch wohl zu lösen sein ...

Aber noch hoffe ich ja auf den entscheidenden Tipp von euch

Dieses Problem kann doch nicht nur ich haben ... ?

SynSyn · 22-04-2010, 17:19

Das würde mich auch mal interessieren. ich habe nach zahlreichen Suchen immerhin eine Idee in welche Richtung das gehen könnte, aber noch nix gefunden das so auch tatsächlich funktioniert. Irgendwie soll man eben auch TextFormate für einzelne Schriftschnitte erstellen können und diese dann statt des <b> tags zusammen mit dem <font> tag verwenden.

Also wenn jemand hier den Durchblick hat, wie man mit embedded Fonts sowas bewerkstelligen kann...

flash-rockt · 22-04-2010, 19:22

Ich habe mir jetzt selbst eine Funktion geschrieben, um das Problem zu lösen. Diese erwartet ein TextField, ein Tag und ein Textformat. Alle Bereiche innerhalb der angegebenen Tags werden automatisch mit dem TextFormat gestylt.

Hier der Code, vielleicht hilft es ja dem ein oder anderen mit dem gleichen Problem:

(Code ist gekürzt um ihn hier zu posten, hoffentlich ohne Fehler :-)

HTML-Code:

//Instanzen der eingebetteten Schriften erzeugen
var helvetica:Font = new HelveticaNeueCond();
var helveticaBold:Font = new HelveticaNeueBold();


//TextFormate definieren
var textFormatNormal:TextFormat = new TextFormat();
	textFormatNormal.font = helvetica.fontName;
	textFormatNormal.size = 20;
	textFormatNormal.align = 'left';
	textFormatNormal.color = 0x000000;

var textFormatBold:TextFormat = new TextFormat();
	textFormatBold.font = helveticaBold.fontName;
	textFormatBold.size = 20;
	textFormatBold.bold = true;
	textFormatBold.align = 'left';
	textFormatBold.color = 0x000000;


//TextField erzeugen
var tf:TextField = new TextField();
	tf.width = 400;
	tf.multiline = true;
	tf.wordWrap = true;
	tf.autoSize = 'left';
	tf.htmlText = 'Ich bin ein <b>fetter</b> Text und hier kommt das <b>dicke</b> Ende';
	tf.embedFonts = true;
	tf.setTextFormat(textFormatNormal);
	tf = setTextFormatForHtml(tf,'b',textFormatBold);
	
	
//Funktion zum setzen der Textformate je HTML Tag
function setTextFormatForHtml(tf:TextField,tag:String,tfo:TextFormat):TextField{

	var htmlText:String = tf.htmlText;
	var normalText:String = tf.text;
	var searchIndex:int = 0;			
	var startIndex:int;
	var endIndex:int;
	var transStartIndex:int = 0;
	var transEndIndex:int = 0;
	var searchString:String;
	tag = tag.toUpperCase();
	
	while(startIndex!=-1){
		startIndex = htmlText.indexOf('<'+tag+'>',searchIndex);					
		if(startIndex>-1){
			startIndex+=tag.length+2;
			searchIndex = startIndex+1;
			endIndex = htmlText.indexOf('</'+tag+'>',searchIndex);
			searchString = htmlText.substring(startIndex,endIndex);
			transStartIndex = normalText.indexOf(searchString,transStartIndex);
			transEndIndex = transStartIndex + searchString.length;
			tf.setTextFormat(tfo,transStartIndex,transEndIndex);
		}
		else{
			trace(' ----> Keine weiteren Treffer.');
		}
	};				
	return tf;
}

Mr.Dauerfeuer · 11-05-2010, 10:05

Wenn du per HTML fetten und nicht fetten Text mischst, kann dieser nur dann eine eingebettete (nicht System) Schrift verwenden, wenn diese sowohl Schnitte für fett, als auch für nicht fett enthält.

Das erreicht man z.B. per Embed-Tag in Projekten die mit dem Flex-Compiler kompiliert werden.

PHP-Code:

  [Embed(source = 'somePath/Arial.ttf', fontName = '_Arial' ,fontFamily='_arial', mimeType = 'application/x-font', fontWeight = 'normal')] 

public static var _Arial : Class;

[Embed(source = 'somePath/Arial.ttf', fontName = '_Arial' ,fontFamily='_arial', mimeType = 'application/x-font', fontWeight = 'bold')] 

public static var _ArialBold : Class;

HTH

Frederik

SynSyn · 11-05-2010, 15:43

Zitat:

Zitat von Mr.Dauerfeuer

Wenn du per HTML fetten und nicht fetten Text mischst, kann dieser nur dann eine eingebettete (nicht System) Schrift verwenden, wenn diese sowohl Schnitte für fett, als auch für nicht fett enthält.

Das erreicht man z.B. per Embed-Tag in Projekten die mit dem Flex-Compiler kompiliert werden.

PHP-Code:

  [Embed(source = 'somePath/Arial.ttf', fontName = '_Arial' ,fontFamily='_arial', mimeType = 'application/x-font', fontWeight = 'normal')] 

public static var _Arial : Class;

[Embed(source = 'somePath/Arial.ttf', fontName = '_Arial' ,fontFamily='_arial', mimeType = 'application/x-font', fontWeight = 'bold')] 

public static var _ArialBold : Class;

HTH

Frederik

Cool - das funktioniert tatsächlich

Mir war gar nicht klar, dass Flash sich da quasi automatisch die Klasse mit dem richtigen Schriftschnitt holt ohne dass man da irgendwas zuweisen muss... Vielen Dank - ein ewiges Rätsel wurde soeben gelöst

andybrandy · 28-05-2010, 11:17

danke Mr.Dauerfetter!
endlich habe ich für dieses problem eine lösung gefunden!

DANKE!
funktioniert übrigens auch wenn man ein "font.swf" verwendet:

PHP-Code:

  [Embed( source="fonts.swf", fontFamily="Arial", fontName="Arial", fontWeight="normal" )]

public static var Arial:Class;

        

[Embed( source="fonts.swf", fontFamily="Arial", fontName="Arial", fontWeight="bold" )]

public static var ArialBold:Class;

Anwendung:
Wobei Ihr auch anstatt der ersten Zeile das "normale" anlegen eines TextFormates und eines Textfields vorstellen könnt.

PHP-Code:

  var tf:TextField = Static.createTextfield( Static.createTextFormat( Static.arial, 20, 0xffffff ), true );

tf.htmlText = "Cool <b>das ist echt FETT</b>";

flash-rockt · 31-05-2010, 11:46

Gibt es einen Weg das ganze auch ohne FLEX zu machen?

SynSyn · 31-05-2010, 11:58

Zitat:

Zitat von flash-rockt

Gibt es einen Weg das ganze auch ohne FLEX zu machen?

Ja - genau den selben!
Der Code hat doch nix mit Flex zutun - ist reines AS3!?

flash-rockt · 31-05-2010, 13:31

Also wenn ich versuche die Schnitte in beschriebener Art und Weise einzubinden, dann antwortet mir die Flash IDE:

Zitat:

Sie haben eine Funktion verwendet, für die das Flex SDK erforderlich ist: Embed-Metadaten

Daher die Frage, ob es auch noch anders geht?

medianetic · 08-07-2010, 17:33

Ja, geht auch in Flash CS5 ohne Flex-SDK und ohne [Embed-Tag] (Das ist das eigentliche Problem auf Zeitleisten). Hat mich ne gute Stunde gekostet, um das selbst rauszufinden, steht dann aber auch in meinem neuen Buch:

Für jeden Schriftschnitt machst du über das Fenster Schrifteinbettung eine Verknüpfung zu einer eigene Klasse. Dann wählst Du für das Textfeld den Bezeichner für den normalen Schnitt aus. Irgendwie (frag mich nicht wie) kann Flash dann den Zusammenhang herstellen und weiß dann das es bspw. für fetten Text die Klasse für den fetten Schriftschnitt nehmen soll. (Das gibt man ja nicht explizit an).

.oO Ich bin nur auf den Thread gekommen, weil mir das gerade aufgestoßen war und ich nach diesem Problem gesucht hatte.

22-04-2010, 10:51	#1 (permalink)
flash-rockt Neuer User Registriert seit: Jan 2007 Beiträge: 59	AS3 : Embedding Fonts - StyleSheet vs. TextFormat Hi Folks, ich habe folgendes Anliegen: Ich habe eine Flash App erstellt, die über eine XML-Schnittstelle Text erhält. Dieser Text ist mit einer einfachen HTML Formatierung gestylt. Nehmen wir als Beispiel: HTML-Code: Ich bin ein <b>fetter Text</b>. Diesen Text lese ich nun aus dem XML aus und fülle ein TextField. So weit so gut. Das TextField soll nun mit einem bestimmten Font (Nicht-Systemstandart) ausgegeben werden. Also erstelle ich ein neues Schriftart-Symbol in der Bibliothek und hake 'Export für ActionScript' an. Wir nehmen als Bsp. Schriftart 'Helvetica Neue' - Stil '77 Bold Condensed'. Als Export Name gebe ich 'HelveticaNeueBold' ein. Soviel zur Ausgangslage - hier das Problem: Bei einer Zuweisung als TextFormat wird der gesamte Text bold angezeigt, er verliert also die Formatierung. Bei einer Zuweisung mit Stylesheet wird die Formatierung erhalten, jedoch nicht der richtige (embedded) Font angezeigt, sondern eine Systemstandartschrift. Hat jemand eine Idee, wie ich dieses Problem elegant lösen kann? Hier nochmal beispielhaft der Code: HTML-Code: var helvetica:Font = new HelveticaNeueBold(); var textFromXML:String = 'Ich bin ein <b>fetter Text</b>.'; //Option A : TextFormat var descFormat:TextFormat = new TextFormat(); descFormat.font = helvetica.fontName; descFormat.size = 16; descFormat.align = 'left'; descFormat.color = 0xffffff; var desc:TextField = new TextField(); desc.htmlText = textFromXML; desc.embedFonts = true; desc.setTextFormat(descFormat); //Option B : StyleSheet var body:Object = new Object(); body.fontFamily = helvetica.fontName; body.fontSize = 16; body.textAlign = 'left'; body.color = '#ffffff'; var style:StyleSheet = new StyleSheet(); style.setStyle("body", body); var desc2:TextField = new TextField(); desc2.styleSheet = style; desc2.htmlText = '<body>'+textFromXML+'</body>';

22-04-2010, 13:03	#2 (permalink)
Flashesjetzt Neuer User Registriert seit: Aug 2008 Beiträge: 205	Statt: PHP-Code: `desc2.htmlText = '<body>'+textFromXML+'</body>';` vielleicht so: PHP-Code: `desc2.htmlText = '<body>textFromXML</body>';`

22-04-2010, 13:35	#4 (permalink)
figure8 lebt in stereo Registriert seit: Mar 2008 Ort: karlsruhe Beiträge: 1.093	schau dir mal FCSS\|Flash's Missing CSS Parser an. jesse hat da was echt schönes gezaubert, was bei solchen sachen super anwendbar ist. __________________ Flash-Junkie ≠ Musiker & Grafiker # Marvin Blase # Speaker, Author, Silly Billy. # @beautifycode

22-04-2010, 14:54	#6 (permalink)
flash-rockt Neuer User Registriert seit: Jan 2007 Beiträge: 59	*FCSS ist toll, hilft mir aber leider nicht weiter.** Ich habe mir FCSS nun mal ausgiebig angesehen. Das ist echt eine mächtige Komponente, danke für den Link. Doch in meinem Fall hilft mir diese leider nicht weiter. FCSS parst zwar CSS in AS3 Anweisungen, doch genau das Problem, dass ich habe, wird auch hier nicht abgedeckt Hat jemand noch eine andere Idee? (Alternative) ... wäre eigentlich nur, sich einen eigenen Parser zu bauen: Step 1: Die Positionen aller HTML Tags ermitteln und in Arrays speichern Step 2: setTextFormat über anfangIndex und endeIndex auf diese Bereich anwenden ... so müsste das doch wohl zu lösen sein ... Aber noch hoffe ich ja auf den entscheidenden Tipp von euch Dieses Problem kann doch nicht nur ich haben ... ?

11-05-2010, 10:05	#9 (permalink)
Mr.Dauerfeuer Gimbel Deluchs Registriert seit: Apr 2004 Ort: Wieder da! Beiträge: 153	fetten und nicht fetten Text mischen Wenn du per HTML fetten und nicht fetten Text mischst, kann dieser nur dann eine eingebettete (nicht System) Schrift verwenden, wenn diese sowohl Schnitte für fett, als auch für nicht fett enthält. Das erreicht man z.B. per Embed-Tag in Projekten die mit dem Flex-Compiler kompiliert werden. PHP-Code: `[Embed(source = 'somePath/Arial.ttf', fontName = '_Arial' ,fontFamily='_arial', mimeType = 'application/x-font', fontWeight = 'normal')] public static var _Arial : Class; [Embed(source = 'somePath/Arial.ttf', fontName = '_Arial' ,fontFamily='_arial', mimeType = 'application/x-font', fontWeight = 'bold')] public static var _ArialBold : Class;` HTH Frederik

22-04-2010, 13:07	#3 (permalink)
Flashesjetzt Neuer User Registriert seit: Aug 2008 Beiträge: 205	Ach nee sorry, vergiss es.

22-04-2010, 13:49	#5 (permalink)
flash-rockt Neuer User Registriert seit: Jan 2007 Beiträge: 59	Danke - schaue ich mir gleich mal an.

22-04-2010, 17:19	#7 (permalink)
SynSyn Neuer User Registriert seit: Mar 2009 Beiträge: 77	Das würde mich auch mal interessieren. ich habe nach zahlreichen Suchen immerhin eine Idee in welche Richtung das gehen könnte, aber noch nix gefunden das so auch tatsächlich funktioniert. Irgendwie soll man eben auch TextFormate für einzelne Schriftschnitte erstellen können und diese dann statt des <b> tags zusammen mit dem <font> tag verwenden. Also wenn jemand hier den Durchblick hat, wie man mit embedded Fonts sowas bewerkstelligen kann...

28-05-2010, 11:17	#11 (permalink)
andybrandy Neuer User Registriert seit: Jul 2009 Beiträge: 1	danke Mr.Dauerfetter! endlich habe ich für dieses problem eine lösung gefunden! DANKE! funktioniert übrigens auch wenn man ein "font.swf" verwendet: PHP-Code: `[Embed( source="fonts.swf", fontFamily="Arial", fontName="Arial", fontWeight="normal" )] public static var Arial:Class; [Embed( source="fonts.swf", fontFamily="Arial", fontName="Arial", fontWeight="bold" )] public static var ArialBold:Class;` Anwendung: Wobei Ihr auch anstatt der ersten Zeile das "normale" anlegen eines TextFormates und eines Textfields vorstellen könnt. PHP-Code: `var tf:TextField = Static.createTextfield( Static.createTextFormat( Static.arial, 20, 0xffffff ), true ); tf.htmlText = "Cool <b>das ist echt FETT</b>";` Geändert von andybrandy (28-05-2010 um 11:20 Uhr)

31-05-2010, 11:46	#12 (permalink)
flash-rockt Neuer User Registriert seit: Jan 2007 Beiträge: 59	Gibt es einen Weg das ganze auch ohne FLEX zu machen?

08-07-2010, 17:33	#15 (permalink)
medianetic Neuer User Registriert seit: Oct 2004 Ort: Berlin Beiträge: 478	Ja, geht auch in Flash CS5 ohne Flex-SDK und ohne [Embed-Tag] (Das ist das eigentliche Problem auf Zeitleisten). Hat mich ne gute Stunde gekostet, um das selbst rauszufinden, steht dann aber auch in meinem neuen Buch: Für jeden Schriftschnitt machst du über das Fenster Schrifteinbettung eine Verknüpfung zu einer eigene Klasse. Dann wählst Du für das Textfeld den Bezeichner für den normalen Schnitt aus. Irgendwie (frag mich nicht wie) kann Flash dann den Zusammenhang herstellen und weiß dann das es bspw. für fetten Text die Klasse für den fetten Schriftschnitt nehmen soll. (Das gibt man ja nicht explizit an). .oO Ich bin nur auf den Thread gekommen, weil mir das gerade aufgestoßen war und ich nach diesem Problem gesucht hatte. __________________ Adobe Flash CS5: Das Handbuch Webdesign und Webentwicklung: medianetic Gesendet von meinem Windows-PC. Blog-relaunch: http://www.blog.medianetic.de Geändert von medianetic (08-07-2010 um 17:37 Uhr)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Font embedding aus externer swf	Hans meisa	ActionScript 3	1	27-11-2009 16:08
font embedding - polnische sonderzeichen	elbjoern	Flash CS3 Professional	1	25-03-2009 18:25
embedding assets in flash CS3 ...	pranko	ActionScript 3	1	14-06-2008 15:56
stylesheet und embedded fonts	bluelemonade	Flash MX 2004	2	07-04-2006 12:01
Problem mit Schrift-Embedding ..	Pixelex	Flash MX 2004	3	31-08-2004 18:19