Nel tutorial di oggi vediamo come realizzare una semplice applicazione multipiattaforma (Adobe AIR) utilizzando Flash CS3 e le API di Twitter.

L’applicazione ci permetterà di aggiornare lo status di Twitter senza dover ricorrere al browser e al sito ufficiale di Twitter.

Per prima cosa scarichiamo le TwitterLibPHP di Justin Poley da questa pagina. Utilizzando la libreria creiamo due file PHP: il primo (index.php) restituirà la nostra timeline di Twitter, il secondo (update.php) riceverà con metodo POST lo status update dalla nostra applicazione AIR e aggiornerà la nostra timeline. Non dimentichiamo di configurare i files con la nostra username e la nostra password di Twitter.

Index.php

{code php}<?php

require “twitter.lib.php”;

$username = “tua_username”;
$password = “tua_password”;

$twitter = new Twitter($username, $password);

$timeline = $twitter->getUserTimeline($options[0],’xml’);

echo($timeline);

?>
{/code}

Update.php

{code php}<?php

require “twitter.lib.php”;

$txtStatus = strip_tags($_POST[“txtStatus”]);

$username = “tua_username”;
$password = “tua_password”;

$twitter = new Twitter($username, $password);

$update = $twitter->updateStatus($txtStatus,0,’xml’)

?>{/code}

Carichiamo i due files PHP sul nostro spazio web ed occupiamoci ora di Flash. Se non hai le estensioni per esportare applicazioni AIR da Flash puoi scaricarle qui:

Sistema Windows

Scarica e installa Flash CS3 update 9.0.2
Scarica e installa Flash CS3 update 9.0.3

Sistema MAC

Scarica e installa Flash CS3 update 9.0.2
Scarica e installa Flash CS3 update 9.0.3

Installiamo gli update (prima la 9.0.2 e poi la 9.0.3) e poi avviamo Flash. Posizioniamo sullo stage i seguenti elementi:

• una movie clip con nome di istanza mc che conterrà il nostro avatar
• un campo di testo con nome di istanza username che conterrà la nostra username di Twitter
• un campo di input multi riga con nome di istanza txtStatus dove digiteremo i nostri status update
• un pulsante con nome di istanza bttUpdate che, una volta premuto, aggiornerà la nostra timeline

Possiamo anche posizionare tre movie clip contenenti un campo di testo per visualizzare i nostri ultimi twit, in questo esempio le clip update_0, update_1 e update_2 contenenti un campo di testo con nome di istanza txt.

Ecco uno screenshot dello stage

Stage

Ora creiamo un nuovo livello e incolliamo nel fotogramma il seguente codice ActionScript senza dimenticare di configurare opportunamente le url delle richieste:

{code php}
var feed:URLLoader = new URLLoader();
var feed_url:URLRequest = new URLRequest(“http://tua_url/index.php”);
var fileXML:XML;

feed.load(feed_url);
feed.addEventListener(Event.COMPLETE,parseXML);
bttUpdate.addEventListener(MouseEvent.CLICK,sendStatus);

function parseXML(evt:Event) {
fileXML = new XML(feed.data);
var num_news = fileXML..status.length();
username.text=fileXML..status[0].user.screen_name;
update_0.txt.htmlText=fileXML..status[0].text;
update_1.txt.htmlText=fileXML..status[1].text;
update_2.txt.htmlText=fileXML..status[2].text;

var foto0:Loader = new Loader();
var image0:URLRequest = new URLRequest (String(fileXML..status[0].user.profile_image_url));
foto0.load(image0);

mc.addChild(foto0);
loader.visible=false;
}

function sendStatus(evt:Event) {
loader.visible=true;
var sendVars:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest(“http://tua_url/update.php”);
request.method = URLRequestMethod.POST;
var variables:URLVariables = new URLVariables();
variables.txtStatus = txtStatus.text;
request.data = variables;

sendVars.addEventListener(Event.COMPLETE, on_complete);
sendVars.load(request);

function on_complete(e:Event):void{
txtStatus.text=””;
feed.load(feed_url);
feed.addEventListener(Event.COMPLETE,parseXML);
}

}
{/code}

La funzione parseXML richiede alla pagina index.php la nostra timeline di Twitter in formato XML e visualizza gli ultimi tre twit nei campi update_0.txt.htmlText, update_1.txt.htmlText e update_2.txt.htmlText.

La funzione sendStatus viene richiamata una volta cliccato il pulsante bttUpdate ed invia in formato POST la variabile txtStatus al file update.php; quest’ultimo aggiornerà il nostro status di Twitter. Da notare che, in questo esempio, è stata posizionata sullo stage una movie clip con nome di istanza loader che viene visualizzata durante le chiamate fornendo all’utente un messaggio di “caricamento in corso”:

loader.visible=true;

Creazione File Air

Ora, per esportare il file air, andiamo nel menu comandi e clicchiamo su “AIR – Crea file AIR”

Se non possediamo un certificato creiamolo scegliendo “Crea…” dopodiché possiamo procedere all’esportazione del pacchetto AIR. A questo punto possiamo installare la nostra applicazione; se non abbiamo il Runtime installato sulla macchina colleghiamoci a questa pagina per scaricarlo.

Alcune considerazioni

Questo era un semplice esempio, l’applicazione ha diverse pecche ed è servita semplicemente per illustrare la facilità con cui è possibile esportare un’applicazione AIR da Flash. Quali sono i vantaggi di AIR, perché sviluppare un’applicazione con questa tecnologia? AIR è una tecnologia multipiattaforma (permette la creazione di applicazioni cross-platform precisamente) e permette agli sviluppatori di:

• interagire col file system
• leggere e scrivere files
• interagire con un database (SQlite)
• manipolare e salvare immagini

ed altro; per realizzare applicazioni complesse è un opzione, una valida alternativa che risulterà particolarmente utile a chi è già abituato a lavorare con Flash.

In allegato all’articolo i files sorgente di questo tutorial.

SCARICA I SORGENTI