Reproductor de Video Adobe Flash
Tutorial de Reproductor Flash Video
Tutorial por Sapinto
Interesante Tutorial, de Sapinto donde nos enseña a realizar desde cero un completo Reproductor de Video, explicado paso a paso.
Tal como elQuique me sugirió, y cumpliendo su pedido, aquí hay un tutorial para poner un vídeo con su respectiva barra de desplazamiento y streaming, con dos botones (mute y play/pausa) y un campo de texto que muestra el tiempo transcurrido de la canción.
Primero que nada, importamos el vídeo a flash
Seleccionamos el archivo, en este caso el vídeo drain the blood, altamente recomendado por las voluptuosas nalgas de la vocalísta. bueno y es un buen tema además.
Luego que seleccionamos el vídeo, ajustamos la configuración, en este caso, necesitamos la primera opción, aunque en el próximo paso viene algo mas detallado (esto también puede hacerse con otros softwares, como el sorenson squeeze)
Ahora viene la configuración
En la primera opción ponemos "custom" y le pedimos que muestre "advanced settings".
Aquí se nos despliegan algunas opciones:
Vídeo codec:
En este caso, el vídeo no tiene un canal alpha, por lo que seleccionamos el sorenson pack, onvp6 también sirve, pero solo para flash 8, por lo que si quisiéremos ocupar en otro proyecto (en flash 7 por ejemplo), no va a decodificar correctamente el vídeo ahora si queremos importar un vídeo con transparencias, seleccionamos el onVp6 y le ponemos "encode alpha" (solo para flash 8).
Frame rate:
Vale ponerle los frames del FLA, pero en vídeo es preferible dejarlo "same as source" ya que esto decidira la fluidez del vídeo, en el caso de un minidv ntcs por ejemplo, es de 29.97, en dvPAL es de 25.
Keyframe placement:
Keyframe placement, es el intervalo de tiempo en el que flash codifica el vídeo, esto es útil para la exactitud del seeker, vale decir, si un vídeo tiene un framerate de 30 fps, el intervalo automatico es de 60, entonces el seeker tendrá una exactitud de 2 segundos. en un caso particular, tenia que ser exactamente el segundo para la barra de busqueda, por lo que el keyframe placement debió tener un intervalo de 30 para el vídeo de 30 fps. mientas menor sea el numero, mayor es el peso.
Encode audio:
Este punto es importante para ahorrar peso del flv, ya que si el vídeo original es mono de 90 kbps, ponerlo a estéreo de 128 seria una tontera. en este caso, le baje un poco la calidad en pos de la descarga progresiva (igual se escucha bien, en mi opinión, 96 kbps es óptimo para un buen sonido en web)
Quality:
En este caso, lo dejaremos en médium, vale decir, 400 kps, esa calidad esta bien para el tamaño de este flv.
Resize vídeo:
Bien, la ventana o lugar en donde pondremos el vídeo, nos dara el tamaño que ingresaremos aquí. el mantein aspect es para que el vídeo siga proporcional al aspecto (16:9 por ejemplo). si queremos forzar el tamaño del vídeo, solo desactivamos esta opción, o bien, si queremos recortar la imagen, vamos a la pestaña crop and trim
Importante: la pequeña línea de tiempo ubicada abajo de la imagen, marca los puntos IN y OUT del vídeo, como pueden observar, el IN esta ubicado en la posición 00:00:18.362, esto es útil por si queremos rescatar un segmento del vídeo
Luego tendremos que seleccionar un skin, aquí. hay dos caminos, uno largo, y otro corto, ambos con respectivos pros y contras.
El corto: seleccionen un skin y sigan las instrucciones de flash. (también se puede personalizar un skin predeterminado, pero ese es otro tutorial.
El largo: skin: NONE y continúen leyendo este post para personalizar los botones.
Ahora aplicar el clásico next next y nos vamos a la librería de flash, en ella encontraremos esto:
Y en el stage, encontraremos esto:
BORREN estos dos elementos (el media playback de la librería y el vídeo del stage), ya temenos el flv guardado en la ubicación que le dimos, ese es el que importa.
Una vez que tenemos el proyecto en blanco, vamos a la librería y en la pestaña superior derecha, hacemos click y seleccionamos NEW VIDEO
Ahora le damos un nombre a la caja que contendrá el flv, en este caso: miVideo, tenemos dos opciones:
embedded:
Su nombre lo dice, nos pondrá el vídeo dentro del swf y este quedara de un tamaño de proporciones bíblicas.
vídeo(actionscript):
Es el que marcaremos, ya que lo controlaremos desde ahí.
Luego, arrastramos el símbolo recien creado al stage, verán una caja con una x al medio, ahí. pondremos nuestro vídeo lógicamente nos saldrá "preview not available", ya que es solamente el contenedor, en el cual despues podremos cargar muchos mas videos
Ahora, le damos las dimensiones de nuestro flv y le pondremos como nombre de instancia: miVideo
Importante: para ser mas claro, a todos los movie clips o botones creados, les asignare el mismo nombre de instancia que llevan en la librería
Ahora un poco de orden, para eso son nuestras no siempre bien ponderadas layers, una para el action, otra para el vídeo y otra para los textos. el layer de action bloqueenlo con el candadillo, así no nos confundimos.
Ahora lo interesante: diseñaremos la barra de streaming con su deslizador. en este caso, cree una barra simple, la selecciono y la convierto en mc (f8, aquí. me falto una foto), luego le damos un nombre; barra, despues vamos abajo y le ponemos un nombre de instancia, mi agudo ingenio y enorme creatividad la bautizo como: barra
Importante: si se fijan el ancho de la barra es un numero entero (140) , esto nos servira en el action
Ahora, nos metemos en el mc barra (su doble click), y ahí. Seleccionamos solamente el relleno, que en definitiva marcara el porcentaje descargado del vídeo convertimos en símbolo (f8) y lo llamamos progreso. Ojo también con la opción "registration", en la cual debe estar el punto marcado a la izquierda.
Importante: también le pondremos como nombre de instancia: progreso
Ahora, nos queda diseñar el deslizador, les recuerdo que estamos aun dentro del mc barra. Lo convertimos en símbolo y le ponemos como nombre scrub
Importante: también le pondremos como nombre de instancia: scrub
Ahora, seleccionamos todos los elementos del mc barra y lo alineamos a la izquierda (control+k para activar el panel aling)
Entonces, ahora tenemos que crear un botón de pausa y otro de play. esto es libre, así que su diseño, su F8 y convertir en botón a cada uno. luego le damos nombres de instancia; playButton y pauseButton.
Ahora creamos un mc llamado mute, adivinen su nombre de instancia. es un movie clip algo mas complejo, pero viene detallado y también pueden descargar el .fla por si tienen dudas.
Dentro del mc mute, tendremos diferentes frames con varios nombres, que corresponden a diferentes instancias del raton. esto es para quien no ha considerado trabajar con movie clips en vez de botones, los cuales ofrecen, a mi juicio, mas opciones de animación.
En cada frame hay una instancia diferente, esto es para variar la visualización del botón mute en sus diferentes estados de raton (ver ejemplo... y si tienen dudas, me explayaré mas en este magnifico movieclip)
Lo continuaremos en la próxima entrega...
Comentarios de Reproductor de Video Adobe Flash
↑ Tutorial
ksdepor
2007-06-01 19:54
mimoka
2007-08-20 18:33
¿Donde se puede bajar el fla de este tutorial?
A parte del foro creativo, ¿donde se ve la segunda parte del tutorial?
He seguido los diferentes pasos pero aún asi estoy un poco perdida... Gracias por contestarme
Mimoka
tuchico
2008-01-06 23:46
GRACIAS
pasencioo
2008-02-22 18:11
IGUAL SE AGRADECE, PERO TERMINE LO QUE EMPIEZA.
maucker2004
2008-11-27 15:54