Tsu Informatica

Rompecabeza Cubica | Pley

1 de 9

http://www.4pley.com/2008/01/02/rompecabeza-cubica/

Arte
Materiales de Dibujo
Pensamientos

Rompecabeza Cubica
by Pley on January 2, 2008
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 losprogramadores 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 defondo, 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 ningunose cruza entre si, por ello hay que tener mucho cuidado. Así quedaría nuestra franja de cuadrados.

10/11/2012 11:36 a.m.

Rompecabeza Cubica | Pley

2 de 9

http://www.4pley.com/2008/01/02/rompecabeza-cubica/

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, yaseleccionado (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 siguienteprocedimiento:
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.

10/11/2012 11:36 a.m.

Rompecabeza Cubica | Pley

3 de 9

http://www.4pley.com/2008/01/02/rompecabeza-cubica/

7. Estiramos nuestra imagen, de cualquiera de las formas vistas quedando de lasiguiente 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. Seleccionamosel único fotograma de la capa “cuadrados”, y vamos al menú Modify./Time line/ Distribute to Layers, tal como se
muestra en la imagen.

10/11/2012 11:36 a.m.

Rompecabeza Cubica | Pley

4 de 9

http://www.4pley.com/2008/01/02/rompecabeza-cubica/

En español seria Modificar / Línea de Tiempo / Distribuir en capas.
Luego de unos segundos , la cantidad de cuadrados será como la cantidad decapas 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...