Create din egen Adobe AIR Søknad med Flash
3
Del
Del
Del
Dette cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil vi lage en Twitter Reader-programmet, matet fra din egen Twitter-oppdateringer. Vi skal se på noen av funksjonene i nativeWindow klassen, hvordan du registrerer det og gjøre en installasjonspakken.
Endelig resultat Forhåndsvisning
La oss ta en titt på den endelige søknaden vi skal jobbe mot:
Trinn 1: Installer Adobe AIR Runtime
med denne spilleren vi kan kjøre alle programmer med .air forlengelse, som den nye Adobe Mediaspiller. Først må vi installere Adobe AIR-spiller, så gå til Adobe og laste ned spilleren. Velg ditt operativsystem, og klikk nedlasting. Når nedlastingen er fullført, installerer du det
Trinn 2:. Installer Adobe AIR Extension for Flash CS3 og CS4
Nå må vi vår andre element for å utvikle AIR-applikasjoner: utvidelsen. I dette tilfellet bruker jeg en for Flash CS3, men den er tilgjengelig for Flash CS4 også. Gå til Adobe Flash Support Center. Før du installerer Flash-oppdatering for Adobe AIR, må du laste ned og installere den nyeste Flash Player-oppdatering (9.0.2), som du kan laste ned her: http://www.adobe.com/support/flash/downloads.html . # 902
Da 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 punktet, når du starter Flash CS3 eller CS4, på velkomstskjermen vil du ha muligheten til å opprette en Adobe AIR Flash-fil. Gjør det! Satt scenen størrelsen til 300px bred og 500px høy med 30 fps. Jeg har valgt en hvit farge for bakgrunnen. Lagre den som "min-twitter-updates.fla"
Trinn 4:. Opprette Bakgrunn
Vi kommer til å bruke en iPhone bilde som bakgrunn, så gå til Sam Brown hjemmeside (fin vektorer) og laste ned pakken av iPhone bilder. Åpne filen med fyrverkeri eller Photoshop og velge hvilken som helst størrelse (uten tekst) deretter eksportere som "bg_iphone.png".
I Flash, velger du Fil > Import deretter importere "bg_iphone.png" til scenen. Velg den og juster den vertikalt og horisontalt sentrum. Konvertere dette bildet til en MovieClip symbol som heter "mcIphone", og deretter gå til egenskaper og tildele "twitterApp" som sitt eksempel navn. Dobbeltklikk på symbolet og endre navn på det første laget som "bg_iphone". Du skal nå ha noe sånt som følgende bilde:
Trinn 5: Opprette Dynamic textfields
Nå gå og opprette et nytt lag for tittelen på søknaden vår. Tegn et dynamisk tekstfelt og tilordne den "title_app" som et eksempel navn
Deretter legger to nye lag.; den første heter "mine oppdateringer" og den andre heter "Følg meg". Opprett et flerlinjet dynamisk tekstfelt på "mine oppdateringer" lag med følgende egenskaper:
11 skriftstørrelsen
Multitekstfeltet
hvit farge
< li> aktivere gjengi teksten som html
tildele "myUpdates" som forekomstnavnet
Vi trenger en knapp for Følg meg På dette punktet trenger vi to knapper; opp og ned for å bla innholdet i "mine oppdateringer" tekstfeltet. Gå til tidslinjen panel og legge et nytt lag. Skriv inn navnet "rulleknappene", deretter tegne en pil på scenen og konvertere den til en MovieClip symbol. For den andre knappen kopiere, lime inn og snu den i høyden. Tildele "btUp" og "btDown" som et eksempel navn. Til slutt, gå tilbake til hovedtidslinjen. Når du er ferdig, bør du ha noe sånt som følgende bilde For det første trenger vi din RSS feed URL, så gå til din Twitter-hjemmesiden. Nå klikker du på profilknappen i den øverste linjen navigasjon. Gå til høyre panel, høyreklikker du på "RSS-feed av brukernavn La oss undersøke strukturen i våre Twitter RSS-oppdateringer. Den første delen er den kanalen rss info og den andre delen er loopen av oppdateringer. Vi vil bruke noen grunnleggende noder: linken til den første delen, tittel, pubDate og koblingen av loopen elementet. Gå tilbake til Flash og opprette et nytt lag for handlingene, det er på tide å starte koding. Som du kan se, inneholder den første variable RSS-feed URL fra din Twitter-profil, så lime inn i din: Med denne funksjonen kan vi laste RSS og hver node oppført, før du begynner å definere variabler av XML-noder : I denne delen vi trenger for å få verdiene av XML noder og tilordne dem til en myUpdates variabel. Bruk en for uttalelse Først viser vi tittelen på programmet, så vi får oppdateringer og endelig legge til en EventListener for å følge knappen med brukerens url (Eksempel: http://twitter.com/_dariux) Enkel kode for rulleknappene, sjekk denne koden: Test filmen (Meny Ctrl + Test film eller cmd + enter). Som du kan se, er det et vanlig vindu akkurat som når du bruker den typiske flash player. I neste trinn vil vi tilpasse vår søknad, og du vil merke forskjellen .. For AIR Innstillinger i Flash CS4 gå til Fil > AIR Innstillinger og for Flash CS3 gå til kommandoer > AIR Søknad og Installer innstillinger. I dette vinduet skal vi begynne å tilpasse programvaren, så la oss gå til beskrivelsen feltet og skrive litt generell info. Window stil Ikon Avansert Digital signatur Destinasjon Inkluder. filer I denne delen vi vil bruke "NativeWindow" class og funksjonen "startMove ()", for å tillate vår søknad å flytte over hele scenen. Gå til handlinger lag og legg til følgende kode. Deretter teste det: Nå vår søknad kan bevege seg over hele scenen, men hvis du ønsker å lukke eller minimere, kan du ikke. Gå og design to knapper: minimere (btMinimize eksempel navn) og nær (btClose eksempel navn) som neste bilde, men denne gangen må du bruke hovedfilmklipp (twitterApp). Til slutt legger du til følgende kode: Denne funksjonen er svært enkel. Bare legg en knapp under Follow Me-knappen, så det skaper et nytt lag i hoved MovieClip "twitterApp". Skriv "btAlwaysfront" som en forekomst navn: Når du har opprettet denne knappen, gå inn og opprette en ny ramme, hver med en stop action. Målet er å ha to stater for knappen. Ramme en deaktivert og den andre ramme aktivert. Denne funksjonen bruker alwaysInFront metoden fra nativeWindow klassen. Etter dette må vi legge til handlinger til btAlwaysfront knappen, så gå til handlinger ramme og lim inn følgende kode: Hvis du vil publisere .air fil i Flash CS4 gå til Fil > . AIR Innstillinger-menyen og klikk på "Publiser AIR fil knappen" For flash CS3 gå til kommandoer > AIR -. Lag AIR File Da vil du se et nytt vindu (digital signatur). Velg et sertifikat og skriv inn passordet ditt. Det tar litt tid å lage .air filen, men når finisedh du vil se et annet vindu med følgende tekst "AIR-filen er opprettet". Den .air filen er laget i samme arbeid katalog som FLA fil Som du kan se, har min app en skygge. Hvis du vil ha en mac windows stil velger du bare den viktigste filmklipp "twitterApp" og gjelder: Så det vi har vår AIR-programmet! Det er en liten applikasjon, men jeg håper det hjelper deg som en referanse til å utvikle din egen. Med denne teknologien kan vi utvikle utrolige søknader, Mashable med APIer som Twitter, gmaps og Flickr. Det er mange andre funksjoner som ikke dekkes i denne opplæringen, massevis av muligheter for en fremtidig tutorial eller hurtigguide! Takk for lesing.
på "følg meg "lag, så gå å tegne et rektangel i bunnen av iPhone-området og konvertere den til en knapp symbol med teksten" Follow Me ". Etterpå tildele "btFollowme" som forekomstnavnet
Trinn 6:. Legg Rulleknapper
Trinn 7:. Får Twitter-feed URL
" og kopiere URL.
Trinn 8: Anatomy of Twitter RSS-feed
Trinn 9: Begynn Scripting XML
Var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; Var twitterXML: URLRequest = new URLRequest (twitterURL); Var myLoader: URLLoader = new URLLoader (twitterXML); myLoader.addEventListener ( "fullstendig", xmlLoaded);
Trinn 10: Begynn XmlLoaded Funksjon
funksjon xmlLoaded (evtObj: Hendelses) {var twitter: XML = ny XML (myLoader.data); Var TwitterTitle: String = twitter.child (0) .description; Var UserUrl: String = twitter.child (0) .link;
Trinn 11: Oppdateringer Loop
å gjøre det
Var myUpdates: String = "";. for hver (var nodo: XML i twitter..item) {myUpdates + = "< a href = '» + nodo.link + "' > < font color = '# a4917c' >" + nodo.title + " < /font > < /a > < br > "+" < font color = '# a4bc34' > "+ nodo.pubDate +" < /font > < br /> < br /> "; }
Steg 12: Tekst Fields og arrangement for Follow Button
//tittelen APP >.; "Twitter-oppdateringer fra Darío Gutiérrez /_dariux." twitterApp.titleApp.text = TwitterTitle; //Vise verdien av myUpdates inn i tekstfeltet twitterApp.myUpdates.htmlText = myUpdates; //Initiativer for Follow Me knappen twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); fungere btFollowme_CLICK (e: Mouseevent): void {var targetUrl: URLRequest = new URLRequest (UserUrl); navigateToURL (targetUrl); }}
Trinn 13: Initiativer for rulleknappene
//Lyttere og funksjoner for rulleknappene twitterApp.btUp.addEventListener (MouseEvent.CLICK , bla opp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); funksjon scrollUp (Event: Mouseevent): void {twitterApp.myUpdates.scrollV - = 5; } Funksjon scrollDown (Event: Mouseevent): void {twitterApp.myUpdates.scrollV + = 5; }
Trinn 14: Testing av Application
Trinn 15: Søknad og Installer AIR Innstillinger
Window stil er interessant. Det er tre stiler: krom, ugjennomsiktig og gjennomsiktig. Chrome stil er som en enkel vindu med knapper, bakgrunn og ramme, er Opaque et vindu med bakgrunn, men uten knapper og den siste stilen Transparent er et vindu uten knapper og bakgrunn. I vårt tilfelle, velger Transparent stil.
Velg et ikon (eller design en) for din søknad i differents størrelser 16px, 32px, 48px, 128px med PNG forlengelse.
i dette alternativet kan du velge de differents innstillinger for vinduet når programmet er lansert, alternativer for mapper for å installere og oppdateringer.
når du ønsker å sende din AIR-programmet trenger du en digital signatur for brukeren å installere i andre brukeres systemer. I dette tilfellet vil vi signere vår søknad med klarert sertifikat for å tillate kjøring AIR å installere som Ubekreftet utgiver. Hvis du trenger mer informasjon om hvordan du får et sertifikat gå til følgende link:. Digitalt signere Adobe AIR-applikasjoner
Velg mappen destinasjon og et navn for din søknad
automatisk Flash velger noen filer som trengs for å kjøre programmet. Hvis du bruker andre filer i din app (som en caurina tween for eksempel) må du inkludere disse filene som en del av programmet
Trinn 17:. Scripting Vindu Flytt
stage.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); funksjon moveWin (e: Mouseevent): void {stage.nativeWindow.startMove (); }
Trinn 18: Lukk og minimeringsknappene
//Minimer-knappen twitterApp.btMinimize.addEventListener (MouseEvent.CLICK, btMinimize_CLICK); funksjon btMinimize_CLICK (e: Mouseevent): void {stage.nativeWindow.minimize (); } //Maksimer knappen twitterApp.btClose.addEventListener (MouseEvent.CLICK, btClose_CLICK); funksjon btClose_CLICK (e: Mouseevent): void {stage.nativeWindow.close (); }
Trinn 19: Alltid i Front Feature
//Aktiver vindu alltid foran stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); funksjon btAlwaysfront_CLICK (e: Mouseevent): void {if {twitterApp.btAlwaysfront.gotoAndStop (2), (stage.nativeWindow.alwaysInFront = sant!) stage.nativeWindow.alwaysInFront = true; } Else {twitterApp.btAlwaysfront.gotoAndStop (1); stage.nativeWindow.alwaysInFront = false; }}
Trinn 20: The Complete Kode
//Twitter rss url Var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; Var twitterXML: URLRequest = new URLRequest (twitterURL); Var myLoader: URLLoader = new URLLoader (twitterXML); myLoader.addEventListener ( "fullstendig", xmlLoaded); funksjon xmlLoaded (evtObj: Hendelses) {var twitter: XML = ny XML (myLoader.data); Var TwitterTitle: String = twitter.child (0) .description; Var UserUrl: String = twitter.child (0) .link; Var myUpdates: String = ""; //Sløyfen for hver (var nodo: XML i twitter..item) {myUpdates + = "< a href = '» + nodo.link + "' > < font color = '# a4917c' >" + nodo.title + "< /font > < /a > < br >" + "< font color = '# a4bc34' >" + nodo.pubDate + "< /font > < br /> < br /> "; } //Tittelen APP > "Twitter-oppdateringer fra Darío Gutiérrez /_dariux." twitterApp.titleApp.text = TwitterTitle; //Viser tapperhet av myUpdates inn i tekstfeltet twitterApp.myUpdates.htmlText = myUpdates; //Initiativer for Follow Me knappen twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); fungere btFollowme_CLICK (e: Mouseevent): void {var targetUrl: URLRequest = new URLRequest (UserUrl); navigateToURL (targetUrl); }} /*********************************************** ******* Lyttere og funksjoner for rulleknappene ************************************* ***************** /twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); funksjon scrollUp (Event: Mouseevent): void {twitterApp.myUpdates.scrollV - = 5; } Funksjon scrollDown (Event: Mouseevent): void {twitterApp.myUpdates.scrollV + = 5; } /************************************************ ****** AIR Zone ****************************************** ************ ///Window flytte stage.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); funksjon moveWin (e: Mouseevent): void {stage.nativeWindow.startMove (); } //Minimer-knappen twitterApp.btMinimize.addEventListener (MouseEvent.CLICK, btMinimize_CLICK); funksjon btMinimize_CLICK (e: Mouseevent): void {stage.nativeWindow.minimize (); } //Maksimer knappen twitterApp.btClose.addEventListener (MouseEvent.CLICK, btClose_CLICK); funksjon btClose_CLICK (e: Mouseevent): void {stage.nativeWindow.close (); } //Aktiver vindu alltid foran stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); funksjon btAlwaysfront_CLICK (e: Mouseevent): void {if {twitterApp.btAlwaysfront.gotoAndStop (2), (stage.nativeWindow.alwaysInFront = sant!) stage.nativeWindow.alwaysInFront = true; } Else {twitterApp.btAlwaysfront.gotoAndStop (1); stage.nativeWindow.alwaysInFront = false; }}
Trinn 21: Lage AIR File
Trinn 22:. Endelig detaljer
Konklusjon