Diseño de menús!

Bueno bueno... después de volver de Londres nos hemos puesto otra vez a la carga!
Hoy hemos hecho el diseño de menús.
Yo he hecho el de la clase (igual se le hacen algunos cambios) y el de mi pupitre.

En cambio Sílvia se ha ocupado del menú de extras "+Cositas" y de su pupitre personal.
Podéis verlo clicando sobre su nombre.

Guión literario de la animación personal

Aparece una mosca que viene y se va por la pantalla. El fondo de la pantalla representa el interior de mi cerebro o de la cabeza. Al final se acerca más, se para y empieza a hablar (por medio de bocadillos). Dice que ha entrado en mi cerebro por error y que va a dar una vuelta a ver qué se encuentra. La mosca sale de cuadro y aparece en otra parte del cerebro (es la misma cabeza y va dando vueltas, el fondo es similar al anterior). En esta nueva pantalla hay 3 túneles. Encima de ellos pone PASADO, PRESENTE y FUTURO.
La mosca decide entrar en el que pone PASADO: Aparece una foto mía de pequeña y entonces la mosca explica donde nací y cuales son mis raíces.
Vuelve a la pantalla anterior y entra en túnel PRESENTE: De fondo hay una foto de mi cuarto y la mosca explica más cosillas sobre mí.
Finalmente entra en el túnel FUTURO: aparace una bombilla en medio con fotos alrededor. Ideas o planes futuros.

Mapa de navegación del DVD

Este es el mapa de navegación (más o menos) que ha quedado para nuestro DVD.

Una cosita!

Esta es mi animación para el logo.
Aún falta añadir el título, problemas con la tipografía y esas cosas...

Logo y versiones descartadas

Antes de empezar ya habíamos acordado más o menos la idea de como queríamos el logo, así que hicimos unos bocetos de una mano con un dedo alzado:


Al final nos decidimos por la tercera mano y pensamos en darle color:

Como finalmente decidimos que la estética de nuestro DVD sería en blanco y negro, cogimos este mismo dibujo y le quitamos el color:


Únicamente nos falta escoger una tipografía y escribir alrededor del círculo "UNA COSITA". (Lo haremos en casa ya que en el cole no podemos descargarnos tipografías).

Menú (trabajo en grupo)

La idea que hemos tenido para nuestro menú es crearlo en base al concepto/estética de una clase.

Empezaría con una animación de nuestro logotipo seguida del menú principal, que sería una clase, y apareceríamos sentados los 4 (Sílvia, Genís, Víctor y yo) cada uno en nuestro pupitre.
Al clicar sobre cada uno, pasaríamos a un sub-menú, con una animación, que iría de la clase a nuestro pupitre donde habría una libreta. Dentro de la libreta aparecerían los diferentes apartados/menús de cada uno (personalizado).
En el menú principal también habría un botón/apartado con "+cositas". En este apartado habrá un making-off del mismo dvd y otro apartado con fotos nuestras.

De Photoshop a Encore

Abrimos un Nuevo Archivo.
Le damos un título al archivo.
En la opción Predefinir clicamos sobre la opción Película y Vídeo.
En la opción Tamaño escogemos la opción PAL D1/DV
Anchura: 720 píxels
Altura: 576 píxels


Importamos una imagen sobre una capa nueva, para el fondo de nuestro menú (la foto del conejo por ejemplo) y con la herramienta de texto T escribimos el nombre del primer botón u opción.





Creamos 2 textos más (2 botones) con la herramienta T.
En la ventana Capas (->Ventana->Capas) creamos 3 carpetas, una para cada botón, con el icono de la carpeta que se encuentra en la esquina inferior derecha.
Cada carpeta debe contener uno de los botones, para ello arrastramos la capa del botón dentro de la carpeta.
Cada carpeta debe tener un nombre que se asocie al botón. Haciendo doble clic sobre el nombre de la carpeta podemos cambiarle dicho nombre. Para que Encore entienda que se trata de un botón, el nombre de la carpeta debe ir con el prefijo (+) y sin espacios. (ver foto)
*Podemos aplicar diferentes filtros a los botones.



Para definir los estados de los botones (la zona que cambia) debemos hacerlo a partir de 3 capas.
A cada botón (a cada carpeta), le añadimos 3 capas más. En cada capa creamos un Símbolo (DE COLORES DISTINTOS) que se superpongan unos con otros.
Cambiamos los nombres de estas capas y les añadimos el prefijo (=1), (=2) y (=3) sin espacios.


(=1)OPCION1


(=2)OPCION1


(=3)OPCION1

Al final debe quedarnos álgo parecido a la siguiente imagen.

Luego, en Encore, utilizaremos las capas con el prefijo (=1), (=2) y (=3) para definir los diferentes estados del botón: en reposo, seleccionado y apretado.

LocoRoco

Haced caso a la Sánchez!!!! ;)

No? Sí?

Chan cháaaaaan...

El defensor del castillo...

2ª Evaluación (Repaso)

[Preguntas 1: Símbolos e instáncias]

1. Un símbolo se comporta como una imagen importada en el programa Flash. Los símbolos aparecen en la biblioteca y podemos arrastrarlos dentro de la escena tantas veces como queramos. Es decir que no deberemos crear cada vez el objeto (en este caso la estrella) si queremos hacer una copia de la misma. Podríamos decir que son como una especie de "tampón" o "sello".

2. Una instancia es un símbolo que hemos arrastrado dentro de la escena.

3. Una instancia puede ser modificada de varias maneras:
- Modificar, en las propiedades de la instancia, su color y transparencia (brillo,tinta,alfa)
- Aplicarle filtros como sombras, iluminación, biseles, desenfoques...
- Modificala transformandola, rotándola, cambiándola de tamaño...
- Aplicarle una transformación 3D de translación o rotación.

4. Al hacer doble click sobre la instancia, podremos editar su símbolo original como si de un objeto normal se tratara. Podremos hacer los siguientes cambios:
- Forma
- Tamaño - Transformación libre
- Color de relleno y de trazado
- Grosor del trazado
- Su unión (redondeado, bisel, inglete)
Al modificar un símbolo, todas sus instancias se cambiarán de la misma manera que éste.

5. Por ejemplo, si aumentamos el grosor del trazado del símbolo "estrella", el trazado de sus instancias también aumentarán.

6. En cambio si modificamos la transparencia de una instancia, las demás no se verán afectadas y seguirán igual que antes. Las instancias son independientes entre ellas y podemos modificarlas sin cambiar el símbolo original.

[Preguntas 2: La línea de tiempo ]

- Un fotograma "clave" sirve para diferenciarse del resto, es decir, que a partir de ese fotograma los objetos puede cambiar de posición, color... Un fotograma está supeditado a un fotograma "clave", es decir que siempre será igual que el fotograma clave que le precede.

- Qué es el papel cebolla?
El papel cebolla es una herramienta de Flash que nos permite ver las posiciones anteriores y posteriores (en los fotogramas clave) de un objeto que hemos animado con fotogramas clave. Cuando clicamos sobre papel cebolla aparecen las diferentes posiciones del objeto en un tono más transparente.

-Qué es una capa máscara?
Para crear una capa máscara simplemente creamos una Nueva Capa y sobre ésta, click derecho: Máscara.
La capa máscara sirve para "enmascarar otras capas", es decir que las esconde.
Cuando creamos una capa máscara, dibujamos sobre ella una forma u objeto. Al hacer clic derecho sobre la capa máscara y apretar "mostrar máscara", los objetos de las diferentes capas que se encuentren DEBAJO de la capa máscara desaparecerán y SOLAMENTE podremos ver los objetos cuya posición coincida con la del objeto dibujado en la capa máscara.

[Preguntes 3: So ]

-Qué formas de sincronització de audio permite flash?
Evento, Inicio, Detener y Flujo.

- La sincronización de inicio hace que el sonido o música empiece en el fotograma donde hemos puesto el sonido. Deja de sonar cuando termina la canción o música. Cuando ya ha terminado y vuelva a pasar por el fotograma clave donde se encuentra, vuelve a empezar.

Sin embargo, la sincronización de evento hace que suene la música/sonido/audio cada vez que la animación pasa por el primer fotograma, sin que deje de sonar el que ya sonaba con anterioridad. Esto hace que la música vaya sonando y se vaya superponiendo... un caos xd.

[Preguntas 4: Clips de película y gráficos]

-Qué tienen en común un gráfico y un clip de pellícula?
Los 2 son tipos de símbolos que permite Flash.

- El clip de película es un tipo de símbolo que tiene su propia línea de tiempo, es decir que es independiente de la línea de tiempo principal. Aunque está se haya terminado, el clip de película seguirá en movimiento.

- El gráfico es otro tipo de símbolo. Sin embargo, éste se coordina con la línea de tiempo principal y se repite hasta que ésta se termina.

[Preguntas 5: Los botones]

Dentro de cada botón tenemos 4 fotogramas

- 1ºfotograma: Reposo
Este sirve para definir el botón en su estado de reposo. Es decir cuando no pasamos el ratón por encima de él ni clicamos sobre él.

-2ºfotograma: Sobre
Define el estado, forma y color del botón cuando el ratón pasa por encima de él.

-3ºfotograma: Presionado
Define el botón cuando presionamos/clicamos sobre él.

-4ºfotograma: Zona
Es una zona invisible que define la zona sensible del botón. Puede coincidir con el botón o ser más grande que éste. Cuando pasemos el ratón por esa zona el botón cambiará al 2ºfotograma y cuando cliquemos, pasará al 3º.

Por otro lado en Flash podemos encontrar botones prediseñados si vamos a la pestaña Ventana -> Bibliotecas Comunes -> Botones

[Preguntas 6: Interpolación de movimiento]

-Qué es una interpolación de movimiento?
Una interpolación de movimiento sirve para mover, escalar o cambiar la transparencia de un objeto. Flash nos calcula las posiciones del objeto de un fotograma clave a otro. Después podremos alargar la trayectoria y modificar los diferentes puntos (fotogramas claves) de la animación.

[Preguntas 7: actionScript]

-Qué es el actionScript?
El actionScript es un tipo de código que se utiliza en Flash para controlar las acciones de una animación. Se utiliza sobretodo para programar los botones o para parar la acción.

-Cómo podemos controlar la línea de tiempo con actionScript?
Cuando abrimos -> Ventana -> Acciones, se nos abre el actionScript donde escribimos los códigos.
Para controlar la línea de tiempo, debemos crear una nueva capa para las acciones y seleccionar el primer fotograma de esta capa. Entonces abrimos el actionScript y escribimos el código que nos interesa.
Podemos hacer que la animación empiece, se pare, vuelva a reanudarse o que vuelva a un fotograma en concreto de la animación.

-Escribe el código de actionScript para parar la línea de tiempo con la instancia "btpausa" de un botón.

btpausa.addEventListener(MouseEvent.CLICK,parar)
function parar(event:MouseEvent){
gotoAndStop(1);

[Preguntes 8: Cinemàtica inversa]

-Qué es la cinemática inversa?
Es otra forma de animar que tiene Flash pero para ello debemos crear un esqueleto dentro del objeto/símbolo.

-Qué herramienta de flash permite la cinemática inversa?
La herramienta Hueso.

Super Blooper :)

:)

Pulpoooo

He aquí mi pulpo rico ricoooo :D

PD: creo que le pondré más cosas

SSSSSSSSSSSSSSSSSSSSSerpiente xd

Sé que es horrendaaaa pero el pulpo será mejor (H)

Historieta de 5 segundos!

Dedicado a Ari Ari Folgui, con todo nuestro amor y cariño,

Clara y Silvia ^^

PD: que conste que es una bola de papel de plata, no una piedra!

Tooooma coheteeeeee!!!!

:)

Mariposaaaaaa!!!

Esta es la mariposilla que hicimos ayer con Flash.
Hoy la hemos acabado.
He añadido la abeja de la Laia pk me ha molao, ea. xd

Tipos de símbolos en Flash

.
El clip de película es un tipo de símbolo que tiene su propia línea de tiempo, es decir que es independiente de la línea de tiempo principal. Aunque está se haya terminado, el clip de película seguirá en movimiento.

El gráfico es otro tipo de símbolo. Sin embargo, éste se coordina con la línea de tiempo principal y se repite hasta que ésta se termina.

Hemos hecho un ejercicio buscando 2 conceptos contrarios, utilizando los diferentes tipos de símbolos y botones para pasar de un concepto al otro.

Botones!

Dentro de cada botón tenemos 4 fotogramas

- 1ºfotograma: Reposo
Este sirve para definir el botón en su estado de reposo. Es decir cuando no pasamos el ratón por encima de él ni clicamos sobre él.


-2ºfotograma: Sobre
Define el estado, forma y color del botón cuando el ratón pasa por encima de él.



-3ºfotograma: Presionado
Define el botón cuando presionamos/clicamos sobre él.



-4ºfotograma: Zona
Es una zona invisible que define la zona sensible del botón. Puede coincidir con el botón o ser más grande que éste. Cuando pasemos el ratón por esa zona el botón cambiará al 2ºfotograma y cuando cliquemos, pasará al 3º.


Le hemos añadido un botón a la animación del otro día:

Chicleeeeeeeeeee!

Bueno, aquí dejo lo nuevo que hemos hecho de Flash hoy en clase.
Y tengo que añadir que es algo que me pasa muy amenudo... xD



Feliz año! Espero que os hayan traído mucho carbón! Mwajajajaja!

PD: ¡Prima! ¡La seta va pa' ti! :)