Aqui un pequeño tutorial para obtener el código para embeber la animación a sus blogs. Deben tener en cuenta que vamos a trabajar con 3 tipos de archivos:

fla: es el archivo de Flash que utilizamos para editar, hacer las animaciones, diseñar, etc)
swf: es el archivo portable o publicable, es el que subiremos a la red)
html: en este caso lo utilizaremos para obtener el codigo para embeber el swf).

Deberan tener un hosting para alojar el archivo, en este caso utilizaremos www.ripway.com. Si no poseen cuenta allí generensé una antes de empezar el tutorial.

Para embeber una animación en flash en el blog:

1- Ir a Archivo > Configuración de Publicación... Allí verificar que el casillero HTML esté tildado. Presionar Publicar. Se nos generan dos archivos: un swf y un html.

2- Subimos el swf a un hosting (alojamiento de archivos). En este caso vamos a usar el hosting ratuito www.ripway.com (Clic aqui para ver el tutorial de cómo subir un archivo)

3- Hacer clic en Get Codes (no cerrar esta ventana, volveremos más adelante).

4- Abrir el archivo html con el Eplorador de Internet (es el que generamos en el paso 1, está guardado en el mismo lugar que guardamos el fla).

5- En el Explorador de Internet ir a Ver > Código Fuente.

6- Copiar el fragmento de código que está entre las etiquetas "objet".

7- Ahora necesitan ingresar al blog y pegar ese código en el donde escriben el texto de los posteos.

8- A continuación deberán reemplazar la ruta del archivo swf. Deben ir al código que obtuvimos en el paso 3 y seleccionar el fragmento que va desde http:// a .swf.

Ir al código que pegaron en el blog (paso 7) y pegar esa ruta en los siguientes lugares:
value="aqui va la ruta del archivo" y en embed src="aqui va la ruta del archivo".

9- En el caso que la película sea muy grande modifiquen las variables de tamaño: width (ancho) y height (alto). Esta variable
aparece dos veces a lo largo del código, deben cambiarlo las dos veces.

Recuerden, este es el procedimiento para embeber la animacion en un blog, si desean también pueden enlazar la animación copiando el código completo que obtienen desde Ripway.

Aqui cuelgo el fla con el que partiremos para el práctico de la infografía animada que haremos en clase. ¡Que lo disfruten!

Descargar Archivo

También les paso los enlaces a las notas sobre las que vamos a trabajar:
El ciudadano
. Tapa
. Nota

La Capital
. Nota

Aqui pueden descargarse una pelicula interactiva que consta de un botón que ejecuta y detiene una melodía, además el usuario puede seleccionar entre dos temas musicales.
La idea es que analicen este archivo para poder ir anticipandosé a cuestiones que veremos en clase. Investiguen el archivo fla, sus símbolos, capas y fotogramas.
Descargar archivo .fla

Seguimos adelante con Flash. Aqui van ejemplos de los 3 tipos de comportamientos de los simbolos. Estos comportamientos son:
> grafico (graphic) -> bajar ejemplo (.fla)
> clip de película (movie clip) -> bajar ejemplo (.fla)
> botón (button) -> bajar ejemplo (.fla)
Cada comportamiento mantiene relación diferente con la linea de tiempo principal. Veremos en clase esas relaciones.

Aquí lo prometido: un listado de las herramientas del Flash MX y sus respectivas descripciones. Básicamente es lo que vimos en clase.
Es muy util como ayuda memoria para cuando esten usando el Flash por su cuenta. Tenganlo presente para los próximos trabajos practicos. ¡Que lo disfruten!

INTERFACE
Cuando trabaje en Flash MX estará interactuando, principalmente, en dos sectores: la Línea de Tiempo y el Area de Trabajo o Escenario.

BARRA DE HERRAMIENTAS
La barra de herramientas de Flash Mx se divide en 4 secciones:

Herramientas de Diseño:
se utilizan para dibujar, pintar, borrar, modificar formas, agregar texto, seleccionar, etc.
Herramientas de Visualización:
Sirven para desplazarse por el área de trabajo (herramienta mano) o para ampliar o reducir la vista de la misma (herramienta lupa).
Selección de color:
Al dibujar en Flash, generalmente se está trabajando con dos elementos: la línea y el relleno. Por lo tanto cada elemento posee una fuente de color diferente: la correspondiente a la línea está indicada con un lápiz y la del relleno está indiada con un cubo de pintura.
Opciones de Herramientas:
Cada vez que seleccionemos una herramienta, en esta sección aparecerán diferentes opciones relacionadas con la herramienta elegida.




















HERRAMIENTAS DE DISEÑO

Línea y Relleno
Una forma posee dos elementos: línea y relleno. Ambos tienen propiedades diferentes y en el área de trabajo están relacionados pero son independientes el uno del otro. Por ejemplo: al dibujar un círculo tenemos una línea (el contorno del círculo) que contiene un relleno (su superficie), pero podemos seleccionar, desplazar y modificar la línea dejando el relleno en su lugar:

Al utilizar una herramienta de dibujo o pintura para crear una forma, la herramienta aplica los atributos actuales de relleno y línea al objeto. Para cambiar los atributos de relleno y línea de los objetos existentes, puede utilizar las herramientas Cubo de pintura (para el color de relleno) y Bote de tinta (para el color de línea). Una vez creados, se podrá remodelar los contornos de las formas y las líneas de numerosas maneras.
Solapamiento de formas en Flash
Al utilizar las herramientas Lápiz, Línea, Óvalo, Rectángulo o Pincel para dibujar una línea sobre otra línea o forma pintada, las líneas que se solapan se dividen en segmentos en los puntos de intersección. Puede utilizar la herramienta Flecha para seleccionar, mover y remodelar cada segmento independientemente.

Un relleno; el relleno con una línea que lo corta; los dos rellenos y tres segmentos de línea creados por la segmentación.

Flecha
Esta herramienta permite seleccionar un objeto dentro del área de trabajo. Si seleccionó un símbolo, podrá moverlo dentro de la escena, si seleccionó una forma, podrá moverla y deformarla.
Cuando acerque la flecha a una forma verá que esta herramienta reacciona de dos maneras diferentes:

Si la flecha está acompañada por un ángulo recto significa que está cercana a un nodo de la figura, por lo tanto podrá desplazar ese nodo para modificar la forma. En cambio, si la flecha no está cercana a algún nodo, entonces aparecerá una curva, entonces podrá modificar la curvatura de un segmento de la figura.
Nota: para seleccionar totalmente una forma que consta de línea y relleno hacer doble clic en su centro o hacer clic y arrastrar hasta describir un rectángulo que contenga la totalidad del dibujo
Opciones:

Ajustar a Objetos (Snap to objets): esta opción está representada con un imán. Cuando esté activado, al mover o deformar objetos, la ubicación de la herramienta flecha asigna el punto "imantado". Por ejemplo, si mueve una forma con relleno seleccionándola desde su centro, éste será el punto "imantado" que se pegará al contorno de otra figura.
Enderezar y Suavizar: al seleccionar una forma irregular, puede estilizarla haciendo clic en enderezar (para que la forma adquiera un diseño más geométrico) o suavizar (para que los trazos se tornen más sueltos y suaves)


Subselección
Esta herramienta permite distorsionar un objeto moviendo sus nodos.

Línea
Esta herramienta permite trazar líneas rectas.

Lazo
Esta herramienta permite la selección de áreas de una forma mediante el dibujo a mano alzada o utilizando el Modo Polígono.
Opciones:

Modo Polígono: permite seleccionar un área dibujando un polígono.
Varita Mágica: permite seleccionar el área determinada por un color, esta función es aplicable solo a imágenes "separadas". Cuando importe una foto o un dibujo, lo puede separar yendo a Modificar > Separar (Modify > Break Apart) o presionando Ctrl+B. Al aplicar esto podremos modificar los atributos de color de los componentes de la imagen.


Pluma
Puede utilizar la herramienta Pluma para dibujar trazados precisos como líneas rectas o bien como suaves curvas fluidas. Puede crear segmentos de líneas rectas o curvas, y ajustar el ángulo y la longitud de los segmentos rectos, así como la pendiente de los segmentos curvos. Al dibujar con la herramienta Pluma, puede hacer clic para crear puntos de segmentos de líneas rectas o bien hacer clic y arrastrar para crear puntos de segmentos de líneas curvas. Puede ajustar los segmentos de las líneas curvas y rectas ajustando los puntos de las líneas. Puede convertir líneas curvas en líneas rectas y viceversa. También puede mostrar los puntos de las líneas creadas con otras herramientas de dibujo de Flash, como las herramientas Lápiz, Pincel, Línea, Óvalo o Rectángulo, para ajustar estas líneas.

Texto
Para situar bloques de texto en el Area de Trabajo, utilice la herramienta Texto. Los tipos pueden situarse en una línea que se expande al escribir o en un bloque de anchura fija que ajusta las líneas de forma automática. Flash muestra un selector redondo en la esquina superior derecha de los bloques de texto que se expanden y uno cuadrado en los bloques de texto con anchura definida.

Círculo
Esta herramienta sirve para dibujar figuras redondeadas como óvalos y círculos. Para dibujar un círculo perfecto presione la tecla Shift y arrastre el mouse hasta que quede el circulo deseado.

Rectángulo
Utilice esta herramienta para dibujar cuadrados o rectángulos. Puede presionar Shift para dibujar cuadrados perfectos.
Opciones:

Radio de rectángulo redondeado: sirve para dibujar un cuadrado o un rectángulo con las esquinas redondeadas. Al activar esta opción se abre una ventana en donde deberá ingresar el valor del radio de la esquina del rectángulo.


Lápiz
Para dibujar líneas y formas se utiliza la herramienta Lápiz, de manera muy similar a cómo se emplea un lápiz real para realizar un dibujo.
Opciones:

Para aplicar un suavizado o un enderezamiento a las líneas y las formas según se va dibujando, basta con seleccionar un Modo de Lápiz:
Enderezar: para dibujar líneas rectas y convertir figuras similares a triángulos, óvalos, círculos, rectángulos y cuadrados en estas formas geométricas.
Suavizar: para dibujar curvas suaves.
Tinta: para dibujar líneas a mano alzada sin aplicarles ninguna modificación.




Pincel
La herramienta Pincel dibuja trazos similares a los de un pincel. Permite crear efectos especiales, incluidos efectos caligráficos.

Opciones:
Modo Pincel:
Pintar normal: pinta sobre las líneas y rellenos de la misma capa.
Pintar detrás: pinta en las áreas vacías del Area de Trabajo de la misma capa, sin afectar ni a las líneas ni los rellenos.
Pintar selección: pinta solamente el relleno seleccionado (no pinta las líneas seleccionadas)
Rellenos de pintura: pinta rellenos y áreas vacías y no afecta a las líneas.
Pintar dentro: pinta el relleno en el que se inicia un trazo de pincel y nuca pinta sobre las líneas. Funciona como un libro de colorear en el que la pintura no puede salirse nunca de las líneas. Si el trazo comienza en un área vacía, el relleno no afecta a ninguna área rellena.
Tamaño de Pincel: aquí podrá modificar el grosor del pincel. El tamaño del pincel se mantiene en la pantalla aunque utilice el zoom; por ejemplo, si utiliza la herramienta zoom para agrandar, va a lograr un trazo más fino de pincel aunque no haya modificado la opción Tamaño de Pincel.
Forma de Pincel: esta opción le permite cambiar la punta del pincel, puede ser cuadrada, ovalada o lineal.
Bloquear Relleno: esta opción es idéntica a la que aparece en la herramienta Cubo de Pintura.

Transformación Libre
Con esta herramienta podrá deformar, girar o aumentar el tamaño de una forma.
Opciones:

Rotar: gira la forma o el símbolo seleccionado.
Escalar: aumenta o disminuye la forma o el símbolo seleccionado.
Distorsionar: con esta opción logrará un efecto de perspectiva en la forma que haya seleccionado.
Envoltura: esta opción crea, alrededor de la forma seleccionada, nodos que se pueden desplazar y segmentos a los que se pueden volver curvos, modificando de esta manera el dibujo.

Transformador Libre de Relleno
Una vez seleccionada esta herramienta, si hace clic en un relleno degradado, podrá modificar el centro del degradado, el tamaño, la inclinación, etc.

Bote Tinta
La herramienta Bote de tinta permite especificar el color, la anchura de línea y el estilo de los trazos de las líneas o contornos de formas. Puede aplicar únicamente colores sólidos, pero no degradados a las líneas y contornos de formas.

Cubo de Pintura
La herramienta Cubo de pintura rellena con color áreas cerradas: puede tanto rellenar áreas vacías como cambiar el color de áreas ya pintadas. Puede utilizar colores sólidos, rellenos de degradados o de mapa de bits. Puede utilizar la herramienta Cubo de pintura para rellenar áreas que no están cerradas por completo, así como especificar que Flash cierre los huecos de los contornos de las formas al utilizar esta herramienta
Opciones:

Tamaño de Hueco: haga clic allí y seleccione una opción de tamaño del hueco:
Seleccione No cerrar huecos si desea cerrar manualmente los huecos antes de rellenar la forma. Para dibujos complicados, puede ser más rápido cerrar los huecos manualmente.
Seleccione una opción Cerrar para que Flash rellene una forma con huecos.
Bloquear Relleno: Al seleccionar el modificador Bloquear relleno con la herramienta Pincel o Cubo de pintura y pintar con esta herramienta, el relleno con degradado o de mapa de bits se extiende por los objetos pintados en el Escenario.
Relleno sin bloquear:

Relleno bloqueado:

Al utilizar el modificador Bloquear relleno se produce la impresión de que se ha aplicado un único relleno con degradado o de mapa de bits a varios objetos del Escenario.

Cuentagotas
La herramienta Cuentagotas permite copiar los atributos de trazo y relleno de un objeto y aplicarlos inmediatamente a otro objeto. Esta herramienta también permite copiar la imagen de un mapa de bits para utilizarla como relleno.

Borrador
La herramienta Borrador permite eliminar trazos y rellenos. Puede borrar todo el Escenario con rapidez, borrar los diferentes segmentos de trazos o áreas rellenas, o borrar a mano alzada.
Personalice la herramienta Borrador para borrar sólo trazos, sólo áreas rellenas o sólo una única área rellena. El borrador puede ser redondo o cuadrado y hay cinco tamaños disponibles.
Para borrar con rapidez todo el Escenario, haga doble clic en la herramienta Borrador.
Opciones:

Modo Borrador:
Borrar normal: borra líneas y rellenos de la misma capa.
Borrar rellenos: sólo borra rellenos, sin afectar a las líneas.
Borrar líneas: sólo borra las líneas, sin afectar a los rellenos.
Borrar rellenos seleccionados: sólo borra los rellenos actualmente seleccionados y no afecta a las líneas, estén seleccionados o no. (Seleccione los rellenos que desea borrar antes de utilizar la herramienta Borrador en este modo).
Borrar dentro: sólo borra el relleno en el que se ha iniciado el trazo de borrador. Si el punto de inicio de borrado está vacío, no se borra nada. Este modo no afecta a las líneas.
Grifo: Para eliminar segmentos de trazos o áreas rellenas. Con hacer un solo clic borra el relleno o la línea deseada.
Forma de Borrador: Podrá cambiar el tamaño y/o la forma del borrador.

Mano
Al aumentar el tamaño de visualización del Area de Trabajo, es posible que no se vea todo su contenido. La herramienta Mano permite desplazar el Area de Trabajo para cambiar la visualización sin tener que cambiar el grado de aumento.
Para mover la visualización del Area de Trabajo: seleccione la herramienta Mano y luego arrastre el Area de Trabajo.
Nota: para cambiar temporalmente de otra herramienta a la herramienta Mano, mantenga presionada la barra espaciadora y haga clic en esa herramienta en la paleta de herramientas.

Zoom
Puede cambiar el grado de aumento/reducción para ver todo el Area de Trabajo en la pantalla o una zona determinada del dibujo. El grado máximo de aumento/reducción depende de la resolución del monitor y del tamaño de la película.
Utilice las siguientes técnicas para aumentar o reducir la visualización del Escenario:
> Para aumentar un elemento determinado, seleccione la herramienta Zoom y haga clic en el elemento. Para cambiar la herramienta Zoom entre aumento y reducción, utilice los modificadores Agrandar y Reducir o mantenga presionadas la tecla Alt.
> Para aumentar una zona concreta del dibujo, arrastre un recuadro de delimitación rectangular con la herramienta Zoom. Flash establece el grado de aumento/reducción de forma que el rectángulo especificado ocupe la ventana.
> También podrá ajustar la vista del Area de Trabajo desde el menú desplegable que está ubicado debajo de la Línea de Tiempo:

Mostrar todo: muestra el contenido del fotograma actual. Si la escena está vacía, se muestra todo el Escenario.
Mostrar fotograma: muestra todo el Escenario.

PROPIEDADES DE HERRAMIENTAS

Al activar una herramienta verá que la ventana Propiedades varía (sino aparece en pantalla, puede abrirla yendo a Ventana > Propiedades). En esta ventana encontrará propiedades para cambiar el grosor, color o estilo de línea, el color de relleno, tipografías o estilo de párrafo.

Las herramientas que poseen propiedades son:
Línea, Lápiz y Bote de Tinta: podrá variar la altura (grosor), el color o el estilo de línea.
Pluma, Círculo y Rectángulo: además de cambiar las propiedades de la línea, podrá cambiar el color de relleno.
Pincel y Cubo de Pintura: solo podrá variar el color de relleno.
Texto: aquí podrá seleccionar tipografías, estilos de texto y otras opciones similares a los procesadores de textos.

Las herramientas que no tienen propiedades, muestran las propiedades de la película como la dimensión, el color de fondo y la velocidad de fotogramas por segundo.

Seguimos adelante con Flash MX. Aqui van ejemplos de los 3 tipos de comportamientos de los simbolos. Estos comportamientos son:
> grafico (graphic) -> bajar ejemplo (.fla)
> clip de película (movie clip) -> bajar ejemplo (.fla)
> botón (button) -> bajar ejemplo (.fla)
Cada comportamiento mantiene relación diferente con la linea de tiempo principal. Veremos en clase esas relaciones.

No, no me estoy refiriendo a esa clase nefasta de personas. Sino al pedido de muchos de ustedes respecto a la creación de botones interactivos en flash.
También, a manera de introducción, están las diferencias y propiedades de cada tipo de símbolo (Graphic, Movie Clip y Button).
Espero que se diviertan, todas las dudas las podremos resolver el próximo sábado.

DISTINTOS SIMBOLOS

Cada símbolo posee una Línea de tiempo (Timeline) y un Escenario (Scene) únicos, completo con capas (layers). Al crear un símbolo (symbol), debe elegir cómo se va a comportar ese símbolo, en función de cómo se utilizará en la película.

Símbolos Gráficos (Graphic Symbols)

Utilice símbolos gráficos para las imágenes estáticas y para crear piezas de animación reutilizables ligadas a la Línea de tiempo de la película principal. Estos símbolos están sincronizados con la Línea de tiempo de la película principal. Los controles y sonidos interactivos no funcionan en la secuencia de animación de un símbolo gráfico.

Símbolos de Botón (Button Symbols)

Utilice símbolos de botón para crear botones interactivos en la película que respondan a los clics y desplazamientos del ratón, o demás acciones. Defínalos gráficos asociados con varios estados del botón y, a continuación, asigne acciones a una instancia del botón.

Símbolos de Clip de Película (Movie Clip Symbols)

Utilice símbolos de clip de película para crear piezas de animación reutilizables. Los clips de películas tienen sus propias líneas de tiempo de varios fotogramas que se reproducen de independientemente de la Línea de tiempo (Timeline) de la película principal; piense en ellos como en mini-películas dentro de una película principal que pueden contener controles, sonidos e incluso otras instancias de clip de película interactivos. También pueden colocarse instancias de clip de película (movie clip) dentro de la Línea de tiempo (Timeline) de un símbolo de botón para crear botones animados.

Nota: La interactividad y animación en los símbolos de clips de películas no funciona cuando la película se reproduce en el entorno de creación de Flash. Para ver la interactividad y animación de un clip de película, elija Control > Probar película. Puede crear un símbolo a partir de los objetos seleccionados en el Escenario o crear un símbolo vacío y llenar o importar el contenido en modo de edición de símbolos. Los símbolos pueden tener toda la funcionalidad disponible en Flash, incluida la animación.
Mediante los símbolos con animación pueden crearse películas con mucho movimiento, al mismo tiempo que se reduce al mínimo el tamaño del archivo. Considere la posibilidad de crear animación en un símbolo cuando exista una acción repetitiva o cíclica (loops), por ejemplo el movimiento hacia arriba y hacia abajo de las alas de un pájaro.

CREACIÓN DE BOTONES

Utilice símbolos de botón para crear botones interactivos en la película que respondan a los clics y desplazamientos del ratón, o demás acciones. Defínalos gráficos asociados con varios estados del botón y, a continuación, asigne acciones a una instancia del botón.
Los botones son realmente clips de película interactivos de cuatro fotogramas (frames). Los tres primeros fotogramas muestran los tres posibles estados del botón; el cuarto fotograma define el área activa del botón. La Línea de tiempo no se reproduce realmente; simplemente reacciona a los movimientos y acciones del puntero saltando al fotograma correspondiente.
Para que un botón sea interactivo en una película, coloque una instancia del símbolo de botón en el Escenario (Scene) y asigne acciones a la instancia. Las acciones deben asignarse a la instancia del botón en la película y no a los fotogramas en la Línea de tiempo (Timeline) del botón.
Cada fotograma de la Línea de tiempo de un símbolo de botón tiene una función específica:
El primer fotograma es el estado Reposo (Up), representa el botón siempre que el puntero no esté sobre él.
El segundo fotograma es el estado Sobre (Over), representa el aspecto del botón cuando el puntero se encuentra sobre el mismo.
El tercer fotograma es el estado Presionado (Down), representa el aspecto del botón cuando se hace clic sobre el mismo.
El cuarto fotograma es el estado Zona activa (Hit), define el área que responderá al clic del ratón. Esta área es invisible en la película.

Contenido típico de los fotogramas Reposo (Up), Sobre (Over), Presionado (Down) y Zona activa (Hit).

Para crear un botón:

1 Elija Insertar > Nuevo símbolo (Insert > New Symbol) o presione ctrl. + F8 (Windows) o Comando + F8 (Macintosh). Para crear el botón, debe convertir los fotogramas (frames) del botón en fotogramas clave (keyframes).

2 Escriba un nombre para el símbolo de botón nuevo y para Comportamiento (Behaviour) elija Botón (Button).
Flash cambia a la ventana de edición de símbolos. La cabecera de la Línea de tiempo cambia para mostrar cuatro fotogramas consecutivos denominados: Reposo (Up), Sobre (Over), Presionado (Down) y Zona activa (Hit). El primer fotograma, Reposo, es un fotograma clave vacío (Blank Keyframe).

4 Para crear la imagen del botón del estado Reposo (Up), utilice las herramientas de dibujo, importe un gráfico o coloque una instancia de otro símbolo en el Escenario.
En un botón puede utilizarse un símbolo de clip de película o de gráfico, pero no puede utilizarse otro botón. Utilice símbolos de clips de película si desea crear un botón animado.

5 Haga clic en el segundo fotograma, Sobre (Over) y elija Insertar > Fotograma clave (Insert > Keyframe) o clic derecho en el fotograma y clic en Insertar fotograma clave (Insert Keyframe).
Flash inserta un fotograma clave que duplica el contenido del fotograma Reposo.

6 Modifique la imagen del botón para el estado Sobre.

7 Repita los pasos 5 y 6 para los fotogramas Presionado (Down) y Zona activa (Hit).
El fotograma Zona activa (Hit) no está visible en el Escenario, pero define el área del botón que responde cuando se pasa el puntero sobre el símbolo o cuando se hace clic. Asegúrese de que la imagen del fotograma Zona activa (Hit) es una área sólida lo bastante grande para abarcar todos los elementos gráficos de los fotogramas Reposo (Up), Presionado (Down) y Sobre (Over). También puede ser más grande que el botón visible. Si no se especifica un fotograma Zona activa (Hit), se utilizará la imagen para el estado Reposo como fotograma Zona activa (Hit). Puede crear un estado de desplazamiento de desconexión colocando el fotograma Zona activa en una ubicación diferente de los otros fotogramas de botón.

8 Para asignar un sonido a un estado del botón, importe un archivo de sonido: Archivo > Importar (Files > Import). Luego seleccione el fotograma de dicho estado en la Línea de tiempo, clic con el botón derecho del mouse y elija Propiedades (Properties); a continuación haga clic en la ficha Sonido y elija el sonido importado.

9 Cuando haya finalizado, elija Edición > Editar documento (Edit > Edit document). Arrastre el símbolo del botón fuera de la ventana Biblioteca hacia la Escena para crear una instancia del símbolo en la película.

Más información sobre las Zonas activas (o zonas sensibles) clic aqui:
Introducción al diseño interactivo de elementos dinámicos (por Guillem Bou Bauzá)