La classe FileReference permet de charger un MP3 depuis le disque dur local (client) via la méthode load(). Cependant, le fichier reçu se trouve dans un byteArray, nous recevons un RAW. Évidemment, la classe Sound ne permet pas de charger ce type de données, il faut alors passer par du code écrit sois même qui devra parser le MP3, gerer la partie ID3 et créer une classe Sound qui contient le son MP3. Ce genre de mini Framework existe, notamment AudioFx.

La méthode loadMp3FromByteArray de la classe Sound

J’avais posté sur la branche jira de bugs.adobe à ce propos, je me suis d’ailleurs trompé, j’ai publié un bug post au lieu d’un request feature, mais bon, ça n’a apparemment pas porté à préjudice.. lol
https://bugs.adobe.com/jira/browse/FP-5920

Toujours est-il qu’une nouvelle feature à été ajoutée à la classe Sound afin de résoudre ce souci, elle est en préview sur le player 11 bêta et il n’y aurait aucune certitude que cette feature restera pour la sortie RC. Alors, j’invite tous les lecteurs de mon tuto à appuyer cette demande en votant ou en laissant un message sur mon post chez Adobe. Il y a un lien Voting dans la colonne gauche.

Afin de tester cette feature, vous devez installer les versions beta du plugin et activeX du player 11, vous pouvez les télécharger ici: http://labs.adobe.com/downloads/flashplatformruntimes_incubator.html

Une fois installé, pour Chrome, vous devez le sélectionner de la manière suivante:
Dans la barre d’adresse de chrome, tapez: about:plugins ensuite, cliquer sur details.

Dans la liste des plugins, il doit y avoir celui installé par chrome lui même et le 11 bêta installé dans votre système. Il suffit de désactiver celui installé par chrome et il prendra par défaut celui du système.

Si c’est réussi, vous devez voir lors de la lecture d’un SWF la mention Flash Player 11 (incubator build) en bas de l’animation.

Clic on black rectangle for load mp3.

Tester l’API du beta player 11 sous FlashDevelop

Afin de tester une API bêta, il faut préparer FlashDevelop en suivant les étapes suivantes:

• Télécharger le dernier SDK préconisé par Adobe Labs:
  http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero
• Téléchager le playerglobal.swc du player beta:
  http://download.macromedia.com/pub/labs/flashplatformruntimes/incubator/flashplayer_inc_playerglobal_022711.swc
• Créer un nouveau projet AS3 sous FD, ensuite, aller dans AS3Context et cibler le SDK téléchargé.
• Aller dans le répertoire framework/libs/players/10.1 du sdk et remplacer le playerGlobal présent par celui qu’on vient de télécharger. (en le renommant playerglobal.swc). C’est ce fichier qui contient toutes les références de classes de l’API que FlashDevelop utilise pour l’autoCompletion et que le mxmlc utilise pour compiler en mode strict.
• Aller dans les propriétés du projet, cibler le player 10.1, ensuite, aller dans l’onglet compiler options, et dans Additional Compiler Options, ajouter -swf-version=13.

Voilà, nous sommes prêt à programmer.

FD4 proposera peut être une auto reconnaissance des versions player par analyse du SDK ciblé, cela demandera moins de manipulation quand on devra tester des versions bêta et on ne devra plus attendre de mise à jour de FD pour cibler les nouveaux players. Là aussi, j’ai déposé une demande de feature, libre à vous de la soutenir également..
http://www.flashdevelop.org/community/viewtopic.php?f=5&t=8050

Au banc d’essai – code AS3

Voici le code minimum de base afin d’exploiter cette nouvelle fonctionnalité.
Il est a noté que la méthode close() et l’événement complete de la classe Sound ne fonctionne pas dans cette implémentation, ils ne s’appliquent apparemment qu’en cas de loading distant. Il ne faudra donc pas chercher a les utiliser pour un chargement local via FileReference.

Pour les ID3, AS3 propose les propriétés de base (songName, etc..) Mais je conseille d’utiliser directement les vrais identifiants définis par l’ID3 Org (les classiques sont les frames 4.2 serie): http://www.id3.org/d3v2.3.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.net.FileFilter;
	import flash.net.FileReference;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
 
	/**
	 * ...
	 * @author Alama
	 */
	public class Main extends Sprite
	{
		private var fileRef:FileReference;
		private var sound:Sound;
		private var channel:SoundChannel;
		private var txt:TextField;
 
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
 
			// button test
			var btn:Sprite = new Sprite;
			btn.graphics.beginFill(0x000000);
			btn.graphics.drawRect(50, 50, 150, 40);
			btn.graphics.endFill();
			addChild(btn);
			btn.buttonMode = true;
			btn.addEventListener(MouseEvent.CLICK, btnClickHandler);
 
			// output text
			txt = new TextField;
			txt.autoSize = TextFieldAutoSize.LEFT;
			addChild(txt);
		}
 
		private function btnClickHandler(e:MouseEvent):void
		{
			fileRef = new FileReference;
			fileRef.addEventListener(Event.SELECT, fileRefSelectHandler, false, 0, true);
			fileRef.browse(new Array(new FileFilter("Music: *.mp3", "*.mp3", "*.MP3")));
		}
 
		private function fileRefSelectHandler(e:Event):void
		{
			fileRef.addEventListener(Event.COMPLETE, fileRefCompleteHandler, false, 0, true);
			fileRef.load();
		}
 
		private function fileRefCompleteHandler(e:Event):void
		{
			fileRef = null;
			if (channel != null)
			{
				channel.stop();
				channel = null;
				sound = null;
			}
			sound = new Sound();
			sound.addEventListener(Event.ID3, soundID3Handler, false, 0, true);
			sound.loadMP3FromByteArray(e.target.data, e.target.data.length);
			channel = new SoundChannel;
			channel = sound.play();
		}
 
		private function soundID3Handler(e:Event):void
		{
			// sometimes, on fisrt load, this handler is invoked twice!!??
			// it's a light bug, but not serious..
			trace(e.target.id3.TIT2);
			txt.text = sound.id3.TIT2;
		}
 
	}
 
}

Voilà, espérons que cette feature restera définitivement au sein de l’APPI AS3.. car elle est bien plus simple et rapide que des classes de parsing.

Soutenez une autre request feature pour la gestion du son

A propos du son dans Flash, depuis le player 10, nous pouvons fabriquer nos propres sons de façon binaire et l’envoyer à la lecture grâce à l’événement SampleData. C’est super, mais celui ci souffre d’un problème majeur! La taille minimum du buffer (le byteArray des samples) est de 2048 samples !! cela introduit inévitablement une latence audible qui peut aller jusqu’à +/- 300 ms avec les pertes du modèle événementiel etc.. J’ai donc également introduit une demande de révision du principe en proposant d’autres solutions.. Cette tâche incombe à la partie Core Player, donc, impossible à régler via l’AVMplus, donc, à priori, seul Adobe peut changer cela.

Je vous invite également à soutenir cette demande en votant et éventuellement en participant à la discussion ici:
https://bugs.adobe.com/jira/browse/FP-5655

Enjoy

Salut à tous. Pour mon premier petit tuto sur Flashxpress, je vous propose de réaliser un lecteur de Flux RSS, en AIR, sous Flash.

La but de ce tuto est donc de vous apprendre à récupérer un flux RSS en AS3 et instancier à la volée un MovieClip par article qui contiendra le titre de l’article ainsi qu’un bouton, qui, lorsqu’il sera cliqué, ouvrira le navigateur et affichera la page de l’article choisi.

Création du projet

Ouvrez Flash et sur l’écran d’accueil choisissez un fichier de type « Adobe AIR 2 ».

Enregistrer le fichier. Personnellement, je l’appelle « LecteurRSS ».

A partir de là, si on compile, on a bien une application AIR.

Préparation des éléments graphiques

Niveau design nous allons rester simples car ce n’est pas le but du tuto.

Pour commencer, je ne souhaite pas que mon application s’ouvre dans une fenêtre de type Windows. Je souhaite ici designer moi-même le type de fenêtre et ses contrôles de gestion (le bouton réduire et le bouton fermer l’application).

Afin de ne plus avoir cette fenêtre, rendons nous dans le panneau Propriétés, dans Flash, et cliquons sur le bouton « Modifier » correspondant aux paramètres d’Adobe AIR 2.

Dans la fenêtre qui vient de s’ouvrir, sélectionnons dans le menu déroulant « Style de fenêtre », « Chrome personnalisé (transparent) ».

Si l’on recompile l’application, nous ne voyons plus rien apparaitre… mais l’application est belle et bien lancée, en témoigne le petit icône d’Adobe AIR dans la barre des tâches.

Si rien n’est visible c’est simplement par ce que notre application est vide.

Attelons-nous à présent au design d’une des lignes du lecteur.

Commençons par tracer un rectangle de 300 pixels de largeur par 50 de hauteur.

Remplissons-le d’un dégradé allant d’un gris foncé (#666666) vers le noir (#000000).

Grace à l’outil de transformation de dégradé, orientons ce remplissage verticalement.

Voici le résultat :

Pour le bouton « Lire », qui lorsqu’il sera cliqué ouvrira le navigateur sur la page de l’article, dessinons simplement un rectangle de 50 pixels par 50 pixels et alignons-le à droite du premier rectangle dessiné. Inversons la direction du dégradé. Voici le résultat :

Nous devons à présent ajouter deux champs texte. L’un contiendra le titre de l’article et le second simplement le texte « Lire».

Grace à l’outil Texte, dessinons donc les deux champs.

Le champ pour le titre doit être de type « Classique » / « Dynamique ». Pendant que nous y sommes, donnons-lui comme nom d’occurrence « titreArticle ».

Le champ texte contenant le mot « Lire » quant à lui n’a pas besoin d’être dynamique. Je choisis donc comme type de champ « Classique » et « Statique ».

Voici comment j’ai placé mes textes :

Nous allons maintenant sélectionner le rectangle et le texte composant le bouton « Lire » et appuyer sur F8 afin de convertir le tout en symbole.

Nommons le symbole « boutonLire », sélectionnons le type « Bouton » dans le menu déroulant du même nom, laissons l’alignement par défaut et validons en pressant le bouton « OK ». Entrons dans le symbole et insérons une image clé pour l’etat « Dessus » ainsi que pour l’état « Abaissé ». Sur l’état « Dessus », sélectionnons le rectangle de fond et intervertissons la position des deux couleurs (on revient donc au même dégradé que celui que l’on a sur le rectangle sous le titre).

Une fois le symbole crée, sélectionnons l’occurrence de celui-ci présente sur la scène et donnons-lui pour nom d’occurrence « btnLire ».

La dernière étape consiste tout simplement à sélectionner l’occurrence du bouton, le rectangle de fond du titre de l’article ainsi que le champ de texte « titreArticle » et à convertir le tout en symbole de type Clip.

Nommez le « Ligne ». Lors de la création du symbole, choisissons donc comme type dans le menu déroulant « Clip ». Nous devons en plus de cela, cocher la case « Exporter pour ActionScript » ainsi que « Exporter dans l’image 1 » (cette dernière se coche normalement de façon automatique).

Cela va nous permettre d’instancier ce clip directement par code. Veillez en revanche à bien mettre une majuscule au nom du symbole car ici nous créons une classe et que, par convention, les noms de classe commencent par une majuscule.

Le champ « Classe de base » doit en principe directement pointer vers la classe MovieClip, du fait que nous ayons choisi comme type de symbole « Clip ».

Validons ensuite la création de ce symbole en cliquant sur le bouton « OK ».

Si l’on regarde à présent dans notre bibliothèque, nous avons donc deux symboles, un bouton (boutonLire) et un MovieClip (Ligne).

La colonne « Liaison » du bouton lire doit en principe être remplie avec comme mention « Ligne ».

Notre premier élément graphique est prêt. Nous pouvons à présent supprimer l’occurrence du MovieClip présent sur la scène.

Bien, je vais maintenant importer le logo que je souhaite placer dans mon application. Histoire de faire bien original, je vais utiliser le logo Flashxpress (super site, vous connaissez ? ^_^).

Je me contenterais ici de faire un copier / coller depuis Illustrator.

Une fois importé et redimensionné (il fait maintenant 100 pixels de largeur pour 30 de hauteur), je le convertis en symbole de type Clip, sans cocher cette fois ci l’option « Exporter pour ActionScript » et le nomme « logoFXP ». Je place enfin l’occurrence du clip « logoFXP » sur la scène à une position en X et en Y de 0. Notre logo est prêt.

Il nous reste deux petits éléments à préparer. En effet, ayant choisi de ne pas afficher mon application dans une fenêtre classique, je dois quand même donner la possibilité aux utilisateurs de la réduire et de la fermer. Nous allons donc dessiner une petite croix ainsi qu’un petit tiret.

Avec l’outil rectangle, je dessine un rectangle et lui donne des dimensions de 12 par 5 avec des coins arrondis. Voici ce que j’obtiens :

Pour créer la croix nous allons nous servir de ce trait d’union. Sélectionnons-le et dupliquons-le (CTRL + C / CTRL + V).

A l’aide de l’Outil de Transformation, faisons pivoter de 45° (donc en maintenant la touche SHIFT pour nous simplifier la tâche) le tiret. Dupliquons ce tiret et faisons le pivoter de 90°. Notre croix est prête.

Nous devons à présent convertir nos deux icônes en symbole. Une fois de plus nous choisirons comme type « Bouton » et nommerons nos symboles respectivement « traitUnion » pour l’icône de réduction de l’application et « croix » pour l’icône de fermeture.

Profitons-en pour attribuer le nom d’occurrence à nos icônes. Utiliser pour chaque icône le nom du symbole.

Pour finaliser nos boutons, ouvrons chacun des deux symboles, et insérons une image clé sur les états « Dessus » et « Abaissé ». Sur l’état « Dessus » changeons la couleur de l’objet. Je vais pour ma part choisir du rouge.

Il ne nous reste plus qu’à positionner les boutons sur la scène. Pour cela je glisse depuis la bibliothèque une occurrence du MovieClip « Ligne ». Et le positionne juste sous le logo. Je place en suite mes deux icones.

Et voilà, tous nos éléments graphiques sont prêts. Nous allons compiler l’application afin de tester l’interaction sur les boutons.

Nous pouvons supprimer l’occurrence du MovieClip, sauvegarder, aller prendre un café, fumer une cigarette et nous passerons ensuite à la partie code…

Le code

Dans cette seconde partie nous allons passer au code. Créons donc un nouveau calque et nommons-le AS.

Nous devons dans un premier temps récupérer notre flux RSS. Pour cela, nous utiliserons un URLLoader. L’URLRequest de l’URLLoader est simplement l’url du flux. Pour la récupérer, cliquons-droit sur le lien « S’abonner au flux RSS » présent en bas du site FlashXPress et sélectionnons « Copier l’adresse du lien ».

Voici l’url que j’obtiens : http://www.flashxpress.net/feed/

Le code de mon URLLoader est donc :

1

var chargeur:URLLoader = new URLLoader(new URLRequest("http://www.flashxpress.net/feed/"));

Afin de récupérer le contenu de l’URLLoader une fois qu’il aura fini de le charger, nous devons ajouter un écouteur sur ce dernier pour l’évènement « Event.COMPLETE »:

1

chargeur.addEventListener(Event.COMPLETE, init);

Ici j’ai choisi de nommer la fonction “init”.

Cette fonction va avoir plusieurs rôles :

• lire le RSS

• instancier à chaque fois qu’un article est repéré le MovieClip « Ligne »

• remplir le champ « titreArticle » avec le titre de l’article

• ajouter sur le MovieClip une propriété dynamique urlArticle et la remplir avec l’url de l’article

• ajouter un écouteur sur ce bouton pour que lorsqu’il est cliqué, l’article s’ouvre dans le navigateur

• positionner la ligne

Pour faire cela nous utiliserons une boucle.

Créons donc notre fonction :

1
2
3

function init(e:Event):void{
 
}

Nous avons besoin d’un objet de type XML pour stoquer les données présente dans l’URLLoader :

1
2
3
4
5

function init(e:Event):void{
 
           var monFlux:XML = new XML(e.target.data);
 
}

Comme source de données pour l’objet XML nous choisissons ici e.target.data. Cela nous renvoie les données présentes dans l’URLLoader « chargeur » du fait que l’écouteur est placé dessus.

Afin de nous assurer que les données arrivent bien a destination, réalisons un petit trace de notre objet XML « monFlux ».

1
2
3
4
5
6
7

function init(e:Event):void{
 
var monFlux:XML = new XML(e.target.data);
 
trace(monFlux) ;
 
}

Exécuter le programme. Rien ne se passe ? Mais si, guettez votre panneau de sortie et attendez quelques secondes…magie, les données envahissent votre petit panneau !

Bien. Si on observe ces données on voit que le titre des articles est contenu dans le nœud <title> et que l’url de notre article ce trouve dans le nœud <link>. Ces deux nœuds sont tous deux contenus dans le nœud <item>. Le nœud <item> quant à lui se trouve dans le nœud <channel>, lui-même étant dans le nœud <xml>.

Voici une version quelques peu raccourcie du contenu de l’objet XML :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" …>
 
<channel>
 
…
 
<item>
 
<title>Graphic Live Session à Meudon-la-Forêt</title>
 
<link>http://feedproxy.google.com/~r/flashxpress/~3/O0doqsfPls8/</link>
 
<comments>http://www.flashxpress.net/news/graphic-live-session-a-meudon-la-foret/#comments</comments>
 
<pubDate>Tue, 25 Jan 2011 14:35:51 +0000</pubDate>
 
<dc:creator>Olivier</dc:creator>
 
<category><![CDATA[News]]></category>
 
<guid isPermaLink="false">http://www.flashxpress.net/?p=5543</guid>
 
…
 
</item>
 
</channel>
 
</rss>

Pour récupérer notre titre nous devrons donc faire : channel.item.title

Et pour le lien : channel.item.link

Créons donc notre boucle. Celle-ci va devoir parcourir chaque nœud item et effectuer pour chacun d’eux toutes les tâches décrite ci-dessus.

1
2
3
4
5
6
7
8
9

function init(e:Event):void{
 
var monFlux:XML = new XML(e.target.data);
 
           for(var i:int; i<monFlux.channel.item.length(); i++){
 
           }
 
}

Commençons par essayer de récupérer dans le panneau de sortie tous les titres des articles :

1
2
3
4
5

for(var i:int; i<monFlux.channel.item.length(); i++){
 
           trace(monFlux.channel.item[i].title);
 
}

Cela fonctionne. En effet à chaque itération de la boucle « i » s’incrémentant, et récupérant le titre présent dans le nœud item[i], on arrive a tracer le nœud titre de chacun des nœuds item. Chaque nœud item correspondant a un article, on récupère bien le titre de tous les articles.

Bien. Supprimons ce trace, et maintenant nous voulons qu’à chaque itération de la boucle une occurrence de notre MovieClip soit instanciée et qu’elle soit remplie.

Dans notre boucle on crée donc une instance :

1

var ligneArticle:Ligne = new Ligne();

On va remplir le champ titre juste après avec les informations du RSS :

1

ligneArticle.titreArticle.text = monFlux.channel.item[i].title;

Rappelez-vous, titreArticle c’est le nom d’occurrence du champ texte dans le MovieClip « Ligne ».

On crée une propriété urlArticle sur le MovieClip de la ligne en cour de création :

1

ligneArticle.urlArticle = monFlux.channel.item[i].link;

On ajoute un écouteur sur le click du bouton de la ligne pour qu’au clic il ouvre la navigateur et affiche la page de l’article :

1

ligneArticle.btnLire.addEventListener(MouseEvent.CLICK, ouvrirArticle);

Nous créons la fonction ouvrir article sous la fonction init :

1
2
3
4
5

function ouvrirArticle(e:MouseEvent):void{
 
           navigateToURL(new URLRequest(e.target.parent.urlArticle));
 
}

Cette fonction contient un simple navigateToURL. L’URLRequest à pour valeur e.target(donc le bouton).parent(le MovieClip en somme).urlArticle(la propriété dynamique crée dans la boucle) .

Bien. Nous pouvons à présent nous occuper de placer notre occurrence sur la scène.

Nous lui donnons une position en x de 0, et en y de la hauteur du MovieClip * i. Comme à la première itération de la boucle i à pour valeur 0, la première ligne ce placera alors à 0*50. A la seconde itération, i aura une valeur de 1 donc le Movie clip sera placé à 50 pixels en y et ainsi de suite. A cela nous devons ajouter un décalage de la hauteur du logo car celui-ci se trouve en haut de la liste plus une petite marge. J’ajouterais donc 35. J’aimerais aussi laisser 1 pixel entre chaque MovieClip. J’ajout donc 1 à la hauteur du Movie clip.

En synthèse :

MovieClip.y = (i * (hauteur du MovieClip + 1(pour espacer de 1))) + 35 (pour laisser la place au logo).

Voilà tout ce charabia traduit en AS3 :p :

1
2
3

ligneArticle.x = 0;
 
ligneArticle.y = (i*51) + 35;

On l’ajoute à la liste d’affichage :

1

addChild(ligneArticle);

Voici donc le code final de notre boucle :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

for(var i:int; i<monFlux.channel.item.length(); i++){
 
           var ligneArticle:Ligne = new Ligne();
 
           ligneArticle.titreArticle.text = monFlux.channel.item[i].title;
 
           ligneArticle.urlArticle = monFlux.channel.item[i].link;
 
           ligneArticle.btnLire.addEventListener(MouseEvent.CLICK, ouvrirArticle);
 
           ligneArticle.x = 0;
 
           ligneArticle.y = (i*51) + 35;
 
           addChild(ligneArticle);
 
}

Compilons. Ça fonctionne ! Merveilleux. Si on clique sur l’un des boutons lire, le navigateur s’ouvre a la page de l’article relatif au bouton cliqué !

Alors peut être, selon la hauteur de vos éléments (pour ne pas dire « si vous avez utilisez les mêmes dimensions que moi » ^_^ ‘), une partie de votre application sera tronquée (vers le bas). Pour remédier à cela, changez les dimensions de la scène de Flash. Pour ma par j’ai fini par mettre 500px de large par 1000px de haut.

Bien. Nous sommes presque au bout. Il ne nous reste plus qu’à faire une fonction pour permettre le drag de l’application, une pour la réduire dans la barre des tâches ou le dock selon le système d’exploitation et une pour la fermer.

Commençons par nous occuper du drag.

Ajoutons un écouteur sur le stage et créons la fonction dragAPP sous la fonction ouvrirArticle:

1
2
3
4
5

stage.addEventListener(MouseEvent.MOUSE_DOWN, dragAPP);
 
function dragAPP(e:MouseEvent):void{
 
}

Dans la fonction dragAPP nous allons utilizer la methode startMove() de la class nativeWindows afin de drager notre application.

1
2
3
4
5

function dragAPP(e:MouseEvent):void{
 
           stage.nativeWindow.startMove();
 
}

Si l’on compile et que l’on drag l’application en la prenant par le logo ou tout autre point, on arrive à la déplacer. Formidable.

Maintenant la fonction pour la réduire dans le dock ou dans la barre des tâches. On doit ajouter un écouteur sur l’icône réduire et créer la fonction minimizeAPP:

1
2
3
4
5
6
7

traitUnion.addEventListener(MouseEvent.CLICK, minimizeAPP);
 
function minimizeAPP(e:MouseEvent):void{
 
           stage.nativeWindow.minimize();
 
}

Nous faisons de nouveau appel à la classe nativeWindows, mais cette fois ci à sa méthode minimize() afin d’effectuer cette action.

Ajoutons un écouteur sur le bouton de fermeture de l’application et créons la fonction closeAPP :

1
2
3
4
5
6
7

croix.addEventListener(MouseEvent.CLICK, closeAPP);
 
function closeAPP(e:MouseEvent):void{
 
           NativeApplication.nativeApplication.exit();
 
}

Compilons et testons.

L’application est fonctionnelle. Nous pouvons donc préparer le fichier .air que vous distribuerez.

Dans le panneau des propriétés, cliquons sur le bouton « Modifier » des Paramètres d’Adobe AIR 2.

Dans l’onglet « Général » saisissons nos informations.

Notez que pour ID APP la convention veux que l’on retourne son nom de domaine et, qu’après un slash, on mette le nom de l’application.

A présent nous allons configurer l’icône de notre application. Pour cela, rendez-vous dans l’onglet « Icônes ». Vous devez avoir au préalable créé 4 tailles d’icône. Une en 16*16px, une autre en 32*32px, une troisième en 48*48 et une dernière en 128*128px. Indiquons donc en cliquant sur le petit bouton parcourir la path vers l’icône correspondante à la taille sélectionnée.

Pour terminer, rendons nous dans l’onglet « Signature ».

Dans celui-ci nous allons devoir cibler un certificat au format p12 et saisir son mot de passe.

Dans le cas ou vous n’avez pas de certificat, vous pouvez en générer un en cliquant sur le bouton « Créer » et en remplissant le champ de la fenêtre qui viens de s’ouvrir.

Cliquons maintenant sur le bouton « Publier ».

Notre fichier AIR est généré et prêt à être distribué.

Le but de ce didacticiel est atteint, je pense donc que nous arrivons au terme de ce tuto.

En espérant qu’il vous aura servi.

Amicalement,

Olivier.

Télécharger les sources ! Flash CS5 est nécessaire pour ouvrir le .fla !

Comment envoyer un mail depuis un formulaire grâce à l’objet loadVars, la méthode sendAndLoad et un script php.

Note : suite à des abus, le script d’envoi de mail est désactivé dans cette page. La validation ne fonctionne donc pas, mais vous trouverez le script qui fonctionne dans l’archive .zip. A vous de placer ce script sur votre serveur pour que cela fonctionne.

Télécharger email_loadvars.zip

Pour une méthode plus simple, reportez-vous à ce tutoriel :
Envoyer un email avec getURL()

1. ActionScript 1 et 2 – niveau débutant

Ce qui va nous permettre de charger dynamiquement un son dans un SWF est la méthode loadSound(), qui est une méthode de l’objet Son.
Avant de charger un son au format MP3, il faut d’abord créer une occurence (ou instance) de l’objet Son dans laquelle on chargera le fichier MP3, qui nous permettra de cibler celui-ci et donc de manipuler certaines de ses propriétés (volume, balance…).

^?View Code ACTIONSCRIPT

1 2	// Création d'un nouveau son appelé "monSon": monSon = new Sound();

Une fois cet objet monSon créé, il nous faut encore lui assigner un son. Lorsque l’on souhaite jouer des sons importés dans flash, on utilise la méthode attachSound() qui permet de lui associer un son se trouvant dans la bibliothèque, auquel on avait pris soin au préalable de donner un identifiant de liaison. Pas vraiment dynamique tout ça
Avec la méthode loadSound(), il n’est plus nécessaire d’importer le son dans le fichier FLA, de lui attribuer un identifiant de liaison, etc… Vous placez le fichier MP3 sur le serveur aux côtés du SWF, et ce dernier se chargera du reste… à condition toutefois que vous lui ayez demandé de le charger .

^?View Code ACTIONSCRIPT

1 2 3 4

// Création d'un nouveau son appelé "monSon" monSon = new Sound(); // Chargement d'un fichier "musique.mp3" en flux continu dans monSon monSon.loadSound("musique.mp3",true);

Une remarque sur le deuxième paramètre de cette méthode loadSound(). Il s’agit d’un booléen qui permet de préciser si on veut que le son se joue en flux continu (téléchargement progressif ou s’il s’agit d’un son d’évènement, auquel cas le paramètre sera mis à false et le son entièrement chargé avant de jouer.

2. ActionScript 3 – niveau avancé

Le chargement de son peut être réalisé de manière dynamique. Les fichiers audio résident à l’extérieur de l’animation et sont chargées dynamiquement. Deux techniques peuvent être employées : La première consiste à créer un objet URLRequest valide pointant vers le fichier MP3 et passer ce dernier au constructeur de la classe Sound :

^?View Code ACTIONSCRIPT3

1 2 3 4 5 6 7

// création d'un objet Sound, la méthode load est automatiquement appelée var monSon:Sound = new Sound ( new URLRequest ("son.mp3") ); /* Si la classe Sound détecte un objet URLRequest valide, le son est chargé automatiquement au sein du lecteur à l’aide de la méthode load. Le cas échéant, l’appel de la méthode load est obligatoire pour démarrer le chargement du son. La méthode load possède la signature suivante : */ public function load(stream:URLRequest, context:SoundLoaderContext = null):void Voici le détail de

chacun des paramètres :
• stream : un objet URLRequest pointant vers le fichier MP3 à charger.
• context : un objet SoundLoaderContext spécifiant la durée de préchargement en mémoire tampon ainsi que des consignes liées au chargement de fichiers de régulation.
Attention, contrairement à l’intégration de son au sein de la bibliothèque compatible avec la plupart des formats audio, la méthode load de la classe Sound permet uniquement le chargement de fichiers MP3. Si nous tentons de charger un autre format de fichiers audio, aucune erreur spécifique n’est levée, le son n’est pas joué. La seconde technique consiste à créer l’objet Sound puis appeler manuellement la méthode load. Dans le code suivant nous ne passons pas d’objet URLRequest au constructeur de la classe Sound, le son est chargé à l’aide de la méthode load :

^?View Code ACTIONSCRIPT3

1 2 3 4 5

// création d'un objet Sound var monSon:Sound = new Sound();   // chargement dynamique du son son.load ( new URLRequest ("son.mp3") );

Afin de gérer le chargement de son dynamique, l’objet Sound diffuse différents événements dont voici le détail :
• Event.COMPLETE : diffusé lorsque le chargement du son est terminé.
• Event.ID3: diffusé lorsque les informations ID3 sont disponibles.
• IOErrorEvent.IO_ERROR : diffusé lorsque le chargement du son échoue.
• Event.OPEN : diffusé lorsque le lecteur commence à charger le son.
• ProgressEvent.PROGRESS : diffusé lorsque le chargement est en cours. Celui-ci renseigne sur le nombre d’octets chargés et totaux.

^?View Code ACTIONSCRIPT3

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

// instanciation d'un objet Sound var son:Sound = new Sound();   // chargement dynamique du son son.load ( new URLRequest ("son.mp3") ); // écoute des différents événements   son.addEventListener( Event.OPEN, chargementDemarre ); son.addEventListener( Event.ID3, informationsID3 ); son.addEventListener( ProgressEvent.PROGRESS, chargementEnCours ); son.addEventListener( Event.COMPLETE, chargementTermine ); son.addEventListener( IOErrorEvent.IO_ERROR, erreurChargement );   function chargementDemarre ( pEvt:Event ):void { trace("chargement démarré");   }   function informationsID3 ( pEvt:Event ):void { trace("informations ID3"); }   function chargementEnCours ( pEvt:ProgressEvent ):void { trace("chargement en cours : " + pEvt.bytesLoaded + " / " + pEvt.bytesTotal ); }   function chargementTermine ( pEvt:Event ):void { trace("chargement terminé"); }   function erreurChargement ( pEvt:IOErrorEvent ):void { trace("erreur de chargement"); }

Quelle que soit la technique employée pour charger dynamiquement un son, sa lecture doit être initiée à l’aide de la méthode play(). Si celle-ci est appelée en même temps que la méthode load(), la lecture du son est entamée lorsque suffisamment de données audio ont été téléchargées. Si nous tentons de démarrer la lecture du son avant l’avoir chargé, une erreur de type ArgumentError est levée : ArgumentError: Error #2068: Son non valide

Attention, dans un contexte de chargement dynamique, la méthode load() ne renvoie pas d’objet SoundChannel. Seule la méthode play() le permet :

^?View Code ACTIONSCRIPT3

1 2 3 4

// instanciation d'un objet Sound, la méthode load est automatiquement appelée var son:Sound = new Sound ( new URLRequest ("son.mp3") ); // lecture du son, la méthode play retourne un objet SoundChannel var canalSon:SoundChannel = son.play();

Remarque ::
Il est important de noter que le chargement dynamique de sons est régit par le modèle de sécurité du lecteur. Par défaut, le chargement et la lecture d’un fichier son provenant d’un domaine différent est autorisée, mais l’accès aux données du fichier son est régulée. Dans un contexte inter-domaine, l’utilisation de la propriété id3 de l’objet Sound, de la méthode computeSpectrum, de la classe SoundMixer ou de l’objet SoundTransform lève une erreur de type SecurityError. Il convient alors d’utiliser un fichier de régulation sur le domaine distant afin d’autoriser la manipulation du son. Rappelez-vous que le lecteur Flash ne charge pas automatiquement de fichier de régulation afin de limiter la bande passante utilisée.

Amfphp
ComposantComposants Remoting

Qu’est ce que Flash remoting ?

Flash Remoting est une passerelle permettant d’échanger des données avec un serveur de manière ultra simplifiée tout en conservant les types de données.

Flash Remoting utilise un format binaire nommé ActionScript Message Format (AMF) permettant un gain de performances remarquable lors des échanges entre le serveur et Flash, le format AMF étant un format natif compressé du lecteur. Le développeur Flash appelle des méthodes distantes définies sur un service distant qui est en fait une classe PHP définie sur le serveur.

La puissance de Flash Remoting consiste dans la conversion automatique des données entre le serveur et le player Flash, autrement dit, plus aucune sérialisation des données, Remoting s’occupe de tout, vous passez un tableau à votre méthode distante, Remoting va convertir le tableau ActionScript en un tableau compatible PHP, une Date ne sera pas convertie automatiquement mais interprétée et passée en timestamp, mais il sera tout de même possible de renvoyer de PHP un objet Date à Flash en spécifiant le type retourné dans les attributs de la méthode dans le service distant.

Pourquoi pas XML ?

Le format XML permet de structurer vos données mais nécessite un travail au niveau du schéma de représentation des données. Les données n’étant pas compatible entre une application serveur et le player Flash, vous ne pourrez pas renvoyer un tableau PHP à Flash de manière transparente et inversement, il vous faudra à chaque fois sérialiser puis desérialiser le tableau, d’où l’intérêt du XML.

Flash Remoting permet de gérer la conversion des différents types d’objets automatiquement entre l’application serveur et le player Flash, tout cela au format AMF, ce qui permet une intérpretation des données beaucoup plus performante qu’un parse de chaîne de caractère (XML) qui necessiterait une sérialisation de la chaine vers un objet XML, un gain notable aussi bien au niveau performance que niveau bande passante utilisée. De plus Flash Remoting a la capacité de retourner à Flash des ressources mySQL sans aucun traitement à effectuer

Pour utiliser Remoting et PHP nous utiliserons Amfphp, car les classes Remoting que vous ajoutez en installant les composants permettant la manipulation des données, les classes nécessaires à la connexion mais n’intègre pas les classes gérant la conversion des types entre Flash et le serveur pour cela vous pouvez utilisez Amfphp pour PHP, Fluorine pour .NET, OpenAMF pour Java, ou encore Flap pour Perl et Python. Voici un tableau détaillant les types correspondants entre ActionScript et PHP par exemple :

Voici un schéma expliquant le fonctionnement de Flash Remoting :

Amfphp installé sur votre serveur gère la conversion des données entre Flash et la classe PHP, AMPHP est gratuit et open-source, relativement léger il s’installe en quelques minutes sur votre serveur mutualisé ou dédié. Il est aussi possible d’appeler des WebServices avec AMFPHP, dans notre tutoriel nous utiliserons un service simple que nous créerons.

Le but de ce tutoriel est d’aborder Flash Remoting au terme de cette vidéo sous serez capable de vous connectez à une service distant et d’appeler une méthode sur ce service, nous n’aborderons pas les thèmes comme le débogage, ou encore l’optimisation de performances ou encore le design objet, mais simplement comment débuter avec Flash Remoting. Trois tutoriaux seront très bientôt disponible traitant du débogage avec Remoting, puis du Service Browser permettant un développement des services distants extrêmement simplifié, et enfin une explication avancée des différents attributs disponibles pour la propriété methodTable.

Attention : Pour bénéficier de l’encodage automatique des caractères spéciaux Français, veillez à bien décommenter la ligne suivante dans votre passerelle (gateway.php) comme ci dessous :

Erratum : Dans la partie 3, une petite etourderie m’a fait importer la classe PendingCall du paquetage mx.services.PendingCall lors de l’appel de méthode distante. Cette classe correspond en fait aux PendingCall utilisés lors d’appels de méthodes de WebServices, la classe correcte est mx.remoting.PendingCall

Dans l’absolu ce n’est pas grave cela fonctionne aussi, mais mieux vaut utiliser mx.remoting.PendingCall qui correspond au vrai type de données ( vérifiez avec instanceof ).

Depuis Flash 8, une nouvelle API d’upload / download de fichiers est disponible, les classes de cet API se situent dans le répertoire flash.net.* Nous allons ensemble découvrir les classes et méthodes que Flash 8 propose pour gérer l’upload de fichiers sur un serveur distant. Au passage, nous utiliserons la notion d’écouteur.

Ce tutorial est la première partie d’un tout consacré à FileReference et ne traitera que de l’upload, nous verrons dans quelques semaines le donwload et les tips & tricks de FileReference ainsi que la classe FileReferenceList.

Niveau requis : Débutant Prog. AS 2.0 / Notions de serveurs Web
Auteur : Eric Ambrosi
Thèmes abordés : Installation du serveur Apache Wamp, configuration de wamp, utilisation de la classe FileReference
Notions abordées : Les écouteurs, les méthodes asynchrones, serveurs Web
Classes abordées : FileReference, Alert, PendingCall
Logiciels : Flash 8, un serveur apache type (wamp, easyphp, mamp (mac), IIS, etc)
Fichiers à télécharger :

Fichiers d’installation Wamp Server – site de WampServer

Qu’est-ce que WampServer ?

WampServer est un soft qui va nous permettre d’installer, sur un ordinateur windows, les services (ou daemons sous linux) apache et mysql.  Ces services vont être capables d’interpréter correctement les scripts de types php par exemple et si on en avait le besoin de nous permerttre de nous connecter à une base de donnée de type my-sql ou autre.

Pour réaliser un upload avec flash, il nous faudra utiliser un script php très simple qui sera interprété grâce à notre serveur apache. Wamp a de nombreux autres avantages et je vous invite à faire un tour sur leur site si vous souhaitez plus de détail sur cette technologie. D’autres très bonnes alternatives comme easyphp par exemple sont possibles pour réaliser cet exercice.

Installation et Configuration de WampServer

Tout d’abord télécharger et installer le server Wamp. Pour cela, il faut simplement suivre la procédure indiquer et valider tout le temps sans trop se poser de questions. Ce qui est vraiment intéressant par la suite est que wamp ne nécessite que très peu de configuration et permet le fonctionnement d’autres technologies comme remoting.

I – Création d’un nouveau répertoire

La première chose à faire est de vous créer un nouveau répertoire sur c: que nous allons appeler upFlash. C’est ici que nous allons stocker nos fla, swf, et notre fameux script php. Vous vous retouvez donc avec un répertoire c:\upFlash\.

Le problème que nous avons à ce stade est que si nous plaçons ici un fichier php, il ne pourra pas être interprété par un quelquonque navigateur. Pour cela il nous faut créer un alias dans wamp.

II – Mise en place d’un nouvel Alias

Définition d’un alias :

Un alias est en fait la relation qu’il y a entre l’accès au répertoire c:\upFlash\ et l’accès à ce même répertoire, mais cette fois, au sein d’un navigateur Internet.

Création de l’alias :

Pour créer un alias faites un clique gauche sur l’icone wamp dans la barre windows. Allez sur alias directories => add an alias (image ci-dessous)

Configuration de l’alias :

Une fenêtre DOS s’ouvre

a – Le premier paramètre est l’adresse su répertoire dans votre navigateur. Il faut simplement entrer le nom du répertoire que vous souhaitez configurer sous localhost. Je m’explique, à chaque fois que vous souhaiterez rendre accessible un dossier celui-ci sera accessible à l’adresse : http://localhost/nom/

Ici nom sera le premier paramètre que vous rentrez pour la création de l’alias. Entrons comme nom exoUpFlash.

Le répertoire c:\upFlash\ sera donc accessible à l’adresse: http://localhost/exoUpFlash/

b – Le second paramètre est l’adresse du répertoire sur le disque dur : il faut donc passer en paramêtre : c:\upFlash\ et faire Entrer. A ce stade wamp doit redémarrer si ce n’est pas fait, redémarrez le manuellement en cliquant gauche puis Stop All Services puis Start All Services.

Création d’un nouveau FLA

Créer un nouvel Fla (fichier Flash) et l’enregistrer sur c:\upFlash\exo.fla. Ensuite ouvrez votre navigateur préféré puis tapez dans la barre d’adresse  : http://localhost/exoUpFlash/. Vous y verrez votre exo.fla nouvellement créé.

III – Configuration du php.ini

Remarque : Cette étape est facultative dans la plus part des cas et l’upload de fichiers supéreurs à 8M peut fonctionner avec du wamp mais cette étape devient importante pour des serveurs de production.

• Nous allons maintenant configurer le fichier php.ini afin de travailler dans des conditions réelles, pour cela 2 variables du serveur sont à modifier.

post_max_size

upload_max_filesize

Je sais que peu de monde modifie ces variables, pour ma part j’ai travaillé sur la mise en place d’une appli de gestion de doc (hébergée sur un serveur Linux Debian) et sans la modification de ces variables l’upload des fichiers ne dépassait pas 8M.  8M étant la valeur par défaut spécifiée dans le php.ini.

Cliquer sur l’icone wampserver à nouveau et sélectionner configFile => php.ini, trouvez les lignes suivantes via CTRL+F

(image ci-dessous)

Modifier les lignes de cette façon :

upload_max_filesize = 300M

post_max_size = 300M

• Redémarrez WampServer en stoppant puis en relançant les services.

Vous avez fini de configurer la partie serveur . Mais à quoi peut bien servir de mettre 300M puisque FileReference est officiellement, selon Adobe, restreint à 100Mo . Je vous laisse faire vos propres test .

Mise en place du script php

Tout d’abord nous allons créer un sous répertoire c:\upFlash\uploads\. Il nous servira à stocker nos fichiers uploadés. Voici le script php que nous allons utiliser, c’est un script très simple que nous allons essayer de comprendre ensemble :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// $_FILES s'apparente à $_POST; en fait la classe de flash 8 FileReference
// utilise la méthode POST afin de transférer des fichiers à php,
// on récupère notre fichier via la propriété Filedata
// du Tableau associatif $_FILES
$file = $_FILES["Filedata"];
 
if ( isset ( $file ) ) //à l'arrivée de $file
{
// on transfert le fichier temporaire créé sur le serveur
// dans le répertoire uploads nouvellement créé
move_uploaded_file ( $file['tmp_name'], "./uploads/" .utf8_decode($file['name']));
}
 
// petite astuse donnée par Thibault / DickRivers
// pour mac et certains serveurs
// bug du onComplete jamais déclenché côte flash
// donc pour déclencher le onComplete sous mac faire un simple echo
// d'une chaine de caractère avec au moins 1 espace
echo " Script Ok !";

Enregistrer ce script directement dans le répertoire c:\upFlash\ avec comme nom : upload.php.
Ouvrez votre navigateur à l’adresse :  http://localhost/exoUpFlash/upload.php
Si votre script est correcte, vous devriez voir s’afficher le texte : Script Ok !
Si il y a une erreur alors souvent, il s’agit d’un point virgule ou d’une parenthèse manquante.

Remarque : la propriété Filedata ne s’écrit pas comme on s’y attendrait en flash fileData alors faites attention c’est une faute courante.

La classe FileReference de Flash 8  / Notre premier Upload

Ouvrez le fla que vous avez créé récemment exo.fla dans le répertoire c:\upFlash\ ou créez le si ce n’est déjà fait.

1 – Ajouter un nouveau calque et le nommer ‘action’, renommer l’ancien calque ‘contenu’. Notre code sera centralisé sur le calque action.

2 – Ouvrir le panneau des composants et déplacer 2 composants bouton sur la scene ainsi qu’un composant progressbar.
Nommer la progressbar ‘my_pb’, le premier bouton ‘upload_btn’ et le second bouton ‘cancel_btn’.
Dans l’onglet paramètres du premier bouton changer la propriété label en ‘UpLoader’.
Dans l’onglet paramètres du premier bouton changer la propriété label en ‘Annuler’.

3 – transférer un composant Alert dans votre bibliothèque, ce composant nous permettra d’afficher des messages d’alerte au sein de flash. Voici à quoi devrait ressembler votre scene sous Flash8 :

4 – Pour rappel : l’objectif de cette appli est de permettre d’uploader un fichier dans un répertoire cible, en l’occurence le répertoire de stockage sera c:\upFlash\uploads\ ou via notre navigateur internet http://localhost/exoUpFlash/uploads/.

5 – ouvrir le panneau action sur la frame du layer action (raccourci F9). Voici le code côté flash de notre application :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

// Nous commençons par importer dans flash la classe FileReference.
// Nous devons importer la classe FileReference car ce n'est pas une classe top level
// , c'est à dire qu'elle n'est pas importée par défaut par le compilateur
// au contraire de la classe MovieClip par exemple
 
import flash.net.FileReference;
 
//ensuite nous devons importer la classe Alert qui va nous permettre
//d'afficher des messages d'alertes sous forme de pop-up
//n'oubliez pas de transférer un composant Alert dans votre bibliothèque
import mx.controls.Alert;
 
//création d'un nouvel Objet FileReference
//c'est cet objet qui va nous permettre d'uploader un fichier vers le serveur
//avec la méthode upload
var myFileRefUpload:FileReference = new FileReference();
 
//configuration de la progress barre en mode manuel
//Ce paramêtrage peut aussi se faire à partir de l'IDE de flash
//en mode manuel nous pourrons fournir à la progressbar
//le nombre de bytes chargés et le nombre de bytes total
my_pb.mode = "manual";
 
//on crée ici un objet d'écoute
//cet objet va centraliser toutes les méthodes asynchrones de FileReference
var monEcouteurUpload:Object = new Object();
 
//l'évènement onSelect est déclenché lorsque l'utilisateur a sélectionné
//un fichier présent dans un répertoire
monEcouteurUpload.onSelect = function(pFile:FileReference)
{
	//pFile est un objet de type FileReference, c'est l'objet passé en paramètre
	//qui contient en propriété le nom du fichier que l'on souhaite uploader
	for (var z in pFile)
	{
		trace(z+" :: "+pFile[z]);
	}//<= toujours passer le chemin absolu pour que cela fonctionne dans flash
	var lienUpload = "http://localhost/exoUpFlash/upload.php";
	pFile.upload(lienUpload);
};
//L'évènement onProgress est déclenché lors de l'upload de fichier et renvoie 3 paramêtres
//dont 2 qui récupèrent l'état du téléchargement en cours
monEcouteurUpload.onProgress = function(pFile:FileReference, pBytesLoaded:Number, pBytesTotal:Number)
{
	//la méthode setProgress affecte des valeurs à la progressbar
	//à chaque fois que l'upload se met à jour
	my_pb.setProgress(pBytesLoaded,pBytesTotal);
};
//évènement déclenché lorsque l'upload est terminé
monEcouteurUpload.onComplete = function(pFile:FileReference)
{
	//on ouvre un pop-up pour signifier que l'upload est terminé
	var nomFichier = pFile.name;
	Alert.show("Le fichier "+nomFichier+" a été correctement uploadé !","Upload Terminé");
};
//la méthode cancel se déclenche uniquement lorsque l'utilisateur annule l'upload dans
//la fenêtre parcourir ( lors du browse() )
monEcouteurUpload.onCancel = function(pFile:FileReference)
{
	//la méthode show de la classe Alert permet d'afficher un pop-up
	Alert.show("L'upload du fichier a été annulé !","Upload Annulé!!");
	trace('toto');
};
//la méthode onIOError se déclenche lorsque l'utilisateur annule l'upload ou le download
//une fois que ceux-ci sont en cours et signale de façon plus général une interuption du flux
monEcouteurUpload.onIOError = function(pFile:FileReference)
{
	if (pFile.name != undefined)
	{
		var nomFichier = pFile.name+" ";
	}
	Alert.show("Upload en cours du fichier "+nomFichier+" a été annulé par l'utilisateur!","Annulation Utilisateur !");
};
//myFileRefUpload souscrit à l'écouteur monEcouteurUpload
//Bizarrement Adobe n'a pas utiliser le modele évèenementiel d'AS2.0 avec
//addEventListener, mais cela est corrigé en AS3.0
myFileRefUpload.addListener(monEcouteurUpload);
 
/////////////////////////////////////////////////////////////////////////////
 
//gestion des boutons
//la méthode browse de FileReference peut prendre un tableau d'objet ( tableau associatif )
//en paramêtre ou bien aucun paramêtre. Lorsqu'aucun argument n'est fourni, tous les types
//de fichiers sont sélectionnables pour l'upload, aucun filtre n'est appliqué.
//voici un exemple de tableau à passer comme argument à la méthode
//browse pour filtrer le type de fichiers que l'on souhaite rendre accessibles.
var monTabType:Array = [{description:"Divers Formats Images [*.gif,*.GIF,*.tga,*.TGA,*.bmp,*.BMP]", extension:"*.gif;*.GIF;*.tga;*.TGA;*.bmp,*.BMP"}, {description:"JPEG", extension:"*.jpeg;*.JPEG"}, {description:"PNG", extension:"*.png;*.PNG"}, {description:"Vidéo AVI", extension:"*.avi;*.AVI"}, {description:"Vidéo QuickTime [*.mov,*.MOV,*.mpeg]", extension:"*.mov;*.MOV;*.mpeg"}, {description:"MSI", extension:"*.msi;*.MSI"}, {description:"Exécutable", extension:"*.exe;*.EXE"}, {description:"Tous les fichiers", extension:"*.*"}];
 
//on utilise ici un raccourci avec Handler
upload_btn.clickHandler = function()
{
	//déclenchement de la méthode browse pour parcourir notre disque
	//à la recherche d'un fichier cobaye
	myFileRefUpload.browse(monTabType);
};
//on annule l'upload grâce à la méthode cancel
cancel_btn.clickHandler = function()
{
	//déclenchement de la méthode cancel manuellement
	//l'évènement onIOResult et non l'évènement onCancel sera déclenché par cette méthode
	myFileRefUpload.cancel();
};
<a href="http://www.flashxpress.net/_wp/wp-content/uploads/2008/11/illus_tuto_upload.jpg">
</a>

Ca y est tout est en place pour que notre petite appli fonctionne .

Il ne suffit plus que de faire un ctrl+enter et vous pourrez vous lancer dans des back-offices incluant du FileReference

Voici les sources

Charger une image bitmap

Petit historique : Depuis Flash MX le chargement d’image est possible, à l’époque, en 1978 l’année de la consécration des « Bee Gees » avec « Stayin’ Alive » et oui ça remonte à loin tout ça, nous ne pouvions charger que du jpeg non-progressif. Aujourd’hui la majeur partie des formats d’image sont pris en charge. Cependant Flash évolue dans un contexte on-line et même si les débits ont largement augmenté, il est de bon ton de compresser (en mode RVB) au préalable via Photoshop ou tout autre logiciel de retouche, les images que vous allez charger dynamiquement.

1. En ActionScript 1 et 2 – niveau débutant :

Pour charger une image JPEG, on utilise la méthode de MovieClip loadMovie(), exactement de la même manière que lorsqu’on désire charger un swf externe.
Dans notre exemple, nous allons charger une photo au format JPEG dans notre animation, au lancement de celle-ci, c’est-à-dire sur sa première image.
Afin de pouvoir la manipuler comme s’il s’agissait d’un clip d’animation, nous allons la charger dans un clip vide. Cette manière de procéder est courante, elle va nous permettre d’utiliser une méthode introduite depuis Flash MX(1978). celle-ci permet la création dynamique de clips d’animation, par programmation: createEmptyMovieClip().

^?View Code ACTIONSCRIPT

1 2 3

// Création d'un clip vide nommé "conteneur", // à la profondeur 1, sur _root: _root.createEmptyMovieClip("conteneur",1);

Maintenant que nous avons créé un clip vide, nous pouvons charger notre photo dans celui-ci:

^?View Code ACTIONSCRIPT

1 2	// Chargement d'une photo dans le nouveau clip "conteneur": conteneur.loadMovie("photo.jpg");

Et voilà! Nous venons de charger dynamiquement une image dans un clip, auquel vous pouvez appliquer toutes les transformations applicables à n’importe quel clip.
Attention, comme lorsque l’on charge des animations au format SWF, pour cibler une image bitmap chargée dynamiquement, vous utiliserez comme chemin de ciblage le nom du clip dans lequel le fichier a été chargé, et non pas le nom du fichier.
Ainsi, par exemple, pour redimensionner la photo précédemment chargée, on écrira:

^?View Code ACTIONSCRIPT

1 2	conteneur._xscale /= 3; conteneur._yscale /= 3;

2. En ActionScript 3 – niveau avancé :

ActionScript 3 élimine les nombreuses fonctions et méthodes existantes dans les précédentes versions d’ActionScript telle loadMovie et étend le concept de la classe MovieClipLoader introduite avec Flash MX 2004.

Afin de charger différents types de contenus tels des images ou des animations nous utilisons la classe flash.display.Loader. Celle-ci hérite de la classe DisplayObjectContainer et peut donc être ajoutée à la liste d’affichage. D’autres classes telles flash.net.URLLoader ou flash.net.URLStream peuvent être utilisées afin de charger tout type de contenu, mais leur utilisation s’avère plus complexe.

• La classe Loader permet le chargement de contenu graphique seulement.
• Celle-ci hérite de la classe DisplayObjectContainer et peut donc être ajoutée à la liste d’affichage.
• Il faut considérer la classe Loader comme un objet d’affichage.

La classe Loader permet de charger des images au format PNG, JPEG, JPEG progressif et GIF non animé. Des animations SWF peuvent aussi être chargées. Nous instancions tout d’abord la classe Loader :

^?View Code ACTIONSCRIPT3

1	var chargeur:Loader = new Loader();

Puis nous appelons la méthode load dont voici la signature :

1

public function load(request:URLRequest, context:LoaderContext = null):void;

Celle-ci requiert deux paramètres dont voici le détail :
• request : un objet URLRequest contenant l’adresse de l’élément à charger.
• context : un objet LoaderContext définissant le contexte de l’élément chargé inutile dans cet exemple.

La classe URLRequest est utilisée pour toute connexion externe HTTP liée aux classes URLLoader, URLStream, Loader et FileReference.

Dans le code suivant, nous enveloppons l’URL à atteindre dans un objet URLRequest :

^?View Code ACTIONSCRIPT3

1 2 3 4 5 6 7 8

// création du chargeur var chargeur:Loader = new Loader();   // url à atteindre var maRequete:URLRequest = new URLRequest ("bob.jpg");   // chargement du contenu chargeur.load ( maRequete );

L’utilisation d’un objet URLRequest diffère des précédentes versions d’ActionScript où une simple chaîne de caractères était passée aux différentes fonctions liées au chargement externe. Certaines classes ActionScript 3 telles Socket, URLStream, NetConnection et NetStream font néanmoins exception et ne nécessitent pas d’objet URLRequest.

Afin de rendre graphiquement le contenu chargé nous devons ajouter l’objet Loader à la liste d’affichage :

^?View Code ACTIONSCRIPT3

1 2 3 4 5 6 7 8 9 10 11

// création du chargeur var chargeur:Loader = new Loader();   // url à atteindre var maRequete:URLRequest = new URLRequest ("bob.jpg");   // chargement du contenu chargeur.load ( maRequete )   // ajout à la liste d'affichage addChild ( chargeur ); //L’image est alors affichée