Share
Vamos a construir un reproductor de mp3 simple que puede incrustar en cualquier página web (la página de inicio de una banda, por ejemplo). Siguiendo esta guía, aprenderá cómo importar gráficos de Illustrator, cómo crear sprites de botones con movieclips y cómo usar las clases Timer y Sound. Aquí vamos…
Primero, pasaré por lo que necesitamos para completar este tutorial:
He usado la clase de terceros Caurina Tweener para interpolar elementos en la pantalla. Esto no es obligatorio porque puede usar la propia clase de interpolación de Flash para hacer el mismo trabajo. Eso sí, si no estás familiarizado con Caurina, te sugiero que eches un vistazo. Tween Lite es otra tweener de terceros que puede haber escuchado. Es una clase de interpolación muy poderosa que también podría usar para este proyecto si quisiera. Puedes encontrar Caurina Tweener en el código fuente..
Primero necesita crear un nuevo documento Flash Actionscript 3.0. No es necesario ajustar ninguna propiedad del documento..
Vaya a Flash> Preferencias> Importador de archivos AI en Mac o Editar> Preferencias> Importador de archivos AI en Windows. Asegúrate de tener la siguiente configuración:
Guárdalo y dale el nombre "SimpleMP3Player.fla". También copie el directorio "caurina" y "tarzan.mp3" en el mismo lugar que su archivo .fla.
Ahora estamos listos para importar el archivo de Illustrator. Vaya a Archivo> Importar> Importar a escenario. Busque "simplemp3player.ai" en el directorio del paquete fuente "ai", presione OK y aparecerá la pantalla como se muestra a continuación. Configure la opción Convertir en capas "Capas de Flash" para que obtenga todas las capas contenidas en el archivo ai directamente en Flash. Las siguientes dos opciones, como se muestra en la imagen, colocan todas las ilustraciones en las mismas coordenadas que en el archivo ai y cambian el tamaño de su documento Flash exactamente al tamaño que necesitamos.
Al hacer clic en Aceptar en el cuadro de diálogo de importación, su documento debe verse como la imagen que se muestra arriba.
Probablemente notó los botones de reproducción y pausa en la última imagen. Esos serán los sprites de nuestro botón que controlan el sonido. Todos los botones están agrupados en un grupo..
Seleccione solo el grupo de botones y presione F8 para obtener la pantalla "Convertir a símbolo". Asígnele el nombre de "botones" y asegúrese de que haya seleccionado MovieClip como el tipo. Establezca el registro en la esquina superior izquierda y haga clic en Aceptar. Cambie al panel Propiedades y dé al objeto un nombre de instancia "botones". La imagen de abajo ilustra estos pasos visualmente:
Tenemos nuestros botones en un movieclip, pero la máscara no está incluida. Necesitamos un movieclip más para unirlos a todos..
Seleccione los botones movieclip y el objeto máscara. De nuevo presiona F8 y ahora dale un nombre de "buttonSprite". También recuerda darle un nombre de instancia. Esta vez "bs" (sé lo que estás pensando, pero esta es una abreviatura de ButtonSprite).
Ahora nuestro botón sprite está casi listo para rockear. Todo lo que tenemos que hacer es enmascararlo para que muestre solo un botón a la vez.
Haga doble clic en su botón. Cree una nueva capa sobre la capa activa y llámela "máscara". Seleccione el objeto de máscara y córtelo usando "Cmd + X" en Mac o "Ctrl + X" en Windows. Seleccione la capa de máscara y pegue usando "Cmd + V" en Mac o "Ctrl + V" en Windows. No importa dónde esté su objeto de máscara porque a continuación lo alineamos con el lugar correcto.
Con la máscara aún seleccionada, abra el panel Alinear (Ventana> Alinear) y asegúrese de presionar el botón "Al escenario". Ahora presione los botones "Alinear borde superior" y "Alinear borde izquierdo" y su objeto de máscara debería estar en la posición correcta, la esquina superior izquierda de su clip de película.
Lo único que queda por hacer es enmascarar los botones. Haga clic derecho sobre la capa de máscara y elija Máscara.
Puedes ver el efecto al instante; solo un botón es visible.
Olvidemos por un momento los botones y enfoquémonos en la pantalla del reproductor de MP3. Te mostraré cómo construir este elemento de visualización manualmente. Se podría hacer con AS3, por supuesto, pero hagámoslo manualmente esta vez.
Primero seleccione el elemento de máscara desde la capa de máscara. Conviértalo en un movieclip y asígnele el nombre "displayMask". Utilice este nombre como el nombre de la instancia también. La máscara para mostrar está lista, así que oculte la capa. A continuación, cree una capa entre la capa de botones y la capa de máscara. Nómbrelo "texto". Seleccione la herramienta Texto en la paleta de Herramientas y use las opciones que se muestran en la imagen a continuación:
Necesitamos campos de texto para mostrar nuestra información (artista, nombre de la canción, porcentaje de carga y duración de la canción). Crearemos campos de texto manualmente al escenario..
Primero dibuje los archivos de texto en la capa de texto como se muestra en la siguiente imagen. Convierta los tres campos de texto en un único clip de video llamado "playerTexts". Crea un campo de texto más y llámalo "precargador". No necesitas convertir esto en un movieclip.
Todo lo que tenemos que hacer es incluir nuestro nuevo campo de texto-cargador y reproductor -Texts-movieclip en un movieclip para que podamos controlar los textos cuando nos guste..
Seleccione el campo de texto del cargador y playerTexts-movieclip y presione F8. Asígnele un nombre y un nombre de instancia de "pantalla". Ahora que hemos completado nuestra jerarquía de visualización, debería verse así:
Para escribir un ejemplo de datos en songInfo-textfield tenemos que escribir la siguiente línea de código:
display.playerTexts.songInfo.text = 'Aquí es donde ponemos el nombre del artista y la canción';
Así que ahora tenemos listos todos los elementos gráficos que necesitamos para el reproductor de MP3. A continuación vamos a saltar profundamente en el código, así que bucea conmigo!
Para que el código funcione, necesitamos crear la clase de documento. El código de clase de documento se ejecuta primero cuando se reproducen archivos .swf. Ya no necesita escribir su código en la línea de tiempo y su clase es más fácil de importar a otro archivo .fla en el futuro si es necesario..
Ir a Archivo> Nuevo. Seleccione "Archivo de acciones" en la ventana que se abre y haga clic en Aceptar. Guarde el archivo en la misma carpeta que su archivo .fla y asígnele el nombre "SimpleMP3Player.as".
Ahora asigne su nuevo archivo .as como clase de documento. Haz clic en el escenario y ve al panel de Propiedades. Allí encontrará el campo "Clase" donde debe ingresar el nombre de la clase que ha creado. Ingresa "SimpleMP3Player" y haz clic en el botón pequeño lápiz. Si escribe correctamente el nombre de la clase, el archivo "SimpleMP3Player.as" debería estar activo. De lo contrario Flash lanzará un error..
El código da vida a todo. Aquí está el ActionScript completado, lo explicaré bloque por bloque. Verifique también el código fuente del paquete fuente, lo he comentado de principio a fin..
Accentsconagua
paquete import flash.display.MovieClip; import flash.events.Event; import flash.events.EventDispatcher; importar flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.events.ProgressEvent; import flash.events.TimerEvent; import flash.media.Sound; importar flash.media.SoundChannel; importar flash.media.ID3Info; importar flash.net.URLRequest; import flash.utils.Timer; importar flash.text.TextField; importar flash.text.TextFieldAutoSize; importar caurina.transitions.Tweener; clase pública SimpleMP3Player extiende MovieClip // Cree algunas variables que necesitamos privadas var mp3File: Sound; private var mp3FilePosition: SoundChannel; var privado id3Data: ID3Info; var privado id3InfoAvailable = falso; private var updateTime: Timer; Private var playingSound: Boolean = false; privado var soundPosition: Number; private var songReachedEnd: Boolean = false; private var buttonPos: Array = new Array ('0', '-36', '-72', '-108', '-144', '-180', '-216', '-252'); función pública SimpleMP3Player () display.playerTexts.x = -73; display.mask = displayMask; bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3]; loadMP3 (); función privada 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 (nueva URLRequest ('tarzan.mp3')); Tweener.addTween (display.preloader, x: 96, time: 1); función privada 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); función privada mp3FileLoaded (e: Event): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, time: 1); función privada errorLoadingSound (e: IOErrorEvent): void trace ('Error al cargar el sonido:' + e); función privada getID3Data (e: Evento): void id3InfoAvailable = true; id3Data = mp3File.id3; función privada playMP3 (useSp: Boolean, sp: Number): void if (useSp) mp3FilePosition = mp3File.play (sp); else 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); función privada updateBufferField (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%'; función privada 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 (totalSegundos < 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 // Lugar donde todas las importaciones de clases se hacen públicas class SimpleMP3Player extiende MovieClip public function SimpleMP3Player ()
Nuestro punto de inicio se ve como el ejemplo anterior. Recuerde que el nombre de la clase debe ser el mismo que el nombre del archivo de la clase de documento. Todo dentro de la función pública SimpleMP3Player se ejecuta justo después de que Flash haya cargado nuestra clase..
Importemos todas las clases que nuestro reproductor de MP3 necesita para funcionar correctamente..
paquete import flash.display.MovieClip; import flash.events.Event; import flash.events.EventDispatcher; importar flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.events.ProgressEvent; import flash.events.TimerEvent; import flash.media.Sound; importar flash.media.SoundChannel; importar flash.media.ID3Info; importar flash.net.URLRequest; import flash.utils.Timer; importar flash.text.TextField; importar flash.text.TextFieldAutoSize; importar caurina.transitions.Tweener;
Todo debería ser bastante sencillo. En la última línea importamos Caurina Tweener. Asegúrese de tener el directorio caurina en la misma ubicación que su archivo .fla.
Todas las variables son privadas. Solo la clase SimpleMP3Player puede usarlos.
privado var mp3File: sonido; private var mp3FilePosition: SoundChannel;
El objeto de sonido mp3File almacena nuestro sonido Tarzan.mp3. mp3FilePosition es un objeto SoundChannel. Necesitamos que nos diga la posición actual de los archivos mp3 en milisegundos. Con este objeto también podemos detener el archivo mp3..
var privado id3Data: ID3Info; var privado id3InfoAvailable = falso;
El objeto id3Data almacena la información id3 de los sonidos mp3. Por ejemplo, el nombre de la canción y el nombre del artista. id3InfoAvailable le dice a nuestro precargador que la información de id3 está disponible para que el código pueda comenzar a reproducir mp3File.
private var updateTime: Timer;
updateTime es nuestro objeto temporizador que actualiza el campo de texto de visualización de tiempos. Puedes encontrar más información sobre la clase Timer aquí. Voy a pasar por esto más tarde.
Private var playingSound: Boolean = false; privado var soundPosition: Number; private var songReachedEnd: Boolean = false;
playingSound es simplemente una variable booleana que nos dice si mp3File se está reproduciendo actualmente. soundPosition almacena un valor numérico cuando los usuarios presionan el botón Pausa para que podamos continuar reproduciendo música desde la posición en pausa cuando el usuario haga clic en el botón Reproducir. songReachedEnd indica que la canción ha terminado de reproducirse.
/ * * 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: Array = new Array ('0', '-36', '-72', '-108', '-144', '-180', '- 216 ',' -252 '); Finalmente, por último, pero no menos importante, nuestra variable de matriz que contiene los botones de movimiento y las coordenadas. Por ejemplo:
bs.buttons.y = buttonsPos [4];
El botón de pausa se muestra en la pantalla. Si usa 0 dentro de los [corchetes] verá el botón Reproducir.
Es hora de ver qué hace nuestro código primero cuando se carga. Manejemos la primera función en nuestro código; La función SimpleMP3Player.
función pública SimpleMP3Player () display.mask = displayMask; display.playerTexts.x = -73;
La función SimpleMP3Player es una función constructora, por lo que tiene que ser pública. Cambiar el nombre a privado causa un error. El estado predeterminado de las funciones es público, por lo que no necesariamente tiene que escribir "público" antes de la función.
Enmascarar con código es muy fácil y directo. En la línea 3 ves el código para el enmascaramiento. Simplemente asignamos el movieclip "displayMask" a la propiedad de máscara del "display" movieclip. Eso es.
La segunda propiedad display.playerTexts.x reubica el movieclip "playerTexts" a lo largo del eje horizontal. Simplemente lo movemos fuera de la vista para coordinar -73. Máscara oculta el movieclip "playerTexts".
bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3];
"Botones" es un clip de vídeo y, de forma predeterminada, cuando el ratón se desplaza sobre él, el cursor permanece como una flecha básica. Al establecer la propiedad "buttonMode" en true, el cursor se convierte en una mano cuando el mouse está sobre. Al principio, queremos que el cursor sea una flecha, por lo que buttonMode se establece en falso. En la misma línea establecemos la propiedad "habilitada" en falso. Eso significa que no se puede hacer clic en el movieclip de "botones". En la línea 2 configuramos la posición de los botones de "botones" para desactivar el botón de reproducción.
La primera línea puede ser confusa, pero si la escribo así ...
bs.buttons.buttonMode = falso; bs.buttons.enabled = falso;
... probablemente puedas verlo más claramente. Ahorro espacio escribiéndolo en una línea.
Todo lo que hacemos ahora es llamar a nuestro método "loadMP3".
loadMP3 ();
Este método es nuestro método principal. Lo que hace es cargar el archivo mp3, declarar los EventListeners necesarios y deslizar el preloader para mostrar.
mp3File = nuevo sonido ();
Esta línea crea un nuevo objeto de sonido. Podemos acceder a todos los métodos y propiedades de la clase de sonido a través de mp3File.
mp3File.addEventListener (ProgressEvent.PROGRESS, mp3FileLoading); mp3File.addEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.addEventListener (IOErrorEvent.IO_ERROR, errorLoadingSound); mp3File.addEventListener (Event.ID3, getID3Data);
La primera línea declara el evento PROGRESS y cada vez que se invoca el evento, llama al método mp3FileLoading. Este oyente tiene algunas propiedades que necesitamos. Primero está el total de bytes que contiene todo el tamaño del archivo mp3 en bytes. El segundo es bytesLoaded que contiene los bytes cargados actualmente. Con estas dos propiedades podemos contar el porcentaje que el archivo se ha cargado y mostrarlo para el usuario.
La segunda línea invoca cuando todo el archivo mp3 se ha cargado. Se llama método mp3FileLoaded.
La tercera línea es para el manejo de errores. Por ejemplo, si no se encuentra un archivo mp3, este evento invoca. Se llama método errorLoadingSound.
En la línea 5, el evento se invoca cuando id3-data está disponible. Se llama metodo getID3Data.
mp3File.load (nueva URLRequest ('tarzan.mp3')); El método de "carga" carga nuestro archivo mp3 Tarzan. Dentro de los paréntesis declaramos una nueva URLReaquest y dentro de ella se encuentra la ruta a nuestro archivo mp3. Nuestra ruta es relativa y tarzan.mp3 debe estar en la misma ubicación que los archivos .fla y .as. Esta línea es la misma que la de abajo. Usa el que prefieras.
var req: URLRequest = new URLRequest ('tarzan.mp3'); mp3File.load (req); Esta es la primera vez que usamos Caurina, así que demostraré rápidamente cómo funciona..
Tweener.addTween (destino, propiedades);
Este es el código base. Destino es donde escribe el nombre del objeto de destino que desea interpolar. En las propiedades usted define lo que quiere hacer con el objetivo. Puede modificar, por ejemplo, las coordenadas x e y, la transparencia, la escala o la rotación..
Tweener.addTween (display.preloader, x: 96, time: 1);
Nuestro objetivo es el campo de texto "precargador" dentro del movieclip "pantalla". La propiedad "x" lo mueve y la propiedad "tiempo" indica el tiempo que tarda la interpolación. El tiempo se mide en segundos. Si quieres milisegundos usa la notación ".5".
función privada 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);
Como mencioné anteriormente, el método "mp3FileLoading" muestra un valor de porcentaje de cuánto se ha cargado el archivo mp3. También comienza la canción cuando el porcentaje sube más del 50%..
currentPercent es para contar el valor de porcentaje. Lo redondeamos con el método "Math.round". La línea 4 escribe el valor de porcentaje en nuestro campo de texto para que el usuario pueda ver lo que está sucediendo con la carga..
Dentro de la declaración "if", verificamos si el porcentaje es superior a 50 y la variable "id3InfoAvailable" es verdadera. Si ambos devuelven verdadero, la instrucción "if" ejecuta todo dentro de los corchetes.
Cuando la instrucción if es verdadera, interpolamos el campo de texto "preloader". Cuando se completa la interpolación, Caurina llama al método "playMP3" y le pasa dos propiedades. Vemos el método "playMP3" en el siguiente paso.
El evento PROGRESS ya no es necesario, por lo que lo eliminamos en la línea 9.
función privada mp3FileLoaded (e: Event): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3ile.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, time: 1);
Este método se invoca cuando se carga toda la canción. Primero eliminamos EventListeners innecesarios. En la línea 5, interpolamos el campo de texto "buffer" a la derecha..
función privada errorLoadingSound (e: IOErrorEvent): void trace ('Error al cargar el sonido:' + e); Este manejo de errores es realmente básico. Solo rastrea errores si ocurren errores.
función privada getID3Data (e: Evento): void id3InfoAvailable = true; id3Data = mp3File.id3;
Configuramos "id3InfoAvailable" en true en la línea 3. El método "mp3FileLoading" verifica esta variable cada vez y comienza el sonido solo si es verdadero. De esta manera, nos aseguramos de que la información de id3 esté disponible para que el usuario vea información real en la pantalla.
En la línea 4 asignamos metadatos id3 de mp3File a un objeto ID3Info llamado id3Data que creamos en el Paso 12.
Este método es el método más vital en nuestro jugador. Veamos el primer bloque..
función privada playMP3 (useSp: Boolean, sp: Number): void if (useSp) mp3FilePosition = mp3File.play (sp); else mp3FilePosition = mp3File.play ();
El método "playMP3" requiere dos propiedades. "useSp" indica "usar posición de sonido" y "sp" es "posición de sonido".
En la línea 3 probamos si "useSp" es verdadero. Si es así, el código reproduce nuestra canción a partir del punto deseado. Este punto se pasa en la propiedad "sp". Si es falso, empezamos a reproducir la canción desde el principio. Todo esto está relacionado con el botón de pausa de reproducción..
playingSound = true; mp3FilePosition.addEventListener (Event.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField);
La línea 1 establece el playingSound en true. Ahora podemos comprobar si el sonido se está reproduciendo y hacer lo que sea necesario..
El nuevo EventListener en la línea 2 se activa cada vez que la canción termina de reproducirse. Se ejecuta el método "songFinished". Tenga en cuenta que agregamos EventListener al objeto mp3FilePosition.
El segundo EventListener nuevo en la línea 3 agrega el mismo evento "PROGRESS" a mp3File como en el inicio del código. Este oyente simplemente enciende un método diferente. El método "updateBuffer" es para actualizar el campo de texto "buffer".
bs.buttons.buttonMode = bs.buttons.enabled = true; bs.buttons.y = buttonPos [0];
La primera línea ya la encontrarás familiar. Nuestro archivo mp3 se está reproduciendo, por lo que podemos actualizar los botones para mostrar el estado apropiado, habilitar las propiedades "buttonMode" y "enabled".
Usamos "Temporizador" para mostrar la posición actual del sonido en segundos. Con "Timer" puedes ejecutar métodos en secuencias de tiempo.
updateTime = new Timer (100); updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start ();
Aquí, la primera línea crea un nuevo objeto "Temporizador" con un intervalo de 100 milisegundos. Quizás se pregunte por qué queremos actualizar la hora actual cada 100 milisegundos ... 1 segundo es demasiado lento para nuestro reproductor e incluso 0,5 segundos es demasiado lento. Quiero que actualice el tiempo realmente sin problemas. Más sobre Timer-class.
También necesitamos un EventListener para hacer algo cada 100 milisegundos. El evento "TIMER" ejecuta el método "getMP3Time" que pasaré en el siguiente paso.
La línea 4 comienza nuestro "temporizador".
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);
En el último bloque mostramos los metadatos id3 al usuario. El nombre del artista y el nombre de la canción se insertan en una nueva variable en la primera línea. Esto se debe a que quiero capitalizar toda la cadena en la siguiente línea. Estamos usando la fuente de mapa de bits, así que creo que se ve mejor en mayúsculas.
En la línea 3 nos aseguramos de que el campo de texto "songInfo" sea lo suficientemente largo como para mostrar la cadena "si". La línea 4 es para evitar el ajuste de palabras en el campo de texto y en la línea 5 simplemente asignamos la cadena "si" a tu campo de texto "songInfo".
La última línea desliza el movieclip "playerTexts" a "display".
Es educado mostrar al usuario cuánto se cargan los datos del archivo mp3. Tenemos nuestro precargador, pero pensé que también necesitaríamos un campo de búfer porque nuestra canción comienza a reproducirse después de que se carga el 50%. Este método continúa donde el método "mp3FileLoading" lo dejó.
función privada updateBufferField (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%';
No hay nada especial aquí, solo una función privada con dos líneas de acción. Porcentaje básico de conteo y asignación al campo de texto "buffer".
Muestro este método a la vez porque esto es solo matemático y es una codificación realmente básica. Vamos a hacerlo de todos modos.
función privada 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 (totalSegundos < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds;
En las primeras 4 líneas contamos los tiempos que necesitamos. Esto es un poco complicado porque todos los valores de retorno están en milisegundos. También redondeamos minutos y segundos hacia abajo..
Las líneas 8 y 9 son para agregar un cero adicional antes de segundos si esos valores están por debajo de 10 (esto es solo un ajuste y no es necesario). Para mí, el campo de texto "tiempo" se ve un poco más limpio..
La última línea muestra todo el tiempo al usuario..
Continuemos con el código muy básico..
función privada songFinished (e: Event): void mp3FilePosition.removeEventListener (Event.SOUND_COMPLETE, songFinished); updateTime.removeEventListener (TimerEvent.TIMER, getMP3Time); bs.buttons.y = buttonPos [3]; mp3FilePosition.stop (); playingSound = falso; songReachedEnd = true; soundPosition = 0; display.playerTexts.times.text = 'PLAY AGAIN?';
El método de evento "songFinished" se inicia cada vez que la canción termina de reproducirse.
En las dos primeras líneas eliminamos EventListeners innecesarios. A continuación le mostramos el botón de reproducción deshabilitado al usuario y detenemos el archivo mp3. No es necesario parar, pero lo hacemos por si acaso..
"playingSound" se establece en falso y "songReachedEnd" en true. En el paso ext. Ve por qué necesitamos la variable "songReachedEnd".
Se puede acceder a "soundPosition" desde cualquier lugar de nuestra clase, por lo que debe establecerse en 0 en este punto. Ahora nos aseguramos de que si el usuario quiere volver a reproducir la canción comienza desde el principio..
La última línea establece el campo de texto "veces" para mostrar "¿REPRODUCIR DE NUEVO?" texto. Nuestros usuarios son los reyes, por eso necesitamos darles toda la información posible..
función privada 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];
