FLASH-CS2_nivel-basico-medio

FLASH.CS2
NIVEL BASICO / MEDIO
Marzo 2008
Andrés Macera Espinosa
Arquitecto 2001 UTFSM
01. INTRODUCCION
01.01./
01.02./
01.03./
01.04./
01.05./
01.06./
01.07./
DESCRIPCION
FORMATO ARCHIVOS
INTERFAZ
SIMBOLOS
INTERPOLACIONES
COMANDOS BREVES
SITIOS WEB DE INTERES
02. SIMBOLOS I
02.01./ LOS SIMBOLOS EN FLASH
02.02 / SIMBOLOS: GRAFICOS
02.03 / SIMBOLOS: CLIPS DE PELICULAS
02.04 / MASCARAS ESTATICAS Y MASCARAS ANIMADAS
02.05./ IMPORTE DE IMÁGENES JPEG A FLASH
02.06 / SLIDESHOW BASICO: MEZCLANDO SIMBOLOS GRAFICOS Y CLIPS DE PELICULA
03. SIMBOLOS II
03.01./ BOTONES
04. ACTIONSCRIPT
04.01 / ACCIONES
04.02 / ACTIONSCRIPT
05. INSTANCIAS
05.01 / INSTANCIAS DE UN SIMBOLO
05.02 / INTERCAMBIAR Y DUPLICAR SIMBOLOS
05.03 / NOMBRES DE INSTANCIA
05.04 / RUTAS
06. ARCHIVOS INTEGRADOS
06.01 / CARGA DE ARCHIVOS EXTERNOS DE TIPO .SWF
01. INTRODUCCION
01.01./ DESCRIPCION.
Flash es una herramienta de gran utilidad en la producción de animaciones multimedia de gran impacto visual.
Para ello, el programa permite la integración de diversos formatos, tales como fotografía, video, audio, texto y
dibujo vectorizado, contenidos los cuales quedarán sujetos a una línea de tiempo y, si se quiere, también a las
acciones que realice el usuario. Bajo esa idea, es que Flash está orientado a la producción de sitios web, cd
rom, presentaciones digitales, animaciones, gif animados, juegos, etc.
01.02./ FORMATO ARCHIVOS.
Un archivo producido en Flash tiene, por defecto, 2 formatos:
El archivo editable, aquél en donde se trabaja, tiene extensión .fla
La película, aquél archivo en que se reproduce lo hecho en el archivo editable, tiene extensión .swf
Un archivo flash puede exportarse además como archivo ejecutable (formato para CD ROMs), archivo
HTML, GIF animado, un JPEG, etc.
01.03./ INTERFAZ.
Flash opera en base a 2 ventanas de diseño interrelacionadas la una con la otra: una hoja de trabajo y una
línea de tiempo. Todo lo que se haga sobre la hoja de trabajo quedará registrado en la línea de tiempo y
viceversa.
01.03.01./ Hoja de Trabajo:
Es el espacio en pantalla sobre el cual se diseña, se dibuja, se disponen fotografías, videos, botones, etc. Su
tamaño, determinable en pixeles, corresponde al tamaño que tendrá el archivo que se publique finalmente
( archivo .swf, .exe, .gif, etc.). Además de su tamaño, pueden cambiarse su color de fondo y la velocidad con
que correrá la animación definitiva (fotogramas por segundo)
01.03.02./ Línea de Tiempo:
Es la barra que se encuentra sobre la Hoja de Trabajo. Esta barra se subdivide en 3 cuadros más: uno que
muestra la lista de capas del archivo (layers), con todas las acciones aplicables a ellas; otro que muestra la
linea de tiempo, con un cabezal que avanza en la medida que se ve la animación, y el cuadro principal que
muestra todos los fotogramas de la línea de tiempo del archivo, con la indicación de contenidos, acciones,
etiquetas, etc.
01.03.02.01./ Fotogramas:
Un fotograma ( frame ) es la unidad básica de la línea de tiempo de una película, de una animación.
La línea de tiempo se subdivide en un número indeterminado de fotogramas, y dentro de las
propiedades generales del archivo puede establecerse la cantidad de fotogramas por segundo ( fps )
con que avanzará la película final; a mayor fps, más “fluida” resultan los movimientos dentro de la
película.
Cuando se pone algún contenido específico en un fotograma determinado, éste se convierte en un
fotograma clave ( keyframe ). Los fotogramas que le sigan a ese fotograma clave, tendrán, por
defecto, el mismo contenido que tenga el fotograma clave anterior, a menos que se inserte un nuevo
fotograma clave y se cambie en él el contenido, o a menos que se deje un fotograma en blanco (
blank keyframe ).
01.03.02.02./ Capas::
Todo aquello que se ponga sobre la Hoja de Trabajo, queda almacenado en una capa. Las capas
son de gran utilidad para organizar todos los contenidos del archivo, para separar objetos, para
generar interpolaciones, etc. En la lista de las capas, el orden descendente se traduce en un orden
en profundidad en la Hoja de Trabajo; esto quiere decir que mientras más abajo se encuentre una
capa en la lista de capas, más “al fondo” se encontrarán los objetos contenidos en ella en la Hoja de
Trabajo, pasando por debajo del resto de los objetos de las capas superiores. Las capas pueden
apagarse, bloquearse o dejarse como contorno, utilizando los botones disponibles en el mismo
recuadro donde se enlistan ellas. Una capa puede convertirse en una guía de movimiento o en una
máscara de otra capa, según el carácter que se le dé.
01.03.03./ Paneles:
Como la mayoría de los programas, Flash además cuenta con menús colgantes y paneles de herramientas.
Entre los paneles más útiles se encuentran los siguientes:
01.03.03.01./ Panel de Herramientas [ Window/ Tools, o Ctrl+F2 ]::
En esta barra se encuentran varias herramientas de gran utilidad:
- Herramienta de Selección [ V ]:: sirve para seleccionar un objeto [ con uno, dos clicks, o ventana
de selección], para entrar o salir de un símbolo [doble clic en o fuera del símbolo]
- Línea [ N ]:: sirve para dibujar líneas rectas, con las características indicadas en el panel de
propiedades. Una vez dibujada si uno acerca el cursor a un extremo de la línea, al aparecer un
ángulo recto junto a la flecha, se puede arrastrar un punto de la recta a otro lugar. Si se acerca el
cursor a un punto intermedio de la recta, al aparecer un arco, se puede deformar la recta en una
curva.
- Texto [ T ]:: sirve para insertar texto en la Hoja de Trabajo, según las características indicadas en la
barra de propiedades o en el panel de Texto [ Window > Panels > Text Options ]
- Ovalos [ O ] y Rectángulos [ R ]:: son herramientas de dibujo de óvalos y rectángulos. Las figuras
tienen dos características: Contorno y Relleno, según lo indicado en el panel de propiedades.
- Tintero [ S ]:: sirve para añadir contorno a un dibujo que no lo tenga.
- Tarro de Pintura [ K ]:: sirve para añadir o cambiar el relleno de un dibujo.
- Paneo [ H o Barra espaciadora ]:: Para mover el archivo arrastrando el Mouse.
- Zoom [ Z ]:: Para acercarse o alejarse [con Alt] del archivo, con clicks o ventanas de arrastre.
- Imán:: teniendo activa esta opción, los objetos pueden manejarse con precisión desde sus vértices
o desde su centro.
01.03.03.02./ Panel de Propiedades [ Window/Properties, o Ctrl+F3 ]::
Es el panel más importante de todos, en él se pueden ver y modificar las propiedades de cualquier
objeto sobre la Hoja de Trabajo. Se pueden modificar las propiedades del archivo ( color de fondo,
fps ), las propiedades de un texto (tipo de letra, tamaño de letra, negrillas, cursivas, espacio entre
líneas, tipo de texto, etc.), las propiedades de un dibujo (color de relleno, color de contorno, grosor de
líneas, tipo de líneas), las propiedades de un símbolo (opacidad, tinta, etc.), las propiedades de una
interpolación (de movimiento, de forma, aceleración, desaceleración, etc), seleccionar pistas de
audio, cambiar el comportamiento de un símbolo, etc.
01.03.03.03./ Biblioteca [ Window/ Library, o Ctrl+L ]::
En este panel se puede ver todo lo que ha sido importado al archivo (imágenes JPEG, archivos de
audio MP3, de video, etc) además de todos los símbolos que se hayan creado. Desde aquí pueden
borrarse los mismos objetos, con el cuidado de saber que ello no es una acción reversible.
01.03.03.04./ Panel de Color [ Window/ Panels/ Mixer, o Shift+F9 ] ::
En él se pueden modificar las opciones avanzadas de color de un dibujo: colores de relleno y
contorno, degradaciones de color lineales, radiales, transparencias, etc.
01.03.03.05./ Panel de Acciones [ Window/ Actions, o F9 ] ::
En esta ventana es en donde se escriben los comandos para ejecutar alguna orden específica en la
animación: una acción. Más adelante veremos las acciones más frecuentes en Flash.
01.04./ SIMBOLOS.
En Flash las animaciones pueden hacerse en base a interpolaciones. Para hacer una interpolación, se
necesita forzosamente de un símbolo. Existen 3 tipos de símbolos:
-
Clips de Película ( movieclips ): cuando un objeto es convertido en un Clip de Película, lo que se
está haciendo es convertir ese objeto en una nueva línea de tiempo autónoma. Ello significa que
dentro de ese objeto, pueden situarse nuevas animaciones, objetos, acciones, símbolos, etc. A partir
de ello, se entiende que dentro de un Clip de Película, pueden situarse múltiples Clips de Película, y
dentro de ellos, más Clips de Película y así sucesivamente.
-
Botones ( buttons ): un objeto puede convertirse en botón. Al hacerlo, el objeto queda susceptible
de tener una acción asociada (por ejemplo, un botón que abra una foto, un botón que apague el
audio, que active un Clip de Película, etc). Un botón también es una línea de tiempo dentro de un
objeto, pero a diferencia del Clip de Película, no es una línea de tiempo autónoma, sino que es una
línea de tiempo especial, con 4 fotogramas: up, over, down, hit.
-
Gráfico ( graphic ): un objeto puede convertirse en un símbolo gráfico, lo cual es similar a
“agruparlo” en una sola entidad, con una línea de tiempo dentro, que no será autónoma y estará
siempre detenida en el primer fotograma (a menos que se ordene lo contrario)
Para convertir uno o varios objetos (dibujos, fotos, videos, etc) en un símbolo, basta con seleccionar aquello
que quiera convertirse, presionar F8 (o Modificar/ Convertir en Símbolo) y escoger el tipo de símbolo que se
desee crear.
Para editar un símbolo, basta con hacer doble click sobre él. Para salir de dicho símbolo, basta con hacer
doble click fuera de los contenidos que tenga dicho símbolo.
01.05./ INTERPOLACIONES.
Las interpolaciones sirven para realizar transformaciones continuas entre distintos estados de un símbolo o
un dibujo. Si se quiere realizar una transformación continua entre uno y otro estado de un símbolo, esta
interpolación debe ser siempre una Interpolación de Movimiento. Si se desea interpolar una animación de
un dibujo, ella debe ser una Interpolación de Forma. Toda interpolación debe establecerse sólo entre
distintos estados de un mismo símbolo o un mismo dibujo, dentro de una misma capa. Para realizar
una interpolación es necesario, primero, fijar dos estados de un símbolo o dibujo, en dos fotogramas clave
distintos dentro de una capa. Luego, colocarse con el cursor en cualquier cuadro intermedio de esos dos
fotogramas clave y, en el panel de Propiedades ( Ctrl+F3 ), en la etiqueta “Tween” o “Animación”, seleccionar
la interpolación correspondiente.
01.06./ COMANDOS BREVES.
Algunos comandos breves para acelerar el trabajo por medio del uso de teclado.
Manejo de Archivos
Abrir un archivo nuevo
Salvar un archivo
Publicar un archivo
Ctrl + N
Ctrl + S
Ctrl + Enter
Herramientas
Selección
Línea
Texto
Ovalos
Rectángulos
Tintero
Pintura
Paneo
Zoom In
Zoom Out
V
N
T
O
R
S
K
H ó Barra espaciadora presionada
Z
Z + Alt
Paneles de Herramientas
Panel de Herramientas
Panel de Propiedades
Biblioteca
Panel de Color
Panel de Acciones
Ctrl + F2
Ctrl + F3
Ctrl + L
Shift + F9
F9
Símbolos
Convertir en símbolo
Editar un símbolo
Salir de un símbolo
F8
Doble click en el símbolo
Doble click fuera del símbolo
Línea de Tiempo
Insertar un fotograma
Insertar un fotograma clave
Insertar un fotograma blanco
F5
F6
F7
01.07./ ALGUNOS SITIOS DE INTERÉS POR LA CALIDAD DE SUS INTERFACES::
Leo Burnett
www.leoburnett.ca
Exopolis
www.exopolis.com
Finish
www.finish.tv
FirstBorn
www.firstbornmultimedia.com
ITL
www.intentionallies.co.jp
Mutualresponse
www.mutualresponse.com/res/6th/
Sonja Mueller Photographer
www.sonjamueller.org
Tokyo Plastic
www.tokyoplastic.com
YUGOP
www.yugop.com
Andy Foulds
http://www.andyfoulds.co.uk/flash_design.html
02. SIMBOLOS I
02.01./ LOS SIMBOLOS EN FLASH
Un dibujo, un texto, una fotografía, un conjunto mixto de dibujos, textos y fotografías, o todo lo que se quiera,
que sea visible en la hoja de trabajo, puede convertirse en un símbolo. Convertir algo en un símbolo, significa,
primero, agruparlo dentro de un “bloque” cuyas características serán distintas a aquellas que tenía el objeto
antes de ser convertido, y segundo, significa otorgarle una línea de tiempo nueva e interna a ese objeto.
Todo símbolo tiene una línea de tiempo independiente, sin embargo, su comportamiento (y su utilidad, por
ende) dentro de la película que estemos fabricando, será completamente distinto si éste es un Símbolo
Gráfico, un Clip de Película o un Botón.
Dado que cada símbolo tiene dentro de sí una línea de tiempo nueva, se entiende entonces que dentro de
cada símbolo, se pueden crear más y más símbolos; dentro de un Clip de Película, por ejemplo, puede
haber un botón, dentro del cual, a su vez, pueden haber símbolos gráficos y clips de película que en su interior
contengan botones y símbolos gráficos, dentro de los cuales, finalmente, hayan fotografías y música, o texto,
o más símbolos y así sucesivamente.
Los 3 tipos de símbolos, gráficos, clips de película y botones, son la base de todo trabajo en Flash, y la
complejidad de éste estará dictada, entre otras cosas, por la manera en que uno como diseñador los combine
unos con otros.
02.02.01./ Cómo Crear un Símbolo
Para crear un símbolo es necesario tener dos cosas claras: qué es lo que vamos a convertir en símbolo, y qué
tipo de símbolo va a ser. Lo primero es simple: aquello que vamos a convertir en símbolo puede ser un dibujo,
una fotografía, un texto o cualquier cosa que se encuentre en la Hoja de Trabajo. Lo segundo está
determinado por el comportamiento que queramos darle a ese símbolo; si queremos que sea una película que
este reproduciéndose de manera autónoma, será un Clip de Película, si queremos que sea un objeto animable,
será un Símbolo Gráfico, si queremos en cambio, que sea un símbolo que sirva para desencadenar una acción
en la película, éste será un Botón.
Para crear un símbolo basta con seleccionar lo que quiere convertirse y presionar F8 (o Modify/ Convert to
Symbol). En la ventana que aparece, debe dársele un nombre al símbolo, seleccionar su tipo y, si se quiere,
fijar su centro en algún punto distinto al que trae por defecto.
.
02.02.02./ Cómo Editar un Símbolo
Cuando se habla de “editar el símbolo”, uno podría referirse a 2 cosas distintas:
-a editar el símbolo como bloque
-a editar el contenido dentro del símbolo
Las propiedades que pueden editarse en un símbolo como bloque, aparecen, al seleccionarlo, en la barra de
Propiedades, etiqueta “Color”. Estas características son básicas: Tinte, Alpha, Brillo. Un símbolo se puede
también escalar, rotar, deformar, estirar, etc., como si fuera un objeto cualquiera.
Si queremos, en cambio, modificar el contenido del símbolo, el procedimiento es levemente distinto:
haciendo doble click sobre él, se puede “entrar” al símbolo, “entrar” a su línea de tiempo, donde podrá verse el
o los objetos que fueron seleccionados y convertidos en dicho símbolo. Por ejemplo, si dibujamos un círculo y
lo convertimos en símbolo, y luego queremos cambiar el color del contorno del círculo, no lo podremos hacer
directamente sobre el símbolo; para ello, tendremos que “entrar” a él, donde estará el círculo en cuestión como
era originalmente: sólo un dibujo, y recién ahí podremos editarlo como tal.
02.02.03/ La Importancia de la Ruta
Como cada símbolo tiene una línea de tiempo independiente y todas ellas se ven de la misma manera, es muy
común, mientras uno aprende a usar Flash, confundirse y trabajar sobre una línea de tiempo errónea. Para
evitar ello, es importantísimo estar siempre atento a la línea de tiempo sobre la cual se está trabajando, siendo
de mucha utilidad para este fin, la “ruta” ubicada sobre la ventana de la línea de tiempo; la cual indica en qué
línea de tiempo (en qué símbolo) estamos trabajando.
02.02./ SIMBOLOS GRAFICOS (ver archivo flash_02a.swf) El símbolo gráfico es el más básico de los 3
símbolos en Flash. Sirve básicamente para agrupar varios objetos dentro de uno y poder animarlos como un
todo (animaciones de movimiento, cambio de tamaño, cambio de tinte, de alpha, de brillo). Los símbolos
Gráficos tienen una línea de tiempo idéntica a la Línea de Tiempo Raíz (aquella línea principal donde se
trabaja al principio) pero dicha línea no es autónoma; no se reproducirá automáticamente en la película final,
sino que quedará por defecto detenida en el primer cuadro, a menos que se le indique lo contrario.
Cuando usar Símbolos Gráficos:
-
cuando se quiera agrupar diversos elementos dentro de uno y animarlos como un todo
-
cuando quiera hacer animaciones de color, movimiento, tinte, alpha, brillo.
-
cuando vaya a diseñar un objeto que se repetirá varias veces en un archivo, puesto que para
editarlos todos, bastaría con editar sólo uno de ellos.
02.03./ SIMBOLOS CLIPS DE PELICULA
El Clip de Película es bastante similar al Símbolo Gráfico pero mucho más útil. Un Clip de Película tiene una
línea de tiempo idéntica a la Línea de Tiempo Raíz y la línea de tiempo de un Símbolo Gráfico, salvo que esta
línea es autónoma; se reproducirá independiente de lo que ocurra fuera del símbolo. El Clip de Película sirve
para tener varias animaciones o animaciones dentro de otra animación, de modo tal que, sin importar lo que
ocurra con una, la otra siga reproduciéndose independientemente. Dado que el Clip de Película es una línea
de tiempo independiente, dentro de la cual podemos tener animaciones independientes, se entiende entonces
que dentro de él es muy probable que necesitemos tener Símbolos Gráficos para poder llevar dichas
animaciones a cabo.
Cuando usar Clips de Película:
-cuando se quiera tener una línea de tiempo independiente dentro de la película
-cuando se quiera hacer animaciones independientes dentro de una película
02.04./ MASCARAS ESTATICAS Y MASCARAS ANIMADAS
En Flash, las máscaras son aquellos objetos a través de los cuales podemos ver otros objetos. Las
máscaras son, por lo tanto, objetos similares a agujeros a través de los cuales podemos ver algo más; son, por
lo tanto, de por sí invisibles en la película final. Una máscara puede servir para ver cualquier cosa a través de
sí: un dibujo, texto, un clip de película, un botón o un símbolo gráfico. A su vez, la misma máscara puede ser
un dibujo, un clip de película o un símbolo gráfico. Una máscara pueden estar quieta o puede estar animada
(moviéndose, escalándose, rotando), y puede estar enmascarando un objeto, a su vez, quieto o animado.
Para asignar la cualidad de máscara a un objeto, basta con hacer click al botón derecho del Mouse sobre la
capa que desea convertirse en máscara y seleccionar “máscara” (Mask). Esta máscara tomará por objeto
enmascarado a la capa que se encuentre justo debajo de ella.
02.05./ IMPORTE DE IMÁGENES JPEG A FLASH
Flash permite importar imágenes JPEG, GIF, PNG y BMP. Las consideraciones que deben tenerse al
respecto son pocas pero de gran importancia, puesto que tienen que ver directamente con el peso resultante
del archivo, y por ende, con la velocidad con que cargue el mismo en Internet.
En general, cada vez que se importe una imagen a Flash, deberá previamente editarse en Photoshop
considerando lo siguiente:
-
Toda imagen debe tener una resolución máxima de 72dpi; una resolución mayor no implica una
mejor resolución en pantalla pero sí un mayor peso del archivo.
-
Toda imagen debe tener las dimensiones reales que va a tener en el archivo Flash. Importar una
imagen a Flash más grande de lo que se va a utilizar implica tener un archivo más pesado de lo que
realmente puede ser. Importar, por otro lado, una imagen más chica de lo que se va a utilizar,
implicaría tener que escalarla, disminuyendo su resolución en pantalla.
Para importar una imagen a Flash, basta con ir al menú File/ Import. En dicho menú, aparecen 2 opciones:
“Import to Stage” e “Import to Library”. La primera opción importa una imagen directo a la Hoja de Trabajo,
almacenándola automáticamente en la Biblioteca (Library) del archivo. La segunda opción la importa de
manera directa a la Biblioteca del archivo.
03. SIMBOLOS II
03.01./ BOTONES
De todos los símbolos con que se trabaja en Flash, ya hemos visto los Gráficos y los Clips de Película. Ahora
veremos el último: los Botones.
Un Botón es un símbolo que a partir de un evento en particular por parte del usuario (por ejemplo, presionar
ese botón, pasar por sobre él, etc.) desencadena una acción específica dentro del archivo (por ejemplo,
detener un Clip de Película, reproducir un clip de película, cargar un archivo dentro de otro, descargar un
archivo, cagar música, detener música, etc.) Por ello es que un botón es un símbolo esencial para cualquier
diseño interactivo que quiera hacerse en Flash. Como todo símbolo, un botón tiene una línea de tiempo
independiente. A diferencia de los gráficos y los clips de película, la línea de tiempo de un botón tiene 4
fotogramas, y cada uno de ellos con nombre.
03.01.01 / Funcionamiento Gráfico de un Botón.
Al crear un botón y entrar a él, podremos ver que su línea de tiempo tiene 4 fotogramas, denominados de la
siguiente manera: UP / OVER / DOWN / HIT. Cada uno de esos fotogramas representa una de las cuatro
características gráficas del botón, por lo tanto, el contenido que coloquemos en cada uno de ellos tendrá un
rol distinto dentro del aspecto y funcionamiento del mismo:
UP/
todo lo que coloquemos en este fotograma será visible en el botón cuando esté en reposo, o bien,
cuando no se pase por sobre él con el cursor o cuando se salga de él.
OVER/ todo lo que coloquemos en este fotograma, será visible cuando pasemos con el cursor por sobre
el botón.
DOWN/ todo lo que coloquemos en este fotograma, será visible mientras presionamos el botón del Mouse
sobre el botón. Considere siempre que el tiempo que alcanza a ser visible este fotograma es muy
corto, por lo que generalmente no vale la pena dedicarle mucha energía.
HIT/
este es el único fotograma cuyo contenido siempre será invisible. Sirve sólo para determinar el
área sensible del botón, es decir, el área en la cual el cursor cambia de flecha a mano.
Dado que estos 4 fotogramas, fuera de tener nombre, son como cualquier fotograma tipo, en ellos podemos
construir Clips de Películas, Símbolos Gráficos, Textos, Dibujos, Imágenes JPEG, etc. Asimismo, dentro de un
botón también podemos crear múltiples capas, para organizar mejor los contenidos dentro de él.
04. ACTIONSCRIPT
04.01./ ACCIONES
Una acción es un código, una orden, que se almacena en algún contenedor y, dependiendo de algún
evento, se ejecuta. Esas son las tres partes claves de una acción: CONTENEDOR / EVENTO / ACCION
CONTENEDOR /
una acción puede estar contenida en un fotograma clave o en un botón. La
diferencia radica básicamente en que si la colocamos en un fotograma clave, se
ejecutará una vez que el cabezal que va leyendo la línea de tiempo pase por ahí, es
decir, nosotros podremos definir el momento exacto en que una acción se ejecute,
a nuestra completa voluntad; mientras que si está contenida en un botón, se
ejecutará solamente una vez que el usuario haga click sobre ese botón, es decir,
fuera de nuestra voluntad.
EVENTO /
de ello se desprende entonces que para que una acción se ejecute, algo tiene que
suceder primero. Si tenemos una acción en un fotograma clave, ese evento, ese
“algo”, será el paso del cabezal por ese fotograma clave. Si, en cambio, tenemos
una acción en un botón, ese evento será cuando el usuario presione ese botón ( o
cuando pase sobre él, cuando se acerque, etc., dependiendo de lo que hayamos
definido nosotros en principio.)
ACCION /
la acción es finalmente lo que sucede cuando el evento ocurre. Una acción puede
ser, por ejemplo, enviar al cabezal a un fotograma en particular y decirle que se
detenga ahí, o enviarlo y decirle que desde ahí empiece a reproducir la línea de
tiempo, o cargar una canción en el sitio, o cargar una foto, o sacar una foto de
pantalla, o mandar un mail, etc. La cantidad de acciones que pueden programarse
en Flash es prácticamente ilimitada.
04.02./ ACTIONSCRIPT
Para describir una acción, Flash utiliza un lenguaje específico llamado ActionScript (AS). Como todo
lenguaje, tiene un sistema completo de normas a cumplir, además de ciertas reglas gramaticales que deben
cumplirse para que la acción sea ejecutable. Todas las acciones se escriben en el Panel de Acciones (F9).
En este panel hay dos ventanas, una con el índice completo de los códigos disponibles en AS, y otra donde
podemos ir escribiéndolos nosotros mismos.
04.02.01 / Acciones Frecuentes:
Algunas acciones frecuentes cuyo contenedor es un FOTOGRAMA CLAVE:
Acción
Script
- Detener una línea de tiempo
stop();
- Reproducir una línea de tiempo
play();
- Ir al fotograma siguiente
nextFrame(n);
- Ir al fotograma anterior
prevFrame(n);
- Ir a un fotograma n y reproducir
gotoAndPlay(n);
- Ir a un fotograma n y detenerse
gotoAndStop(n);
- Cargar un archivo x en un nivel y
loadMovie(“x.swf”,y);
- Descargar un archivo cargado en un nivel y
unloadMovie(y);
- Abrir en una ventana nueva un sitio x.com
getURL(“http://www.x.com”, blank);
- Enviar un email a nn por medio de Outlook
getURL(“mailto:[email protected]”);
- Ir a un fotograma n de la línea raíz y detenerse
_root.gotoAndStop(n);
- Ir a un fotograma n de la película X, ubicada dentro la película Y,
ubicada en la línea raíz, y reproducir
_root.Y.X.gotoAndPlay(n);
- Ir a un fotograma denominado “n” de la película X,
ubicada dentro la película Y, ubicada en la línea raíz del archivo
cargado en el nivel Z, y reproducir
_levelZ.Y.X.gotoAndPlay(“n”);
Para que estas acciones puedan ser aplicables a un botón, es necesario utilizar el operador “on” el cual
además es necesario completar indicando el evento específico que queremos que desencadene la acción:
on(release){
gotoAndStop(n);
}
esta línea indica el evento (“release”) y la llave de inicio
esta línea indica la acción
llave de cierre
En la línea donde se indica el evento, en vez de “release” (presionar y soltar el botón) podríamos poner, por
ejemplo, rollOver (pasar por sobre el botón) o rollOut (pasar por sobre el botón y salirse de él), entre otras
opciones.
Hay que tener muy en claro que el estado “OVER” del botón no tiene nada que ver con lo que ejecute el
mismo botón en un evento “rollOver”, de la misma manera, el estado “DOWN” del mismo tampoco tiene nada
que ver con lo que el botón pueda hacer en un evento “release”. OVER y DOWN son simplemente
cualidades gráficas internas del botón, que se activan si uno se posa sobre él (en el caso de OVER) y si
uno lo presiona (en el caso de DOWN), mientras que rollOver y release son eventos que ejecutarán una
acción fuera del mismo botón, sobre algún otro objeto del archivo.
05. INSTANCIAS
05.01./ INSTANCIAS DE UN SIMBOLO
Cada vez que uno copia y pega un símbolo dentro de un mismo archivo, lo que ha hecho es crear una
instancia de dicho símbolo. Esto significa que, independiente del número de copias que tenga, y de dónde se
encuentren ellas dentro del archivo, cada vez que modifique una de esas “instancias”, se modificarán de
la misma manera todas las otras. El uso de instancias es bastante útil en la producción seriada de un
símbolo, supongamos, en el caso de un botón repetido múltiples veces dentro de un archivo, cuyo aspecto
gráfico queremos modificar. A su vez, modificar una instancia de un símbolo puede generar alteraciones
indeseadas en otros símbolos que olvidamos eran copias de aquél.
05.02./ INTERCAMBIAR Y DUPLICAR SIMBOLOS
Para evitar que las modificaciones hechas a un símbolo, repercutan en otras instancias, es necesario duplicar
dicho símbolo. Dicha aplicación se encuentra en el menú del botón derecho del Mouse, sobre el símbolo que
se desee duplicar. Duplicar, aquí no significa copiar y pegar un símbolo, sino cambiarle el nombre, y de esta
manera, diferenciarlo de sus instancias, y así poder manipularlo sin afectar a otros símbolos.
Por otro lado, es posible también querer que un símbolo dado sea la instancia de otro símbolo. Para ello es
necesario usar la ventana de Intercambio de Símbolos (Swap Symbols), obtenible también desde el menú de
botón derecho sobre el símbolo que desea modificarse.
Dado que se puede tener un símbolo dentro de otro símbolo dentro de otro símbolo y así sucesivamente, al
duplicar, es importantísimo entender desde qué nivel debe duplicarse cada símbolo a fin de editar uno solo en
particular. Por ejemplo:
tenemos un símbolo A y una instancia del mismo. Dentro del símbolo A [ un rectángulo rojo ], está el
símbolo B [ un círculo negro ], en cuyo interior está el símbolo C [ un triángulo blanco ],.
Si deseamos cambiarle el color a A, sin alterar su instancia.
Se debe duplicar el símbolo A
Si deseamos cambiarle el color a B, sin alterar su instancia.
Se debe duplicar el símbolo A, y luego el símbolo B
Si deseamos cambiarle el color a C, sin alterar su instancia.
Se debe duplicar el símbolo A, luego el símbolo B, y luego el símbolo C
05.03./ NOMBRES DE INSTANCIA
Todo
símbolo, además de su nombre, puede tener un nombre de instancia (aplicable en la barra de
propiedades, previamente seleccionado el símbolo). Este nombre de instancia permite que una acción
identifique, en cualquier lugar del archivo, a dicho símbolo y se ejecute en él. Es necesario recordar que todo
símbolo es una línea de tiempo independiente, por lo que todo nombre de instancia es, en definitiva, el
nombre de una línea de tiempo ubicada en algún punto del archivo que, desde el momento en que se le
otorgó un nombre de instancia, se hizo identificable, ubicable.
05.04./ RUTAS
Para ubicar una línea de tiempo (una instancia) dentro de un archivo y ejecutar una acción sobre ella, debe
especificarse una ruta. Dicha ruta puede ser absoluta o relativa.
Supongamos el siguiente caso:
Una película cuyo nombre de instancia es X, ubicada en la línea raíz, tiene en su interior una película cuyo
nombre de instancia es Y, dentro de la cual, a su vez, existe una película cuyo nombre de instancia es Z.
Supongamos ahora los siguientes casos:
1/
queremos ejecutar, desde la línea raíz, una acción del tipo “gotoAndStop” sobre un fotograma n
dentro de X. La acción contendrá una de las siguientes rutas:
Ruta absoluta: _root.x.gotoAndStop(n);
Ruta relativa:
_root.x.gotoAndStop(n);
2/
queremos ejecutar, desde la línea raíz, una acción del tipo “gotoAndStop” sobre un fotograma n
dentro de Y. La acción contendrá una de las siguientes rutas:
Ruta absoluta: _root.X.Y.gotoAndStop(n);
Ruta relativa:
_root.X.Y.gotoAndStop(n);
3/
queremos ejecutar, desde la línea raíz, una acción del tipo “gotoAndStop” sobre un fotograma n
dentro de Z. La acción contendrá una de las siguientes rutas:
Ruta absoluta: _root.X.Y.Z.gotoAndStop(n);
Ruta relativa:
_root.X.Y.Z.gotoAndStop(n);
4/
queremos ejecutar, desde la película X, una acción del tipo “gotoAndStop” sobre un fotograma n
dentro de Y. La acción contendrá una de las siguientes rutas:
Ruta absoluta
Ruta relativa:
5/
_root.X.Y.gotoAndStop(n);
this.Y.gotoAndStop(n);
queremos ejecutar, desde la película Y, una acción del tipo “gotoAndStop” sobre un fotograma n
dentro de X. La acción contendrá una de las siguientes rutas:
Ruta absoluta
Ruta relativa:
_root.X.gotoAndStop(n);
this._parent.gotoAndStop(n);
La construcción de cada ruta puede ser asistida por el mismo panel de acciones en donde se está
especificando la acción.
06. ARCHIVOS INTEGRADOS
06.01./ CARGA DE ARCHIVOS EXTERNOS DE TIPO .SWF
Flash puede cargar o descargar archivos remotos de tipo .swf dentro de otro archivo “madre” del mismo
formato. Esto es bastante útil en cuanto permite tener un proyecto Flash de bastante peso distribuido en
varios “sub-archivos”, que son cargados dentro del primero. Para poder organizar la carga de archivos, Flash
trabaja en base a niveles; el archivo “madre” [ aquél en donde se carga el resto de los archivos ] corresponde,
por defecto, al nivel 0. Los demás archivos que se carguen dentro del archivo “madre”, lo harán en niveles
distintos de 0 y siempre positivos.
El valor del nivel utilizado se traducirá en el nivel de profundidad o superficialidad en donde se cargue el
archivo, es decir, un archivo cargado en el nivel 5 quedará siempre “sobre” uno cargado en el nivel 4.
Flash puede cargar sólo un archivo por nivel, y el número de niveles es prácticamente ilimitado. Al cargar un
archivo dentro de otro, se cargará todo el contenido de ese archivo, excepto su fondo.
Para cargar o descargar archivos dentro de otro, refiérase al listado de acciones del capítulo 04.02.01