Share
Benvenuto in una serie di lezioni di Suggerimento rapido in cui verremo informati sui componenti di Flash Professional CS5. Nel tutorial di questa settimana impareremo a conoscere i componenti Button e Label.
Nel file SWF vengono visualizzati due pulsanti e due etichette. Quando fai clic sul pulsante in alto, l'etichetta si aggiornerà con quante volte hai fatto clic sul pulsante. Il pulsante in basso agisce come un interruttore con uno stato acceso / spento. Quando fai clic sul pulsante in basso, l'etichetta cambia per mostrare se il pulsante è acceso o spento.
L'etichetta in basso consente colori diversi nello stesso testo. Questo si ottiene inserendo HTML nel testo (che vedremo anche in questo tutorial).
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 due pulsanti e due etichette sul palco.
Nel pannello Proprietà, assegnare al primo pulsante il nome dell'istanza "basicButton". Se il pannello Proprietà non viene visualizzato, vai a Menu> Finestra> Componenti o premi CTRL + F3
Imposta la X del pulsante su 86,00 e la sua Y su 107,00.
Nel pannello Proprietà, assegna alla prima etichetta il nome dell'istanza "basicLabel".
Imposta l'etichetta da X a 239,00 e la sua Y a 107,00
Nel pannello Proprietà, assegna al secondo pulsante il nome dell'istanza "toggleButton".
Imposta la X del pulsante su 86.00 e la sua Y su 234.00
Nel pannello Proprietà assegna alla seconda etichetta il nome dell'istanza "htmlLabel".
Imposta l'etichetta da X a 239,00 e la sua Y a 234,00
Crea un nuovo file actionscript e dagli il nome Main.as. Dichiareremo i nostri componenti in Main.as, quindi abbiamo bisogno di disattivare "istanze delle fasi auto dichiarative", il vantaggio di fare ciò è che ottieni l'hint del codice per l'istanza.
Vai a Menu> File> Impostazioni pubblicazione. Fare clic sulle impostazioni accanto a Script [Actionscript 3.0]
Deseleziona "Dichiara automaticamente le istanze di stage".
Nel Main.as Apri la dichiarazione del pacchetto e importa le classi che useremo.
Aggiungi quanto segue al Main.as:
package import flash.display.MovieClip; importare fl.controls.Button; importare fl.controls.Label; // necessario per dimensionare automaticamente le etichette import flash.text.TextFieldAutoSize; import flash.events.MouseEvent; import flash.events.Event;
Aggiungi la dichiarazione della classe, estendi Un filmato e impostare la nostra funzione di costruttore. Aggiungi quanto segue a Main.as:
public class Main estende MovieClip // Questo è il nostro componente basicButton sullo stage public var basicButton: Button; // Questo è il nostro componente toggleButton sullo stage public var toggleButton: Button; // Questo è il nostro componente basicLabel sullo stage public var basicLabel: Label; // Questo è il nostro componente htmlLabel sullo stage public var htmlLabel: Label; // Utilizzato per tenere traccia di quante volte l'utente ha fatto clic sul pulsante var numClicks: Number = 0; funzione pubblica Main () // Utilizzato per impostare i pulsanti e aggiungere eventListeners setupButtons (); // Usato per configurare le nostre etichette setupLabels ();
Qui definiremo il setupButton () e setupLabels () funzioni.
Nel codice qui sotto utilizziamo il htmlText proprietà dell'etichetta; questo ci permette di inserire HTML nella stringa di testo. Va notato che Flash supporta solo un insieme limitato di tag HTML; controlla i livedocs per un elenco di tag HTML supportati. Useremo il tag per modificare il colore del testo.
Aggiungi quanto segue al Main.as
public function setupButtons (): void // imposta l'etichetta sul pulsante basicButton.label = "Cliccami"; basicButton.addEventListener (MouseEvent.CLICK, basicButtonClick); toggleButton.label = "On"; // Usiamo selezionati qui per mettere il pulsante nello stato "On" toggleButton.selected = true; // Utilizzato per attivare / disattivare il pulsante ... ogni volta che si fa clic sul pulsante, viene selezionato true / false toggleButton.toggle = true; // La proprietà toggle si aspetta una modifica, quindi qui usiamo Event.CHANGE not MouseEvent.CLICK toggleButton.addEventListener (Event.CHANGE, toggleButtonClick); private function setupLabels (): void // In questo modo l'etichetta viene posizionata automaticamente per contenere il testo passato a basicLabel.autoSize = TextFieldAutoSize.LEFT; // Imposta il testo iniziale dell'etichetta basicLabel.text = "Hai fatto clic sul pulsante 0 volte"; htmlLabel.autoSize = TextFieldAutoSize.LEFT; // Per poter utilizzare i tag html supportati dai flash, utilizziamo htmlText dell'etichetta htmlLabel.htmlText = "Il pulsante è Sopra";
Qui codificheremo i nostri ascoltatori di eventi che abbiamo aggiunto ai pulsanti. Aggiungi quanto segue al Main.as:
funzione privata basicButtonClick (e: Event): void // Incrementa il numero di volte in cui l'utente ha fatto clic sul pulsante numClicks ++; // Qui eseguiamo numClicks su una stringa poiché il testo si aspetta una stringa basicLabel.text = "Hai fatto clic sul pulsante" + String (numClicks) + "times"; private function toggleButtonClick (e: Event): void // Se il pulsante è selezionato, impostiamo htmlText dell'etichetta con un "On" verde; // E cambia l'etichetta dei pulsanti su "ON"; // Preferibilmente potresti fare qualcosa di utile qui come mostrare un filmato se (e.target.selected == true) htmlLabel.htmlText = "Il pulsante è Sopra"; e.target.label =" ON "; // Fai qualcosa di utile else // Se il pulsante non è selezionato, impostiamo il htmlText dell'etichetta con un rosso Off // E cambia i pulsanti Etichetta su" OFF " ; // Preferibilmente potresti fare qualcosa di utile qui come nascondere un clip filmato htmlLabel.htmlText = "Il pulsante è via"; e.target.label =" OFF "; // Fai qualcosa di utile
Quindi, chiudere le dichiarazioni di classe e pacchetto con due parentesi graffe di chiusura.
Usare i componenti Button ed Label è un modo semplice e veloce per avere pulsanti ed etichette completamente funzionali senza doverli costruire da soli.
Noterai nel pannello Parametri componente dei componenti che puoi controllare e selezionare determinate proprietà.
Proprietà del componente del pulsante.
Accentsconagua
enfatizzato: un valore booleano che indica se viene disegnato un bordo attorno al componente Button quando il pulsante si trova nello stato suabilitato: un valore booleano che indica se il componente può accettare l'input dell'utenteetichetta: l'etichetta di testo per il componentelabelPlacement: posizione dell'etichetta in relazione a un'icona specificataselezionato: un valore booleano che indica se un pulsante di attivazione / disattivazione è attivato o disattivatoginocchiera: un valore booleano che indica se un pulsante può essere attivatovisibile: un valore booleano che indica se l'istanza del componente è visibiledimensione dell'auto: indica in che modo un'etichetta viene ridimensionata e allineata per adattarsi al valore della sua proprietà di testocondenseWhite: un valore booleano che indica se è necessario rimuovere spazi bianchi extra come spazi e interruzioni di riga da un componente Label che contiene testo HTMLabilitato: un valore booleano che indica se il componente può accettare l'input dell'utentehtmlText: il testo che deve essere visualizzato dal componente Label, incluso il markup HTML che esprime gli stili di quel testoselezionabile: un valore booleano che indica se il testo può essere selezionatotesto: il testo in chiaro che deve essere visualizzato dal componente Label.visibile: un valore booleano che indica se l'istanza del componente è visibilewordWrap: un valore booleano che indica se l'etichetta supporta il ritorno a capo automaticoI file della guida sono un ottimo posto per saperne di più sulle proprietà dei componenti che puoi impostare nel pannello Parametri componente. Ecco le pagine vissute per Button e per l'etichetta.
Grazie per la lettura e attenzione ai suggerimenti rapidi dei componenti in arrivo!
