Dans ce tutoriel, nous allons créer une application Twitter Reader, alimentée à partir de vos propres mises à jour Twitter. Nous allons examiner quelques-unes des fonctionnalités de la classe nativeWindow, comment la signer et créer un paquet d'installation.
Aperçu du résultat final
Jetons un coup d'œil à l'application finale sur laquelle nous allons travailler:
Étape 1: Installez Adobe AIR Runtime
Avec ce lecteur, vous pouvez exécuter n’importe quelle application portant l’extension .air, comme le nouveau Adobe Media Player. Nous devons d’abord installer le lecteur Adobe AIR. Allez donc sur Adobe et téléchargez le lecteur. Choisissez votre système d'exploitation et cliquez sur télécharger. Une fois le téléchargement terminé, installez-le.
Étape 2: Installez Adobe AIR Extension pour Flash CS3 et CS4
Nous avons maintenant besoin de notre deuxième élément pour développer des applications AIR: l’extension. Dans ce cas, j'utilise celui de Flash CS3, mais il est également disponible pour Flash CS4. Accédez au centre de support Adobe Flash. Avant d'installer la mise à jour Flash pour Adobe AIR, vous devez télécharger et installer la dernière mise à jour de Flash Player (9.0.2), que vous pouvez télécharger ici: http://www.adobe.com/support/flash/downloads.html # 902.
Ensuite, vous devez télécharger et installer la mise à jour Adobe AIR pour Flash CS3 Professional: http://www.adobe.com/support/flash/downloads.html.
Étape 3: Configuration du document
À ce stade, lorsque vous démarrez Flash CS3 ou CS4, vous avez la possibilité de créer un fichier Flash Adobe AIR sur l'écran d'accueil. Fais le! Réglez la taille de la scène sur 300 pixels de large et 500 pixels de haut avec 30 images par seconde. J'ai choisi une couleur blanche pour le fond. Enregistrez-le sous "my-twitter-updates.fla".
Étape 4: Création de l'arrière-plan
Nous allons utiliser une image d'iPhone comme arrière-plan, alors visitez le site Web de Sam Brown (beaux vecteurs) et téléchargez l'ensemble d'images d'iPhone. Ouvrez le fichier avec Fireworks ou Photoshop et choisissez n’importe quelle taille (sans texte), puis exportez-le sous le nom "bg_iphone.png"..
Dans Flash, choisissez Fichier> Importer, puis importez le "bg_iphone.png" à mettre en scène. Sélectionnez-le et alignez-le verticalement et horizontalement au centre. Convertissez cette image en un symbole MovieClip nommé "mcIphone", puis allez dans les propriétés et assignez "twitterApp" comme nom d’instance. Double-cliquez sur le symbole et renommez le premier calque en "bg_iphone". Vous devriez maintenant avoir quelque chose comme l'image suivante:
Étape 5: Création des champs de texte dynamiques
Maintenant, créez un nouveau calque pour le titre de notre application. Dessine un champ de texte dynamique et assigne-le "title_app" comme nom d'occurrence.
Ajoutez ensuite deux nouvelles couches. le premier nommé "mes mises à jour" et le second "suivez-moi". Créez un champ de texte dynamique multiligne sur le calque "mes mises à jour" avec les propriétés suivantes:
11 taille de la police
champ de texte multiligne
couleur blanche
activer le rendu du texte au format HTML
assigne "myUpdates" comme nom d'instance
Nous aurons besoin d'un bouton pour Suis moi sur le calque "suivez-moi", créez un rectangle en bas de la zone de l'iPhone et convertissez-le en symbole de bouton avec le texte "suivez-moi". Ensuite, assignez "btFollowme" comme nom d'instance.
Étape 6: Ajouter des boutons de défilement
À ce stade, nous avons besoin de deux boutons; de haut en bas pour faire défiler le contenu du champ de texte "mes mises à jour". Accédez au panneau Montage et ajoutez un nouveau calque. Tapez le nom "boutons de défilement", puis tracez une flèche sur la scène et convertissez-la en symbole de MovieClip. Pour l'autre bouton copier, collez et retournez-le verticalement. Attribuez "btUp" et "btDown" comme nom d'instance. Enfin, retournez à la chronologie principale. Quand vous avez fini, vous devriez avoir quelque chose comme l’image suivante.
Étape 7: Obtenir l'URL du flux Twitter
Tout d'abord, nous avons besoin de l'URL de votre flux RSS, alors rendez-vous sur votre page d'accueil Twitter. Maintenant, cliquez sur le bouton Profil dans la barre de navigation supérieure. Allez dans le panneau de droite, cliquez avec le bouton droit de la souris sur "Flux RSS de Nom d'utilisateur"et copiez l'URL.
Étape 8: Anatomie de Twitter RSS Feed
Examinons la structure de nos mises à jour Twitter sur Twitter. La première partie est l'info rss de la chaîne et la seconde est la boucle des mises à jour. Nous allons utiliser quelques nœuds de base: le lien de la première partie, title, pubDate et le lien de l'élément loop.
Étape 9: Commencez à écrire un script XML
Retournez dans Flash et créez un nouveau calque pour les actions. Il est temps de commencer à coder. Comme vous pouvez le constater, la première variable contient l'URL du flux RSS de votre profil Twitter, alors collez-le dans le votre:
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);
Étape 10: Commencez la fonction XmlLoaded
Avec cette fonction, nous pouvons charger le RSS et chaque nœud de la liste avant de commencer à définir les variables des nœuds xml:
fonction xmlLoaded (evtObj: événement) var twitter: XML = new XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var UserUrl: String = twitter.child (0) .link;
Étape 11: La boucle des mises à jour
Dans cette partie, nous devons obtenir les valeurs des nœuds XML et les affecter à une variable myUpdates. Utiliser un pour la déclaration faire cela.
var myUpdates: String = ""; pour chaque (var nodo: XML dans twitter… item) myUpdates + = ""+ nodo.title +" "+""+ nodo.pubDate +"
";
Étape 12: Champs de texte et événement pour le bouton Suivre
Nous affichons d’abord le titre de l’application, puis nous obtenons les mises à jour et ajoutons enfin un EventListener pour le bouton Suivre avec l’url de l’utilisateur (Exemple: http://twitter.com/_dariux)..
// THE TITLE APP> "Twitter updates from Darío Gutiérrez / _dariux." twitterApp.titleApp.text = TwitterTitle; // Affiche la valeur de myUpdates dans le champ de texte twitterApp.myUpdates.htmlText = myUpdates; // Actions pour le bouton Suivez-moi twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); function btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = new URLRequest (UserUrl); browseToURL (targetURL);
Étape 13: Actions pour les boutons de défilement
Code simple pour les boutons de défilement, vérifiez ce code:
// Listeners et fonctions pour les boutons de défilement twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); fonction scrollUp (Event: MouseEvent): void twitterApp.myUpdates.scrollV - = 5; function scrollDown (Event: MouseEvent): void twitterApp.myUpdates.scrollV + = 5;
Étape 14: Test de l'application
Testez le film (Menu Ctrl + Tester le film ou cmd + entrée). Comme vous pouvez le constater, il s’agit d’une fenêtre normale, tout comme lorsque vous utilisez le lecteur Flash classique. Dans l'étape suivante, nous allons personnaliser notre application et vous remarquerez la différence…
Étape 15: Paramètres AIR de l'application et de l'installateur
Pour les paramètres AIR dans Flash CS4, accédez à Fichier> Paramètres AIR et pour Flash CS3, à Commandes> Paramètres de l'application AIR et du programme d'installation. Dans cette fenêtre, nous allons commencer à personnaliser l’application. Nous allons donc dans le champ de description et écrire quelques informations générales..
Style de fenêtre Le style de la fenêtre est intéressant. Il existe trois styles: chrome, opaque et transparent. Le style Chrome est comme une simple fenêtre avec des boutons, un arrière-plan et une bordure, l'Opaque est une fenêtre avec un arrière-plan mais sans boutons et le dernier style Transparent est une fenêtre sans des boutons et un arrière-plan. Dans notre cas, choisissez le style Transparent.
Icône Choisissez une icône (ou créez-en une) pour votre application en différentes tailles: 16px, 32px, 48px, 128px avec extension .png.
Avancée Dans cette option, vous pouvez sélectionner les différents paramètres de la fenêtre au lancement de votre application, les options pour les dossiers à installer et les mises à jour..
Signature numérique Lorsque vous souhaitez expédier votre application AIR, vous avez besoin d'une signature numérique pour que le programme d'installation puisse l'installer sur les systèmes d'autres utilisateurs. Dans ce cas, nous signons notre application avec un certificat non approuvé pour permettre à runtime AIR de s'installer en tant qu'éditeur non vérifié. Pour plus d'informations sur l'obtention d'un certificat, consultez le lien suivant: Signature numérique d'applications Adobe AIR.
Destination Choisissez la destination du dossier et un nom pour votre application.
Fichiers d'inclusion Flash sélectionne automatiquement certains fichiers nécessaires à l'exécution de l'application. Si vous utilisez d'autres fichiers dans votre application (comme une caurina tween, par exemple), vous devez les inclure dans l'application..
Étape 17: Déplacement de la fenêtre de script
Dans cette partie, nous utiliserons la classe "NativeWindow" et la fonction "startMove ()", afin de permettre à notre application de se déplacer sur toute la scène. Accédez au calque actions et ajoutez le code suivant. Puis testez-le:
stage.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); function moveWin (e: MouseEvent): void stage.nativeWindow.startMove ();
Étape 18: Fermez et réduisez les boutons
Notre application peut maintenant se déplacer sur toute la scène, mais si vous voulez fermer ou réduire au minimum, vous ne pouvez pas. Allez créer deux boutons: minimiser (nom d'instance btMinimize) et fermer (nom d'instance btClose) tel que la photo suivante, mais cette fois, vous devez utiliser le clip principal (twitterApp). Enfin, ajoutez le code suivant:
Cette fonctionnalité est très simple. Il suffit d’ajouter un bouton en dessous du bouton Suivez-moi pour créer un nouveau calque dans le clip principal "twitterApp". Ecrivez "btAlwaysfront" comme nom d'instance:
Une fois que vous avez créé ce bouton, allez à l'intérieur et créez un autre cadre, chacun avec une action d'arrêt. L'objectif est d'avoir deux états pour le bouton. Premier cadre désactivé et le deuxième cadre activé. Cette fonctionnalité utilise le toujoursInFront méthode de la classe nativeWindow. Après cela, nous devons ajouter les actions au bouton btAlwaysfront, alors allez dans le cadre actions et collez le code suivant:
// Activer la fenêtre toujours devant stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); fonction 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;
Étape 20: le code complet
// Twitter URL rss 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); fonction xmlLoaded (evtObj: événement) var twitter: XML = new XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var UserUrl: String = twitter.child (0) .link; var myUpdates: String = ""; // La boucle pour chaque élément (var nodo: XML dans twitter… item) myUpdates + = ""+ nodo.title +" "+""+ nodo.pubDate +"
"; // THE TITLE APP>" Mises à jour Twitter de Darío Gutiérrez / _dariux. "TwitterApp.titleApp.text = TwitterTitle; // Affiche la valeur de myUpdates dans le champ de texte twitterApp.myUpdates.htmlText = myUpdates; // Actions pour suivre Moi bouton twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); fonction btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = nouvelle URLRequest (UserUrl); void URLText (targetURL); / ****** *********************************************** Auditeurs et fonctions des boutons de défilement ********************************************** ******** / twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); fonction scrollUp (Event: MouseEvent): void twitterApp.myUpdates.scrollV - = 5; function scrollDown (Event: MouseEvent): void twitterApp.myUpdates.scrollV + = 5; / ********************* ******************************** Zone AIR ****************** ***************************** ******** / // déplacement de la fenêtre stage.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); function moveWin (e: MouseEvent): void stage.nativeWindow.startMove (); // Bouton Réduire twitterApp.btMinimize.addEventListener (MouseEvent.CLICK, btMinimize_CLICK); fonction btMinimize_CLICK (e: MouseEvent): void stage.nativeWindow.minimize (); // Bouton Maximiser twitterApp.btClose.addEventListener (MouseEvent.CLICK, btClose_CLICK); fonction btClose_CLICK (e: MouseEvent): void stage.nativeWindow.close (); // Activer la fenêtre toujours devant stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); fonction 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;
Étape 21: Création du fichier AIR
Pour publier votre fichier .air dans flash CS4 allez dans le menu Fichier> Paramètres AIR et cliquez sur le bouton "Publier le fichier AIR".
Pour flash CS3 allez dans Commandes> AIR - Créer un fichier AIR.
Ensuite, vous verrez une nouvelle fenêtre (la signature numérique). Choisissez un certificat et tapez votre mot de passe. Il faut un certain temps pour créer le fichier .air, mais une fois terminé, vous verrez une autre fenêtre avec le texte suivant "Le fichier AIR a été créé". Le fichier .air est créé dans le même répertoire de travail que votre fichier .fla.
Étape 22: détails finaux
Comme vous pouvez le constater, mon application a une ombre portée. Si vous voulez un style Windows Mac, il suffit de sélectionner le clip principal "twitterApp" et d'appliquer:
Conclusion
Nous avons donc notre application AIR! C'est une petite application, mais j'espère que cela vous aidera à développer la vôtre. Avec cette technologie, nous pouvons développer des applications géniales, masquables avec des API telles que Twitter, Gmaps et Flickr. Il y a beaucoup d'autres fonctionnalités non couvertes dans ce tutoriel, beaucoup de possibilités pour un futur tutoriel ou un guide rapide! Merci d'avoir lu.
Share
Accentsconagua
