Share
We gaan kijken hoe u HTML-opgemaakte tekst uit XML kunt weergeven, gestileerd van een externe CSS-stylesheet met lettertypen die tijdens runtime zijn geladen. We beheren ook de plaatsing van inline afbeeldingen via de HTML
Het is zeker gemakkelijk om alle assets direct in het Flash-bronbestand zelf te bewaren, en soms is dat de beste oplossing. Er zijn echter enkele goede redenen om zoveel mogelijk inhoud apart van uw Flash-document te houden, of zelfs om uw Flash-bron uitsluitend uitsluitend uit ActionScript te laten bestaan..
Omdat we met een verscheidenheid aan activa zullen werken, is het handig om een goed georganiseerde bestandsdirectorystructuur in te stellen. Eerst maken we een projectmap "HTMLTextBlock". Voeg daarbinnen een map "source" en een map "deploy" toe. In inzetten, onze SWF bevindt zich op het hoogste niveau, samen met mappen voor elk type inhoud. In deze demo maken we een SWF die lettertypen, CSS, XML en een afbeelding laadt. De bronmap bevat al onze .fla- en .as-bestanden, die we later zullen maken. Voor nu zou uw projectdirectory er als volgt uit moeten zien:
Voordat u lettertypen op uw website insluit, is het belangrijk om u bewust te zijn van lettertypelicenties. Alleen al omdat je een lettertype hebt geïnstalleerd, zelfs als je het recht hebt om te gebruiken voor afdrukken, betekent dit niet dat je toestemming hebt om het online te gebruiken. Raadpleeg dit Themeforest-artikel voor meer informatie over het licentiëren van lettertypen.
In deze zelfstudie gebruiken we twee lettertypen, één voor de kop en één voor de hoofdtekst. Een goede plek om open source-lettertypen van hoge kwaliteit te vinden, is de Google Font Directory. U kunt de lettertypebestanden niet rechtstreeks vanaf daar downloaden, maar ze kunnen gemakkelijk worden gevonden met een zoekopdracht op internet. Font Squirrel en Typekit zijn twee uitstekende bronnen voor lettertypen van hoge kwaliteit.
Let bij het kiezen van een koplettertype op een stijl die de persoonlijkheid van uw ontwerp uitdrukt. Voor hoofdtekst is leesbaarheid erg belangrijk, dus gebruik een lettertype dat goed wordt weergegeven in kleine formaten. Zorg er ook voor dat u een lettertypefamilie kiest met cursieve, cursieve en vetgekleurde gezichten. Voor deze tutorial gebruiken we het lettertype Lobster van Pablo Impallari voor koppen en de lettertypefamilie Droid Serif van Steve Matteson voor paragrafen.
Snelle online zoekopdrachten onthullen waar we het Lobster-lettertype en de Droid Serif-lettertypefamilie kunnen downloaden. In onze bron map, maak een nieuwe map "gedownloade lettertypen" en plaats daar de lettertypebestanden.
Activeer de lettertypen op uw systeem. Open twee nieuwe ActionScript 3.0 Flash-documenten, één voor elk lettertype en sla op in de bron directory. We beginnen met het koplettertype. Selecteer in het deelvenster Bibliotheek "Nieuw lettertype ..." en in de Familie dropdown, selecteer Kreeft 1.4. Typ onder 'Naam kreeft'. Voor Tekenreeksen, controleren Allemaal. Opmerking: als u een lettertype gebruikt waarvan u weet dat u bepaalde tekens niet zult gebruiken, kunt u ervoor kiezen om een subset glyphs uit het lettertype in te sluiten, waardoor de bestandsgrootte van de SWF afneemt.
Ga vervolgens naar het tabblad ActionScript. Onder verbinding, kiezen Exporteren voor ActionScript. Wanneer je dat doet, Exporteer in frame 1 wordt gecontroleerd, en de Klasse en Basisklasse ID's worden ingevuld. Klik op Gedaan. Als u een waarschuwing krijgt dat de klassedefinitie niet is gevonden, negeert u deze.
Schakel vervolgens in het paneel Publicatie-instellingen het vinkje uit HTML checkbox en, in de Flash veld, richt op fonts map in de inzetten map door "... /deploy/fonts/Lobster.swf" in te voeren. Dit is alles wat nodig is om een lettertype in te sluiten in een SWF.
Als we echter de SWF in een andere SWF willen laden en de ingesloten lettertypen tijdens runtime willen gebruiken, moeten we het lettertype registreren. In het deelvenster Handelingen moeten we dus een lijncode toevoegen aan frame 1 op de tijdlijn:
Font.registerFont (kreeft);
Nu is ons lettertype beschikbaar voor gebruik in Flash-documenten die de SWF laden. We kunnen hier klaar zijn, maar we willen ons werk controleren en, nog belangrijker, de juiste lettertypefamilienaam gebruiken in onze CSS. Voeg wat meer code toe.
Accentsconagua
var embeddedFonts: Array = Font.enumerateFonts (false); voor elk (var-lettertype: Font in embeddedFonts) trace ("Font Embedded:" + font.fontName); Publiceer Voorbeeld uitvoeren en we zullen het bericht hieronder in het uitvoerlogboek zien. Let op de naam van het lettertype. We hebben het later nodig.
Lettertype ingesloten: kreeft 1.4 Lettertype ingesloten: kreeft 1.4
U vraagt zich misschien af waarom we twee traceerinstructies zien. Dit is te wijten aan registerFont () methode die het lettertype een tweede keer insluit.
Font.registerFont (DroidSerifRegular); Font.registerFont (DroidSerifBold); Font.registerFont (DroidSerifItalic); Font.registerFont (DroidSerifBoldItalic); var embeddedFonts: Array = Font.enumerateFonts (false); voor elk (var-lettertype: Font in embeddedFonts) trace ("Font Embedded:" + font.fontName + "" + font.fontStyle); Vervolgens maken we een SWF voor de body-kopie. Deze keer embedden we vier lettertypen, één voor elke stijl. Selecteer in ons tweede Flash-document opnieuw vanuit het deelvenster Bibliotheek Nieuw lettertype ... Selecteer in het vervolgkeuzemenu Familie de optie Droid Serif en selecteer Regulier voor Stijl. Type "DroidSerifRegular" in het veld Naam en vergeet niet in te stellen Exporteren voor ActionScript. Herhaal vervolgens dezelfde stappen voor de tekenreeksen en het ActionScript-tabblad. Herhaal dit proces voor de vetgedrukte, cursief en cursief gedrukte gezichten. In het deelvenster Acties gebruiken we dezelfde code als die we hebben gebruikt voor het Lobster-lettertype.
Publicatie voorbeeld uitvoeren. Deze keer zullen we traceerberichten zien voor elk van de lettertypen van Droid Serif. Als u minder dan acht ziet, controleert u de lettertype-instellingen in het deelvenster Bibliotheek, omdat een van de lettertypen niet wordt ingesloten. Let opnieuw op de naam van het lettertype in het uitvoerlogboek.
Lettertype Embedded: Droid Serif standaard lettertype Embedded: Droid Serif vet Lettertype Embedded: Droid Serif cursief Lettertype Embedded: Droid Serif boldItalic Lettertype Embedded: Droid Serif cursief Lettertype Embedded: Droid Serif vet Lettertype Embedded: Droid Serif regulier lettertype Embedded: Droid Serif boldItalic
Publiceer nu het lettertype Droid Serif in "... /deploy/fonts/DroidSerif.swf" en we zouden nu twee lettertype-SWF's moeten hebben, Lobster.swf en DroidSerif.swf, in de implementeren / fonts directory.
Het volgende item dat we zullen maken is een xml-bestand. De XML bestaat uit één element: een blok met HTML-opgemaakte tekst, bestaande uit een kop en alinea opgebouwd met standaard HTML-tagging.
Om ervoor te zorgen dat Flash de HTML-code als een XML-elemententiteit kan lezen, moet deze zich in een CDATA-wrapper bevinden. CDATA wordt gebruikt in XML-documenten om aan te geven dat een gedeelte van de inhoud moet worden geparseerd als tekengegevens in plaats van als markup.
Resizable, HTML-geformatteerd TextField met Runtime-lettertype inbedden & CSS-styling Dit is een voorbeeld van een tekstveld met een inline-afbeelding. De tekst is geladen vanuit een xml-bestand en is gestileerd met een externe CSS-stylesheet. De lettertypefamilie Droid Serif, waarnaar wordt verwezen door de CSS, is tijdens runtime geladen. De beschikbare stijlen voor Droid Serif zijn stoutmoedig, cursief en vet cursief. Droid Serif is gemaakt door Steve Matteson. Het koplettertype Lobster is gemaakt door Pablo Impallari.
]]>
Sla dit bestand op als "content.xml" in de xml map in de inzetten directory
Nu gaan we CSS maken om de HTML te stijlen. Als we naar onze HTML kijken, kunnen we zien dat we styling moeten maken voor h1, p en een. De tekst binnen de vetgedrukte en cursieve tags (b en ik) wordt automatisch gestileerd, omdat deze stijlen aanwezig zijn in onze alineatypefamilie. Houd er rekening mee dat Flash alleen een subset van CSS-eigenschappen ondersteunt; raadpleeg de Naslaggids voor ActionScript 3.0 voor meer informatie.
Het is vooral belangrijk dat we de juiste lettertypefamilienaam in de CSS targeten. Gebruik de lettertypenaam die werd weergegeven in het uitvoerlogboek toen we de lettertypedocumenten publiceerden (Kreeft 1.4 en Droid Serif).
h1 font-family: Lobster 1.4; font-size: 24; color: # 990033; p font-family: Droid Serif; font-size: 14; color: # 333333; leidt: 4; a color: # 000000; text-decoration: onderstrepen;
Sla dit bestand op als "styles.css" in de css map in de inzetten directory
Maak een nieuw Flash-bestand en sla op als "HTMLTextBlockExample.fla" in de bron directory. Ga naar het paneel Publicatie-instellingen in het venster Publicatie-instellingen inzetten map. Voor HTML, gebruik "... /deploy/index.html" in plaats van de standaardnaam. Maak een nieuw .as-bestand - "HTMLTextBlockExample.as" - om de documentklasse te zijn (raadpleeg deze snelle tip voor meer informatie over documentklassen).
pakket import flash.display.MovieClip; public class HTMLTextBlockExample verlengt MovieClip public function HTMLTextBlockExample (): void
Vervolgens laden we de lettertype-SWF's die we hebben gemaakt in ons Flash-document. Laten we twee variabelen maken. De ene zal een zijn reeks van de url-strings voor elk lettertype SWF, en de andere is een int die bijhoudt hoeveel lettertypen er zijn geladen. Vervolgens maken we verschillende methoden om het laden aan te kunnen.
pakket import flash.display.Loader; import flash.display.MovieClip; import flash.events.Event; import flash.events.IOErrorEvent; import flash.net.URLRequest; public class HTMLTextBlockExample breidt MovieClip uit public var fonts: Array / * of String * / = ["fonts / DroidSerif.swf", "fonts / Lobster.swf"]; public var fontsLoaded: int = 0; openbare functie HTMLTextBlockExample (): void loadFonts (); private functie loadFonts (): void for each (var fontURL: String in fonts) var fontLoader: Loader = new Loader (); fontLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, onFontLoaded); fontLoader.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, onFontLoadError); fontLoader.load (nieuwe URLRequest (fontURL)); persoonlijke functie onFontLoadError (event: IOErrorEvent): void trace ("ERROR: Could not find font" + event.target.loaderURL); private function onFontLoaded (event: Event): void fontsLoaded ++; if (fontsLoaded == fonts.length) onFontsLoadComplete (); private function onFontsLoadComplete (): void trace (fonts.length + "fonts are loaded"); Voorbeeld publiceren uitvoeren en zien dat beide lettertypen zijn geladen.
Het laden van de XML- en CSS-bestanden zal een soortgelijk proces zijn als het laden van de lettertypen. Eerst moeten we enkele nieuwe klassen importeren.
import flash.net.URLLoader; import flash.text.StyleSheet;
We zullen ook een nieuw maken StyleSheet variabele die de opmaakeigenschappen bevat die zijn geparseerd uit het css-bestand.
public var textStyleSheet: StyleSheet;
Nu voegen we de methoden toe voor het laden van de items.
private function onFontsLoadComplete (): void trace (fonts.length + "fonts are loaded"); loadCSS (); private function loadCSS (): void var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, onCSSLoadComplete); loader.load (nieuwe URLRequest ("css / styles.css")); private function onCSSLoadComplete (event: Event): void textStyleSheet = new StyleSheet (); textStyleSheet.parseCSS (event.target.data); loadXML (); private function loadXML (): void var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, onXMLLoadComplete); loader.load (nieuwe URLRequest ("xml / content.xml")); private function onXMLLoadComplete (event: Event): void trace (XML (event.target.data) .toXMLString ()); Voer publicatievoorbeeld uit en u ziet de XML in het uitvoerlogboek.
Het weergeven van HTML-opgemaakte tekst is iets wat u vaak kunt doen, dus laten we een klasse maken die we steeds opnieuw kunnen gebruiken. Open een nieuw ActionScript-bestand en sla het op als "HTMLTextBlock.as" in de bron directory.
pakket import flash.display.Sprite; import flash.text.StyleSheet; import flash.text.AntiAliasType; import flash.text.TextField; import flash.text.TextFieldAutoSize; public class HTMLTextBlock breidt Sprite uit // Width of the htmlTextField. Standaard is 550 pixels. public var blockWidth: int = 550; // StyleSheet voor htmlTextField. public var textStyleSheet: StyleSheet = new StyleSheet (); // Bevat de html-opgemaakte tekst. private var htmlTextField: TextField = new TextField (); public function HTMLTextBlock () htmlTextField.embedFonts = true; htmlTextField.wordWrap = true; htmlTextField.multiline = true; htmlTextField.condenseWhite = true; htmlTextField.antiAliasType = AntiAliasType.ADVANCED; addChild (htmlTextField); openbare functie setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText;
Zoals u kunt zien, heeft onze klasse drie variabelen. De privévariabele htmlTextField bevat HTML-opgemaakte tekst. De openbare variabele blockWidth regelt de breedte van htmlTextField, en textStyleSheet bevat de CSS-stijl waarop wordt toegepast htmlTextField. In de constructor stellen we eigenschappen in htmlTextField en voeg het toe aan de weergavelijst. Als laatste creëren we setHTML () voor het invoegen van HTML-opgemaakte tekst htmlTextField.
Nu we een aangepaste klasse hebben voor het weergeven van HTML-tekst, laten we deze gebruiken. Begin met modificeren onXMLLoadComplete () om XML-gegevens als een tekenreeks naar een nieuwe methode te verzenden die wordt gebruikt HTMLTextBlock om de HTML weer te geven.
private function onXMLLoadComplete (event: Event): void // get xml from event target data var xml: XML = XML (event.target.data); // converteer de xml naar een tekenreeks var xmlString: String = xml; // stuur xml string naar de displayHTML-methode displayHTML (xmlString); persoonlijke functie displayHTML (htmlText: String): void var htmlTextBlock: HTMLTextBlock = new HTMLTextBlock (); // stel de breedte in en vorm htmlTextBlock.blockWidth = 420; htmlTextBlock.textStyleSheet = textStyleSheet; // stuur de html-reeks naar de klasse HTMLTextBlock htmlTextBlock.setHTML (htmlText); // stel positie in en voeg toe aan fase htmlTextBlock.x = 20; htmlTextBlock.y = 10; addChild (htmlTextBlock);
Het resultaat:
Vervolgens voegen we een afbeelding toe aan ons tekstblok. U kunt de afbeelding in de bronbestanden van deze zelfstudie gebruiken of deze zelf maken.
Open content.xml, en gebruik aan het begin van de alinea een eenvoudige HTML
Resizable, HTML-geformatteerd TextField met Runtime-lettertype inbedden & CSS-styling ]]>
Dit is een voorbeeld van een tekstveld met een inline-afbeelding. De tekst is geladen vanuit een xml-bestand en is gestileerd met een externe CSS-stylesheet. De lettertypefamilie Droid Serif, waarnaar wordt verwezen door de CSS, is tijdens runtime geladen. De beschikbare stijlen voor Droid Serif zijn stoutmoedig, cursief en vet cursief. Droid Serif is gemaakt door Steve Matteson. Het koplettertype Lobster is gemaakt door Pablo Impallari
Nu zal de SWF dit zien:
De uitlijning van de afbeelding en de tekst lijkt nog niet helemaal goed. We zullen dat in de komende stappen verbeteren.
In de tutorial komen we methoden tegen die gericht zijn op het inline-beeld. Om dit te doen, moeten we een toevoegen ID kaart attribuut aan onze embed embed-tag waarnaar kan worden verwezen in ActionScript. Open content.xml en werk het
]]>
Om de uitlijning van de afbeelding aan te passen, moeten we de afbeelding wijzigen X en Y waarden. We moeten dit echter doen nadat de afbeelding is toegevoegd en de tekst is opnieuw geplaatst. Om dit te bereiken, zullen we een gebeurtenislistener toevoegen aan de HTMLTextBlock klasse.
Importeer eerst enkele aanvullende klassen:
import flash.display.DisplayObject; import flash.display.Loader; import flash.events.Event;
Werk vervolgens het setHTML () methode en maak een gebeurtenishandler aan voor wanneer htmlTextField is van grootte veranderd.
openbare functie 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) // gebeurtenislistener toevoegen voor wanneer het htmlTextField de grootte van de afbeelding htmlTextField.addEventListener (Event.CHANGE, onImageAdded) wordt gewijzigd; // anders is er geen verwijzing naar afbeeldingen, dus doe niets privé-functie onImageAdded (event: Event): void // toegang tot de afbeelding van de afbeeldingsreferentie in het tekstveld var loader: Loader = htmlTextField.getImageReference ("afbeelding") als lader; var afbeelding: DisplayObject = loader.content; Merk op hoe het beeld niet goed uitlijnt met de tekst? Dit komt omdat Flash automatisch horizontale en verticale afstanden rond de afbeelding toevoegt. We kunnen de hoeveelheid spatiëring aanpassen door de hspace en vspace attributen in de
]]>
Kijkend naar de SWF, wordt de afbeelding nu netjes uitgelijnd binnen de alinea, maar de tekst staat te dicht bij de afbeelding.
Het lijkt erop dat we toch wat ruimte nodig hebben. Werk de kenmerken van de afbeeldingstag bij die moeten zijn hspace = "5" vspace = "2". Dit geeft ons een betere afstand, maar nogmaals zal het beeld niet worden uitgelijnd met de linkerrand van de alinea. We kunnen dit oplossen door de X waarde van de afbeelding in onImageAdded ().
private function onImageAdded (event: Event): void // toegang tot de afbeelding van de afbeeldingsreferentie in het tekstveld var loader: Loader = htmlTextField.getImageReference ("image") als Loader; var afbeelding: DisplayObject = loader.content; // pas de x-positie van de afbeelding aan om hspace image.x - = 5 te compenseren; 
De afbeelding is mooi uitgelijnd, maar de alinea lijkt iets te dicht bij de kop te staan. Als we aan een HTML-pagina zouden werken, zouden we de opvulling of marge op de HTML-pagina kunnen aanpassen p of h1 tags, maar helaas ondersteunt Flash geen enkele CSS-stijl voor verticale uitlijning tussen alinea's. De beste oplossing die we hebben, is om een nieuwe CSS-stijl te maken, alleen voor regelafstand. Doe open styles.css en voeg de volgende stijl toe:
br6 font-size: 6;
Update content.xml met een leeg BR6 stijl tag.
]]>
En nu is de regelafstand tussen de kop en alinea-uitlijning subtiel verbeterd.
Open de SWF en klik en sleep naar beneden terwijl u de tekst selecteert. U merkt misschien dat er iets ongewoons gebeurt. De bovenste regel van onze kop is verdwenen. Als u omhoog sleept, verschijnt het weer. Op Windows-machines ziet u hetzelfde effect optreden als u de muisaanwijzer over de tekst beweegt en het muiswiel in een browser schuift.
De oplossing hiervoor, met dank aan de blog Vernietiging vandaag, is autosizing uitschakelen nadat de tekst erin is gewijzigd. Update eerst de setHTML () methode, en dan onImageAdded ().
openbare functie 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) // gebeurtenislistener toevoegen voor wanneer het htmlTextField de grootte van de afbeelding htmlTextField.addEventListener (Event.CHANGE, onImageAdded) wordt gewijzigd; else // er is geen afbeeldingsreferentie, dus zet autosize uit htmlTextField.autoSize = TextFieldAutoSize.NONE; persoonlijke functie onImageAdded (event: Event): void // toegang tot de afbeelding van de afbeeldingsreferentie in het tekstveld var loader: Loader = htmlTextField.getImageReference ("image") als Loader; var afbeelding: DisplayObject = loader.content; // pas de x-positie van de afbeelding aan om hspace image.x - = 5 te compenseren; // zet autosize uit htmlTextField.autoSize = TextFieldAutoSize.NONE; Publiceer opnieuw en u zult zien dat onze bugfix een nieuw probleem heeft gecreëerd.
Nu is de hoogte van het tekstveld niet groot genoeg om alle tekst weer te geven en zijn de onderste twee regels niet zichtbaar. We zullen dit in onze volgende stap oplossen.
Om alle tekst zichtbaar te maken, moeten we de hoogte van verhogen HTMLTextField. Als we de hoogte eenvoudigweg met 50 pixels vergroten nadat de afbeelding is toegevoegd, is het probleem opgelost.
htmlTextField.height + = 50;
Deze oplossing voelt echter niet goed. Wat als we een afbeelding met een andere grootte gebruiken? Verschillende lettertypen of styling? De beste manier om het probleem aan te pakken is de hoogte dynamisch aan te passen, op basis van de waarden die Flash gebruikt om de hoogte te bepalen. De voor de hand liggende tactiek zou zijn om de tekst hoogte parameter. Laten we het proberen.
htmlTextField.height = htmlTextField.textHeight;
Dat is beter, maar de onderste regel van de tekst is nog steeds verborgen. Bij enig onderzoek (bijvoorbeeld deze blogpost) kunnen we vaststellen dat er twee waarden aan de hoogte moeten worden toegevoegd. De ene is de hoogste leidend waarde van de tekststijlen die we gebruiken. In dit geval zou dat zijn 4 (van de p stijl). De andere waarde is htmlTextField.maxScrollV. Als we het totaal van die waarden, plus een veiligheidsaanpassing van 2 pixels, toevoegen aan de hoogte, HTMLTextField heeft de juiste grootte, ongeacht welke lettertypen, stilering of afbeeldingen worden gebruikt. In plaats van dit in te doen onImageAdded (), maak een nieuwe functie om de hoogte van het tekstblok te vergrendelen.
private function onImageAdded (event: Event): void // toegang tot de afbeelding van de afbeeldingsreferentie in het tekstveld var loader: Loader = htmlTextField.getImageReference ("image") als Loader; var afbeelding: DisplayObject = loader.content; // pas de x-positie van de afbeelding aan om hspace image.x - = 5 te compenseren; // vergrendel de hoogte van het tekstveld om te voorkomen dat het vergrendelingsmechanisme wordt verschoven. Hoogte (); private functie lockHeight (): void // zet autosize uit htmlTextField.autoSize = TextFieldAutoSize.NONE; htmlTextField.height = htmlTextField.textHeight; // hoogte-aanpassing // eerst doorloop StyleSheet-stijlen om de hoogste beginwaarde te verkrijgen var highestLeading: int = 0; voor elk (var-stijl: String in textStyleSheet.styleNames) var leading: int = int (textStyleSheet.getStyle (style) .leading); if (highestLeading < leading) highestLeading = leading; // now, get the value of the height adjustment var heightAdjust:int = htmlTextField.maxScrollV + highestLeading + 2; htmlTextField.height += heightAdjust; De setHTML () methode moet ook worden bijgewerkt. Wanneer er geen inline-afbeelding in het tekstblok wordt geladen, moet de hoogte worden vergrendeld.
openbare functie 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) // gebeurtenislistener toevoegen voor wanneer het htmlTextField de grootte van de afbeelding htmlTextField.addEventListener (Event.CHANGE, onImageAdded) wordt gewijzigd; else // er is geen afbeeldingsreferentie, vergrendel de hoogte van het tekstveld lockHeight (); Met deze laatste aanpassingen is alle tekst nu zichtbaar en scrolt niet.
Onze laatste taak in deze zelfstudie is om een tekstlink toe te voegen die het formaat van het tekstblok verkleint. Om dit te doen, moeten we eerst de link naar de HTML-tekst toevoegen in de content.xml het dossier.
Resizable, HTML-geformatteerd TextField met Runtime-lettertype inbedden & CSS-styling
We kunnen gebeurtenissen aan tekstlinks toevoegen. Verhoog of verlaag bijvoorbeeld de breedte van het tekstveld.
]]>
In onze HTMLTextBlock klasse, voeg een gebeurtenislistener toe om te detecteren wanneer op een tekstlink wordt geklikt. Importeer eerst het TextEvent klasse.
import flash.events.TextEvent;
Voeg in de constructor de gebeurtenislistener toe.
htmlTextField.addEventListener (TextEvent.LINK, textLinkHandler);
Maak nu de gebeurtenishandlermethode.
private function textLinkHandler (event: TextEvent): void trace (event.text);
Publicatievoorbeeld uitvoeren. Wanneer u op de links naar tekstgebeurtenissen klikt, ziet u een van beide increaseWidth of decreaseWidth in het uitvoerlogboek.
Maak een nieuwe methode die de breedte van zal veranderen htmlTextField.
private function changeWidth (newWidth: int): void blockWidth = newWidth; // ontgrendel de hoogte van het tekstveld htmlTextField.autoSize = TextFieldAutoSize.LEFT; // verander de breedte htmlTextField.width = blockWidth; // vergrendel de hoogtevergrendelingHoogte ();
Werk de tekstkoppelingshandler bij om te bellen changeWidth ().
private function textLinkHandler (event: TextEvent): void if (event.text == "increaseWidth") changeWidth (blockWidth + 10); if (event.text == "decreaseWidth") changeWidth (blockWidth - 10);
Door te klikken op de tekstlinks verhogen / verlagen wordt nu de breedte van het tekstblok met 10 pixels aangepast.
Zoals te zien is in de zelfstudie, kan het gebruik van HTML-opgemaakt CSS-gestileerde inhoud in Flash moeilijker zijn dan het op het eerste gezicht lijkt. Nu we de basis hebben geleerd, kunt u deze kennis toepassen in uw eigen projecten. Hier zijn enkele suggesties voor verdere ontwikkeling:
Bedankt voor het lezen van deze tutorial en ik hoop dat je deze nuttig zult vinden in je toekomstige Flashing!
