Share
Queste tre componenti si occupano tutti di numeri in intervalli. In questo suggerimento rapido vedremo come usarli.
Lo stepper numerico consente di impostare un numero all'interno di un determinato intervallo utilizzando la tastiera o facendo clic sui tasti freccia; il dispositivo di scorrimento ti consente di trascinare un pollice per selezionare un numero da un intervallo in un modo più grafico e la barra di avanzamento mostra fino a che punto all'interno di un intervallo è presente un determinato numero.
Nell'anteprima SWF vedrai due etichette, due NumericSteppers, due pulsanti, un cerchio blu e un cursore. I NumericSteppers sono usati per impostare un intervallo di numeri da cui genereremo un numero casuale. Quando si fa clic sul pulsante, l'etichetta cambia per mostrare il numero casuale generato. Il cursore viene utilizzato per modificare le dimensioni del cerchio; trascinando il cursore verso destra si aumenta la dimensione del cerchio, mentre trascinando a sinistra si diminuisce la dimensione del cerchio.
L'altro pulsante è usato per caricare un SWF; premere il pulsante e una ProgressBar viene aggiunta allo stage per mostrare lo stato di caricamento. Una volta che Loader carica il suo contenuto, viene aggiunto allo stage e ProgressBar viene rimosso.
Aprire un nuovo documento Flash e impostare le seguenti proprietà
Apri la finestra dei componenti andando su Menu> Finestra> Componenti o premendo CTRL + F7.
Trascina due pulsanti, due etichette, due punti di riferimento numerici e un cursore sullo stage.
Nel pannello Proprietà, assegna alla prima etichetta il nome dell'istanza "StepperLabel"
(Se il pannello Proprietà non viene visualizzato, vai a Menu> Finestra> Componenti o premi CTRL + F3)
Imposta l'etichetta da X a 19 e la sua Y a 9.
Usando il pannello Proprietà:
Disegna un cerchio blu con lo strumento ovale (tieni premuto MAIUSC trascinandolo per renderlo conforme a un cerchio) e convertilo in un Movie Clip selezionandolo, facendo clic con il pulsante destro del mouse e scegliendo "Converti in simbolo". Dagli un nome istanza di "theCircle".
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
Clicca su impostazioni accanto al 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 // I nostri componenti sul palco importano fl.controls.NumericStepper; importare fl.controls.Slider; importare fl.controls.ProgressBar; importare fl.controls.Label; importare fl.controls.Button; // Necessario per estendere l'importazione di classe flash.display.MovieClip; // Necessario per autosize il nostro Label's text import flash.text.TextFieldAutoSize; // Gli eventi di cui abbiamo bisogno in questo progetto import flash.events.MouseEvent; import flash.events.Event; importare fl.events.SliderEvent; import flash.events.ProgressEvent; // Necessario per caricare il file .swf import flash.net.URLRequest; import flash.display.Loader;
Aggiungiamo la classe, estendiamo il filmato e configuriamo la nostra funzione di costruzione.
Aggiungi quanto segue al Main.as:
public class Main estende MovieClip public var StepperLabel: Label; public var sliderLabel: Label; public var fromStepper: NumericStepper; public var toStepper: NumericStepper; public var randomNumButton: Button; public var loaderButton: Button; dispositivo di scorrimento var: slider; public var progressBar: ProgressBar; public var theLoader: Loader; public var theCircle: Circle; funzione pubblica Main () setupLabels (); setupSteppers (); setupButtons (); setupSlider ();
Qui definiamo le funzioni utilizzate nel nostro costruttore.
Nel setupLabels () funzione eseguiamo alcune impostazioni di base sulle nostre etichette usando dimensione dell'auto in modo che ogni etichetta si ridimensiona automaticamente per contenere tutto il testo passato ad esso.
Nel setupSteppers () funzione impostiamo le proprietà "minimo" e "massimo" dei nostri stepper. Questi sono usati per limitare i numeri disponibili all'interno dello stepper. Non stiamo usando un listener di eventi con i cursori qui (anche se puoi usare Event.CHANGE per i cursori per rilevare quando il loro valore è alterato).
Nel setupButtons () aggiungiamo il nostro testo ai pulsanti tramite il etichetta proprietà e aggiungi listener di eventi ai pulsanti.
Nel setupSliders () abbiamo impostato il minimo e massimo per i valori dei cursori. Il snapInterval imposta quanto cambia il valore del cursore durante il trascinamento; qui usiamo .1. Il liveDragging è impostato per vero in modo che il valore del cursore sia disponibile durante il trascinamento, se questo è stato impostato su falso non saremmo in grado di ottenere il valore finché l'utente non ha interrotto il trascinamento. Infine, aggiungiamo un listener al cursore.
Aggiungi quanto segue a Main.as:
private function setupLabels (): void StepperLabel.text = "Fare clic sul pulsante per un numero casuale"; // Attiva automaticamente l'etichetta per contenere tutto il testo StepperLabel.autoSize = StepperLabel.autoSize = TextFieldAutoSize.LEFT; sliderLabel.text = "Trascina il cursore per cambiare la dimensione del cerchio"; // Attiva automaticamente l'etichetta per contenere tutto il cursore di testoLabel.autoSize = sliderLabel.autoSize = TextFieldAutoSize.LEFT; funzione privata setupSteppers (): void // I valori minimi degli stepper fromStepper.minimum = 0; toStepper.minimum = 1; // Valori massimi degli stepper fromStepper.maximum = 99; toStepper.maximum = 100; // Imposta qui il valore degli stepper daStepper.value = 0; toStepper.value = 45; private function setupButtons (): void randomNumButton.label = "Clicca"; randomNumButton.addEventListener (MouseEvent.CLICK, getrandomNumer); loaderButton.label = "Carica Swf"; loaderButton.addEventListener (MouseEvent.CLICK, loadSWF); funzione privata setupSlider (): void // Valore minimo e massimo per il cursore slider.minimum = 1; slider.maximum = 3; // Imposta quanto il cursore "incrementa" di slider.snapInterval = .1; // liveDragging significa che il valore stepper è disponibile mentre si trascina // se impostato su false non si ottiene il valore finché non si interrompe il trascinamento di slider.liveDragging = true; slider.addEventListener (SliderEvent.CHANGE, scaleCircle);
Qui aggiungiamo le restanti funzioni.
Nel getrandomNumber () funzione chiamiamo un'altra funzione, generateRandomNumber (), che è da un tutorial qui su Activetuts + di Carlos Yanez. Vai avanti e dai un'occhiata a questo tutorial per vedere come funziona!
Il scaleCircle () la funzione ottiene il valore del cursore e imposta il scaleX e scaleY del il cerchio un filmato. Il scaleX e scaleY sono usati per cambiare la dimensione (scala) del filmato.
Il loadSWF () funzione imposta un Loader che usiamo per caricare un SWF esterno. Quindi aggiungiamo un listener di eventi al Loader contentLoaderInfo; il contentLoaderInfo contiene informazioni su cosa sta caricando il caricatore (qui, un SWF).
Quindi impostiamo a Barra di avanzamento e aggiungilo al palco. Abbiamo impostato i ProgressBar fonte alcontentLoaderInfo del Caricatore e dal contentInfoLoader contiene informazioni su ciò che il caricatore sta caricando (incluso il bytesLoaded e bytesTotal) questo è il modo in cui ProgressBar può aggiornarsi per riflettere la quantità di SWF caricata.
Il finishedLoading () function imposta la posizione xey del contenuto del Loader (cioè il SWF) e quindi lo aggiunge allo stage. A questo punto abbiamo finito con ProgressBar, quindi lo rimuoviamo dal palco.
Quindi chiudiamo la classe e il pacchetto.
Accentsconagua
funzione privata getrandomNumer (e: Event): void // Qui passiamo in due numeri (i valori degli stepper) generateRandomNumber (fromStepper.value, toStepper.value); private function generateRandomNumber (minNum: Number, maxNum: Number): void // Contiene il numero generato var randomNumber = (Math.floor (Math.random () * (maxNum - minNum + 1)) + minNum); // Qui assegniamo un numero casuale a una stringa in modo che possiamo usarlo nel testo delle etichette. StepperLabel.text = "Il tuo numero casuale è" + String (randomNumber); funzione privata scaleCircle (e: Event): void // scaleX e scaleY aumentano o diminuiscono le dimensioni di MovieClip // Qui usiamo il valore del cursore da "1-3" theCircle.scaleX = e.target.value; theCircle.scaleY = e.target.value; private function loadSwf (e: Event): void theLoader = new Loader (); theLoader.x = 319,00; theLoader.y = 31.00; theLoader.load (new URLRequest ("dummy.swf")); // Qui viene visualizzato il contenuto del caricatoreLoaderInfo che è ciò che il loader // sta caricando (in questo caso swf) theLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, finishedLoading); progressBar = new ProgressBar (); progressBar.x = 323; progressBar.y = 244; addChild (Progressbar); // L'origine della barra di avanzamento è impostata sul contenuto del caricatoreLoaderInfo // contentLoaderInfo contiene le informazioni sui byte del SWFLavanti / byteTotale progressBar.source = theLoader.contentLoaderInfo; public function finishedLoading (e: Event): void // Qui impostiamo il loader content.x e .y //I.E. swf's .x e .y theLoader.content.x = 290; theLoader.content.y = 20; // Aggiungiamo il contenuto dei caricatori I.E. il swf addChild (theLoader.content); // Poiché il caricamento del caricatore è terminato, non abbiamo più bisogno della barra di avanzamento // Quindi lo rimuoviamo removeChild (progressBar); // chiude la classe // chiude il pacchetto Anche in questo caso l'utilizzo dei componenti è un ottimo modo per aggiungere funzionalità ai filmati Flash senza doverli creare da zero
Noterai nel pannello Parametri componenti dei componenti che puoi controllare e selezionare determinate proprietà.
L'immagine sopra è per il componente NumericStepper
Le proprietà sono le seguenti per il componente NumericStepper:
Le proprietà per lo slider sono le seguenti
SliderDirection.HORIZONTAL e SliderDirection.VERTICAL.Le proprietà per ProgressBar sono le seguenti
ProgressBarDirection.RIGHT indica che la barra di avanzamento è riempita da sinistra a destra. Un valore di ProgressBarDirection.LEFT indica che la barra di avanzamento è riempita da destra a sinistra.ProgressBarMode.EVENT, ProgressBarMode.POLLED, ProgressBarMode.MANUAL Per vedere le proprietà delle etichette e dei pulsanti, assicurati di controllare il suggerimento rapido su etichette e pulsanti.
I file di aiuto sono anche un ottimo posto per saperne di più sulle proprietà dei componenti che puoi impostare nel pannello dei parametri.
Grazie per la lettura e stai attento a ulteriori presentazioni dei componenti in arrivo!
