Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

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

Importar Video

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.

Seleccionar Video a Importar

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)

Modo de Despliegue

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

Perfil de Codificacion

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.

Personalizacion de Pantalla

Ahora aplicar el clásico next next y nos vamos a la librería de flash, en ella encontraremos esto:

Eliminacion de Elementos

Y en el stage, encontraremos esto:

Eliminacion del Stage

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

Nuevo 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í.

Propiedades del Nuevo Video

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

Ubicando mi Video

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

Dimensiones del Video

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.

Ordenar Capas

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

Barra de Progreso

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

MC Barra de 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

MC Scrub de Botonera

Ahora, seleccionamos todos los elementos del mc barra y lo alineamos a la izquierda (control+k para activar el panel aling)

Alinear Elementos

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.

Boton Play

Boton Pausa

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.

Boton de Sonido

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)

Boton Mute

Lo continuaremos en la próxima entrega...

Comentarios de Reproductor de Video Adobe Flash

↑ Tutorial

  • ksdepor

    ksdepor

    2007-06-01 19:54

    est de la ptm
  • mimoka

    mimoka

    2007-08-20 18:33

    Hola

    ¿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

    tuchico

    2008-01-06 23:46

    HOLA SAPINTO PARECE BUENO EL TUTORIAL , PERO SIN LA PARTE QUE FALTA NO SE PUEDE ACABAR EL REPRODUCTOR, POR ESO QUISIERA QUE COMPLETES EL TUTORIAL Y SERIA MEJOR SI LO HACES EN VIDEO YA SEA WSF O FLV,LO MAS PRONTO POSIBLE
    GRACIAS
  • pasencioo

    pasencioo

    2008-02-22 18:11

    EXCELENTE SAPINTO, PERO ME DEJASTE CON LAS GANAS YA QUE NO HAS TERMINADO EL TUTORIAL Y POR LO QUE VEO EN EL PRIMER COMENTARIO YA LLEVA 8 MESES PUBLICADO,QUE PASA?.
    IGUAL SE AGRADECE, PERO TERMINE LO QUE EMPIEZA.
  • maucker2004

    maucker2004

    2008-11-27 15:54

    excelente