11 de marzo de 2010

Kinemática Inversa en Flash

Inverse Kinematic es una técnica para generar movimientos realistas a partir de uno o varios elementos enlazados que se mueven de manera relacionada. En éste tutorial veremos cómo usar IK en Flash CS4 o posterior:


ik


Uno de los usos de Flash es la animación, cuyo proceso de realización normalmente significa mover elementos en cada fotograma (animación frame to frame). Esta tarea demanda mucho tiempo pues es necesario mover de manera independiente cada uno de los elementos que hacen parte de un personaje. Flash CS4 integra herramientas que permiten trabajar Inverse Kinematic (IK) lo cual como veremos en éste tutorial ahorra tiempo y genera animaciones con movimientos más realistas.


La herramienta base para trabajar IK se llama Bone (Hueso) y su ícono no puede ser más descriptivo tal como puedes observar en la siguiente figura. Esta herramienta permite crear estructuras llamadas Armatures (Esqueletos) basándonos en formas básicas o en grupos de símbolos.


boneTool


Heramienta hueso (Bone Tool)


Para conocer el funcionamiento de la herramienta Bone con una forma básica (shape) seguiremos estos pasos:


Paso 1: Crea un documento nuevo con el tamaño por defecto (550px x 400px).


Paso 2: Selecciona la herramienta Rectangle (Rectángulo) y dibuja un rectángulo de aproximadamente 50px x 300 px.


Paso 3: Selecciona la herramienta Bone (Hueso) y haciendo clic y arrastrando creas el primer Bone, posteriormente creas los siguientes hasta obtener un resultado similar al que ves en la siguiente figura:


armature


Armature creada a partir de una forma o shape


Paso 4: Para ver el resultado simplemente tomas la herramienta Selection (Selección) y arrastras el extremo superior de la estructura que acabas de crear; como puedes ver se genera un movimiento natural y orgánico.


La estructura creada anteriormente se llama una Armature la cual se compone de Bones, éstos a su vez se unen mediante Joints (Uniones). La importancia de los Joints radica en que es el lugar donde se genera el movimiento. Cuando creas una armadura automáticamente Flash crea una capa llamada Armature_1 (el número o índice aumenta en las siguientes capas si creas varias Armatures).


Ahora conoceremos el funcionamiento de la herramienta Bone con símbolos siguiendo estos pasos:


Paso 1: Crea un documento nuevo con el tamaño por defecto (550px x 400px).


Paso 2: Selecciona la herramienta Rectangle (Rectángulo) y dibuja un rectángulo de aproximadamente 80px x 30px y lo conviertes en un símbolo.


Paso 3: Duplicas el símbolo del rectángulo 3 veces.


Paso 4: Con la herramienta Bone creas una estructura similar a la que ves en la siguiente figura:


armature2


Armature creada a partir de varios símbolos


Paso 5: Para ver el resultado simplemente tomas la herramienta Selection (Selección) y arrastras el extremo derecho de la estructura que acabas de crear; como puedes ver se genera un movimiento natural y orgánico igual que en el ejemplo anterior sólo que ésta vez está basado en varios símbolos.


Cualquier Armature (ya sea creada con base a una forma o a un grupo de símbolos) se puede animar. El equivalente a los Keyframes en las interpolaciones se llaman Poses en la animación de Armatures.


Para animar la Armature creada anteriormente seguimos éstos pasos:


Paso 1: Siguiendo el ejemplo anterior, nos ubicamos en el Frame 25 y haciendo clic derecho seleccionamos la opción Insert Pose (Insertar Pose) lo cual genera un Keyframe similar a los generado por el nuevo Motion Tween.


Paso 2: Con la herramienta Selection modificas la posición de la Armature.


Paso 3: Haces clic derecho sobre el Frame 50 y seleccionas Insert Frame (Insertar Fotograma).


Paso 4: Presionando la tecla Cmd/Ctrl haces clic sobre el Frame 1 (que es el Keyframe inicial) lo cual permite seleccionarlo, posteriormente haces clic derecho sobre el mismo Frame y seleccionas Copy Pose (Copiar Pose).


Paso 5: Presionando la tecla Cmd/Ctrl haces clic sobre el último Frame 1 para seleccionarlo, posteriormente haces clic derecho sobre el mismo Frame y seleccionas Paste Pose (Pegar Pose), esto permite que el inicio y final de la animación tengan la misma posición.


Paso 6: Presionas Enter para reproducir la línea de tiempo y ya puedes ver la animación.


También es posible permitir que el usuario interactúe con la Armature en la película publicada para lo cual no puedes tener una animación aplicada a la misma:


Paso 1: Seleccionas la capa donde se encuentra la Armature (esta Armature no puede estar animada) y en panel Propierties (Propiedades), bajo el área Options (Opciones) seleccionas Runtime (Tiempo de ejecución) en la opción Type (Tipo) tal como ves en la siguiente figura:


ikProperties2


Paso 2: Haces un test de la película con el shortcut Cmd/Ctrl + Enter y en el archivo swf resultante puedes usar el mouse para interactuar con el Armature.


Como puedes ver, el uso de IK en Flash abre muchas posibilidades para agilizar el trabajo en animaciones o juegos. En un próximo tutorial hablaremos de la manipulación de las Armatures con ActionScript 3.

No hay comentarios:

Publicar un comentario