Share
Vom analiza modul de afișare a textului formatat în format HTML încărcat din XML, format dintr-o foaie de stiluri externe CSS cu fonturi încărcate în timpul rulării. De asemenea, vom stăpâni plasarea imaginilor inline prin intermediul codului HTML
Este cu siguranță ușor să păstrați toate activele direct în fișierul sursă Flash și, uneori, aceasta poate fi cea mai bună soluție. Cu toate acestea, există câteva motive bune pentru a păstra cât mai mult conținut separat de documentul dvs. Flash, sau chiar pentru a păstra sursa dvs. Flash compusă exclusiv din ActionScript.
Deoarece vom lucra cu o varietate de active, este util să organizăm o structură bine organizată a directorului de fișiere. Mai întâi, vom crea un director de proiect "HTMLTextBlock". În acest caz, adăugați un director "sursă" și un folder "implementare". În lansa, SWF-ul nostru va locui la nivel superior împreună cu folderele pentru fiecare tip de conținut. În această demonstrație, vom crea un SWF care încarcă fonturi, css, xml și o imagine. Dosarul sursă va conține toate fișierele noastre .fla și .as, pe care le vom crea mai târziu. Deocamdată, directorul de proiect ar trebui să arate astfel:
Înainte de a încorpora fonturile pe site-ul dvs., este important să fiți conștienți de licențierea fonturilor. Doar pentru că aveți un font instalat, chiar și unul pe care aveți dreptul să îl utilizați pentru tipărire, nu înseamnă că aveți permisiunea să îl utilizați online. Pentru mai multe informații despre licențierea fonturilor, consultați acest articol Themeforest.
În acest tutorial, vom folosi două fonturi, unul pentru titlu și unul pentru textul corpului. Un loc bun pentru a găsi fonturi de înaltă calitate, open source este Google Font Directory. Nu puteți descărca fișierele de fonturi direct de acolo, dar ele pot fi găsite cu ușurință cu o căutare web. Font Squirrel și Typekit sunt două resurse excelente pentru fonturi de înaltă calitate.
Când alegeți un font pentru titlu, căutați un stil care exprimă personalitatea designului dvs. Pentru textul corporal, lizibilitatea este foarte importantă, deci utilizați un font care să se afișeze bine la dimensiuni mici. De asemenea, asigurați-vă că alegeți o familie de fonturi cu fețe cu caractere aldine, italice și boldă. Pentru acest tutorial, vom folosi fontul Lobster de Pablo Impallari pentru titluri, iar familia de fonturi Droid Serif de Steve Matteson pentru paragrafe.
Căutările rapide online dezvăluie unde putem descărca fontul Lobster și familia de litere Droid Serif. În a noastră sursă director, creați un nou folder "fonturi descărcate" și puneți fișierele de fonturi acolo.
Activează fonturile din sistem. Deschideți două noi documente Flash ActionScript 3.0, câte unul pentru fiecare font, și salvați-l la sursă director. Vom începe cu fontul principal. Din panoul Bibliotecă, selectați "Font nou ..." și în Familie dropdown, selectați Lobster 1.4. Sub nume, tastați "Lobster". Pentru Intervale de caractere, Verifica Toate. Rețineți că, dacă utilizați un font în care știți că nu veți folosi anumite caractere, puteți alege să încorporați un subset de glifuri din font, micșorând dimensiunea fișierului SWF.
Apoi, accesați fila ActionScript. Sub Corelare, Selectați Exportați pentru ActionScript. Când o faci, Exportul în cadrul 1 va fi verificat, și Clasă și Clasa de bază identificatorii vor fi completate. Faceți clic pe Terminat. Dacă primiți un avertisment că nu sa găsit definiția clasei, ignorați-o.
Apoi, în panoul Setări publicare, debifați HTML caseta de selectare și, în bliț câmp, vizați fonturi dosar în lansa introduceți "... /deploy/fonts/Lobster.swf". Acesta este tot ceea ce este necesar pentru a încorpora un font într-un SWF.
Cu toate acestea, dacă vrem să putem încărca SWF într-un alt SWF și să folosim fonturile sale încorporate în timpul rulării, trebuie să înregistrăm fontul. Deci, în panoul Acțiuni, trebuie să adăugăm un cod de linie la cadrul 1 din cronologie:
Font.registerFont (Lobster);
Acum, fontul nostru va fi disponibil pentru utilizarea în orice documente Flash care încarcă SWF-ul. Am putea fi terminat aici, dar vrem să ne verificăm activitatea și, mai important, să obținem numele corect al fonturilor de familie pe care să-l folosim în CSS. Adăugați un cod suplimentar.
Accentsconagua
var încorporatFonturi: Array = Font.enumerateFonts (false); pentru fiecare (var font: font în embeddedFonts) trace ("Font Embedded:" + font.fontName); Executați Examinare publicare și vom vedea mesajul de mai jos în jurnalul de ieșire. Luați notă de numele fontului. Vom avea nevoie mai târziu.
Font Embedded: Lobster 1.4 Font încorporat: Lobster 1.4
S-ar putea să te întrebi de ce vedem două afirmații. Acest lucru se datorează registerFont () metoda de încorporare a fontului a doua oară.
Font.registerFont (DroidSerifRegular); Font.registerFont (DroidSerifBold); Font.registerFont (DroidSerifItalic); Font.registerFont (DroidSerifBoldItalic); var încorporatFonturi: Array = Font.enumerateFonts (false); pentru fiecare (var font: font în embeddedFonts) trace ("Font încorporat:" + font.fontName + "" + font.fontStyle); Apoi, vom crea un SWF pentru copia organismului. De data aceasta, încorporăm patru fonturi, câte unul pentru fiecare stil. În al doilea document Flash, încă o dată, din panoul Bibliotecă, selectați Font nou ... În meniul derulant Familie, selectați Droid Serif, iar pentru Stil, selectați Regular. Introduceți "DroidSerifRegular" în câmpul Nume și nu uitați să setați Exportați pentru ActionScript. Apoi, repetați aceiași pași pentru intervalele de caractere și fila ActionScript. Repetați acest proces pentru fețele îndrăznețe, cu litere italice și cursive îndrăznețe. În panoul de acțiuni, vom folosi cod similar cu cel folosit pentru fontul Lobster.
Executați previzualizarea publicării. De data aceasta vom vedea mesaje de urmărire pentru fiecare dintre stilurile de font Droid Serif. Dacă vedeți mai puțin de opt, verificați setările de fonturi din panoul Bibliotecă, deoarece una dintre fețele fontului nu este încorporată. Încă o dată, țineți cont de numele fontului din jurnalul de ieșire.
Font Embedded: Droid Serif obișnuit Font Embedded: Droid Serif bold Font încorporat: Droid Serif italic Font încorporat: Droid Serif boldItalic Font încorporat: Droid Serif italic Font încorporat: Droid Serif bold Font încorporat: Droid Serif regular Font încorporat: Droid Serif boldItalic
Acum, publicați fontul Droid Serif la "... /deploy/fonts/DroidSerif.swf" și acum ar trebui să avem două fonturi SWF, Lobster.swf și DroidSerif.swf, în disloca / fonturi director.
Următorul pas pe care îl vom crea este un fișier xml. XML va consta dintr-un singur element: un bloc de text formatat în format HTML, compus dintr-un titlu și un paragraf construit cu etichetarea HTML standard.
Pentru ca Flash să citească HTML ca o entitate element XML, trebuie să fie conținută în interiorul unui CDATA wrapper. CDATA este folosit în documentele XML pentru a indica o secțiune de conținut care urmează să fie analizată ca date de caractere în loc de marcare.
Dimensiune redimensionabilă, TextField formatat cu HTML, cu încorporare de fonturi în execuție și styling CSS Acesta este un exemplu de câmp de text care conține o imagine inline. Textul a fost încărcat dintr-un fișier xml și este format dintr-o foaie de stil css externă. Familia de fonturi Droid Serif, menționată de css, a fost încărcată în timpul rulării. Stilurile disponibile pentru Droid Serif sunt îndrăzneţ, cursiv și bold italic. Droid Serif a fost creat de Steve Matteson. Fontul principal, Lobster, a fost creat de Pablo Impallari.
]]>
Salvați acest fișier ca "content.xml" în xml dosar în lansa director
Acum, vom crea CSS pentru a modela HTML-ul. Privind HTML, putem vedea că trebuie să creăm stilul h1, p și A. Textul din etichetele aldine și italice (b și eu) vor fi șablon automat, deoarece acele stiluri sunt prezente în familia de fonturi din paragraful nostru. Rețineți că trebuie să știți că Flash acceptă numai un subset de proprietăți CSS; consultați referința ActionScript 3.0 pentru mai multe detalii.
Este deosebit de important să vizăm numele corect al familiei fontului în CSS. Asigurați-vă că utilizați numele fontului care a fost afișat în jurnalul de ieșire atunci când am publicat documentele de fonturi (Lobster 1.4 și Droid Serif).
h1 font-family: Lobster 1.4; font-size: 24; culoare: # 990033; p font-family: Droid Serif; font-size: 14; culoare: # 333333; de conducere: 4; a culoare: # 000000; text-decoration: subliniază;
Salvați acest fișier ca "styles.css" în css dosar în lansa director
Creați un nou fișier Flash și salvați ca "HTMLTextBlockExample.fla" în sursă director. În panoul Setări publicare, vizați-ne lansa pliant. Pentru HTML, utilizați "... /deploy/index.html" în locul denumirii implicite. Creați un nou fișier .as - "HTMLTextBlockExample.as" - a fi clasa de documente (consultați acest sfat rapid pentru mai multe despre clasele de documente).
pachet import flash.display.MovieClip; clasa publică HTMLTextBlockExample extinde MovieClip funcția publică HTMLTextBlockExample (): void
Apoi, vom încărca SWF-urile de fonturi pe care le-am creat în documentul nostru Flash. Să creăm două variabile. Unul va fi unul mulțime din șirurile url pentru fiecare font SWF, iar celălalt va fi un int care va ține evidența numărului de fonturi încărcate. Apoi vom crea diferite metode pentru a face față încărcării.
pachet import flash.display.Loader; import flash.display.MovieClip; importul flash.events.Event; import flash.events.IOErrorEvent; import flash.net.URLRequest; clasa publică HTMLTextBlockExample extinde MovieClip public var fonts: Array / * din String * / = ["fonts / DroidSerif.swf", "fonts / Lobster.swf"]; public fon fontsLoaded: int = 0; funcția publică HTMLTextBlockExample (): void loadFonts (); funcția privată loadFonts (): void pentru fiecare (var fontURL: String în fonturi) var fontLoader: Loader = new Loader (); fontLoader.contentLoaderInfo.addEventListener (eveniment.COMPLETE, onFontLoaded); fontLoader.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, onFontLoadError); fontLoader.load (noua adresă URLRequest (fontURL)); funcția privată onFontLoadError (eveniment: IOErrorEvent): void trace ("EROARE: Fontul nu a putut fi găsit" + event.target.loaderURL); funcția privată onFontLoaded (eveniment: Eveniment): void fontsLoaded ++; dacă (fontsLoaded == fonts.length) onFontsLoadComplete (); funcția privată onFontsLoadComplete (): void trace (fonts.length + "fonturile au fost încărcate"); Executați Preview Preview și vedeți că ambele fonturi sunt încărcate.
Încărcarea fișierelor XML și CSS va fi un proces similar cu încărcarea fonturilor. În primul rând, trebuie să importem câteva clase noi.
import flash.net.URLLoader; import flash.text.StyleSheet;
Vom crea, de asemenea, un nou StyleSheet care va conține proprietățile de styling analizate din fișierul css.
public var textStyleSheet: StyleSheet;
Acum, adăugăm metodele de încărcare a activelor.
funcția privată onFontsLoadComplete (): void trace (fonts.length + "fonturile au fost încărcate"); loadCSS (); funcția privată loadCSS (): void var loader: URLLoader = nou URLLoader (); loader.addEventListener (Event.COMPLETE, onCSSLoadComplete); loader.load (noua adresă URLRequest ("css / styles.css")); funcția privată onCSSLoadComplete (eveniment: Eveniment): void textStyleSheet = new StyleSheet (); textStyleSheet.parseCSS (event.target.data); loadXML (); funcția privată loadXML (): void var loader: URLLoader = nou URLLoader (); loader.addEventListener (Event.COMPLETE, onXMLLoadComplete); loader.load (noua adresă URLRequest ("xml / content.xml")); funcția privată onXMLLoadComplete (eveniment: Eveniment): void trace (XML (event.target.data) .toXMLString ()); Executați Preview Preview și veți vedea XML tipărit în jurnalul de ieșire.
Afișarea textului formatat în format HTML este un lucru pe care îl puteți face de multe ori, deci să creați o clasă pe care o putem folosi din nou și din nou. Deschideți un nou fișier ActionScript și salvați-l ca "HTMLTextBlock.as" în sursă director.
pachet import flash.display.Sprite; import flash.text.StyleSheet; import flash.text.AntiAliasType; import flash.text.TextField; import flash.text.TextFieldAutoSize; clasa publică HTMLTextBlock extinde Sprite // Lățimea htmlTextField. Implicit este de 550 de pixeli. public var blockWidth: int = 550; // StyleSheet pentru htmlTextField. public var textStyleSheet: StyleSheet = nou StyleSheet (); // Conține textul formatat în format html. privat var htmlTextField: TextField = TextField nou (); funcția publică HTMLTextBlock () htmlTextField.embedFonts = true; htmlTextField.wordWrap = adevărat; htmlTextField.multiline = true; htmlTextField.condenseWhite = true; htmlTextField.antiAliasType = AntiAliasType.ADVANCED; addChild (htmlTextField); funcția publică setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText;
După cum puteți vedea, clasa noastră are trei variabile. Variabila privată htmlTextField va conține text formatat în format HTML. Variabila publică blockWidth controlează lățimea htmlTextField, și textStyleSheet conține stilul CSS la care se aplică htmlTextField. În constructor, am stabilit proprietăți pentru htmlTextField și adăugați-o în lista de afișare. În cele din urmă, noi creăm setHTML () pentru a introduce text în format HTML htmlTextField.
Acum că avem o clasă personalizată pentru afișarea textului HTML, hai să o folosim. Începeți prin a modifica onXMLLoadComplete () pentru a trimite date XML ca un șir unei metode noi care va fi utilizată HTMLTextBlock pentru a afișa codul HTML.
funcția privată onXMLLoadComplete (eveniment: Eveniment): void // obține xml din datele țintă ale evenimentului var xml: XML = XML (event.target.data); // converti xml-ul într-un șir var xmlString: String = xml; // trimite șir xml la metoda displayHTML displayHTML (xmlString); funcția privată displayHTML (htmlText: String): void var htmlTextBlock: HTMLTextBlock = nou HTMLTextBlock (); // setați lățimea și stilul htmlTextBlock.blockWidth = 420; htmlTextBlock.textStyleSheet = textStyleSheet; // trimiteți șirul HTML în clasa HTMLTextBlock htmlTextBlock.setHTML (htmlText); // setați poziția și adăugați la etapa htmlTextBlock.x = 20; htmlTextBlock.y = 10; addChild (htmlTextBlock);
Rezultatul:
Apoi, vom adăuga o imagine în blocul nostru de text. Puteți utiliza imaginea în fișierele sursă ale acestui tutorial sau creați-vă propriul.
Deschis content.xml, și la începutul paragrafului, utilizați un HTML de bază
Dimensiune redimensionabilă, TextField formatat cu HTML, cu încorporare de fonturi în execuție și styling CSS ]]>
Acesta este un exemplu de câmp de text care conține o imagine inline. Textul a fost încărcat dintr-un fișier xml și este format dintr-o foaie de stil css externă. Familia de fonturi Droid Serif, menționată de css, a fost încărcată în timpul rulării. Stilurile disponibile pentru Droid Serif sunt îndrăzneţ, cursiv și bold italic. Droid Serif a fost creat de Steve Matteson. Fontul principal Lobster a fost creat de Pablo Impallari
Acum, SWF va arăta acest lucru:
Alinierea imaginii și a textului nu pare încă corectă. Vom îmbunătăți acest lucru în pașii care vor veni.
Venind în tutorial, vom scrie metode care vizează imaginea inline. Pentru a face acest lucru, trebuie să adăugăm unul id atribuiți etichetei noastre de încorporare a imaginii care poate fi menționată în ActionScript. Deschis content.xml și actualizați
]]>
Pentru a regla alinierea imaginii, trebuie să o schimbăm X și y valori. Cu toate acestea, trebuie să facem acest lucru după adăugarea imaginii și reluarea textului. Pentru a realiza acest lucru, vom adăuga un ascultător al evenimentului HTMLTextBlock clasă.
Mai întâi, importați câteva clase suplimentare:
import flash.display.DisplayObject; import flash.display.Loader; importul flash.events.Event;
Apoi, actualizați setHTML () și creați un handler pentru evenimente când htmlTextField este redimensionat.
funcția publică setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("imagine") ca Loader; dacă (loader) // adăugați ascultător de evenimente atunci când htmlTextField este redimensionat din adăugarea imaginii htmlTextField.addEventListener (Event.CHANGE, onImageAdded); // altfel, nu există nicio referință a imaginii, deci nu face nimic funcția privată onImageAdded (eveniment: Eveniment): void // accesați imaginea din referința imaginii în câmpul text var loader: Loader = htmlTextField.getImageReference ("imagine") ca încărcător; var imagine: DisplayObject = loader.content; Observați cum imaginea nu se potrivește corect cu textul? Acest lucru se datorează faptului că Flash adaugă automat distanțe orizontale și verticale în jurul imaginii. Putem regla cantitatea de spațiere prin setarea hspace și vspace atributele în
]]>
Privind la SWF, acum imaginea este aliniată frumos în cadrul paragrafului, dar textul este prea apropiat de imagine.
Se pare că avem nevoie de spațiu. Actualizați atributele de tag imagine hspace = "5" vspace = "2". Acest lucru ne oferă distanțe mai bune, dar din nou imaginea nu va fi aliniată cu marginea din stânga a paragrafului. Putem rezolva acest lucru prin editarea X valoarea imaginii în onImageAdded ().
funcția privată onImageAdded (eveniment: Eveniment): void // accesați imaginea din referința imaginii în câmpul text var loader: Loader = htmlTextField.getImageReference ("imagine") ca Loader; var imagine: DisplayObject = loader.content; // ajustați poziția x a imaginii pentru a compensa hspace image.x - = 5; 
Imaginea este aliniată frumos, dar paragraful pare prea apropiat de titlu. Dacă lucrăm la o pagină HTML, am putea să ajustăm căptușeala sau marginea p sau h1 , dar, din păcate, Flash nu acceptă niciun stil CSS pentru alinierea verticală între paragrafe. Cea mai bună soluție este să creăm un nou stil CSS doar pentru spațierea liniilor. Deschide styles.css și adăugați următorul stil:
br6 font-size: 6;
Actualizați content.xml cu o imagine goală BR6 stil.
]]>
Și acum, distanța dintre linia de titlu și paragraful a fost îmbunătățită subtil.
Deschideți SWF, apoi faceți clic și trageți în jos în timp ce selectați textul. Puteți observa ceva neobișnuit. Linia de sus a titlului nostru a dispărut. Dacă trageți înapoi în sus, va reapărea. Pe mașinile Windows, puteți vedea același efect dacă faceți cursorul peste text și derulați rotița mouse-ului într-un browser.
Soluția pentru acest lucru, datorită blogului Destroy Today, este să dezactivați autosizarea după ce textul din interior a fost modificat. Mai întâi, actualizați setHTML () metodă, și apoi onImageAdded ().
funcția publică setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("imagine") ca Loader; dacă (loader) // adăugați ascultător de evenimente atunci când htmlTextField este redimensionat din adăugarea imaginii htmlTextField.addEventListener (Event.CHANGE, onImageAdded); altceva // nu există nici o referință de imagine, așa că transformați autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE; funcția privată onImageAdded (eveniment: Event): void // accesați imaginea din referința imaginii în câmpul text var loader: Loader = htmlTextField.getImageReference ("imagine") ca Loader; var imagine: DisplayObject = loader.content; // ajustați poziția x a imaginii pentru a compensa hspace image.x - = 5; // transforma autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE; Renunțați și veți vedea că soluția noastră de erori a creat o nouă problemă.
În prezent, înălțimea câmpului de text nu este suficient de mare pentru a afișa tot textul, iar cele două linii de jos nu sunt vizibile. Vom rezolva acest lucru în pasul următor.
Pentru a obține tot textul să fie vizibil, trebuie să creștem înălțimea lui HTMLTextField. Dacă pur și simplu creștem înălțimea cu 50 de pixeli după adăugarea imaginii, problema este rezolvată.
htmlTextField.height + = 50;
Cu toate acestea, această soluție nu se simte bine. Ce se întâmplă dacă folosim o imagine de dimensiune diferită? Diferite fonturi sau stil? Cea mai bună modalitate de a rezolva problema este ajustarea înălțimii dinamic, pe baza valorilor pe care Flash le utilizează pentru a determina înălțimea. Tactica evidenta ar fi folosirea lui înălțimea textului parametru. Hai sa incercam.
htmlTextField.height = htmlTextField.textHeight;
E mai bine, dar linia de jos a textului este încă ascunsă. Dacă facem niște cercetări (de exemplu, această postare pe blog), putem constata că există două valori care trebuie adăugate la înălțime. Una este cea mai înaltă conducere valoarea stilurilor de text pe care le folosim. În acest caz, asta ar fi 4 (de la p stil). Cealaltă valoare este htmlTextField.maxScrollV. Dacă adăugăm valoarea totală a acestor valori, plus o ajustare de siguranță de 2 pixeli, la înălțime, HTMLTextField vor fi dimensionate corect, indiferent de ce fonturi, stil sau imagini sunt folosite. În loc să faci asta înăuntru onImageAdded (), creați o funcție nouă pentru blocarea înălțimii blocului de text.
funcția privată onImageAdded (eveniment: Eveniment): void // accesați imaginea din referința imaginii în câmpul text var loader: Loader = htmlTextField.getImageReference ("imagine") ca Loader; var imagine: DisplayObject = loader.content; // ajustați poziția x a imaginii pentru a compensa hspace image.x - = 5; // blocați înălțimea câmpului de text pentru a împiedica defilarea bug-ului lockHeight (); private function lockHeight (): void // transforma autosize off htmlTextField.autoSize = TextFieldAutoSize.NONE; htmlTextField.height = htmlTextField.textHeight; // obține ajustarea înălțimii // în primul rând, buclă prin stiluri StyleSheet pentru a obține cea mai mare valoare de vârf var highestLeading: int = 0; pentru fiecare (stil var: String în textStyleSheet.styleNames) var: int = int (textStyleSheet.getStyle (style) .leading); dacă (cea mai înaltă < leading) highestLeading = leading; // now, get the value of the height adjustment var heightAdjust:int = htmlTextField.maxScrollV + highestLeading + 2; htmlTextField.height += heightAdjust; setHTML () de asemenea, trebuie actualizată. Atunci când nu se încarcă nicio imagine inline în blocul de text, înălțimea trebuie blocată.
funcția publică setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("imagine") ca Loader; dacă (loader) // adăugați ascultător de evenimente atunci când htmlTextField este redimensionat din adăugarea imaginii htmlTextField.addEventListener (Event.CHANGE, onImageAdded); altceva // nu există nici o referință a imaginii, blocarea înălțimii câmpului text lockHeight (); Cu aceste ajustări ultime, tot textul este acum vizibil și nu se va derula.
Ultima noastră sarcină în acest tutorial va fi să adăugăm un link text care redimensionează blocul de text. Pentru a face acest lucru, trebuie mai întâi să adăugăm linkul la textul HTML din content.xml fişier.
Dimensiune redimensionabilă, TextField formatat cu HTML, cu încorporare de fonturi în execuție și styling CSS
Putem adăuga evenimente la legăturile text. De exemplu, măriți sau micșorați lățimea câmpului de text.
]]>
În a noastră HTMLTextBlock , adăugați un ascultător de evenimente pentru a detecta când se face clic pe un link text. Mai întâi, importă TextEvent clasă.
importul flash.events.TextEvent;
În constructor, adăugați ascultătorul evenimentului.
htmlTextField.addEventListener (TextEvent.LINK, textLinkHandler);
Acum, creați metoda de manipulare a evenimentului.
funcția privată textLinkHandler (eveniment: TextEvent): void trace (event.text);
Executați previzualizarea publicării. Când faceți clic pe link-urile evenimentului text, veți vedea și ele increaseWidth sau decreaseWidth în jurnalul de ieșire.
Creați o metodă nouă care va schimba lățimea htmlTextField.
funcția privată changeWidth (newWidth: int): void blockWidth = newWidth; // deblocați înălțimea câmpului text htmlTextField.autoSize = TextFieldAutoSize.LEFT; // modificați lățimea htmlTextField.width = blockWidth; // re-blocați blocarea înălțimiiHeight ();
Actualizați manualul de legături text pentru a apela changeWidth ().
funcția privată textLinkHandler (eveniment: TextEvent): void if (event.text == "increaseWidth") changeWidth (blocWidth + 10); dacă (event.text == "decreaseWidth") schimbăWidth (blockWidth - 10);
Dacă faceți clic pe link-urile de creștere / micșorare a textului, va fi reglată lățimea blocului de text cu 10 pixeli.
Așa cum se vede în tutorial, utilizarea conținutului în format HTML, formatat în format HTML, poate fi mai dificil decât poate părea primul. Acum, că am învățat elementele de bază, puteți aplica aceste cunoștințe în propriile proiecte. Iată câteva sugestii pentru dezvoltarea continuă:
Vă mulțumim pentru că ați citit acest tutorial și sper că veți fi util în viitorul dvs.!
