• Web Design » Flash » Programmazione Flash

Pagina 3 di 3

6. ActionScript

Passiamo ora alla parte delle actions…è qui chesi presenteranno gli elementi fondamentali per la gestionedella nostra piccola applicazione ?

Per prima cosa, ci occupiamo di impostare qualcheproprietà di alcuni che abbiamo piazzato sulla scena.

nome.autoSize = true // il campo di testo "nome" di ridimensiona in automatico in base al testo contenutonomiGraf.setSize(150,50) // settiamo la combobox a dimensioni 150x50nomiGraf.addItem("Scegli un grafico") // Come primo elemento della comboox mettiamo un invito //alla sceltaarrayDati = new Array() // creiamo un array vuoto (in seguito ci memorizzeremo degli altri array// contenenenti il dato e la sua labelbarra0._visible = false // rendiamo invisibile la prima barra

Una volta impostati questi semplici aspetti iniziali, cioccupiamo di creare gli oggetti che si occuperanno di“raccogliere” le informazioni provenienti dallapagina Php. Creiamo quindi 2 oggetti loadVars, uno per i nomie uno per i dati del grafico

// Creiamo due oggetti loadVars, uno per i dati e uno per i nomidatiGrafico = new LoadVars()nomiGrafici = new LoadVars()

Ora, poiché la prima cosa che vogliamo è chel’utente scelga un grafico, è necessario saperequali sono i grafici disponibili. Abbiamo visto che la paginaphp quando non ha una variabile ‘nom’, selezionatutti i nomi. Quindi useremo il metodo LOAD per caricare inomi dei grafici (non mandando ovviamente da Flash alcunavariabile “nom”, come invece faremo in seguitoper avere i dati del grafico). Scriviamo anche le azioni daeseguire una volta caricate le variabili

// Carichiamo i nomi dei grafici dalla pagina phpnomiGrafici.load('http://localhost/Prove Flash-Php/Grafico/Select.php')// Una volta caricate le variabilinomiGrafici.onLoad = function(success){   if(success){ // Se il caricamento ha avuto successodelete this.onLoad // Eliminiamo onLoad che non ci serve piùfor(nomi in this){ // Per ogni oggetto caricato (quindi ogni nome di grafico)   _root.nomiGraf.addItem(this[nomi]) // Aggiungiamo un elemento alla comboBox}   }}

Bene, dopo aver visto come caricare i nomi e aver quindicompletato la “parte iniziale”, vediamo come farein modo che quando l’utente sceglierà un graficodalla nostra lista, il nostro filmato mostri i datimemorizzati nel database.

Per prima cosa, al codice scritto finora aggiungiamo questafunzione

function caricaDati(){   // Creiamo la funzione per caricare i dati   _root.datiGrafico.nom = _root.nomiGraf.getSelectedItem().labell   // Impostiamo una variabile che abbia come valore il nome selezionato nella comboBox   // Tale variabile sarà inviata alla pagina php e il risultato sarà caricato (sempre nell'oggetto datiGrafico)   _root.datiGrafico.sendAndLoad('http://localhost/Prove Flash-Php/Grafico/Select.php',datiGrafico,"GET")   _root.datiGrafico.onLoad = function(success){// Riceviamo la risposta dal servern = 0// impostiamo la variabile N a zeroif(success){   // Se i dati sono caricati correttamente   delete this.onLoad   // Eliminiamo onLoad che non ci serve   delete this.nom   // Eliminiamo nom che qui non serve   _root.nome.text = this.nome   // impostiamo il testo di 'nome' sulla _root in base alla variabile 'nome' caricata dal file php   delete this.nome   // eliminiamo nome, ormai l'abbiamo usata e vogliamo rimanere con solo i valori dei dati// Eliminando NOM, NOME e ONLOAD nel nostro oggetto rimangono solo i datifor(dati in this){ // per ogni dato presenten++ // incrementiamo la variabile N di 1// Nell'array creato sulla _root creiamo per ogni dato un nuovo elemento,// che sarà un altro array.// Avremo quindi ad esempio in// arrayDati[1] un altro array, contenente i valori e le relative etichette// quindi arrayDati[n][0]  sarà il dato// arrayDati[n][1] sarà l'etichetta_root.arrayDati[n] = this[dati].split("|")delete this[dati] // una volta portati i dati nell'arrayDati possiamo eliminare// l'elemento datiN presente nell'oggetto loadVars   }   _root.creaElementi() // richiamiamo la funzione duplicaBarre}   }}

* Penso che il resto del codice si comprenda leggendo icommenti…solo per queste due righe volevo inserire unulteriore chiarimento: la variabile Nom conterrà ilnome del grafico scelto e verrà inviata alla paginaphp: come abbiamo visto la pagina php se la variabile“nom” esiste carica gli appositi dati daldatabase e li stampa a video. Infatti la pagina phpstamperà a video i dati del grafico scelto, cheverranno caricati in Flash dentro l’oggetto LoadVars‘datiGrafico’ che avevamo creato inprecedenza. 

Bene, ora che abbiamo scritto la funzione che ci permette dimemorizzare nel filmato Flash i dati in modo da poterciaccedere facilmente (saranno situati, ricordo, dentro adarrayDati, presente sulla _root) dobbiamo fare in modo chevenga eseguita al momento opportuno: il momento in cuieseguirla, nel nostro caso, è quando un utenteseleziona il nome di un grafico dall’apposita comboBox.Per fare questo basta una semplice riga di codice.

nomiGraf.setChangeHandler("caricaDati")

Qualcuno a questo punto penserà “Ma sel’utente per sbaglio clicca su ‘scegliete ungrafico’ invece che sul nome di ungrafico???”
Beh, effettivamente potrebbe succedere…se voleteevitare ogni rischio, potete modificare la funzionecaricaDati in questo modo

function caricaDati(){ // Creiamo la funzione per caricare i dati_root.datiGrafico.nom = _root.nomiGraf.getSelectedItem().labelif(_root.datiGrafico.nom != “Scegli un grafico”){// tutte le altre azioni}}}}}

Bene, ora viene la parte di codice piùlunga…dobbiamo infatti fare in modo che venganogenerate le barre, i valori e le ‘etichette’ pertutti i valori che Flash avrà caricato dal filePhp.
Tutto questo lo faremo nella funzione“creaElementi”, che come abbiamo visto vienerichiamata alla fine dell’avvenuto caricamento di tuttele variabili.

Questa funzione è la porzione maggiore di tutto ilnostro codice, ma non è troppocomplicata…eccola qui.

creaElementi = function(){   for(a=1;a<_root.arrayDati.length;a++){// Creiamo i nuovi movie clip (barre,valori ed etichette)_root.label0.duplicateMovieClip('label'+a,a*100)_root.valore0.duplicateMovieClip('valore'+a,a*1000)_root.barra0.duplicateMovieClip('barra'+a,a)_root['label'+a].label.autoSize = true// impostiamo ogni etichetta in modo che si// ridimensioni in base al testo che contiene_root['label'+a].label.text = arrayDati[a][1]// impostiamo il testo di ogni etichetta il base al valore// che abbiamo preso dalla pagina Php (e che abbiamo poi messo in arrayDati)_root['barra'+a]._height = 0// impostiamo l'altezza iniziale a 0_root['barra'+a].valF = _root.arrayDati[a][0]// la variabile valF di ogni barra corrisponderà al valore preso// dalla pagina Php (e che abbiamo poi inserito in arrayDati)_root['barra'+a].Id = a// diamo al movie clip della barra una variabile ID (ci serve come riferimento numerico// in quanto dalla barra cambieremo i testi dei valori sulla scena_root['valore'+a].Id = a// come sopra, ma associata alla clip valore// associamo delle azioni all'enterFrame di ogni barra// essenzialmente, finchè il valore attuale è minore del valore finale// la barra aumenta la sua altezza e setta un valore sempre maggiore// nel campo di testo 'valoreN' ad essa corrispondente_root['barra'+a].onEnterFrame = function(){   if(this.valAct < this.valF){this.valAct+=40// incrementiamo ValAct (valore a piacere)this._height = this.valAct/4// aumentiamo l'altezza della barra di un certo valore (a piacere)_root['valore'+this.id].valore.text = this.valAct// impostiamo il campo di testo nella clip del valore corrispondente all'attuale barra   }}// Diamo un'azione all'enterFrame della clip valore in modo che sia sempre// sopra alla barra di cui rappresenta il valore_root['valore'+a].onEnterFrame = function(){   this._y = _root['barra'+this.Id]._y - _root['barra'+this.Id]._height - 10}if(a>1){ // Se barra,label e valore non sono barra1,label1 e valore1   // li spostiamo a destra di TOT pixel (il primo invece rimane invariato   // in quanto il duplicato sarà esattamente nella posizione di barra0,label0 o valore0   _root['label'+a]._x = _root['label'+(a-1)]._x + 80   _root['barra'+a]._x = _root['barra'+(a-1)]._x + 80   _root['valore'+a]._x = _root['valore'+(a-1)]._x + 80}   }}

Come vedete è commentata praticamente riga perriga, per cui non dovreste avere problemi nella comprensionedel suo funzionamento :)

Bene, abbiamo ora concluso la creazione del nostro‘visualizzatore di grafici’.
Forse alcuni di voi stanno pensando“Ma…come…all’inizio c’erascritto che l’utente avrebbe potuto scegliere qualegrafico visualizzare, ma in questo modo ne visualizza uno eva bene…ma se vuole vedere l’altro? Deveriavviare il filmato?”

Obiezione generalmente sensata, ma in questo caso sbagliata:infatti poiché la funzione creaElementi duplica semprebarra0, creando sempre barra1,barra2, etc… e sempreagli stessi livelli di profondità, tutti gli elementiche lo necessitano, vengono sostituiti automaticamente quandol’utente sceglie di visualizzare un grafico diverso daquello che sta guardando ?
Quindi non è necessario creare altre funzioni cheeliminino gli elementi, è sufficiente la funzionecreaElementi() che abbiamo realizzato per gestirepraticamente tutto il filmato, una volta importati idati…e quindi abbiamo concluso la realizzazione dellanostra piccola applicazione.

Potete ovviamente personalizzarla in vari modi, ad esempiocreando barre di diverso colore, o potreste provare amodificare gli script in modo che le barre sianoorizzontali…usate la vostra fantasia per creareinteressanti variazioni di questo file ;)

tutorial.zip(97,5Kb)