Simular Rotación de un Cubo en 3D

Tutorial flash de dibujo y animación

Tutorial por Jmx de Estilo Flash

En lo particular jmx no es fanático de la animación 3D por que la animación se tiene que hacer en muchas ocasiones imagen por imagen (frame por frame).

Hola amigo pensabas que Superman haría tutoriales para este sitio Web, lamento decir que el esta demasiado ocupado en defendernos de los chicos perversos, es por esta razón que él dejo la misión de los tutoriales en mis manos. El siguiente tutorial explica como simular una animación en tercera dimensión (3D) la animación consta de 7 imágenes, en lo particular no soy fanático de la animación 3D por que la animación se tiene que hacer en muchas ocasiones imagen por imagen (frame por frame). Sin embargo, ¿comenzamos?.

1-. Comenzar por crear un documento (ctrl. + J) de 250 * 250 píxeles de ancho y alto respectivamente.
a) Colocar como color de fondo #CCCCCC.
b) Velocidad de fotograma tendrá que ser 15 fps.

2-. Crear el primer símbolo (ctrl. + F8)
a) Nombrarlo rotar cubo.
b) Dar como comportamiento Clip de película.

3-. Hacer una secuencia de imágenes.
a) Colocar la primer imagen (dibujo) en coordenadas X = 0.0 y Y= 0.0.

4-. Insertar un fotograma clave vacío (F7) en frame # 2.
a) En el fotograma dos dibujar la segunda imagen.
b) Colocar la imagen en coordenadas X = 0.0 y Y= 0.0.

5-. Insertar un fotograma clave vacío (F7) en frame # 3.
a) Dibujar la tercera imagen.
b) Colocar en coordenadas X = 0.0 y Y= 0.0.
c) Si deseas puedes rellenar cada una de las caras del cubo.

6-. Insertar un fotograma clave vacío (F7) en frame # 4.
a) Colocar en coordenadas X = 0.0 y Y= 0.0.
b) Si presionas enter veras que la animación ya va tomando forma.

7-. Insertar un fotograma clave vacío (F7) en frame # 5.
a) Colocar en coordenadas X = 0.0 y Y= 0.0.

8-. Insertar un fotograma clave vacío (F7) en frame # 6.
a) Colocar la imagen en coordenadas X = 0.0 y Y= 0.0.

9-. Para terminar con la secuencias de imágenes.
a) Insertar un fotograma clave vacío (F7) en frame # 7.
b) Colocar la imagen en coordenadas X = 0.0 y Y= 0.0.
c) Recuerda que a la secuencia puedes agregar cuantas imágenes desees, esto con el fin de que la rotación sea más realista. Yo estoy algo fastidiado con tanto dibujito jajajaj.

10-. Crear el segundo símbolo (ctrl. + F8).
a) Nombrarlo animar cubo.
b) Dar como comportamiento Clip de película.

11-. Instalado en el símbolo arrastrar desde la biblioteca.
a) El símbolo rotar cubo.
b) Colocar el símbolo en coordenadas X = 0.0 y Y= 0.0.

12-. Insertar un fotograma clave (F6) en el frame # 100.

13-. Seleccionar el primer fotograma.
a) En la barra de Propiedades seleccionar la opción Animar >> Movimiento.
b) Luego seleccionar la opción Girar >> Antihorario.

14-. Y el último y tan esperado paso es.
a) Regresar a la escena.
b) Arrastrar desde la biblioteca el símbolo animar cubo.
c) colocar el símbolo en coordenadas X = 20.0 y Y= 30.0.

Y así es como se da por concluido el tutorial.

P.D. Presionar ctrl. + enter para visualizar el resultado final, espero que la animación 3d sea de ayuda, si por alguna razón no es de tu agrado y logras hacer una mejor animación envía los archivos y con gusto serán publicados en este sitio Web (envíalo no seas tímido).

Descarga el archivo FLA de este tutorial