Comunidad de diseño web y desarrollo en internet online

Como crear un ‘Video Loop’ [1ra parte – Marco Teórico]

Citar            
MensajeEscrito el 31 Dic 2005 05:16 am
Que tal, en honor a mis primeros posts en el Clab, donde me preguntaba que ‘como rayos es que se hacen esos efectos en flash!?!?’ efectos que, aunque son muy ‘cool’ si se manipula de forma exagerada o sin conciencia, nuestro swf se verá enormemente afectado, y lo digo de forma literal ‘enorme’ por que en realidad lo que se esta empleando es una secuencia rápida de imágenes [mapbits] o como lo llamamos por aquí… video ;D ::

Ahora empezare solo con dar una introducción de lo que podemos hacer, en primer lugar hay que tener en mente que esto esta fuera de flash… es decir, se requiere otro tipo de software, pero el hecho es que al final este será exportado para que nosotros lo podamos manipular en flash ::

[Loop] que quiere decir bucle o ciclo, no es mas que ‘en términos generales’ una secuencia [esta puede ser corta o larga] que, al finalizar este e inmediatamente se regresa al inicio de la secuencia [roollback], da la ilusión de continuidad infinita… un ejemplo común de loop puede ser un sonido.

¿Qué requerimos?

- Para empezar necesitaremos de un buen software de manipulación de video

*Adobe After Effects
*discreet Combustion
*Final Cut pro



… o cualquier otra cosa que genere efectos de video, en mi caso use Cinema 4D, este no es precisamente un manipulador de video [es animación 3D como Maya, 3Dmax] pero si genera efectos que se exportan como video y este es manipulable en alguno de los programas anteriormente mencionados, yo uso After Effects ::

- Tener nociones básicas de conceptos técnicos de VIDEO

- Y mucha atención para entender el siguiente concepto, ya que este será nuestro ‘core’ en este asunto ;)

Gracias a que el gran FSM me iluminó con su excelsa luz anoche, pude encontrar un método que resultó perfecto para este tema… y de hecho es el método que utilizan los grandes como [advanceflash] para realizar loop :: [Que me demuestren que no es así XD]

Ahora entremos en materia ::

Considerando que tenemos una secuencia de 10 [fotogramas o segundos, úsese a su mayor comodidad]



Con la gráfica anterior tenemos lo siguiente ::

Cada cuadrito con su respectivo numero representa UN segundo del video ( 29.97 frames trabajando a ese frame rate )


Timeline :: la duración de nuestro proyecto, cuando trabajamos con loop, esto pasa a ser tercera prioridad, [por que en realidad estaremos trabajando con otro timeline… la workspace area]

Workspace :: Espacio de trabajo o también úsese como ‘render area’ [área de generado], es el intervalo de la línea de tiempo que estaremos usando… es decir, del total, solo se usara esa parte.

Cue ::
[cuepoint] en este caso se considera como el INICIO-FINAL de nuestra secuencia, cuando la línea lectora llegue a este punto (el final) esta se regresara al inicio haciendo el rollback, esta parte es de suma importancia ya que así determinamos la continuidad de nuestro loop, así como también es importante comentar que en realidad estos puntos no son mas que el area que ocupa nuestra Workspace, en resumen los cuepoints marca el principio y el fin de nuestra area de trabajo… [no se confundan :P errr para los flasheros de corazón es el gotoAndPlay(“”) XD]

Fade-out :: esto tal vez es lo más importante de todo junto con los cuepoints, ya que como muchos de ustedes saben, el Fade-out [desvanecimiento] es que nuestro video se desvanezca controlando la… puede ser TRANSPARECY [transparencia], la OPACITY [opacidad] o el ALPHA [canal alpha… (como en flash) :P] dependiendo de que software usen, puede ser cualquiera de estas 3 [técnicamente son los mismo]
Más adelante detallaremos estos dos últimos puntos.

Wasted :: es parte del video que queda fuera de nuestra workspace, este no será manejado al final.

Ahora dense cuenta como la numeración (viéndolo desde una perspectiva correcta) es continua, puesto que al final tenemos un 3 y al hacer el rollback tenemos un 4…. Osease que si se cumple la continuidad [… 3 – 4 …] recuerden muy bien esta parte, ya que si no hay continuidad no tendremos el resultado deseado [se notará cuando se hace un cambio drástico :ownz:]. Pero esto solo es una parte de este chiste, ahora entremos con el Fade-out en detalle…

Ya sabemos en que consiste un fade-out (desde siempre la gran mayoría lo sabia ;)), en la gráfica podemos observar que inicia desde el fotograma 8 y termina en el 10 es decir, mas técnicamente seria “hay un cambio de Opacidad (after effects) de 100% a 0% desde sec 8 hasta sec 10 [de la línea de video de arriba]”. Puesto que tenemos nuestra segunda línea de video [la de abajo] pasa desapercibido el cambio como por arte de magia [debido a que es la misma secuencia pero en tiempos distintos], otro aspecto muy interesante es la DURACIÓN DE NUESTRO FADE como ven es de 2 segundos, esta parte puede variar, es donde entra su lado artístico y determinan la duración de este, yo use en este ejemplo 2, pero no precisamente tiene que serlo, pudo haber sido 1 o más de 2 [ya notaran que pasa cuando se van a los extremos XD] es por eso que recomiendo un intervalo no menor de 2 ni mayor de 5, esto mas que nada dependiendo de con que tipo de efecto piensan trabajar y que tan sincronizado este el mismo (detalles, detalles, detalles U_U….) esto aunado con la continuidad del cuepint…. JUAS!!!! Un loop :cool:

Otro detalle de la grafica es el EFECTIVE VIDEO, con esto quiero decir que de los 10 segundos del video ‘bruto’, solo 8 son efectivos [y solo 6 son únicos] en el loop… y esto también puede variar por… en fin… [cualquier factor cambia todas las propiedades de nuestro loop.

Ya por último, el generado de efectos se pueden dar dependiendo de que software se use, en el caso de after effects está la Herramienta de Efectos [Effects & Presets >> RENDER]… que trae desde hacer un efecto luz [láser, rayos etc.]… hasta bastas y complicadas fractales. Cinema 4D trae lo suyo también… [en materia de animación de texturas] lo cual lo aprovechas bastante bien ;)



Conclusiones ::

Practicando se adquiere la habilidad para determinar la gran cantidad de variables que esto conlleva.

Recuerden que esto fue más que nada en el marco teórico…. Como pudieron ver no indique como se hace ni nada por el estilo ya dentro del programa, pero si ya tienen algo de practica en estos paquetes me parece que ya pueden empezar a trabajar :D

Esta es solo la primera parte de esta entrega especial a ya casi al segundo aniversario del Clab [yo conozco Cristalab desde que estaba en pruebas, pero no fue hasta abril de este año [2005] que me integré al foro] ;) ::




Cinema 4D flame Shader


En este campo… que… aunque parece muy simple si lleva su tiempo manipularlo bien ;) :: Nos faltaría cubrir aspectos como la optimización para poder emplearlo con sabiduría en flash… tengan en cuenta, que no es bueno incluir videos con efectos largísimos [si… te lo estoy diciendo a ti que apenas estas empezando :punal:] y que su uso se puede emplear en botones y uno que otro MC…. Vamos! Hasta en el que nuestro prilouder se vea cool::




^_^ es todo por ahora…
Esperando sus comentarios…

...y es que la verdad no me tenia que ir de este 2005 sin publicar un tutorial XD


[glsmaster]Muevanlo a donde consideran que es su lugar, lo puse aqui para que lo viera más gente[/glsmaster]

Por gabovanlugo

651 de clabLevel



Genero:Masculino  

Code Designer

firefox
Citar            
MensajeEscrito el 31 Dic 2005 05:46 am
te cuento que será publicado para el 2006 :lol:


se ve muy interesante glsmaster, no lo he leído aún :P


saludos :)

Por Maikel

BOFH

5575 de clabLevel

22 tutoriales
5 articulos

Genero:Masculino   Team Cristalab

Claber de baja indefinida

firefox
Citar            
MensajeEscrito el 31 Dic 2005 06:14 am
ni yo tampoco le he leido ahorita traigo una huev....

pero mañana l leo ntp ;-) se ve bien

Por Mago.ozkuro

Claber

1798 de clabLevel

10 tutoriales
1 articulo

  Héroes Premio_Secretos

Estacion espacial CLAB®

firefox
Citar            
MensajeEscrito el 31 Dic 2005 05:09 pm
^^ muy bueno, lástima que es teórico, pero da luz de que herramientas usar, ahora solo me queda experimentar... como siempre ^^

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

firefox
Citar            
MensajeEscrito el 03 Ene 2006 10:16 pm
KE bien!!! me estaba preguntando esto ::

y caubdo planeas poner en linea el practico?!?! :D

saludos,.,

Por ekinoxo

0 de clabLevel



 

msie
Citar            
MensajeEscrito el 04 Ene 2006 04:14 am
:o me parece realmente algo muy interesante, como poder hacer efectos muy buenos sin por eso crear un archivo de 10 mb jajajaja, creo q a muchos nos servira :lol: :lol: :lol:

Por Koeth

655 de clabLevel

1 tutorial

 

El DeFectuoso

firefox
Citar            
MensajeEscrito el 05 Ene 2006 02:01 am

ekinoxo escribió:

y cuando planeas poner en linea el practico?...


estamos en eso, estoy seleccionando algunos otros ejemplos que pudieran ser algo interesantes, mientras checate www.advanceflash.com :: [no :spam:]

por otra parte bienvenido al foro ;)

Por gabovanlugo

651 de clabLevel



Genero:Masculino  

Code Designer

firefox
Citar            
MensajeEscrito el 05 Ene 2006 03:32 am
glsmaster; me gusta, pero como tuto esta muy "introductorio", haste una segunda parte mas practica y lo publicamos junto con bombos en el blog :)

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.