Share
Vedremo come visualizzare il testo in formato HTML caricato da XML, in stile da un foglio di stile CSS esterno con i font caricati in fase di esecuzione. Ci occuperemo anche del posizionamento delle immagini inline tramite l'HTML
È certamente facile mantenere tutte le risorse direttamente nel file sorgente Flash stesso e, a volte, può essere la soluzione migliore. Tuttavia, ci sono alcuni buoni motivi per mantenere il maggior numero di contenuti separati dal tuo documento Flash possibile, o anche per mantenere la tua sorgente Flash esclusivamente composta unicamente da ActionScript.
Poiché lavoreremo con una varietà di risorse, è utile configurare una struttura di directory dei file ben organizzata. Per prima cosa, creiamo una directory di progetto "HTMLTextBlock". All'interno di ciò, aggiungere una cartella "source" e una cartella "deploy". Nel schierare, il nostro SWF risiederà nel livello superiore insieme alle cartelle per ogni tipo di contenuto. In questa demo, creeremo un file SWF che carica font, css, xml e un'immagine. La cartella di origine conterrà tutti i nostri file .fla e .as, che verranno creati in seguito. Per ora, la directory del tuo progetto dovrebbe assomigliare a questa:
Prima di incorporare i caratteri sul tuo sito Web, è importante conoscere le licenze dei font. Solo perché hai un font installato, anche se hai i diritti per la stampa, non significa che hai il permesso di usarlo online. Per ulteriori informazioni sulle licenze dei font, fare riferimento a questo articolo Themeforest.
In questo tutorial, utilizzeremo due tipi di carattere, uno per il titolo e uno per il testo del corpo. Un buon posto per trovare font open source di alta qualità è la directory dei font di Google. Non è possibile scaricare i file dei font direttamente da lì, ma possono essere facilmente trovati con una ricerca web. Font Squirrel e Typekit sono altre due risorse eccellenti per i font di alta qualità.
Quando scegli un carattere di titolo, cerca uno stile che esprima la personalità del tuo design. Per il corpo del testo, la leggibilità è molto importante, quindi usa un font che si mostra bene a piccole dimensioni. Inoltre, assicurati di scegliere una famiglia di font con facce corsive in grassetto, corsivo e grassetto. Per questo tutorial, utilizzeremo il carattere Lobster di Pablo Impallari per i titoli e la famiglia di caratteri Droid Serif di Steve Matteson per i paragrafi.
Ricerche online rapide rivelano dove è possibile scaricare il font Lobster e la famiglia di font Droid Serif. Nel nostro fonte directory, creare una nuova cartella "font scaricati" e inserire i file dei font lì.
Attiva i caratteri sul tuo sistema. Apri due nuovi documenti Flash ActionScript 3.0, uno per ogni carattere, e salva in fonte directory. Inizieremo con il carattere del titolo. Dal pannello Libreria, selezionare "Nuovo carattere ..." e in Famiglia menu a discesa, selezionare Aragosta 1.4. Sotto il nome, digita "Lobster". Per Gamme di caratteri, dai un'occhiata Tutti. Nota, se stai usando un font dove sai che non utilizzerai determinati caratteri, puoi scegliere di incorporare un sottoinsieme di glifi dal font, diminuendo la dimensione del file del SWF.
Successivamente, vai alla scheda ActionScript. Sotto collegamento, selezionare Esporta per ActionScript. Quando lo fai, Esporta nel frame 1 sarà controllato, e il Classe e Classe Base gli identificatori verranno compilati. Fare clic Fatto. Se ricevi un avviso che la definizione della classe non è stata trovata, ignorala.
Quindi, nel pannello Impostazioni pubblicazione, deselezionare l'opzione HTML checkbox e, nel Veloce campo, bersaglio il font cartella nel schierare directory inserendo "... /deploy/fonts/Lobster.swf". Questo è tutto ciò che è necessario per incorporare un font in un file SWF.
Tuttavia, se vogliamo essere in grado di caricare il file SWF in un altro SWF e utilizzare i suoi caratteri incorporati in fase di runtime, dobbiamo registrare il font. Quindi, nel pannello Azioni, dobbiamo aggiungere un codice di linea al fotogramma 1 sulla timeline:
Font.registerFont (Aragosta);
Ora, il nostro font sarà disponibile per l'uso in qualsiasi documento Flash che carica il file SWF. Potremmo fare qui, ma vogliamo controllare il nostro lavoro e, cosa più importante, ottenere il nome corretto della famiglia di font da usare nel nostro CSS. Aggiungi un altro codice.
Accentsconagua
var embeddedFonts: Array = Font.enumerateFonts (false); per ogni carattere (var: Font in embeddedFonts) trace ("Font Embedded:" + font.fontName); Esegui l'anteprima di pubblicazione e vedremo il messaggio sotto nel log di output. Prendi nota del nome del carattere. Ne avremo bisogno più tardi.
Font Embedded: Lobster 1.4 Font Embedded: Lobster 1.4
Potresti chiederti perché stiamo vedendo due istruzioni di tracciamento. Questo è dovuto a registerFont () metodo che include il carattere una seconda volta.
Font.registerFont (DroidSerifRegular); Font.registerFont (DroidSerifBold); Font.registerFont (DroidSerifItalic); Font.registerFont (DroidSerifBoldItalic); var embeddedFonts: Array = Font.enumerateFonts (false); per ogni carattere (var: Font in embeddedFonts) trace ("Font Embedded:" + font.fontName + "" + font.fontStyle); Successivamente, creeremo un SWF per la copia del corpo. Questa volta, stiamo incorporando quattro tipi di carattere, uno per ogni stile. Nel nostro secondo documento Flash, ancora una volta, dal pannello Libreria, selezionare Nuovo carattere ... Nel menu a discesa Famiglia, seleziona Serico Droid e, per Stile, seleziona Regolare. Digita "DroidSerifRegular" nel campo Nome e ricorda di impostare Esporta per ActionScript. Quindi, ripetere gli stessi passaggi per gli intervalli di caratteri e la scheda ActionScript. Ripeti questa procedura per i grassetti in grassetto, corsivo e corsivo. Nel pannello delle azioni, useremo un codice simile a quello che abbiamo usato per il carattere Lobster.
Esegui anteprima di pubblicazione. Questa volta vedremo i messaggi di traccia per ciascuno degli stili di carattere Droid Serif. Se ne vedi meno di otto, controlla le impostazioni del carattere nel pannello Libreria, perché una delle facce del font non viene incorporata. Ancora una volta, prendere nota del nome del carattere dal registro di output.
Font Embedded: Droid Serif regular Font Embedded: Droid Serif grassetto Font Embedded: Droid Serif italic Font Embedded: Droid Serif boldItalic Font Embedded: Droid Serif italic Font Embedded: Droid Serif bold Font Embedded: Droid Serif Regular Font Embedded: Droid Serif boldItalic
Ora, pubblica il font Droid Serif su "... /deploy/fonts/DroidSerif.swf" e ora dovremmo avere due file SWF di font, Lobster.swf e DroidSerif.swf, nel distribuire / fonts elenco.
Il prossimo asset che creeremo è un file xml. L'XML consisterà in un elemento: un blocco di testo in formato HTML, composto da un titolo e un paragrafo costruiti con tag HTML standard.
Affinché Flash legga l'HTML come entità di un elemento XML, deve essere contenuto all'interno di un wrapper CDATA. CDATA viene utilizzato all'interno dei documenti XML per indicare che una sezione del contenuto deve essere analizzata come dati carattere anziché come markup.
Campo di testo ridimensionabile, formattato in HTML con incorporamento dei caratteri di runtime e Styling CSS Questo è un esempio di un campo di testo che contiene un'immagine in linea. Il testo è stato caricato da un file xml ed è in stile con un foglio di stile CSS esterno. La famiglia di font Droid Serif, referenziata dal css, è stata caricata in fase di runtime. Gli stili disponibili per Droid Serif sono grassetto, corsivo e Italico grassetto. Droid Serif è stato creato da Steve Matteson. Il carattere principale, Lobster, è stato creato da Pablo Impallari.
]]>
Salva questo file come "content.xml" nel file xml cartella nel schierare elenco
Ora, creeremo CSS per lo stile dell'HTML. Guardando il nostro HTML, possiamo vedere che abbiamo bisogno di creare uno stile per h1, p e un. Il testo all'interno dei tag grassetto e corsivo (B e io) sarà automaticamente in stile poiché questi stili sono presenti nella nostra famiglia di caratteri del paragrafo. Nota, dovresti sapere che Flash supporta solo un sottoinsieme di proprietà CSS; fare riferimento alla Guida di riferimento di ActionScript 3.0 per ulteriori dettagli.
È particolarmente importante scegliere come target il nome corretto della famiglia di caratteri nel CSS. Assicurati di utilizzare il nome del font che è stato visualizzato nel log di output quando abbiamo pubblicato i documenti font (Aragosta 1.4 e Droid Serif).
h1 font-family: Lobster 1.4; font-size: 24; color: # 990033; p font-family: Droid Serif; font-size: 14; color: # 333333; leader: 4; a color: # 000000; text-decoration: underline;
Salva questo file come "styles.css" nel css cartella nel schierare elenco
Crea un nuovo file Flash e salva come "HTMLTextBlockExample.fla" nel file fonte directory. Nel pannello Impostazioni pubblicazione, seleziona come target schierare cartella. Per HTML, usa "... /deploy/index.html" al posto del nome predefinito. Crea un nuovo file .as - "HTMLTextBlockExample.as" - per essere la classe del documento (fai riferimento a questo suggerimento rapido per ulteriori informazioni sulle classi di documenti).
package import flash.display.MovieClip; public class HTMLTextBlockExample estende MovieClip public function HTMLTextBlockExample (): void
Successivamente, caricheremo i file SWF dei font che abbiamo creato nel nostro documento Flash. Creiamo due variabili. Uno sarà un schieramento delle stringhe url per ogni font SWF, e l'altro sarà un int che manterrà traccia di quanti tipi di carattere sono stati caricati. Quindi creeremo vari metodi per gestire il caricamento.
package import flash.display.Loader; import flash.display.MovieClip; import flash.events.Event; import flash.events.IOErrorEvent; import flash.net.URLRequest; public class HTMLTextBlockExample estende MovieClip public var fonts: Array / * of String * / = ["font / DroidSerif.swf", "fonts / Lobster.swf"]; public var fontsLoaded: int = 0; funzione pubblica HTMLTextBlockExample (): void loadFonts (); funzione privata loadFonts (): void per ciascuno (var fontURL: stringa nei caratteri) var fontLoader: Loader = new Loader (); fontLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, onFontLoaded); fontLoader.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, onFontLoadError); fontLoader.load (new URLRequest (fontURL)); funzione privata onFontLoadError (event: IOErrorEvent): void trace ("ERRORE: impossibile trovare il font" + event.target.loaderURL); funzione privata onFontLoaded (event: Event): void fontsLoaded ++; if (fontsLoaded == fonts.length) onFontsLoadComplete (); funzione privata onFontsLoadComplete (): void trace (fonts.length + "i caratteri sono stati caricati"); Esegui anteprima di pubblicazione e verifica che entrambi i tipi di carattere siano caricati.
Il caricamento dei file XML e CSS sarà un processo simile al caricamento dei caratteri. Per prima cosa, dobbiamo importare alcune nuove classi.
import flash.net.URLLoader; import flash.text.StyleSheet;
Creeremo anche un nuovo Foglio di stile variabile che conterrà le proprietà di stile analizzate dal file css.
public var textStyleSheet: StyleSheet;
Ora, aggiungiamo i metodi per caricare le risorse.
funzione privata onFontsLoadComplete (): void trace (fonts.length + "i caratteri sono stati caricati"); loadCSS (); funzione privata loadCSS (): void var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, onCSSLoadComplete); loader.load (new URLRequest ("css / styles.css")); funzione privata onCSSLoadComplete (event: Event): void textStyleSheet = new StyleSheet (); textStyleSheet.parseCSS (event.target.data); loadXML (); funzione privata loadXML (): void var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, onXMLLoadComplete); loader.load (new URLRequest ("xml / content.xml")); funzione privata onXMLLoadComplete (event: Event): void trace (XML (event.target.data) .toXMLString ()); Esegui l'anteprima di pubblicazione e vedrai l'XML stampato nel registro di output.
La visualizzazione di testo in formato HTML è qualcosa che potresti fare spesso, quindi creiamo una classe che possiamo usare più e più volte. Aprire un nuovo file ActionScript e salvarlo come "HTMLTextBlock.as" nel fonte elenco.
pacchetto import flash.display.Sprite; import flash.text.StyleSheet; import flash.text.AntiAliasType; import flash.text.TextField; import flash.text.TextFieldAutoSize; publicText HTMLTextBlock estende Sprite // Width of htmlTextField. L'impostazione predefinita è 550 pixel. public var blockWidth: int = 550; // StyleSheet per htmlTextField. public var textStyleSheet: StyleSheet = new StyleSheet (); // Contiene il testo in formato html. private var htmlTextField: TextField = new TextField (); funzione pubblica HTMLTextBlock () htmlTextField.embedFonts = true; htmlTextField.wordWrap = true; htmlTextField.multiline = true; htmlTextField.condenseWhite = true; htmlTextField.antiAliasType = AntiAliasType.ADVANCED; addChild (htmlTextField); public function setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText;
Come puoi vedere, la nostra classe ha tre variabili. La variabile privata htmlTextField conterrà testo in formato HTML. La variabile pubblica blockWidth controlla la larghezza di htmlTextField, e textStyleSheet contiene lo stile CSS a cui viene applicato htmlTextField. Nel costruttore, impostiamo le proprietà per htmlTextField e aggiungilo all'elenco di visualizzazione. Ultimo, creiamo setHTML () per inserire testo in formato HTML htmlTextField.
Ora che abbiamo una classe personalizzata per la visualizzazione del testo HTML, usiamola. Inizia modificando onXMLLoadComplete () per inviare dati XML come una stringa a un nuovo metodo che utilizzerà HTMLTextBlock per visualizzare l'HTML.
funzione privata onXMLLoadComplete (event: Event): void // richiama xml dai dati di destinazione dell'evento var xml: XML = XML (event.target.data); // converte il xml in una stringa var xmlString: String = xml; // invia stringa xml al metodo displayHTML displayHTML (xmlString); private function displayHTML (htmlText: String): void var htmlTextBlock: HTMLTextBlock = new HTMLTextBlock (); // imposta larghezza e stile htmlTextBlock.blockWidth = 420; htmlTextBlock.textStyleSheet = textStyleSheet; // invia la stringa html alla classe HTMLTextBlock htmlTextBlock.setHTML (htmlText); // imposta la posizione e aggiungi allo stage htmlTextBlock.x = 20; htmlTextBlock.y = 10; addChild (htmlTextBlock);
Il risultato:
Successivamente, aggiungeremo un'immagine al nostro blocco di testo. Puoi usare l'immagine nei file sorgente di questo tutorial o crearne di tuoi.
Aperto content.xml, e all'inizio del paragrafo, usa un HTML di base
Campo di testo ridimensionabile, formattato in HTML con incorporamento dei caratteri di runtime e Styling CSS ]]>
Questo è un esempio di un campo di testo che contiene un'immagine in linea. Il testo è stato caricato da un file xml ed è in stile con un foglio di stile CSS esterno. La famiglia di font Droid Serif, referenziata dal css, è stata caricata in fase di runtime. Gli stili disponibili per Droid Serif sono grassetto, corsivo e Italico grassetto. Droid Serif è stato creato da Steve Matteson. Il carattere del titolo Aragosta è stato creato da Pablo Impallari
Ora, il file SWF avrà questo aspetto:
L'allineamento dell'immagine e del testo non sembra ancora al momento giusto. Lo miglioreremo nei passi futuri.
Venendo nel tutorial, scriveremo metodi che mirano all'immagine in linea. Per fare questo, dobbiamo aggiungere un id attributo al nostro tag image embed che può essere referenziato in ActionScript. Aperto content.xml e aggiorna il
]]>
Al fine di regolare l'allineamento dell'immagine, abbiamo bisogno di cambiarne X e y valori. Tuttavia, dobbiamo farlo dopo che l'immagine è stata aggiunta e il testo è stato ridisposto. Per fare ciò, aggiungeremo un listener di eventi al HTMLTextBlock classe.
Innanzitutto, importa alcune classi aggiuntive:
import flash.display.DisplayObject; import flash.display.Loader; import flash.events.Event;
Quindi, aggiorna il setHTML () metodo e creare un gestore di eventi per quando htmlTextField è ridimensionato.
funzione pubblica setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("image") come Loader; if (loader) // aggiungi listener di eventi per quando viene ridimensionato htmlTextField dall'aggiunta dell'immagine htmlTextField.addEventListener (Event.CHANGE, onImageAdded); // else, non c'è alcun riferimento alle immagini, quindi non fare nulla funzione privata onImageAdded (event: Event): void // accedi all'immagine dal riferimento dell'immagine nel campo di testo var loader: Loader = htmlTextField.getImageReference ("immagine") come Caricatore; var image: DisplayObject = loader.content; Nota come l'immagine non si allinea correttamente con il testo? Questo perché Flash aggiunge automaticamente spaziatura orizzontale e verticale intorno all'immagine. Possiamo regolare la quantità di spaziatura impostando il hspace e vspace attributi nel
]]>
Guardando il file SWF, ora l'immagine è allineata bene all'interno del paragrafo, ma il testo è troppo vicino all'immagine.
Sembra che abbiamo bisogno di un po 'di spazio dopo tutto. Aggiorna gli attributi del tag immagine da essere hspace = "5" vspace = "2". Questo ci dà una migliore spaziatura, ma ancora una volta l'immagine non sarà allineata con il bordo sinistro del paragrafo. Possiamo sistemarlo modificando il file X valore dell'immagine in onImageAdded ().
funzione privata onImageAdded (event: Event): void // accede all'immagine dal riferimento dell'immagine nel campo di testo var loader: Loader = htmlTextField.getImageReference ("image") come Loader; var image: DisplayObject = loader.content; // regola la posizione x dell'immagine per compensare hspace image.x - = 5; 
L'immagine è allineata bene, ma il paragrafo sembra un po 'troppo vicino al titolo. Se stessimo lavorando su una pagina HTML, potremmo regolare il padding o il margine sul p o h1 tag, ma sfortunatamente Flash non supporta alcuno stile CSS per l'allineamento verticale tra paragrafi. La soluzione migliore che abbiamo è creare un nuovo stile CSS solo per l'interlinea. Aprire styles.css e aggiungi il seguente stile:
br6 font-size: 6;
Aggiorna content.xml con un vuoto BR6 tag di stile.
]]>
E ora, la spaziatura tra il titolo e l'allineamento del paragrafo è stata leggermente migliorata.
Aprire il file SWF, quindi fare clic e trascinare verso il basso mentre si seleziona il testo. Potresti notare qualcosa di insolito. La riga superiore del nostro titolo è scomparsa. Se si trascina verso l'alto, riapparirà. Sui computer Windows, è possibile vedere lo stesso effetto se si passa il mouse sul testo e si scorre la rotellina del mouse in un browser.
La soluzione per questo, per gentile concessione del blog Destroy Today, è di disattivare l'autosizing dopo che il testo all'interno è stato modificato. Innanzitutto, aggiorna il setHTML () metodo, e poi onImageAdded ().
funzione pubblica setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("image") come Loader; if (loader) // aggiungi listener di eventi per quando viene ridimensionato htmlTextField dall'aggiunta dell'immagine htmlTextField.addEventListener (Event.CHANGE, onImageAdded); else // non vi è alcun riferimento alle immagini, quindi disattivare autosize htmlTextField.autoSize = TextFieldAutoSize.NONE; funzione privata onImageAdded (event: Event): void // accede all'immagine dal riferimento dell'immagine nel campo di testo var loader: Loader = htmlTextField.getImageReference ("image") come Loader; var image: DisplayObject = loader.content; // regola la posizione x dell'immagine per compensare hspace image.x - = 5; // Disattiva autosize htmlTextField.autoSize = TextFieldAutoSize.NONE; Ripubblicati, e vedrai che la nostra correzione di bug ha creato un nuovo problema.
Ora, l'altezza del campo di testo non è abbastanza grande per visualizzare tutto il testo e le due righe inferiori non sono visibili. Lo risolveremo nel prossimo passaggio.
Per rendere visibile tutto il testo, dobbiamo aumentare l'altezza di HTMLTextField. Se aumentiamo semplicemente l'altezza di 50 pixel dopo l'aggiunta dell'immagine, il problema viene risolto.
htmlTextField.height + = 50;
Tuttavia, questa soluzione non sembra giusta. Cosa succede se usiamo un'immagine di dimensioni diverse? Caratteri o stile diversi? Il modo migliore per risolvere il problema è regolare l'altezza in modo dinamico, in base ai valori utilizzati da Flash per determinare l'altezza. La tattica ovvia sarebbe quella di usare il altezza del testo parametro. Proviamolo.
htmlTextField.height = htmlTextField.textHeight;
È meglio, ma la riga inferiore del testo è ancora nascosta. Nel fare qualche ricerca (ad esempio questo post sul blog), possiamo scoprire che ci sono due valori che devono essere aggiunti all'altezza. Uno è il più alto principale valore degli stili di testo che stiamo usando. In questo caso, sarebbe 4 (dal p stile). L'altro valore è htmlTextField.maxScrollV. Se aggiungiamo il totale di quei valori, più una regolazione di sicurezza di 2 pixel, all'altezza, HTMLTextField sarà dimensionato correttamente, indipendentemente da quali tipi di carattere, stile o immagini vengono utilizzati. Invece di farlo onImageAdded (), creare una nuova funzione per bloccare l'altezza del blocco di testo.
funzione privata onImageAdded (event: Event): void // accede all'immagine dal riferimento dell'immagine nel campo di testo var loader: Loader = htmlTextField.getImageReference ("image") come Loader; var image: DisplayObject = loader.content; // regola la posizione x dell'immagine per compensare hspace image.x - = 5; // blocca l'altezza del campo di testo per impedire lo scorrimento bug lockHeight (); private function lockHeight (): void // Disattiva autosize htmlTextField.autoSize = TextFieldAutoSize.NONE; htmlTextField.height = htmlTextField.textHeight; // ottenere la regolazione dell'altezza // primo, scorrere gli stili StyleSheet per ottenere il valore massimo più alto var highestLeading: int = 0; per ogni (var style: String in textStyleSheet.styleNames) var leading: int = int (textStyleSheet.getStyle (style) .leading); if (highestLeading < leading) highestLeading = leading; // now, get the value of the height adjustment var heightAdjust:int = htmlTextField.maxScrollV + highestLeading + 2; htmlTextField.height += heightAdjust; Il setHTML () anche il metodo deve essere aggiornato. Quando nessuna immagine in linea viene caricata nel blocco di testo, l'altezza deve essere bloccata.
funzione pubblica setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("image") come Loader; if (loader) // aggiungi listener di eventi per quando viene ridimensionato htmlTextField dall'aggiunta dell'immagine htmlTextField.addEventListener (Event.CHANGE, onImageAdded); else // non vi è alcun riferimento immagine, bloccare l'altezza del campo di testo lockHeight (); Con queste ultime regolazioni, tutto il testo è ora visibile e non scorrerà.
Il nostro ultimo compito in questo tutorial sarà quello di aggiungere un link testuale che ridimensiona il blocco di testo. Per fare ciò, dobbiamo prima aggiungere il link al testo HTML nel file content.xml file.
Campo di testo ridimensionabile, formattato in HTML con incorporamento dei caratteri di runtime e Styling CSS
Possiamo aggiungere eventi a collegamenti testuali. Ad esempio, aumentare o diminuire la larghezza del campo di testo.
]]>
Nel nostro HTMLTextBlock classe, aggiungi un listener di eventi per rilevare quando viene fatto clic su un link di testo. Innanzitutto, importa il TextEvent classe.
import flash.events.TextEvent;
Nel costruttore, aggiungi il listener di eventi.
htmlTextField.addEventListener (TextEvent.LINK, textLinkHandler);
Adesso crea il metodo del gestore di eventi.
funzione privata textLinkHandler (event: TextEvent): void trace (event.text);
Esegui anteprima di pubblicazione. Quando fai clic sui link degli eventi di testo, vedrai entrambi increaseWidth o decreaseWidth nel registro di output.
Creare un nuovo metodo che cambierà la larghezza di htmlTextField.
funzione privata changeWidth (newWidth: int): void blockWidth = newWidth; // sblocca l'altezza del campo di testo htmlTextField.autoSize = TextFieldAutoSize.LEFT; // cambia la larghezza htmlTextField.width = blockWidth; // re-lock l'altezza lockHeight ();
Aggiorna il gestore del link di testo per chiamare changeWidth ().
funzione privata textLinkHandler (event: TextEvent): void if (event.text == "increaseWidth") changeWidth (blockWidth + 10); if (event.text == "decreasWidth") changeWidth (blockWidth - 10);
Facendo clic sui collegamenti di testo aumenta / diminuisci ora si regola la larghezza del blocco di testo di 10 pixel.
Come visto nel tutorial, l'utilizzo di contenuti in stile CSS in formato CSS in Flash può essere più difficile di quanto possa sembrare. Ora che abbiamo imparato le basi, puoi applicare questa conoscenza nei tuoi progetti. Ecco alcuni suggerimenti per lo sviluppo continuo:
Grazie per aver letto questo tutorial e spero che lo troverai utile nel tuo futuro Flashing!
