Introduction
Un « upload » correspond à l'envoi d'un fichier depuis l'ordinateur du visiteur vers le serveur sur Internet. Flash a longtemps été privé de cette fonction, du coup l'on procède généralement avec de bons vieux formulaires HTML et les pièces jointes. Mais là, aucun moyen d'afficher une barre de progression et la page doît se recharger entièrement.
Depuis Flash 8, tout a basculé...
Dernière modification : 24 Janvier 2009.
Sommaire
-
Préparation de la classe
-
L'objet « FileReference »
-
La barre de progression
1. Préparation de la classe
L'objectif est de créer une classe entièrement autonome (sans fichier *.fla) capable de s'intégrer dans n'importe quel projet Flash.
Nommons cette classe : « monFileReference ». En référence au nom de la classe spécifique à l' « upload » de fichier avec Flash, j'ai nommé « FileReference ».
Toute classe qui se confond se trouve dans un fichier qui porte le même nom qu'elle et qui a pour extension .as (pour document ActionScript).
Notre classe doit donc se trouver dans un document nommé « monFileReference.as ».
Voici notre document initial comportant les bases de la classe « monFileReference » :
package
{
import flash.display.Sprite;
public class monFileReference extends Sprite
{
public function monFileReference ()
{
// Je suis initialisée !
};
}
}
Commençons par faire une liste des éléments susceptibles d'intéragir avec notre classe « monFileReference » :
| Nom | Type | Description |
| Bouton parcourir |
Button | Bouton pour sélectionner un fichier sur votre disque dur |
| Bouton envoyer |
Button | Bouton pour démarrer l' « upload » |
| Barre de progression | MovieClip | Barre pour visualiser la progression de l' « upload » |
| Zone de texte | TextField | Zone de texte pour afficher des informations |
Ces éléments sont supposés déjà se trouver sur la scène avant d'utiliser la classe d' « upload ». Nous les enverrons en paramètre afin que notre classe communique avec eux.
Pour initialiser notre classe dans la scène du schéma :
/// Import du fichier « monFileReference.as »
/// Ne pas mettre l'extension .as !
import monFileReference;
/// Création d'un objet de type « monFileReference »
/// Nommons-le « uploader »
var uploader :monFileReference = new monFileReference();
/// Définition des paramètres : « btn_parcourir »,
/// « btn_envoyer », « txt_infos » et « barre_progression »
uploader.btn_parcourir = btn_parcourir;
uploader.btn_envoyer = btn_envoyer;
uploader.txt_infos = txt_infos;
uploader.barre_progression = barre_progression;
uploader.init();
La déclaration des paramètres dans notre classe :
package
{
import flash.display.Sprite;
public class monFileReference extends Sprite
{
public var btn_parcourir :Button;
public var btn_envoyer :Button;
public var txt_infos :TextField;
public var barre_progression :MovieClip;
public function monFileReference ()
{
// Je suis initialisée !
};
}
}
2. L'objet « FileReference »
Découvrons l'objet « FileReference » et le rôle qu'il va jouer dans notre « uploader ».
C'est une classe qui va nous permettre de gérer l'ensemble des événements liés à un transfert de fichier, à savoir : Sélectionner un fichier sur le disque dûr, envoyer ce fichier sur le serveur, afficher une barre de progression pendant le transfert, indiquer s'il y a des erreurs, entre autre.
Faisons la liste de ces événements :
| Event.OPEN |
Evénement correspondant à l'ouverture d'une boîte de dialogue pour sélectionner un fichier du disque dûr. Evénement que nous attribuerons à « btn_parcourir ». |
| ProgressEvent.PROGRESS | Evénement survenant pendant le transfert du fichier depuis l'ordinateur vers le sreveur (ou inversement). Il nous permettra de configurer notre « barre_progression ». |
| HTTPStatusEvent.HTTP_STATUS | Evénement survenant lorsque le transfert échoue à cause d'une erreur HTTP. Ca ferait plus pro d'indiquer à nos visiteurs lorsque la situation se présente (dans le champ de texte « txt_infos »). |
| IOErrorEvent.IO_ERROR | Evénement survenant après un événement HTTPStatusEvent.HTTP_STATUS. |
| SecurityErrorEvent.SECURITY_ERROR | |
| Event.SELECT | |
| Event.COMPLETE | |
| DataEvent.UPLOAD_COMPLETE_DATA | |
| Event.CANCEL |
3.
Contenu HTML de l'objet