miércoles, 10 de agosto de 2011

Cómo poner un gif animado en un blog

Primero deberán alojar el gif en Picassa o algún alojamiento gratuito de gif, luego copian la dirección url de la imagen, posicionándose sobre ella (propiedades de la imagen) y la pegan en una entrada con edición de html activada y seleccionando en "imagen", pegan el código en donde aparece URL, es un poco complicado, pero con paciencia se puede!!!
suerte

domingo, 7 de agosto de 2011

lunes, 4 de julio de 2011

Animación lineal de Encuentro de arte infantil "Mañolo" 2011

Celebrando el encuentro de Arte, que se viene la segunda edición! doy todo mi cariño en esta animation sobre los dibujos de Kevin, jovencísimo niño. Suerte este año Mañolo, que se llene de dibujos el encuentro!!

lunes, 30 de mayo de 2011

Publicar una película

Para mostrar mis películas a la audiencia, Flash me permite elegir entre distintos formatos.
Una vez que terminé mi película, voy a: Archivo >Configuración de publicación, selecciono formato:
.exe para hacer un archivo autoejecutable, o sea que el usuario no necesitará tener instalado el programa Flash en su computadora para poder ver la película. 
Quick Time (.mov) es muy utilizado, pero no permitirá que se vea la interacción. En el caso de una película de secuencia lineal, no presenta inconvenientes.
Prueben a publicar en distintos formatos.
.swf, es un formato que se puede abrir con cualquier navegador como el Mozilla o el Explorer.
Vean las diferencias de peso que hay en cada uno de estos archivos, el más liviano termina siendo el swf.

Máscara, ejercicio

1 Con una capa, donde he dibujado formas, seleccionada, agrego una capa nueva a la línea de tiempo y le asigno el nombre Máscara.
2 En la caja de herramientas, selecciono la herramienta Rectángulo y dibujo un rectángulo menor al tamaño del escenario. Este rectángulo es la forma de la máscara. Todo lo que se encuentre bajo el rectángulo será visible.
3 Hago clic con el botón derecho del ratón (Windows) o clic mientras presiono la tecla Control (Macintosh) en el nombre de la capa Máscara en la línea de tiempo y elijo Máscara en el menú contextual.
La capa se convierte en una capa de máscara, señalada por un icono de una flecha hacia abajo. La capa situada inmediatamente debajo está vinculada a la capa Máscara y su contenido se muestra a través del área rellenada de la máscara. El nombre de capa de máscara aparece con sangría y su ícono cambia a una flecha que apunta a la derecha. La ilustración del lienzo ya no está visible en el escenario.
Las capas de máscara deben estar bloqueadas para que se muestre el efecto Máscara. Para editar las formas, puedo desbloquear las capas Máscara y Formas. Cuando acabe de editar la ilustración, bloqueo las capas de nuevo para invocar la máscara.
4 Guardo el archivo.


Insertar Sonidos, ejercicio

Prueben a colocarle otra capa al botón e insertarle sonidos en las distintas instancias:
1 Vuelvo al modo de edición de botón, haciendo doble clic sobre el icono del botón en la biblioteca
2 Inserto una nueva capa y la nombro sonidos.
3 http://www.freesound.org/, esta es la web de sonido donde te podés registrar gratuitamente, tendrás un nombre de usuario y una contraseña que te permitirá bajarte todos los sonidos que quieras, de este modo te podés hacer una carpeta en mis documentos, nombrarla sonidos y guardar los que te gusten.
4 Importo el sonido elegido: archivo > importar a biblioteca.
5 Selecciono el fotograma reposo de la capa sonidos.
6 Arrastro el sonido seleccionado desde la biblioteca hasta el escenario, de este modo se coloca en el fotograma que he seleccionado.
7 Hago lo mismo con los otros estados del botón, insertando F7 o fotograma clave vacío.
Observen ahora en la ventana propiedades los distintos parámetros que podemos modificar del sonido, selecciono un fotograma de sonido, miro en la ventana propiedades, veo que dice sonido y está el nombre del que he seleccionado para ese fotograma, si despliego esa ventana, puedo cambiar desde ahí el sonido, me pone todos los sonidos que tengo en la biblioteca.
Luego está efectos, prueben las distintas opciones.
Y abajo está sinc, desplieguen y vean y prueben lo que sucede con las distintas opciones.
Pruebo la película.

Creación de botón + interactividad, ejercicio

La característica destacable de Flash es la interactividad, lo que se dice enlazar por medio de un nodo (botón) una escena con otra.
Los botones SON SÍMBOLOS, como los gráficos y los clip de película.
Tienen cuatro estados:
1 El primero es la imagen que vemos cuando el cursor está fuera del área del botón (REPOSO o UP).
2 El segundo es el que vemos cuando nos situamos por encima (SOBRE o OVER), por lo general, desearemos avisarle al usuario que se halla encima de algo que lo conectará con otra cosa, en ese momento aparece la "manito" que me indica que hay interactividad.
3 El tercer estado se da cuando picamos sobre él (PRESIONADO o DOWN ).
4 El cuarto estado (ZONA ACTIVA o HIT) define los límites del botón, es el área que reconoce los movimientos del mousse  y que hará funcionar mi botón.
Para esto, con un archivo nuevo, voy a:
1 INSERTAR >  NUEVO SIMBOLO > selecciono: BOTON , le doy un nombre: BOTON  > ACEPTAR.
Por más obvio que les parezca, nombrar los símbolos es de gran ayuda.
Flash me presenta el modo de edición de botón, en el escenario aparece una capa y sobre la línea de tiempo CUATRO FOTOGRAMAS nombrados como : REPOSO o UP, SOBRE o OVER, PRESIONADO o DOWN Y ZONA ACTIVA o HIT
FLASH EMPLAZA AUTOMÁTICAMENTE UN FOTOGRAMA CLAVE VACÍO en el fotograma   REPOSO.
2 Seleccionen el fotograma REPOSO en la línea de tiempo. Creen un objeto simple (un círculo o un cuadrado) que esté con el centro en la cruz del escenario, este es un indicador para poder emplazar los cuatro estados en el mismo sitio.
3 Seleccionen el fotograma SOBRE en la línea de tiempo, coloquen un fotograma clave (F6 o insertar > fotograma clave).
Háganles pequeños cambios, como de color o de forma, puede ser algo más grande que el anterior.
4 Seleccionen el fotograma PRESIONADO en la línea de tiempo. Inserten un fotograma clave. Hagan algunos cambios.
5 Seleccionen el fotograma ZONA ACTIVA en la línea de tiempo. Inserten un fotograma clave, ESTE FOTOGRAMA NO SE VÉ, sólo sirve para indicar
la zona DONDE SE ACTIVARÁ MI BOTÓN, así que puede ser negro, para que lo puedan comprobar.
6 PARA HABILITAR EL BOTÓN SOBRE EL ESCENARIO TENGO QUE IR A CONTROL > HABILITAR BOTONES SIMPLES.

7 Ya tengo mi botón, vuelvo a la escena, y compruebo que mi símbolo botón está en la biblioteca. Selecciono el primer fotograma de la capa 1 de la escena. Arrastro el botón desde la biblioteca al escenario y lo coloco en un costado. Nombro a esta capa botón. Le agrego a esta capa 30 fotogramas, insertar > fotograma. Creo una capa nueva y con la herramienta texto escribo en el primer fotograma: escena 1, le agrego 30 fotogramas.

8 Inserto una nueva escena, voy a insertar > escena. Le agrego 20 fotogramas. Con la herramienta texto escribo en el primer fotograma: escena 2, le agrego 20 fotogramas.
Para ir a de una escena a otra, podemos hacerlo desde el ícono que está a la
derecha arriba del escenario, (hay dos íconos: el primero es para ir de una escena a otra, el segundo para ir de un símbolo al otro), o si no podemos abrir la ventana ESCENA, desde el menú ventana, y picar sobre cada una de ellas.
Ahora debo indicarle al programa dos acciones fundamentales para que suceda la interactividad.
Por más que yo coloque un botón en la escena 1, si no le indico a Flash que se detenga en el final de esta escena, la reproducción seguirá corriendo hasta la escena 2 sin más. Y volverá a empezar en un ciclo ininterrumpido.
Lo puedo comprobar haciendo control + intro.
Para que se detenga en el final de la escena 1 y pueda accionar mi botón, debo comenzar a colocar ACCIONES.
HAY DOS TIPOS DE ACCIONES (en principio) :
ACCIONES DE FOTOGRAMA Y ACCIONES DE BOTON.
9 Vamos a empezar por indicarle a Flash que queremos que la película se detenga cuando llegue al fotograma 30 de la escena 1.
Para esto creamos una capa nueva y la nombramos acciones, le ponemos un fotograma clave VACIO en el fotograma 30.
Vamos a usar por vez primera la ventana ACCIONES (es la que está abajo del escenario). 
La desplegamos.
Vean que dice: ACCIONES - FOTOGRAMA, lo que me indica que estoy en condiciones de dar una acción a un fotograma (otra vez, la obviedad, pero verán más adelante que esto puede ser muy útil).
10 Seleccionamos el fotograma clave vacío 30 de la capa acciones y con la ventana ACCIONES abierta, veremos un signo +, picamos sobre él y vamos a ACCIONES > CONTROL DE PELICULA > STOP. Automáticamente aparece la indicación
stop();
en la ventana acciones y una pequeña a minúscula por encima del fotograma clave que me indica que este fotograma contiene una acción.
ESTO ES MUY IMPORTANTE PARA SABER DÓNDE HEMOS COLOCADO LA ACCIÓN Y RECORDAR CUÁLES son los FOTOGRAMAS que CONTIENEN ACCIONES.
Con sólo picar sobre el fotograma aparece la acción determinada en la ventana acciones.
11 Ahora vamos a probar la película, (control + intro). Vean que se detiene al finalizar la escena.  
12 Entonces vamos por la segunda acción, la del botón:
Estamos en la escena 1, seleccionamos el botón SOBRE EL ESCENARIO, (si tengo habilitado el control de botón sobre el escenario y me aparece la manito que no me permite seleccionarlo, voy a CONTROL > HABILITAR BOTONES SIMPLES Y LO DESELECCIONO.)
Ahora en la ventana ACCIONES dirá al lado BOTÓN. Pico sobre el signo + y voy a
ACCIONES > CONTROL DE PELICULA > GOTOANDPLAY.
Vean que aparece en la ventana acciones un cuadro con distintas opciones. Por defecto aparece seleccionado IR A Y REPRODUCIR, lo dejamos así. Debajo dice: ESCENA,
selecciono ESCENA 2, QUE ES A DONDE QUIERO QUE ME CONECTE EL BOTÓN.
Debajo dice TIPO: número de fotograma, lo dejo así, y debajo FOTOGRAMA : 1 , este será el fotograma por donde comenzará a reproducirse la ESCENA 2. el TEXTO COMPLETO de las acciones de botón DICE:
on (release) {
    gotoAndPlay("Escena 2", 1);
}
13  Ahora puedo probar mi película, la reproducción se detendrá cuando llegue al fotograma 30 de la ESCENA 1, y si pico sobre mi botón se reproduce la ESCENA 2 desde el comienzo. Y vuelve a la escena 1.
LO LOGRARON???
LOS FELICITO!!!
14 PARA TERMINAR, VIERON QUE AL FINALIZAR LA ESCENA 2, la película vuelve sola al fotograma 1 de la ESCENA 1, si yo quisiera detener la reproducción AL FINALIZAR LA ESCENA 2, CÓMO LO HARÍA?
Ya lo saben...
A ver quién lo logra....!!!!!

Bueno, si estás con dudas, harás lo siguiente: 

15 Agregar una capa de acciones a la escena 2.
16 Insertar un fotograma clave en el 20 de esta capa, asignarle acción de fotograma: stop.
17 Crear una capa nueva en esta misma escena, nombrarla botón, emplazar otra instancia del botón que hemos creado en el fotograma 1, asignarle la acción al botón, seleccionándolo desde el escenario, pero ahora indicando que vaya a la escena 1.
Ahora mi película debe correr hasta el fotograma 30 de la escena 1, accionando el botón comienza a correr la escena 2, se detiene en el fotograma 20 y accionando el botón vuelve a la escena 1.
Recuerden que para cada cosa utilizo una capa diferente, una para el texto, otra para las acciones de fotograma, y otra para el botón.

Archivo del blog