Flash aulaclic.es

Introducción a Flash 8
¿Qué es FLASH?
Flash 8 es una potente herramienta creada por Macromedia que ha superado las mejores
expectativas de sus creadores.
Inicialmente Macromedia Flash fue creado con el objeto de realizar animaciones vistosas para la
web, así como para crear GIFs animados.
Los motivos que han convertido a Flash 8 en el programa elegido por la mayoría de los
diseñadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash
8.
Desde la web de Macromedia te puedes descargar una versión de evaluacion de Flash 8 válida
para 30 días.
Los logotipos de Flash son propiedad de Macromedia.
¿Por qué usar FLASH 8?
Las posibilidades de Flash son extraordinarias, cada nueva versión ha mejorado a la anterior, y el
actual Flash 8 no ha sido menos. Aunque su uso más frecuente es el de crear animaciones (a lo largo
de este curso veremos lo sencillo que puede resultar) sus usos son muchos más. Son tantos, que
todos los diseñadores web deberían saber utilizar Flash.
Flash ha conseguido hacer posible lo que más se echa en falta en Internet: Dinamismo, y con
dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones
interactivas que permiten al usuario ver la web como algo atractivo, no estático (en contraposición a la
mayoría de las páginas, que están realizadas empleando el lenguaje HTML). Con Flash podremos
crear de modo fácil y rápido animaciones de todo tipo.
Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y
horas creando lo que nos dicte nuestra imaginación, pero esto no es suficiente para ser el preferido
por los diseñadores profesionales... ¿Entonces qué es?
Analicemos ventajas y otras muchas con un poco más de detalle:
Diseños más atractivos: Flash 8 permite el uso de efectos visuales que nos facilitarán la
creación de animaciones, presentaciones y formularios más atractivos y profesionales, así mismo,
pone a nuestra disposición mecanismos para hacer este trabajo más cómodo y rápido, tales como la
existencia de filtros y modos de mezcla añadidos en esta versión.
Optimización de fuentes: Incorpora también opciones de legibilidad para fuentes pequeñas,
haciendo la lectura de nuestros textos más agradables y de alta legibilidad. Además de poder
modificar la optimización, Flash permite también la selección de configuraciones preestablecidas para
textos dinámicos y estáticos.
Bibliotecas integradas: Ahora podemos buscar rápidamente cualquier objeto existente en
nuestras películas, navegando por las bibliotecas de todos los archivos abiertos desde un único panel.
Mayor potencia de animación: Flash 8 permite un mayor control de las interpolaciones
habilitando un modo de edición desde el que se podrá modificar independientemente la velocidad en
la que se apliquen los diferentes cambios de rotación, forma, color, movimiento, etc, de nuestras
interpolaciones.
Mayor potencia gráfica: Evita la repetición innecesaria de la representación de objetos
vectoriales simplemente señalando un objeto como mapa de bits. Aunque el objeto se convierta al
formato de mapa de bits, los datos vectoriales se mantienen tal cual, con el fin de que, en todo
momento, el objeto pueda convertirse de nuevo al formato vectorial.
Mejoras en la importación de vídeo: Para facilitar el resultado con formatos de vídeo, Flash 8
incluye un códec independiente de calidad superior capaz de competir con los mejores códecs de
vídeo actuales con un tamaño de archivo mucho más pequeño. Además de una gran posibilidad de
revestimientos para los controles de éste en nuestra película.
Compatiblidad Metadatos: Incluye tus SWF en buscadores de internet con la nueva
característica de definición de archivo con un título, una descripción y/o palabras clave para que los
motores de búsqueda reflejen con más precisión el contenido representado por el archivo.
Emulador para dispositivos móviles: Prueba tus películas destinadas a dispositivos móviles
compatibles con Flash Lite con el nuevo emulador que incorpora Flash 8. Podrás probar tus películas
de un modo eficiente antes de publicarlas.
Asistente de ActionScript: El Asistente de ActionScript ha vuelto. Fue eliminado en la versión
anterior, pero se ha vuelto a recuperar, y de forma mejorada, en esta última. Ahora ActionScript al
alcance de tu mano.
Unidad 3.
El Entorno de Trabajo
Flash 8 cuenta con un entorno o interfaz de trabajo de lo más manejable e intuitiva. Además, tiene
la ventaja de que es similar a la de otros programas de Macromedia (Dreamweaver, Freehand,
Director...), todo esto hace más fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que
nos encontraremos al abrir Flash 8 por primera vez:
A lo largo de todo el curso trabajaremos con la versión de evaluación de Flash 8 en castellano.
Podeis descargar esta versión de forma gratuita desde AQUÍ
En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos el
programa Flash. Flash recordará nuestras preferencias y abrirá el programa tal y como lo dejamos la
última vez que lo utilizamos.
En esta imagen faltan algunos menús. Todos se irán viendo a lo largo de este curso aunque no
aparezcan en esta imagen, que sólo pretende mostrar las partes principales de la interfaz de Flash.
Veamos cuáles son:
La Barra de Menús
La Barra
de
Menús
tiene
como
propósito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro
programa de diseño web o gráfico, aunque tiene algunas particularidades. Veamos los
principales Submenús a los que se puede acceder:
Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la
utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo, imágenes
e incluso otras películas Flash), o la de Configuración de Publicación desde donde se pueden
modificar las características de la publicación. También permite configurar la impresión de las páginas,
imprimirlas...
Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como
fotogramas; también permite personalizar algunas de las opciones más comunes del programa.
Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las escenas.
También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede seleccionar desde
los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones.
Insertar: Te permite insertar objetos en la película, así como nuevos fotogramas, capas, acciones,
escenas...
Modificar: La opción Transformar permite modificar los gráficos existentes en la película, y la
opción Trazar Mapa de Bitsconvierte los gráficos en mapas vectoriales (este tema se tratará más
adelante). El resto de opciones permite modificar características de los elementos de la
animación Suavizar, Optimizar o de la propia película (Capa, Escena ...).
Texto: Sus contenidos afectan a la edición de texto. Más adelante se tratará en profundidad.
Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten
emular lo que un usuario pueda introducir en el entorno de edición) que hayamos almacenado en
nuestra animación, obtener otros nuevos de la página de Macromedia o ejecutar los que ya tengamos.
Control: Desde aquí se modifican las propiedades de reproducción de la película. Reproducir,
Rebobinar, Probar Película ....
Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas,
incluye accesos directos aTODOS los Paneles.
Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Macromedia, desde el
manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc...
La Línea de Tiempo
La Línea
de
Tiempo representa una forma de
ver los fotogramas de modo
simplificado. Consta de 2 partes.
1) Los Fotogramas
(frames) que vienen delimitados
por líneas verticales (formando
rectángulos)
2) Los Números
de
Fotograma que permiten saber qué
número tiene asignado cada
fotograma, cuánto dura o cuándo
aparecerá en la película.
Además, en la parte inferior hay
herramientas
para
trabajar
conPapel cebolla e información
sobre el Número de Fotograma
actual (1
en
la
imagen),
la Velocidad
de
los
Fotogramas (12.0 en la imagen) y
el Tiempo de película transcurrido
(0.0s en la imagen).
A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. Es
decir, la película Flash no será nada más que los fotogramas que aparecen en la Línea de
tiempo uno detrás de otro, en el orden que establece la misma Línea de tiempo.
Avanzado.
La Línea de Tiempo - Fotogramas
Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto, una
animación no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la Línea
de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos
qué tipos de fotogramas hay y cuáles son sus rasgos.
Fotograma Clave (KeyFrame) : Son fotogramas con un contenido
especifíco, se crean, por tanto, para insertar en ellos un nuevo
contenido no existente en la película. Se identifican por tener un
punto negro en el centro y cuando esté vacío se le diferencia por una
línea negra vertical.
Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo
habría 3 Keyframes. Uno para cada posición distinta de la pelota.
Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave,
no representan contenido nuevo y son de clor gris.
El último fotograma de una secuencia de fotogramas
normales viene representado por un cuadrado blanco sobre fondo
gris.
En el ejemplo, los fotogramas del 2 - 5 son fotogramas normales,
su contenido no es nuevo, esto es, es el mismo que el del fotograma
1. Como vemos, su misión es prolongar la duración de unfotograma
clave o keyframe.
Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar
dentro de la Línea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la película y
Flash no los tendrá en cuenta al publicar la película. En la imagen anterior, son fotogramas
contenedor todos los fotogramas a partir del 12 (incluido). 1 de cada 5 fotogramas contenedores
gris, el resto, blancos.
Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco.
En la imagen, los fotogramas del 6 al 11 (incluidos)
son fotogramas
vacíos.
No
debemos
confundirlos
con
los fotogramas contenedor, pues estos últimos vienen delimitados
por líneas verticales grises (no negras). Si se inserta algo en estos
fotogramas, pasan a ser Keyframes.
Es importante resaltar que Flash no ignora estos fotogramas y
simplemente mostrará una imagen en blanco. (no dará por terminada
la animación). De modo que si queremos que un objeto aparezca en
el fotograma 1 y después otra vez en el fotograma 10. Los
fotogramas del 2 al 9 deberán ser fotogramas vacíos ya que así el
objeto "desaparecerá" y volverá a aparecer.
Fot. Etiquetado.
Fot. con Acciones
Fotograma Etiquetado (Label Frame): Contiene en la parte
superior una "bandera" roja que indica que tienen un nombre
asociado. Dicho nombre se establece desde el Panel "Frame". Si la
duración del frame es la suficiente, se puede leer el nombre (o
etiqueta) que identifica al conjunto de fotogramas.
Fotograma con Acciones asociadas: Contienen en la parte
superior una "a" que indica que tienen una acción asociada. Estos
fotogramas son especialmente importantes, pues estas acciones, en
principio "ocultas" (para verlas hay que acceder al Panel Acciones)
pueden cambiar el comportamiento de la película. En la imagen, la
acción existente en el fotograma 1 afecta también al 2 y al 3 (por ser
fotogramas normales). El fotograma 4 no tiene acciones y sí las tiene
el 5.
Fotogramas Animados: Pueden ser de 2 tipos:
1) Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y
representa el movimiento (con o sin efectos) de un objeto, que pasa de la posición
del Keyframe inicial al final. Para representar
estos Keyframes.
esta animación aparece una flecha entre
Esta imagen representa el ejemplo de la pelota. Del frame 1 se
pasa al 6, (Flash representará el movimiento entre ambas posiciones
en la película final) y del 6 al 11. Otro movimiento.
Fot. de Anim de Mov.
2) Fotogramas de animación de Forma: Vienen caracterizados por el color verde y representan
un cambio en la forma de un objeto, que pasa de la forma que tenía en el Keyframe inicial a la del
final. Para representar esta animación aparece una flecha entre estos Keyframes.
Este ejemplo, similar al de arriba representa el cambio de forma de
la pelota. En el frame 1 tendría la forma original, en el frame 5, forma
de cuadrado (por ejemplo) y en el 11, otra forma distinta.
Fot. de Anim de Forma.
En esta última imagen aparecen casi todos los tipos de
fotogramas, ¿los reconoces?
Las Capas
El concepto de Capa es fundamental para manejar Flash de
forma eficiente. Dada la importancia de estas, se le dedicará un tema
completo. Aún así, veamos a grandes rasgos qué son las capas.
Una Capa se puede definir como una película independiente de un
único nivel. Es decir, una capacontiene su propia Línea de Tiempo
(con infinitos fotogramas).
Los objetos que estén en una determinada capa comparten
fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante
a menudo, pero otras veces es conveniente separar los objetos de
modo que no interfieran entre sí. Para ello, crearemos tantas capas
como sea necesario. El uso de múltiples capas además, da lugar a
películas bien ordenadas y de fácil manejo (es conveniente colocar los
sonidos en una capa independiente llamada "Sonidos", por ejemplo).
Las ventajas y desventajas de usar capas se verá en el Tema 8.
El Área de Trabajo
El Área de trabajo consta de numerosas
partes, veámoslas:
La
parte
más
importante
es
el Escenario, sobre
el
escenario
dibujaremos y colocaremos los diferentes
elementos de la película que estemos
realizando. El escenario tiene unas
propiedades muy importantes, ya que
coinciden
con
lasPropiedades
del
documento. Para
acceder
a
ellas,
hagamos clic con el botón derecho sobre
cualquier parte del escenario en la que no
haya
ningún
objeto
y
después
sobre Propiedades del documento:
Añade metadatos a tus archivos para
una mejor inclusión de estos en los motores
de busqueda rellenando los campos
deTítulo y Descripción.
Dimensiones: Determinan el tamaño de
la película. El tamaño mínimo es de 1 x 1
px (píxeles) y el máximo de 2880 x 2880 px.
Coincidir: Provocan que el tamaño de la
película coincida con el botón seleccionado
(tamaño por defecto de la Impresora,
Contenidos existentes o los elegidos como
Predeterminados)
Color
de
Fondo: El
color
aquí
seleccionado será el color de fondo de toda
la película.
Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película.
Unidades de Regla: Unidad que se empleará para medir las cantidades.
Transformar en predeterminado: Este botón, propio de la nueva versión de Flash, permite
almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se
creen desde ese instante en adelante. Estas propiedades por supuesto podrán ser alteradas desde
este panel cuando se desee.
Las Vistas o Zooms
La Herramienta Lupa
se emplea para acercar o alejar la vista de un objeto, permitiendo
abarcar más o menos zona delEntorno de Trabajo. Cada vez que hagamos clic en la Lupa
duplicaremos el porcentaje indicado en el Panel Zooms.
Panel Zooms: Son un conjunto de accesos directos a Submenús existentes en
el Menú Ver. Son muy útiles y ayudan a acelerar el trabajo cuando se emplean
correctamente.
Los Paneles
Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo, todo lo que
haga referencia a las acciones, irá en el Panel "Acciones"). Su misión es simplificar y facilitar el uso de
los comandos.
Todos ellos se estudiarán en profundidad a lo largo del curso. Aún así, vamos a nombrarlos y a
resumir las funciones de la mayoría de ellos.
Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy útil.
Panel Mezclador de Colores: Mediante este panel creamos los colores que más nos gusten.
Panel Muestras de Color: Nos permite seleccionar un color de modo rápido y gráfico. (Incluidas
nuestras creaciones).
Panel Información: Muestra el tamaño y las coordenadas de los objetos seleccionados,
permitiéndonos modificarlas. Muy útil para alineaciones exactas.
Panel Escena: Modifica los atributos de las escenas que usemos.
Nivel Básico. Escenas
Escenas
Una Escena no es más que una porción de la Línea de Tiempo, con todo lo que ésta incluya
(capas, fotogramas...).
Su finalidad principal es la de ORGANIZAR la película, de modo que las partes de la película que
no tengan relación entre sí no estén una a continuación de la otra (seguida en la línea de tiempo). De
este modo, separando una película en 3 escenas, conseguimos tener 3 líneas de tiempo, 3 conjuntos
de capas y 3 conjuntos de fotogramas, que veremos y editaremos como si de 3 películas diferentes se
tratara.
No debemos olvidar que aunque en apariencia sean películas distintas, la Línea de Tiempo es la
misma y que al acabar la primera escena se reproducirá la segunda y así sucesivamente...
Las Escenas se pueden añadir, eliminar, editar... desde el Menú Escena al que se accede
desde Ventanas → Escena.
Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados.
Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra película.
Panel Comportamientos: Permiten asignar a determinados objetos una serie de características
(comportamientos) que después podrán almacenarse para aplicarse a otros objetos de forma rápida y
eficaz.
Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser
usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades
características y muchas utilidades (calendarios, scrolls etc...)
Panel Cadenas: Mediante este panel Flash 8 aporta soporte multi-idioma a nuestras películas.
Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles desde
este panel.
Panel Propiedades: Sin duda, el panel más usado y más importante. Nos muestra las propiedades
del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamaño de los
caracteres, tipografía, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamaño
etc... Es fundamental, no debeis perderlo de vista nunca.
Panel Explorador de Películas: Nos permite acceder a todo el contenido de nuestra película de
forma fácil y rápida
Unidad 4.
Dibujar y Colorear
El Dibujo en Flash 8
Cuando se diseña una página web o una animación el diseñador pasa por muchas fases. Tras la
fase de "Qué quiero crear y cómo va a ser" viene (normalmente) la fase de diseño gráfico. Llevar lo
que ha producido tu imaginación al papel (en este caso al papel de Flash).
No conviene engañarnos, Flash no es un programa de diseño gráfico, pero su potencia en este
ámbito es casi tan grande como la de éstos programas. Vamos a ver cómo emplear cada herramienta
de dibujo para sacarle el máximo partido.
La Barra de Herramientas. Herramientas Básicas.
La Barra de Herramientas contiene todas las Herramientas necesarias para el
dibujo. Veamos cuáles son las más importantes y cómo se usan:
Herramienta Selección (flecha):
. Es la herramienta más usada de todas. Su
uso principal es para seleccionar objetos. permite seleccionar los bordes de los objetos,
los rellenos (con un sólo clic), los bordes (con doble clic), zonas a nuestra elección...
Además, su uso adecuado puede ahorrarnos tiempo en el trabajo.
Herramienta Línea:
Permite crear líneas rectas de un modo rápido. Las líneas
se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde
queramos que llegue la línea recta. Una vez creada la podemos modificar sin más que
seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra
parte cercana a la recta para curvarla.
Herramienta Texto:
Crea un texto en el lugar en el que hagamos clic. Sus
propiedades se verán en el tema siguiente.
Herramienta Óvalo:
manera rápida y sencilla.
La herramienta Óvalo permite trazar círculos o elipses de
Herramienta Rectángulo:
Su manejo es idéntico al de la Herramienta Óvalo, tan
solo se diferencian en el tipo de objetos que crean.
Herramienta Lápiz:
Es la primera Herramienta de dibujo propiamente dicho.
Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a
nuestro gusto. El color que aplicará esta Herramienta se puede modificar, bien desde el
Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de
Herramientas.
Herramienta Brocha:
Su funcionalidad equivale a la del lápiz, pero su trazo es
mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su
grosor y forma de trazo.
Herramienta Cubo de Pintura:
Permite aplicar rellenos a los objetos que
hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar
rellenos si la zona no está delimitada por un borde. El color que aplicará esta
Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien
desde el subpanelColores que hay en la Barra de Herramientas.
Herramienta Borrador:
Su funcionamiento es análogo a la Herramienta Brocha.
Pero su función es la de eliminar todo aquello que "dibuje".
La Barra de Herramientas. Herramientas Avanzadas.
Herramienta Lazo:
Su función es complementaria a la de la Herramienta Flecha, pues puede
seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar
objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede
seleccionar rellenos u objetos (a menos que hagamos la selección a mano).
Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas imágenes:
. Esto,
es la Herramienta Varita Mágica, tan popular en otros programas de dibujo. Permite hacer
selecciones según los colores de los objetos. El tercer dibujo que aparece es este:
selecciones poligonales.
permite hacer
Herramienta Pluma:
Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo.
Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece
Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los
polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que
la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba
dominando.
Herramienta Subseleccionador:
Esta Herramienta complementa a la Herramienta Pluma,
ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.
Herramienta Bote de Tinta:
Se emplea para cambiar rápidamente el color de un trazo. Se
aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el
Panel Mezclador de Colores (que coincide con el subpanelColores que hay en la Barra de
Herramientas.)
Herramienta Cuentagotas:
podamos utilizarlos.
Su misión es "Capturar" colores para que posteriormente
La Barra de Herramientas. Opciones
Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso. Para
acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta correspondiente. La
forma de acceder a este Submenú consiste en hacer clic en la línea o en el objeto que has dibujado.
Entonces aparecerá (o se iluminará si ya estaba presente) un submenú como este:
Ajustar a Objetos :
Se usa para obligar a los objetos a "encajar" unos con otros,
es decir, para que en caso de ser posible, sus bordes se superponga, dando la sensación
de estar "unidos".
Suavizar:
Convierte los trazos rectos en líneas menos rígidas.
Enderezar:
rectilíneos.
Realiza la labor inversa. Convierte los trazos redondeados en más
El Panel Mezclador de Colores
El Panel Mezclador de Colores, como su nombre indica se usa para fabricar nuestros propios
colores y para seleccionar los que más nos gusten.
Para seleccionar un color determinado, bastará con hacer
clic en las pestañas que se encuentran junto a los iconos de
las Herramientas de Lápiz y de Bote de Pintura. (Si
queremos modificar el color de un borde, pulsaremos sobre la
pestaña que está junto a laHerramienta Lápiz y si queremos
modificar un relleno, haremos clic en la pestaña que está junto
a la Herramienta Bote de Pintura.) Al hacerlo aparecerá un
Panel con multitud de colores para que seleccionemos el que
más nos gusta. También permite introducir el código del color
según el standard que establece el HTML.
También se puede determinar el tipo de relleno que
aplicaremos a los objetos creados (mediante la Herramienta
Bote de Pintura).
Se pueden crear diferentes tipos de Rellenos
Sólido: Consiste en un relleno formado por un solo color.
Degradado Lineal: Es un tipo especial de relleno, de modo
que un color se degrada hasta convertirse en otro. Puede ir de
arriba abajo o de un lado al otro
Degradado Radial: Es igual que el anterior, pero los
degradados tiene forma circular.
Mapa de Bits: Permite colocar como relleno alguna imagen
existente en la película (O ajena a ella si antes se "importa")
Para aprender a crear un color transparente (semitransparente), realiza el Ejercicio Crear Color Transparente
Creando un color transparente
Objetivo.
Crear un objeto cuyo color sea transparente, de modo que se vean los objetos que haya detrás
Ejercicio paso a paso.
1 Creamos un rectángulo con la Herramienta Rectángulo.
2 El Color de relleno del rectángulo creado será el que esté
en ese momento seleccionado en el Panel Mezclador de
Colores. Por ejemplo, el azul.
3 Una vez creado, seleccionamos el relleno del Rectángulo
y modificamos el valor Alfa. Por ejemplo, escribimos un valor
de 45%.
Rectángulo Azul
Ahora con
Transparencia
Si situamos otra imagen detrás de nuestro rectángulo (en otra capa), podemos ver cómo queda el
efecto de la transparencia sobre nuestro relleno
El Panel Muestras de Color
El Panel Muestras de Color sirve para poder
ver de un modo rápido y claro los colores de que
disponemos, tanto sólidos (un solo color) como
degradados (lineales o radiales). Además, cuando
creemos un color mediante el Panel Mezclador de
Colores, podremos agregarlo a nuestro conjunto de
muestras mediante Agregar Muestra (que se
encuentra en un menú desplegable en la parte
superior derecha del Panel Mezclador de Colores).
Una vez esté agregado el color, pasará a estar
disponible en nuestro conjunto de muestras y
podremos acceder a él rápidamente cada vez que
trabajemos con nuestra película.
Cada película tiene su propio conjunto de
muestras y cada vez que la abramos para editarla,
podremos usar las muestras que teníamos la última
vez que trabajamos con dicha película.
Unidad 5.
Trabajar con Textos
Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación, y por tanto,
también todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones
gráficas, de modo que tratará cualquier texto como si de un objeto más se tratase, listo para ser
animado a nuestro gusto. Esto nos permitirá posteriormente animar textos y crear espectaculares
animaciones con muy poco esfuerzo. Flash distigue entre 3 tipos de texto, texto estático o normal,
texto dinámico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), también se
puede crear texto que soporte formato HTML etc...
Propiedades de los Textos
Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del
escenario en el que queramos empezar a escribir.
Avanzado.
Escribiendo Textos
Tras hacer clic con la Herramienta Texto en cualquier parte del fotograma actual, nos aparecerá
algo así:
El recuadro que vemos es el recuadro que contendrá al texto. En la película final NO se
verá, pero nos servirá para localizar más fácilmente el texto y para moverlo o cambiar su tamaño.
Finalmente, el círculo que hay arriba a la derecha significa que el recuadro del texto se expandirá
según vayamos escribiendo y también el texto. Esto es, todo lo que escribamos, estará en la misma
línea.
Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que lo contiene.
Para cambiar de línea, sería necesario pulsar la tecla Enter (Intro).
Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante común,
acercaremos el cursor del ratón al borde del recuadro de texto, según donde lo acerquemos, se
transformará en un símbolo o en otro.
Si lo acercamos al borde del recuadro, se le añadirá
debajo de la flecha una flecha pequeña de 4 direcciones
como la que muestra la figura y que nos indica que
podemos mover el texto:
Si lo acercamos al círculo que está en el margen
superior derecha, el cursor se convierte en un flecha de
"ensanchamiento", como la que muestra la figura:
Con el cursor convertido en flecha de "ensanchamiento", podemos estirar los límites del recuadro
de texto, y además, el círculo que aparecía en el margen superior derecho, se convierte en un
cuadrado. Este cuadrado significa que los límites del recuadro de texto han quedado fijados, y que al
insertar más texto, se producirá un salto de línea en lugar de ensanchar el recuadro de texto. Este
sería su comportamiento al introducir texto:
Si quisiéramos, (una vez definido el recuadro de texto) volver al modo anterior, basta con hacer
doble clic sobre el cuadrado que está en el margen superior derecho del recuadro de texto. Tras
hacerlo, se convertirá en un círculo y su comportamiento será el descrito al principio de esta página.
El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos
durante nuestra película, de modo que si seleccionamos un texto, podremos ver en él todo lo que nos
hace falta conocer sobre nuestro texto. Si tenemos experiencia usando Flash 5, notaremos que todas
las propiedades que antes se encontraban en los Paneles Carácter y Párrafo, se encuentran
agrupadas ahora en el Panel Propiedades.
Panel Propiedades
Veamos a fondo el Panel Propiedades:
Fuente:
Desde aquí, al igual que en los editores de texto más
comunes podemos seleccionar el tipo de letra o "fuente" que más nos guste.
Altura:
Determina el espaciado entre los caracteres. Útil cuando la tipografía que
empleamos muestra las letras muy juntas o para dar efectos concretos al texto.
Dirección del Texto:
Cambia la orientación del texto de horizontal a vertical, tanto de izquierda
a derecha como de derecha a izquierda.
Ajuste automático entre caracteres:
separación entre caracteres se realice de modo automático.
Posición:
dejarlo normal).
URL:
Activar esta casilla provoca que la
Nos permite convertir nuestro texto en subíndices o en superídices (o
Si queremos que al pulsar sobre nuestro
texto, el usuario vaya a una dirección web, nada más fácil que escribirla ahí. Flash la asociará al texto
que estés escribiendo en ese momento.
Destino:
Determina si la URL a la que el texto hace referencia se cargará en
la misma ventana del navegador, en una nueva ...
Tipo de Línea:
Si el texto que vamos a incluir es dinámico (de lo contrario
aparece sin activar), esta opción nos permite determinar cómo queremos que aparezcan las líneas
(línea única, multilínea o multilínea sin ajuste).
Configuración:
Son las clásicas opciones que permiten convertir el texto en
Negrita (B), Cursiva (I), cambiar el color del texto y el tamaño.
Otras Propiedades:
Dado que Flash trata los textos como objetos, éstos
también tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos
tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografías son una parte
muy importante y deben respetarse.
Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a todos ellos.
Estos párrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El
Panel Propiedades nos proporciona las siguientes opciones para trabajar con párrafos (entre otras).
A la Izquierda:
Todas las líneas empezarán tan a la izquierda como sea posible (dentro del
recuadro de texto que hayamos definido).
Centrar:
Las líneas se distribuyen a la derecha y a la izquierda del punto medio del Párrafo.
A la derecha:
Todas las líneas empezarán tan a la derecha como sea posible (dentro del
recuadro de texto que hayamos definido).
Justificado:
El texto se ensancha si es necesario con tal de que no quede "dentado" por
ninguno de sus límites.
El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho), los sangrados
de párrafo y el espacio interlineal.
Tipos de Textos
Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un tratamiento
especial, según el tipo que sean.
Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores, y es
en el Tipo de texto en lo que se diferencian. El tipo de texto se puede modificar desde el
Panel Propiedades sin más que haciendo clic sobre la pestaña Tipo de texto:
Texto Estático
El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la animación. Es
importante que no confundamos la palabra "estático" con que el texto no se mueva o
malinterpretemos la frase "es el texto que no presenta cambios a lo largo de la animación".
Lo que queremos decir es que no cambia el contenido del recuadro de texto, es decir, que el
texto puede estar animado (girar, cambiar de color...) y sin embargo ser estático. Así, un recuadro de
texto en el que pone "Aprende Flash 8" durante toda la película, es estático, aunque dicho texto
cambie de posición, forma o color. Sin embargo, si en ese mismo recuadro de texto pasa a poner "Con
este Curso", este recuadro de texto NO es estático. Se insistirá en este punto en los ejercicios de
evaluación.
Los textos estáticos sólo tienen 2 propiedades extras:
Usar Fuentes del Dispositivo: Esta opción permite que la película Flash emplee las Fuentes que
tenga instaladas el usuario que ve la película en su ordenador. Si dicho usuario dispone de las fuentes
que hemos utilizado en la película, la verá exactamente como queremos que la vea, pero si no las
tiene, Flash empleará la fuente que más se le parezca. Esto muchas veces lleva a que el resultado
final (el que ve el usuario) no se parezca al que pretendíamos, por lo que suele ser conveniente
mantener esta opción sin seleccionar, aunque esto conlleve un mayor tamaño de la película final.
Seleccionable: Con esta opción activada el usuario podrá seleccionar los textos que aparezcan en
la película (cortarlos, copiarlos...) Actívala si lo crees conveniente.
Texto Dinámico
El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido (además de
estar animado). Su uso es bastante más complejo que el del Texto Estático, ya que cada recuadro de
texto Dinámico puede ser una variable modificable mediante ActionScript, esto quiere decir que los
valores y propiedades de este tipo de textos se pueden modificar mediante programación, lo que nos
saca del objetivo de este curso. Un uso común que suelen tener es el de representar los textos
introducidos mediante Textos de Entrada (ver siguiente punto).
Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede decidir el
número de líneas que van a tener, se puede introducir texto HTML, se puede añadir fácilmente un
borde al texto o dar nombre a la variable que represente al texto Dinámico.
Texto de Entrada
El Texto de Entrada tiene básicamente las mismas propiedades que el Texto Dinámico, junto
con algunas propias de un tipo de texto orientado a la introducción de datos por parte de usuario,
como por ejemplo el número máximo de líneas que puede introducir en ese campo de texto o si
queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las
contraseñas).
Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de texto SIN
contenido, ya que lo deberá introducir el usuario.
Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto Dinámico.
Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imágenes
(ya hemos visto lo sencillo que es convertir un texto en un enlace a otra página web). Aún así, crear
animaciones con textos, que sobrepasen a las que Flash incorpora por defecto (colores,
transparencias, brillos, rotaciones, movimientos o combinaciones de estos) puede resultar un trabajo
de muchísimas horas y mucha paciencia. Los resultados son increíbles, pero puede resultar
recomendable en estos casos usar algunos programas diseñados con este objetivo. Entre otros
destacan el Swish, el FlaX o el MiX-Fx, con ellos podrás crear efectos de texto asombrosos en pocos
minutos, aunque no podrás gozar del entorno de Flash 8 ni podrás emplear el resto de herramientas
de que dispone.
Unidad 6.
Trabajar con Sonidos
Comenzando
¿Quién sería capaz de ver una película muda? ¿Y una animación espectacular sin sonido?
Hasta hace poco, los únicos sonidos que oíamos en las páginas web eran los famosos "midis", de
escaso tamaño y de escasa calidad. De hecho, eran sólo instrumentos musicales sin voz, de ahí su
pequeño tamaño (y calidad). Aún así, siempre existía algún creador de páginas web que se
aventuraba a poner algún sonido complejo (.wav o .mp3) en su página web, por desgracia, su carga
es tan lenta, que la mayoría de los visitantes se irían de la página sin llegar a escucharla.
Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner sonido a
las páginas web es un poco más fácil, ¿qué aporta FLASH?
Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav, .aiff y .mp3)
de forma fácil y muy efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se
descargue junto con nuestra película.
Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón), efectos complejos
(música de fondo) e incluso podemos hacer que la animación se desarrolle conjuntamente con una
música (si bien esto último necesitaría que toda la película estuviera descargada previamente, para
evitar "atascos" durante el desarrollo de la animación). En definitiva, Flash nos lo vuelve a poner fácil.
Importar Sonidos
Si alguna vez habeis intentado añadir un sonido a vuestra animación Flash probablemente os
hayais llevado una gran decepción, no conseguirlo. Esto se debe a que no se tiene en cuenta que
para poder emplear un objeto en nuestra película, o bien lo creamos nosotros (como llevamos
haciendo hasta ahora) o bien lo conseguimos de cualquier otro modo y lo insertamos en nuestra
película.
A esto último se le llama "Importar" y se puede hacer con sonidos, gráficos, e incluso con otras
películas Flash. Importar por tanto, no es más que decirle a Flash que añada un determinado archivo
a nuestra película, para que podamos usarlo cuando queramos. En realidad, lo añade a
nuestra Biblioteca, que es el Panel en el que están todos los objetos que participan en la película
(este Panel se verá más adelante).
Así pues si queremos manejar un sonido en nuestra película, deberemos importarlo previamente.
Una vez esté importado, podremos usarlo con total libertad.
Para importar un sonido haz clic en el menú Archivo → Importar → Importar a biblioteca.
Se abrirá el cuadro de diálogo de Importar a biblioteca. Allí deberás seleccionar en Tipo de
archivo Todos los formatos de sonido.
Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu película.
Seleccionalo haciendo clic sobre él y haz pulsa el botón Aceptar.
El
sonido
estará
listo
para
usarlo
la Biblioteca (menú Ventana → Biblioteca).
Propiedades de los Sonidos
donde
quieras,
podrás
encontrarlo
en
En Flash 8, al igual que en Flash 8 todo lo referente a los sonidos lo podemos editar desde el
Panel Propiedades. Aquí tenemos todo lo necesario para insertar, modificar y editar el sonido que
acabamos de importar. Si no hemos importado ningún sonido, nos daremos cuenta de que no
podemos seleccionar nada en dicho panel, basta insertarlo para que esto cambie.
Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en algún fotograma
de nuestra película, tras hacer esto, el Panel Propiedades toma el siguiente aspecto:
Veamos las partes que tiene este panel.
Sonido: En esta pestaña nos aparecerán las canciones que tenemos importadas, deberemos
seleccionar la canción que pretendamos añadir a nuestra película (en el siguiente punto veremos
cómo insertarlo).
Efecto: Desde aquí podremos añadir algún efecto a nuestro sonido, como por ejemplo que el
sonido pase del canal izquierdo al derecho (esto crea la sensación de que el sonido te envuelve ya
que lo oyes por un sitio y luego por otro, aunque queda muy lejos de los verdaderos sonidos
envolventes), que el volumen aumente progresivamente etc... Si deseamos añadir complejos efectos
sonoros, deberemos tratar adecuadamente el sonido con algún programa creado específicamente
para este propósito antes de importarlo.
En el punto Editar Sonidos se tratará en más profundidad estos efectos.
Sinc: Esta opción nos permite determinar en qué momento comenzará a actuar nuestro sonido,
estas son las opciones que tenemos:
Evento: Sincroniza nuestro sonido con un evento determinado. Es la opción por defecto y provoca
que el sonido se empiece a reproducir al pasar la película por el fotograma en el que está situado.
También se puede sincronizar el sonido con botones y los demás tipos de símbolos.



Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si está
seleccionado Inicio en vez de Evento y se reproduce otra vez el mismo sonido u otro distinto, lo
hace "encima" del sonido actual. Puede ser un efecto muy atractivo, o puede provocar que se
forme "ruido" en nuestra película.
Detener: Detiene el sonido seleccionado.
Flujo: Esta opción sincroniza el sonido con el o los objetos con los que esté asociado, por tanto, si
la carga de la película es lenta y las imágenes no fluyen adecuadamente, el sonido se detendrá
para sincronizarse con ellas. Este efecto puede dar la sensación de que la película se corta de un
modo muy brusco (pensar en que se considera normal que una imagen tarde en cargarse, pero si
se detiene un sonido mientras se reproduce, produce una reacción muy negativa en los que
pueden estar viendo nuestra película).
Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que
un personaje hable durante una película. En esta situación, es muy recomendable que el sonido y
las imágenes estén sincronizadas.
Repetir: Determina el número de veces que se reproducirá el sonido según lo que escribas en la
caja de texto de la derecha. También puedes seleccionar Reproducir indefinidamente para que el
sonido se reproduzca en un bluce hasta llegar al siguiente fotograma clave.
No recomendamos insertar sonidos con la opción Flujo y a la vez la de Repetir, ya que al estar
sincronizados los sonidos con las imágenes, provocaríamos que las imágenes (y los fotogramas que
las contengan) se dupliquen también, aumentando considerablemente el tamaño de la película.
Insertar un Sonido
Ahora que ya sabemos importar un sonido, qué opciones
podemos modificar y para qué sirve cada una. Veamos lo más
importante, cómo insertarlos en nuestra película.
Supongamos que queremos insertar un sonido en un
fotograma determinado, de modo que cuando la película Flash
llegue a este fotograma comience a reproducirse el sonido. Para
que un sonido se reproduzca al llegar a un fotograma,
deberemos seleccionar el fotograma en el que queremos que
empiece a reproducirse el sonido. Una vez allí, abriremos el
Panel Propiedades e importaremos el sonido que queramos del
modo visto en el punto anterior. Otro modo más rápido aún
consistiría en seleccionar dicho sonido en la Bibliotecay
arrastrarlo al fotograma en el que queramos que se empiece a
reproducir el sonido (al fotograma, no a la línea de tiempo).
Así representa Flash los sonidos
insertados en Fotogramas
De este modo insertamos un sonido, pero ¿suena tal y cómo queremos que suene? ... Depende de
lo que busquemos.
Por defecto Flash entiende que quieres reproducir el sonido en su totalidad, sino ¿para qué
insertarlo entero?, de modo que Flash reproducirá el sonido todas las veces que le hayas indicado
en Repetir y el sonido sonará aunque el fotograma en el que esté no sea el que se está ejecutando en
ese instante. Si quisiéramos que el sonido pare cuando entremos en otro fotograma, lo podemos
hacer de 2 formas distintas, ambas combinando las opciones que nos ofrece el Panel Propiedades.
La primera de ellas es seleccionarlo en la Biblioteca y arrastrarlo directamente sobre el escenario.
El sonido se añadirá al fotograma en el que nos encontramos.
Otra opción sería la de seleccionar el sonido (ya importado a nuestra biblioteca) desde el
panel Propiedades del fotograma seleccionado:
En la opción Sonido seleccionaríamos el audio que queremos añadir al fotograma. Luego
modificaríamos la opción Sinc. del siguiente modo:
 Si seleccionamos Flujo, el sonido se reproducirá hasta llegar al primer fotograma que no
lo contenga.
 Podemos seleccionar Stop para marcar un fotograma de modo que el sonido se detenga
al llegar a él.
Editar Sonidos
¿Mp3 o Wav?
Como ya se ha comentado, los sonidos que Flash 8
puede importar deben tener las extensiones .wav o .mp3
Por tanto, cuando queramos añadir un sonido a nuestra película, deberemos decantarnos por uno de
estos 2 formatos. Lo normal es que el sonido que pretendamos insertar ya esté en uno de ellos, pero
no debemos olvidar que existen multitud de programas que convierten un sonido con extensión .mp3
a uno .wav y viceversa, por lo que no debe ser inconveniente el formato que tenga el sonido en un
principio.
La pregunta surge en seguida ¿Cuál es mejor? ...
Esta pregunta es más importante de lo que parece, ya que si decidimos que nuestra película tenga
sonidos, deberemos asumir una carga muy importante en cuanto a tamaño de la película y en
consecuencia en cuanto a tiempo de descarga. Lo habitual es que los sonidos ocupen más de la mitad
del espacio total y muchas veces no valdrá la pena insertarlos...
Una vez decididos a insertar el sonido, la lógica nos dice que insertemos el sonido que ocupe un
espacio menor en el disco duro, ya que este espacio es el que ocupará en nuestra película. Esto es
una aproximación, ya que Flash comprime todo aquello que insertamos en nuestras películas.
Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los sonidos .wav (10
veces menos o más), por lo que parece recomendable insertar .mp3 en lugar de .wav, ahora bien
¿Puede Flash comprimir un sonido ya comprimido? Es decir, si un sonido .wav ha sido comprimido y
ahora tiene extensión .mp3, ¿podrá Flash volver a comprimirlo? La respuesta es NO. Flash comprime
los sonidos que insertamos en nuestras películas, pero si el sonido resulta estar ya comprimido, no
podrá volver a comprimirlo (en realidad si que consigue comprimirlo, pero el sonido final es el mismo
que el inicial).
Ahora que ya sabemos esto, nos falta saber si Flash comprime un archivo .wav más de lo que
comprime el formato .mp3, para ver bien este aspecto, hemos preparado varios ejemplos...
Ejemplo:
Contamos con una película con un único frame que está vacío. Esta película, una vez lista para ser
vista (.swf) ocupa 1KB.
Tenemos 1 sonido .wav que ocupa 1596 KB
Comprimimos dicho sonido con un programa compresor de audio y obtenemos el mismo sonido en
formato .mp3, ocupa 145 KB. (La calidad de sonido es prácticamente idéntica).
Ahora insertamos el sonido .wav en la película original y la exportamos (esto se trata en el último
tema).
Resultado: Una película con sonido (película 1) que ocupa 37KB.
Insertamos después el sonido .mp3 en la película original.
Resultado: Una película con sonido (película 2) que ocupa 145 KB
Conclusión: La película con un sonido .wav ocupa casi 5 veces menos que la que tiene el mismo
sonido en .mp3, por tanto parece recomendable insertar sonidos .wav (la compresión de audio que
logra Flash es muy grande). Como contrapartida, podría apreciarse pérdida de calidad en el sonido
que se escucha en la película 1. Esta pérdida será importante según el tipo de sonido que sea. Si es
una voz, por ejemplo, deberíamos insertar .mp3 ya que necesariamente deberá escucharse bien, si es
música de fondo, es probable que aunque se pierda calidad, el resultado final sea aceptable y sea
conveniente quedarnos con la película de menor tamaño. Lo mejor es probar ambas versiones y
evaluar el resultado.
Por último, comentar que Flash no puede importar sonidos en formato MIDI (.mid). Aún así, si
estamos empeñados en que en nuestra animación el sonido sea un MIDI y no queremos o podemos
conseguir un programa que convierta el sonido MIDI a WAV o MP3 existe una forma de hacerlo
consistente en el uso combinado de Flash y Javascript. Igualmente, como se comentó en el Tema 1,
Flash 8 permite cargar sonidos de un modo dinámico (sin que ocupen espacio), esto se tratará en el
Tema 17 "Action Script".
Unidad 7.
Trabajar con Objetos
Los Objetos. Iniciación
Independientemente de si estamos trabajando en una animación, en una página web, en
un catálogo para un CDRom o en cualquier otra cosa, tendremos que trabajar con objetos. A
grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestra película y
sea visible, de modo que podamos trabajar con él,un objeto sería, por ejemplo, cualquier imagen
que creemos o importemos, un botón, un dibujo creado por nosotros mismos etc...
Los objetos así considerados tienen 2 partes fundamentales:
El Borde: Consiste en una delgada línea que separa el objeto del exterior del escenario.
Puede existir o no, según nos convenga. Cuando creamos un objeto, el borde se crea siempre y
su color será el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Si
queremos dibujar creando Bordes deberemos emplear las HerramientasLápiz, Línea o Pluma y
si queremos que nuestro dibujo no tenga borde, bastará con seleccionar el borde y suprimirlo
(ver siguiente punto).
El Relleno: El relleno no es más que el propio objeto sin borde. Es, por tanto, la parte interna
del objeto. Su existencia también es arbitraria, ya que podemos crear un objeto cuyo color de
relleno sea transparente, como ya se vió en el tema de Dibujar, y por tanto, parecerá que dicho
objeto no tiene relleno, aunque en realidad sí que exista pero sea de color transparente. Para
dibujar Rellenos (sin borde) podemos usar herramientas tales como el Pincel o el Cubo de
Pintura.
Seleccionar
Para poder trabajar con objetos, es fundamental saber seleccionar la parte del objeto que queramos
modificar (mover, girar, cambiar de color...). Podremos observar que las partes de un objeto
seleccionadas toman una apariencia con textura para indicar que están seleccionadas.
Objeto SIN seleccionar
Objeto con
el BORDE
seleccionad
o
Objeto con el
RELLENO
seleccionado
Veamos cómo seleccionar las diferentes partes de un objeto:
Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde que
queramos seleccionar.
Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno.
Seleccionar todos los bordes (o líneas) de un mismo color que estén en contacto: Hacer
doble clic sobre una de las líneas que tenga el color que pretendamos seleccionar.
Seleccionar un Símbolo, un texto, o un grupo: Clic en el Símbolo, en el texto o en el grupo.
Estos tipos de objetos mostrarán un borde de color azul (por defecto) al estar seleccionados.
Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT mientras seleccionamos los
objetos que queramos.
Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la
Herramienta Selección (Flecha). Haremos clic en una parte del escenario y arrastraremos el cursor
hasta delimitar el área que contenga los objetos que queremos seleccionar. Si esta área corta algún
objeto, sólo quedará seleccionada la parte del objeto que esté dentro del área que hemos delimitado.
Si quisiéramos incluir dicho objeto, bastaría con usar la tecla SHIFT y seleccionar la parte del objeto
que falta por seleccionar.
Este modo de seleccionar objetos permite seleccionar muchos objetos rápidamente, además de
permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas ...
Además de la Herramienta Flecha, también podemos usar la Herramienta Lazo, más útil aún si
cabe. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros)
del objeto que sea. Al contrario que la Herramienta Flecha, las áreas seleccionadas no tienen porque
ser rectángulares.
Seleccionar a partir de la Línea de Tiempo: Si seleccionamos un determinado fotograma en la
línea de tiempo, se seleccionan automáticamente todos los objetos que estén en dicho fotograma.
Esto es útil para modificar de un modo rápido todos los elementos del fotograma.
Seleccionar Todo: La forma más natural de seleccionar todo, consiste en hacer clic en el
menú Edición → Seleccionar Todo.
Colocando Objetos. Panel Alineamiento
Ahora que ya sabemos seleccionar los objetos o las partes de estos que
consideremos oportunas, veamos cómo colocarlos en el Escenario.
Para colocarlos de un modo preciso (por no decir exacto), Flash pone a
nuestra disposición el Panel Alinear. Este Panel lo podemos encontrar en el
Menú Ventana → Alinear. Así funciona:
El Panel Alinear permite colocar los objetos tal y cómo le indiquemos. Antes
de ver las posibilidades, debemos hacer hincapié en la opción En Escenario
(En Escenar). Esta opción nos permite decir a Flash que todas las posiciones
que indiquemos para nuestros objetos tomen como referencia el escenario
Si esta opción no está seleccionada, los objetos toman como referencia al conjunto de objetos en el
que se encuentran, y se colocan en función de ellos. Lo más habitual es seleccionar En Escenario,
para que los objetos se coloquen según los límites de la película, en el centro del fotograma etc...
Conozcamos un poco mejor el Panel Alinear y sus posibilidades:
Alineamiento:
Sitúa los objetos en una determinada posición del
fotograma (si está seleccionado En Escena). Las distintas opciones afectan a todos los elementos
seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios
predefinidos. Por ejemplo: Si quisieramos situar un objeto en la esquina inferior izquierda, bastaría
pulsar el primer y el sexto botón consecutivamente.
Distribuir:
Sitúa los objetos en el escenario en función de unos ejes
imaginarios que pasan por cada uno de ellos, de modo que la distribución de los mismos sea
uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botón de la izquierda. Cada uno
de los 2 cuadrados se situará en un extremo de la película (uno arriba y otro abajo).
Coincidir Tamaño:
Hace coincidir los tamaños de los objetos. Si está activo "En
Escena" estirará los objetos hasta que coincidan con el ancho y el largo de la película. Si no está
activo, la referencia será el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opción
"En Escena" no está activada, al hacer clic en el primer botón de "Coincidir Tamaño", el cuadrado más
estrecho pasará a tener la anchura del cuadrado más ancho. Si "En Escena" hubiera estado activo
ambos cuadrados hubieran pasado a tener el ancho del fotograma.
Espacio:
Espacia los objetos de un modo uniforme.
Panel Información
Además de controlar la posición de los objetos desde el
Panel Alineamiento, también podemos hacerlo, de un modo más
exacto (más matemático) desde otro panel, el PanelInformación.
A
este
Panel
se
puede
acceder
desde
el
Menú Ventana → Información. Las posibilidades de este Panel
son limitadas, pero si buscamos exactitud en las medidas o no nos
fiamos de las distribuciones de objetos que crea Flash, debemos
acudir a él.
Medidas del Objeto:
Aquí introduciremos un número que represente el tamaño de nuestro
objeto en la medida seleccionada en las Propiedades del documento. An: hace referencia a la
anchura y Al: a la altura.
Situación del objeto:
Desde aquí controlamos la posición del objeto en el escenario. La X y
la Y representan el eje de coordenadas (La X es el eje Horizontal y la Y el eje vertical). Las medidas
también van en función de las medidas elegidas para la película.
Color Actual:
Indica el color actual en función de la cantidad de Rojo (R), Verde (V), Azul (A) y
efecto Alfa (Alfa) que contenga.
Este indicador puede ser engañoso, el motivo es que indica el color que tiene el objeto por el que
en ese momento pasamos el cursor del ratón. Por tanto, podemos tener seleccionado un objeto
(haciendo clic en él) y ver en el Panel Información su tamaño y su posición, pero al desplazar el ratón,
el valor del color cambiará y ya no indicará el color del objeto seleccionado, sino el del objeto por el
que pase el cursor. Tened esto en cuenta para no cometer errores o perder tiempo innecesario.
Posición del Cursor:
Indica la posición del cursor. Es útil por si queremos que suceda algo en
la película al pasar el cursor justo por una posición determinada o para situar partes del objeto en
lugares específicos.
Los Grupos
Un Grupo no es más que un conjunto de objetos. Si bien no cualquier conjunto
de objetos forman un grupo, ya que para crear un grupo, debemos indicarle a
Flash que así lo queremos. Para ello, basta seleccionar los objetos que queremos
que formen parte de un grupo y después hacer clic en el
Menú Modificar → Agrupar.
Tras hacer esto observaremos que desaparecen las texturas que indicaban que
los objetos estaban seleccionados y observamos que el grupo pasa a ser un
"todo", ya que resulta imposible seleccionar a uno de sus miembros sin que se
seleccionen a su vez los demás. Además, aparece el rectángulo azul (por
defecto) que rodea al grupo, definiéndolo como tal.
Crear grupos es muy útil, ya que nos permite, como ya hemos dicho, tratar al conjunto de objetos
como un todo y por tanto, podemos aplicar efectos al conjunto, ahorrándonos la labor de hacerlo de
objeto en objeto.
Por ejemplo, supongamos que tenemos un dibujo que representa un conjunto de coches. Tras
dibujarlos todos, nos damos cuenta de que queremos aumentar el tamaño de los coches. Podemos
aumentar el tamaño de los coches de uno en uno, corriendo el riesgo de aumentar unos más que
otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con los coches y aumentar
el tamaño del grupo, de modo que aumenten todos de tamaño a la vez y en la misma proporción. De
igual modo, podemos mover al grupo de posición, hacer que gire...
Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjunto de
objetos y, en ningún caso perdemos nuestro objeto. En cualquier momento podemos deshacer el
grupo, mediante el Menú Modificar → Desagrupar.
Además, Flash nos permite modificar los elementos de un grupo sin tener que desagruparlo. Para
ello,
seleccionamos
el
Grupo
de
elementos
y
hacemos
clic
en
el
Menú Edición → Editar Seleccionado. Podremos editar los objetos que componen el grupo por
separado teniendo en cuenta que, como es lógico, los cambios realizados afectarán al grupo además
de al elemento en cuestión.
Unidad 8.
Capas
Las Capas. Entendámoslas
Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. Y todos hemos visto cómo colocan
otras y la superposición de todas forman el dibujo final. ¿Por qué no dibujan todo en una misma hoja? ¿Por qué trabajan con vario
todos juntos?
Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utiliza Flash. Cada capa es, p
insertar sonidos, textos... con INDEPENDENCIA del resto de capas. Hay que tener en cuenta que todas las capas comparten
distintos fotogramas se reproducirán simultáneamente.
Clarifiquemos esto con un
ejemplo:
Supongamos que tenemos
2 capas. En una de ellas los
fotogramas del 1 al 10 contienen
el dibujo de una portería de
fútbol. En la otra los fotogramas
del 1 al 5 contienen el dibujo de
un portero (del 5 en adelante
están vacíos).
Pues bien, esta película nos
mostrará inicialmente (durante el
tiempo que duren los primeros 5
fotogramas) la portería con el portero, para después (durante los fotogramas del 5 al 10) mostrar la
portería sin portero.
De este modo la portería es independiente del portero, y podemos tratar estos objetos con total
libertad, ya que no interfieren entre ellos para nada.
Otra razón para separar los objetos en capas, es que Flash nos obliga a colocar cada animación distinta en una capa.
De lo contrario, todos los objetos que se encuentren en dicha capa formarán parte de la animación. Si queremos
que un objeto NO forme parte de una animación, deberemos quitarlo de la capa en la que se produce dicha animación.
Siguiendo con el ejemplo del portero, si quisiéramos crear un movimiento que haga que el portero se desplace hacia un
lado no hay ningún inconveniente, pero si la portería estuviera en la misma capa que el portero, entonces AMBOS objetos
se moverían hacia dicho lado, con lo que resultaría imposible que sólo se moviera el portero. La solución es separar
los objetos en 2 capas, como ya hemos hecho.
Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de forma lógica, y nos ayudan
en la edición de dibujos (evitando que se "fundan" en uno sólo, o bloqueando el resto de capas de modo que
sólo podamos seleccionar la capa que nos interese).
Trabajar con Capas
La vista standard de una capa es la que muestra la
imagen. Veamos para qué sirven los distintos botones y
cómo usarlos.
Insertar Capas
: Como su nombre indica, sirve
para Insertar capas en la escena actual. Inserta capas
normales (en el siguiente punto se verán los distintos tipos
de capas).
Añadir Capa Guía
: Inserta una capa de tipo guía. Se
tratan en profundidad el siguiente punto.
Borrar Capa
: Borra la capa seleccionada.
Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual.
Propiedades de Capa: Si hacemos doble clic en el icono
, podremos acceder a un panel con
las propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas las opciones que hemos
comentado anteriormente y alguna más de menor importancia.
Aquí puedes cambiar diferentes opciones sobre la capa, como su nombre o su color. También puedes
bloquearla u ocultarla.
Pero haremos especial hincapié en la opción Tipo cuyas opciones, Guía y Máscara, veremos más adelante
en el curso.
Trabajar con Capas. Opciones Avanzadas
Mostrar / Ocultar Capas
: Este botón permite ver u ocultar todas las capas de la película. Es muy
útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya que permite ocultar todas a la vez,
para después mostrar sólo la actual. Para activar la vista de una capa en concreto (o para ocultarla) basta
con hacer clic en la capa correspondiente en el punto (o en la cruz) que se encuentra bajo el icono "Mostrar /
Ocultar capas"
Bloquear Capas
: Bloquea la edición de todas las capas, de modo que no podremos modificarlas
hasta desbloquearlas. Para bloquear o desbloquear una capa concreta, procederemos como en el punto
anterior, clic en el punto o icono "Cerrojo" situados en la capa actual bajo el icono "Bloquear Capas".
Bloquear una capa es muy útil cuando tenemos varios objetos juntos y en capas distintas y queremos
asegurarnos de que no modificamos "sin querer" alguno de ellos. Tras bloquear su capa podremos trabajar
con la seguridad de no modificar dicho objeto, ni siquiera podremos seleccionarlo, de modo que editaremos
con mayor facilidad el objeto que queramos.
Mostrar/Ocultar capas como contornos
: Este botón nos muestra/oculta los contenidos de todas las
capas como si sólo estuviesen formados por bordes. De este modo y ante un conjunto numeroso de objetos,
podremos distinguirlos a todos de forma fácil y podremos ver en qué capa está cada uno de ellos.
También se puede activar o desactivar para cada capa de un modo similar a los anteriores botones.
Veamos como se muestran estas opciones activadas y desactivadas.
En la primera imagen la capa actual no tiene ninguno de los botones activados, podemos observar que en
la columna "Mostrar Capas" aparece un punto negro. Este punto significa que NO está activada esta opción,
lo mismo sucede con el botón "Bloquear capas". En la columna "Mostrar capas como contornos" aparece un
cuadrado CON relleno, lo que simboliza que los objetos se mostrarán completos y no sólo sus contornos.
En la segunda imagen aparece una cruz situada bajo la columna "Mostrar Capas", lo que indica que dicha
capa no es visible en el escenario. Aparece un cerrojo bajo la columna "bloquear capas", lo que simboliza
que la capa está bloqueada. Y en la columna "Mostrar capas como contornos" NO aparece relleno. La capa
se está mostrando en este modo y no podremos ver los rellenos hasta deseleccionar esta opción.
Además, el color de los contornos será diferente para cada capa, de modo que podamos distinguirlas
mejor. El color del contorno, coincidirá con el indicado en cada capa. En este ejemplo podeis ver cómo queda
un objeto en función de tener activada o no la opción contorno:
Reorganizar las Capas
Hemos dedicado un tema entero a cómo colocar objetos, sabemos ya cómo conseguir que un
objeto aparezca delante de otro en una película, como hacer que formen grupos y muchas cosas
más. Pero nos habremos dado cuenta de que, si trabajamos con distintas capas, todo esto no sirve
de mucho...
Como ya se ha comentado, las distintas capas tienen muchas cosas en común unas con otras. Lo
primero y principal es la Línea de tiempos, todas las capas de una misma escena comparten la
misma línea de tiempos y por tanto, los objetos de todos los fotogramas 1 de todas las capas se
verán al mismo tiempo en la película superpuestos unos sobre otros. ¿y qué objeto está delante de
los demás? Pues este criterio viene dado por la colocación de las Capas en la película. Los objetos
que se mostrarán delante de todos los demás serán aquellos que se encuentren en la capa situada
más arriba.
Es decir, si nos fijamos en el ejemplo
anterior:
El portero aparece delante de la portería,
porque la capa "Portero" está situada encima
de la capa "Portería", como puede apreciarse
en la imagen. Si quisiéramos cambiar esta
distribución, basta con hacer clic en la capa
que queramos mover y arrastrarla hacia arriba
o hacia abajo hasta la posición deseada.
Veremos como los objetos se colocan
delante o detrás de los de la capa seleccionada
según su capa se encuentre por encima o por
debajo de la nuestra.
Para mover un objeto de una capa a otra, deberemos seguir unos sencillos pasos.
Cambiar un objeto de Capa
Objetivo.
Mover un objeto situado en una capa a otra
Ejercicio paso a paso.
1 Partimos de una película con más de una Capa.
2 Seleccionamos la Capa donde esté el objeto
que queramos cambiar de capa.
3 Hacemos doble clic en el objeto a mover, para
seleccionarlo en su totalidad (relleno y borde).
4 Pulsamos el boton derecho del ratón. Se
abrirá un menú como el de la imagen.
5 Seleccionamos Cortar.
desaparecerá.
El
objeto
6 Seleccionamos el fotograma en el que
queramos colocar el objeto (situado en una capa
distinta a la actual, aunque esto es válido en
ambos casos).
7 Hacemos clic con el botón derecho sobre el
escenario de este fotograma de destino.
8 Hacemos clic en Pegar para colocar el objeto
en este fotograma o hacemos clic en Pegar in
Situ para pegar el objeto en la misma posición en
la que estaba al cortarlo
Para mover un fotograma de una capa a otra, basta con seleccionar el fotograma a mover y
arrastrarlo hasta la capa donde queramos pegarlo. También se puede Copiar el fotograma y luego
pegarlo en la capa de destino.
Unidad 8.
Capas
Tipos de Capas
Como habreis podido comprobar al ver las propiedades generales de una capa o al hacer clic con el botón de
sobre el icono de una capa cualquiera, existen varios tipos de capas.
Capas normales
: Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos
las más usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas...
Capas Guía
: Son capas especiales de contenido específico. Se emplean en las animaciones de movimiento
único fin es marcar la trayectoria que debe seguir dicho objeto. Debido a que su misión es representar la trayecto
animado, su contenido suele ser una línea (recta, curva o con cualquier forma).
En esta imagen podemos ver el contenido de 2 capas. La
primera de ellas contiene la bola azul y la segunda contiene la
línea curva. La segunda capa la hemos definido como Capa Guía,
para que al realizar la animación de movimiento (esto lo veremos
en un tema posterior) su contenido NO se vea en la película, sino
que sirva de recorrido para la bola azul.
Es Importante recordar que el contenido de las Capas Guía no
se verá en la película final. Su efecto hará que la pelota azul se
desplace de un extremo de la línea al otro siguiendo esa ruta.
Bonito efecto ¿verdad?
Capas Guiadas (Guided Layers) : Cuando definimos una capa como capa guía, es necesario definir después u
Esto es, una capa que quedará afectada por la guía definida en la Capa guía.
Si no definimos una capa guiada, la capa guía no tendrá ningún efecto y si bien NO se verá en la película (por ser
tampoco provocará ningún efecto en las demás capas. En la imagen anterior, la bola azul se deberá encontrar en un
de lo contrario no seguirá la ruta marcada por la capa guía.
Las capas guía y las capas guiadas se relacionan entre sí de
un modo evidente. A cada capa guía le corresponden una serie de
capas guiadas.
Al asociar una capa guía con una capa guiada, el icono que
representa a la capa guía cambia, indicándonos que está
realizando correctamente su labor.
En la imagen podemos ver un ejemplo de capa guía y capa
guiada correctamente asociadas entre sí. (La capa llamada
aulaClic es, evidentemente, la capa Guiada)
El funcionamiento de las Capas Guía y sus utilidades lo veremos a fondo en el tema de las Animaciones de Movim
Capas Máscara
: Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las verem
El funcionamiento de estas capas es algo complejo (tampoco demasiado) y se analizará en cursos posteriores.
Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y sólo dejan que se
éstas que tapan los objetos situados en las capas máscara (son como filtros). Al igual que las capas guía, los objet
este tipo de capas tampoco se ven en la película final. Sí se verán los objetos de su correspondiente capa enmasc
estén "tapando".
Capas
Enmascaradas
: Estas
capas
funcionan
conjuntamente con las Capas máscaras. Al igual que las capas
guía y las capas guiadas deben ir asociadas unas a otras para
que su efecto sea correcto.
Sus objetos sí que son visibles en la película final, pero sólo
cuando algún objeto de la capa Máscara está sobre ellos.
Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los rectángulos azules forman p
Enmascarada y por tanto se verán en la película final (pero sólo lo que tape la capa máscara). El óvalo rojo está sit
Máscara y no se verá en la película, pero sólo se verá lo que él "tape". Así se emplean las máscaras...
Unidad 9.
Símbolos
Qué son los símbolos
Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos
proporciona Flash 8.
Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento
en que son creados, lo que permite que sean utilizados en varias ocasiones, ya sea en la misma o en
otra película.
Cómo crear un símbolo
La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de los
primeros pasos para crear una animación, como veremos más adelante.
El procedimiento es el siguiente:
Seleccionamos el objeto que queramos convertir en símbolo. Abrimos el panel de Propiedades
del Símbolo, accediendo al menú Insertar → Nuevo Símbolo o simplemente pulsando Ctrl + F8 o F8.
Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen. Introducimos
el nombre del símbolo que vamos a crear.
Esto al principio y mientras tengamos poco símbolos no será muy importante, pero más adelante
nos servirá para hacer referencia al objeto.
Sólo nos queda seleccionar el tipo de símbolo o comportamiento en que queremos convertir
nuestro objeto. Podemos elegir entre Clip de Película, Botón y Gráfico. Sus características y las
diferencias entre ellos las veremos en temas posteriores.
Bastará con pulsar Aceptar para tener nuestro símbolo creado.
Las Bibliotecas
En Flash 8 podemos
encontrar
dos
tipos
de
bibliotecas,
las
bibliotecas
comunes y de ejemplos y
aquellas asociadas a las
películas que hemos creado.
Todas ellas las tenemos a
nuestra disposición para utilizar
los símbolos que contienen.
Para
acceder
a
las
bibliotecas comunes que nos
ofrece
Flash
simplemente
tenemos que ir a la Barra de
Menús,Ventana → Bibliotecas
Comunes y seleccionar alguna
de las que se nos ofrecen. Las
hay de todo tipo de símbolos:
botones, clips o gráficos.
Para acceder a la líbrería de
símbolos de la película que
Los símbolos contenidos en las bibliotecas están identificados
por su nombre y por un icono que representa el tipo de símbolo
que representan:
estamos creando de nuevo
vamos
a
la
Barra
de
Menús,Ventana → Biblioteca.
En esta biblioteca aparecerán
todos los símbolos que hemos
creado hasta el momento.
Clip
Botón
Gráfico
Podemos comprobar como el
nuevo símbolo que hemos
creado en el ejercicio anterior
(Ejercicio Crear Símbolo) se ha
añadido a nuestra biblioteca
accediendo
a
ella
como
acabamos de indicar.
Diferencia entre símbolo e instancia
Como hemos comentado anteriormente, cuando
creamos un símbolo, Flash lo almacena en una biblioteca.
Pues bien, cada vez que utilicemos ese objeto en una
película, éste se convierte en una instancia.
Aunque parece que sean lo mismo, la importancia de esta
distinción es que cuando utilicemos un símbolo que hayamos
creado previamente en una película, al modificarlo se
modificará la instancia, mientras que el objeto seguirá
intacto, tal y como era en el momento de su creación, de
manera que podremos volverlo a utilizar en otro momento.
A la derecha tenéis un ejemplo de una biblioteca, en este
caso una biblioteca estándar de Flash. Cada elemento de la
biblioteca es un símbolo.
Para entender mejor este concepto te aconsejamos
realizar Ejercicio Modificar Instancia.
Modificar una Instancia
Hemos visto anteriormente que podemos modificar una instancia de un símbolo sin modificar el
símbolo original en cuestión. Sin embargo, al no tratarse de un gráfico vectorial (veremos que significa
esto más adelante), no podemos modificar las instancias con las herramientas de dibujo de Flash 8,
pero sí mediante el Panel de Propiedades, que permite la manipulación "externa" de la instancia.
Así, este panel, que como hemos visto resulta sumamente útil, no nos permite modificar la
estructura básica de la instancia, pero sí otras propiedades, esto es, podremos hacer que la instancia
tenga más brillo, pero no transformar una estrella en un círculo).
Panel Propiedades de Instancia
Para acceder al panel de propiedades de instancia, debemos seleccionar en primer lugar la
instancia que queramos modificar y posteriormente abrir el Panel Propiedades.
Si seleccionamos un objeto Flash que no se trate de un símbolo, el Panel Propiedades mostrará
las propiedades del objeto en cuestión, pero no las características propias de los símbolos (cambios
de color, intercambios etc...)
En el momento que seleccionemos un símbolo aparecerán una serie de propiedades y opciones
que comentamos a continuación:
Nombre del Símbolo y su icono correspondiente: El nombre de la instancia es muy
importante, pues permite identificarla durante la película. El icono asociado nos permite saber qué tipo
de símbolo es de un vistazo rápido.
Tipo de Símbolo o Comportamiento de la instancia. Por defecto se nos muestra el tipo al que
pertenecía el símbolo original pero nosotros podemos cambiarlo para que cambie su comportamiento,
aunque pueda seguir manteniendo su estructura inicial (en la imagen es "Clip de Película").
Nombre de la Instancia seleccionada (Instancia de:). Esta opción nos muestra el símbolo raíz
del que proviene la instancia que estamos modificando. Este símbolo se encuentra en la biblioteca y
cada cambio que sufra afecta a todas las instancias que de él se derivan.
Intercambiar: Esta opción merece especial atención, pues es muy útil y nos ahorrará mucho
trabajo cuando sea necesaria emplearla. Su función consiste en cambiar un símbolo cualquiera
por otro que tengamos en nuestra Biblioteca. Puede parecer simple, pero durante el desarrollo de
un trabajo profesional rápidamente surge la necesidad de probar situaciones y los diseños gráficos
definitivos no suelen estar disponibles hasta bien avanzado el proyecto.
Gracias a esta opción podemos trabajar tranquilamente con un "boceto" y sustituirlo de un modo
efectivo (el nuevo símbolo hereda las propiedades del antiguo símbolo, incluido el nombre de
instancia, las acciones que le afectarán, efectos gráficos etc...) cuando llegue el momento.
En la imagen se puede observar el panel Intercambiar Símbolo.
Este panel además, incorpora el botón Duplicar Símbolo
cuya funcionalidad es la que
nos podemos imaginar. Es muy útil cuando queremos hacer pruebas con un símbolo y no queremos
perderlo. Lo duplicamos y trabajamos tranquilamente con la copia.
Efectos sobre Instancias
Para acceder a los efectos aplicables sobre una instancia determinada,
debemos acudir nuevamente alPanel Propiedades, desde aquí podremos
acceder a todos los efectos que Flash nos proporciona. En el gráfico de la
derecha se puede observar la pestaña Color: del Panel Propiedades.
Hay varios tipos de efectos. Si el símbolo se acaba de crear o si no tiene
efecto asignado aparecerá en la pestaña Ninguno.
En el siguiente apartado comentamos los distintos efectos aplicables a una
instancia.
Unidad 9.
Símbolos
Efectos sobre Instancias
A continuación mostraremos los tipos de efectos. Para ello partiremos de la siguiente imagen
original:
Brillo. Se puede modificar su valor desde -100% al 100%, esto es, completamente oscuro
(negro) y completamente brillante (blanco). Puedes mover la barra deslizante o introducir su valor
directamente en la casilla.
Efecto Brillo del 50 %
Tinta. Esta opción permite cambiar el color de la instancia, pero puesto que, como dijimos, no
podemos modificar la instancia internamente, al variar el color en la pestaña Tinta o bien mediante los
valores RGB (cantidad de rojo, verde y azul), se cambiará el color de toda la instancia como si la
estuviéramos tiñendo o poniendo una capa imaginaria de un color determinado. El grosor o intensidad
de esta "capa" la podemos modificar en porcentaje mediante la primera pestaña que aparece a la
derecha.
Efecto Tinta del 50 % con el color verde (0 255 0)
Alfa. Representa el grado de visibilidad o transparencia que se tendrá de la instancia en
cuestión. También se puede modificar mediante valor directo o con la barra deslizante y es muy útil
para animaciones de aparición y desaparición de objetos. Si aplicamos un efecto alpha sobre una
instancia que está encima de otro objeto, el objeto que antes estaba tapado se podrá ver a través de
la instancia.
Efecto Alfa del 65 % sobre el pez naranja
Avanzado. Aquí podemos aplicar todos los efectos anteriores al mismo tiempo de manera más
precisa, con la ventaja de que aquí podemos ponerle un poco de cada uno, dando lugar a efectos de
gran vistosidad.
Sobre el pez superior. Hemos aplicado un efecto Alfa del 65 % y hemos reducido al 45 % la cantidad de verde
a la vez que hemos multiplicado la cantidad de azul por 111, obteniendo el tinte rosa translucido que se observa
Mientras modifiquemos los efectos sobre las instancias podremos ir viendo el resultado sobre el
propio escenario.
Unidad 10.
Gráficos
¿Qué es un gráfico?
Los Gráficos son símbolos que nos permiten representar objetos estáticos y animaciones
sencillas.
En caso de que utilicemos un símbolo gráfico para realizar una animación, debemos tener en
cuenta que ésta estará ligada a la línea de tiempo de la película en la que se encuentre. Es decir, la
animación se reproducirá siempre y cuando la película original también se esté reproduciendo.
Esto hace que, pese a tener su propia línea de tiempo, no puedan contener sonidos, controles ni
otros símbolos gráficos.
Así pues, normalmente utilizaremos los gráficos para imágenes estáticas o para cuando nos
convenga que una animación se reproduzca sólo cuando determinado frame de la línea de tiempo de
la película esté en marcha, ya que para los casos que hemos comentado anteriormente en los que un
gráfico no nos es útil, Flash nos ofrece otro tipo de símbolos como veremos en temas posteriores.
Tipos de Gráficos
Los gráficos pueden ser:
a) Estáticos: estos gráficos se mantienen sin cambios cuando pasa el tiempo. Estos gráficos
son los típicos en los fondos y en los objetos que no desempeñan ninguna función especial. Su
tamaño y por tanto, el tiempo de carga de este tipo de gráficos, aunque siempre dependerá de la
resolución, de sus dimensiones y de la forma en la que estén creados *, será en general reducido.
b) Animaciones: este tipo de gráfico varía su forma, posición u otras propiedades a medida
que va pasando el tiempo. Puesto que para realizar la animación se deben usar varios gráficos más
además del original o bien realizar determinadas acciones que modifiquen el estado inicial, el tamaño
de esta clase de gráficos, para las mismas dimensiones y forma de creación, será mucho mayor que
uno estático.
Por esto, aunque las animaciones dan a nuestra web un aspecto más bonito y espectacular
tienen dos inconvenientes:
1) Si se trata de un Mapa de Bits (ahora veremos que significa esto) la web puede llegar a
tener un tamaño excesivamente grande.
2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones típicas de
Flash, cuyo tamaño no es excesivo, el hecho de poner muchas animaciones puede llegar a "marear"
un poco al visitante de nuestro sitio y desviar su atención de lo que realmente importa, su contenido.
Creando un gráfico y comprobando sus propiedades
Como explicar teóricamente las propiedades de un gráfico resulta un tanto confuso, vamos a ver de
manera práctica lo que queremos explicar. Vamos a crear un gráfico en Flash y a comprobar las propiedades que
hemos comentado en el primer apartado del tema. Para ello, abre una nueva película Flash (Archivo → Nuevo).
Ahora tenemos que crear el objeto que queremos convertir en un símbolo Gráfico. Dibujemos, por ejemplo,
un óvalo en cualquier lugar del área de trabajo con la herramienta Óvalo
de la barra de herramientas de
dibujo y démosle un color de relleno que será lo que después animemos (Selecciona el fondo del óvalo y dale el
color azul mediante la herramienta Relleno de color.
).
Ya hemos creado nuestro objeto, vamos a convertirlo en un símbolo gráfico ¿lo recuerdas ?
Selecciona el objeto, ves al Menú Insertar → Convertir en Símbolo y conviértelo en un símbolo como ya
habíamos visto y dándole el nombre "GráficoAnimado"y seleccionando el Comportamiento Gráfico:
Ahora vamos a crear la animación del gráfico. Puesto que todavía no hemos visto a fondo las animaciones, la
vamos a realizar de una forma que quizá no sería la más apropiada la mayoría de las veces, pero nos servirá muy
bien para este ejemplo. Para ello selecciona nuestro gráfico y pulsa el botón derecho del ratón. Se desplegará un
menú, en el que seleccionaremos la opciónEditar para modificar el gráfico y acceder a su línea de tiempos.
Comprueba que estás en la línea de tiempos del gráfico (justo encima del escenario existe una secuencia que nos
indica en qué nivel nos encontramos. En la imagen inferior, se puede apreciar que nos encontramos en "Escena1
- Gráfico Animado" y, por tanto estamos DENTRO del gráfico (y la línea de tiempos que vemos es la del
gráfico, y no la de la película principal)
Crearemos a continuación nuevos fotogramas clave seleccionando uno a uno los frames número 2, 3 y 4
y pulsando F6cuando los seleccionemos.
Pulsa sobre el frame 2 y cámbiale el color de fondo al óvalo como hicimos antes. Haz lo mismo en los dos
siguientes frames.
Tu línea de tiempos debería tener este aspecto:
Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial (Película
principal) y podremos ver nuestro gráfico "desde fuera".
Ahora ya tenemos completo nuestro gráfico animado. ¿Qué crees que sucederá si reproducimos la
película?Comprobémoslo pulsando Control + Intro, se visualizará la película.
¿Y bien? Nada. Nada en absoluto. El óvalo sigue tal cual. ¿Por qué? La respuesta está en las características
de los gráficos que habíamos explicado: la línea de tiempos del gráfico está ligada a la de la película.
En este caso la línea de tiempos de la película tenía un solo frame, mientras que la del gráfico tenía 4, por
tanto, no le hemos dado tiempo al gráfico a desarrollar su animación; sólo ha reproducido un frame, el
primero.
¿Cómo podemos solucionarlo?
Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del reproductor de
Flash, selecciona el fotograma 5 de la película principal y pulsa F6. Ahora tenemos 5 fotogramas en la
película principal.
Pulsa de nuevo Control + Intro.
Introducir un Mapa de Bits
Los gráficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas que en
tus películas hayan mapas de bits lo más seguro es que prefieras crearlos y hacerlos más
espectaculares en otro programa más apropiado que Flash para el manejo de Bitmaps: Photoshop,
Fireworks o Photopaint.
Flash 8 permite importar mapas de bits de otros programas, cuando han sido guardados en
formatos gráfico GIF, JPG, TIFF y muchos más. También nos permite modificarlos en cierto modo.
Podemos cambiarle el tamaño y convertirlo en un símbolo para aprovechar las opciones que nos
ofrece Flash aunque, teniendo en cuenta qué es un bitmap, no podremos modificarlo "internamente"
pero podremos usarlo como un símbolo más.
Para importar un archivo de Mapa de
menú Archivo → Importar → Importar a escenario.
Bits
al
escenario
haz
clic
en
el
Se abrirá el cuadro de diálogo de Importar, allí deberás seleccionar el formato de imagen que
quieres importar seleccionándolo en el desplegable Tipo. Luego navega por las carpetas hasta
encontrarlo. Selecciónalo haciendo clic sobre él y pulsa el botón Abrir.
La imagen se incluirá en el escenario y estará lista para trabajar con ella
Introducir un archivo vectorial
Al igual que los mapas de bits, hay otros programas que trabajan con gráficos vectoriales como
también hace Flash 8.
Si
quere
mos
traer
un
archi
vo
vecto
rial
cread
o en
otro
progr
ama,
por
ejem
plo
Freeh
and,
pode
mos
hacer
lo de
mane
ra
muy
sencil
la.
Simplemente
accedemos
al
menú Archivo → Importar →Importar
a
escenario.
A
continuación, seleccionamos el tipo de archivo correspondiente al gráfico vectorial que queramos
importar. Por ejemplo FH11 del Freehand MX (11).
Pulsamos Abrir, y ya tenemos nuestro archivo vectorial.
Este archivo sí lo podremos modificar internamente ya que Flash es capaz de hacer gráficos de
este tipo.
Concretamente, el Freehand pertenece también a Macromedia, al igual que Flash, con lo que la
compatibilidad en este caso es total.
Exportar un objeto Flash como mapa de bits
La interfaz de dibujo de Flash, como hemos visto, resulta muy cómoda en determinadas ocasiones para
realizar dibujos. Así podría interesarnos utilizar Flash 8 para crear un dibujo y después utilizarlo en otros programas
o para cualquier otro uso.
Esto es perfectamente posible con Flash, ya que nos permite exportar un objeto de flash como un bitmap. Eso
sí, debemos tener en cuenta, como vimos en el tema básico, que la mayoría de mapas de bits no permiten
animaciones, por esto el objeto flash que exportemos no debería contener animación ya que ésta no se guardará.
Para realizarlo seleccionamos el objeto que
vamos a exportar
y accedemos al
menú Archivo → Exportar → Exportar Imagen... Luego introducimos en el campo Nombre el nombre que
queremos que tenga nuestro nuevo bitmap.
Seleccionamos el tipo de mapa de bits en que deseemos convertir nuestro objeto y pulsamos Guardar.
Ahora ya podemos usar nuestro objeto Flash como un bitmap.
Exportar un objeto Flash como animación
Como vimos en el tema básico hay tipos de archivo de mapa de bits que soportan
animaciones, como los GIF. Pues bien, con Flash también podemos crear una animación y exportarla
como un GIF animado. Sin embargo, como vimos, el GIF animado consiste en una secuencia de
imágenes mostradas secuencialmente y es por esto que para exportar un objeto Flash 8 como GIF
animado es necesario que todos los fotogramas de esta animación sean clave, ya que el GIF no
lo reconocerá en caso contrario y no veremos el efecto deseado.
Para exportar un símbolo y guardarlo como una imagen deberemos antes que nada seleccionarlo
con la herramienta Selección.
Una vez seleccionado deberemos hacer clic en el menú Archivo → Exportar → Exportar
imagen... y se abrirá un cuadro de diálogo.
En este cuadro de diálogo deberemos introducir el nombre del archivo que crearemos y seleccionar
en el desplegable Tipo el formato de imagen con el que queremos guardarlo.
Una vez rellenados todos los campos y elegida la carpeta donde se guardará el archivo pulsa el
botón Guardar y el archivo de imagen se creará y estrá listo si quieres incluirlo en una página web
estática o modificarlo con cualquier programa de imagen.
Unidad 11.
Clips de Película
¿Qué es un Clip de Película?
Un Clip de Película o simplemente Clip, es una película en si misma, como cualquiera de las
que podamos haber creado hasta el momento en este curso, pero que está incluida dentro de otra
película y, a su vez puede contener también películas insertadas en él.
Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su propia línea de
tiempo. Sin embargo, y a diferencia de los Gráficos (como veremos a continuación), esta línea
temporal no está ligada a la línea de tiempos del documento que lo contiene, de tal forma que su
ejecución es independiente.
Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o botón, así
como cualquier objeto creado con Flash, ya que un clip es realmente una película.
Otra de las ventajas de los Clips la encontramos cuando realizamos películas de gran
complejidad y tamaño, en la que intervienen un número muy elevado de fotogramas, debido a que en
la vista general del documento, nosotros sólo veremos un fotograma por clip, el cual puede estar
compuesto por muchos frames, lo que nos permitirá tener una mejor visión de cómo se desarrolla
nuestra animación, y una barra de tiempos más clara y "limpia".
Los Clips son una de las herramientas que dan mayor potencia a Flash 8, permitiéndonos crear
películas de gran complejidad y multiplicar los efectos visuales, ya que se pueden crear múltiples
movimientos independientes entre sí y crear conexiones entre los diferentes Clips de un documento.
Todas aquellas cosas que no podíamos hacer con un símbolo de tipo Gráfico, lo podemos hacer
con un Clip, además de poder realizar también todo aquello que nos permitía dicho símbolo. Por esto,
normalmente se utilizan los clips para cualquier tipo de animación debido a su gran flexibilidad,
dejando los gráficos sólo para imágenes estáticas.
Comprobar las propiedades de un Clip
Como hicimos con los gráficos, vamos a ver como la
línea de tiempo de un clip no está ligada a la línea de tiempo
del documento que lo contiene y, a la vez, veremos la
diferencia entre los clips y los símbolos Gráficos, que supone
una de las razones de la mayor utilización de los primeros en
lo que se refiere a la creación de animaciones.
Para ello abriremos una nueva película Flash
(Archivo → Nuevo). Después importaremos una imagen
cualquiera o bien crearemos una. La convertimos en Símbolo
(Insertar → Nuevo Símbolo...) y seleccionamos en
Comportamiento "Clip de Película"
Arrastramos al escenario (si no está ya allí) nuestro clip de
película.
Ahora tenemos nuestro Clip, insertado en nuestro nuevo
documento Flash. Es decir, tenemos dos películas, cada una
con su línea de tiempos.
Ahora veamos que son independientes, siguiendo un
proceso similar al que utilizamos con los símbolos de tipo
Gráfico.
Observa la línea de tiempos de la película principal y comprueba que sólo tiene un fotograma.
Editemos el Clip que insertamos en el documento (doble clic sobre el avión) y examinemos su
línea de tiempos. Aparecerá un único movieclip. Podemos realizar algo similar a lo realizado con los
gráficos, si bien vamos a crear una Animación de Movimiento (que se verá en el Tema 13). Nos
quedará así
:
Como vemos, la duración del clip que hemos insertado es mucho mayor que la película nueva que
lo contiene. Si el pez fuera un gráfico ya hemos visto que si intentáramos reproducir la película no
ocurriría nada. Veamos qué sucede siendo en este caso un Clip (esto también es válido si la
animación se ha creado del modo visto con los gráficos). (Control + Intro).
En este caso sí que vemos la animación porque en el momento en que el reproductor ha pasado
por el fotograma que contenía el clip, éste ha empezado a reproducirse y, puesto que su línea de
tiempos es independiente, ha seguido reproduciéndose a pesar de que la línea de tiempos principal
haya terminado, y lo continuará haciendo hasta que acabe su línea temporal propia.
Crear un nuevo Clip
Como hemos comentado, utilizaremos normalmente Clips para hacer animaciones. Aunque no lo
hayamos comentado antes, se puede crear un símbolo Flash de la nada, de forma que se quede en la
biblioteca y podamos editarlo cuando nos convenga. Esto puede ser interesante en los clips, ya que a
diferencia de los gráficos, su finalidad suele ser el movimiento y, en animaciones complejas, en
ocasiones se les asignan acciones especiales en las cuales, bien no es necesario crearlo en ese
momento, bien conviene dejar el clip vacío.
Por esto, es interesante aprender cómo crear un símbolo, en este caso un clip, de la nada para
después modificarlo.
Para insertar un clip vacío haz clic en Insertar → Nuevo símbolo y se abrirá el cuadro de diálogo
de Crear un nuevo símbolo.
Allí deberás darle un Nombre para identificarlo más tarde en la Biblioteca y seleccionar la
opción Clip de Película en el marcoTipo.
A partir de este momento tendremos un nuevo clip (vacío) al cual podremos acceder desde
nuestra Biblioteca (menú Ventana →Biblioteca), si hacemos clic derecho sobre él y
seleccionamos Edición, podremos editarlo y trabajar con él.
Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips de película
y veremos el potencial real de este tipo de símbolos.
Importar y Exportar Movie Clips de Biblioteca
Como para todos los
símbolos los Clips se
almacenan en la biblioteca
del documento cuando son
creados. Esto es muy
importante
en
muchos
casos ya que habitualmente
los
clips
son
muy
reutilizables. Para importar
clips de película debemos
abrir primero la biblioteca en
la que está contenido.
Hemos visto en el
tema de Símbolos, dos tipos
de bibliotecas: las que están
asociadas a documentos u
otras películas y las que nos
proporciona Flash 8. Pues
bien, no sólo podemos
utilizar
símbolos
del
mismo documento en el
que estamos sino que
podemos Importarlos de
otros
documentos
de
nuestro disco duro, lo que,
en el caso que nos ocupa,
puede resultar de gran
utilidad.
Obviamente
la
exportación
mediante
biblioteca
se
hace
automáticamente ya que
Flash deja los objetos
creados en la biblioteca
para que puedan ser
reutilizados.
Para importar un Clip
de un archivo del disco duro
debemos
ir
al
menúArchivo → Importar
→ Abrir
biblioteca
externa..., seleccionar el
Archivo Flash (.fla) del que
queremos
importar
sus
símbolos de biblioteca y
pulsar Abrir.
Aparecerá
la biblioteca con la lista de
los
símbolos
correspondientes
a
los
gráficos, botones y clips del
documento en cuestión.
Es importante destacar
que cuando insertemos un
clip de una biblioteca, se
insertarán a su vez todos los
símbolos que contenga,
incluidos los clips.
A
continuación
mostramos un ejemplo en el
que veremos cómo importar
clips de esta forma además
de
comprobar
las
propiedades de los clips y
sus líneas de tiempo
independientes mediante la
reproducción simultánea de
dos películas, creando un
efecto
bastante
vistoso
utilizando "aparentemente"
un sólo frame.
Unidad 12.
Botones
¿Qué es un Botón?
Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las
películas Flash con aquel que la está visualizando. Un botón, en Flash, es igual que cualquier botón
de cualquier entorno informático, sea web o cualquier otro.
Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie
de acciones. También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el
ratón por encima o cuando se les está pulsando, por ejemplo.
Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes
orientados a la web, que es el caso que nos ocupa, debemos crear programas relativamente grandes.
Esto es un inconveniente bastante grande ya que el uso de los botones es una práctica muy habitual
en el diseño en Internet. Sin embargo, en Flash no ocurre así. Su interfaz está diseñada de manera
especial para la creación de botones, lo que nos permite crear todos estos efectos de una manera
muy sencilla.
Al igual que los otros símbolos de Flash 8, los botones tienen su propia línea de tiempos. Esta es
independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno para cada
estado posible del botón.
Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre
él.
Sobre. Aspecto del botón cuando situamos el puntero sobre él.
Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado.
Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto
es importante sobre todo en botones compuestos sólo por texto como veremos más adelante.
Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de
espectacularidad y utilidad de estos símbolos, pero no es así.
Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo
Bitmap). La unión de las posibilidades de todos los símbolos dota a los botones de gran
espectacularidad.
Creación de un Botón
En la creación de un botón podemos considerar dos fases. En la primera vamos a convertir
nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo completarlo internamente, lo
que nos ayudará a entender mejor dicha estructura.
Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro botón con
las herramientas que nos ofrece Flash 8.
Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo, le daremos
el comportamiento Botón y asignaremos un nombre a nuestro nuevo símbolo.
De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo
completaremos internamente.
Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos
haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la
opción Editar.
Cuando tengamos delante la línea de tiempos del botón (observa que tiene el aspecto que hemos
mostrado anteriormente), seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona
activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.
Ahora ya podemos modificar el aspecto inicial del botón para cada posición del cursor y marcar el
área de acción del botón (fotograma Hit) en la que simplemente podremos dejar la misma figura que
la inicial (en este caso sólo es importante la forma del objeto, no los colores u otras cosas) o bien
dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentirá
aludido" nuestro botón.
Este es un botón muy básico, como veremos se pueden complicar mucho, pero para empezar nos
servirá con este.
Si una vez creado el botón queremos observar sus distintos estados y todavía no hemos terminado
la película entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo accediendo a
la Biblioteca de nuestra película y seleccionando el botón creado. Para ver lo que comentábamos
bastará con pulsar la tecla
situada a la derecha de la vista previa del símbolo.
Formas en los Botones
Los botones son símbolos que pueden tener multitud de formas. Si bien lo más habitual es ver
botones rectangulares, cuadrados y circulares, cuya creación es inmediata como vimos en el punto
anterior, también hay otros muchos tipos de botones que, pese a ser menos utilizados, es muy
habitual verlos en multitud de páginas web.
Entre estos están los creados mediante formas poligonales, aquellos que están formados por texto
únicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar más vistosidad ya que
algunos resultan más expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de
creación de botones que sus herramientas de dibujo nos ofrece.
Hay varias formas de botón también muy extendidas, como el botón con relieve sencillo o los
botones en forma de píldora. Puesto que existen muchas formas de conseguir estos efectos, a
continuación tienes un ejercicio paso a paso que muestra una forma de conseguir el relieve en un
botón rectangular
Botones de texto. La importancia de la zona activa
Los botones, como hemos visto, poseen un fotograma en el que indicamos la zona activa.
En los ejemplos vistos hasta el momento esto parecía poco útil, ya que es común pensar
que obviamente la zona activa que queremos que tenga nuestro botón es el área que
comprenden los límites de dicho botón.
Veamos como esto no es siempre tan trivial. Aquí se muestran dos botones creados en Flash 8.
Comprobemos lo que sucede al pasar el ratón por encima de uno y de otro.
Aunque parezcan iguales, la diferencia está en el momento en el que situamos el ratón en uno
de los huecos que existe entre letra y letra o, en general, todos aquellos lugares que no
pertenezcan al texto propiamente dicho.
En el texto de la izquierda el botón se activa sólo cuando situamos el puntero del ratón sobre
la letra. Esto puede ser incómodo y puede llevar a confusión, ya que aquel que navegue por
nuestras páginas simplemente querrá hacer uso del botón y no tener que intentar apuntar
concretamente a unas letras que quizá sean muy estrechas.
Esto es debido al mal uso de la zona activa. Para solucionar este problema sigue los siguientes pasos:
1. Haz doble clic sobre el botón para entrar en su modo de edición.
2. Haz clic sobre el fotograma de Zona Activa, si no hubiese ningún fotograma clave creado
3. haz clic sobre él y pulsa la tecla F6 para crear uno.
4. Una vez en el estado Zona Activa seleccionamos la herramienta Rectángulo y dibujamos
5. un rectángulo sobre el texto tapándolo en su totalidad. Así definiremos toda el área del
6. rectángulo como zona activa al ratón.
7. Vuelve al modo de edición normal pulsando el enlace a Escena 1 sobre la
8. Línea de tiempos.
Incluir un clip en un botón
La inclusión de clips de película en los botones puede dotar a éstos de más vistosidad.
Es habitual colocar un clip en el fotograma Sobre para indicar algún tipo de información extra o
una animación para ir más allá de un cambio de color.
También es común ver un clip de película actuando como un botón. Esto caso se puede hacer
por ejemplo poniendo el clip en el fotograma Reposo.
Veamos por ejemplo el botón siguiente:
Comprueba todos los estados del ratón. Por lo que nos dice el botón podemos intuir que empieza
algo, pero quizá no tengamos claro qué.
Si nosotros en determinado momento no queremos que esto ocurra en nuestras páginas web,
podemos recurrir a la introducción de un Clip en el botón, que explique un poco más acerca de lo que
pasará si pulsamos.
Incluir un Clip en un botón es muy sencillo. Tomando este ejemplo, sólo tendrás que, primero, hacer
doble clic sobre el botón para entrar en su modo de edición.
Haz clic en el estado Sobre para modificarlo. Selecciona el texto y pulsa la tecla SUPRIMIR para
eliminarlo.
Ahora abre la Biblioteca desde el menú Ventana → Biblioteca donde se encontrará el clip que
habremos creado previamente. Selecciónalo y arrástralo sobre el botón.
Ya esta listo, ahora cuando pases el ratón sobre el botón el clip de película empezará a
reproducirse.
Bitmaps y Botones
Además de clips, los botones también pueden contener símbolos de tipo Gráfico.
Puesto que, como ya hemos visto, todo lo que se puede hacer con un gráfico se puede hacer
con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya que están muy
extendidos como forma de expresión gráfica a lo largo y ancho de la Red.
Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer
poco interesante hacer uso de ellos en la creación de botones, pero no es así.
Básicamente podemos hacer dos cosas:
1) Incluir en cada uno de los fotogramas del botón un bitmap distinto, obteniendo un efecto como
el que se consigue con lenguajes como javascript (siempre considerando la mayor sencillez de Flash).
2) Aprovechar las propiedades de los Gráficos en Flash. Para esto, deberíamos importar primero
el Bitmap y después convertirlo a símbolo botón. Posteriormente lo editaríamos y, después de insertar
cada fotograma clave, convertiríamos su contenido a símbolo Gráfico. Una vez hecho esto, variando
los efectos de las instancias en Flash (Alfa, Tinta, Brillo) podremos conseguir efectos bastante buenos.
He aquí una pequeña muestra en la que sólo hemos utilizado un Bitmap de tipo GIF, sacado de
la Red y lo hemos convertido en un botón gráfico aplicándole un efecto Alfa (Transparencia) al estado
de reposo, lo que da la sensación de estar apagado (también podríamos haber aplicado brillo). En el
fotograma Sobre hemos dejado el GIF original para que al pasar sobre el botón de la sensación de
encenderse. Finalmente le hemos aumentado la cantidad de rojo en el fotograma Presionado para que
parezca estar incandescente.
Acciones en los botones
Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros
elementos de Flash 8 vamos a comentar dos de las más comunes:
1) Abrir una página web. Con esto conseguiremos abrir una página cualquiera de internet (o una
película Flash), lo que nos servirá para irnos desplazando por webs que contengan más de una
página, o permitir al usuario descargarse archivos entre otras cosas.
Para añadir una acción a un botón es necesario el uso de ActionScript (en el tema 17 se tratará
con mayor profundidad).
Por lo tanto, los pasos a seguir serán los siguientes:
1. Selecciona el botón haciendo clic sobre él, pues es a él al que irá asociada la acción.
2. Abre
el
panel Acciones haciendo
menú Ventana → Acciones.
clic
en
su
pestaña
haz
clic
o
desde
el
3. Haz clic en el botón Asistente de script.
4. En
el
marco
de
la
globales → Navegador/Red → getURL.
izquierda
sobre Funciones
5. Al seleccionar el comando getURL (que se encarga de crear un link a una página web)
se mostrarán sus respectivas opciones en la derecha del panel. Rellena los campos URL con
la página a la cual quieres vincular el botón y selecciona en que ventana quieres que se abra
el link en el desplegableVentana (_blank abrirá el link en una página nueva).
6. Cierra el panel de Acciones y el botón estará listo. Has añadido una acción a tu botón.
Y este es el resultado:
2) Controlar una película en curso. Si estamos reproduciendo una película Flash y queremos
permitir que el usuario la detenga, la ponga en marcha, avance, retroceda ...
Por ejemplo, para detener una película en curso simplemente debemos hacer que nuestro botón
en cuestión aparezca en el escenario de dicha película, seleccionarlo, y abrir el panel de acciones,
activando posteriormente la función Stop().
Tras hacer esto, deberíamos cambiar como hicimos en la animación anterior el momento en el
que se debe ejecutar la función, seleccionando el evento Presionar.
Arriba mostramos cómo debería quedar el panel de acciones del botón.
Ahora cada vez que presionemos este botón se detendrá la película en la que está incluido.
De forma muy parecida actuaríamos para otras acciones de control.
Incluir sonido en un botón
Si nuestras páginas van a tener sonido, el sonido en los botones es una parte fundamental.
Podemos hacer, por ejemplo que se activen sonidos al pulsar un botón.
Para ello, simplemente debemos editar nuestro botón y seleccionar el fotograma Presionado.
Ahora debemos insertar el sonido. Por ejemplo podríamos importar uno desde nuestro disco duro o
bien tomar alguno que ya tengamos en la biblioteca.
El resultado podría ser algo así:
Unidad 13.
Animaciones de Movimiento
La animación en Flash
Flash 8 es un programa básicamente orientado a la animación, de ahí la gran importancia de
este tema. No obstante, para ir creando animaciones cada vez más complicadas se necesita, sobre
todo, mucha práctica.
En este tema y los sucesivos mostraremos las técnicas básicas de animación en Flash. La unión
de estas técnicas será la que nos permita crear las más variadas y vistosas animaciones.
En el tema de la animación, Flash ofrece unas facilidades muy grandes, consiguiendo efectos
que normalmente requieren muchos conocimientos y espacio de almacenamiento para ser creados,
como es el caso por ejemplo de los GIF animados o lenguajes de programación como Java, de una
manera muy sencilla, sin necesidad de excesivos conocimientos y ocupando muy poco espacio en
disco.
Aunque Flash ofrece técnicas mejores, también se pueden crear animaciones a modo de GIF
animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las animaciones más
básicas y conviene conocerlas.
A continuación veremos distintos tipos de animaciones que el creador de películas Flash deberá
tomar como guía inicial. Cabe destacar que podremos aplicar varias de estas animaciones
colocándolas en distintas capas. Con esto es con lo que conseguiremos los efectos más
espectaculares a la par que útiles.
Es muy importante tener claro un concepto: no se debe crear animaciones en páginas que no
lo necesitan, ni crear animaciones que distraigan al que visualice nuestros documentos de lo
realmente importante, el mensaje.
Interpolación de Movimiento
Es la acción básica de las animaciones en Flash. Permite desplazar un símbolo Flash de un
lugar a otro del escenario, siendo necesarios únicamente dos fotogramas, lo que optimiza mucho el
rendimiento de la película.
Es importante destacar que para que una Interpolación de movimiento se ejecute
correctamente aquellos objetos que intervengan deberán haber sido previamente convertidos a
símbolo.
También se debe tener cuidado al realizar una Interpolación con dos símbolos que se
encuentren en la misma capa, ya que el motor de animación los agrupará como uno sólo y el
resultado no será el esperado. Por esto es conveniente asegurarse de dos cosas:
1) Separar en distintas capas los objetos fijos y los que estarán animados.
2) Poner también en distintas capas objetos que vayan a ser animados con direcciones o
formas distintas.
Pasemos pues al tema en cuestión. Una interpolación de movimiento, como hemos dicho, es el
desplazamiento de un símbolo de uno a otro punto del escenario. El hecho de que sólo se necesiten
dos fotogramas es debido a que Flash, únicamente con la posición inicial y final, "intuye" una
trayectoria en línea recta y la representa (veremos que también se pueden realizar movimientos no
rectilíneos).
Cuando realicemos la interpolación correctamente observaremos un aspecto como este en la
línea de tiempo.
Esto indica que la animación cambiará la posición del símbolo del fotograma 1 hasta la posición
del mismo símbolo en el fotograma 20, utilizando precisamente 20 fotogramas. El número de
fotogramas que se usen en la interpolación de movimiento indicará las sub etapas de que constará la
animación. Cuantas más sub etapas más sensación de "continuidad" (menos saltos bruscos) pero a la
vez menos velocidad en el movimiento.
La velocidad en el movimiento de las películas la podemos cambiar también modificando su
parámetro en la barra de tiempos,
anteriormente.
pero esto no cambiará lo que hemos comentado
La velocidad está expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo
doble clic en el lugar que hemos indicado de la barra de tiempos. A mayor valor más velocidad, pero
se deben poner siempre suficientes fotogramas para que se desarrolle la animación como queremos.
En la animación del tema 1 podrás ver cómo realizar una interpolación de movimiento.
Mantén en mente que cuando realices una interpolación de movimiento el fotograma inicial y final
deberán ser diferentes, en caso contrario no se creará ningún tipo de animación.
Observa en las siguientes imágenes dónde está situada la pelota en el primer fotograma de la
animación y su posición final en el último fotograma:
Si el objeto con el que queremos hacer la interpolación de movimiento no está convertido a
símbolo nos encontraremos con algo así...
... y la animación no funcionará.
También podemos realizar la interpolación de otra forma, sin convertir previamente el objeto a
símbolo, ya que Flash lo convierte a símbolo automáticamente si no lo hacemos, dándole el nombre
"Animar" más un número. Basta con hacer clic con el botón derecho sobre el fotograma que contiene
nuestro objeto (en la línea de tiempos) y seleccionar Crear Interpolación de Movimiento. Después,
al crear un fotograma clave en otro lugar de la línea de tiempos se creará automáticamente la
interpolación, y sólo deberemos modificar este último fotograma para producir la animación.
Esto quizá no sea lo más conveniente en películas grandes, debido a lo que ya comentamos de
la gran cantidad de símbolos que pueden aparecer y la confusión que crean muchos símbolos con
nombres parecidos.
Flash también nos permite crear animaciones con trayectorias rectilíneas en varias fases, con
direcciones distintas. Para ello, una vez creada la interpolación, basta con pinchar en uno de los
fotogramas intermedios y crear un nuevo fotograma clave. Si movemos el símbolo en ese fotograma a
otro lugar del escenario y reproducimos, la animación irá primero a esa posición y después a la
posición final.
Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias
consecutivas más.
Acabamos de ver las interpolaciones de movimiento como un mecanismo para desplazar un
símbolo Flash de un lado a otro del escenario. Sin embargo, podemos aprovechar este comando del
programa para realizar animaciones en las que nuestro objeto aumente o disminuya de manera
progresiva su tamaño.
Esto es muy sencillo con Flash 8, basta con modificar la instancia del símbolo en el último
fotograma de la interpolación de movimiento, pero esta vez cambiándole el tamaño.
Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de tamaño se
producirá mientras el objeto se desplaza. También podemos hacer el cambio de tamaño en varias
fases o secuencias encadenadas como en las interpolaciones de movimiento comunes.
El ejemplo siguiente incorpora estas tres características de la Interpolación de Movimiento de Flash
8.
Y la línea de tiempos que nos queda es algo tan sencillo como esto:
Animación de Textos
Es indudable que para comunicar algún mensaje, en la mayoría de las ocasiones, no basta con
imágenes o iconos, y es aquí donde el texto cobra gran importancia. No obstante, se debe tener
cuidado con la animación de los textos, ya que resulta bastante complicado leer un texto que se
desplaza o cambia de tamaño.
Por este motivo, un texto animado debería estar sólo en las presentaciones o bien formar parte
de una animación corta y, lo que es más importante no debería estar reproduciéndose infinitamente.
En las presentaciones, se utilizan multitud de efectos que veremos más adelante. Sin embargo,
con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las opciones más utilizadas
es separar las letras de los textos y animarlas independientemente
Animación de Líneas
Una buena animación no tiene que porqué estar compuesta sólo por textos o imágenes
espectaculares. En ocasiones conviene darle a la película un aire más sencillo o añadir determinados
efectos que la hagan vistosa sin necesidad de cargar mucho la película visualmente, y en cuanto a
tamaño de archivo se refiere.
Esto lo podemos conseguir simplemente animando líneas y haciendo que se muevan por el
escenario. Esta técnica nos permite dar dinamismo a la animación o crear formas distintas a lo largo
de su recorrido.
Son especialmente útiles y vistosas en fondos oscuros y se suelen usar para formar rectángulos
que se aprovechan para insertar imágenes.
A la derecha podemos ver un ejemplo de este tipo de presentaciones.
Para
crear
esta
animación deberás crear
tantas
capas
como
animaciones de líneas
vayas a crear, en el
ejemplo hemos creado 4
capas. Una para el
movimiento de líneas de
abajo a arriba, otra para
el movimiento de arriba a
abajo, otra para izquierda
a derecha y finalmente
una última para el
movimiento de derecha a
izquierda.
También
crearemos
una capa que situaremos
en la posición superior
donde colocaremos las
imágenes que formarán
el mensaje de bienvenida.
El funcionamiento de la animación es claro, deberemos crear interpolaciones de movimiento para
cada una de las capas de líneas que en su posición final emplazaremos en su lado contrario de la
pantalla, por ejemplo, las líneas situadas en un principio en la parte inferior al final de la animación se
encontrarán en la parte superior. Realizaremos esto con las 4 capas de líneas.
En la capa Imágenes crearemos animaciones que harán aparecer las imágenes que forman el
mensaje de bienvenida de forma secuencial, es decir, del fotograma 5 al 10 se mostrará una imagen,
del 11 al 16 otra y la última la mostraremos del fotograma 17 al 22. De esta forma, habiendo creado
los fotogramas claves en cada uno de los fotogramas de inicio (5, 11 y 17), arrastraremos desde
la Biblioteca (menú Ventana→ Biblioteca) las imágenes para colocarlas en su lugar en el fotograma.
Estas imágenes se mostrarán únicamente durante el tiempo que dure el fotograma para desaparecer
más tarde dando paso a la otra imagen.
Consejo: Si quieres añadir un fondo deberás hacerlo en una nueva capa y colocar ésta debajo de
todas las existentes.
Interpolación mediante Guía de Movimiento
Anteriormente hemos visto como las interpolaciones de movimiento desplazaban símbolos
Flash en línea recta. Puesto que esto supone una cierta limitación Flash 8 incluye la Guía de
movimiento.
Una guía de movimiento es una capa especial que marca una trayectoria para los símbolos de la
capa a la que afecta, para que dichos símbolos la sigan, durante el movimiento. Esta capa es invisible
durante la reproducción y permite dibujar cualquier tipo de dibujo vectorial, que nos permitirá crear
un movimiento no forzosamente rectilíneo.
Crear un movimiento mediante esta técnica es bastante sencillo, basta con crear una
interpolación de movimiento en una capa, seleccionarla (debemos asegurarnos de esto para evitar
que la guía se asocie a otra capa), y colocar el símbolo del último fotograma al final del trazado que
realizaremos previamente en la capa de la guía. No es necesario colocarlos al principio del trazado ya
que Flash lo hace automáticamente.
Vemos como la capa a la que se asocia la guía aparece debajo y alineada a la derecha.
Crear interpolaciones de movimiento guiadas es muy sencillo, Lo primero que deberás hacer es
crear una animación de movimiento, para ello:
1. Crea un fotograma clave pulsando F6 e inserta en él el símbolo que quieres que realice
el movimiento.
2. Crea un nuevo fotograma clave para marcar la duración de la animación, por ejemplo, si
creaste el primer fotograma en la posición 5, crea el nuevo en la posición 25, así tendrás una
animación que durará 20 fotogramas.
3. Selecciona todos los fotogramas que intervengan en la animación y haz clic derecho
sobre uno de ellos en la Línea de tiempos. Selecciona la opción Crear interpolación de
movimiento.
Una vez creada la interpolación y con la capa seleccionada pulsa el botón
Añadir guía de
movimiento. Se creará una nueva capa asociada a aquella donde tienes creada la animación.
Ahora el procedimiento es fácil, selecciona la herramienta Lápiz y dibuja en la capa guía el
recorrido que debe seguir el símbolo.
Cuando lo hayas creado selecciona el último fotograma de la animación y coloca el símbolo en su
punto final. Recuerda que el símbolo debe estar siempre en contacto con la línea de guía tanto en el
primer como último fotogramas.
Unidad 14.
Animación por Forma
Interpolación por Forma
Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino su forma
de manera progresiva (o ambas cosas a la vez), Flash 8 nos ofrece la técnica de la Interpolación por
Forma, que consiste simplemente en ir transformando el contorno de un objeto creado en su interfaz
hasta que sea igual que el contorno de otro objeto distinto.
Realizar una interpolación por forma, es muy semejante a crear una interpolación de movimiento.
Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma
anterior. Así como hacíamos en el tema anterior, sólo necesitamos dos fotogramas clave.
Colocaremos en el primer fotograma el objeto con su aspecto original, y en el último la apariencia final
que queremos que tenga.
Esta vez, es importante destacar que para que una Interpolación por Forma funcione como
es debido aquellos objetos que intervengan deberán ser objetos vectoriales (no símbolos
Flash).
Debemos tener también dos aspectos en cuenta:
1) Separar en distintas capas los objetos fijos y los que estarán animados.
2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas,
ya que Flash transformará todos los objetos vectoriales del primer fotograma en aquello que haya en
el último fotograma de la interpolación.
Si realizamos la interpolación por forma correctamente la línea de tiempos tendrá este aspecto:
Las consideraciones sobre la velocidad y el número de fotogramas que vimos en las
interpolaciones de movimiento se pueden aplicar también a la interpolación por forma y a cualquier
animación hecha con Flash.
Si hay algún fallo en los parámetros necesarios para que la interpolación se ejecute bien, como
por ejemplo, que uno de los objetos en capa sea un símbolo, se mostrará algo así en la línea de
tiempos:
Para crear una interpolación de forma deberás actuar de forma similar que para crear una de
movimiento. Una vez tengas los fotogramas de inicio y fin de la animación deberás seleccionar todos
los fotogramas que participen en ella y abrir el panelPropiedades.
Allí deberás seleccionar la opción Forma en el desplegable Animar. Y ya habrás terminado.
Fácil, ¿verdad?
A la derecha podemos ver el resultado del proceso anterior.
También podemos realizar interpolaciones de forma en varias fases de manera análoga a
como lo hacíamos en el tema anterior. De esta forma podemos hacer que un determinado objeto de
convierta en otro antes de adoptar su forma definitiva.
Ahora, a la derecha podemos ver el ejemplo anterior pero haciendo que se transforme
previamente en un triángulo antes de pasar a ser cuadrado.
Lo hemos conseguido simplemente haciendo clic con el botón derecho sobre el fotograma 10 y
creando un fotograma clave (Insertar Fotograma Clave). Luego sólo tenemos que borrar el objeto
que aparece en el escenario y dibujar el triángulo.
Transformar Textos
Debido a la importancia de los textos, es importante comentar las aplicaciones que tienen los
cambios de forma sobre ellos. Añadimos así una posibilidad más para realizar logotipos o
presentaciones vistosas y transmitir información de manera espectacular.
Recordemos que para realizar una interpolación de forma es necesario que el objeto sea de tipo
vectorial. Este no es el caso de los textos, que se basan en fuentes y son creados en función de los
valores de la tabla ASCII y un tipo de letra asociado. Para solucionar este problema,
deberemos transformar el texto previamente en un objeto vectorial, es decir, como si hubiéramos
repasado con la herramienta lápiz el contorno de cada letra.
¿Posibilidades de esta técnica en textos? Muchísimas, aunque puede llevar a confusiones si
no se hace adecuadamente. Por ejemplo debemos asegurarnos de dar suficientes fotogramas
de margen para que se note la transición. También es conveniente dar un tiempo para que cada
letra sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la película, porque
si no lo hacemos corremos el riesgo de que la animación parezca sólo un garabato
revolviéndose.
Una de las posibilidades es "deletrear" una palabra de manera tan vistosa como vemos a la
izquierda. Podemos comprobar como simplemente cambiando el color del objeto final, se
produce una transición también en el color. Observemos a su vez como cuando se forma cada
letra, mantenemos su imagen el tiempo suficiente como habíamos indicado que era necesario.
En este otro ejemplo se observa la transición de colores más claramente y, además,
observamos transiciones de forma a texto.
Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar de un modo especial
dado que un objeto de texto no se considera como una forma. Para ello, y una vez tengamos la animación
creada con una forma en el fotograma inicial y un texto en el final veremos que la interpolación aparece
como incorrecta. Deberemos, entonces seleccionar el fotograma donde se encuentre el texto y
seleccionarlo.
Haremos clic en el menú Modificar → Separar para convertir el texto en un conjunto de puntos que
creen una forma. Y la interpolación ya estará lista.
Consejo: Cuando vayas a aplicar el comando Separar sobre una palabra completa observa que primero lo que hace es separa
letras inidividuales. Deberás ejecutar de nuevo el comando para que estas letras se separen y creen una forma.
Consejos de Forma
Como ocurría en el tema anterior, a veces no nos viene bien el tipo de acción que hace Flash
por defecto. En las interpolaciones de movimiento lo solucionábamos mediante la guía de movimiento.
En el caso de la interpolación por forma, es posible que Flash realice la transformación de los
objetos de una forma que no es la que esperábamos y que no nos conviene para llevar a cabo nuestro
propósito.
Pues bien, para estos casos Flash 8 nos ofrece una herramienta para solucionarlo: los consejos
de forma.
Los consejos de forma son marcas que indican a Flash qué puntos de la imagen inicial son los
que deben corresponderse con otros tantos puntos en la figura final. Al indicar esto, estamos
controlando las formas intermedias que se generarán.
Para añadir un consejo de forma a una interpolación nos situaremos en el fotograma inicial y
pulsaremos Control + Shift + H (o bien ir al menú Modificar → Forma → Añadir Consejo de
Forma).
Aparecerá un círculo de color con una letra dentro en el centro de la
figura. Su color será rojo mientras no sea colocado en el contorno del objeto
(los extremos, si es que no hay contorno), que es donde tiene efecto. Cuando
están colocados sobre una curva (vector) que forma un contorno son
amarillos para el objeto inicial y verdes para el final.
Dicho círculo debemos colocarlo en un punto del contorno de la figura
inicial. Automáticamente aparecerá un punto con la misma letra dentro en la
figura final (este punto será el que se deba corresponder con el punto del
objeto de origen) y deberemos colocarlo en el punto que deseemos del
contorno.
El primer consejo de forma está marcado con la letra "a". Si creamos más de uno serán
marcados con las letras "b", "c", "d" ... hasta la z, que es el límite (26 como máximo).
Ahora realicemos el seguimiento de otro ejemplo, tenemos la siguiente animación (sin consejos de
forma):
Vamos a insertar un consejo de forma en el punto indicado en los gráficos situados un poco más
abajo:
Fijémonos en las posiciones inicial y final del Consejo de Forma y en el seguimiento del mismo,
posteriormente comprobaremos que Flash realiza lo que le pedimos:
Punto Inicial
Punto Final
Seguimiento
Como vemos el punto que hemos marcado en el objeto inicial se acaba correspondiendo con
con el punto que marcamos en el final, con lo que hemos conseguido forzar la transformación que
nosotros queríamos.
Unidad 15.
Efectos sobre Animaciones
Introducción
Si no te parecen suficientes las interpolaciones de forma y de movimiento, y quieres realizar
animaciones más complejas, puedes combinar las interpolaciones de movimiento con los efectos y
transformaciones que se pueden realizar sobre los símbolos que las componen y aplicar efectos sobre
las mismas interpolaciones.
Una vez comprendidas todas las técnicas de este tema, estaremos en disposición de realizar
todo tipo de animaciones en Flash. Sólo tendremos que poner un poco de imaginación porque, como
hemos visto y veremos, el programa nos facilitará enormemente el trabajo.
Efectos sobre la Interpolación de Movimiento
Para describir todos los efectos que podemos aplicar sobre una interpolación de movimiento
previamente creada, sin necesidad de tocar ningún símbolo, nos centraremos en el Panel
Propiedades, cuando seleccionemos un Fotograma que presente animaciones de Movimiento, los
atributos de la animación a modificar aparecerán en este Panel.
En el campo <Etiqueta de fotograma> podemos darle un nombre a la interpolación que nos
ayudará a identificarla en la barra de tiempos. Aparecerá a lo largo de todos los fotogramas que la
componen.
Escalar: Esta casilla, al activarla, permite un incremento/decremento progresivo del tamaño del
objeto inicial cuando sus dimensiones son distintas a las del objeto que está en la posición final de la
animación.
Todas las interpolaciones de movimiento que hemos hecho hasta ahora tenían esta opción
activada aunque no lo hayamos indicado expresamente. Flash la activa por defecto, ya que es lo más
normal. De no ser así podríamos encontrarnos con una animación como la siguiente.
Como vemos Flash hace el desplazamiento de posición, pero el cambio de tamaño se
produce bruscamente en el último fotograma.
Aceleración: Esta barra deslizante nos permite determinar la aceleración del primer tramo
de la animación. Podemos elegir valores entre -100 y 100. Si el valor de aceleración es negativo el
símbolo se moverá despacio primero e irá acelerando de manera progresiva. Si dicho valor es positivo
provocará un efecto opuesto.
Podemos por ejemplo dar la impresión de que un objeto, por ejemplo un coche, arranca, va
cogiendo velocidad poco a poco (valor -100) y después va frenando y disminuyendo su velocidad
hasta pararse.
Girar: Esta opción es muy interesante ya que nos da la posibilidad de aplicar una rotación al
objeto mientras se produce el movimiento. Para que surta efecto debemos seleccionar el primer
fotograma de la interpolación.
Se nos presenta un submenú con cuatro opciones:
Ninguna. Con esto le indicamos a Flash que no aplique rotación alguna sobre el
símbolo en movimiento.
Automática. Marcando esta opción hacemos que se produzca la rotación en aquella
dirección que necesite menos movimientos. Si cuesta lo mismo hacerlo por un lado o y por
el otro, es decir, cuando la imagen inicial y final está en la misma posición (en cuanto a
rotación se refiere), el hecho de activar esta opción no tendrá ningún efecto.
Esta opción es la que está marcada por defecto y por eso no hemos visto hasta ahora un objeto
rotar en nuestras interpolaciones. Para que hubiera tenido efecto deberíamos haber rotado la última
imagen de la interpolación.
Este es el resultado que hemos obtenido, como podemos comprobar, ha recorrido el camino
más corto, ya que el 6 ha pasado progresivamente de su posición anterior a la que ocupaba el 1
de la otra forma el 6 habría pasado por las posiciones anteriores del 5, 4, 3, 2 y 1, siendo la
longitud del movimiento mucho mayor.
Antihorario (antes CCMR). Permite realizar el número de rotaciones completas en la
dirección contraria a la de las agujas del reloj, que le indiquemos en la casilla de la derecha.
Tanto si la última imagen tiene rotación como si no.
En caso de que tuviera rotación la imagen final, esta se le añadiría.
Horario (antes CMR). Realiza lo mismo que la opción anterior pero en la dirección
de las agujas del reloj (hacia la derecha).
Orientar según trazado: Si activamos esta casilla, cuando la interpolación sobre la que
actuamos es una interpolación por guía de movimiento, Flash hará que el símbolo tome la dirección de
la guía, rotando para orientarse en la misma posición que adopta la línea.
Para entender mejor este concepto, recordemos la última animación del tema 13, en la que
el avión hacía una especie de "looping". Resultaba un poco extraño ver la animación porque los
aviones no van marcha atrás y, en esta ocasión y en muchas otras, no es conveniente que los objetos
se muevan solo en el escenario quedando el mismo símbolo inmóvil, como si levitara.
Con este comando solucionaremos esto, y el resultado sería este.
Sincronizar (Sinc): Con esto evitamos que no se reproduzca el último bucle de un símbolo
gráfico incluido en nuestra película con una animación en su línea de tiempos interna, cuando el
número de fotogramas que ocupa en la línea principal no es múltiplo de los fotogramas que contiene
la instancia.
Ajustar: Si activamos esta opción, el centro de la instancia (identificado con una cruz) se
ajustará forzosamente a la guía que hemos marcado en la correspondiente capa.
De hecho si intentamos mover la instancia en un fotograma de la animación, Flash la volverá
a colocar sobre la guía de manera automática.
Efectos sobre el Símbolo Interpolado
Ya vimos en temas pasados cómo aplicar efectos sobre símbolos y vimos que se podía
lograr efectos vistosos. No obstante, cuando los efectos muestran su verdadera potencia es cuando el
símbolo forma parte de una animación.
Para explicar y demostrar las posibilidades de estos efectos vamos a
abrir el Panel Propiedades, que nos mostrará, en la pestaña Color los
posibles efectos a aplicar si seleccionamos una instancia de un símbolo
cualquiera de nuestra película.
Podemos aplicar los efectos sobre cualquier símbolo de cualquier fotograma de la
animación, tanto sobre el fotograma inicial o el final como en los intermedios. En este último caso,
deberemos convertir a fotograma clave aquel que contenga la instancia y después aplicar el efecto..
Para entender bien lo que sigue, es necesario controlar la aplicación de efectos sobre instancias.
Esto lo vimos en el Tema 9 y por eso omitiremos detalles sobre cómo aplicar efectos concretos sobre
símbolos.
Efecto Brillo
El efecto de brillo, como su propio nombre indica, nos viene muy bien para simular el hecho de
que algún objeto se encienda o brille, o por el contrario se apague o pierda brillo.
En el ejemplo que tenemos a la izquierda, hemos intentado simular este efecto. Para ello
hemos creado un semáforo de luces intermitentes de color ámbar.
Como se puede ver, las luces se encienden y apagan progresivamente de manera alternada.
Para conseguir esto hemos creado una interpolación para cada luz, formada por tres fotogramas
claves. El tercero lo hemos colocado justo en el medio de la secuencia de fotogramas. A la primera
luz y a la última le hemos dado el mismo valor de brillo, y en la del medio le hemos dado un valor
más alto o más bajo según fuera el símbolo de abajo o el de arriba.
Como los movimientos de las luces son distintos e independientes los hemos colocado en
distintas capas.
Para la luz superior los valores de brillo fueron: 0 para el primer fot. clave, -46 para el central y
0 para el del medio.
Y en la luz inferior al contrario: 0 para el primer fot. clave, -46 para el central y 0 para el del
medio.
Efecto Tinta
El efecto de Tinta, tiene un amplio marco de posibilidades de uso. Es muy usado en textos
y en botones, por ejemplo haciendo que cambien progresivamente de color al pasarles el ratón
por encima o simplemente efectos de cambio de color en presentaciones.
El tintar colores supone un toque alegre y muy vistos en las presentaciones y si se usan
varios efectos, combinados adecuadamente, dota de un ritmo rápido a la animación, como una
explosión de color que sorprenda al receptor de la película.
Otro interesante uso de este efecto es simular la proyección de una luz de color sobre un
objeto que se va acercando al foco. Veamos un ejemplo de esto.
Vemos como al acercarse el avión a la luz roja del Sol, éste lo ilumina con una luz roja.
Hemos aplicado a la instancia del avión del último fotograma de su interpolación de
movimiento un efecto de tinte rojo con una intensidad del 60%. Lo mismo hemos hecho en el
centro del Sol pero con dos fases, poniendo en el fotograma central un efecto de tinte granate
del 25%.
La corona solar es simplemente una interpolación de forma en cuatro fases.
Efecto Transparencia (Alfa)
Este es probablemente el efecto más utilizado debido a la versatilidad del hecho de controlar el
grado de visibilidad de los objetos. Podemos, por ejemplo, simular un foco apuntando a un escenario
o, lo más común, hacer aparecer objetos de la nada y también hacer que se desvanezcan poco a
poco.
Unidad 16.
Generar y Publicar Películas
Consideraciones sobre el tamaño de las películas
Antes de aventurarnos a publicar nuestra película para que otros la vean, sobretodo si la vamos
a publicar en una página web, donde el tamaño de descarga es de vital importancia, debemos tener
en cuenta los siguientes aspectos:
CONSIDERACIONES EN EL DIBUJO:
Aunque los degradados queden muy vistosos, también requieren más memoria, por lo
que debemos evitar su uso excesivo, en la medida de lo posible.
La herramienta Pincel gasta más memoria que el resto de herramientas de dibujo, por
lo que deberíamos elegir estas últimas en la medida de lo posible.
Hemos visto que la animación de líneas es bastante útil. Sin embargo el uso
de líneas que no sean las definidas por defecto y que usamos en el capítulo que hemos comentado,
hará que el tamaño de la descarga aumente. Por tanto evitemos las líneas discontinuas, de puntos ...
Dibujar las curvas con el menor número de nodos posible.
CONSIDERACIONES EN LA ORGANIZACIÓN:
Agrupar los objetos que estén relacionados, con el comando Modificar → Agrupar.
Si hemos creado un objeto que va a aparecer varias veces, deberíamos convertirlo a
símbolo, ya que como hemos visto, Flash lo colocará en la biblioteca y cada vez que quiera mostrarlo,
hará referencia a una única posición de memoria.
Ya hemos comentado el mayor tamaño de los mapas de bits, lo que hace que
debamos minimizar el número de apariciones de éstos en nuestra película.
CONSIDERACIONES EN LOS TEXTOS:
Hemos podido observar, cuando manejábamos textos, que cuando abrimos el menú
de tipos de letras, las tres primeras son siempre "_sans", "_serif" y "_typewriter". Esto no es una
casualidad. Están colocadas ahí para resaltar que estas fuentes ocupan un mínimo de memoria, por lo
que se recomienda su uso.
CONSIDERACIONES EN LA ANIMACIÓN:
Utilizar lo más que podamos las interpolaciones de movimiento y las guías para
reducir el número de fotogramas clave y el tamaño de la película.
Evitar el uso de la interpolación por forma para animaciones de cambio de color,
cuando sea posible.
Independientemente de la optimización que hagamos, a veces no se puede evitar que el tamaño
de la película aumente. Es recomendable entonces hacer un preloader (precarga) cuando la
película que queramos publicar sea de tamaño superior a unos 80KB.
Preloader. Cargar la Película entera antes de reproducirla
Un preloader se usa principalmente para evitar la carga parcial de la película, mientras esta se
está reproduciendo, lo que, en ocasiones en las que la película es de un tamaño considerable, hace
que la película se vea entrecortada.
Normalmente, los preloaders se hacen vistosos para que el observador no se aburra y deje de
lado la opción de visitar nuestra web. Suelen llevar alguna animación sencilla que se va reproduciendo
mientras se está cargando simultáneamente la película principal, mucho más grande.
Se pueden complicar mucho más, pero nosotros haremos uno sencillo que nos sirva para
entender bien el concepto, y la manera de hacerlo.
Partimos de que ya tenemos nuestra película terminada. Si queremos saber su tamaño podemos
ir a Archivo →Configuración de publicación seleccionar la pestaña Flash, y marcar la
casilla Generar Informe de Tamaño. Si pulsamos el botón Publicar, aparecerá en nuestro directorio
un archivo de texto donde se explica con detalle el tamaño de nuestra película.
Ahora
insertaremos
una
nueva
escena (Insertar → Escena). Deberá ser la primera que
se ejecute. Para asegurarnos de ello accedemos
a Ventana → Otros Paneles → Escena, y en la
ventana que aparece arrastramos la escena que
acabamos de crear hasta que esté la primera. En
nuestro ejemplo le hemos llamado "Preloader" y hemos
supuesto que la Escena con la película se llama
"Pelicula" (lógicamente). Deberá quedar algo similar a lo
que muestra la imagen.
En la escena recién creada insertaremos otra
capa, de manera que nos queden dos capas a las que
llamaremos, "Acción" y "Cargando".
En la capa "Cargando" crearemos una
animación sencilla. Por ejemplo, hagámosle honor al
título y escribamos "Cargando ..."; puedes aplicarle la
animación que prefieras, siempre que no sea muy
compleja.
En la capa "Acción" diseñaremos el "corazón" del preloader. Vamos a hacer que la
animación de nuestra escena de carga se ejecute repetidas veces, hasta que se haya cargado la
escena que contiene la película principal, mediante las acciones ActionScript 2 de Flash 8. Para ello
abrimos el panel de Acciones.
Vamos a seleccionar el último fotograma e introducimos la acción gotoAndPlay, que por
defecto nos escribirá "gotoAndPlay()" y nos situará el cursor en el interior del paréntesis para que
introduzcamos la escena y el fotograma al que se deberá ir al ejecutar dicha acción. En nuestro caso
queremos ir al fotograma 1 de la escena "Pelicula", con lo que escribiremos lo
siguiente:gotoAndPlay("Pelicula", 1);
Ahora seleccionamos el penúltimo fotograma, que es el que impedirá que se llegue al
último (o sea, que repetirá el bucle que muestra la animación "cargando") cuando aún no se haya
cargado la película por completo. Para hacer esto, elegimos la acción_framesloaded (fotogramas
cargados) y la acción _totalframes (fotogramas totales) e indicamos en el panel acciones lo que
queremos hacer. Sería algo como "Cuando el número de fotogramas cargados sea mayor o igual al
número de fotogramas totales, entonces comenzamos a reproducir la película" (aunque sea
teóricamente imposible que el número de fotogramas cargados sea mayor que el de fotogramas
totales, nunca está de más incluir esta condición por si acaso Flash contabiliza internamente los
fotogramas de un modo diferente). Podríamos escribir algo como lo que muestra la imagen:
Con esto, hacemos que aparezca en la pantalla el texto "cargando" y mientras se reproduce
su animación, iremos comprobando periódicamente si la película principal está cargada por completo,
si no lo está seguiremos mostrando el texto "cargando" hasta que la comprobación que hacemos en el
último fotograma nos indique que nuestra película se ha cargado. En ese momento, dejaremos que la
animación del preloader llegue a su último fotograma, que contiene la acción que nos llevará a
reproducir la película.
Y esto es todo lo que hay que hacer para crear un preloader (aunque por supuesto se puede
hacer más sofisticado), con lo que los visitantes ya no huirán de nuestra web.
Distribución como archivo swf en un reproductor autónomo
Para
poder
distribuir
películas creadas en Flash que la
gente pueda ver, son necesarias
dos cosas: crear un archivo SWF
y que el que la quiera visualizar
tenga instalado el Reproductor de
Flash.
Flash nos ofrece varias
opciones y funcionalidades para
la creación de un archivo SWF.
Estas opciones se pueden ver en
el panel de Configuración de
Publicación, al que podemos
acceder
mediante
el
menúArchivo → Configuración
de Publicación (PestañaFlash).
Veamos cuáles son estas
opciones:
Versión: Si
queremos
publicar nuestra película para que
sea vista con versiones anteriores
de Flash, debemos seleccionar
aquí la versión deseada.
Orden
de
Carga: Aquí
indicamos el orden en que
queremos que se cargue el
documento.
Si seleccionamos De abajo a
arriba se cargará primero el
contenido de la capa inferior (de
la capa 1 hasta la última capa que
tengamos en el documento).
Por
el
contrario,
si
seleccionamos De
arriba
a
abajo se cargará primero el
contenido de la capa superior (de
la última capa que tengamos en el
documento hasta la capa 1).
Este comando es importante
debido a la propiedad de Flash de
ir reproduciendo la película
conforme
los
objetos
son
cargados. Así, en caso de que
nos interese que aparezcan antes
unos
objetos
que
otros
seleccionaremos uno o el otro.
Versión
de
ActionScript: El
uso
de
ActionScript 2 nos permitirá usar
las novedades relativas a objetos,
clases etc... Si nuestra película
sólo usa acciones sencillas
podemos dejar en esta pestaña la
opción ActionScript 1.0
Generar
Informe
de
tamaño: Esta opción la hemos
usado en el apartado anterior. Si
la activamos, se creará un archivo
de texto con una relación
detallada
del
tamaño
del
documento.
Proteger
Frente
a
Importación: Activando
está
casilla
conseguiremos
que
cuando otro usuario (o nosotros
mismos) queramos importarla no
podamos
o
tengamos
que
introducir una contraseña si se ha
escogido alguna.
Omitir acciones de Trazado: Las acciones de traza se emplean para comprobar el correcto
funcionamiento de la película durante la creación de esta (durante las pruebas). También se
consideran trazas los comentarios que insertemos en el código Action Script. Si activamos esta señal,
la película creada no los incluirá, ocupará menos tamaño y ahorraremos tiempo innecesario. Es
recomendable cuando se publique la película de un modo definitivo.
Depuración Permitida: Permite que se pueda depurar el archivo SWF. También exige la
introducción de una contraseña ya que se debe tener permiso del creador para Importar el archivo y
depurarlo.
Comprimir película: Comprime la película al máximo posible.
Calidad JPEG: Si en el panel de propiedades del mapa de bits no hemos indicado una
compresión concreta, aquí podremos determinar su grado de compresión, que determinará a su vez el
espacio ocupado en memoria por este tipo de imágenes. A mayor compresión, menos espacio en
memoria ocupará la imagen, pero también su calidad será menor.
Establecer Flujo de Audio o Evento de Audio: Esta opción nos permite acceder al Panel
"Configuración de Sonido" desde donde podemos configurar, para cada tipo de sonidos, sus
características.
Suplantar configuración de sonido: Con esto se suplantarán los niveles de compresión
seleccionados para cada archivo de sonido de nuestro documento.
Distribución para Páginas Web
Esta es una parte importante, ya que normalmente las películas de Flash están orientadas a la
publicación vía Web.
Para publicar una película Flash en Internet de manera que forme parte de una página web
deberemos insertarla en un archivo típico de páginas web cuyo lenguaje de programación sea del
estilo del HTML. Para ello debemos atender a las opciones de publicación HTML que nos ofrece
Flash, y que nos ayudarán a que nuestra película se visualice como realmente queremos.
Las opciones de este tipo de publicación están en Archivo → Configuración de
Publicación... (Pestaña HTML).
Plantilla: Para
incrustar
una película Flash en un
documento HTML, hay que
escribir una serie de códigos de
programa algo complejos y
laboriosos de hacer a mano.
Para facilitarnos esta tarea
Flash
hace
esto
automáticamente pero, puesto
que cada web es distinta y
nuestras necesidades van a ser
muy distintas, los codigos
también
serán
muchos
y
distintos, por esto Flash incluye
Plantillas, que crean este código
automáticamente según el tipo
de publicación que deseemos:
En el botón Información que
está a la derecha de la pestaña
"Plantilla" se nos muestra
información muy útil sobre cada
tipo de plantilla. Estas son las
plantillas más comunes:
Sólo Flash: Esta es la opción
predeterminada y utiliza el
reproductor Flash 8.
Flash
con
FSCommand: Imprescindible
cuando se usen FSCommands.
Mapa de Imágenes: Si hemos
incluido
una
Image
Map
(imágenes
completas
que
ejecutan
distintas
acciones
según la coordenada que se
pulse) debemos activar esta
opción.
Pocket
PC
2003: Especialmente diseñado
para Pocket Internet Explorer en
Pocket PC 2003.
QuickTime: Permite
una película QuickTime.
incluir
etc ...
Detectar
Versión
de
Flash: Desde aquí podemos
seleccionar si queremos que
nuestra película detecte la
existencia o no existencia del
plugin de Flash en el ordenador
del usuario, así como las páginas
web donde se insertará el código
encargado de comprobarlo y las
páginas web a las que se irá en
caso de disponer del Plugin o no
disponer de él.
Dimensiones: Especifica la
unidad en la que mediremos las
dimensiones del Documento.
Anchura X Altura: Aquí
introduciremos la anchura y altura,
teniendo en cuenta que a veces un
objeto más grande que estas
dimensiones provocará un cambio
en éstas.
Reproducción: Permite
realizar determinados cambios en
cuanto a la reproducción de la
película:
Pausa
al
Comienzo: Permite que sea el
usuario quien haga que se inicie la
reproducción,
que
inicialmente
aparecerá detenida.
Reproducción
Indefinida: Cuando la película
termine, volverá a empezar desde
el
principio.
Esto
lo
hará
infinitamente.
Visualizar
Menú: Permite que al hacer el
usuario clic con el botón derecho
del ratón sobre la película, el menú
emergente
tenga
todas
las
opciones por defecto. Si la
desactivamos sólo aparecerá la
opción "Acerca de Flash".
Fuentes
de
Dispositivo: Sustituye las fuentes
utilizadas en los textos sin
animación de la película por las
fuentes predeterminadas en la
máquina de quien la visualice.
Calidad: Aquí podemos modificar la calidad de visualización de la película, que depende del
suavizado de la imagen y el tiempo de reproducción. Las opciones son:
Baja No hay suavizado. El tiempo de reproducción es el de máxima velocidad.
Baja Automática: El reproductor detecta si la máquina soporta en cada instante un ligero
suavizado, si lo soporta, lo aplica. El tiempo sigue siendo muy rápido.
Alta Automática: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna limitación,
siempre dará preferencia a la velocidad.
Media: Valores intermedios de velocidad y suavizado. No suaviza los bitmaps.
Alta: Usa siempre el suavizado, los mapas de bits se suavizan sólo si no hay animación. Da
preferencia a la buena visualización.
Óptima: Se suaviza todo, incluidos los mapas de bits en cualquier caso. Total preferencia de
la apariencia frente a la velocidad.
Modo de Ventana: Opciones para la reproducción dentro de las ventanas de Windows:
Ventana: Se reproduce la película en la ventana de la web en la que está insertada.
Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrás de la película
no se vean (en páginas DHTML).
Transparente sin Ventanas: Es el opuesto al anterior. Permite que los objetos situados detrás
se vean.
Alineación HTML: Posición relativa de la película dentro de la página web HTML. Tenemos
varias opciones:
Predeterminada: Centra la película en la página. Si no cabe se cortan los extremos.
Izquierda: Alineación a la izquierda. También se recortan los bordes si no cabe.
Derecha: Alineación a la derecha.
Superior: Alineación en el borde superior de la página.
Inferior: Alineación en el borde inferior de la página.
Escala: Si hemos especificado el tamaño en píxeles o en tanto por ciento, podemos decirle a
Flash cómo distribuir la película en el rectángulo que hemos decidido que la contenga:
Predeterminada: Se ve toda la película guardando las proporciones originales.
Sin Borde: Recorta (en caso de que la película sea más grande que el rectángulo) todo lo que
sobre con el fin de mantener las proporciones.
Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la película
ocupe el rectángulo completo.
Alineación Flash: Se hace necesario alinear la película cuando esta no tiene las mismas
dimensiones que el rectángulo definido. Las opciones son:
Alineación Horizontal: Podemos escoger entre Centro, Izquierda o Derecha.
Alineación Vertical: Podemos escoger entre Centro, Superior o Inferior.
Mostrar Mensajes de advertencia: Permite que se muestren los posibles mensajes de error de
código Action Script.
Unidad 17.
Introducción a ActionScript 2
¿Qué es el ActionScript?
El ActionScript es el lenguaje de programación que ha utilizado Macromedia Flash desde sus
comienzos, y que por supuesto, emplea Flash 8. A grandes rasgos, podemos decir que el ActionScript
nos permitirá realizar con Flash 8 todo lo que nos propongamos, ya que nos da el control absoluto de
todo lo que rodea a una película Flash. Absolutamente de todo.
Sin embargo, en estos dos temas sólo vamos a ver una pequeña introducción a ActionScript que
servirá para sentar las bases que permitirán empezar a trabajar con ActionScript. Enseñar a
programar con ActionScript requeriría otro curso completo. Profundizar en el conocimiento de este
lenguaje queda por cuenta del lector. Recomendamos seguir la estupenda Ayuda incluida en Flash 8.
Todo lo referente a este capítulo hace referencia a la versión 2 de ActionScript, última versión de
este lenguaje de programación lanzada por Macromedia e incorporada en Flash MX 2004.
Características generales del ActionScript
Como ya hemos comentado, el ActionScript es el lenguaje de programación propio de
Flash, tal y como el Lingo lo es de Macromedia Director, por ejemplo. El ActionScript está basado en
la especificación ECMA-262, al igual que otros lenguajes como Javascript.
El ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir que
no hará falta crear un programa completo para conseguir resultados, normalmente la aplicación de
fragmentos de código ActionScript a los objetos existentes en nuestras películas nos permiten
alcanzar nuestros objetivos.
El ActionScript es un lenguaje de programación orientado a objetos, tiene similitudes,
por tanto, con lenguajes tales como los usados en el Microsoft Visual Basic, en el Borland Delphi etc...
y aunque, evidentemente, no tiene la potencia de un lenguaje puramente orientado a objetos derivado
del C o del Pascal como los anteriores, cada versión se acerca más a un lenguaje de este tipo. Así, la
versión 2.0 estrenada en Flash MX 2004 es mucho más potente y mucho más "orientada a objetos"
que su anterior versión 1.0
El ActionScript presenta muchísimos parecidos con el Javascript; si conoce Javascript,
la sintaxis y el estilo de ActionScript le resultarán muy familiares. Las diferencias entre ambos
lenguajes las puede encontrar en la ayuda que acompaña al Flash 8.
En la mayor parte de las ocasiones, no será necesario "programar" realmente, Flash 8
pone a nuestra disposición una impresionante colección de "funciones" (de momento entenderemos
"funciones" como "código ActionScript que realiza una función determinada") ya implementadas que
realizan lo que buscamos, bastará con colocarlas en el lugar adecuado.
El Panel Acciones
En Flash 8, el Panel Acciones sirve para programar scripts con ActionScript. Esto es, que todo
lo que introzcamos en dicho Panel se verá reflejado después en nuestra película. Debemos tener claro
desde un principio que el Panel Acciones puede hacer referencia a Fotogramas u objetos, de modo
que el código ActionScript introducido afectará tan sólo a aquello a lo que referencia el Panel. Por
ejemplo, en la imagen inferior, se puede distinguir que el Panel Acciones hace referencia
al Fotograma 1 de la Capa 1.
El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda facilitada por Flash que
nos da acceso de un modo rápido y muy cómodo a todas las acciones, objetos, propiedades etc... que
Flash tiene predefinidos. Estos elementos están divididos en carpetas, que contienen a su vez más
carpetas clasificando de un modo eficaz todo lo que Flash pone a nuestra disposición. Para insertarlos
en nuestro script bastará con un doble clic sobre el elemento elegido.
Posteriormente veremos con detalle los distintos elementos de este Panel.
A la parte derecha tenemos el espacio para colocar nuestro script, aquí aparecerá lo que vayamos
insertando. También incluye herramientas de utilidad, como la búsqueda de palabras, la posibilidad de
insertar puntos de corte, la herramienta Revisar Sintaxis y la ayuda de Flash para ActionScript.
El Panel Acciones de Flash 8, al contrario que el de Flash MX 2004, no tiene únicamente un
modo de edición, por lo que tiene mucho más en común con el mod en el que se trabajaba con Flash
MX que con la anterior versión Flash MX 2004.
La libertad del modo "Experto" es total y por tanto, también lo es la posibilidad de comenter fallos,
para asegurarnos de que nuestro script es correcto, al entrar en Modo Experto nos aparecerá un icono
con el siguiente aspecto:
Al pulsarlo Flash revisa nuestro código en busca de posibles errores,
indicándonos, en su caso, la línea que presente el error y en qué consiste éste.
Es un fallo común pasarse horas buscando porqué nuestra película no funciona correctamente y
que el motivo sea que un error de sintaxis ha invalidado todo el código existente en un fotograma, que
actua como si no hubiera NADA DE CÓDIGO en él. Pongamos pues, mucha atención en esto y
revisemos el código concienzudamente.
El uso del modo en asistente es mucho más sencillo para ello pulsa el botón Asistente de Script y
selecciona los comandos que quieras incluir, apareceran las opciones que deberas rellenar para que
estos comandos funcionen correctamente y el código se generará automaticamente. Esta es una muy
buena utilidad recuperada que permitira a los usuarios que acaban de empezar el uso de este
lenguaje.
Aun así es recomendable siempre repasar el código y así irnos familiarizando con él y de este modo
poder poco a poco crear nuestro propio código en modo Experto, lo que nos dará myor flexibilidad a la
hora de crear nuestras películas.
Los operadores
Entrando un poco más a fondo en la sintaxis y el manejo del ActionScript, vamos a comenzar
hablando de los operadores, por ser la parte más elemental de una acción de ActionScript (y de
muchísimos otros lenguajes de programación).
Un operador es un tipo de carácter que realiza una acción especial dentro de una expresión de
ActionScript. Una expresión no es más que un conjunto de operadores, variables y constantes
relacionados entre sí de un cierto modo. Flash 8 sacará un resultado de toda expresión que encuentre
en nuestra película. Por ejemplo:
x = 3 ; --> Es una expresión cuyo resultado será asignarle a la variable ' x ' el valor 3 (que es una
constante)
y = 5 + x ; --> Es una expresión cuyo resultado será asignarle a la variable ' y ' la suma de la
constante 5 y la variable ' x ' que sabemos que vale 3 (porque le hemos asignado este valor antes).
Por tanto, el resultado de esta expresión es asignarle a ' y ' el valor 8 (3 + 5).
Flash nos permite usar multitud de operadores, vamos a comentar los más comunes. El lector
puede acceder a los demás (y a estos) desde el Panel Acciones en la carpeta Operadores. Vamos a
clasificar los operadores tal y cómo lo hace Flash 8.
Operadores Aritméticos
+ : Suma. Este operador sirve, como es de esperar, para sumar 2 valores.
- : Resta. Realiza la operación esperada de restar 2 valores.
* : Multiplicación. Realiza el producto de 2 valores
/ : División. Es la clásica operación de dividir. Al contrario que en algunos lenguajes de
programación, este operador sí que realiza la división completa (incluyendo decimales)
% : Operador Resto. Este operador, no muy conocido en matemática, es un clásico de la
programación. Devuelve el resto entre 2 números. Ejemplo: 4 % 3 = 1, 4 % 2 = 0.
Operadores de Asignación
= : Igual. Este es el operador más importante de esta categoría y sin duda, uno de los más usados.
Almacena el valor situado en la parte derecha de una expresión en la variable situada en la parte
izquierda. Ej: x = 2 + 3. Almacena en la variable x el valor de (2 + 3).
El resto de operadores de esta categoría son en realidad formas de realizar varias operaciones de
una vez, describiremos uno a modo de ejemplo, el resto funcionan exactamente igual.
+= : MásIgual. Este operador asigna a la expresión situada a la izquierda del operador el valor
resultante de sumar la expresión situada a la parte derecha con la expresión de la parte
izquierda. Ejemplo: (Suponemos que x = 4 e y = 3) entonces, la expresión x += y provocaría que x
pasase a valer el resultado de sumar ( 3 + 4 ). Por tanto, la expresión x += y es equivalente a hacer: x
= x + y.
Operadores de Comparación
== : Probar Igualdad. Este operador sirve para comprobar si 2 expresiones son iguales. Si lo son,
el valor de la expresión de comparación es 'true', que significa 'verdadero'. Por motivos semánticos,
decir que una expresión es true es equivalente a decir que vale 1. Si no son iguales, devuelve 'false'
(falso) o el valor 0.
Esta posibilidad de comprobar si una expresión es igual a otra, nos será muy útil para comprobar
muchas cosas durante nuestra película y en función de ellas, hacer unas cosas u otras.
Pondremos un ejemplo, imaginemos que le pedimos a un usuario que introduzca su edad en un
campo de texto de nuestra película flash. A ese campo le llamamos "edad_usuario". Le hacemos
pulsar un botón "Continuar" y en ese momento comprobamos su edad, si tiene 20 años, le decimos
una cosa, de lo contrario, le decimos otra distinta. Bastaría con hacer algo así:
if ( edad_usuario == 20 ) {
dar_mensaje_1; }
else { dar_mensaje_2; }
Aquí lo que estamos diciendo es lo siguiente: "Si edad_usuario es igual a 20, entonces damos el
mensaje 1, sino lo es, damos el mensaje 2.
El significado de 'if' y 'else' lo veremos más adelante, de modo que no nos preocupemos por no
entender perfectamente el código escrito arriba. También faltaría, lógicamente, crear las funciones
"dar_mensaje_1" y "dar_mensaje_2".
> : Mayor que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es mayor que
la de la derecha. De lo contrario, devuelve false (0).
< : Menor que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es menor que
la de la derecha. De lo contrario, devuelve false (0).
>= : Mayor o igual que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es
mayor o igual que la de la derecha. De lo contrario, devuelve false (0).
<= : Menor o igual que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es
menor o igual que la de la derecha. De lo contrario, devuelve false (0).
!= : Probar Desigualdad. Devuelve como resultado verdadero (1) si la expresión de la izquierda es
diferente a la de la derecha. De lo contrario, devuelve false (0). Ejemplo: 3 != 4 provocaría que la
expresión total valdría 1 (true o verdadero). Pues 3 es, efectivamente, distinto de 4.
Otros Operadores
( ) : Paréntesis. Sirven, como es de esperar, para agrupar términos y dar preferencias en las
operaciones (al igual que en las matemáticas). También se usa, como ya vimos, para pasar
parámetros a funciones o acciones. (Éstos deben ir entre paréntesis)
" " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a considerarse una cadena de
caracteres, por lo que las funciones y acciones que afectan exclusivamente a las cadenas de
caracteres pasan a afectar también al elemento entre comillas. Así por ejemplo, mientras que x
representa una variable con un valor determinado, si escribimos "x", estamos escribiendo en realidad
el carácter o la letra "x". Por tanto, podremos añadirlo a una palabra, compararlo con otras letras,
escribirlo por pantalla etc.. pero ya no será una variable.
El resto de operadores no se usan tanto, su funcionalidad y definición puede consultarse en la
propia ayuda de Flash 8.
Las Acciones
Las Acciones son funciones predefinidas de ActionScript, es decir: Flash 8 las crea, y
nosotros sólo tenemos que usarlas de la manera que se nos indica. No tenemos que definir las
funciones ni nada por el estilo, ni siquiera necesitamos saber cómo están hechas... Lo
importante es que están listas para usar, lo que facilita el uso de este lenguaje de
programación y sobre todo, haga muy rápido comenzar a programar.
Al igual que en el caso anterior, explicaremos las Acciones más importantes. Para una
referencia más completa, recomendamos mirar la ayuda del programa.
Definiremos las acciones escribiendo su cabecera (nombre + parámetros con un
nombre genérico) para después explicar qué es cada parámetro.
Acciones - Control de Película
Estas acciones se emplean, como su nombre indica, para controlar el flujo de nuestra
película, esto es, para indicar a Flash en todo momento qué fotograma tiene que mostrar,
cuándo tiene que parar, dónde seguir etc... Veámoslas y lo entenderemos mejor:
gotoAndPlay / goto: Esta acción será, probablemente la que más useis durante la
realización de vuestras películas. La acción que realiza consiste en mover la cabeza lectora al
fotograma que le indiquemos. La cabeza lectora es lo que determina qué fotograma de nuestra
película se está reproduciendo en cada momento. Si, por ejemplo, lo movemos del fotograma
1 al 25, lo que veremos instantáneamente será el fotograma 25 y la película continuará
reproduciéndose a partir de ahí.
Uso:
gotoAndPlay(escena, fotograma):
escena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir entre
comillas dobles.
fotograma: Número o nombre del fotograma al que queremos enviar la cabeza lectora. Si es
un nombre, debe ir entre comillas dobles, si es un número, NO.
Ejemplo:
gotoAndPlay("Escena2", 7); --> Esta acción lleva la cabeza lectora al fotograma 7 de la
escena llamada "Escena2".
Play: Da comienzo a la reproducción de la película, generalmente porque algo la ha
detenido.
Uso:
Play();
No tiene Parámetros.
Stop: Detiene la reproducción de la película. Se puede usar en un fotograma, cuando
queramos detenernos en él (porque es un menú, por ejemplo), en un botón, (para que detenga
la película) etc...
Uso:
Stop();
No tiene Parámetros.
Acciones - Navegador / Red
Estas acciones tiene diversas funciones, describimos las más importantes:
fscommand: Esta acción, es capaz de ejecutar ciertos comandos muy potentes. Lo más
cómodo es pasar a Modo Básico (sino estábamos ya) e insertarla, nos aparecerá una pestaña
con los posibles comandos que admite:
- fullscreen : Si se activa pone nuestra película a pantalla completa. Muy útil para
presentaciones en CD-Rom, por ejemplo.
- allowscale: Controla el redimensionamiento de los objetos insertados en la película cuando
el usuario estira los bordes de la misma (o de la página web en la que se encuentre)
¿Queremos mantener las proporciones? Este comando nos permite controlarlo.
- showmenú: Si has visto el menú que aparece al pulsar el botón derecho del ratón sobre
una película Flash, seguro que has pensado en hacerlo desaparecer ... puede que no interese
que los usuarios puedan moverse a sus anchas por nuestra película. Ejecutando esta
sentencia del modo adecuado (false), podremos ocultarlo.
- trepallkeys: Sirve para detectar las pulsaciones de todas las teclas durante la reproducción
de nuestras películas.
Todas estas alternativas, comparten modo de uso, veámoslo:
Uso:
fscommand("comando","true / false")
comando: El comando a ejecutar (fullscreen, allowscale, etc...)
true / false: Aquí debemos escribir true o false, según queramos desactivar la opción o
activarla.
Ejemplo:
fscommand("fullscreen", "true"); -> Activa la pantalla completa.
getURL: Esta acción se emplea para abrir el navegador web y abrir la página web que
deseemos.
Uso:
getURL(url , ventana , "variables")
url: Dirección web a la que queremos acceder (se abrirá una ventana).
ventana: Parámetro OPCIONAL. Modo en el que queremos abrir la ventana (en la ventana
actual (_self) en otra nueva (_blank) etc...)
variables: Parámetro OPCIONAL, puede haber varios. Si la página lo permite (es ASP, PHP
etc...) podemos enviarle variables.
Ejemplo:
getURL("http://www.aulaclic.com", "_blank");
loadMovie / loadMovieNum: Esta acción permite cargar nuevas películas Flash o
imágenes en nuestra película de forma dinámica (la película se cargará cuando se lo
indiquemos, y no antes).
Uso:
loadMovieNum(url , nivel / destino, variables)
url: Dirección absoluta donde está situada la película SWF o la imagen JPEG
nivel / destino: Nivel donde cargaremos la película, teniendo en cuenta que el nivel básico
es el 0, luego va el 1 y así sucesivamente. Cada nivel superior se sitúa delante del anterior y
toma el control. Si lo usamos como destino, aquí deberemos introducir el nombre del movieclip
donde cargaremos la película o el nombre del marco si estamos cargando un fichero SWF en
una página HTML con marcos.
variables: Parámetro OPCIONAL. Podemos enviar variables.
Ejemplo:
loadMovieNum("MiPeli2.swf", 0) --> Cargamos la película "MiPeli2.swf" en el nivel principal.
No enviamos variables.
Acciones - Condiciones
Estas acciones sirven para controlar la lógica de la película. Se puede decir que nos
permiten "hablar" con Flash para indicarle lo que debe hacer ante distintas situaciones. Por
ejemplo, ahora que conocemos muchas Acciones, ¿Cómo indicarle a Flash que "si la variable
x = 3, entonces vaya al fotograma 5, y sino, vaya al fotograma 10"?. Sabemos comparar,
sabemos ir a los fotogramas, pero no sabemos decirle a Flash "Si pasa esto, haz una cosa, y
sino, haz la otra...". Veamos cómo decírselo:
if ... else: Si partimos de que la traducción literal de if es "si..." y la de else es "sino ...", nos
encontramos de repente con todas las herramientas para decirle a Flash: "si (pasa una
condicion) {haz esto} sino {haz lo otro}"
Veamos antes que nada su Uso para comprenderlo mejor:
Uso:
if (condición) {sentencias1 ... } else {sentencias2 ... }
if: Indica que acción que viene a continuación es una condicional
condicion: Indica una condicion que DEBE cumplirse para que sucedan las acciones
indicadas en "sentencias1". Si éstas no se cumplen, entonces lo que sucede es lo especificado
en las acciones indicadas en "sentencias2".
Para que una condición se cumpla, debe tener como resultado true, o lo que es lo
mismo, verdadero, o lo que es lo mismo, 1. De ahí la importancia de los operadores de
comparación y el valor que devuelven.
sentencias1: Conjunto de acciones que sucederán si la condición se evalúa como
verdadera. Si hay más de 1, deben incluirse todas ENTRE LLAVES
else: Especifica la alternativa si condicion se evalúa a falso. Es OPTATIVO. Sino existe, y
no se cumple la condición, no se hará nada, pues no lo hemos especificado.
sentencias2: Conjunto de acciones que sucederán si la condición se evalúa como falsa. Si
hay más de 1, deben incluirse todas ENTRE LLAVES
Ejemplo:
if (x == 2) {gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al fotograma 2,
sino, no hacemos nada
if (y > 7) { Stop(); } else {gotoAndPlay(1); } --> si la variable y es mayor que 7, paramos la
película, sino, volvemos al fotograma 1.
Los Objetos
Los Objetos, como ya hemos visto en el tema básico, son instancias de una determinada
clase. Esto es, son representantes de una clase ya definida. Así, son objetos, por ejemplo, un
botón, un clip de película, un gráfico o un sonido ... es decir, que prácticamente TODO es un
OBJETO en Flash 8.
Vamos a ver los objetos más usados en Flash y una breve descripción de cada uno de ellos.
Como ya se ha explicado en el tema básico, cada objeto tiene una serie de Propiedades (que
veremos después) y unos Métodos y eventos, que dan funcionalidad a los objetos. Cuando un
componente de Flash pasa a ser un objeto, automáticamente pasa a tener todas las
propiedades definidas por Flash para ese objeto y pasa a reaccionar ante los Métodos y
eventos que tiene definidos. Podeis encontrar una lista con todas las propiedades, métodos y
eventos de los objetos en el Panel Acciones.
Objeto "Button" (Botón)
Los objetos de tipo Botón tienen 4 estados, como ya se ha visto en el capítulo
correspondiente y reaccionan ante métodos especiales como "OnRollOver", "OnPress" ... que
permitirán que sucedan cosas cuando el usuario haga clic sobre estos botones, pase el ratón
por encima etc...
Cuando nos interese que una imagen que hayamos diseñado se comporte como un botón,
bastará convertirla a botón (del modo visto en el capítulo correspondiente) y ya podremos usar
los eventos típicos de un botón.
Objeto "MovieClip" (Clip de Película)
Cuando necesitemos crear una película Flash dentro de otra película, pero no queramos
tener 2 ficheros separados ni molestarnos en cargar una película u otra, deberemos crear un
objeto movieclip. Entre sus propiedades especiales destaca que los objetos "clip de película"
tienen, internamente, una línea de tiempos que corre INDEPENDIENTEMENTE de la línea de
tiempos de la película principal de Flash, lo que nos permite crear animaciones tan complejas
e independientes como queramos (podemos crear tantos clips de película dentro de otros
como queramos, por ejemplo).
Objeto "Sound" (Sonido)
Los objetos sonidos no son visuales, y por tanto, no podremos ver como quedan en los
fotogramas, al igual que haríamos con un botón o un clip de película. Deberemos controlarlos,
por tanto, desde el Panel Acciones y usando ActionScript. Tienen multitud de métodos
especiales, muy potentes y útiles, podemos parar un sonido, crear un bucle, darle efectos
sonoros etc...
Podríamos, por ejemplo, crear un objeto de tipo sonido y después hacer que al pulsar un
botón suene. (En el tema siguiente se verá algún ejemplo de uso de sonidos).
Objeto "Mouse" (Ratón)
El objeto mouse es uno de los objetos de Flash que ya está definido por Flash, pues hace
referencia al ratón de Windows (al que manejará el usuario que vea nuestra película). Si lo
usamos, podremos acceder a las propiedades del ratón de Windows, tipo de cursos, efectos
asociados, detección de su posición etc...
Vale la pena insistir en que su manejo NO es análogo al de otros objetos como el botón,
pues podemos crear tantos botones como queramos y hacer con ellos lo que decidamos, pero
el objeto Mouse es único y actúa sobre el ratón del PC del usuario que vea nuestra película.
Se puede decir que es un objeto "externo" que permite que otras partes del Sistema Operativo
interactúen con nuestra película Flash. Por tanto, es muy potente.
Objeto "Math" (Matemáticas)
Es uno de los múltiples objetos "abstractos" de Flash, ni es visual, ni parece que
corresponda a nada existente en el sistema (como el objeto "Mouse"). Su función es muy
importante, pues nos permite usar fórmulas matémáticas de modo muy sencillo. En el tema
siguiente veremos algún ejemplo de su uso.
Objeto "String" (Cadena)
Es otro objeto peculiar, pues corresponde a un tipo de datos. Los strings o cadenas son
secuencias de caracteres. Si definimos una secuencia de caracteres como objeto de tipo
String, podremos usar los métodos que Flash implementa sobre ellas: Seleccionar subcadenas
de letras, buscar una determinada letra en una palabra, convertir la palabra a letras
mayúsculas y un largo etc...
Las Propiedades
Los Métodos suelen ser específicos de cada objeto, y su estudio requeriría un nuevo curso
completo, (recomendamos consultar la ayuda incorporada en el Flash 8 cuando surjan dudas), pero
hay bastantes propiedades de los objetos que son comunes a muchos de ellos. Vamos a ver cuáles
son las más usadas y qué representan.
Para usar las propiedades, se debe colocar el nombre del objeto seguido de un punto ( . ) y
después la propiedad y su valor. Las propiedades siempre comienzan con un guión abajo ( _ ).
Algunas propiedades se pueden escribir sin el nombre del objeto al que hacen referencia delante, en
ese caso, harán referencia a la película principal.
_alpha
Hace referencia a la opacidad del objeto al que afecte. La opacidad se puede definir como la notransparencia. De modo que un 100% de transparencia equivale a un 0 de opacidad, o a un 0 de
alpha.
_framesloaded
Son los fotogramas de un clip de película o de la película principal que el sistema lleva cargados en
memoria. (Si se usa sin nombre de objeto delante obtenemos los fotogramas cargados de la película
principal). Muy útil para crear cargadores o "preloaders"
_totalframes
Devuelve la cantidad de fotogramas que contiene el clip de película al que hace referencia. Si se
emplea sin ningún nombre delante, nos devuelve la cantidad de fotogramas de la película Flash
actual. También usado en la creación de cargadores (en el tema siguiente veremos cómo estas
propiedades)
_height
Devuelve la altura del objeto en píxeles. Por ejemplo, si tenemos un clip de película llamado "Clip1"
y escribimos "Clip1._height" obtendremos la altura de Clip1. Del mismo modo, podemos cambiarla sin
más que hacer: Clip1._height = 100; (la altura del Clip1 pasaría a ser de 100 píxeles)
_width
Propiedad idéntica a la anterior, pero devuelve la anchura.
_visible
Determina si el objeto está o no visible en nuestra película. Cuando vale 1, lo está, cuando vale 0,
pasa a ser invisible. Es muy útil para hacer desaparecer partes de una película en un momento
determinado. Por ejemplo, si queremos que al pulsar un botón desaparezca el clip de película llamado
"Clip2", haremos esto: .... ... Clip2._visible = 0; ... ....
_x
Con esta propiedad obtenemos las coordenadas del objeto respecto del eje de las X. Sirve para
averiguar la posición o para asignarla de forma dinámica (durante la ejecución de nuestra película
Flash)
_y
Con esta propiedad obtenemos las coordenadas del objeto respecto del eje de las X. Sirve para
averiguar la posición o para asignarla de forma dinámica (durante la ejecución de nuestra película
Flash)
Veremos un ejemplo para utilizar ActionScript y referirnos a las propiedades de los símbolos de
nuestras películas. Lo primero que debemos hacer es darles un nombre de instancia (al cual nos
referiremos cuando escribamos el código). Para ello, y con el símbolo seleccionado abrimos el
panel Propiedades.
Remplazamos el texto <nombre de instancia> por un nombre cualquiera que queramos. El objeto
estará listo para tratarlo.
En el supuesto de que tengamos un rectángulo al que hayamos llamado r1 escribiremos el
siguiente código asociándolo a un botón (creado anteriormente) en el panel Acciones para cambiar la
anchura del primero:
on (release) {
r1._width=350;
}
Donde r1 será la llamada al objeto al cual hemos modificado su nombre de
instancia, _width indicará la propiedad que queremos cambiar y 350 determinará el valor que vamos
a asignarle a dicha propiedad.
Unidad 18.
Ejemplos ActionScript
Ejemplos de uso del código ActionScript
Vamos a mostrar los usos más característicos de código ActionScript en los diferentes objetos
existentes en Flash 8. De este modo lo comprenderemos mejor y porqué no, nos ahorraremos
trabajo al tener ya hechos aquí muchos de los códigos que usaremos en nuestras películas
(y con garantía de que funcionan). Mostraremos el código y a continuación, una explicación
del mismo.
Código ActionScript en BOTONES
Los Botones (objeto Button para Flash 8) tienen mucha utilidad siempre que queramos
que nuestra película interactúe con el usuario. Dado que esto va a ser prácticamente siempre,
es conveniente estudiar y entender bien algunos códigos típicos que tendremos que usar para
conseguir nuestros propósitos.
Todos los códigos que mostramos en este apartado DEBEN insertarse dentro del objeto de
tipo Botón (Button) con el que estemos trabajando. Para ello, seleccionaremos el botón en
cuestión y después abriremos y editaremos el Panel Acciones, asegurándonos de que éste
hace referencia a nuestro botón (lo indicará la cabecera de este Panel).
Veamos algunos de ellos:
on (release) {
gotoAndPlay(15);
}
Esta acción provoca que al pulsar un botón vayamos directamente al Fotograma número 15
de nuestra película.
La primera línea indica a Flash 8 que "al pulsar el botón" haga lo que está entre las llaves "
{ ... } ". Este código es característico de los botones y nos permite controlar el pulsado del
mismo. Dependiendo de lo que coloquemos entre los parentésis, la acción asociada al botón
se producirá en un momento o en otro. En este caso, hemos escrito "release" que significa
que la acción se producirá cuando, tras pulsar nuestro botón, el usuario deje de hacer clic con
el ratón.
Ejemplo del código situado a la izquierda. Partimos de una película con 15 fotogramas y
una acción stop() colocada en cada uno de ellos. Hemos colocado el código en el botón "Ir al
Fotograma 15".
La segunda línea es la acción que se producirá. En este caso, movemos la cabeza lectora
de Flash al fotograma 15.
on (release) {
getURL("http://www.aulaclic.com", "_blank");
}
Esta acción provoca que al pulsar un botón se abra una nueva página web en nuestro navegador
por defecto y nos muestre la página www.aulaclic.com
La primera línea tiene la misma función que en el caso anterior
La segunda línea es la llamada al navegador web propiamente dicha. Los parámetros indican la
dirección URL que queremos mostrar y el modo de ventana que contendrá a la página web. En este
caso, se abrirá una nueva ventana independiente de la actual.
on (release) {
r1._width=350;
}
Esta acción provoca que al pulsar un botón se modifiquen las propiedades del objeto cuyo nombre de
instancia aparece delante de la propiedad.
La primera línea tiene la misma función que en el caso anterior
En la segunda línea podemos ver la propiedad ._width (anchura), luego esta llamada va a acceder
a esta propiedad. Vemos que hay un operador asignación ( = ), luego deducimos que vamos a asignar
una anchura determinada a un objeto. ¿Qué anchura? Pues 350, que es la cantidad que aparece en
la parte derecha de la expresión. ¿Y a qué objeto? Al que va delante del ".", o lo que es lo mismo, al
afectado por la propiedad.
Por tanto, al pulsar el botón vamos a modificar la anchura del objeto r1, que pasará a ser de 350
px.
Código ActionScript en CLIPS DE PELÍCULA
Los Clips de Película (objeto MovieClip) son películas dentro de películas. Pueden tener
código AS dentro de sí mismos (al igual que los botones), aunque suele ser más común que
algún otro código externo (situado en fotogramas) les haga referencia. Para que el código que
contengan los clips de película sea válido, éstos deben tener algun evento de clip asociado
(Load, KeyDown etc) que determine cuándo se ejecutará este código (al cargarse el clip, al
pulsar alguna tecla ...)
Veamos algunos de estos códigos:
loadMovieNum("aulaClic.swf", 0);
Este código AS situado dentro de un fotograma, provoca que nuestra película Flash busque
una película llamada "aulaClic.swf" EN LA CARPETA RAÍZ y la cargue en el nivel 0, es decir,
en el mismo nivel que la película actual.
La carpeta raíz es la carpeta en la que está la película principal (la que tiene este código).
loadMovieNum("mifoto.jpeg", 0);
Este código nos permite cargar en un fotograma una imagen existente en nuestra carpeta
raíz con extensión .JPEG de un modo dinámico.
Por dinámico entendemos en tiempo de ejecución, lo que significa que el tamaño de la
película no lo notará, ni tampoco la velocidad de descarga de nuestra película. Sólo cuando
haga falta ver la imagen y se acceda al fotograma que realice esta llamada, se cargará la
imagen y se podrá ver en la película. La cargamos en el nivel 0.
Si tuviéramos la imagen en una carpeta llamada "Imágenes" que se encuentra dentro de
nuestro directorio raíz, podríamos acceder a ella del siguiente modo:
loadMovieNum("Imagenes/mifoto.jpeg", 0);
Es conveniente remarcar también, que la imagen debe estar en formato .JPEG, no sirve el
formato .JPG.
La siguiente acción debe incluirse dentro de un
botón, pues sucederá al hacer clic sobre él (de
este modo el ejemplo es más práctico)
on
r1.gotoAndPlay(2);
}
(release)
{
Esta acción provoca que al pulsar un botón
vayamos al fotograma 2 de un Clip de Película
determinado. El fotograma de la película principal
NO VARIARÁ.
La primera
anteriormente
línea es
la
comentada
La segunda línea es la acción que se
producirá. Flash busca un objeto llamado r1 de
tipo clip de película (movieclip) y mueve su
cabeza lectora hasta el fotograma 2. La cabeza
lectora de la película principal es completamente
INDEPENDIENTE de la cabeza lectora de los
clips de película y no se verá alterada.
Partimos de una película con 2 fotogramas
distintos.
En el primer fotograma están el botón y el
clip de película (r1) correspondientes. El clip de
película tiene en su línea de tiempos una
animación, inicialmente detenida. Veamos que
pasa si se accede a su fotograma 2.
En el segundo fotograma no nos importa lo
que haya porque la acción situada a la
izquierda no nos llevará hasta allí. La cabeza
lectora
de
la
película
principal
esINDEPENDIENTE.
Ejemplos de manejo de Sonidos con
ActionScript
Aunque la idea de objeto no suele llevarnos a pensar en un sonido, en Flash 8 los sonidos
también son objetos y podemos manejarlos usando adecuadamente ActionScript. Veamos unos
cuántos códigos muy comunes y un completo ejemplo de cómo usarlos:
/* Código 1 */
musica = new Sound();
musica.loadSound("sonido.mp3",false);
Estas 2 líneas cargan un sonido y le dan nombre.
La primera línea le dice a Flash que vamos a crear un nuevo objeto de tipo Sonido y que se va a
llamar "musica".
La segunda línea carga un sonido de nuestro disco duro llamado "sonido.mp3" y lo carga dentro
del objeto musica. El segundo parámetro "false" indica que es un sonido de "evento", y que, por tanto,
se cargará completamente antes de comenzar a reproducirse.
/* Código 2 */
musica.stop();
Este código detiene el sonido "musica" al instante.
/* Código 3 */
musica.stop();
musica.start(0,99);
La primera línea como ya hemos visto, detiene el sonido "musica".
La segunda línea provoca que el sonido "musica" comience a reproducirse (start) a partir de su
posición inicial (el 0 indica los segundos transcurridos desde el comienzo) y lo haga 99 veces. (esto se
llama loop o bucle)
/* Código 4 */
musica.stop();
musica.start(0,0);
Este código detiene el sonido "musica" y a continuación lo reinicia, reproduciéndolo sólo 1 vez.
Ahora que ya sabemos controlar los sonidos mediante ActionScript, veamos un ejemplo que reune
todo lo visto anteriormente.
En este ejemplo:
- Tenemos un único fotograma con 3 botones. En este fotograma tenemos insertado el Código 1.
- Los 3 botones tienen distintas funcionalidades:
- En el botón rojo, está insertado el Código 2
- En el botón azul, está insertado el Código 3
- En el botón verde, está insertado el Código 4
Ejemplos de ActionScript en objetos abstractos. El objeto MATH
Como ya sabemos, los objetos no visibles también se controlan con ActionScript. Vamos a ver
algunos ejemplos del funcionamiento del objeto Math y como sacarle partido.
x = Math.random();
El Método "random" del objeto Math genera un número aleatorio entre 0 y 1. En este caso, el
resultado lo almacenamos en la variable x, para poder usarlo después...
Las utilidades de este métodos son muchas, generar claves secretas, passwords, números de
loteria etc...
x = Math.round(4,3);
El Método "round" REDONDEA el parámetro introducido eliminando la parte decimal del mismo.
En el ejemplo, x pasaría a valer 4.
x = Math.max(5 , 2);
El Método "max" obtiene el valor máximo entre 2 números.
En el ejemplo, x pasaría a valer 5.
El objeto Math es muy útil y nos ahorra mucho trabajo, pues hay multitud de operaciones que
responden a alguno de sus métodos y no tenemos porqué implementar. Basta buscarlos en el manual
y usarlos.
Creación de un cargador o preloader
Vamos a analizar el código de un cargador o preloader para acabar de afianzar nuestros
conocimientos de ActionScript:
Los cargadores o preloaders sólo son necesarios cuando las películas adquieren un tamaño
considerable y resulta inviable visionar la película sin tenerla toda cargada (porque se atasca,
aparecen partes incompletas etc...). Vamos a suponer pues, que tenemos una película con 150
fotogramas. Los 3 primeros los reservaremos para crear nuestro cargador. En el Fotograma 4
comienza la película...
NOTA: Junto a cada línea insertaremos comentarios (texto entre los símbolos /* y */) que son líneas
que Flash reconoce como tales y que no tiene en cuenta a la hora de ejecutar el código (es como si no
existieran). Se usan para clarificar y esplicar el código que escribamos y para eso lo usaremos a
continuación. Les cambiaremos el color para que resalten aún más. Evidentemente no son necesarios
en el código que finalmente insertemos en nuestra película.
Este es el código que insertaremos:
-----------------------------------------------------------------------------
/* Fotograma 1 */
bytes_totales = getBytesTotal(); /* Hallamos el tamaño de nuestra película con la Acción
"getBytesTotal()" y lo almacenamos en la variable bytes_totales. */
-----------------------------------------------------------------------------
/* Fotograma 2 */
bytes_cargados = getBytesLoaded(); /* Hallamos los bytes que llevamos cargados en memoria hasta
el momento. Este valor lo asignamos a la variable bytes_cargados */
if (bytes_cargados >= bytes_totales) { /* Esta es la lógica del cargador. Si llevamos cargados en
memoria los mismos bytes o más de los que ocupa la película, ejecutamos la siguiente línea */
gotoAndPlay(4); /* Si hemos llegado hasta aquí es porque toda la película está cargada en memoria
(bytes_cargados >= bytes_totales) y podemos comenzar a ver la película.
Ejecutamos gotoAndPlay(4) que nos llevará hasta al fotograma donde comienza la película. */
}
else { /* Si aun no hemos cargado toda la película */
porcentaje = ((bytes_cargados/bytes_totales)*100); /* Averiguamos el porcentaje que llevamos
cargado realizando la división entre los bytes_cargados y los bytes_totales y multiplicándolo por 100 */
txt_salida = Math.floor(porcentaje)+"%"; /* Almacenamos en la variable "txt_salida" el porcentaje que
llevamos junto al símbolo "%". En la película principal tendremos un campo de texto dinámico llamado
"txt_salida" que nos mostrará el porcentaje de película que llevamos cargado en cada instante */
}
-----------------------------------------------------------------------------
/* Fotograma 3 */
gotoAndPlay(2); /* Si llegamos al fotograma 3 es porque no está cargada toda la película, de lo
contrario estaríamos ya en el fotograma 4. Como aún no está cargada, volvemos al fotograma anterior
para ver si ya lo está (mediante gotoAndPlay(2);). Esto lo haremos tantas veces como haga falta
para dar tiempo al ordenador del usuario a ir cargando en memoria la película. */
-----------------------------------------------------------------------------
Resumiendo:
Fotograma 1: En el Fotograma 1 se calculan los bytes totales que ocupa la película. Después
pasamos al Fotograma 2.
Fotograma 2: Cada vez que accedamos al Fotograma 2, nuestro código ActionScript averigua los
bytes que llevamos cargados en memoria y los compara con los totales (que se hallaron en el
Fotograma 1 y no vuelven a averiguarse, pues no varían). Si ya está toda la película cargada, vamos
al fotograma 4 y comenzamos a reproducir la película, sino, pasamos al fotograma 3
Fotograma 3: El Fotograma 3 volverá a mandar la cabeza lectora al fotograma 2. Haciendo este
ciclo, damos tiempo al ordenador a ir cargando poco a poco la película, hasta que llegue un momento
que esté toda cargada y pasemos al Fotograma 4. El cálculo del porcentaje es un "adorno" que nos
permitimos, pues con un poco más de esfuerzo averiguamos cuánta película llevamos cargada y la
mostramos por pantalla de un modo elegante (en porcentaje) haciendo la espera del usuario menos
aburrida.
Fotograma 4: Aquí comienza la película... (Ya no se volverá nunca a ninguno de los fotogramas
anteriores).
A la derecha mostramos el resultado. La película se comenzará a cargar al pulsar el botón. El
código insertado es EXACTAMENTE el que se muestra arriba, no hay NADA MÁS. Tan sólo
se han añadido unos textos y unas imágenes para aumentar el tamaño de la película, de lo
contrario la carga sería demasiado rápida y no llegaría a verse.
También se ha insertado el texto dinámico que muestra el porcentaje.
Si el cargador no llega a verse, lo más probable sea que ya esté cargada en la memoria caché
de vuestro ordenador o que esteis viendo este curso desde el CD-Rom o desde vuestro propio
Disco Duro, donde la velocidad de descarga estan rápida que sería necesaria una película de
varios MBytes para que hiciera falta un cargador.
Probad el código en una película que coloqueis en un servidor web y podreis ver los resultados
sin problemas.
Unidad 19.
Flash. Navegación
En este tema veremos los puntos más importantes en los que te podrás apoyar para realizar tus
animaciones en Flash usandoActionScript.
Esta unidad, la de Navegación, está especialmente orientada a la web, pues veremos cómo crear
elementos que te ayudarán más tarde a crear tus propias presentaciones, secciones, etc. Todo ello
apoyado con animaciones y vinculadas entre sí.
A lo largo del tema utilizaremos este ejemplo para ilustrar la teoría de forma guiada.
Los Botones
Uno de los elementos que más nos van a ayudar a la hora de añadir interactividad en el diseño son
los botones.
En el ejemplo nos hemos ayudado de los botones para crear la navegación entre las diferentes
secciones.
Así que el primer paso, después de haber creado la interfaz de la película en una capa, será crear e
insertar los botones en una nueva capa para trabajar con mayor facilidad.
Para asignarle una acción a un botón es necesario darle un nombre de instancia. Para ello (y
como hemos visto en unidades anteriores) escribimos el nombre que queramos (al cual nos
referiremos más tarde para llamar al botón) en el Inspector de Propiedades, en este caso lo hemos
llamado equipo.
Luego, con el botón seleccionado, abrimos el Panel Acciones y añadiremos el código que deberá
realizar el botón.
Ésta es la parte más importante pues deberemos decidir a qué estímulo (o evento) responderá el
botón. Existen varios eventos que son capturados en Flash, nombraremos los más importantes:




press: ejecuta la acción al presionarse el botón.
release: ejecuta la acción al soltarse el botón (después de haberlo
presionado).
rollOver: ejecuta la acción al desplazar el ratón dentro del botón.
rollOut: ejecuta la acción al desplazar el ratón fuera del botón.
Por ello, escribiremos en el panel acciones el siguiente código para nuestros botones:
on (release) {
}
Nota: ActionScript diferencia entre mayúsculas y minúsculas, por lo que si escribes, por
ejemplo, Release no será reconocido.
Entre las llaves {} introduciremos el código que queremos que se ejecute al producirse el evento
seleccionado sobre el botón.
Controladores de la línea de tiempo
Una vez insertados los botones y definidos los eventos sobre los que deben actuar, tendremos que
decidir qué queremos que hagan.
De esta forma podremos crear dinamismo entre nuestras secciones.
Imagina que tenemos la siguiente línea de tiempo:
Observa la capa Contenido. En ella se encuentran todo el contenido de las secciones.
De esta forma, si no aplicásemos ninguna acción sobre la línea de tiempo, todas las secciones se
ejecutarían una seguida de la otra. Lo que queremos conseguir es que se ejecute la primera (para
mostrar la sección principal) y el cabezal se pare hasta nueva orden (para mostrar la segunda).
Para ello utilizaremos la función stop().
Esta función sirve para parar el cabezal de la línea de tiempo donde sea colocada. Así que
seleccionamos el último fotograma de la sección y abrimos el Panel Acciones.
Allí deberemos escribir únicamente la línea:
stop();
Esto hará que cuando la animación llegue a ese punto se detendrá a espera de nueva orden.
Nosotros hemos colocado las acciones en una capa aparte llamada Acciones para así poder
acceder más rápido a ella. El método es el mismo, solamente habrá que crear fotogramas claves en
aquellos sitios en los que queramos insertar un stop().
Ya hemos conseguido detener la presentación. Pero, ¿cómo hacemos que se muestre la segunda?
Muy sencillo.
Los botones nos ayudarán a desplazar el cabezal por la línea de tiempo. Así que modificaremos el
código de uno de los botones donde habíamos escrito:
on (release) {
}
Para que se pueda leer lo siguiente:
on (release) {
gotoAndPlay(21);
}
De esta forma, al hacer clic sobre ese botón, el cabezal de reproducción se desplazará hasta el
fotograma 21 y reproducirá a partir de allí.
Si añadimos un stop() en el último fotograma de la segunda sección, cuando éste se reproduzca se
parará y el contenido permanecerá estático en espera de una nueva orden.
Existe otra forma, muy útil, para nombrar los fotogramas. Del mismo modo que dábamos un nombre
de instancia a un botón lo haremos con un fotograma.
Basta con introducir una Etiqueta de fotograma para poder remitir el cabezal a éste:
Por ejemplo:
on (release) {
gotoAndPlay("encuentranos");
}
Además de estos controladores podemos utilizar también:

gotoAndStop(fotograma), que situará el cabezal en el fotograma
indicado y parará la reproducción.

play(), que hará que la reproducción prosiga en el fotograma en el que
se encuentre el cabezal.

prevFrame(), que hará que el cabezal retroceda al fotograma anterior al
que nos encontramos.

nextFrame(), que hará que el cabezal avance al fotograma siguiente al
que nos encontramos.
Es posible el uso del Panel Comportamiento para crear saltos a fotogramas de forma sencilla y sin
tener que escribir ninguna línea de código,
Existen los controladores prevScene() y nextScene() que hacen avanzar el cabezal a escenas
anteriores o siguientes. Así que veremos qué son las escenas para poder utilizarlos también.
Las Escenas
Flash permite el uso de escenas para separar diferentes temas en una sola película. Se suelen
utilizar sobre todo en animaciones, donde una parte de la acción transcurre sobre un fondo y la
siguiente sobre otro completamente diferente.
De este modo podemos usar las escenas para representar diferentes secciones muy diferentes en
nuestra película, por ejemplo, crear una escena para el cargador, otra para la película principal y una
tercera para una sección que se diferencie completamente del resto y nos sea más cómodo trabajar
con ella independientemente.
A pesar del hecho de que las escenas se trabajan como líneas de tiempo diferentes, al crear el
archivo SWF éstas se alinean en orden reproduciéndose una detrás de otra.
Por ello, al publicar el documento los fotogramas de las escenas se numerarán respecto a esto. Es
decir, si tenemos una primera escena que va del fotograma 1 al 50, la segunda escena comenzará en
el fotograma 51.
Todo esto hace que las escenas, en algunos casos estén desaconsejadas por las siguientes
razones:

El uso de escenas obliga al usuario a descargar el documento en su
totalidad, a pesar de que es posible que no navegue por todas las
secciones. Existe la posibilidad, como veremos más adelante, de cargar
en cualquier momento archivos SWF para reproducirlos en la pantalla
principal. De esta forma emularíamos el uso de las escenas cargando
diferentes documentos dependiendo de la sección a mostrar.

Cuando añadimos ActionScript a nuestras escenas el resultado puede
ser, a veces, imprevisible. Como hemos explicado anteriormente, al
crearse un archivo con una línea de tiempo continua las acciones a
realizar pueden ser inesperadas.
En el Panel Escena (ábrelo desde Ventana → Otros paneles → Escena) podrás ver las escenas
actuales de la película.
En principio solamente encontrarás una (Escena 1), es posible añadir más escenas pulsando el
botón Añadir escena
. Para cambiar el nombre de una escena haz doble clic sobre su nombre en
el panel y escribe el que quieras.
Puedes eliminar una escena utilizando el botón Eliminar escena
botón Duplicar escena
o duplicarla con el
.
Como hemos comentado antes (y si no existe código ActionScript que modifique esto) las escenas
se reproducen una después de la otra en el orden en el que se encuentran en el Panel Escena.
Puedes cambiar este orden con solo arrastrar y colocar la escena en cuestión en su lugar
correspondiente.
Trabajar con una escena es muy sencillo, basta con seleccionarla en el panel y su contenido se
mostrará en el Escenario. Podrás trabajar con ella como si se tratase de una película independiente.
Pero veamos cómo podemos utilizar ActionScript para desplazarnos de escena a escena.
Antes hemos mencionado las funciones prevScene() y nextScene(). Estos comandos hacen que el
cabezal de reproducción se desplace de una escena a otra en el orden en el que se encuentran en
el Panel Escena.
Pero existe otra posibilidad.
Según el ejemplo que estamos siguiendo creamos una nueva escena llamada escena_otros. En el
botón Otros Restauranteshemos añadido el siguiente código:
on (release) {
gotoAndPlay("escena_otros", 1);
}
Con esto estamos indicando que al soltarse el botón el cabezal se desplace al fotograma 1 de la
escena escena_otros y empiece a reproducirse a partir de allí. Sencillo, ¿verdad?
Los MovieClips
En el tema de Clips de Película vimos que se tratan de objetos con línea de tiempo propia.
Podemos utilizarlos para incluir elementos en nuestra película con una animación independiente.
De este modo aunque la película principal esté detenida el clip seguirá actuando según su propio
cabezal de reproducción.
Existen métodos para manejar la línea de tiempo de los clips, idénticas a las anteriores, y que
veremos a continuación.
Lo primero que deberemos aprender es a acceder a las propiedades y métodos de los objetos. Esto
es un recurso muy utilizado pero a la vez es muy sencillo. Lo veremos con un ejemplo.
Queremos que al pulsar un botón el movieclip avance en su línea de tiempo hasta su fotograma 20.
El código que deberemos escribir en el botón será el siguiente:
on (release) {
miClip.gotoAndPlay(20);
}
Fíjate en cómo hemos escrito la función. Primero hemos señalado el clip sobre el que queremos
actuar escribiendo su nombre de instancia:
Y después de añadir un punto hemos indicado la función que se ejecutará.
De esta forma (y como hemos visto en temas anteriores) podemos acceder a todas las propiedades
del clip. Escribiendo esta línea haremos que el clip se haga invisible:
on (release) {
miClip._visible = false;
}
Para hacerlo un poco más complicado podríamos encontrarnos en el siguiente supuesto. Imagina
que tenemos un movieclip llamadoclipPadre. Dentro de este clip de película tendremos más símbolos
y uno de ellos puede ser otro movieclip llamado clipHijo.
¿Cómo accedemos a las propiedades y funciones de clipHijo? Muy fácil. Suponiendo que estamos
trabajando desde la película principal donde tenemos insertado el clipPadre, escribiremos lo
siguiente:
clipPadre.clipHijo.play();
Así haremos que la reproducción de clipHijo se reaunde.
Pero, ¿qué pasa si queremos ejecutar la orden desde dentro de clipPadre? Imagina que dentro del
movieclip hay un botón y el clipclipHijo. Queremos que al pulsar el botón se reproduzca el fotograma
20 de clipHijo, entonces deberíamos escribir lo siguiente en las acciones del botón:
on (release) {
clipHijo.gotoAndPlay(20);
}
Como puedes ver esta vez no hemos mencionado a clipPadre en la línea de código. No es
necesario porque ya nos encontramos dentro de él.
También podemos referenciarnos a elementos superiores utilizando la palabra reservada _parent.
De este modo si nos encontrásemos dentro de clipHijo y quisiésemos avanzar al fotograma 20
de clipPadre deberíamos escribir:
this._parent.gotoAndPlay(20);
Donde this indica el clip donde nos encontramos y _parent hace que nos coloquemos en el nivel
inmediatamente superior.
De esta forma, sólo deberemos escribir la ruta de contenedores o padres hasta llegar al objeto del
cual queremos modificar o ejecutar un método.
Por lo demás, el funcionamiento de un clip no se diferencia en nada a la línea de tiempos de
cualquier otra película. Podemosetiquetar los fotogramas de igual modo para llamarlos directamente
por su nombre:
miClip.gotoAndStop("etiqueta");
Y saltar de fotograma a fotograma para manejar las animaciones de la forma en que nosotros
queramos.
Igual que vimos antes con los botones, los movieclips tienen manejadores que nos permitirán
ejecutar código dependiendo de los eventos que se produzcan sobre ellos.
Los que más utilizaremos serán:





mouseMove: se ejecuta cuando el ratón se mueve sobre el fotograma.
Puedes utilizar las propiedades_xmouse e _ymouse para averiguar la
posición del ratón en ese momento.
mouseDown: se ejecuta cuando se presiona el botón del ratón.
mouseUp: se ejecuta cuando se suelta el botón del ratón.
keyDown: se ejecuta cuando se presiona una tecla.
keyUp: se ejecuta cuando se suelta una tecla.
Estos manejadores de eventos se deben de utilizar con el controlador onClipEvent. Veamos un
ejemplo:
onClipEvent (mouseUp) {
this._visible = true;
}
Este bloque de código debe situarse en las acciones del movieclip (igual que hacemos con los
botones). Es por ello que al referirnos a la propiedad _visible escribimos antes this para referenciar el
clip en cuestion.
this siempre hará referencia al objeto donde se encuentre la variable.
Nota: Estos manejadores son tan válidos para movieclips como para la película general en sí, pues
podríamos considerar que una película es un movieclip más grande.
También existen modos de capturar estos eventos sin tener que escribir el código dentro del
movieclip.
Sería de la siguiente forma:
miClip.onPress = function() {
miClip.play();
}
Estos eventos tienen que asociarse con una función (veremos este concepto en el punto siguiente).
Pero de esta forma podemos escribir el código directamente sobre el fotograma y controlar cuando se
ejecuta una acción sobre el movieclip.
En el ejemplo, el clip comenzará a reproducirse en cuanto se haga clic sobre él.
Veamos el conjunto de eventos más importantes para los movieclips:

onPress = function() {}: se ejecuta cuando se presiona el botón del
ratón sobre el movieclip.

onRelease = function() {}: se ejecuta cuando se suelta el botón del
ratón sobre el movieclip.

onRollOver = function() {}: se ejecuta cuando se desplaza el ratón
dentro del movieclip.
onRollOut = function() {}: se ejecuta cuando se desplaza el ratón fuera
del movieclip.





onKeyDown = function() {}: se ejecuta cuando se presiona una tecla
con el clip de película resaltado.
onKeyUp = function() {}: se ejecuta cuando se suelta una tecla con el
clip de película resaltado.
Veamos el ejemplo:
Si observas tenemos dos movieclips en la película, uno de ellos llamado estrella, y el
otro detalle. La línea de tiempo de estos movieclips tendría este aspecto:













Como puedes ver tenemos una cuarta capa que se llama acciones. Allí colocaremos las
acciones que se asociarán a este fotograma:
estrella.onPress = function() {
estrella.gotoAndPlay("desaparece");
detalle.gotoAndPlay("aparece");
}
Este código hará que cuando se presione el clip estrella se desplacen los cabezales en los
clips detalle y estrella a las etiquetas de fotogramas que se indican.
Para hacer desaparecer el clip detalle incluiremos el siguiente fragmento de código:
detalle.onPress = function() {
estrella.gotoAndPlay("aparece");
detalle.gotoAndPlay("desaparece");
}
Esto hará algo parecido a lo anterior, cuando se presione el clip detalle los cabezales de ambas
películas se desplazarán a las respectivas etiquetas de fotograma.
Las Variables
Las variables son contenedores donde podremos almacenar información para trabajar con ella.
Esta información puede ser modificada y leída.
Aunque parece un concepto muy complejo su uso es bastante sencillo.
En ActionScript existen 8 tipos diferentes de variables, los que más utilizaremos serán los
siguientes:


Boolean: o booleano, puede almacenar sólo dos valores,
o true (verdadero) o false (falso).
Number: puede almacenar números enteros o decimales, positivos o
negativos. El signo decimal en ActionScript es el punto (.). Podrás
realizar operaciones matemáticas con estas variables.

String: puede almacenar cadenas de caracteres, es decir, un conjunto
de caracteres alfanuméricos. Las variables de tipo String deben ir entre
comillas dobles (").
Para declarar (crear) una variable sólo tendrás que escribir la siguiente línea:
var nombreVariable:tipoVariable = valorVariable;
Veamos el ejemplo para verlo más claro. Haremos que el clic sobre el movieclip estrella sólo se
ejecute si el detalle no está aún mostrado.
Y al revés. Que sólo se ejecute el código al hacer clic en el detalle si éste se encuentra fuera.
var estrella_activada:Boolean = true;
estrella.onPress = function() {
if (estrella_activada == true) {
estrella.gotoAndPlay("desaparece");
detalle.gotoAndPlay("aparece");
estrella_activada = false;
}
}
detalle.onPress = function() {
if (estrella_activada == false) {
estrella.gotoAndPlay("aparece");
detalle.gotoAndPlay("desaparece");
estrella_activada = true;
}
}
Fíjate en las dos primeras líneas, se declaran dos variables booleanas. Una dice que la estrella se
encuentra activada y la otra que el detalle se encuentra desactivado.
Al hacer clic en el movieclip estrella se evalúa la variable estrella_activada si ésta es verdadera
(true) entonces permite que se realicen las acciones. En caso contrario, sale de la condición.
Al entrar en la condición se desplazan los cabezales y se modifica el valor de la variable a falso
para que la próxima vez que intente entrar no puedan ejecutarse las acciones.
En el onPress del clip detalle se evalúa de nuevo la variable. Esta vez debería estar en false
porque si el detalle está fuera es porque ya se ha hecho clic sobre la estrella y ha pasado por el
anterior bloque.
A medida que vayamos avanzando iremos usando otras variables de diferentes tipos. Verás que su
uso no difiere mucho al que hemos explicado ahora.
Antes de terminar con este tema deberíamos ver algo muy importante: el ámbito de las variables.
Esto es, el sitio donde puedan utilizarse las variables.
Nota: Para explicar el ámbito de las variables utilizaremos la función trace(variable) que envía el
contenido de la variable al Panel Salida. Puedes abrir este panel desde Ventana → Salida.
Exiten 3 ámbitos de variables: el local, el global y el de línea de tiempo.
Las variables declaradas en la línea de tiempo pueden utilizarse en cualquier fotograma
posterior y su contenido se mantendrá intacto.
Por ejemplo, declaramos la siguiente variable en el fotograma 1:
var miVariable:String = "Esta es mi variable";
Y en el fotograma 15 colocamos las siguientes líneas en el Panel Acciones:
trace(miVariable);
stop();
Verás como al probar la película en el Panel de Salida aparece escrito el contenido de la variable.
Ten en cuenta que si declaras la variable en el fotograma 2 no estará disponible en fotogramas
anteriores, es decir en el 1.
Las variables declaradas en un ámbito local sirven sólo para un bloque de función. Veamos
este ejemplo:
function miFuncion() {
var miVariable:Number = 1;
trace(miVariable);
miVariable = 2;
trace(miVariable);
}
miFuncion();
trace(miVariable);
En el primer bloque definimos una función (hablaremos de ellas más a fondo en el siguiente
apartado).
En esta función se declara una variable y se envía su contenido al Panel Salida. Luego
modificamos el contenido de la variable y volvemos a enviar el contenido a Salida.
Observa que después llamamos a la función, esto hará que se ejecute su código, por lo que en
el Panel Salida se mostrará 1 y 2.
Luego intentamos enviar el contenido de la variable a Salida y el resultado que obtenemos
es undefined. Esto es porque la variable no está definida, pues solamente la habíamos declarado
para el bloque de la función.
Utilizando las variables de esta forma sólo podremos acceder a ellas desde el bloque de función
donde están declaradas. Una vez fuera de éste las variables dejan de existir.
Las variables de ámbito global son mucho más flexibles, están disponibles en cualquier
fotograma y función.
Su modo de declaración es la siguiente:
_global.miVariable = "Esta es una variable global";
Podrás acceder a ella en cualquier momento.
Las variables globales no tienen tipo, y pueden tomar cualquier valor.
Nota: Si en algún sitio declaras una variable local con el mismo nombre que una variable global
existente no podrás utilizar la global durante todo el ámbito en el que exista la local.
Comentaremos también la existencia de las variables de tipo matriz (o array). Éstas pueden
almacenar diferentes variables en un solo objeto.
Veamos un ejemplo para verlo más claro:
var miMatriz:Array = new Array();
miMatriz[0] = "Lunes";
miMatriz[1] = "Martes";
miMatriz[2] = "Miércoles";
miMatriz[3] = "Jueves";
miMatriz[4] = "Viernes";
miMatriz[5] = "Sábado";
miMatriz[6] = "Domingo";
Así si escribimos:
Trace(miMatriz[5]);
Se mandará al Panel Salida el elemento 5 del array miMatriz en este caso Sábado.
Los arrays empiezan por 0, así que es conveniente que te acostumbres a rellenar la matriz a partir
de este elemento. Verás que con el tiempo te ayudará a realizar algunas funciones.
Otras formas de declarar arrays son las siguientes:
var matriz2:Array = new
Array("Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo")
;
o
var matriz3:Array=
["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"];
Las Funciones
Como habrás visto en los ejemplos anteriores, una función es un bloque de código que
podemos utilizar en cualquier parte del archivo SWF con sólo llamarla:
function miFuncion() {
var miVariable:Number = 1;
trace(miVariable);
}
En este ejemplo hemos creado
variable miVariable al Panel Salida.
una
función
que
envía
el
contenido
de
la
Podemos escribir la siguiente línea en cualquier momento despué de haber pasado la función y
esta se ejecutará:
miFuncion();
Como ves, crear funciones es bastante sencillo. Además podemos crear funciones un poco más
complejas enviándole parámetros:
function enviaSalida(miVariable:String) {
trace(miVariable);
}
Si en cualquier momento escribimos:
enviaSalida("Hola!");
Se mostrará el mensaje en el Panel Salida.
El modo de crear funciones con parámetros es bastante intuitivo. Al crear la función deberás indicar
que tipo de variable le vas a enviar. En nuestro ejemplo hemos definido el parámetro como de
tipo String.
De este modo podrás utilizar la variable miVariable dentro de la función y trabajar con ella como
quieras.
Para llamar a la función sólo deberás escribir su nombre y indicarle el parámetro que le quieres
enviar.
Puedes crear funciones con más de un parámetro, para ello sólo tendrás que separar éstos por
comas:
function miFuncion(parametro1:String, parametro2:Number,
parametro3:Boolean) {
// código
}
miFuncion("hola", 2, false);
Cargando Archivos
Una vez vistos todos estos conceptos pasaremos a ver una función en concreto, la
función LoadMovie.
Esta función te permite modificar el contenido de un clip de película y cargar en él otro archivo
SWF o incluso una imagen con formato JPG, GIF o PNG.
Su uso es el siguiente:
miMovieClip.loadMovie("pelis/clip.swf");
Con esto lo que hemos hecho es cambiar el contenido del clip miMovieClip y lo hemos sustituido
por el archivo clip.swf que se encontraba en la carpeta pelis. Es sencillo, ¿verdad?
También puedes utilizarla de esta forma:
loadMovie("archivo.swf", miMovieClip);
Es una variación de la anterior, aquí indicamos qué archivo queremos cargar y dónde. Si en vez de
cargarlo en miMovieClip lo cargasemos en this se cargaría en el clip en el que está contenida la
función. Incluso si éste es el clip de película principal.
Vamos al ejemplo. En la sección Encuéntranos hacemos clic en un botón de tipo texto y nos
aparece el mapa donde localizar el restaurante:
El código que hemos insertado en el botón es sencillo:
on (release) {
loadMovie("mapa.swf", this);
}
Los parámetros que le hemos pasado son el nombre de la película a cargar y su destino (this, el
propio clip donde estaba el botón).
Una línea equivalente hubiese sido esta:
this.loadMovie("mapa.swf");
Para descargar archivos cargados con la función loadMovie utiliza unloadMovie.
Esto nos servirá para liberar a un movieclip de la película o imagen que habíamos cargado,
dejándolo vacío.
Su sintaxis es la siguiente:
miClip.unloadMovie();
o
unloadMovie(miClip);
Existe la posibilidad de cargar archivos de otra manera, en vez de indicando su destino
indicaremos su nivel. Esto es, vamos a cargar varios archivos en un mismo sitio y los dispondremos
uno encima de otro, de forma que los que se encuentren en capas superiores taparán a los de abajo.
Para ello deberemos utilizar la función loadMovieNum:
loadMovieNum("primera.swf", 0);
loadMovieNum("segunda.swf", 1);
loadMovieNum("tercera.swf", 2);
En este ejemplo hemos cargado 3 archivos SWF en el mismo sitio. Los tres estarán disponibles a la
vez, pero la película tercera.swf será la que se encuentre en el nivel superior.
Como puedes ver, al no poder indicarse un destino, deberás introducir esta función dentro del clip
que quieres modificar. Si fuese escrita en el código del fotograma actuaría directamente sobre la
película principal.
Nota: Las películas cargadas en el nivel 0 serán las que establezcan la velocidad y tamaño de
fotogramas y su color de fondopara el resto de los fotogramas añadidos en niveles superiores.
Podemos referirnos a películas cargadas en diferentes niveles y modificar sus propiedades
utilizando la sintaxis:
_level1._visible = true;
E incluso llamar a objetos contenidos en esas películas añadiendo, simplemente, el nombre de
instancia de éste:
_level1.miClip._visible = true;
Sigue el siguiente ejercicio paso a paso para ver cómo hacer una Película con Niveles
Podemos descargar películas cargadas con la
función loadMovieNum utilizando unloadMovieNum:
unloadMovieNum(2);
En esta función sólo debemos indicar el nivel donde está situada la película que queremos
descargar y cada más.
El uso de estas funciones es bastante sencillo y te ayudarán mucho en la eficiencia de tus películas.
Ten en cuenta lo que decíamos antes de las escenas.
Si creamos una película con varías escenas se almacenarán todas en un solo archivo, y el usuario
tendrá que descargarse el archivo entero para poder ver aunque sea una parte mínima de la película.
Utilizando estas funciones podemos optimizar el tiempo de descarga, pues de este modo el usuario
sólo se descargará los archivos que desee visualizar.
Cargando InformaciónEn este apartado veremos cómo utilizar un cargador para recoger
información de un archivo y mostrarla en una película Flash.
Nos basaremos en el siguiente ejemplo:
Observa la línea de tiempos:
En la capa de acciones escribiremos todo el código para que funcione la película. La capa
diapositivas contiene el efecto que hace que la imagen se desvanezca para volver a aparecer.
Ahora explicaremos cómo lo hemos hecho.
Antes que nada añadimos un stop() en el primer fotograma para detener la acción y reanudarla
más tarde con el botón al que le hemos añadido el siguiente código:
on (release) {
gotoAndPlay (2);
}
Para que pase al fotograma dos y comience la transición. Igualmente hemos añadido un stop() en
el fotograma 11 para que se detenga la transición y espere a que se pulse de nuevo el botón y vuelva
al fotograma 2.
La transición es muy sencilla. En la capa diapositivas hemos añadido un clip de película
llamado contenedor del tamaño de la película, que será donde carguemos las imágenes con la
función loadMovie, y hemos incluido dos interpolaciones de movimiento. En el fotograma 6 bajaremos
la propiedad Alfa al 0% en el Panel Propiedades. Así conseguiremos el efecto de la transición.
Mientras en el fotograma 6 añadiremos el código que hará que se cargue la imagen
en contenedor y se actualicen los campos de textos descripcion_txt y titulo_txt incluidos en la
capa area_texto en un clip llamado textoDiapositiva.
Ahora que conocemos el funcionamiento veamos el código que hemos añadido en los fotogramas 1
y 6.
Fotograma 1:
stop();
var archivo:String = "diapositivas.txt";
var total:Number = 4;
var imagenActual:Number = 1;
var matrizImagenes:Array = ["imagenes/imagen1.jpg",
"imagenes/imagen2.jpg", "imagenes/imagen3.jpg", "imagenes/imagen4.jpg"];
// cargador del archivo .txt
var cargador:LoadVars = new LoadVars();
cargador.onLoad = function(exito:Boolean) {
if (exito) {
textoDiapositiva.descripcion_txt.text =
eval("cargador.descripcion" + imagenActual); //recupera la descripción
textoDiapositiva.titulo_txt.text = eval("cargador.titulo" +
imagenActual); //recupera el título
}
else {
textoDiapositiva.descripcion_txt.text = "No se ha podido cargar
el texto";
textoDiapositiva.titulo_txt.text = "Error";
}
}
cargador.load(archivo); //carga del texto
loadMovie(matrizImagenes[imagenActual-1], contenedor);
imagen
//carga de la
En las primeras líneas definimos las variables que vamos a utilizar.




En la variable archivo introducimos la ruta del archivo de tipo txt de
donde sacaremos el texto asociado a las imágenes.
La variable total almacena el número total de imágenes que vamos a
mostrar.
La variable imagenActual almacenará el número de la imagen que
vamos a mostrar, la inicializamos a 1 para mostrar primero la primera
imagen.
La variable matrizImagenes es una variable de tipo array y almacenará
las rutas de las imágenes que vamos a mostrar.
Ahora declararemos el cargador que sacará la información del archivo txt y lo pasará a las cajas de
texto.
Para ello utilizaremos el objeto LoadVars, este objeto permite enviar o recoger variables en forma
de URL.
Expliquemos esto. El objeto LoadVars es capaz de recoger una cadena de texto en forma de URL
como la siguiente:
var1=valor&var2=valor&var3=valor&var4=valor
Y sacar de allí las variables y sus valores.
La forma en la que lo hace es sencilla, a cada símbolo & que encuentre entenderá que lo siguiente
que encuentre será el nombre de una variable (igualada a su valor).
De esta forma escribiremos en el archivo de texto diapositivas.txt lo siguiente:
titulo1=Los mejores sandwiches
&descripcion1=En sa cuina creamos los sandwiches mas originales y
sabrosos de toda la ciudad.
&titulo2=Calidad Superior
&descripcion2=Nos cuidamos siempre de que nuestros platos ofrezcan la
maxima calidad.
&titulo3=Productos seleccionados
&descripcion3=Seleccionamos los productos uno a uno y de distribuidores
de confianza.
&titulo4=Nuestras especialidades
&descripcion4=No olvides probar nuestras especialidades en ensaladas y
postres.
De esta forma cuando el objeto LoadVars cargue el archivo verá que hay 8 variables, y cada una
de ellas con su respectivo valor.
Veamos, pues, cómo leer y manejar estas variables.
Para declarar el objeto sólo hace falta escribir:
var cargador:LoadVars = new LoadVars();
Una vez declarado el objeto podemos trabajar con él.
Lo primero que haremos será establecer unas cuantas líneas que se ejecutarán cada vez que
intentemos cargar el archivo. Para ello aprovechamos el método onLoad del objeto:
cargador.onLoad = function(exito:Boolean) {
if (exito) {
textoDiapositiva.descripcion_txt.text =
eval("cargador.descripcion" + imagenActual); //recupera la descripción
textoDiapositiva.titulo_txt.text = eval("cargador.titulo" +
imagenActual); //recupera el título
}
else {
textoDiapositiva.descripcion_txt.text = "No se ha podido cargar
el texto";
textoDiapositiva.titulo_txt.text = "Error";
}
}
Al invocar el método onLoad nos devolverá un valor (que nosotros hemos llamado exito). Esta
variable de tipo booleano puede tomar dos valores, verdadero o falso.
Por tanto, si la carga se efectúa correctamente el valor de exito será true, y false si no pudo cargar
el archivo.
Por ello el código que se ejecuta al cargar el archivo evalúa si la carga se realizó con éxito.
if (exito) {
}
else {
}
Si se pudo cargar, recuperamos las variables del archivo. Tendremos que acceder a ellas a través
del cargador. cargador.titulo1 nos dará el valor de la variable titulo1.
Pero debemos de recuperar la variable correspondiente a la imagen que se está mostrando, ¿cómo
lo hacemos? Muy sencillo, deberemos construir el nombre de la variable a recuperar.
Para el titulo el nombre de la variable es titulo más el número de la imagen que se muestra. Por lo
que nos quedaría titulo+imagenActual. Pero, claro, no podemos escribir:
cargador.titulo+imagenActual //esto no es correcto
Para poder hacerlo deberemos utilizar la función eval(), que construirá el nombre y luego lo
recuperará:
eval("cargador.titulo"+imagenActual)
Una vez hemos averiguado cómo sacar la variable la adjudicamos al campo de texto:
textoDiapositiva.titulo_txt.text = eval("cargador.titulo" +
imagenActual);
Y hacemos lo mismo para la descripción:
textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion" +
imagenActual);
En principio habremos terminado. Optimizaremos el funcionamiento mostrando mensajes de error si
el archivo no se pudo cargar:
textoDiapositiva.titulo_txt.text = "Error";
textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el
texto";
Cerramos todas las llaves y el evaluador de la carga onLoad ya estará preparado.
Ahora cada vez que intentemos cargar algún archivo con cargador se ejecutará todo este código, y
si la carga se efectuó de forma correcta se asignarán las variables correspondientes a las cajas de
texto.
Para cargar un archivo solo tendremos que escribir:
cargador.load(archivo);
Y como en la variable archivo habíamos guardado la ruta del txt donde están las variables
necesarias habremos terminado.
Como puedes ver las últimas líneas que se ejecutan son:
cargador.load(archivo);
loadMovie(matrizImagenes[imagenActual-1], contenedor);
Que cargarán por primera vez la imagen1 y el texto correspondiente.
En el cargador deberemos decir que cargue el contenido del array matrizImagenes de la imagen
correspondiente. Pero como las matrices empiezan por 0 la ruta de la primera imagen estará
almacenada en matrizImagenes[0].
Es por esto que al cargar la imagen la ruta que damos es:
matrizImagenes[imagenActual-1]
Ahora veremos que hemos escrito en el fotograma 6 para que se carguen las imágenes y texto que
correspondan:
if (imagenActual >= total) {
imagenActual = 1;
}
else {
imagenActual++;
}
cargador.load(archivo); //carga del texto
loadMovie(matrizImagenes[imagenActual-1], contenedor);
imagen
//carga de la
Este código se ejecuta en el momento en el que el contenedor tiene la propiedad Alfa al 0% por lo
que es totalmente invisible. Aprovecharemos este momento para cambiar la imagen y el texto.
Lo primero que evaluamos es si la imagenActual es mayor o igual que el número total de
imágenes. Si no lo es aumentamos el valor de imagenActual en 1:
imagenActual++;
En el caso contrario (que imagenActual fuera mayor o igual al total de imágenes) significaría que si
aumentamos el valor de imagenActual en 1 nos pasaríamos y no exitiría ni imagen ni texto para esa
posición, por lo que iniciamos de nuevo el contador a 1 para que vuelva a empezar.
Esta condición hará el efecto de que cuando se vea la última imagen y se pulse siguiente se
visualice de nuevo la primera.
Una vez actualizada la variable imagenActual pasamos a cargar la imagen:
loadMovie(matrizImagenes[imagenActual-1], contenedor);
Y a actualizar el texto utilizando el cargador:
cargador.load(archivo);