Creare un gadget in Adobe Air 1.0 con Flash CS3

Inserito da fabio il Gio, 03/04/2008 - 16:39

Immagini

Immagine 1 Immagine 2 Immagine 3 Immagine 4

In epoca di Web 2.0 (per alcuni già 3.0), un nuovo “tipo” di applicativo ha preso sempre più piede: il gadget. Di qualunque tipo, per qualsiasi funzione, purché sia uno strumento fondamentalmente utile. Pensiamo ai widget di Mac, oppure ai “gadget” di Windows Vista. (Immagine 1) Dato che proprio in questi giorni Adobe ha rilasciato AIR 1.0, allora costruiamoci anche noi il nostro widget. Per l’occorrenza creeremo un gadget Meteo, prendendo come fonte il servizio Meteo di Yahoo! Ovviamente potrete cambiare in qualunque momento la fonte, visto che il servizio erogato riguarda pur sempre feed rss, quindi un formato fondamentalmente universale. Come mezzi di lavoro useremo:

• Flash CS3 (scaricabile in versione di prova a 30 giorni sul sito ufficiale Adobe).
• l’estensione Adobe AIR 1.0 per Flash CS3, anch’essa scaricabile gratuitamente dalla sezione AIR).

Se non l’abbiamo ancora fatto, installiamo l’estensione. Al termine apriamo Flash CS3. Nel pannello introduttivo abbiamo ora a disposizione una voce in più. (Immagine 2) La possibilità di creare appunto in Adobe AIR. Clicchiamoci sopra e apriamo il nuovo file. Nel nuovo file aperto, inseriamo due campi di testo dinamici come nella figura. (Immagine 3) Il primo in alto, servirà ad inserire il titolo del servizio, il secondo, più grande, per inserire l’effettivo testo delle condizioni meteo! Rinominiamoli rispettivamente: titolo_txt e testo_txt.
Adesso, disegniamo un piccolo quadrato con una sfumatura dal blu al bianco (#096F99 - #A8E1F9) e convertiamolo in MovieClip. Quindi entriamo in questo nuovo simbolo (cliccando due volte su di esso), e aggiungiamo altri due fotogrammi. In questi due nuovi fotogrammi cambieremo la sfumatura rispettivamente con i seguenti codici esadecimali: (#521B03 - #AD8527) per il secondo fotogramma, (#180E47 - #000000) per il terzo fotogramma. Al primo fotogramma aggiungiamo l’azione “stop();” Quello che abbiamo appena fatto è lo sfondo della nostra applicazione. Chiederemo a Flash di controllare l’orario. Se è mattina utilizzerà il primo fotogramma, se è pomeriggio utilizzerà il secondo fotogramma, se è sera utilizzerà l’ultimo. Torniamo sulla scena principale. Selezioniamo il primo fotogramma e scriviamo quanto segue: 

  1. var datiXML:XML=new XML();
  2. var path:URLRequest=new URLRequest("http://xml.weather.yahoo.com/forecastrss?p=ITXX0067&u=c");
  3. var urlLoad:URLLoader=new URLLoader(path);
Con questa prima parte di codice, impostiamo l’indirizzo XML della nostra fonte. Leggendo velocemente l’indirizzo xml (per chi volesse modificarlo per divertimento) l’ultimo parametro corrisponde ai gradi (C per Celsius, o F per Fahrenheit). mentre il numero 67 del parametro p è Roma. 
  1. function caricaXML(event:Event):void
  2. {
  3. 	datiXML=XML(urlLoad.data);
  4. 	testo_txt.htmlText=datiXML.channel.item.description;
  5. 	citta_txt.htmlText=datiXML.channel.title;
  6. }
  7.  
  8. urlLoad.addEventListener(Event.COMPLETE, caricaXML);
Con questa funzione invece abbiamo gestito i valori del file RSS, scrivendo nei due campi di testo dinamici i valori estratti dall’istanza “datiXML”. Ora, i valori, anche se in maniera molto semplce sono stati inseriti. Non resta che gestire lo sfondo: 
  1. changeBg();
  2. function changeBg():void
  3. {
  4. 	var orario:Date=new Date();
  5. 	var ora:Number=orario.getHours();
  6.  
  7. 	if(ora>7 && ora<15){
  8. 		bg_mc.gotoAndStop(1);
  9. 	}else if(ora>15 && ora<19){
  10. 		bg_mc.gotoAndStop(2);
  11. 	}else{
  12. 		bg_mc.gotoAndStop(3);
  13. 	}
  14.  
  15. 	with(bg_mc){
  16. 		x=0;
  17. 		y=0;
  18. 		width=stage.stageWidth;
  19. 		height=stage.stageHeight;
  20. 	}
  21. }
  22.  
Ecco fatto. Un’istanza della classe “Date” ci permetterà di controllare l’ora (in locale sulla macchina!!) quindi considerare che ore sono (tra le 7 e le 15 è un generico “mattino”, tra le 15 e le 19 è pomeriggio, dalle 19 in poi è sera). Con l’ultimo ciclo “with” impostiamo la posizione e la grandezza dello sfondo. Ora non resta che salvare il lavoro, impostare le opzioni di pubblicazione e creare il file AIR. Direttamente dal menu “Comandi”, scegliamo la voce: “AIR-Impostazioni applicazione e programma di installazione”. Nel successivo pannello che si aprirà, impostiamo i valori nel seguente modo, come da foto. (Immagine 4)

Concludiamo impostando la firma digitale. La firma digitale serve appunto a “Firmare” il programma per tutelare l’utente. Ovviamente nessuno di noi (in linea di massima) è una software house... quindi creeremo una firma fittizia. Giusto per accontentare AIR....!
Concludiamo cliccando su “OK”. Ora sempre dal menu “Comandi” clicchiamo questa volta su “AIR- Crea AIR file”. Dopo qualche secondo di attesa, vedremo che il file “Meteo.AIR” è stato creato. Ora non resta che provarlo ed installarlo!
Buon divertimento!