Master HTML-formaterad text i Flash

Vi ska titta på hur man visar HTML-formaterad text laddad från XML, utformad från ett externt CSS-stilark med teckensnitt som laddas vid körning. Vi mästar också inline bildplacering via HTML inbädda tagg och lägga till anpassade händelser i HTML-textlänkar.


Steg 1: Varför använda HTML-formaterad text och externa tillgångar?

Det är säkert enkelt att behålla alla tillgångar direkt i själva Flash-källfilen, och ibland kan det vara den bästa lösningen. Det finns emellertid några bra skäl att hålla så mycket innehåll separat från ditt Flash-dokument som möjligt, eller till och med för att hålla din Flash-källa enbart samlad enbart av ActionScript.

  1. Din SWF laddas snabbare. Om du håller innehållet separat från Flash-filen kan du bara ladda de tillgångar du behöver vid körning, vilket ger ditt innehåll snabbare.
  2. Uppdateringar är enklare. I stället för att kräva en Flash-utvecklare att spricka öppna .fla och publicera, är allt som behövs en enkel redigering till html eller css.
  3. Flera applikationer. Det externa innehållet är tillgängligt för andra applikationer, till exempel för att skapa en HTML5-version av webbplatsen för iPad.
  4. OOP. Bäst av allt, hålla innehållet skilt från leveransprogrammet är bra objektorienterad programmering. Metoder som detta är byggstenarna för att utveckla system, mallar och komponenter för återanvändning och snabb utveckling.

Steg 2: Ställ in paketkatalogen

Eftersom vi kommer att arbeta med en mängd olika tillgångar, är det bra att skapa en välorganiserad filkatalogstruktur. Först skapar vi en "HTMLTextBlock" projektkatalog. Inom det lägger du till en "källa" -mapp och en "deploy" -mapp. I distribuera, vår SWF kommer att ligga på toppnivå tillsammans med mappar för varje typ av innehåll. I den här demo skapar vi en SWF som laddar in teckensnitt, css, xml och en bild. Källmappen innehåller alla våra .fla och .as-filer, som vi kommer att skapa senare. För närvarande ska din projektkatalog se ut så här:


Steg 3: Välj dina teckensnitt

Innan du lägger in teckensnitt på din webbplats är det viktigt att vara medveten om font licensiering. Bara för att du har ett teckensnitt installerat, även om du har rätt att använda för utskrift, betyder det inte att du har behörighet att använda den online. För mer information om typsnittstillstånd, se denna Themeforestartikel.

I denna handledning använder vi två teckensnitt, en för rubriken och en för kroppstexten. Ett bra ställe att hitta högkvalitativa, open source-teckensnitt är Google Font Directory. Du kan inte ladda ner fontfilerna direkt därifrån, men de kan enkelt hittas med en webbsökning. Font Ekorre och Typekit är två mer utmärkta resurser för högkvalitativa teckensnitt.

När du väljer en rubrik typsnitt, leta efter en stil som uttrycker personligheten i din design. För kroppstext är läsbarhet väldigt viktigt, så använd ett teckensnitt som visar bra på små storlekar. Också, var noga med att välja en typsnittsfamilj med fet, kursiv och fet kursiv ansikte. För denna handledning kommer vi att använda teckensnittet Hummer av Pablo Impallari för rubriker och typsnittet Droid Serif av Steve Matteson för stycken.

Snabba online-sökningar avslöjar var vi kan ladda ner hummerfonten och Droid Serif-typfamiljen. I vår källa katalog, skapa en ny mapp "nedladdade teckensnitt" och sätt typfilerna där.


Steg 4: Skapa SWF-filer för inbyggnad av Runtime-teckensnitt

Aktivera teckensnitt på ditt system. Öppna två nya Flash-dokument från ActionScript 3.0, en för varje typsnitt och spara till källa katalogen. Vi börjar med rubriken. Från bibliotekspanelen väljer du "Ny teckensnitt ..." och i Familj dropdown, välj Hummer 1.4. Under namnet skriver du "Hummer". För Teckenintervall, kontrollera Allt. Observera att om du använder ett teckensnitt där du vet att du inte använder vissa tecken kan du välja att bädda in en delmängd av glyfer från teckensnittet, vilket minskar filstorleken för SWF.

Gå sedan till fliken ActionScript. Under koppling, Välj Exportera till ActionScript. När du gör, Exportera i ram 1 kommer att kontrolleras och Klass och Basklass identifierare kommer att fyllas i. Klicka Gjort. Om du får en varning om att klassdefinitionen inte hittades, ignorera den.

Därefter avmarkerar du i rutan Publiceringsinställningar html och i rutan Blixt fält, rikta in på typsnitt mapp i distribuera katalog genom att ange "... /deploy/fonts/Lobster.swf". Detta är allt som krävs för att bädda in ett teckensnitt i en SWF.

Om vi ​​vill kunna ladda SWF till en annan SWF och använda dess inbyggda teckensnitt vid körning måste vi registrera teckensnittet. Så, i panelen Åtgärder måste vi lägga till en radkod för att rama 1 på tidslinjen:

 Font.registerFont (Hummer);

Nu är vårt teckensnitt tillgängligt för användning i alla Flash-dokument som laddar SWF. Vi kan göras här, men vi vill kolla vårt arbete och, viktigare, få rätt typsnitt för att använda i vår CSS. Lägg till lite mer kod.

 var embeddedFonts: Array = Font.enumerateFonts (false); för varje (var-typsnitt: typsnitt i inbäddade fonter) trace ("Font Embedded:" + font.fontName); 

Kör Publicera förhandsgranskning, och vi kommer att se meddelandet nedan i utmatningsloggen. Notera teckensnittsnamnet. Vi behöver det senare.

 Teckensnitt Inbäddad: Hummer 1.4 Typsnitt Inbäddad: Hummer 1.4

Du kanske undrar varför vi ser två spårämnen. Detta beror på registerFont () Metod som inbäddar teckensnittet en gång till.

 Font.registerFont (DroidSerifRegular); Font.registerFont (DroidSerifBold); Font.registerFont (DroidSerifItalic); Font.registerFont (DroidSerifBoldItalic); var embeddedFonts: Array = Font.enumerateFonts (false); för varje (var-teckensnitt: teckensnitt i inbäddade fonter) trace ("Font Embedded:" + font.fontName + "" + font.fontStyle); 

Därefter kommer vi att skapa en SWF för kroppskopian. Den här gången lägger vi in ​​fyra teckensnitt, en för varje stil. I vårt andra Flash-dokument, välj återigen på bibliotekspanelen Ny teckensnitt ... I Familjens nedrullning, välj Droid Serif, och för Style, välj Regular. Skriv "DroidSerifRegular" i fältet Namn, och kom ihåg att ställa in Exportera till ActionScript. Därefter upprepa samma steg för karaktärsintervallet och fliken ActionScript. Upprepa denna process för de djärva, kursiva och kursiva djupa ansiktena. I handlingspanelen använder vi liknande kod till vad vi använde för hummerfonten.

Kör Publicera förhandsvisning. Den här gången kommer vi att se spårningsmeddelanden för varje Droid Serif-typsnitt. Om du ser färre än åtta kontrollerar du teckensnittsinställningarna i panelen Bibliotek, eftersom en av teckensnittsyten inte är inbäddad. Återigen notera namnet på teckensnittet från utdatatoggen.

 Droid Serif Normal Typsnitt Inbäddad: Droid Serif Normal Typsnitt Inbäddad: Droid Serif Kursiv Inbäddad: Droid Serif Kursiv Inbäddad: Droid Serif Fetisk Font Inbäddad: Droid Serif Kursiv Inbäddad: Droid Serif Fetisk Inbyggd: Droid Serif Normal Font Inbäddad: Droid Serif boldItalic

Publicera nu Droid Serif-teckensnittet till "... /deploy/fonts/DroidSerif.swf" och vi borde nu ha två font SWFs, Lobster.swf och DroidSerif.swf, i distribuera / fonts katalog.


Steg 5: Att lägga HTML i XML

Nästa tillgång vi ska skapa är en xml-fil. XML-filen kommer att bestå av ett element: ett block med HTML-formaterad text, som består av en rubrik och ett stycke som är byggt med standard HTML-märkning.

För att Flash ska kunna läsa HTML-filen som en XML-element måste den innehålla en CDATA-omslagare. CDATA används i XML-dokument för att indikera att en del av innehållet ska analyseras som teckenuppgifter istället för som uppmärkning.

   Ändrad storlek, HTML-formaterad TextField med Runtime Font Embedding & CSS Styling 

Detta är ett exempel på ett textfält som innehåller en inline-bild. Texten har laddats från en xml-fil och är utformad med ett externt css-formatark. Droid Serif-fontfamiljen, refererad av css, har laddats under körning. De stilar som finns tillgängliga för Droid Serif är djärv, kursiv och fet kursiv. Droid Serif skapades av Steve Matteson. Rubrikrubriken, Hummer, skapades av Pablo Impallari.

]]>

Spara den här filen som "content.xml" i xml mapp i distribuera katalog


Steg 6: Skapa CSS Stylesheet

Nu ska vi skapa CSS för att ställa in HTML. Titta på vår HTML, vi kan se att vi behöver skapa styling för h1, p och en. Texten i fetstil och kursiv taggar (b och jag) kommer att stylas automatiskt eftersom de här stilerna finns i vår paragrafsfamilj. Obs, du bör vara medveten om att Flash endast stöder en delmängd av CSS-egenskaper. Mer information finns i ActionScript 3.0-referensen.

Det är särskilt viktigt att vi riktar in rätt typsnitt för familjenamn i CSS. Var noga med att använda teckensnittsnamnet som visas i utdatarloggen när vi publicerade teckensnittsdokumenten (Hummer 1.4 och Droid Serif).

 h1 font-family: Hummer 1.4; font-size: 24; color: # 990.033;  p font-family: Droid Serif; font-size: 14; color: # 333333; ledande: 4;  en färg: # 000000; text-decoration: underline; 

Spara den här filen som "styles.css" i css mapp i distribuera katalog


Steg 7: Skapa dokumentklassen

Skapa en ny Flash-fil och spara som "HTMLTextBlockExample.fla" i källa katalogen. På panelen Publicera inställningar, rikta in på vår distribuera mapp. För html, använd "... /deploy/index.html" istället för standardnamnet. Skapa en ny .as-fil - "HTMLTextBlockExample.as" - för att vara dokumentklassen (se detta snabba tips för mer om dokumentklasser).

 paket import flash.display.MovieClip; public class HTMLTextBlockExample utökar MovieClip public function HTMLTextBlockExample (): void 

Steg 8: Ladda typsnitt

Därefter laddar vi typsnittet SWFs som vi skapade i vårt Flash-dokument. Låt oss skapa två variabler. En kommer att vara en Array av urlsträngarna för varje font SWF, och den andra kommer att vara en int Det kommer att hålla reda på hur många teckensnitt har laddats. Då skapar vi olika metoder för hantering av lastningen.

 paket importera flash.display.Loader; importera flash.display.MovieClip; importera flash.events.Event; importera flash.events.IOErrorEvent; importera flash.net.URLRequest; public class HTMLTextBlockExample utökar MovieClip offentliga varfonter: Array / * of String * / = ["teckensnitt / DroidSerif.swf", "teckensnitt / Lobster.swf"]; offentliga varfonterLadda: int = 0; allmän funktion HTMLTextBlockExample (): void loadFonts ();  Private Function loadFonts (): void för varje (var fontURL: String i teckensnitt) var fontLoader: Loader = new Loader (); fontLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, onFontLoaded); fontLoader.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, onFontLoadError); fontLoader.load (ny URLRequest (fontURL));  privat funktion onFontLoadError (händelse: IOErrorEvent): void trace ("FEL: kunde inte hitta teckensnitt" + event.target.loaderURL);  privat funktion onFontLoaded (händelse: händelse): void fontsLoaded ++; om (fonterLoaded == fonts.length) onFontsLoadComplete ();  privat funktion onFontsLoadComplete (): void trace (fonts.length + "teckensnitt har laddats"); 

Kör Publicera förhandsvisning och se till att båda teckensnittet är laddade.


Steg 9: Ladda XML och CSS

Att ladda XML- och CSS-filerna kommer att vara en liknande process för att läsa in skrifterna. Först måste vi importera några nya klasser.

 importera flash.net.URLLoader; importera flash.text.StyleSheet;

Vi kommer också att skapa en ny StyleSheet variabel som kommer att innehålla stilegenskaperna parsed från css-filen.

 public var textStyleSheet: StyleSheet;

Nu lägger vi till metoderna för att ladda tillgångarna.

 privat funktion onFontsLoadComplete (): void trace (fonts.length + "teckensnitt har laddats"); loadCSS ();  privat funktion loadCSS (): void var loader: URLLoader = ny URLLoader (); loader.addEventListener (Event.COMPLETE, onCSSLoadComplete); loader.load (ny URLRequest ("css / styles.css"));  privat funktion onCSSLoadComplete (händelse: Händelse): void textStyleSheet = new StyleSheet (); textStyleSheet.parseCSS (event.target.data); loadXML ();  privat funktion loadXML (): void var loader: URLLoader = ny URLLoader (); loader.addEventListener (Event.COMPLETE, onXMLLoadComplete); loader.load (ny URLRequest ("xml / content.xml"));  privat funktion onXMLLoadComplete (händelse: Händelse): void trace (XML (event.target.data) .toXMLString ()); 

Kör Publicera förhandsvisning, och du kommer se XML-filen som skrivs ut i utmatningsloggen.


Steg 10: Skapa en HTMLTextBlock-klass

Visa HTML-formaterad text är något du kanske gör ofta, så låt oss skapa en klass som vi kan använda om och om igen. Öppna en ny ActionScript-fil och spara den som "HTMLTextBlock.as" i källa katalog.

 paket import flash.display.Sprite; importera flash.text.StyleSheet; importera flash.text.AntiAliasType; importera flash.text.TextField; importera flash.text.TextFieldAutoSize; public class HTMLTextBlock utökar Sprite // bredden av htmlTextField. Standard är 550 pixlar. public var blockWidth: int = 550; // StyleSheet för htmlTextField. public var textStyleSheet: StyleSheet = nytt StyleSheet (); // Innehåller den html-formaterade texten. privat var htmlTextField: TextField = nytt TextField (); allmän funktion HTMLTextBlock () htmlTextField.embedFonts = true; htmlTextField.wordWrap = true; htmlTextField.multiline = true; htmlTextField.condenseWhite = true; htmlTextField.antiAliasType = AntiAliasType.ADVANCED; addChild (htmlTextField);  allmän funktion setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; 

Som du kan se har vår klass tre variabler. Den privata variabeln htmlTextField kommer att innehålla HTML-formaterad text. Den offentliga variabeln blockWidth styr bredden på htmlTextField, och textStyleSheet innehåller CSS styling som appliceras på htmlTextField. I konstruktören ställer vi fastigheter för htmlTextField och lägg till den i visningslistan. Sist skapar vi setHTML () för att infoga HTML-formaterad text htmlTextField.


Steg 11: Använd HTMLTextBlock i vårt huvuddokument

Nu när vi har en anpassad klass för att visa HTML-text, låt oss använda den. Börja med att ändra onXMLLoadComplete () att skicka XML-data som en sträng till en ny metod som kommer att användas HTMLTextBlock för att visa HTML.

 privat funktion onXMLLoadComplete (händelse: Händelse): void // få xml från händelsemåldata var xml: XML = XML (event.target.data); // konvertera xml till en sträng var xmlString: String = xml; // skicka xml-sträng till displayenHTML-metodvisningHTML (xmlString);  privatfunktionsdisplayHTML (htmlText: String): void var htmlTextBlock: HTMLTextBlock = new HTMLTextBlock (); // Ange bredden och styling htmlTextBlock.blockWidth = 420; htmlTextBlock.textStyleSheet = textStyleSheet; // skicka html-strängen till HTMLTextBlock-klassen htmlTextBlock.setHTML (htmlText); // Ange position och lägg till till scenen htmlTextBlock.x = 20; htmlTextBlock.y = 10; addChild (htmlTextBlock); 

Resultatet:


Steg 12: Lägg till en inline-bild

Därefter lägger vi till en bild i vårt block av text. Du kan använda bilden i källfilerna i den här handledningen, eller skapa din egen.

Öppna content.xml, och i början av stycket använder du en grundläggande HTML tagg för att bädda in bilden. Din XML ska nu se ut så här:

   Ändrad storlek, HTML-formaterad TextField med Runtime Font Embedding & CSS Styling 

Detta är ett exempel på ett textfält som innehåller en inline-bild. Texten har laddats från en xml-fil och är utformad med ett externt css-formatark. Droid Serif-fontfamiljen, refererad av css, har laddats under körning. De stilar som finns tillgängliga för Droid Serif är djärv, kursiv och fet kursiv. Droid Serif skapades av Steve Matteson. Rubrikrubriken Hummer skapades av Pablo Impallari

]]>

Nu ser SWF ut detta:

Justeringen av bilden och texten verkar inte riktigt rätt än. Vi kommer att förbättra det i de steg som ska komma.


Steg 13: Ge bilden ett ID

När vi kommer fram i handledningen skriver vi metoder som riktar inline-bilden. För att göra detta måste vi lägga till en id attribut till vårt bildbädds tagg som kan refereras till i ActionScript. Öppna content.xml och uppdatera märka enligt följande:

 ]]>

Steg 14: Upptäck TextField Ändra storlek

För att justera bildens anpassning behöver vi ändra dess x och y värden. Vi måste emellertid göra det efter att bilden läggs till och texten refloeds. För att uppnå detta lägger vi till en händelse lyssnare i HTMLTextBlock klass.

Först importera några ytterligare klasser:

 importera flash.display.DisplayObject; importera flash.display.Loader; importera flash.events.Event;

Uppdatera sedan setHTML () metod och skapa en händelsehanterare för när htmlTextField är storlek.

 allmän funktion setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("bild") som Loader; om (loader) // lägg till händelse lyssnare för när htmlTextField ändras från att lägga till bilden htmlTextField.addEventListener (Event.CHANGE, onImageAdded);  // annars finns ingen bildreferens, så gör inte något privat funktion onImageAdded (händelse: Händelse): void // tillgång till bilden från bildreferensen i textfältet var loader: Loader = htmlTextField.getImageReference ("bild") som Loader; var bild: DisplayObject = loader.content; 

Steg 15: Justera bildjusteringen

Lägg märke till hur bilden inte stämmer ordentligt med texten? Detta beror på att Flash automatiskt lägger till horisontellt och vertikalt avstånd runt bilden. Vi kan justera mängden av avstånd genom att ställa in hspace och vspace attribut i märka.

 ]]>

När man tittar på SWF, justeras bilden snyggt i stycket, men texten är för nära bilden.

Det verkar som om vi behöver lite avstånd trots allt. Uppdatera bildtaggattributen för att vara hspace = "5" vspace = "2". Detta ger oss bättre avstånd, men än en gång kommer bilden inte att anpassas till den övre delen av stycket. Vi kan åtgärda detta genom att redigera x värdet av bilden i onImageAdded ().

 privat funktion onImageAdded (händelse: händelse): void // tillgången till bilden från bildreferensen i textfältet var loader: Loader = htmlTextField.getImageReference ("image") som Loader; var bild: DisplayObject = loader.content; // justera x-positionen för bilden för att kompensera hspace image.x - = 5; 

Steg 16: Justera punktavstånd

Bilden är finjusterad, men stycket verkar lite för nära huvudet. Om vi ​​arbetade på en HTML-sida kunde vi justera vaddering eller marginal på p eller h1 taggar, men tyvärr stöder Flash inte någon CSS-styling för vertikal inriktning mellan stycken. Den bästa lösningen vi har är att skapa en ny CSS-stil bara för linjeavstånd. Öppna styles.css och lägg till följande stil:

 br6 font-size: 6; 

Uppdatera content.xml med en tom br6 stil tagg.

 ]]>

Och nu har linjeavståndet mellan rubrik och punktjustering förbättrats subtilt.


Steg 17: Förhindra rullningsfelet

Öppna SWF, och klicka sedan och dra ner medan du markerar texten. Du kanske märker något ovanligt hänt. Topplinjen i vår rubrik har försvunnit. Om du drar tillbaka uppåt visas den igen. På Windows-maskiner kan du se att samma effekt uppstår om du sveper över texten och bläddrar i mousewheelen i en webbläsare.

Lösningen för detta, med tillstånd av Destroy Today-bloggen, är att stänga av automatiskt när texten inuti har ändrats. Först uppdatera setHTML () metod och sedan onImageAdded ().

 allmän funktion setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("bild") som Loader; om (loader) // lägg till händelse lyssnare för när htmlTextField ändras från att lägga till bilden htmlTextField.addEventListener (Event.CHANGE, onImageAdded);  annars // det finns ingen bildreferens, så vrid automatiskt av htmlTextField.autoSize = TextFieldAutoSize.NONE;  privat funktion onImageAdded (händelse: händelse): void // tillgång till bilden från bildreferensen i textfältet var loader: Loader = htmlTextField.getImageReference ("image") som Loader; var bild: DisplayObject = loader.content; // justera x-positionen för bilden för att kompensera hspace image.x - = 5; // vrid autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE; 

Publicera, och du kommer se att vår buggfix har skapat ett nytt problem.

Nu är höjden på textfältet inte tillräckligt stor för att visa all text, och de två nedre linjerna är inte synliga. Vi kommer att åtgärda detta i vårt nästa steg.


Steg 18: Justera TextFieldens höjd

För att få hela texten att synas måste vi öka höjden på HTMLTextField. Om vi ​​bara ökar höjden med 50 pixlar efter att bilden läggs till, är problemet löst.

 htmlTextField.height + = 50;

Men den här lösningen känns inte rätt. Vad händer om vi använder en annan storleksbild? Olika teckensnitt eller styling? Det bästa sättet att lösa problemet är att justera höjden dynamiskt baserat på de värden Flash använder för att bestämma höjden. Den uppenbara taktiken skulle vara att använda texthöjd parameter. Vi provar det.

 htmlTextField.height = htmlTextField.textHeight;

Det är bättre, men textens botten är fortfarande dolt. När vi gör en del undersökningar (t ex den här bloggposten) kan vi konstatera att det finns två värden som måste läggas till i höjden. En är den högsta ledande värdet av de textstilar vi använder. I det här fallet skulle det vara 4 (från p stil). Det andra värdet är htmlTextField.maxScrollV. Om vi ​​lägger till summan av dessa värden plus en säkerhetsjustering på 2 pixlar, till höjden, HTMLTextField kommer att vara rätt storlek, oberoende av vilka teckensnitt, styling eller bilder som används. I stället för att göra det här onImageAdded (), skapa en ny funktion för att låsa höjden på textblocket.

 privat funktion onImageAdded (händelse: händelse): void // tillgången till bilden från bildreferensen i textfältet var loader: Loader = htmlTextField.getImageReference ("image") som Loader; var bild: DisplayObject = loader.content; // justera x-positionen för bilden för att kompensera hspace image.x - = 5; // Låsa höjden på textfältet för att förhindra att du rullar bugglåsHet ();  privat funktion lockHeight (): void // vrid autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE; htmlTextField.height = htmlTextField.textHeight; // få höjdjustering // först, loop genom StyleSheet-stilar för att få högsta ledande värde var highestLeading: int = 0; för varje (varstil: String i textStyleSheet.styleNames) var ledande: int = int (textStyleSheet.getStyle (style) .leading); om (highestLeading < leading) highestLeading = leading;  // now, get the value of the height adjustment var heightAdjust:int = htmlTextField.maxScrollV + highestLeading + 2; htmlTextField.height += heightAdjust; 

De setHTML () Metoden behöver också uppdateras. När ingen inline-bild laddas i textblocket måste höjden vara låst.

 allmän funktion setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("bild") som Loader; om (loader) // lägg till händelse lyssnare för när htmlTextField ändras från att lägga till bilden htmlTextField.addEventListener (Event.CHANGE, onImageAdded);  annars // det finns ingen bildreferens, lås höjden på textfältet lockHeight (); 

Med dessa senaste justeringar är hela texten nu synlig och kommer inte att bläddra.


Steg 19: Lägg till anpassad TextEvent Link

Vår sista uppgift i denna handledning är att lägga till en textlänk som ändrar textblocket. För att göra detta måste vi först lägga till länken till HTML-texten i content.xml fil.

   Ändrad storlek, HTML-formaterad TextField med Runtime Font Embedding & CSS Styling  

Detta är ett exempel på ett textfält som innehåller en inline-bild. Texten har laddats från en xml-fil och är utformad med ett externt css-formatark. Droid Serif-fontfamiljen, refererad av css, har laddats under körning. De stilar som finns tillgängliga för Droid Serif är djärv, kursiv och fet kursiv. Droid Serif skapades av Steve Matteson. Rubrikrubriken, Hummer, skapades av Pablo Impallari.

Vi kan lägga till händelser i textlänkar. Till exempel, öka eller minska bredden på textfältet.

]]>

Steg 20: Lägg till TextEvent Listener

I vår HTMLTextBlock klass, lägg till en händelse lyssnare för att upptäcka när en textlänk är klickad. Först importera Textevent klass.

 importera flash.events.TextEvent;

Lägg till händelselyssnaren i konstruktören.

 htmlTextField.addEventListener (TextEvent.LINK, textLinkHandler);

Skapa nu händelsehanteringsmetoden.

 privat funktion textLinkHandler (händelse: TextEvent): void trace (event.text); 

Kör publicera förhandsgranskning. När du klickar på texthändelselänkarna ser du heller increaseWidth eller decreaseWidth i utgångsloggen.


Steg 21: Lägg till funktion för att ändra bredd

Skapa en ny metod som ändrar bredden på htmlTextField.

 privat funktion changeWidth (newWidth: int): void blockWidth = newWidth; // låsa upp höjden på textfältet htmlTextField.autoSize = TextFieldAutoSize.LEFT; // ändra bredden htmlTextField.width = blockWidth; // låsa upp höjden lockHeight (); 

Steg 22: Uppdatera Text Link Handler

Uppdatera textlänkhanteraren för att ringa changeWidth ().

 privat funktion textLinkHandler (händelse: TextEvent): void if (event.text == "increaseWidth") changeWidth (blockWidth + 10); om (event.text == "decreaseWidth") changeWidth (blockWidth - 10); 

Genom att klicka på textlänkarna för ökning / minskning justeras bredden på textblocket med 10 pixlar.


Slutsats

Som det ses i handledningen kan det vara svårare att använda HTML-formaterat innehåll i CSS-format i Flash än vad det först kan tyckas. Nu när vi har lärt oss grunderna kan du tillämpa denna kunskap i dina egna projekt. Här är några förslag till fortsatt utveckling:

  • Använd kod från handledningen för att skapa byggstenar för Flash-webbplatser och komponenter.
  • Utvid HTMLTextBlock för att inkludera egenskaper i CSS Box Model.
  • Ladda, analysera och visa HTML laddad från externa källor, till exempel ett RSS-flöde.
  • Genom att hålla dem åtskilda från Flash-dokumentet kan du använda innehållsobjekten för att bygga webbplatser och applikationer som inte är Flash, t.ex. iPad eller iPhone.

Tack för att du läste den här handledningen, och jag hoppas att du hittar den användbar i framtiden. Blinkar!