Share
Dans ce tutoriel, je vais vous montrer comment créer un programme de téléchargement Flash pour télécharger des fichiers à partir de l'ordinateur de l'utilisateur. Le résultat sera idéal pour les fichiers volumineux car il affichera une barre de progression et le pourcentage restant à télécharger. Nous allons même montrer à l'utilisateur le nombre d'octets téléchargés par seconde.
Icône de dossier de Michael Ludwig.
Note de l'éditeur: J'ai bien peur qu'il n'y ait pas de démo pour ce tut - vous devrez télécharger le fichier source.zip et jouer avec le téléchargement de fichiers sur votre posséder serveur :)
Créez un nouveau fichier Flash ActionScript 3.0 et définissez les dimensions sur 500 x 100 pixels. Nous allons commencer par créer un bouton de sélection. Dessiner un rectangle arrondi, j'ai fait le mien avec un coin arrondi 5px, un dégradé bleu et un trait gris 2px.
Appuyez sur F8 pour le transformer en un bouton et lui donner le nom d'occurrence "select". Nommez le bouton sur la scène "select_btn".
À l’intérieur du bouton, remplissez les 3 états avec un dégradé légèrement différent. Créez un autre calque au-dessus du premier et ajoutez un champ de texte statique avec le texte "SÉLECTIONNER LE FICHIER". Il est préférable de séparer les actifs, car il est plus facile de les modifier ultérieurement..
De retour à la scène principale, créez une autre boîte arrondie avec une couleur blanche et un trait gris. Ce sera la barre de progression. J'ai fait le mien comme ça:
Encore une fois, appuyez sur F8 et transformez-le en un MovieClip portant le nom "progress". Dans le clip de progression, créez 2 couches supplémentaires au-dessus de la première et déplacez le fond blanc dans la troisième, ne laissant que le trait sur le premier calque… Renommez le premier calque "marge", le deuxième "barre" et le troisième "masque". Nous allons transformer la troisième couche en masque.
Sur le calque "barre", créez un rectangle bleu ayant les mêmes dimensions que le calque de remplissage, mais veillez à le rendre légèrement plus grand afin que, lorsque vous appliquez le masque, vous ne disposiez pas de trous. Placez-le à 0,0 et transformez-le en MovieClip avec le nom d'occurrence "bar". Ce sera la barre qui montrera les progrès.
Cliquez avec le bouton droit sur la troisième couche et sélectionnez "Masque" dans le menu. Vous devriez avoir quelque chose comme ça:
Dans la bibliothèque, cliquez avec le bouton droit sur le bouton de sélection créé précédemment et sélectionnez "Dupliquer". Nommez le doublon "annuler" et dans le bouton, modifiez le texte du champ de texte en "ANNULER". Nous faisons une copie du bouton de sélection qui sera le bouton d’annulation. Nous montrerons plus tard qu'un seul d'entre eux dans la scène.
Dans la scène principale, créez un autre calque au-dessus du premier et placez le bouton d'annulation nouvellement créé à la même position que le bouton de sélection..
Nous avons presque fini avec les actifs. Créez un autre champ de texte, cette fois un champ de texte dynamique et nommez-le "label_txt". Cela montrera à l'utilisateur le message de réussite, le message d'erreur ou le pourcentage de progression. Assurez-vous que le texte n'est pas sélectionnable.
Testez le fichier pour voir comment ça se passe.
Nous n'avons plus qu'une chose à faire avant de commencer à coder; définir la classe de document sur "Uploader".
Dans le même dossier que le fichier Flash, créez un nouveau fichier ActionScript portant le nom "Uploader.as". Le nom est important pour la classe à trouver. Commencez à coder le package par défaut et importez les classes requises. J'ai utilisé "import Flash.display. *" Pour plus de rapidité, mais une fois que nous avons terminé, nous ne pouvons inclure que les classes requises pour réduire le fichier..
package import Flash.display. *; importer Flash.events. *; importer Flash.text. *; import Flash.net.FileReference; importer Flash.net.FileReferenceList; importer Flash.net.FileFilter; importer Flash.net.URLRequest; importer Flash.utils.Timer; import Flash.events.TimerEvent; Classe publique Uploader étend MovieClip
Nous allons commencer par définir quelques variables:
Classe publique Uploader étend MovieClip var file: FileReference; var fichierfilters: Array; var req: URLRequest; var tm: minuterie; vitesse var: Nombre = 0; var currbytes: Number = 0; var lastbytes: Number = 0;
Créez la fonction constructeur et ajoutez ce qui suit:
fonction publique Uploader () req = new URLRequest (); req.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.cbesslabs.com'; //'http://cbess.ro/templates/Flashtuts/Flash_uploader/upload.php '; file = new FileReference (); configuration (fichier); select_btn.addEventListener (MouseEvent.CLICK, parcourir); progress_mc.bar.scaleX = 0; cancel_btn.addEventListener (MouseEvent.CLICK, cancelUpload); cancel_btn.visible = false;
Laissez-moi vous expliquer ce qui se passe ici:
Nous créons une nouvelle classe URLRequest et définissons l'URL sur le fichier php de téléchargement..
La ligne "(stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.google.com'" est conditionnel, ce qui signifie que si nous fournissons le paramètre, le film F, il va mettre l'URL à la F paramètre. Sinon, il utilisera la chaîne codée en dur ici, bon vieux Google, uniquement pour tester.
Nous faisons le conditionnel afin de pouvoir réutiliser le fichier. De cette façon, nous ne pouvons changer que le F paramètre avec un chemin d'accès à l'URL et il sera téléchargé dans l'URL spécifiée.
Nous créons ensuite un nouvel objet FileReference, la classe gérant le processus de téléchargement. Nous transmettons l'objet FileReference à la fonction setup () que nous coderons plus tard pour configurer les différents écouteurs..
Enfin, nous ajoutons des écouteurs de clic aux boutons de sélection et d’annulation, définissons l’échelle de la barre de progression sur 0 et masquons le bouton d’annulation..
Nous créons maintenant la fonction setup ().
configuration de la fonction privée (file: FileReference) file.addEventListener (Event.CANCEL, cancel_func); file.addEventListener (Event.COMPLETE, complete_func); file.addEventListener (IOErrorEvent.IO_ERROR, io_error); file.addEventListener (Event.OPEN, open_func); file.addEventListener (ProgressEvent.PROGRESS, progress_func); file.addEventListener (Event.SELECT, selectHandler); file.addEventListener (DataEvent.UPLOAD_COMPLETE_DATA, show_message);
Nous pourrions omettre les événements Event.COMPLETE et Event.CANCEL, mais je les ai ajoutés uniquement pour les tests. Nous organisons un événement CANCEL lorsque l'utilisateur annule la boîte de dialogue de sélection. On a:
Assurez-vous de créer toutes les fonctions d'événement, sinon vous obtiendrez une erreur lors de la compilation..
Nous continuons avec la fonction de navigation, déclenchée lorsque le bouton de sélection a été cliqué. Nous devons afficher la boîte de dialogue afin que l'utilisateur puisse sélectionner un fichier:
Accentsconagua
fonction publique parcourir (e: MouseEvent) filefilters = [new FileFilter ('Images', '* .jpg')]; // ajoute d'autres filtres de fichiers file.browse (filefilters); Notez que j'ai ajouté un objet FileFilter à l'intérieur d'un tableau et que j'ai ajouté le tableau à l'objet FileReference. Feuilleter méthode. Vous pouvez ajouter un autre type de fichier en ajoutant un autre objet FileFilter avec une extension différente. Cela filtrera les extensions de fichier dans la boîte de dialogue de sélection afin que l'utilisateur ne puisse sélectionner que les types de fichiers corrects. Ceci est seulement une vérification de nom de fichier et ne vérifie pas si le fichier image est bien une image.
Lorsque l'utilisateur a sélectionné un fichier à télécharger, l'événement SELECT est déclenché. Nous appelons maintenant FileReference télécharger() méthode pour télécharger le fichier dans le fichier php sur le serveur avec l'argument de requête url.
fonction privée selectHandler (e: Event) file.upload (req);
Les crée la fonction open_func. Cette fonction est déclenchée lorsque le téléchargement commence. Nous allons masquer le bouton de sélection et afficher le bouton d'annulation.
fonction privée open_func (e: Event) cancel_btn.visible = true; select_btn.visible = false;
Créez la fonction de progression:
fonction privée progress_func (e: ProgressEvent) progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal; var tf = new TextFormat (); tf.color = 0x000000; label_txt.defaultTextFormat = tf; label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% uploadé';
Laissez-moi vous expliquer ce qui se passe ici. Nous définissons l'échelle de la barre de MovieClip montrant le pourcentage téléchargé. Pour ce faire, divisez les propriétés bytesLoaded en bytesTotal de l'objet événement. L'événement progress nous fournit la quantité d'octets téléchargés et le nombre total d'octets du fichier..
Ensuite, nous créons un objet TextFormat et définissons la couleur en noir (0x000000) pour l’étiquette de texte. Nous aurons besoin de cette étape car plus tard, nous changerons la couleur du texte en vert ou en rouge en fonction du message..
Enfin, nous définissons le texte du champ de texte avec le pourcentage téléchargé.
Nous allons créer la fonction d'erreur:
fonction privée io_error (e: IOErrorEvent) var tf = new TextFormat (); tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Le fichier n'a pas pu être téléchargé.'; cancel_btn.visible = false; select_btn.visible = true;
Fondamentalement, nous changeons la couleur du texte de l'étiquette, le définissons comme un message d'erreur, puis échangeons à nouveau les boutons Annuler et Sélectionner..
Créons le voir le message fonction qui vérifiera si le téléchargement a réussi:
fonction privée show_message (e: DataEvent) var tf = new TextFormat (); if (e.data == 'ok') tf.color = 0x009900; label_txt.defaultTextFormat = tf; label_txt.text = 'Le fichier a été téléchargé.'; else if (e.data == 'erreur') tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Le fichier n'a pas pu être téléchargé.';
Ici, nous testons si la propriété data de l'événement UPLOAD_COMPLETE_DATA est "ok" ou "error" et affiche un message de manière appropriée. La propriété data de cet événement contient la réponse du serveur à partir du script php.
C'est la dernière fonction qui sera déclenchée lorsque l'utilisateur cliquera sur le bouton d'annulation. Cela appelle le FileReference Annuler() fonction pour annuler le téléchargement. Nous appelons également reset () pour nettoyer.
fonction privée cancelUpload (e: MouseEvent) file.cancel (); réinitialiser();
Nous déclenchons une fonction reset () pour nettoyer les actifs, définissons le texte sur "" et échangeons les boutons cancel et select:
fonction privée reset () cancel_btn.visible = false; select_btn.visible = true; label_txt.text = "; progress_mc.bar.scaleX = 0;
Allez-y et testez le fichier en Flash.
Pour l'instant, le téléchargement fonctionne, mais à la fin nous obtenons le message d'erreur. En effet, nous n’avons pas fourni le paramètre path, le swf prend donc la page google codée en dur. Comme cette page ne nous renvoie pas "ok", nous obtenons l'erreur. Nous devons construire le fichier php…
Montrons à l'utilisateur la vitesse avec laquelle il télécharge. Dans la fonction constructeur, ajoutez les lignes:
tm = nouvelle minuterie (1000); tm.addEventListener (TimerEvent.TIMER, updateSpeed);
Nous créons une minuterie qui fonctionnera toutes les secondes et vérifiera la vitesse.
Dans la fonction open_func (), ajoutez cette ligne:
tm.start ();
Cela démarrera le chronomètre lorsque le téléchargement commencera. Nous allons maintenant créer la méthode updateSpeed ():
fonction privée updateSpeed (e: TimerEvent) speed = Math.floor ((currbytes - lastbytes) / 1024); lastbytes = currbytes;
Voici ce qui se passe ici: nous calculons la vitesse en soustrayant la variable lastbytes de currbytes. le lastbytes la variable est ensuite définie sur la currbytes. Ainsi, lorsque les deux variables ont la valeur 0, la vitesse est 0. La variable currbytes contiendra le nombre actuel d'octets téléchargés. Nous ne pouvons pas accéder à cela directement, c'est pourquoi nous avons créé la variable currbytes. Cette variable sera définie à partir de notre événement PROGRESS où nous pouvons accéder à la propriété bytesLoaded.
Enfin, nous divisons tout par 1024 pour obtenir le résultat en kilo-octets et arrondissons la valeur à afficher avec Math.floor ().
Ajoutons la dernière modification pour pouvoir passer au script php. Dans le progress_func () modifier la ligne:
label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% uploadé';
avec ça:
label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% uploadé' + vitesse + 'kb / s';
Voici le code complet pour le téléchargeur Flash:
package import Flash.display. *; importer Flash.events. *; importer Flash.text. *; import Flash.net.FileReference; importer Flash.net.FileReferenceList; importer Flash.net.FileFilter; importer Flash.net.URLRequest; importer Flash.utils.Timer; import Flash.events.TimerEvent; Classe publique Uploader étend MovieClip var file: FileReference; var fichierfilters: Array; var req: URLRequest; var tm: minuterie; vitesse var: Nombre = 0; var currbytes: Number = 0; var lastbytes: Number = 0; fonction publique Uploader () req = new URLRequest (); req.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.google.com'; file = new FileReference (); configuration (fichier); select_btn.addEventListener (MouseEvent.CLICK, parcourir); progress_mc.bar.scaleX = 0; tm = nouvelle minuterie (1000); tm.addEventListener (TimerEvent.TIMER, updateSpeed); cancel_btn.addEventListener (MouseEvent.CLICK, cancelUpload); cancel_btn.visible = false; fonction publique parcourir (e: MouseEvent) filefilters = [new FileFilter ('Images', '* .jpg')]; // ajoute d'autres filtres de fichiers file.browse (filefilters); configuration de la fonction privée (file: FileReference) file.addEventListener (Event.CANCEL, cancel_func); file.addEventListener (Event.COMPLETE, complete_func); file.addEventListener (IOErrorEvent.IO_ERROR, io_error); file.addEventListener (Event.OPEN, open_func); file.addEventListener (ProgressEvent.PROGRESS, progress_func); file.addEventListener (Event.SELECT, selectHandler); file.addEventListener (DataEvent.UPLOAD_COMPLETE_DATA, show_message); fonction privée cancel_func (e: Event) trace ('cancelled!'); fonction privée complete_func (e: Event) trace ('complete!'); fonction privée io_error (e: IOErrorEvent) var tf = new TextFormat (); tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Le fichier n'a pas pu être téléchargé.'; tm.stop (); cancel_btn.visible = false; select_btn.visible = true; fonction privée open_func (e: Event) // trace ('open!'); tm.start (); cancel_btn.visible = true; select_btn.visible = false; fonction privée progress_func (e: ProgressEvent) progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal; var tf = new TextFormat (); tf.color = 0x000000; label_txt.defaultTextFormat = tf; label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% uploadé' + vitesse + 'kb / s'; currbytes = e.bytesLoaded; fonction privée selectHandler (e: Event) file.upload (req); fonction privée show_message (e: DataEvent) tm.stop (); var tf = new TextFormat (); if (e.data == 'ok') tf.color = 0x009900; label_txt.defaultTextFormat = tf; label_txt.text = 'Le fichier a été téléchargé.'; else if (e.data == 'erreur') tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Le fichier n'a pas pu être téléchargé.'; fonction privée updateSpeed (e: TimerEvent) speed = Math.round ((currbytes - lastbytes) / 1024); lastbytes = currbytes; fonction privée cancelUpload (e: MouseEvent) file.cancel (); réinitialiser(); fonction privée reset () cancel_btn.visible = false; select_btn.visible = true; label_txt.text = "; progress_mc.bar.scaleX = 0; Construisons notre script php rapidement:
Je vais simplement résumer ceci rapidement (PHP ne fait pas partie de ce tutoriel). Nous définissons un chemin où nous allons placer le fichier, puis nous vérifions si le $ _FILES ['Filedata'] ['error'] est 0 (s'il n'y a pas d'erreur). Nous vérifions ensuite si move_uploaded_file () a transféré avec succès le fichier dans le dossier et nous affichons "ok" ou "error" en fonction du résultat..
Un dernier point: vous devez vous assurer que le dossier existe et qu'il est accessible en écriture avant d'exécuter le script..
C'est la fin de notre tutoriel. Merci d'avoir lu, j'espère que vous avez appris quelque chose!
