In diesem Lernprogramm erstellen wir eine Twitter Reader-Anwendung, die aus Ihren eigenen Twitter-Updates stammt. Wir werden uns einige Features der nativeWindow-Klasse ansehen, wie man sie signiert und ein Installationspaket erstellt.
Endergebnisvorschau
Werfen wir einen Blick auf die endgültige Bewerbung, auf die wir hinarbeiten:
Schritt 1: Installieren Sie Adobe AIR Runtime
Mit diesem Player können wir jede Anwendung mit der Erweiterung .air ausführen, beispielsweise den neuen Adobe Media Player. Zuerst müssen wir den Adobe AIR-Player installieren. Gehen Sie zu Adobe und laden Sie den Player herunter. Wählen Sie Ihr Betriebssystem und klicken Sie auf Download. Wenn der Download abgeschlossen ist, installieren Sie ihn.
Schritt 2: Installieren Sie die Adobe AIR-Erweiterung für Flash CS3 und CS4
Jetzt brauchen wir unser zweites Element, um AIR-Anwendungen zu entwickeln: die Erweiterung. In diesem Fall verwende ich das für Flash CS3, es ist jedoch auch für Flash CS4 verfügbar. Wechseln Sie zum Adobe Flash Support Center. Bevor Sie das Flash-Update für Adobe AIR installieren, müssen Sie das neueste Flash Player-Update (9.0.2) herunterladen und installieren, das Sie hier herunterladen können: http://www.adobe.com/support/flash/downloads.html # 902.
Dann müssen Sie das Adobe AIR-Update für Flash CS3 Professional herunterladen und installieren: http://www.adobe.com/support/flash/downloads.html.
Schritt 3: Dokumenteinrichtung
Wenn Sie zu diesem Zeitpunkt Flash CS3 oder CS4 starten, haben Sie auf dem Begrüßungsbildschirm die Möglichkeit, eine Adobe AIR Flash-Datei zu erstellen. TU es! Stellen Sie die Bühnengröße mit 30 Bildern pro Sekunde auf 300 Pixel breit und 500 Pixel hoch ein. Ich habe eine weiße Farbe für den Hintergrund gewählt. Speichern Sie es als "my-twitter-updates.fla".
Schritt 4: Hintergrund erstellen
Wir werden ein iPhone-Bild als Hintergrund verwenden. Besuchen Sie die Webseite von Sam Brown (nette Vektoren) und laden Sie das Paket mit iPhone-Bildern herunter. Öffnen Sie die Datei mit Fireworks oder Photoshop, wählen Sie eine beliebige Größe (ohne Text) und exportieren Sie sie als "bg_iphone.png"..
Wählen Sie in Flash "Datei"> "Importieren" und importieren Sie "bg_iphone.png" in die Bühne. Wählen Sie es aus und richten Sie es vertikal und horizontal aus. Wandeln Sie dieses Bild in ein MovieClip-Symbol mit dem Namen "mcIphone" um, gehen Sie zu den Eigenschaften und weisen Sie "twitterApp" als Instanznamen zu. Doppelklicken Sie auf das Symbol und benennen Sie die erste Ebene in "bg_iphone" um. Sie sollten jetzt etwa folgendes Bild haben:
Schritt 5: Erstellen der dynamischen Textfelder
Erstellen Sie nun eine neue Ebene für den Titel unserer Anwendung. Zeichnen Sie ein dynamisches Textfeld und weisen Sie "title_app" als Instanznamen zu.
Fügen Sie dann zwei neue Ebenen hinzu. der erste heißt "meine Updates" und der zweite "Follow me". Erstellen Sie auf der Ebene "Meine Updates" ein mehrzeiliges dynamisches Textfeld mit den folgenden Eigenschaften:
11 Schriftgröße
mehrzeiliges Textfeld
weiße Farbe
Aktivieren Sie den Rendertext als HTML
Weisen Sie "myUpdates" als Instanznamen zu
Wir brauchen einen Button für Folge mir Zeichnen Sie auf der Ebene "Follow-Me" ein Rechteck am unteren Rand des iPhone-Bereichs und konvertieren Sie es in ein Tastensymbol mit dem Text "Follow-Me". Weisen Sie anschließend "btFollowme" als Instanznamen zu.
Schritt 6: Bildlaufschaltflächen hinzufügen
An diesem Punkt brauchen wir zwei Knöpfe; nach oben und unten, um den Inhalt des Textfelds "my updates" zu scrollen. Gehen Sie zum Zeitleistenfenster und fügen Sie eine neue Ebene hinzu. Geben Sie den Namen "Bildlaufschaltflächen" ein, zeichnen Sie dann einen Pfeil auf der Bühne und konvertieren Sie ihn in ein MovieClip-Symbol. Für die andere Schaltfläche kopieren, einfügen und vertikal umdrehen. Weisen Sie "btUp" und "btDown" als Instanznamen zu. Kehren Sie schließlich zur Hauptzeitleiste zurück. Wenn Sie fertig sind, sollten Sie etwas wie das folgende Bild haben.
Schritt 7: Twitter-Feed-URL abrufen
Erstens benötigen wir Ihre RSS-Feed-URL. Gehen Sie also zu Ihrer Twitter-Startseite. Klicken Sie nun in der oberen Navigationsleiste auf die Schaltfläche Profil. Gehen Sie zum rechten Fenster und klicken Sie mit der rechten Maustaste auf "Rss Feed of Nutzername"und kopiere die URL.
Schritt 8: Anatomie des Twitter-RSS-Feeds
Sehen wir uns die Struktur unserer Twitter RSS-Updates an. Der erste Teil ist die Kanal-RSS-Info und der zweite Teil ist die Schleife der Aktualisierungen. Wir werden einige grundlegende Knoten verwenden: den Link des ersten Teils, title, pubDate und den Link des Schleifenelements.
Schritt 9: Starten Sie das Scripting von XML
Kehren Sie zu Flash zurück, und erstellen Sie eine neue Ebene für die Aktionen. Jetzt müssen Sie mit dem Codieren beginnen. Wie Sie sehen, enthält die erste Variable die RSS-Feed-URL aus Ihrem Twitter-Profil. Fügen Sie sie in Ihre ein:
var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; var twitterXML: URLRequest = neue URLRequest (twitterURL); var myLoader: URLLoader = neuer URLLoader (twitterXML); myLoader.addEventListener ("complete", xmlLoaded);
Schritt 10: Starten Sie die XmlLoaded-Funktion
Mit dieser Funktion können wir den RSS und jeden aufgelisteten Knoten laden, bevor die Variablen der XML-Knoten definiert werden:
Funktion xmlLoaded (evtObj: Event) var twitter: XML = neues XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var UserUrl: String = twitter.child (0) .link;
Schritt 11: Die Aktualisierungsschleife
In diesem Teil müssen wir die Werte der XML-Knoten abrufen und sie einer myUpdates-Variablen zuordnen. Verwenden ein zur Aussage zu tun.
var myUpdates: String = ""; für jeden (var nodo: XML in twitter… item) myUpdates + = ""+ nodo.title +" "+""+ nodo.pubDate +"
";
Schritt 12: Textfelder und Ereignis für die Schaltfläche "Folgen"
Zuerst zeigen wir den Titel der Anwendung an, dann erhalten wir die Updates und fügen schließlich einen EventListener für die Schaltfläche "Folgen" mit der Benutzer-URL hinzu (Beispiel: http://twitter.com/_dariux)..
// DIE TITEL-APP> "Twitter-Updates von Darío Gutiérrez / _dariux." twitterApp.titleApp.text = TwitterTitle; // Anzeige des Werts von myUpdates im Textfeld twitterApp.myUpdates.htmlText = myUpdates; // Aktionen für die Schaltfläche "Follow Me" twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); Funktion btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = neue URLRequest (UserUrl); navigateToURL (targetURL);
Schritt 13: Aktionen für die Bildlaufschaltflächen
Einfacher Code für die Bildlaufschaltflächen. Überprüfen Sie diesen Code:
// Listeners und Funktionen für Scroll-Schaltflächen twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); function scrollUp (Ereignis: MouseEvent): void twitterApp.myUpdates.scrollV - = 5; Funktion scrollDown (Ereignis: MouseEvent): void twitterApp.myUpdates.scrollV + = 5;
Schritt 14: Testen der Anwendung
Testen Sie den Film (Menüsteuerung + Film testen oder cmd + Eingabe). Wie Sie sehen, ist es ein normales Fenster, genau wie bei einem typischen Flash-Player. Im folgenden Schritt werden wir unsere Anwendung anpassen und Sie werden den Unterschied bemerken…
Schritt 15: AIR-Einstellungen für Anwendung und Installer
Für die AIR-Einstellungen in Flash CS4 gehen Sie zu Datei> AIR-Einstellungen. Für Flash CS3 gehen Sie zu Befehle> Einstellungen für AIR-Anwendung und -Installer. In diesem Fenster beginnen wir mit der Anpassung der Anwendung. Gehen wir nun zum Beschreibungsfeld und schreiben Sie allgemeine Informationen.
Fensterstil Der Fensterstil ist interessant. Es gibt drei Stile: Chrom, undurchsichtig und transparent. Der Chrome-Stil ist wie ein einfaches Fenster mit Schaltflächen, Hintergrund und Rahmen, der Opak ist ein Fenster mit Hintergrund, jedoch ohne Schaltflächen. Der letzte Stil von Transparent ist ein Fenster ohne Schaltflächen und Hintergrund. Wählen Sie in unserem Fall den transparenten Stil.
Symbol Wählen Sie ein Symbol (oder entwerfen Sie ein Symbol) für Ihre Anwendung in den verschiedenen Größen 16px, 32px, 48px, 128px mit der Erweiterung .png.
Erweitert In dieser Option können Sie die verschiedenen Einstellungen für das Fenster auswählen, wenn Ihre Anwendung gestartet wird, Optionen für zu installierende Ordner und Updates.
Digitale Unterschrift Wenn Sie Ihre AIR-Anwendung versenden möchten, benötigen Sie eine digitale Signatur, damit das Installationsprogramm auf den Systemen anderer Benutzer installiert werden kann. In diesem Fall signieren wir unsere Anwendung mit einem nicht vertrauenswürdigen Zertifikat, damit Runtime AIR als nicht verifizierter Herausgeber installiert werden kann. Wenn Sie weitere Informationen zum Erhalt eines Zertifikats benötigen, besuchen Sie den folgenden Link: Adobe AIR-Anwendungen digital signieren.
Ziel Wählen Sie das Ordnerziel und einen Namen für Ihre Anwendung.
Dateien einschließen Automatisch wählt Flash einige Dateien aus, die zum Ausführen der Anwendung benötigt werden. Wenn Sie andere Dateien in Ihrer App verwenden (z. B. ein Caurina-Tween), müssen Sie diese Dateien als Teil der App hinzufügen.
Schritt 17: Skriptfenster verschieben
In diesem Teil verwenden wir die Klasse "NativeWindow" und die Funktion "startMove ()", damit sich unsere Anwendung über die gesamte Stufe bewegen kann. Gehen Sie zur Aktionsebene und fügen Sie den folgenden Code hinzu. Dann testen Sie es:
stage.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); function moveWin (e: MouseEvent): void stage.nativeWindow.startMove ();
Schritt 18: Schließen und minimieren Sie die Schaltflächen
Jetzt kann sich unsere Anwendung über die gesamte Phase bewegen, aber wenn Sie schließen oder minimieren möchten, können Sie dies nicht tun. Gehe und entwerfe zwei Schaltflächen: Minimiere (btMinimize-Instanzname) und schließen (BtClose-Instanzname), z. B. das nächste Bild. Diesmal müssen Sie jedoch den Hauptfilm (twitterApp) verwenden. Fügen Sie schließlich den folgenden Code hinzu:
Diese Funktion ist sehr einfach. Fügen Sie einfach eine Schaltfläche unter der Schaltfläche "Follow Me" hinzu, sodass eine neue Ebene im Hauptclip "twitterApp" erstellt wird. Schreiben Sie "btAlwaysfront" als Instanznamen:
Wenn Sie diese Schaltfläche erstellt haben, gehen Sie hinein und erstellen Sie einen weiteren Rahmen, jeder mit einer Stopp-Aktion. Das Ziel besteht darin, zwei Zustände für die Schaltfläche zu haben. Frame eins deaktiviert und der zweite Frame aktiviert. Diese Funktion verwendet die alwaysInFront Methode aus der nativeWindow-Klasse. Danach müssen wir die Aktionen zur Schaltfläche "btAlwaysfront" hinzufügen. Gehen Sie zum Aktionsrahmen und fügen Sie den folgenden Code ein:
// Twitter rss url var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; var twitterXML: URLRequest = neue URLRequest (twitterURL); var myLoader: URLLoader = neuer URLLoader (twitterXML); myLoader.addEventListener ("complete", xmlLoaded); Funktion xmlLoaded (evtObj: Event) var twitter: XML = neues XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var UserUrl: String = twitter.child (0) .link; var myUpdates: String = ""; // Die Schleife für jeden (var nodo: XML in twitter… item) myUpdates + = ""+ nodo.title +" "+""+ nodo.pubDate +"
"; // DIE TITEL-APP>" Twitter-Updates von Darío Gutiérrez / _dariux. "TwitterApp.titleApp.text = TwitterTitle; // Zeigt die Wertigkeit von myUpdates im Textfeld twitterApp.myUpdates.htmlText = myUpdates; // an Me button twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); Funktion btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = neue URLRequest (UserUrl); ************************************************* Hörer und Funktionen für Scroll-Tasten ********************************************** ******** / twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); Funktion scrollUp (Ereignis: MouseEvent): void twitterApp.myUpdates.scrollV - = 5; Funktion scrollDown (Ereignis: MouseEvent): void twitterApp.myUpdates.scrollV + = 5; / ************************** ****************************** Air Zone ******************* ****************************** ******** / // Fenster verschieben stage.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); function moveWin (e: MouseEvent): void stage.nativeWindow.startMove (); // Schaltfläche "Minimieren" twitterApp.btMinimize.addEventListener (MouseEvent.CLICK, btMinimize_CLICK); Funktion btMinimize_CLICK (e: MouseEvent): void stage.nativeWindow.minimize (); // Schaltfläche zum Maximieren twitterApp.btClose.addEventListener (MouseEvent.CLICK, btClose_CLICK); function btClose_CLICK (e: MouseEvent): void stage.nativeWindow.close (); // Fenster aktivieren immer front stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); Funktion 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;
Schritt 21: Erstellen der AIR-Datei
So veröffentlichen Sie Ihre .air-Datei in Flash CS4 Gehen Sie zu Datei> AIR-Einstellungen und klicken Sie auf die Schaltfläche "AIR-Datei veröffentlichen"..
Zum Flash CS3 Gehen Sie zu Befehle> AIR - AIR-Datei erstellen.
Dann sehen Sie ein neues Fenster (die digitale Signatur). Wählen Sie ein Zertifikat aus und geben Sie Ihr Passwort ein. Das Erstellen der .air-Datei dauert einige Zeit, aber nach Fertigstellung wird ein weiteres Fenster mit dem folgenden Text "AIR-Datei wurde erstellt" angezeigt. Die .air-Datei wird in demselben Arbeitsverzeichnis wie Ihre .fla-Datei erstellt.
Schritt 22: Endgültige Details
Wie Sie sehen, hat meine App einen Schlagschatten. Wenn Sie einen Mac-Windows-Stil wünschen, wählen Sie einfach den Hauptfilm "twitterApp" aus und wenden Sie an:
Fazit
So haben wir unsere AIR-Anwendung! Es ist eine kleine Anwendung, aber ich hoffe, es hilft Ihnen als Referenz für die Entwicklung Ihrer eigenen. Mit dieser Technologie können wir fantastische Anwendungen entwickeln, die mit APIs wie Twitter, Gmaps und Flickr kompatibel sind. Es gibt viele andere Funktionen, die in diesem Tutorial nicht behandelt werden. Viel Spielraum für ein zukünftiges Tutorial oder eine Kurzanleitung! Danke fürs Lesen.
Share
Accentsconagua
