I denne opplæringen lager vi et Twitter Reader-program, matet fra dine egne Twitter-oppdateringer. Vi ser på noen av funksjonene i nativeWindow-klassen, hvordan du signerer den og lager en installasjonspakke.
Endelig resultatforhåndsvisning
La oss ta en titt på den endelige søknaden vi skal jobbe for:
Trinn 1: Installer Adobe AIR Runtime
Med denne spilleren kan vi kjøre ethvert program med .air-utvidelsen, som den nye Adobe Media Player. Først må vi installere Adobe AIR-spilleren, så gå til Adobe og last ned spilleren. Velg operativsystemet og klikk på nedlasting. Når nedlastingen er fullført, installer du den.
Trinn 2: Installer Adobe AIR Extension for Flash CS3 og CS4
Nå trenger vi vårt andre element for å utvikle AIR-applikasjoner: utvidelsen. I dette tilfellet bruker jeg en for Flash CS3, men den er også tilgjengelig for Flash CS4. Gå til Adobe Flash Support Center. Før du installerer Flash-oppdateringen for Adobe AIR, må du laste ned og installere den nyeste oppdateringen av Flash Player (9.0.2), som du kan laste ned her: http://www.adobe.com/support/flash/downloads.html # 902.
Deretter må du laste ned og installere Adobe AIR Update for Flash CS3 Professional: http://www.adobe.com/support/flash/downloads.html.
Trinn 3: Dokumentoppsett
På dette tidspunktet, når du starter Flash CS3 eller CS4, på velkomstskjermen får du muligheten til å opprette en Adobe AIR Flash-fil. Gjør det! Still scenestørrelsen til 300px bred og 500px høy med 30 fps. Jeg har valgt en hvit farge for bakgrunnen. Lagre det som "my-twitter-updates.fla".
Trinn 4: Opprette bakgrunnen
Vi skal bruke et iPhone-bilde som bakgrunn, så gå til Sam Browns nettsted (fine vektorer) og last ned pakken med iPhone-bilder. Åpne filen med Fireworks eller Photoshop, og velg hvilken som helst størrelse (uten tekst) og eksporter deretter som "bg_iphone.png".
I Flash velger du Arkiv> Importer og importerer deretter "bg_iphone.png" til scenen. Velg den og juster den vertikalt og horisontalt senter. Konverter dette bildet til et filmklippssymbol kalt "mcIphone", og gå deretter til egenskaper og tilordne "twitterApp" som sitt instansnavn. Dobbeltklikk på symbolet og gi nytt navn til det første laget som "bg_iphone". Du bør nå ha noe som følgende bilde:
Trinn 5: Opprette de dynamiske tekstfeltene
Gå nå og lag et nytt lag for tittelen på vår søknad. Tegn et dynamisk tekstfelt og tilordne det "title_app" som et forekomstnavn.
Deretter legger du til to nye lag; den første kalt "mine oppdateringer" og den andre som heter "følg meg". Opprett et multilint dynamisk tekstfelt på "min oppdaterings" -laget med følgende egenskaper:
11 skriftstørrelse
multiline tekstfelt
hvit farge
aktiver gjengi tekst som html
tilordne "myUpdates" som forekomstnavnet
Vi trenger en knapp for Følg meg På "følg meg" -laget, så gå for å tegne et rektangel nederst i iPhone-området og konverter det til et knappesymbol med teksten "Følg meg". Etterpå, tilordne "btFollowme" som forekomstnavn.
Trinn 6: Legg til rulleknapper
På dette punktet trenger vi to knapper; opp og ned for å bla innholdet i "mine oppdateringer" tekstfeltet. Gå til tidslinjepanelet og legg til et nytt lag. Skriv inn navnet "rulleknappene", og trekk deretter en pil på scenen og konverter den til et filmklippssymbol. For den andre knappen kopiere, lim inn og vri den vertikalt. Tilordne "btUp" og "btDown" som et forekomstnavn. Til slutt, gå tilbake til hoved tidslinjen. Når du er ferdig, bør du ha noe som følgende bilde.
Trinn 7: Få Twitter Feed URL
For det første trenger vi RSS-nettadressen din, så gå til din Twitter-hjemmeside. Klikk nå på profilknappen i topplinjen. Gå til høyre panel, høyreklikk på "Rss Feed of brukernavn"og kopier URL-adressen.
Trinn 8: Anatomi av Twitter RSS Feed
La oss undersøke strukturen av våre Twitter RSS-oppdateringer. Den første delen er kanalen rss info og den andre delen er løkken av oppdateringer. Vi bruker noen grunnleggende noder: lenken til den første delen, tittelen, pubDate og lenken til loop-objektet.
Trinn 9: Start scripting XML
Gå tilbake til Flash og lag et nytt lag for handlingene, det er på tide å starte kodingen. Som du kan se, inneholder den første variabelen RSS-feedadressen fra din Twitter-profil, så lim inn i din:
var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; var twitterXML: URLRequest = ny URLRequest (twitterURL); var myLoader: URLLoader = ny URLLoader (twitterXML); myLoader.addEventListener ("complete", xmlLoaded);
Trinn 10: Start XmlLoaded-funksjonen
Med denne funksjonen kan vi laste inn RSS og hver node som er oppført, før du begynner å definere variablene i XML-noderne:
funksjon xmlLoaded (evtObj: Event) var twitter: XML = new XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var UserUrl: String = twitter.child (0) .link;
Trinn 11: Oppdateringene Loop
I denne delen trenger vi å få verdiene til XML-nodene og tilordne dem til en myUpdates-variabel. Bruk en for uttalelse å gjøre slik.
var myUpdates: String = ""; for hver (var nodo: XML i twitter ... element) myUpdates + = ""+ Nodo.title +" "+""+ nodo.pubDate +"
";
Trinn 12: Tekstfelt og begivenhet for følgeknapp
Først viser vi tittelen på søknaden, da får vi oppdateringene og til slutt legger til en EventListener for følgeknappen med brukerens URL (Eksempel: http://twitter.com/_dariux).
// TITEL APP> "Twitter oppdateringer fra Darío Gutiérrez / _dariux." twitterApp.titleApp.text = TwitterTitle; // Vis verdien av myUpdates i tekstfeltet twitterApp.myUpdates.htmlText = myUpdates; // Handlinger for Follow Me button twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); funksjon btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = ny URLRequest (UserUrl); navigateToURL (targetUrl);
Test filmen (Meny Kontroll + Testfilm eller cmd + Enter). Som du kan se, er det et normalt vindu akkurat som når du bruker den typiske flash-spilleren. I det følgende trinnet tilpasser vi vårt program, og du vil merke forskjellen ...
Trinn 15: Program og installasjons AIR-innstillinger
For AIR-innstillingene i Flash CS4 går du til Arkiv> AIR-innstillinger, og for Flash CS3 går du til kommandoer> AIR-applikasjon og installasjonsinnstillinger. I dette vinduet begynner vi å tilpasse søknaden, så la oss gå til beskrivelsesfeltet og skrive litt generell informasjon.
Vinduestil Vinduet stilen er interessant. Det er tre stiler: krom, ugjennomtrengelig og gjennomsiktig. Chrome-stilen er som et enkelt vindu med knapper, bakgrunn og kantlinje. Opaket er et vindu med bakgrunn, men uten knapper og den siste stilen Transparent er et vindu uten knapper og bakgrunn. I vårt tilfelle velger du Transparent stil.
Ikon Velg et ikon (eller design en) for søknaden din i forskjellige størrelser 16px, 32px, 48px, 128px med .png-utvidelse.
Avansert I dette alternativet kan du velge differensinnstillingene for vinduet når søknaden startes, alternativer for mapper som skal installeres og oppdateres.
Digital signatur Når du vil sende ditt AIR-program, trenger du en digital signatur for installatøren å installere i andre brukeres systemer. I dette tilfellet vil vi signere programmet vårt med usikker sertifikat for å tillate runtime AIR å installere som ubekreftet utgiver. Hvis du trenger mer informasjon om hvordan du får et sertifikat, kan du besøke følgende lenke: Digital signering av Adobe AIR-programmer.
Mål Velg mappedestinasjonen og et navn for søknaden din.
Inkluder filer Automatisk blits velger noen filer som trengs for å kjøre programmet. Hvis du bruker andre filer i appen din (for eksempel en caurina-tween), må du inkludere disse filene som en del av appen.
Trinn 17: Skriptvindu Flytt
I denne delen bruker vi klassen "NativeWindow" og funksjonen "startMove ()", slik at applikasjonen vår kan bevege seg over hele scenen. Gå til handlingslaget og legg til følgende kode. Så test det:
Nå kan vår søknad bevege seg over hele scenen, men hvis du vil lukke eller minimere, kan du ikke. Gå og design to knapper: minimer (btMinimiser forekomstnavn) og lukk (btClose forekomstnavn) som det neste bildet, men denne gangen må du bruke hovedfilmen (twitterApp). Til slutt legg til følgende kode:
Denne funksjonen er veldig enkel. Bare legg til en knapp under Follow Me-knappen, slik at det skaper et nytt lag inne i hovedfilmen "twitterApp". Skriv "btAlwaysfront" som et forekomstnavn:
Når du har opprettet denne knappen, går du inn og lager en annen ramme, hver med en stopphandling. Målet er å ha to stater for knappen. Ramme en deaktiveres og den andre rammen aktivert. Denne funksjonen bruker alwaysInFront metode fra nativeWindow-klassen. Etter dette må vi legge til handlingene til btAlwaysfront-knappen, så gå til handlingerramme og lim inn følgende kode:
// Twitter rss url var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; var twitterXML: URLRequest = ny URLRequest (twitterURL); var myLoader: URLLoader = ny URLLoader (twitterXML); myLoader.addEventListener ("complete", xmlLoaded); funksjon xmlLoaded (evtObj: Event) var twitter: XML = new XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var UserUrl: String = twitter.child (0) .link; var myUpdates: String = ""; // Loopen for hver (var nodo: XML i twitter ... element) myUpdates + = ""+ Nodo.title +" "+""+ nodo.pubDate +"
Å publisere .air-filen din i flash CS4 gå til Arkiv> AIR Settings-menyen og klikk på "Publiser AIR-fil-knappen".
Til flash CS3 gå til kommandoer> AIR - Opprett AIR-fil.
Da ser du et nytt vindu (Digital Signatur). Velg et sertifikat og skriv inn passordet ditt. Det tar litt tid å lage .air-filen, men når du er ferdig, vil du se et annet vindu med følgende tekst "AIR-filen er opprettet". .Air-filen er opprettet i samme arbeidskatalog som din .fla-fil.
Trinn 22: Endelige detaljer
Som du kan se, har appen min en skygge. Hvis du vil ha en Mac Windows-stil, velg bare hovedklippet "TwitterApp" og søk:
Konklusjon
Så der har vi vårt AIR-program! Det er en liten applikasjon, men jeg håper det hjelper deg som referanse til å utvikle din egen. Med denne teknologien kan vi utvikle flotte applikasjoner, mashable med APIer som Twitter, Gmaps og Flickr. Det er mange andre funksjoner som ikke er dekket i denne opplæringen, rikelig med muligheter for en fremtidig opplæring eller en rask guide! Takk for at du leste.
Share
Accentsconagua
