TUTORIAL

ESQUEMA:

PUNTO 1: DIBUJO BASICO CON ADOBE CS3

- Formas básicas (ovalo, cuadrado), pintarlas. Modificar lineas de

formas, cortar lineas, eliminar tramos, etc. (Herramienta de
seleccion). Modificar tamaño, modificar escala, rotar, etc.
(Herramienta de transformacion). Menu modificar. Centro de
gravedad.

- Convertir a simbolo. Explicacion de lo que un simbolo es

(comparacion con objeto Java). Entrar y salir de un simbolo.
Duplicar/copiar simbolo.

- Capas. Explicacion de las capas (jerarquia de capas, bloquear capas,

ocultar, etc).

- Otras cosas (menús, propiedades, etc.)

PUNTO 2: ANIMACION BASICA CON ADOBE CS3

- Primeros pasos: situar centros de gravedad, hacer un simbolo por

cada linea de tiempo, distribuir a capas.

- Linea de tiempo, significado de linea de tiempo, Fotograma,

significado de fotograma, fotograma clave.

- Interpolacion de movimiento, significado. Probar pelicula. Ease.

PUNTO 3: PROGRAMACION BASICA DE CLIPS DE PELICULA EN

ACTIONSCRIPT 2.0

- Api de actionscript. Programacion basica (Declaracion de variables,

ifs, bucles, etc.)

- Atributos importantes de los movieclips (currentFrame, hitArea,

rotation, totalframes, x, y, xmouse, ymouse, etc.)

- Metodos importantes de movieClips. (hitTest, attachAudio,

gotoAndPlay, gotoAndStop, moveto, nextframe, stop,..)

- Eventos en movieclips: onpress, onmouseup, onmousedown,

onkeydown, onenterframe, etc.

- Variable raiz.

PSEUDO-GUIÓN:

PUNTO 1:

- Comentar el motivo de haber escogido Adobe Cs3 (herramienta

oficial de los creadores de flash, facilidad de uso y de desarrollo).
- Dibujar las formas básicas, con varios colores. Enseñar la paleta de
colores, a cambiar la intensidad de un color, a introducir colores
mediante el código RGB, y a coger colores de cualquier punto de la
pantalla.

- Dibujar una forma sin borde, y hablar de que una figura tiene borde
y relleno de manera separada, de forma que podemos separar el
relleno del borde.

- Modificar una figura mediante la herramienta de selección. Primero

tiramos simplemente de las esquinas. Luego modificamos los lados de
la figura, que sería curvar la figura y finalmente, mostramos como
añadir nuevos vertices a la figura. Comentar lo facil que es crear
figuras en flash gracias a estos sencillos pasos.

- Comentar que otra forma de modificar figuras es seleccionando una

parte de ellas y borrandola, que puede incluir relleno y borde o solo
una de las cosas. Enseñar bien a seleccionar y deseleccionar cosas y
a borrarlas para modificar la figura.

- Modificar el tamaño de una figura medianet la herramienta de

transformación. Hacerlo de manera normal, y de forma escalada (la
que conserva las proporciones). Rotar también la figura.

- Hablar del centro de gravedad dela figura, y explicar lo que se pasa

cuando se gira una figura con el centro de gravedad en varios sitios.
Explicar lo útil que es esto para animar.

- Reflejar un objeto mediante el menu modificar de la parte superior.

- Convertir una o varias figuras a simbolo. Explicar la utilidad del os

simbolos, comparandolos con objetos java (cada simbolo seria un
objeto, con sus atributos distintos (capas, etc.), y nos podemos referir
a cada simbolo independientemente desde codigo actionscript).
Explicar tambien que cada simbolo, aunque se componga de varias
figuras, se comporta como una sola (a la hora de girarlo, escalarlo,
etc.)

- Entrar y salir de un simbolo, y añadir cosas al simbolo.

- Diferencia entre copiar y pegar un simbolo (tendriamos un simbolo

con dos figuras) y duplicar simbolo (tendriamos dos simbolos iguales).

- Posicionar símbolos en el área de trabajo (traer al frente, al fondo,

etc.)

- Explicar lo que son las capas de un símbolo (diferentes partes del

simbolo situadas a diferentes niveles), y la jerarquía de las mismas
(cuanto más arriba, más adelante). Ocultar y bloquear capas.

- Comentar que todos los simbolos que creamos son clips de pelicula,
como crear objetos clip de pelicula en cs3 para que sean visibles
desde actionscirpt (eso que al principio no sabiamos hacer, no me
acuerdo como lo solucionamos).

PUNTO 2:

- Hablar de los pasos iniciales que debemos considerar antes de

animar. Esto es, situar siempre los centros de gravedad de los
simbolos donde sea conveniente, darnos cuenta de que cada linea de
tiempo que queramos utilizar ha de tener un simbolo que la
represente, y contemplar la necesidad de convertir un simbolo a
capas (un simbolo que comprende muchos simbolos, hacer una capa
de cada uno).

- Hablar de lo que es la línea de tiempo, y de que cada simbolo tiene

una independiente, y que luego esta la principal.

- Insertar fotogramas en la línea de tiempo. Explicar lo que es un

fotograma (una parte habilitada de la linea de tiempo). Explicar lo que
es un fotograma clave (momento en la línea de tiempo en el que
ocurre un cambio), e insertar alguno con cambios. Probar la película
para ver lo que ocurre.

- Interpolar movimiento, explicar lo que es (cambio constante de un

fotograma clave al siguiente). Explicar lo que es el atributo ease
(ritmo de los cambios en la interpolación, más lento al principio si es
positivo, y al final si es negativo). Hacer una interpolación de
movimiento, y probarla.

PUNTO 3:

- Mostrar la url de la api de actionscript 2.0 (http://flash-

reference.icod.de/) y comentar que vale mas que cualquier
videotutorial, que estan muy bien explicadas las cosas.

- Ifs y whiles en actionscript, son como en cualquier otro sitio.

- Hablar de que los movieClips tienen atributos particulares, y que

algunos son solo de lectura (como currentFrame). Hablar un poco de
currentFrame, x e y, heigth o totalframes para explicar su
funcionamiento, y referirse otra vez a la api para el que quiera
investigar sobre todas las propiedades de los movieclips.

- Modificar los atributos x e y de un movieclip mediante actionscript

en un bucle, para comprobar su funcionamiento.

- Hablar de algunos metodos de los movieclips y probarlos.

Consideramos importantes los metodos referidos a la linea de tiempo
(gotoandplay, gotoandstop), el hitTest (comprobar que dos objetos
chocan), stop (parar la linea de tiempo del movieclip), moveto (recibe
x e y, y mueve el movie clip a x e y). Hablar de que en la api se
encuentran todos, que son un monton y casi todos utiles

- HAcer un pequeño codigo con un hittest, aprovechando nuestra

practica de las pelotas
- Hablar de los eventos, comentar que hay basicamente el mismo tipo
de eventos que en otros lenguajes, y mostrar un ejemplo con
onmousedown, que cuando se cumpla haga un gotoandplay, y asi de
paso enseñamos el funcionamiento de eso. Algo así como cuando
pinches en empezar juego, empiece el juego de las pelotas (tan facil
como usar eso para explicarlo). Una vez mas, hablar de qu en la api
estan todos los eventos.

- Comentar la exitencia de una variable raiz, que engloba a todos los

demas movieclips, y que tiene su propia linea de tiempo, que seria la
linea de itempo principal.