10* Flash


Hoy hice un index para mi página de internet usando Flash CS4 de la suite de Adobe. Un 'index' es la primera página a la que se entra dentro de un dominio y es la primera página que se ve al navegar en internet.

AQUI esta la pagina.

Lo primero que hice fue hacer una animación muy breve en flash, esto quiere decir que duraba solo 15 segundos y tenía solo tres fotogramas clave. así es como se ve la animación en el flash:



a continuación hice un botón a partir del gráfico de texto que dice: melonopoppolus. para hacer un botón se necesita seleccionar el gráfico y luego ir a 'modify' -> 'convert to symbol' -> 'button' esto permite que al seleccionar el gráfico darle doble click) pasemos a otro tipo de linea de tiempo que se ve asi:




y que permite elegir lo que va a suceder con el botón cuando el mouse pase sobre el, cuando lo pique y seleccionar el area en la que esto suceda.

Lo que yo hice fue agregar la cara al momento de poner el mouse sobre esta area y cambiar la cara para que cierre los ojos al momento de picarle.

cuando ya estaba lista la 'película' en flash, la exporté con 'publish' a una carpeta hecha especialmente para todos los elementos de la página. esto automáticamente creó un archivo .html, uno .swf y uno .fla.
lo siguiente que hice fue importar este .html a dreamweaver de manera que la presentación de código se ve así:




Aquí agregué además una linea en el 'header' que hace que aparezca un icono de imagen junto a la dirección en el 'browser' y aproveché para eliminar cosas del metadata para que no sea tan fácil ver que mi DW es pirata :D

no estoy segura todavía cómo hacer links....para que al picarle entre a la pagina de verdad... pero mañana lo voy a investigar.

ah! estos dos tutoriales me ayudaron mucho:

ESTEpara hacer botones animados
ESTE para exportar el flash

*Favoritos: Mimosa



Mimosa es una instalación realizada por Jason Bruges y su estudio de diseñadores, arquitectos y especialistas en interacción.

'We create interactive spaces and surfaces that sit between the worlds of architecture, interaction design and site-specific installation art. Our projects range from large-scale building facades and public art to interactive interior environments and products.'

'Creamos espacios interactivos que combinan los mundos de la arquitectura, el diseño interactivo y la instalación. Nuestros proyectos van desde construcciones muy grandes en edificios públicos a productos interactivos para interiores

AQUI hay un video!

9* Processing

Processing es un software libre que sirve para programar en Java, que es un tipo de lenguaje de programación que permite guardar 'objetos' como paquetes de información que se pueden ir acumulando para formar un código complejo.
Es muy divertido porque puedes ir aprendiendo el lenguaje para darle al programa instrucciones de lo que quieres que suceda. En la página se pueden ver varios ejemplos de interactivos y multimedia realizada por medio de processing avanzado.
AQUI pueden ver estos ejemplos.

Estuve viendo los ejercicios que ibamos a hacer en la clase en
ESTA página y a partir del codigo de algunos hice uno muy básico para practicar y para ir aprendiendo a hacer las cosas mas simples.

Asi es como se ve el código en el programa:


y
AQUI pueden ver el interactivo!

:D

8* After Effects

After Effects es un software que forma parte de la Suite de Adobe y que sirve para crear gráficos en movimiento y agregar efectos visuales a una composicion, entre otras cosas. En el se pueden animar, alterar y crear elementos en dos y tres dimenciones.
Para este ejercicio utilizamos el sistema de capas para crear una mascara y que fuera posible convinar varios planos dentro de una misma composicion.

Asi es como se ve el espacio de trabajo en el AE:



AQUI pueden ver el video terminado en baja resolucion (lo tuve que subir de muy mala resolución a youtube para que fuera mas rápido...)

AQUI pueden verlo en alta resolución.


Abel me dijo que le recordaba a 'Automan':

La verdad es que lo busqué y esta padrísimo y esta mejor que mi ejercicio :D
Es una serie de televisión norteamericana de 1983, en la que un policía que también es programador de computadoras crea a un hombre holograma que se encarga de luchar contra el crimen y que se llama Automan.
No entendí muy bien cómo estaba hecho su traje pero creo que utilizaban unas placas reflejantes y que en ellas se proyectaban las imágenes de las estrellas. sea como sea se ve muy bien!

AQUI pueden ver el opening de la serie

7* GIF

Hay varias maneras de hacer una imagen animada GIF. A mime gusta hacerlo en Photoshop o en Fireworks de la suite de Adobe. Para hacer un GIF se utilizan distintas capas (layers) en donde se van haciendo variaciones de una imagen en cierto orden para luego animarlas de acuerdo a esa secuencia. Cada una de estas capas se coloca en la linea del tiempo de la función 'Animación' y se guardan como una sola imagen en la que se turnan las capasque tiene terminación .gif.la velocidad con la que se cambia de una capa a otra también se puede asignar y se señala debajo de cada cuadro en la linea de tiempo.
Aqui hay una imagen de cómo se ve este proceso en Photoshop:




Este tipo de imágenes animadas pueden ser muy ligeras y son ideales para la web. Aqui hay un ejemplo:


Photobucket


:D

Favoritos: Kageo*





Kageo fue diseñado por Yu Uchida y Masa Inakage. Es una instalación interactiva que permite que los usuarios se comuniquen con creaturas pequeñas que viven en las sombras.
La instalación se presenta con una mesa de madera en donde hay objetos que se pueden mover de un lado a otro. Estos proyectan sombras sobre la mesa en donde aparecen los kageo.

El sistema funciona a aprtir de una camara que reconoce el area de sombra y un proyector que proyecta la animación de kageo desde abajo de la mesa. Las imágenes capturadas por la camara se binarizan y procesan la información de manera que el lugar, el numero el tamaño y la forma de las sombras se calcula y las animaciones se proyectan en esos resultados.


AQUI pueden ver la página oficial del proyecto.

AQUI pueden descargar el PDF de la presentación del proyecto.

AQUI pueden ver la instalación.

6* Audio

Para hacer mi ejercicio de audio utilicé dos programas diferentes. Primero usé el Soundbooth de la suite de Adobe para editar los tracks que iba a usar y luego usé el Audacity , que es software libre, para unir los tracks y para acomodarlos de manera que sonaran bien juntos :D

aqui esta mi workspace:



hice dos archivos: uno de 1:06 min. y otro de 0:47 seg. que exporté en WMA y MP3.

AQUI pueden escuchar el primero: BIRDS
AQUI pueden escuchar el segundo: PAGES


es muy divertido esto...