Share
Nous allons construire un simple lecteur MP3 que vous pourrez intégrer à n’importe quelle page Web (la page d’accueil d’un groupe, par exemple). En suivant ce tutoriel, vous apprendrez à importer des graphiques Illustrator, à construire des sprites de boutons avec MovieClips et à utiliser les classes Timer et Sound. Et c'est parti…
Je vais d'abord passer en revue ce dont nous avons besoin pour compléter ce tutoriel:
J'ai utilisé la classe tierce Caurina Tweener pour interpoler des éléments à l'écran. Cela n'est pas obligatoire car vous pouvez utiliser la classe d'interpolation de Flash pour effectuer le même travail. Remarquez, si vous ne connaissez pas Caurina, je vous suggère de jeter un coup d'œil. Tween Lite est un autre tweener tiers que vous avez peut-être entendu parler. C'est une classe d'interpolation très puissante que vous pouvez également utiliser pour ce projet si vous le souhaitez. Vous pouvez trouver Caurina Tweener dans le code source.
Vous devez d’abord créer un nouveau document Flash Actionscript 3.0. Vous n'avez pas besoin de modifier les propriétés du document..
Accédez à Flash> Préférences> Importateur de fichier AI sur Mac ou Édition> Préférences> Importateur de fichier AI sous Windows. Assurez-vous que vous avez les paramètres suivants:
Enregistrez-le et nommez-le "SimpleMP3Player.fla". Copiez également les répertoires "caurina" et "tarzan.mp3" au même endroit que votre fichier .fla..
Nous sommes maintenant prêts à importer le fichier Illustrator. Allez dans Fichier> Importer> Importer dans la scène. Recherchez le fichier "simplemp3player.ai" dans le répertoire source "ai" du paquet source, appuyez sur OK pour afficher l’écran suivant. Définissez l'option Convertir en calques "Calques Flash" pour que tous les calques contenus dans le fichier ai soient directement au format Flash. Les deux options suivantes, comme indiqué dans l'image, placent toutes les illustrations aux mêmes coordonnées que dans le fichier ai et redimensionnent votre document Flash à la taille souhaitée..
Lorsque vous cliquez sur OK dans la boîte de dialogue d'importation, votre document doit ressembler à l'image ci-dessus..
Vous avez probablement remarqué des boutons de lecture et de pause dans la dernière image. Ceux-ci vont être notre sprite de bouton qui contrôle le son. Tous les boutons sont regroupés dans un groupe.
Sélectionnez uniquement le groupe de boutons et appuyez sur F8 pour afficher l'écran "Convertir en symbole". Nommez-le "boutons" et assurez-vous que vous avez sélectionné MovieClip comme type. Définissez l'enregistrement dans le coin supérieur gauche et cliquez sur OK. Basculez vers le panneau Propriétés et donnez à l'objet un nom d'occurrence "boutons". L'image ci-dessous illustre visuellement ces étapes:
Nous avons nos boutons dans un MovieClip, mais le masque n'est pas inclus. Nous avons besoin d'un autre MovieClip pour les lier tous ensemble.
Sélectionnez les boutons movieclip et l'objet masque. Appuyez à nouveau sur F8 et donnez-lui maintenant le nom "buttonSprite". Rappelez-vous également de lui donner un nom d'instance. Cette fois, "bs" (je sais ce que vous pensez, mais c'est une abréviation de ButtonSprite).
Maintenant, notre sprite bouton est presque prêt à basculer. Tout ce que nous avons à faire est de le masquer pour qu’il ne montre qu’un bouton à la fois..
Double-cliquez sur votre bouton MovieClip. Créez un nouveau calque au-dessus du calque actif et nommez-le "masque". Sélectionnez l'objet masque et coupez-le à l'aide de "Cmd + X" sur Mac ou "Ctrl + X" sous Windows. Sélectionnez le calque de masque et collez-le avec "Cmd + V" sous Mac ou "Ctrl + V" sous Windows. Peu importe où se trouve votre masque, car nous l'alignons ensuite au bon endroit..
Avec votre masque toujours sélectionné, ouvrez le panneau Aligner (Fenêtre> Aligner) et assurez-vous que le bouton "Mettre en scène" est enfoncé. Maintenant, appuyez sur les boutons "Aligner le bord supérieur" et "Aligner le bord gauche" et votre objet de masque devrait maintenant être dans la bonne position, le coin supérieur gauche de votre MovieClip.
Il ne reste plus qu'à masquer les boutons. Cliquez avec le bouton droit au-dessus du calque de masque et choisissez Masque..
Vous pouvez voir l'effet instantanément; un seul bouton est visible.
Oublions les boutons pendant un moment et concentrons-nous sur l'affichage du lecteur MP3. Je vais vous montrer comment construire cet élément d'affichage manuellement. Cela pourrait être fait avec AS3, bien sûr, mais faisons-le manuellement cette fois.
Sélectionnez d'abord l'élément de masque dans le calque de masque. Convertissez-le en MovieClip et nommez-le "displayMask". Utilisez également ce nom comme nom d'instance. Le masque pour l'affichage est prêt, alors masquez le calque. Créez ensuite un calque entre le calque des boutons et le calque du masque. Nommez-le "texte". Sélectionnez l'outil Texte dans la palette Outils et utilisez les options présentées dans l'image ci-dessous:
Nous avons besoin de champs de texte pour afficher nos informations (artiste, nom de la chanson, pourcentage de chargement et longueur de la chanson). Nous allons créer des champs de texte manuellement sur la scène.
Dessinez d'abord les textfieds sur le calque de texte, comme indiqué dans l'image ci-dessous. Convertissez les trois champs de texte en un seul MovieClip appelé "playerTexts". Créez un autre champ de texte et appelez-le "préchargeur". Vous n'avez pas besoin de convertir ceci en un MovieClip.
Tout ce que nous avons à faire, c’est d’inclure nos nouveaux loader-textfield et playerTexts-movieclip dans un MovieClip afin que nous puissions contrôler les textes comme et quand nous le souhaitons..
Sélectionnez les champs loader-textfield et playerTexts-movieclip et appuyez sur F8. Donnez-lui un nom et un nom d'instance "display". Maintenant que nous avons terminé notre hiérarchie d'affichage, cela devrait ressembler à ceci:
Pour écrire un exemple de données dans songInfo-textfield, nous devons écrire la ligne de code suivante:
display.playerTexts.songInfo.text = 'C'est ici que nous mettons le nom de l'artiste et de la chanson';
Nous avons donc maintenant tous les éléments graphiques nécessaires pour le lecteur MP3. Ensuite, nous allons plonger profondément dans le code, alors plongez avec moi!
Pour que le code fonctionne, nous devons créer la classe de document. Le code de classe de document est exécuté en premier lors de la lecture des fichiers .swf. Vous n'avez plus besoin d'écrire votre code sur la timeline et il est plus facile d'importer votre classe dans un autre fichier .fla ultérieurement, si nécessaire..
Allez dans Fichier> Nouveau. Sélectionnez "Fichier Actionscript" dans la fenêtre qui s'ouvre et cliquez sur OK. Enregistrez le fichier dans le même dossier que votre fichier .fla et nommez-le "SimpleMP3Player.as"..
Assignez maintenant votre nouveau fichier .as en tant que classe de document. Cliquez sur la scène et accédez au panneau Propriétés. Vous y trouverez le champ "Classe" où vous devez entrer le nom de la classe que vous avez créée. Entrez "SimpleMP3Player" et cliquez sur le petit crayon. Si vous épelez correctement le nom de la classe, le fichier "SimpleMP3Player.as" devrait devenir actif. Sinon, Flash générera une erreur.
Le code donne vie à tout. Voici le code ActionScript terminé, je vais l'expliquer bloc par bloc. Vérifiez également le code source du paquet source, je l'ai commenté du début à la fin..
Accentsconagua
package import flash.display.MovieClip; import flash.events.Event; import flash.events.EventDispatcher; import flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.events.ProgressEvent; import flash.events.TimerEvent; import flash.media.Sound; import flash.media.SoundChannel; import flash.media.ID3Info; import flash.net.URLRequest; import flash.utils.Timer; import flash.text.TextField; import flash.text.TextFieldAutoSize; importer caurina.transitions.Tweener; Classe publique SimpleMP3Player étend MovieClip // Crée certaines variables dont nous avons besoin de var privé mp3File: Sound; var privé mp3FilePosition: SoundChannel; private var id3Data: ID3Info; private var id3InfoAvailable = false; private var updateTime: Minuterie; private var playingSound: Boolean = false; private var soundPosition: Number; var privé songReachedEnd: Boolean = false; bouton privé var: Array = new Array ('0', '-36', '-72', '-108', '-144', '-180', '-216', '-252'); fonction publique SimpleMP3Player () display.playerTexts.x = -73; display.mask = displayMask; bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3]; loadMP3 (); fonction privée loadMP3 (): void mp3File = new Sound (); mp3File.addEventListener (ProgressEvent.PROGRESS, mp3FileLoading); mp3File.addEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.addEventListener (IOErrorEvent.IO_ERROR, errorLoadingSound); mp3File.addEventListener (Event.ID3, getID3Data); mp3File.load (new URLRequest ('tarzan.mp3')); Tweener.addTween (display.preloader, x: 96, time: 1); fonction privée mp3FileLoading (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.preloader.text = 'LOADING…' + currentPercent + '%'; if (currentPercent> 50 && id3InfoAvailable) Tweener.addTween (display.preloader, x: 200, time: 1, onComplete: playMP3, onCompleteParams: [false, 0]); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading); fonction privée mp3FileLoaded (e: Event): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, time: 1); fonction privée errorLoadingSound (e: IOErrorEvent): void trace ('Erreur lors du chargement du son:' + e); fonction privée getID3Data (e: Event): void id3InfoAvailable = true; id3Data = mp3File.id3; fonction privée playMP3 (useSp: Boolean, sp: Number): void if (useSp) mp3FilePosition = mp3File.play (sp); sinon mp3FilePosition = mp3File.play (); playingSound = true; mp3FilePosition.addEventListener (Event.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField); bs.buttons.buttonMode = bs.buttons.enabled = true; bs.buttons.y = buttonPos [0]; bs.buttons.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBs); bs.buttons.addEventListener (MouseEvent.MOUSE_OUT, mouseOutBs); bs.buttons.addEventListener (MouseEvent.CLICK, mouseClickBs); updateTime = new Timer (100); updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start (); var si: String = id3Data.artist + '-' + id3Data.songName; si = si.toUpperCase (); display.playerTexts.songInfo.autoSize = TextFieldAutoSize.LEFT; display.playerTexts.songInfo.wordWrap = false; display.playerTexts.songInfo.text = si; Tweener.addTween (display.playerTexts, x: 60, time: 1); fonction privée updateBufferField (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%'; fonction privée getMP3Time (e: TimerEvent): void var totalMinutes = Math.floor (mp3File.length / 1000/60); var totalSeconds = Math.floor (mp3File.length / 1000)% 60; var currentMinutes = Math.floor (mp3FilePosition.position / 1000/60); var currentSeconds = Math.floor (mp3FilePosition.position / 1000)% 60; si (totalSecondes < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds; private function songFinished(e:Event):void mp3FilePosition.removeEventListener(Event.SOUND_COMPLETE, songFinished); updateTime.removeEventListener(TimerEvent.TIMER, getMP3Time); bs.buttons.y = buttonPos[3]; mp3FilePosition.stop(); playingSound = false; songReachedEnd = true; soundPosition = 0; display.playerTexts.times.text = 'PLAY AGAIN?'; /* * allButtons.bs event methods begin */ private function mouseOverBs(e:MouseEvent):void if (playingSound) bs.buttons.y = buttonPos[5]; else bs.buttons.y = buttonPos[1]; if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[1]; private function mouseOutBs(e:MouseEvent):void if (playingSound) bs.buttons.y = buttonPos[0]; else bs.buttons.y = buttonPos[4]; if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[3]; private function mouseClickBs(e:MouseEvent):void if (playingSound) bs.buttons.y = buttonPos[4]; soundPosition = mp3FilePosition.position; updateTime.stop(); mp3FilePosition.stop(); playingSound = false; display.playerTexts.times.text = 'PAUSE'; else if (!playingSound) bs.buttons.y = buttonPos[2]; playMP3(true, soundPosition); playingSound = true; else if (songReachedEnd) songReachedEnd = false; playMP3(false, 0); package // Place où toutes les importations de classe a été transférée. classe publique SimpleMP3Player étend MovieClip fonction publique SimpleMP3Player ()
Notre point de départ ressemble à l'exemple ci-dessus. N'oubliez pas que le nom de la classe doit être identique à celui de votre nom de fichier de classe de document. Tout dans la fonction publique SimpleMP3Player s'exécute juste après que Flash ait chargé notre classe.
Importons toutes les classes dont notre lecteur MP3 a besoin pour fonctionner correctement.
package import flash.display.MovieClip; import flash.events.Event; import flash.events.EventDispatcher; import flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.events.ProgressEvent; import flash.events.TimerEvent; import flash.media.Sound; import flash.media.SoundChannel; import flash.media.ID3Info; import flash.net.URLRequest; import flash.utils.Timer; import flash.text.TextField; import flash.text.TextFieldAutoSize; importer caurina.transitions.Tweener;
Tout devrait être assez simple. Dans la dernière ligne, nous importons Caurina Tweener. Assurez-vous que le répertoire caurina se trouve au même emplacement que votre fichier .fla..
Toutes les variables sont privées. Seule la classe SimpleMP3Player peut les utiliser..
var privé mp3File: Sound; var privé mp3FilePosition: SoundChannel;
L'objet son mp3File stocke notre son Tarzan.mp3. mp3FilePosition est un objet SoundChannel. Nous en avons besoin pour nous indiquer la position actuelle du fichier MP3 en millisecondes. Avec cet objet, nous pouvons également arrêter le fichier mp3.
private var id3Data: ID3Info; private var id3InfoAvailable = false;
L'objet id3Data stocke les informations de sons mp3 id3. Par exemple, le nom de la chanson et le nom de l'artiste. id3InfoAvailable indique à notre préchargeur que les informations id3 sont disponibles pour que le code puisse commencer à jouer au format mp3. Fichier.
private var updateTime: Minuterie;
updateTime est notre objet timer qui met à jour le champ textuel display times. Vous pouvez trouver plus d'informations sur la classe Timer ici. Je passerai par la suite.
private var playingSound: Boolean = false; private var soundPosition: Number; var privé songReachedEnd: Boolean = false;
playingSound est simplement une variable booléenne nous indiquant si mp3File est en cours de lecture. soundPosition stocke une valeur numérique lorsque les utilisateurs appuient sur le bouton Pause afin que nous puissions continuer à lire de la musique à partir de la position de pause lorsque l'utilisateur clique sur le bouton Lecture. songReachedEnd indique que la lecture de la chanson est terminée.
/ * * buttonPos [0] = playUp * buttonPos [1] = playOver * buttonPos [2] = playDown * buttonPos [3] = playDis * buttonPos [4] = pauseUp * buttonPos [5] = pauseOver * buttonPos [6] = pauseDown * buttonPos [7] = pauseDis * / private var buttonPos: Tableau = nouveau tableau ('0', '-36', '-72', '-108', '-144', '-180', '- 216 ',' -252 '); Finalyl, dernier mais non le moindre, notre variable tableau qui contient les boutons les coordonnées y movieclip. Par exemple:
bs.buttons.y = buttonsPos [4];
Le bouton de pause est ensuite affiché à l'écran. Si vous utilisez 0 entre les [crochets], vous verrez le bouton Play.
Il est temps de voir ce que notre code fait en premier lorsqu'il est chargé. Gérons la première fonction de notre code; la fonction SimpleMP3Player.
fonction publique SimpleMP3Player () display.mask = displayMask; display.playerTexts.x = -73;
la fonction SimpleMP3Player est une fonction constructeur, elle doit donc être publique. Le renommer en privé provoque une erreur. L'état par défaut de Functions est public, vous n'avez donc pas nécessairement à écrire "public" avant la fonction..
Masquer avec du code est très facile et simple. Sur la ligne 3, vous voyez le code pour le masquage. Nous assignons simplement le movieclip "displayMask" à la propriété "display" du masque de movieclip. C'est tout.
La deuxième propriété, display.playerTexts.x, déplace le clip "playerTexts" le long de l'axe horizontal. Nous le déplaçons simplement hors de vue pour coordonner -73. Le masque cache les "playerTexts".
bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3];
"boutons" est un MovieClip et, par défaut, lorsque la souris le survole, le curseur reste sous la forme d'une flèche de base. Si vous définissez la propriété "buttonMode" sur true, le curseur devient une main lorsque la souris survole la souris. Au début, nous voulons que ce curseur soit une flèche, donc buttonMode est défini sur false. Sur la même ligne, nous définissons la propriété "enabled" sur false. Cela signifie que les "boutons" MovieClip n'est pas cliquable. Dans la ligne 2, nous plaçons la position du "bouton" sur le bouton de lecture désactivé.
La première ligne peut être déroutante, mais si je l'écris comme ça…
bs.buttons.buttonMode = false; bs.buttons.enabled = false;
… Vous pouvez probablement le voir plus clairement. Je gagne de la place en l'écrivant sur une seule ligne.
Il ne nous reste plus qu'à appeler notre méthode "loadMP3".
loadMP3 ();
Cette méthode est notre méthode principale. Il charge le fichier mp3, déclare les EventListeners nécessaires et fait glisser le préchargeur pour afficher.
mp3File = new Sound ();
Cette ligne crée un nouvel objet Sound. Nous pouvons accéder à toutes les méthodes et propriétés de classe Sound via mp3File..
mp3File.addEventListener (ProgressEvent.PROGRESS, mp3FileLoading); mp3File.addEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.addEventListener (IOErrorEvent.IO_ERROR, errorLoadingSound); mp3File.addEventListener (Event.ID3, getID3Data);
La première ligne déclare l'événement PROGRESS et chaque fois que l'événement est appelé, il appelle la méthode mp3FileLoading. Cet auditeur a quelques propriétés dont nous avons besoin. Le premier est bytesTotal qui contient la taille totale du fichier mp3 en octets. La seconde est bytesLoaded qui contient les octets actuellement chargés. Avec ces deux propriétés, nous pouvons compter le pourcentage de chargement du fichier et l’afficher pour l’utilisateur..
La deuxième ligne est invoquée lorsque tout le fichier mp3 a été chargé. Elle appelle la méthode mp3FileLoaded.
La troisième ligne concerne le traitement des erreurs. Par exemple, si et le fichier mp3 n'est pas trouvé, cet événement est appelé. Il appelle la méthode errorLoadingSound.
Sur la ligne 5, l'événement est appelé lorsque id3-data est disponible. Il appelle la méthode getID3Data.
mp3File.load (new URLRequest ('tarzan.mp3')); La méthode "load" charge notre fichier mp3 Tarzan. Entre parenthèses, nous déclarons une nouvelle requête URL et le chemin de notre fichier mp3. Notre chemin est relatif et tarzan.mp3 doit se trouver au même emplacement que les fichiers .fla et .as. Cette ligne est la même que ci-dessous. Utilisez celui que vous préférez.
var req: URLRequest = new URLRequest ('tarzan.mp3'); mp3File.load (req); C'est la première fois que nous utilisons Caurina, je vais donc rapidement expliquer comment cela fonctionne..
Tweener.addTween (cible, propriétés);
C'est le code de base. La cible est l'endroit où vous écrivez le nom de l'objet cible que vous souhaitez interpoler. Dans les propriétés, vous définissez ce que vous voulez faire avec la cible. Vous pouvez modifier, par exemple, les coordonnées x et y, la transparence, l’échelle ou la rotation.
Tweener.addTween (display.preloader, x: 96, time: 1);
Notre cible est le champ de texte "Preloader" à l'intérieur du MovieClip "display". La propriété "x" la déplace et la propriété "time" indique la durée de l'interpolation. Le temps est mesuré en secondes. Si vous souhaitez utiliser les millisecondes, utilisez la notation ".5".
fonction privée mp3FileLoading (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.preloader.text = 'LOADING…' + currentPercent + '%'; if (currentPercent> 50 && id3InfoAvailable) Tweener.addTween (display.preloader, x: 200, time: 1, onComplete: playMP3, onCompleteParams: [false, 0]); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading);
Comme je l'ai mentionné précédemment, la méthode "mp3FileLoading" indique le pourcentage de chargement du fichier mp3. Il commence également la chanson lorsque le pourcentage grimpe à plus de 50%.
currentPercent sert à compter la valeur en pourcentage. Nous l'arrondissons avec la méthode "Math.round". La ligne 4 écrit la valeur en pourcentage dans notre champ de texte afin que l’utilisateur puisse voir ce qui se passe lors du chargement..
Dans l’instruction "if", nous vérifions si le pourcentage est supérieur à 50 et si la variable "id3InfoAvailable" est vraie. Si les deux renvoient true, l'instruction "if" exécute tout ce qui est entre crochets.
Lorsque l'instruction if est vraie, nous interpolons le champ de texte "préchargeur". Lorsque l'interpolation est terminée, Caurina appelle la méthode "playMP3" et lui transmet deux propriétés. Nous voyons la méthode "playMP3" à l'étape suivante.
L’événement PROGRESS n’est plus nécessaire, nous l’avons supprimé à la ligne 9.
fonction privée mp3FileLoaded (e: Event): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3ile.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, time: 1);
Cette méthode est appelée lorsque la chanson entière est chargée. Premièrement, nous supprimons les EventListeners inutiles. Dans la ligne 5, nous interpolons le champ de texte "tampon" à droite.
fonction privée errorLoadingSound (e: IOErrorEvent): void trace ('Erreur de chargement du son:' + e); Cette gestion d'erreur est vraiment basique. Il ne fait que suivre les erreurs si des erreurs se produisent.
fonction privée getID3Data (e: Event): void id3InfoAvailable = true; id3Data = mp3File.id3;
Nous définissons "id3InfoAvailable" sur true à la ligne 3. La méthode "mp3FileLoading" vérifie cette variable à chaque fois et ne démarre le son que s'il est vrai. De cette façon, nous nous assurons que les informations id3 sont disponibles afin que l'utilisateur puisse voir les informations réelles sur l'écran..
Dans la ligne 4, nous affectons des métadonnées id3 de mp3File à un objet ID3Info nommé id3Data que nous avons créé à l'étape 12..
Cette méthode est la méthode la plus vitale de notre lecteur. Regardons le premier bloc.
fonction privée playMP3 (useSp: Boolean, sp: Number): void if (useSp) mp3FilePosition = mp3File.play (sp); sinon mp3FilePosition = mp3File.play ();
La méthode "playMP3" requiert deux propriétés. "useSp" indique "utiliser la position du son" et "sp" est "la position du son".
Dans la ligne 3, nous testons si "useSp" est vrai. Si c'est le cas, le code lit notre chanson à partir du point souhaité. Ce point est passé dans la propriété "sp". Si false, nous commençons à jouer la chanson depuis le début. Tout cela est lié au bouton play-pause.
playingSound = true; mp3FilePosition.addEventListener (Event.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField);
La ligne 1 définit le playingSound sur true. Maintenant, nous pouvons vérifier si le son est joué et faire ce qui est nécessaire.
Le nouvel EventListener en ligne 2 se déclenche à chaque fin de lecture du morceau. La méthode "songFinished" est exécutée. Notez que nous ajoutons EventListener à l'objet mp3FilePosition.
Le deuxième nouvel EventListener de la ligne 3 ajoute le même événement "PROGRESS" à mp3File qu'au début du code. Cet auditeur déclenche une méthode différente. La méthode "updateBuffer" sert à mettre à jour le champ de texte "tampon".
bs.buttons.buttonMode = bs.buttons.enabled = true; bs.buttons.y = buttonPos [0];
La première ligne que vous trouverez déjà familière. Notre fichier mp3 est en cours de lecture afin que nous puissions mettre à jour les boutons pour afficher l'état approprié, activer les propriétés "buttonMode" et "enabled".
Nous utilisons "Minuterie" pour afficher la position actuelle du son en secondes. Avec "Minuterie", vous pouvez exécuter des méthodes dans des séquences de temps.
updateTime = new Timer (100); updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start ();
Ici, la première ligne crée un nouvel objet "Minuteur" avec un intervalle de 100 millisecondes. Vous vous demandez peut-être pourquoi nous voulons mettre à jour l'heure actuelle tous les 100 millisecs… 1 seconde est trop lente pour notre lecteur et même 0,5 seconde est trop lente. Je veux que le temps de mise à jour soit très fluide. Plus sur la minuterie.
Nous avons également besoin d'un EventListener pour effectuer quelque chose toutes les 100 millisecondes. L'événement "TIMER" exécute la méthode "getMP3Time" que je passerai à l'étape suivante..
La ligne 4 commence notre "minuterie".
var si: String = id3Data.artist + '-' + id3Data.songName; si = si.toUpperCase (); display.playerTexts.songInfo.autoSize = TextFieldAutoSize.LEFT; display.playerTexts.songInfo.wordWrap = false; display.playerTexts.songInfo.text = si; Tweener.addTween (display.playerTexts, x: 60, time: 1);
Dans le dernier bloc, nous montrons les métadonnées id3 à l'utilisateur. Le nom de l'artiste et le nom de la chanson sont insérés dans une nouvelle variable dans la première ligne. C'est parce que je veux mettre toute la chaîne en majuscule dans la ligne suivante. Nous utilisons la police bitmap, donc je pense que ça a l'air mieux en majuscule.
À la ligne 3, nous nous assurons que le champ de texte "songInfo" est suffisamment long pour afficher la chaîne "si". La ligne 4 évite le retour à la ligne dans le champ de texte et à la ligne 5, nous affectons simplement la chaîne "si" au champ de texte "songInfo".
La dernière ligne fait glisser le clip "playerTexts" vers "display".
Il est poli de montrer à l'utilisateur combien les données du fichier mp3 sont chargées. Nous avons notre préchargeur, mais je pensais qu'il nous faudrait aussi un champ tampon car notre chanson commence à jouer après le chargement de 50%. Cette méthode continue là où la méthode "mp3FileLoading" s'est arrêtée.
fonction privée updateBufferField (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%';
Il n'y a rien de spécial ici, juste une fonction privée avec deux lignes d'action. Comptage en pourcentage de base et affectation au champ de texte "tampon".
Je montre cette méthode tout à la fois parce que ce n'est que des mathématiques et un codage vraiment basique..
fonction privée getMP3Time (e: TimerEvent): void var totalMinutes = Math.floor (mp3File.length / 1000/60); var totalSeconds = Math.floor (mp3File.length / 1000)% 60; var currentMinutes = Math.floor (mp3FilePosition.position / 1000/60); var currentSeconds = Math.floor (mp3FilePosition.position / 1000)% 60; si (totalSecondes < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds;
Dans les 4 premières lignes, nous comptons les temps dont nous avons besoin. C'est un peu délicat car toutes les valeurs renvoyées sont en millisecondes. Nous arrondissons également les minutes et les secondes.
Les lignes 8 et 9 permettent d’ajouter un zéro supplémentaire avant les secondes si ces valeurs sont inférieures à 10 (il ne s’agit que de peaufiner et pas obligatoire). Pour moi, le champ de texte "time" est un peu plus propre.
La dernière ligne montre le temps entier à l'utilisateur.
Continuons avec le code très basique.
fonction privée songFinished (e: Event): void mp3FilePosition.removeEventListener (Event.SOUND_COMPLETE, songFinished); updateTime.removeEventListener (TimerEvent.TIMER, getMP3Time); bs.buttons.y = buttonPos [3]; mp3FilePosition.stop (); playingSound = false; songReachedEnd = true; soundPosition = 0; display.playerTexts.times.text = 'JOUER ENCORE?';
La méthode d'événement "songFinished" est lancée à chaque fin de lecture du morceau..
Dans les deux premières lignes, nous supprimons les EventListeners inutiles. Ensuite, nous montrons le bouton de lecture désactivé à l'utilisateur et arrêtons le fichier mp3. L’arrêt n’est pas obligatoire, mais nous le faisons au cas où.
"playingSound" est défini sur false et "songReachedEnd" sur true. Dans la dernière étape, vous voyez pourq
