În acest tutorial vom crea o aplicație Twitter Reader, alimentată de la propriile actualizări Twitter. Vom analiza unele dintre caracteristicile clasei nativeWindow, cum să o semneze și să realizăm un pachet de instalare.
Rezultatul final al rezultatelor
Să aruncăm o privire la aplicația finală pe care o vom lucra:
Pasul 1: Instalați programul Adobe AIR Runtime
Cu acest player putem rula orice aplicație cu extensia .air, cum ar fi noul Adobe Media Player. Mai întâi trebuie să instalați playerul Adobe AIR, deci mergeți la Adobe și descărcați playerul. Alegeți sistemul de operare și faceți clic pe descărcare. După terminarea descărcării, instalați-o.
Pasul 2: Instalați extensia Adobe AIR pentru Flash CS3 și CS4
Acum avem nevoie de al doilea element pentru a dezvolta aplicații AIR: extensia. În acest caz, utilizez unul pentru Flash CS3, dar este disponibil și pentru Flash CS4. Accesați Centrul de asistență Flash Adobe. Înainte de a instala actualizarea Flash pentru Adobe AIR, trebuie să descărcați și să instalați cea mai recentă actualizare Flash Player (9.0.2), pe care o puteți descărca aici: http://www.adobe.com/support/flash/downloads.html # 902.
Apoi, trebuie să descărcați și să instalați actualizarea Adobe AIR pentru Flash CS3 Professional: http://www.adobe.com/support/flash/downloads.html.
Pasul 3: Configurarea documentului
În acest moment, când porniți Flash CS3 sau CS4, pe ecranul de întâmpinare veți avea opțiunea de a crea un fișier Adobe AIR Flash. Fă-o! Setați dimensiunea scenei la lățimea de 300 de pixeli și înălțimea de 500 de pixeli cu 30 cadre pe secundă. Am ales o culoare albă pentru fundal. Salvați-l ca "my-twitter-updates.fla".
Pasul 4: Crearea fundalului
Vom folosi o imagine iPhone ca fundal, deci mergeți pe site-ul lui Sam Brown (vectori frumos) și descărcați pachetul de imagini iPhone. Deschideți fișierul cu Fireworks sau Photoshop și alegeți orice dimensiune (fără text), apoi exportați ca "bg_iphone.png".
În Flash, alegeți File> Import apoi importați "bg_iphone.png" în scenă. Selectați-l și aliniați-l vertical și orizontal în centru. Conversia acestei imagini la un simbol movieclip numit "mcIphone", apoi accesați proprietățile și asociați "twitterApp" ca nume de instanță. Faceți dublu clic pe simbol și redenumiți primul strat ca "bg_iphone". Ar trebui să aveți acum ceva asemănător cu următoarea imagine:
Pasul 5: Crearea câmpurilor de text dinamice
Acum mergeți și creați un nou strat pentru titlul aplicației noastre. Desenați un câmp de text dinamic și alocați-l "title_app" ca nume de instanță.
Apoi adăugați două straturi noi; primul numit "actualizările mele" și al doilea numit "urmați-mă". Creați un câmp de text dinamic multiplu pe layerul "actualizările mele" cu următoarele proprietăți:
11 dimensiune font
câmp de text multiline
culoare alba
activați redarea textului ca html
atribuiți "myUpdates" ca nume de instanță
Vom avea nevoie de un buton pentru Urmați-mă pe stratul "urmați-mă", așa că trageți un dreptunghi în partea de jos a zonei iPhone și convertiți-l într-un simbol cu butonul "Urmați-mă". Apoi, atribuiți "btFollowme" ca nume de instanță.
Pasul 6: Adăugați butoanele de derulare
În acest moment avem nevoie de două butoane; sus și jos pentru derularea conținutului câmpului de text "actualizările mele". Mergeți la panoul cronologie și adăugați un nou strat. Introduceți numele "butoanele de defilare", apoi trageți o săgeată pe scenă și convertiți-o într-un simbol movieclip. Pentru celălalt buton de copiere, lipiți-l și îndoiți-l vertical. Atribuiți "btUp" și "btDown" ca nume de instanță. În cele din urmă, reveniți la linia de timp principală. Când ați terminat, ar trebui să aveți ceva asemănător imaginii următoare.
Pasul 7: Obțineți adresa URL a fluxului Twitter
În primul rând, avem nevoie de URL-ul feed-ului RSS, așa că du-te la pagina de pornire Twitter. Acum, faceți clic pe butonul Profil din bara de navigare de sus. Du-te la panoul din dreapta, faceți clic dreapta pe "Rss Feed din nume de utilizator"și copiați adresa URL.
Pasul 8: Anatomia Twitter RSS Feed
Să examinăm structura actualizărilor RSS Twitter. Prima parte este canalul rss info, iar a doua parte este buclă de actualizări. Vom folosi câteva noduri de bază: linkul primei părți, titlul, pubDate și link-ul articolului buclă.
Pasul 9: Începeți scrierea XML
Reveniți la Flash și creați un nou strat pentru acțiuni, este timpul să începeți codarea. După cum puteți vedea, prima variabilă conține adresa URL a fluxului RSS din profilul dvs. de pe Twitter, astfel încât să lipiți în a ta:
var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; var twitterXML: URLRequest = URLRequest nou (twitterURL); var myLoader: URLLoader = nou URLLoader (twitterXML); myLoader.addEventListener ("completă", xmlLoaded);
Pasul 10: Începeți funcția XmlLoaded
Cu această funcție putem încărca RSS și fiecare nod listat înainte de a începe să definim variabilele nodurilor xml:
funcția xmlLoaded (evtObj: Eveniment) var twitter: XML = nou XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var Utilizator: String = twitter.child (0) .link;
Pasul 11: Buclă actualizări
În această parte trebuie să obținem valorile nodurilor xml și să le atribuim unei variabile myUpdates. Folosește o pentru declarație să facă acest lucru.
var myUpdates: String = ""; pentru fiecare (var nodo: XML în twitter ... item) myUpdates + = ""+ Nodo.title +" "+""+ nodo.pubDate +"
";
Pasul 12: Câmpurile de text și evenimentul pentru următorul buton
Mai întâi afișăm titlul aplicației, apoi primim actualizările și adăugăm în cele din urmă un EventListener pentru butonul de urmărire cu urlul utilizatorului (Exemplu: http://twitter.com/_dariux).
// TITLUL APP> "Actualizări Twitter de la Darío Gutiérrez / _dariux." twitterApp.titleApp.text = TwitterTitle; // Afișați valoarea datelor mele în textfield twitterApp.myUpdates.htmlText = meuUpdates; // Acțiuni pentru butonul Follow Me twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); funcția btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = URLRequest nou (UserUrl); navigateToURL (targetUrl);
Pasul 13: Acțiuni pentru butoanele de derulare
Cod simplu pentru butoanele de defilare, verificați acest cod:
// Ascultători și funcții pentru butoanele de defilare twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); funcția scrollUp (Eveniment: MouseEvent): void twitterApp.myUpdates.scrollV - = 5; funcția scrollDown (Eveniment: MouseEvent): void twitterApp.myUpdates.scrollV + = 5;
Pasul 14: Testarea aplicației
Testați filmul (Meniu Control + Test film sau cmd + enter). După cum puteți vedea, este o fereastră normală, la fel ca atunci când utilizați playerul flash tipic. În pasul următor vom personaliza aplicația noastră și veți observa diferența ...
Pasul 15: Setările AIR pentru aplicație și pentru instalator
Pentru setările AIR din Flash CS4 mergeți la File> AIR Settings și pentru Flash CS3 mergeți la Commands> AIR Application and Installer Settings. În această fereastră vom începe să customizăm aplicația, așa că mergeți la câmpul de descriere și scrieți câteva informații generale.
Stilul ferestrei Stilul Window este interesant. Există trei stiluri: crom, opac și transparent. Stilul Chrome este ca o fereastră simplă cu butoane, fundal și margine, Opaque este o fereastră cu fundal, dar fără butoane și ultimul stil. Transparent este o fereastră fără butoane și fundal. În cazul nostru, alegeți stilul Transparent.
icoană Alegeți o pictogramă (sau o aplicație de proiectare) pentru aplicația dvs. în dimensiuni diferite de 16px, 32px, 48px, 128px cu extensia .png.
Avansat În această opțiune puteți selecta setările diferitelor ferestre atunci când aplicația este lansată, opțiunile pentru instalarea și actualizarea dosarelor.
Semnatura digitala Când doriți să trimiteți aplicația dvs. AIR, veți avea nevoie de o semnătură digitală pentru programul de instalare pentru a instala în sistemele altor utilizatori. În acest caz, vom semna aplicația noastră cu un certificat neimpozat pentru a permite ca AIR runtime să se instaleze ca editor neconfirmat. Dacă aveți nevoie de mai multe detalii despre cum să obțineți un certificat, vizitați următorul link: Semnarea digitală a aplicațiilor Adobe AIR.
Destinaţie Alegeți destinația dosarului și un nume pentru aplicația dvs..
Includeți fișiere Flash automat selectează unele fișiere necesare pentru a rula aplicația. Dacă utilizați alte fișiere în aplicația dvs. (cum ar fi, de exemplu, caurina tween), trebuie să includeți aceste fișiere ca parte a aplicației.
Pasul 17: Deplasarea ferestrei de scriere
În această parte vom folosi clasa "NativeWindow" și funcția "startMove ()", pentru a permite aplicației noastre să se deplaseze pe întreaga scenă. Mergeți la stratul de acțiuni și adăugați următorul cod. Apoi, testați-l:
starea.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); funcția moveWin (e: MouseEvent): void stage.nativeWindow.startMove ();
Pasul 18: Închideți și minimalizați butoanele
Aplicația noastră se poate deplasa pe întreaga scenă, dar dacă doriți să închideți sau să minimalizați, nu puteți. Mergeți și proiectați două butoane: minimizați (btMinimize name instance) și închideți (numele instanței btClose), cum ar fi următoarea imagine, dar de această dată trebuie să utilizați clipul principal (twitterApp). În final, adăugați următorul cod:
Această caracteristică este foarte simplă. Doar adaugati un buton sub butonul Follow Me, asa ca creeaza un nou strat in interiorul principalului "twitterApp". Scrieți "btAlwaysfront" ca nume de instanță:
Odată ce ați creat acest buton, intrați și creați un alt cadru, fiecare cu o acțiune de oprire. Obiectivul este acela de a avea două stări pentru buton. Cadrul unu dezactivat și al doilea cadru activat. Această caracteristică utilizează funcția alwaysInFront metoda de la clasa NativeWindow. După aceasta, trebuie să adăugăm acțiunile la butonul btAlwaysfront, așa că du-te la acțiuni cadru și lipiți următorul cod:
// Activați fereastra întotdeauna în față stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); funcția btAlwaysfront_CLICK (e: MouseEvent): void if (stage.nativeWindow.alwaysInFront! = true) twitterApp.btAlwaysfront.gotoAndStop (2); stage.nativeWindow.alwaysInFront = true; altceva twitterApp.btAlwaysfront.gotoAndStop (1); stage.nativeWindow.alwaysInFront = false;
Pasul 20: Codul complet
// Twitter rss url var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; var twitterXML: URLRequest = URLRequest nou (twitterURL); var myLoader: URLLoader = nou URLLoader (twitterXML); myLoader.addEventListener ("completă", xmlLoaded); funcția xmlLoaded (evtObj: Eveniment) var twitter: XML = nou XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var Utilizator: String = twitter.child (0) .link; var myUpdates: String = ""; // Buclele pentru fiecare (var nodo: XML în twitter ... item) myUpdates + = ""+ Nodo.title +" "+""+ nodo.pubDate +"
"; // TITLUL APP>" Actualizări Twitter de la Darío Gutiérrez / _dariux. "TwitterApp.titleApp.text = TwitterTitle; // Afișați valabilitatea datelor mele în textfield twitterApp.myUpdates.htmlText = myUpdates; Butonul Me twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); funcția btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = nou URLRequest (UserUrl); navigateToURL (targetURL); / ****** ************************************************ Ascultători și funcții pentru butoanele de defilare ********************************************** ******** / twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); funcția scrollUp (Eveniment: MouseEvent): void twitterApp.myUpdates.scrollV - = 5; funcția scrollDown (Eveniment: MouseEvent): void twitterApp.myUpdates.scrollV + = 5; / ************************ ****************************** Zona AIR ****************** **************************** ********** // // Fereastra muta stage.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); funcția moveWin (e: MouseEvent): void stage.nativeWindow.startMove (); / / Minimize butonul twitterApp.btMinimize.addEventListener (MouseEvent.CLICK, btMinimize_CLICK); funcția btMinimize_CLICK (e: MouseEvent): void stage.nativeWindow.minimize (); // Maximizați butonul twitterApp.btClose.addEventListener (MouseEvent.CLICK, btClose_CLICK); funcția btClose_CLICK (e: MouseEvent): void stage.nativeWindow.close (); // Activați fereastra întotdeauna în față stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); funcția btAlwaysfront_CLICK (e: MouseEvent): void if (stage.nativeWindow.alwaysInFront! = true) twitterApp.btAlwaysfront.gotoAndStop (2); stage.nativeWindow.alwaysInFront = true; altceva twitterApp.btAlwaysfront.gotoAndStop (1); stage.nativeWindow.alwaysInFront = false;
Pasul 21: Crearea fișierului AIR
Pentru a publica fișierul .air în flash CS4 accesați meniul File> AIR Settings și faceți clic pe butonul "Publicați fișierul AIR".
Pentru flash CS3 accesați Comenzi> AIR - Creați fișier AIR.
Apoi veți vedea o nouă fereastră (Semnătura digitală). Alegeți un certificat și introduceți parola. Este nevoie de ceva timp pentru a crea fișierul .air, dar când finisedh veți vedea o altă fereastră cu următorul text "AIR fișierul a fost creat". Fișierul .air este creat în același director de lucru ca și fișierul .fla.
Pasul 22: Detalii finale
După cum puteți vedea, aplicația mea are o umbră. Dacă doriți un stil Mac windows trebuie doar să selectați clipul principal "twitterApp" și să aplicați:
Concluzie
Deci, avem aplicația noastră AIR! Este o mică aplicație, dar sper că vă ajută ca o referință la dezvoltarea propriului dvs. Cu această tehnologie putem dezvolta aplicații minunate, cu ajutorul API-urilor precum Twitter, Gmaps și Flickr. Există multe alte caracteristici care nu sunt acoperite în acest tutorial, o mulțime de posibilități pentru un tutorial viitor sau un ghid rapid! Vă mulțumim pentru lectură.
Share
Accentsconagua
