Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

AIR pour Android : Première application avec Flash CS5

Compatible AIR 2. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS5. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par joni (Joni), le 14 novembre 2010

Si vous débutez dans le développement d'applications AIR pour Android, je vous conseille de suivre ce tutoriel si vous ne l’avez pas déjà fait.

Nous allons donc dans ce tutoriel créer notre première petite application pour Android en utilisant AIR. Nous pourrions faire un simple Hello world, mais cela n’aurait pas grand intérêt, c’est pourquoi, nous allons plutôt faire une petite application qui récupère et affiche le contenu du flux RSS du blog Mediabox. Cela vous permettra de vous rendre compte par vous même que beaucoup de choses restent identique à l’AS3 traditionnel et que seuls certaines fonctionnalités ont été ajoutées afin de coller au plus près aux spécificités des appareils mobiles.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Prérequis:
-Connaitre les bases du développement AS3
-Avoir déjà installé les outils nécessaires au développement AIR pour Android

Commençons par le paramétrage

Pour commencer, dans Flash CS5 créons un nouveau document depuis le modèle AIR for Android 480x800Android.
Une fois le modèle vierge ouvert, je vous conseille de redimmensionner la scène à la taille de votre téléphone. Personnellement, possédant un HTC Desire, la résolution de l’écran est de 480×800, (tout comme le Nexus One de Google).

Nous allons d’ores et déjà préparer les paramètres de publication de l’application.
Pour cela, rendez vous dans le menu Fichier > Paramètres d’AIR Android.
Nommez votre application comme vous le souhaitez, et cochez le mode Fullscreen. (si vous ne souhaitez pas passer en mode fullscreen, vous devez tenir compte de la hauteur de la barre de notification d’Android).
Dans l’onglet déployment, selectionnez votre certificat et saisissez votre mot de passe. Je vous conseille de cocher la case “Mémoriser pour la session” afin de ne pas avoir à le ressaisir à chaque publication.
Choisissez le type de déploiement “Device Release”, en effet, nous n’aurons pas besoin de debug pour l’instant.
Si vous souhaitez mettre un icone sur votre application, vous pouvez les insérer dans l’onglet “Icons”.
Dans l’onglet “Permissions”, cochez uniquement INTERNET pour le moment. Nous allons faire une simple aplication de lecture d’un flux RSS, mais cela vous permettra de vous rendre compte que l’accès à des données distantes se fait de la même façon que pour un SWF traditionnel.

Un peu de code

Entrons maintenant dans le vif du sujet.

Choisissez un couleur de fond pour votre application.
Ouvrez le panneau Actions (F9 ou Fenêtre > Actions).
Copiez-collez le code suivant :

// Import des classes nécessaires
import flash.net.URLLoader;
import flash.events.Event;
import flash.net.URLRequest;
 
// Variable qui contiendra le contenu du XML chargé.
var xmlFeed:XML = new XML();
 
// Objet URLLoader pour charger le contenu du XML du flux RSS.
var xmlLoader:URLLoader = new URLLoader();
// On ajoute un écouteur pour savoir quand le chargement est
// terminé et on appel la fonction onXmlLoadComplete.
xmlLoader.addEventListener(Event.COMPLETE,onXmlLoadComplete);
// On lance le chargement du flux RSS en utilisant 
// l'adresse fournie lors de l'abonnement sur le blog Mediabox.
xmlLoader.load( new URLRequest('http://feeds.feedburner.com/mediabox-blog'));
 
// Fonction executée lorque le chargement du XML est terminé.
function onXmlLoadComplete(evt:Event):void
{
	// On charge le contenu du XML dans notre variable prévue à cet effet.
	// Le contenu se trouve dans la propriété data de l'objet URLLoader 
	// qui est représenté ici par la propriété target sur l'objet Event 
	// reçu en paramètre, puisqu'il est l'objet qui déclenche cet écouteur.
	xmlFeed = new XML(evt.target.data);
	// On récupère le nombre d'items (correspondants aux billets du blog) 
	// afin de pouvoir boucler dessus.
	var nbItems:int = xmlFeed.channel.item.length();
	// On boucle sur la liste des billets
	for(var i=0;i<nbItems;i++)
	{
		// Pour chaque billet, on crée un nouvel objet FeedItem 
		// (c'est une classe personnalisée que nous créerons par la suite)
		// en lui passant certains paramètres du XML pour le remplissage des données
		var feedItem:FeedItem = new FeedItem(xmlFeed.channel.item[i].title,xmlFeed.channel.item[i].link,stage.stageWidth);
		// On positionne chaque objet les uns en dessous des autres
		// en décalant de la hauteur de chaque objet à chaque boucle.
		feedItem.y = (feedItem.height+10)*i;
		// Et enfin, on ajoute l'objet à la liste d'affichage de la scène.
		addChild(feedItem);
	}
}

Le principe est simple. Dans un premier temps, on récupère le contenu du flux RSS de notre blog préféré (même si ce n’est pas le cas, vous êtes priés de ne pas me contredire publiquement sous peine de bannissement définitif des forums Mediabox :) ). Puis, dans un deuxième temps, on boucle sur la liste des billets afin de créer autant d’objets qu’il y a de billets et on les positionne les uns en dessous des autres.

Si vous souhaitez voir à quoi ressemble un flux RSS complet, vous pouvez faire un trace de la variable evt.target.data au tout début de la fonction onXmlLoadComplete.

Encore un peu de code

Voyons maintenant la classe FeedItem.

package  {
 
	// Import des classes nécessaires
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.net.navigateToURL;
 
 
	public class FeedItem extends Sprite {
 
		// Variable contenant le titre du billet
		private var title:String;
		// Variable contenant l'URL du lien vers le billet sur le blog
		private var URLlink:String;
		// Variable contenant la largeur de la scène 
		// afin de dimmensionner correctement le fond de l'objet
		private var stageWidth:int;
		// Variable permettant de définir la hauteur de l'objet
		private var heightObj:int = 50;
 
		// Constructeur de la classe
		// Recoit en paramètre le titre du billet, 
		// le lien vers le billet sur le blog
		// et la largeur de la scène
		public function FeedItem(tit:String,link:String,stW:int) {
			// On affecte les paramètres du constructeur
			// aux variables prévues pour leur conservation au sein de l'objet
			title = tit;
			URLlink = link;
			stageWidth = stW;
 
			// On crée le fond de l'objet
			createBackground();
			// On crée le champ de texte du titre
			createTextField();
			// On ajoute un écouteur de clic
			addEventListener(MouseEvent.CLICK,navigateToMB);
		}
 
		private function createBackground():void
		{
			// On crée un nouvel objet Sprite qui contiendra le fond de l'objet
			var bg:Sprite = new Sprite();
			// On commence le remplissage avec une couleur (ici gris foncé) et un alpha à 100%
			bg.graphics.beginFill(0x111111,1);
			// On dessine un rectangle de la largeur de la scène et de hauteur défnie plus haut dans la classe
			bg.graphics.drawRect(0,0,stageWidth,heightObj);
			// On arrête le remplissage
			bg.graphics.endFill();
			// Enfin, on ajoute le fond à la liste d'affichage de l'objet
			addChild(bg);
		}
 
		private function createTextField():void
		{
			// On crée un format de texte avec les paramètres suivants:
			//- Police : Arial
			//- Taille : 14
			//- Couleur : 0x009999 (un bleu clair)
			//- Gras
			var tft:TextFormat = new TextFormat("Arial",14,0x009999,true);
 
			// On crée un champ de texte
			var tf:TextField = new TextField();
			tf.text = title; // On lui affecte le titre du billet
			tf.selectable = false; // On le rend non selectionnable
			tf.autoSize = "left"; // On le met en autosize à gauche (cela signifie que le champ de texte s'adaptera au texte en partant de la gauche)
			addChild(tf); // On ajoute le champ de texte à la liste d'affichage de l'objet
			tf.setTextFormat(tft); // On applique le format de texte au champ de texte
			tf.y = this.height/2 - tf.height/2; // On positionne le champ de texte de manière centrée en hauteur
		}
 
		private function navigateToMB(evt:MouseEvent):void
		{
			// Lorsque l'on appuie sur l'objet, on renvoie vers le lien du billet sur le blog
			navigateToURL( new URLRequest(URLlink) );
		}
 
	}
 
}

Créez un nouveau fichier .as et nommez le FeedItem. Copiez-collez le code ci dessus à l’intérieur et enregistrez le au même niveau que votre .fla.

Notez que dans cette classe, lorsque l’on appuie sur l’objet, on redirige vers un lien.
On remarque ici deux avantages. Le premier est que le fait de toucher l’écran du téléphone peut être assimilé au clic gauche d’une souris. Si vous n’avez pas besoin de fonctionnalités spécifiques aux écrans tactiles, vous pouvez continuer à utiliser les evenement souris (sauf les evenement RollOver et RollOut qui n’ont pas de correspondance sur un écran tactile).
Le deuxième point intéressant est que vous pouvez envoyer l’utilisateur depuis une application vers le navigateur du téléphone par un simple navigateToURL. Votre application tournera toujours en tâche de fond et réapparaitra une fois que l’utilisateur aura fermé le navigateur.

Publication et tests

Maintenant, allez dans le menu Fichier et faites Publier.

Si tout se passe correctement, vous devriez avoir un message comme quoi le fichier APK a bien été créé. Il est normalement créé au même niveau que votre .fla.

Si vous avez coché les cases pour installer et ouvrir l’application sur l’appareil connecté, et que vous avez bien connecté votre téléphone en USB en activant le déboguage USB, vous devriez voir l’application se lancer sur votre téléphone, sinon, il vous faudra l’installer à la main.

Une fois l’application installée et lancée, vous devriez voir apparaitre la liste des billets du blog Mediabox.

Si vous appuyez sur l’un de ces titres vous serez redirigé vers le navigateur.

Conclusion

Il serait possible d’améliorer cette application de bien des manières mais le but du tutorial était de vous montrer avec quelle facilité on peut créer une application Android avec Adobe AIR. Le seul souci dans le principe que nous avons utilisé, c’est que la taille de l’application est défini une fois pour toute et que celle-ci ne s’adaptera pas à toutes les résolutions. Mais pour cela, il suffit simplement de faire comme pour un site redimensionnable (je vous laisse chercher un peu par vous même).

Je détaillerai dans les tutoriaux suivants les fonctionnalités spécifiques à Adobe AIR pour Android.

That’s all folks !

Les sources

Voici une archive zip contenant tous les fichiers de ce tutoriel :