Share
In questa Introduzione rapida ai componenti di Flash Professional guarderemo ScrollPane e ColorPicker. Tuffiamoci dentro?
Guarda la demo. In essa, sul lato sinistro, vedrai due componenti Color Picker, due etichette etichettate come "Selettore colore personalizzato" e "Selettore colore normale" e un rettangolo blu.
Il selettore colori personalizzato utilizza colori presi esclusivamente da una selezione di nostra scelta. Il Normal Color Picker ha tutti i colori di un normale selettore di colori e quando un utente sceglie un colore, cambiamo il rettangolo con il colore che hanno scelto.
Sul lato destro del file SWF c'è un ScrollPane, nel quale viene caricata un'immagine, e un pulsante che usiamo per iniziare il caricamento dell'immagine.
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 ColorPickers, due etichette, un ScrollPane e un pulsante sullo stage.
Nel pannello Proprietà, assegna alla prima etichetta il nome dell'istanza customLabel.
Se il pannello Proprietà non viene visualizzato, vai a Menu> Finestra> Proprietà o premi CTRL + F3.
Imposta l'etichetta X su 16 e la sua Y su 12.
Dare alla seconda etichetta il nome dell'istanza "normalLabel"; imposta la sua X a 16 e la sua Y a 176.
Assegna al primo ColorPicker il nome dell'istanza "customColorPicker"; imposta la sua X a 16 e la sua Y a 41.
Assegna al secondo ColorPicker il nome dell'istanza "normalColorPicker"; imposta la sua X a 16 e la sua Y a 206.
Dare al secondo ScrollPane il nome dell'istanza "imageScrollPane"; imposta la sua X su 277 e la sua Y su 29.
Assegna al pulsante il nome dell'istanza "loadImageButton"; imposta la sua X a 354 e la sua Y a 332.
Usando lo strumento rettangolo disegnare un rettangolo sul palco. Ho disegnato il mio con un colore blu. Seleziona il rettangolo e vai a Menu> Modifica> Converti in simbolo (o premere F8); imposta il suo nome su "square" e assicurati che "Type" sia impostato su MovieClip.
Quindi, dargli un nome di istanza di piazza come abbiamo fatto con i componenti sopra. Imposta la sua dimensione su 143x97px, imposta la sua X su 90 e la sua Y su 47.
ColorPicker è un piccolo grande componente che consente agli utenti di selezionare un colore. È inoltre possibile definire i colori che si desidera siano disponibili in ColorPicker.
Il componente ScrollPane visualizza i file DisplayObjects, JPEG, GIF e PNG, nonché i file SWF, in un'area scorrevole. Quando il contenuto che stai caricando è troppo grande per il film, questo è un componente ideale da utilizzare.
Creare un nuovo file ActionScript e assegnargli 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.
Vai a Menu> File> Impostazioni pubblicazione e fai clic su Impostazioni accanto a Script [Actionscript 3.0]
Deseleziona "Dichiara automaticamente le istanze di stage".
Successivamente, in Main.as, apriremo la dichiarazione del pacchetto e importeremo le classi che useremo.
Aggiungi quanto segue a Main.as:
pacchetto // Estendiamo MovieClip import flash.display.MovieClip; // È necessario importare i componenti che stiamo usando import fl.controls.ColorPicker; importare fl.controls.Label; importare fl.containers.ScrollPane; importare fl.controls.Button; // Gli eventi di cui abbiamo bisogno import flash.events.MouseEvent; import flash.events.Event; // Necessario per cambiare il colore di MovieClip import flash.geom.ColorTransform; // Necessario per caricare l'immagine import flash.net.URLRequest;
Aggiungi la dichiarazione di classe, estendi il filmato e imposta la nostra funzione di costruzione. Qui dichiariamo le nostre variabili e chiamiamo le nostre funzioni nel Main Constructor.
Aggiungi quanto segue a Main.as
public class Main estende MovieClip // I nostri componenti sul palco public var customLabel: Label; public var normalLabel: Label; public var customColorPicker: ColorPicker; public var normalColorPicker: ColorPicker; var quadrato pubblico: DisplayObject; public var imageScrollPane: ScrollPane; public var loadImageButton: Button; funzione pubblica Main () setupLabels (); setupColorPickers (); setupButton ();
Qui definiamo le funzioni utilizzate nel nostro costruttore.
Nel setupLabels funzione impostiamo il testo sulle etichette. Nel setupColorPickers abbiamo impostato i colori per il nostro customColorpicker; questi colori sono una serie di colori che utilizzano la sintassi di Flash per i colori esadecimali. Aggiungiamo anche un listener di eventi ai nostri selettori di colori in modo che quando un utente sceglie un colore, spariamo dalla funzione pertinente.
Nel setupButton funzione impostiamo la proprietà Label del pulsante e aggiungiamo un listener di eventi per quando l'utente fa clic sul pulsante.
Aggiungi quanto segue a Main.as:
private function setupLabels (): void // Imposta il testo delle etichette customLabel.text = "Custom Color Picker"; normalLabel.text = "Normal Color Picker" private function setupColorPickers (): void // Qui impostiamo i colori per il selettore di colori customColorPicker.colors = [0x000FF, 0xFF0000,0x00FF00, 0xFFFF00,0xFF33FF]; // Quando l'utente seleziona un colore, chiamiamo la funzione changeColor customColorPicker.addEventListener (Event.CHANGE, changeColor); normalColorPicker.addEventListener (Event.CHANGE, ChangeColor); private function setupButton (): void // Imposta l'etichetta Buttons (The Text on the Button) loadImageButton.label = "Carica immagine"; // Quando l'utente fa clic sul pulsante, chiamiamo loadImage function loadImageButton.addEventListener (MouseEvent.CLICK, loadImage);
Qui codifichiamo le funzioni per gli ascoltatori di eventi che abbiamo aggiunto sopra.
Il cambia colore la funzione usa a ColorTransform oggetto in modo che possiamo cambiare il colore del rettangolo sul palco. Impostiamo il colore di ColorTransform sul colore che l'utente ha selezionato usando e.target.selectedColor. L'obiettivo è ColorPicker il cui colore è stato appena modificato. Quindi, usiamo il trasformare proprietà del piazza movieClip e imposta il colorTransform al colore selezionato.
Accentsconagua
funzione privata changeColor (e: Event): void // È necessario impostare un oggetto ColorTransform per modificare il colore del colore del MovieClip: ColorTransform = new ColorTransform (); // imposta il colore colorTransform al colore selezionato da colorPicker color.color = e.target.selectedColor; // Cambia il colore del movieClip usando ColorTransform square.transform.colorTransform = color; private function loadImage (e: Event): void // Carica l'immagine nello scrollPane imageScrollPane.load (new URLRequest ("image.jpg")); // chiude la classe // chiude il pacchetto Noterai nel Parametri dei componenti pannello (che può essere aperto dal menu Finestra) che è possibile controllare e selezionare alcune proprietà.
L'immagine sopra è per il componente ColorPicker.
Le proprietà sono le seguenti per il componente ColorPicker:
Le proprietà per ScrollPane sono
ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO.ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO. 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 il suggerimento rapido sui componenti Button ed Label
