Interactivos con "LoadMovieNum" Botones

En la siguiente dirección se visualiza el interactivo animado


https://4937766831668277238-a-1802744773732722657-s-sites.googlegroups.com/site/mendozaigner/index.swf?attachauth=ANoY7cpRT-uvQclYg83I5E_1_hn_2j7l2Lk7yqqoKqiWTEFaiNXZb-4PL6SW2qPdbzL1qTNgQnDbGFvfeuAIT7-y6xYci9eS5kWgxtDxpgLhEBkvRJQvax4xAInLq8yiFekxoaWQ0SDefbUIZKmrX9fvKdrvwtGdpm9l75F0r_Ga_p1uxY17IGBhTCrkNDNkPgpr--cAP0qt&attredirects=0



En la siguiente dirección se visualiza el interactivo animado


https://4937766831668277238-a-1802744773732722657-s-sites.googlegroups.com/site/mendozaigner/index2.swf?attachauth=ANoY7cp2bYYFTzsnyinwymypLQ8PVUQyLiuS-mEUd-gv-JMrmc-_YTbiREoXepnQfd4ktU882uJzYhadz7yI0zn8H3abVTdxweb8aadNJSGuAMSqSKtnupGK--YPLIc6dRmH8WnOP-2nYf0CAGsJXkI19WGCsOoQSW77jq5xlFGsa5oN9fTSlDaOCtZ-uT5BZsSlDwvq0l2P&attredirects=0

Interactivos

Por si todas las funciones de Flash que hemos visto hasta ahora no fueran suficientes, Flash también nos sirve como herramienta para diseñar interactivos. Esto por medio de la combinación de la técnica de los botones y de la animación al interior de los símbolos. Aquí les muestro un sencillo interactivo que me ayudará a ilustrar la capacidad de creación del programa:

Cinemática Directa Sincronizada

Hay un fácil ejercicio que nos ayudará a comprender la cinemática directa y consiste en dibujar una figura humana por partes (mano, brazo, antebrazo, tronco, pelvis, pierna, tobillo, pie y cabeza) y la convertimos en Movie Clip.
Una vez hecho esto copiamos y cortamos cada pieza y la introducimos en el símbolo movie clip de la pieza superior (la mano en el antebrazo, el pie en el tobillo y así sucesivamente). Una vez concluído el tronco con los brazos y la cabeza lo introducimos en la pelvis, que controlará a todo el conjunto. Realizamos movimiento al interior de cada pieza conservando la secuencia de tiempo (del frame 1 al 15 se prepara, del 16 al 25 salta, del 25 al 30 está en el aire y del 30 al 35 cae, por poner un ejemplo) para que parezca natural el movimiento de la figura. Aquí les muestro el resultado:

Botones en Flash

Ya entrando a la parte de optimización de contenidos web, Flash nos permite crear botones para provocar acciones dentro de nuestros contenidos. Para crearlos se dibuja una forma Shape, se selecciona y le damos f8 para convertirla en símbolo. En lugar de elegir Movie Clip que es el símbolo que hemos estado trabajando seleccionamos Button. Una vez convertido, entramos en el símbolo con doble click en él y se nos aparecerán los 4 estados del botón (Up= Antes de presionarlo, Over= Encima del área activa del botón, Down= siendo presionado y Hit= área de activación del botón) en la línea del tiempo. Si lo deseamos podemos darle diferentes colores o cambios mientras ocurren los 4 estados. Para ejemplificar esto aquí les traigo un botón

Una vez comprendido esto, podemos pasar a los botones que marcan acciones. He aqui el ejemplo de un botón que provoca cambios en una simple figura geométrica.


En este caso, las acciones sólo se detienen hasta el siguiente Stop en la línea de tiempo. Si deseamos añadir reacciones controladas como "detener" o "continuar" debemos recurrir a otro tipo de claves. Aquí les traigo un ejemplo de cómo realizar lo anterior.



Para activar y desactivar el movimiento del círculo dar click en los botones de Play o Stop según sea el caso

Bones! (y no la serie)

En el modo de Action Script 3.0 Flash nos permite realizar animaciones con una herramienta mucho más rápida que la primera técnica para dar movimiento. Se trata de la herramienta Huesos o Bones, la cual nos permite mover las piezas del objeto o figura a través de un sistema de huesos interconectados mientras colocamos nuevos keyframes en la línea de tiempo para cada movimiento. Para usarlo, simplemente seguimos los siguientes pasos:

1)Se dibuja un objeto shape.

2)Se toma la herramienta de huesos y se da click sostenido sobre la figura arrastrando hasta donde queramos que acabe cada hueso. El siguiente hueso se iniciará en el término del anterior y así sucesivamente.

3) Se ponen nuevos keyframes en la línea de tiempo con f6 y se anima la figura moviendo los huesos a lo largo de se estructura o desde sus pivotes. Una vez terminada la animación le damos click derecho sobre la línea de tiempo y seleccionamos Convert to frame by frame animation para convertirlo en shape twin y poder gusrdarlo como símbolo movie clip.

El inicio del sistema de huesos es el pivote y de aquí surgen dos formas de animar:


1)Un Pivote Central: Un solo camino



2) Un pivote central: Varios caminos

Escenarios

Adobe Flash es también una herramienta muy útil cuando de construir ambientes virtuales animados se trata. Para lograr diferentes efectos que simulen el movimiento de un observador o cámara a lo largo del escenario se emplea el truco de mover los objetos que componen la escena para dar la sensación de movimiento. Si se trata de un escenario que se va a recorrer vertical u horizontalmente, se anima moviendo dichos elementos en la dirección opuesta a la del sentido del recorrido siguiendo la lógica antes descrita en el ejercicio del automóvil. Para lograr un acercamiento más realista, los objetos que en un principio se encuentran casi en el centro de la escena se desplazarán paulatinamente hacia los extremos al tiempo que se amplían en sus dimensiones para conferir la sensación de que se encuentran más cerca.

1) Escenario con movimiento vertical

Abeja

Aplicando la cinemática directa antes mencionada estructuramos el cuerpo de algún insecto con alas, cuerpo, cabeza, brazos y piernas. Cada pieza se convierte en Movie Clip y se anima en el interior siguiendo la lógica del movimiento de cada pieza (el movimiento de las alas será más reiterativo y rápido= en menor cantidad de Frames que el de la cabeza, por ejemplo). Para agregar un plus a nuestra animación ingresamos en el Movie Clip "cabeza" y realizamos una animación Shape (creando dos objetos Shape dibujados en diferentes frames de la línea de tiempo, seleccionando los frames entre ambos, dando click derecho y seleccionando Create Shape Tween) para crear la sensación de parpadeo de una forma que cubra el ojo en su totalidad hasta una que sólo lo cubra en una pequeñísima porción. Aquí les muestro el resultado:

F R Á G I L!

Empleando las guías ya repasadas, es posible crear la sensación de caída de un objeto y su posterior ruptura, para ello trazamos la trayectoria del objeto de acuerdo con la lógica de la gravedad y las parábolas que describe, la convertimos en guía y hacemos que caiga a través de una escalera. En el momento en que deseamos que se rompa duplicamos la última capa con f6, seleccionamos el objeto a romper y tecleamos ctrl+b (Break Apart) para quitar al objeto la propiedad de Movie Clip y regresarlo a objeto Shape. A partir de este punto podemos separar cada pedazo resultante de la rotura con la herramienta lazo y agruparlas con ctrl+g para su manejo más cómodo. Como se trata de un objeto Shape, se deberá animar Frame por Frame el movimiento que describirán los trozos en el aire hasta quedar estáticos.




Para agregar más realismo agregamos pequeños golpecitos en sus puntos de contacto con la escalera creando una nueva layer y colocando layers en blanco con f7. Dentro de estos layers en blanco dibujaremos con el lápiz el efecto de golpe sobre la superficie.

Máscaras y Guías

Gracias a la técnica de combinar el uso de las líneas de guía y las máscaras en flash, se puede simular el rastro que deja un objeto durante su movimiento. Aquí se encuentra la imagen:

¿Qué sería de Flash sin su máscara?

Es posible también crear máscaras con el programa que me permiten visualizar una imagen a través de una forma dibujada que a su vez puede sufrir alteraciones. Pero como una imagen vale más que mil palabras aquí les muestro el ejemplo:

Guía de Movimiento

Dentro de la animación en Flash, existe una forma de animar logrando una economía de movimientos y del uso de keyframes. Se trata de la guía de movimiento. Aquí les muestro un ejemplo:

Movimiento de Auto en Flash

Para recrear el movimiento de un automóvil en Flash dejamos el mismo estático dentro de la escena y movemos el resto de los planos (cielo, montañas, piso, etc.) con la interpolación de instancias convencional siguiendo la lógica de velocidad de acuerdo a la distancia (las nubes que son lo más alejado se moverán más lentamente que el piso que se encuentra en primer plano. Para agregar mayor realismo, podemos deformar el pelo o elementos al aire del conductor o hacer que él mismo salte conforme se mueve el auto. Aquí les muestro el ejemplo:

Brazo Mecánico, primer acercamiento a la cinemática directa

Cinemática Directa en FLASH

 Flash es una herramienta muy útil cuando de animar se trata, ya que nos permite jerarquizar las animaciones por piezas de modo que al mover una de ellas se pueda causar una reacción motriz en el resto. Para ello:

1. Se dibuja cada pieza independientemente y se convierte en Símbolo Movie Clip (cada una en una capa diferente).

2. Se corta cada pieza y se inserta dentro de una nueva capa en el interior de la pieza superior en jerarquía (el pie en la pierna, la pierna en la pelvis y así sucesivamente).

3. Se anima cada pieza: Cada capa debe contener una sola pieza para evitar errores de superposición. Entonces dentro de la línea de tiempo damos click hasta donde deseamos que se prolongue la acción y colocamos un "keyframe" o punto crítico. Si deseamos alterar el curso en que la acción se desarrolla únicamente hacemos los ajustes pertinentes en el nuevo "keyframe" (ejemplo: la rotación de una pieza, traslación de un objeto, etc.).

Baners FLASH

 Flash  es, en muchos casos, la herramienta favorita de los diseñadores web para optimizar y animar los contenidos que posteriormente serán incluidos en un sitio. Presenta la ventaja con respecto a otro tipo de software como Fireworks de reducir el peso total de las animaciones gracias a su manejo de elementos gráficos como símbolos Graphic o Movie Clip. Uno de los productos más frecuentes son los llamados Banners, que sirven como elementos decorativos simples que suelen contener una tabla de fondo o contenido con determinado color, algún texto que trasmita el mensaje y en ocasiones se incluyen imágenes optimizadas para hacerlos más llamativos. Aquí les muestro algunos ejemplos de Banners en los formatos más convencionales realizados con Flash:


160x600 pixeles




600x160 pixeles




200x200 pixeles

FLAAAASH!!!

 Flash es uno de los programas de la Suite de Adobe que permite a los usuarios generar animaciones, así como contenidos optimizados para páginas y diseño web. Sin embargo, el programa es uno de los más versátiles de dicha colección y nos permite ejecutar dibujo vectorial de buena calidad y gracias a sus herramientas de color y fácil trazado se ha convertido en uno de los favoritos de varios diseñadores además de la principal competencia de Ilustrator. Aquí les comparto una muestra de ilustración digital con Flash:

¿Cómo hacer un GIF Animado?

 Para que podamos hacer un GIF animado simplemente se deben seguir 3 sencillos pasos:

 1. Seleccionamos las imágenes que deseamos de una carpeta (preferiblemente compatibles entre sí en tamaño y en formato jpg) pero marcamos la casilla "Open as animation"

2. Deplegamos la ventana States y en cada estado se encontrará cada una de las imágenes que compondrán la animación. Desde ahí podremos optimizar cada una de ellas para evitar que el GIF en su conjunto sea muy pesado y difícil de visualizar. Del mismo modo, en cada State se encuentra la velocidad de reproducción de cada imagen, que predeterminadamente se marca como 7 centésimas de segundo, lo cual es muy rápido, Modificamos dicha velocidad dando doble click sobre el número e introduciendo manualmente la cantidad deseada.  Una vez realizado esto, cambiamos el formato de archivo por GIF Animado.

3. Finalmente exportamos el archivo tal y como se encuentra en formato y extensión en la ventana y le damos guardar. He aquí el resultado. Para visualizar como GIF animado, favor de dar click en la imagen.

TRON, el preludio de la interacción del futuro

 Recientemente Disney lanzó la versión cinematográfica moderna del videojuego y clásico de la pantalla grande TRON. Si bien es cierto que la tecnología empleada en su producción es mayor, la cinta hace referencia a los mismos conceptos que conlleva la historia original. Un joven se introduce en un videojuego diseñado por su padre donde la interacción máquina-usuario es completamente real, en primera persona e involucra la percepción por todos los sentidos. El joven encuentra dentro del sistema a su desaparecido padre pero se topa con una versión artificial de su progenitor que tratará de evitar su salida a toda costa, se sumerge en el mundo de la retícula o grid, donde todo es posible y con campos de batalla virtual donde quien pierde es exterminado. En éste punto, el joven Flynn se encuentra dotado de total autonomía, ya que, haciendo al lado el hecho de que se encuentra dentro de la interfase, posee su entera voluntad para hacer lo que desea. El control aparece en el momento en que puede manipular sus movimientos dentro del juego a su antojo, conducir vehículos virtuales y pelear a su antojo. El bar donde se encuentra Castor es el obvio referente de la hipermedia, un espacio encontrado dentro de los sistemas digitales en donde diferentes usuarios pueden interactuar entre sí e intercambiar información que les sea de utilidad con un acceso aleatorio (no lineal) aunque involucrando la multimedia (la música como sonido, la imagen representada en sus apariencias y la imagen en movimiento). El diseño en todo ésto tiene como padre a Flynn padre, quien tras crear todo un mundo automatizado en el cual se incluyen vehículos, armas y la rejilla o retícula (donde se presenciaban combates con motos) comete el error de crear programas en su auxilio dotados de autonomía, que finalmente lo terminan obligando a esconderse en su propio mundo digital, lo cual creo es una analogía de que en algún momento el ser humano será superado por entes digitales dotados de autonomía y control sobre nosotros o, en el mejor de los casos, desarrollará "interfaces", si así se le puede llamar, más avanzadas y que permitan la interacción con todos los sentidos.

Hipervínculos

 Si nos remitimos a una definición precisa, posiblemente diríamos que un vínculo es la unión por medio de puentes informáticos o enlaces de dos o más archivos o pantallas de navegador web y cuyo fin es facilitar el desplazamiento de un usuario a través de la red. Este enlace constituiría lo que para Xavier Berenguer  es una calidad de interacción muy baja, pero si combinamos la definición de vínculo con el prefijo "hiper" nos daremos cuenta de que ahora hablamos por "Hipervínculo" de un enlace o vínculo cuyo fin es el desplazamiento entre archivos y pantallas dentro de la web con una secuencia de acceso aleatorio, lo cual significa que nos da la posibilidad de desplazarnos a nuestro gusto a través de dichas pantallas, sin tener la necesidad de seguir una secuencia lineal y obteniendo así sólo los contenidos que nos interese consultar y no los que nos imponga determinado sistema. Por todo ello, los hipervínculos son las puertas principales en el largo camino de la interactividad digital.

Interactividad, Hipermedia e Interfaces

Multimedia e Hipermedia, la deshumanización en camino

 Multimedia, un término que cada vez se vuelve más frecuente en nuestro vocabulario y con cierta razón, ya que si un área del diseño y de los medios en general ha tenido difusión y un vertiginoso crecimiento durante la época que nos ha tocado vivir, es la multimedia. La multimedia se entiende como toda aquella integración de diversos medios (como su nombre lo indica) entendiéndose texto, imagen, imagen en movimiento y audio para transmitir una información. Ahora bien, últimamente la multimedia ha sido relacionada con la informática y el mundo digital y de qué otro modo se podría entender en un mundo en donde los sistemas informáticos rigen el mundo y sus actividades? Con el avance de la tecnología, la multimedia ha avanzado excesiva y rápidamente en cuestión de comunicación e interacción entre los usuarios gracias a la aparición de los llamados hipertextos, que consisten en almacenar información con contenido de diversos medios en bloques conocidos como nodos. Estos nodos, a su vez, se integran por medio de enlaces en una estructura o sistema base que posibilita que los usuarios puedan revisar o consultar dicha información, siempre y cuando se pueda recuperar de la base, conectando a dichos personas entre sí. Ahora bien, la multimedia  de éste modo finalmente encontraría una forma de almacenamiento de información que le permitiera difundirse entre los usuarios suscritos a la base, dando como resultado el nacimiento de su hermana mayor, la hipermedia (denominada así por la fusión de los términos multimedia e hipertexto). Ya hablando desde éste punto de vista, la hipermedia ha posibilitado que el contenido multimedia (fotos, videos, música y texto) sea transferido, consultado y recuperado cuantas veces se desee por el usuario a través del sistema de nodos del hipertexto, siendo un claro ejemplo las redes sociales. He oído hablar a menudo del “San Facebook” y es que para muchos usuarios web la verdad la tienen las redes sociales y ya no se detienen a ver la verdad orgánica y naturalmente como se podría brindar durante una tranquila conversación, sino que confían más en la información presentada por medio de la hipermedia del siglo XXI. Primero la aparición del chat, luego la posibilidad de poder crear Avatares en línea, convirtiendo a cualquier persona en quien siempre quiso ser y ahora los medios excesivamente compartidos por medio de esta red mundial de transferencia de información han provocado un repentino deterioro en la forma en que nos relacionamos los seres humanos, cada vez es menor la  autenticidad de un usuario en sus perfiles de facebook o twitter o alejado de la realidad su avatar, se pueden mantener conversaciones serias y en tiempo real con amigos o familiares por medio de Messenger o Skype y cada vez en menor el número de gente que no tiene acceso a éstos servicios. Por todo esto, la hipermedia es la droga más poderosa del siglo en curso y si no la sabemos aprovechar sustentablemente causará una total deshumanización en los de nuestra especie, llevándonos hacia un futuro cada vez más incierto donde el amor será virtual y las relaciones digitales.