fla basico parrao
DESCRIPTION
ÂTRANSCRIPT
Cristián Parrao – [email protected] 2
SUMARIO
1. El Objetivo de este manual......................................................... 4
2. Qué es Flash ........................................................................... 5 2.1. Historia de Flash 2.2. Qué es Actionscript
3. Interfaz del programa ............................................................. 10 3.1. Menú 3.2. Paneles 3.3. Propiedades 3.4. Barra de Herramientas
4. Organización de Objetos ........................................................ 21
5. Línea de Tiempo ................................................................... 24
6. Tipos de Fotogramas ........................................................... 27 6.1. Fotograma Simple 6.2. Fotograma Clave 6.3. Fotogramas Vacíos 6.4. Área sin Fotograma
7. Animación Fotograma a Fotograma .................................... 31 7.1. Capas 7.2. Papel Cebolla
8. Animación por Interpolación................................................ 38
9. Animación por Forma ......................................................... 40 9.1. Consejos de Forma 9.2. Aceleración / Desaceleración
10. Animación por Movimiento .................................................. 44 10.1. Creación de Símbolos Gráficos 10.2. Biblioteca 10.3. La Interpolación 10.4. Capa Guía 10.5. Máscara
11. Botones............................................................................. 54
12. Acciones Básicas.............................................................. 58 12.1. Acciones de un botón
13. Navegación....................................................................... 64
Cristián Parrao – [email protected] 3
14. Escenas............................................................................ 67 14.1. Navegación entre escenas 14.2. Navegación externa
15. Clip de Película................................................................ 72 15.1. Botón Animado 15.2. Control de un Clip de Película
15.2.1. Instancias
16. Importación de objetos..................................................... 81 16.1. Imágenes vectoriales 16.2. Imágenes de Mapa de Bits
16.2.1. Vectorizar Imágenes de Mapa de Bits 16.3. Sonidos 16.4. Video
17. Publicación y Exportación .............................................. 91
18. Ejecutables...................................................................... 95
Cristián Parrao – [email protected] 4
1. El objetivo de este manual
Hola, mi nombre es Cristián Parrao ([email protected]), el autor de este
manual. Su objetivo es ser una guía de ayuda a las clases que voy a impartir. En
ese sentido, no pretende ser un curso en sí mismo, sino un apoyo para recordar
los principios básicos de este software.
Aprender a hacer cosas básicas con Flash no es difícil, pero aprender a
dominar un software requiere tiempo, dedicación y sobretodo – mucha paciencia
(créanme que la he desarrollado bastante).
Conozco a muchos que se declaran “conocedores de Flash” y en realidad,
mueven un cuadrado y ya está. De esos está plagado este mercado y su trabajo
es bastante mediocre. Por eso cuando comencé a estudiar Flash 4 me di cuenta
que era un software, que además de entretenido, lograba que tuvieras una manera
de pensar diferente a los otros programas del tipo “agarro, pego y listo” y que, si
que le ponías dedicación, te podías distinguir de los demás. Bueno, la apuesta me
resultó buena. A Flash le ha ido muy bien en su penetración y cada día hay más
deseo por parte de las empresas de ocupar esta herramienta, lo que a todos nos
favorece.
Flash llegó para quedarse, aprendamos de él.
(Este manual se puede descargar desde
http://www.parrao.cl/manuales/Fla_Basico_Parrao.pdf )
Cristián Parrao – [email protected] 6
Flash es un software perteneciente a la empresa Macromedia (
www.macromedia.com) el cual permite crear animaciones que se pueden subir a
la red a bajo peso. Esas animaciones pueden generarse desde el propio software
o importando imágenes y sonidos. Si se generan desde flash, se hacen a través
de vectores, lo que le da un peso muy bajo a los archivos, son fáciles de manejar y
además son escalables (a diferencia de las imágenes de Mapas de Bits).
Macromedia, hasta la fecha de impresión de este manual, acaba de anunciar
la versión 8 de Flash (agosto 2005). En este manual veremos la versión 7 (Flash
MX2004). (Acá hay un artículo interesante realizado por Rodrigo Duarte, que es
miembro del MMUG, sobre el Studio 8)
http://www.mmug.cl/articulos.php?id=249&tod=1)
Para ver archivos de Flash en Internet, debes tener un pequeño player (lector)
que permita ejecutarlos. Mucha gente lo tiene, probablemente tú también. Si no
fuera así, puedes descargarlo gratis desde:
http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Versio
n=ShockwaveFlash&Lang=Spanish&P5_Language=Spanish
2.1. Historia de Flash
(Historia sacada de http://dibujante.blogalia.com/historias/22722)
La historia de Flash comienza cuando el arquitecto Jonathan Gay descubrió que el mundo de
los planos y las maquetas no era lo que realmente estaba buscando en su vida. Fue entonces
cuando descubrió Apple II y las ventajas que la programación podía traer al mundo del diseño.
Sus inicios en la programación iniciaron con la realización de juegos sencillos hechos en
Basic. Después, al descubrir Pascal realizó su primer editor de Imágenes: SuperPaint, lo que le
otorgó un premio en la feria de ciencias de su preparatoria.
¿Qué es una Animación? Serie de imágenes consecutivas dibujadas o fotográficas que, bajo ciertas condiciones, reproducen la sensación de movimiento. Las imágenes pueden obtenerse sobre una película y proyectarse, como en los dibujos animados, o pegarse en las páginas de un libro y observarse en rápida frecuencia. http://www.datared.com/diccionario_audiovisual/a.htm
Cristián Parrao – [email protected] 7
Por casualidad, en un grupo de usuarios de Macintosh, Gay conoció a Charlie Jackson el cual
estaba en planes de fundar Silicon Beach Software. Jackson contrató medio tiempo a Gay y lo
empujó para que realizar Airbone I, el primer juego para Mac que tenía sonido digital.
Después de seguir en el desarrollo de videojuegos y trabajar en SuperPaint II, Gay comenzó a
trabajar de tiempo completo en Silicon Beach Software, iniciándose en el mundo del C++, y
tratando de desarrollar software para el desarrollo de gráficos que no sólo corran en Macintosh,
sino también en Windows.
El siguiente programa para el desarrollo de gráficos fue el Intellidraw, que trataba de competir
con Adobe Illustrator y el Aldus Freehand (el cual después sería adquirido por Macromedia). La
ventaja que ofrecía el Intellidraw, es que no sólo era una herramienta de dibujo, sino que podía
otorgar comportamiento a los gráficos, como manejar gráficas de barras introduciendo valores
numéricos.
Después de haber ganado mucho dinero desarrollando videojuegos y software para Silicon,
Gay decidió tomar un nuevo reto y fundar su propia compañía: FutureWave Software, con la oficina
principal en San Diego, la cual inició en Enero de 1993 y tenía la misión de dominar el mercado de
los programas para la manipulación de gráficos, fáciles de usar y con más herramientas para el
usuario.
Por aquel entonces Microsoft tenía su MSDOS 6.0 y Windows 3.1.
Uno de los productos que realizó la nueva compañía fue el SmartSketch, (presentado en
Noviembre de 1994 para Windows 3.1, en Mayo de 1995 para Macintosh, en Agosto de 1995 para
plataformas Windows 95/NT), el cual para 1995, recibió muchos comentarios por parte de los
usuarios para que convirtieran este software en un programa de animación, un momento en el que
la animación sólo se distribuía a través de VHS o CD ROM, y donde el mercado de animación era
muy reducido.
SmartSketch fue diseñado para captar la atracción de las imágenes pintadas, la precisión de
un programa de dibujo y la libertad de dibujar sobre papel. Este fue el primer o de los primeros
programas de dibujo de precisión que permitía trabajar con dibujos vectoriales utilizando
herramientas típicas de programas de dibujo.
En el tiempo en que Internet hacía su debut a los ojos públicos, la posibilidad de crear
animaciones en dos dimensiones habría un nicho de mercado a FutureWave.
La evolución llegó a tal grado que comenzaron a crear plug ins para Netscape, que en un
inicio corrían muy lentamente. En este momento el programa recibió el nombre de Future Splash
Animator (también llamado CellAnimator).
Cristián Parrao – [email protected] 8
La compañía había descubierto el impacto que iba a tener el Future Splash y fue entonces
cuando acudieron con los ejecutivos de Adobe en 1995, los cuales mostraron interés en el
SmartSketch pero las funciones del FutureSplash le parecieron obsoletas
Fue hasta 1996, cuando Microsoft trabajaba en la nueva versión de MSN deseando la más
cercana experiencia televisiva, por lo que el FutureWaves se convirtió en su opción.
Sin embargo, no fue hasta Noviembre de 1996 cuando Macromedia invitó a FutureWave a
trabajar juntos, y posteriormente realizar la compra de esta, con lo que para diciembre de ese
mismo año Future Splash Animator se convirtió en Macromedia Flash 1.0.
FutureSplash Animator fue un programa de animación en 2D para la world wide web basado
en la tecnología de dibujo del SmartSketch. Permitiendo a los diseñadores y realizadores de
páginas web crear entornos gráficos de páginas webs vectoriales e interactivos como por ejemplo,
botones, paneles de navegación, dibujos técnicos, banners de anuncios, etc. y luego animarlos.
En los años 97, 98, 99, ya hacía yo mis pinitos con las versiones, 3 y 4 de Flash que incluso en
esos años, no estaba tan implantado como ahora, y era raro encontrar gente que supiese usar a
fondo este programa, incluso en algunas de las empresas por las que estuve esos años,
despreciaron este programa sin darle mucho interés cuando yo les proponía usarlo y avanzar con
él.
Hoy en día, FLASH es una herramienta que dista mucho de lo que fue en su comienzo,
aunque la idea original perdura, ahora la programación forma parte de un entorno gráfico, dándole
una potencia muy fuerte en el desarrollo de sitios web. De hecho, en su momento llegué a pensar
que Flash y al ritmo que iba evolucionando, llegaría a comerse a Director, pero de momento no ha
sido así. Con todo esto, solo cabe esperar una larga vida a FLASH.
2.2. Qué es Actionscript:
Seguramente lo has escuchado anteriormente. Actionscript es el lenguaje de
programación que viene incorporado a Flash. Es un lenguaje medianamente
sencillo y sus principios básicos puede aprenderlos cualquier persona. Pero como
cualquier lenguaje, también requiere paciencia y concentración. Es como aprender
a hablar otro idioma.... nada de imposibles, pero si no sale a la primera, quizás sí a
la segunda.
Cristián Parrao – [email protected] 9
En muchos lados los diseñadores no tocan Actionscript y los programadores
no se meten en el diseño. Son dos ramas que parecen unidas, pero los
profesionales se especializan para desarrollarse mejor en cada una de ellas. Y por
supuesto, están los otros.... los inquietos, las marabuntas del conocimiento que
buscan saber cada vez más. Si alguien me pidiera un consejo, recomendaría
especializarse en un área, pero jamás dejar de estar atento a la otra. Aunque no
sepas cómo se hace algo, siempre es bueno saber qué es lo que se puede hacer.
Cristián Parrao – [email protected] 11
Macromedia, desde la versión 6 de Flash comenzó a asemejar las interfaces
de sus programas. Como asume que tendremos más de algunos de sus productos
(Fireworks, Dreamweaver, por ejemplo), las ha construido parecidas para darle
una apariencia propia, que sea de fácil identificación para la empresa y que nos
guíe a la hora de adquirir nuevos productos Macromedia.
Abre Flash (desde Windows Botón Inicio > Programas > Macromedia >
Macromedia Flash MX 2004). Una vez abierto, anda al Menú Archivo > Nuevo. En
la ventana escoges Documento de Flash y Aceptar.
Figura 1
Un archivo de Flash se guarda con una extensión “fla”. Ese fla es editable. Lo
que se monta en Internet es un archivo swf, no editable y comprimido. Veremos
más detalles, más adelante.
La interfaz de Flash está diseñada para que sea cómodo, ordenado y fácil
trabajar con el programa.
Arriba (barra azul) a la izquierda tiene el nombre del archivo y a la derecha los
típicos iconos de Windows (Minimizar, Restaurar, Cerrar)
Cristián Parrao – [email protected] 12
Un poco más abajo, los menús de todo software (Archivo, Edición, Ver,
Insertar, etc.)
A la derecha puedes observar una serie de Paneles. Los Paneles nos ofrecen
una gran ayuda para complementar nuestros desarrollos en Flash. Los que vienen
por defecto no nos ayudarán mucho para este curso. Puedes sacarlos uno a uno
(te colocas sobre él y haces clic con el botón derecho > Cerrar Panel), esconderlos
como indica la figura 2, o finalmente dejarlos, ya que no afectan nada a tu trabajo
en Flash. Los iremos viendo según los necesitemos.
Figura 2
Los paneles más adecuados para este curso, son los que pertenecen a Menú
Ventana > Paneles de Diseño.
Si ya te has acostumbrado con un grupo de Paneles y quieres que Flash los
memorice, anda a Menú Ventana > Guardar Disposición de Paneles y le colocas
un nombre distintivo. Luego puedes leerlo desde Menú Ventana > Conjunto de
Paneles.
Abajo observaremos 2 barras cerradas (Acciones y Ayuda) y una abierta
(Propiedades). En esta primera etapa nos interesa Propiedades.
Esconder paneles
Cristián Parrao – [email protected] 13
La barra de Propiedades nos da indicaciones sobre cualquier cosa que esté
seleccionada en el escenario. Como ahora no tenemos nada seleccionado, nos da
indicaciones de la película que acabamos de abrir.
Haz clic donde indica la figura 3.
Figura 3
Figura 4
Esta ventana es una confirmación de lo que nos mostraba la barra de
Propiedades, pero acá podemos cambiar los valores. Los más importantes por
ahora son: El tamaño de la película, la Velocidad de Fotogramas la Unidad de
Regla. Te aconsejo que por ahora las dejes como están. Para todos tus
experimentos cambia lo que quieras, pero siempre conserva la Unidad de regla
como Píxeles, ya que es una medida muy ocupada en el mundo de las imágenes
digitales.
El píxel (del inglés picture element, o sea, "elemento de la imagen") es la menor unidad en la que se descompone una imagen digital, ya sea una fotografía, un fotograma de video o un gráfico. http://es.wikipedia.org/wiki/P%C3%ADxel
Cristián Parrao – [email protected] 14
Al centro de la interfaz se encuentra el Escenario, que es donde ocurre todo lo
que queremos que el usuario vea. Ahí dibujaremos, traeremos las imágenes,
cambiaremos de posición los objetos, etc.
Figura 5
El Escenario es todo lo blanco. Podemos acercarnos o alejarnos
de él según ocupemos la herramienta Zoom. Todo lo gris – que rodea
lo blanco – no lo ve el usuario normalmente. Se pueden colocar
elementos en esa zona, pero no se verán.
El tamaño del Escenario – como vimos anteriormente – se puede
editar en la barra de Propiedades.
A la izquierda observaremos la Barra de Herramientas, la cual
podrás ocupar a la hora de dibujar tus animaciones, escribir texto o
pintar.
Esta barra se divide en: Herramientas, Ver Colores y Opciones.
Opciones son justamente eso, parámetros que podemos cambiar de
cada una de las herramientas.
Cristián Parrao – [email protected] 15
Selección : Selecciona cualquier elemento que esté dentro del escenario.
Si es una figura sin agrupar, puede seleccionar pedazos. Para seleccionar una
figura sin agrupar, que contenga línea, se hace doble clic, de lo contrario, se
selecciona sólo el relleno. Otra manera de seleccionar es colocar el puntero arriba
a la izquierda del objeto y sin soltar, trazar un área que “encierre al objeto”.
Opciones Imán : Cuando está activado ayuda a
acercar líneas y puntas coincidentes de figuras.
La herramienta Puntero puede ayudarnos a modificar objetos. Es decir,
“empujando/estirando” su forma para obtener nuevos resultados. Esto vale tanto
para curvas como para rectas. Sólo te acercas a la figura y esperas que el icono
del puntero cambie, para estirar, manteniendo el clic por supuesto.
Sub Selección : Muestra los nodos de las curvas de figuras sin agrupar. Se
pueden controlar la forma con los manejadores de curva.
Cristián Parrao – [email protected] 16
Lazo : Selecciona formas irregulares (a mano alzada) de un dibujo no
agrupado. Opciones : Selección a través de polígonos; Varita Mágica (a
través de tolerancia de colores)
Línea : Hace líneas rectas. Con la tecla Mayús pulsada, se logran líneas en
45º
Pluma : Hace figuras a través de puntos. Cada curva genera manejadores,
que pueden variarse.
Texto : Como cualquier otro software de se puede manejar el texto con
muchos parámetros. Haz clic con esta herramienta en el escenario, escribe algo y
mira la barra de Propiedades. Ahí encontrarás para cambiar el tipo de letra, el
interlineado, el tamaño, el color, la alineación, estilos, interletreado, etc.
Cristián Parrao – [email protected] 17
Para transformar un texto en dibujo, lo seleccionas, vas al Menú Modificar >
Separar. Lo que hace es separar letra por letra. Si lo haces por segunda vez,
convierte completamente el texto en dibujo. Pierde sus características como texto,
pero queda absolutamente modificable como cualquier dibujo.
Óvalo : Hace Óvalos. Con la tecla Mayúscula presionada, logra
circunferencias.
Rectángulo : Hace Rectángulos. Con la tecla Mayúscula presionada, logra
cuadrados. Opciones: Redondea las esquinas (o lo mismo a través del doble clic).
Si te fijas bien, bajo el rectángulo hay un triángulo, lo que indica que contiene
más de una opción. En este caso la segunda opción es la Herramienta PolyStar.
PolyStar : Hace Polígonos y Estrellas. Selecciona la herramienta y en la
barra de Propiedades, haz clic en Opciones. Te saldrá esta ventana la cual te
permite darle otros valores a tus formas.
Cristián Parrao – [email protected] 18
Lápiz : Permite dibujar líneas, como si fuera un lápiz a mano alzada.
Opciones: Enderezar (endurece las curvas), Suavizar (suaviza las curvas), Tinta
(deja las curvas lo más parecido al dibujo original)
Brocha : Permite dibujar rellenos como si fuera una brocha a mano alzada.
Opciones: Tamaño de la brocha, tipo de brocha y forma de pintar
Transformación : Permite transformar objetos no agrupados. Opciones:
Trae varias formas de transformación.
Transformación de Relleno : Para manejar las gradientes de los objetos.
Bote de Tinta : Al aplicarlo a la línea de un objeto, cambia su color, según el
color seleccionado.
Cubo de Pintura : Al aplicarlo al relleno de un objeto, cambia su color,
según el color seleccionado.
Cuentagotas : Es capaz de reconocer un color desde una fotografía o dibujo
y lo lleva a la paleta de colores.
Cristián Parrao – [email protected] 19
Goma de Borrar : Borra elementos en el Escenario. Con doble clic, borra
todo lo que está en el Escenario. Opciones: Puede borrar de diferentes formas un
objeto no agrupado .
Zoom : Como una lupa, es capaz de acercarse o alejarse del escenario .
Opciones : Zoom In / Zoom Out . Para no estar cambiando del In y del
Out constantemente, al pulsar la tecla Alt, la lupa cambia al modo contrario.
Mano : Cuando el Escenario nos queda muy grande, es importante moverlo
para verlo más en detalle sin tener que alejarse. Para eso la mano nos permite
desplazarlo.
Colores : El cuadro de arriba selecciona el color de una línea de un
objeto y de abajo su relleno. En el caso del relleno se pueden incluir gradientes
radiales y lineales.
Cristián Parrao – [email protected] 20
Para editar estas gradientes, puede ocupar el Transformador de Relleno
directamente con el objeto seleccionado u ocupar el panel de Mezclador de
Colores (Menú Ventana > Mezclador de Colores)
Cristián Parrao – [email protected] 22
Probablemente en tus experimentos con Flash (y si no lo hiciste, no importa, te
lo cuento) te diste cuenta de que 2 objetos del mismo color que se tocan se juntan
o de diferente color se “comen”.
Dos círculos que luego se unieron y no se puede
separar.
Acá eran de diferente color y uno se “comió” al otro.
A veces buscamos esos efectos, pero a veces nos complican. Por eso Flash
nos da la posibilidad de poder agrupar objetos, al igual que otros programas
gráficos y evitar estos efectos.
Para lograr eso, es muy sencillo. Dibuja tu objeto, selecciónalo y anda al Menú
Modificar > Agrupar (o Control + G) y ya está.
Si queremos editarlo, muy fácil , hacer doble clic en él. Lo que ocurre es que
“entramos” al grupo y Flash nos lo advierte con una pestaña.
Cristián Parrao – [email protected] 23
Luego para salir de él, simplemente hacemos clic donde dice “Escena 1”.
Si a pesar de haberlo editado, decides que no quieres tenerlo agrupado, lo
seleccionas y escoges Menú Modificar > Desagrupar (o Control + Mayus + G)
Cuando hay muchos objetos agrupados, es probable que quieras ordenar su
forma de apilarse, es decir, algunos quedaron más arriba o más debajo de lo que
querías. Para ordenar eso, debes seleccionar tu objeto agrupado e ir a Menú
Modificar > Organizar > Traer al frente (si esa es tu opción). Lo más fácil y que
recomiendo, es seleccionar el objeto e ir moviendo su orden de apilación con la
tecla Control + Flecha (Arriba o Abajo).
Cristián Parrao – [email protected] 25
La Línea de Tiempo es la que nos permitirá que Flash produzca la sensación
de movimiento y no sea una imagen estática. Su función es importantísima y – me
atrevo a decirlo – el “corazón” de Flash Básico.
En ella van alojados todos los ingredientes para provocar la animación:
Fotogramas, Fotogramas Claves, Acciones, Capas, Etiquetas, interpolaciones, etc.
Como su nombre lo indica, implica que a través de ella corre el tiempo. El
tiempo que nosotros queramos y podemos modificarlo a gusto. El Fotograma es la
unidad básica de tiempo manejada por Flash. Por defecto, equivale a 1/12 de
segundos. Es decir, que si hay 12 Fotogramas, ha pasado 1 segundo, si hay 24,
han pasado 2 segundos, y así sucesivamente. 12 es el tiempo recomendado para
animaciones en Internet, pero que se puede modificar .
Al abrir un documento nuevo en Flash (Archivo > Nuevo) la línea de tiempo
aparece vacía (rectángulo blanco con círculo blanco abajo del número 1) y cuando
dibujamos cualquier cosa en el escenario, el rectángulo se pinta gris y el círculo
negro. ¡Nuestro pequeño primer paso en Flash!!!
Figura 1
Aspecto de la Línea de Tiempo al abrir Flash
Aspecto de la Línea de Tiempo al abrir Flash y dibujar cualquier cosa en el escenario
Cristián Parrao – [email protected] 26
Bien, en la Figura 1 podemos ver que hay un rectángulo rosado en el número
1. En realidad es el Cabezal de Lectura y su misión es recorrer la Línea de Tiempo
de izquierda a derecha, según cuánto dure.
Al abrir un nuevo documento la línea de tiempo es tan pequeña como su
unidad básica: 1 Fotograma. Eso no nos permite armarnos ningún tipo de
movimiento. A lo más sirve para una foto, pero para animación, no.
En cambio miren lo que ocurre en la figura 2, cuando la línea de tiempo la
hemos alargado a 40 fotogramas.
Figura 2
Pueden fijarse en la Figura 2 como el Cabezal de Lectura recorre la Línea de
Tiempo de izquierda a derecha.
¿Cuántos tipos de Fotogramas existen?
Cristián Parrao – [email protected] 28
6.1 Fotograma Simple (o Fotograma, así a secas):
Flash lo interpreta como “no pasa nada nuevo en el escenario, sólo mantiene
lo que había anteriormente”. Ya nos sonará más cuerda está definición. Los
puedes distinguir porque son rectángulos grises completos.
Para crear fotogramas: Abre un nuevo documento de Flash y dibuja cualquier
cosa en el escenario. Luego haz clic en la capa 1, pero bajo el número 10. Anda a
Insertar > Línea de Tiempo > Fotograma.
¿Qué fue lo que hiciste? Agrandaste la línea de tiempo a 10 fotogramas y
puedes probarlo presionando la tecla Enter para que notes cómo se desplaza el
Cabezal de Lectura. Pruébalo todas las veces que sea necesario y por supuesto
sigue experimentando.... es decir, ahora alárgalo a 20 fotogramas, 45, 60, etc.
6.2 Fotograma Clave:
Es un fotograma especial. En el Fotograma Clave “pasa algo”, así lo interpreta
flash. Y ese “pasar algo” puede ser que se hizo un dibujo en el primer Fotograma o
Figura 3
Aspecto de la línea de tiempo con 1 Fotograma
Aspecto de la Línea de Tiempo con 10 Fotogramas
Cristián Parrao – [email protected] 29
se produjo un cambio en otro lado. Se pueden distinguir porque presentan un
círculo negro.
Para crear Fotogramas Claves: Cuando tienes tu Línea de Tiempo que dura 10
fotogramas (figura 3) haz clic en la capa 1, bajo el número 10. Menú Insertar >
Línea de Tiempo > Fotograma Clave.
6.3 Fotogramas Vacíos:
Son todos los que por alguna razón no queremos que aparezcan, pero que
igual los lea el Cabezal de Lectura. Que no aparezcan nunca más o que luego se
puedan ver.
6.4 Área sin Fotogramas:
Es todo lo que vemos a la derecha de lo último que hemos animado. El
Cabezal de Lectura no lo lee, pero igual Flash los muestra para saber que
disponemos siempre de más tiempo.
Figura 4
Aspecto del Fotograma Clave en 10. Es decir, ahora tenemos 2 Fotogramas Claves (el del 1 y el del 10)
y los demás (del 2 al 9) son sólo Fotogramas
Figura 5
En esta figura se puede observar lo siguiente: Hay Fotogramas Claves desde el fotograma 1 al 4 Del 5 al 10, hay sólo fotogramas (así, a secas) Del 11 al 14 hay Fotogramas Claves Del 15 al 20, hay sólo fotogramas Del 21 en adelante viene un área sin fotogramas que no será leída
Cristián Parrao – [email protected] 31
Todo novato interesado en aprender Flash aunque conozca poco el programa, sabe la inmensa capacidad que tiene para desarrollar animaciones. No son tan difíciles de lograr, pero exige que el usuario tenga claro cuáles son los límites de autonomía propios del software.
¿Dónde está el botón para convertir una casa en un elefante? Probablemente no exista tal comando (por lo menos no lo he podido encontrar hasta ahora) pero hay maneras de simularlo y que tenga un efecto parecido.
Aquí están los 3 tipos de animaciones que se pueden lograr con Flash en este curso: Fotograma a Fotograma, por Forma y por Movimiento.
7. Animación Fotograma a Fotograma
Cristián Parrao – [email protected] 32
¿Alguna vez en el colegio hiciste en tu cuaderno dibujos animados? Un dibujo
en la primera hoja, en la siguiente era el mismo, pero con algo modificado. En la
tercera, otra modificación y así sucesivamente. ¡Después pasabas rápido las hojas
y wow! ¡Tu primer cartoon!!
Bien, esa antigua técnica es también posible
lograrla con Flash. Cada Fotograma Clave
equivale a una hoja de tu cuaderno y luego Flash
con su Cabezal de Lectura “lee” tus dibujos y ahí
tendrás tu animación.
Recomendable para: Animaciones muy
exigentes, las cuales los comandos de flash no te pueden ayudar mucho.
A veces no hay forma de lograr animaciones en Flash que no sean Fotograma
a Fotograma y evidentemente es más trabajo, pero claro, sus resultados pueden
ser mejores. Podríamos decir que hay “artesanía” en trabajos de este tipo y que
lograr un buen resultado requiere mucha técnica.
Aún así podemos hacer algunas pruebas sencillas. Abre un Nuevo Documento
en Flash . En el escenario dibuja una cara pero muy seria.
Figura 1
Cristián Parrao – [email protected] 33
Luego haz clic en el fotograma 2 y crea un nuevo Fotograma Clave. Lo que
hace el programa es crearte una copia exacta del primer dibujo.
A ese “nuevo dibujo”, hazle una variación en su boca. Un poco más sonriente.
Figura 2
Bien, el resto del ejercicio lo puedes intuir. Haz lo mismo con el fotograma 3, 4,
5 y hasta donde desees estirar esa sonrisa!!
Figura 3
Cristián Parrao – [email protected] 34
Una vez listo que te parezca suficiente el número de fotogramas (en mi caso lo
hice de 10), probamos la película. (Menú Control > Probar película). También
puedes intentar con sólo la tecla Enter.
¡Felicitaciones por tu primera animación!!!!
Hay otros elementos que te acompañarán también en las animaciones en
Flash. Veámoslos.
7.1. Capas:
Las Capas son una herramienta que no es original de Flash y ya la hemos
encontrado en muchos otros softwares tipo Photoshop o Director. Su objetivo es
ordenar todos los elementos que participan en el Escenario y van desde 1 (por
defecto) hasta el número que te aguante la RAM de tu PC. Evitan que se
superpongan los elementos y son esenciales para desarrollar animaciones.
Cada Capa actúa como una diapositiva transparente que contiene elementos.
¿Pero si la animación en Fotograma a Fotograma, para qué necesito más de
una capa? Podría ser que en este tipo de animación sea necesaria sólo una capa,
pero claro, si hay más, podrían ahorrarte mucho trabajo.
Figura 4
Contenido Capa 1: Mono de nieve Contenido Capa 2: Suelo con nieve Contenido Capa 3: Cielo
Cristián Parrao – [email protected] 35
7.1.1 Para Crear una nueva Capa:
Puedes crear el número de Capas que quieras y normalmente se separan los
dibujos del fondo y los elementos que desees. Crear Capas es muy fácil. Debes
hacer clic en o Menú Insertar > Línea de Tiempo > Capas. Por defecto
aparece una capa vacía (puedes notarlo por su rectángulo y círculo en blanco).
Para colocarle el nombre que desees, hazle doble clic y Flash te permitirá
escribirle lo que quieras. Ya con eso está lista para que puedas dibujar en ella.
7.1.2. Para Borrar una Capa:
Debes seleccionar la capa (hacer clic en ella) y luego hacer clic en , el
icono de basurero.
7.1.3. Para Mover una Capa:
Puede ser que necesitas cambiar el orden de las Capas. Muy fácil, haces clic
en la que quieras mover y sin soltar el botón del ratón, la arrastras hacia el lugar
que necesites.
Figura 5
Así es la visión de 3 dibujos distribuidos en 3 capas
Cristián Parrao – [email protected] 36
7.1.4. Propiedades de la Capa:
7.2. Papel Cebolla:
El Papel Cebolla permite ver tus fotogramas anteriores y posteriores. A veces
es muy útil, para controlar tus animaciones saber qué fue lo que pasó antes o qué
pasará.
Además trae unos “manejadores” para que le indiques a Flash cuántos
fotogramas para adelante o atrás deseas ver.
Figura 6
Ojo: Si se activa no se ve el contenido de la Capa en el Escenario (ejemplo, Capa “cielo”) Candado: Si se activa, el contenido de la Capa en el Escenario se ve, pero no se puede manipular (ejemplo, Capa “cielo” y “nieve fondo”) Línea de Contorno: El contenido de la Capa se ve sólo con sus Líneas de Contorno. (Ejemplo, Capa “nieve”). Puedes distinguir sus elementos más fácil y es un modo de vista más liviano para Flash.
Cristián Parrao – [email protected] 37
Cristián Parrao – [email protected] 39
Es la más conocida y popular de Flash. Si estás buscando hacer un sitio web,
por ejemplo, es muy difícil que no vayas a ocuparla.
Básicamente cuenta con un objeto al principio de la animación y otro al final.
Flash hace el resto.
Podemos encontrar de 2 tipos: De Forma y de Movimiento. La de forma es
muy espectacular al principio, pero poco usada por ocupar harta RAM y muchos
dicen que es una animación “fea”. La de Movimiento es la más común de todas los
tipos de animaciones.
Esta sería la visión que tendrías en tu Línea de Tiempo.
Interpolación de forma: Nótese que hay una flecha y un área verde entre 2 fotogramas
Interpolación de movimiento: Nótese que hay una flecha y un área morada entre 2 fotogramas
Error en la Animación: Nótese la línea segmentada. Eso significa que hubo un error y la animación podría no
funcionar.
Cristián Parrao – [email protected] 41
Ésta es la preferida por los novatos de Flash, pero no muy querida por los más
experimentados.
En un nuevo Documento, en el primer Fotograma dibuja cualquier cosa, por
ejemplo un rectángulo.
Luego de eso, haz clic en el Fotograma 20 de la misma Capa y pides insertar
un nuevo Fotograma Clave. Te copió exactamente tu primer dibujo. Este “segundo
dibujo” del Fotograma 20, transfórmalo a lo que quieras. A algo parecido, o a una
cosa absolutamente nueva o si quieres bórralo y haz otro.
Notarás ya que el primer dibujo (del Fotograma 1 al Fotograma 19) es muy
diferente al que acabas de construir en el Fotograma 20.
Haz un clic en cualquier Fotograma entre el 1 y el 19 (da lo mismo en cual) y
en el Panel Propiedades donde dice “Animar” abre ese menú desplegable y elige
“Forma”. Una vez hecho esto, lo que debieras ver, es:
Prueba tu película.
Cristián Parrao – [email protected] 42
9.1. Consejos de Forma:
Una de las críticas que se le hacen a este tipo de animación, es que – a parte
de la RAM que consume – Flash se “inventa” la animación. Es decir, el programa
decide qué manera hace la transformación.
Gracias a los Consejos de Forma, puedes “aconsejar” a Flash cómo quieres
que haga tu animación. No es una herramienta perfecta, a veces no resulta tan
buena, pero por lo menos ayuda.
La idea es bien fácil: le indicas al programa un punto en el dibujo de tu primer
Fotograma. Luego en el dibujo de tu último Fotograma, Flash te presenta el mismo
punto y debes indicarle donde te gustaría que llegara.
Para crear un Consejo de Forma estando en tu primer Fotograma debes ir a
Menú Modificar > Forma > Añadir Consejo de Forma. Aparece una “a” dentro de
un círculo que debes anclarla en alguna parte de tu dibujo. Anda al último
Fotograma y verás que hay otra “a” esperando que la ancles a otro punto. Puedes
hacerlo más veces.
9.2. Aceleración / Desaceleración
Al hacer una Animación por Forma (y para las de movimiento también), Flash
te da la posibilidad de Acelerarla o Desacelerarla. Este efecto es muy bueno
cuando queremos simular, por ejemplo, una pelota de tenis que rebota. Sabemos
Cristián Parrao – [email protected] 43
que el rebote no es uniforme. Cuando la pelota está arriba, se desacelera y
cuando baja, se acelera. En fin, pueden haber muchos más ejemplos para este
efecto.
Haz una animación por Forma. Una vez lista, selecciona el primer Fotograma.
Abajo en el Panel de Propiedades, mueve a gusto la opción “Aceleración” y
prueba sus cambios.
Cristián Parrao – [email protected] 45
Es el tipo de animación más ocupado, ya que Flash te da las herramientas
para cambiar algunas propiedades de los objetos que estás animando.
Repitamos algo fundamental. Tú le dices a Flash cómo un objeto comienza y
cómo termina y el programa hace todo lo intermedio.
Partamos con algunos conceptos antes
10.1. Creación de Símbolos Gráficos:
Hay veces en donde tienes que animar, por ejemplo, un Óvalo muchas veces.
Para eso Flash te da la posibilidad de transformar ese Óvalo en un Símbolo y que
quede guardado en una biblioteca para ocuparlo las veces que quieras. Las
ventajas de esto es que lo dibujas una vez y sólo después lo reutilizas, sin tener
que dibujarlo de nuevo. También ayuda en el gasto de memoria en el momento de
correr la película.
Para Animar por Movimiento, los elementos DEBEN ser convertidos en
símbolos gráficos. Esto es una regla.
Abres un Nuevo Documento, y en el primer Fotograma de tu única Capa haces
un dibujo. En este caso ocuparás un Óvalo.
Cristián Parrao – [email protected] 46
Este Óvalo lo Seleccionas y haces clic en Menú Insertar > Convertir en
Símbolo. Aparece una ventana, debes elegir el comportamiento. En este caso
elige “Gráfico”, los demás los veremos después. Colócale un nombre. Aceptar.
Notarás que ha cambiado su aspecto. Tiene una figura que indica su centro y
pareciera estar agrupado.
Cristián Parrao – [email protected] 47
10.2. Biblioteca:
Justamente, la Biblioteca nos sirve para guardar nuestros elementos de
trabajo.
Menú Ventana > Biblioteca. La Biblioteca ya ha guardado su primer símbolo.
Al igual que en la Animación por Forma, haremos el mismo proceso. Haz clic
en el Fotograma 20 (en este caso se me ocurrió el 20, puedes elegir cualquiera),
creas un Fotograma Clave. Este Fotograma Clave hace una réplica exacta de tu
primer Fotograma Clave.
Esta réplica vas a Transformarla y cambiarla de lugar.
Cristián Parrao – [email protected] 48
Antes de continuar, hay un punto interesante que comentar. Hasta ahora,
tenemos 3 elementos participando: Uno que está en el Fotograma 1, otro en el
Fotograma 20 y finalmente el que está en la Biblioteca. Al parecer es el mismo,
pero no. Los 2 que se encuentran en el Escenario, son Instancias del Símbolo que
se encuentra en la Biblioteca, es decir, hay 2 Instancias de 1 Símbolo. Si eres
novato en Flash, esto términos pueden parecerte un poco inútiles, pero ya en el
futuro te serán más familiares y aplicables en otro tipo de cosas.
10.3. La Interpolación:
Haz clic en cualquier Fotograma intermedio y en el Panel Propiedades >
Animar > Movimiento.
Prueba la Escena.
Notarás que Flash creó todos los Fotogramas intermedios entre la primera y
última instancia y se armó una animación fluida.
En este caso la instancia final fue cambiada de lugar. También se le pueden
hacer cambios de otros tipos a la última instancia (o a la primera, si deseas)
Cristián Parrao – [email protected] 49
Cambiar de posición
Rotar, Deformar, Alargar / Acortar, Ensanchar / Angostar
Teñirla de un color
Colocarle más o menos Brillo
Cambiarle la opacidad (alpha)
Todas las anteriores.
Finalmente, debes tener presente que los ejercicios presentados, sólo
consideran 2 instancias de un mismo símbolo. ¡Puedes hacer una gran
coreografía con muchas más instancias y muchos más símbolos! Ejemplos y
combinaciones hay infinitas, tú debes descubrirlas.
10.4. Capa Guía:
Ahora que ya sabes animar por Movimiento, te surgirán algunas dudas o tu
mismo trabajo con Flash te pedirá tener más conocimiento sobre efectos. Uno de
ellos es la Capa Guía.
La Capa Guía es una Capa que has creado en tu línea de tiempo (como todas)
y que será como bien dice su nombre una guía de la animación. Es decir, la
Capa Guía presenta un trazado el cual los objetos deben deslizarse por él y así
tomar un movimiento diferente.
Abre un Nuevo Documento y crearás una Animación por Movimiento de una
mosca que va desde la esquina superior izquierda del escenario a la esquina
Cristián Parrao – [email protected] 50
inferior derecha del mismo. En este caso necesitamos que la mosca vuele en
diagonal recto, nada más.
Una vez hecho esto, haz clic en el icono para Agregar una Capa Guía.
Inmediatamente Flash crea una Capa con una apariencia diferente al resto, arriba
de donde tenemos la de la animación.
En esta Capa Guía (vacía por ahora) se dibujará una trayectoria con el Lápiz
(opción Curva). Por supuesto una trayectoria sinuosa, sin cortes, diferente a la
diagonal que por defecto se creó.
Una vez hecho esto, asegúrate que la herramienta Imán esté activada y
arrastra la primera instancia de la mosca al punto que consideres inicio de la línea.
Al soltar la instancia, sentirás que está "imantada" al inicio de la línea.
Cristián Parrao – [email protected] 51
Debes hacer lo mismo con la instancia final de la mosca.
Prueba la Película.
Seleccionando tu primer Fotograma, en el Panel Propiedades activa la opción
"Orientar al trazado" y observa los cambios en tu animación.
10.5. Máscara:
La Máscara es otro efecto interesante a la hora de hacer tus animaciones.
Como bien su nombre lo indica, “enmascara”, es decir, te muestra "un pedazo" de
alguna animación o dibujo estático.
Cristián Parrao – [email protected] 52
Abre un Documento Nuevo y en el primer Fotograma, dibuja un rostro.
Luego haz clic en el icono de "Insertar una Capa". Ahí dibujarás un Óvalo, pero
asegúrate que esté sobre tu dibujo y que además sea más chico.
A esa nueva Capa (que yo la llamé “Óvalo”), haz clic sobre ella, pero con el
botón derecho de tu ratón. En ese Menú Contextual, elige "Máscara".
Ya puedes notar que algo ha pasado. El Óvalo ha enmascarado tu dibujo
original. Si pruebas la Escena, te darás cuenta que se conserva el mismo efecto.
Cristián Parrao – [email protected] 53
Las Máscaras pueden ser animadas (y su efecto es más interesante). Se
animan como cualquier Animación por Movimiento, Forma o Fotograma a
Fotograma.
También pueden haber otras combinaciones como que el dibujo enmascarado
sea animado.
Para que la Máscara funcione en el Escenario y puedas modificarla, debes
desactivarle la opción de Bloqueo a la Capa que quieras modificar.
Cristián Parrao – [email protected] 55
Los botones son objetos que Flash permiten construir y que nos dan la
posibilidad de navegar a antojo por toda la animación construida. Es decir, le
damos una cuota de interactividad a la película, ya que hasta ahora sólo hemos
construido animaciones en donde se detiene al final de los fotogramas y nada
más.
Un Botón lo reconoceremos por que al colocarnos sobre él, el puntero (que es
una flecha por defecto) cambia a una “manito”.
Para construir un botón, primero se debe tener en cuenta los “estados” de un
botón. Estos son bien sencillos. Cuando un botón está sin accionarse (es decir, sin
el puntero encima) decimos que está en el estado de “Reposo”. Cuando el puntero
del mouse está sobre él, y cambia de aspecto (se agranda, cambia de color, se
achica, etc.) decimos que está en el estado de: “Sobre”. Y cuando hacemos clic
sobre él, decimos que está en el estado: “Presionado”.
Ya sabes que podemos tener 3 estado de un botón. Claro, que podemos tener
sólo uno y sin ningún efecto, pero la idea es hacerlo gráficamente más interesante.
En tu escenario, crea un Óvalo. Luego lo convertiremos en Símbolo Botón. La
forma de hacerlo es bien parecida al Símbolo Gráfico. Selecciona tu figura Menú
Modificar > Convertir en Símbolo y esta vez elige “Botón”. Colócale un nombre
recordable y Aceptar.
Ya verás como ha tomado la apariencia de un símbolo y la Biblioteca ya lo ha
registrado. Haz doble clic en el botón del Escenario y mira la Línea de Tiempo.
Esta Línea de Tiempo es muy diferente a lo que hemos visto. Sus fotogramas son
más anchos y tienen nombres: Reposo, Sobre, Presionado y Zona Activa.
Cristián Parrao – [email protected] 56
Ya supondrás lo que ha pasado. Nuestro Óvalo se ha convertido en el estado
“Reposo” del botón y espera que comencemos a construir los siguientes estados.
Haz clic en el estado “Presionado” y crea un nuevo Fotograma Clave (Menú
Insertar > Línea de Tiempo > Fotograma Clave). Ya ves que hace una copia
exacta del primer Fotograma. A esa copia, hazle algunas modificaciones (cámbiale
el color, la forma u otra cosa).
Luego, crea un nuevo Fotograma Clave en el estado “Presionado” y cambia su
forma.
El estado “Zona Activa”, no es un estado propiamente tal del botón que
Cristián Parrao – [email protected] 57
podamos ver. Acá en realidad le decimos a Flash desde donde el puntero se
convierte en “manito”. Es un indicador de área, así que no importan sus colores
(nunca los veremos). Para este ejemplo da lo mismo, porque con el Óvalo no hay
problemas, pero debes tener mucho cuidado en botones que hagas con sólo texto
o figuras muy irregulares. Para esta ocasión, sólo deja un fotograma clave en este
último estado y no le hagas ninguna transformación.
Ahora es momento de salir de nuestro Símbolo Botón. Haz clic en la pestaña
que dice “Escena 1” para volver al Escenario del principio.
¡Es momento de probar tu película!!!
Cristián Parrao – [email protected] 59
Bien, acá daremos nuestros primeros pasos con Actionscript, que es el
lenguaje de programación de Flash. No es difícil, ya lo verán.
Acá lo importante es que recuerden que Flash no sabe hablar Español, y como
nosotros queremos darle instrucciones (detente acá, avanza, detente de nuevo,
etc.) tendremos que aprendernos sus instrucciones (Acciones) Básicas.
Partamos con un pequeño ejercicio. Lo primero que debemos hacer es crear
una Animación por Forma, o Movimiento. Para este caso da lo mismo, lo
importante que por lo menos tenga 30 fotogramas de duración.
Prueba la animación y verifica que corra sin problemas.
Una vez hecho esto, llama a una nueva Capa (Menú Insertar > Línea de
Tiempo > Capa) y llámala “acc”. Como sabemos, esta capa por defecto aparece
vacía. Anda al Fotograma 15 e inserta un Fotograma Clave (que también
aparecerá vacío). Selecciónalo con un clic y abre el Panel de Acciones (F9). Fíjate
que en el Panel dice “Acciones Fotograma”, lo que significa que estamos
aplicando una acción al Fotograma (luego veremos que hay acciones que se
aplican a otras cosas).
En el Panel, escribe lo siguiente y sin errores:
Cristián Parrao – [email protected] 60
stop();
Cierra el Panel y fíjate que en el Fotograma escogido se ha marcado una “a”.
Eso indica que ese Fotograma contiene una acción.
Prueba la película y verás que la animación no se ejecuta completamente,
pues se detiene en el fotograma al cual le agregamos la Acción.
¡Felicitaciones, tu primer paso en Actionscript!!!
Evidentemente no lo dejaremos así. Si se detiene la animación, algo tendrá
que volverla a ejecutarla. Acá entra nuestro amigo el Símbolo Botón.
Pide una nueva Capa y llámala “Botón”. En ella crea un botón con todos sus
estados. Cuando esté listo, selecciona el Botón (ojo, ya salimos de sus estados) y
llama al Panel de Acciones. Asegúrate que en el panel dice “Acciones Botón”, si
dice otra cosa (como Fotogramas), selecciona nuevamente el Botón.
En el Panel de Acciones escribe lo siguiente:
on(release) play();
Cristián Parrao – [email protected] 61
Prueba la Película.
Ya notarás que a pesar de detenerse la animación, el botón permite que pueda
seguir ejecutándose.
Resumen
Logramos nuestra primera interactividad con Flash. Creamos una animación
simple y le dijimos al tiempo que se detuviera (en realidad se lo dijimos a un
fotograma, pero recuerden que acá Fotograma es una unidad de tiempo, lo que da
igual). Nuestro botón nos salvó de esa detención y fue capaz de volver a ejecutar
la animación. Es decir primero Stop y luego Play (“deténgase y luego continúe”)
12.1. Acciones de un botón:
Como se dieron cuenta, al colocarle una Acción al Botón, no sólo le pedimos el
play(); , sino que además agregamos otras cosas (a diferencia de la acción al
fotograma):
Cristián Parrao – [email protected] 62
on(release) play();
Si esto fuera una traducción literal, sería algo como:
on : “Cuando el usuario...”
(release): “...suelte el clic del mouse...”
play();: “...ejecute la Línea de Tiempo”
Los dos primeros términos se les llama “Evento” y el tercero es la “Acción”. Es
decir “Cuando el usuario suelte el clic del mouse” “Ejecute la Línea de Tiempo”
(algo como Causa y Efecto) .
Como supondrán, las Acciones siempre pueden cambiar y los Eventos
también. Veamos la lista de Eventos para el Botón:
on(release): Al soltar el botón del mouse sobre la instancia después de
haber pulsado (es decir, liberar). La más común de todas.
on(press): Al apretar el botón izquierdo del mouse sobre la instancia. Sin
soltarlo, ya ejecutó la acción.
on(releaseOutside): Al soltar fuera de la instancia
on(rollOver): Al entrar el cursor en el Área Activa de la instancia
on(rollOut): Al salir del Área Activa
on(dragOver): Al arrastrar el cursor con el botón izquierdo del ratón
apretado desde fuera del Área Activa, hacia dentro (botón con propiedad
“seguimiento de menú” Panel de Propiedades)
on(dragOut): Al arrastrar el cursor con el botón izquierdo del ratón apretado
fuera del Área Activa
on(keyPress “A”): En este caso se trata de un evento que nada tiene que
ver con el botón, ya que se produce al pulsar una tecla (del teclado)
indicada por nosotros (en este caso, coloqué la “A”).
Cristián Parrao – [email protected] 63
Los eventos se pueden combinar, como por ejemplo: on(press, release)
Y si de acciones se trata, no podremos dar el listado completo: Son muchas,
demasiadas. Pero explicaremos acá algunas que nos permitan hacer otras cosas
básicas.
Ya conocemos el Ejecutar “play();”, el Detenerse “stop();”. Ahora conoceremos
dos más.
Cristián Parrao – [email protected] 65
Hagamos el mismo ejercicio anterior. Ahora una animación muy simple de 60
fotogramas y en el Fotograma Clave 30, colocas un stop();
En otra capa haces un botón y en vez de play(); escríbele gotoAndStop(60)
on(release) gotoAndStop(60);
Ya supondrás lo que sucede. La acción gotoAndStop(60) significa “Vaya y
deténgase en el fotograma 60”. Si pruebas tu película es justamente eso lo que
sucede.
Intenta otra cosa. Ahora es el turno de gotoAndPlay(50);
on(release) gotoAndPlay(50);
La misma lógica. gotoAndPlay(50) significa “Vaya y ejecútese desde el
fotograma 50”.
Por supuesto que los valores que he ocupado (50 y 60) son sólo de ejemplo.
Tú puedes y debes colocar los que te acomoden a tus necesidades de
interactividad.
Pero no sólo valores numéricos se le puede dar.
Sigamos con el mismo ejemplo. En la capa “acc”, anda y crea un Fotograma
Clave en el fotograma 40. Una vez hecho eso, asegúrate que esté seleccionado y
anda a la barra de Propiedades, donde dice Fotograma e invéntale un nombre
“prueba”.
Cristián Parrao – [email protected] 66
Ahora anda al Botón y cámbiale el gotoAndPlay(50); por:
on(release) gotoAndPlay(“prueba”);
Prueba tu película y podrás notar que la Navegación puede ser también
colocándole nombres a los Fotogramas. Por supuesto, puedes nombrar todos los
fotogramas que desees y hacer más rica tu navegación.
Cristián Parrao – [email protected] 68
¿Qué es una escena? Podemos hacer una analogía con el cine o el teatro. En
una Escena se cuenta algo. Por ejemplo, el encuentro de dos amigos en la calle.
Cuando queremos dejar de contar, para pasar a otra cosa, “cambiamos de
escena”. Ahora queremos mostrar a los amigos en una fiesta... eso ya es otra
Escena.
Flash también permite tener más Escenas. Todo lo que hemos hecho hasta
ahora ha sido en la Escena 1, la que por defecto viene con Flash.
Mira los Paneles a tu derecha. Si no encuentras el Panel Escena, sácalo de
Menú Ventana > Paneles de Diseño > Escena
Por defecto se llama “Escena 1”.
Puedes cambiarle el nombre
haciendo doble clic en él.
Supongamos que tienes una
animación de cualquier tipo en tu
primera Escena. Al probar la película
notarás que se hace una repetición
continua (loop) de la misma
animación. Es decir, llega al final y
vuelve al principio.
Anda al Panel Escena y haz clic
en el icono para crear una Nueva
Escena . Notarás que
efectivamente se ha incorporado un nuevo nombre “Escena 2” (que puedes
cambiárselo, por supuesto) y ahora mira a tu escenario. No hay nada!!!
No se ha borrado la animación. Lo que pasa es que estamos en otra escena,
la que contiene una nueva línea de tiempo. Haz acá otra nueva animación y
prueba tu película (Menú Control > Probar Película). Notarás que cuando termine
tu primera animación, comenzará la siguiente.
Cristián Parrao – [email protected] 69
También, puedes probar sólo la Escena con Menú Control > Probar Escena.
14.1. Navegación entre Escenas:
Por supuesto que además se puede navegar entre escenas y probablemente
muchos de los sitios web simples construidos en Flash, están armados con
Escenas.
Quiero que crees 3 Escenas y en cada una, una animación diferente. Además
al finalizar cada animación, debe haber una Capa que contenga en el Fotograma
final un stop(); y un botón. Es decir, 3 Escenas, 3 Animaciones, 3 stop(); y 3
botones.
La Escena 1 la llamaremos “inicio”, la segunda “intermedio” y la tercera “final”.
Si pruebas tu película, notarás que comienza la primera animación, se frena
con el stop(); y hasta ahí no más llega.
Al primer botón le colocaremos la siguiente acción:
on(release) gotoAndPlay(“intermedio”, 1);
Como supondrás, este te llevará a la escena “intermedio”, al fotograma 1.
En la tercera Escena, crea una Etiqueta donde gustes con el nombre “juan”.
Cristián Parrao – [email protected] 70
En el segundo botón (de la segunda Escena), agrégale la siguiente acción:
on(release) gotoAndPlay(“final”, “juan”);
También ya podrás suponer qué hace esta acción. Es capaz de enviarte a la
escena que le indicas y además a la etiqueta que desees.
Ahora al tercer botón quiero que le agregues:
on(release) prevScene();
Prueba la película. Podrás haberte dado cuenta que lo que hace prevScene(); es devolverte a la
Escena anterior (previous scene), pero es equivalente al gotoAndStop(), es decir,
va a donde le dices, pero sin ejecutar la Línea de Tiempo. También existe el
nextScene(); que como bien sospechas, te lleva a la siguiente escena (next scene)
14.2. Navegación Externa:
Flash también permite salir a Internet. A través de la acción “getURL”,
podemos tener acceso a la web y al correo electrónico.
Haz un Botón y colócale la siguiente acción:
on(release) getURL(“http://www.parrao.cl”, “_blank”);
Esta nueva acción nos permite abrir una página web con una URL específica.
Cristián Parrao – [email protected] 71
Evidentemente la URL puede cambiar a la que necesites, pero no olvides
colocarle el “http://” antes.
La opción “_blank” significa que la página a abrir se ejecutará en una ventana
diferente a la que contiene el Flash. Una alternativa es “_self”, que abre en la
misma ventana. Para más detalles sobre nombres de ventana, recomiendo leer
información sobre Frames (marcos) de HTML.
La otra opción del getURL es:
on(release) getURL(“mailto:[email protected]”);
Como supondrás el “mailto:” permite abrir una ventana de correo electrónico y
poder enviar un mail. Atención con esto: Si el computador no tiene instalado un
software de correo electrónico (como Outlook), esta opción no funcionará.
Cristián Parrao – [email protected] 73
Es el tercer símbolo que nos queda por explicar. Con este último, ya puedes
comenzar a realizar tus propias animaciones, e incluso tus primeros pasos para la
creación de tu sitio web.
El Clip de Película es un objeto muy poderoso a la hora de programar en
Actionscript; sin embargo, en esta ocasión veremos su fase inicial, que tiene
relación sólo con la animación.
El símbolo Clip de Película, es una "subpelícula" dentro del Escenario. Posee
su propio tiempo, independiente de lo que pase fuera de él. Por ejemplo, si
tenemos una Escena con una animación simple y un stop() al final, lo normal sería
que cuando el Cabezal de lectura llegue al fotograma final todo se detendrá, pero
¿qué pasaría si necesitamos que además de la animación principal quede una
pequeña animación que no se detenga nunca (un logotipo chico en un esquina
que no pare de girar, por ejemplo)? Para eso, nuestro fiel Clip de Película nos
sacará del apuro.
En una Escena, en la zona izquierda, dibuja un corazón. Conviértelo a
Símbolo, y esta vez elige "Clip de Película" y colócale de nombre "palpita".
Anímalo como siempre lo haz hecho. Que avance hacia la derecha hasta el
Fotograma 20 y que desde ahí baje hasta el final del Escenario (Fotograma 40).
En una Nueva Capa, llamada "acc", coloca un fotograma clave en el
Fotograma 20 y la acción stop() . En otra Capa, construye un botón, con la acción:
on(release) play();
Hasta ahora llevamos algo parecido a ejercicios anteriores. Prueba la película
Cristián Parrao – [email protected] 74
y asegúrate que todo funcione en orden.
Ahora viene lo novedoso. Haz clic con el botón derecho de mouse en
cualquiera de los corazones (el del Fotograma 1, 20 ó 40) y en el Menú Contextual
elige la opción "Editar en Contexto".
¿Qué ha pasado? Nos hemos introducido en el Clip de Película y ahí vemos a
nuestro corazón como originalmente fue construido, sin ninguna agrupación.
Puedes notar la etiqueta que nos indica que estamos dentro del Clip de Película.
Recuerda que para volver a la Escena original, sólo debes hacer clic donde dice
"Escena1" o el nombre que le hayas dejado (al igual que los otros dos símbolos
anteriores: el Gráfico y el Botón). Bien, también notarás que como estamos dentro
del Clip, Flash nos deja disponible una nueva Línea de Tiempo.
Lo que haremos acá dentro es que nuestro corazón palpite. Nada más, no nos
preocuparemos que "avance y palpite", sólo que palpite. Para ello, debemos
animarlo con los pasos típicos que ya conocemos. Seleccionas tu dibujo, lo
conviertes en Símbolo Gráfico, le colocas un nuevo nombre y lo haces agrandarse
hasta el Fotograma 10.
Cristián Parrao – [email protected] 75
Revisa cómo la Biblioteca ha registrado ordenadamente los dos símbolos
Ya listo con eso, "salgamos" a la Línea de Tiempo principal y prueba tu
película (Menú Control > Probar Película). Debieras ver lo siguiente: Un corazón
palpitante comienza a avanzar a la derecha, se detiene su avance, pero no su
palpitar. Finalmente un botón hace que pueda seguir avanzando, pero esta vez
hacia abajo.
15.1. Botón Animado:
Ya conociendo el Clip de Película, podemos animar botones; es decir, lograr
que el estado "Sobre" y/o "Presionado", contengan una animación.
Esto es muy sencillo. En un sólo Fotograma, crea un botón con sus 3 estados,
más el estado "Zona Activa". Anda al estado "Sobre", selecciona lo que aparece
en el Escenario y conviértelo en Símbolo Clip de Película. Una vez hecho esto,
selecciona este nuevo símbolo, botón derecho del mouse y elige Editar en
Contexto (con doble clic también sirve). Dentro de él, selecciona nuevamente el
objeto, conviértelo a Símbolo Gráfico y construye cualquier animación.
Cristián Parrao – [email protected] 76
Vuelve a la Escena principal y prueba tu película. Si todo funciona
correctamente, te darás cuenta que el estado "Sobre" del botón (cuando el puntero
del mouse está sobre él), produce una animación. Si sacas el puntero, la
animación cesará. Es un bonito botón animado!!!
En resumen, lo que hicimos se llama "Anidación de símbolos". Es decir, dentro
de un estado de un Botón, tenemos un Clip de Película y dentro de él, tenemos
una animación de un Símbolo Gráfico.
15.2. Control de un Clip de Película:
Ya tenemos claro cómo un Botón es capaz de afectar a la Línea de Tiempo
con stop() o play() y poder navegar dentro de ella con gotoAndPlay(1) o
gotoAndStop(1), e incluso navegar hacia otras escenas
gotoAndPlay("nombredeEscena", 1) o gotoAndStop("nombredeEscena", 1) o
nextScene() o prevScene(). Incluso poder salir a Internet con
getURL("http://www.parrao.cl", "_blank") o getURL("mailto:[email protected]",
"_blank")
Todo eso está bien, pero ¿Cómo controlamos un Clip de Película si este es
independiente de la Línea de Tiempo principal? Muy fácil: con las Instancias.
Cristián Parrao – [email protected] 77
15.2.1. Instancias:
Una Instancia es una "representación de un Símbolo en el Escenario". Cuando
creamos un Símbolo y este es registrado en la Biblioteca, en realidad lo que
aparece en el Escenario, es una Instancia del Símbolo. Eso es fácilmente
comprobable, ya que si agarras el Símbolo desde la Biblioteca y lo lanzas al
Escenario, ya tendrás 2 Instancias del mismo símbolo. Incluso esa segunda
instancia puedes deformarla o bajarle la transparencia. Serán diferentes, pero
tendrán un mismo origen: el Símbolo en la Biblioteca.
Puede que esto no suene muy útil por ahora, pero después tendrá todo
sentido.
En un nuevo documento, crea un Símbolo Clip de Película llamado “carita feliz”
(que sea justamente eso, una cara con ojos y boca sonriendo) y dentro de él,
harás que la boca tenga una animación. La boca la colocas en otra capa, y a
través de una animación por forma harás que deje de sonreír.
Cristián Parrao – [email protected] 78
En el Escenario, debe estar nuestra Instancia 1 y en la Biblioteca, nuestro
Símbolo. Agarra el Símbolo de la Biblioteca y arrástralo al Escenario. Ahora
tenemos 2 instancias. Con la Herramienta Transformación, ensancha tu
Instancia2. Prueba la Película.
Cristián Parrao – [email protected] 79
Si todo está en orden, verás que las dos Instancias tienen la misma animación,
sólo que una esta con el ancho original y la otra muy ensanchada.
Vuelve al Escenario, selecciona la Instancia1 y en Panel de Propiedades, y
sobre <Nombre de Instancia> escribe "flaco". Haz lo mismo con la Instancia2 y
colócale "gordo".
Ahora crea un Botón con sus 3 Estados, más la Zona Activa, y haz lo mismo
que hicimos con el Clip de Película, deja dos instancias del mismo botón en el
Escenario. En el caso de los botones, no le colocaremos nombre.
Para la Instancia1 del Botón, agrégale la acción:
Cristián Parrao – [email protected] 80
on(release) flaco.stop();
Y para la Instacia2 del Botón, agrégale la acción:
on(release) gordo.stop();
Prueba tu película y verás que ha sido muy sencillo controlar una Instancia de
un Clip de Película. El primer botón controla a "flaco" y el segundo a "gordo".
También puedes hacer más combinaciones, por ejemplo que uno detenga a
"flaco" y el otro lo ejecute con play(). O que un botón haga un
flaco.gotoAndStop(5). En fin, se comienzan a abrir las posibilidades para lograr
animaciones cada vez más interactivas.
Cristián Parrao – [email protected] 82
Flash, permite que importemos objetos desde otros lados. Eso hace más rica
la creación de multimedia y nos permite explorar todo el poder del software.
16.1. Imágenes Vectoriales:
Como ya explicamos al principio de este manual, las imágenes vectoriales son
dibujos que el software entiende matemáticamente (aunque uno como usuario, no
coloque ningún número). Cuando dibujamos una estrella en el Escenario, es
estrella es vectorial. Podemos acercarnos a ella con la lupa y no se pixelará.
Otros 3 softwares que importan vectores (dejaré fuera en esta ocasión a Corel
e Illustrator) es Fireworks, Freehand y Power Point.
Su importación es sumamente sencilla: Copiar y Pegar
Fireworks MX
Si tienes un documento en Fireworks MX que incluye objetos vectoriales, lo
selecciona, lo copias, luego vas a Flash y en el Menú Edición > Pegar (Control +
V) lo pegas. Flash lo convierte inmediatamente en un Símbolo Clip de Película, el
cual si deseas, puedes quitarle esa condición con Menú Modificar > Separar.
También puedes convertir inmediatamente lo copiado en un mapa de bits, con
Menú Edición > Pegado Especial... > Mapa de Bits independiente de dispositivos.
Un documento de Fireworks MX ya guardado en PNG, también puede ser
Cristián Parrao – [email protected] 83
abierto desde Flash con el Menú Archivo > Importar > Importar a Escenario. En
ese caso Flash pedirá algunas configuraciones, que debes ingresar.
Freehand
Es básicamente igual a Fireworks.
Microsoft Power Point
Este software me ha sido de mucha utilidad, a la hora de importar su Imágenes
Prediseñadas, que sirven como ClipArt vectoriales para Flash.
Su forma de importar es muy fácil. Seleccionas tu Imagen Prediseñada o tu
Autoforma (en general casi todas funcionan, pero presentan problemas cuando se
les colocan rellenos de trama o imagen), la copias con Menú Edición > Copiar
(Control + V). Luego vas a Flash con Menú Edición > Pegado Especial... > Imagen
(Metaarchivo), te pega la imagen como vector. Normalmente llega agrupada, pero
desgrupándola o metiéndote dentro de ella, puedes modificarla.
16.2. Imágenes de Mapa de Bits
Las imágenes de Mapa de Bits son en realidad especies de mosaico de
píxeles, donde cada píxel tiene un color y una posición. Si la agrandamos o nos
acercamos con la lupa, comienzan a verse más grandes los píxeles y a
desmejorar la imagen.
A pesar de que Flash permite importar varios formatos de imagen, los más
Cristián Parrao – [email protected] 84
ocupados son JPG, GIF y PNG. Al importar una imagen Menú Archivo > Importar
> Importar a Escenario, Flash registra la imagen importada en la Biblioteca.
Las imágenes de mapa de bits importadas pueden ser un buen medio para
agregarle riqueza gráfica a un proyecto de Flash, pero pesan bastante más que un
dibujo vectorial y además al agrandarlas o achicarlas, pierden definición; por lo
que se debe tener precaución y optimizar bien las imágenes.
Mi recomendación es que la imagen se optimice hasta el punto más aceptable,
que se deje del tamaño real en el cual se va a ocupar en Flash y luego se importa.
Hay que tratar de evitar, en lo posible, el reescalamiento de las imágenes de mapa
de bits desde Flash.
Su animación es igual a cualquier a otro objeto y puede transformarse a
cualquier otro tipo de símbolo.
16.2.1. Vectorizar Imágenes de Mapa de Bits
Esta es una herramienta quizás interesante desde el punto de vista gráfico,
pero puede ser un poco traicionera en el peso final de la película o su fluidez de
Cristián Parrao – [email protected] 85
animación, si no se sabe manejar bien.
Importa tu imagen de mapa de bits, selecciónala y vectorízala en Menú
Modificar > Mapa de Bits > Trazar Mapa de Bits. Las opciones que se deben
configurar nos permite ajustar la vectorización y en realidad lo mejor es ir
probando las diferentes combinaciones, hasta buscar más o menos exactitud con
la imagen original, dependiendo de nuestros objetivos.
Esta herramienta la ocupamos mucho en mi empresa, cuando hacíamos Web
Cartoon animados desde Flash. El ilustrador dibujaba y se escaneaba a 300 dpi,
pero en Blanco y Negro (ni escala de grises, ni color). Luego esa imagen se
importaba a Flash y se vectorizaba con las opciones que vienen por defecto (esa
combinación resultaba bastante bien) y luego se optimizaban las curvas con Menú
Modificar > Forma > Optimizar, y se buscaba una optimización cercana al Máximo.
Finalmente se pintaba con las herramientas de Flash y luego se animaba.
16.3. Importación de Sonidos
El sonido es un elemento que también enriquece nuestro trabajo multimedial.
Flash permite importar formatos de sonidos, tales como MP3, AIFF, WAV y
Cristián Parrao – [email protected] 86
AU. Su importación parte igual que las de las imágenes, es decir Menú Archivo >
Importar > Importar a Escenario. Al mirar el Escenario, aparentemente no ha
sucedido nada, pero la Biblioteca ya ha registrado el sonido importado.
El Sonido lo llevas al Escenario, arrastrando y soltando. Una vez hecho esto,
la Línea de Tiempo ha registrado tu sonido (puedes ver el dibujo de la onda en el
Fotograma), lo que significa que desde ahí comenzará a escucharse tu sonido.
A pesar de ser una manera bastante sencilla, debes tener en cuenta las
maneras que Flash ejecuta un Sonido en tu película, que básicamente y las más
usadas son 2: Evento y Flujo.
Cristián Parrao – [email protected] 87
Al seleccionar tu Fotograma, el Panel de Propiedades registra el sonido
escogido. Donde dice Sinc, es donde configuras la manera de ejecutar el sonido.
Flujo significa que tu sonido comienza en ese Fotograma y se adapta a las
órdenes de la Línea de Tiempo; es decir, si el largo del sonido es de 50
fotogramas, pero el Fotograma 30 tiene programado un stop(); el sonido se
detendrá en ese momento.
Por otro lado, Evento significa que tu sonido si bien comienza en el fotograma
indicado, no tiene ninguna coordinación con la línea de tiempo. El Evento
contribuye en mucho de los casos en una baja del peso de la película.
Evento es recomendable para loops y cualquier cosa que no deba coordinarse
con otra. Flujo, al contrario es especial para sonidos que deban coincidir con
elementos gráficos (algo cae, una boca habla, etc.)
En un documento nuevo, importa 2 sonidos diferentes de un largo en tiempo
similar (por ejemplo dos canciones cortas). Haz que tu Línea de Tiempo (vacía por
ahora) dure hasta el fotograma 60, pero en el 30, coloca un Fotograma Clave y
déjalo con stop(); (asumo que los sonidos son más largos que 30 fotogramas, si
no el ejercicio no resulta)
Agrega 2 Capas y lleva hasta el Escenario los dos sonidos importados, uno en
cada Capa diferente, pero que comiencen desde el Fotograma 1. El primero
configúralo con Flujo y el segundo con Evento.
Cristián Parrao – [email protected] 88
Prueba tu película y comprueba los resultados.
Además puedes configurar si el sonido debe repetirse indefinidamente o un
número de veces.
Finalmente Flash da una serie de opciones de efectos pre hechos o también
se pueden personalizar. Haz clic en el botón Editar del Panel de Propiedades y se
te presentará una ventana la cual contiene el dibujo de la onda del sonido y te da
la posibilidad de mover (como un ecualizador gráfico) los puntos en donde
controlas el volumen del sonido.
Notarás además que presenta 2 canales, los cuales puedes hacer efectos
interesantes con los parlantes. Esta ventana puede ser vista con los segundos
Cristián Parrao – [email protected] 89
transcurridos en el sonido o el número de fotogramas que recorre. También en
caso de sonidos muy largos o muy cortos, te da una lupa para moverte con más
comodidad.
Finalmente para probar el efecto, incluye dos botones, uno de Reproducir
Sonido y Detener Sonido.
16.4. Importación de Video
Flash también permite la importación de videos, en los proyectos
multimediales. Al tener instalado Quicktime 4 en el computador, permite importar
formatos como: AVI, DV, MPG, MPEG, MOV. Con DirectX 7 o superior instalado
sólo para Windows, también además permite formatos WMV, ASF.
Abre un Nuevo Documento. Menú Archivo > Importar > Importar a Escenario, y
escoges algún formato de video.
Puedes elegir editar el Video o Importarlo completo. En el caso de editarlo,
Flash te da la posibilidad de seleccionar partes de la película y llevarlas al
documento. Además permite que selecciones la compresión deseada, según
velocidad de conexión de los usuarios y una edición más avanzada que controla el
color, las dimensiones y otras opciones de pista.
Cristián Parrao – [email protected] 90
En caso de importarlo completo, las opciones finales son las mismas, sin
evidentemente la edición.
El video es llevado a la Biblioteca y se puede utilizar como un elemento más.
Cristián Parrao – [email protected] 92
Después de todo esto ¿Cómo sale mi película para que pueda ser vista por
otras personas?
Si tu trabajo final es la web, debes exportar tu trabajo en un formato swf
(Shockwave Flash). El archivo swf, es un archivo que comprime todo tu trabajo
realizado en el fla y queda de un tamaño liviano para ser visto por la web. Este swf
normalmente debe ir sostenido por un archivo HTML, el cual Flash lo puede
generar también.
Cuando hayas terminado toda tu animación, con botones programados,
instancias, videos, sonidos y todo lo demás, anda a Menú Archivo > Configuración
de Publicación.
Esta ventana te ofrece los formatos más ocupados (pero no todos) para
exportar. Por defecto aparece seleccionado Flash (.swf) y HTML (.html) y sus
nombres, que quedan igual al nombre del tu FLA (que por supuesto puedes
cambiar). También por defecto, estos archivos exportados se guardan en la misma
carpeta del FLA, pero lo puedes modificar en el icono de “Seleccionar destino de
Cristián Parrao – [email protected] 93
la publicación”, a la derecha en forma de carpeta.
Además estas opciones generan 2 lengüetas con una serie de configuraciones
interesantes para publicación. A nivel de novato, las que te recomiendo que debas
tener siempre presente son:
Lengüeta Flash:
Versión: Este manual
corresponde a Flash MX2004 y
corresponde a la versión 7. Si la
exportas en esa versión, los usuarios
de la web que no se han actualizado y
tienen versiones menores, no podrán
ver tu película (por ejemplo, si incluiste
video, alguien que tenga la versión 5,
nunca podrá verlo, ya que desde la 6
Flash integró el video). En ese sentido,
si tienes dudas, mejor pregúntale a un
usuario más avanzado de Flash, qué
versión recomienda. Todo dependerá a
quién va dirigido.
Calidad del JPG: Le indicas a Flash cuánto quieres desmejorar tus
imágenes. Normalmente déjalo en 80, pero puedes probar con menos (menos
peso final además). Con más calidad, no lo recomiendo, ya que lo hace más
pesado y en realidad nunca va a mejorar la imagen.
Compresión para los sonidos de Flujo y Evento: Aplicando el mismo
principio anterior, los sonidos puedes mantenerlos parecidos al original o
desmejorarlos para hacer más liviana la película. Esto haciendo clic en el botón
“Establecer”. Para sonidos largos, conviene dejarlo en MP3, para cortos ADPCM y
para voces en Voz.
Cristián Parrao – [email protected] 94
Lengüeta HTML
Dimensiones: Puedes variar el
tamaño de la película
Escala: Modifica la manera de
comportarse de la película con el
HTML cuando este es modificado de
tamaño (se genera scroll, se deforma,
se mantiene, etc.)
Otros archivos exportados interesantes que nos permite Flash son formatos de
imágenes GIF, JPG, o PNG, con sus respectivas configuraciones similares a
cualquier software de edición de imágenes.
También tenemos la posibilidad de sacar películas Quicktime. Este tipo de
video respetar algunas acciones de los botones y los Clip de Películas.
Para otro tipo de formato de exportación como AVI u otros, debes ir a Menú
Archivo > Exportar > Exportar Película. Al elegir otros formatos, Flash te dará la
posibilidad de configurarlos.
Atención con engañarse con el botón “Aceptar”. Ese botón indica que
aceptaste las configuraciones de los formatos escogidos, pero no has publicado
nada aún. Para publicar y poder subirlo a Internet debes hacer clic en el botón
“Publicar”.
Cristián Parrao – [email protected] 96
En los formatos de exportación, se nos han quedado 2 en el tintero: Proyecto
Windows (.exe) y Proyector Macintosh.
Los dos tienen el mismo objetivo: poder generar un archivo que no vaya a la
web y que pueda ser leído por computadores PC (con Windows) y Macintosh, sin
tener que bajar ni instalar ningún tipo de programa. ¿Y a qué se debe esto?
Porque con este formato, el programa de lectura ya viene incluido.
Esto es especial para películas que deben ser distribuidas en un CD. No sirven
para web.
Hay algunas acciones que nos permiten hacer pequeños trucos con los
Ejecutables: los FS Commands.
fscommand(“fullscreen”, true) : Independiente del tamaño de la película, la
transforma a pantalla completa y tapa ventanas abiertas de otros programas.
Puede deshabilitarse con la tecla ESC. El "false", retorna a la película a su
dimensión original.
fscommand(“allowscale”, true) : El "true" permite escalar los elementos de la
Cristián Parrao – [email protected] 97
película en el espacio disponible. El "false", mantiene el tamaño de los elementos
de la película, aunque éste se agrande gracias a fullscreen.
fscommand(“showmenu”, false) : El "false", oculta el menú "Archivo , Ver,
Control y Ayuda", y sólo deja 2 opciones en el menú contextual que aparece
cuando apretamos el botón derecho del mouse, sobre la película. Por defecto es
"true".
fscommand("quit") : Ideal para botones "cerrar", que justamente cierran la
aplicación.
fscommand("exec", "archivo.exe") : Abre aplicaciones .exe, que han sido
guardadas en una subcarpeta llamada "fscommand".