<a href=”http://www.
Bueno, este tutorial lo hice en funcion de un multimedia que en “aquel tiempo” era importante. Pero bueno me parecio interesante para algunas personas saber que se pueden conseguir lindos efectos e invito a los programadores o desarrolladores que traten de hacer el efecto ^^ Bueno empezamos el tutorial.
Esta animacion lo hice por inspiracion de un video institucional que vi (no dire el nombre) y lo plasme en papel, y decidi hacer un tutorial ya que me parece un efecto interesante que se puede usar en todo momento.
1. Empezamos esta animación, creando un cuadrado de 80 x 80 px , le ponemos color de fondo, color de borde y le damos un valor de 1 o menos al borde dependiendo de cómo queramos que se vea.
2. continuación, el cuadrado que dibujamos, lo multiplicamos varias veces hasta formar una franja horizontal. En esta animación 12 cuadrados de ancho y 4 cuadrados de alto. (en total 48) A esta capa la llamaremos “cuadrados”, recordar que todos los cuadrados están en una sola capa y ninguno se cruza entre si, por ello hay que tener mucho cuidado. Así quedaría nuestra franja de cuadrados.
3. Importar una imagen a nuestra biblioteca, la que queremos que se vea en nuestra animación.
4. Seleccionamos cualquiera de nuestros cuadrados y le hacemos doble clic, ya seleccionado (borde y fondo) vamos a nuestro panel de color y en el tipo, seleccionamos Bitmap o Mapa de bits, nos saldrá la imagen que hemos importado.
Cuando clickeamos en la imagen, el cuadrado que hemos seleccionado cambiará y aparecerá parte de la imagen. Ahora viene lo interesante. Queremos que en el resto de cuadrados se vea también la imagen, entonces debemos seguir el siguiente procedimiento:
5. Seleccionamos nuestra herramienta Saint bucket Tool o Bote de pintura y clickeamos cada uno de los cuadrados incluyendo el cuadrado que seleccionamos al principio.
Se verán varias miniaturas de la imagen, pero no se preocupen es solo un inicio, quedaría así
6. Lo siguiente es seleccionar la herramienta Gradient Transform y elegir cualquiera de los cuadrados, preferible el del centro. Esta herramienta nos permitirá ampliar nuestra imagen por todos los cuadrados por eso cada uno de los cuadrados le pusimos de fondo la misma imagen.
Detalle del procedimiento de ampliación.
7. Estiramos nuestra imagen, de cualquiera de las formas vistas quedando de la siguiente forma
Hasta ahora hemos completado la primera parte de la animación, si nos ponemos a animar cada uno de los cuadrados nos llevaremos una gran sorpresa, solo animaríamos los cuadrados y la imagen se vería una parte para todos y todo el trabajo que nos costo animarlo seria en vano.
Por eso explicaremos como animarlo sin problemas:
8. Seleccionar todos los cuadrados.
9. Seleccionamos el único fotograma de la capa “cuadrados”, y vamos al menú Modify./Time line/ Distribute to Layers, tal como se muestra en la imagen.
En español seria Modificar / Línea de Tiempo / Distribuir en capas.
Luego de unos segundos , la cantidad de cuadrados será como la cantidad de capas que aparecerán, es decir bastantes capas, en esta animación son 48 capas y el orden de ellas dependerá en el orden como las creaste, copiaste y también donde lo colocaste.
10. Lo siguiente es animar cada una de las capas con interpolación de movimiento donde la primera capa tendrá alfa 0 y el último alfa 100, dando 5 fotogramas de tiempo, como se muestra en la imagen.
11. Mover el orden de los fotogramas, que sean consecutivos uno del otro.1
Avanzamos 1 fotograma para cada uno de las capas interpoladas, tratando de que ninguna quede encima de la otra, para que todos los cuadrados aparezcan tal y como se muestra en la imagen.
1 En este caso se hizo en desorden para que tuviera una mejor presentación.
12. Insertar 3 fotogramas después del último fotograma clave.
13. Inserte 1 fotograma clave después de la ultima interpolación, para poder alinear todos los fotogramas dando punto final a toda la animación tal y como se muestra en la imagen
Si presionan ctrl. + Enter, aun no se vera nada, solo una parte de la imagen repetida varias veces, el detalla de esta animación es que tenemos que fusionar parte de la imagen con el cuadrado.
14. Seleccionamos la capa, la ponemos en cualquiera de los fotogramas clave y hacemos doble clic, como si fuéramos a modificar el objeto pero solo lo agruparemos, con ctrl. + G o menú Modificar / Agrupar.
A cada capa le hacemos lo mismo, agrupamos el cuadrado, ahora presionen ctrl. + Enter y verán la animación casi completa
15. ¡Ya tenemos la animación! Ahora mencionaremos los detalles para darle más vida. Nos posicionamos en la última capa y en el último fotograma clave e insertamos 10 fotogramas y en el último ponemos fotograma clave presionando F6 y a los demás igual, pero solo presionando la tecla F6, quedando la línea de tiempo de esta manera.
La razón por la que se inserto esos 10 fotogramas era para cuando termine de armarse nuestra imagen aparezca la imagen original, entonces todos los últimos fotogramas tendrán que tener alfa a 0.
16. Insertamos una capa que la llamaremos “Imagen” e insertamos nuestra imagen, si, la misma imagen con la que creamos la animación de los cuadraditos y la ubicamos en los últimos fotogramas que agregamos. Creamos una interpolación que empiece en alfa 0 y al final alfa 100 y para que se detenga cuando termina la animación insertamos otra capa y ponemos Stop al final, tal y como se muestra en la imagen.
Un detalle adicional (para terminar) Hagamos una pequeña transparencia que muestre un brillo especial antes que aparezca parte de la imagen.
17. Creamos un cuadrado del mismo tamaño que usamos para la animación solo que no le daremos un color sólido, sino que sea medio transparente. A este cuadradito convertimos en Movie Clip pulsando F8, luego hacemos una interpolación poniendo el fotograma 1, 5 y 10 como fotograma claves, solamente al primer y último fotograma se le pone alfa a 0
Luego insertamos otra capa y ponemos un fotograma clave vació (F6) con un Stop. Así se vería.
18. Para terminar esta animación solo resta insertar el cuadrado transparente antes de cada interpolación, para que cuando empiece la animación haya un ligero resplandor y aparezca parte de la imagen.
20. Para poner el cuadrado insertamos una capa encima o debajo de la interpolación y no es necesario que termine o se extienda hasta el final, solo que dure lo que dura la animación del cuadrado en esta caso 10 fotogramas, y quedará así.
Ahora solo no resta presionar Ctrl + Enter y quedaria asi nuestra animacion
Claro, yo aumente lo de Pley XD. Espero que les haya gustado.
Muy bien Pley! Me parece excelente que te hayas animado a publicar tutos (espero que no sea el último)
Es cierto que esto podría hacerse por medio de código, pero celebro tu técnica para no-programadores.
Bueno, escuche que hay, pero hasta que no vea pos sera la unica forma ^^
es cierto, esta chevre, me gusta… y no se si será porque es muy tarde, pero no se me ocurre como hacerlo por código
así que considero valido tu código ^^ felicidades, y como dice The Fricky!, esperamos que no sea el último
Creo que con onEnterFrame’s y randoms se podría lograr un efecto muy parecido y sin tantos frames. Pero me da weba hacerlo, así que este ya está bien XD