Share
In questo suggerimento rapido sugli strumenti di Flash Professional CS5 esamineremo l'area di testo e i componenti di input di testo.
Diamo una rapida occhiata a cosa stiamo lavorando in questo suggerimento rapido:
Nella demo vedi cinque etichette, quattro sono solo etichette statiche che descrivono a cosa servono i componenti. L'etichetta in basso a sinistra mostra quanti caratteri sono disponibili per la scrittura e cambierà ogni volta che l'utente inserisce il testo nel testo dei commenti. L'immissione del testo del nome consente solo numeri e spazi in maiuscolo e minuscolo. La casella password mostra il testo come una password con asterischi e consente di inserire solo 16 caratteri (poiché la maggior parte della password ha una lunghezza impostata). I commenti textArea consente all'utente di inserire il testo, ma consente solo 250 caratteri. L'area di testo in stile è stilizzata utilizzando una combinazione di TextFormat Oggetto e HTML.
Apri un nuovo documento Flash e imposta le seguenti proprietà:
Apri la finestra dei componenti andando su Menu> Finestra> Componenti o premi CTRL + F7.
Trascina cinque etichette, due TextInput e due TextAreas sullo stage.
Nel pannello Proprietà, assegna alla prima etichetta il nome dell'istanza "nameLabel". Se il pannello Proprietà non viene visualizzato, vai a Menu> Finestra> Componenti o premi CTRL + F3.
Imposta l'etichetta da X a 35,00 e la sua Y a 45,00
Imposta la larghezza dell'etichetta su 100,00 e la sua altezza su 22,00
Crea un nuovo file ActionScript e assegnagli il nome Main.as. Dichiareremo i nostri componenti nel Main.as quindi abbiamo bisogno di disattivare "istanze di stage dichiarare automaticamente", il vantaggio di ciò è che ottieni l'hint del codice per l'istanza.
Vai a Menu> File> Impostazioni pubblicazione e fai clic su Impostazioni accanto a Script [Actionscript 3].
Deseleziona "dichiara automaticamente istanze di stage".
In Main.as, apri la dichiarazione del pacchetto e importa le classi che useremo. Aggiungi quanto segue al Main.as:
pacchetto // Componenti import fl.controls.Label; importare fl.controls.TextArea; importare fl.controls.TextInput; // È necessario estendere il clip filmato in modo da importarlo import flash.display.MovieClip; // Necessario per dimensionare automaticamente le nostre etichette import flash.text.TextFieldAutoSize; // Eventi import flash.events.TextEvent; import flash.events.Event; // Necessario per lo stile textArea import flash.text.TextFormat;
Aggiungi la classe, estendi MovieClip e imposta la nostra funzione di costruzione. Aggiungi quanto segue a Main.as:
public class Main estende MovieClip // Etichette public var nameLabel: Label; public var passwordLabel: Label; public var commentsLabel: Label; public var numCharsLabel: Label; public var styledLabel: Label; // Input di testo public var nameTI: TextInput; public var passwordTI: TextInput; // Area di testo public var commentsTA: TextArea; public var styledTA: TextArea; // Numero di caratteri consentiti nell'area dei commenti private var numChars: uint = 250; // Usato per definire l'area di testo var taFormat: TextFormat; // Stringa da utilizzare in textArea var theString: String; funzione pubblica Main () // Utilizzato per impostare la nostra configurazione setupLabels (); // Utilizzato per impostare il textInputs setupTextInputs (); // Utilizzato per impostare il TextFormat per TextArea setupFormat (); // Usato per impostare la stringa che usiamo nel nostro TextArea setupString (); // Usato per set = su l'Area di testo setupTextAreas ();
Qui definiamo le funzioni utilizzate nel nostro costruttore. Ecco cosa faremo:
Nel setupTextInputs () funzione usiamo il limitare proprietà per limitare il carattere che l'utente può inserire. Poiché si tratta di un nome proprio, restringiamo l'utilizzo alle lettere maiuscole e minuscole e agli spazi (senza numeri).
Usando displayAsPassword, quando l'utente inserisce il testo, l'input mostrerà asterischi (molto simile a quello che faresti in HTML).
Usando maxChars impostiamo un numero predefinito di caratteri che l'utente può inserire; qui possono inserire fino a 16 caratteri.
Il TextFormat è un oggetto che passeremo al TextArea. Qui impostiamo il colore, la dimensione e settiamo il corsivo su true.
Quando impostiamo la stringa per TextArea, incorporiamo l'HTML, che sarà disponibile usando TextArea htmlText proprietà.
Nel setupTextAreas () funzione rendiamo modificabili i commenti TextArea in modo che l'utente possa inserirli; impostiamo anche il numero massimo di caratteri e impostiamo "word wrap" su true in modo che le parole si concludano quando si raggiunge la fine di textArea. Impostiamo htmlText uguale alla stringa che abbiamo creato e impostiamo il suo formato di testo. L'HTML nella stringa sovrascrive il textFormat ma il resto della stringa eredita ciò che abbiamo inserito nell'oggetto TextFormat.
Aggiungi quanto segue al Main.as
Accentsconagua
private function setupLabels (): void // Imposta il testo per le nostre etichette nameLabel.text = "Inserisci il tuo nome corretto"; passwordLabel.text = "Inserisci la tua password"; commentsLabel.text = "Inserisci i tuoi commenti"; // Qui eseguiamo numChars su una stringa poiché la proprietà text si aspetta una stringa numCharsLabel.text = String (numChars) + "characters left"; styledLabel.text = "Un'area di testo stile"; // Utilizziamo l'autosize in modo che la nostra etichetta possa contenere tutto il testo nameLabel.autoSize = nameLabel.autoSize = TextFieldAutoSize.LEFT; passwordLabel.autoSize = passwordLabel.autoSize = TextFieldAutoSize.LEFT; commentsLabel.autoSize = commentsLabel.autoSize = TextFieldAutoSize.LEFT; numCharsLabel.autoSize = numCharsLabel.autoSize = TextFieldAutoSize.LEFT; styledLabel.autoSize = styledLabel.autoSize = TextFieldAutoSize.LEFT; funzione privata setupTextInputs (): void // Qui restringiamo l'input solo a minuscole a-z, maiuscole A-z e spazi nomeTI.restrict = "a-zA-Z"; // Usa displayAsPassword per visualizzare l'input di testo come password passwordTI.displayAsPassword = true; // Limita il numero di caratteri che l'utente può inserire dalla maggior parte delle password passwordTI.maxChars = 16; funzione privata setupFormat (): void // Qui impostiamo un oggetto TextFormat che viene utilizzato per aggiungere // style al textArea taFormat = new TextFormat; taFormat.size = 16; taFormat.color = 0x0000FF; taFormat.italic = true; private function setupString (): void // Questa è la stringa contenente HTML che passiamo al textArea theString = "Questo testo è audacePossiamo cambiare il colore in "; theString + ="Anche rosso usando HTML "; theString + =" Il resto di questo testo è impostato dal formato testo "; funzione privata setupTextAreas (): void // Impostazione di textArea su modificabile che l'utente può digitare in esso commentsTA.editable = true; // Imposta il numero massimo di caratteri che il campo di testo può contenere qui desideriamo commenti // Per essere di 250 caratteri o meno commentsTA.maxChars = numChars; // Imposta il ritorno a capo su true, le parole si concluderanno quando raggiungono la fine // del textArea commentsTA.wordWrap = true; commentsTA.addEventListener (TextEvent.TEXT_INPUT, textEntered); styledTA.htmlText = theString; // Qui impostiamo il formato su textArea styledTA.setStyle ("textFormat", taFormat); Il textEntered () la funzione è usata dal commentsTA eventsListener. Qui otteniamo il numero di caratteri disponibili rimasti per digitare e aggiornare il
etichetta per mostrare quanti ne rimangono.
Quindi chiudiamo la classe e il pacchetto.
private function textEntered (e: Event): void // Ottiene il numero di caratteri disponibili per digitare var charsLeft: uint = numChars - e.target.length; // Cast charsSollevare una stringa e aggiornare l'etichetta numCharsLabel.text = String (charsLeft) + "caratteri rimanenti"; // chiude la classe // chiude il pacchetto
L'utilizzo di textInputs e TextAreas è un ottimo modo per consentire all'utente di inserire testo o mostrare testo in stile.
Noterai nel pannello Parametri componenti dei componenti che puoi controllare e selezionare alcune proprietà.
L'immagine sopra è per il componente TextArea
condenseWhite: un valore booleano che indica se viene rimosso ulteriore spazio bianco dal componente che contiene testo HTMLmodificabile: un valore booleano che indica se il campo di testo può essere modificato dall'utenteabilitato: un valore booleano che indica se il componente può accettare l'input dell'utentehorizontalScrollPolicy: imposta la politica di scorrimento per la barra di scorrimento orizzontale. Questo può essere uno dei seguenti valori: ScrollPolicy.ON: La barra di scorrimento orizzontale è sempre attiva.ScrollPolicy.OFF: La barra di scorrimento è sempre disattivata.ScrollPolicy.AUTO: La barra di scorrimento si accende quando è necessaria.AUTO htmlText: il testo che deve essere visualizzato dal componente Label, incluso il markup HTML che esprime gli stili di quel testomaxChars: il numero massimo di caratteri che un utente può inserire nel campo di testo.limitare: la stringa di caratteri che il campo di testo accetta da un utentetesto: una stringa che contiene il testo che si trova nel componente verticalScrollPolicy: la politica di scorrimento per la barra di scorrimento verticale. Questo può essere uno dei seguenti valori: ScrollPolicy.ON: La barra di scorrimento è sempre attiva.ScrollPolicy.OFF: La barra di scorrimento è sempre disattivata.ScrollPolicy.AUTO: La barra di scorrimento si accende quando è necessaria.AUTO visibile: un valore booleano che indica se l'istanza del componente è visibilewordWrap: un valore booleano che indica se il testo viene eseguito alla fine della rigadisplayAsPassword: un valore booleano che indica se l'istanza del componente TextInput corrente è stata creata per contenere una password o per contenere del testomodificabile: un valore booleano che indica se il campo di testo può essere modificato dall'utenteabilitato: un valore booleano che indica se il componente può accettare l'input dell'utentemaxChars: il numero massimo di caratteri che un utente può inserire nel campo di testo.limitare: la stringa di caratteri che il campo di testo accetta da un utentetesto: una stringa che contiene il testo che si trova nel componente visibile: un valore booleano che indica se l'istanza del componente è visibilePer vedere le proprietà per l'etichetta, assicurati di controllare il mio suggerimento precedente su etichette e pulsanti.
I file della guida sono un ottimo posto per saperne di più sulle proprietà dei componenti che puoi impostare nel pannello dei parametri.
Grazie per la lettura e attenzione per il prossimo componente imminente Suggerimento rapido!
