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.
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.
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.
ResponderEliminarJORDI.
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 ...
EliminarHola 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!
EliminarMuchas 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í.
ResponderEliminarSi gustas puedes escribir el código como lo estas usando y con gusto lo checaré lo más pronto posible.
Gracias.
esta bonito
ResponderEliminarGracias :)
Eliminarsi puedes mandarme los archivos .fla o el codigo fuente por mail por que tu link esta roto
ResponderEliminardesde ya muchas gracias mi nombre es mariano
Hola, ya he reparado el link, siento las inconveniencias.
Eliminarhola 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....
ResponderEliminarClaro, 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.
EliminarHola 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.
ResponderEliminarHola 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.
EliminarAcerca 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.
Este comentario ha sido eliminado por el autor.
Eliminarlo e descargado .. espero probarlo pronto y por los comentarios que he leído me parecen muy buenoo ojala y así sea
ResponderEliminarOk, gracias, cualquier inconveniente no dudes en comentarlo para resolverlo. Gracias
EliminarHola León, muchas gracias por este tutorial, me ha servido bastante. Un saludo desde Colombia.
ResponderEliminarlo único, es que utilizo varias escenas y cuando regreso a otra escena continua el sonido del video si no doy stop en el video.
ResponderEliminarHola 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
EliminarNo funcionan los enlaces
ResponderEliminar