Share
Vi skal se på hvordan du viser HTML-formatert tekst lastet fra XML, utformet fra et eksternt CSS-stilark med fonter lastet på kjøretid. Vi vil også mestre inline bildeplassering via HTML
Det er sikkert enkelt å beholde alle eiendeler direkte i selve Flash-kildefilen, og noen ganger kan det være den beste løsningen. Det er imidlertid noen gode grunner til å holde så mye innhold atskilt fra Flash-dokumentet ditt som mulig, eller til og med for å holde Flash-kilden utelukkende sammensatt utelukkende av ActionScript.
Fordi vi skal jobbe med en rekke eiendeler, er det nyttig å sette opp en velorganisert filkatalogstruktur. Først oppretter vi en "HTMLTextBlock" prosjektkatalog. Innenfor det legger du til en "kilde" -mappe og en "distribuere" -mappe. I utplassere, vår SWF vil bo i toppnivå sammen med mapper for hver type innhold. I denne demonstrasjonen vil vi opprette en SWF som laster fonter, css, xml og et bilde. Kildemappen vil inneholde alle våre .fla og .as-filer, som vi vil lage senere. For nå må prosjektkatalogen se slik ut:
Før du legger inn fonter på nettstedet ditt, er det viktig å være oppmerksom på skriftlig lisensiering. Bare fordi du har en skrifttype installert, selv en du har rettigheter til å bruke for utskrift, betyr det ikke at du har tillatelse til å bruke den på nettet. For mer informasjon om skrifttype lisensiering, se denne Themeforest artikkelen.
I denne opplæringen bruker vi to skrifttyper, en for overskriften og en for kroppsteksten. Et godt sted å finne høy kvalitet, åpen kilde font er Google Font Directory. Du kan ikke laste ned fontfilene direkte derfra, men de kan lett bli funnet med et websøk. Font ekorre og Typekit er to ekstra gode ressurser for høy kvalitet skrifter.
Når du velger en overskriftstype, ser du etter en stil som uttrykker personligheten i designet ditt. For kropps tekst er lesbarhet veldig viktig, så bruk en skrift som viser godt i små størrelser. Vær også sikker på å velge en skriftfamilie med fet, kursiv og fet kursiv ansikter. For denne opplæringen bruker vi fonten Hummer av Pablo Impallari for overskrifter, og fontfamilien Droid Serif av Steve Matteson for avsnitt.
Raske nettbaserte søk avslører hvor vi kan laste ned hummerfonten og Droid Serif-fontfamilien. I vår kilde katalog, opprett en ny mappe "nedlastede fonter" og legg fontfiler der.
Aktiver skriftene på systemet ditt. Åpne to nye FlashScript-dokumenter for ActionScript 3.0, en for hver skrift og lagre til kilde katalogen. Vi starter med overskriftens skrifttype. Fra Bibliotekspanelet velger du «Ny skrift ...» og i Familie dropdown, velg Hummer 1.4. Under navnet, skriv "Hummer". Til Karakterområder, kryss av Alle. Merk, hvis du bruker en skrifttype der du vet at du ikke skal bruke bestemte tegn, kan du velge å legge inn en delmengde av glyphs fra skrifttypen, og redusere filstørrelsen til SWF.
Deretter går du til ActionScript-fanen. Under Kobling, å velge Eksporter for ActionScript. Når du gjør det, Eksporter i ramme 1 vil bli sjekket, og Klasse og Base klasse identifikatorer vil bli fylt ut. Klikk Ferdig. Hvis du får en advarsel om at klassdefinisjonen ikke ble funnet, ignorer den.
Deretter fjerner du merket i panelet Publiser innstillinger HTML boksen og, i Blits feltet, målrette mot fonter mappe i utplassere katalog ved å skrive inn "... /deploy/fonts/Lobster.swf". Dette er alt som kreves for å legge inn en skrifttype i en SWF.
Men hvis vi ønsker å kunne laste SWF til en annen SWF og bruke de innebygde skrifttyper på kjøretid, må vi registrere skriften. Så, i Handlinger-panelet må vi legge til en linjekode for å ramme 1 på tidslinjen:
Font.registerFont (Hummer);
Nå er fonten vår tilgjengelig for bruk i alle Flash-dokumenter som laster inn SWF. Vi kan gjøres her, men vi vil sjekke arbeidet vårt, og enda viktigere, få riktig skrifttype-familienavn til å bruke i vårt CSS. Legg til litt mer kode.
Accentsconagua
var embeddedFonts: Array = Font.enumerateFonts (false); for hver (var skrifttype: Font i embeddedFonts) trace ("Font Embedded:" + font.fontName); Kjør Publiser forhåndsvisning, og vi vil se meldingen under i utgangsloggen. Legg merke til skriftnavn. Vi trenger det senere.
Font Embedded: Hummer 1.4 Font Embedded: Hummer 1.4
Du lurer kanskje på hvorfor vi ser to sporopplysninger. Dette skyldes registerFont () Metode for å legge inn fonten en gang til.
Font.registerFont (DroidSerifRegular); Font.registerFont (DroidSerifBold); Font.registerFont (DroidSerifItalic); Font.registerFont (DroidSerifBoldItalic); var embeddedFonts: Array = Font.enumerateFonts (false); for hver (var skrifttype: Font i embeddedFonts) trace ("Font Embedded:" + font.fontName + "" + font.fontStyle); Deretter skal vi lage en SWF for kroppskopien. Denne gangen legger vi inn fire fonter, en for hver stil. I vårt andre Flash-dokument, velg igjen, fra Bibliotekspanelet Ny skrifttype ... I Familj-rullegardinmenyen, velg Droid Serif, og for Style, velg Regular. Skriv "DroidSerifRegular" i feltet Navn, og husk å stille inn Eksporter for ActionScript. Gjenta deretter de samme trinnene for tegnområdene og ActionScript-fanen. Gjenta denne prosessen for de dristige, kursive og kursive fedtsidene. I handlingspanelet bruker vi lignende kode til det vi brukte til hummerfonten.
Kjør Publiser forhåndsvisning. Denne gangen vil vi se spormeldinger for hver av Droid Serif-skriftstiler. Hvis du ser færre enn åtte, må du kontrollere skriftinnstillingene i Bibliotekspanelet, fordi en av skrifttypene ikke er innebygd. Igjen, legg merke til skrifttypenavnet fra utdatamappen.
Skrifttype innebygd: Droid Serif vanlig Font Embedded: Droid Serif fet skrift Embedded: Droid Serif kursiv Font Embedded: Droid Serif boldItalic Font Embedded: Droid Serif kursiv Embedded: Droid Serif fet skrift Embedded: Droid Serif vanlig Font Embedded: Droid Serif boldItalic
Nå publiser Droid Serif-skrifttypen til "... /deploy/fonts/DroidSerif.swf" og vi skal nå ha to skrifttype SWFs, Lobster.swf og DroidSerif.swf, i distribuere / skrifter katalog.
Det neste aktivet vi skal opprette, er en xml-fil. XML-en vil bestå av ett element: en blokk med HTML-formatert tekst, sammensatt av en overskrift og et avsnitt bygget med standard HTML-tagging.
For at Flash skal kunne lese HTML-en som en XML-element-enhet, må den være inneholdt i en CDATA-innpakning. CDATA brukes i XML-dokumenter for å indikere at en del av innholdet skal analyseres som tegndata i stedet for som oppføring.
Størrelsesformat, HTML-formatert TextField Med Runtime Font Embedding & CSS Styling Dette er et eksempel på et tekstfelt som inneholder et inline-bilde. Teksten er lastet fra en xml-fil, og er utformet med et eksternt css-stilark. Droid Serif-fontfamilien, referert til av css, har blitt lastet på kjøretid. Stilene som er tilgjengelige for Droid Serif er modig, kursiv og fet kursiv. Droid Serif ble skapt av Steve Matteson. Overskriftstegnet, Hummer, ble skapt av Pablo Impallari.
]]>
Lagre denne filen som "content.xml" i xml mappe i utplassere katalog
Nå skal vi lage CSS for å utforme HTML. Når vi ser på vår HTML, kan vi se at vi trenger å lage styling for h1, p og en. Teksten i fet og kursiv merket (b og Jeg) vil bli stylet automatisk siden disse stilene er til stede i vår paragrafsfamilie. Merk at du bør være oppmerksom på at Flash kun støtter en delmengde av CSS-egenskaper; Se til ActionScript 3.0-referansen for mer informasjon.
Det er spesielt viktig at vi målretter mot riktig skrifttype-familienavn i CSS. Pass på at du bruker skrifttypenavnet som ble vist i utmatingsloggen når vi publiserte skriftdokumenter (Hummer 1.4 og Droid Serif).
h1 font-family: Hummer 1.4; font-size: 24; color: # 990033; p font-familien: Droid Serif; font-size: 14; color: # 333333; ledende: 4; en farge: # 000000; text-decoration: underline;
Lagre denne filen som "styles.css" i css mappe i utplassere katalog
Opprett en ny Flash-fil og lagre som "HTMLTextBlockExample.fla" i kilde katalogen. I skjermbildet Publiser innstillinger må du målrette mot vår utplassere mappe. Til HTML, bruk "... /deploy/index.html" i stedet for standardnavnet. Opprett en ny .as-fil - "HTMLTextBlockExample.as" - for å være dokumentklassen (se dette hurtigtipset for mer om dokumentklasser).
pakke import flash.display.MovieClip; offentlig klasse HTMLTextBlockExample utvider MovieClip offentlig funksjon HTMLTextBlockExample (): void
Deretter legger vi inn fonten SWF-er vi opprettet i Flash-dokumentet vårt. La oss lage to variabler. En vil være en Array av url strenger for hver font SWF, og den andre vil være en int Det vil holde styr på hvor mange skrifter har lastet. Da lager vi ulike metoder for å håndtere lastingen.
pakke import flash.display.Loader; importer flash.display.MovieClip; importere flash.events.Event; importer flash.events.IOErrorEvent; importere flash.net.URLRequest; offentlig klasse HTMLTextBlockExample utvider MovieClip offentlige var skrifttyper: Array / * of String * / = ["fonter / DroidSerif.swf", "fonts / Lobster.swf"]; offentlige varfonterLastet: 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); privat funksjon onFontLoaded (hendelse: hendelse): void fontsLoaded ++; hvis (fonterLoaded == fonts.length) onFontsLoadComplete (); privat funksjon onFontsLoadComplete (): void trace (fonts.length + "fonter er lastet"); Kjør Publiser forhåndsvisning, og se at begge skrifttyper er lastet inn.
Lasting av XML- og CSS-filene vil være en lignende prosess for å laste inn skrifter. Først må vi importere noen nye klasser.
importer flash.net.URLLoader; importer flash.text.StyleSheet;
Vi vil også lage en ny Stylesheet variabel som vil inneholde stylingsegenskapene analysert fra css-filen.
offentlig var textStyleSheet: StyleSheet;
Nå legger vi til metoder for lasting av eiendelene.
privat funksjon onFontsLoadComplete (): void trace (fonts.length + "fonter er lastet"); loadCSS (); privat funksjon loadCSS (): void var loader: URLLoader = ny URLLoader (); loader.addEventListener (Event.COMPLETE, onCSSLoadComplete); loader.load (ny URLRequest ("css / styles.css")); privat funksjon onCSSLoadComplete (hendelse: Hendelse): void textStyleSheet = new StyleSheet (); textStyleSheet.parseCSS (event.target.data); LoadXML (); privat funksjon loadXML (): void var loader: URLLoader = ny URLLoader (); loader.addEventListener (Event.COMPLETE, onXMLLoadComplete); loader.load (ny URLRequest ("xml / content.xml")); privat funksjon onXMLLoadComplete (event: Event): void trace (XML (event.target.data) .toXMLString ()); Kjør Publiser forhåndsvisning, og du vil se XML-utskriftene i utdatatloggen.
Vise HTML-formatert tekst er noe du ofte kan gjøre, så la oss lage en klasse som vi kan bruke igjen og igjen. Åpne en ny ActionScript-fil og lagre den som "HTMLTextBlock.as" i kilde katalog.
pakke import flash.display.Sprite; importer flash.text.StyleSheet; importer flash.text.AntiAliasType; importer flash.text.TextField; importere flash.text.TextFieldAutoSize; offentlig klasse HTMLTextBlock utvider Sprite // Bredde av htmlTextField. Standard er 550 piksler. offentlig var blokkbredde: int = 550; // StyleSheet for htmlTextField. public var textStyleSheet: StyleSheet = nytt StyleSheet (); // Inneholder HTML-formatert tekst. private var htmlTextField: TextField = nytt 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 variabelen htmlTextField vil inneholde HTML-formatert tekst. Den offentlige variabelen blockWidth kontrollerer bredden på htmlTextField, og textStyleSheet inneholder CSS styling som blir brukt til htmlTextField. I konstruktøren satte vi egenskaper for htmlTextField og legg den til i visningslisten. Sist, skaper vi setHTML () for å sette HTML-formatert tekst inn i htmlTextField.
Nå som vi har en egendefinert klasse for å vise HTML-tekst, la oss bruke den. Begynn med å endre onXMLLoadComplete () å sende XML-data som en streng til en ny metode som vil bruke HTMLTextBlock å vise HTML-koden.
privat funksjon onXMLLoadComplete (event: Event): void // få xml fra hendelsesmåldata var xml: XML = XML (event.target.data); // konverter xml til en streng var xmlString: String = xml; // send xml streng til displayHTML metoden displayHTML (xmlString); privatfunksjon displayHTML (htmlText: String): void var htmlTextBlock: HTMLTextBlock = ny HTMLTextBlock (); // angi bredden og stylingen htmlTextBlock.blockWidth = 420; htmlTextBlock.textStyleSheet = textStyleSheet; // send html-strengen til HTMLTextBlock-klassen htmlTextBlock.setHTML (htmlText); // sett posisjon og legg til scenen htmlTextBlock.x = 20; htmlTextBlock.y = 10; addChild (htmlTextBlock);
Resultatet:
Deretter legger vi til et bilde i tekstblokken vår. Du kan bruke bildet i kildefilene i denne opplæringen, eller lage din egen.
Åpen content.xml, og i begynnelsen av avsnittet, bruk en grunnleggende HTML
Størrelsesformat, HTML-formatert TextField Med Runtime Font Embedding & CSS Styling ]]>
Dette er et eksempel på et tekstfelt som inneholder et inline-bilde. Teksten er lastet fra en xml-fil, og er utformet med et eksternt css-stilark. Droid Serif-fontfamilien, referert til av css, har blitt lastet på kjøretid. Stilene som er tilgjengelige for Droid Serif er modig, kursiv og fet kursiv. Droid Serif ble skapt av Steve Matteson. Overskriften font Hummer ble skapt av Pablo Impallari
Nå vil SWF se på dette:
Justeringen av bildet og teksten virker ikke helt riktig ennå. Vi vil forbedre det i trinnene som kommer.
Når vi kommer opp i opplæringen, skriver vi metoder som retter seg mot inline-bildet. For å gjøre dette må vi legge til en id Attributt til vårt bilde embed tag som kan refereres til i ActionScript. Åpen content.xml og oppdatere
]]>
For å justere justeringen av bildet må vi endre det x og y verdier. Vi må imidlertid gjøre det etter at bildet er lagt til og teksten blir reflowed. For å oppnå dette vil vi legge til en hendelseslytter til HTMLTextBlock klasse.
Først importerer du noen ekstra klasser:
importer flash.display.DisplayObject; importer flash.display.Loader; importere flash.events.Event;
Deretter oppdaterer du setHTML () metode og opprett 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; hvis (loader) // legg til hendelseslytteren for når htmlTextField er endret fra å legge til bildet htmlTextField.addEventListener (Event.CHANGE, onImageAdded); // ellers er det ingen bildereferanse, så gjør ikke noe privat funksjon onImageAdded (event: Event): void // tilgang til bildet fra bildereferansen i tekstfeltet var loader: Loader = htmlTextField.getImageReference ("bilde") som Loader; var bilde: DisplayObject = loader.content; Legg merke til hvordan bildet ikke stemmer ordentlig med teksten? Dette skyldes at Flash automatisk legger til horisontal og vertikal avstand rundt bildet. Vi kan justere mengden av avstand ved å sette inn vspace og vspace attributter i
]]>
Ser på SWF, nå er bildet justert pent i avsnittet, men teksten er for nær bildet.
Ser ut som om vi trenger litt avstand. Oppdater bildekodenattributtene for å være hspace = "5" vspace = "2". Dette gir oss bedre avstand, men igjen vil bildet ikke bli justert med den venstre kanten av avsnittet. Vi kan fikse dette ved å redigere x verdien av bildet i onImageAdded ().
privat funksjon onImageAdded (event: Event): void // få tilgang til bildet fra bildet referansen i tekstfeltet var loader: Loader = htmlTextField.getImageReference ("image") som Loader; var bilde: DisplayObject = loader.content; // juster x-posisjonen til bildet for å kompensere hspace image.x - = 5; 
Bildet er justert pent, men avsnittet virker litt for nær overskriften. Hvis vi jobbet på en HTML-side, kunne vi justere polstringen eller marginen på p eller h1 tagger, men dessverre støtter Flash ikke noen CSS-styling for vertikal justering mellom avsnittene. Den beste løsningen vi har er å skape en ny CSS-stil bare for linjeavstand. Åpne opp styles.css og legg til følgende stil:
br6 font-size: 6;
Oppdater innhold.xml med tomt br6 stil tag.
]]>
Og nå er linjeavstanden mellom overskriften og punktjusteringen blitt subtilt forbedret.
Åpne SWF, og klikk deretter og dra ned mens du velger teksten. Du kan merke noe uvanlig skje. Topplinjen i vår overskrift er forsvunnet. Hvis du drar tilbake oppover, vises den igjen. På Windows-maskiner kan du se at den samme effekten oppstår hvis du svinger over teksten og ruller musen i en nettleser.
Løsningen for dette, med glede av Destroy Today bloggen, er å slå av autosizing etter at teksten inni er endret. Først oppdaterer du setHTML () metode, 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; hvis (loader) // legg til hendelseslytteren for når htmlTextField er endret fra å legge til bildet htmlTextField.addEventListener (Event.CHANGE, onImageAdded); ellers // det er ingen bildereferanse, så slå autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE; privat funksjon onImageAdded (event: Event): void // tilgang til bildet fra bildereferansen i tekstfeltet var loader: Loader = htmlTextField.getImageReference ("image") som Loader; var bilde: DisplayObject = loader.content; // juster x-posisjonen til bildet for å kompensere hspace image.x - = 5; // slå autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE; Publiser, og du vil se at vår feilretting har opprettet et nytt problem.
Nå er høyden på tekstfeltet ikke stor nok til å vise all teksten, og de to nederste linjene er ikke synlige. Vi vil fikse dette i vårt neste skritt.
For å få hele teksten til å være synlig, må vi øke høyden på HTMLTextField. Hvis vi bare øker høyden med 50 piksler etter at bildet blir lagt til, løses problemet.
htmlTextField.height + = 50;
Men denne løsningen føles ikke riktig. Hva om vi bruker et annet størrelsesbilde? Ulike fonter eller styling? Den beste måten å løse problemet på er å justere høyden dynamisk, basert på verdiene Flash bruker for å bestemme høyden. Den åpenbare taktikken ville være å bruke korrekt teksthøyde parameter. La oss prøve det.
htmlTextField.height = htmlTextField.textHeight;
Det er bedre, men bunnlinjen er fortsatt skjult. Ved å gjøre noen undersøkelser (for eksempel 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 tekststilene vi bruker. I dette tilfellet ville det være 4 (fra p stil). Den andre verdien er htmlTextField.maxScrollV. Hvis vi legger til summen av disse verdiene, pluss en sikkerhetsjustering på 2 piksler, til høyden, HTMLTextField vil være riktig størrelse, uansett hvilke fonter, styling eller bilder som brukes. I stedet for å gjøre dette inn onImageAdded (), Lag en ny funksjon for å låse høyde på tekstblokken.
privat funksjon onImageAdded (event: Event): void // få tilgang til bildet fra bildet referansen i tekstfeltet var loader: Loader = htmlTextField.getImageReference ("image") som Loader; var bilde: DisplayObject = loader.content; // juster x-posisjonen til bildet for å kompensere hspace image.x - = 5; // låse høyden på tekstfeltet for å forhindre rullegardinlåsHet (); privat funksjon lockHeight (): void // slå autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE; htmlTextField.height = htmlTextField.textHeight; // få høydejustering // først, loop gjennom StyleSheet-stiler for å få høyeste ledende verdi var highestLeading: int = 0; for hver (var stil: String i textStyleSheet.styleNames) var ledende: int = int (textStyleSheet.getStyle (style) .leading); hvis (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 må også oppdateres. Når ingen inline-bilde lastes inn i tekstblokken, må høyden låses.
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; hvis (loader) // legg til hendelseslytteren for når htmlTextField er endret fra å legge til bildet htmlTextField.addEventListener (Event.CHANGE, onImageAdded); ellers // det er ingen bildereferanse, lås høyden på tekstfeltet lockHeight (); Med disse siste justeringene er hele teksten nå synlig og vil ikke rulle.
Vår siste oppgave i denne opplæringen vil være å legge til en tekstlenke som endrer størrelsen på tekstblokken. For å gjøre dette må vi først legge til lenken til HTML-teksten i content.xml fil.
Størrelsesformat, HTML-formatert TextField Med Runtime Font Embedding & CSS Styling
Vi kan legge til hendelser til tekstkoblinger. For eksempel, øke eller redusere bredden på tekstfeltet.
]]>
I vår HTMLTextBlock klasse, legg til en hendelseslytter for å oppdage når en tekstlink er klikket. Først importerer du TextEvent klasse.
importer flash.events.TextEvent;
I konstruktøren legger du til hendelseslytteren.
htmlTextField.addEventListener (TextEvent.LINK, textLinkHandler);
Nå opprett hendelseshåndteringsmetoden.
privat funksjon textLinkHandler (event: TextEvent): void trace (event.text);
Kjør publiser forhåndsvisning. Når du klikker på teksthendelseskoblingene, ser du heller increaseWidth eller decreaseWidth i utgangsloggen.
Lag en ny metode som vil endre bredden på htmlTextField.
privat funksjon changeWidth (newWidth: int): void blockWidth = newWidth; // låse opp høyden på tekstfeltet htmlTextField.autoSize = TextFieldAutoSize.LEFT; // endre bredden htmlTextField.width = blockWidth; // lås høyde låsenHet ();
Oppdater tekstlinjebehandleren for å ringe changeWidth ().
privat funksjon textLinkHandler (event: TextEvent): void if (event.text == "increaseWidth") changeWidth (blockWidth + 10); hvis (event.text == "decreaseWidth") changeWidth (blockWidth - 10);
Ved å klikke på øke / redusere tekstkoblinger, justerer du bredden på tekstblokken med 10 piksler.
Som det fremgår av opplæringen, kan HTML-formatert innhold i CSS-stil i Flash være vanskeligere enn det som først ser ut til å virke. Nå som vi har lært grunnleggende, kan du bruke denne kunnskapen i dine egne prosjekter. Her er noen forslag til videreutvikling:
Takk for at du leser denne opplæringen, og jeg håper du vil finne den nyttig i fremtiden Blinker!
