Share
La creazione di una visualizzazione accattivante dei dati è sempre stata una delle caratteristiche principali di Flash. Ti permette di ottenere risultati eye candy con dati dinamici reali; che si tratti di un preloader, di un gioco o di una presentazione in ufficio.
Questo semplice tutorial ti mostrerà come costruire un misuratore di ago. Imparerai come applicare un effetto di "lucentezza", comunicare con XML e applicare un motore di interpolazione alle rotazioni.
Crea tre file: gauge.fla, gauge.xml e Main.as.
Apri gauge.xml. Questo file conterrà i dati che popolano i contatori; modificali come preferisci in base alla seguente struttura:
64 Maschio 26 Femmina
Il valore è una percentuale e quindi dovrebbe essere compreso tra 0 e 100. La descrizione verrà visualizzata sul misuratore corrispondente.
Aprire gauge.fla e modificare le impostazioni come mostrato di seguito.
Crea un nuovo simbolo, chiamalo gauge_mc e impostare la classe su Valutare.
Quindi, crea un cerchio come mostrato di seguito:
Ciò formerà le parti interne del calibro, quindi dai il nome a questo livello "sfondo".
Aggiungi un tratto usando lo strumento Bottiglia d'inchiostro (scorciatoia: S) con le seguenti impostazioni:
(Fai clic sul cerchio dello sfondo per applicare il tratto.)
Passare allo strumento Selezione, fare clic sul tratto per selezionarlo e premere Modifica> Forma> Converti linee in riempimenti. Ora copia il riempimento e incollalo in un nuovo livello, creato sopra il livello esistente, chiamato "frame". Aggiungi due nuovi tratti sfumati, ciascuno dei pixel spessi. Si va all'interno del telaio, l'altro va all'esterno.
Crea un nuovo livello, chiamalo "spillone" e al centro crea un piccolo cerchio grigio con uno spesso contorno nero:
Crea un nuovo livello sotto il perno e chiamalo "ago". Disegna una linea, converti la linea in un riempimento e converti questo riempimento in un simbolo (chiamato needle_mc).
È necessario spostare sia il punto di registrazione che il punto di rotazione di questo nuovo simbolo al centro della parte inferiore della linea. Per spostare il punto di registrazione, fai doppio clic sull'ago da modificare, quindi trascina il riempimento finché il punto di registrazione non si trova nella posizione corretta. Per spostare il punto di rotazione, torna a modificare il simbolo gauge_mc, quindi usa lo strumento Trasformazione libera (scorciatoia: Q) per fare doppio clic sulla circonferenza. Questo lo farà scattare al punto di registrazione dell'ago.
Crea un nuovo livello sotto i "marcatori" dell'ago. Disegna un cerchio, più piccolo della cornice, con un tratto nero spesso e senza riempimento.
Su un altro nuovo livello, seleziona lo strumento PolyStar e usalo per creare una stella a dieci lati, centrata sull'ago. Lo useremo per creare i piccoli indicatori intorno all'anello.
Sul livello dei marcatori, traccia delle linee sottili dall'ago a ogni punto della stella. In questo modo, sai che sono equidistanti.
Crea un cerchio ancora più piccolo di quello dell'indicatore, quindi seleziona le linee all'interno di questo cerchio e premi cancella per cancellarle tutte.
Cancellare il cerchio interno, i marcatori esterni e la sezione inferiore dell'anello marcatore, come evidenziato di seguito:
Etichetta i marcatori: il primo come 0, quello centrale come 50 e l'ultimo come 100.
Crea un nuovo livello in cima a tutti gli altri chiamati "vetro" e un altro sopra quello chiamato "gloss".
Nello strato di vetro, disegna un cerchio bianco delle dimensioni dello sfondo. Clic Finestra> Colore e dargli un riempimento gradiente radiale, in cui entrambi i colori sono bianchi, ma uno ha un alfa al 20% e l'altro ha un alfa al 5%.
Nel livello di lucentezza, crea due cerchi bianchi con alfa sfumati che vanno dal 70% al 30%. Usa lo strumento Selezione per comprimere le loro forme con quelle mostrate qui sotto:
Crea un altro nuovo livello denominato "etichetta" e aggiungi un campo di testo con "label_txt" come nome dell'istanza. Non dimenticare di incorporare il carattere!
Aggiungi un nuovo livello denominato "valore" e aggiungi un campo di testo con "value_txt" come nome dell'istanza. Ancora una volta, non dimenticare di incorporare i caratteri. Sto usando un font chiamato LCDDot, che puoi trovare nel file zip.
In questo momento, l'ago punta al segno del 50%. Abbiamo bisogno che puntino allo 0% quando inizia, quindi fai doppio clic su "needle_mc", seleziona il riempimento e ruotalo a -143º. Questo ci darà l'offset di cui abbiamo bisogno.
Assicurarsi che non sia selezionato nulla, quindi nel pannello Proprietà, digitare Principale nella casella Class per impostare Main.as come classe del documento. Ora aprilo.
Useremo il tweening engine di GreenSock, TweenMax. Puoi scaricarlo qui: http://blog.greensock.com/tweenmax/
Importa le classi necessarie per Main.as:
package import flash.display.MovieClip; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; import com.greensock.TweenMax; import com.greensock.events.TweenEvent;
Questo codice dovrebbe andare dopo "import com.greensock.events.TweenEvent;" ma prima dell'ultimo "". La funzione Main () sarà la prima funzione eseguita quando viene caricato il file SWF.
Accentsconagua
public class Main estende MovieClip private var xmlLoader: URLLoader; // questo caricherà xml private var xml: XML; // questo conterrà i dati xml caricati dagli indicatori di var private xmlLoader: Array; // questo memorizzerà la funzione pubblica dei calibri creati Main () gauges = new Array (); // avvia l'array xmlLoader = new URLLoader (); // avvia il loader xmlLoader.addEventListener (Event.COMPLETE, updateGauges) // quando viene caricato XML, aggiorna gli indicatori xmlLoader.load (new URLRequest ("gauge.xml")); // avvia il caricamento del file XML Metti questo codice prima degli ultimi due "" nel tuo file. Questa funzione verrà eseguita quando l'XML è stato caricato.
funzione privata updateGauges (e: Event): void // popola l'xml con i dati ricevuti xml = new XML (e.target.data); // itera attraverso gli indicatori all'interno della struttura xml var ln: int = xml.gauge.length (); //numero dis all'interno del file XML var i: int = 0 while (i < ln) gauges[i] = new Gauge(); //creates a new Gauge and puts it in the gauges[] array gauges[i].label_txt.text = xml.gauge[i].description[0].toUpperCase(); //adds the description to the label of the i-th gauge based on the XML's i-th calibri [i] .value_txt.text = "0%" // avvia il valore del misuratore di livello // anima la rotazione del calibro (286 è la rotazione massima dell'ago che abbiamo costruito) var tm: TweenMax = new TweenMax (calibri [i] .needle_mc, 2, rotation: Math.round (xml.gauge [i] .value [0] * 286/100)); // questo evento viene attivato quando il valore dell'interpolazione cambia; facciamo questo per aggiornare il testo del valore in base alla posizione dell'ago tm.addEventListener (TweenEvent.UPDATE, onTween) // y indicatori di posizionamento [i] .y = 45 // x posizionamento (220 pixel di distanza tra loro e offset di 50 pixel dal margine sinistro calibri [i] .x = (i * 220) + 50 // aggiunge allo stage addChild (gauges [i]); // aumenta i per la successiva iterazione i ++
Ancora una volta, inserisci questo prima degli ultimi due "" nel tuo codice. Questa funzione viene eseguita ripetutamente mentre l'ago viene interpolato (ruotato).
funzione privata onTween (e: Event): void / * questo impedirà un noto bug di rotazione all'interno del flash * dove, quando ruota, dopo aver raggiunto 180º inizia a contare da -180 * (cioè da 0 a 180, -180 a 0). Aggiungendo 360 all'equazione quando la rotazione è negativa * possiamo assicurarci che il valore sia corretto. * * / if (e.target.target.rotation < 0) e.target.target.parent.value_txt.text = (Math.round( (360+e.target.target.rotation) * 100 / 286) + "%"); else e.target.target.parent.value_txt.text = (Math.round( e.target.target.rotation * 100 / 286) + "%");
Confuso su dove dovrebbe andare il codice? Controllalo qui.
Ora tutto ciò che serve è tornare a gauge.fla, e nel primo frame aggiungere uno sfondo e un titolo:
Come puoi vedere, è più facile di quanto sembri. Prenditi il tuo tempo ed espandi il concetto: crea un preloader, un misuratore di larghezza di banda, qualunque cosa tu voglia. Spero vi sia piaciuto questo tutorial, grazie per la lettura!
