Share
In questa Introduzione rapida ai componenti di Flash Professional, esamineremo UILoader e UIScrollbar.
Dai un'occhiata all'anteprima. Nel file SWF, sul lato sinistro c'è un componente UILoader che è invisibile a prima vista (perché non c'è nulla in esso); caricheremo un'immagine in questo.
Sotto UILoader c'è un'etichetta con il testo "Immagine non caricata"; dopo aver caricato correttamente l'immagine, cambieremo il testo di questa etichetta per leggere "Image Loaded".
Il pulsante sotto l'etichetta viene utilizzato per avviare il caricamento dell'immagine. Sul lato destro c'è un campo di testo e UIScrollbar che sono inizialmente invisibili (il campo di testo è invisibile perché non c'è nulla in esso); premendo il pulsante con l'etichetta "Carica testo" carichiamo il testo da un file di testo di esempio e impostiamo l'UIScrollbar per essere visibile.
Apri un nuovo documento Flash e imposta le seguenti proprietà:
Apri la finestra dei componenti andando a Menu> Finestra> Componenti o premendo CTRL + F7.
Trascina un UILoader, un'etichetta, due pulsanti e un UIScrollbar sul palco.
Nel pannello Proprietà date a UILoader il nome dell'istanza "imageLoader". Se il pannello Proprietà non viene visualizzato vai a Menu> Finestra> Proprietà o premere CTRL + F3.
Imposta la posizione X di UILoader su 37 e su Y su 20
Assegna all'etichetta il nome dell'istanza "loadedLabel". Imposta l'etichetta da X a 37 e la sua Y a 182.
Assegna al primo pulsante il nome dell'istanza "loadImageButton" e imposta l'X dell'etichetta su 37, la sua Y su 213.
Nel pannello Strumenti seleziona lo strumento Testo e trascina un campo di testo sullo stage. Vai al pannello Strumenti non visualizzato Menu> Finestra> Strumenti o premere CTRL + F2.
Dare a TextField il nome dell'istanza "loremText". Imposta l'X del TextField su 272 e il suo Y su 15, quindi imposta la larghezza su 243, l'altezza su 101.
Dare a UIScrollbar il nome dell'istanza "textScroller". Imposta la X di UIScrollbar a 525,00 e la sua Y a 15
Dai al secondo il nome dell'istanza "loadTextButton" e imposta la sua X su 272, la sua Y su 213.
Il componente UILoader è un contenitore in grado di visualizzare file SWF, JPEG, JPEG progressivi, PNG e GIF. È possibile caricare queste risorse in fase di runtime e monitorare opzionalmente l'avanzamento del caricamento. Per vedere come questo può essere fatto, guarda il mio tutorial sul componente ProgressBar (i concetti sono gli stessi) e si applica a UILoader come ho fatto con il Loader in quel tutorial.
L'UIScrollbar consente di aggiungere una barra di scorrimento a un campo di testo. Quando hai un lungo blocco di testo, il componente UIScrollbar ti permette di scorrere senza avere un campo di testo molto grande per accogliere tutto il tuo testo. Questo componente è molto facile da usare in quanto è possibile trascinarlo su un campo di testo e automaticamente "si collega" a quel campo di testo. Qui, ti mostrerò come farlo in ActionScript.
Crea un nuovo file ActionScript e assegnagli il nome Main.as.
Dichiareremo i nostri componenti in Main.as, quindi dobbiamo disattivare "istanze di stage dichiarate automaticamente"; il vantaggio di ciò è che si ottiene il suggerimento del codice per l'istanza quando si utilizza l'editor di codice di Flash. Per fare questo vai Menu> File> Impostazioni pubblicazione e fai clic su Impostazioni, accanto a Script [Actionscript 3.0].
Deseleziona "Dichiara automaticamente le istanze di stage".
In Main.as, apri la dichiarazione del pacchetto e importa le classi che useremo. Aggiungi quanto segue a Main.as:
pacchetto // Estenderemo la classe di MovieClip import flash.display.MovieClip; // Importa i componenti che utilizzeremo import fl.containers.UILoader; importare fl.controls.Button; importare fl.controls.Label; importare fl.controls.UIScrollbar; // Necessario per i nostri gestori di eventi import flash.events.MouseEvent; import flash.events.Event; // Necessario caricare immagini e testo import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.TextField;
Aggiungi la classe, estendi il filmato e imposta la nostra funzione di costruzione.
Qui dichiariamo le nostre variabili e chiamiamo le nostre funzioni nel Principale() costruttore. Aggiungi quanto segue a Main.as:
public class Main estende MovieClip // I nostri componenti sul palco public var loadImageButton: Button; public var loadTextButton: Button; public var loadedLabel: Label; public var loremText: TextField; public var imageLoader: UILoader; public var textScroller: UIScrollbar; // Usato per caricare il testo nel TextField public var textLoader: URLLoader; funzione pubblica Main () setupButtonsAndLabels (); setupTextField (); setupScrollBar ();
Qui definiremo le funzioni utilizzate nel nostro costruttore. Nel setupButtonAndLabels () funzione abbiamo impostato i nostri pulsanti etichetta proprietà e aggiungi i listener di eventi da attivare quando l'utente fa clic sul pulsante.
Nel setupTextField () funzione impostiamo il campo di testo wordWrap proprietà a vero quindi il testo si sovrapporrà alla riga successiva quando raggiunge il bordo destro del campo di testo.
Nel setupScrollBar () impostiamo la direzione di UIScrollbar su "vertical" (questo può essere "vertical" o "horizontal") e, poiché non vogliamo che sia visibile quando il film inizia per la prima volta, impostiamo il suo visibile proprietà a falso.
Aggiungi quanto segue a Main.as:
private function setupButtonsAndLabels (): void // Imposta i pulsanti Label (Testo visualizzato sul pulsante) loadImageButton.label = "Carica immagine"; loadImageButton.addEventListener (MouseEvent.CLICK, loadImage); // Imposta i pulsanti Etichetta (Testo visualizzato sul pulsante) loadTextButton.label = "Carica testo"; loadTextButton.addEventListener (MouseEvent.CLICK, LoadText); // Imposta il testo delle etichette loadedLabel.text = "Immagine non caricata"; private function setupTextField (): void // Le linee si avvolgeranno quando raggiungono la fine (lato destro) del textfield loremText.wordWrap = true; private function setupScrollBar (): void // Imposta la nostra direzione scrollBars; può essere "verticale" o "orizzontale" textScroller.direction = "vertical"; textScroller.visible = false;
Qui codificheremo i listener di eventi che abbiamo aggiunto ai pulsanti e quindi chiudiamo la classe e il pacchetto.
Nel loadImage () funzione impostiamo il scaleContent del imageLoader a falso (Se fosse vero l'immagine si ridimensiona alla dimensione del UILoader), poiché vogliamo che l'immagine abbia le dimensioni normali. Carichiamo quindi l'immagine e aggiungiamo un listener di eventi da attivare quando l'immagine ha completato il caricamento.
Nel LoadText () funzione abbiamo impostato il nostro URLLoader e carica il file di testo. Qui impostiamo anche un ascoltatore da attivare al termine del caricamento del testo.
Nel imageLoaded () funzione impostiamo il testo dell'etichetta su "Image Loaded" - un semplice esempio, ma potresti fare qualcosa di meno banale in un'applicazione "reale".
Nel textLoaded () funzione impostiamo il testo del campo di testo sull'evento (e.target.data), che sarà il testo dal file di testo. Quindi impostiamo il UIScrollBar per essere visibile e impostare il suo scrollTarget (il campo di testo che desideriamo controllare).
Accentsconagua
private function loadImage (e: MouseEvent): void // Se è stato impostato su true, l'immagine ridimensionerà alla dimensione di UILoader // Qui impostiamo su false in modo che UILoader rispetti le dimensioni effettive dell'immagine imageLoader.scaleContent = false; // Carica l'immagine e attiva una funzione quando il caricamento è completo imageLoader.load (new URLRequest ("theimage.jpg")); imageLoader.addEventListener (Event.COMPLETE, imageLoaded); funzione privata loadText (e: MouseEvent): void // Carica il nostro file di testo e attiva una funzione quando il caricamento è completo textLoader = new URLLoader (); textLoader.load (new URLRequest ("lorem.txt")); textLoader.addEventListener (Event.COMPLETE, textLoaded); funzione privata imageLoaded (e: Event): void // Imposta il testo sull'etichetta loadedLabel.text = "Image Loaded"; private function textLoaded (e: Event): void // Imposta TextField sui dati dei caricatori (il testo nel file di testo) loremText.text = e.target.data; textScroller.visible = true; textScroller.scrollTarget = loremText; // chiude la classe chiude il pacchetto Si noti che alla fine chiudiamo la classe e il pacchetto.
Noterai nel Parametri componenti pannello dei componenti che è possibile controllare e selezionare alcune proprietà.
L'immagine sopra è per il componente UILoader.
Le proprietà per il componente UILoader sono le seguenti:
Le proprietà per UIScrollbar sono
I file di aiuto sono un ottimo posto per saperne di più su queste proprietà.
Per saperne di più sulle proprietà di etichette e pulsanti, assicurati di controllare la rapida introduzione ai componenti Button ed Label.
Grazie per aver letto!
