Ir al contenido principal

Galería de videos AS3

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

A petición del público (mas bien al amigo Fernando Rojas): una galería de videos!


Bueno primero definamos y delimitemos el problema:

I. Hacer una galería de videos que sea "fácil" de actualizar

II. Que los botones de los videos, tengan una imagen a manera de thumbnail.

III. Pare este ejemplo usaremos 4 videos en formato FLV con sus 4 imagenes respectivas.

Perfecto, en este ejemplo usaremos el componente FLVPlayback de Flash, que es el reproductor de videos nativo de flash, si desean saber un poco más acerca de este componente lo pueden revisar en este link.

Primer Paso: Generar Los Botones.

Debemos crear un MovieClip que llamaremos video_btn, que será la base para los botones de los diferentes videos. en este MC, dibujaremos un cuadro con las esquinas redondeadas de 150x120 y agregamos un UILOADER (¿?), este es un componente que nos ayudará a cargar las imagenes para cada boton de cada video y lo encontramos en en menu Window-->Components. Al agregarlo debemos darle el tamaño deseado.

A este UILOADER le daremos de instancia "portada" usando el panel propiedades.
En este MovieClip llamado video_btn le agregaremos código que permitirá mostrar los videos y la imagen respectiva y hacer que el mouse "detecte" un botón al pasar por encima.

la variable "archivoVideo" la hemos definido como un texto (String) y servirá para definir la ruta de cada video.

Segundo Paso: Hacer la galería.

Ya que tenemos el botón de cada video, generemos un nuevo MovieClip que llamaremos botones, donde colocaremos distribuidamente 4 video_btn y les daremos los nombres de instancias video1, video2... etc.


En este MovieClip botones iniciaremos a cada botón con el video e imagen correspondiente, así que usaremos las acciones para definir estos valores.

Como podemos ver para asignar una imagen a un UILOADER se puede usar su propiedad "source", que de hecho también la usaremos para el video.

Tercer Paso: Al escenario

Debemos colocar el movieClip botones en el escenario, y darle interacción a cada botón. Para esto utilizaremos un ciclo FOR para que cada boton dentro del movie clip tenga una acción.

En este ciclo, se van seleccionando los botones que estén dentro del MC y les agregamos un LISTENER(¿?), que se traduce como la acción mostrarVideo que en este caso se ejecutará al dar click sobre cualquier botón. Para verificar el funcionamiento colocaremso la instrucción TRACE en la acción para que nos muestre el la ruta del archivo que le asignamos a cada botón.
Debemos probar la película para checar que no haya errorres.




Cuarto Paso: Componente de Video

Del mismo panel de Components que usamos para agregar el UILOADER, debemos buscar en la categoría de Video el componente FLVPlayback 2.5 para visualizar los videos que tenemos en nuestra carpeta. Una vez localizado el componente solo lo arrastramos y acomodamos en el escenario, para después darle el nombre de instancia pelicula.

Ahora solo debemos adecuar el código de la acción mostrarVideo para que carge el video a pelicula, quedando asi:
Y listo, cada vez que seleccionemos un botón se cargará el video respectivo. Solo falta adecuar los botones a una navegación apropiada.

Quinto Paso: Navegación de botones

Para navegar los botones de los videos de manera que sea fácil agregar o quitar videos de el movieClip botones usaremos una máscara y tambén una acción que moverá este movieClip.

La máscara será un nuevo MovieClip que llamaremos mascara y que solo tendrá un cuadro de cualquier color dentro que debemos agregar al escenario con el nombre de instacia "cuadro" y adecuarlo a tamaño y posición para cubrir la zona de los botones. Al MC, botones le daremos el nombre de instancia "videos" y en las acciones le asignaremos la máscara.

Finalmente solo debemos hacer una acción que se ejecute constantemente para mover a "videos" según la posición del mouse, y para esto utilizaremos el evento ENTER_FRAME (¿?), que se ejecutará continuamente y al cual le asignamos la acción moverVideos.

En esta acción solamente se calcula y se asigna la posición en X de "videos", dependiendo de la posición del mouse y las posiciones de la máscara y de "videos".

Como detalle final podemos agregar que al principio el reproductor de video "pelicula" sea invisible, ya que no tiene video asignado, pero en cuanto demos click a cualquier video, sea visible.

Quedando finalmente terminado el código:


El archivo final (solo el archivo fuente y las portadas, por el tamaño omití los videos) lo pueden descargar aquí.
Aquí  tambien pueden ver el resultado.
Espero haya sido de su agrado felices líneas de código.

Comentarios

  1. Hola, fantástico tutorial. En estos momentos estoy intentando seguir tus consejos pero llego a un punto que no acabo de entender el problema. El flash me avisa de que las lineas de FOR y la variable de videoBtn no estan definidas y me quedo sin saber solucionarlo. He intentado descargar el archivo tuyo pero tienes el enlace mal. Haber si me puedes solucionar la duda. Gracias de antemano.

    JORDI.

    ResponderEliminar
    Respuestas
    1. Hola Jordi una pregunta , como resolviste el problema - FOR y la variable de videoBtn no estan definidas - tengo el mismo problema te agradeceria mucho tu ayuda saludos ...

      Eliminar
    2. Hola amigos, antes que nada una gran disculpa por no revisar los links, pero he cambiado algunas carpetas y en fin!!, ya están actualizados los enlaces de nuevo y pueden bajar el material y visualizarlo correctamente, gracias por sus comentarios y no duden en solicitar algún tema en específico, gracias y saludos!

      Eliminar
  2. Muchas gracias Jordi por tu comentario y gracias (y una disculpa a todos) de nuevo por avisarme del link roto, ya lo corregí y espero te sirva el archivo fuente. Sería bueno que me especificaras un poco más el error que te indica. Ya que por lo que comentas tal vez es un error del nombre de instancia "videoBtn" que posiblemente no está bien escrito o algo así.

    Si gustas puedes escribir el código como lo estas usando y con gusto lo checaré lo más pronto posible.
    Gracias.

    ResponderEliminar
  3. si puedes mandarme los archivos .fla o el codigo fuente por mail por que tu link esta roto
    desde ya muchas gracias mi nombre es mariano

    ResponderEliminar
  4. hola amigo felicitaciones por tu tutorial muy bueno por otro lado te comento q tengo el mismo problema de Jordi (Acceso a una propiedad videos no definida) te agradeceria mucho si me ayudases y una vez más muy buen tuto saludos....

    ResponderEliminar
    Respuestas
    1. Claro, de primer aintancia, imagino que es algún elemento que no le ha sido asignado el nombre de instancia, esto se hace en el panel de propiedades de Flash (donde aparecen propiedades de posición, tamaño, etc.), pero si el problema persiste, podrías poner el código y el error que te genera por favor?, Gracias y saludos.

      Eliminar
  5. Hola muy buen tutorial, gracias por el aporte, solo tengo una pregunta si quiero que el video sea reproducido desde la web en la programación del movieclip (video1.archivoVideo = "kiss.flv";) se deberia poner la dirección del host donde esta almacenado el flv?, conoces algún host que me puedas recomendar de fácil uso?, muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Francisco, en cuanto a tu primer pregunta: Si, debes colocar la dirección completa del video que quieres cargar, y en caso de querer montar en web un flash que cargue videos de OTRA web es necesario agregar un archivo XML llamado "crossdomain" que dará "permiso" para que otra web acceda a su contenido.

      Acerca de un host que recomiende, pues depende de muchas cosas, como el presupuesto, las características y necesidades del sitio que montarás,etc. Aunque yo creo que muchas veces es mejor contratar un hosting con una empresa del país donde estés, esto para poder tener mejor comunicación en caso de haber problemas.

      Espero esta información te ayude y cualquier otra duda házmela saber!

      Saludos.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  6. lo e descargado .. espero probarlo pronto y por los comentarios que he leído me parecen muy buenoo ojala y así sea

    ResponderEliminar
    Respuestas
    1. Ok, gracias, cualquier inconveniente no dudes en comentarlo para resolverlo. Gracias

      Eliminar
  7. Hola León, muchas gracias por este tutorial, me ha servido bastante. Un saludo desde Colombia.

    ResponderEliminar
  8. lo único, es que utilizo varias escenas y cuando regreso a otra escena continua el sonido del video si no doy stop en el video.

    ResponderEliminar
    Respuestas
    1. Hola Ariel, muchas gracias por el comentario, quiero imaginar que ya lo has solucionado entonces, si tienes algún detalle por favor coméntalo y veremos cómo solucionarlo. Gracias de nuevo

      Eliminar

Publicar un comentario

Entradas populares de este blog

Uso de XML con Flash y Actionscript 3.0 / Using XML with Flash and Actionscript 3.0

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados. En el manejo de tecnologías web, existe una muy importante que nos permite organizar y visualizar información, esta tecnología es el XML que significa algo así como Lenguaje de Marcas (ó etiquetas mas bien) Extensible, si quieren conocer un poco más del tema aquí hay un link (español) y aquí otro (inglés) . Una ventaja de usa esta tecnología es que la información que coloquemos es este tipo de archivos se puede usar para visualizarse en diferentes interfaces con diferente tecnología, por ejemplo: un mismo archivo XML nos puede servir para almacenar el inventario de una tienda y que sea visualizado en una página web usando HTML, al mismo tiempo en una aplicación de escritorio usando AIR ( proximamente un post al respecto ) y hasta un archivo swf local, todas estas aplicaciones utilizando el mismo XML de man

Efecto "Colorear" en Flash

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados. Hace un par de meses tuve que generar para un banner el efecto de una imagen en tonos de grises que al pasar el mouse encima se vaya "coloreando", este ejercicio me pareció divertido e interesante y por esta razón decidí colocarlo en este blog. Puedes comenzar a iluminar la imagen de la tortuga en cuanto aparezca. Para generar este sencillo efecto utilizaremos elementos de: máscaras dinámicas, Sprite , UILoader , además claro de MovieClips y Listeners . Bueno, pues definamos y acotemos el problema: Permitir que el usuario pueda "colorear" una imagen con el mouse. Se debe mostrar una imagen inicial y una final ( mo importa si son iguales o no ). Las imágenes deben de ser externas al flash para optimizar su tamaño. Cuando el usuario presione el mouse y luego lo m