Master HTML formatert tekst i Flash

Master HTML formatert tekst i Flash
en
Del
Del
Del

Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.

Vi kommer til å se på hvordan du kan vise HTML-formatert tekst lastet fra XML, stylet fra en ekstern CSS stilark med fonter lastet under kjøring. Vi vil også mestre inline bildeplassering via HTML < img > embed tag, og legge til egendefinerte hendelser til HTML-tekstlenker

Trinn 1:.? Hvorfor bruke HTML-formatert tekst og eksterne midler

Det er sikkert lett å holde alle eiendeler direkte i Flash kildefilen selv, og noen ganger som kan være den beste løsningen. Men det er noen gode grunner til å holde så mye innhold atskilt fra din Flash dokument som mulig, eller til å holde din Flash kilde utelukkende består utelukkende av Actionscript.

Oppdateringer er enklere. I stedet for å kreve en Flash-utvikler til å sprekke åpne FLA og publiserer, er alt som er nødvendig for en enkel redigerings til html eller css.
Flere bruksområder. Den eksternt innhold er tilgjengelig for bruk i andre programmer, for eksempel for å lage en HTML5-versjon av nettstedet for iPad.
OOP. Best av alt, holde innholdet atskilt fra levering søknaden er god objektorientert programmering. Metoder som dette er byggesteiner for å utvikle systemer, maler og komponenter for gjenbruk og rask utvikling

Trinn 2:. Sett opp Package Katalog

Fordi vi skal jobbe med en rekke eiendeler, er det nyttig å sette opp et velorganisert fil katalogstruktur. Først oppretter vi en "HTMLTextBlock" -prosjektet katalogen. Innenfor det, legge til en "kilde" -mappen og en "rulle" -mappen. I distribuere
, vil vår SWF ligge i øverste nivå sammen med mapper for hver type innhold. I denne demoen, vil vi lage en SWF som laster fonter, CSS, XML og et bilde. Kildemappen vil inneholde alle våre FLA og .as filer, som vi vil skape senere. For nå, bør prosjektkatalog se slik ut:

Trinn 3: Velg dine Fonts

Før du bygger inn skrifter på nettstedet ditt, er det viktig å være klar over skriften lisensiering. Bare fordi du har en font installert, selv en du har rettigheter til å bruke for utskrift, betyr ikke at du har tillatelse til å bruke det på nettet. For mer informasjon om font lisensiering, refererer til denne Themeforest artikkelen.

I denne opplæringen, vil vi bruke to fonter, en for overskriften og en for brødtekst. Et godt sted å finne høy kvalitet, åpen kildekode-fonter er Google Font Directory. Du kan ikke laste ned skriftfilene direkte derfra, men de kan lett bli funnet med et nettsøk. Font Squirrel og Typekit er to flere gode ressurser for høy kvalitet fonter.

Når du velger en overskrift font, se etter en stil som uttrykker personligheten din design. For brødtekst, er lesbarhet veldig viktig, så bruk en skrift som viser godt i små størrelser. Sørg også for å velge en skriftfamilie med fet, kursiv og fet kursiv ansikter. For denne opplæringen, vil vi bruke skriften Lobster av Pablo Impallari for overskrifter, og skriftfamilien Droid Serif av Steve Matteson for avsnitt.

Hurtig online søk avslører hvor vi kan laste ned Hummer skrift og Droid Serif font familien. I vår kilde katalog, opprette en ny mappe "ned skrifter" og sette skriftfilene der

Trinn 4:. Opprette SWF-filer for Runtime Font Embedding

Aktiver skriftene på systemet ditt. Åpne to nye Actionscript 3.0 Flash dokumenter, ett for hver skrift, og lagre til kilde katalog. Vi vil starte med overskriften font. Fra Bibliotek-panelet, velg "New Font ..." og i Slektstre nedtrekksmenyen velger du Hummer 1,4
. Under navn, type "Hummer". For Tegn varierer
, sjekk All
. Merk: dersom du bruker en font der du vet at du ikke skal bruke visse tegn, kan du velge å legge inn et delsett av tegn fra skriften, minske filstørrelsen for SWF.

Deretter går til kategorien Actionscript. Under Heis
velger Eksporter for Action
. Når du gjør det, Export i ramme en
vil bli sjekket, og de Klasse Kjøpe og Base Class
identifikatorer vil bli fylt i. Klikk på Ferdig Anmeldelser . Hvis du får en advarsel om at klassen definisjon ikke ble funnet, ignorere det.

Neste, i Publish Settings panel, fjerner HTML
boksen og, i Flash
-feltet, målrette fonter
mappe i distribuere katalog ved å skrive "../deploy/fonts/Lobster.swf". Dette er alt som er nødvendig for å bygge inn en skrift i en SWF.

Men hvis vi ønsker å være i stand til å laste SWF inn i en annen SWF og bruke sine innebygde skrifter under kjøring, må vi registrere skriften. Så, i Handlinger panelet, må vi legge til en linje kode for å ramme en på tidslinjen:
Font.registerFont (Hummer);
Nå, vår skrift vil være tilgjengelig for bruk i eventuelle Flash dokumenter som lastes SWF . Vi kunne gjøres her, men vi ønsker å sjekke vårt arbeid, og, enda viktigere, få riktig font-family navn til bruk i våre CSS. Legg litt mer kode
Var embeddedFonts: Array = Font.enumerateFonts (falsk), for hver (var font: Font i embeddedFonts). {Trace ("Font Embedded:" + font.fontName);}
Kjør Publish Preview, og vi vil se meldingen nedenfor i utgangs loggen. Legg merke til navnet på fonten. Vi vil trenge det senere
Font Embedded. Lobster 1.4Font Embedded: Lobster 1.4
Du lurer kanskje på hvorfor vi ser to spore uttalelser. Dette skyldes registerFont () -metoden embedding skrift en andre time.
Font.registerFont(DroidSerifRegular);Font.registerFont(DroidSerifBold);Font.registerFont(DroidSerifItalic);Font.registerFont(DroidSerifBoldItalic);var embeddedFonts: Array = Font.enumerateFonts (false); for hver (var font: Font i embeddedFonts) {trace ("Font Embedded:" + font.fontName + "" + font.fontStyle);}
Neste, vi vil skape en SWF for kroppen kopi. Denne gangen er vi bygge fire skrifttyper, en for hver stil. , Igjen, fra Bibliotek-panelet, velger i vår andre Flash dokument New Font ...
i familien nedtrekksmenyen velger Droid Serif, og for Style, velg Regular. Skriv "DroidSerifRegular" i navnefeltet, og husk å sette Eksporter for Action
. Deretter gjenta de samme trinnene for karakteren serier og fanen Actionscript. Gjenta denne prosessen for fet, kursiv og kursiv fet ansikter. I handlinger panel, vil vi bruke samme kode til hva vi brukte for Hummer font.

Kjør Publish Preview. Denne gangen vil vi se spormeldinger for hvert av Droid Serif skriftstiler. Hvis du ser færre enn åtte, sjekk skriftinnstillinger i Bibliotek-panelet, fordi en av skrifttypene ikke blir innebygd. Igjen, legg merke til fontnavnet fra utdataene loggen
Font Embedded. Droid Serif regularFont Embedded: Droid Serif boldFont Embedded: Droid Serif italicFont Embedded: Droid Serif boldItalicFont Embedded: Droid Serif italicFont Embedded: Droid Serif boldFont Embedded: Droid Serif regularFont Embedded: Droid Serif boldItalic
Nå publisere Droid Serif font til "../deploy/fonts/DroidSerif.swf" og vi skal nå ha to skrift SWF, Lobster.swf Hotell og DroidSerif.swf
, i distribuere /fonter katalog

Trinn 5:. Putting HTML til XML

Det neste eiendelen vil vi skape er en xml fil. XML vil bestå av ett element. En blokk med HTML-formatert tekst, sammensatt av en overskrift og avsnitt bygget med standard HTML tagging

For Flash til å lese HTML som en XML element enhet, det må ligge inne i en CDATA wrapper. CDATA brukes innenfor XML dokumenter for å indikere en del av innholdet er å bli tolket som data karakter i stedet for som markup
. ≪? Xml version = "1.0" encoding = "UTF-8" >? ≪ xml > <! [CDATA [< h1 > Resizeable, HTML-formatert Textfield Med Runtime Font Embedding & CSS Styling < /h1 > Dette er et eksempel på et tekstfelt som inneholder en innebygd bilde. Teksten har blitt lastet inn fra en XML-fil, og er stylet med en ekstern css stilark. Droid Serif font familien, referert av den css, har blitt lastet under kjøring. Valgmulighetene for Droid Serif er fet , kursiv og fet kursiv . < a href = "http://code.google.com/webfonts/family?family=Droid+Serif" > Droid Serif < /a > ble opprettet av < a href = "http://code.google.com/webfonts/designer?designer=Steve+Matteson" > Steve Matteson < /a >. Overskriften font, < a href = "http://code.google.com/webfonts/family?family=Lobster" > Lobster < /a >, ble opprettet av < a href = "http: //kode .google.com /Webfonts /designer designer = Pablo + Impallari ">? Pablo Impallari < /a >. ]] > < /xml >
Lagre denne filen som "content.xml" i xml
mappe i distribuere katalog

Trinn 6: Lag CSS-stilark

Nå vil vi lage CSS til å style HTML. Ser vi på vår HTML, kan vi se at vi trenger for å lage styling for h1
, p Hotell og en
. Teksten i fet og kursiv tags ( b Hotell og i
) vil bli stylet automatisk siden disse stilene er til stede i våre ledd skriftfamilie. Legg merke til, bør du være oppmerksom på at Flash støtter bare et delsett av CSS egenskaper; refererer til Actionscript 3.0 Referanse for flere detaljer.

Det er spesielt viktig at vi målrette riktig font-family navn i CSS. Pass på å bruke skriftnavn som ble vist i utdataene loggen når vi publiserte skrift dokumenter ( Hummer 1,4 Hotell og Droid Serif
)
h1 {font-family:. Lobster 1,4; font-size: 24; color: # 990033;} p {font-family: Droid Serif; font-size: 14; color: # 333333; ledende: 4;} a {color: # 000000; text-decoration: under;}
Lagre denne filen som "styles.css" i css
mappe i distribuere katalog

Trinn 7 : Opprett dokument Class

Opprett en ny Flash-fil og lagre som "HTMLTextBlockExample.fla" i kilde katalog. I Publish Settings panel, målrette vår distribuere
mappe. For HTML
, bruk "../deploy/index.html" i stedet for standardnavnet. Opprett en ny .as fil - "HTMLTextBlockExample.as" - å være dokumentet klassen (se denne rask spiss for mer om dokument klasser)
pakke {import flash.display.MovieClip;. public class HTMLTextBlockExample strekker MovieClip {offentlig funksjon HTMLTextBlockExample (): void {}}}

Trinn 8: Legg i Fonts

Deretter vil vi laste skrift SWF vi opprettet i vår Flash dokument. La oss lage to variabler. En vil være en Array av URL strenger for hver skrift SWF, og den andre vil være en int som vil holde styr på hvor mange fonter har lastet. Deretter vil vi lage ulike metoder for å håndtere laste
pakke {import flash.display.Loader.; import flash.display.MovieClip; import flash.events.Event; import flash.events.IOErrorEvent; import flash.net.URLRequest; public class HTMLTextBlockExample strekker MovieClip {offentlig Var fonter: Array /* av String * /= ["fonter /DroidSerif.swf", "fonter /Lobster.swf"]; offentlig Var fontsLoaded: int = 0; offentlig funksjon HTMLTextBlockExample (): void {loadFonts (); } Private funksjon loadFonts (): void {for hver (var fontURL: String i skrifter) {var FontLoader: Loader = new Loader (); fontLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, onFontLoaded); fontLoader.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, onFontLoadError); fontLoader.load (ny URLRequest (fontURL)); }} Privat funksjon onFontLoadError (event: IOErrorEvent): void {trace ("FEIL: Kunne ikke finne skrift" + event.target.loaderURL); } Private funksjon onFontLoaded (hendelse: Hendelse): void {fontsLoaded ++; if (fontsLoaded == fonts.length) onFontsLoadComplete (); } Private funksjon onFontsLoadComplete (): void {trace (fonts.length + "fonter har blitt lastet"); }}}
Kjør Publish Preview, og se at begge skrifttyper er lastet

Trinn 9:. Legg den XML og CSS

Legge XML og CSS-filer vil være en lignende prosess for å laste skriftene. Først må vi importere noen nye klasser
import flash.net.URLLoader;. Import flash.text.StyleSheet;
Vi vil også opprette et nytt Stylesheet variabel som skal inneholde styling egenskaper analysert fra css-filen.
offentlig Var textStyleSheet: Stylesheet;
Nå legger vi de metoder for lasting av eiendeler
privat funksjon onFontsLoadComplete (). void {trace (fonts.length + "fonter har blitt lastet"); loadCSS ();} private funksjon loadCSS (): void {var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, onCSSLoadComplete); loader.load (ny URLRequest ("css /styles.css"));} private funksjon onCSSLoadComplete (hendelse: Hendelse): void {textStyleSheet = new Stylesheet (); textStyleSheet.parseCSS (event.target.data); LoadXML ();} private funksjon LoadXML (): void {var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, onXMLLoadComplete); loader.load (ny URLRequest ("xml /content.xml"));} private funksjon onXMLLoadComplete (hendelse: Hendelse): void {trace (XML (event.target.data) .toXMLString ());}
Run Publish Preview, og du vil se XML trykt i utgangs log

Trinn 10:. Lag en HTMLTextBlock Class

Vise HTML-formatert tekst er noe du kan gjøre ofte, så la oss lage en klasse som vi kan bruke om og om igjen. Åpne en ny Actionscript-fil og lagre den som "HTMLTextBlock.as" i kilde katalog
pakke {import flash.display.Sprite.; import flash.text.StyleSheet; import flash.text.AntiAliasType; import flash.text.TextField; import flash.text.TextFieldAutoSize; public class HTMLTextBlock strekker Sprite {//Bredde på htmlTextField. Standard er 550 piksler. offentlig Var blockWidth: int = 550; //Stylesheet for htmlTextField. offentlig Var textStyleSheet: Stylesheet = new Stylesheet (); //Inneholder html-formatert tekst. private Var htmlTextField: Textfield = new Textfield (); offentlig funksjon HTMLTextBlock () {htmlTextField.embedFonts = true; htmlTextField.wordWrap = true; htmlTextField.multiline = true; htmlTextField.condenseWhite = true; htmlTextField.antiAliasType = AntiAliasType.ADVANCED; addChild (htmlTextField); } Offentlig funksjon setHTML (htmlText: String): void {htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; }}}
Som du kan se, har vår klasse tre variabler. Den private variable htmlTextField vil inneholde HTML-formatert tekst. Den offentlige variable blockWidth styrer bredden på htmlTextField, og textStyleSheet inneholder CSS styling som blir brukt til htmlTextField. I konstruktøren, setter vi eiendommer for htmlTextField og legge den til i listen displayet. Sist, skaper vi setHTML () for å sette HTML-formatert tekst i htmlTextField

Trinn 11:. Bruk HTMLTextBlock i vår hoveddokument

Nå som vi har en egendefinert klasse for visning av HTML tekst, la oss bruke den. Start med å endre onXMLLoadComplete () til å sende XML-data som en streng til en ny metode som skal bruke HTMLTextBlock å vise HTML
privat funksjon onXMLLoadComplete (hendelse: Hendelse):. Void {//få xml fra hendelsen måldata Var xml : XML = XML (event.target.data); //Konvertere xml til en streng Var xmlString: String = xml; //Sende xml strengen til displayHTML metoden displayHTML (xmlString);} private funksjon displayHTML (htmlText: String): void {var htmlTextBlock: HTMLTextBlock = new HTMLTextBlock (); //Angi bredden og styling htmlTextBlock.blockWidth = 420; htmlTextBlock.textStyleSheet = textStyleSheet; //Sende html strengen til HTMLTextBlock klassen htmlTextBlock.setHTML (htmlText); //Satt posisjon og legge til scenen htmlTextBlock.x = 20; htmlTextBlock.y = 10; addChild (htmlTextBlock);}
Resultatet:

Trinn 12: Legg en Inline Bilde

Deretter vil vi legge til et bilde til vår blokk med tekst. Du kan bruke bildet i kildefilene for denne opplæringen, eller lage din egen

Åpne content.xml
, og i begynnelsen av avsnittet, kan du bruke en enkel HTML. ≪ img > tag å legge inn bildet. Din XML skal nå se slik ut:?
≪ xml version = "1.0" encoding = "UTF-8" > < xml > <! [CDATA [< h1 > Resizeable, HTML-formatert Textfield Med Runtime Font Embedding & CSS Styling < /h1 > < img src = "http://activetuts.s3.amazonaws.com/tuts/208_HTMLtext/tutorial/images/image.png" /> Dette er et eksempel på et tekstfelt som inneholder en innebygd bilde. Teksten har blitt lastet inn fra en XML-fil, og er stylet med en ekstern css stilark. Droid Serif font familien, referert av den css, har blitt lastet under kjøring. Valgmulighetene for Droid Serif er fet , kursiv og fet kursiv . < a href = "http://code.google.com/webfonts/family?family=Droid+Serif" > Droid Serif < /a > ble opprettet av < a href = "http://code.google.com/webfonts/designer?designer=Steve+Matteson" > Steve Matteson < /a >. Overskriften font < a href = "http://code.google.com/webfonts/family?family=Lobster" > Lobster < /a > ble opprettet av < a href = "http://code.google.com/webfonts/designer?designer=Pablo+Impallari" > Pablo Impallari < /a > ]] > < /xml >
Nå, SWF vil se dette:

justering av bildet og teksten synes ikke helt riktig ennå. Vi vil forbedre det i fremgangsmåten for å komme

Trinn 13:. Gi bildet et ID

Kommer opp i opplæringen, vil vi være å skrive metoder som er rettet mot den innebygde bildet. For å gjøre dette, må vi legge en id-attributt til vårt bilde embed-kode som kan refereres i Actionscript. Åpne content.xml Hotell og oppdatere < img > tag som følger:
< [CDATA [< img src = "http://activetuts.s3.amazonaws.com/tuts/208_HTMLtext/tutorial/images/image.png" id = "image" />]] >

Trinn 14: Oppdage Textfield Resize

For å justere justering av bildet, må vi endre sin x Hotell og y
verdier. Men vi må gjøre det etter at bildet er lagt og teksten tilpasses. For å oppnå dette, vil vi legge til en hendelse lytteren til HTMLTextBlock klassen

Først importere noen ekstra klasser:
import flash.display.DisplayObject, import flash.display.Loader, import flash.events.. hendelse;
Deretter oppdatere setHTML () metoden og lage en hendelseshåndterer for når htmlTextField er endret
offentlig funksjon setHTML (htmlText: String):. void {htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; Var loader: Loader = htmlTextField.getImageReference ("image") som Loader; if (loader) {//legge hendelsen lytteren for når htmlTextField er endret fra å legge bildet htmlTextField.addEventListener (Event.CHANGE, onImageAdded); } //Annet, er det ingen bildereferanse, så ikke gjør noe} privat funksjon onImageAdded (hendelse: Hendelse): void {//tilgangs bildet fra bildereferanse i tekstfeltet Var loader: Loader = htmlTextField.getImageReference ("image") som Loader; Var bilde: Displayobject = loader.content;}

Trinn 15: Juster Bilde Alignment

Legg merke til hvordan bildet ikke stille opp ordentlig med teksten? Dette er fordi Flash legger horisontal og vertikal avstand automatisk rundt bildet. Vi kan justere mengden av avstanden ved å sette hspace og vspace attributter i < img > . tag
<! [CDATA [< img src = "http://activetuts.s3.amazonaws.com/tuts/208_HTMLtext/tutorial/images/image.png" id = "image" hspace = "0 "vspace =" 0 "/>]] >
Ser på SWF, nå bildet er justert pent innenfor avsnittet, men teksten er for nær bilde

Ser ut som vi. trenger litt avstand tross alt. Oppdatere bildekode attributter å være hspace = "5" vspace = "2". Dette gir oss bedre avstand, men nok en gang at bildet ikke vil være på linje med venstre kant av avsnittet. Vi kan fikse dette ved å redigere x verdien av bildet i onImageAdded ()
privat funksjon onImageAdded. (Hendelse: Hendelse): void {//tilgangs bildet fra bildereferanse i tekstfeltet Var loader: Loader = htmlTextField .getImageReference ("image") som Loader; Var bilde: Displayobject = loader.content; //Justere x plasseringen av bildet for å oppveie hspace image.x - = 5;}

Trinn 16: Juster avsnittsavstand

Bildet er justert pent, men avsnittet virker litt for nær overskriften. Hvis vi jobber på en HTML-side, kan vi justere padding eller margin på p
eller h1
tags, men dessverre Flash støtter ikke noen CSS styling for vertikal justering mellom avsnitt . Den beste løsningen vi har er å lage en ny CSS stil bare for linjeavstand. Åpne opp styles.css
og legg til følgende type:
br6 {font-size: 6;}.
Oppdater content.xml med en tom br6
stil tag
<! [CDATA [< br6 > < /br6 >]] >.
Og nå har linjeavstanden mellom overskriften og avsnittsjustering blitt subtilt forbedret

Trinn 17: Forhindre rulling Bug

Åpne SWF, og klikk og dra ned mens du velger teksten. Du kan legge merke til noe uvanlig skjer. Den øverste linjen vår overskrift har forsvunnet. Hvis du drar tilbake oppover, vil det dukke opp igjen. På Windows-maskiner, kan du se den samme effekten oppstå hvis du holder over teksten og rulle musehjulet i en nettleser.

Løsningen på dette, høflighet av Destroy dag bloggen, er å slå av autosizing etter tekst inne har blitt endret. Først oppdatere setHTML () -metoden, og deretter onImageAdded ()
offentlig funksjon setHTML (htmlText: String):. Void {htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; Var loader: Loader = htmlTextField.getImageReference ("image") som Loader; if (loader) {//legge hendelsen lytteren for når htmlTextField er endret fra å legge bildet htmlTextField.addEventListener (Event.CHANGE, onImageAdded); } Else {//det ikke er bilde referanse, så slå autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE; }} Privat funksjon onImageAdded (hendelse: Hendelse): void {//tilgangs bildet fra bildereferanse i tekstfeltet Var loader: Loader = htmlTextField.getImageReference ("image") som Loader; Var bilde: Displayobject = loader.content; //Justere x plasseringen av bildet for å oppveie hspace image.x - = 5; //Slå autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE;}
Publiser, og du vil se at vår bug fix har skapt et nytt problem

Nå er ikke store høyden på tekstfeltet. nok til å vise all teksten, og de to nederste linjene er ikke synlig. Vi vil fikse dette i vårt neste skritt

Trinn 18:. Høydejustering av den Textfield

For å få all teksten skal være synlig, må vi øke høyden på HTMLTextField . Hvis vi bare øke høyden med 50 piksler etter at bildet blir lagt til, er problemet løst
htmlTextField.height + = 50;.
Men denne løsningen ikke føles riktig. Hva om vi bruker et bilde forskjellig størrelse? Ulike fonter eller styling? Den beste måten å løse problemet er å justere høyden dynamisk, basert på verdiene som Flash er brukt for å bestemme høyden. Den åpenbare taktikken ville være å bruke Viser korrekt teksthøyde parameter. La oss prøve det
htmlTextField.height = htmlTextField.textHeight;.
Det er bedre, men den nederste tekstlinje er fortsatt skjult. Ved å gjøre noen undersøkelser (f.eks dette blogginnlegget), kan vi finne at det er to verdier som må legges til høyden. Den ene er den høyeste ledende verdien av tekststiler vi bruker. I dette tilfellet ville det være 4 (fra p
stil). Den andre verdien er htmlTextField.maxScrollV. Hvis vi legger summen av disse verdiene, samt en justering sikkerheten til 2 piksler, til høyden, vil HTMLTextField være riktig størrelse, uavhengig av hvilke skrifter, styling eller bilder er brukt. I stedet for å gjøre dette i onImageAdded (), oppretter en ny funksjon for å låse høyden på tekstblokken
privat funksjon onImageAdded (hendelse: Hendelse):. Void {//tilgangs bildet fra bildereferanse i tekstfeltet Var loader: Loader = htmlTextField.getImageReference ("image") som Loader; Var bilde: Displayobject = loader.content; //Justere x plasseringen av bildet for å oppveie hspace image.x - = 5; //Låse høyden på tekstfeltet for å hindre rulle bug lockHeight ();} private funksjon lockHeight (): void {//slå autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE; htmlTextField.height = htmlTextField.textHeight; //Få høydejustering //først, loop gjennom stilark stiler for å få høyest ledende verdi Var highestLeading: int = 0; for hver (var stil: String i textStyleSheet.styleNames) {var ledende: int = int (textStyleSheet.getStyle (stil) .leading); if (highestLeading < ledende) highestLeading = ledende; } //Nå, få verdien av høydejusteringen Var heightAdjust: int = htmlTextField.maxScrollV + highestLeading + 2; htmlTextField.height + = heightAdjust;}
setHTML () metoden også behov for å bli oppdatert. Når ingen inline bildet blir lastet inn i tekstblokk, må høyden være låst
offentlig funksjon setHTML (htmlText: String):. Void {htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; Var loader: Loader = htmlTextField.getImageReference ("image") som Loader; if (loader) {//legge hendelsen lytteren for når htmlTextField er endret fra å legge bildet htmlTextField.addEventListener (Event.CHANGE, onImageAdded); } Else {//det ikke er bilde referanse, låse høyden på tekstfeltet lockHeight (); }}
Med disse siste justeringer, er all teksten nå synlige og vil ikke bla

Trinn 19:. Legg Custom TextEvent Link

Vår siste oppgave i denne opplæringen vil være å legge en tekst link som endrer størrelsen på tekstblokk. For å gjøre dette, må vi først legge linken til HTML-tekst i content.xml filen
. ≪? Xml version = "1.0" encoding = "UTF-8" >? ≪ xml > <! [CDATA [< h1 > Resizeable, HTML-formatert Textfield Med Runtime Font Embedding & CSS Styling < /h1 > < br6 > < /br6 > < img src = "http://activetuts.s3.amazonaws.com/tuts/208_HTMLtext/tutorial/images/image.png" hspace = "5" vspace = "2" id = "image" /> Dette er et eksempel på et tekstfelt som inneholder en innebygd bilde. Teksten har blitt lastet inn fra en XML-fil, og er stylet med en ekstern css stilark. Droid Serif font familien, referert av den css, har blitt lastet under kjøring. Valgmulighetene for Droid Serif er fet , kursiv og fet kursiv . < a href = "http://code.google.com/webfonts/family?family=Droid+Serif" > Droid Serif < /a > ble opprettet av < a href = "http://code.google.com/webfonts/designer?designer=Steve+Matteson" > Steve Matteson < /a >. Overskriften font, < a href = "http://code.google.com/webfonts/family?family=Lobster" > Lobster < /a >, ble opprettet av < a href = "http: //kode .google.com /Webfonts /designer designer = Pablo + Impallari ">? Pablo Impallari < /a >. < br6 > < /br6 > Vi kan legge til hendelser til tekst linker. For eksempel, < a href = "event: increaseWidth" > økning < /a > eller < a href = "event: decreaseWidth" > nedgang < /a > bredden på tekstfeltet. ]] > < /xml >

Trinn 20: Legg TextEvent List

I vår HTMLTextBlock klasse, legge til en hendelse lytteren til å oppdage når en tekst link klikkes. Først importere TextEvent klassen
import flash.events.TextEvent;.
I konstruktøren, legge til hendelsen lytteren
htmlTextField.addEventListener (TextEvent.LINK, textLinkHandler);.
Nå oppretter hendelseshåndterer metode
privat funksjon textLinkHandler (event: TextEvent):. void {trace (event.text);}
Kjør publisere forhåndsvisning. Ved å klikke på teksten hendelses koblinger, vil du se enten increaseWidth eller decreaseWidth i utdataene loggen

Trinn 21:. Legg funksjonen for å endre Bredde

Opprett en ny metode som vil endre bredden på htmlTextField
privat funksjon changeWidth (newWidth: int):. void {blockWidth = newWidth; //Låse høyden på tekstfeltet htmlTextField.autoSize = TextFieldAutoSize.LEFT; Bredden htmlTextField.width = blockWidth //endring; //Re-låse høyden lockHeight ();}

Trinn 22:. Oppdater Text Link Handler

Oppdater tekst link håndterer å ringe changeWidth ()
privat funksjon textLinkHandler ( hendelse: TextEvent): void {if (event.text == "increaseWidth") changeWidth (blockWidth + 10); if (event.text == "decreaseWidth") changeWidth (blockWidth - 10);.}
Ved å klikke på hev /senk tekstlenker vil nå justere bredden på tekstblokk med 10 piksler

Konklusjon

Som sett i opplæringen, ved hjelp av HTML-formatert, kan CSS-stylet innhold i Flash være vanskeligere enn det først kan virke. Nå som vi har lært det grunnleggende, kan du bruke denne kunnskapen i egne prosjekter. Her er noen forslag til videre utvikling:.
Bruk koden fra opplæringen for å skape byggesteiner for Flash-områder og komponenter

Utvide HTMLTextBlock å innlemme egenskapene til CSS Box Model.

Load, analysere og vise HTML lastet fra eksterne kilder, for eksempel en RSS-feed.

Ved å holde dem atskilt fra Flash-dokument, kan du bruke innholdet eiendeler for å bygge non-Flash nettsteder og programmer, for eksempel for iPad eller iPhone.

Takk for at du leser denne opplæringen, og jeg håper du vil finne det nyttig i fremtiden Flashing! Anmeldelser

Previous:Quick Tips: Opprette et stillbilde Tool i Flash

Next Page:Lag en skalerbar AS3 ToolTip med OOP