viernes, 23 de octubre de 2009

Páginas de ayuda para infografías + Bonus

Se viene el trabajo de infografías así que acá una recopilación de

http://www.consumer.es/

Página española denominada también "El diario del consumidor". Hay una sección de infografías de temas variados para tener algún tipo de referencia.

Ejemplo: http://www.consumer.es/web/es/salud/prevencion/2009/07/05/187935.php (Infografía de medio siglo de vida de skateboarding).


http://www.criteriondg.info/wordpress/10-consejos-para-hacer-infografias/

10 consejos útiles para considerar a la hora de hacer una infografá (dejaremos que la página hable por sí misma XD)

http://www.serindigena.cl/territorios/recursos/multimedia/infografias/telar_mapuche.htm

Una infografía sobre el telar mapuche.

Bonus track

http://www.newgrounds.com/
Ya que he visto que algunos de ustedes andan un poco aproblemados con flash, acá hay una recopilación de juegos y videos flash de temas muy variados (vienen con rango de edad determinado dependiendo del contenido) para que se animen y pasen un rato agradable con este programa.


Suerte y vamos, flash no muerde :D

viernes, 16 de octubre de 2009

ActionScript

Como se dijo en clase, actionscript es un pseudo lenguaje de programación disponible en flash para hacer funcionar los botones y así potenciar la interactividad, entre otras cosas. A continuación veremos cómo acceder a él y cómo aplicarlo.

Acceder

Para acceder a ActionScript, tienes que crear un botón, seleccionarlo e ingresar al ícono indicado en el cuadrado rojo. Ahí se programa el botón escogido.






Si todo sale bien, aparecerá esta ventana, debe tener en un lado una lista con las siguientes cosas:
"Funciones Globales", "Propiedades generales", "Operadores", etc.




Ahora que ya ingresamos a ActionScript... ¡Programemos!

Primero se ingresa a "Funciones globales" y después a "Control Clip de Película". Al ingresar a esto último, tendremos una lista nueva con opciones disponibles. En nuestro caso, hay que ocupar "On". Al elegir "On", tenemos una lista nueva.



De esa lista hay que escoger "release" (o liberar, que es lo que hace el botón al apretarse: "Liberar" una acción).



Y luego de eso, hay que ubicarse entre las llaves que salen ahí para colocar los demás comandos.



Siguiente Paso: Definir función para cada botón.
En este momento, los comandos elegidos dependerán del botón que se esté animando.

En "Funciones Globales" hay una lista de grupos de comandos (entre los cuales está el ya usado "Control de Clip de Película"). Para acceder a algunos de los que necesitaremos hay que entrar a "Control de la línea de tiempo", aunque también hay otros utilizados que se encuentran en el grupo "Navegador/Red".



Aquí está la lista de comandos a utilizar (los que vimos en clases).

Play (Reproducir):



Stop (Parar). Se coloca 1 porque indica que irá al inicio de la animación (fotograma 1):



Pausa:



Foward (Adelantar):



Rewind (Retroceder):



Dirigirse a "x" fotograma. Primero hay que ponerle nombre. Sólo hay que escoger uno y dirigirse al rectángulo plomo que hay abajo. Se coloca nombre en donde dice "etiqueta de fotograma".



Ahora, en el comando del botón para dirigirse a ese fotograma, hay que colocar su nombre entre paréntesis y entre comillas (sino no sirve).




Cargar película externa.
Esta película puede ser bajada de internet o hecha en un archivo aparte (Se recomienda lo último para practicar y/o para cuando no se sepa bajar películas de internet). Debe anotarse el nombre de la película entre paréntesis y comillas, y agregar al final ".swf" ya que es una presentación. Al lado se coloca un número, puede ser 1 para que aparezcan las 2 películas juntas o 0 para que la reemplace:




Cargar escena.
Para crear una escena nueva hay que ir a "agregar escena" (que normalmente se presenta como un signo más) o ir a "ventana", luego a "otros paneles" luego a "escena" y apretar el signo más que aparece en el cuadro que aparezca.



Para el comando, hay que poner el nombre de la escena entre paréntesis o comillas. Dependiendo de la versión de flash que posean, hay que escribirlo en español o en inglés.




Y estos serían los botones que ocuparán por ahora.

Pero acá hay otra utilidad del ActionScript.

Para detener la animación al final de la escena deben ir al último fotograma, apretar con el botón derecho del mouse e ir a "acciones". Luego vayan a "funciones globales", luego "control de línea de tiempo" y después "stop".



Si la acción está correcta, en el fotograma saldrá una "a" minúscula. Con esto se evita el paso automático a la otra escena o que la animación se reproduzca de manera infinita.


¡Mucha suerte y éxito!


Y recuerden, hagan click en las imágenes para verlas más grandes.

Guía de movimiento y máscara

Guía de movimiento:
Sirve para crear un recorrido para un objeto que esté en una animación por movimiento.
Para ello, hay que crear un objeto para convertirlo en símbolo y hacer una animación por movimiento (para recordar cómo se hace, ir acá).

Luego se crea una capa para la guía de movimiento. Se apreta el botón "Añadir guía de movimiento" que aparece señalado en la imagen.



En esta capa se crea una línea (con pluma, lápiz o pincel, da lo mismo) que sea un recorrido para que siga la forma.



Luego hay que dirigirnos al primer y al último fotograma de la animación. En ellos hay que colocar la figura en los extremos respectivos de la guía.


[Primer fotograma]



[Último fotograma]


La línea se puede notar al reproducir el video en el archivo directamente en el tablero de trabajo pero, al verlo en formato swf, la línea desaparece.




Máscara:
Esta sirve para dejar ver sólo una parte de una animación. Para crearla hay que hacer una capa para crear una animación de movimiento (no se olviden de convertir la forma en un símbolo). Luego creen una capa superior y hagan su máscara (puede ser una figura cualquiera).


[Al respetable público le presento mi excusa: Es cualquier figura]

Al tener su "máscara" lista, vayan a la capa donde esta está y la aprietan con el botón derecho del mouse y escogen la opción "máscara".


[Línea de tiempo antes de convertir en máscara]


[Línea de tiempo después de convertir en máscara]

Al ver la presentación directamente en el tablero de trabajo, no se notará el efecto de la máscara pero, al verlo como presentación (apretar Ctrl+Enter) se verá el efecto de la máscara.




Que lo disfruten y sigan ratoneando en flash (y, como ya ven, ahora los tutoriales también tienen videos ^_^)

viernes, 9 de octubre de 2009

Clip de película

Ya hemos visto las animaciones por forma, por movimiento y cuadro a cuadro. También hemos visto los símbolos gráficos y de botones. Ahora falta ver el "Clip de película", un símbolo que contiene su animación propia a la vez que participa en una animación general. Vamos a explicarlo a continuación:

1- Convertir una figura en un símbolo "Clip de película" (Ir a "modificar" y a "convertir en símbolo" o apretar f8). Al hacer eso, creen una animación por movimiento común.

2- Al tener su animación (y asegurarse que no tenga alguna falla), hagan doble click en la forma convertida en símbolo para ingresar a su propia línea de tiempo.



Allí pueden hacer cualquier cantidad de animaciones (por forma, movimiento o cuadro a cuadro). Estas se repetirán cíclicamente en la animación general donde estaba el símbolo (por ejemplo, la animación por movimiento que se hizo en un principio).

3- Salir de la línea de tiempo del clip de película para probar la animación. Pero el clip de película se ve sólamente en formato swf. Para verla, apretar ctrl+enter.



Este tipo de símbolo crea animaciones largas sin necesidad de que la línea de tiempo principal tenga muchos fotogramas. Esto ocurre debido a que se trabaja dentro del símbolo.

Botones

Los botones son una de las cosas más importantes que tiene Flash, al programarlos, podemos ocuparlos para hacer funciones variadas en las animaciones que se hagan con dicho programa. Aquí una pequeña guía de cómo hacerlos.

Primero lo primero: Hacer un botón. Puede ser de cualquier forma, un círculo, un cuadrado, una estrella... el punto es tener algo para luego configurarlo. Como ejemplo, tendremos el típico ejemplo de "Play"



Lo siguiente es convertirlo a símbolo "botón". Para ello hay que ingresar a "modificar" y luego a "convertir en símbolo" (o F8 para acortar, acuérdense de seleccionar el futuro botón). Al entrar a dicho menú, eligen "botón". Al hacer eso, en la biblioteca, aparecerá el símbolo.



Ahora a intervenir el botón. Pueden entrar a él en la biblioteca o haciendo doble click diractamente en el botón. Así podrán ingresar a la línea de tiempo propia del botón.



En esta línea hay 4 fotogramas:

- Reposo: El botón propiamente tal.
- Sobre: El botón con la flecha sobre él (la flecha se convierte en mano).
- Presionado: El botón al hacer click sobre él.
- Zona Activa: Parte sensible del botón.

En estos 4 fotogramas se hacen cambios en el botón, ya sean de forma, tamaño o color.


[Reposo]




[Sobre]


[Presionado]



[Zona activa. Para este, sólo se necesita precisar la zona sensible, por lo tanto, la superficie debe tener relleno (el color da lo mismo).]


Después de esto, regresen a la linea de tiempo normal (apretando "Escena 1" debajo de la línea de tiempo).