In questo tutorial creeremo un'applicazione Twitter Reader, alimentata dai tuoi aggiornamenti di Twitter. Vedremo alcune delle funzionalità della classe nativeWindow, come firmarlo e creare un pacchetto di installazione.
Anteprima del risultato finale
Diamo un'occhiata all'applicazione finale su cui lavoreremo:
Passaggio 1: installa Adobe AIR Runtime
Con questo lettore possiamo eseguire qualsiasi applicazione con l'estensione .air, come il nuovo Adobe Media Player. Per prima cosa è necessario installare il lettore Adobe AIR, quindi andare su Adobe e scaricare il lettore. Scegli il tuo sistema operativo e fai clic su Scarica. Al termine del download, installalo.
Passaggio 2: installare Adobe AIR Extension per Flash CS3 e CS4
Ora abbiamo bisogno del nostro secondo elemento per sviluppare applicazioni AIR: l'estensione. In questo caso sto utilizzando quello per Flash CS3 ma è disponibile anche per Flash CS4. Vai al Centro di supporto Adobe Flash. Prima di installare l'aggiornamento Flash per Adobe AIR, è necessario scaricare e installare l'ultimo aggiornamento di Flash Player (9.0.2), che è possibile scaricare qui: http://www.adobe.com/support/flash/downloads.html # 902.
Quindi è necessario scaricare e installare Adobe AIR Update per Flash CS3 Professional: http://www.adobe.com/support/flash/downloads.html.
Passaggio 3: Impostazione del documento
A questo punto, quando avvii Flash CS3 o CS4, nella schermata di benvenuto avrai la possibilità di creare un file Adobe AIR Flash. Fallo! Imposta le dimensioni dello stage su 300 px di larghezza e 500 px di altezza con 30 fps. Ho scelto un colore bianco per lo sfondo. Salvalo come "my-twitter-updates.fla".
Passaggio 4: creazione dello sfondo
Utilizzeremo l'immagine di un iPhone come sfondo, quindi vai sul sito web di Sam Brown (simpatici vettori) e scarica il pacchetto di immagini per iPhone. Apri il file con Fireworks o Photoshop e scegli qualsiasi dimensione (senza testo), quindi esporta come "bg_iphone.png".
In Flash, scegli Archivio> Importa, quindi importa "bg_iphone.png" sullo stage. Selezionalo e allinearlo verticalmente e orizzontalmente al centro. Converti questa immagine in un simbolo di videoclip chiamato "mcIphone", quindi vai alle proprietà e assegna "twitterApp" come nome di istanza. Fare doppio clic sul simbolo e rinominare il primo livello come "bg_iphone". Ora dovresti avere qualcosa come la seguente immagine:
Passaggio 5: creazione dei campi di testo dinamici
Ora vai e crea un nuovo livello per il titolo della nostra applicazione. Disegna un campo di testo dinamico e assegnalo "title_app" come nome di istanza.
Quindi aggiungi due nuovi livelli; il primo chiamato "i miei aggiornamenti" e il secondo chiamato "seguimi". Crea un campo di testo dinamico multilinea sul livello "I miei aggiornamenti" con le seguenti proprietà:
11 dimensioni del carattere
campo di testo multilinea
Colore bianco
attiva il rendering del testo come html
assegnare "myUpdates" come nome dell'istanza
Avremo bisogno di un pulsante per Seguimi sul livello "seguimi", quindi vai a disegnare un rettangolo nella parte inferiore dell'area iPhone e convertilo in un simbolo di pulsante con il testo "Seguimi". Successivamente, assegna "btFollowme" come nome dell'istanza.
Passaggio 6: aggiungere i pulsanti di scorrimento
A questo punto abbiamo bisogno di due pulsanti; su e giù per scorrere il contenuto del campo di testo "I miei aggiornamenti". Vai al pannello Timeline e aggiungi un nuovo livello. Digita il nome "pulsanti di scorrimento", quindi disegna una freccia sul palco e convertila in un simbolo di Movie Clip. Per l'altro pulsante copia, incolla e capovolgi verticalmente. Assegna "btUp" e "btDown" come nome di istanza. Infine, torna alla timeline principale. Quando hai finito dovresti avere qualcosa come la seguente immagine.
Passaggio 7: ottenere l'URL del feed di Twitter
In primo luogo, abbiamo bisogno del tuo URL del feed RSS, quindi vai alla home page di Twitter. Ora fai clic sul pulsante Profilo nella barra di navigazione superiore. Vai al pannello di destra, tasto destro del mouse su "Feed RSS di nome utente"e copia l'URL.
Passaggio 8: Anatomia del feed RSS di Twitter
Esaminiamo la struttura dei nostri aggiornamenti RSS di Twitter. La prima parte è il canale rss info e la seconda parte è il ciclo di aggiornamenti. Useremo alcuni nodi di base: il link della prima parte, titolo, pubDate e il link dell'elemento loop.
Passaggio 9: iniziare lo scripting XML
Torna a Flash e crea un nuovo livello per le azioni, è il momento di iniziare la codifica. Come puoi vedere, la prima variabile contiene l'URL del feed RSS dal tuo profilo Twitter, quindi incolla il tuo:
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 ("complete", xmlLoaded);
Passaggio 10: iniziare la funzione XmlLoaded
Con questa funzione possiamo caricare l'RSS e ogni nodo elencato, prima di iniziare a definire le variabili dei nodi xml:
function xmlLoaded (evtObj: Event) var twitter: XML = new XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var UserUrl: String = twitter.child (0) .link;
Passaggio 11: il ciclo degli aggiornamenti
In questa parte è necessario ottenere i valori dei nodi xml e assegnarli a una variabile myUpdates. Usare un per dichiarazione fare così.
var myUpdates: String = ""; per ogni oggetto (var node: XML in twitter ...) myUpdates + = ""+ Nodo.title +" "+""+ nodo.pubDate +"
";
Passaggio 12: campi di testo ed eventi per il pulsante Segui
Per prima cosa visualizziamo il titolo dell'applicazione, quindi riceviamo gli aggiornamenti e infine aggiungiamo un EventListener per il pulsante segui con l'url dell'utente (Esempio: http://twitter.com/_dariux).
// THE TITLE APP> "Aggiornamenti di Twitter da Darío Gutiérrez / _dariux." twitterApp.titleApp.text = TwitterTitle; // Visualizza il valore di myUpdates nel campo di testo twitterApp.myUpdates.htmlText = myUpdates; // Azioni per Seguimi pulsante twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); function btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = new URLRequest (UserUrl); navigateToURL (TargetURL);
Passaggio 13: azioni per i pulsanti di scorrimento
Codice semplice per i pulsanti di scorrimento, controlla questo codice:
// Ascoltatori e funzioni per i pulsanti di scorrimento twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); function scrollUp (Event: MouseEvent): void twitterApp.myUpdates.scrollV - = 5; function scrollDown (Event: MouseEvent): void twitterApp.myUpdates.scrollV + = 5;
Passaggio 14: test dell'applicazione
Prova il film (Menu Control + Test movie o cmd + enter). Come puoi vedere, è una finestra normale proprio come quando usi il tipico flash player. Nel passaggio seguente personalizzeremo la nostra applicazione e noterai la differenza ...
Passaggio 15: Impostazioni AIR dell'applicazione e del programma di installazione
Per le impostazioni AIR in Flash CS4, andare su File> Impostazioni AIR e per Flash CS3 andare su Comandi> Impostazioni applicazione e programma di installazione AIR. In questa finestra inizieremo a personalizzare l'applicazione, quindi passiamo al campo della descrizione e scriviamo alcune informazioni generali.
Stile della finestra Lo stile della finestra è interessante. Ci sono tre stili: cromato, opaco e trasparente. Lo stile Chrome è come una semplice finestra con pulsanti, sfondo e bordo, Opaco è una finestra con sfondo ma senza pulsanti e l'ultimo stile Trasparente è una finestra senza pulsanti e sfondo. Nel nostro caso, scegli lo stile Trasparente.
Icona Scegli un'icona (o una progettazione) per la tua applicazione in diverse dimensioni 16px, 32px, 48px, 128px con estensione .png.
Avanzate In questa opzione è possibile selezionare le diverse impostazioni per la finestra all'avvio dell'applicazione, le opzioni per l'installazione e l'aggiornamento delle cartelle.
Firma digitale Quando vuoi spedire la tua applicazione AIR, avrai bisogno di una firma digitale per l'installazione da installare nei sistemi di altri utenti. In questo caso firmeremo la nostra applicazione con certificato non attendibile per consentire a AIR di runtime di installarsi come editore non verificato. Se hai bisogno di maggiori dettagli su come ottenere un certificato, visita il seguente link: Firma digitale di applicazioni Adobe AIR.
Destinazione Scegli la destinazione della cartella e un nome per la tua applicazione.
Includi file Automaticamente Flash seleziona alcuni file necessari per eseguire l'applicazione. Se stai utilizzando altri file nella tua app (come ad esempio un'intervista caurina ad esempio), devi includere questi file come parte dell'app.
Passaggio 17: Spostamento finestra di scripting
In questa parte useremo la classe "NativeWindow" e la funzione "startMove ()", per consentire alla nostra applicazione di spostarsi su tutto lo stage. Vai al livello azioni e aggiungi il seguente codice. Quindi provalo:
stage.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); function moveWin (e: MouseEvent): void stage.nativeWindow.startMove ();
Passaggio 18: chiude e riduce a icona i pulsanti
Ora la nostra applicazione può spostarsi su tutto il livello, ma se si desidera chiudere o ridurre a icona, non è possibile. Vai e progetta due pulsanti: minimizza (btMinimize nome istanza) e chiudi (btClose nome istanza) come l'immagine successiva, ma questa volta devi utilizzare il clip filmato principale (twitterApp). Infine, aggiungi il seguente codice:
// Pulsante Riduci a icona twitterApp.btMinimize.addEventListener (MouseEvent.CLICK, btMinimize_CLICK); function btMinimize_CLICK (e: MouseEvent): void stage.nativeWindow.minimize (); // Pulsante Massimizza twitterApp.btClose.addEventListener (MouseEvent.CLICK, btClose_CLICK); function btClose_CLICK (e: MouseEvent): void stage.nativeWindow.close ();
Passo 19: Sempre in prima posizione
Questa funzione è molto semplice. Basta aggiungere un pulsante sotto il pulsante Seguimi, quindi crea un nuovo livello all'interno del Movie Clip principale "twitterApp". Scrivi "btAlwaysfront" come nome di un'istanza:
Una volta creato questo pulsante, vai dentro e crea un altro frame, ognuno con un'azione di stop. L'obiettivo è avere due stati per il pulsante. Pagina uno attivato e il secondo frame attivato. Questa funzione utilizza il alwaysInFront metodo dalla classe nativeWindow. Dopo questo dobbiamo aggiungere le azioni al pulsante btAlwaysfront, quindi vai alle azioni frame e incolla il seguente codice:
// Attiva la finestra sempre front stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); function btAlwaysfront_CLICK (e: MouseEvent): void if (stage.nativeWindow.alwaysInFront! = true) twitterApp.btAlwaysfront.gotoAndStop (2); stage.nativeWindow.alwaysInFront = true; else twitterApp.btAlwaysfront.gotoAndStop (1); stage.nativeWindow.alwaysInFront = false;
Step 20: Il codice completo
// 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 ("complete", xmlLoaded); function 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 = ""; // Il ciclo per ciascuno (var node: XML in twitter ... item) myUpdates + = ""+ Nodo.title +" "+""+ nodo.pubDate +"
"; // THE TITLE APP>" Aggiornamenti Twitter da Darío Gutiérrez / _dariux. "TwitterApp.titleApp.text = TwitterTitle; // Visualizza il valore di myUpdates nel campo di testo twitterApp.myUpdates.htmlText = myUpdates; // Azioni per seguire Pulsante Me twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); function btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = new URLRequest (UserUrl); navigateToURL (targetURL); / ****** ************************************************ Ascoltatori e funzioni per i pulsanti di scorrimento ********************************************** ******** / twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); function scrollUp (Event: MouseEvent): void twitterApp.myUpdates.scrollV - = 5; function scrollDown (Event: MouseEvent): void twitterApp.myUpdates.scrollV + = 5; / ************************ ****************************** AIR Zone ****************** **************************** ******** / // Finestra sposta stage.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); function moveWin (e: MouseEvent): void stage.nativeWindow.startMove (); // Pulsante Riduci a icona twitterApp.btMinimize.addEventListener (MouseEvent.CLICK, btMinimize_CLICK); function btMinimize_CLICK (e: MouseEvent): void stage.nativeWindow.minimize (); // Pulsante Massimizza twitterApp.btClose.addEventListener (MouseEvent.CLICK, btClose_CLICK); function btClose_CLICK (e: MouseEvent): void stage.nativeWindow.close (); // Attiva sempre la finestra front stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); function btAlwaysfront_CLICK (e: MouseEvent): void if (stage.nativeWindow.alwaysInFront! = true) twitterApp.btAlwaysfront.gotoAndStop (2); stage.nativeWindow.alwaysInFront = true; else twitterApp.btAlwaysfront.gotoAndStop (1); stage.nativeWindow.alwaysInFront = false;
Passaggio 21: creazione del file AIR
Per pubblicare il tuo file .air in flash CS4 vai su File> menu Impostazioni AIR e fai clic sul pulsante "Pubblica file AIR".
Per flash CS3 vai a Comandi> AIR - Crea file AIR.
Quindi vedrai una nuova finestra (la firma digitale). Scegli un certificato e digita la tua password. Ci vuole del tempo per creare il file .air, ma una volta finito, vedrai un'altra finestra con il seguente testo: "Il file AIR è stato creato". Il file .air viene creato nella stessa directory di lavoro del file .fla.
Step 22: dettagli finali
Come puoi vedere, la mia app ha un'ombra esterna. Se vuoi uno stile mac windows, seleziona il clip filmato principale "twitterApp" e applica:
Conclusione
Quindi, abbiamo la nostra applicazione AIR! È una piccola applicazione, ma spero che ti aiuti come riferimento per sviluppare la tua. Con questa tecnologia possiamo sviluppare applicazioni fantastiche, mashable con API come Twitter, Gmaps e Flickr. Ci sono molte altre funzionalità non trattate in questo tutorial, un sacco di possibilità per un tutorial futuro o una guida rapida! Grazie per aver letto.
Share
Accentsconagua
