1. Educación

Diseño Digital IV
(LDG)
Introducción
Este manual ha sido elaborado para orientar al estudiante de Diseño Digital IV (Licenciatura en Diseño Gráfico) en el desarrollo de sus prácticas de laboratorios. Está diseñado para que haga uso de él antes, durante y
después de la práctica, de tal forma que le ofrece un método facilitador en su proceso de enseñanza/aprendizaje durante esta asignatura.
El desarrollo de esta asignatura tiene prevista 15 sesiones, que incluyen una práctica semanal en las cuales
se realizarán algunos proyectos de diseño, en los cuales, el estudiante aplicará los conceptos y las técnicas
fundamentalmente necesarios para el dominio de programas para la animación y la construcción web.
Todas las guías de laboratorio están estructuradas de la siguiente forma:
Objetivos
Materiales y equipos
Introducción teórica
Procedimiento
Bibliografía
La asignatura de Diseño Digital IV (Licenciatura en Diseño Gráfico) está dividida en tres unidades durante
el ciclo. La unidad 1 tendrá 2 laboratorios prácticos, la unidad 2 tendrá 6 laboratorios prácticos divididos en
7 semanas y la unidad 3 tendrá 4 laboratorios prácticos. La última sesión realizarán un animación digital con
todos los trabajos realizados durante el ciclo.
A continuación se presenta el Reglamento General de los Laboratorios de Comunicaciones y Diseño Gráfico,
estas son reglas generales que deben ser leidas y tomadas en cuenta en cada práctica.
Reglamento General de los Laboratorios de comunicaciones
y Diseño Gráfico
Respecto a la asistencia y puntualidad, el estudiante:
1. Debe presentarse a la hora programada (Art 33 al 35), después de 15 minutos no se permitirá su ingreso.
2. Deben tener un mínimo de asistencia del 75% de cada UNIDAD, “en caso de incumplimiento de dicha
condición la nota correspondiente será cero (0.0)”. (Art. 31) Debe presentar la guía de
laboratorio corres-
pondiente, en versión impresa para ingresar al laboratorio.
3. Deben traer los materiales requeridos para el laboratorio (Guiones, bocetos, material pregrabado de audio
y/o video, insumos para decoración o montajes, etc.).
4. Si la guía se desarrolla en más de una semana, sólo se evaluará el porcentaje de la asistencia puntual.
Respecto a la evaluación:
5. Cuando por razón justificada el estudiante pierda una actividad de laboratorio, deberá solicitar en administración CITT la práctica diferida durante la semana siguiente, con el visto bueno del Docente. Se tendrá
derecho a solicitar solamente dos diferidos, durante el ciclo, por cada asignatura.
6. En casos especiales, se requerirá una constancia firmada por el Director de Escuela. Al ser aprobada, cancelará el arancel y presentará el recibo de pago para establecer fecha y hora del diferido.
7. Los diferidos sólo se podrán realizar una semana antes de la entrega y publicación de notas. En casos como
AUDIO Y TV no hay diferidos.
Referente a la actividad en los salones de laboratorio y su equipo, el estudiante:
8. Debe cuidar y hacer buen uso del equipo, herramientas y accesorios utilizados para realizar la práctica.
9. Debe revisar y reportar al docente cualquier daño o mal funcionamiento que encuentre en el equipo.
10. Que por negligencia dañe un equipo o materiales del laboratorio, será responsable de reponerlo en un
plazo máximo de una semana. De no hacerlo no podrá continuar sus prácticas.Si un alumno substrajese
equipo, material u objetos personales de sus compañeros de laboratorio, quedará automáticamente expulsado
de las prácticas.
11. Devolverá ordenadamente todos los materiales que se le entregaron para realizar la práctica.
Debe dejar ordenado y limpio el laboratorio, esto será evaluado.
12. No podrá permanecer dentro del laboratorio, después de terminada la práctica, a menos que esté autorizado por el Docente.
13. El Docente está autorizado y es su obligación, suspender parcial o definitivamente a cualquier alumno
que altere el orden de trabajo de los laboratorios.
14. Cualquier problema suscitado en los laboratorios que no pueda resolverse con el Docente deberá presentarse el caso al Jefe del Departamento.
Se considera una conducta inapropiada para realizar las actividades de laboratorio:
15. Utilizar lenguaje soez o referirse de forma inadecuada a los compañeros y al docente.
16. Comer, beber o fumar dentro de las instalaciones de los laboratorios.
17. Utilizar los centros de práctica como lugar de esparcimiento o juegos.
18. Gritar, correr, cantar, bailar, tocar instrumentos musicales o utilizar cámaras fotográficas o de video sin
previa autorización del Jefe de Departamento.
19. Utilizar los equipos o accesorios del laboratorio para fines ajenos los establecidos en la práctica.
Los puntos del presente reglamento se basan en el reglamentos general e laboratorios del CITT, los usuarios
deberán cumplir las normas y los procedimientos generales y particulares de cada unidad, el desconocimiento del mismo no exime de responsabilidad
Tabla de contenido
Guía 1.
Guía 9.
Flash y su entorno.
Dibujo sólido, personalidad, separación de personaje
Guía 2.
Fotogramas, capas, bote de pintura
y de tinta, degradados
Guía 3.
Guía 10
Parcial II: Evaluacion de
Habilidades (práctico)
Guía 11
Parcial I: Evaluacion de
Habilidades (práctico)
Creación de guion escrito
Guía 4.
Guía 12
Interpolación clásica y
de movimiento
Práctica de Animatic
Guía 5.
Guía 13
Animación en nido, anim. directa
Animación de Storyboard
(Animatic)
Guía 6
Guía 14
Animación pose a pose,
sincronía de labios, exageración
Animación de escenas
(Proyecto final)
Guía 7.
Guía 15
Estirar y encoger, anticipación,
puesta en escena, acción cont.
Parcial III: Animación final y
entrega (Proyecto final)
Guía 8.
Acción secundaria, aceleración,
arcos y ritmo
GUIA 1
Tema:
Flash y su entorno.
Objetivo General
Lograr que los estudiantes conozcan y se familiaricen
con el área de trabajo y las herramientas del programa
Adobe Flash.
Objetivos Específicos
- Que el estudiante conozca la interfaz del programa.
- Que el estudiante pueda utilizar la interfaz del
programa de forma intuitiva.
Contenidos
- ¿Qué es Adobe Flash?
- ¿Qué podemos hacer con flash?
- ¿Qué es el Action Script ?
- Interfaz del Programa
Materiales y Equipo
Guía 1, previamente leída.
Hoja de evaluación correspondiente a la unidad 1
........................................
¿Qué es Adobe Flash?
Adobe Flash CC (anteriormente llamado Macromedia
Flash) es una aplicación en forma de estudio de
animación que trabaja sobre “fotogramas”, destinado a
la producción y entrega de contenido interactivo para las
diferentes audiencias alrededor del mundo sin importar
la plataforma. Es actualmente desarrollado y distribuido
por Adobe System, y utiliza gráficos vectoriales e
imágenes raster, sonido, código de programa, flujo de
vídeo y audio. En sentido estricto, Flash es el entorno y
Flash Player es el programa de máquina virtual utilizado
para ejecutar los archivos generados con Flash.
Los archivos de Flash, que tienen generalmente la
extensión de archivo SWF, pueden aparecer en una
página web para ser vistos en un navegador, o pueden
ser reproducido por un reproductor Flash. Los archivos
de Flash aparecen muy a menudo como animaciones
en páginas Web y sitios Web multimedia, y más
recientemente Aplicaciones de Internet. Son también
ampliamente utilizados en anuncios de la web.
¿Qué podemos hacer con
flash?
Flash es un programa con una amplia gama de posibilidades que permite hacer desde simples botones
interactivos y banners hasta sitios web completos (no
recomedable); películas de dibujos animados de larga
duración, desarrollar juegos de cierta complejidad o
crear contenidos para telefonía móvil.
El “diseño Flash”, con su despliegue visual, interactividad y movimiento, ha cautivado a los diseñadores
de todos los rubros, desde pequeños juegos en línea,
hasta comunidades virtuales que se comunican a
través de esta útil herramienta de diseño. En este curso
estudiaremos las principales herramientas del programa, los tipos básicos de animación y los métodos de
trabajo más usuales. Nos introduciremos, además, en
ActionScript3,
el poderoso lenguaje del programa.
........................................
¿Qué es el Action Script ?
ActionScript es un lenguaje de programación orientado
a objetos (OOP), utilizado en especial en aplicaciones
web animadas realizadas en el entorno Adobe Flash, la
tecnología de Adobe para añadir dinamismo al panorama
web. Fue lanzado con la versión 4 de Flash, y desde
entonces hasta ahora, ha ido ampliándose poco a poco,
hasta llegar a niveles de dinamismo y versatilidad muy
altos en las últimas versiones de Flash. Actualmente se
trabaja únicamente con la versión 3 del lenguaje.
........................................
Interfaz del Programa.
La interfaz de Flash, que se muestra en la figura 1.0,
consta de la Ventana del documento, el menú, el Panel
de herramientas, el Panel de propiedades, la Línea de
tiempo y varios paneles que pueden ser organizados
por el usuario. La Ventana del documento muestra el
Escenario (Stage) que cumple dos funciones: es el
espacio para crear y editar los elementos gráficos que
componen la película y el lugar donde se visualiza
la animación completa o el fotograma que está
seleccionado. El Panel de propiedades permite editar los
atributos del elemento seleccionado, objeto, fotograma,
símbolo, etcétera. Otro componente importante de
la interfaz es la Línea de tiempo. Este panel, propio
de los programas de animación y video, representa
el desarrollo de la película en el tiempo. Es una barra
numerada horizontal que muestra los Fotogramas
figura 1.0
(Frames) que componen la animación. A la izquierda
del panel “Línea de tiempo” están ubicadas las Capas
(Layers) que sirven para organizar los elementos de la
película. Los paneles flotantes que completan la interfaz
son varios, cada uno con su prestación propia.
Barra de menú.
Esta es la típica barra que contiene las opciones por
defecto que aparece en la mayoría de programas de
diseño actuales. Desde aquí podemos abrir y cerrar
archivos, guardarlos, insertar objetos o activar otros
elementos como las reglas o líneas guías, entre otras
posibilidades. Un aspecto importante a tomar en
cuenta sobre el menú, es que en el apartado “Ventana”
encontraremos todos los paneles de trabajo de Flash,
de tal forma que si no vemos uno abierto en la interfaz
o si lo cerramos por error, siempre podemos reactivarlo
desde aquí. No hay necesidad de entrar en pánico y
formatear la máquina!
Espacio de trabajo (Figura 1.1)
Flash posee varias configuraciones de interfaz pensadas
para el perfil del usuario que vaya a manejarlo. En la parte
superior derecha, donde probablemente dice “Clásico”,
se encuentra el “Espacio de Trabajo”. Aquí podremos
seleccionar la configuración que se adapte mejor a
nuestras necesidades: Conceptos básicos, diseñador,
animador y otros. Si ninguna de estas opciones se
adecúa a nuestro estilo de trabajo, es importante saber
que se puede cambiar la posición y/o el tamaño de todos
figura 1.1
los paneles de la interfaz hasta encontrar un esquema
que nos satisfaga. Una vez hecho esto, es posible
conservar la nueva distribución de los paneles con la
opción “Nuevo espacio de trabajo”. Al dar click a esta
opción, deberemos darle un nombre significativo al
nuevo esquema y luego aceptar. El esquema aparecerá
por encima de los demás. Del mismo modo, es posible
borrar esquemas o regresarlos a su distribución
original con las opciones “eliminar” y “restablecer”
respectivamente.
Barra de herramientas (Figura 1.2)
Dado que la barra de herramientas funciona
como cualquier otro panel en Flash, es posible
cambiar sus dimensiones para optimizar el espacio disponible en pantalla. Veamos un ejemplo de esto antes de estudiar sus partes.
Si prestamos atención al literal A de la figura
1.2, observaremos dos pequeñas flechas en la
esquina superior izquierda de la barra. Estas
flechas sirven para cambiar automáticamente el
tamaño del panel. Así, la imagen de la izquierda
presenta la Barra de herramientas en su mínima
expresión en la interfaz, mientras que la imagen
al medio muestra la barra de herramientas utilizando un poco más de espacio y la imagen al
extremo derecho la muestra con dimensiones
medias. El literal B señala las áreas de la barra
que permiten moverla de lugar para ubicarla en
otra región acoplable de la interfaz o para dejarla como flotando sobre ella.
Estas mismas áreas y las flechas se encuentran
en todos los paneles de Flash para facilitar su
reubicación.
figura 1.2
Es posible también cambiar el tamaño del cualquier panel de forma manual. Para hacer esto, podemos ubicar
el cursor en los extremos de la ventana, como se muestra en el literal C. Pero ojo, en el caso de la barra de
herramientas, si la redimensionamos tal como se ve en
la tercera imagen corremos el riesgo de dejar fuera de
vista la parte de los “Modificadores de herramienta”.
La Barra de herramientas está dividida en: “Herramientas de selección y transformación”, que nos
permiten mover, cambiar el tamaño o seleccionar objetos en el escenario; “Herramientas de dibujo”, que como su nombre lo indica, nos permiten dibujar, crear figuras geométricas y añadir texto;
“Herramientas de edición”, que nos servirán para pintar, borrar, y modificar líneas o trazos de una ilustración,
así como mover, acercarnos o alejarnos del escenario.
Las “Herramientas de selección de color” nos dejarán
escoger el color tanto para líneas como trazos (que
veremos más adelante) y los “Modificadores de herramienta” nos mostrarán opciones extras que dependerán de la herramienta seleccionada en ese momento.
La Barra de herramientas puede encontrarse en Barra
de Menú -->Ventana-->Herramientas. O con la combinación de teclas Ctrl+F2.
Línea de tiempo (Figura 1.3)
La línea de tiempo organiza y controla el contenido de un
documento a través del tiempo en capas y fotogramas.
Al igual que en las películas, los documentos de Flash
dividen el tiempo en fotogramas. Las capas son como
varias bandas de película apiladas unas sobre otras,
cada una de las cuales contiene una imagen diferente
que aparece en el escenario. Los componentes
principales de la línea de tiempo son las capas, los
fotogramas y el cabezal de lectura.
-Capas.
Las capas (literal A de la figura 1.3) aparecen en la
columna situada a la izquierda de la línea de tiempo y
permiten organizar los objetos en el escenario así como
la animación a través de los fotogramas que contienen.
Cada capa puede contener una o muchas imágenes
diferentes para que aparezcan en el escenario, y es
posible editar cada capa sin afectar a las otras. Aunque
también se puede permitir que unas influyan sobre otras
al convertirlas en máscaras.
El literal B indica el ícono del ojo, que sirve para ocultar
o mostrar una determinada capa. El literal C señala
el ícono del candado, con el que podemos bloquear
y desbloquear las capas, de tal forma que si una
está bloqueada, no se le puede hacer ningún tipo de
modificación hasta volver a desbloquear.
figura 1.3
El ícono señalado por el literal D es especial: al activarlo
cambia la vista de todos objetos contenidos en los
fotogramas de esa capa, de tal forma que solamente se
vean sus líneas de contorno, como si estuvieran hechos
de alambre y no tuvieran color de relleno. Esto es útil en
animación para descongestionar un poco un escenario
lleno de objetos, pero sin perder de vista todos los
elementos.
Las capas se pueden renombrar al darle un doble click
al nombre original con el que aparecen en la línea de
tiempo. Además, es posible cambiar a voluntad el orden
en el que se encuentran con solo arrastrarlos hacia
arriba o hacia abajo.
Finalmente, en la parte inferior de la línea de tiempo,
literal E, podemos observar tres íconos que nos servirán
para crear nuevas capas, carpetas para contener las
capas que deseemos y un último ícono para borrar
aquellas que ya no necesitemos.
Fotogramas
Los fotogramas (o frames) se encuentran a la derecha
de cada capa y se pueden entender como momentos
individuales en el tiempo de la historia. Al reproducir los
fotogramas en secuencia se da la ilusión de movimiento
gracias a lo que se conoce como “la persistencia del ojo”
que conserva por poco tiempo la última imagen vista y
hace la conexión inmediata con la siguiente.
Los fotogramas están contenidos en cada capa en
orden correlativo y puede añadirse virtualmente un
número infinito de ellos. El único límite en ese sentido
es la capacidad misma de la computadora.
El encabezado situado en la parte superior de la línea de
tiempo indica los números de fotograma.
Para añadir nuevos fotogramas en la línea de tiempo
podemos ir al menú principal --> Insertar--> línea de
tiempo---> fotograma. Aquí veremos, sin embargo, que
existen varios tipos de fotograma y es muy importante
comprender las diferencias entre ellos, así como las
indicaciones visuales que provee Flash de acuerdo con
el tipo de animación que presenten más adelante los
fotogramas.
-Fotograma clave vacío (literal F). Un
fotograma de color gris oscuro y con un círculo
sin relleno en su centro indica que, aunque
ocupa espacio en el tiempo de la animación,
no contiene información visible alguna.
-Fotograma clave (literal G). Un fotograma
de color gris claro y con un círculo negro en
su centro indica información contenida en el
fotograma que puede ser visible o no, pero
que es editable.
-Fotogramas simples (literales F y
G). Un fotograma de color gris claro
u oscuro con un rectángulo vacío al
centro indica también que carece de información
propia, aunque sigue ocupando espacio en el tiempo.
La diferencia con los otros, sin embargo, es que estos
fotogramas sirven como un reflejo de la información
que contenga un fotograma clave anterior a ellos. En
otras palabras, si detrás de un fotograma simple hay
un fotograma clave -que contiene un dibujo cualquiera,
por ejemplo- el fotograma simple también mostrará ese
mismo dibujo, aunque no lo contenga en sí mismo. Es
como un reflejo de cualquier cosa que exista detrás de
él.
Esto resulta muy útil porque nos permite extender
la aparición de un objeto en la línea de tiempo sin
necesidad de repetir constantemente ese mismo objeto
en cada fotograma; lo que a su vez repercute en un
tamaño pequeño del archivo flash. Por ejemplo, el sol
de un paisaje que deba quedarse al fondo durante toda
una escena: el sol se coloca una tan sola vez y luego se
extiende con la ayuda de fotogramas simples.
Del mismo modo, un fotograma simple que tenga detrás
suyo un fotograma clave vacío, reflejará ese mismo
vacío.
Si observamos el literal H veremos que nos señala una
secuencia de fotogramas de color verde que además
contiene una flecha que separa dos fotogramas clave.
Esto nos indica uno de los tres tipos de animación nativa
de Flash. En este caso se trata de la animación llamada
“interpolación de forma”.
El literal I señala el segundo tipo de animación nativa de
Flash: “Interpolación clásica”, que se caracteriza por el
color morado entre sus fotogramas claves.
Por último, el literal J (fascinante letra!) nos indica la
animación por “Interpolación de movimiento” y su color
es el celeste. Además, este tipo de animación carece
de flecha. Más adelante en el curso estudiaremos
detenidamente cada uno de estos tipos de animación y
sus reglas de funcionamiento.
Para poder desplazarnos por la línea de tiempo y entre
los fotogramas, haremos uso del cabezal de lectura,
literal K. Esta línea roja nos indica el fotograma actual
que se muestra en el escenario. Mientras se reproduce
el documento, el cabezal de lectura se mueve de
izquierda a derecha, pero nosotros podemos moverlo
manualmente hacia el lado contrario arrastrando el
rectángulo superior que queda justamente arriba de los
fotogramas.
Del mismo modo, si queremos reproducir nuestra
animación en la línea de tiempo, podemos utilizar
los controles indicados en el literal L. Estos controles
funcionan de forma similar a los de un reproductor de
música: podemos reproducir, pausar, ir al primer o último
fotograma y avanzar o retroceder un fotograma.
El literal M nos muestra las opciones de “papel de cebolla”
que veremos también más adelante. Sin embargo, es
bueno saber que estas opciones nos permiten observar
y/o editar varios fotogramas a la vez.
El literal N señala la velocidad de los fotogramas,
es decir, a cuántos fotogramas por segundo se está
reproduciendo la animación (fps = frames per second.
No first person shooter!) y el tiempo en segundos en que
se encuentra el cabezal de lectura. En este caso, como
el cabezal está en el primer fotograma, el indicador
marca 0.0 segundos.
figura 1.4
Panel Biblioteca (Figura 1.5)
El panel Biblioteca es donde se guardan y organizan
los símbolos creados en Flash, además de archivos
importados tales como gráficos de imágenes de mapa
de bits, archivos de sonido y clips de vídeo. El panel
Biblioteca permite organizar los elementos en carpetas,
consultar con qué frecuencia se utiliza un elemento en
un documento y ordenar los elementos por nombre, tipo,
fecha, número de usos o el identificador de vinculación
de ActionScript. También se puede buscar en el el campo
de búsqueda del panel.
Por último, el literal N indica el nivel de zoom o
acercamiento que tenemos de la línea de tiempo. Si
modificamos este valor podemos ver más grandes o más
pequeños los fotogramas, dependiendo de si movemos
la flecha hacia la derecha (montañas grandes) o hacia la
izquierda (montañas pequeñas).
Panel de color y muestras (Figura 1.4)
Al lado derecho de la línea de tiempo tenemos el panel
de color y muestras. Como su nombre lo dice, nos
permite seleccionar de una amplia gama cualquier color
que necesitemos.
Esta selección puede hacerse a través de Matiz,
saturación o brillo; o a través de la combinación de rojo,
verde y azul. Además, si conocemos las tonalidades por
sus valores, Flash nos permite ser muy precisos a la
hora de seleccionar un color determinado.
figura 1.5
figura 1.6
El escenario (Figura 1.6)
El escenario se encuentra al centro de la interfaz de
Flash y consta de dos partes principales: Un área blanca
y un área gris, o área de trabajo, que contiene a la
primera. Es importante hacer esta distinción que parece
muy obvia porque cualquier objeto dentro de los límites
del área blanca será visible por el usuario al momento de
reproducir la animación; mientras que cualquier objeto
que se encuentre ubicado dentro del área gris quedará
fuera de la animación. Del mismo modo, si uno objeto
queda entre estas dos áreas del escenario se verá solo
parcialmente por el usuario.
Podemos apreciar un ejemplo de esto si comparamos la
figura 1.6 con la figura 1.7: En la primera figura veremos
que, en el escenario completo, el pentágono se ubica
en medio de las dos áreas anteriormente mecionadas;
mientras que en la figura 1.7, que es la reproducción de
la animación, solo queda visible la mitad del pentágono.
El escenario puede contener igualmente imágenes,
dibujos, video o texto y los elementos pueden alinearse
con facilidad en una cuadrícula (ver--> cuadrícula-->
mostrar cuadrícula), con líneas guías (ver--> guías -->
mostrar guías) o con el uso de una regla (ver-->reglas)
El área de trabajo puede desactivarse si quisiéramos
concentrarnos solo en el escenario en sí. Para esto vamos a menú-->ver-->área de trabajo y deseleccionamos esa opción.
figura 1.7
También podemos observar el escenario en el modo
de pantalla completa, es decir, con el resto de paneles
ocultos. Para lograr esto, podemos presionar la tecla
F4, o ir al menú--> ver--> modo de pantalla--> modo
de pantalla completa. Para regresar al modo normal,
podemos presionar F4 ó F11.
El literal A de la figura 1.6 nos muestra el control de zoom
que podemos tener sobre el escenario. Este control nos
permite alejarnos o acercarnos al escenario cambiando
los valores númericos que nos presenta. También podemos ajustar a ventana para que el escenario se ajuste
automáticamente al tamaño de la ventana.
“Mostrar fotograma” centrará el escenario y dejará el
área blanca completamente visible, incluso si no hay objetos dentro de ella. Finalmente, “Mostrar todo” nos permitirá ver todos los elementos del escenario que estén
dentro de ese fotograma, ya sea dentro del área blanca
o de la gris.
Panel de propiedades (Figura 1.8)
El panel o inspector de propiedades facilita el acceso a
los atributos más utilizados de la selección actual, ya sea
en el escenario o en la línea de tiempo. Puede modificar
los atributos del objeto o documento en el inspector de
propiedades sin acceder a los menús o paneles que
contienen estos atributos.
El panel de propiedades muestra información y la
configuración del elemento que está seleccionado, que
puede ser un documento, un texto, un símbolo, una
forma, un mapa de bits, un vídeo, un grupo, un fotograma
o una herramienta. Cuando hay dos o más tipos de
objetos seleccionados, el inspector de propiedades
muestra el número total de objetos seleccionados.
Para mostrar el inspector de propiedades, seleccione
Ventana >Propiedades, o presione Control+F3.
Si no hay ningún objeto seleccionado, el panel de
propiedades mostrará los atributos del documento que
estemos trabajando, con lo que podremos cambiar el
tamaño e incluso el color del escenario, la velocidad de
los fotogramas, las unidades de medida (pixels, mm,
cm, etc) y algunas opciones de publicación.
En conclusión inconclusa
Esto es apenas un primer vistazo a la interfaz de Flash
y las opciones que ofrece, en la medida en la que
avancemos en el curso veremos con más detalle las
herramientas, otros paneles y las posibilidades que
nos da el programa para la creación de animaciones.
Mientras tanto, trabajaremos en la segunda parte de
esta guía algunos ejercicios básicos que nos permitan
acostumbrarnos a los elementos que acabamos de ver.
figura 1.8
EJERCICIO 1: Espacio de trabajo
Procedimiento.
Pantalla de
Bienvenida
Leé bien las indicaciones antes de iniciar cada paso
1. Abrí Flash, aparecerá la pantalla de bienvenida. En
la segunda columna, donde dice “Crear Nuevo” elegí
“ActionScript 3.0” y dale click. Aunque todavía no
veremos el leguaje AS3, Flash siempre pide seleccionar
esta opción antes de crear un nuevo documento.
También se puede utilizar la opción Ctrl+N, que nos
llevará a una ventana con varias opciones para nuestro
archivo, siempre seleccionaremos “ActionScript3” y
luego “Aceptar”.
Espacio
de trabajo
“Animador”
2. Identificá la opción “Espacio de trabajo” y seleccioná
“Animador”. Ahora la interfaz de Flash ha cambiado y
nos muestra un orden de paneles que trata de acercarse
a la mejor opción de organización para un animador
según Adobe. Vamos a cambiar un poco este esquema.
3. Cerca de la esquina inferior izquierda, debajo de la
ventana de color deberías poder ver algunas ventanas
más: “Alinear”, “Transformar”, “Información”,”Escena”
y “Configuración predefinida de movimientos”. Dale
click a la pestaña de “Configuración predefinida de
movimientos” y arrastrá la ventana hacia el escenario.
Tratá de dejarla flotando y que no tope con ninguno
de los bordes del panel del escenario. Como por el
momento no haremos uso la configuración predefinida,
cerraremos este panel: dale click a la X en la esquina
superior derecha del panel “Configuración predefinida
de movimientos”. El panel desaparece.
4.Ahora los paneles de “Alinear”, “Transformar”,
“Información” y ”Escena” se han ido totalmente hacia
abajo, a la esquina inferior derecha. Para poder verlos en
su totalidad y las opciones que ofrecen, dale doble click
a la pestaña “Alinear” y luego doble click a la pestaña
“Escena”. Esto nos permite maximizar o minimizar los
paneles de la misma manera que lo hacen las ventanas
de “Windows”. Por el momento no necesitamos de
estos paneles, así que podemos cerrarlos dando click
en la esquina superior derecha de cada panel, donde
aparece una pequeña flecha con varias líneas laterales.
Una vez hecho el click, seleccionamos “cerrar grupo”
tanto para “Alinear” como para “Escena” y los paneles
desaparecerán.
5. La barra de herramientas se encuentra al centro y
arriba del escenario, vamos a cambiarla para que se
ubique al extremo izquierdo. Para esto, arrastramos la
pestaña donde dice “herramientas” y la llevamos hasta
atrás del panel “Color y muestras”. Antes de soltarla nos
aseguraremos de que una línea azul aparece en el lugar
en el que queremos colocar la barra de herramientas. Si
es así, soltamos la pestaña y la barra deberá estar ahora
totalmente a la izquierda del escenario.
Panel de configuración flotante
Cerrar grupos
Mover barra de herramientas
6. La “barra de herramientas” probablemente está
ocupando más espacio del necesario, así que posicioná
el cursor en el extremo derecho del panel y cuando el
cursor cambie a la flecha doble, arrastrá el borde del
panel hasta alcanzar un tamaño que nos permita ver
todas las herramientas y los modificadores. Ojo: no
debe quedar demasiado estrecho el panel como para no
poder ver el espacio de los modificadores.
Redimensionar
barra de
herramientas
7. Ahora moveremos el panel de “Color” para que
quede al lado derecho del escenario y por encima
del “panel de propiedades”. Para esto basta seguir
el mismo procedimiento que hicimos con la “barra de
herramientas” y arrastrar solo la pestaña de “Color” (La
pestaña “muestras” debe quedarse del lado izquierdo
por ahora). Hay que tener cuidado, eso sí, que al colocar
la pestaña “color” encima del “panel de propiedades” no
se forme un recuadro azul, sino más bien una línea azul
horizontal. Si soltamos la pestaña en el recuadro azul,
esta se colocará al lado del “panel de propiedades” y no
por encima de él.
8. Ya tenemos el panel “color” por encima del “panel de
propiedades” pero el “panel muestras” se siente muy
solo sin su amigo del alma. Para resolver este problema,
arrastrá la pestaña de “muestras” y colocala justo al lado
de la pestaña “color”. En este caso, sí buscaremos el
recuadro azul que rodee toda la pestaña color, para que
el “panel muestras” quede al lado derecho. En otras
palabras, esto nos permite ubicar paneles de tal forma
que ocupen menos espacio en pantalla pero que se
pueda acceder fácilmente a ellos. Por ejemplo, el “panel
de propiedades” se encuentra en su propia ventana y
vemos sus opciones de forma inmediata, mientras que
las pestañas de “color” y “muestras” comparten la misma
ventana, y para ver las opciones de cada una, debemos
darles click de forma alterna.
9. Hay un panel muy tímido que ha quedado vilmente
ignorado: el “panel de biblioteca”. Se encuentra
probablemente debajo del panel de propiedades y no
podemos ver sus opciones porque está minimizado
((pobrecito!)). Podemos ayudarlo a unirse a la fiesta y a
mejorar su autoestima si lo ubicamos al lado del “panel
de propiedades”. Probá hacer esto por tu cuenta.
Mover pestaña
Color
Mover pestaña
Muestras
10. Para finalizar, si quisieramos conservar este
esquema de paneles en la interfaz de Flash, podemos
sencillamente dejarlo como está. Al abrir Flash en otra
sesión, aparecerá el último esquema utilizado. Sin
embargo, podemos también asegurarnos de que no se
pierdan estos cambios del esquema si nos dirigirnos a
“Espacio de trabajo” y seleccionamos la opción “Nuevo
espacio de trabajo”. Al hacerlo, aparecerá una ventana
que nos dejará poner un nombre personalizado y luego
guardar el esquema junto al resto. Hacé esto y dale un
nombre que lleve tu nombre.
*Si quisieras, podrías crear otro esquema de paneles que se
acomode a tus propias necesidades y guardarlo.
Guardar espacio de trabajo
EJERCICIO 2: Animación básica
capas, dale doble click a la capa y ponele “Fondo” ((Bien
creativo el nombre, verdad?))
Procedimiento.
Leé bien las indicaciones antes de iniciar cada paso
1. Para realizar este ejercicio podemos crear un nuevo
archivo Flash o utilizar el mismo del ejercicio anterior.
Dado que vamos a trabajar con fotogramas, y para
evitar que se nos quemen los ojos por el ínfimo tamaño
que estos cuadros ocupan en la línea de tiempo, es
aconsejable cambiar las dimensiones por defecto de los
fotogramas. Hay dos formas para lograr esto: A) En la
esquina superior derecha de la línea de tiempo hay un
menú con una pequeña flecha y unas rayas laterales,
da click ahí y de entre las opciones que se presentan,
podés darle click a la opción “grande”. Esto hará que
el tamaño de los fotogramas aumente y sea más fácil
verlos en la línea de tiempo. B) En la esquina inferior
derecha de la línea de tiempo se encuentra el control
de zoom, podemos aumentar o disminuir el tamaño de
los fotogramas moviendo el indicador a la derecha o a
la izquierda.
2. Usualmente al crear un nuevo archivo de Flash,
aparecerá un fotograma clave vacío en el espacio
asignado para el fotograma 1. Si esto no fuera así, o si
queremos añadir más fotogramas, podemos ubicarnos
en el lugar de la línea de tiempo donde queremos el
fotograma y usar la tecla F5. O darle click derecho y
del menú emergente escoger el tipo de fotograma
que necesitamos. (También podemos ir al menú-->
insertar-->línea de tiempo-->fotograma/fotograma clave/
fotograma clave vacío)
3. Vamos a crear un cuadro que cubra toda el área blanca
del escenario (a partir de aquí, llamaremos siempre
a esta área “escenario”; el área gris será siempre el
“área de trabajo”). Dirigite a la “barra de herramientas”
y seleccioná la “herramienta rectángulo”, para obtener
el mini menú desplegable, solo dale click y mantenelo
oprimido por unos segundos hasta que aparezcan las
opciones internas. Si querés cambiar el color tanto de
la línea de contorno como del relleno, podés hacerlo en
este momento en el área de “herramientas de selección
de color”. No importa cuáles colores sean mientras el
relleno no sea blanco. Una vez hecho esto, y siempre
con la “herramienta de rectángulo” seleccionada,
dibujaremos con el cursor un rectángulo que sobrepase
las dimensiones del escenario.
4. Siempre en el mismo fotograma, vamos a añadir una
línea en la parte baja del escenario. Para eso buscá la
“herramienta de línea” en la “barra de herramientas”,
seleccionála y dibujá una línea horizontal de cualquier
color que también sobrepase las dimensiones del
escenario. Debe quedar por encima del rectángulo
que acabamos de dibujar. Este el fondo de nuestra
animación, para poder indentificarlo en la ventana de las
Cambiar tamaño de fotogramas
Ojo: Aunque es tentador usar la opción “vista previa”
en los fotogramas, esto consumirá muchos más
recursos RAM de la computadora dependiendo de
cuántos fotogramas deba mostrar a la vez. Debido
a esto, es preferible usar esta opción solo por
períodos cortos de tiempo o no usarla para nada.
Insertar fotograma con menú
emergente
Crear rectángulo
Crear línea
5. Ahora necesitamos establecer cuánto tiempo durará
nuestra animación en la línea de tiempo. Para esto
crearemos un fotograma simple en el número 50; de ese
modo, el fondo que acabamos de hacer se extenderá
hasta esa posición. Para evitar modificar accidentalmente
la capa “Fondo” activaremos el ícono de candado, que
bloquea la capa seleccionada. Por cierto, quizá este sea
un buen momento para guardar el archivo: resulta que
a Flash le gusta molestar a los animadores y se congela
de vez en cuando para reírse con la desgracia ajena
de perder mañanas o tardes enteras de trabajo. Si no
queremos que esto nos suceda, debemos aprender a
guardar con frecuencia. Para guardar vamos a menú-->
archivo-->guardar o Ctrl+S
6. Creá ahora una nueva capa y ponele como nombre
“PELOTA”. Por defecto, las nuevas capas se posicionan
siempre encima de las anteriores. Si te fijás, al crear
esta nueva capa se han añadido también 50 fotogramas
a la línea de tiempo, esto sucede automáticamente
cuando ya hay algún número de fotogramas en una
capa anterior ((La culpable aquí es la capa “Fondo”)).
Como no necesitamos tantos fotogramas en la nueva
capa, podemos quitarlos.
7. Para eliminar los fotogramas excedentes tenemos
que seleccionarlos antes, para esto, dale click a la
“herramienta de selección” de la “barra de herramientas”,
luego dale click al que debería ser el fotograma 51 en la
línea de tiempo (no debería haber fotogramas en este
espacio) y arrastrá el cursor hasta llegar al fotograma
2. Si la selección se hizo correcta deberías ver en color
dorado arruiname la vista todos los fotogramas desde el
2 al 50. Ahora dale click derecho a cualquier fotograma
seleccionado y de ahí click a “quitar fotogramas”. No
usés “borrar fotogramas” porque esta opción solamente
elimina la información, pero no el fotograma en sí.
8. Seleccioná ahora el fotograma 1 de la capa “PELOTA”.
Crearemos aquí un pequeño círculo que posicionaremos
arriba y a la izquierda del escenario. Para esto, usá la
herramienta “óvalo simple”, esto nos asegurará de que
la forma se encuentre contenida en sí misma y no se
puedan separar sus partes (similar a “agrupar”). Una vez
hecho esto, insertá un fotograma clave en el espacio
2, en la línea de tiempo, siempre de la capa PELOTA.
Ahora tenemos dos fotogramas con el mismo objeto.
Si movemos un poco el círculo del fotograma 2 con
la herramienta de selección, de tal forma que se vea
diferente al círculo del fotograma 1 tendremos el inicio
de una animación.
Extender la animación
Nueva capa: PELOTA
Quitar fotogramas
Crear círculo
EJERCICIO 2: Animación básica
figura 1.9
9- La animación que queremos lograr es la de una pelota que rebote en la parte que parece el suelo en la capa Fondo,
es decir, debajo de la línea horizontal que dibujamos ahí. Para esto, solo tenés que crear nuevos fotogramas y mover la
pelota un poco hacia adelante y hacia abajo cada vez. Para ayudarte a lograr esto fijate en el esquema de la figura 1.9.
Vas a necesitar también ver la imagen del fotograma anterior para tener su referencia, para esto, solo debés activar
el ícono de “papel cebolla” que se encuentra en la parte baja de la línea de tiempo. Al hacerlo, verás que algunos
fotogramas quedan encerrados dentro de una especie de “manijas” o controles, como se pueden ver en los círculos
rojos de la figura 1.9. Estas manijas permiten determinar qué fotogramas se pueden ver al mismo tiempo en el escenario
y pueden extenderse o contraerse de acuerdo a la necesidad del animador.
La animación debería alcanzarte al menos para unos 20 cuadros, no menos. Si querés comprobar cómo se va quedando,
podés hacerlo con Ctrl+Enter, esto abrirá el flash player y podrás ver la reproducción iniciar, terminar y repetirse hasta
que cerrés la ventana del flash player.
Esto es todo por el momento. Recordá que podés aclarar cualquier duda con tu instructor del laboratorio y si terminás la
animación del ejercicio y aún hay tiempo, sentite libre de modificarla o de travesear cualquier otra de las herramientas
de Flash. Lo importante es que vayás practicando y acostumbrándote al programa. Feliz animación!