Share
Wir werden uns ansehen, wie HTML-formatierter Text, der aus XML geladen wurde, im Stil eines externen CSS-Stylesheets mit zur Laufzeit geladenen Schriftarten angezeigt wird. Wir beherrschen auch die Inline-Bildplatzierung über HTML
Es ist sicherlich einfach, alle Assets direkt in der Flash-Quelldatei selbst zu behalten, und manchmal ist dies die beste Lösung. Es gibt jedoch einige gute Gründe, um so viel Inhalt wie möglich von Ihrem Flash-Dokument getrennt zu halten, oder sogar, dass Ihre Flash-Quelle ausschließlich aus ActionScript besteht.
Da wir mit einer Vielzahl von Assets arbeiten werden, ist es hilfreich, eine gut organisierte Dateiverzeichnisstruktur einzurichten. Zuerst erstellen wir ein Projektverzeichnis "HTMLTextBlock". Fügen Sie darin einen "Quell" -Ordner und einen "Bereitstellungs" -Ordner hinzu. Im bereitstellen, Unsere SWF-Datei befindet sich auf der obersten Ebene und enthält Ordner für jede Art von Inhalt. In dieser Demo erstellen wir eine SWF-Datei, die Schriftarten, CSS, XML und ein Bild lädt. Der Quellordner enthält alle unsere .fla- und .as-Dateien, die wir später erstellen werden. Im Moment sollte Ihr Projektverzeichnis so aussehen:
Bevor Sie Schriftarten in Ihre Website einbetten, ist es wichtig, die Lizenzierung von Schriftarten zu kennen. Nur weil Sie eine Schriftart installiert haben, selbst wenn Sie über Rechte zum Drucken verfügen, bedeutet dies nicht, dass Sie die Berechtigung haben, sie online zu verwenden. Weitere Informationen zur Lizenzierung von Schriftarten finden Sie in diesem Themeforest-Artikel.
In diesem Lernprogramm verwenden wir zwei Schriftarten, eine für die Überschrift und eine für den Haupttext. Ein guter Ort, um qualitativ hochwertige Open-Source-Schriften zu finden, ist das Google Font Directory. Sie können die Zeichensatzdateien nicht direkt von dort herunterladen, sie können jedoch bei einer Websuche leicht gefunden werden. Font Squirrel und Typekit sind zwei weitere hervorragende Ressourcen für hochwertige Schriftarten.
Suchen Sie bei der Auswahl einer Überschriftenschrift nach einem Stil, der die Persönlichkeit Ihres Designs zum Ausdruck bringt. Für den Haupttext ist die Lesbarkeit sehr wichtig. Verwenden Sie daher eine Schrift, die bei kleinen Größen gut angezeigt wird. Wählen Sie außerdem eine Schriftfamilie mit fetten, kursiven und fetten kursiven Gesichtern. Für dieses Tutorial verwenden wir die Schrift Lobster von Pablo Impallari für Überschriften und die Schriftfamilie Droid Serif von Steve Matteson für Absätze.
Schnelle Online-Suchen zeigen, wo wir die Lobster-Schrift und die Droid Serif-Schriftfamilie herunterladen können. In unserer Quelle Erstellen Sie einen neuen Ordner "gedownloadete Schriftarten" und legen Sie die Schriftartendateien dort ab.
Aktivieren Sie die Schriftarten auf Ihrem System. Öffnen Sie zwei neue ActionScript 3.0 Flash-Dokumente, eines für jede Schrift, und speichern Sie sie im Quelle Verzeichnis. Wir beginnen mit der Überschriftenschriftart. Wählen Sie im Bibliotheksfenster "Neue Schrift…" und in der Familie Dropdown auswählen Hummer 1.4. Geben Sie unter Name "Lobster" ein. Zum Zeichenbereiche, prüfen Alles. Wenn Sie eine Schriftart verwenden, bei der Sie wissen, dass Sie bestimmte Zeichen nicht verwenden, können Sie wählen, ob Sie eine Untermenge von Glyphen aus der Schriftart einbetten möchten, um die Dateigröße der SWF-Datei zu verringern.
Wechseln Sie als Nächstes zur Registerkarte ActionScript. Unter Verknüpfung, wählen Export für ActionScript. Wenn Sie das tun, Export in Bild 1 wird geprüft und die Klasse und Basisklasse Bezeichner werden ausgefüllt. Klicken Sie auf Erledigt. Wenn Sie eine Warnung erhalten, dass die Klassendefinition nicht gefunden wurde, ignorieren Sie sie.
Deaktivieren Sie als Nächstes im Bereich Veröffentlichungseinstellungen die Option HTML Kontrollkästchen und in der Blitz Feld das Ziel Schriftarten Ordner in der bereitstellen Verzeichnis durch Eingabe von "… /deploy/fonts/Lobster.swf". Dies ist alles, was erforderlich ist, um eine Schrift in eine SWF-Datei einzubetten.
Wenn Sie jedoch die SWF-Datei in eine andere SWF-Datei laden und zur Laufzeit eingebettete Schriftarten verwenden möchten, müssen Sie die Schrift registrieren. Daher müssen wir im Bedienfeld Aktionen zu Bild 1 auf der Timeline einen Zeilencode hinzufügen:
Font.registerFont (Lobster);
Jetzt steht unsere Schriftart für alle Flash-Dokumente zur Verfügung, die die SWF-Datei laden. Wir könnten hier erledigt werden, aber wir möchten unsere Arbeit überprüfen und, was noch wichtiger ist, den korrekten Namen der Schriftfamilie für die Verwendung in unserem CSS erhalten. Fügen Sie weiteren Code hinzu.
Accentsconagua
var embeddedFonts: Array = Font.enumerateFonts (false); für jeden (var font: Font in embeddedFonts) trace ("Font Embedded:" + font.fontName); Starten Sie die Veröffentlichungsvorschau, und die folgende Meldung wird im Ausgabeprotokoll angezeigt. Notieren Sie sich den Namen der Schriftart. Wir werden es später brauchen.
Eingebettete Schrift: Lobster 1.4 Eingebettete Schrift: Lobster 1.4
Sie fragen sich vielleicht, warum wir zwei Trace-Anweisungen sehen. Das ist wegen registerFont () Methode, die die Schriftart ein zweites Mal einbettet.
Font.registerFont (DroidSerifRegular); Font.registerFont (DroidSerifBold); Font.registerFont (DroidSerifItalic); Font.registerFont (DroidSerifBoldItalic); var embeddedFonts: Array = Font.enumerateFonts (false); für jeden (var font: Font in embeddedFonts) trace ("Font Embedded:" + font.fontName + "" + font.fontStyle); Als Nächstes erstellen wir eine SWF-Datei für die Hauptteilkopie. Diesmal integrieren wir vier Schriftarten, eine für jeden Stil. Wählen Sie in unserem zweiten Flash-Dokument erneut im Bibliotheksfenster aus Neue Schrift… Wählen Sie in der Dropdown-Liste Familie die Option Droid Serif aus, und wählen Sie unter Stil die Option Normal aus. Geben Sie "DroidSerifRegular" in das Feld Name ein und denken Sie daran, es festzulegen Export für ActionScript. Wiederholen Sie dann die gleichen Schritte für die Zeichenbereiche und die Registerkarte ActionScript. Wiederholen Sie diesen Vorgang für die fetten, kursiven und kursiven fetten Gesichter. Im Aktionsbereich verwenden wir einen ähnlichen Code wie für die Lobster-Schriftart.
Führen Sie die Veröffentlichungsvorschau aus. Dieses Mal werden Trace-Meldungen für jeden der Droid Serif-Schriftarten angezeigt. Wenn weniger als acht angezeigt werden, überprüfen Sie die Schriftarteinstellungen im Bedienfeld „Bibliothek“, da keine der Schriftartoberflächen eingebettet wird. Notieren Sie sich noch einmal den Namen der Schriftart aus dem Ausgabeprotokoll.
Schrift eingebettet: Droid Serif regular Schrift eingebettet: Droid Serif fett Schriftart eingebettet: Droid Serif kursiv Schriftart eingebettet: Droid Serif boldItalic Schriftart eingebettet: Droid Serif kursiv Schriftart eingebettet: Droid Serif fett eingebettet: Droid Serif normal eingebettet: Droid Serif boldItalic
Veröffentlichen Sie nun die Droid Serif-Schriftart in "… /deploy/fonts/DroidSerif.swf", und wir sollten jetzt zwei SWFs für Schriftarten haben, Lobster.swf und DroidSerif.swf, in dem setze / fonts Verzeichnis.
Das nächste Asset, das wir erstellen werden, ist eine XML-Datei. Das XML besteht aus einem Element: einem Block mit HTML-formatiertem Text, der aus einer Überschrift und einem Absatz besteht, die mit Standard-HTML-Tagging erstellt wurden.
Damit Flash den HTML-Code als eine XML-Element-Entität lesen kann, muss er in einem CDATA-Wrapper enthalten sein. CDATA wird in XML-Dokumenten verwendet, um anzugeben, dass ein Inhaltsabschnitt als Zeichendaten und nicht als Markup analysiert werden soll.
Anpassbares, HTML-formatiertes TextField mit Runtime Font Embedding & CSS-Styling Dies ist ein Beispiel für ein Textfeld, das ein Inline-Bild enthält. Der Text wurde aus einer XML-Datei geladen und ist mit einem externen CSS-Stylesheet gestaltet. Die Droid Serif-Schriftfamilie, auf die von css verwiesen wird, wurde zur Laufzeit geladen. Die für Droid Serif verfügbaren Stile sind Fett gedruckt, kursiv und Fett Kursiv. Droid Serif wurde von Steve Matteson erstellt. Die Überschrift-Schriftart Lobster wurde von Pablo Impallari erstellt.
]]>
Speichern Sie diese Datei als "content.xml" in der xml Ordner in der bereitstellen Verzeichnis
Jetzt erstellen wir CSS, um den HTML-Code zu gestalten. Wenn wir unser HTML betrachten, können wir sehen, dass wir Styling erstellen müssen h1, p und ein. Der Text innerhalb der fetten und kursiven Tags (b und ich) wird automatisch formatiert, da diese Stile in unserer Absatz-Schriftfamilie vorhanden sind. Bitte beachten Sie, dass Flash nur einen Teil der CSS-Eigenschaften unterstützt. Weitere Informationen finden Sie im ActionScript 3.0 Referenzhandbuch.
Es ist besonders wichtig, dass wir den korrekten Namen der Schriftfamilie im CSS verwenden. Stellen Sie sicher, dass Sie den Namen der Schriftart verwenden, die bei der Veröffentlichung der Schriftdokumente im Ausgabeprotokoll angezeigt wurde (Hummer 1.4 und Droid Serif).
h1 Schriftfamilie: Lobster 1.4; Schriftgröße: 24; Farbe: # 990033; p font-family: Droid Serif; Schriftgröße: 14; Farbe: # 333333; führende: 4; a color: # 000000; Textdekoration: Unterstrichen;
Speichern Sie diese Datei als "styles.css" in der css Ordner in der bereitstellen Verzeichnis
Erstellen Sie eine neue Flash-Datei und speichern Sie sie als "HTMLTextBlockExample.fla" im Quelle Verzeichnis. Richten Sie im Bereich Einstellungen für Veröffentlichungen unser aus bereitstellen Mappe. Zum HTML, Verwenden Sie "… /deploy/index.html" anstelle des Standardnamens. Erstellen Sie eine neue .as-Datei - "HTMLTextBlockExample.as" - als Dokumentklasse. Weitere Informationen zu Dokumentklassen finden Sie in diesem Schnelltipp..
package import flash.display.MovieClip; public class HTMLTextBlockExample erweitert MovieClip öffentliche Funktion HTMLTextBlockExample (): void
Als Nächstes laden wir die von uns erstellten SWFs für Schriftarten in unser Flash-Dokument. Lassen Sie uns zwei Variablen erstellen. Einer wird ein sein Array der URL-Strings für jede SWF-Schriftart und die andere wird eine int Dadurch wird nachverfolgt, wie viele Schriftarten geladen wurden. Dann erstellen wir verschiedene Methoden für das Laden.
package import flash.display.Loader; import flash.display.MovieClip; import flash.events.Event; import flash.events.IOErrorEvent; import flash.net.URLRequest; public class HTMLTextBlockExample erweitert MovieClip public var fonts: Array / * of String * / = ["fonts / DroidSerif.swf", "fonts / Lobster.swf"]; public var fontsLoaded: int = 0; öffentliche Funktion HTMLTextBlockExample (): void loadFonts (); private Funktion loadFonts (): void for each (var fontURL: Zeichenfolge in Schriftarten) var fontLoader: Loader = new Loader (); fontLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, onFontLoaded); fontLoader.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, onFontLoadError); fontLoader.load (neue URLRequest (fontURL)); private Funktion onFontLoadError (Ereignis: IOErrorEvent): void trace ("ERROR: Schriftart konnte nicht gefunden werden" + event.target.loaderURL); private Funktion onFontLoaded (Ereignis: Ereignis): void fontsLoaded ++; if (fontsLoaded == fonts.length) onFontsLoadComplete (); private Funktion onFontsLoadComplete (): void trace (fonts.length + "Schriftarten wurden geladen"); Führen Sie die Veröffentlichungsvorschau aus, und stellen Sie sicher, dass beide Schriftarten geladen sind.
Das Laden der XML- und CSS-Dateien verläuft ähnlich wie das Laden der Schriftarten. Zuerst müssen wir einige neue Klassen importieren.
import flash.net.URLLoader; importiere flash.text.StyleSheet;
Wir werden auch ein neues erstellen StyleSheet Variable, die die Styling-Eigenschaften enthält, die in der CSS-Datei analysiert werden.
public var textStyleSheet: StyleSheet;
Nun fügen wir die Methoden zum Laden der Assets hinzu.
private Funktion onFontsLoadComplete (): void trace (fonts.length + "Schriftarten wurden geladen"); loadCSS (); private Funktion loadCSS (): void var loader: URLLoader = neuer URLLoader (); loader.addEventListener (Event.COMPLETE, onCSSLoadComplete); loader.load (neue URLRequest ("css / styles.css")); private Funktion onCSSLoadComplete (Ereignis: Ereignis): void textStyleSheet = new StyleSheet (); textStyleSheet.parseCSS (event.target.data); loadXML (); private Funktion loadXML (): void var loader: URLLoader = neuer URLLoader (); loader.addEventListener (Event.COMPLETE, onXMLLoadComplete); loader.load (neue URLRequest ("xml / content.xml")); private Funktion onXMLLoadComplete (event: Event): void trace (XML (event.target.data) .toXMLString ()); Führen Sie die Veröffentlichungsvorschau aus, und Sie sehen das XML im Ausgabeprotokoll.
Das Anzeigen von HTML-formatiertem Text ist etwas, was Sie oft tun sollten. Erstellen Sie also eine Klasse, die wir immer wieder verwenden können. Öffnen Sie eine neue ActionScript-Datei und speichern Sie sie als "HTMLTextBlock.as" im Quelle Verzeichnis.
package import flash.display.Sprite; importiere flash.text.StyleSheet; importiere flash.text.AntiAliasType; import flash.text.TextField; import flash.text.TextFieldAutoSize; Die öffentliche Klasse HTMLTextBlock erweitert Sprite // Breite von htmlTextField. Die Standardeinstellung beträgt 550 Pixel. public var blockWidth: int = 550; // StyleSheet für das HTML-Textfeld. public var textStyleSheet: StyleSheet = neues StyleSheet (); // Enthält den HTML-formatierten Text. private var htmlTextField: TextField = new TextField (); öffentliche Funktion HTMLTextBlock () htmlTextField.embedFonts = true; htmlTextField.wordWrap = true; htmlTextField.multiline = true; htmlTextField.condenseWhite = true; htmlTextField.antiAliasType = AntiAliasType.ADVANCED; addChild (htmlTextField); public function setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText;
Wie Sie sehen, hat unsere Klasse drei Variablen. Die private Variable htmlTextField enthält HTML-formatierten Text. Die öffentliche Variable Blockbreite steuert die Breite von htmlTextField, und textStyleSheet enthält den CSS-Stil, auf den angewendet wird htmlTextField. Im Konstruktor legen wir Eigenschaften für fest htmlTextField und fügen Sie es der Anzeigeliste hinzu. Zuletzt schaffen wir setHTML () zum Einfügen von HTML-formatiertem Text htmlTextField.
Nun, da wir eine benutzerdefinierte Klasse zum Anzeigen von HTML-Text haben, verwenden wir sie. Beginnen Sie mit dem Ändern onXMLLoadComplete () XML-Daten als Zeichenfolge an eine neue Methode senden, die verwendet wird HTMLTextBlock um das HTML anzuzeigen.
private Funktion onXMLLoadComplete (Ereignis: Ereignis): void // xml aus Ereigniszieldaten abrufen var xml: XML = XML (event.target.data); // Konvertiere das XML in einen String var xmlString: String = xml; // xml-String an die displayHTML-Methode senden displayHTML (xmlString); private Funktion displayHTML (htmlText: String): void var htmlTextBlock: HTMLTextBlock = new HTMLTextBlock (); // Setze die Breite und das Styling htmlTextBlock.blockWidth = 420; htmlTextBlock.textStyleSheet = textStyleSheet; // Sende den HTML-String an die HTMLTextBlock-Klasse htmlTextBlock.setHTML (htmlText); // Position setzen und zur Stufe hinzufügen htmlTextBlock.x = 20; htmlTextBlock.y = 10; addChild (htmlTextBlock);
Das Ergebnis:
Als Nächstes fügen wir unserem Textblock ein Bild hinzu. Sie können das Bild in den Quelldateien dieses Tutorials verwenden oder ein eigenes erstellen.
Öffnen content.xml, Verwenden Sie am Anfang des Absatzes ein einfaches HTML
Anpassbares, HTML-formatiertes TextField mit Runtime Font Embedding & CSS-Styling ]]>
Dies ist ein Beispiel für ein Textfeld, das ein Inline-Bild enthält. Der Text wurde aus einer XML-Datei geladen und ist mit einem externen CSS-Stylesheet gestaltet. Die Droid Serif-Schriftfamilie, auf die von css verwiesen wird, wurde zur Laufzeit geladen. Die für Droid Serif verfügbaren Stile sind Fett gedruckt, kursiv und Fett Kursiv. Droid Serif wurde von Steve Matteson erstellt. Die Headline-Schriftart Lobster wurde von Pablo Impallari erstellt
Nun sieht die SWF so aus:
Die Ausrichtung von Bild und Text scheint noch nicht ganz richtig zu sein. Wir werden das in den nächsten Schritten verbessern.
In diesem Tutorial werden Methoden geschrieben, die auf das Inline-Image abzielen. Dazu müssen wir eine hinzufügen Ich würde Attribut zu unserem Image-Embed-Tag, das in ActionScript referenziert werden kann. Öffnen content.xml und aktualisieren Sie die
]]>
Um die Ausrichtung des Bildes anzupassen, müssen wir seine Ausrichtung ändern x und y Werte. Wir müssen dies jedoch tun, nachdem das Bild hinzugefügt wurde und der Text umflossen wurde. Um dies zu erreichen, fügen wir dem Ereignis einen Ereignis-Listener hinzu HTMLTextBlock Klasse.
Importieren Sie zunächst einige zusätzliche Klassen:
import flash.display.DisplayObject; import flash.display.Loader; import flash.events.Event;
Als nächstes aktualisieren Sie die setHTML () Methode und erstellen Sie einen Event-Handler für wann htmlTextField wird die Größe geändert.
öffentliche Funktion setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("image") als Loader; if (loader) // füge Ereignislistener hinzu, wenn die Größe des htmlTextField-Objekts durch Hinzufügen des Bildes geändert wird htmlTextField.addEventListener (Event.CHANGE, onImageAdded); // Ansonsten gibt es keine Bildreferenz, also tun Sie nichts. private Funktion onImageAdded (event: Event): void // Zugriff auf das Bild über die Bildreferenz im Textfeld var loader: Loader = htmlTextField.getImageReference ("image") als Loader; var image: DisplayObject = loader.content; Beachten Sie, dass das Bild nicht richtig zum Text passt. Dies liegt daran, dass Flash automatisch horizontalen und vertikalen Abstand um das Bild hinzufügt. Wir können den Abstand anpassen, indem Sie das einstellen hspace und vspace Attribute in der
]]>
Beim Betrachten der SWF-Datei ist das Bild jetzt schön innerhalb des Absatzes ausgerichtet, der Text ist jedoch zu nahe am Bild.
Sieht aus, als hätten wir doch ein bisschen Abstand. Aktualisieren Sie die Attribute für das Image-Tag hspace = "5" vspace = "2". Dies gibt uns einen besseren Abstand, aber wieder wird das Bild nicht am linken Rand des Absatzes ausgerichtet. Wir können dies beheben, indem Sie die x Wert des Bildes in onImageAdded ().
private Funktion onImageAdded (event: Event): void // Zugriff auf das Bild über die Bildreferenz im Textfeld var loader: Loader = htmlTextField.getImageReference ("image") als Loader; var image: DisplayObject = loader.content; // Stelle die x-Position des Bildes so ein, dass hspace image.x - = 5 versetzt wird. 
Das Bild ist schön ausgerichtet, der Absatz scheint jedoch etwas zu nahe an der Überschrift. Wenn wir an einer HTML-Seite arbeiten, könnten wir die Auffüllung oder den Rand der anpassen p oder h1 Tags, aber leider unterstützt Flash keinen CSS-Stil für die vertikale Ausrichtung zwischen Absätzen. Die beste Lösung ist, einen neuen CSS-Stil nur für den Zeilenabstand zu erstellen. Aufmachen styles.css und fügen Sie den folgenden Stil hinzu:
br6 font-size: 6;
Aktualisieren Sie content.xml mit einer leeren br6 Stil-Tag.
]]>
Der Zeilenabstand zwischen Überschrift und Absatz wurde nun geringfügig verbessert.
Öffnen Sie die SWF-Datei, klicken Sie dann auf den Text und ziehen Sie ihn nach unten. Sie können feststellen, dass etwas Ungewöhnliches passiert. Die oberste Zeile unserer Überschrift ist verschwunden. Wenn Sie nach oben ziehen, wird es wieder angezeigt. Auf Windows-Computern können Sie den gleichen Effekt beobachten, wenn Sie den Mauszeiger über den Text bewegen und das Mausrad in einem Browser scrollen.
Der Workaround für dieses Problem ist, mit freundlicher Genehmigung des Blogs Destroy Today, das automatische Skalieren zu deaktivieren, nachdem der Text im Inneren geändert wurde. Aktualisieren Sie zuerst die setHTML () Methode und dann onImageAdded ().
öffentliche Funktion setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("image") als Loader; if (loader) // füge Ereignislistener hinzu, wenn die Größe des htmlTextField-Objekts durch Hinzufügen des Bildes geändert wird htmlTextField.addEventListener (Event.CHANGE, onImageAdded); else // Es gibt keine Bildreferenz. Deaktivieren Sie daher autosize htmlTextField.autoSize = TextFieldAutoSize.NONE; private Funktion onImageAdded (Ereignis: Ereignis): void // Zugriff auf das Bild über die Bildreferenz im Textfeld. var loader: Loader = htmlTextField.getImageReference ("image") as Loader; var image: DisplayObject = loader.content; // Stelle die x-Position des Bildes so ein, dass hspace image.x - = 5 versetzt wird. // Deaktiviere autosize htmlTextField.autoSize = TextFieldAutoSize.NONE; Erneut veröffentlichen, und Sie werden feststellen, dass unser Bugfix ein neues Problem verursacht hat.
Nun ist die Höhe des Textfelds nicht groß genug, um den gesamten Text anzuzeigen, und die beiden unteren Zeilen sind nicht sichtbar. Wir werden das in unserem nächsten Schritt beheben.
Damit der gesamte Text sichtbar wird, müssen wir die Höhe von erhöhen HTMLTextField. Wenn wir die Höhe einfach um 50 Pixel vergrößern, nachdem das Bild hinzugefügt wurde, ist das Problem gelöst.
htmlTextField.height + = 50;
Diese Lösung fühlt sich jedoch nicht richtig an. Was ist, wenn wir ein Bild mit einer anderen Größe verwenden? Unterschiedliche Schriftarten oder Styling? Sie können das Problem am besten beheben, indem Sie die Höhe basierend auf den Werten, die Flash zur Bestimmung der Höhe verwendet, dynamisch anpassen. Die offensichtliche Taktik wäre die Verwendung der Texthöhe Parameter. Lass es uns versuchen.
htmlTextField.height = htmlTextField.textHeight;
Das ist besser, aber die unterste Textzeile ist immer noch verborgen. Bei einigen Nachforschungen (z. B. diesem Blogbeitrag) können wir feststellen, dass der Höhe zwei Werte hinzugefügt werden müssen. Eins ist das Höchste führend Wert der von uns verwendeten Textstile. In diesem Fall wäre das 4 (von dem p Stil). Der andere Wert ist htmlTextField.maxScrollV. Addiert man die Summe dieser Werte plus einer Sicherheitseinstellung von 2 Pixel zur Höhe, HTMLTextField wird die richtige Größe haben, unabhängig davon, welche Schriftarten, Stile oder Bilder verwendet werden. Anstatt dies in zu tun onImageAdded (), Erstellen Sie eine neue Funktion zum Sperren der Höhe des Textblocks.
private Funktion onImageAdded (event: Event): void // Zugriff auf das Bild über die Bildreferenz im Textfeld var loader: Loader = htmlTextField.getImageReference ("image") als Loader; var image: DisplayObject = loader.content; // Stelle die x-Position des Bildes so ein, dass hspace image.x - = 5 versetzt wird. // die Höhe des Textfeldes sperren, um das Scrollen zu verhindern bug lockHeight (); private function lockHeight (): void // Deaktiviere autosize htmlTextField.autoSize = TextFieldAutoSize.NONE; htmlTextField.height = htmlTextField.textHeight; // Holen Sie sich die Höhenanpassung // durchlaufen Sie zuerst StyleSheet-Styles, um den höchsten führenden Wert zu erhalten. var highestLeading: int = 0; für jedes (var style: String in textStyleSheet.styleNames) var leading: int = int (textStyleSheet.getStyle (style) .leading); if (höchster Spitzenwert < leading) highestLeading = leading; // now, get the value of the height adjustment var heightAdjust:int = htmlTextField.maxScrollV + highestLeading + 2; htmlTextField.height += heightAdjust; Das setHTML () Methode muss auch aktualisiert werden. Wenn kein Inline-Bild in den Textblock geladen wird, muss die Höhe gesperrt werden.
öffentliche Funktion setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("image") als Loader; if (loader) // füge Ereignislistener hinzu, wenn die Größe des htmlTextField-Objekts durch Hinzufügen des Bildes geändert wird htmlTextField.addEventListener (Event.CHANGE, onImageAdded); else // Es gibt keine Bildreferenz, sperrt die Höhe des Textfelds lockHeight (); Mit diesen letzten Einstellungen ist der gesamte Text jetzt sichtbar und kann nicht verschoben werden.
Unsere letzte Aufgabe in diesem Lernprogramm ist das Hinzufügen eines Textlinks, der die Größe des Textblocks ändert. Dazu müssen wir zunächst den Link zum HTML-Text im hinzufügen content.xml Datei.
Anpassbares, HTML-formatiertes TextField mit Runtime Font Embedding & CSS-Styling
Wir können Events zu Textlinks hinzufügen. Erhöhen oder verringern Sie beispielsweise die Breite des Textfelds.
]]>
In unserer HTMLTextBlock Klasse, fügen Sie einen Ereignis-Listener hinzu, um zu erkennen, wenn auf einen Textlink geklickt wird. Importieren Sie zuerst die TextEvent Klasse.
import flash.events.TextEvent;
Fügen Sie im Konstruktor den Ereignis-Listener hinzu.
htmlTextField.addEventListener (TextEvent.LINK, textLinkHandler);
Erstellen Sie jetzt die Ereignishandlermethode.
private Funktion textLinkHandler (event: TextEvent): void trace (event.text);
Veröffentlichungsvorschau ausführen Wenn Sie auf die Links zu Textereignissen klicken, wird eine der beiden angezeigt erhöhenBreite oder AbnahmeWeite im Ausgabeprotokoll.
Erstellen Sie eine neue Methode, die die Breite von ändert htmlTextField.
private Funktion changeWidth (newWidth: int): void blockWidth = newWidth; // die Höhe des Textfeldes entsperren htmlTextField.autoSize = TextFieldAutoSize.LEFT; // die Breite ändern htmlTextField.width = blockWidth; // verriegeln Sie die Höhe erneut LockHeight ();
Aktualisieren Sie den Textlink-Handler, um ihn aufzurufen changeWidth ().
private Funktion textLinkHandler (event: TextEvent): void if (event.text == "raiseWidth") changeWidth (blockWidth + 10); if (event.text == "absenkenbreite") changeWidth (blockWidth - 10);
Durch Klicken auf die Textlinks vergrößern / verkleinern wird die Breite des Textblocks jetzt um 10 Pixel angepasst.
