Manual de Dreamweaver

MACROMEDIA 8...
1

AURELIO CCORAHUA CCONISLLA
ABEL NAJARRO ESPINO
DEISSY CARBAJAL MARQUINA
MACROMEDIA 8...

2

MACROMEDIA 8...

3

INTRODUCCIN

Macromedia dreamweaver 8 es un editor HTML profesional para
disear, codificar y desarrollar sitios, pginas y aplicaciones web.
Tanto si desea controlar manualmente el cdigo HTML como si
prefiere trabajar en un entorno de edicin visual, dreamweaver le
proporciona tiles herramientas que mejorarn su experiencia de
creacin web. Esta gua es una introduccin para utilizar
Macromedia dreamweaver 8dirigida a los usuarios que no estn
familiarizados con algn aspecto fundamental de esta aplicacin.
Los tutoriales de que consta le guan a travs del proceso de
creacin de un sitio web sencillo pero funcional.

MACROMEDIA 8...

4

MACROMEDIA DREAMWEAVER 8

Es un editor profesional visual de pgina web el cual nos permite editar y crear
fcilmente un sitio web que puede ser compatible con cualquier navegador o
explorador (Mozilla Firefox, internet Explorer, opera, etc.)

REQUERIMIENTOS DE SISTEMA

Procesador Intel Pentium III de 800 MHZ (o equivalente) y versiones posteriores,
Windows 2000, Windows XP.

256 MB de RAM.

Pantalla de 16 bits de 1024 x 768 (se recomienda de 32 bits).

1,8 GB de espacio en el disco disponible.

INGRESAR A DREAMWEAVER

Para iniciar Macromedia dreamweaver realice los siguientes pasos:

1) Hagamos clic en el botn inicio, ubicando en la esquina inferior izquierdo del
escritorio, para acceder al men desplegable inicio.

2) Desplacemos el cursor sobre la opcin todos los programas, para acceder a los
Opciones de men y realicemos unos de los siguientes procedimientos:
Seleccionemos Macromedia >Macromedia dreanweaver 8.
O, seleccionemos directamente Macromedia dreanweaver8.

Clic
MACROMEDIA 8...

5

3) Acceso directo
Comando ejecutar Windows + R

PANTALLA DE BIENVEDIDA
Lo primero que se muestra a ingresar al programa, es la ventana de bienvenida la que
contiene las siguientes secciones:

1. Un rea donde se registran todo el documente recientes, los ltimos utilizados en
dreanweaver.
2. Un rea en el cual se puede escoger el tipo de nuevo documento que se quiere
crear.
3. Un rea donde se puede crear nuevos documentos a partir de muestras de
plantillas ya establecidas.

MACROMEDIA 8...

6

ENTORNO DE TRABAJO

Una vez creado el primer documento en dreamweaver tendremos el siguiente entorno
de trabajo:

1. BARRA DE TITULO: Nos muestra del archivo de la aplicacin que est en uso, en
este caso (C:/colegio/biblioteca.html), si la aplicacin no a sido guardada aun,
muestra el nombre de documento sin ttulo.

2. BARRA DE MENU: Nos muestra los mens disponibles para cada aplicacin, as
como los comandos que la conforman.

3. PANEL INSERTAR: Contiene botones para la creacin e insercin de objetos;
como imgenes, tablas, capas y marcos. este panel tiene dos modos de vista:
La vista a modo de fichas

Macromedia dreamweaver
8
MACROMEDIA 8...

7

La vista a modo de men

4. LA BARRA DE HERRAMIENTA DE DOCUMENTO: Contiene los botones de
cdigo, dividir y diseo que sirven para determinar cul ser la nueva vista del
documento y algunos botones bsicos.

5. REGLA HORIZONTAL Y VERTICAL: Nos sirve para medir las dimensiones de la
pgina web que esta expresado en pixeles.

6. LA VENTANA DEL DOCUMENTO: Nos muestra el documento actual.

7. LOS PANELES ACOPLABLES: Situado en la parte derecha de la ventana de
documento, contiene fichas que permiten desplegar y contraer los paneles que se
utiliza con mayor frecuencia.

8. EL PANEL ARCHIVOS: Nos muestra la estructura del sitio web en dreamweaver,
es decir todas las pginas que contiene el sitio y nos permite navegar por l.

9. EL PANEL DE PROPIEDADES: Nos muestra propiedades de edicin del objeto o
texto seleccionado.

10. BARRA DE ESTADO :Nos muestra el estado de la pgina web , es decir sus
dimensiones, su peso en kilobytes y velocidad de transferencia expresada en
segundo (1k/1s)

MACROMEDIA 8...

8

QUE ES DREAMWEAVER 8
Dreamweaver 8 es un software fcil de usar que permite crear pginas web
profesionales.
Las funciones de edicin visual de Dreamweaver 8 permiten agregar rpidamente
diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el
cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos
JavaScript, etc., de una forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas
trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin
salir del programa.
Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la
pgina de, la versin caduca al cabo de 30 das, pero seguro que te animas a comprar la
versin de pago de este estupendo programa
ARRANCAR Y CERRAR DREAMWEAVER 8
Veamos las dos formas bsicas de arrancar Dreamweaver 8.
Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la
pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men; al
colocar el cursor sobre Todos los programas aparece otra lista con los programas que
hay instalados en tu ordenador, buscar Macromedia (o Adobe si tienes las ltimas
versiones), seguidamente Dreamweaver 8, hacer clic sobre l, y se arrancar el
programa
Desde el icono de Dreamweaver 8 del escritorio
Puedes arrancar dreamweaver 9 ahora para ir probando todo lo que te explicamos.
Cuando realices los ejercicios tambin puedes compaginar dos sesiones de la forma que
te explicamos aqu.
Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes
operaciones:
Hacer clic en el botn cerrar
Pulsar la combinacin de teclas ALT+F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir

Si existe algn documento modificado que no ha sido guardado antes de cerrar
Dreamweaver, se te pedir confirmacin para guardar o no cada uno de ellos

MACROMEDIA 8...

9

ABRIR Y GUARDAR DOCUMENTOS

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones
Hacer clic en el botn abrir de la barra de herramientas estndar.
Pulsar la combinacin de teclas Ctrl +O.
Hacer clic sobre el men Archivo y elegir la opcin Abrir.
Hacer doble clic sobre el archivo en la ventana del sitio.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones
Hacer clic en el botn abrir de la barra de herramientas estndar.
Pulsar la combinacin de teclas Ctrl + N
Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
Hacer doble clic sobre el archivo en la ventana del sitio

Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora
Pgina bsica, HTML

Para guardar un documento, puedes utilizar cualquier de las siguientes
operaciones .

Hacer clic en el botn guardar de la barra de herramienta estndar.
Pulsar combinacin de teclas CTRL +S.
hacer clic sobre el men archivo y elegir la opcin guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente
con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno
por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones.

Hacer clic en el botn guardar todo de la barra de herramienta estndar.
hacer clic sobre el men archivo y elegir la opcin guardar.

Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones
hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin guardar
todo, ya que en ocasiones es posible no desear guardar los cambios en todos los
documentos modificados. Por ello es conveniente que al principio no utilices esta opcin,
al menos hasta que te hayas habituado a manejar el programa.

Mi primera pgina

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina
anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categora
Pgina bsica, HTML.
Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen
siguiente.
MACROMEDIA 8...

10

Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del documento.
Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la
pgina.
Entonces se abrir una ventana como la que aparece ms abajo

Cambia el Ttulo por Mi primera pgina.
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser
de color azul.

Seguidamente pulsa sobre el botn Aceptar.

Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para
nosotros. Para ello debe encontrarse en nuestro disco duro, en un CD-ROM o en un
disquete, pero preferiblemente en el disco duro.

Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer
clic con el botn derecho del ratn sobre la imagen que queremos traer de Internet, se
abre una ventana con una opcin similar a Guardar imagen como... (Dependiendo del
navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco
duro.
MACROMEDIA 8...

11

En los navegadores ms modernos al colocar el cursor sobre una imagen aparecen

Estos iconos en una esquina de la imagen, si haces clic en el icono del
disquete aparecer el mismo men Guardar imagen como... a que hacamos referencia
anteriormente.
Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina
web que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis

Documentos.

Ahora tienes que insertar la imagen debajo de la segunda lnea de texto. En primer lugar
debes situar el cursor al final de la segunda lnea y pulsar un intro (Enter) para ir a una
nueva lnea. Despus debes dirigirte al men Insertar, a la opcin Imagen.
En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la
habas guardado, y despus seleccionarla

CONCEPTO BASICO DE DREAMWEAVER
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el
inspector de propiedades que se encuentra normalmente en la parte inferior de la
ventana, y que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a travs Del men Ventana, con la opcin
Propiedades.

MACROMEDIA 8...

12

Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est
contrado. Para que te aparezca desplegado debes pulsar sobre el botn , que aparece
junto al nombre.

Selecciona la primera lnea de texto y cambia el Formato por Encabezado 1 y el color por
#000066, tal y como se muestra en la siguiente imagen.

Despus de esto, la apariencia de la primera lnea habr cambiado. Selecciona la imagen
y las dos ltimas lneas de texto. Pulsa sobre el botn para centrarlos.

Una vez hayas centrado la imagen y las otras dos lneas siguientes, selecciona la segunda
lnea de texto, que an no ha sido modificada. Cambia el Formato por Encabezado 3,
pulsa una vez sobre el botn y pulsa tres veces sobre el botn .

Selecciona de nuevo la ltima lnea, y en Vnculo introduce http://www.elpais.es, para
crear un enlace a esa otra pgina:

Despus de todos estos pasos, puedes ver cmo ha quedado el documento pulsando la
tecla F12.
Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men

Archivo, desde la opcin Guardar.
Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la
extensin ha de ser atm o HTML.
Por ejemplo, puedes llamarlo prueba1.htm.

MACROMEDIA 8...

13

Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber
seguido todos los pasos anteriores. Compara esta pgina con la tuya, para ver si lo has
hecho todo bien.
EL INTORNO DE TRABAJO
Vamos a ver cules son los elementos bsicos de Dreamweaver 8, la pantalla, las barras,
los paneles, etc., para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se
llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en
algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto
estaremos en disposicin de empezar a crear pginas web.

La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus
componentes fundamentales. As conoceremos los nombres de los diferentes elementos
y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y
en general todas las de este curso) puede no coincidir exactamente con la que ves en tu
ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada
momento, como veremos ms adelante.

MACROMEDIA 8...

14

LA BARRA DE TTULO

La barra de ttulo contiene el nombre del programa (Macromedia Dreamweaver 8) y
seguidamente el nombre del documento que aparecer en el explorador y entre
parntesis, su ubicacin y el nombre del archivo en formato HTML. En el extremo de la
derecha estn los botones para minimizar, maximizar/restaurar y cerrar.

LA BARRA DE MENS

La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens
desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones
relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.

Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas
es preferible o indispensable hacerlas desde los paneles.

LA BARRA DE HERRAMIENTAS ESTNDAR

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata
algunas de las operaciones ms habituales, como Abrir , Guardar, etc.

La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma
inmediata algunas otras operaciones habituales que no incluye la barra de herramientas
estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.

LA BARRA DE ESTADO

La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos
(en la imagen al encontrarnos en un documento en blanco estamos directamente sobre
la etiqueta <body>).

Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la
pgina), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el
MACROMEDIA 8...

15

desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al
100%).
Los paneles e inspectores
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se
conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en
general, la apariencia y opciones de un inspector cambian dependiendo del objeto
seleccionado.

A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada
uno de los paneles o inspectores. Vamos a ver los ms importantes.

El inspector de Propiedades

El
inspector de Propiedades muestra y permite modificar las propiedades del elemento
seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento
seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o
cursiva, etc.

Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se
encuentra en la esquina inferior-derecha.

Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.

LA BARRA DE HERRAMIENTAS INSERTAR O PANEL DE OBJETOS

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un
documento sin la necesidad de recurrir al men Insertar. Los Elementos estn
clasificados segn su categora: tablas, texto, objetos de formulario, etc.
MACROMEDIA 8...

16

Es posible configurar este panel para que en los botones se muestren los iconos de los
objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los
objetos, o para que se muestren ambos a la vez.

VISTA DE UN DOCUMENTO
Puedes cambiar la vista del documento a travs de la barra de herramientas de
documento.

LA VISTA DISEO
La vista Diseo permite trabajar con el editor visual. Es la vista

Predeterminada de Dreamweaver y la que se suele utilizar habitualmente.

LA VISTA CDIGO
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de
Programacin, de cdigo fuente. No permite tener directamente una referencia
Visual de cmo va quedando el documento segn se va modificando el cdigo.

MACROMEDIA 8...

17

LA VISTA CDIGO Y DISEO
La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona superior
muestra el cdigo fuente, y la inferior el editor visual. Cuando se realiza un cambio en
alguna de las zonas, este cambio se aplica directamente sobre la otra.

LA AYUDA A TRAVS DEL MENU AYUDA PUEDES:
Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes
buscar por temas, por ndice o por contenido, si seleccionas la opcin Utilizacin
de Dreamweaver o simplemente pulsando F1.

Acceder a tutoriales (opcin Primeros pasos con Dreamweaver).
MACROMEDIA 8...

18

Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las
etiquetas HTML.
Acceder al Centro de servicio tcnico de Dreamweaver en la web.
Acceder al Foros en lnea de Dreamweaver.

CONFIGURACION DE UN SITI WEB LOCAL (I)
En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo
modificar las propiedades de los documentos, como puede ser el color de fondo.

INTRODUCCIN
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, Con un diseo
similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear
las pginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para
contener las imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas
carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos
a la hora de trabajar. Esto es lo que se conoce como sitio local.

Despus se podrn copiar los archivos en un servidor web, en el denominado sitio
remoto, lo que equivale a publicar el sitio, de modo que la gente podr verlo en Internet.

La organizacin de los archivos en un sitio permite administrar y compartir archivos,
mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el
servidor, etc.

Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya
que los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una
URL genrica.

Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.com en el
navegador, ste intentara cargar la pgina http: //www.aulaclic.com/index.htm, por lo
MACROMEDIA 8...

19

que se producira un error en el caso de que no existiera ninguna pgina con el nombre
index.htm.

CREAR O EDITAR UN SITIO WEB SIN CONEXIN A INTERNET

Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio en
Dreamweaver.

Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios....

Recuerda que a travs del panel Archivos, pestaa Archivos, se puede acceder a cada
uno de los sitios creados y a la opcin Administrar sitio.

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que
contiene la lista de sitios locales definidos con anterioridad

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la
misma ventana en la que definir las caractersticas del sitio.

MACROMEDIA 8...

20

Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en
la parte izquierda.

Para visualizar las caractersticas de una categora basta con seleccionarla de la lista
haciendo clic en ella.

Vamos a ver los datos que hay que editar para la categora Datos locales.

Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el
sitio dentro del disco duro local.
Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede definirse la
pgina principal del sitio, de la que colgarn el resto de documentos HTML dentro del
sitio, si en la carpeta raz del sitio existe una pgina con el nombre index.htm,
Dreamweaver la coger por defecto.

Estas tres caractersticas son las imprescindibles para definir un sitio local.
Las dems opciones en este momento no nos interesan, ya que estamos definiendo el
sitio local, y no es necesario establecer los datos del servidor en el que estar el sitio
remoto.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar
la pestaa Bsicas, en vez de la pestaa Avanzadas.

MACROMEDIA 8...

21

ABRIR UN SITIO
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar
sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo.

Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el
men desplegable de la pestaa Archivos.

TEXTO
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear
estilos CSS, que permiten asignar al texto estilos creados por nosotros mismos, no
predefinidos.
Caractersticas del texto
Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto,
y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen
a travs del inspector de propiedades, aunque sean menos que las que se nos ofrecen a
travs del men Texto.

FORMATO:

Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser
encabezado, prrafo o pre formateado. Los encabezados se utilizan para establecer
ttulos dentro de un documento. El formato pre formateado sirve para que el texto
aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios
MACROMEDIA 8...

22

espacios solo se considera uno, pero al establecer el formato pre formateado se
respetar que hayan varios espacios en lugar de solo uno.
FUENTE:
Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de
una sola, ya que es posible que al establecer una nica fuente el usuario no la tenga en su
ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el
usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos
Arial, Helvtica, Sans-serie, el texto se ver con la fuente Arial, pero si esta no existe se
ver en Helvtica.

TAMAO:
Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas
unidades, en pxeles, centmetros, etc...
COLOR:

Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las
propiedades de la pgina. Si no se ha establecido ningn color en las propiedades de la
pgina ni aqu, el color del texto por defecto ser el negro.
ESTILO:

Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs
del men Texto tambin se puede, entre otras cosas, subrayar el texto. Esta opcin no
aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que
los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario
pensara que se trata de un vnculo.
ALINEAR:

A travs de estos botones es posible establecer la alineacin del texto de una de estas
cuatro formas distintas: izquierda, centrada, derecha y justificada.

LISTA:
MACROMEDIA 8...

23

Estos botones permiten crear listas con vietas o listas numeradas.
SANGRIA:

Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una
especie de margen que se establece a ambos lados del texto. En este caso caso los
botones se refieren a sangra a la izquierda del texto.

Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar
sus propiedades.

LISTAS
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con
vietas.
Para que un texto que ya ha sido introducido en el documento se convierta en una lista,
simplemente hay que seleccionarlo y pulsar sobre la opcin de lista correspondiente, ya
sea a travs del inspector de propiedades, o a travs del men Texto.
La lista con vietas (desordenada) se selecciona a travs del botn , mientras que la
lista numerada (ordenada) se selecciona a travs del botn .

Ejemplo de lista numerada (ordenada):
1. Preparar la mochila
2. Sacar los libros de ese da
3. Introducir los libros del da siguiente
4. Ponerme el pijama
5. Lavarme los dientes
6. Poner el despertador

Ejemplo de lista con vietas (desordenada):
Perro
Gato
Aves
Canario
Loro

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es
necesario aadir una sangra en los elementos de la lista que se desee que pasen a
formar parte de la lista anidada.
A travs del men Texto, opcin Lista, es posible acceder a las propiedades de la lista
seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en
algn lugar de la lista para que se active este submen.
MACROMEDIA 8...

24

En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o
con vietas), el tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en
el caso de las listas ordenadas, el nmero por el que comenzar el recuento.

CREAR UN ESTILO PERZONALIZADO
Con Dreamweaver 8, las caractersticas que apliquemos a un texto crearn
automticamente estilos CSS que se incrustarn en el documento actual y se aplicarn
nicamente sobre l.

VEMOSLO:
Para crear un Estilo CSS personalizado:

1. En el documento, se selecciona el texto al que se desea aplicar caractersticas
concretas.
2. En el inspector de propiedades se modifican todas las propiedades de formato de
texto, se establecen los atributos de la fuente y del prrafo que queramos.
Automticamente Dreamweaver crear un nuevo estilo con el nombre Estilo1 o Estilo2 o
Estilo3,... segn los nombres de los estilos ya creados.
Aparecer el nombre Estilo1 en el cuadro Estilo del panel Propiedades.

Tambin se puede cambiar el nombre del estilo, es mejor que
el estilo tenga un nombre que indique a qu tipo de texto se
va a aplicar. Para ello desplegamos la lista de estilos y
seleccionamos la opcin Cambiar nombre... Aparecer un
cuadro de dilogo para que introduzcamos el nuevo nombre
como la imagen inferior.

MACROMEDIA 8...

25

Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: mi estilo.
Al aceptar, aparecer un panel con el nombre Resultados. Cerrar esta ventana.
De esta manera se puede crear un estilo para aadirlo a un documento.
Cada nuevo estilo que se crea, se aade a la lista de estilos, y los podemos acceder
tambin de una manera rpida a travs del men Texto, opcin Estilos CSS.
En el Panel CSS se puede verificar que se ha aadido automticamente el nuevo estilo.

Si lo deseas, puedes aprender ms sobre el panel CSS
APLICAR UN ESTILO
Para aplicar un Estilo CSS personalizado:
En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sita el punto
de insercin del mouse en un prrafo para aplicar el estilo a todo el prrafo. Si
seleccionas un rango de texto dentro de un prrafo, el Estilo CSS slo afectar al rango
seleccionado.
MACROMEDIA 8...

26

En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que
aparece al desplegar el cuadro Estilo.
Para practicar puedes realizar el Ejercicio paso a paso Crear estilo de clases.

Hojas de Estilos

Podemos exportar estilos que se encuentren incrustados en la pgina HTML a una nueva
hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando
Exportar.
Se abrir el cuadro de dilogo Exportar estilos como archivo CSS que te permitir
guardar todos los estilos incrustados en un nuevo archivo CSS.
Esta opcin es muy til si tienes los estilos incrustados en una pgina y queremos
utilizarlos en otras tambin. Simplemente pasamos los estilos incrustados a una hoja de
estilos y luego la adjuntamos en cualquier pgina que queramos utilizarlos.

Para asignar una hoja de estilos a una pgina despliega el cuadro Estilo que se encuentra
en el Inspector de Propiedades y selecciona Adjuntar hoja de estilos...

En Archivo./URL debe especificarse la ruta y el nombre de la hoja de estilos.
Elegimos si queremos Vincular o importar la hoja de estilos.
Si elegimos Vincular la hoja no se incrusta en la pgina sino que se aade a la pgina una
referencia a la hoja, esto permite que cualquier cambio realizado en la hoja quede
reflejado de manera automtica en todas las pginas que utilizan la hoja. Esta es la
opcin ms aconsejable si vamos a utilizar el estilo en ms de una pgina, de esta forma
slo ser necesario vincular cada una de los archivos que quieras que se vean afectados
a la hoja de estilos que hayas creado.

Si elegimos Importar la hoja se incrusta en la pgina.

La opcin Media te permitir seleccionar el tipo de medio al que se asociar la hoja de
estilos, por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas opciones te
MACROMEDIA 8...

27

permitirn crear hojas de estilos para soportes diferentes. Puedes crear una para screen,
que ser la que se muestre cuando navegues por Internet, y otra para print que ser la
que se utilice cuando se imprima el contenido del archivo.

Despus de Aceptar, la hoja con sus estilos aparecer en el panel CSS.
HIPERENLACES
Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un
elemento esencial para cualquier pgina web.

INTRODUCCIN
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva
de una pgina o archivo a otra pgina o archivo.

Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
TIPOS DE ENLACES
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.

Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la
ruta completa del archivo.

La ubicacin es en Internet, por ejemplo, http: //www.aulaclic.com, o
http://www.misitio.com/pagina/pagina1.html.

Referencia relativa al documento: Conduce a un documento situado dentro del mismo
sitio que el documento actual, pero partiendo del directorio en el que se encuentra el
documento actual.
Si queremos referimos a carpetas que estn por encima del nivel donde nos
encontramos deberemos utilizar.

Por ejemplo, imagina que estamos en la siguiente direccin
http://www.misitio.com/pagina/informacion/index.html. En esta pgina queremos
mostrar una imagen que se encuentra en la carpeta http:
//www.misitio.com/pagina/secciones/seccion1.html, cmo podemos hacerlo? Fcil.
Deberemos llamarla haciendo referencia al nivel
superior(http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.

El resultado de la ruta sera el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacin, subimos un nivel y
luego nos movemos dentro de la carpeta secciones para mostrar el archivo
seccion1.html.

Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio
que el documento actual.

En este mtodo los enlaces se crean indicando la ruta a partir de la raz del sitio.
MACROMEDIA 8...

28

En el ejemplo anterior si tuvisemos definido como sitio la carpeta
http://www.misitio.com/, un enlace en cualquier pgina del sitio a
http://www.misitio.com/pagina/secciones/seccion1.html se creara como
/pagina/secciones/seccion1.html.

Como puedes ver ahora el vnculo a un archivo en todas las pginas es igual porque se
define dependiendo del sitio raz y no de la ubicacin donde se encuentra.

Puntos de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del
actual o de otro diferente. Para ello el vnculo debe ser
nombre_de_documento.extension#nombre_de_punto.

El punto se define dentro de un documento a travs del men Insertar, opcin Anclaje
con nombre.

Podramos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma:
../secciones/seccion1.html#parte2

Estos tipos de enlace que hemos visto son vlidos tanto para referenciar pginas (para
crear hiperenlaces) o incluso imgenes u otro tipo de objetos (como veremos en temas
posteriores).

Debers tener siempre en cuenta que los nombres de las rutas se correspondan
perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto).

Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en los
enlaces.

Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no
tendrs problemas a la hora de referenciar tus objetos.

CREAR ENLACES
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para
ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y
seguidamente establecer el Vnculo en el inspector.

Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso
contiene HTTP://

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan
comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una
almohadilla #.
MACROMEDIA 8...

29

Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.

Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que
explicaremos a continuacin y el enlace se colocar en el lugar en el que estaba situado
el cursor.

Texto: es el texto que mostrar el enlace

Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo
debers escribirla empezando siempre por HTTP://. Haz clic sobre el icono de carpeta
para buscar los archivos que existan dentro del sitio. Por defecto dreamweaver te crear
un enlace relativo al documento. Si quieres que los enlaces sean relativos al sitio visita
este avanzado.

CREAR VNCULOS RELATIVOS AUTOMTICAMENTE:
Haciendo clic en el men Sitio y seleccionando la opcin Administrar sitios... podemos
editar la configuracin del sitio. Bastar con seleccionarlo en el cuadro de dilogo y
pulsa Editar.

Se abrir la ventana de Definicin del Sitio. All selecciona la pestaa Avanzadas y en
la categora Datos Locales podrs ver las siguientes opciones:

MACROMEDIA 8...

30

Estas opciones te ayudarn a crear los enlaces de forma relativa. Selecciona Documento
o Raz del sitio en Vnculos relativos a: para que se creen los enlaces relativos a el
documento donde se haya situado el enlace o desde la raz del sitio.

Si seleccionas la opcin Raz del sitio, los enlaces se establecern respecto a la carpeta
seleccionada en el campo Carpeta raz local.

Seleccionar estas opciones no cambiar los enlaces existentes, sino que aplicar
esta configuracin a los vnculos que se creen a partir de ese momento.
Destino: la pgina donde se abrir la pgina, este campo se explica en el siguiente
apartado.

Ttulo: se trata de la ayuda contextual del vnculo, es equivalente al atributo ALT de las
imgenes.
Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al
enlace mediante la pulsacin de la tecla Alt ms la tecla de acceso indicada.

ndice de tabulador: Como habrs podido observar puedes saltar a travs de los enlaces
pulsando la tecla Tabulador. En este campo podrs establecer un ndice indicando la
prioridad del enlace y as configurar el modo en el que actuar el Tabulador es sus
diferentes saltos.

Destino del enlace

El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada,
puede variar dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que
aparece a travs del men Insertar, opcin Hipervnculo.

_BLANK: Abre el documento vinculado en una ventana nueva del navegador.

_PARENT: Abre el documento vinculado en la ventana del marco que contiene el vnculo
o en el conjunto de marcos padre.

_SELF: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o
ventana que el vnculo.

_TOP: Abre el documento vinculado en la ventana completa del navegador.

No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones
de destino, ya que se volvern a ver en el tema de Marcos.
MACROMEDIA 8...

31

Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace.

Practicar cmo crear un hiperenlace.
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.

2 Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.

3 Selecciona el sitio Javier en el panel Archivos.

4 Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.

MACROMEDIA 8...

32

Se abrir el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin
Propiedades.

6 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn
para desplegar sus propiedades ms avanzadas.

7 Selecciona la imagen del logotipo de aula clic. Para ello hay que hacer clic sobre ella.

8 En Vnculo, del inspector de propiedades, escribe http.

9 En Dest selecciona la opcin _blank.

10 Pulsa fuera del texto para que deje de estar seleccionado y se le apliquen todos los
cambios.
11 Pulsa F12 para ver el resultado en tu navegador, observa que si posicionas el ratn
encima de la imagen, el puntero del ratn cambia de aspecto (normalmente toma forma
MACROMEDIA 8...

33

de mano con el dedo ndice sealando) esto te indica que asociado a la imagen hay un
hiperenlace y en la barra de estado puedes ver la pgina a la que enlaza.

12 Cierra la ventana del navegador.
13 Haz clic sobre el botn Guardar de la barra de herramientas.

FORMATO DE ENLACE
En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo
tiempo, puede adquirir tres colores diferentes que pueden especificarse a travs de las
propiedades de la pgina. Estos tres colores diferentes son los que se asignan como color
de vnculo, de vnculo activo, y de vnculo visitado.

Aqu tienes un vnculo de ejemplo:
Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de
puntitos al pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una
imagen (un mapa), aparece el contorno de esa zona.

Aqu tienes dos vnculos similares de ejemplo:

Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro
alrededor. Esto ocurre debido a que que el campo Borde del inspector de propiedades
de la imagen vale uno (1), mientras que para la primera imagen vale cero (0).

El campo Borde sirve para ponerle un borde a la imagen, independientemente de si sta
va a contener un vnculo o no.

MACROMEDIA 8...

34

Si se pone a cero (0), no aparece ningn borde, ya que esto indica que el tamao de las
lneas que forman el recuadro es cero (0). Puede hacerse un recuadro ms gordo
incrementando el valor del campo Borde.

Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al
situarse encima del vnculo. Suele adquirir la apariencia de una mano sealando.

ENLACE A CORREO ELECTRONICO
Es posible especificar vnculos a direcciones de correo electrnico. Esto resulta til
cuando se desea que los visitantes de la web puedan contactar con nosotros.

La sintaxis del vnculo en este caso es mailto:direccin de correo.

Puede definirse el vnculo a travs de Vnculo, del inspector de propiedades,
seleccionando previamente el texto o la imagen deseados.

Tambin es posible a travs del men Insertar, opcin Vnculo de correo electrnico.
En este caso no es posible asignar el vnculo a una imagen, solo permite introducir el
texto que contendr el vnculo de correo.
Para practicar puedes realizar el Ejercicio paso a paso Crear vnculo de correo
electrnico.

En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vnculos
rotos. Si no sabes lo que son o cmo solucionarlos, consltalo

Para practicar puedes realizar el Ejercicio paso a paso Crear vnculo de correo
electrnico.

Practicar cmo crear un vnculo de correo electrnico.

MACROMEDIA 8...

35


3 Selecciona el sitio Javier en el panel Archivos

4 Haz doble clic sobre el documento quienes.htm, que aparece en el panel desplegable
de Archivos.


MACROMEDIA 8...

36

Propiedades.

6 Al final del todo escribe el texto Buscamos Javier.

7 Selecciona el botn Alinear a la derecha del inspector de propiedades.

8 Selecciona el texto Javier que acabas de escribir.

9 En Vnculo, del inspector de propiedades, escribe
abel_virgo@hotmail.com

10 Pulsa fuera del texto para que deje de estar seleccionado y se le aplique el ltimo
cambio.
11 Pulsa F12 para ver el resultado en tu navegador, observa que si haces clic sobre el
texto se abre tu aplicacin de correo (si la tienes instalada en tu ordenador) preparada
para que escribas el texto del mensaje que quieres enviar, en la direccin de destino
habr puesto abel_virgo@hotmail.com

12 Cierra tu aplicacin de correo.

MACROMEDIA 8...

37

IMGENES (I)
En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos
cmo crear algunas imgenes especiales, como es el caso de los Rollovers y los botones
flash, que ayudan a mejorar la apariencia de nuestras pginas.

Introduccin
Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que
permiten mejorar su apariencia, o dotarla de una mayor informacin visual.

Existen una serie de formatos de imagen ms recomendables que otros para ser
introducidos en una pgina web. Esta informacin puedes consultarla.

INSERTAR UNA IMAGEN

Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen.
Despus de esto, ya es posible seleccionar una imagen a travs de la nueva ventana.

Si por algn motivo se desea insertar un BMP, este no aparecer a no ser que en Tipo se
seleccione Todos los archivos.

En Relativa a es posible especificar si la imagen ser relativa al documento o a la
carpeta raz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve
todo el sitio a una ubicacin diferente, la imagen puede no verse al estar siendo buscada
en la ubicacin anterior.

Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.

La ruta en la que se encuentra la imagen aparecer representada de una u otra forma en
el campo URL de la ventana y en el campo Origen del inspector de propiedades,
dependiendo de si ha sido insertada como relativa a la carpeta raz del sitio o relativa al
documento.

Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se
encuentran la carpeta imgenes y el documento en el que deseamos insertar la imagen.
Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imgenes.

MACROMEDIA 8...

38

En el caso de insertar la imagen como relativa al Documento la ruta sera:

Imgenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera:

Imgenes/aulaclic.jpg

Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al
documento o a la carpeta raz del sitio.

Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver,
aunque s en el navegador. En Dreamweaver aparecer de

La siguiente forma:
Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una
imagen que haba sido insertada. Esto puede ocurrir si se ha modificado el nombre de la
imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la
imagen que aparecer en el

Navegador ser similar a esta:

Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el
contenido del campo Alt del inspector de propiedades, que explicaremos a continuacin.

Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen.

Propiedades de una imagen Cuando seleccionamos una imagen el Inspector de
propiedades.

Desde aqu podrs acceder a distintas propiedades:

Desde el campo Alt podrs asignarle una ayuda contextual a la imagen, esta se mostrar
cuando coloques el ratn sobre ella, y es muy til de cara a hacer pginas accesibles ya
que el texto que se escribe ser ledo por los programas lectores para invidentes.
MACROMEDIA 8...

39

Tambin es muy til, como ya hemos visto, si la imagen por alguna razn no puede
mostrarse.

En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle
alineacin, bordes e incluso tamao con slo un clic.

Si le damos un valor al campo Vnculo convertiremos al imagen en un link a otra pgina.
Para enlaces externos recuerda que debe empezar siempre por HTTP:// y si deseas
crear un vnculo a un enlace electrnico deber empezar por mailto:

En caso de que le hayas asignado un vnculo podrs decidir en qu ventana quieres que
se abra seleccionando un valor en el campo Destino.

Puedes asignarle un tamao de borde desde el campo Borde.

Puedes seleccionar su alineacin con respecto al texto desde el campo Alinear.

Por ltimo las opciones Espacio V y Espacio H te sern muy tiles para separar la
imagen del texto y as no queden demasiado pegadas a l. Estos campos indican el
espacio vertical y horizontal respectivamente entre la imagen y el texto.

Cambiar el tamao de una imagen
Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio de
tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la
visualizacin de la imagen dentro de la pgina.

Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de
cmo podra quedar modificndola desde un editor externo, como Fireworks.

Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el
icono de Dreamweaver y modificamos su tamao de varias formas diferentes:

Imagen original Imagen con tamao modificado

Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en
ocasiones puede resultar til modificar el tamao de algunas imgenes aunque esto
implique perder calidad.
Existen dos formas de modificar el tamao.
Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los
recuadros negros que aparecen alrededor de la imagen.

MACROMEDIA 8...

40

La otra es a travs de inspector de propiedades, cambiando los campos An (anchura) o
Al (altura). Estos campos aparecern en el inspector cuando est seleccionada alguna
imagen. Si estos campos no contienen el tamao original de la imagen, el valor aparecer
resaltado en negrita y aparecer a la derecha una flecha circular que permite volver al
tamao original haciendo clic sobre ella.

Pueden crearse vnculos y comportamientos sobre partes de una imagen, sin la
necesidad de que sea sobre toda ella. A esto se le conoce como mapa de imagen.
Esta informacin puedes consultarla aqu.

MAPAS DE IMAGEN
Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle
algn tipo de comportamiento.

Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que
se desea crear el mapa, y abrir el inspector de propiedades de dicha imagen.

Estando seleccionada la imagen, ya es posible crear un mapa a travs de los botones del
inspector de propiedades que tienen el siguiente aspecto: . Si no te
aparecen despliega el panel Propiedades para verlo completo.

Los tres ltimos botones son los que se utilizan para crear los mapas. Dichos mapas
pueden tener forma rectangular, circular, o libre, dependiendo del botn pulsado.

Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre
la imagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre los
lugares donde se desea que comience y finalice el mapa, as como sobre el resto de
lugares (en orden) que se desea que recorra el mapa en el caso de forma libre.

MACROMEDIA 8...

41

Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un
vnculo y un texto alternativo a ese mapa como puedes ver a continuacin:

El primero de los botones, el de la flecha, debe pulsarse al finalizar la creacin de un
mapa, para que el puntero recupere su forma original al situarse sobre una imagen. De
este modo, es posible mover los puntos del mapa, en el caso de que no hayan sido
creados en los sitios deseados, para ajustarlos mejor a la imagen.

Aqu tienes un ejemplo de mapa de imagen. Sita el puntero sobre la cabeza del perro,
que es la que contiene el mapa, para ver qu es lo que ocurre.

EJERCICIO PASO A PASO.
Practicar las operaciones que hay que realizar para insertar mapas de imagen.

2 Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin
Administrar Archivos.

MACROMEDIA 8...

42

3 Selecciona el sitio Javier en la ventana que se abre y presiona Listo.

4 Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.


Propiedades.

6 Selecciona la imagen, haciendo clic sobre ella.


8 Haz clic sobre el botn Herramienta Zona interactiva poligonal , del inspector de
propiedades.

9 Pulsa, en el orden de las agujas del reloj, alrededor de la silueta del gorro de la
izquierda.

MACROMEDIA 8...

43

10 Haz clic sobre el botn Herramienta Puntero de zona interactiva , del inspector
de propiedades para terminar de delimitar el mapa.

11 Haz clic sobre el botn Herramienta Zona interactiva poligonal , del inspector
de propiedades.

12 Pulsa, en el orden de las agujas del reloj, alrededor de la silueta del gorro de la
derecha.

13 Haz clic sobre el botn Herramienta Puntero de zona interactiva , del inspector
de propiedades.

14 Haz clic sobre el mapa del gorro de la izquierda.

15 En Vnculo, del inspector de propiedades, escribe estadio.htm.

16 Haz clic sobre el mapa del gorro de la derecha.

17 En Vnculo, del inspector de propiedades, escribe estadio.htm.

18 Pulsa fuera del mapa para que deje de estar seleccionado y se le aplique el ltimo
cambio.

19 Pulsa F12 para ver el resultado en tu navegador. Comprueba que cuando posicionas
el puntero del ratn sobre los gorros, en la barra de estado aparece el enlace a la pgina
web correspondiente.


IMAGEN DE SUSTITUCIN. ROLLOVER IMAGEN (II)
Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella.
Este tipo de imagen suele utilizarse en los mens o en los botones para desplazarnos a
Travs de distintas pginas.

Aqu tienes un ejemplo de rollover. Sita el puntero sobre l para ver qu es lo que
ocurre.

Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la
opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imagen original
y la de sustitucin.

MACROMEDIA 8...

44

Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se
activa, la imagen de sustitucin se carga cuando se carga la pgina, de este modo se
evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que
aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el
que aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda
ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede
hacerse a travs del campo Alt del inspector de propiedades de la imagen seleccionada.

Para practicar puedes realizar el Ejercicio paso a paso Crear Rollover.

IMGENES (III) FLASH TEXTO
El texto Flash es similar a un rollover, pero
en lugar de intercambiar imgenes
intercambia el color del texto.

Para insertar texto Flash hay que dirigirse
al men Insertar, Media, a la opcin Texto
Flash.

En la nueva ventana, adems del texto, el
vnculo y el nombre con el que ser
guardado el texto, hay que especificar el
color original y el de sustitucin.

Aqu tienes un ejemplo de texto Flash.
Sita el puntero sobre l para ver qu es lo
que ocurre.

El inspector de propiedades del texto Flash es igual que el de un botn Flash.

BARRA DE NAVEGACIN
MACROMEDIA 8...

45

Una barra de navegacin es un conjunto de imgenes que se utilizan como opciones de
men para navegar dentro de una web. Una pgina web solo puede contener una nica
barra de navegacin.

Para insertar una barra de navegacin hay que dirigirse al men Insertar, Objetos de
imagen, a la opcin Barra de navegacin.

En la nueva ventana pueden especificarse cuatro imgenes diferentes para cada uno de
los botones, el vnculo para cada uno de ellos, etc.

A travs de los botones superiores de la ventana es posible crear y eliminar botones de
la barra de navegacin, as como reordenarlos. Con se crea un botn nuevo, con se
elimina el botn seleccionado, y con se puede modificar la posicin del botn
seleccionado.

En Imagen Arriba pones la imagen que quieres mostrar inicialmente (cuando todava no
se ha hecho clic).

En Sobre imagen, pones la imagen que quieres mostrar cuando el usuario mueva el
puntero sobre el botn y ste estaba mostrando la
imagen asignada en Imagen Arriba.

En Imagen abajo, pones la imagen que quieres mostrar despus de que el usuario haya
hecho clic en la imagen.

En Sobre mientras imagen abajo, pones la imagen que quieres mostrar cuando el usuario
mueva el puntero sobre sobre el botn y ste estaba
mostrando la imagen asignada en Imagen Abajo.

De esta forma, si asignas imgenes distintas puedes saber cul es el ltimo botn que ha
sido pulsado (el que tiene Imagen Abajo).

Aqu tienes un ejemplo de barra de navegacin. Para su creacin se han utilizado las
mismas imgenes para todos los botones, pero como puedes ver, en el botn del medio
aparece inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la
MACROMEDIA 8...

46

opcin Mostrar "Imagen abajo" inicialmente estaba activa para este botn. Sita el
puntero sobre los distintos botones, y pulsa sobre alguno, para ver qu es lo que ocurre.

El que existan cuatro imgenes diferentes sirve para identificar cul de los vnculos est
activo, cosa que con un simple rollover no puede hacerse.

A travs de la opcin Insertar es posible especificar si los botones de la barra de
navegacin van a aparecer de forma horizontal o vertical dentro de la pgina.

TABLAS (I)
En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas,
insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamao del
borde.

Introduccin
Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a
las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un
bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizar.

Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran
utilidad al mejorar notablemente las opciones de diseo.

Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A
continuacin tienes un ejemplo de tabla.

INSERTAR UNA TABLA
Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.

En la nueva ventana habr que especificar el nmero de Filas y Columnas que tendr la
tabla, as como el Ancho de la tabla.

MACROMEDIA 8...

47

El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de uno y otro
es que el ancho en Pxeles es siempre el mismo, independientemente del tamao de la
ventana del navegador en la que se visualice la pgina, en cambio, el ancho en Porcentaje
indica el porcentaje que va a ocupar la tabla dentro de la pgina y se ajustar al tamao
de la ventana del navegador, esto permite que los usuarios que tengan pantallas
grandes, aprovechen todo el ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto se le
asigna uno (1).

Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de stas.

Espacio entre celdas indica la distancia entre las celdas de la tabla.

Tambin se puede establecer si se quiere un encabezado para la tabla es recomendable
utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los
lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos
a mantener un seguimiento de la informacin de la tabla.

Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de la tabla.

En alinear texto indicamos dnde queremos alinear el ttulo con respecto a la tabla.

En Resumen: indicamos una descripcin de la tabla, los lectores de pantalla leen el texto
del resumen pero dicho texto no aparece en el navegador del usuario.

Rellenar las celdas
Las celdas son cada uno de los recuadros que forman una tabla, resultan de la
interseccin entre una fila y una columna.

MACROMEDIA 8...

48

Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente
hay que situar el cursor previamente dentro de la celda deseada.
Practicar las operaciones que hay que realizar para insertar una tabla y rellenar sus
celdas.



3 Selecciona el sitio Javier en el panel Archivos.

MACROMEDIA 8...

49


5 Sita el cursor en la lnea en blanco que se encuentra bajo el texto Tenemos sedes en.

6 Haz clic sobre el men Insertar.

7 Elige la opcin Tabla.

8 En Filas: escribe 6.

9 En Columnas: escribe 4.

10 En Ancho: selecciona Pxeles y escribe 500.

11 En Borde: escribe 2.

MACROMEDIA 8...

50

12 Si en Relleno de celda: aparece algo escrito, brralo.
13 En Espacio entre celdas: escribe 2.
14 Haz clic sobre el botn Aceptar.
15 Rellena la tabla para que quede del siguiente modo:


TABLA (II)
SELECCIONAR ELEMENTOS DE UNA TABLA:
Existen varias formas de seleccionar una tabla. Una de ellas es a travs del men
Modificar estando el cursor en la tabla, o desplegando el men contextual de la tabla al
pulsar con el botn derecho sobre ella. En ambos casos aparece la opcin Tabla, a travs
de la cual se puede elegir la opcin Seleccionar tabla.

MACROMEDIA 8...

51

Tambin es posible seleccionar una tabla pulsando con el ratn sobre el borde que la
rodea, o pulsando sobre la etiqueta <table> que aparece en la barra de estado de la
ventana de documento.

Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la
tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada columna.
Junto a los anchos se encuentran unos mens desplegables (men de encabezado de la
tabla y men de encabezado de la columna). Estos mens permiten acceder rpidamente
a determinados comandos relacionados con la tabla.

Si tienes el cursor en la tabla y no te aparece esa zona verde puedes activar su
visualizacin seleccionando la opcin Anchos de tablas del men Tabla o tambin
desplegando de la barra de mens, el men Ver, Ayudas visuales, Anchos de tabla. De
la misma forma se desactiva su visualizacin.

Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un
ancho especificado, si aparecen dos nmeros, el primer nmero corresponde al ancho
especificado en las propiedades de la tabla o columna y el segundo nmero es el ancho el
ancho visual que aparece en la vista de diseo, por ejemplo en la tabla anterior la
primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139
pxeles pero al contener una imagen que necesita ms espacio, la columna ocupar
realmente 142 pxeles (ancho visual de la columna tal como aparece en la pantalla).

Cuando ocurren estas diferencias podemos hacer que en el cdigo (propiedades) se
cambie el ancho por el real, para ello slo tenemos que seleccionar la opcin Igualar
todos los anchos del men desplegable de encabezado de tabla.

En este men vemos que tambin tenemos la opcin Seleccionar tabla.

MACROMEDIA 8...

52

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas,
columnas o celdas.

Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las
Distintas formas y elijas la que ms te gusta. Estas son las formas de seleccin:

Puedes utilizar la opcin Seleccionar columna del men de encabezado de
columna (zona verde de anchos) esto slo es vlido para seleccionar una
columna.

Manteniendo pulsado y arrastrando el ratn hasta seleccionar la columna/s o
fila/s completamente.

Tambin puede hacerse situando el cursor junto al borde superior o izquierdo de
la columna o fila respectivamente, de modo que el cursor cambia a la forma de
una flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha
flecha.

En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier
sitio de la fila y sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta
<td> para seleccionar la columna.

Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratn
mientras se arrastra sobre las celdas deseadas. Para seleccionar una sola celda o
varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras se
hace clic sobre las celdas.

FORMATO DE CELDA
Las propiedades de la tabla se especifican a travs de su inspector de propiedades.

A travs del inspector de propiedades se pueden modificar los valores que se
especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden
ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha),
el color de fondo (en Col. Fondo) o de borde de la tabla (en Col. borde), o la imagen
de fondo (en Im.).

Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades
cambia, para permitir especificar otros valores.

MACROMEDIA 8...

53

La parte superior del inspector de propiedades en este caso sirve para especificar las
propiedades del texto que se insertar dentro de la celda (o celdas) seleccionada.

La parte inferior sirve para especificar valores propios de la celda, como puede ser el
color o imagen de fondo diferentes de los especificados para la tabla global (en Fnd), el
color del Borde de la celda, etc.

Dos opciones que posiblemente necesites utilizar con frecuencia sern Horiz y Vert, que
definen la alineacin del contenido de la celda de forma horizontal y vertical
respectivamente.

Para practicar puedes realizar el Ejercicio paso a paso Modificar las propiedades
de la tabla,

CAMBIAR TAMAO DE TABLA Y CELDAS
Como ya sabes, el Ancho de una tabla puede ser definido como Pxeles o como
Porcentaje. El tamao de la tabla a travs del inspector de propiedades estar
especificado por los valores de An (anchura) y Al (altura). Normalmente slo se
especifica la anchura, no la altura.

Los valores An y Al de una celda siempre estn en Pxeles. No es necesario especificar
ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga
obligatoriamente ese tamao, y no que se ajusten al contenido o al tamao de la ventana.

No solo puede establecerse el tamao de las tablas y de las celdas a travs del inspector
de propiedades. Tambin es posible hacerlo manteniendo pulsado el ratn sobre alguno
de los bordes, arrastrndolo hacia la posicin deseada.

TABLA (III)
AADIR Y ELIMINAR FILAS Y COLUMNAS
Existen varias formas de aadir y eliminar filas y columnas a una tabla.

MACROMEDIA 8...

54

Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias,
desplegar el men contextual de la tabla al pulsar con el botn derecho sobre ella, o
bien abrir el men Modificar. En ambos casos aparece la opcin Tabla.

Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utilizar
mientras que otras no.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o
Insertar columna.

La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la
columna se inserta a su izquierda.

Tambin tenemos una opcin ms completa, la opcin Insertar filas o columnas.... Al
seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se
insertarn sern filas o columnas, el nmero de ellas que se insertar, y la posicin
donde se insertarn.

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna
a eliminar y elegir la opcin Eliminar fila o Eliminar columna del men Tabla.

MACROMEDIA 8...

55

Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del
o Supr)

Para practicar puedes realizar el Ejercicio paso a paso Aadir y eliminar filas.

AADIR, DIVIDIR Y COMBINAR CELDAS
Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama
aadir tablas.

A continuacin tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda
de una tabla se ha insertado otra tabla.

Para anidar tablas slo tienes que posicionar el cursor en la celda donde quieres insertar
la nueva tabla e insertarla como ya hemos visto.

Combinar celdas consiste en convertir 2 o ms celdas en una sola por lo que
dejar de haber borde de separacin entre una celda y otra ya que sern una sola.
Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el
ttulo de la tabla. En este caso habra que combinar todas las celdas de la primera
fila en una sola

Mientras que dividir celdas consiste en partir en dos una celda.

MACROMEDIA 8...

56

Una de las formas de dividir y combinar celdas es a travs del inspector de
propiedades.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn del
inspector de propiedades (lo encontrars en la parte inferior izquierda del panel
Propiedades, o pulsando sobre la opcin Combinar celdas de la opcin Tabla, que
como ya has visto puedes dirigirte a ella a travs del men contextual de la tabla y a
travs del men Modificar.

Tienes que tener en cuenta que slo es posible combinar celdas contiguas, cuya
combinacin pueda dar como resultado otra celda, es decir, que su combinacin d como
resultado un recuadro. Por ejemplo, en la siguiente tabla no podran combinarse las

Celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado
una celda.

Para dividir una celda hay que pulsar sobre el botn del inspector de propiedades, o
sobre la opcin Dividir celda de la opcin Tabla.

En ambos casos, aparece una ventana como sta, en la que hay que especificar si la celda
se va a dividir en filas o columnas, y el nmero de stas.

Para practicar puedes realizar el Ejercicio paso a paso Combinar celdas.
MODOS DE TABLA
MACROMEDIA 8...

57

A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de
visualizacin. Nosotros hemos trabajado en todo el tema con el modo estndar, y vamos
a seguir trabajando con l, pero se puede pasar a los otros modos a travs del men Ver
opcin Modo de tabla. Dentro de esta opcin podemos elegir entre Modo estndar,
Modo de tablas expandidas, o modo de diseo.

El Modo de diseo se utiliza para dibujar pginas con un diseo determinado,
basndose en tablas. Utilizando esta vista, las tablas no han de insertarse
obligatoriamente en lneas de texto, como hemos hecho hasta el momento, sino que es
posible insertarlas en cualquier punto de la pgina, y Dreamweaver se encargar de
rellenar el espacio vaco, para que sea posible que la tabla aparezca en esa posicin.

El Modo de tablas expandidas aade temporalmente relleno y espaciado de celda a las
tablas de un documento y aumenta los bordes de las tablas para facilitar la edicin. Este
modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto de
insercin de forma precisa pero en este modo no vemos la pgina como quedar
exactamente.

En este curso nos limitaremos al modo estndar.

TABLA (VI)
ADABTAR WEBS A DISTINTAS WEBS
Siempre que se crea una pgina web hay que tener en cuenta que va a ser visitada por
usuarios con monitores de distintos tamaos y con distintas resoluciones.

Es imposible hacer que una pgina se vea exactamente igual en todos los monitores de
los usuarios que la visitan, pero hay que intentar que su visualizacin sea lo ms
parecida posible.

La resolucin usada de forma ms frecuente es la de 800x600, por lo que inicialmente
habra que disear la pgina para dicha resolucin. Es decir, habra que crear la pgina
en un monitor con dicha resolucin, para poder visualizar claramente cmo queda en el
navegador, y distribuir el contenido de la pgina de la forma ms adecuada.

Normalmente se utilizan tablas, ya que resultan muy tiles para distribuir el contenido
de la pgina.
MACROMEDIA 8...

58

Como recordars, el tamao de las tablas
puede ser definido en pxeles o en
porcentaje. Cuando el tamao de la tabla
sea definido en pxeles, la tabla se ver
del mismo modo independientemente del
tamao de la ventana del navegador. En
cambio, cuando el tamao de la tabla sea
definido en porcentaje, la tabla se
ajustar al tamao de la ventana del
navegador, lo cual implica que el
contenido de la tabla se descuadrar.

Para ver una pgina con tablas de
tamao fijo, en pxeles. Imagina que la
pgina ha sido diseada para visualizarse
correctamente en un monitor pequeo de
baja resolucin, cuyo tamao equivale al
de la ventana del navegador que se ha
abierto.

Si modificas el tamao de la ventana, vers que las tablas son siempre del mismo
tamao. Esto tiene un gran inconveniente, ya que si maximizas la ventana del navegador
(lo que equivaldra a visualizar la pgina en un monitor grande con alta resolucin), a la
derecha de las tablas aparecer un gran hueco vaco.

Para ver una pgina con tablas de tamao variable, en porcentaje.

Si modificas el tamao de la
ventana, vers que las tablas se
ajustan a ella. Usar tablas con
tamao variable tiene tambin
un gran inconveniente, ya que
si maximizas la ventana del
navegador apreciars
claramente cmo el contenido
de las tablas se descuadra.

En un principio puede parecer
ms conveniente utilizar tablas
con tamao fijo, aunque esto
implique que aparezca el hueco
vaco a la derecha, en el caso de
los monitores con alta
resolucin. Pero con un poco
de prctica a la hora de
MACROMEDIA 8...

59

manejar las tablas, puedes salvar el inconveniente del descuadre de la pgina y as
definir pginas con tamao en porcentaje que aprovechen el ancho cuando el monitor
de ms grande.

No solo puede establecerse el tamao de la tabla, tambin es posible establecer el
tamao de las celdas.

El tamao de la celda a travs del inspector de propiedades estar especificado por los
valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura, no la
altura.
Los valores An y Al de una celda siempre estn en Pxeles. En la imagen anterior, la celda
tiene una anchura de 208 pxeles. Para que, por ejemplo, la anchura fuera del 25 por
ciento de la tabla, en An habra que escribir 25%.
Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta que contiene
cada una de ellas (imgenes, texto alineado a la derecha, texto alineado a la izquierda,
texto de gran tamao, etc.), puede conseguirse que al visualizar la pgina en monitores
de distintos tamaos y con distintas resoluciones, la apariencia sea bastante similar, o al
menos que la distribucin del contenido de la pgina no se vea muy afectado por el
cambio de tamao de la ventana del navegador.

MARCOS
Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar
un marco sencillo en una pgina, y cmo trabajar con l.

INTRODUCCION:
Los marcos o trames sirven para distribuir mejor los datos de las pginas, ya que
permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de
navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad,
pueden mejorar tambin la apariencia.

Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por
ejemplo, en la imagen de la derecha puedes ver una pgina con dos marcos. El marco
izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm.
Para poder visualizar la pgina de este modo, hemos tenido que abrir en el navegador el
documento marcos.htm, que
es la pgina que
contiene los marcos
agrupados.

MACROMEDIA 8...

60

Es posible editar los documentos contenidos en los marcos desde la pgina que contiene
el grupo de marcos. Esto facilita el trabajo, ya que es ms fcil hacerse una idea de cmo
quedar la pgina al final, cosa que no es posible si se editan individualmente cada uno
de los documentos que contiene el marco.

El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al principio,
por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos
conceptos bsicos y ejemplos sencillos.

CREAR MARCOS
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.

Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o
uno ya existente.
Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin puede
elegirse el tipo de marco que va a crearse.

Vamos a ver el marco a la Izquierda.

Si pulsamos sobre Izquierda se crear un nuevo marco a la izquierda del documento
actual.

Como puedes ver en la imagen, aparece una lnea que divide el documento en dos. El
documento de partida era uno nuevo.
MACROMEDIA 8...

61

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que
contiene el grupo de marcos. El de la derecha es el documento que tenamos
inicialmente, que est en el marco conocido como marco padre (Mainframes).

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la
lnea que separa los marcos. Esto solo es posible mientras dicho documento no se haya
guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco
vaco aparecer a la derecha del documento original.

En esta imagen puedes ver un ejemplo de marco a la derecha.

Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha.

Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la
derecha, y el que contiene el grupo de marcos. En este caso, el documento que tenamos
inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en
este caso el marco padre ser el de la izquierda.

El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre
el que se han insertado el resto de marcos.

MACROMEDIA 8...

62

MARCO (II)
SELECCIONAR MARCOS:
Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que
puede abrirse a travs del men Ventana. Si la opcin Marcos no te aparece
directamente en este men, posiblemente est dentro de la opcin Otros. Tambin
puedes abrir el panel Marcos pulsando la combinacin de teclas Mays+F2.

En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se
puede pasar de uno a otro pulsando sobre ellos en el panel. Tambin puede
seleccionarse la pgina de marcos pulsando sobre el borde que rodea a los marcos (el
que aparece ms grueso y en relieve en la imagen).

No es necesario seleccionar los marcos para editar los documentos que stos contengan.

S es necesario seleccionar los marcos para especificar las propiedades especficas de
cada uno de ellos.

GUARDAR:
Todos los documentos que contienen marcos tienen que tener una pgina en cada uno
de ellos. Es por esto que al crear algn marco, se cargan pginas nuevas por defecto en
Cada uno de ellos, a excepcin del marco que contiene la pgina original.

Estas pginas nuevas pueden ser posteriormente sustituidas por otras ya existentes,
como ya veremos ms adelante.

Es necesario guardar la pgina que contiene el grupo de marcos, as como cada una de
las pginas que estn incluidas en sus marcos.

No es conveniente guardar la primera vez los marcos con la opcin Guardar todo ,
ya que podemos equivocarnos al dar los nombres a los nuevos documentos.

Es preferible guardar cada documento uno por uno, a no ser que todos los marcos
contengan alguna pgina ya existente, ya que en ese caso el nico documento al que
habr que dar nombre ser al que contiene el grupo de marcos.

MACROMEDIA 8...

63

Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo
previamente.
Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor
en ellos antes de pulsar sobre Guardar .

CONFIGURAR MARCOS:
Una vez seleccionado un marco a travs del panel Marcos, pueden establecerse sus
propiedades a travs del inspector de propiedades.

Cada marco tiene asignado un nombre, que puede cambiarse a travs de Nombre de
marco. El nombre no puede contener espacios en blanco.

En Origen aparece el nombre del documento HTML que est contenido en el marco.

En Bordes puede elegirse si aparecer o no una lnea separando el marco del resto de
marcos. En el caso de que se muestre el borde, se puede especificar un color para ste a
travs de Color borde.

Desplaza. Indica si aparecern o no las barras de desplazamiento cuando el documento
del marco no pueda visualizarse completamente.
Si la opcin Mismo tamao est activa, indica que los usuarios no podrn variar las
medidas del marco desde el navegador.

El Ancho del margen y el Alto del margen indican la separacin que habr entre el
contenido del marco y sus bordes izquierdo-derecho y superior-inferior.

Si lo seleccionado es todo el conjunto de marcos (la pgina de marcos), el inspector de
propiedades es algo diferente.

MACROMEDIA 8...

64

En Bordes puede elegirse si aparecer o no una lnea separando los marcos entre s y
puede especificarse un color para este a travs de Color del borde. Tambin es posible
establecer un grosor para el borde a travs de Ancho.

El campo Columna (o Fila dependiendo del marco elegido en Seleccin Fila Col.) sirve
para especificar el tamao del marco, que puede ser en Pxeles, Porcentaje (de la
ventana) o Relativo (proporcional al resto de marcos).

Normalmente utilizars dos marcos, uno de ellos con tamao en Pxeles, que ser el que
contenga la barra de navegacin, y el otro marco con tamao Relativo, para que se
ajuste a la ventana del navegante.

Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada
uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de otros
ha de poder variar.

A travs del campo Origen del inspector de propiedades, slo es posible especificar el
documento que se cargar inicialmente en el marco, pero hemos de poder cambiar este
documento por otro a travs de vnculos.
Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces.
Estos destinos podan ser _blank, _parent, _self, y _top. Vamos a recordar para que
sirviera cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te sern ms
fciles de entender.

_BLANK: Abre el documento vinculado en una ventana nueva del navegador.

_PARENT: Abre el documento vinculado en la ventana del marco que contiene el vnculo
o en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que
se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.

_SELF: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o
ventana que el vnculo.

_TOP: Abre el documento vinculado en la ventana completa del navegador, lo cual
quiere decir que los marcos de la ventana desaparecern al abrir el vnculo en ella.

Adems de estos destinos para los enlaces, tambin aparecern los nombres de los
distintos marcos de la pgina.

MACROMEDIA 8...

65

Podemos aadir todos estos destinos a cualquier elemento de la pgina que contenga
algn enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.

Gracias a todo esto podremos hacer que las barras de navegacin y el resto de enlaces
funcionen a nuestro antojo, cargando unas u otras pginas en alguno de los marcos, en
una ventana nueva, en toda la ventana, etc.

Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos
resultados finales.

EJERCICIO PAS A PASO.
Practicar las operaciones necesarias para crear y configurar marcos.



3 Selecciona el sitio Javier el panel Archivos.

MACROMEDIA 8...

66


Propiedades.



8 Elige la opcin HTML y luego Marcos.

MACROMEDIA 8...

67

9 Elige la opcin Izquierda.

Debers darle los nombres leftFrame y mainframe que te vendrn por defecto, para ello
tendrs que pulsar nicamente el botn Aceptar dos veces.

10 Si no aparece el panel Marcos, brelo a travs del men Ventana, opcin Marcos.

11 Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior
de los marcos, en el panel Marcos.

12 En Ttulo: que aparece en la barra de documento, escribe Javier.

13 En Bordes, del inspector de propiedades, selecciona No.
14 En Ancho escribe 0.
15 En Seleccin Fila Col. pulsa sobre la columna de la izquierda.

MACROMEDIA 8...

68

16 En Columna selecciona Pxeles y escribe 270.
17 En Seleccin Fila Col. pulsa sobre la columna de la derecha.
18 En Columna selecciona Relativo y escribe 1.
19 Pulsa sobre el marco izquierdo en el panel Marcos.
21 En Origen escribe menu.htm.
22 En Desplaz selecciona No.
23 En Bordes selecciona No.
24 Activa la casilla Mismo tamao.
25 Pulsa sobre el marco derecho en el panel Marcos.
27 En Desplaz selecciona No.
28 En Bordes selecciona No.
29 Desactiva la casilla Mismo tamao.
30 Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior
de los marcos, en el panel Marcos.

31 Haz clic sobre el botn Guardar de la barra de herramientas. Guarda el
documento con el nombre marcos.htm, dentro de la carpeta Javier.

32 En el caso de haber insertado mapas de imagen en la imagen del logotipo, selecciona
cada uno de ellos y elige mainFrame en Destino, que aparece en el inspector de
propiedades.

33 Selecciona el primer botn Flash, y pulsa sobre el botn Editar, del inspector de
propiedades.

En Destino: selecciona mainframe.

Pulsa sobre el botn Aceptar.

Haz lo mismo para el resto de botones Flash.

34 Haz clic sobre el botn Guardar todo de la barra de herramientas.

FORMULARIO (I)
Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno, qu
elementos puede contener y cmo pueden validarse los datos introducidos en l.

INTRODUCCION:
Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para
realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los
usuarios, recibir preguntas, etc.
MACROMEDIA 8...

69

Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se
arrancar un programa que recibir los datos y har el tratamiento correspondiente.

Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el formulario
y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan
nociones de programacin, ya sea en VBScript, en JavaScript o en otro lenguaje de
programacin, y esto no entra en los objetivos del curso.

A la derecha tienes un ejemplo de formulario.

Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens
desplegables, y botones.

ELEMENTOS DE FORMULARIO:
Los elementos de formulario pueden insertarse en una pgina a travs del men
Insertar, opcin Formulario.

A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que
pueden ser insertados en la pgina.

Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de
un formulario, as como algunas de sus propiedades.

Campo de texto y rea de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una lnea,
mientras que el rea de texto permite escribir varias.

Se puede pasar de Campo de texto a rea de texto a travs del inspector de
propiedades, marcando la opcin Una lnea o Multi lnea respectivamente.

Tambin es posible definirlo como Contrasea es como el campo de texto pero las
letras que va tecleando el usuario se sustituyen por un carcter como podrs ver en la
imagen siguiente.
MACROMEDIA 8...

70

A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en
ellos para ver su funcionamiento.

A travs del inspector de propiedades es posible asignar tambin el Ancho del cuadro
de texto, el nmero mximo de lneas o caracteres, y el valor inicial del cuadro.

BOTN: Es el botn tradicional de Windows. El botn puede tener asignadas tres
opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del
formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos
anteriores).

Tambin es posible cambiar el texto del botn, a travs de la propiedad Etiqueta del
inspector de propiedades.

CASILLA DE VERIFICACIN: Es un cuadrito que se puede activar o desactivar.

Deseo recibir informacin

Puede asignrsele el Estado inicial como Activado o como Desactivado.

BOTN DE OPCIN: Es un pequeo botn redondo que puede activarse o desactivarse.
Si hay varios del mismo formulario, slo puede haber uno activado. Cuando se activa
uno, automticamente se desactivan los dems.

LISTA/MEN: Una lista o men es un elemento de formulario que lleva asociada una
lista de opciones.

Los elementos se aaden a travs del botn Valores de lista... del inspector de
propiedades.

SPIDERMAN
SUPERMA
MACROMEDIA 8...

71

Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata
de una lista, a travs de Selecciones del inspector de propiedades puede permitirse que
se seleccionen varios simultneamente.

ETIQUETA: Se utiliza para ponerle nombres al resto de elementos de formulario, para
que el usuario pueda saber qu datos ha de introducir en cada uno de ellos.

FORMULARIO (II)
CREAR FORMULARIOS:
Puedes crear formularios a travs del men Insertar, opcin Formulario.

Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un
recuadro formado por lneas rojas discontinuas, similar al de la imagen de la derecha.

Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya
sabes puedes insertar a travs del men Insertar, opcin Formulario.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios.
Utilizando tablas se consigue una mejor distribucin de los elementos del formulario, lo
que facilita su comprensin y mejora su apariencia.

VALIDAR FORMULARIO:
La validacin de formularios sirve para hacer que JavaScript valide el formulario antes
de que se enve el formulario, para que en el caso de que haya campos del formulario
que sean obligatorios, tengan que rellenarse antes de poder enviarse.

Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se
puede abrir a travs del men Ventana, opcin Comportamientos, o pulsando
Mays+F3.

En este panel hay que desplegar el botn pulsando sobre l, y en Mostrar eventos
para elegir una versin de las actuales de entre la lista de navegadores. Por ejemplo,
puedes elegir el navegador IE 6.0.

Despus de esto, hay que volver a desplegar el botn , y pulsar sobre la opcin
Validar formulario, debers haber seleccionado el formulario previamente.

MACROMEDIA 8...

72

Entonces se mostrar una ventana como la siguiente, donde aparecen todos los
elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los
requisitos que ha de cumplir.

Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su
contenido ha de ser numrico (Nmero), una Direccin de correo electrnico, etc.

Para practicar puedes realizar el Ejercicio paso a paso Insertar elementos de
formulario

EJERCICIOS
INSERTAR ELEMENTOS DE FORMULARIO:
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a
continuacin.

Ejercicio 1: Deportes.
1 Abrir el sito Deportes.

2 Abrir el documento reservas.htm.

MACROMEDIA 8...

73

3 Insertar un campo de texto a la derecha del texto Hora:, que tenga 5 como ancho de
caracteres.

4 Insertar un men a la derecha del texto Centro: cuyos elementos sean:
-BRASIL
-MADRID
-SILLA

5 Seleccionar inicialmente el elemento Brasil del men.

6 Insertar un botn para restablecer el formulario, a la izquierda del botn Enviar.

7 Guardar los cambios y cerrar el documento.

EJERCICIO 2: ANIMALES.
1 Abrir el sito Animales.

2 Abrir el documento consultas.htm.

3 Insertar un men a la derecha del texto Animal:, en la celda vaca, cuyos elementos
sean:

Elige opcin
Perro
Gato
Otros

4 Seleccionar inicialmente el elemento --- Elige opcin --- del men.

5 Insertar un rea de texto a la derecha del texto Consulta: en la celda vaca, que tenga
50 como ancho de caracteres, 10 como nmero de lneas, y que su valor inicial sea
Escribe aqu tu consulta.

6 Insertar un botn de Enviar, a la derecha del botn Restablecer.

7 Guardar los cambios y cerrar el documento.

Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo
explicamos

EJERCICIO 1: DEPORTES
Apartado 1 Para abrir el sitio Deportes hay que seleccionarlo en el panel Archivos.
Puedes abrir el panel a travs del men Ventana, opcin Archivos.

Apartado 2 Para abrir el documento reservas.htm hay que hacer doble clic sobre l, en
el panel Archivos.
Apartado 3 Si no aparece el inspector de propiedades, brelo a travs del men
MACROMEDIA 8...

74

Ventana, opcin Propiedades.
Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn para
desplegar sus propiedades ms avanzadas.

Situar el cursor a la derecha del texto Hora.

Ir al men Insertar, opcin Formulario, y elegir la opcin Campo de texto.

Seleccionar el campo de texto que acaba de aparecer, y escribir 5 en Ancho car, del
inspector de propiedades.

Apartado 4 Situar el cursor a la derecha del texto Centro:.

Ir al men Insertar, opcin Formulario, y elegir la opcin Lista/men.
Seleccionar la lista/men que acaba de aparecer, y elegir Men en Tipo, del inspector
de propiedades.

Hacer clic sobre el botn Valores de lista. Aparecer una nueva ventana.

Escribir Brasil en Etiqueta de elemento.

Pulsar sobre el botn para insertar nuevos elementos en la lista. Aadir las etiquetas
Madrid y Silla.

Hacer clic sobre el botn Aceptar.

Apartado 5 Seleccionar el men.

Seleccionar Brasil en Seleccionado inicialmente, del inspector de propiedades.

Apartado 6 Situar el cursor a la izquierda del botn Enviar.

Ir al men Insertar, opcin Formulario, y elegir la opcin Botn.

Seleccionar el botn, y seleccionar Restablecer formulario en Accin, del inspector de
propiedades.
Pulsar fuera del botn para que se aplique el ltimo cambio.
Apartado 7 Hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar

EJERCICIO 2: ANIMALES

Apartado 1 Para abrir el sitio Animales hay que seleccionarlo en el panel Archivos.
Puedes abrir el panel a travs del men Ventana, opcin Archivos.

Apartado 2 Para abrir el documento consultas.htm hay que hacer doble clic sobre l, en
el panel Archivos.

MACROMEDIA 8...

75

Apartado 3 Si no aparece el inspector de propiedades, brelo a travs del men
Ventana, opcin Propiedades.

Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn

Situar el cursor en la celda vaca que se encuentra a la derecha del texto Animal:.

Ir al men Insertar, opcin Formulario, y elegir la opcin Lista/men.

Seleccionar la lista/men que acaba de aparecer, y elegir Men en Tipo, del inspector
de propiedades.

Hacer clic sobre el botn Valores de lista. Aparecer una nueva ventana.

Escribir --- Elige opcin --- en Etiqueta de elemento.
Pulsar sobre el botn para insertar un nuevo elemento. Aadir las etiquetas Perro,
Gato y Otros.

Hacer clic sobre el botn Aceptar.

Apartado 4 Seleccionar el men.

Seleccionar --- Elige opcin --- en Seleccionado inicialmente, del inspector de
propiedades.

Apartado 5 Situar el cursor en la celda vaca que se encuentra debajo del texto Consulta.

Ir al men Insertar, opcin Formulario, y elegir la opcin rea de texto.
Seleccionar el rea de texto.

Escribir 50 en Ancho car, del inspector de propiedades.

Escribir 10 en Lneas nm.

Escribir Escribe aqu tu consulta en Valor inicial.

Apartado 6 Situar el cursor a la derecha del botn Restablecer.

Ir al men Insertar, opcin Formulario, y elegir la opcin Botn.

Seleccionar el botn, y seleccionar Enviar formulario en Accin, del inspector de
propiedades.

Pulsar fuera del botn para que se aplique el ltimo cambio.
Apartado 7 Hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar .

MACROMEDIA 8...

76

LAS PLANTILLAS
En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar
documentos en ellas.

INTRODUCION:
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las
pginas deben seguir un formato uniforme.

La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar
sobre estas copias, modificando simplemente su contenido. Esta es la forma ms sencilla
de tener pginas con una estructura basada en la estructura de otras ya creadas
previamente.

Las plantillas son una especie de copia de la pgina en la que van a estar basadas el
resto de pginas del sitio web, pero que incluyen la posibilidad de establecer unas
zonas editables y otras zonas que sern fijas, que no podrn ser modificadas.

No es posible modificar las propiedades de una pgina que est basada en una plantilla,
a excepcin del ttulo. Cuando se desea que existan pginas con, por ejemplo, diferente
color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar
las pginas en una u otra plantilla, segn el color de fondo que se desee para cada una.

Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas
basadas en ella.

Las plantillas son archivos con la extensin DWT que se guardan en el sitio web, dentro
de una carpeta llamada Javier.

CREAR PLANTILLAS
Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente.

Una forma de crear una plantilla desde cero es a travs del panel Archivos, pestaa
Activos.

La pestaa Activos se puede abrir a travs del men Ventana, opcin Activos. Tambin
pulsando F11.

Una vez abierto el panel hay que seleccionar el botn , para poder trabajar con las
plantillas.
Los botones inferiores del panel Activos son similares a los del panel Estilos
CSS.

El nico botn diferente es el primero, que en este caso sirve para actualizar la lista, el
resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista,
o eliminarla.

Para crear una nueva plantilla hay que pulsar sobre el botn (Si este botn no est
activado, pulsa con el botn derecho del ratn y elige Nueva Plantilla).
MACROMEDIA 8...

77

Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que
es posible cambiarle el Nombre pulsando previamente sobre l.

Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn .

Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botn .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Javier, que se crea
automticamente.

Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo,
y despus guardarlo como plantilla a travs del men Archivo, opcin Guardar como
plantilla.

Cuando se pulsa dicha opcin, aparece una ventana como la de la derecha.

En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a
travs del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se
va a guardar.

ESTABLECER REGIONES EDITABLES EN UNA PLANTILLA
Todos los elementos de una plantilla estn bloqueados por defecto, no se pueden
modificar.

Es necesario establecer las zonas que s podrn ser editadas en las pginas que se basen
en dicha plantilla.

MACROMEDIA 8...

78

Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a
travs del panel Activos, pulsando dos veces sobre ella, o estando seleccionada
pulsando sobre el botn como ya hemos visto.

Una vez abierta la plantilla es posible establecer sus propiedades a travs de la ventana
Propiedades de la pgina.

Como recordars, para abrir esta ventana puedes:

Pulsar la combinacin de teclas Ctrl+J.

Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.

Pulsar con el botn derecho sobre el documento abierto en Dreamweaver, y en el
men contextual que aparece seleccionar la opcin Propiedades de la pgina.

Para insertar una regin editable hay que situar el puntero en el lugar en el que se desea
insertar, y despus dirigirse al men Insertar, Objetos de plantilla, opcin Regin
editable, o pulsar la combinacin de teclas Ctrl+Alt+V.

En la nueva ventana hay que establecer un Nombre para la regin editable.

Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre.

Posteriormente puede modificarse el nombre a travs del inspector de propiedades de
la regin editable.

Las zonas editables aparecen representadas en Dreamweaver como un recuadro con
una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona editable.

Las zonas editables aparecen representadas en Dreamweaver como un recuadro con
una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona editable.

Dentro del recuadro es posible insertar objetos, que aparecern por defecto en aquellos
documentos que se basen en la plantilla. Estos objetos, al estar dentro de la zona
editable, podrn ser modificados en las pginas.

Todos los objetos que se encuentren fuera de estas zonas editables aparecern tambin
en las pginas, pero no podrn ser modificados.

MACROMEDIA 8...

79

En este caso, la imagen con el logotipo de Javier aparecera en todas las pginas que se
basaran en esta plantilla, mientras que todo lo que insertramos dentro de la zona
editable Formulario Correo podra ser modificado.

BASAR PGINAS EN UNA PLANTILLA
El uso de las plantillas puede resultar un poco complicado al principio. Vamos a ver
cmo basar una pgina vaca en una plantilla, ya que por el hecho de estar vaca resulta
ms sencilla.

Una vez abierto el documento, hay que dirigirse al men Modificar, Plantillas, opcin
Aplicar plantilla a pgina.

Es preferible que antes de hacer esto nos aseguremos de que el sitio que se encuentra
abierto en Dreamweaver es el mismo en el que vamos a guardar el documento, y el
mismo en el que se encuentra la plantilla en la que queremos basarlo.

Despus de pulsar sobre la opcin Aplicar plantilla a pgina aparece una ventana
como la de la derecha, en la que hay que seleccionar una de las plantillas de la lista
Plantillas: del sitio.

Es recomendable activar la casilla Actualizar pgina cuando cambie la plantilla, para
que la pgina se actualice automticamente en el caso de modificar la plantilla en la que
se basa.

A pesar de estar trabajando sobre un documento vaco, es posible que al aplicar la
plantilla aparezcan nombres de regiones no coincidentes entre el documento en blanco y
la plantilla. En ese caso se muestra una ventana como la siguiente.
MACROMEDIA 8...

80

En ella hay que establecer una correspondencia entre el nombre de la regin del
documento vaco con el nombre de alguna regin de la plantilla.

En este ejemplo, la regin del documento vaco que no coincida con el nombre de
ninguna regin de la plantilla era la regin Documento head.

A travs de Mover contenido a la nueva regin: se ha seleccionado la regin head de
la plantilla, para establecer as la correspondencia que se necesitaba.

Despus de establecer las correspondencias necesarias, se carga la plantilla en el
documento vaco.

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio
paso a paso Crear una plantilla.

MACROMEDIA 8...

81

EJERCICIO PASO A PASO:

2 Si no aparece el panel Sitio, brelo a travs del men Ventana, opcin Sitio.

3 Selecciona el sitio Javier en el panel Sitio.

4 Haz doble clic sobre el documento paraplantilla.htm, que aparece en el panel Sitio.

5 Haz clic sobre la opcin Guardar como plantilla, del men Archivo. Se abrir una
nueva ventana.

6 En Sitio: selecciona Javier.

7 En Guardar como: escribe plantilla Javier.

8 Haz clic sobre el botn Guardar. El documento abierto en Dreamweaver pasar a ser
la plantilla.

9 Sita el cursor en la primera celda de la tabla.

MACROMEDIA 8...

82


11 Elige la opcin Objetos de plantilla.

12 Elige la opcin Regin editable.

13 En Nombre: escribe Ttulo.

MACROMEDIA 8...

83


15 Sita el cursor debajo de la tabla.


17 Elige la opcin Objetos de plantilla.

MACROMEDIA 8...

84

18 Elige la opcin Regin editable.

19 En Nombre: escribe Regin Documento.


21 Haz clic sobre el botn Guardar de la barra de herramientas. Ya tenemos nuestra
plantilla creada.
MACROMEDIA 8...

85

Ahora vamos a crear dos documentos basados en esta plantilla.
22 Abre un documento en blanco.

23Haz clic en el men Modificar, Plantillas, opcin Aplicar plantilla a pgina.

24 Selecciona la plantilla plantilla Javier.

25 Activa la casilla Actualizar pgina cuando cambie plantilla.

MACROMEDIA 8...

86

26 Pulsa el botn Seleccionar.

27 Escribe en la zona editable ttulo Pgina 1.

28 Escribe en la zona editable Regin Documento Esta es la primera pgina.

29 Guarda el documento como pag1.htm.
30 Repite los pasos 22 a 28 cambiando Pgina1 por Pgina2 y Esta es la primera pgina
por Esta es la segunda pgina.

31 Guarda el documento como pag2.htm.

32 Visualiza en tu navegador las pginas Pag1.htm y Pag2.htm.
Ahora vamos a cambiar la plantilla.

33 Haz clic sobre el men Ventana.

MACROMEDIA 8...

87

34 Elige la opcin Activos.

35 Si no aparece la lista de plantillas haz clic en el icono .
36 Selecciona la plantilla plantilla Javier.

37 Haz clic en el icono .

38 En Propiedades de la pgina pon el color #33CCFF como color de fondo.

MACROMEDIA 8...

88

39 Haz clic sobre el botn Guardar de la barra de herramientas. Hemos cambiado el
color de fondo de la plantilla.

40 Visualiza en tu navegador las pginas Pag1.htm y Pag2.htm. Observa que sin cambiar
nada de las pginas ahora tienen el color de fondo cambiado, al actualizar la plantilla se
han actualizado automticamente.

SITIOS REMOTOS (I)
En el tema 3 vimos cmo crear y trabajar con un sitio local.

Esta unidad est dedicada a los Sitios Remotos, veremos cmo crearlos y cmo
utilizarlos.
Definir un sitio remoto significa establecer una configuracin de modo que

Dreamweaver sea capaz de comunicarse directamente con un servidor en Internet (por
eso se llama remoto) y as poder trabajar a la vez con tus archivos en el sitio local, es
decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor,
en Internet.

El modo en el que veremos que el programa se comunica con tu servidor ser FTP, ya
que es prcticamente el ms utilizado y muy pocos utilizan otras alternativas.
Configurar un Sitio Remoto

Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las opciones
y que Dreamweaver se pueda conectar con nuestro servidor.

Para ello deberemos modificar la especificacin que creamos en su da del sitio con el
que estamos trabajando.

As que haz clic en Sitio y selecciona Administrar sitios.

Selecciona el sitio con el que quieras establecer comunicacin remota (o crea uno nuevo
para el caso) y pulsa Editar.

Vers que se abre el cuadro de dilogo de Definicin del Sitio.

Ahora podremos escoger entre trabajar en modo bsico o avanzado. Vamos a
seleccionar la pestaa Avanzado para poder ver con ms detenimiento las opciones que
se nos ofrecen.

Una vez ests en el nuevo modo, selecciona la Categora Datos remotos en el listado de
la izquierda.

Ahora en el desplegable Acceso selecciona el mtodo de acceso que deber utilizar

MACROMEDIA 8...

89

Dreamweaver para conectarse con el servidor. Como ya hemos dicho nosotros
explicaremos la opcin FTP.

Se mostrarn las siguientes opciones:

Aqu debers rellenar los datos que te facilit el servicio de hosting que contrataste. Si
no recuerdas los datos o has perdido el correo electrnico que seguramente te enviaron,
pdeles de nuevo la informacin.

Los datos que necesitars son los siguientes:

Servidor FTP o host es la direccin a la que se dirigir Dreamweaver para
conectarse a tu servidor ser del tipo ftp.servidor.com o tambin podrs
encontrar algunas que estn formadas en forma de direccin IP (como por
ejemplo, 192.186.1.1)

En el campo Directorio del Servidor podremos establecer una carpeta
contenida en el servidor donde queramos subir las pginas.

Imagina que dentro de la estructura de carpetas del servidor remoto tienes una que se
llama pgina y dentro de esta otra que se llame principal. Podramos indicar la ruta
pagina/principal para que los archivos se subiesen directamente a esa ubicacin.

En Usuario y Contrasea escribe el nombre de usuario y el password para poder
conectar con el servidor. Marca la casilla Guardar si quieres que el programa
recuerde la contrasea.

Una vez introducidos estos datos puedes pulsar el botn Probar para ver si son
correctos y Dreamweaver puede crear una conexin con el servidor remoto.

MACROMEDIA 8...

90

Finalmente comentaremos la opcin Permitir desproteger y proteger archivo. Esta
casilla es til cuando ms de una persona est utilizando el mismo servidor y las mismas
pginas. De esta forma (como veremos ms adelante) podrs bloquear diversos archivos
para evitar que se vean modificados por otra persona (que tambin tenga acceso al
servidor) mientras t trabajas con ellos.

Si seleccionas la opcin Cargar archivos en el servidor automticamente al guardar
forzars a que Deamweaver suba los archivos cada vez que los guardes. Una opcin
bastante til para no olvidar subir pequeos retoques que se vayan haciendo en el
tiempo. Aunque es una opcin un poco peligrosa porque si modificas la versin en local
y te equivocas no podrs recuperar la versin anterior que estaba almacenada en el
remoto porque se habr sobre escrito. Esta opcin tampoco es recomendable si no
tienes conexin permanente y rpida a Internet.

Una vez hayas terminado Acepta todas las pantallas hasta volver a la vista de trabajo y
estaremos listos.

EL PANEL ARCHIVOS

Desde el panel Archivos seremos capaces de controlar nuestro sitio local y remoto de
forma fcil y rpida.

En este apartado veremos qu pasos debemos seguir para completar unas cuantas
acciones que nos sern bastante tiles.

A primera vista el panel Archivos muestra este aspecto:

Su uso es bastante sencillo. Observa los dos desplegables de la parte superior.

El primero te permite seleccionar el sitio con el que estamos trabajando. El segundo te
permite cambiar la vista de ese sitio.
Esta ltima opcin es muy til para ver el contenido que se encuentra subido en
MACROMEDIA 8...

91

Internet. Una vez hayas configurado las opciones del Servidor Remoto podrs
desplegar esta opcin y seleccionar Vista remota, se mostrarn todos los archivos que
en ese momento se encuentran en el servidor.

Ahora veremos para qu sirven los botones:

El botn Conectar te permitir establecer una conexin con el servidor. De
forma predeterminada Dreamweaver se desconecta del servidor cada 30
minutos.

El botn Actualizar actualiza las listas de las vistas local y remota. As podrs
ver el contenido exacto en cada momento de cada uno de los sitios, se utiliza
sobre todo cuando varias personas tienen acceso al sitio remoto para cambiar las
pginas.

Utiliza el botn Obtener para descargar al servidor local archivos que hayas
seleccionado en el panel Archivos en la vista remota. Estos archivos se copiarn
en tu sitio local, y en caso de ya existir se sobre escribirn.

El botn Colocar acta de forma contraria. Sube los archivos seleccionados en
la vista local al servidor, se copiarn y si existen se sobrescribirn.

Luego los dos siguientes botones podrn ser utilizados si has seleccionado la opcin
Permitir desproteger y proteger archivo en el cuadro de dilogo Definicin del Sitio
anterior.

Utiliza el botn Proteger para realizar la accin anterior de Obtener pero
protegiendo el archivo que se encuentra en el servidor convirtindolo en slo
lectura. De esta forma si alguien con acceso al servidor intenta modificar el
archivo le ser imposible hasta que lo desprotejas.

Del mismo modo, el botn Desproteger acta del mismo modo que el botn
Colocar pero cuando sube el archivo al servidor lo desprotege para que pueda
ser modificado por otras personas.

Si activaste la opcin Permitir desproteger y proteger archivo y subes un archivo
nuevo al servidor (uno que an no se encuentre en la vista remota) automticamente se
proteger. Para evitar esto debers subir los archivos nuevos utilizando el botn
Desproteger.

MACROMEDIA 8...

92

SINCRONIZAR SITIOS
Esta es una de las opciones ms tiles en cuanto a Sitios Remotos.

Esta opcin permite hacer un estudio de los archivos situados en el sitio local y remoto y
establecer el modo en el que se debern copiar, borrar y sobre escribir los archivos para
conseguir un objetivo: al final de la sincronizacin, los archivos en el sitio remoto y el
sitio local deben ser iguales.

Para realizar una sincronizacin haz clic derecho sobre cualquier zona en el panel
Archivos y selecciona la opcin Sincronizar....

Vers que aparece un cuadro de dilogo como este:

Este es el paso ms importante en la sincronizacin, pues decidiremos de qu modo se
va a realizar.

En el desplegable Sincronizar: seleccionaremos una de las dos opciones,
Archivos locales seleccionados solamente o Todo el sitio. Dependiendo de
qu opcin elijas se copiarn slo unos archivos o todos los que forman el sitio.

En el desplegable Direccin: estableceremos las pautas que se deben seguir
durante la sincronizacin.

Si seleccionas Colocar archivos ms nuevos en remoto cuando se comparen ambos
sitios, se sobre escribirn aquellos en el sitio remoto que tengan una fecha de
MACROMEDIA 8...

93

modificacin menor a la que exista en el local. De esta forma copiars en direccin Local
a Remoto.

Si seleccionas la opcin Obtener archivos ms nuevos de remoto se copiarn aquellos
archivos que se encuentren en el sitio remoto que tengan una fecha de modificacin
mayor que la del local. En este caso estaremos copiando en direccin Remoto a Local.

La ltima opcin, Obtener y colocar archivos ms nuevos, se refiere a la
sincronizacin como tal. Evala los archivos en el sitio remoto y local y copia los ms
nuevos en el que contiene los ms viejos. En este caso la Sincronizacin es
Bidireccional.

Marca la opcin Eliminar archivos remotos no existentes en la unidad local si
quieres que los archivos que se encuentren en el remoto que no estn en el local se
borren.

Al pulsar Vista previa... aparece un listado con los cambios que se van a realizar, slo
nos quedar aceptarlo.

Debido a que no todos los servidores tienen acceso FTP y que no tienes por qu tener
acceso a un servidor remoto no realizaremos ningn ejercicio sobre este tema. Si quieres
establecer una conexin con tu servidor remoto slo tendrs que seguir los pasos
explicados en la teora.

PGINAS DINMICAS (I)

INTRODUCCIN
En esta unidad vamos a ver cmo utilizar Dreamweaver para crear pginas PHP y
acceder a datos almacenados en una base de datos.

Como vimos en el tema anterior, las pginas dinmicas se almacenan en el servidor y
cuando son requeridas se ejecutan y devuelven una salida de cdigo HTML al cliente
que lo visualizar en su navegador.

MACROMEDIA 8...

94

Mientras el archivo PHP se ejecuta en el servidor, puede crear una conexin a una base
de datos y extraer o guardar informacin en ella.

Ahora que ya tenemos un servidor de pruebas donde pueda ejecutarse el cdigo que
introduzcamos en nuestras pginas y permita la creacin de bases de datos para
almacenar informacin pasaremos a crear nuestras propias pginas dinmicas de acceso
a datos.

Una vez instalado WAMP empezaremos a crear nuestras primeras pginas para mostrar
informacin especfica y personalizada.

Para ello nos apoyaremos siempre en la seccin Aplicacin de la barra de herramientas
Insertar:

Puede que en tu ordenador no veas la barra de esta forma, pues puede tomar la forma de
pestaas o de men.

Si la tuvieses en forma de men haz clic en el desplegable de la izquierda y selecciona
Aplicacin:

Y en el panel Aplicacin que puedes abrir desde el men Ventana Bases de datos.

MACROMEDIA 8...

95

CREAR UNA CONEXIN A LA BASE DE DATOS

Como puedes ver en el panel Aplicacin los requisitos necesarios para empezar a
trabajar con bases de datos ya los hemos cubierto en los temas anteriores del curso.

El ltimo paso que nos quedara para poder empezar a crear pginas ser definir una
conexin para que Dreamweaver establezca los parmetros en los que se realizar la
comunicacin entre los archivos PHP y los datos de nuestras tablas.

En otras palabras deberemos decirle a Dreamweaver dnde est la base de datos, su
nombre y un usuario (con su contrasea) con suficientes privilegios como para poder, al
menos, visualizar los datos almacenados.

Para ello nos dirigimos a la pestaa Bases de datos en el panel Aplicacin y hacemos
clic sobre el botn .

Selecciona la opcin Conexin MySQL para crear la conexin que necesitamos.

Se abrir el siguiente cuadro de dilogo:

Aqu debers colocar los datos correspondientes a tu base de datos.

En Nombre de conexin escribiremos un nombre significativo para poder reconocer la
conexin ms adelante.

En Servidor MySQL deberemos escribir local host en nuestro caso ya que la base de
datos est alojada en nuestro propio equipo. En otro caso habra que introducir la
direccin del servidor donde se encuentre almacenada la informacin.

Escribe un Nombre de usuario y Contrasea con privilegios suficientes para acceder a
la base de datos (al menos parcialmente).
MACROMEDIA 8...

96

Y finalmente selecciona (pulsando el botn Seleccionar) o escribe el nombre de la base
de datos a la cual nos vamos a conectar.

Puedes hacer una prueba de conexin pulsando el botn Prueba, as te asegurars de
que se puede establecer comunicacin entre Dreamweaver y el servidor correctamente
con los datos facilitados.

Una vez hayas acabado pulsa Aceptar y la conexin estar lista para utilizarse.

Practicar las operaciones necesarias para crear una conexin a una base de datos.

1 Si WAMP no se est ejecutando, lnzalo para realizar este ejercicio.

2 Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder tener
acceso a las bases de datos y a la ejecucin de archivos PHP.

3 Ejecuta Dreamweaver y abre el sitio Javier, vamos a trabajar sobre l.

4 Abre el panel Bases de Datos con la combinacin de teclas CTRL + MAYUS + F10 o
desde el men Ventana Bases de datos.

5 Haz clic en el botn y selecciona Conexin MySQL para crear una nueva conexin:

6 En Nombre de conexin escribe javier_hola
7 En Servidor MySQL escribe local host.
8 En Nombre de usuario escribe Carlos.
9 En Contrasea escribe hola.
10 En Base de datos selecciona bd_javier.
11 Pulsa Aceptar para crear la conexin.

JUEGOS DE REGISTROS O RECORDSETS.
Una vez creada nuestra conexin empezaremos a crear pginas dinmicas.

Ahora podemos insertar en cualquier pgina informacin almacenada en la base de
datos, slo tenemos que decidir qu datos vamos a mostrar.

MACROMEDIA 8...

97

Crearemos un juego de registros (tambin llamado Record Set) donde almacenaremos
durante el tiempo en el que se est ejecutando el archivo PHP los datos que queremos
mostrar.

De esta forma podremos seleccionar determinada informacin y mostrarla en la
pgina.

Antes que nada recuerda que los datos dinmicos slo pueden mostrarse en una pgina
dinmica. Por lo que si intentas crear un juego de registros en una pgina codificada
como HTML el programa no te dejar.

As que abre una nueva pgina PHP y empieza a practicar.

Para crear un juego de registros puedes hacer clic en el primer botn de la barra de
Aplicacin:


Aqu deberemos especificar qu informacin queremos obtener, es decir qu registros
de qu tabla.

Utilizar este cuadro de dilogo es muy sencillo, aunque puede complicarse bastante si
sacamos el mximo provecho de todas sus opciones.

Iremos viendo poco a poco la forma en la que podremos trabajar con los juegos de
registros.

El primer paso ser comenzar dando un Nombre significativo al juego, por ejemplo
podramos llamarlo articulos_en_stock si lo que va a contener el juego de registros son
los datos de una tabla de artculos que tienen existencias.
MACROMEDIA 8...

98

Luego especificaremos la Conexin que deber utilizarse para que sea posible acceder a
la informacin. Aqu debers de seleccionar una que hayas creado anteriormente o
puedes hacer clic en el botn Definir... para crear una nueva tal y como vimos en el
apartado anterior.

Una vez seleccionada la conexin deberemos seleccionar la Tabla de la que queremos
sacar los registros.

Finalmente decidiremos qu Columnas queremos mostrar. Al seleccionar una tabla, sus
columnas aparecern en el cuadro de columnas. Selecciona la opcin Todas para que
todos los campos de la tabla estn disponibles o marca la opcin Seleccionado: para
elegir una o ms de las existentes (utiliza la tecla CTRL para realizar selecciones
mltiples).

Pulsando el botn Prueba en cualquier momento vers un ejemplo de qu datos
contendr el juego de registros, es incluso aconsejable que lo veas antes de Aceptar el
cuadro de dilogo para asegurarte de que ests sacando la informacin que necesitas.

EJERCICIO PASO A PASO
Practicar las operaciones necesarias para crear un record set.



3 Ejecuta Dreamweaver y abre el sitio Javier, vamos a trabajar sobre l.

4 Abre un archivo dinmico nuevo basado en la plantilla javier.dwt.php (Archivo
Nuevo, pestaa Plantillas).

5 Gurdalo como nuevos.php.
6 Haz clic en el botn para crear un nuevo juego de registros.

7 En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en
Nombre escribe listado libros.

8 En Conexin selecciona javier_hola.

9 En Tabla selecciona libros.

10 Deja el resto como est y pulsa el botn Prueba para ver una pre visualizacin de
qu registros componen el record set.

11 Haz clic en el botn Aceptar para crear el juego de registros.
MOSTRAR DATOS DINMICOS
Una vez se cree un Juego de Registros podremos empezar a mostrar los datos en
nuestra pgina.
MACROMEDIA 8...

99

Como podrs ver en el panel Vinculaciones ahora podemos ver las columnas
contenidas en el Record set:

Aadir, por ejemplo, el Ttulo del libro a la pgina es tan fcil como arrastrar el
elemento desde el panel a su lugar en la pgina.

Aunque tambin podemos utilizar la opcin Texto dinmico de la barra Aplicacin:

Al utilizar esta opcin se abrir un
cuadro de dilogo:

MACROMEDIA 8...

100

Como puedes ver en la imagen, debers seleccionar el Campo que quieres mostrar en la
pgina, adems Dreamweaver te ofrece la posibilidad de aplicarle un formato
determinado, para ello slo debers seleccionarlo de la lista.

Por ejemplo, la opcin May. /min. - Primera letra en maysculas transformar el
texto del registro y lo pondr en minsculas excepto la primera letra que se ver
transformada a maysculas.

En el cuadro de texto Cdigo vers cmo se modifica el cdigo PHP que se incluir
automticamente en la pgina.

Pulsa Aceptar cuando hayas acabado y el campo del registro se incluir en el punto
donde tengas situado el cursor.

Se representar en la vista de Diseo de la siguiente forma:

Esto nos indica que el elemento que se mostrar ser el de la columna Ttulo del record
set listado libros.

En cualquier momento podrs volver al cuadro de dilogo anterior para modificar
alguna de las opciones (por ejemplo, el formato) desde el panel Comportamientos del
servidor (CTRL + F9).

En este panel se mostrarn todos los elementos dinmicos que se estn utilizando en la
pgina, haz doble clic sobre cualquiera de ellos para modificarlos.

Pulsndolo podrs ver cmo actuara la pgina de haberse ejecutado en un servidor, por
lo tanto la imagen anterior se correspondera a este si pulssemos el botn:

MACROMEDIA 8...

101

EJERCICIO PAS A PASO
Practicar las operaciones necesarias para insertar texto dinmico y modificar sus
propiedades.



3 Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre l.

4 Abre el archivo nuevos.php.

5 En el rea de contenido que podemos modificar introduce la siguiente lnea: Listado
de libros nuevos: e introduce tres saltos de lnea (SHIFT + ENTER).

6 Luego debers insertar una tabla con un relleno de celda de 5.

7 La tabla deber tener 3 filas y 4 columnas.

8 Selecciona la primera columna y dale un ancho de 197 pxeles.

9 Selecciona la segunda columna y dale un ancho de 142 pxeles.

10 Selecciona la tercera columna y dale un ancho de 156 pxeles.

11 Por ltimo, selecciona la ltima columna y dale un ancho de 100 pxeles.
12 Selecciona todas las celdas de la segunda fila y combnalas utilizando el botn en
el panel de Propiedades.

13 Haz lo mismo para la tercera fila.

14 Selecciona la cuarta celda de la primera fila y dale como estilo la clase precio.

15 Selecciona la segunda y tercera fila y dales la clase alto_10.

16 Ahora vamos a aadir una segunda clase a la segunda fila, como Dreamweaver slo
nos permite seleccionar una, deberemos ir a la vista de Cdigo para editarlo desde all
(recuerda el tema de CSS avanzado).
Localiza la segunda fila que tendr este aspecto:
<td colspan="4" class="alto_10"></td>
Adele la clase borde inferior, dejndola as:
<td colspan="4" class="alto_10 borde inferior"></td>

17 Vuelve a la vista de Diseo y abre el panel Vinculaciones (CTRL + F10).

18 Despliega el juego de registros listado libros y arrastra el elemento Titulo a la
primera celda de la primera fila de la tabla.
MACROMEDIA 8...

102

19 Arrastra el elemento Autor a la segunda celda.

20 Arrastra el elemento Editorial a la tercera celda.

21 Arrastra el elemento Precio a la cuarta celda.

22 Selecciona el elemento Autor de la pgina y ponlo en cursiva pulsando el botn en
el panel de Propiedades.

23 Abre el panel Comportamientos del servidor (CTRL + F9) y haz doble clic sobre el
elemento Texto dinmico {listado_libros.Titulo} para modificar sus propiedades.

24 En el cuadro de dilogo que se abrir selecciona el valor May.-min. - Mayus. Del
desplegable Formato para mostrar todo el texto en maysculas.

25 Pulsa el botn de vista LiveData y vers como se muestra el primer registro.
(Tambin puedes visualizar los datos desde el local host pulsando la tecla F12).

26 Cierra el documento guardando los cambios.

MACROMEDIA 8...

103

MACROMEDIA 8...

104

INTRODUCCIN
En este curso aprenderemos a utilizar las herramientas ms importantes con las que
cuenta Fireworks. Macromedia Fireworks es la solucin perfecta para disear y
producir elementos grficos para la web. Se trata del primer entorno de produccin que
afronta con xito los grandes retos de los diseadores y desarrolladores de grficos web.

Fireworks puede utilizarse para crear, editar y animar grficos web, aadir
interactividad avanzada y optimizar imgenes en entornos profesionales. En Fireworks
es posible crear y modificar imgenes vectoriales y de mapa de bits en una sola
aplicacin. Todo es modificable en todo momento. Y el flujo de trabajo puede
automatizarse para satisfacer las necesidades de cambio y actualizacin que de otra
forma exigiran una enorme dedicacin.

Fireworks se integra con otros productos de Macromedia, como Dreamweaver, Flash,
FreeHand y Director, y con otros editores HTML y aplicaciones grficas de uso frecuente
para ofrecer una solucin web global. Los elementos grficos de Fireworks pueden
exportarse fcilmente con cdigo HTML y JavaScript adaptado al editor de HTML que se
utilice.

MACROMEDIA 8...

105

MACROMEDIA FIREWORKS
Fireworks es un programa que nos sirve para disear y producir elementos grficos
Para la web. Fireworks nos proporciona muchas herramientas con las cuales podemos
crear y editar imgenes vectoriales y de mapas bits, podemos disear efectos web, y
optimizar elementos grficos con el fin de incrementar su calidad y de reducir su
tamao de archivo.
COMO ABRIR MACROMEDIA FIREWORKS
Para abrir Macromedia Fireworks tenemos diferentes alternativas a escoger. La primera
es abrindolo por medio del icono que se crea en el escritorio haciendo doble clic
izquierdo sobre el e inmediatamente se nos abrir el programa

La segunda forma de abrir Macromedia Fireworks es por medio del men inicio
dirigindonos a la opcin todos los programas despus a Macromedia y por ultimo
seleccionamos Macromedia Fireworks

MACROMEDIA 8...

106

ENTORNO DE TRABAJO
Abrir el documento en Fireworks

LA BARRA DE MENU
En esta parte de nuestro entorno de trabajo encontraremos todas las opciones
disponibles que nos ofrece Macromedia Fireworks. Aqu encontraremos opciones tales
como guardar documento, opciones de edicin, ayuda, etc.

MACROMEDIA 8...

107

PANEL DE HERRAMIENTAS
En este panel encontraremos todas las herramientas necesarias para dibujar, disear y
modificar en nuestra superficie de trabajo aqu encontramos muchas herramientas que
poco a poco iremos explicando a lo largo de este manual
Si usted no puede ver este panel quiere decir que es posible que no est habilitado as
que puede habilitarlo dirigindose a la barra de men en la opcin de ventana y
despus haciendo clic sobre la opcin herramientas

Son 37 herramientas, algunas de las cuales cambian segn lo que se trabaje: dibujos o
pixeles.
En la tabla siguiente, sacada del manual oficial de Fireworks, se describen las funciones
bsicas de cada herramienta en cada modo:
Herramienta : En el modo de objeto En el modo de edicin de imgenes
Puntero Selecciona y mueve trazados en la pantalla. Mueve la imagen o los pixeles
agrupados mediante un recuadro. Haga doble clic en una imagen para editar los pixeles
que la componen.
MACROMEDIA 8...

108

Seleccionar detrs: Selecciona un objeto situado detrs del objeto seleccionado.
Mueve la imagen o los pixeles agrupados mediante un recuadro.
Seleccionar en nivel inferior: Selecciona y mueve recuadros en la
pantalla, selecciona un objeto de un grupo o un smbolo. Muestra los puntos de un
trazado y selecciona puntos. Mueve la imagen o los pixeles agrupados mediante un
recuadro.
Recuadro o recuadro elptico Activa el modo de edicin de imgenes y
selecciona un rea de pixeles rectangular o elptica. Selecciona un rea de pixeles
rectangular o elptica
Lazo o lazo poligonal Activa el modo de edicin de imgenes y selecciona un
rea de pixeles de estilo libre Selecciona o mueve un rea de pixeles de estilo libre.
Varita mgica Activa el modo de edicin de imgenes y selecciona un rea formada
por pixeles de color similar. Selecciona un rea formada por pixeles de color similar
Lnea y formas bsicas: Dibuja objetos como trazados que se pueden
editar. Pinta pinceladas de pixeles en un objeto de imagen.
Pluma Dibuja objetos como trazados que se pueden editar. Activa el modo objetos y
dibuja objetos como trazados que se pueden editar.
Texto Crea y edita bloques de texto y abre el editor de texto. Activa el modo de
objetos, crea bloques de texto, y abre el editor de texto.
Lpiz Dibuja trazos de lpiz de un pixel como trazados de estilo libre. Dibuja trazos
de lpiz de un pixel.
Pincel Dibuja pinceladas como trazados Pinta pinceladas como pixeles.
MACROMEDIA 8...

109

Estilo libre Estira o contrae un trazado seleccionado para cambiar la forma del
mismo. Activa el modo de objeto.
Remodelar rea Remodela las partes de un trazado seleccionado que estn
incluidas en el cursor "remodelar rea" Activa el modo de objeto.
Depurador de trazados
Modifica las caractersticas de presin y velocidad de un trazado sin modificar su forma.
Activa el modo de objeto
Cuchillo/borrador En el modo de objetos esta herramienta se convierte en
Cuchillo. Corta un trazado seleccionado para crear varios trazados. En el modo de
edicin de imgenes esta herramienta se convierte en Borrador. Borra pixeles de una
imagen.
Sello Activa el modo de edicin de imgenes y duplica partes de un objeto de
imagen. Duplica partes de un objeto de imagen.
EL PANEL DE PROPIEDADES
Este es uno de los paneles ms importantes de Fireworks ya que en el podemos
modificar las diferentes propiedades de todos los objetos que podemos crear en
Fireworks como tambin el mismo lienzo y la imagen
Si usted no puede ver este panel puede habilitarlo dirigindose a la barra de men en la
opcin de ventana y despus haciendo clic sobre la opcin Propiedades

MACROMEDIA 8...

110

OTROS PANELES
En Fireworks contamos con diferentes paneles como el de: Capas, Optimizar, Activos,
Fotogramas, Historial, etc.
Estos tambin los podemos habilitar y deshabilitar desde la barra de men en la opcin
de ventana

PANEL DE VISTA PREVIA
Este panel nos permite visualizar y comparar la calidad de los diferentes formatos a los
que se piensa exportar la imagen que hemos creado en Fireworks
Explicaremos ms detalladamente la forma de utilizar correctamente este panel ms
adelante

LIENZO
En esta rea como el mismo nombre lo indica es la seccin de nuestra rea de trabajo
donde crearemos nuestras imgenes con las diferentes herramientas que ofrece el
programa
En la parte inferior de esta rea podemos ver el tamao en pxeles y el grado de zoom
que tiene la imagen actualmente

MACROMEDIA 8...

111

NOTA: con algunos paneles podemos modificar su posicin posicionndonos el rea que
muestra la figura entonces el puntero cambiara la forma y luego solo tendremos que
presionar el clic izquierdo y arrastrar el puntero mientras mantenemos presionado el
botn
PARA CREAR UN NUEVO DOCUMENTO EN FIREWORKS
Al abrir Fireworks veremos que los paneles y herramientas de aparecen desactivados y
que no podemos seleccionar ninguno y esto se debe a que no hemos creado aun el
documento donde vamos a trabajar
Lo primero para empezar a crear un nuevo documento es dirigirnos a la barra de men y
seleccionar en la seccin de archivo la opcin de nuevo

Despus se nos abre una pequea ventana que luce de esta manera

Primeramente debemos de seleccionar el tamao (largo y ancho) de nuestro nuevo
documento para esto debemos insertar el tamao en pxeles o si lo deseamos haciendo
MACROMEDIA 8...

112

clic sobre las cajas que se encuentran a la derecha podemos cambiar la unidad de
medida a centmetros o pulgadas

Despus la tercera caja indica la calidad de resolucin que queremos que lleve nuestra
imagen esto nos es de mucha utilidad a la hora de imprimir el documento ya que entre
mayor sea la resolucin mejor lucir al imprimirla o ampliarla
Y por ltimo podemos elegir el color de fondo de nuestro documento ya sea blanco,
transparente o personalizado
En el personalizado nosotros podemos seleccionar el color de fondo que queramos para
nuestra imagen.
Una vez hayamos ingresado el tamao deseado del documento y seleccionado las
opciones que queramos hacemos clic en el botn aceptar y con eso habremos creado el
lienzo de nuestro documento para comenzar a trabajar
Tambin observamos que las herramientas y paneles ahora si estn habilitados para
comenzar a usar
GUARDAR UN DOCUMENTO EN FIREWORKS
Para guardar nuestros documentos de Fireworks debemos dirigirnos a la opcin de
archivo de la barra de men y ah podemos seleccionar entre 3 distintos tipos de
almacenamiento
MACROMEDIA 8...

113

La primera y principal opcin para guardar es la de guardar con esta opcin la primera
vez que la elijamos Fireworks nos pedir nombrar a nuestro documento para poder
guardarlo.

Digitamos el nombre que queramos y presionamos el botn Guardar
Ahora que ya nombramos a nuestro documento cada vez que queramos guardar los
cambios hechos al documento simplemente volvamos a seleccionar la opcin guardar
Digitamos el nombre que queramos y presionamos el botn Guardar
Ahora que ya nombramos a nuestro documento cada vez que queramos guardar los
cambios hechos al documento simplemente volvamos a seleccionar la opcin guardar
MACROMEDIA 8...

114

Ahora si lo que queremos es guardar el documento pero con otro nombre lo que
tenemos que hacer es seleccionar en el men Archivo la opcin de guardar como y se
nos abrir una ventana donde podremos guardar nuestro documento digitando otro
nombre
Y la ltima opcin es la de guardar copia
Esta opcin es muy parecida a la opcin de guardar como por no decir que es
bsicamente lo mismo ya que en realidad no hay diferencia alguna entre ambas.
ABRIR UN DOCUMENTO DE FIREWORKS
Una vez que ya aprendimos a guardar nuestros archivos de Fireworks ahora veremos
como abrirlos desde el mismo progre
Primero debemos dirigirnos a la barra de men y en el men archivo seleccionamos la
opcin de Abrir

Luego de esto se abre una pequea ventana que luce de la manera que muestra la
siguiente imagen

Luego buscamos y seleccionamos el archivo que queramos abrir y presionamos el botn
abrir
MACROMEDIA 8...

115

Si lo hicimos correctamente habremos abierto con xito nuestro archivo de Fireworks
Nota: con Fireworks podemos abrir tanto archivos de Fireworks (png) como tambin
cualquier otro tipo de archivo de imagen
Tambin Fireworks guarda un historial de los archivos recientemente guardados en la
opcin del men archivo de la barra de men en abrir reciente encontraremos
dichos archivos para abrirlos

Estos es muy til para tener rpido acceso a los archivos que se han estado trabajando
ltimamente sin la molestia de buscarlos
MODIFICAR PROPIEDADES DE LIENZO
En Fireworks MX cuando creamos un nuevo documento l nos permite seleccionar las
propiedades para nuestro lienzo pero a veces puede que queramos cambiar de opinin o
modificar estas propiedades
Pues ahora veremos cmo hacer tales cambios
Lo primero ser acceder a las propiedades del lienzo
Para ello lo primero que tenemos que hacer es seleccionar la herramienta de puntero del
men de herramientas

MACROMEDIA 8...

116

Y despus hacemos clic sobre la parte de afuera del lienzo

Ahora vemos ya podemos ver en la parte inferior las propiedades del lienzo

MODIFICAR EL TAMAO DE IMAGEN
Si hacemos clic sobre el botn de Tamao de imagen podemos cambiar el tamao de
la imagen en la cual actualmente estamos trabajando modificando los valores en pxeles
que queremos que nuestra imagen tenga de tamao
Nota: Recuerda que puedes modificar tambin la unidad de medida por centmetros o
pulgadas haciendo clic en el botn que muestra la imagen

Adems s que la imagen tenga la mismas proporciones al cambiar su tamao debemos
de dejar activado la opcin de Restringir las proporciones y se nos muestra
MACROMEDIA 8...

117

Pero si queremos que el tamao de la imagen tenga distintas proporciones no simtricas
podemos desactivar esto desmarcando la opcin de Restringir las proporciones
Al final de estas modificaciones presionamos el botn aceptar para efectuar los cambios.
MODIFICAR EL TAMAO DE LIENZO
La diferencia entre modificar el tamao del lienzo y modificar el tamao de la imagen
radica en que si modificamos el tamao del lienzo todos los objetos que tengamos en el
lienzo conservaran el mismo tamao pero el lienzo o el rea de dibujo cambiara a ser
ms grande o ms pequeo segn lo queramos
Ahora si hacemos clic sobre el botn de Tamao del lienzo Se nos despliega la
ventana que muestra la siguiente imagen

Ahora en la caja de texto introducimos las nuevas proporciones del lienzo escribiendo la
longitud en pxeles o en la unidad de medida que deseemos
MACROMEDIA 8...

118

Tambin debemos seleccionar el punto de anclaje
El punto de anclaje es lo que nos ayuda a indicarle a Fireworks de qu forma queremos
que se apliquen los nuevos valores
Por ejemplo si queremos que nuestro lienzo de 800 pxeles de ancho se ensanche a 1200
pxeles desde el rea del centro pues deberemos deberemos seleccionar en la cuadricula
el punto del centro

Informacin de las propiedades del lienzo
En lienzo nos ofrece tambin la informacin de sus propiedades en el rea inferior del
lienzo donde muestra la siguiente imagen

En ella podemos observar el tamao en pxeles de la imagen adems del porcentaje de
aumento de la vista de la imagen
Si queremos modificar el tamao simplemente hacemos clic sobre el valor del aumento
de la parte inferior del lienzo y seleccionamos el nuevo valor

MACROMEDIA 8...

119

Nota: tambin podemos cambiar el aumento dirigindonos a la barra de men > ver >
aumentar y reducir y seleccionamos el tamao del aumento
HERRAMIENTA DE PUNTERO Y DE SELECCINAR DETRAS
En esta leccin aprenderemos acerca de la herramienta que ms utilizaremos en
Fireworks MX ya que esta herramienta nos permite seleccionar y manipular todos los
objetos creados en el lienzo.
HERRAMIENTA PUNTERO
Esta herramienta nos permite seleccionar los objetos en los que hagamos clic con ella.
Para utilizarla hacemos clic sobre el botn de herramienta de puntero que se encuentra
en el panel de herramientas

Ya seleccionada hacemos clic sobre el objeto del lienzo que queramos seleccionar
Ya seleccionada hacemos clic sobre el objeto del lienzo que queramos seleccionar
Si hacemos clic izquierdo y lo dejamos presionado podemos cambiar la posicin del
objeto y si hacemos clic derecho se nos desplegara un men con muchas opciones las
cuales veremos ms adelante

MACROMEDIA 8...

120

LA HERRAMIENTA DE SELECCIONAR DETRAS
Para seleccionar esta herramienta que est localizado en el mismo punto donde se
encuentra la herramienta de puntero debemos hace clic izquierdo y mantenerlo
presionado hasta que se nos despliegue un submen que luce de esta forma

Ah seleccionamos la herramienta de seleccionar detrs
Vemos que ahora el botn de la herramienta de puntero cambia al de seleccionar
detrs

Y vemos que el puntero cambia a esta forma

Con esta herramienta podemos seleccionar las figuras que se encuentren detrs de
alguna otra
Por ejemplo en la siguiente imagen muestra que hay una figura detrs de la figura de
color verde ya que con la herramienta de seleccionar atrs se nos muestra el contorno
de la figura que se encuentra detrs de una figura cuando pasamos el puntero sobre ella
(cosa que no pasara con la herramienta de puntero)
MACROMEDIA 8...

121

Hacemos clic para seleccionar la figura que est detrs de la figura verde
Y para volver a seleccionar la herramienta de puntero simplemente volvemos a hacer
clic izquierdo y lo mantenemos presionado hasta que aparece el submen y
seleccionamos la herramienta de puntero
HERRAMIENTA DE RECTANGULO Y HERRAMIENTA DE RECTANGULO
REDONDEADO
La herramienta de rectngulo como su nombre lo indica nos permite dibujar rectngulos
en el lienzo
Lo primero que tenemos que hacer para utilizar esta herramienta es seleccionarla en el
panel de herramientas

Despus podemos modificar las propiedades del rectngulo en el panel de propiedades
una vez hallamos seleccionado la herramienta
MACROMEDIA 8...

122

PROPIEDADES DE TAMAO Y POSICION
An -Ingresamos la anchura en pxeles
Al - Ingresamos la altura en pxeles
X -ingresamos el valor de la posicin horizontal en el lienzo
Y - Ingresamos el valor de la posicin Vertical en el lienzo
PROPIEDADES DE RELLENO

1. Sirve para seleccionar el color de relleno haciendo clic sobre l y eligiendo el
color deseado
2. Elegimos el estilo del color de relleno
3. Elegimos el estilo del borde del rectngulo
4. El nivel de fuerza de la textura
El estilo de la textura.

MACROMEDIA 8...

123

PROPIEDADES DE LA LINEA CONTORNO
1. Sirve para seleccionar el color de la lnea de contorno del rectngulo
2. Aqu podemos seleccionar el estilo de la lnea
3. El tamao del borde de la lnea
4. El tipo de textura de la lnea
5. El nivel de fuerza de la textura
6. PASOS PARA DIBUJAR RECTANGULO EN EL LIENZO
7. Paso 1 - presionamos el botn izquierdo del ratn y mantenemos presionado
8. Paso 2 - desplazamos el puntero del ratn manteniendo el botn izquierdo del
ratn presionado

Paso 3 - soltamos el botn izquierdo del ratn cuando estemos satisfechos con la forma
de la figura.
Nota: si tambin mantenemos presionado la tecla Mayscula en el teclado mientras
arrastramos el ratn la figura del rectngulo tendr una forma ms cuadrada y simtrica
Nota: Recuerde que si usted se equivoca o no est satisfecho con el cuadro que dibujo
puede deshacerlo presionando simultneamente las teclas ctrl. + Z o puede ir a la barra
de men >> Edicin >> Deshacer
MACROMEDIA 8...

124

HERRAMIENTA DE RECTANGULO REDONDEADO
Para seleccionar esta herramienta hacemos clic sobre el botn de herramienta de
rectngulo y lo mantenemos presionado hasta que aparece en un pequeo submen de
donde podemos elegir otras herramientas

Seleccionamos la herramienta de Rectngulo Redondeado
Esta herramienta es idntica a la de Rectngulo pero con la diferencia de que podemos
elegir el nivel de redondez de las esquinas del cuadrado dirigindonos a las propiedades
de la lnea de contorno y donde muestra la imagen podemos modificar el nivel de
redondez del rectngulo

MACROMEDIA 8...

125

HERRAMIENTA DE ELIPSE Y DE POLIGONO
LA HERRAMIENTA DE ELIPSE
Como su nombre lo indica, con esta herramienta podemos crear lo que son Elipses o
crculos en el lienzo de Fireworks Para acceder a esta herramienta tenemos que hacer
clic izquierdo sobre el botn que muestra la imagen y mantenerlo presionado hasta que
aparezca el submen con las dems herramientas y elegimos la Herramienta de Elipse

Bsicamente la herramienta de elipse cuenta con las mismas propiedades de relleno y
lnea de contorno y posicin que la herramienta de rectngulo y su forma de creacin es
bsicamente la misma (Haz clic aqu para ver la leccin de la herramienta de
rectngulo).
Y con ella podemos crear toda clase de crculos y elipses.

LA HERRAMIENTA DE POLIGONO
MACROMEDIA 8...

126

Con esta herramienta podemos crear figuras poligonales como pentgonas, hexgonos,
decgonos, etc.
Para acceder a esta herramienta tenemos que hacer clic izquierdo sobre el botn que
muestra la imagen y mantenerlo presionado hasta que aparezca el submen con las
dems herramientas y elegimos la Herramienta de Polgono.

La herramienta de polgono a diferencia de las otras herramientas de dibujo de figuras
cuenta con unas cuantas propiedades extras las cuales a continuacin explicaremos
Nota importante: Estas propiedades solo aparecen antes de dibujar la figura y una vez se
ha dibujado dicha figura ellas automticamente desaparecen y no pueden modificarse
dichos valores

1-Forma: Aqu podemos elegir entre dos estilos de forma las cuales son la forma de
estrella y la forma de polgono.
MACROMEDIA 8...

127

2-Lados: Aqu podemos modificar el nmero de lados que queremos que tenga nuestra
figura poligonal. En el caso que la forma se d estrella esta opcin implicara el nmero
de puntas en la estrella y en el caso de que sea en forma de polgono implicara el nmero
de caras.
3-Angulo: Esta opcin nicamente tiene efecto en el polgono en forma de estrella y nos
permite seleccionar la amplitud del Angulo entre cada una de las puntas de las figuras.

4-Automtico: Al tener marcada esta opcin al dibujar una figura en forma de estrella
dependiendo del nmero de puntas de la figura automticamente se calculara el Angulo
de la figura
HERRAMIENTA DE ESCALA, INCLINAR Y DISTORCIONAR
MACROMEDIA 8...

128

Fireworks MX cuenta con herramientas que nos permite cambiar el tamao de la figura,
inclinar la figura y distorsionar la forma.
HERRAMIENTA DE ESCALA
Esta herramienta nos permite no solo nos permite modificar las proporciones de figura
sino que tambin nos permite rotarla
Lo primero que tenemos que hacer es con la herramienta de puntero seleccionar la
figura que deseamos modificar y despus seleccionamos la herramienta de escala que
se encuentra en el panel de herramientas en donde muestra la siguiente imagen.

Vemos que alrededor de la figura aparecen unos cuadrados en cada esquina de la figura

Si queremos modificar el ancho de la figura debemos posicionar el puntero en
cualquiera de los extremos izquierdo o derecho sobre uno de los cuadrados de la figura
y presionar el clic izquierdo del ratn mientras arrastramos el puntero para hacer la
modificacin.

MACROMEDIA 8...

129

Pero si queremos modificar tanto la altura como la anchura de la figura debemos
Posicionar el puntero en cualquiera de las esquinas de la figura mientras arrastramos el
puntero del ratn

Y por ltimo si lo que queremos es rotar la figura lo que tenemos que hacer es
posicionarnos cerca de cualquiera de las esquinas de la figura hasta que el puntero toma
esta forma

Luego hacemos clic izquierdo y lo manteemos presionado mientras movemos el puntero
para rotar la figura a cualquier posicin
HERRAMIENTA INCLINAR
Con esta herramienta podemos inclinar cualquiera de los lados de la figura
Para seleccionar esta herramienta hacemos clic izquierdo sobre el botn del panel de
herramientas hasta que aparecen el submen con las dems herramientas de
transformacin y seleccionamos la herramienta inclinar (recuerda que tienes que
tener seleccionada la figura que vas a modificar antes de hacer esto)
MACROMEDIA 8...

130

Ahora simplemente colcate sobre cualquiera de los pequeos cuadrados que aparecen
y haz clic izquierdo mientras mueves el puntero para inclinar la figura hacia la direccin
que lo muevas
Eh aqu algunos ejemplos:

HERRAMIENTA DISTORCIONAR
Esta herramienta nos permite distorsionar las proporciones de una figura y a veces da
efecto de perspectiva cuando se usa en ciertas imgenes
Para seleccionar esta herramienta hacemos clic izquierdo sobre el botn del panel de
herramientas hasta que aparecen el submen con las dems herramientas de
transformacin y seleccionamos la herramienta Distorsionar (recuerda que tienes que
tener seleccionada la figura que vas a modificar antes de hacer esto)

MACROMEDIA 8...

131

Una vez seleccionada la herramienta tomamos alguno de los puntos de la figura
haciendo clic izquierdo y lo mantenemos presionado mientras movemos el puntero
Eh aqu un ejemplo de lo que podemos hacer con esta herramienta

IMPORTAR IMAGENES
MACROMEDIA 8...

132

Macromedia Fireworks es un programa de diseo grfico y lgicamente podemos
importar distintos tipos de archivos de imgenes al lienzo de Fireworks para trabajar
Con ellos
Lo primero que haremos ser dirigirnos al men archivo y hacemos clic sobre la opcin
importar
Despus de esto se nos abre una ventana de exploracin donde podemos buscar
cualquier archivo que tengamos almacenado en el disco duro o en alguna otra unidad de
almacenamiento.
Luego de que hayamos encontrado el archivo que queremos importar lo seleccionamos
y hacemos clic sobre el botn abrir

Nota: con Fireworks podemos importar la mayora de archivos de imgenes conocidos
como jpg, pds, tif, gif, etc.
Vemos que ahora el puntero cambia a esta forma

MACROMEDIA 8...

133

Ahora para plasmar la imagen que hemos importado en el escenario tenemos que hacer
un clic izquierdo y mantenerlo presionado mientras arrastramos el puntero para definir
las proporciones de la imagen importada

Luego de soltar el botn del ratn la imagen aparecer donde trazamos el contorno

HERRAMIENTA RECORTAR
Esta herramienta nos permite recortar el rea del lienzo de manera rpida ayudndonos
a ajustar el lienzo a los objetos que tengamos en el
Para utilizar esta herramienta hacemos clic sobre el botn que se encuentra en el panel
de herramientas

MACROMEDIA 8...

134

Vemos que el puntero del hartn cambia a la forma que muestra la siguiente imagen

Ahora vamos a recortar el lienzo alrededor de la imagen que se encuentra en el lienzo
Para esto hacemos clic izquierdo sobre el lienzo y lo mantenemos presionado mientras
movemos el puntero del ratn (exactamente lo mismo como si estuviramos dibujando
un rectngulo)

Cuando estemos satisfecho con la posiciono y las dimensiones apretamos en el teclado la
tecla Enter o Intro y con esto el lienzo ser recortado alrededor de la imagen

HERRAMIENTA DE EXPORTAR AREA
Esta herramienta se utiliza de forma parecida a la de recortar pero a diferencia de la otra
herramienta esta nos permite seleccionar un rea especfica del lienzo que queramos
exportar como algn tipo de archivo de imagen
MACROMEDIA 8...

135

Lo primero que haremos ser seleccionar la herramienta de Exportar rea haciendo clic
izquierdo en el botn que muestra la imagen y lo mantenemos presionado hasta que
aparezca la dicha herramienta en el submen de herramienta

Una vez seleccionada vemos que el puntero toma esta forma

Ahora marcamos el rea que queremos exportar tal como si estuviramos ocupando la
herramienta de recorte

Al finalizar presionamos la tecla Enter o Intro en el teclado y se nos abrir una
ventana como la que muestra la siguiente imagen

MACROMEDIA 8...

136

En el rea sealada con rojo podemos elegir el tipo de archivo al cual queremos
importar la imagen (gif, jpg, png, etc.)
Una vez seleccionado el tipo de archivo presionamos el botn Exportar y se nos abrir
otra ventana donde elegiremos en que ruta del disco duro queremos guardar el archivo
Y con esto hemos exportado ese segmento como un archivo de imagen
HERRAMIENTA DE RECUADRO Y OVALO
Esta herramienta es una de las herramientas ms importante ya que nos permite
realizar muchas tareas que continuacin empezaremos a explicar
Antes que nada seleccionamos la herramienta de recuadro o de ovalo haciendo clic
sobre el botn que est localizado en el panel de herramientas (mantenemos presionado
el botn izquierdo para desplegar las 2 herramientas y elegir la que queramos)

Para las siguientes acciones no importa si hemos seleccionado la herramienta de
recuadro o la de ovalo pero para esta leccin ocuparemos la herramienta de recuadro
Una vez seleccionado la herramienta vemos que el puntero cambia a la forma que
muestra la siguiente imagen

Ahora que ya manejamos bien la forma de dibujar un rectngulo hagamos lo mismo con
esta herramienta para marcar cualquier parte de una imagen que hallamos importado al
lienzo o un objeto (en este caso ser una imagen).
MACROMEDIA 8...

137

Ahora si hacemos clic derecho sobre el recuadro que acabamos de trazar sobre la
imagen se nos despliega un men con diferentes opciones y explicaremos una por una
en esta leccin
EDICION
Aqu encontraremos las siguientes opciones:
1-Copiar: sirve para copiar el rea que hallamos marcado con esta herramienta
2-Cortar: sirve para cortar el rea que hallamos cortado para posterior mente pegarla en
otra capa.
3-Pegar: sirve para pegar en el lienzo lo que hallamos copiado o cortado
AUMENTAR Y REDUCIR
Aqu encontraremos la siguiente opcin:
1-Encajar en seleccin: sirve para hacer que la imagen tenga un aumento sobre el rea
que se ha marcado con la herramienta
Nota: solo mencionamos una opcin ya que es la nica que tiene que ver con esta
herramienta
RECORTAR MAPA DE BITS SELECCIONADO
Esta opcin nos permite recortar la imagen a solo el rea que est en el recuadro
MACROMEDIA 8...

138

Para efectuar el recorte seleccionamos la opcin Recortar mapa de bits seleccionado y
despus presionamos la tecla Enter

RECORTAR DOCUMENTO
Esta opcin tiene exactamente la misma funcin que la herramienta de recorte ya que
recorta el lienzo a solo el rea que ha sido seleccionada
MAPA BITS NUEVO MEDIANTE COPIAR
Con esta opcin copiamos el rea seleccionada a una nuevo mapa de bits
MAPA BITS NUEVO MEDIANTE CORTAR
Con esta opcin cortamos el rea seleccionada a un nuevo mapa de bits
LAS CAPAS, MAPAS BITS Y EL USO DEL PANEL DE CAPAS
Las capas son una forma en que Macromedia Fireworks (as como muchos otros
programas que usan este mtodo) nos ayudan a organizar y no mezclar cada uno de los
objetos que agreguemos al lienzo
En Macromedia Fireworks cada vez que agregamos un texto, una figura, una imagen, etc.
Automticamente nos agrega un mapa de bits en la capa con el nuevo objeto en l y
podemos localizar cada una de los mapas bits en el panel de capas
Si nosotros queremos modificar o manipular algn objeto en especfico es muy til
dirigirse al panel de capas y hacer clic sobre l y as es seleccionado en el escenario.

MACROMEDIA 8...

139

COMO RENOMBRAR UN MAPA DE BITS
En el panel de capas podemos agregarle un nombre a un mapa de bits para distinguirlo
de las otros por ejemplo a continuacin tenemos el mapa de bits de un texto que est en
el lienzo cuyo nombre es Texto

Si queremos cambiar su nombre a puesta de sol simplemente hacemos doble clic
izquierdo sobre el rea del texto digitamos el nuevo nombre y presionamos la tecla
Enter

OCULTAR UN MAPA DE BITS
Para ocultar un mapa de bits simplemente hacemos clic sobre el icono del ojo que se
encuentra el panel de capas y la imagen desaparecer del lienzo con esto

Se puede ocultar haciendo clic en el ojo
En la parte inferior del panel se encuentran 4 pequeos botones que a continuacin
explicaremos la funcin de cada uno de ellos
MACROMEDIA 8...

140

1. NUEVA CAPA - Con esto podemos agregar una nueva capa y as separar los
objetos pasndolos a otro nivel y tener mapas de bits en diferentes capas
2. CREAR MASCARA con este botn podemos agregarle una mscara a algn objeto
del lienzo (ms adelante explicaremos cmo funcionan las mscaras)
3. CREAR UN NUEVO MAPA BITS-Con esto agregamos una nuevo mapa de bits en la
capa para poder agregarlos objetos que deseemos en ella un mapa de bits es
como capas adentro de una capa y nos ayuda a visualizar la cantidad de objetos
en el lienzo
4. SUPRIMIR LA SELECCION Con este botn eliminamos mapas de bits o capas que
tengamos seleccionado en el panel de capas
HERRAMIENTA LAZO
Alguna vez has cortado el contorno de una figura de un peridico o de una revista?
Si la respuesta es s, entonces una forma de catalogar a esta herramienta seria de una
tijera. Ya que nos permite dibujar el rea que queremos seleccionar ya sea para cortar
copiar o rellenar
En otras palabras la herramienta de lazo nos permite trazar el rea que queremos
seleccionar de una imagen marcando el contorno de una forma en particular
Ahora explicaremos como utilizar esta herramienta con un ejemplo
MACROMEDIA 8...

141

Lo primero que haremos ser seleccionar la herramienta de lazo que se encuentra en el
panel de herramientas
Si hacemos clic izquierdo y lo mantenemos presionado veremos que hay 2 tipos de
herramienta de lazo

-Lazo
-Lazo poligonal
En este caso utilizaremos la herramienta de lazo poligonal porque nos permite ir
creando el trazado punto por punto y aparte que con ella hacemos lneas rectas con
facilidad
Ahora hacemos clic sobre el punto donde empezaremos a delinear la figura del
automvil y empezamos a hacer clic mientras vamos dibujando la forma del automvil
hasta que delineemos la figura completamente
MACROMEDIA 8...

142

Nota: es recomendable aumentar la vista de la imagen con la herramienta de zoom para
este proceso

Una vez terminado el contorno que trazamos lucir as

Vemos como la lnea que trazamos se trasforma en una lnea punteada
Ahora hacemos clic derecho sobre la figura y podemos seleccionar entre opciones como
copiar, cortar, copiar a nuevo mapa de bits, etc.
Si nos otros por ejemplo seleccionamos la opcin cortar a nuevo mapa de bits vemos que
ahora la figura del automvil pasa a otro mapa bits de la capa
Y ahora si borramos el mapa de bits de donde cortamos la imagen vemos que ahora
MACROMEDIA 8...

143

Tenemos solo la figura del automvil

Este proceso es muy til a la hora de crear montajes de fotografas y como vimos aqu lo
ms importante es trazar bien el contorno de la figura
LA VARITA MAGICA
La herramienta varita mgica es una herramienta seleccionar un rea de pxeles de color
similar en la imagen.
Por ejemplo digamos que queremos seleccionar el fondo azul de la siguiente imagen

Lo primero que haremos ser seleccionar herramienta de varita mgica que se
encuentra en el panel de herramientas

MACROMEDIA 8...

144

Luego vemos que aparecen en la parte inferior las propiedades de esta herramienta y a
continuacin explicaremos cada una de sus funciones

TOLERANCIA
La tolerancia es el margen de similitud del color que se seleccionara cuando hagamos
clic sobre un rea de un color especfico.
Veamos las siguientes imgenes para entender mejor esta propiedad

En esta imagen se hizo clic sobre el fondo azul con la varita mgica con un valor de
tolerancia de 11

MACROMEDIA 8...

145

En esta otra imagen se hizo clic sobre el mismo fondo azul con la varita mgica pero con
una tolerancia de 78
BORDE
DURO la opcin por defecto que trae la herramienta con esta opcin los bordes no se
suavizan al cortar o eliminar la seccin seleccionada

SUAVE Con esta opcin los bordes de la seccin seleccionada con la herramienta se
suavizan los bordes del rea seleccionada al cortarla o eliminarla

FUNDIDO El fundido desenfoca los bordes de una seleccin de pxeles y ayuda a
integrar el rea seleccionada en los pxeles circundantes.

HERRAMIENTA PINCEL
La herramienta Pincel puede emplearse para trazar pinceladas con el color del cuadro
de color de trazo;
MACROMEDIA 8...

146

Para utilizarla primero hacemos clic sobre el botn del panel de herramientas

Ahora veamos las propiedades de esta herramienta

1COLOR DE RELLENO - aqu seleccionamos el color de relleno del pincel
2- GROSOR aqu seleccionamos el grosor de la pincelada
3-ESTILO Aqu elegimos el estilo de la pincelada y podemos elegir entre una gran
variedad de estilos
4- BORDE aqu elegimos el tamao del borde de la lnea de pincel y entre mayor sea el
nmero mayor ser el grado de suavizado de la pincelada
5-TEXTURA Aqu podemos elegir darle algn tipo de textura a la pincelada y tenemos
una gran variedad a elegir pero si deseamos importar una nueva textura elegimos la
opcin otras e importamos una nueva textura como si de importar una imagen se
tratara
6- CALIDAD DE TEXTURA Aqu podemos elegir el grado de visibilidad de la textura
entre mayor sea mayor fuerza tendr la imagen de la textura
MACROMEDIA 8...

147

Ahora simplemente hacemos clic izquierdo sobre el lienzo y lo mantenemos presionado
mientras movemos el puntero y dibujamos sobre el lienzo
HERRAMIENTA LAPIZ
La herramienta Lpiz puede utilizarse para dibujar lneas rectas de un pxel, de estilo
libre o fijo, del mismo modo que se utilizara un pincel real para dibujar lneas. Esta
herramienta es parecida a la de pincel pero no tan completa
Para empezar hacemos clic sobre el botn de herramienta de lpiz que se encuentra en
el panel de herramientas

Y ahora veamos las propiedades de esta herramienta

1-COLOR aqu seleccionamos el color de la lnea del lpiz.
2- BORRADO AUTOMATICO - aplica el color de relleno cuando se hace clic con la
herramienta Lpiz en el color del trazo.
3- SUAVISADO suaviza los bordes de las lneas que se dibujen.
4- PRESERVA TRANSPARENCIA - limita el uso de la herramienta Lpiz a dibujar
nicamente en los pxeles existentes y lo impide en las reas transparentes de la imagen.
mientras movemos el puntero y dibujamos sobre el lienzo
MACROMEDIA 8...

148

LA HERRAMIENTA DE BORRADOR
Esta herramienta nos permite borrar pxeles de cualquier imagen de mapa de bits y
lneas dibujadas con la herramienta de pincel o de lpiz del lienzo pero no funciona con
elementos editables como los cuadrados u valos, etc.

Para utilizarlo hacemos clic sobre el botn de la herramienta de borrador en el panel de
herramientas.

Ahora Veamos cada una de las propiedades de esta herramienta
Imagen
1 Tamao Aqu seleccionamos el tamao del borrador
2 Borde Aqu seleccionamos el tamao del suavizado de los bordes del borrador
3 Forma Aqu seleccionamos la forma del borrador
Una vez modificado las propiedades a nuestro gusto arrastramos el borrador por los
pxeles que desea suprimir
HERRAMIENTA CELLO
La herramienta Sello permite copiar o clonar un rea de una imagen en otra. Esta
herramienta es muy til cuando deseamos eliminar elementos de una imagen copiando
reas de la misma para cubrirlo
MACROMEDIA 8...

149

Por ejemplo. Aqu tenemos una fotografa de unos bebe y deseamos que aparezca lo
mismo imagen al lado.

Lo primero que haremos ser seleccionar la herramienta de sello del panel de
herramientas

Vemos que el puntero cambia a esta forma

Ahora vamos a clonar al nio de la imagen clonando sobre el parte del fondo y para ello
hacemos clic sobre el fondo de la imagen
MACROMEDIA 8...

150

Cuando terminemos de clonar partes del fondo sobre ella al final quedara de esta
manera

Nota: para volver a seleccionar otra rea para clonar presionamos la tecla ALT y la
mantenemos presionada mientras que con el puntero del ratn seleccionamos haciendo
clic sobre el rea que queremos clonar
1- Tamao Elegimos el tamao del puntero de la herramienta
2- Borde Elegimos el tamao del suavizado del borde
3- Origen Alineado Con esto el cursor del origen de clonacin regresara siempre al
punto que especificamos al principi
4- Utilizar todo el documento Con podremos clonar cualquier parte del documento y
no solo del mapa bits donde estemos en la capa

MACROMEDIA 8...

151

HERRAMIENTA CUBO DE PINTURA
Esta herramienta nos permite rellenar de color nos permite rellenar figuras, trazados
con el pincel y hasta imgenes
Para utilizarla hacemos clic sobre el botn del panel de herramientas

Vemos que la herramienta cambia a la forma de un cubo de pintura

Ahora veamos las propiedades de la herramienta de cubo de pintura

PROPIEDADES
1- Color de relleno Aqu seleccionamos el color de relleno que aplicaremos con el cubo
de pintura
2- Borde Elegimos el tamao del suavizado del borde
3- Textura Elegimos la textura del relleno que aplicaremos
4- Cantidad de textura Elegimos el nivel de visibilidad de la textura
5- Tolerancia -La tolerancia es el margen de color que se seleccionara cuando hagamos
clic sobre un rea de un color especfico.
MACROMEDIA 8...

152

6- Seleccin de relleno Esta opcin sirve para rellenar todo el mapa de bits
independientemente del rea donde hallamos hecho clic para rellenar
Ahora para aplicar el relleno simplemente hacemos clic izquierdo sobre el rea que
queremos rellenar de color y vemos como el rea de esta se torna del color que
elegimos.

HERRAMIENTA DEGRADADO
Esta herramienta nos permite agregar un efecto degradado a los colores de relleno de
los objetos.
Lo primero que tenemos que hacer para utilizar esta herramienta es seleccionar la desde
el panel de herramientas haciendo clic izquierdo y lo mantenemos presionado hasta que
aparezca la herramienta de degradado

Vemos que ahora nuestro puntero cambia a esta forma pero solo cuando estamos
ubicados sobre algn objeto en el lienzo
MACROMEDIA 8...

153

Podemos ver las diferentes propiedades de esta herramienta en el respectivo panel de
propiedades.

PROPIEDADES
1- Color de relleno - Cuando estemos ocupando la herramienta de degrado si hacemos
clic aqu elegiremos los colores que compone el degradado haciendo clic sobre los
cuadros que muestra la imagen para luego seleccionar el color

1 - hacemos clic sobre estos cuadros y seleccionamos los colores que compondrn
nuestro degradado
2 - Aqu podemos elegir la transparencia de cada color del degradado haciendo clic en su
correspondiente cuadro
3 - Hacemos clic en esta rea para agregar un nuevo color (donde el puntero toma la
forma que muestra la imagen
4 - Aqu podemos elegir dentro los colores predefinidos que trae Fireworks
2 - Aqu seleccionamos el estilo del degradado como: Lineal, Radial, Elipse, Rectngulo,
etc.
3 - Seleccionamos el Estilo del borde del degradado
MACROMEDIA 8...

154

4 - Seleccionamos la textura
5 - Seleccionamos el grado de visibilidad de la textura
Ahora nos situamos sobre el objeto donde queremos aplicar el color degradado y
hacemos clic izquierdo y lo mantenemos presionado mientras movemos el puntero para
definir la longitud del color degradado

l final quedara de esta manera
Podemos editar el degradado del objeto seleccionndolo y dirigindonos al panel de
propiedades para modificando las propiedades que queramos
HERRAMIENTA DE SUB SELECCION
La herramienta de sabeleccin nos permite manipular los nodos de una figura vectorial
independientemente del resto
Por ejemplo.
Digamos que queremos modificar la parte inferior del siguiente cuadrado que muestra la
imagen.
1-Lo primero que haremos ser seleccionar la herramienta de su seleccin del panel de
herramientas
MACROMEDIA 8...

155

2-Luego hacemos un clic izquierdo sobre la imagen

Vemos que los contornos de la imagen cambian a un color celeste y que cada esquina del
cuadrado aparecen unos cuadros.
A estos cuadros los llamaremos nodos.
3-Lo siguiente que haremos ser hacer un clic sobre uno de los nodos de la figura.
Importante: Cuando hagamos clic sobre un nodo de una figura como los son los
rectngulos se nos abrir una ventana en la cual se nos preguntara si queremos
desagrupar la figura a lo cual presionaremos el botn aceptar.

4-Luego de lo anterior.
MACROMEDIA 8...

156

Hacemos nuevamente clic izquierdo sobre uno de los nodos de la figura y lo
mantenemos presionado mientras arrastramos el punto hacia donde deseemos

Tambin podemos utilizar la herramienta de subseleccion para modificar las lneas
vectoriales.
Como por ejemplo las que hacemos con la herramienta de pluma.

Lo primero que hacemos es seleccionar la herramienta de subseleccin y hacer clic
izquierdo sobre la lnea vectorial

Vemos que la lnea se ve como muestra la imagen anterior.
Tambin cmo podemos apreciar la lnea est compuesta por nodos los cuales podemos
modificar simplemente haciendo clic izquierdo sobre uno de ellos y despus
modificando la curvatura del nodo.
MACROMEDIA 8...

157

HERRAMIENTA PLUMA
Esta herramienta nos sirve para dibujar trazados de forma que los podemos ir curvando
y transformando mientras los vamos dibujando
Para utilizarla damos un clic izquierdo sobre el botn de la panel de herramientas de
pluma

Vemos que el puntero toma forma de una pluma fuente

Ahora vamos a ver paso por paso como dibujar trazados con la pluma
Siguiente
Damos un clic en el escenario y vemos como aparece un pequeo punto donde dimos
clic

Siguiente
Aun manteniendo presionado el botn izquierdo del ratn. Empezamos a moverlo de
forma de que vemos como la lnea del trazado empieza a curvarse
MACROMEDIA 8...

158

Si seguimos repitiendo esta operacin con la herramienta de pluma aun seleccionada
podramos dibujar un trazado ms grande como este

Y si queremos cerrar nuestro trazado simplemente hagamos una lnea hasta el punto de
inicio

HERRAMIENTA DE TRAZADO DE VECTORES
Esta Herramienta nos permite dibujar trazados vectoriales como si se tratara de la
herramienta de pincel. La ventaja de los trazados vectoriales radica en que podemos
modificar cada uno de los nodos del trazado con la herramienta de sabeleccin
Para utilizar esta herramienta lo primero que haremos ser seleccionarla dirigindonos al
panel de herramientas y hacemos clic izquierdo sobre el botn que muestra la siguiente
imagen y lo mantenemos presionado hasta que aparece el botn de la Herramienta de
trazado de vectores

MACROMEDIA 8...

159

mientras movemos el puntero y dibujamos sobre el lienzo y al finalizar

Veremos que nuestro trazado queda de esta manera
Todos esos pequeos cuadrados celestes que se encuentran en el trazado son los
denominados nodos del vector
Si seleccionamos la herramienta de subseleccion podemos modificar la posicin de ellos
haciendo clic izquierdo y mantenindolo presionado mientras movemos el puntero del
ratn

HERRAMIENTA VOLVER A DIBUJAR TRAZADO
Esta herramienta nos permite corregir los trazados hechos con la herramienta de
trazado de vectores.
Ahora veamos cmo funciona.
MACROMEDIA 8...

160

Seleccionamos la herramienta de volver a dibujar trazado que se encuentra en el panel
de herramientas.

Ahora lo que haremos ser corregir el trazado de vectores que tenemos en el lienzo
Y para esto nos colocaremos en dicho trazado

Podemos ver que los nodos de la figura se tornan de color rojo al situarnos sobre ella
con esta herramienta seleccionada.

MACROMEDIA 8...

161

Ahora hacemos clic izquierdo desde la parte donde queremos corregir el trazado y
volvemos a dibujar desde ese punto moviendo el puntero del ratn.

HERRAMIENTA LINEA
Esta herramienta es muy sencilla y nos permite trazar lneas rectas en nuestro lienzo.
Para comenzar debemos de hacer clic sobre el botn de la herramienta lnea que se


MACROMEDIA 8...

162

1- Color de relleno - aqu seleccionamos el color de relleno de la lnea.

2 - Grosor aqu seleccionamos el grosor de la lnea.

3 - Estilo Aqu elegimos el estilo de la lnea y podemos elegir entre una gran variedad
de estilos.
4 - Borde aqu elegimos el tamao del borde de la lnea y entre mayor sea el nmero
mayor ser el grado de suavizado de la lnea
5 - Textura Aqu podemos elegir darle algn tipo de textura a la lnea y tenemos una
gran variedad a elegir pero si deseamos importar una nueva textura elegimos la opcin
otras e importamos una nueva textura como si de importar una imagen se tratara.
6 - Cantidad de textura Aqu podemos elegir el grado de visibilidad de la textura
Entre mayor sea mayor fuerza tendr la imagen de la textura
Ahora para dibujar nuestra lnea presionamos el botn izquierdo del ratn sobre el
lienzo y lo mantenemos presionado mientras arrastramos el puntero.

Pequeo truco para que nuestra lnea sea perfectamente recta es presionar la tecla
Mayscula o Swift mientras dibujamos la lnea.
6 - Cantidad de textura Aqu podemos elegir el grado de visibilidad de la textura entre
mayor sea mayor fuerza tendr la imagen de la textura

MACROMEDIA 8...

163

HERRAMIENTA DE ESTILO LIBRE
Esta herramienta nos permite cambiar la forma las figuras vectoriales como trazados y
figuras del lienzo.
Lo primero que tenemos que hacer para entender bien la utilidad de esta herramienta es
dibujar en el lienzo una figura vectorial ya sea una figura poligonal o un trazado
vectorial Ya con esto lo primero que tenemos que hacer para utilizar esta herramienta
es seleccionar la herramienta de estilo libre del panel de herramientas


Tamao - definimos el tamao de la herramienta
. Presin - define la intensidad del trazo
. Vista previa nos permite ver exactamente como queda la figura mientras la
modificamos pero si desactivamos esta opcin se ver la distorsin de este modo
hasta que soltemos el botn del ratn

Ahora veamos cmo se utiliza la herramienta
MACROMEDIA 8...

164

Primero nos situamos en mapa bits donde est la figura vectorial que modificaremos
Despus si apretamos el botn izquierdo del ratn vemos que el puntero cambia a una
forma circular de color rojo

Ahora con el botn izquierdo presionado empezamos a modificar el contorno de la
figura remodelndola con el puntero que se a transformado en un circulo

Al final las figuras pueden quedar como la siguiente imagen

HERRAMIENTA REMODELAR AREA
La herramienta Remodelar rea permite ampliar el rea de todos los trazados
Para utilizarla hacemos clic sobre el botn de la herramienta de remodelar trazados
MACROMEDIA 8...

165

Vemos que el cursor cambia a la forma que muestra la siguiente imagen

Cuando presionamos el botn izquierdo del ratn cambia a esta otra forma

El crculo interior del cursor representa el lmite de la herramienta a su mxima
potencia. El rea situada entre el crculo interior y el exterior remodela los trazados con
una fuerza menor. El crculo exterior determina la atraccin gravitatoria del cursor. Es
posible establecer su fuerza
Las propiedades de esta herramienta son las siguientes

1 Tamao Aqu seleccionamos el tamao del dimetro del crculo del cursor
2 Fuerza Aqu seleccionamos la cantidad de fuerza de la herramienta (ver la
demostracin para una mejor ilustracin de la funcin de esta opcin)
MACROMEDIA 8...

166

Ahora simplemente presionamos el botn izquierdo del ratn y lo mantenemos
presionado mientras lo movemos sobre la figura que deseamos remodelar con esta
herramienta
Mientras presionamos el botn izquierdo del ratn podemos aumentar la anchura del
cursor presionando la tecla 2 o presionando la tecla de flecha derecha. Y para reducir
utilizamos la tecla 1 o la tecla de flecha izquierda
HERRAMIENTA TEXTO
Con esta herramienta podemos insertar texto sobre el lienzo de Fireworks
Para utilizarla primero hacemos clic sobre el botn de la herramienta de texto que se

Ahora vemos que el puntero cambia a la forma que muestra la siguiente imagen

Con el cursor hacemos clic izquierdo sobre el lienzo de nuestro documento para crear un
lnea de texto

O presionamos el botn izquierdo y lo mantenemos presionado mientras arrastramos el
puntero del ratn de manera que dibujemos un rectngulo para crear una caja de texto
MACROMEDIA 8...

167


1- Seleccionamos el tipo de fuente para nuestro texto

2- Seleccionamos el tamao de la fuente

3- Seleccionamos el color del texto
- Seleccionamos la unidad de medida del interlineado (pxeles o porcentaje)

5- Seleccionamos el nivel del interlineado del texto

6- Seleccionamos el grado de separacin entre las letras del texto

7- Seleccionamos el tamao de la sangra del texto

8- Seleccionamos el tamao de la escala horizontal del texto (la anchura de la
fuente)
- Seleccionamos si queremos aplicar negrita, cursiva y/o subrayado al texto

10- Seleccionamos la alineacin del texto

11- Seleccionamos la orientacin del texto
MACROMEDIA 8...

168

12-Seleccionamos el nivel del suavizado del texto

13-Seleccionamos el nivel de espacio delante del prrafo

14-Seleccionamos el nivel de espacio detrs del prrafo
Si escribimos cualquier texto y despus volvemos a seleccionar el texto con la
herramienta de puntero podemos apreciar que aparece una nueva propiedad en el panel
de propiedades
En ella podemos seleccionar un color de contorno para el texto que actualmente
tenemos seleccionado

Nota: recuerda que puedes modificar las propiedades de un texto simplemente
seleccionndolo con la herramienta de puntero y si deseas modificar el texto haz doble clic
sobre el bloque de texto y veras que aparece automticamente el cursor en el texto para que
puedas eliminar o aadir texto del bloque

MODIFICAR LA OPACIDAD DE UN OBJETO
En Macromedia Fireworks MX podemos modificar la opacidad de cualquier objeto del
lienzo
Modificando la opacidad de un objeto podemos regular la transparencia de un objeto
Por ejemplo.
MACROMEDIA 8...

169

Si queremos aplicar una marca de agua del logo de alguna empresa sobre una imagen lo
que debemos hacer es:
Primero importar la imagen a la cual le aplicaremos nuestro logo en marca de agua

Ahora importamos la imagen de nuestro logo

Despus hacemos clic sobre el logo con la herramienta de cursor y nos vamos al panel de
propiedades donde se encuentra la opcin del nivel de opacidad
Nota: Esta opcin est disponible para cualquier objeto que seleccionemos del escenario
Ahora seleccionamos el nivel de opacidad nuevo (en este ejemplo seleccionaremos 30)
MACROMEDIA 8...

170

Vemos que la imagen se torna transparente

Ahora expandimos el logo sobre la imagen con la herramienta de transformacin y
veremos que la imagen queda de esta forma

MACROMEDIA 8...

171

CREAR MASCARA DE CAPAS BITS
Al aplicar una mscara en un mapa de bits nos permite crear un efecto como el que
muestra la siguiente imagen.

Como podemos ver esta imagen da un efecto de transicin entre las 2 imgenes.
Esto se hace con el uso de las mscaras en el panel de capas
Ahora veamos los pasos para reproducir este efecto.
Primero importamos las 2 imgenes al lienzo de Fireworks (si quieres ver la leccin de
importar imagen haz clic aqu).

MACROMEDIA 8...

172

Ahora posiciona la ltima imagen que importamos sobre la primera usando la herramienta
puntero

Hacemos clic en el panel de capas sobre el mapa de bits al cual le queremos agregar la
mscara (la segunda imagen que importamos que se encuentra arriba de la primera
imagen)

Nota: si el panel de capas no est activado la podemos activar dirigindonos en la barra
de men en la opcin de "Ventana" y hacemos clic sobre la opcin "Capas"
MACROMEDIA 8...

173

Despus hacemos clic sobre el botn para agregar una mscara al mapa de bits

Con eso vemos que ahora aparece un rectngulo blanco en el mapa bits del panel de
capas

Seleccionamos la herramienta de degradado del panel de herramientas (recuerda que a
veces hay que hacer clic izquierdo y mantenerlo presionado para que aparezca el botn).

MACROMEDIA 8...

174

La capa responde a los colores blancos y negro donde el color blanco corresponder al
rea que la capa har transparente y el negro representara el rea visible del mapa bits
que contiene el mapa de bits al cual se aplica la mscara.
Podemos modificar la forma del degradado dirigindonos al panel de propiedades y
modificando la disposicin del degradado.

Ahora situados en la mscara (donde actualmente estamos) hacemos un clic izquierdo
sobre un extremo de la imagen

Y mantenemos presionado el botn izquierdo del ratn mientras arrastramos el puntero hacia el
otro extremo de la imagen
MACROMEDIA 8...

175

El extremo izquierdo de la lnea contiene el color blanco del degradado lo que significa
que el rea que se encuentre a la izquierda se har transparente mientras que el rea
derecha con el color negro del degradado ser el rea que permanecer visible de la
imagen

Con esto ya podemos apreciar cmo queda el efecto de la mscara sobre el mapa de bits.
Si queremos eliminar la mscara del mapa de bits simplemente hagamos clic sobre la
mscara

Y presionemos el botn de Suprimir seleccin.
MACROMEDIA 8...

176

Y presionamos el botn Descartar.
APLICACIN DE EFECTOS PRIMERA PARTE
Fireworks cuenta con una cantidad de efectos que podemos aplicar a los objetos,
imgenes y textos que tengamos en nuestro lienzo los cuales van desde el aplicar sobras,
iluminar un objeto, desenfocar, modificar colores, aplicar un bisel, etc.
En esta leccin explicaremos de los ms interesantes y sobresalientes de los filtros

APLICAR SOMBRA.
Lo primero que tenemos que hacer es con la herramienta de puntero seleccionamos el
objeto al cual queremos aplicarlo que en este caso ser un texto
Despus en el panel de propiedades hacemos clic sobre el smbolo + que se encuentra
en la zona de efectos el cual simboliza Aadir efectos

Una vez presionado se nos despliega el siguiente men

MACROMEDIA 8...

177

Ahora nos dirigimos a la opcin de Sombrear e iluminar y
Despus seleccionamos la opcin sombra
Ahora vemos que se nos despliega el men de configuracin del efecto

1. Aqu regulamos la distancia de la sombra con respecto al objeto
2. Aqu regulamos la opacidad de la sombra (entre ms grande el valor ms opaco
ser el color de la sombra)
3. En esta opcin regulamos la suavidad de la sombra (entre ms grande sea el
valor ms borrosa se ver la sombra)
4. Aqu regulamos el Angulo de proyeccin de la sombra
5. Aqu seleccionamos el color de la sombra
6. Si marcamos solo sombra solo se mostrara la sombra del objeto

y si seleccionamos la opcin que deseamos luce de esta manera

APLICAR ILUMINADO
MACROMEDIA 8...

178

Simplemente seguimos los pasos del 1 al 4 del efecto anterior y despus seleccionamos
iluminado

Se nos despliega un men de configuracin parecido al del efecto de sombra

1. Aqu configuramos el tamao del iluminado
2. Aqu configuramos la distancia entre el efecto de iluminado y el objeto
3. Aqu regulamos la opacidad del iluminado (entre ms grande el valor ms fuerte
opaco ser el color del iluminado)
4. Aqu regulamos la suavidad del iluminado (entre ms grande el valor ms
borroso se ver el contorno del efecto)
5. Aqu seleccionamos el color de la iluminacin
Al final nos queda un efecto que puede lucir de esta manera o dependiendo del color de
iluminado que elijamos.
MACROMEDIA 8...

179

IUMINADO INTERIOR.
Para aplicar el efecto de iluminado interior seguimos los paso del 1 al 4 de como aplicar
el efecto de sombra y seleccionamos iluminado interior

Este efecto se configura de la misma manera que el efecto de iluminado pero a diferencia
del efecto de iluminado este se aplica al interior del objeto. A continuacin veamos la
diferencia entre estos efectos

Este efecto hace que la iluminacin valla desde los bordes de la figura hacia adentro de
ella
SOMBRA INTERIOR.
MACROMEDIA 8...

180

Para aplicar un efecto de sombra interior seguimos los pasos del 1 al 4 de cmo aplicar
el efecto de sombra y seleccionamos iluminado exterior.

Este efecto se configura de la misma manera que el efecto de sombra pero a diferencia
del efecto de sombra este se aplica al interior del objeto. A continuacin entre el efecto
de sombra y el efecto de sombra interior.

Como podemos ver el efecto de sombra interior da una impresin de hundido al objeto.
DESENFOQUE GAUSSIANO.
El desenfoque gaussiano nos permite regular el radio de desenfoque de un objeto.
Supongamos que queremos aplicar un desenfoque a esta imagen

MACROMEDIA 8...

181

Pues entonces lo primero que haremos es seleccionar la opcin desenfocar y despus
seleccionamos desenfoque gaussiano.

Vemos que se nos despliega una pequea ventana con una barra deslizante

- Esta es la barra deslizante y con ella podemos regular el radio de desenfoque
deslizando el punto en ella
2- En esta zona podemos digitar directamente el radio de desenfoque del objeto
Al finalizar presionamos el botn aceptar
Y vemos como nuestro objeto se mira con un efecto desenfocado

MACROMEDIA 8...

182

APLICACIN DE EFECTOS - SEGUNDA PARTE
BISEL EXTERIOR
Para aplicar este efecto seguimos los pasos del 1 al 3 de la leccin anterior y despus
seleccionamos Bisel y relieve
Despus seleccionamos Bisel Exterior.

Ahora se nos despliega el men de configuracin de este efecto.

-Seleccionamos el tamao del ancho del bisel
2- Seleccionamos el color del bisel
3- Aqu podemos elegir la forma del borde del bisel entre los cuales tenemos

MACROMEDIA 8...

183

- Aqu regulamos el porcentaje de la luz y sombra del bisel
5- Aqu regulamos el nivel de suavizado del bisel
6- Aqu regulamos el ngulo de la luz del bisel
7- Aqu podemos elegir entre los estados preestablecidos del bisel entre los cuales se
encuentran: Elevado, Resaltado, Recuadro, he invertido
Al finalizar de configurar el bisel hacemos nos podra quedar de esta manera o segn lo
hayamos configurado

BISEL INTERIOR.
Para aplicar este efecto nos dirigimos al men de efectos y en Bisel y relieve
seleccionamos Bisel interior

Vemos ahora que se nos despliega un men de configuracin idntico al del efecto de
bisel exterior pero con la diferencia que no podemos elegir un color

MACROMEDIA 8...

184

APLICACIN DE EFECTOS - SEGUNDA PARTE
BISEL EXTERIOR
Para aplicar este efecto seguimos los pasos del 1 al 3 de la leccin anterior y despus
seleccionamos Bisel y relieve
Despus seleccionamos Bisel Exterior.

Ahora se nos despliega el men de configuracin de este efecto

Seleccionamos el tamao del ancho del bisel
2- Seleccionamos el color del bisel
1- Aqu podemos elegir la forma del borde del bisel entre los cuales tenemos

MACROMEDIA 8...

185

- Aqu regulamos el porcentaje de la luz y sombra del bisel
5- Aqu regulamos el nivel de suavizado del bisel
6- Aqu regulamos el ngulo de la luz del bisel
7- Aqu podemos elegir entre los estados preestablecidos del bisel entre los cuales se
encuentran: Elevado, Resaltado, Recuadro, he invertido
Al finalizar de configurar el bisel hacemos nos podra quedar de esta manera o segn lo
hayamos configurado.
BISEL INTERIOR.
Para aplicar este efecto nos dirigimos al men de efectos y en Bisel y relieve
seleccionamos Bisel interior

Vemos ahora que se nos despliega un men de configuracin idntico al del efecto de
bisel exterior pero con la diferencia que no podemos elegir un color

Veamos una comparacin entre el efecto de bisel exterior y el efecto de bisel interior
Bisel interiorBisel exterior
MACROMEDIA 8...

186

Como podemos ver el bisel interior da un efecto 3D a las letras dndole una apariencia
de proyectar luz y sombra sobre sus bordes
Este efecto da la apariencia de que el objeto sobresale en relieve del fondo o lo que tenga
detrs. Para aplicarlo nos dirigimos al men de efectos y en Bisel y Relieve
Seleccionamos Relieve elevado.

Se nos despliega el siguiente men de configuracin.

1- Aqu especificamos el ancho del efecto de relieve
2- Aqu modificamos el grado de intensidad de la luz y la sombra del relieve.
3- Aqu seleccionamos la suavidad del efecto del relieve (entre ms alto el valor ms
borroso se ver el relieve)
4- Aqu especificamos el ngulo de proyeccin de la luz
5- Si dejamos seleccionada esta opcin solo se mostrara el relieve del objeto
MACROMEDIA 8...

187

Al final veremos que el objeto queda de esta manera

En la imagen podemos apreciar que sobre un fondo plano o sobre o fondo de imagen el
efecto de relieve siempre se distingue
RELIEVE HUNDIDO.
Para aplicarlo nos dirigimos al men de efectos y en Bisel y Relieve seleccionamos
Relieve hundido.
Aqu se nos despliega un men de configuracin exactamente igual al de relieve
hundido por lo que ya sabes cul es la funcin de cada opcin.
Veamos la diferencia entre el relieve hundido y el relieve elevado en la siguiente imagen
Relieve elevado

Relieve hundido
MACROMEDIA 8...

188

Como vemos a diferencia del relieve elevado, el relieve hundido nos da el efecto de que
el texto se hunde en el fondo.
Nota: Recordemos que estos efectos se pueden aplicar en cualquier objeto del escenario
y no solo textos.
APLICACIN DE EFECTOS - TERCERA PARTE
MANEJAR VARIOS EFECTOS A LA VEZ.
En Fireworks podemos agregar ms de un efecto a un solo objeto y al hacerlo se nos irn
agregando en el rea que muestra la siguiente imagen
Si queremos modificar el nivel de aplicacin de cierto efecto simplemente hacemos clic
izquierdo sobre el nombre del efecto y lo mantenemos presionado mientras arrastramos
el efecto hacia la parte de arriba o hacia la parte de abajo del orden de aplicacin.
Para entender esto de una forma ms prctica supongamos esta situacin.
Hemos aplicado primero un efecto de sombra y un efecto de bisel exterior despus. Lo
cual nos deja una est apariencia al texto.

Como podemos ver el efecto de la sombra apenas y se ve. Esto es porque la sombra esta
antes que el efecto de bisel exterior
MACROMEDIA 8...

189

Pero nosotros queremos que la sombra este despus del efecto de bisel exterior y que se
vea de esta manera

Pues lo que tenemos que hacer es bajar el efecto de sombra a un nivel inferior del efecto
de bisel exterior y esto lo hacemos haciendo clic izquierdo sobre el efecto de sombra y
arrastrndolo hacia abajo.

EDITAR UN EFECTO.
Si ya hemos aplicado un efecto pero queremos modificar nuevamente un atributo de l.
Lo que tenemos que hacer es dar un clic izquierdo sobre el icono que muestra la imagen.
Ya con esto se nos vuelve a abrir la ventana de configuracin de efecto que hayamos
seleccionado para hacer las modificaciones pertinentes.
Despus de esto nuestro efecto se actualizara con los cambios hechos.
ELIMINAR EFECTO.
Para eliminar un efecto lo que tenemos que hacer es hacer un clic izquierdo sobre el
nombre del efecto y presionar el botn -que se encuentra en la parte superior del
panel de efectos

MACROMEDIA 8...

190

Si lo hicimos correctamente el efecto se eliminara de la lista de efectos aplicados.
EVITAR LA VISUALIZACIN DE UN EFECTO.
A veces queremos que algn efecto no se vea pero sin eliminarlo de los efectos aplicados.
Esto es de utilidad cuando estemos visualizando alguna idea de una combinacin de
efectos.
Pues para no visualizar un efecto sin eliminarlo tenemos que hacer clic sobre la zona del
efecto en la lista que muestra la siguiente imagen.

Vemos que aparece una X que simboliza que nuestro efecto no es visible.
Y si queremos volver a visualizar el efecto tenemos que hacer clic en el mismo lugar
(donde actualmente se encuentra la X) para visualizarla de nuevo.
OPTIMIZAR IMAGEN
Con Macromedia Fireworks podemos configurar la calidad y el formato de imagen a la
cual queremos transformar nuestro proyecto de Fireworks con el panel de optimizacin
del programa, con este panel podemos configurar el formato y la calidad de la imagen
que creamos al momento de exportarla.
Para esto tenemos que tener activado el panel de optimizar activado. Si no lo tenemos
activado lo podemos hacer dirigindonos a la barra de men en Ventana
seleccionamos Optimizar
MACROMEDIA 8...

191

Este es el panel de "optimizar".

A continuacin veremos como optimizar las imgenes de GIF y JPEG.
OPTIMIZAR A JPEG.
Lo primero que hacemos es elegir JPEG en la opcin de Formato de archivo de
exportacin.

MACROMEDIA 8...

192

Ahora lo ms importante a la hora de optimizar a una imagen jpg es la calidad del
archivo. Para modificar la calidad del archivo en cambiamos el valor de la caja de
Calidad

Entre mayor sea el valor mayor ser la calidad don 100 es la calidad mxima.
Nota: lo recomendable para las imgenes JPEG es una calidad de 80
Tambin podemos configurar la cantidad de suavizado de la imagen JPEG para cuando
tengamos una imagen que contenga demasiado ruido.
MACROMEDIA 8...

193

Entre mayor sea el nmero que le asignemos ms borrosa se ver la imagen (la escala es
entre 0 y 8).

OPTIMIZAR A GIF.
Lo primero que hacemos es elegir GIF en la opcin de Formato de archivo de
exportacin.

Ahora para modificar la calidad del gif en la opcin de Colores elegimos la calidad de
colores de la imagen y entre mayor sea el nmero de colores mejor calidad tendr la
imagen gif.
El rango de colores entre los que podemos elegir es entre 2 y 250.

En la parte inferior del panel podemos modificar si queremos agregar transparencia a la
imagen gif seleccionando la opcin de Transparencia Alfa.
MACROMEDIA 8...

194

As nuestra imagen si la tenemos de esta forma en el lienzo de Fireworks sin fondo.

Nos quedara de esta forma

Gif sin transparencia
MACROMEDIA 8...

195

Gif con transparencia
USO DE LA VISTA PREVIA.
En Fireworks podemos hacer una vista previa de cmo quedara nuestra imagen antes de
exporta la haciendo uso de las pestaas de vista previa.

Si hacemos clic en la pestaa de vista previa y podemos apreciar como quedara nuestra
imagen segn la configuracin que hayamos hecho en el panel de optimizar.
Podemos hacer los cambios y ver al instante como quedara la imagen al exportarla
cuando estemos situados en esta pestaa.
Para seguir trabajando en nuestro lienzo debemos presionar en la pestaa Original

EXPORTAR IMAGEN
Una vez ya en la leccin anterior hemos aprendido a como optimizar la imagen al
formato al cual queremos exportar la imagen.
MACROMEDIA 8...

196

Lo primero que tenemos que hacer para exportar la imagen es dirigirnos a la barra de
men y en Archivo seleccionamos la opcin Exportar.

Se nos despliega una ventana idntica a la que se nos despliega al guardar una
En ella ingresamos el nombre con el cual deseamos exportar la imagen introduciendo lo
en la caja de texto que marca la imagen.

MACROMEDIA 8...

197

Luego presionamos el botn Guardar
Y con eso hemos exportado nuestra imagen segn el formato que hayamos elegido en el
panel de Optimizar.
CREACIN DE GIF ANIMADOS.
En Fireworks podemos crear gif animados por medio de la manipulacin de imgenes
cuadro por cuadro.
En esta leccin haremos un pequeo gif usando 1 imagen y un texto para demostrar los
pasos de cmo hacer un gif animado en este programa.
1- Primero importaremos 1 imagen al lienzo de Fireworks.|

1- Ahora nos dirigimos al panel de Fotogramas y Historial el cual si no lo tenemos
activado lo podemos activar dirigindonos a la barra de men y en la opcin de
Ventana seleccionamos Fotogramas.
MACROMEDIA 8...

198

El panel de Fotogramas luce de esta manera.
Como podemos ver ahora actualmente estamos en el fotograma nmero 1.
Para agregar un nuevo fotograma simplemente hacemos clic sobre el botn de
Fotograma nuevo.

Si lo hicimos correctamente vemos que ahora tenemos un nuevo fotograma en este
panel.
MACROMEDIA 8...

199

Tambin vemos que el lienzo ha quedado vaci ya que actualmente nos encontramos en
el fotograma nmero 2 y en el cual no hemos puesto nada aun.
2- Para trasladarnos de fotograma a fotograma basta con hacer clic sobre el
fotograma en el panel de capas.
Tambin podemos utilizar los botones que se encuentran en la parte inferior del lienzo

1-Ir al primer fotograma.
2- Reproducir / Detener.
3- Ir al ltimo fotograma.
4- Numero del fotograma donde actualmente te encuentras.
5- Ir al fotograma anterior.
6- Ir al siguiente fotograma
Para configurar el tiempo de demora entre fotograma y fotograma debemos hacer doble
clic izquierdo sobre el rea del fotograma que muestra la siguiente imagen.
MACROMEDIA 8...

200

Ahora vemos que aparece una pequea ventana

Aqu en la caja de texto introducimos el valor en milisegundos del tiempo de
Demora entre fotograma y fotograma en donde 100 milisegundos equivale a 1 segundo
lo que quiere decir que si queremos que la demora sea de 4 segundos tenemos que
digitar la cantidad 400 en la caja de texto de esta ventana.
5- Ya con lo anterior situmonos en el fotograma nmero 2 y configuremos tambin su
tiempo de demora en 400 milisegundos.
Y en el lienzo crearemos un texto.

Podemos apreciar como se ve el gif animado segn el tiempo de demora que hemos
puesto a cada fotograma.
7- ya por ultimo solamente hay que exportar el gif animado dirigindonos al panel de
optimizar y seleccionando gif animado en la opcin de formato de archivo de
exportacin
MACROMEDIA 8...

201

Y exportamos la imagen a nuestro disco duro.
El gif animado al final luce de esta manera.

CAPAS
Las capas dividen los documentos de Macromedia Fireworks MX en planos, como si los
componentes de una ilustracin se dibujasen en distintas hojas superpuestas
transparentes.
Un documento puede estar compuesto por muchas capas y cada una contener muchos
MACROMEDIA 8...

202

objetos. En Fireworks, el panel "Capas" muestra una lista de las capas y los objetos
contenidos en cada capa.
El enmascaramiento aporta control creativo sobre las capas y los objetos. Es posible
utilizar un objeto vectorial o de mapa de bits para tapar parte de la imagen subyacente.
ACERCA DE LAS CAPAS
Cada objeto de un documento reside en una capa. Es posible crear capas antes de dibujar
o aadirlas cuando se vayan necesitando. El lienzo est situado debajo de todas las
capas, aunque en s mismo no sea una capa.

El orden de apilamiento de las capas y objetos puede verse en el panel Capas. Se trata del
orden en que aparecen en el documento. Fireworks apila las capas por el orden en que
se crearon, poniendo la ms reciente en la parte superior de la pila. El orden de
apilamiento determina la manera en que los objetos de una capa se superponen a los de
otras. Es posible reorganizar el orden de apilamiento de las capas as como el de los
objetos dentro de las capas.
El panel Capas muestra el estado actual de todas las capas del fotograma actual de un
documento.

El nombre de la capa activa aparece resaltado en el panel Capas. Es posible expandir una
capa para ver una lista de todos los objetos que contiene. Los objetos se muestran como
miniaturas.
Seleccione un objeto de esa capa.
ADICINYLIMINACINDE CAPAS
Por medio del panel Capas, es posible aadir capas nuevas, eliminar las que no se deseen
y duplicar capas y objetos existentes.
MACROMEDIA 8...

203

Al crear una nueva capa, se inserta una capa vaca encima de la actualmente
seleccionada. La nueva capa pasa a ser la activa y aparece resaltada en el panel Capas. Al
eliminar una capa, la que est situada encima se convierte en la activa.

La creacin de una capa duplicada aade una nueva capa que contiene los mismos
objetos que la actualmente seleccionada. Los objetos duplicados conservan la opacidad y
los modos de mezcla de los que se copiaron. Los cambios realizados en los objetos
duplicados no afectan a los originales.
PARA AADIR UNA CAPA, SIGA UNO DE ESTOS PROCEDIMIENTOS:

Haga clic en el botn Capa nueva/duplicada sin que haya ninguna capa seleccionada.
Elija Editar > Insertar > Capa.
Elija Nueva capa en el men de opciones del panel Capas y haga clic en Aceptar.
PARA ELIMINAR UNA CAPA, SIGA UNO DE ESTOS PROCEDIMIENTOS:

En el panel Capas, arrastre la capa al icono de cubo de basura.
Seleccione la capa y haga clic en el icono de cubo de basura del panel Capas
PARA DUPLICAR UNA CAPA, SIGA UNO DE ESTOS PROCEDIMIENTOS:
Arrastre la capa al botn Capa nueva/duplicada.
Seleccione la capa y elija "Duplicar capa" en el men de opciones del panel Capas.
A continuacin elija el nmero de capas duplicadas que deben insertarse y dnde
se colocan en el orden de apilamiento.

MACROMEDIA 8...

204

ARRIBA:
Sita la nueva capa o capas al principio del panel Capas. La capa de Web siempre
es la capa superior, por lo que elegir "Arriba" pone la capa duplicada debajo de la
capa
TRABAJO CON CAPAS
ACTIVACINDECAPAS

Cuando se hace clic en una capa o en un objeto situado en ella, esa capa se convierte en
la activa.
Los objetos que se dibujen, peguen o importen, residen inicialmente en la capa activa.
Para activar una capa, siga uno de estos procedimientos:
Haga clic en el nombre de la capa en el panel Capas.

PARA BLOQUEAR O DESBLOQUEAR TODAS LAS CAPAS:
Elija Bloquear todas o Desbloquear todas en el men de opciones del panel Capas
MACROMEDIA 8...

205

Un icono de candado indica que la capa est bloqueada.
PARA MOSTRAR U OCULTAR UNA CAPA O LOS OBJETOS DE UNA CAPA:
Haga clic en el cuadrado de la columna central a la izquierda del nombre de la capa u
objeto.

El icono de ojo indica que una capa est visible.

PARA MOSTRAR U OCULTAR TODAS LAS CAPAS Y OBJETOS:
Elija Mostrar todas u Ocultar todo en el men de opciones del panel Capas.
APLICACIN DE FILTROS AUTOMTICOS
Los filtros automticos de Adobe Fireworks (anteriormente conocidos como efectos
automticos) son mejoras que se pueden aplicar a objetos vectoriales, imgenes de
mapas de bits y texto. Entre los filtros automticos, se incluyen biseles y relieves,
sombras slidas, sombras difuminadas e iluminados, ajustar color, desenfocar y perfilar.
Los filtros automticos se pueden aplicar a los objetos seleccionados directamente desde
el Inspector de propiedades.
ACERCA DE LOS FILTROS AUTOMTICOS
Fireworks actualiza estos filtros cuando se editan los objetos a los que se han aplicado.
Despus de aplicar un filtro automtico, es posible cambiar sus opciones en cualquier
momento o reorganizar el orden de los filtros para experimentar con un filtro
combinado. Los filtros automticos se pueden activar y desactivar, o eliminar en el
Inspector de propiedades. Cuando se elimina un filtro, el objeto o imagen recupera su
aspecto anterior.
MACROMEDIA 8...

206

Men emergente Filtros automticos en el Inspector de propiedades
Desenfoque gaussiano o Desperfilar
mscara) que eran filtros irreversibles o de conexin tambin estn ahora disponibles
como filtros automticos de Fireworks.
estos filtros de forma tradicional mediante el men Filtros.
filtros o Aadir filtros para visualizar el men emergente Filtros automticos.
Nota: cuando se crea un nuevo relleno, ste adopta el color que aparece en el cuadro
Color de relleno del panel Herramientas.
conseguir la apariencia que desea.
MACROMEDIA 8...

207

Ventana emergente para Bisel interior
A.
Anchura de bisel
APLICAR FILTROS AUTOMTICOS
Aplicar un filtro automtico a objetos seleccionados

En el Inspector de propiedades, haga clic en el botn ms (+) junto a la etiqueta Filtros y,
a continuacin, seleccione un filtro en el men emergente Agregar filtros automticos.
El filtro se aade a la lista de filtros automticos del objeto seleccionado.
Para aplicar un filtro automtico que parezca que slo afecta a una seleccin de pxeles dentro
de una imagen, corte la seleccin y pguela en el mismo lugar para crear una nueva imagen de
mapa de bits, seleccinela y aplique el filtro automtico.
Si se abre un men emergente o un cuadro de dilogo, introduzca los valores para el
filtro y realice una de las acciones siguientes:

Si el filtro automtico tiene un cuadro de dilogo, haga clic en Aceptar.
Si el filtro automtico tiene un men emergente, presione Intro o haga clic en
cualquier punto del espacio de trabajo.
Repita los pasos 1 y 2 para aplicar ms filtros automticos.

MACROMEDIA 8...

208

ACTIVAR Y DESACTIVAR UN FILTRO AUTOMTICO APLICADO A UN OBJETO
Haga clic en la marca de verificacin situada junto al filtro en la lista de filtros del
Inspector de propiedades.
ACTIVAR O DESACTIVAR TODOS LOS FILTROS AUTOMTICOS APLICADOS A UN
OBJETO
En el Inspector de propiedades, haga clic en el botn ms (+) junto a la etiqueta Filtros, a
continuacin, en el men emergente, elija Opciones > Todo activado u Opciones > Todo
desactivado.
GUARDAR LOS EFECTOS APLICADOS
Una vez aadido y editado un filtro automtico, haga clic fuera del men emergente de
configuracin o presione Intro.
APLICAR BORDES BISELADOS
Un borde biselado otorga al objeto un aspecto de relieve.

Rectngulo con bisel interior y con bisel exterior
1. En el Inspector de propiedades, haga clic en el botn ms (+) junto a la etiqueta
Filtros y, a continuacin, elija una opcin de bisel en el men emergente.
2. Edite la configuracin del filtro en el men emergente.
APLICAR RELIEVES
El filtro Relieve permite que una imagen, un objeto o un texto aparezcan elevados o
hundidos respecto al lienzo.

MACROMEDIA 8...

209

Objeto con relieve hundido y con relieve elevado
1. En el Inspector de propiedades, haga clic en el botn ms (+) junto a la etiqueta
Filtros y, a continuacin, elija una opcin de relieve en el men emergente.
2. Edite los parmetros del filtro.
Si desea que el objeto original aparezca en el rea en relieve, seleccione Mostrar
objeto.
Nota: por motivos de compatibilidad con versiones anteriores, en documentos
ms antiguos, la opcin Mostrar objeto no est seleccionada para los objetos que
tienen aplicado el filtro Relieve.
APLICAR SOMBRAS Y EFECTOS DE ILUMINADO
Elija entre una gran variedad de sombras y especifique el ngulo de la sombra para
simular que la luz brilla sobre el objeto.

Filtros Sombra, Sombra interior e Iluminado
MACROMEDIA 8...

210

CONFIGURACIN DE FILTROS PARA LAS SOMBRAS
Las opciones disponibles varan en funcin del tipo de sombra
Arrastre el deslizador ngulo para establecer la direccin de la sombra.
Arrastre el deslizador Distancia para establecer la distancia entre el objeto y su
sombra.
Para aplicar un color uniforme a la sombra, seleccione la opcin Color slido

Para establecer el color de sombra, abra el men emergente del color y realice la
seleccin.

Arrastre el deslizador Opacidad para establecer el porcentaje de transparencia en
la sombra.

Arrastre el deslizador Suavidad para establecer la nitidez de la sombra.

Para ver una vista previa de la sombra, haga clic en la opcin Vista previa.

Para ocultar el objeto y mostrar solamente su sombra, seleccione Slo sombra.

APLICAR SOMBRAS SLIDAS
1. En el Inspector de propiedades, haga clic en el botn ms (+) junto a la etiqueta Filtros
y, a continuacin, en Sombrear e iluminar y, por ltimo en Sombra slida.
2. En el cuadro de dilogo Sombra slida, ajuste los parmetros del filtro.
3. Cuando finalice, haga clic en Aceptar.
APLICAR UNA SOMBRA O UNA SOMBRA INTERIOR
1. En el Inspector de propiedades, haga clic en el botn ms (+) junto a la etiqueta Filtros
y, a continuacin, elija una opcin de sombra en el men emergente.
o Sombrear e iluminar > Sombra.
o Sombrear e iluminar > Sombra interior.
MACROMEDIA 8...

211

Edite la configuracin del filtro en el men emergente
APLICAR UN EFECTO DE ILUMINADO
1. Haga clic en el botn Aadir filtros del Inspector de propiedades y elija Sombrear
e iluminar > Iluminado.
2. Edite la configuracin del filtro en el men emergente:
Para establecer el color de iluminacin, haga clic en el cuadro del color.
Arrastre el deslizador Anchura para establecer la anchura del iluminado.
Arrastre el deslizador Opacidad para establecer el porcentaje de
transparencia del iluminado.
Arrastre el deslizador Suavidad para establecer la nitidez del iluminado.
Arrastre el deslizador Desplazamiento para especificar la distancia entre
el objeto y el efecto de iluminado.
APLICAR FILTROS INTEGRADOS Y DE CONEXIN DE PHOTOSHOP COMO FILTROS
AUTOMTICOS
Nota: el men Extras de las versiones anteriores de Fireworks ha pasado a llamarse
Filtros en Fireworks 8 y versiones posteriores. Las extensiones Extra de Fireworks
ahora se denominan filtros.
La aplicacin como filtros automticos de filtros incorporados y de conexin en el men
emergente Aadir filtros garantiza que el usuario pueda editarlos o eliminarlos de un
objeto.
Use el men Filtros slo para aplicar los filtros y los filtros de conexin de Adobe
Photoshop cuando sepa con certeza que no habr que editar ni eliminar el filtro. Un
filtro slo se puede eliminar si el comando Deshacer est disponible.
INSTALAR Y APLICAR FILTROS DE CONEXIN DE PHOTOSHOP
1. En el Inspector de propiedades, haga clic en el botn Aadir filtros y, a
continuacin, seleccione Opciones > Localizar filtros de conexin.
MACROMEDIA 8...

212

2. Abra la carpeta en la que se encuentran los filtros de conexin de Photoshop y haga
clic en Aceptar.
3. Reinicie Fireworks para cargar los filtros de conexin.
Nota: si mueve los filtros de conexin a otra carpeta, debe repetir los pasos anteriores o
seleccionar Edicin > Preferencias y hacer clic en la ficha Filtros de conexin para
cambiar la ruta de acceso a los filtros de conexin. Despus debe reiniciar Fireworks.
4. Para aplicar el filtro de conexin de Photoshop a un objeto seleccionado, en el
Inspector de propiedades, haga clic en el botn ms (+) junto a la etiqueta Filtros y, a
continuacin, seleccione un filtro del submen Opciones.

APLICAR EFECTOS DE CAPA DE PHOTOSHOP
Nota: si importa un archivo PSD, tambin puede editar efectos de capa que ya existen en
el archivo.
1. En el Inspector de propiedades, haga clic en el botn Aadir filtros y, a
continuacin, seleccione Efectos automticos de Photoshop.
2. Seleccione uno de los efectos en el panel de la izquierda e introduzca los cambios
en el panel de la derecha. Puede seleccionar varios efectos cada vez.
APLICAR FILTROS A OBJETOS AGRUPADOS
Al aplicar un filtro a un grupo, se aplica a todos los objetos que ste contiene. Si se
desagrupan los objetos, cada objeto recupera los filtros que tuviera individualmente.
Para aplicar un filtro a un objeto dentro de un grupo, seleccione slo dicho objeto
utilizando la herramienta Su seleccin
. EDICIN Y PERSONALIZACIN DE FILTROS AUTOMTICOS
Modificacin de la configuracin de filtros automticos
MACROMEDIA 8...

213

1. En el Inspector de propiedades, haga clic en el botn de informacin situado
junto al filtro que desea editar.
2. Ajuste los parmetros del filtro.
Los filtros no editables aparecen atenuados.
3. Haga clic fuera de la ventana o presione Intro.
Ordenar o eliminar filtros automticos
ORDENAR FILTROS AUTOMTICOS
Es posible cambiar el orden de los filtros aplicados a un objeto. As se vara la secuencia
en que se aplican los filtros, lo cual puede originar cambios en el filtro combinado. Los
filtros del principio de la lista se aplican antes que los situados al final.
En general, los filtros que modifican el interior de un objeto, como el filtro Bisel interior,
deben aplicarse antes que los que modifican el exterior. Por ejemplo, el efecto Bisel
interior debera aplicarse antes que los filtros Bisel exterior, Iluminado o Sombra.
Para ordenar los filtros, arrastre un filtro a una posicin diferente de la lista en el
Inspector de propiedades.
ELIMINAR UN FILTRO APLICADO A UN OBJETO SELECCIONADO
En el Inspector de propiedades, seleccione el filtro que desee eliminar de la lista de
filtros y haga clic en el botn Eliminar filtros automticos.
Eliminar todos los filtros aplicados a un objeto seleccionado
En el Inspector de propiedades, haga clic en el botn ms (+) junto a la etiqueta Filtros
y, a continuacin, en el men emergente, elija Ninguno.
CREAR FILTROS AUTOMTICOS PERSONALIZADOS
MACROMEDIA 8...

214

Los filtros automticos personalizados son en realidad estilos para los que slo se ha
seleccionado la opcin de propiedad Filtro. Para guardar una combinacin especfica de
parmetros de los filtros automticos, cree uno personalizado.
CREAR UN FILTRO AUTOMTICO PERSONALIZADO MEDIANTE EL PANEL ESTILOS
1. Aplique los ajustes de filtros automticos a los objetos seleccionados. Para obtener
ms informacin, consulte Aplicacin de filtros automticos.
2. Seleccione Nuevo estilo en el men de opciones del panel Estilos.
3. Anule la seleccin de todas las propiedades excepto Efecto, introduzca un nombre y
haga clic en Aceptar.
Se aade un icono de estilo que representa el filtro automtico al panel Estilos.
Nota: si elige alguna otra propiedad en el cuadro de dilogo Nuevo estilo, el estilo
no se aadir al men emergente Agregar filtros automticos del Inspector de
propiedades aunque s aparecer en el panel Estilos como un estilo ms.
APLICAR UN FILTRO AUTOMTICO PERSONALIZADO A OBJETOS SELECCIONADOS
En el panel Estilos, haga clic en el icono del filtro automtico personalizado.
Un filtro automtico personalizado se puede cambiar de nombre o eliminar de la misma
forma que cualquier otro estilo del panel Estilos. No es posible cambiar el nombre de un
filtro estndar de Fireworks ni eliminarlo.
GUARDAR FILTROS AUTOMTICOS COMO COMANDOS
Guarde y reutilice un filtro creando un comando basado en l. El comando puede
utilizarse en el proceso por lotes.
1. Aplique los filtros al objeto.
2. Si el panel Historial no est visible, seleccione Ventana > Historial.
3. Mantenga presionada la tecla Mayus y haga clic en el grupo de acciones que desea
guardar como comando.
4. Siga uno de estos procedimientos:
MACROMEDIA 8...

215

o Seleccione Guardar como comando en el men de opciones del panel
Historial.
o Haga clic en el botn Guardar de la parte inferior del panel Historial.
5. Introduzca un nombre para el comando y haga clic en Aceptar para aadir el
comando al men Comandos.
MSCARAS DE MAPAS DE BITS
Una mscara cubre ciertas reas de una imagen determinando qu reas son opacas y
cuales transparentes. Se utilizan para fusionar una imagen en otra o para aislar un rea
que va a ser eliminada. El objeto de mscara se coloca encima de la imagen que se
quiere ocultar. La mscara contiene un relleno que afecta a la imagen que hay debajo. Si
las reas de la mscara son blancas se ver todo lo que hay debajo. Si son negras no se
ver nada. Los niveles de grises determinan la cantidad de transparencia.
Puede aplicar mscaras de mapa de bits de dos formas:
Por medio de un objeto existente, para enmascarar otros objetos.
Mediante la creacin de una mscara vaca. Si es blanca hay transparencia y se
muestra todo el objeto enmascarado, mientras que si es negra lo oculta. Las
herramientas de mapa de bits permiten dibujar sobre el objeto de mscara o
modificarlo, ocultando o mostrando los objetos enmascarados situados debajo.
EJERCICIO
Una mscara puede disimular la integracin de una imagen en un fondo. Guarde la
siguiente imagen en su carpeta de trabajo:
1. Utilice un lienzo blanco de 800 x 400
2. Dibuje un rectngulo que cubra el lienzo. De momento no se preocupe del color
del relleno. En el panel capas ponga nombre al rectngulo. Llmele Fondo.
3. Importe la imagen sobre el lienzo. Ver un puntero en forma de esquina . No
haga clic porque se insertar la imagen a su tamao original. Partiendo de la
esquina superior izquierda, pinche y arrastre hasta que la imagen iguale la altura
del lienzo.
MACROMEDIA 8...

216

4. Seleccione el rectngulo del fondo. Seleccione un color de relleno tomndolo con
el cuentagotas del mar que aparece en la imagen. Seleccione una textura Linea-
Horiz 3 al 30%.
5. Dibuje un rectngulo que cubra la imagen. Relleno degradado lineal. Abra la
ventana de color del degradado. Seleccione, preestablecido blanco negro. Textura
0%. Este rectngulo actuar como mscara.
En el panel capas seleccione la imagen y el rectngulo blanco negro
6. 0%. Este rectngulo actuar como mscara.
7. En el panel capas seleccione la imagen y el rectngulo blanco negro.
8. Haga clic en Modificar > Mscara > Agrupar como mscara. La mscara que
vinculada a la imagen como puede apreciar en el panel capas.
9. En la imagen miniatura del panel capas, haga clic sobre el icono en forma de
pluma

Para que aparezcan los controladores de la mscara. Despus haga clic sobre el
puntero seleccin . Ver que aparecen los controladores del degradado. Con la
imagen seleccionada, tambin pudo utilizar el men de opciones
Del panel capas (Editar mscara).
10. Arrastre el controlador circular del degradado hacia la derecha y el cuadrado
hacia la izquierda para controlar la transparencia. Si el controlador cuadrado est
muy a la derecha se ver demasiado el borde de la imagen y la fusin no ser
buena.
11. Hay otro mtodo muy rpido para fundir la imagen. Seleccione la mscara y
brrela. Importe de nuevo la imagen. Con la imagen seleccionada haga clic en
Comandos > Creativo > Fundir imagen. Seleccione, por ejemplo, la segunda
opcin en la ventana de dilogo que aparece.
12. Guarde el trabajo con el nombre veneciafusion.png
MACROMEDIA 8...

217

MSCARAS VECTORIALES
Las mscaras vectoriales tiene la ventaja de que es posible ajustar los puntos del
contorno como se hace con los objetos vectoriales. Adems, la mscara vectorial slo
oculta parte de la imagen, no borra los pxeles por lo que es posible recuperar el
original utilizando el men opciones del panel capas, opcin Desactivar mscara. El
objeto que acta como mscara vectorial recorta los objetos subyacentes con la
Forma de su trazado como si se tratara de un molde.
Las mscaras no vectoriales o de mapas de bits borran los pxeles por lo que no es
posible hacer ajustes o recuperar el original. Tambin se denominan mscaras de
recorte o pegar dentro.
EJERCICIO
1. Guarde la siguiente imagen en su carpeta de trabajo
2. Desde Fireworks abra la imagen venecia4.jpg
3. Nuestro objetivo es aislar, mediante una mscara vectorial, la gndola junto con
el gondolero que aparece en primer plano.
MACROMEDIA 8...

218

Seleccione la herramienta pluma, relleno ninguno, trazo rojo de 1 o 2 pxeles
bsico, lnea suave. La eleccin del trazo es arbitraria, pero seleccione un color
que se vea bien.
Utilizando la lupa cuando lo necesite y con la herramienta pluma recorra el
contorno de la gndola y el gondolero colocando puntos de curva (mediante
arrastres para sacar los controladores de curva). Mantenga pulsada la tecla de
control cuando necesite la herramienta sabeleccin para mover o ajustar un
punto o un controlador. Ample cuando lo crea necesario para conseguir un buen
ajuste. Seguramente necesitar dos trazados cerrados para completar el
contorno.

Mantenga pulsada la tecla mayscula y seleccione la imagen y el trazado.
Haga clic en Modificar > Mscara > Agrupar como mscara.
Debido a que es una mscara vectorial es posible editarla haciendo clic en el icono en
forma de pluma

MACROMEDIA 8...

219

del panel de capas. Utilice la herramienta subseleccin

Si necesita mover algn punto.
Puede desactivar la mscara en cualquier momento utilizando el
men opciones
Del panel Capas, opcin Desactivar mscara.
PEGAR UNA IMAGEN DENTRO DE UN OBJETO
Guarde la siguiente imagen en su carpeta de trabajo: vireo_gorrinegro.jpg. Si ha
realizado las prcticas anteriores debe tener un archivo t4.png, bralo con Fireworks. Si
no lo tiene, puede descargar el archivo y descomprimirlo en su carpeta de trabajo.
bralo con Fireworks a continuacin.
1. La primera parte de esta prctica prepara el objeto dentro del qu colocaremos
una imagen. Mire en el panel capas. Seleccione el trozo de crculo de la capa
circlepics. Haga clic en Editar > Copiar y pegue dos veces. Ahora puede ver en el
panel capas, el original y dos copias de ese trazado.
2. Saque una gua horizontal y colquela en la posicin 289. Como ve, esta gua
divide el trozo de crculo en dos partes. Para eliminar la parte superior de una de
las copias, dibuje un rectngulo que cubra esa parte superior del trozo de crculo,
desde la gua hacia arriba. Seleccione el rectngulo y el trozo de crculo y haga clic
en Modificar > Combinar trazados > Interseccin. Si oculta los dems objetos de
la capa, a excepcin del que acaba de recortar, ver que ha quedado slo la parte
superior del trozo de crculo. Dentro de este objeto colocaremos la imagen.
Colocar una imagen dentro de un objeto es tan fcil como ponerla encima del objeto,
cortarla y seleccionando el objeto, hacer clic en Pegar dentro. Vemoslo paso a
paso. Importe la imagen vireo_gorrinegro.jpg. Ver un
3. puntero en forma de esquina. No haga clic porque se insertar la imagen a su
tamao original. Pinche y arrastre. Procure que la imagen cubra todo el objeto y
que lo sobrepase ampliamente. Ahora procederemos a un ajuste. Con la
MACROMEDIA 8...

220

herramienta escala arrastre la esquina inferior derecha hasta ajustar la imagen
con la gua.
4. Seleccione la imagen y crtela. Seleccione la forma recortada y haga clic en
Editar > Pegar dentro.
5. Haremos unos retoques finales. Haga visible la otra copia del trozo de crculo.
Como ya hemos visto la gua divide la forma en dos trozos. Eliminaremos ahora el
trozo superior. Dibuje un rectngulo sobre la parte inferior. Seleccione la forma y
el rectngulo y haga clic en Modificar > Combinar trazados > Intersectar. Utilice el
panel capas para llamar a esta forma, circle bottom.
6. Slo falta ordenar los objetos en la capa. Arrastre la sombra interior a la parte
superior de la pila, inmediatamente debajo coloque circle bottom, a continuacin
coloque la imagen con mscara y en la parte baja de la pila debe quedar la forma
con el fondo.
Por ltimo aadamos un efecto a la imagen con mscara. Seleccinela y en el
inspector de propiedades haga clic en aadir efectos > Ajustar color > Niveles
automticos.
7. Las formas auxiliares que utiliz en t4.png ya no las necesita. Brrelas para tener
en las capas lo mismo que se indica en la figura.

MACROMEDIA 8...

221

Como ya hemos comentado, una imagen de mapa de bits debe contener un nmero
equilibrado de pxeles en todas las reas. Ajustar los colores utilizando la funcin
Niveles automticos, corrige la imagen si tiene una alta concentracin de pxeles en
resaltados, medios tonos o sombras. Resaltados corrige los excesos de pxeles claros
que provocan que la imagen parezca descolorida. Medios tonos corrigen los excesos
de pxeles en medios tonos
que provocan que la imagen parezca apagada. Sombras corrige los excesos de
pxeles oscuros que provocan que muchos detalles no se aprecien. Despus de
aplicar un ajuste de color con Niveles automticos puede que la imagen mejore y
resulte ms ntida.
Guarde su trabajo con el nombre t5.png
MSCARA DE MAPA DE BITS
EJERCICIO
Guarde la siguiente imagen en su carpeta de trabajo:
1. Abra la imagen con Fireworks. Seleccione la herramienta Recuadro oval y
utilizando el inspector de propiedades establezca un borde Fundido de 40
pxeles.

2. Dibuje una seleccin elptica entorno a la cabeza del pjaro. Cuando suelte el
ratn se reducir la elipse. No se preocupe por eso, se debe al fundido de 40
pxeles que ha establecido previamente en el inspector de propiedades. Para
eliminar el fondo haga clic en Seleccionar > Seleccionar inverso.
MACROMEDIA 8...

222

3. Pulse la tecla Supr para borrar la parte seleccionada. Seleccione el lienzo y
utilizando el inspector de propiedades ponga un color de fondo blanco para ver el
resultado final.
4. Guarde el trabajo. El tipo de archivo debe ser Fireworks PNG. Ponga el nombre
gavilan2.png.

GUARDAR UNA MSCARA DE MAPA DE BITS
Utilice de nuevo la imagen del gaviln pajarero.
1. Seleccione la imagen. En el panel capas, haga clic en aadir
mscara (botn situado en la parte inferior del panel).
2. En esta primera fase, seleccione la herramienta pincel,
tamao 100, opcin Aergrafo bsico, Borde 0. Utilice este
pincel para eliminar el rea del fondo alejndose de los
bordes.
3. Ahora pasamos a borrar con mayor detalle. Utilice la lupa
cuando lo crea necesario para ver mejor lo que hace. Establezca un tamao 10 para el pincel
con Borde 50 para borrar cerca del contorno del pjaro. Para los detalles ms precisos
cambie a tamao 5.
4. Haga clic en el icono de la mscara y arrastre por debajo de la imagen. Obtendr un objeto
separado de la imagen.
5. Si slo quiere guardar la mscara, borre la imagen del pjaro. Guarde con otro nombre
diferente, por ejemplo mascaragavilan.png.
CREACIN DE MENS EMERGENTES
Los mens emergentes son mens que aparecen en un navegador como respuesta al
movimiento del puntero (o en respuesta a la accin de hacer clic) sobre objetos web de
activacin como una divisin o zona interactiva. Los elementos de los mens emergentes
pueden incluir vnculos URL para la navegacin. Por ejemplo, puede utilizar los mens
emergentes para organizar diferentes opciones de navegacin que estn relacionadas
con un botn en una barra de navegacin. Puede crear submens en los mens
MACROMEDIA 8...

223

emergentes con el nmero de niveles que desee.

Cada elemento de un men emergente aparece como una celda HTML o de imagen, con
un estado Arriba, un estado Sobre y texto en ambos estados. Para ver una presentacin
preliminar de un men emergente en un navegador debe pulsar F12. Las vistas previas
del espacio de trabajo de Fireworks MX no muestran los mens emergentes.
ACERCA DEL EDITOR DE MENS EMERGENTES
El editor de mens emergentes es un cuadro de dilogo con fichas que le gua durante el
proceso de creacin de un men emergente. Contiene muchas opciones para controlar
las caractersticas de un men emergente y estn organizadas en cuatro fichas:
Contenido tiene opciones que determinan la estructura bsica del men, as como el
texto, vnculo URL y el valor de destino de cada elemento de men.
Aspecto contiene opciones que determinan el aspecto de cada celda de estado Arriba y
de estado Sobre del men, as como la orientacin vertical y horizontal del men.
Avanzado contiene opciones que determinan las dimensiones de celda, relleno y
espaciado; la anchura del borde de la celda y el color; la demora de men y el sangrado
del texto.
Posicin contiene opciones que determinan la ubicacin del men y del submen:
La opcin Men coloca el men emergente en relacin con la divisin. La opcin
Preestablecido lo incluye en la parte inferior, inferior derecha
superior y superior derecha de una divisin.
El ajuste Submen coloca el submen emergente en la parte derecha o inferior
derecha del men principal, o debajo del mismo.

MACROMEDIA 8...

224

En funcin del diseo del men emergente, es posible que no pueda utilizar todas las
fichas u opciones del Editor de mens emergentes. Puede modificar los ajustes en
cualquier ficha en todo momento, pero debe aadir al menos un elemento de men en la
ficha Contenido para crear un men que pueda ver en un navegador.
CREACIN DE UN MEN EMERGENTE BSICO
En la ficha Contenido del Editor de mens emergentes crear la estructura bsica y el
contenido del men emergente. Cuando crea un men se aplican los ajustes actuales o
predeterminados de las opciones del resto de las fichas del Editor de mens emergentes.
Para crear un men emergente sencillo:
1. Seleccione una zona interactiva o divisin que ser el rea de activacin del men
emergente.
2. Siga uno de estos procedimientos para abrir el Editor de mens emergentes:
Elija Modificar > Men emergente > Aadir men
emergente.
Haga clic en el tirador de comportamiento de la divisin y elija
Aadir men emergente.
3. Haga clic en la ficha Contenido.
MACROMEDIA 8...

225

4. Haga clic en el botn Aadir men para aadir un elemento vaco de men. Puede
aadir y eliminar celdas en cualquier momento.
5. Haga doble clic en cada celda e introduzca o elija la informacin adecuada:
Texto especifica el texto para el elemento de men.
Vnculo determina el valor URL del elemento de men. Puede introducir un
vnculo personal o elegir uno del men emergente Vnculo, si hubiera alguno disponible.
Si ha introducido valores URL para el resto de los objetos web del documento, dichos
valores URL aparecern en el men emergente Vnculo.
2. Destino designa el elemento destino del valor URL. Puede introducir un
elemento destino personal, o elegir un valor preestablecido en el men
emergente Destino.

Al aadir texto en la ltima lnea de la ventana se agrega automticamente una
lnea vaca debajo de la misma.
Sugerencia: para ir de una celda activa a otra celda y seguir introduciendo
informacin, pulse la tecla de tabulador para desplazarse por las distintas celdas
y las teclas Flecha arriba y abajo para desplazarse verticalmente.
1. en el botn Suprimir men.
Haga clic en Siguiente para ir hasta la ficha Aspecto o elija otra ficha para
continuar con la creacin del men emergente.
Cree entradas de submen para el men emergente.
Haga clic en Listo para finalizar el men emergente y cerrar el Editor de mens
emergentes.

En el espacio de trabajo, la zona interactiva o divisin utilizada para crear el men
emergente muestra una lnea azul de comportamiento unida a un contorno del nivel
superior del men emergente.
Nota: para ver el men emergente en un navegador debe pulsar F12. Las vistas previas
del espacio de trabajo de Fireworks no muestran los mens emergentes.

MACROMEDIA 8...

226

MACROMEDIA 8...

227

INDRUCCION
Desde hace mucho tiempo, el lenguaje HTML ha mostrado carencias importantsimas en
todos los aspectos. El HTML crea pginas web estticas, pginas en las que todo el
movimiento que podemos encontrar se debe a imgenes animadas (GIFS) o a vdeos
insertados en ellas... Este lenguaje, revolucionario en su da, demostr pronto que era
insuficiente en todos los campos. Pronto comenzaron a surgir alternativas:

El JavaScript naci con el objeto de crear acciones o programas cortos que se pudieran
insertar en la web para darle vida. El JavaScript, no es un lenguaje de programacin
propiamente dicho, pues slo crea "acciones" que se ejecutarn posteriormente en el
navegador que visualice la pgina, jams podremos crear un programa en JavaScript,
slo complementos para la web. Este lenguaje presenta varios inconvenientes, en primer
lugar, su ejecucin puede resultar peligrosa para la persona que accede a una web, por
lo que muchas personas optan por desactivar el "JavaScript" de sus navegadores. Si
nuestra pgina web contiene mucho cdigo JavaScript, simplemente, no lo vern. En
segundo lugar y como con casi todo, existen navegadores (cada vez menos, eso s) que
no lo soportan y sera intil intentar ejecutar un cdigo JavaScript si el navegador no lo
reconoce. Adems, el JavaScript no sirve para crear pginas web, tan slo las
complementa, por lo que su uso general suele estar enfocado a pequeas "ayudas" en la
interactividad de la web, como por ejemplo realizar comprobaciones en los formularios,
efectos en la barra de estado... ).

Debemos destacar adems, que Flash puede trabajar conjuntamente con JavaScript y
ejecutar cdigos y funciones JavaScript sin problemas, por lo que JavaScript se convierte
en una ayuda para todos los usuarios de Flash 8

Introduccin
Bienvenido a Macromedia Flash Basic8 y Macromedia FlashProfessional8. Flash le
proporciona todo lo necesario para crear y publicar complejas aplicaciones de grandes
prestaciones y contenido Web. Tanto si disea grficos con movimiento como si crea
aplicaciones gestionadas por datos, Flash tiene las herramientas precisas para producir
excelentes resultados y ofrecer al usuario la posibilidad de utilizar los productos en
distintas plataformas y dispositivos. Esta gua constituye una introduccin a Flash. El
tutorial de la misma le guiar por el proceso de creacin de una aplicacin Flash simple.
Este captulo contiene las siguientes secciones

MACROMEDIA 8...

228

MACROMEDIA FLASH

Mediante este programa podemos realizar animaciones y movemiento a un objeto
Como ingresar a magromedia flash

Es una herramienta de edecion que realiza animaciones simples hasta complehas
apliocaciones web interactivas . las aplicaciones de flash pueden inrequeserce
aadiendo imgenes ,sonido, y vedio.

FLASH BASIC Y FLASH PROFESSIONAL

FLASH BASIC 8

Es la herramienta perfecta para los diseadores de pginas Web, profesionales d medios
interactivos o personas especializadas que desarrollen contenido multimedia. Pone
nfasis en la creacin, importacin y manipulacin de distintos tipos de medios (audio,
vdeo, mapas d bits, vectores, texto y datos)

FLASH PROFESSIONAL 8

Macromedia ha concebido esta herramienta para los diseadores de pginas Web y los
creadores de aplicaciones avanzados. Flash Professional 8 incluye todas las funciones de
Flash Basic 8, as como varias herramientas nuevas de grandes prestaciones. Cuenta
adems con nuevas herramientas de expresividad para optimizar el aspecto y el estilo
de los archivos Flash que disee. Funciones tales como la creacin externa de scripts y la
gestin de datos dinmicos de bases de datos, entre otras, hacen que Flash Professional
8 sea muy til para proyectos complejos a gran escala que deban desarrollarse mediante
Flash Placer junto con una combinacin de contenido HTML.

COMO ENGRESAR A MACROMEDIA FLASH

1. Inicio/todos los programas/macromedia/macromedia flash

MACROMEDIA 8...

229

2. Acceso directo

3. Comando ejecutar windows +R

LA PANTALLAS DE BIENBENIDA

Lo primero que se m uestra al iniciar al programa es la ventana de bienvenida la que
contine las siguientes secciones :

1. En esta area se reguiostran todos los documentos recientes los ultimos utilizados
en flash.

2. En esta area se puede escoger el tipo de documento nuevo que quieras crear

3. En esta area podemos crear nuevos documentos a partir de muestras de
plantillas ya establecidas .

MACROMEDIA 8...

230

ENTORNO DE TRABAJO

Barra de herramienta

Paneles
Barra de titulo

Barra de men

Barra de propiedades
Escenario
MACROMEDIA 8...

231

LA BARRA DE MEN

Tiene como propsito facilitar el acceso a las distintas utilidades del programa entre
ellas tenemos archivo, edicin, ver, insertar, modificar, texto, comandos, control,
ventana, ayuda

ARCHIVO:

Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad
Importar que inserta en la pelcula actual casi todo tipo de archivos (sonidos, vdeo,
imgenes e incluso otras pelculas Flash), o la de Configuracin de Publicacin desde
donde se pueden modificar las caractersticas de la publicacin. Tambin permite
configurar la impresin de las pginas, imprimirlas...

EDICIN:

Es el clsico men que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como
fotogramas; tambin permite personalizar algunas de las opciones ms comunes del
programa.
VER:

Adems de los tpicos Zooms, te permite moverte por los fotogramas y por las escenas.
Tambin incluye la posibilidad de crear una cuadrcula y unas guas. Esto se puede
seleccionar desde los submens Cuadrcula y Guas desde donde tambin se pueden
configurar sus opciones.

INSERTAR:

Te permite insertar objetos en la pelcula, as como nuevos fotogramas, capas, acciones,
escenas...

MODIFICAR:

La opcin Transformar permite modificar los grficos existentes en la pelcula, y la
opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales (este tema se
tratar ms adelante). El resto de opciones permite modificar caractersticas de los
elementos de la animacin Suavizar, Optimizar o de la propia pelcula (Capa,
Escena...).

TEXTO:

Sus contenidos afectan a la edicin de texto. Ms adelante se tratar en profundidad.

Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animacin, y
por tanto, tambin todo aquello relativo a los textos. Sin embargo, Flash fue concebido
MACROMEDIA 8...

232

para crear animaciones grficas, de modo que tratar cualquier texto como si de un
objeto ms se tratase, listo para ser animado a nuestro gusto. Esto nos permitir
posteriormente animar textos y crear espectaculares animaciones con muy poco
esfuerzo. Flash distingue entre 3 tipos de texto, texto esttico o normal, texto dinmico y
texto de entrada (para que el usuario introduzca sus datos, por ejemplo), tambin 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.
Para saber ms acerca de Cmo escribir textos visita nuestra Pgina Avanzada

El Panel Propiedades contiene las principales propiedades de todos los objetos que
empleemos durante nuestra pelcula, 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 Carcter y Prrafo, se encuentran agrupadas ahora en el Panel Propiedades.

FUENTE:

Desde aqu, al igual que en los editores de texto ms comunes podemos seleccionar el
tipo de letra o "fuente" que ms nos guste

ALTURA:

Determina el espaciado entre los caracteres. til cuando la tipografa que empleamos
muestra las letras muy juntas o para dar efectos concretos al texto.
DIRECCIN DEL TEXTO:

Cambia la orientacin del texto de horizontal a vertical, tanto de izquierda a derecha
como de derecha a izquierda.

AJUSTE AUTOMTICO ENTRE CARACTERES:

Activar esta casilla provoca que la separacin entre caracteres se realice de modo
automtico.

MACROMEDIA 8...

233

POSICIN:

Nos permite convertir nuestro texto en subndices o en superndices (o dejarlo normal).

URL:

Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una direccin web, nada
ms fcil que escribirla ah. Flash la asociar al texto que ests 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 LNEA:

Si el texto que vamos a incluir es dinmico (de lo contrario aparece sin activar), esta
opcin nos permite determinar cmo queremos que aparezcan las lneas (lnea nica,
mult lnea o mult lnea sin ajuste).

CONFIGURACIN:

Son las clsicas opciones que permiten convertir el texto en Negrita (B), Cursiva (I),
cambiar el color del texto y el tamao.

OTRAS PROPIEDADES:

Dado que Flash trata los textos como objetos, stos tambin 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 tipografas son una parte muy
importante y deben respetarse.

Un Prrafo no es ms que un conjunto de caracteres con propiedades comunes a todos
ellos. Estos prrafos admiten ciertas opciones que nos permiten trabajar con bloques de
texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con
prrafos (entre otras).

A LA IZQUIERDA:

Todas las lneas empezarn tan a la izquierda como sea posible (dentro del recuadro de
texto que hayamos definido).
MACROMEDIA 8...

234

CENTRAR:

Las lneas se distribuyen a la derecha y a la izquierda del punto medio del Prrafo.

A LA DERECHA:

Todas las lneas empezarn 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 lmites.

El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los
sangrados de prrafo y el espacio interlineal.
TIPOS DE TEXTOS

Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un
tratamiento especial, segn 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 ms que haciendo clic sobre la pestaa Tipo de
texto:

TEXTO ESTATTICO

El Texto Esttico se caracteriza por no presentar ningn cambio a lo largo de la
animacin. Es importante que no confundamos la palabra "esttico" con que el
texto no se mueva o malinterpretemos la frase "es el texto que no presenta
cambios a lo largo de la animacin"

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 esttico.
As, un recuadro de texto en el que pone "Aprende Flash 8" durante toda la pelcula, es
esttico, aunque dicho texto cambie de posicin, forma o color. Sin embargo, si en ese
mismo recuadro de texto pasa a poner "Con este Curso", este recuadro de texto NO es
esttico. Se insistir en este punto en los ejercicios de evaluacin.
Los textos estticos slo tienen 2 propiedades extras:
MACROMEDIA 8...

235

Usar Fuentes del Dispositivo: Esta opcin permite que la pelcula Flash emplee las
Fuentes que tenga instaladas el usuario que ve la pelcula en su ordenador. Si dicho
usuario dispone de las fuentes que hemos utilizado en la pelcula, la ver exactamente
como queremos que la vea, pero si no las tiene, Flash emplear la fuente que ms se le
parezca. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se
parezca al que pretendamos, por lo que suele ser conveniente mantener esta opcin sin
seleccionar, aunque esto conlleve un mayor tamao de la pelcula final.

TEXTO DINMICO

El Texto Dinmico en contraposicin al esttico s que puede cambiar su contenido
(adems de estar animado). Su uso es bastante ms complejo que el del Texto Esttico,
ya que cada recuadro de texto Dinmico puede ser una variable modificable mediante
Action Script, esto quiere decir que los valores y propiedades de este tipo de textos se
pueden modificar mediante programacin, lo que nos saca del objetivo de este curso. Un
uso comn 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 nmero de lneas que van a tener, se puede introducir texto HTML, se puede aadir
fcilmente un borde al texto o dar nombre a la variable que represente al texto Dinmico

COMANDOS:

Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten
emular lo que un usuario pueda introducir en el entorno de edicin) que hayamos
almacenado en nuestra animacin, obtener otros nuevos de la pgina de Macromedia o
ejecutar los que ya tengamos.

CONTROL:

Desde aqu se modifican las propiedades de reproduccin de la pelcula. Reproducir,
Rebobinar, Probar Pelcula....

VENTANA:

Este men, adems de las opciones clsicas acerca de cmo distribuir las ventanas,
incluye accesos directos a TODOS los Paneles.

AYUDA:

MACROMEDIA 8...

236

Desde aqu podemos acceder a toda la ayuda que nos ofrece Macromedia, desde el
manual existente, hasta el diccionario de Accin Script, pasando por tutoriales, lecciones
guiadas etc...

LA LNEA DEL TIEMPO

La lnea del tiempo representa la sucesin de fotogramas en el tiempo. Es decir la
pelcula flash no ser nada ms que los fotogramas que aparecen en la lnea del tiempo
uno detrs de otro, en el orden que establece la misma lnea de tiempo

Costa de tres pastes

1. Los fotogramas contenidos en cada capa aparecern en una fila ala la derecha del
nombre de la capa y vienen delimitados por lneas verticales (formado
rectngulos)

2. El encabezado de la lnea del tiempo. situado en la parte superior de la lnea de
tiempo indica los nmeros de fotograma. La cabeza lectora indica fotograma
actual que se muestra en el escenario.

3. Los nmeros de fotogramas, permiten saber que numero tiene asignado cada
fotograma, cunto dura o cuando aparecer en la pelcula. Adems ,en la parte
inferior hay herramientas para trabajar con papel cebolla e informacin sobre el
nmero de fotograma actual , la velocidad de los fotogramas y tiempo de pelcula
transcurrido

El ESCENARIO

El escenario es la rea rectangular donde
se coloca el documento grfico que incluye
Papel cebolla
Contorno de
papel cebolla
Modificar marcadores de papel cebolla
Editar
barriosfotogra
Fotograma actual
Velocidad de fotograma
Tiempo de pelcula transcurrido
MACROMEDIA 8...

237

entre otros grficos vectoriales cuadros de textos botones, clips de video o imgenes de
mapas de bits importadas.

LAS CAPAS

Una capa se puede definir como una pelcula independiente de nico nivel. Es decir una
capa contiene su propia lnea de tiempo con infinitos fotogramas

Los objetos que estn en una determinada capa comparten fotogramas y por lo tanto
pueden mezclarse entre s. El uso de mltiples capas da lugar a pelculas ordenadas y
de fcil manejo.

Los controles de la seccin de las capas de lnea de tiempo permiten mostrar ocultar
bloquear desbloquear capas, as como mostrar el contenido de la capa como contornos

PANEL ALINEAMIENTO

Ahora que ya sabemos seleccionar los objetos
o las partes de estos que consideremos
oportunas, veamos cmo colocarlos en el
Escenario.
Para colocarlos de un modo preciso (por no decir
exacto), Flash pone a nuestra disposicin el Panel
Alinear. Este Panel lo podemos encontrar en el
Men Ventana / Alinear. As funciona:
El Panel Alinear permite colocar los objetos tal y cmo le indiquemos. Antes
de ver las posibilidades, debemos hacer hincapi en la opcin En
Escenario (En Es cenar). Esta opcin nos permite decir a Flash que todas
las posiciones que indiquemos para nuestros objetos tomen como
referencia el escenario

Si esta opcin no est seleccionada, los objetos toman como referencia al conjunto de
objetos en el que se encuentran, y se colocan en funcin de ellos. Lo ms habitual es
seleccionar En Escenario, para que los objetos se coloquen segn los lmites de la
pelcula, en el centro del fotograma etc...

Conozcamos un poco mejor el Panel Alinear y sus posibilidades:

MACROMEDIA 8...

238

ALINEAMIENTO:

Sita los objetos en una determinada posicin del fotograma (si est seleccionada 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 quisiramos situar un objeto en la esquina inferior izquierda, bastara pulsar
el primer y el sexto botn consecutivamente.

DISTRIBUIR:

Sita los objetos en el escenario en funcin de unos ejes imaginarios que pasan por cada
uno de ellos, de modo que la distribucin de los mismos sea uniforme. Por ejemplo, si
tenemos 2 cuadrados y pulsamos el primer botn de la izquierda. Cada uno de los 2
cuadrados se situar en un extremo de la pelcula (uno arriba y otro abajo).
COINCIDIR TAMAO:

Hace coincidir los tamaos de los objetos. Si est activo "En Escena" estirar los objetos
hasta que coincidan con el ancho y el largo de la pelcula. Si no est activo, la referencia
ser el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opcin "En
Escena" no est activada, al hacer clic en el primer botn de "Coincidir Tamao", el
cuadrado ms estrecho pasar a tener la anchura del cuadrado ms ancho. Si "En
Escena" hubiera estado activa ambos cuadrados hubieran pasado a tener el ancho del
fotograma.

ESPACIO:
Espacia los objetos de un modo uniforme

Panel mezclador de colores: en este panel creamos colores

Panel informacin: permite seleccionar un color de modo rpido y grafico

MACROMEDIA 8...

239

MACROMEDIA 8...

240

PANEL DE INFORMACION

Adems de controlar la posicin de los objetos desde el
Panel Alineamiento, tambin podemos hacerlo, de un
modo ms exacto (ms matemtico) desde otro panel, el
Panel Informacin.
A este Panel se puede acceder desde el Men Ventana /
Informacin. 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 nmero que represente el tamao de nuestro objeto en la
medida seleccionada en las Propiedades del documento. An: hace referencia a la
anchura y Al: a la altura.
SITUACIN DEL OBJETO:

Desde aqu controlamos la posicin 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 tambin
van en funcin de las medidas elegidas para la pelcula.

COLOR ACTUAL:

Indica el color actual en funcin de la cantidad de Rojo (R), Verde (V), Azul (A) y
efecto Alfa (Alfa) que contenga.
Este indicador puede ser engaoso, el motivo es que indica el color que tiene el objeto
por el que en ese momento pasamos el cursor del ratn. Por tanto, podemos tener
seleccionado un objeto (haciendo clic en l) y ver en el Panel Informacin su tamao y su
posicin, pero al desplazar el ratn, 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.

POSICIN DEL CURSOR:
Indica la posicin del cursor. Es til por si queremos que suceda algo en la pelcula al
pasar el cursor justo por una posicin determinada o para situar partes del objeto en
lugares especficos

MACROMEDIA 8...

241

PANEL ESCENA.

Modifica los atributos de la escena a utilizar.

PANEL TRASFORMAR. Permite ensanchar, girar y sesgar los objetos
seleccionados

PANEL ACCIONES. De gran ayuda para emplear. Action Script y asociar acciones
a nuestra pelcula.

Panel comportamiento. Permite asignara determinados objetos una serie de
comportamientos que despus puedan almacenarse a otros objetos de forma
rpida y eficaz.

MACROMEDIA 8...

242

Panel componentes. Nos permite acceder a los componentes ya construidos y
listos para ser usados que nos proporciona flash.

Panel respuestas. Macromedia pone disposicin ayuda y consejos accesibles
desde este panel.

MACROMEDIA 8...

243

Panel propiedades. Es el ms usado y ms importante nos muestra la propiedad
del objeto seleccionado, color de borde, de fondo, tipo de trazo, tamao de
caracteres, propiedades de objetos coordenadas, tamao etc.

Panel explorador de pelculas. Nos permite acceder a todo contenido de
nuestra pelcula de forma fcil y rpida.

rea de trabajo

Ttulo y descripcin
MACROMEDIA 8...

244

Aade datos a tus archivos

DIMENSIONES

Determina el tao de la pelcula siendo el mnimo 1x1 pixeles y el mximo de 2880 por
2880

Coincidir

Provoca que en el tamao de la pelcula censida con el botn seleccionado

COLOR DE FONDO

Que el color selecciona ser el color de fondo ser de toda la pelcula
Velocidad de fotograma

Pero nmero de fotograma x segundo que aparecer en la pelcula

Unidades de regla

Unidades que se empleara para medir las cantidades puede ser en pixeles
centmetro, etc.

PARA CAMBIAR LA PROPIEDADESDE UN DOCUMENTO CON EL PANEL DE
PROPIEDADES

1. diseccionamos todos los elementos y seleccionamos la herramienta seleccin
MACROMEDIA 8...

245

2. en caso el panel de propiedades no este abierto vamos al men
ventana/propiedades

3. hacemos clic en el botn de control de tamao (550x400pixeles) para abrir el
cuadro de dialogo propiedades del documento y acceder a la configuracin
correspondiente.

4. Para seleccionar un color de fondo hacemos clic en el triangulo del cuadro de
fondo y seleccionamos un color de la paleta.
5. En la seleccin velocidad de fotograma introducimos el nmero de fotograma de
animacin que deben mostrarse cada segundo.

6. Para publicar, hacemos clic en el botn de configuracin para mostrar el cuadro
de dialogo configuracin de publicacin con la ficha flash seleccionada.

CREACIN DE UN DOCUMENTO NUEVO
1. Ir al men archivo/nuevo/el la ficha general selecciona documento de flash

2. Clic derecho/nuevo

3. Con los teclados control +N
GUARDAR UN DOCUMENTO DE FLASH

MACROMEDIA 8...

246

Para sobrescribir la versin actual existente en el disco, seleccionamos
archivo/guardar

Para guardar el documento es una distinta con otro nombre o para comprimir
el documento, seleccionamos Archivo/guardar como

2. Si seleccionamos el comando guardar como o si el documento no se ha guardado
nunca introducimos el nombre y la ubicacin del archivo.
3. Hacemos clic en guardar

PARA CREAR UN CAPA
Hacemos clic en el botn insertar capas
situado en la parte inferior de la lnea del
tiempo

Vamos al men insertar/lnea de tiempo/capa

Hacemos clic con el botn derecho del mouse en el nombre de la capa de la lnea
de tiempo y elijemos la opcin insertar capa

Recuerda que:
Al cerrar y guardar el documento de Macromedia flash
profesional 8 en el entorno de edicin
De flash los formatos tienen el formato de archivo FLA para
mostrar el documento en Macromedia flash player se debe
publicar o exportar el documento como archivo SWF

MACROMEDIA 8...

247

INSERTAR CAPAS
:
Como su nombre indica, sirve para Insertar capas en la escena actual.
Inserta capas normales (en el siguiente punto se vern los distintos
tipos de capas).
AADIR CAPA GUA
: Inserta una capa de tipo gua. Se tratan en profundidad el
siguiente punto.

BORRAR CAPA
: Borra la capa seleccionada.
Bloquea capa
Muestra
/oculta
Insertar capas

Gua de movimiento

Carpeta de capas

Muestra /oculta
todas las capas
eliminar

Nombre de la capa

Bloquea una capa

Muestra el contenido
MACROMEDIA 8...

248

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 ms de menor importancia.

CAPAS GUIAS

Se utilizan para orientar el movimiento de un objeto atraes de un trayecto o camino
estas a su bes contendrn trayectos de diversas formas y pueden estar elaborado en el
mismo o otra capa aplicacin

Las capas guas solo sern aplicados objetos animado con interpolacin de movimiento
mas no aquellos que esta con interpolacin de forma

Aadir capa gua de movimiento /con la herramienta lpiz dibujo el trayecto o
camino

MACROMEDIA 8...

249

UTILIZACIONDE LA HERRAMIENTAAS DE DISEO
BARRA DE HERRAMIENTAS
HERRAMIENTA LINEA

Mtodo abreviado de teclado: N (Para Windows y Macintosh).La herramienta Lnea se
utiliza para dibujar lneas rectas entre dos puntos del escenario. Simplemente tenemos
que seleccionar la herramienta, hacer clic sobre el punto inicial de la recta y, sin soltar el
botn del ratn, arrastrarlo hasta el punto final. La herramienta disponed las siguientes
opciones:

MACROMEDIA 8...

250

Dibujo de objetos:

Esta opcin, nos permite crear Dibujos de objetos Directamente sobre el escenario
(su mtodo abreviado de tecla es J).

Ajustar a objetos:

De un modo similar a cmo ocurra con la herramienta
Flecha, en este caso esta opcin procura ajustar el punto final
de la lnea a los objetos que ya existen sobre el escenario, en
funcin de la distancia que exista a ellos cuando soltemos el
botn del ratn. El inspector de propiedades ofrece ms
opciones de la herramienta Lnea, como muestra la figura,
Estas opciones son, en realidad, las del color de trazo que
aplica la herramienta Lnea, y sirven para:

Color de trazo:

Establece el color o degradado del trazo. Es equivalente a la
opcin correspondiente de la seccin Color Del panel de
herramientas. Altura del trazo:
Establece el grosor del trazo, que puede variar entre .25 y
200, siendo el ltimo el ms grueso.

Estilo del trazo:
Esta opcin ofrece varios estilos predefinidos que podemos
aplicar al trazo. A continuacin se incluye una lista de estos
estilos:

Fino:
Estos trazos mantienen siempre un grosor de un pxel,
independientemente de cunto se modifique su escala. Es el
nico estilo que no se ve afectado por los cambios de escala.

Slido:

Es el estilo de trazo predeterminado, y ofrece como opciones
para el color, el grosor y la unin entre trazos.

Discontinuo:

Este estilo crea trazos compuestos por rayas. Permite modificar
la longitud de las rayas y de los espacios entre ellas pulsando el
botn
Personalizado.
Por su puesto, tambin pueden modificarse su color, grosor y
estilo de unin.
MACROMEDIA 8...

251

De puntos:

Este estilo crea trazos con puntos equidistantes. Adems de los atributos generales de
cualquier trazo, en este caso tambin podemos configurarla distancia entre los puntos.

Dentado:

Este estilo crea trazos irregulares mediante lneas ondulados y pequeos puntos.
Podemos configurar el patrn, la altura y la longitud de las zonas.

Punteado:

Este estilo crea trazos similares a los que obtendran con un bolgrafo. Estn compuestos
por diminutivos puntos que pueden ser configurados en tamao, variacin y densidad.

Con sombra:

Este estilo crea trazos compuestos por pequeas lneas que procuran emular un efecto
de sombra. En este caso podemos configurar el grosor(que no es lo mismo que la altura
del trazo), el espacio, el vaivn, el giro, la curvatura, adems de las opciones normales.

Personalizado:

Este botn nos permite crear nuestros propios estilos de trazado mediante el cuadro de
dilogo que muestra la figura.

Extremo:

Esta opcin controla la forma del final de la lnea. Podemos elegir entre
Ninguno para que la lnea termine en seco en el punto final, o Redondeado o
Cuadrado para ampliarla longitud del trazo ms all del punto final.

Sugerencias de trazo:

Al activar esta casilla, se introducen sutiles modificaciones en los puntos de curvatura y
anclaje de la lnea para evitar que aparezca borrosa.

Escala:

Esta opcin controla el comportamiento del trazo frente a cambios de escala. Poselas
siguientes opciones:

Normal:

Siempre modifica el grosor de la lnea. Es la opcin predeterminada.

Ninguna:

Nunca modifica el grosor de la lnea

Vertical:
MACROMEDIA 8...

252

No modifica el grosor de la lnea cuando slo se altera su escala vertical.
Horizontal:

No escala el grosor de la lnea cuando se altera su escala horizontal

TRABAJO CON OBJETOS

Podremos considerar un objeto todo aquello que aparezca en nuestra pelcula y sea
visible, de modo que podamos trabajar con l, un objeto sera, por ejemplo, cualquier
imagen que creemos o importemos, un botn, un dibujo creado por nosotros mismos.
Los objetos as considerados tienen 2 partes fundamentales:

El Borde: Consiste en una delgada lnea que separa el objeto del exterior del
escenario. Puede existir o no, segn 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 Herramientas Lpiz, Lnea 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 ms que el propio objeto sin borde. Es, por tanto, la
parte interna del objeto. Su existencia tambin es arbitraria, ya que podemos
crear un objeto cuyo color de relleno sea transparente, 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.

Figura 4. Ejemplo de un cuadrado con relleno y borde

SELECCIONAR OBJETOS
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
estn seleccionadas.
Figura 5.Objeto SIN selecciona

RELLENO
BORDE
MACROMEDIA 8...

253

Figura 6. Objeto con el BORDE seleccionado

Figura 7. Objeto con el RELLENO seleccionado

Veamos cmo 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 lneas) de un mismo color que estn en
contacto: Hacer doble clic sobre una de las lneas que tenga el color que
pretendamos seleccionar.
Seleccionar un Smbolo, un texto, o un grupo: Clic en el Smbolo, en el texto o
en el grupo. Estos tipos de objetos mostrarn 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 Seleccin (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 algn objeto, slo quedar
seleccionada la parte del objeto que est dentro del rea que hemos delimitado.
Si quisiramos incluir dicho objeto, bastara con usar la tecla SHIFT y seleccionar
la parte del objeto que falta por seleccionar. Este modo de seleccionar
Objetos permite seleccionar muchos objetos rpidamente, adems de
permitirnos seleccionar determinadas zonas de los objetos, para cortarlas,
pegarlas...Adems de la Herramienta Flecha, tambin podemos usar la
Herramienta
Lazo, ms til an 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 rectangulares.
Seleccionar a partir de la Lnea de Tiempo: Si seleccionamos un determinado
fotograma en la lnea de tiempo, se seleccionan automticamente todos los
objetos que estn en

Dicho fotograma. Esto es til para modificar de un modo rpido todos los elementos del
fotograma.
MACROMEDIA 8...

254

Seleccionar Todo: La forma ms natural de seleccionar todo, consiste en hacer clic en el
men Edicin Seleccionar Todo.
Para modificar un objeto, primero debe seleccionarlo. Flash proporciona diferentes
mtodos de seleccin, entre ellos las herramientas Seleccin y Lazo, y los comandos de
teclado. Puede agrupar objetos individuales para manipularlos como un nico objeto.
Flash resalta los objetos y los trazos que se han seleccionado con un recuadro de
delimitacin. Los grupos seleccionados se resaltan con recuadros de delimitacin cuyos
colores utiliza para el contorno de la capa que contiene el grupo seleccionado. Puede
cambiar el color del contorno de la capa en el cuadro de dilogo Propiedades de capa.
Puede optar por seleccionar nicamente los trazos de un objeto o sus rellenos. Se puede
ocultar el resaltado de la seleccin para poder editar los objetos sin tener que visualizar
dicho resaltado. Al seleccionar un objeto, el inspector de propiedades visualiza el trazo y
el relleno de dicho objeto, sus dimensiones en pxeles y las coordenadas x e y
Del punto de transformacin. Si se seleccionan varios elementos de diferentes tipos en el
escenario, como por ejemplo un objeto, un botn y un clip de pelcula, el inspector de
propiedades indicar una seleccin mixta. En este caso, el inspector de propiedades
visualiza las dimensiones en pxeles y las coordenadas x e y
Del conjunto de elementos seleccionado. El inspector de propiedades se puede utilizar
en una forma para cambiar el trazo y el relleno de un objeto. Puede evitar que se
seleccione y se cambie accidentalmente un grupo o smbolo. Para ello, puede bloquear el
grupo o smbolo.

Dicho fotograma. Esto es til para modificar de un modo rpido todos los elementos del
fotograma.
Seleccionar Todo: La forma ms natural de seleccionar todo, consiste en hacer clic en el
men Edicin Seleccionar Todo.
Para modificar un objeto, primero debe seleccionarlo. Flash proporciona diferentes
mtodos de seleccin, entre ellos las herramientas Seleccin y Lazo, y los comandos de
teclado. Puede agrupar objetos individuales para manipularlos como un nico objeto.
Flash resalta los objetos y los trazos que se han seleccionado con un recuadro de
delimitacin. Los grupos seleccionados se resaltan con recuadros de delimitacin cuyo
color se utiliza para el contorno de la capa que contiene el grupo seleccionado. Puede
cambiar el color del contorno de la capa en el cuadro de dilogo Propiedades de capa.
Puede optar por seleccionar nicamente los trazos de un objeto o sus rellenos. Se puede
ocultar el resaltado de la seleccin para poder editar los objetos sin tener que visualizar
dicho resaltado. Al seleccionar un objeto, el inspector de propiedades visualiza el trazo y
el relleno de dicho objeto, sus dimensiones en pxeles y las coordenadas x e y
Del punto de transformacin. Si se seleccionan varios elementos de diferentes tipos en el
escenario, como por ejemplo un objeto, un botn y un clip de pelcula, el inspector de
propiedades indicar una seleccin mixta. En este caso, el inspector de propiedades
visualiza las dimensiones en pxeles y las coordenadas x e y
Del conjunto de elementos seleccionado. El inspector de propiedades se puede utilizar
en una forma para cambiar el trazo y el relleno de un objeto. Puede evitar que se
seleccione y se cambie accidentalmente un grupo o smbolo. Para ello, puede bloquear el
grupo o smbolo.

MACROMEDIA 8...

255

SELECCIN DE OBJETOS CON LA HERRAMIENTASELECCIN

La herramienta Seleccin permite seleccionar objetos enteros haciendo clic en un objeto
arrastrndolo para incluirlo dentro de un recuadro de delimitacin rectangular.
Para seleccionar un trazo, relleno, grupo, instancia o bloque de texto:
Seleccione la herramienta Seleccin y haga clic en el objeto.
Para seleccionar lneas conectadas:
Seleccione la herramienta Seleccin y haga doble clic en una de las lneas.
Para seleccionar una forma rellena y su contorno con trazo:

Seleccione la herramienta Seleccin y haga doble clic en el relleno.
Para seleccionar objetos dentro de un rea rectangular:
Seleccione la herramienta Seleccin y arrastre un recuadro de delimitacin alrededor
del objeto u objetos que desea seleccionar. Para seleccionar instancias, grupos y bloques
de tipos, stos deben quedar totalmente encerrados en el recuadro.

SELECCIN DE OBJETOS CON LA HERRAMIENTA LAZO

Puede utilizar la herramienta Lazo y el modificador Modo polgono para seleccionar
objetos dibujando un rea de seleccin de mano alzada o de bordes rectos. Cuando
sutiliza la herramienta Lazo, se puede cambiar del modo de seleccin de estilo libre
amoldo de seleccin de bordes rectos.
Para seleccionar objetos con el rea de seleccin trazada a mano alzada:
1. Seleccione la herramienta Lazo y arrstrela alrededor del rea.2. Finalice la
reproduccin indefinida ms o menos donde la inici, o permita que Flash la
cierre de forma automtica con una lnea recta.
Para seleccionar objetos con un rea de seleccin de bordes rectos:

2. Seleccione la herramienta Lazo y, en las opciones del panel Herramientas,
seleccione el modificador Modo Polgono.2. Haga clic para establecer el punto de
inicio.3. Site el puntero donde desee finalizar la primera lnea y haga clic.
Contine y establezca puntos finales para otros segmentos de lnea adicionales.4.
Para cerrar el rea de seleccin, haga doble clic.Para seleccionar objetos
mediante reas de seleccin a mano alzada y de bordes rectos:
3. Seleccione la herramienta Lazo y anule la seleccin del modificador
ModoPolgono.2. Para dibujar un segmento a mano alzada, arrastre la
herramienta Lazo por elescenario.3. Para dibujar un segmento de bordes rectos,
mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) mientras hace
clic para establecer los puntos inicial y final. Se puede cambiar de dibujo de
segmentos a mano alzada a segmentos de bordes rectos.4. Para cerrar el rea de
seleccin, siga uno de estos procedimientos: O Si dibuja un segmento a mano
alzada, suelte el botn del ratn. O Si dibuja un segmento de bordes rectos, haga
doble clic.

MACROMEDIA 8...

256

HERRAMIENTA VALO

Mtodo abreviado de teclado: O (para Windows y Macintosh).La herramienta valo sirve para
dibujar formas circulares, esta herramienta ofrece dos opciones: la primera es Dibujo de objeto,
que se explicara ms adelante. La otra opcin es ajustar a objetos, que, cuando est activada, nos
permite dibujar crculos perfectos si arrastramos el ratn diagonalmente. Tambin podemos
obtener el mismo resultado manteniendo pulsada la tecla Mayus mientras arrastramos el ratn.
Flash 8 ofrece un mtodo nuevo para crear valos sobre el escenario. Simplemente tenemos que
mantener pulsada la tecla Alt y hacer clic sobre el escenario para acceder al cuadro de dialogo
configuracin de valo, que muestra la figura. En este cuadro de dialogo podemos establecer la
anchura, y si queremos dibujar desde el centro o desde un esquina.

HERRAMIENTA RECTANGULO

Mtodo abreviado de teclado: R (para Windows y Macintosh)La herramienta Rectngulo sirve
para dibujar formas rectangulares. Esta herramienta dispone de tres opciones; la primera de
ellas es Dibujo de objeto. La segunda opcin es
Ajustar a objetos
, que cuando esta seleccionada, nos permite dibujar cuadrados perfectos al arrastrar el ratn
diagonalmente. Una vez ms, podemos obtener el mismo resultado manteniendo pulsada la tecla
Mayus mientras dibujamos el rectngulo. La tercera opcin es
Establecer radio de esquina
. Al activar esta opcin (o al hacer clic sobre la herramienta rectngulo en el panel de
herramientas), aparece el cuadro de dialogo configuracin de rectngulo, que nos permite
establecer el radio de curvatura de los vrtices del rectngulo entre 0 y 999.Al igual que ocurre
con la herramienta valo, ahora podemos dibujar rectngulos sobre el escenario sin tener que
arrastrar el ratn. Basta con mantener pulsada la tecla Alt mientras hacemos clic sobre el
escenario para que aparezca el cuadro de dialogo configuracin de rectngulo que muestra la
figura, en el podemos establecer la anchura, altura, el radio de esquina y si queremos que el
punto sobre el que hemos hecho clic sea el centro o el vrtice superior izquierdo del rectngulo.

MACROMEDIA 8...

257

HERRAMIENTA POLYSTAR

La herramienta PolyStar sirve para dibujar polgonos regulares de varios lados o estrellas de
varias puntas. Para activar esta herramienta, haga clic y mantenga el ratn pulsado sobre la
herramienta Rectngulo en el panel de herramientas. No existe un mtodo abreviado de teclado
para esta herramienta ni en Windows ni en Macintosh. La herramienta PolyStar posee las
mismas opciones que las herramientas rectngulo y valo:
Dibujo de objeto y Ajustar a objetos
. Al hacer clic sobre l aparecer el cuadro de dialogo
Configuracin de herramientas
, en el que puede elegir entre crear un polgono o una estrella, el numero de lados (o puntas en
caso de estrella) y el tamao de puntos de estrella (que solo afecta a estrellas, y que controla la
angulosidad de las puntas.)

HERRAMIENTA LPIZ

Mtodo abreviado de teclado: Y (para Windows y Macintosh).La herramienta Lpiz sirve
para dibujar lneas, pero a diferencia de la herramienta Lnea que diferencia lneas de
punto a punto, la herramienta Lpiz funciona de un modo ms similar aun lpiz real.
Ofrece varias opciones que facilitan el dibujo, adems de la opcin dibujo de objeto, que
est disponible en todas las herramientas de dibujo. A continuacin se incluye una lista
de estas opciones y de su funcionamiento:

MACROMEDIA 8...

258

Enderezar:

Es la opcin predeterminada para la herramienta lpiz, y nos ayuda a dibujar
formas perfectas, como tringulos y rectngulos. Podemos configurar su
precisin para reconocer formas y su suavidad en el cuadro de dialogo
preferencias.

Suavizar:

Esta opcin procura suavizar los bordes abruptos de la lnea dibujada.

Tinta:

Esta opcin intenta emular con la mayor precisin posible el comportamiento de
un lpiz real, sin modificar artificiosamente la lnea que dibujemos.

HERRAMIENTA PLUMA

Mtodo abreviado para teclado: P (para Windows y Macintosh).La herramienta Pluma se
utiliza tanto para dibujar lneas rectas como curvadas. Existen bastantes diferencias
entre la utilizacin de esta herramienta y la herramienta Lnea. En este caso al ir
haciendo clic sobre diversos puntos se van creando segmentos que se unen apunto
anterior. Y para crear segmentos curvos tenemos que hacer clic y arrastrar el ratn
definiendo la curvatura. Aunque esta herramienta solo ofrece una opcin (Dibujo de
objeto), dispone de varios parmetros configurables en la seccin Dibujo del cuadro de
dialogo Preferencias
, al que se accede seleccionando Edicin>Preferencias (Control-U).

Mostrar vista previa de la pluma:

Cuando est activada, esta opcin muestra una pre visualizacin de la forma del
trazo a medida que lo dibujamos, basndose en la posicin del ratn.

Mostrar puntos slidos:

Al activar esta opcin los puntos de anclaje se muestran al revs de lo normal; es
decir, los que estn seleccionados se muestran huecos, y los seleccionados se
muestran rellenos.

Mostrar cursores de precisin:

Al activar esta opcin se muestra un cursor conformas de cruz en lugar de la
forma de la pluma. Tambin puede alternar entre estas dos formas de puntero
pulsando la tecla Bloq Mayus

MACROMEDIA 8...

259

.Adems, una vez dibujada una forma o lnea con esta herramienta, podemos recurrir a
la herramienta Sabeleccin para controlar las curvaturas mediante los puntos de anclaje.
Si necesitsemos ms de estos puntos, podramos crearlos con la herramienta Pluma. En
este caso deberamos prestar atencin a los diferentes iconos que aparecen junto al
puntero cuando intentamos afinar los puntos de anclaje. A continuacin se recogen todo
esto siconos y su significado

-: Indica que el puntero de anclaje se puede eliminar haciendo clic sobre l.
+: Indica que se puede crear un punto de anclaje en esa posicin de la lnea
haciendo clic.
^: Indica que el punto de anclaje curvado puede convertirse en anguloso.
o: Este icono aparece cuando nos colocamos sobre el puntero inicial de la lnea
que estamos dibujando, indicando que se hacemos clic en ese momento, la lnea
se cerrar.
x: Aparece cuando no hay ninguna lnea que editar. Una flecha con un
cuadro hueco: Se muestra cuando tenemos pulsada la tecla Mayus y el puntero
se encuentra sobre una lnea.
Una flecha con un cuadro relleno: Se muestra cuando tenemos pulsada la tecla
Mayus y el puntero se encuentra sobre un punto de anclaje.

HERRAMIENTA SUBSELECCIN

Mtodo abreviado de teclado: A (Para Windows y Macintosh).Esta herramienta es
similar a la anterior, excepto porque est especialmente diseada para seleccionar
puntos vectoriales. A diferencia de la herramienta Seleccin, la herramienta Sub
seleccin no posee opciones.

HERRAMIENTA CUBO DE PINTURA

Mtodo abreviado de teclado: K (para Windows y Macintosh).La herramienta Cubo de
pintura se utiliza para cambiar la configuracin de los rellenos delas formas que hemos
creado sobre el escenario. Solo tenemos que seleccionar el color o degradado que
queremos aplicar y hacer clic sobre una forma par aplicrselo. La herramienta Cubo de
pintura nos ofrece un par de opciones:
Tamao de hueco:
Esta opcin posee un men desplegable que nos permite elegir el tamao mximo de
hueco que puede existir en una forma cuyo contorno no est cerrado para que la
herramienta actu sobre ella.
Bloquear relleno:
Esta opcin nos ayuda a conseguir que los rellenos compartidos por varios objetos sean
ms coherentes.

MACROMEDIA 8...

260

HERRAMIENTA TRANSFORMACIN DE RELLENO

Mtodo abreviado de teclado: F (Para Windows y Macintosh).La herramienta
Transformacin de relleno sirve para ajustar los degradados y los rellenos con imgenes
de tipo mapa de bits que se utilizan en las formas del escenario. Dependiendo del tipo de
relleno que tenga aplicado el objeto que seleccionemos en el escenario, los manejadores
que aparecern sern diferentes. Estos manejadores sirven para controlar el punto
central, el tamao y el giro del degradado, como puede ver en la figura. Esta herramienta
dispone de una nica opcin,
Ajustar a objetos,
que al activarse procura que los manejadores de control arrastrados se ajusten a las
posiciones de otros objeto.

HERRAMIENTA TEXTO

Mtodo abreviado de teclado: T (para Windows y Macintosh).Esta herramienta sirve
para crear manualmente cuadros de texto sobre el escenario. Para crear un cuadro de
texto tenemos que hacer clic aproximadamente en la posicin en la que nos interesa que
se encuentre su vrtice superior izquierdo y, sin soltar el botn del ratn, arrastrarlo
diagonalmente hacia abajo y a la derecha. Una vez creado el cuadro de texto, podemos
introducir texto manualmente en l y aplicar algunas opciones bsicas de estilo, como
color, negrita o cursiva, que estn disponibles en el Inspector de Propiedades. Existentes
tipos bsicos de cuadro de texto:

Texto esttico: El contenido de estos campos de texto slo se puede modificar
entiempo de edicin.
Texto dinmico: El contenido de estos campos de texto se puede modificar
tanteen tiempo de edicin como en tiempo de ejecucin, utilizando las
propiedades Texto ovar.
Introduccin de texto: El contenido de estos campos de texto, al igual que el
delos dinmicos, se puede modificar tanto en tiempo de edicin como en tiempo
de ejecucin. Pero adems, el usuario tambin puede introducir texto en ellos
entiempo de ejecucin.

HERRAMIENTAS DE DIBUJO (II)

HERRAMIENTA BOTE DE TINTA

Mtodo abreviado de teclado: S (para Windows y Macintosh).La herramienta Bote de
tinta est diseada para ayudarnos a modificar los segmentos delinea dibujados en el
escenario, y ms concretamente sus opciones de trazo. A pesar de que no ofrece ninguna
opcin en la seccin Opciones, s podemos configurarla a travs del Inspector de
MACROMEDIA 8...

261

propiedades. Una vez establecida la configuracin, podemos aplicrsela a distintos
segmentos haciendo clic sobre ellos.

HERRAMIENTA PINCEL

Mtodo abreviado de teclado: B (para Windows y Macintosh) La herramienta Pincel
sirve para pintar el escenario, como si fuera una brocha. A diferenciada la herramienta
Lpiz, las opciones de color de la herramienta Pincel se controlan a travs de los ajustes
del relleno. Tambin ofrece algunas opciones que modifican su comportamiento, adems
de la omnipresente opcin de Dibujo de Objeto. La primera de estas opciones es Mtodo
por Pincel, que dispone de las siguientes posibilidades:
Pintar normal: Es la opcin por defecto, y nos permite rellenar con el pincel
cualquier zona del escenario.

Rellenos de pintura: Esta opcin es similar a la anterior, pero no afecta a las
lneas de trazo.

Pintar detrs: Esta opcin pinta por detrs de los elementos y objetos que ya se
encuentran en el escenario, es decir, no los solapa.

Pintar seleccin: Esta opcin nos permite pintar el relleno slo de las zonas que
estn seleccionadas

Pintar dentro: Esta opcin slo afecta al relleno del objeto sobre el que
empecemos a utilizar la herramienta. Por ejemplo, si empezamos a pintar dentro
del rectngulo, slo podremos cambiar el relleno de ese rectngulo; no obstante,
si empezamos a pintar fuera del rectngulo, no afectar nunca al relleno de ste.

La ltima opcin de la herramienta Pincel es Bloquear relleno. Cuando est activada esta
opcin logramos que los rellenos de degradados o con imgenes de mapas de bits sean
ms coherentes cuando afecten a varios elementos.

HERRAMIENTA CUENTAGOTAS

Mtodo abreviado para teclado: I (para Windows y Macintosh).La herramienta
Cuentagotas sirve para capturar las propiedades de trazos y rellenos. Cuando
coloquemos el puntero sobre una lnea o relleno, aparecer un icono junto al puntero
para indicar sobre qu tipo de elemento estamos actuando. Al hacer clic sobre un
elemento, se activa automticamente la herramienta Cubo de pintura (si se trataba de un
relleno) o Bote de tinta (si se trataba de un trazo), para que podamos aplicar fcilmente
esas mismas propiedades a otros elementos del escritorio.

MACROMEDIA 8...

262

HERRAMIENTA BORRADOR

Mtodo abreviado de teclado: E (para Windows y para Macintosh).La herramienta
borrador sirve para borrar trazos y rellenos. Adems, de los mens despegables de
tamao y forma ofrece otras opciones.
Borrador normal: Opcin predeterminada que afecta a trazos y rellenos.
Borrador relleno: Al borrar con esta opcin, no afectamos a los trazos, solo a los
rellenos.
Borrar lneas: Es justo la opcin contraria a la anterior; esta opcin afecta a los
trazos pero no a los rellenos.
Borrar rellenos seleccionados: Esta opcin afecta solo a las zonas de relleno
que estn seleccionadas.
Borrar dentro: Esta opcin solo borra el relleno de la forma sobre la que
empezamos a utilizarla.
La ltima opcin de borrador es Grifo. Esta opcin convierte el borrador en una
herramienta de un solo clic, solo tenemos que hacer clic sobre un trazo o relleno para
deshacernos de l.

HERRAMIENTA MANO

Mtodo abreviado de teclado: H (para Windows y para Macintosh).Utilice la herramienta
Mano para arrastrar el escenario de modo que se visualicen ciertas zonas que
previamente pudieran estar ocultas por el elevado nivel de ampliacin. Adems, si
mantiene pulsada la tecla Mayus mientras utiliza esta herramienta, el escenario solo
podr arrastrarse en direcciones que sean mltiplos de 45 grados respecto a la
horizontal

HERRAMIENTA ZOOM

Mtodo abreviado de teclado: Zoom (para Windows y para Macintosh).Le herramienta
Zoom controla el nivel de ampliacin con el que se visualiza el escenario. Esta
herramienta es muy til cuando necesitamos crear dibujos muy detallados. Posee dos
opciones en la seleccin Opciones. Estas opciones determinan si el nivel de ampliacin
se aumenta o, si por el contrario, se reduce, al hacer clic sobre el escenario. Adems de
simplemente hacer clic sobre el escenario para modificar el nivel de ampliacin, tambin
podemos hacer clic y arrastrar el ratn para definir una seccin concreta del escenario
que nos interese ampliar. Como ocurre con muchas otras herramientas de Flash, hay
ms de una manera de controlarle nivel de ampliacin del escenario. A continuacin se
incluyen algunas combinaciones de teclas que pueden resultar de utilidad.

Control/-: Reducir el nivel de ampliacin.
Control/+: Ampliar el nivel de ampliacin.
Control/1: Establecer el nivel de ampliacin a tamao real (100 por cien).
MACROMEDIA 8...

263

Control/2: Establecer el nivel mximo de ampliacin que permita mostrar todo
el escenario centrado.
Control/4: Ampliar el 400 por cien.
Control /8: Ampliar al 800 por cien.

HERRAMIENTA LAZO

Mtodo abreviado de teclado: L (para Windows y para Macintosh).La herramienta Lazo
es otra herramienta de seleccin que ofrece mayor precisin que la herramienta
seleccin. Simplemente tenemos que activarla y dibujar una forma que inclyalos
elementos que queremos seleccionar; asegrese de cerrar esta forma antes de soltar el
botn del ratn para evitar selecciones extraas. Esta herramienta ofrece varias
opciones que pueden ayudar a realizar selecciones concretas, siendo la primera de ellas
Varita mgica. La opcin Varita mgica selecciona zonas cuyo color esta dentro de un
margen de tolerancia. Para establecer esta tolerancia tenemos que hacer clic sobre la
opcin propiedades de varita mgica (que esta junto a ella en la seccin opciones), que
nos conducir al cuadro de dialogo. En el podemos configurar tambin el suavizado
eligiendo entre las siguientes opciones:

Pxeles: La seleccin incluir pxeles completos cuyos colores estn dentro de la
tolerancia.
spero: Los bordes de la seleccin resultaran ms dentados que con la opcin
pxeles.
Normal: Los bordes de la seleccin tendrn una suavidad intermedia entre la
opcin pxeles y la opcin suave.
Suave: Esta opcin redondea los bordes de la seleccin. La ltima opcin de la
herramienta Lazo es Modo polgono

. Esta opcin nos permite crear el contorno de seleccin dibujando segmentos rectos con
solo hacer clic sobre los puntos delos extremos

FOTOGRAMAS

Fotogramas
clave vaco

Fotogramas
claves con
contenido
MACROMEDIA 8...

264

Un fotograma es que define cambios en la animacin los fotogramas se muestran en
lnea de tiempo

Fotograma clave es un fotograma con relleno contenido
Fotogramas vaco

INSERTAR FOTOGRAMAS

En la lnea del tiempo

Insertar fotogramas
En la lnea del tiempo

F5

QUITAR FOTOGRAMA

En la lnea del tiempo/clic derecho /quitar fotograma
Seleccionar con el clic y arrastras hasta donde quieres eliminar /clic derecho/quitar
fotogramas

En resumen
BORRAR FOTOGRAMA
1. Seleccionamos el fotograma o secuencia de fotograma a borrar
2. Hacemos clic derecho en el fotograma o secuencia y elegimos la opcin borrar
fotograma en el men contextual

Resultado
F6
MACROMEDIA 8...

265

FOTOGRAMA POR FOTOGRAMA (RECTNGULO X RECTNGULO)

Control +chif +w = ubica al centro
Control +k = muestra el panel de alinear
Control +G = para agrupar
Control +chif +G = desagrupar
Control +b = separar
Control +enter muertas el medio
F6 = aade fotograma con el contenido

FOTOGRAMA (FRAMES)Que viene delimitado por lneas verticales formando
rectngulos
1. Numero de fotograma
Que permite saber que numero tiene asignado cada fotograma, cunto dura o
cuando aparecer en la pelcula

Papel cebolla
Para visualizar los fotogramas.
La lnea de tiempo representa la sucesin de fotograma en el tiempo Es decir la pelcula
flash no ser nada ms que los fotogramas que apresen en la lnea del tiempo uno detrs
de otro, en el orden que establece la misma lnea de tiempo

ANIMACIN POR INTERPOLACIN DE FORMA

A diferencia de las animaciones de las interpolaciones de movimiento que solo se usa el
objeto de un punto a otro. Las interpolaciones de forma se utiliza para cambiar el color
la forma y la posesin de los objetos es decir que ahora si se puede logran una
transformacin de una forma original del objeto a una nueva forma tambin
trasformaciones de texto a grafico o viceversa

Pasos de i
Insertar un objeto en el fotograma
Insertar fotograma clave en el 40 pero el objeto tiene que ser destino
A los dos objetos lo vamos a separar presionando (control + b) (men
modificar /separar)

MACROMEDIA 8...

266

MACROMEDIA 8...

267

TIPOS DE ANIMACIN

Dentro de Macromedia flash exenten formas de animar un objeto con tipo grafico o
mapas de bits cada forma de estas formas tienes su propias caractersticas con ests
tipos de animaciones podemos realizar absueltamente cualquier cosa desde animacin
de personajes caricaturas, transformaciones de objetos, etc.

Filtro

Esta herramienta me permite aadir efectos a un smbolo

Pasos

Insertar una imagen

Seleccionar imagen

Cambien en smbolo (f8)

Inspector de propiedades

Clic

MACROMEDIA 8...

268

Clic

SOMBRA

Guardar cambiar eliminar
Elimina todos los filtros
Activa
Desactiva
MACROMEDIA 8...

269

ILUMINADO

BISEL

ILUMINADO DEGRADADO

MACROMEDIA 8...

270

BISEL DEGRADADO

AJUSTAR COLOR

MACROMEDIA 8...

271

MASCARAS

MASCARA DE CAPA

Es un efecto utilizado frecuentemente con animaciones divido a que podemos realizar o
lograr efectos reales el efecto mascara consiste en ocultar, cubrir alguno o todos los
objetos que se encuentre en la esquema

PRIMERO INSERTAR UNA IMAGEN Q CUBRA E ESCENARIO EN LA 1RA CAPA

MACROMEDIA 8...

272

Agrega una nueva capa en la capa agregada /clic derecho /mascara/luego en la
capa nueva tambin dibuje un circulo pequeo como q quede en el centro de la
imagen

MACROMEDIA 8...

273

En la capa dos /desactivar /desbloquear
Dibujar un objeto
Interpretacin de movimiento
Me ubico en el fotograma que debo y presiono f6

Fjate que
paso
MACROMEDIA 8...

274

Efecto lupa en un texto

Insertar un texto (capa 1)
Insertar otra capa (capa 2)
Clic derecho masacrara
En la capa dos desbloquear y dibujar un objeto
Al inicio del texto interpretacin de movimiento
Me ubico en el fotograma que deseo y doy f6 y el objeto ubico en el inicio y luego
al final

Aurelio

SMBOLO

Los Smbolos provienen de objetos que hemos creado utilizando las herramientas que
nos proporciona Flash 8.
Estos objetos al ser transformados en smbolos, 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 pelcula.
COMO CREAR UN SIMBOLO
La accin de crear un nuevo smbolo es una de las ms usadas en Flash ya que es uno de
los primeros pasos para crear una animacin, como veremos ms adelante.
El procedimiento es el siguiente:
Seleccionamos el objeto que queramos convertir en smbolo. Abrimos el panel de
Propiedades del Smbolo, accediendo al men Insertar Nuevo Smbolo o simplemente
pulsando Ctrl + F8 o F8.
Al inicio
Al final
MACROMEDIA 8...

275

Una vez hecho esto nos aparecer una ventana como la mostrada en la imagen.
Introducimos el nombre del smbolo que vamos a crear.
Esto al principio y mientras tengamos poco smbolos no ser muy importante, pero ms
adelante nos servir para hacer referencia al objeto.
Slo nos queda seleccionar el tipo de smbolo o comportamiento en que queremos
convertir nuestro objeto. Podemos elegir entre Clip de Pelcula, Botn y Grfico. Sus
caractersticas y las diferencias entre ellos las veremos en temas posteriores.
Bastar con pulsar Aceptar para tener nuestro smbolo creado. En Flash 8 podemos
encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas
asociadas a las pelculas que hemos creado. Todas ellas las tenemos a nuestra
disposicin para utilizar los smbolos que contienen.Para acceder a las bibliotecas
comunes que nos ofrece Flash simplemente tenemos que ir a la Barra de Mens, Ventana
Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo
tipo de smbolos: botones, clips o grficos.
Para acceder a la librera de smbolos de la pelcula que estamos creando de nuevo
vamos a la Barra de Mens/ Ventana Biblioteca. En esta biblioteca aparecern
todos los smbolos que hemos creado hasta el momento. Podemos comprobar como el
nuevo smbolo que hemos creado en el ejercicio anterior (Ejercicio Crear Smbolo) se ha
aadido a nuestra biblioteca accediendo a ella como
acabamos de indicar.

DIFERENCIA ENTRE SMBOLO E INSTANCIA

Como hemos comentado anteriormente, cuando
MACROMEDIA 8...

276

creamos un smbolo, Flash lo almacena en una biblioteca. Pues bien, cada vez que
utilicemos ese objeto en una pelcula, ste se convierte en una instancia.
Aunque parece que sean lo mismo, la importancia de esta distincin es que cuando
utilicemos un smbolo que hayamos creado previamente en una pelcula, al modificarlo
se modificar la instancia, mientras que el objeto seguir intacto, tal y como era en el
momento de su creacin, de manera que podremos volverlo a utilizar en otro momento.
A la derecha tenis un ejemplo de una biblioteca, en este caso una biblioteca estndar de
Flash. Cada elemento de la biblioteca es un smbolo

MODIFICAR UNA INSTANCIA

Hemos visto anteriormente que podemos modificar una instancia de un smbolo sin
modificar el smbolo original en cuestin. Sin embargo, al no tratarse de un grfico
vectorial (veremos que significa esto ms adelante), no podemos modificar las instancias
con las herramientas de dibujo de Flash 8, pero s mediante el Panel de Propiedades, que
permite la manipulacin "externa" de la instancia.
As, este panel, que como hemos visto resulta sumamente til, no nos permite
modificar la estructura bsica de la instancia, pero s otras propiedades, esto es,
podremos hacer que la instancia tenga ms brillo, pero no transformar una estrella en
un crculo).

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 smbolo, el Panel Propiedades
mostrar las propiedades del objeto en cuestin, pero no las caractersticas propias de
los smbolos (cambios de color, intercambios etc...)
En el momento que seleccionemos un smbolo aparecern una serie de propiedades y
opciones que comentamos a continuacin:

Nombre del Smbolo y su icono correspondiente: El nombre de la instancia es muy
importante, pues permite identificarla durante la pelcula. El icono asociado nos permite
saber qu tipo de smbolo es de un vistazo rpido.

Tipo de Smbolo o Comportamiento de la instancia. Por defecto se nos muestra el tipo
al que perteneca el smbolo original pero nosotros podemos cambiarlo para que cambie
su comportamiento, aunque pueda seguir manteniendo su estructura inicial (en la
imagen es "Clip de Pelcula")

Nombre de la Instancia seleccionada (Instancia de:). Esta opcin nos muestra el
smbolo raz del que proviene la instancia que estamos modificando. Este smbolo se
MACROMEDIA 8...

277

encuentra en la biblioteca y cada cambio que sufra afecta a todas las instancias que de l
se derivan
Gracias a esta opcin podemos trabajar tranquilamente con un "boceto" y sustituirlo de
un modo efectivo (el nuevo smbolo hereda las propiedades del antiguo smbolo,
incluido el nombre de instancia, las acciones que le afectarn, efectos grficos etc...)
cuando llegue el momento.
En la imagen se puede observar el panel Intercambiar Smbolo.

Este panel adems, incorpora el botn Duplicar Smbolo cuya funcionalidad es
la que nos podemos imaginar. Es muy til cuando queremos hacer pruebas con un
smbolo y no queremos perderlo. Lo duplicamos y trabajamos tranquilamente con la
copia.

EFECTOS SOBRE INSTANCIAS (I)

Para acceder a los efectos aplicables sobre una instancia determinada, debemos acudir
nuevamente al Panel Propiedades, desde aqu podremos acceder a todos los efectos
que Flash nos proporciona. En el grfico de la derecha se puede observar la pestaa
Color: del Panel Propiedades.

Hay varios tipos de efectos. Si el smbolo se acaba de crear o si no tiene efecto asignado
aparecer en la pestaa Ninguno.
En el siguiente apartado comentamos los distintos efectos aplicables a una instancia

EFECTOS SOBRE INSTANCIAS (II)

A continuacin mostraremos los tipos de efectos. Para ello partiremos de la
siguiente imagen original:
MACROMEDIA 8...

278

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.

tinta. Esta opcin permite cambiar el color de la instancia, pero puesto que, como
dijimos, no podemos modificar la instancia internamente, al variar el color en la
pestaa Tinta o bien mediante los valores RGB (cantidad de rojo, verde y azul),
se cambiar el color de toda la instancia como si la estuviramos tiendo o
poniendo una capa imaginaria de un color determinado. El grosor o intensidad de
esta "capa" la podemos modificar en porcentaje mediante la primera pestaa que
aparece a la derecha.

Alfa. Representa el grado de visibilidad o transparencia que se tendr de la instancia
en cuestin. Tambin se puede modificar mediante valor directo o con la barra
deslizante y es muy til para animaciones de aparicin y desaparicin 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 travs de la instancia.
MACROMEDIA 8...

279

Avanzado. Aqu podemos aplicar todos los efectos anteriores al mismo tiempo
de manera ms 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
QU ES UN BOTN?
Los smbolos de tipo Botn son los que aportan la mayor parte de la interactividad de las
pelculas Flash con aquel que las est visualizando. Un botn, en Flash, es igual que un
botn de cualquier entorno informtico, sea web o cualquier otro.
Al igual que los otros smbolos de Flash CS5, los botones tienen su propia lnea de
tiempo. Esta es independiente pero, sin embargo, est formada nicamente por
cuatro fotogramas, uno para cada estado posible del botn:
Pasos para crear un botn
Crear un objeto: selecciona el objeto: presiono (f8): clic derecho: convertir en smbolo
En la creacin de un
botn podemos
considerar 2 faces.
MACROMEDIA 8...

280

REPOSO.

Aspecto por defecto del botn, es decir, cuando el puntero del ratn no est situado
sobre l.

SOBRE.
Aspecto del botn cuando situamos el puntero sobre l.

PRESIONADO.
Apariencia que deseamos tenga nuestro botn mientras lo mantengamos pulsado.

MACROMEDIA 8...

281

ZONA ACTIVA.
Aqu debemos indicar el rea real en la que queremos que acte nuestro botn. Esto es
importante sobre todo en botones compuestos slo por texto.

CREACION DE UN BOTON
En la creacin de un botn podemos considerar dos fases. En la primera vamos a
convertir nuestro objeto a smbolo de tipo botn y posteriormente veremos cmo
completarlo internamente, lo que nos ayudar a entender mejor dicha estructura.

Primeramente crearemos el objeto que representar el aspecto por defecto de nuestro
botn con las herramientas que nos ofrece Flash 8.

Seleccionaremos el objeto y accederemos al men Insertar Convertir en Smbolo, le
daremos el comportamiento Botn y asignaremos un nombre a nuestro nuevo smbolo.

Ahora cuando hacemos clic en aceptar .luego vamos donde la biblioteca y haremos
doble clic en el smbolo
MACROMEDIA 8...

282

Ah tenemos el botn hecho a nuestra manera.

CANBI O DEL REA ACTI VA DE UN BOTN137

Cambio del rea activa de un botn
Se puede especificar un rea activa de un tamao diferente del tamao estndar del rea
activa; para ello, debe aadir un fotograma clave al fotograma de zona activa del smbolo
del botn y dibujar una forma que defina el rea activa.
1. .En el escenario, haga doble clic en el botn del logotipo que ha crea dopara ver la
lnea de tiempo del botn. La lnea de tiempo del botn contiene los estados
siguientes:
Flecha arriba
Sobre
Flecha abajo
Zona activa

2. Haga doble clic en el nombre de la capa 1 en la lnea de tiempo y asigne el
nombre rea activa a la capa.
3. Seleccione el fotograma Zona activa (fotograma 4) de la capa rea activa de la
lnea de tiempo de BTN Logo, y pulse F6 para aadir un fotograma clav.
4. 4En el panel Herramientas, seleccione la herramienta Rectngulo. Los colores de
trazo y relleno del rectngulo no son importantes. En el escenario, dibuje un
rectngulo que cubra con la mayor precisin el logotipo y el texto. Ahora el
rectngulo define el rea del botn en la que se puede hacer clic.
5. Haga clic en la escena 1, situada encima de la esquina superior izquierda del
escenario, para salir del modo de edicin de smbolos.
.Seleccione Control > Habilitar botones simples.
6. .En el escenario, vuelva a colocar el puntero sobre el texto. El rea activa se
adapta a la forma del rectngulo que ha dibujado.
7. .Seleccione Control > Habilitar botones simples para anular la seleccin de esta
funcin.

MACROMEDIA 8...

283

ALINEACIN DE BOTONES

Puede alinear botones respecto a los ejes horizontal y vertical mediante el panel Alinear.
1. En la lnea de tiempo, haga clic en la capa Contenido.

2. Haga clic en Insertar capa situado debajo de la lnea de tiempo.

3. Haga doble clic en el nombre de la capa, escriba Botones animados como nombre
nuevo para la capa y presione Intro (Windows) o Retorno (Macintosh).

4. En el panel Biblioteca (Ventana > Biblioteca), seleccione el botn 1 y arrstrelo al
borde inferior derecho del escenario. No es necesario colocarlo en un lugar
concreto.

5. En el campo Nombre de instancia del inspector de propiedades, asigne el nombre
de instancia links btnal botn.

6. Arrastre el botn 2 y el botn 3 del panel Biblioteca, y colquelos a la izquierda
del botn 1. Utilice aproximadamente el espaciado que se indica en la siguiente
ilustracin:

7. Con la herramienta Seleccin, arrastre el puntero para seleccionar los tres
botones.

8. Abra el panel Alinear seleccionando Ventana > Alinear). Compruebe qu En
escenario no est seleccionado, ya que no desea alinear los objetos respecto al
escenario.

9. En el panel Alinear, haga clic en Alinear verticalmente respecto al centro, y a
continuacin haga clic en Distribuir horizontalmente respecto al centro. Los
botones se alinean en el escenario.

10. Cierre el panel Alinear

11. En el escenario, haga clic en un espacio vaco del rea de trabajo para asegurarse
de que no hay ningn objeto seleccionado y, entonces, seleccione el botn 2. En el
cuadro de texto Nombre de instancia del inspector de propiedades, introduzca
Contact _ btn. Seleccione el botn3 y asgnele el nombres weepstakes btn.

MACROMEDIA 8...

284

CREACIN DE ANIMACIN PARA UNESTADO DE BOTN

Ahora crear una pelcula dentro del estado Sobre del botn 1 y, a continuacin, crear
una interpolacin de forma en el clip de pelcula. La interpolacin de forma crea un
efecto que cambia el color de gris a rojo.

1. En el escenario, haga doble clic en el botn 1 para abrirlo en el modo dedicin de
smbolos.

2. En la lnea de tiempo del botn 1, oculte todas las capas excepto la capa Color. En
la capa Color, seleccione el fotograma clave Sobre.

3. En el escenario, seleccione la forma de valo negro para el botn 1. PulseF8 para
convertir el valo en smbolo.

4. En el cuadro de dilogo Convertir en smbolo, asigne al smbolo el
nombre Animacin de botn. Seleccione Clip de pelcula (no Botn) como
comportamiento, y haga clic en Aceptar.

5. En el escenario, haga doble clic en el smbolo de animacin de botn para pasar al
modo de edicin de smbolos.

6. Asigne el nombre/Cambio de color a la capa 1. Seleccione el fotograma15 y
presione F6 para aadir otro fotograma clave.

7. Con la cabeza lectora en el fotograma 15, seleccione la forma del botn en el
escenario, y seleccione una sobra roja brillante en el men emergente Color de
relleno del inspector de propiedades.

8. En la lnea de tiempo, haga clic en un fotograma entre el 1 y el 15. En el inspector
de propiedades, seleccione Forma del men emergente Interpolacin. Arrastre la
cabeza lectora desde el fotograma 1 al 15 para ver el cambio de color.

ADICIN DE UNA ACCIN A UN BOTN

Cuando el usuario haga clic en el botn y se reproduzca la animacin interpolada,
haremos que la cabeza lectora se mueva al final de la lnea de tiempo de Animacin de
botn y se detenga. Utilizar ActionScript para controlar el movimiento de la cabeza
lectora en una lnea de tiempo.

1. Agregue una nueva capa a la lnea de tiempo Animacin de botn y asgnele el
nombre Acciones.

2. En la capa Acciones, aada un fotograma clave en el fotograma 15pulsando F6.
3. Abra el panel Acciones (Ventana > Acciones) y, si es necesario, amplelo para ver
la caja de herramientas Acciones y el panel Script.

MACROMEDIA 8...

285

4. Con el fotograma 15 de la capa Acciones seleccionado, vaya a la categora
Funciones globales > Control de la lnea de tiempo de la caja de herramientas
Acciones y haga doble clic en stop. La accin stop
Permite indicar que la cabeza lectora se detenga cuando llegue al fotograma
15.En la lnea de tiempo de Animacin de botn, el fotograma 15 de la capa
Acciones muestra una a pequea, que indica que se ha adjuntado una accin a ese
fotograma

5. Haga clic en la escena 1, situada encima del escenario, para salir del modo de
edicin de smbolos y volver al documento principal.

6. Haga clic en el control del men emergente situado en la esquina superior
derecha del panel Acciones, y seleccione Cerrar panel para cerrar el panel.

7. Seleccione Control > Habilitar botones simples para poder probar el botn
animado.

8. En el escenario, desplace el puntero por encima del botn y haga clic en el botn.

9. Seleccione Control > Habilitar botones simples para anular la seleccin de esta
funcin

Adicin de navegacin a un botn

Utilizando los comportamientos, puede aadir rpidamente navegacin aun botn sin
tener conocimientos de ActionScript. Aadir navegacin para que se abra una pgina
Web cuando el usuario haga clic en un botn.
1. En el escenario, seleccione la instancia del botn 1.

2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en Aadir
comportamiento y seleccione Web > Ir a pgina Web.

3. En el cuadro de dilogo Ir a URL, seleccione _blank en el men emergente Abrir
en para abrir la URL en una nueva ventana del navegador. En el cuadro de texto
URL, acepte la opcin predeterminada, http://www.macromedia.com, o bien
introduzca una URL diferente. Haga clic en Aceptar.
4. Si lo desea, repita los pasos anteriores, seleccionando el botn 2 y despus el
botn 3, para aadir tambin navegacin a estos botones.
MACROMEDIA 8...

286

5. Haga clic en el control del men emergente situado en la esquina superior
derecha del panel Comportamientos, y seleccione Cerrar panel para cerrar el
panel.

QU ES UN GRFICO?
Los Grficos son smbolos que nos permiten representar objetos estticos y
animaciones sencillas.
En caso de que utilicemos un smbolo grfico para realizar una animacin, debemos
tener en cuenta que sta estar ligada a la lnea de tiempo de la pelcula en la que se
encuentre. Es decir, la animacin se reproducir siempre y cuando la pelcula original
tambin se est reproduciendo. Esto hace que, pese a tener su propia lnea de tiempo,
no puedan contener sonidos, controles ni otros smbolos grficos.
As pues, normalmente utilizaremos los grficos para imgenes estticas o para cuando
nos convenga que una animacin se reproduzca slo cuando determinado frame de la
lnea de tiempo de la pelcula est en marcha, ya que para los casos que hemos
comentado anteriormente en los que un grfico no nos es til, Flash nos ofrece otro tipo
de smbolos como veremos en temas posteriores.
TIPOS DE GRFICOS
Los grficos pueden ser:
a) Estticos: estos grficos se mantienen sin cambios cuando pasa el tiempo. Estos
grficos son los tpicos en los fondos y en los objetos que no desempean ninguna
funcin especial. Su tamao y por tanto, el tiempo de carga de este tipo de grficos,
aunque siempre depender de la resolucin, de sus dimensiones y de la forma en la que
estn creados *, ser en general reducido.
b) Animaciones: este tipo de grfico vara su forma, posicin u otras propiedades a
medida que va pasando el tiempo. Puesto que para realizar la animacin se deben usar
varios grficos ms adems del original o bien realizar determinadas acciones que
modifiquen el estado inicial, el tamao de esta clase de grficos, para las mismas
dimensiones y forma de creacin, ser mucho mayor que uno esttico.
Por esto, aunque las animaciones dan a nuestra web un aspecto ms 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 tamao excesivamente grande.
2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones tpicas
de Flash, cuyo tamao no es excesivo, el hecho de poner muchas animaciones puede
llegar a "marear" un poco al visitante de nuestro sitio y desviar su atencin de lo que
realmente importa, su contenido.
MACROMEDIA 8...

287

(*) Los tipos de grfico anteriores pueden ser, a su vez de dos tipos, segn la forma en la
que estn creados: Grfico Vectorial o Mapa de Bits. Para saber ms acerca de estos dos
tipos de grfico, chale un vistazo a nuestro tema bsico
CREANDO UN GRFICO Y COMPROBANDO SUS PROPIEDADES
Como explicar tericamente las propiedades de un grfico resultan un tanto confusas,
vamos a ver de manera prctica lo que queremos explicar. Vamos a crear un grfico en
Flash y a comprobar las propiedades que hemos comentado en el primer apartado del
tema. Para ello, abre una nueva pelcula Flash (Archivo Nuevo).
Ahora tenemos que crear el objeto que queremos convertir en un smbolo Grfico.
Dibujemos, por ejemplo, un valo en cualquier lugar del rea de trabajo con la herramienta
valo
de la barra de herramientas de dibujo y dmosle un color de relleno que ser lo que
despus 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 smbolo grfico lo
recuerdas?
Selecciona el objeto, ves al Men Insertar Convertir en Smbolo y convirtelo en un
smbolo como ya habamos visto y dndole el nombre "Grfico Animado y
seleccionando el Comportamiento Grfico:

Ahora vamos a crear la animacin del grfico. Puesto que todava no hemos visto a fondo las
animaciones, la vamos a realizar de una forma que quiz no sera la ms apropiada la mayora
de las veces, pero nos servir muy bien para este ejemplo. Para ello selecciona nuestro grfico
y pulsa el botn derecho del ratn. Se desplegar un men, en el que seleccionaremos la
opcin Editar para modificar el grfico y acceder a su lnea de tiempos. Comprueba que ests
en la lnea de tiempos del grfico (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 - Grfico Animado" y, por tanto estamos DENTRO del grfico (y la
lnea de tiempos que vemos es la del grfico, y no la de la pelcula principal)
MACROMEDIA 8...

288

Crearemos a continuacin nuevos fotogramas clave seleccionando uno a uno los
frames nmero 2, 3 y 4 y pulsando F6 cuando los seleccionemos.
Pulsa sobre el frame 2 y cmbiale el color de fondo al valo como hicimos antes. Haz lo
mismo en los dos siguientes frames.

Tu lnea de tiempos debera tener este aspecto:

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al
nivel inicial (Pelcula principal) y podremos ver nuestro grfico "desde fuera".

Ahora ya tenemos completo nuestro grfico animado. Qu crees que suceder si
reproducimos la pelcula? Comprobmoslo pulsando Control + Intro, se visualizar la
pelcula.
Y bien? Nada. Nada en absoluto. El valo sigue tal cual. Por qu? La respuesta est en
las caractersticas de los grficos que habamos explicado: la lnea de tiempos del grfico
est ligada a la de la pelcula.
En este caso la lnea de tiempos de la pelcula tena un solo frame, mientras que la del
grfico tena 4, por tanto, no le hemos dado tiempo al grfico a desarrollar su
animacin; slo ha reproducido un frame, el primero.
Cmo podemos solucionarlo?
Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del
reproductor de Flash, selecciona el fotograma 5 de la pelcula principal y pulsa F6.
Ahora tenemos 5 fotogramas en la pelcula principal.

MACROMEDIA 8...

289

INTRODUCIR UN MAPA DE BITS
Los grficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas
que en tus pelculas hayan mapas de bits lo ms seguro es que prefieras crearlos y
hacerlos ms espectaculares en otro programa ms 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 grfico GIF, JPG, TIFF y muchos ms. Tambin nos permite
modificarlos en cierto modo. Podemos cambiarle el tamao y convertirlo en un smbolo
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
smbolo ms.

Para importar un archivo de Mapa de Bits al escenario haz clic en el men Archivo /
Importar /Importar a escenario.

Se abrir el cuadro de dilogo de Importar, all debers seleccionar el formato de imagen
que quieres importar seleccionndolo en el desplegable Tipo. Luego navega por las
carpetas hasta encontrarlo. Seleccinalo haciendo clic sobre l y pulsa el botn 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 grficos
vectoriales como tambin hace Flash 8
Si queremos traer un archivo vectorial
creado en otro programa, por ejemplo
FREEHAND, podemos hacerlo de manera
muy sencilla.Simplemente accedemos al
men Archivo /Importar/Importar a
escenario. A continuacin, seleccionamos
MACROMEDIA 8...

290

el tipo de archivo correspondiente al grfico 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
grficos de este tipo.
Concretamente, FREEHAND el pertenece tambin 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 cmoda en determinadas
ocasiones para realizar dibujos. As podra interesarnos utilizar Flash 8 para crear un
dibujo y despus 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 bsico,
que la mayora de mapas de bits no permiten animaciones, por esto el objeto flash que
exportemos no debera contener animacin 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 ANIMACIN

Como vimos en el tema bsico hay tipos de archivo de mapa de bits que soportan
animaciones, como los GIF. Pues bien, con Flash tambin podemos crear una animacin
y exportarla como un GIF animado. Sin embargo, como vimos, el GIF animado consiste
en una secuencia de imgenes mostradas secuencialmente y es por esto que para
exportar un objeto Flash 8 como GIF animado es necesario que todos los
fotogramas de esta animacin sean clave, ya que el GIF no lo reconocer en caso
contrario y no veremos el efecto deseado.

Para exportar un smbolo y guardarlo como una imagen deberemos antes que nada
seleccionarlo con la herramienta Seleccin.
Una vez seleccionado deberemos hacer clic en el men Archivo Exportar Exportar
imagen... y se abrir un cuadro de dilogo.

MACROMEDIA 8...

291

En este cuadro de dilogo 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 botn Guardar y el archivo de imagen se crear y estr listo si quieres incluirlo
en una pgina web esttica o modificarlo con cualquier programa de imagen.
Podis seguir los pasos de este clip (Nota: se utilizar como base el grfico animado
que creamos en el apartado de creacin de grficos, ya que dicho grfico est hecho
fotograma a fotograma)

Sonido

Nos permite reproducir de manera constante e independientes los sonidos podemos
importarlos formatos wav y mp3 para iportar sonidos seguimos los siguientes pasos

Quin sera capaz de ver una pelcula muda? Y una animacin espectacular sin sonido?
Hasta hace poco, los nicos sonidos que oamos en las pginas web eran los famosos
"midis", de escaso tamao y de escasa calidad. De hecho, eran slo instrumentos
musicales sin voz, de ah su pequeo tamao (y calidad). An as, siempre exista algn
creador de pginas web que se aventuraba a poner algn sonido complejo (.wav o .mp3)
en su pgina web, por desgracia, su carga es tan lenta, que la mayora de los visitantes se
iran de la pgina sin llegar a escucharla.
Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner
sonido a las pginas web es un poco ms fcil, qu aporta FLASH?
Primera
grafico
MACROMEDIA 8...

292

Flash nos permite insertar cualquier sonido que queramos en nuestras pelculas (.wav,
.aiff y .mp3) de forma fcil y muy efectiva, ya que es capaz de acelerar la descarga del
sonido siempre y cuando se descargue junto con nuestra pelcula.
Podemos dar a la pelcula efectos simples (el tpico "clic" al pulsar un botn), efectos
complejos (msica de fondo) e incluso podemos hacer que la animacin se desarrolle
conjuntamente con una msica (si bien esto ltimo necesitara que toda la pelcula
estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la
animacin). En definitiva, Flash nos lo vuelve a poner fcil.

IMPORTAR SONIDOS

Si alguna vez habis intentado aadir un sonido a vuestra animacin Flash
probablemente los hayas llevado una gran decepcin, no conseguirlo. Esto se debe a que
no se tiene en cuenta que para poder emplear un objeto en nuestra pelcula, o bien lo
creamos nosotros (como llevamos haciendo hasta ahora) o bien lo conseguimos de
cualquier otro modo y lo insertamos en nuestra pelcula.
A esto ltimo se le llama "Importar" y se puede hacer con sonidos, grficos, e incluso
con otras pelculas Flash. Importar por tanto, no es ms que decirle a Flash que aada un
determinado archivo a nuestra pelcula, para que podamos usarlo cuando queramos. En
realidad, lo aade a nuestra Biblioteca, que es el Panel en el que estn todos los objetos
que participan en la pelcula (este Panel se ver ms adelante).
As pues si queremos manejar un sonido en nuestra pelcula, 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.

}

MACROMEDIA 8...

293

Se abrir el cuadro de dilogo de Importar a biblioteca. All debers 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
pelcula. Seleccinalo haciendo clic sobre l y haz pulsa el botn Aceptar.
El sonido estar listo para usarlo donde quieras, podrs encontrarlo en la Biblioteca
(men Ventana Biblioteca).

Veamos las partes que tiene este panel.

Sonido: En esta pestaa nos aparecern las canciones que tenemos importadas,
deberemos seleccionar la cancin que pretendamos aadir a nuestra pelcula (en el
siguiente punto veremos cmo insertarlo).

Efecto: Desde aqu podremos aadir algn efecto a nuestro sonido, como por ejemplo
que el sonido pase del canal izquierdo al derecho (esto crea la sensacin 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 aadir complejos efectos sonoros, deberemos tratar adecuadamente el
sonido con algn programa creado especficamente para este propsito antes de
importarlo.
En el punto Editar Sonidos se tratar en ms profundidad estos efectos

Sinc: Esta opcin 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 opcin por defecto
y provoca que el sonido se empiece a reproducir al pasar la pelcula por el fotograma en
el que est situado. Tambin se puede sincronizar el sonido con botones y los dems
tipos de smbolos.
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 pelcula.
Detener: Detiene el sonido seleccionado.
Flujo: Esta opcin sincroniza el sonido con el o los objetos con los que est
asociado, por tanto, si la carga de la pelcula es lenta y las imgenes no fluyen
adecuadamente, el sonido se detendr para sincronizarse con ellas. Este efecto
puede dar la sensacin de que la pelcula se corta de un modo muy brusco
(pensar en que se considera normal que una imagen tarde en cargarse, pero si se
MACROMEDIA 8...

294

detiene un sonido mientras se reproduce,
produce una reaccin muy negativa en los
que pueden estar viendo nuestra pelcula).
Por otra parte, es un efecto muy adecuado
para algunas situaciones, por ejemplo, el
efecto de que un personaje hable durante
una pelcula. En esta situacin, es muy
recomendable que el sonido y las imgenes
estn sincronizadas.
Repetir: Determina el nmero de veces que se reproducir el sonido segn lo que
escribas en la caja de texto de la derecha. Tambin 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 opcin Flujo y a la vez la de Repetir, ya que al
estar sincronizados los sonidos con las imgenes, provocaramos que las imgenes (y los
fotogramas que las contengan) se dupliquen tambin, aumentando considerablemente
el tamao de la pelcula.

INSERTAR UN SONIDO

Ahora que ya sabemos importar un sonido, qu
opciones podemos modificar y para qu sirve
cada una. Veamos lo ms importante, cmo
insertarlos en nuestra pelcula.

Supongamos que queremos insertar un sonido en un fotograma determinado, de modo
que cuando la pelcula 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 ms rpido an consistira en
seleccionar dicho sonido en la Biblioteca y arrastrarlo al fotograma en el que queramos
que se empiece a reproducir el sonido (al fotograma, no a la lnea de tiempo
De este modo insertamos un sonido, pero suena tal y cmo 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 quisiramos 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

As representa Flash los sonidos
insertados en Fotogramas
MACROMEDIA 8...

295

Flas nos permite importar videos con los formatos de

Avi
Mpg
Mov
Flv

Por eso importar videos ya importamos en un servidor web y los aso son:

MACROMEDIA 8...

296

MACROMEDIA 8...

297

MACROMEDIA 8...

298

QU ES UN CLIP DE PELCULA
Un Clip de Pelcula o simplemente Clip, es una pelcula en si misma, como cualquiera de
las que podamos haber creado hasta el momento en este curso, pero que est incluida
dentro de otra pelcula y, a su vez puede contener tambin pelculas insertadas en l.

Al igual que los otros tipos de smbolos de Flash, los clips de pelcula tienen su propia
lnea de tiempo. Sin embargo, y a diferencia de los Grficos (como veremos a
continuacin), esta lnea temporal no est ligada a la lnea de tiempos del documento
que lo contiene, de tal forma que su ejecucin es independiente.
Este tipo de smbolos puede contener cualquier otro tipo de smbolo: grfico, clip o
botn, as como cualquier objeto creado con Flash, ya que un clip es realmente una
pelcula.

Otra de las ventajas de los Clips la encontramos cuando realizamos pelculas de gran
complejidad y tamao, en la que intervienen un nmero muy elevado de fotogramas,
debido a que en la vista general del documento, nosotros slo veremos un fotograma por
clip, el cual puede estar compuesto por muchos frames, lo que nos permitir tener una
mejor visin de cmo se desarrolla nuestra animacin, y una barra de tiempos ms clara
y "limpia".

Los Clips son una de las herramientas que dan mayor potencia a Flash 8,
permitindonos crear pelculas de gran complejidad y multiplicar los efectos visuales, ya
que se pueden crear mltiples movimientos independientes entre s y crear conexiones
entre los diferentes Clips de un documento.
Todas aquellas cosas que no podamos hacer con un smbolo de tipo Grfico, lo
podemos hacer con un Clip, adems de poder realizar tambin todo aquello que nos
permita dicho smbolo. Por esto, normalmente se utilizan los clips para cualquier tipo
MACROMEDIA 8...

299

de animacin debido a su gran flexibilidad, dejando los grficos slo para imgenes
estticas.

COMPROBAR LAS PROPIEDADES DE UN CLIP

Como hicimos con los grficos, vamos a ver como la lnea de
tiempo de un clip no est ligada a la lnea de tiempo del
documento que lo contiene y, a la vez, veremos la diferencia
entre los clips y los smbolos Grficos, que supone una de
las razones de la mayor utilizacin de los primeros en lo que
se refiere a la creacin de animaciones.
Para ello abriremos una nueva pelcula Flash (Archivo
Nuevo). Despus importaremos una imagen cualquiera o
bien crearemos una. La convertimos en Smbolo (Insertar
Nuevo Smbolo...) y seleccionamos en Comportamiento "Clip
de Pelcula"
Arrastramos al escenario (si no est ya all) nuestro clip de
pelcula.
Ahora tenemos nuestro Clip, insertado en nuestro nuevo
documento Flash. Es decir, tenemos dos pelculas, cada una
con su lnea de tiempos.
Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos
con los smbolos de tipo Grfico.

Observa la lnea de tiempos de la pelcula principal y comprueba que slo tiene un
fotograma.

Editemos el Clip que insertamos en el documento (doble clic sobre el avin) y
examinemos su lnea de tiempos. Aparecer un nico mov clip. Podemos realizar algo
similar a lo realizado con los grficos, si bien vamos a crear una Animacin de
Movimiento (que se ver en el Tema 13). Nos quedar as.

MACROMEDIA 8...

300

Como vemos, la duracin del clip que hemos insertado es mucho mayor que la pelcula
nueva que lo contiene. Si el pez fuera un grfico ya hemos visto que si intentramos
reproducir la pelcula no ocurrira nada. Veamos qu sucede siendo en este caso un Clip
(esto tambin es vlido si la animacin se ha creado del modo visto con los grficos).
(Control + Antro).
En este caso s que vemos la animacin porque en el momento en que el reproductor
ha pasado por el fotograma que contena el clip, ste ha empezado a reproducirse y,
puesto que su lnea de tiempos es independiente, ha seguido reproducindose a pesar
de que la lnea de tiempos principal haya terminado, y lo continuar haciendo hasta que
acabe su lnea 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 smbolo 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 grficos, 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 vaco.
Por esto, es interesante aprender cmo crear un smbolo, en este caso un clip, de la nada
para despus modificarlo.

Para insertar un clip vaco haz clic en Insertar Nuevo smbolo y se abrir el cuadro de
dilogo de Crear un nuevo smbolo.
All debers darle un Nombre para identificarlo ms tarde en la Biblioteca y seleccionar
la opcin Clip de Pelcula en el marco Tipo.
A partir de este momento tendremos un nuevo clip (vaco) al cual podremos acceder
desde nuestra Biblioteca (men Ventana Biblioteca), si hacemos clic derecho sobre l
y seleccionamos Edicin, podremos editarlo y trabajar con l.
Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips
de pelcula y veremos el potencial real de este tipo de smbolos.
IMPORTAR Y EXPORTAR MOVIE CLIPS DE BIBLIOTECA

Como para todos los smbolos 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 pelcula debemos abrir primero la
biblioteca en la que est contenido.
Hemos visto en el tema de Smbolos, dos tipos de bibliotecas: las que estn asociadas
a documentos u otras pelculas y las que nos proporciona Flash 8. Pues bien, no slo
podemos utilizar smbolos 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 exportacin mediante
MACROMEDIA 8...

301

biblioteca se hace automticamente 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 smbolos de biblioteca y pulsar Abrir.
Aparecer la biblioteca con la lista de los smbolos correspondientes a los grficos,
botones y clips del documento en cuestin.
Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarn a
su vez todos los smbolos que contenga, incluidos los clips.
A continuacin mostramos un ejemplo en el que veremos cmo importar clips de esta
forma adems de comprobar las propiedades de los clips y sus lneas de tiempo
independientes mediante la reproduccin simultnea de dos pelculas, creando un
efecto bastante vistoso utilizando "aparentemente" un slo frame.

LA ANIMACIN EN FLASH
Flash 8 es un programa bsicamente orientado a la animacin, de ah la gran
importancia de este tema. No obstante, para ir creando animaciones cada vez ms
complicadas se necesita, sobre todo, mucha prctica.
En este tema y los sucesivos mostraremos las tcnicas bsicas de animacin en Flash.
La unin de estas tcnicas ser la que nos permita crear las ms variadas y vistosas
animaciones.
En el tema de la animacin, 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 programacin como Java, de una manera muy sencilla, sin necesidad de
excesivos conocimientos y ocupando muy poco espacio en disco.
MACROMEDIA 8...

302

Aunque Flash ofrece tcnicas mejores, tambin se pueden crear animaciones a modo
de GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las
animaciones ms bsicas y conviene conocerlas. Para ello conviene visitar nuestro tema
bsico
CREAR UNA ANIMACIN FOTOGRAMA A FOTOGRAMA
Aunque Flash incorpora tcnicas mucho mejores que estas, tambin permite "simular" la
forma de animacin de los GIF animados, ya que en ocasiones la animacin es muy
brusca o el cambio no es realizable "automticamente" con Flash o simplemente nuestro
objetivo es exportar el grfico creado como este tipo de mapa de bits.
Para crear una animacin fotograma a fotograma basta introducir la apariencia inicial
del objeto en el primer fotograma, hacer claves todos aquellos fotogramas que vayan a
intervenir en ella, e ir modificndolos uno a uno, progresivamente, ya que una diferencia
muy grande de un fotograma al siguiente creara un golpe brusco para el que la
visualiza.
Una vez completada la animacin tendremos algo como lo que mostramos a
continuacin en nuestra lnea de tiempos:

Veamos la diferencia de tamaos de las diferentes tcnicas de animacin para una
misma pelcula:
Tenemos la siguiente animacin. La apariencia se mantendr prcticamente igual en
todos estos casos, pero cabe la posibilidad de que al hacerlo fotograma a fotograma, se
cometan pequeos errores de posicionamiento en la trayectoria que Flash no cometera:

Damos movimiento hasta llegar al fotograma 25
1 fotograma

2 fotograma

3 fotograma

4 fotograma

5 fotograma

MACROMEDIA 8...

303

Y tenemos estas tres formas de crearlo con sus respectivos tamaos:
1) Interpolacin de movimiento: Esta es la lnea de tiempos

TAMAO: 961 Bytes

2) Fotograma a Fotograma exportado como pelcula Flash (SWF): La lnea de
tiempos como vemos tiene todos los fotogramas como fotogramas clave:

TAMAO: 1 K Byte

3) Fotograma a Fotograma exportado GIF Animado: La lnea de tiempos igual que
en el caso anterior:

TAMAO: 2 K Byte

INTERPOLACIN DE MOVIMIENTO

Acabamos de ver las interpolaciones de movimiento como un mecanismo para desplazar
un smbolo 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 tamao.
Esto es muy sencillo con Flash 8, basta con modificar la instancia del smbolo en el
ltimo fotograma de la interpolacin de movimiento, pero esta vez cambindole el
tamao.
Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de
tamao se producir mientras el objeto se desplaza. Tambin podemos hacer el cambio
de tamao en varias fases o secuencias encadenadas como en las interpolaciones de
movimiento comunes.
El ejemplo siguiente incorpora estas tres caractersticas de la Interpolacin de
Movimiento de Flash 8.

MACROMEDIA 8...

304

Y la lnea de tiempos que nos queda es algo tan sencillo como esto:

ANIMACIN DE TEXTOS
Es indudable que para comunicar algn mensaje, en la mayora de las ocasiones, no
basta con imgenes o iconos, y es aqu donde el texto cobra gran importancia. No
obstante, se debe tener cuidado con la animacin de los textos, ya que resulta bastante
complicado leer un texto que se desplaza o cambia de tamao.
Por este motivo, un texto animado debera estar slo en las presentaciones o bien
formar parte de una animacin corta y, lo que es ms importante no debera estar
reproducindose infinitamente.
En las presentaciones, se utilizan multitud de efectos que veremos ms adelante. Sin
embargo, con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las
opciones ms utilizadas es separar las letras de los textos y animarlas
independientemente
Aqu tienes un ejemplo de una presentacin sencilla mediante texto utilizando esta
tcnica.
ANIMACIN DE LNEAS
Una buena animacin no tiene que porqu estar compuesta slo por textos o imgenes
espectaculares. En ocasiones conviene darle a la pelcula un aire ms sencillo o aadir
determinados efectos que la hagan vistosa sin necesidad de cargar mucho la pelcula
visualmente, y en cuanto a tamao de archivo se refiere.
Esto lo podemos conseguir simplemente animando lneas y haciendo que se muevan por
el escenario. Esta tcnica nos permite dar dinamismo a la animacin o crear formas
distintas a lo largo de su recorrido.
MACROMEDIA 8...

305

Son especialmente tiles y vistosas en fondos oscuros y se suelen usar para formar
rectngulos que se aprovechan para insertar imgenes.
A la derecha podemos ver un ejemplo de este tipo de presentaciones
Para crear esta animacin debers crear tantas capas como animaciones de lneas vayas
a crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de lneas 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.
Tambin crearemos una capa que situaremos en la posicin superior donde
colocaremos las imgenes que formarn el mensaje de bienvenida
El funcionamiento de la animacin es claro, deberemos crear interpolaciones de
movimiento para cada una de las capas de lneas que en su posicin final emplazaremos
en su lado contrario de la pantalla, por ejemplo, las lneas situadas en un principio en la
parte inferior al final de la animacin se encontrarn en la parte superior. Realizaremos
esto con las 4 capas de lneas.
En la capa Imgenes crearemos animaciones que harn aparecer las imgenes 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 imgenes para colocarlas en su lugar
en el fotograma. Estas imgenes se mostrarn
nicamente durante el tiempo que dure el fotograma para
desaparecer ms tarde dando paso a la otra imagen.

1 capa

Bienvenidos
A
2 capa
Mi sitio web
3 capa

MACROMEDIA 8...

306

INTERPOLACIN POR FORMA
Cuando lo que queramos no sea cambiar la posicin de un objeto en el escenario, sino su
forma de manera progresiva (o ambas cosas a la vez), Flash 8 nos ofrece la tcnica de la
Interpolacin 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 interpolacin por forma, es muy semejante a crear una interpolacin de
movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la
forma del fotograma anterior. As como hacamos en el tema anterior, slo 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 Interpolacin por Forma
funcione como es debido aquellos objetos que intervengan debern ser objetos
vectoriales (no smbolos Flash).
Debemos tener tambin dos aspectos en cuenta:
1) Separar en distintas capas los objetos fijos y los que estarn 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 interpolacin.
Si realizamos la interpolacin por forma correctamente la lnea de tiempos tendr este
aspecto:

Las consideraciones sobre la velocidad y el nmero de fotogramas que vimos en las
interpolaciones de movimiento se pueden aplicar tambin a la interpolacin por forma y
a cualquier animacin hecha con Flash.
Si hay algn fallo en los parmetros necesarios para que la interpolacin se ejecute
bien, como por ejemplo, que uno de los objetos en capa sea un smbolo, se mostrar algo
as en la lnea de tiempos:
MACROMEDIA 8...

307

Para crear una interpolacin de forma debers actuar de forma similar que para crear
una de movimiento. Una vez tengas los fotogramas de inicio y fin de la animacin
debers seleccionar todos los fotogramas que participen en ella y abrir el panel
Propiedades.

All debers seleccionar la opcin Forma en el desplegable Animar. Y ya habrs
terminado.
Fcil, verdad?

TRANSFORMAR TEXTOS
Debido a la importancia de los textos, es importante comentar las aplicaciones que
tienen los cambios de forma sobre ellos. Aadimos as una posibilidad ms para realizar
logotipos o presentaciones vistosas y transmitir informacin de manera espectacular.
Recordemos que para realizar una interpolacin 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 funcin 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 hubiramos repasado con la herramienta lpiz el contorno de
cada letra.
MACROMEDIA 8...

308

Posibilidades de esta tcnica en textos? Muchsimas, 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 transicin. Tambin es conveniente dar un
tiempo para que cada letra sea mostrada y pueda ser visualizada y "entendida" por
aquel que vea la pelcula, porque si no lo hacemos corremos el riesgo de que la
animacin parezca slo un garabato revolvindose.
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 transicin tambin en el color. Observemos a su vez como cuando
se forma cada letra, mantenemos su imagen el tiempo suficiente como habamos
indicado que era necesario.

uando 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 animacin creada con una forma en el fotograma inicial y un
texto en el final veremos que la interpolacin 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 interpolacin ya estar lista.
Consejo: Cuando vayas a aplicar el comando Separar sobre una palabra completa
observa que primero lo que hace es separar la palabra en letras individuales. Debers
ejecutar de nuevo el comando para que estas letras se separen y creen una forma.
MACROMEDIA 8...

309

CONSEJOS DE FORMA
Como ocurra en el tema anterior, a veces no nos viene bien el tipo de accin que hace
Flash por defecto. En las interpolaciones de movimiento lo solucionbamos mediante la
gua de movimiento.
En el caso de la interpolacin por forma, es posible que Flash realice la transformacin
de los objetos de una forma que no es la que esperbamos y que no nos conviene para
llevar a cabo nuestro propsito.
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 generarn.
Para aadir un consejo de forma a una interpolacin nos situaremos en el fotograma
inicial y pulsaremos Control + Shift + H (o bien ir al men Modificar Forma
Aadir Consejo de Forma).
Aparecer un crculo 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 estn colocados sobre una curva (vector) que forma un
contorno son amarillos para el objeto inicial y verdes para el final.
Dicho crculo debemos colocarlo en un punto del contorno de la figura inicial.
Automticamente 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.
MACROMEDIA 8...

310

Aparecer un crculo 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 estn colocados sobre una curva (vector)
que forma un contorno son amarillos para el objeto inicial y verdes para el final.
Dicho crculo debemos colocarlo en un punto del contorno de la figura inicial.
Automticamente 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.
Ahora realicemos el seguimiento de otro ejemplo, tenemos la siguiente animacin (sin
consejos de forma):
Vamos a insertar un consejo de forma en el punto indicado en los grficos situados un
poco ms abajo:
Fijmonos 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

Efectos sobre la Interpolacin de Movimiento
Para describir todos los efectos que podemos aplicar sobre una interpolacin de
movimiento previamente creada, sin necesidad de tocar ningn smbolo, nos
centraremos en el Panel Propiedades, cuando seleccionemos un Fotograma que
presente animaciones de Movimiento, los atributos de la animacin a modificar
aparecern en este Panel.

n el campo <Etiqueta de fotograma> podemos darle un nombre a la interpolacin que
nos ayudar a identificarla en la barra de tiempos. Aparecer a lo largo de todos los
fotogramas que la componen.
MACROMEDIA 8...

311

Escalar: Esta casilla, al activarla, permite un incremento/decremento progresivo del
tamao del objeto inicial cuando sus dimensiones son distintas a las del objeto que est
en la posicin final de la animacin.
Todas las interpolaciones de movimiento que hemos hecho hasta ahora tenan esta
opcin activada aunque no lo hayamos indicado expresamente. Flash la activa por
defecto, ya que es lo ms normal. De no ser as podramos encontrarnos con una
animacin como la siguiente.

Como vemos Flash hace el desplazamiento de posicin, pero el cambio de tamao se
produce bruscamente en el ltimo fotograma.
Aceleracin: Esta barra deslizante nos permite determinar la aceleracin del primer
tramo de la animacin. Podemos elegir valores entre -100 y 100. Si el valor de
aceleracin es negativo el smbolo se mover despacio primero e ir acelerando de
manera progresiva. Si dicho valor es positivo provocar un efecto opuesto.
Podemos por ejemplo dar la impresin de que un objeto, por ejemplo un coche, arranca,
va cogiendo velocidad poco a poco (valor -100) y despus va frenando y disminuyendo
su velocidad hasta pararse.
EFECTOS SOBRE EL SMBOLO INTERPOLADO
Ya vimos en temas pasados cmo aplicar efectos sobre smbolos y vimos que se poda
lograr efectos vistosos. No obstante, cuando los efectos muestran su verdadera potencia
es cuando el smbolo forma parte de una animacin
Para explicar y demostrar las posibilidades de estos efectos
vamos a abrir el Panel Propiedades, que nos mostrar, en la
pestaa Color los posibles efectos a aplicar si seleccionamos
una instancia de un smbolo cualquiera de nuestra pelcula.
Podemos aplicar los efectos sobre cualquier smbolo de cualquier fotograma de la
animacin, 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
despus aplicar el efecto..
Para entender bien lo que sigue, es necesario controlar la aplicacin de efectos sobre
instancias. Esto lo vimos en el Tema 9 y por eso omitiremos detalles sobre cmo aplicar
efectos concretos sobre smbolos.
MACROMEDIA 8...

312

EFECTO BRILLO
El efecto de brillo, como su propio nombre indica, nos viene muy bien
para simular el hecho de que algn 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 semforo 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
interpolacin 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 ms alto o ms bajo segn fuera el
smbolo 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 fotograma. 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 ratn por encima o simplemente efectos de cambio de color en
presentaciones.
El tintar colores supone un toque alegre y muy visto en las presentaciones y si se usan
varios efectos, combinados adecuadamente, dota de un ritmo rpido a la animacin,
como una explosin de color que sorprenda al receptor de la pelcula.
Otro interesante uso de este efecto es simular la proyeccin de una luz de color sobre
un objeto que se va acercando al foco. Veamos un ejemplo de
esto.

MACROMEDIA 8...

313

Vemos como al acercarse el avin a la luz roja del Sol, ste lo ilumina con una luz roja.
Hemos aplicado a la instancia del avin del ltimo fotograma de su interpolacin 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%.
3 2 1

CONSIDERACIONES SOBRE EL TAMAO DE LAS PELCULAS
Antes de aventurarnos a publicar nuestra pelcula para que otros la vean, sobretodo si la
vamos a publicar en una pgina web, donde el tamao de descarga es de vital
importancia, debemos tener en cuenta los siguientes aspectos
CONSIDERACIONES EN EL DIBUJO:
Aunque los degradados queden muy vistosos, tambin requieren ms memoria, por lo
que debemos evitar su uso excesivo, en la medida de lo posible.
La herramienta Pincel gasta ms memoria que el resto de herramientas de dibujo, por lo
que deberamos elegir estas ltimas en la medida de lo posible.
Hemos visto que la animacin de lneas es bastante til. Sin embargo el uso de lneas
que no sean las definidas por defecto y que usamos en el captulo que hemos comentado,
MACROMEDIA 8...

314

har que el tamao de la descarga aumente. Por tanto evitemos las lneas discontinuas,
de puntos .
Dibujar las curvas con el menor nmero de nodos posible.
CONSIDERACIONES EN LA ORGANIZACIN:
Agrupar los objetos que estn relacionados, con el comando Modificar Agrupar.
Si hemos creado un objeto que va a aparecer varias veces, deberamos convertirlo a
smbolo, ya que como hemos visto, Flash lo colocar en la biblioteca y cada vez que
quiera mostrarlo, har referencia a una nica posicin de memoria.
Ya hemos comentado el mayor tamao de los mapas de bits, lo que hace que debamos
minimizar el nmero de apariciones de stos en nuestra pelcula.
CONSIDERACIONES EN LOS TEXTOS:
Utilizar lo ms que podamos las interpolaciones de movimiento y las guas para
reducir el nmero de fotogramas clave y el tamao de la pelcula.
Evitar el uso de la interpolacin por forma para animaciones de cambio de color,
cuando sea posible
Independientemente de la optimizacin que hagamos, a veces no se puede evitar que el
tamao de la pelcula aumente. Es recomendable entonces hacer un preloader
(precarga) cuando la pelcula que queramos publicar sea de tamao superior a
unos 80KB.
PRELOADER. CARGAR LA PELCULA ENTERA ANTES DE REPRODUCIRLA
Un PRELOADER se usa principalmente para evitar la carga parcial de la pelcula,
mientras esta se est reproduciendo, lo que, en ocasiones en las que la pelcula es de un
tamao considerable, hace que la pelcula se vea entrecortada.
Normalmente, los PRELOADER se hacen vistosos para que el observador no se
aburra y deje de lado la opcin de visitar nuestra web. Suelen llevar alguna animacin
sencilla que se va reproduciendo mientras se est cargando simultneamente la pelcula
principal, mucho ms grande.
Se pueden complicar mucho ms, pero nosotros haremos uno sencillo que nos sirva
para entender bien el concepto, y la manera de hacerlo.
Partimos de que ya tenemos nuestra pelcula terminada. Si queremos saber su
tamao podemos ir a Archivo Configuracin de publicacin seleccionar la pestaa
Flash, y marcar la casilla Generar Informe de Tamao. Si pulsamos el botn Publicar,
aparecer en nuestro directorio un archivo de texto donde se explica con detalle el
tamao de nuestra pelcula.
Ahora insertaremos una nueva escena (Insertar
Escena). Deber ser la primera que se ejecute.
MACROMEDIA 8...

315

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 pelcula se llama "Pelcula" (lgicamente). Deber quedar algo similar a lo
que muestra la imagen. En la escena recin creada insertaremos otra capa, de manera
que nos queden dos capas a las que llamaremos, "Accin" y "Cargando".
En la capa "Cargando" crearemos una animacin sencilla. Por ejemplo, hagmosle
honor al ttulo y escribamos "Cargando..."; puedes aplicarle la animacin que prefieras,
siempre que no sea muy compleja.
En la capa "Accin" disearemos el "corazn" del preloader. Vamos a hacer que la
animacin de nuestra escena de carga se ejecute repetidas veces, hasta que se haya
cargado la escena que contiene la pelcula 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 accin gotoAndPlay,
que por defecto nos escribir "gotoAndPlay ()" y nos situar el cursor en el interior del
parntesis para que introduzcamos la escena y el fotograma al que se deber ir al
ejecutar dicha accin. En nuestro caso queremos ir al fotograma 1 de la escena
"Pelcula", con lo que escribiremos lo siguiente: gotoAndPlay ("Pelcula", 1);

Ahora seleccionamos el penltimo fotograma, que es el que impedir que se llegue al
ltimo (o sea, que repetir el bucle que muestra la animacin "cargando") cuando an
no se haya cargado la pelcula por completo. Para hacer esto, elegimos la accin
_framesloaded (fotogramas cargados) y la accin _totalframes (fotogramas totales) e
indicamos en el panel acciones lo que queremos hacer. Sera algo como "Cuando el
nmero de fotogramas cargados sea mayor o igual al nmero de fotogramas totales,
entonces comenzamos a reproducir la pelcula" (aunque sea tericamente imposible que
el nmero de fotogramas cargados sea mayor que el de fotogramas totales, nunca est
de ms incluir esta condicin por si acaso Flash contabiliza internamente los fotogramas
de un modo diferente). Podramos escribir algo como lo que muestra la imagen:
MACROMEDIA 8...

316

Con esto, hacemos que aparezca en la pantalla el texto "cargando" y mientras se
reproduce su animacin, iremos comprobando peridicamente si la pelcula principal
est cargada por completo, si no lo est seguiremos mostrando el texto "cargando" hasta
que la comprobacin que hacemos en el ltimo fotograma nos indique que nuestra
pelcula se ha cargado. En ese momento, dejaremos que la animacin del preloader
llegue a su ltimo fotograma, que contiene la accin que nos llevar a reproducir la
pelcula.
Y esto es todo lo que hay que hacer para crear un preloader (aunque por supuesto
se puede hacer ms sofisticado), con lo que los visitantes ya no huirn de nuestra WEB.
DISTRIBUCIN COMO ARCHIVO SWF EN UN REPRODUCTOR AUTNOMO
Para poder distribuir pelculas 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 creacin de un archivo
SWF. Estas opciones se pueden ver en el panel de Configuracin de Publicacin, al que
podemos acceder mediante el men Archivo Configuracin de Publicacin (Pestaa
Flash).
Veamos cules son estas opciones:
Versin: Si queremos publicar nuestra pelcula para que sea vista con versiones
anteriores de Flash, debemos seleccionar aqu la versin 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
pelcula conforme los objetos son cargados. As, en caso de que nos interese que
aparezcan antes unos objetos que otros seleccionaremos uno o el otro.

Versin de ActionScript: El uso de ActionScript 2 nos permitir usar las
novedades relativas a objetos, clases etc... Si nuestra pelcula slo usa acciones
sencillas podemos dejar en esta pestaa la opcin ActionScript

Generar Informe de tamao: Esta opcin la hemos usado en el apartado
anterior. Si la activamos, se crear un archivo de texto con una relacin detallada
del tamao del documento.

Proteger Frente a Importacin: Activando est casilla conseguiremos que
cuando otro usuario (o nosotros mismos) queramos importarla no podamos o
tengamos que introducir una contrasea si se ha escogido alguna.
MACROMEDIA 8...

317

Omitir acciones de Trazado: Las acciones de traza se emplean para comprobar
el correcto funcionamiento de la pelcula durante la creacin de esta (durante las
pruebas). Tambin se consideran trazas los comentarios que insertemos en el
cdigo Action Script. Si activamos esta seal, la pelcula creada no los incluir,
ocupar menos tamao y ahorraremos tiempo innecesario. Es recomendable
cuando se publique la pelcula de un modo definitivo.
Depuracin Permitida: Permite que se pueda depurar el archivo SWF. Tambin
exige la introduccin de una contrasea ya que se debe tener permiso del creador
para Importar el archivo y depurarlo.

Comprimir pelcula: Comprime la pelcula al mximo posible.
Calidad JPEG: Si en el panel de propiedades del mapa de bits no hemos indicado
una compresin concreta, aqu podremos determinar su grado de compresin,
que determinar a su vez el espacio ocupado en memoria por este tipo de
imgenes. A mayor compresin, menos espacio en memoria ocupar la imagen,
pero tambin su calidad ser menor.

Establecer Flujo de Audio o Evento de Audio: Esta opcin nos permite acceder
al Panel "Configuracin de Sonido" desde donde podemos configurar, para cada
tipo de sonidos, sus caractersticas.

Suplantar configuracin de sonido: Con esto se suplantarn los niveles de
compresin seleccionados para cada archivo de sonido de nuestro documento.

MACROMEDIA 8...

318

DISTRIBUCIN PARA PGINAS WEB

Esta es una parte importante, ya que normalmente las pelculas de Flash estn
orientadas a la publicacin va Web.

Para publicar una pelcula Flash en Internet de manera que forme parte de una pgina
web deberemos insertarla en un archivo tpico de pginas web cuyo lenguaje de
programacin sea del estilo del HTML. Para ello debemos atender a las opciones de
publicacin HTML que nos ofrece Flash, y que nos ayudarn a que nuestra pelcula se
visualice como realmente queremos.

Las opciones de este tipo de publicacin estn en Archivo Configuracin de
Publicacin... (Pestaa HTML).

plantilla: Para incrustar una pelcula Flash en un documento HTML, hay que escribir
una serie de cdigos de programa algo complejos y laboriosos de hacer a mano.
Para facilitarnos esta tarea Flash hace esto automticamente pero, puesto que cada
web es distinta y nuestras necesidades van a ser muy distintas, los cdigos tambin
sern muchos y distintos, por esto Flash incluye Plantillas, que crean este cdigo
automticamente segn el tipo de publicacin que deseemos:
En el botn Informacin que est a la derecha de la pestaa "Plantilla" se nos muestra
informacin muy til sobre cada tipo de plantilla. Estas son las plantillas ms
comunes:
Flash con FSCommand: Imprescindible cuando se usen FSCommand.
Mapa de Imgenes: Si hemos incluido una Imagen Map (imgenes completas que
ejecutan distintas acciones segn la coordenada que se pulse) debemos activar esta
opcin.
Pocket PC 2003: Especialmente diseado para Pocket Internet Explorer en Pocket PC
2003.
QuickTime: Permite incluir una pelcula QuickTime. etc.

Detectar Versin de Flash: Desde aqu podemos seleccionar si queremos que nuestra
pelcula detecte la existencia o no existencia del plugin de Flash en el ordenador del usuario,
as como las pginas web donde se insertar el cdigo encargado de comprobarlo y las
pginas 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 ms grande que estas dimensiones provocar un cambio en
stas.
Reproduccin: Permite realizar determinados cambios en cuanto a la
reproduccin de la pelcula:
Pausa al Comienzo: Permite que sea el usuario quien haga que se inicie la
reproduccin, que inicialmente aparecer detenida.
MACROMEDIA 8...

319

Reproduccin Indefinida: Cuando la pelcula termine, volver a empezar desde el
principio. Esto lo har infinitamente.
Visualizar Men: Permite que al hacer el usuario clic con el botn derecho del ratn
sobre la pelcula, el men emergente tenga todas las opciones por defecto. Si la
desactivamos slo aparecer la opcin "Acerca de Flash".
Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los textos sin animacin de
la pelcula por las fuentes predeterminadas en la mquina de quien la visualice.
Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los textos sin animacin de
la pelcula por las fuentes predeterminadas en la mquina de quien la visualice.

Calidad: Aqu podemos modificar la calidad de visualizacin de la pelcula, que depende
del suavizado de la imagen y el tiempo de reproduccin. Las opciones son:

Baja No hay suavizado. El tiempo de reproduccin es el de mxima velocidad. Baja
Automtica: El reproductor detecta si la mquina soporta en cada instante un ligero
suavizado, si lo soporta, lo aplica. El tiempo sigue siendo muy rpido.
Alta Automtica: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna
limitacin, 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 slo si no hay animacin. Da
preferencia a la buena visualizacin.
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 reproduccin dentro de las ventanas de
Windows:
Ventana: Se reproduce la pelcula en la ventana de la web en la que est insertada.
MACROMEDIA 8...

320

Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrs de la
pelcula no se vean (en pginas DHTML). Transparente sin Ventanas: Es el opuesto al
anterior. Permite que los objetos situados detrs se vean.

Alineacin HTML: Posicin relativa de la pelcula dentro de la pgina web
HTML. Tenemos varias opciones:
Predeterminada: Centra la pelcula en la pgina. Si no cabe se cortan los
extremos.
Izquierda: Alineacin a la izquierda. Tambin se recortan los bordes si no cabe.
Derecha: Alineacin a la derecha.
Superior: Alineacin en el borde superior de la pgina.
Inferior: Alineacin en el borde inferior de la pgina.

Escala: Si hemos especificado el tamao en pxeles o en tanto por ciento, podemos
decirle a Flash cmo distribuir la pelcula en el rectngulo que hemos decidido que la
contenga:
Predeterminada: Se ve toda la pelcula guardando las proporciones originales.
Sin Borde: Recorta (en caso de que la pelcula sea ms grande que el rectngulo) todo lo
que sobre con el fin de mantener las proporciones.
Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la
pelcula ocupe el rectngulo completo.
Alineacin Flash: Se hace necesario alinear la pelcula cuando esta no tiene las mismas
dimensiones que el rectngulo definido. Las opciones son:
Alineacin Horizontal: Podemos escoger entre Centro, Izquierda o Derecha.
Alineacin Vertical: Podemos escoger entre Centro, Superior o Inferior.
Mostrar Mensajes de advertencia: Permite que se muestren los posibles mensajes de
error de cdigo Acto Script.
Aqu podemos ver un ejemplo de publicacin de una pelcula Flash para la Web
QU ES EL ACTIONSCRIPT?
El ActionScript es el lenguaje de programacin 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 pelcula Flash. Absolutamente de todo.
Sin embargo, en estos dos temas slo vamos a ver una pequea introduccin a ActionScript
que servir para sentar las bases que permitirn empezar a trabajar con ActionScript. Ensear
a programar con ActionScript requerira otro curso completo. Profundizar en el conocimiento
MACROMEDIA 8...

321

de este lenguaje queda por cuenta del lector. Recomendamos seguir la estupenda Ayuda
incluida en Flash 8.
Todo lo referente a este captulo hace referencia a la versin 2 de ActionScript, ltima versin
de este lenguaje de programacin lanzada por Macromedia e incorporada en Flash MX 2004.
Caractersticas generales del ActionScript
Como ya hemos comentado, el ActionScript es el lenguaje de programacin
propio de Flash, tal y como el Lingo lo es de Macromedia Director, por ejemplo. El
ActionScript est basado en la especificacin 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 aplicacin de fragmentos de cdigo ActionScript a los objetos
existentes en nuestras pelculas nos permiten alcanzar nuestros objetivos.
El ActionScript es un lenguaje de programacin 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 versin se acerca ms a un lenguaje de este tipo. As, la versin
2.0 estrenada en Flash MX 2004 es mucho ms potente y mucho ms "orientada a
objetos" que su anterior versin 1.0
El ActionScript presenta muchsimos parecidos con el JavaScript; si conoce
JavaScript, la sintaxis y el estilo de ActionScript le resultarn muy familiares. Las
diferencias entre ambos lenguajes las puede encontrar en la ayuda que acompaa
al Flash 8.
n la mayor parte de las ocasiones, no ser necesario "programar" realmente,
Flash 8 pone a nuestra disposicin una impresionante coleccin de "funciones"
(de momento entenderemos "funciones" como "cdigo ActionScript que realiza
una funcin determinada") ya implementadas que realizan lo que buscamos,
bastar con colocarlas en el lugar adecuado.

INTRODUCCIN A LA PROGRAMACIN CON ACTIONSCRIPT
Si bien hemos catalogado este tema como "bsico", la palabra adecuada sera
"necesario". pues si bien el objetivo de este tema NO es ensear programacin, no
podemos pasar por alto que ciertos conceptos relacionados con ella deben conocerse
para poder llegar a entender el ActionScript. Vamos pues a explicar algunos conceptos
fundamentales, necesarios para abordar la programacin mediante ActionScript.
Script: Cdigo escrito en cualquier lenguaje de programacin que realiza una
tarea determinada. As por ejemplo, el cdigo ActionScript necesario para que al
pulsar un botn de Flash pasemos al fotograma siguiente es un script.
Variable: Vamos a explicar la interpretacin del trmino variable en
programacin mediante un ejemplo sencillo.
Si tenemos la expresin: x = 3;
MACROMEDIA 8...

322

Tenemos que x es una variable que toma el valor 3. Se llama variable precisamente
porque puede cambiar de valor en cualquier momento durante la ejecucin de nuestra
pelcula Flash. Todos los datos que se manejan normalmente son variables (salvo
aquellos constantes, por ejemplo el nmero 3). As, en un formulario, el nombre es una
variable (de tipo cadena de caracteres o string), el apellido tambin, la direccin, el
telfono etc...
Expresin / Sentencia: Conjunto de operadores, constantes, variables o
acciones. Provocan un resultado o una accin determinada y SIEMPRE deben ir
terminados por ' ; ' (punto y coma).
Funcin: Una funcin es una porcin de cdigo (ActionScript en nuestro caso)
que tiene un nombre determinado y que realiza una labor concreta. Ejemplo, la
siguiente definicin de funcin:
Funcin Incrementa(x) {x = x + 1;}
Realiza la funcin de tomar la variable "x" y sumarle uno a su valor. Si quisiramos
ejecutarla en algn lugar de nuestra pelcula, bastara con escribir: "Incrementa(x)",
siempre y cuando la definicin de la funcin (que es el cdigo mostrado arriba) est en
cualquier parte de la pelcula que se ejecute ANTES que la llamada a la funcin.
Accin: Flash llama Accin a funciones que l mismo ha implementado y que no
requieren ser definidas para ser usadas. Basta por tanto, con escribir la llamada a
la funcin. Estas acciones son lo que usaremos la mayora de las veces, pues
resultan sumamente fciles de usar y muy potentes. Las acciones aparecen en el
Panel Acciones y se pueden insertar en nuestro cdigo con un simple clic de
ratn.
Por ejemplo "gotoAndPlay(3)" es una accin que provoca que Flash pase a ejecutar el
fotograma 3.
Ahora que entendemos qu son las funciones, deberemos comprender tambin, que en
alguna parte, Flash ha definido la funcin "gotoAndPlay" (tal y como hemos hecho
nosotros anteriormente con la funcin "IncrementaX") y ha escrito un cdigo que
provoca el efecto ya comentado. Por suerte todo esto no nos debe preocupar, Flash 8 se
encarga de todo. Nos basta con conocer las acciones y saber cmo usarlas.
Parmetro: Un parmetro es una variable que entra o sale de una accin o de
una funcin. Ponemos un ejemplo para clarificar esta definicin:
Tenemos la siguiente definicin de funcin:
Funcin Suma5 (p_ entrada, p_ salida) {p_ salida = p_ entrada + 5;}
maginemos que tenemos una variable x que vale 7 y otra variable y que queremos que
valga 7 + 5. Ejecutaramos la funcin "Suma5" del siguiente modo: Suma5( x , y ). Vamos
a ver qu hace exactamente la funcin con los parmetros x e y.
MACROMEDIA 8...

323

Al ejecutar "Suma5( x , y)", Flash busca definiciones de funciones que se llamen Suma5,
enseguida encontrar la definicin que hemos escrito arriba, (que deber estar escrita
en alguna parte de nuestra pelcula ANTES de ejecutar "Suma5( x, y )"). Cuando lo hace,
comprueba que la funcin que ejecutamos COINCIDE con la cabecera de la definicin,
esta cabecera abarca el nombre de la funcin y todo lo que venga a continuacin hasta
que se cierre el parntesis. En nuestro caso, la cabecera sera "Suma5 (p_ entrada, p_
salida)"
Aqu viene la pregunta inminente, Coinciden?. La respuesta es S, para que coincidan
DEBE coincidir el NOMBRE de la funcin y el nmero de parmetros, que sern variables
o valores separados por comas. Como tenemos 2 parmetros en cada parte, todo
coincide y pasa a ejecutarse la funcin. La funcin ejecutada es "Suma(x , y)", por lo que
lo que en realidad se ejecutar ser:
Funcin Suma5(x, y) {y = x + 5;}
ras ejecutarse esta funcin, y valdr lo que valiese x ms 5. Es lo que queramos.
La variable 'x' ha actuado como parmetro de entrada, pues aporta un dato a la funcin,
el valor 'y' comienza entrando en la funcin, pero es un parmetro de salida porque ha
sido modificado DENTRO de la funcin.
Programacin Orientada a Objetos (POO): ActionScript es un lenguaje orientado a
objetos, esto quiere decir que la informacin se organiza en grupos denominados clases.
Cuando queremos emplear una clase en nuestra pelcula, usamos una instancia de ella,
denominada OBJETO. Los objetos, y por tanto, las clases, tienen Propiedades
(caractersticas) y Mtodos (comportamientos). Pongamos 2 ejemplos para clarificar
esto:
- El objeto Persona tiene:
- Propiedades: Nombre, edad, altura...
- Comportamientos: hablar, correr, saltar...
- El objeto Clip de Pelcula tiene:
- Propiedades: color, anchura, altura...
- Comportamientos: gotoAndPlay, Stop, Play, LoadMovie...
Evidentemente el primer objeto es meramente didctico, el segundo objeto es un objeto
de Flash (salvo que las propiedades estn definidas en ingls), y probablemente el ms
importante...
Los objetos los podemos encontrar tambin en el Panel Acciones, su uso es sencillo.
Veamos un ejemplo:
MACROMEDIA 8...

324

Tenemos el objeto Clip1, que es una instancia de la Clase MovieClip y por tanto, tiene sus
mismas Propiedades y Mtodos.
- Clip1._height = 20;
Con la lnea anterior, estamos diciendo a Flash que el objeto Clip1 tiene una altura de 20
(inmediatamente Flash la modificar en el fotograma en el que se encuentre). La sintaxis
de Flash establece que debe existir el separador "._, no vale la pena entrar a describir el
porqu. Siempre ser as, no lo olvidemos.
- Clip1.Play();
Esta accin ejecutar el mtodo Play, que pertenece a los Clips de Pelcula, provocar
que se comience a ejecutar la lnea de tiempos del Clip1. Ntese que aqu no hay "_"
como separador, slo un "."
Ya conocemos los conceptos "bsicos" de Flash 8. Si pensamos en que, con slo 1 lnea
podemos modificar la altura de un objeto de nuestra pelcula DURANTE LA EJECUCIN
DE LA MISMA (y no mientras la crebamos como hasta ahora), podremos hacernos una
idea de lo que nos permitir el ActionScript ... Podremos dar vida a nuestras animaciones
y conseguir una interactividad total con el usuario. Podremos conseguir una pelcula
completamente multimedia.
El conocimiento y comprensin de estos conceptos no es un requisito para comenzar a
programar con ActionScript, programar por intuicin es una prctica muy comn en
este tipo de lenguajes. En este curso recomendamos saber lo que se est haciendo en
todo momento y conocer bien qu es cada cosa, y pensamos que hacer un esfuerzo
inicial nos gratificar constantemente durante nuestro aprendizaje de ActionScript, pues
con todo lo anterior claro y un poco de trabajo, pronto pasaremos a ser programadores
expertos y en ese momento la intuicin deja de ser til...
EL PANEL ACCIONES
n Flash 8, el Panel Acciones sirve para programar scripts con ActionScript. Esto es, que
todo lo que introzcamos en dicho Panel se ver reflejado despus en nuestra pelcula.
Debemos tener claro desde un principio que el Panel Acciones puede hacer referencia a
Fotogramas u objetos, de modo que el cdigo ActionScript introducido afectar tan slo
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 rpido y muy cmodo a todas las acciones, objetos,
propiedades etc... que Flash tiene predefinidos. Estos elementos estn divididos en
carpetas, que contienen a su vez ms carpetas clasificando de un modo eficaz todo lo que
Flash pone a nuestra disposicin. Para insertarlos en nuestro script bastar con un doble
clic sobre el elemento elegido.
Posteriormente veremos con detalle los distintos elementos de este Panel.
MACROMEDIA 8...

325

la parte derecha tenemos el espacio para colocar nuestro script, aqu aparecer lo que
vayamos insertando. Tambin incluye herramientas de utilidad, como la bsqueda 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 edicin, por lo que tiene mucho ms en comn con el mod en el que se
trabajaba con Flash MX que con la anterior versin Flash MX 2004.
La libertad del modo "Experto" es total y por tanto, tambin 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 cdigo en busca de posibles errores, indicndonos, en su caso, la lnea que
presente el error y en qu consiste ste
Es un fallo comn pasarse horas buscando porqu nuestra pelcula no funciona
correctamente y que el motivo sea que un error de sintaxis ha invalidado todo el cdigo
existente en un fotograma, que acta como si no hubiera NADA DE CDIGO en l.
Pongamos pues, mucha atencin en esto y revisemos el cdigo concienzudamente.
MACROMEDIA 8...

326

El uso del modo en asistente es mucho ms sencillo para ello pulsa el botn Asistente de
Script y selecciona los comandos que quieras incluir, aparecern las opciones que
debers rellenar para que estos comandos funcionen correctamente y el cdigo se
generar automticamente. Esta es una muy buena utilidad recuperada que permitir a
los usuarios que acaban de empezar el uso de este lenguaje.
Aun as es recomendable siempre repasar el cdigo y as irnos familiarizando con l y de
este modo poder poco a poco crear nuestro propio cdigo en modo Experto, lo que nos
dar mayor flexibilidad a la hora de crear nuestras pelculas.
Los operadores
ntrando un poco ms a fondo en la sintaxis y el manejo del ActionScript, vamos a
comenzar hablando de los operadores, por ser la parte ms elemental de una accin de
ActionScript (y de muchsimos otros lenguajes de programacin).

Un operador es un tipo de carcter que realiza una accin especial dentro de una
expresin de ActionScript. Una expresin no es ms que un conjunto de operadores,
variables y constantes relacionados entre s de un cierto modo. Flash 8 sacar un
resultado de toda expresin que encuentre en nuestra pelcula. Por ejemplo:
x = 3 ; --> Es una expresin cuyo resultado ser asignarle a la variable ' x ' el valor 3 (que
es una constante)
y = 5 + x ; --> Es una expresin 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 expresin es asignarle a ' y ' el valor 8 (3 + 5).
Flash nos permite usar multitud de operadores, vamos a comentar los ms comunes. El
lector puede acceder a los dems (y a estos) desde el Panel Acciones en la carpeta
Operadores. Vamos a clasificar los operadores tal y cmo lo hace Flash 8.
Operadores Aritmticos
+ : Suma. Este operador sirve, como es de esperar, para sumar 2 valores.
- : Resta. Realiza la operacin esperada de restar 2 valores.
* : Multiplicacin. Realiza el producto de 2 valores
/ : Divisin. Es la clsica operacin de dividir. Al contrario que en algunos lenguajes de
programacin, este operador s que realiza la divisin completa (incluyendo decimales)
% : Operador Resto. Este operador, no muy conocido en matemtica, es un clsico de la
programacin. Devuelve el resto entre 2 nmeros. Ejemplo: 4 % 3 = 1, 4 % 2 = 0.
MACROMEDIA 8...

327

Operadores de Asignacin
= : Igual. Este es el operador ms importante de esta categora y sin duda, uno de los
ms usados. Almacena el valor situado en la parte derecha de una expresin 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 categora son en realidad formas de realizar varias
operaciones de una vez, describiremos uno a modo de ejemplo, el resto funcionan
exactamente igual.
+= : MsIgual. Este operador asigna a la expresin situada a la izquierda del operador el
valor resultante de sumar la expresin situada a la parte derecha con la expresin de la
parte izquierda. Ejemplo: (Suponemos que x = 4 e y = 3) entonces, la expresin x += y
provocara que x pasase a valer el resultado de sumar ( 3 + 4 ). Por tanto, la expresin x +=
y es equivalente a hacer: x = x + y.

Operadores de Comparacin
== : Probar Igualdad. Este operador sirve para comprobar si 2 expresiones son iguales.
Si lo son, el valor de la expresin de comparacin es 'true', que significa 'verdadero'. Por
motivos semnticos, decir que una expresin 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 expresin es igual a otra, nos ser muy til para
comprobar muchas cosas durante nuestra pelcula y en funcin 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 pelcula flash. A ese campo le llamamos "edad
usuario". Le hacemos pulsar un botn "Continuar" y en ese momento comprobamos su
edad, si tiene 20 aos, le decimos una cosa, de lo contrario, le decimos otra distinta.
Bastara 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 ms adelante, de modo que no nos preocupemos
por no entender perfectamente el cdigo escrito arriba. Tambin faltara, lgicamente,
crear las funciones "dar_mensaje_1" y "dar_mensaje_2".
MACROMEDIA 8...

328

> : Mayor que. Devuelve como resultado verdadero (1) si la expresin 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 expresin 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 expresin 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 expresin 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 expresin de la
izquierda es diferente a la de la derecha. De lo contrario, devuelve false (0). Ejemplo: 3
!= 4 provocara que la expresin total valdra 1 (true o verdadero). Pues 3 es,
efectivamente, distinto de 4.

Otros Operadores
( ) : Parntesis. Sirven, como es de esperar, para agrupar trminos y dar preferencias en
las operaciones (al igual que en las matemticas). Tambin se usa, como ya vimos, para
pasar parmetros a funciones o acciones. (stos deben ir entre parntesis)
" " : 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 tambin 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 carcter o la letra "x". Por tanto,
podremos aadirlo a una palabra, compararlo con otras letras, escribirlo por pantalla
etc.. pero ya no ser una variable.
LAS ACCIONES
Las Acciones son funciones predefinidas de ActionScript, es decir: Flash 8 las crea, y
nosotros slo 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 cmo estn
hechas... Lo importante es que estn listas para usar, lo que facilita el uso de este
lenguaje de programacin y sobre todo, haga muy rpido comenzar a programar.
Al igual que en el caso anterior, explicaremos las Acciones ms importantes. Para
una referencia ms completa, recomendamos mirar la ayuda del programa.
Definiremos las acciones escribiendo su cabecera (nombre + parmetros con un
nombre genrico) para despus explicar qu es cada parmetro.
ACCIONES - CONTROL DE PELCULA
MACROMEDIA 8...

329

Estas acciones se emplean, como su nombre indica, para controlar el flujo de nuestra
pelcula, esto es, para indicar a Flash en todo momento qu fotograma tiene que mostrar,
cundo tiene que parar, dnde seguir etc... Vemoslas y lo entenderemos mejor:
gotoAndPlay / goto: Esta accin ser, probablemente la que ms useis durante la
realizacin de vuestras pelculas. La accin que realiza consiste en mover la cabeza
lectora al fotograma que le indiquemos. La cabeza lectora es lo que determina qu
fotograma de nuestra pelcula se est reproduciendo en cada momento. Si, por ejemplo,
lo movemos del fotograma 1 al 25, lo que veremos instantneamente ser el fotograma
25 y la pelcula continuar reproducindose 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: Nmero o nombre del fotograma al que queremos enviar la cabeza lectora.
Si es un nombre, debe ir entre comillas dobles, si es un nmero, NO.
Ejemplo:
Goto And Play("Escena2", 7); --> Esta accin lleva la cabeza lectora al fotograma 7 de la
escena llamada "Escena2".
Play: Da comienzo a la reproduccin de la pelcula, generalmente porque algo la ha
detenido.
Uso:
Play ();
No tiene Parmetros.
Acciones - Navegador / Red
Estas acciones tienen diversas funciones, describimos las ms importantes:
Escoman: Esta accin, es capaz de ejecutar ciertos comandos muy potentes. Lo ms
cmodo es pasar a Modo Bsico (sino estbamos ya) e insertarla, nos aparecer una
pestaa con los posibles comandos que admite:
- fullscreen : Si se activa pone nuestra pelcula a pantalla completa. Muy til para
presentaciones en CD-ROM, por ejemplo.
- allowscale: Controla el redimensionamiento de los objetos insertados en la pelcula
cuando el usuario estira los bordes de la misma (o de la pgina web en la que se
MACROMEDIA 8...

330

encuentre) Queremos mantener las proporciones? Este comando nos permite
controlarlo.
- show men: Si has visto el men que aparece al pulsar el botn derecho del ratn sobre
una pelcula Flash, seguro que has pensado en hacerlo desaparecer ... puede que no
interese que los usuarios puedan moverse a sus anchas por nuestra pelcula. Ejecutando
esta sentencia del modo adecuado (false), podremos ocultarlo.
- trepallkeys: Sirve para detectar las pulsaciones de todas las teclas durante la
reproduccin de nuestras pelculas.

Todas estas alternativas, comparten modo de uso, vemoslo:
Uso:
FSCommand ("comando, true / false")
Comando: El comando a ejecutar (fullscreen, allowscale, etc...)
True / false: Aqu debemos escribir true o false, segn queramos desactivar la opcin o
activarla.
Ejemplo:
FSCommand ("fullscreen", "true"); -> Activa la pantalla completa.
URL: Esta accin se emplea para abrir el navegador web y abrir la pgina web que
deseemos.
Uso:
GetURL (url, ventana, "variables")
Url: Direccin web a la que queremos acceder (se abrir una ventana).
Ventana: Parmetro OPCIONAL. Modo en el que queremos abrir la ventana (en la
ventana actual (_ self) en otra nueva (_blank) etc...)
Variables: Parmetro OPCIONAL, puede haber varios. Si la pgina lo permite (es ASP,
PHP etc...) podemos enviarle variables.
Ejemplo:
getURL("http://www.aulaclic.com", "_blank");
MACROMEDIA 8...

331

LoadMovie / loadMovieNum: Esta accin permite cargar nuevas pelculas Flash o
imgenes en nuestra pelcula de forma dinmica (la pelcula se cargar cuando se lo
indiquemos, y no antes).
Uso:
LoadMovieNum (url, nivel / destino, variables)
Url: Direccin absoluta donde est situada la pelcula SWF o la imagen JPEG
Nivel / destino: Nivel donde cargaremos la pelcula, teniendo en cuenta que el nivel
bsico es el 0, luego va el 1 y as sucesivamente. Cada nivel superior se sita delante del
anterior y toma el control. Si lo usamos como destino, aqu deberemos introducir el
nombre del movieclip donde cargaremos la pelcula o el nombre del marco si estamos
cargando un fichero SWF en una pgina HTML con marcos.
Variables: Parmetro OPCIONAL. Podemos enviar variables.
Ejemplo:
LoadMovieNum ("MiPeli2.swf", 0) --> Cargamos la pelcula "MiPeli2.swf" en el nivel
principal. No enviamos variables.

ACCIONES - CONDICIONES
Estas acciones sirven para controlar la lgica de la pelcula. 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, Cmo indicarle a Flash que "si la
variable x = 3, entonces vaya al fotograma 5, y si no, vaya al fotograma 10"?. Sabemos
comparar, sabemos ir a los fotogramas, pero no sabemos decirle a Flash "Si pasa esto,
haz una cosa, y si no, haz la otra...". Veamos cmo decrselo:
If ... else: Si partimos de que la traduccin 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 (condicin) {sentencias1 ... } else {sentencias2 ... }
If: Indica que accin que viene a continuacin es una condicional
MACROMEDIA 8...

332

Condicin: Indica una condicin 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 condicin 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
comparacin y el valor que devuelven.
sentencias1: Conjunto de acciones que sucedern si la condicin se evala como
verdadera. Si hay ms de 1, deben incluirse todas ENTRE LLAVES
Else: Especifica la alternativa si condicion se evala a falso. Es OPTATIVO. Si no existe, y
no se cumple la condicin, no se har nada, pues no lo hemos especificado.
sentencias2: Conjunto de acciones que sucedern si la condicin se evala como falsa. Si
hay ms 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
pelcula, sino, volvemos al fotograma 1.
LOS OBJETOS
Los Objetos, como ya hemos visto en el tema bsico, son instancias de una determinada
clase. Esto es, son representantes de una clase ya definida. As, son objetos, por ejemplo,
un botn, un clip de pelcula, un grfico o un sonido... es decir, que prcticamente TODO
es un OBJETO en Flash 8.
Vamos a ver los objetos ms usados en Flash y una breve descripcin de cada uno de
ellos. Como ya se ha explicado en el tema bsico, cada objeto tiene una serie de
Propiedades (que veremos despus) y unos Mtodos y eventos, que dan funcionalidad a
los objetos. Cuando un componente de Flash pasa a ser un objeto, automticamente pasa
a tener todas las propiedades definidas por Flash para ese objeto y pasa a reaccionar
ante los Mtodos y eventos que tiene definidos. Podeis encontrar una lista con todas las
propiedades, mtodos y eventos de los objetos en el Panel Acciones.
OBJETO "BUTTON" (BOTN)
Los objetos de tipo Botn tienen 4 estados, como ya se ha visto en el captulo
correspondiente y reaccionan ante mtodos especiales como "OnRollOver", "OnPress" ...
que permitirn que sucedan cosas cuando el usuario haga clic sobre estos botones, pase
el ratn por encima etc...
MACROMEDIA 8...

333

Cuando nos interese que una imagen que hayamos diseado se comporte como un
botn, bastar convertirla a botn (del modo visto en el captulo correspondiente) y ya
podremos usar los eventos tpicos de un botn.
OBJETO "MOVIECLIP" (CLIP DE PELCULA)
Cuando necesitemos crear una pelcula Flash dentro de otra pelcula, pero no queramos
tener 2 ficheros separados ni molestarnos en cargar una pelcula u otra, deberemos
crear un objeto movieclip. Entre sus propiedades especiales destaca que los objetos "clip
de pelcula" tienen, internamente, una lnea de tiempos que corre
INDEPENDIENTEMENTE de la lnea de tiempos de la pelcula principal de Flash, lo que
nos permite crear animaciones tan complejas e independientes como queramos
(podemos crear tantos clips de pelcula 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 haramos con un botn o un clip de pelcula. Deberemos
controlarlos, por tanto, desde el Panel Acciones y usando ActionScript. Tienen multitud
de mtodos especiales, muy potentes y tiles, podemos parar un sonido, crear un bucle,
darle efectos sonoros etc.
Podramos, por ejemplo, crear un objeto de tipo sonido y despus hacer que al pulsar un
botn suene. (En el tema siguiente se ver algn ejemplo de uso de sonidos)
OBJETO "MOUSE" (RATN)
El objeto mouse es uno de los objetos de Flash que ya est definido por Flash, pues hace
referencia al ratn de Windows (al que manejar el usuario que vea nuestra pelcula). Si
lo usamos, podremos acceder a las propiedades del ratn de Windows, tipo de cursos,
efectos asociados, deteccin de su posicin etc...
Vale la pena insistir en que su manejo NO es anlogo al de otros objetos como el botn,
pues podemos crear tantos botones como queramos y hacer con ellos lo que decidamos,
pero el objeto Mouse es nico y acta sobre el ratn del PC del usuario que vea nuestra
pelcula. Se puede decir que es un objeto "externo" que permite que otras partes del
Sistema Operativo interacten con nuestra pelcula Flash. Por tanto, es muy potente.
OBJETO "MATH" (MATEMTICAS)
Es uno de los mltiples objetos "abstractos" de Flash, ni es visual, ni parece que
corresponda a nada existente en el sistema (como el objeto "Mouse"). Su funcin es muy
importante, pues nos permite usar frmulas matemticas de modo muy sencillo. En el
tema siguiente veremos algn ejemplo de su uso.

MACROMEDIA 8...

334

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 mtodos que Flash implementa sobre ellas: Seleccionar
subcadenas de letras, buscar una determinada letra en una palabra, convertir la palabra
a letras maysculas y un largo etc...
Las Propiedades
Los Mtodos suelen ser especficos de cada objeto, y su estudio requerira 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 cules son las ms usadas y qu representan.
Para usar las propiedades, se debe colocar el nombre del objeto seguido de un punto (.)
y despus la propiedad y su valor. Las propiedades siempre comienzan con un guin
abajo ( _ ). Algunas propiedades se pueden escribir sin el nombre del objeto al que hacen
referencia delante, en ese caso, harn referencia a la pelcula principal.
ALPHA
Hace referencia a la opacidad del objeto al que afecte. La opacidad se puede definir como
la no-transparencia. 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 pelcula o de la pelcula principal que el sistema lleva
cargados en memoria. (Si se usa sin nombre de objeto delante obtenemos los fotogramas
cargados de la pelcula principal). Muy til para crear cargadores o "preloaders"
_TOTALFRAMES
Devuelve la cantidad de fotogramas que contiene el clip de pelcula al que hace
referencia. Si se emplea sin ningn nombre delante, nos devuelve la cantidad de
fotogramas de la pelcula Flash actual. Tambin usado en la creacin de cargadores (en
el tema siguiente veremos cmo estas propiedades)
_HEIGHT
Devuelve la altura del objeto en pxeles. Por ejemplo, si tenemos un clip de pelcula
llamado "Clip1" y escribimos "Clip1._height" obtendremos la altura de Clip1. Del mismo
modo, podemos cambiarla sin ms que hacer: Clip1._height = 100; (la altura del Clip1
pasara a ser de 100 pxeles)
_WIDTH
MACROMEDIA 8...

335

Propiedad idntica a la anterior, pero devuelve la anchura.
_VISIBLE
Determina si el objeto est o no visible en nuestra pelcula. Cuando vale 1, lo est,
cuando vale 0, pasa a ser invisible. Es muy til para hacer desaparecer partes de una
pelcula en un momento determinado. Por ejemplo, si queremos que al pulsar un botn
desaparezca el clip de pelcula 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 posicin o para asignarla de forma dinmica (durante la ejecucin de
nuestra pelcula Flash)
_Y
Con esta propiedad obtenemos las coordenadas del objeto respecto del eje de las X. Sirve
para averiguar la posicin o para asignarla de forma dinmica (durante la ejecucin de
nuestra pelcula Flash)
Veremos un ejemplo para utilizar ActionScript y referirnos a las propiedades de los
smbolos de nuestras pelculas. Lo primero que debemos hacer es darles un nombre de
instancia (al cual nos referiremos cuando escribamos el cdigo). Para ello, y con el
smbolo 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 rectngulo al que hayamos llamado r1 escribiremos
el siguiente cdigo asocindolo a un botn (creado anteriormente) en el panel Acciones
para cambiar la anchura del primero:
FLASH. NAVEGACIN
En este tema veremos los puntos ms importantes en los que te podrs apoyar para
realizar tus animaciones en Flash usando ActionScript.
MACROMEDIA 8...

336

Esta unidad, la de Navegacin, est especialmente orientada a la web, pues veremos
cmo crear elementos que te ayudarn ms 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 teora de forma guiada.

LOS BOTONES
Uno de los elementos que ms nos van a ayudar a la hora de aadir interactividad en el
diseo son los botones.
En el ejemplo nos hemos ayudado de los botones para crear la navegacin entre las
diferentes secciones.

As que el primer paso, despus de haber creado la interfaz de la pelcula en una capa,
ser crear e insertar los botones en una nueva capa para trabajar con mayor facilidad.
Para asignarle una accin a un botn 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 ms tarde para llamar al botn) en el Inspector de Propiedades,
en este caso lo hemos llamado equipo.
MACROMEDIA 8...

337

Luego, con el botn seleccionado, abrimos el Panel Acciones y aadiremos el cdigo que
deber realizar el botn.
sta es la parte ms importante pues deberemos decidir a qu estmulo (o evento)
responder el botn. Existen varios eventos que son capturados en Flash, nombraremos
los ms importantes:
PRESS: ejecuta la accin al presionarse el botn.
RELEASE: ejecuta la accin al soltarse el botn (despus de haberlo presionado).
ROLLOVER: ejecuta la accin al desplazar el ratn dentro del botn.
ROLLOUT: ejecuta la accin al desplazar el ratn fuera del botn.
Por ello, escribiremos en el panel acciones el siguiente cdigo para nuestros botones:
ON (relase) {}

CONTROLADORES DE LA LNEA 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 lnea de tiempo:

De esta forma, si no aplicsemos ninguna accin sobre la lnea de tiempo, todas las
secciones se ejecutaran una seguida de la otra. Lo que queremos conseguir es que se
ejecute la primera (para mostrar la seccin principal) y el cabezal se pare hasta nueva
orden (para mostrar la segunda).
Para ello utilizaremos la funcin stop ().
Esta funcin sirve para parar el cabezal de la lnea de tiempo donde sea colocada. As
que seleccionamos el ltimo fotograma de la seccin y abrimos el Panel Acciones.
All deberemos escribir nicamente la lnea: stop ();
MACROMEDIA 8...

338

Esto har que cuando la animacin 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 ms rpido a ella. El mtodo es el mismo, solamente habr que crear
fotogramas claves en aquellos sitios en los que queramos insertar un stop ().
Ya hemos conseguido detener la presentacin. Pero, cmo hacemos que se muestre la
segunda? Muy sencillo.
Los botones nos ayudarn a desplazar el cabezal por la lnea de tiempo. As que
modificaremos el cdigo de uno de los botones donde habamos escrito:
ON (relase) {}
Para que se pueda leer lo siguiente: ON (relase) {gotoAndPlay (21) ;}
De esta forma, al hacer clic sobre ese botn, el cabezal de reproduccin se desplazar
hasta el fotograma 21 y reproducir a partir de all. Si aadimos un stop () en el ltimo
fotograma de la segunda seccin, cuando ste se reproduzca se parar y el contenido
permanecer esttico en espera de una nueva orden.
Existe otra forma, muy til, para nombrar los fotogramas. Del mismo modo que dbamos
un nombre de instancia a un botn lo haremos con un fotograma.
Basta con introducir una Etiqueta de fotograma para poder remitir el cabezal a ste:

Por ejemplo:
ON (relase) {gotoAndPlay ("encuntranos");}
Adems de estos controladores podemos utilizar tambin:
gotoAndStop (fotograma), que situar el cabezal en el fotograma indicado y
parar la reproduccin.
Play (), que har que la reproduccin prosiga en el fotograma en el que se
encuentre el cabezal.
MACROMEDIA 8...

339

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 lnea de cdigo, para ver cmo se
hace visita este tema bsico
COMPORTAMIENTOS
Es posible asignar un salto de fotograma a cualquier fotograma u objeto sin tener que acceder
al Panel Acciones, para ello simplemente selecciona el objeto o fotograma y haz clic en
Ventana Comportamientos. Se abrir el siguiente panel:
Desde aqu aadir acciones es muy sencillo. El nico inconveniente es que las opciones son
bastante limitadas y no son tan verstiles como la escritura directa del cdigo ActionScript.
Para crear un salto en la lnea de tiempo debers hacer clic en el botn para aadir un
comportamiento nuevo.
Luego selecciona Clip de Pelcula y podrs elegir entre dos opciones que nos interesan:

Como hemos visto anteriormente la diferencia entre la opcin Ir y detener en fotograma o
etiqueta e Ir y reproducir en fotograma o etiqueta es simple.
La primera desplaza el cabezal hasta el fotograma indicado y lo detiene all. La segunda
desplaza el cabezal y sigue reproduciendo a partir de all.
MACROMEDIA 8...

340

Elijas la opcin que elijas, el cuadro de dilogo que se abrir ser similar:

En esta ventana debers especificar el fotograma al que quieres saltar. Podrs referirte
a l como un nmero o como una etiqueta (si se le fue asignada una).
El campo relativo/absoluto lo explicaremos ms adelante cuando veamos los movieclips.
Pero, como adelanto, en principio no importa cul de los dos elijas si no vas a utilizar el
smbolo asociado a la accin en otro sitio.
De todas formas es recomendable el uso de la opcin Relativo, pues as el salto se har
respecto al objeto en s y no al lugar en el que se encuentra.
Pulsa el botn Aceptar y el cdigo ActionScript se generar solo. No tendrs que hacer
nada ms.
LAS ESCENAS
Flash permite el uso de escenas para separar diferentes temas en una sola pelcula. Se
suelen utilizar sobre todo en animaciones, donde una parte de la accin 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 pelcula, por ejemplo, crear una escena para el cargador, otra para
la pelcula principal y una tercera para una seccin que se diferencie completamente del
resto y nos sea ms cmodo trabajar con ella independientemente.
A pesar del hecho de que las escenas se trabajan como lneas de tiempo diferentes, al
crear el archivo SWF stas se alinean en orden reproducindose una detrs de otra.
Por ello, al publicar el documento los fotogramas de las escenas se numerarn 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 estn 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 ms adelante, de cargar en cualquier momento
archivos SWF para reproducirlos en la pantalla principal. De esta forma
MACROMEDIA 8...

341

emularamos el uso de las escenas cargando diferentes documentos dependiendo
de la seccin a mostrar.

Cuando aadimos ActionScript a nuestras escenas el resultado puede ser, a veces,
imprevisible. Como hemos explicado anteriormente, al crearse un archivo con
una lnea de tiempo continua las acciones a realizar pueden ser inesperadas.
En el Panel Escena (brelo desde Ventana Otros paneles Escena) podrs ver las
escenas actuales de la pelcula.

n principio solamente encontrars una (Escena 1), es posible aadir ms escenas
pulsando el botn Aadir 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 botn Eliminar escena o duplicarla con el
botn Duplicar escena .

Como hemos comentado antes (y si no existe cdigo ActionScript que modifique esto)
las escenas se reproducen una despus 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
cuestin 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. Podrs trabajar con ella como si se tratase de una
pelcula independiente.
Pero veamos cmo podemos utilizar ActionScript para desplazarnos de escena a escena.
Antes hemos mencionado las funciones prevScene () y nextScene (). Estos comandos
hacen que el cabezal de reproduccin se desplace de una escena a otra en el orden en el
que se encuentran en el Panel Escena.
Pero existe otra posibilidad.
MACROMEDIA 8...

342

Segn el ejemplo que estamos siguiendo creamos una nueva escena llamada escena
otros. En el botn Otros Restaurantes hemos aadido el siguiente cdigo:
ON (relase) {gotoAndPlay ("escena otros", 1);}
Con esto estamos indicando que al soltarse el botn 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 Pelcula vimos que se tratan de objetos con lnea de tiempo
propia.
Podemos utilizarlos para incluir elementos en nuestra pelcula con una animacin
independiente. De este modo aunque la pelcula principal est detenida el clip seguir
actuando segn su propio cabezal de reproduccin.
Existen mtodos para manejar la lnea de tiempo de los clips, idnticas a las anteriores, y
que veremos a continuacin.
Lo primero que deberemos aprender es a acceder a las propiedades y mtodos 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 botn el movieclips avance en su lnea de tiempo hasta su
fotograma 20. El cdigo que deberemos escribir en el botn ser el siguiente:
ON (relase) {mi Clip. gotoAndPlay (20);}
Fjate en cmo hemos escrito la funcin. Primero hemos sealado el clip sobre el que
queremos actuar escribiendo su nombre de instancia:

Y despus de aadir un punto hemos indicado la funcin que se ejecutar.
De esta forma (y como hemos visto en temas anteriores) podemos acceder a todas las
propiedades del clip. Escribiendo esta lnea haremos que el clip se haga invisible:
ON (relase) {mi Clip._ visible = false;}
MACROMEDIA 8...

343

Para hacerlo un poco ms complicado podramos encontrarnos en el siguiente supuesto.
Imagina que tenemos un movieclips llamado clip Padre. Dentro de este clip de pelcula
tendremos ms smbolos y uno de ellos puede ser otro movieclips llamado clip Hijo.
Cmo accedemos a las propiedades y funciones de clip Hijo? Muy fcil. Suponiendo que
estamos trabajando desde la pelcula principal donde tenemos insertado el clip Padre,
escribiremos lo siguiente:
clip Padre. clip Hijo. Play ();
As haremos que la reproduccin de clip Hijo se reanude.
Pero, qu pasa si queremos ejecutar la orden desde dentro de clip Padre? Imagina que
dentro del movieclips hay un botn y el clip clip Hijo. Queremos que al pulsar el botn se
reproduzca el fotograma 20 de clip Hijo, entonces deberamos escribir lo siguiente en las
acciones del botn:
ON (relase) {clip Hijo. gotoAndPlay (20);}
Como puedes ver esta vez no hemos mencionado a clip Padre en la lnea de cdigo. No es
necesario porque ya nos encontramos dentro de l.
Tambin podemos referenciarnos a elementos superiores utilizando la palabra
reservada _ parent. De este modo si nos encontrsemos dentro de clip Hijo y
quisisemos avanzar al fotograma 20 de clip Padre deberamos 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, slo deberemos escribir la ruta de contenedores o padres hasta llegar al
objeto del cual queremos modificar o ejecutar un mtodo.
Por lo dems, el funcionamiento de un clip no se diferencia en nada a la lnea de tiempos
de cualquier otra pelcula. Podemos etiquetar los fotogramas de igual modo para
llamarlos directamente por su nombre:
Mi Clip. 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
permitirn ejecutar cdigo dependiendo de los eventos que se produzcan sobre ellos.
Los que ms utilizaremos sern:
MACROMEDIA 8...

344

MOUSEMOVE: se ejecuta cuando el ratn se mueve sobre el fotograma. Puedes
utilizar las propiedades _x mouse e _y mouse para averiguar la posicin del ratn
en ese momento.
MOUSEDOWN: se ejecuta cuando se presiona el botn del ratn.
MOUSEUP: se ejecuta cuando se suelta el botn del ratn.
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 ON ClipEvent.
Veamos un ejemplo:
ON ClipEvent (mouse up) {this. Visible = true;}
Este bloque de cdigo debe situarse en las acciones del movieclips (igual que hacemos
con los botones). Es por ello que al referirnos a la propiedad _visible escribimos antes
this para referenciar el clip en cuestin.
This siempre har referencia al objeto donde se encuentre la variable.
Nota: Estos manejadores son tan vlidos para movieclips como para la pelcula general
en s, pues podramos considerar que una pelcula es un movieclips ms grande.
Tambin existen modos de capturar estos eventos sin tener que escribir el cdigo
dentro del movieclips.
Sera de la siguiente forma:
Mi Clip. OnPress = function () {mi Clip. Play () ;}
Estos eventos tienen que asociarse con una funcin (veremos este concepto en el punto
siguiente). Pero de esta forma podemos escribir el cdigo directamente sobre el
fotograma y controlar cuando se ejecuta una accin sobre el movieclips.
En el ejemplo, el clip comenzar a reproducirse en cuanto se haga clic sobre l.
Veamos el conjunto de eventos ms importantes para los movieclips:
ONPRESS = FUNCTION () {}: se ejecuta cuando se presiona el botn del ratn
sobre el movieclips.
ONRELEASE = FUNCTION () {}: se ejecuta cuando se suelta el botn del ratn
sobre el movieclips.
ONROLLOVER = FUNCTION () {}: se ejecuta cuando se desplaza el ratn dentro
del movieclips.
ONROLLOUT = FUNCTION () {}: se ejecuta cuando se desplaza el ratn fuera del
movieclips.
ONKEYDOWN = FUNCTION () {}: se ejecuta cuando se presiona una tecla con el
clip de pelcula resaltado.
MACROMEDIA 8...

345

ONKEYUP = FUNCTION () {}: se ejecuta cuando se suelta una tecla con el clip de
pelcula resaltado.

En el uso de formularios podremos utilizar muchos elementos. Pero los principales
sern siempre los mismos: cajas de texto y botones.
De vez en cuando utilizaremos otros elementos como los radios Buttons, checkBoxes,
combo Boxes o listBoxes. Veremos como utilizarlos y a sacarles el mayor partido.
Flash ofrece estos objetos como componentes. Para acceder a ellos slo tendrs que
abrir el Panel Componentes desde Ventana Componentes.
Una vez abierto el panel haz clic en User Interface para desplegar sus elementos y vers
todos los componentes que podrs utilizar.

Incluso para la introduccin de texto en formularios
es aconsejable el uso de componentes, pues
veremos que poseen propiedades que las simples
cajas de texto no tienen.
Para utilizar alguno de estos componentes basta con
arrastrarlo del panel al escenario, o puedes
arrastrarlo a la biblioteca para utilizarlo ms tarde.
En cualquier caso, cuando hayas aadido el
componente a tu pelcula debers darle un nombre
de instancia para poder acceder a l en el cdigo y
configurar sus opciones en el Panel Parmetros:

MACROMEDIA 8...

346

Veamos cuales son las opciones para los diferentes componentes:
TextInput (Introduccin de texto):
editable: true o false. Permite que el texto se pueda editar o no.

password: true o false. Oculta el contenido del texto mostrndose un asterisco
por carcter.

texto: Indica el texto inicial de la caja.
Text rea (rea de texto):
editable: true o false. Permite que el texto se pueda editar o no.
HTML: true o false. Permite que se acepte contenido HTML dentro de la caja de
texto. Propiedad muy til para incluir enlaces en el texto.
TEXT: Indica el texto inicial de la caja.
WORDWRAP: true o false. Permite que se pueda realizar un desplazamiento del
texto de arriba abajo. En caso de que no se permita (false) cuando el texto sobre
pase el rea del componente aparecer una barra de desplazamiento que
permitir mover el texto de izquierda a derecha.
Buttons (Botn):
I con: Aade un icono al botn. Para insertar un icono debers crear un grfico o clip de
pelcula y guardarlo en la Biblioteca. Una vez all seleccinalo y haz clic derecho sobre l
y selecciona Vinculacin. Marca la casilla Exportar para ActionScript en el cuadro de
dilogo que aparecer y dale un nombre en Identificador. Este nombre es el que debers
escribir en el campo icono del componente botn. Ni el botn ni el smbolo se ajustar al
tamao del otro, as que debers modificar sus tamaos para que el icono no sobresalga
del botn.
LABEL: Texto que se leer en el botn.
labelPlacement: left, right, top o botn. Indica la posicin de la etiqueta de texto
en caso de que se utilice junto a un icono. Respectivamente, izquierda, derecha,
arriba y abajo.
selecta: true o false. Indica si el botn se encuentra seleccionado.
toggle: true o false. Cuando se encuentra a true hace que el botn pueda tomar
dos posiciones, presionado y no presionado.
Radio Buttons (Botn de opcin):
data: Especifica los datos que se asociarn al Radio Buttons. La propiedad data
puede ser cualquier tipo de datos. Puedes acceder a esta propiedad a travs de
cdigo para ver que contiene.
groupName: Nombre del grupo. En un grupo de botones de opcin slo uno de
ello puede estar seleccionado. Definiremos este grupo mediante esta propiedad.
MACROMEDIA 8...

347

Todos los botones que tengan el mismo nombre en groupName pertenecern al
mismo grupo.
label: Texto que se leer al lado del botn.
labelPlacement: left, right, top o bottom. Indica la posicin de la etiqueta de texto
respecto al botn. Respectivamente, izquierda, derecha, arriba y abajo.
selected: true o false. Indica si el botn se haya seleccionado o no. De nuevo, en
un mismo grupo slo un botn de opcin puede estar seleccionado.
CheckBoxes (Casilla de verificacin):
label: Texto que se leer al lado de la casilla.
labelPlacement: left, right, top o bottom. Indica la posicin de la etiqueta de texto
respecto a la casilla. Respectivamente, izquierda, derecha, arriba y abajo.
selected: true o false. Indica si la casilla de verificacin se haya seleccionada.
Como Box (Lista desplegable):
data: Matriz donde determinaremos el valor qu devolver el componente al
seleccionar determinada posicin.
editable: true o false. Permite la edicin del campo. Mediante ActionScript puedes
hacer que se aadan nuevos elementos a la lista.
labels: Matriz donde determinaremos el nombre de los elementos de la lista.
Estos elementos se correspondern uno a uno a los valores de la matriz
introducida en data. Para ambas propiedades se abrir el siguiente cuadro de
dilogo:

Desde aqu podrs aadir o quitar elementos utilizando los botones y . O alterar el
orden de stos subindolos o bajndolos en la lista con los botones y .
rowCount: Nmero mximo de elementos visibles en la lista. Si este nmero es
superado por los elementos se aadir una barra de desplazamiento.
MACROMEDIA 8...

348

Lista (Lista):
data: Matriz donde determinaremos el valor qu devolver el componente al
seleccionar determinada posicin.
labels: Matriz donde determinaremos el nombre de los elementos de la lista.
Estos elementos se correspondern uno a uno a los valores de la matriz
introducida en data. Para ambas propiedades se abrir el mismo cuadro de
dilogo visto para el Combo Box.
Mltiple Selection: true o false. Permite la seleccin mltiple de elementos
manteniendo la tecla Ctrl presionada. Tambin es posible seleccionar un rango de
elementos seleccionando uno de ellos y pulsando la tecla Shif mientras
seleccionamos otro diferente, todos los elementos intermedios resultarn
tambin seleccionados.
rowHeight: Nmero mximo de filas visibles en la lista. Si este nmero es
superado por los elementos se aadir una barra de desplazamiento.
NUMERICSTEPPER (Contador numrico):
MAXIMUM: Establece el nmero mximo del contador.
MINIMUM: Establece el nmero mnimo del contador.
STEPSIZE: Establece el intervalo en el que se aumenta o disminuye el nmero del
campo al pulsar los botones del componente.
VALUE: Valor inicial del campo.
Nota: Todas las propiedades mencionadas para cada uno de los componentes son
accesibles a travs de ActionScript escribiendo el nombre de instancia del componente
seguido de un punto y el nombre de la propiedad:
Mi Botn. Laval = "Haz clic aqu";

EL COMPONENTE ALERT

El componente Alert es muy til pero se utiliza de forma diferente al resto de los
anteriores.
Este elemento nos permitir el uso de avisos en forma de pop-ups. Para utilizarlo
debers seleccionarlo en el Panel Componentes y arrastrarlo hasta la Biblioteca.
No lo arrastres sobre el escenario, pues no es necesario. Con que se halle presente en
nuestra biblioteca podremos realizar llamadas al componente. Para ello slo deberemos
escribir:
Import mx.controls.Alert;

Alert.show ("mensaje");
La primera lnea la insertamos para poder utilizar el componente y acceder a l
mediante el cdigo. Luego, en el momento en el que la ejecucin llegue a la segunda lnea
saltar un pop-up con el texto que se incluya en mensaje.

MACROMEDIA 8...

349

Hay que tener cuidado con este mtodo, pues mientras en otros lenguajes de
programacin las alertas detienen la ejecucin del cdigo a espera de la aceptacin del
mensaje, ActionScript sigue ejecutando el resto de lneas.
Podremos aadir detectores para que se evalen las acciones realizadas sobre la alerta
utilizando manejadores de eventos. En seguida veremos cmo.
Tambin es posible configurar la alerta de muchas formas. La sintaxis completa del
objeto es la siguiente:
Alert.show (mensaje, titulo, botones, padre, manejador, icono, botonDefecto);
mensaje: El texto del mensaje.

Ttulo: Ttulo del aviso.

Botones: Botones que tendr el aviso. Puedes poner ms de dos, en ese caso debers
separarlos por el smbolo "|". Los botones que puedes aadir son: Alert.OK,
Alert.CANCEL, Alert.YES y Alert.NO. Podemos aadir tambin Alert.NONMODAL para
hacer que el mensaje de alerta no bloquee el resto de la pelcula, y as, aunque el mensaje
se muestre, podamos seguir interactuando con el resto de la ventana.

padre: Determina el movieclips sobre el que se abrir la alerta centrndose respecto a l.
Para referenciar a la pelcula principal (_root) escribe null o undefined.

manejador: El nombre del manejador que se encargar de gestionar el clic sobre la
alerta.

Icono: El nombre del icono que queremos que aparezca a la izquierda del mensaje. Para
incluir un icono deberemos vincularlo. Para ello haz clic derecho sobre el grfico o clip
de pelcula en la Biblioteca y selecciona Vinculacin. Luego marca la casilla Exportar
para ActionScript y dale un nombre de Identificador. Ser a ste al que debers
referenciar en el Alert.show ().

BotonDefecto: Determina el botn por defecto de la alerta. Utiliza la misma notacin que
antes: Alert.OK, Alert.CANCEL, Alert.YES y Alert.NO. Se activar este botn cuando se
pulsa la tecla Intro.
Un ejemplo de manejador y alerta sera esta:
Import mx.controls.Alert;

var mi Manejador: Function = function (mi Evento: Objeto) {if (mi Evento. detail ==
Alert.OK) {// acciones} else if (miEvento.detail == Alert.CANCEL) {// acciones}}

Alert.show ("Mensaje de alerta.", "Ttulo", Alert.OK | Alert.CANCEL, null, miManejador,
"icono", Alert.OK);
Nota: Observa como se han manejado las respuestas de la alerta.

Cuando utilices este mtodo para escribir los mensajes de alerta debers tener en cuenta
que tienes que escribir todas las propiedades en orden y sin saltarte ninguna.
Aunque puedes no escribir algunas, debers hacerlo de esta forma:
"icono", Alert.OK);o
MACROMEDIA 8...

350

"icono"); o
Alert.show("Mensaje de alerta.", "Ttulo", Alert.OK | Alert.CANCEL, null, miManejador);o
Alert.show("Mensaje de alerta.", "Ttulo", Alert.OK | Alert.CANCEL, null);o
Alert.show ("Mensaje de alerta.", "Ttulo", Alert.OK | Alert.CANCEL); o
Alert.show ("Mensaje de alerta.", "Ttulo);

BOTONES DE FORMULARIO
En los formularios, normalmente, incluiremos dos botones: Enviar y Limpiar.
Imagina que llamamos al componente botn de limpiar reset_btn, su cdigo asociado
sera sencillo:

Var escuchador Limpiar: Objeto = new Objeto ();
escuchadorLimpiar.click = function (evt: Objeto) {
campo1_txt.text = "";
campo2_txt.text = "";
campo3_txt.text = "";}
reset_btn.addEventListener ("click", escuchador Limpiar);

Como puedes ver, hemos creado un escuchador para reset_btn. Cuando se activa
simplemente vaciamos el contenido de los campos de texto que queramos.
Tambin podramos iniciar los campos de otra forma:
nombre_txt.text = "Escribe aqu tu nombre";
email_txt.text = "Escribe aqu tu e-mail";
mensaje_txt.text = "Escribe aqu tu mensaje";

En definitiva, puedes tratar los campos como quieras.
Para el botn de envo debers asociar un escuchador del mismo modo, pero el cdigo
que ir incluido en l deber enviar los datos, que ser lo que veamos en el siguiente
apartado.

ENVO DE FORMULARIOS

A partir de ahora veremos cmo afrontar el envo y la recepcin de datos con
formularios.
Lo haremos a travs de este ejemplo, donde encontraremos elementos de entrada (en
los que tendremos que escribir datos para enviarlos) y de salida (donde tendremos que
recoger datos de un archivo externo para mostrarlo).
El envo de datos de formulario lo realizaremos utilizando el objeto LoadVars que ya
hemos visto. Pero en este caso, en vez de recabar informacin, lo usaremos para
enviarla.
Su uso es el siguiente:

Var escuchador Enva: Object = new Object ();
escuchadorEnvia.click = function (evt: Object) {
Var envio: LoadVars = new LoadVars ();

// Rellenamos las variables
MACROMEDIA 8...

351

envio.autor = nombre_txt.text;
envio.email = mail_txt.text;
envio.mensaje = mensaje_txt.text;
envio.onLoad = function (exito:Boolean) {if (xito) { nombre_txt.text = "";mail_txt.text
= "";mensaje_txt.text = "";}else {Alert.show("Ha habido un error en el envo");}}

// enviamos las variables al archivo PHP
envio.sendAndLoad("enviar_comentario.php", envi, "POST");
}
submit_btn.addEventListener("click", escuchador Enva);

Dentro del cdigo de ste hemos declarado un objeto LoadVars llamado envio.
Almacenar las variables en el objeto es tan fcil como escribir lo siguiente:
envio.autor = nombre_txt.text;
envio.email = mail_txt.text;
envio.mensaje = mensaje_txt.text;

Y slo quedara enviarlo con el mtodo send.
envio.send("enviar_comentario.php", "_blank", "POST");
Esta funcin enva las variables almacenadas en LoadVars utilizando el mtodo
especificado en el tercer parmetro (puede ser POST o GET).
Si quieres que el script que se ejecuta se abra en una ventana debers indicarlo en el
segundo parmetro.
Estas dos ltimas funciones son opcionales y podramos escribir solamente:
envio.send("enviar_comentario.php");
En el ejemplo no hemos utilizado el mtodo send, sino el mtodo sendAndLoad.
envio.sendAndLoad("enviar_comentario.php", envi, "POST");
De este modo podemos aadir un controlador onLoad para evaluar si el envo se realiz
correctamente. En el segundo parmetro deberemos indicar cul ser el objeto que se
cargar (en nuestro caso el mismo objeto envi).
Por lo que adems de realizar el envo hemos aadido las lneas:
envio.onLoad = function(exito:Boolean) {if (xito) {nombre_txt.text = "";mail_txt.text =
"";mensaje_txt.text = "";}
else {Alert.show("Ha habido un error en el envo");}
Que vaca los campos si la carga del script se realiz correctamente o muestra una alerta
en caso contrario.
Nosotros en el ejemplo hemos aadido algunos validadores para asegurar que todos los
campos se han rellenado. As, antes de declarar el objeto LoadVars hemos introducido
unas cuantas condiciones del tipo:
if (nombre_txt.text.length == 0) {Alert.show("Introduce tu nombre", "Error",
Alert.OK);return false;}
Donde se evala la longitud del texto del campo nombre. Si llega a la lnea return false;
se saldr de la funcin y no llegar a enviar los datos.

El script enviar_comentario.php se encargara de recibir los datos, tratarlos y luego
almacenarlos o enviarlos por correo.
Nosotros hemos almacenado la opcin en un archivo XML desde donde recuperaremos
la informacin cada cierto tiempo utilizando un bucle en la lnea de tiempo.
MACROMEDIA 8...

352

RECUPERANDO INFORMACIN

En puntos anteriores vimos cmo utilizar el objeto LoadVars para leer informacin de
archivos externos. En este apartado veremos cmo recuperar informacin de un archivo
XML.
Para ello y el primer paso ser crear un objeto del tipo XML:
var comentarios:XML = new XML();
Hemos creado un objeto XML llamado comentarios. Ahora podremos utilizarlo para leer
un archivo XML y tomar la informacin contenida en l.

Una propiedad muy til del objeto XML es la de ignoreWhite, que ignorar aquellos
campos que estn en blanco y as no tendremos que preocuparnos por posibles errores:
comentarios.ignoreWhite = true;

El groso del cdigo que hemos aadido para cargar los datos es el siguiente:
comentarios.onLoad = function(exito:Boolean) {
if (exito) {
comentarios_txt.text = "";

var numeroEntradas = this.firstChild.childNodes.length;
// hacemos un bucle para recorrer todos los elementos del archivo XML
for (var i = numeroEntradas-1; i>=0; i--) {
// guardamos en la variable miXML la ruta del nodo
var miXML:XMLNode = this.firstChild.childNodes[i];

// guardamos el contenido del nodo
var autor:String = miXML.childNodes[0].firstChild.nodeValue;
var email:String = miXML.childNodes[1].firstChild.nodeValue;
var mensaje:String = miXML.childNodes[2].firstChild.nodeValue;

// creamos la variable cadenaFinal donde insertaremos el
contenido html que tendr salida en el cuadro de texto
var cadenaFinal:String;

// y cargamos el contenido del nodo en cadenaFinal

cadenaFinal = "<a href=\"mailto:"+email+"\">"+autor+"</a>: ";
cadenaFinal += ""+mensaje+" ";

// aadimos el contenido de cadenaFinal en la caja de texto
comentarios_txt.text += cadenaFinal;

// y repetimos el bucle} } else {
comentarios_txt.text = "No se pudieron cargar los datos";}}

comentarios.load("lee_comentarios.php");

Ahora explicaremos paso a paso qu hemos hecho.
MACROMEDIA 8...

353

Como puedes ver en la ltima lnea cargamos un script php que genera un documento
XML en el objeto comentarios.
Al cargarlo se ejecuta el controlador onLoad que est definido al principio.
Si la carga tuvo xito, procedemos a coger la informacin del archivo XML generado. Lo
primero que hacemos es vaciar el contenido del rea de texto comentarios_txt.
comentarios_txt.text = "";

Luego pasamos a trabajar con el contenido del archivo XML.
Un archivo XML tiene la estructura muy similar a un archivo HTML, ya que tambin est
basado en etiquetas. El contenido de nuestro archivo es algo parecido a esto:
<?xml versin="1.0" encoding="ISO-8859-1" ?>
<listadoComentarios>
<comentario>
<autor>jos</autor>
<email>jose@correo.com</email>
<mensaje>estoy escribiendo un mensaje</mensaje>
</comentario>
<comentario>
<autor>amparo</autor>
<email>amparo@correo.com</email>
<mensaje>este mensaje tambin se publicar</mensaje>
</comentario>
<comentario>
<autor>miguel</autor>
<email>miguel@correo.com</email>
<mensaje>mensaje de prueba</mensaje>
</comentario>
<comentario>
<autor>cristina</autor>
<email>cristina@correo.com</email>
<mensaje>esto funciona!</mensaje>
</comentario>
</listadoComentarios>
A cada una de las etiquetas (sin contar la de xml) se le llama nodo.

Para navegar por los nodos a travs del objeto XML utilizaremos las propiedades
firstChild (que referencia la etiqueta contenida inmediatamente despus de aquella en la
que nos encontramos) y childNodes (que hace referencia al conjunto de nodos con el
mismo nombre dentro de la etiqueta en la que nos encontramos).
De esta forma XML.firstChild.nodeName nos devolvera el nombre del primer hijo dentro
del archivo XML, listadoComentarios.
As que almacenamos el nmero de comentarios en la variable numeroEntradas
escribiendo:
var numeroEntradas = this.firstChild.childNodes.length;
Esto nos devolver el nmero de hijos de this.firstChild, o lo que es lo mismo de
XML.firstChild.
MACROMEDIA 8...

354

Una vez sepamos cuantas entradas tenemos almacenadas, haremos un bucle para
sacarlas todas. Este bucle lo empezaremos desde el final para tener as las entradas ms
recientes al principio y las ms antiguas al final.

Ahora crearemos una nueva variable llamada miXML que contendr la ruta completa del
nodo comentario para cada una de las vueltas del bucle, as no tendremos que escribirla
entera cada vez que queramos acceder a ella.
var miXML:XMLNode = this.firstChild.childNodes[i];
De esta forma estamos haciendo referencia al comentario nmero i del archivo.
Ahora lo nico que debemos hacer es recuperar la informacin dentro del nodo
comentario.
Como este nodo tiene tres hijos con distinto nombre haremos referencia a ellos como
miXML.childNodes[0], miXML.childNodes[1] y miXML.childNodes[2].

Una vez hallamos comprendido bien estos conceptos slo har falta verter el contenido
de los nodos (utilizando la propiedad nodeValue) en variables que crearemos a su
efecto:
Var autor:String = miXML.childNodes[0].firstChild.nodeValue;
Var email:String = miXML.childNodes[1].firstChild.nodeValue;
Var mensaje:String = miXML.childNodes[2].firstChild.nodeValue;
Una vez tengamos la informacin podemos almacenarla y pasar al siguiente nodo
comentario. As que le damos formato HTML, lo almacenamos en una variable, y
metemos el contenido de esa variable en el rea de texto.
Var cadenaFinal: String;

Cadena Final = "<a href=\"mailto:"+email+"\">"+autor+"</a>: ";
Cadena Final += ""+mensaje+" ";

comentarios_txt.text += cadena Final;
El bucle se repetir de este modo para cada uno de los nodos comentarios y cuando
termine habremos acabado y toda la informacin contenida en el archivo XML estar
(formateada como HTML) en el rea de texto.
OTRAS PROPIEDADES DE LOS FORMULARIOS
Adems de todo lo que hemos visto existen, tambin, otras propiedades bastante
interesantes.
Por ejemplo, el orden de tabulacin. Esta propiedad establece como acta el cursor a las
repetidas pulsaciones de la tecla Tabulador.
Podemos alterar el orden utilizando la propiedad tabIndex. Esta propiedad indicar el
orden en el que se desplazar el cursor cada vez que pulsemos el Tabulador:
nombre_txt.tabIndex = 1;
mail_txt.tabIndex = 2;
mensaje_txt.tabIndex = 3;
reset_btn.tabIndex = 4;
submit_btn.tabIndex = 5;

MACROMEDIA 8...

355

Tambin podemos establecer dnde colocar el cursor (o foco) escribiendo la siguiente
lnea:
Selection.setFocus (nombre_txt);

De este modo en las validaciones que vimos antes podemos hacer lo siguiente:
If (mail_txt.text.length == 0) {
Selection.setFocus (mail_txt);
Alert.show("Introduce tu correo electrnico", "Error", Alert.OK);
return false;
}
As si no se ha rellenado algn campo el foco se sita directamente sobre l para que el
usuario lo rellene sin tener que desplazarse.

Tambin podemos establecer el botn predeterminado del formulario para que cuando
se pulse la tecla Intro sea como si hicisemos clic en l. Escribe la siguiente lnea:
focusManager.defaultPushButton = submit_btn;
De esta forma haremos que el botn predeterminado sea submit_btn.

ESTILOS CSS
Podemos asignar estilos CSS al contenido de una caja de texto que acepte HTML.
Por ejemplo, nosotros en el rea de texto comentarios_txt tenemos algo parecido a esto:
<a href="mailto:ana@correo.com">ana</a>: si actualizo aqu se
ver en otra ventana?
 
<A href="mailto:jesus@correo.com">jess</a>: pues ya
estamos todos
 
<a href="mailto:emilio@correo.com">emilio</a>: yo tambin
me apunto
 
<a href="mailto:david@correo.com">david</a>: bien, pero trae
algo para cenar, no tengo nada en la nevera
 
Obviamente, como el componente admite HTML no veremos el cdigo, sino
directamente su salida. Pero podramos asignarle el siguiente estilo para mejorar la
visualizacin:
a {Font-weight: bold;}

.mensaje {
Font-style: itlica;}

Guardaremos este estilo en un archivo llamado estilo_comentarios.css. Pero, cmo
hacemos para vincularlo al rea de texto?
Fcil. Basta con declarar un nuevo objeto del tipo TextField.StyleSheet y asociarlo a
comentarios_txt.
Para hacer esto escribimos:
Var mi Hoja Estilo: TextField.StyleSheet = new TextField.StyleSheet ();
miHojaEstilo.onLoad = function (exito: Boolean) {
MACROMEDIA 8...

356

If (exito) {
comentarios_ txt.styleSheet = miHojaEstilo;

miHojaEstilo.load ("estilo_comentarios.css");
Cuando se efecta la carga del archivo, si se realiza con xito, se asociar a la propiedad
styleSheet de comentarios_txt.
Y ya tendremos nuestro campo de texto formateado.

Podemos cambiar esta propiedad en cualquier momento, de modo que cuando se asocie
una nueva hoja de estilo mediante la siguiente lnea, el contenido del rea de texto se
redibujar para tomar el nuevo formato.
Mi Hoja Estilo .load ("estilo_alternativo.css");

INCORPORAR FUENTES
Otro de los problemas con los que nos toparemos cuando trabajemos con flash sern las
fuentes que utilicemos.
Solamente debers incluir en tu proyecto aquellas fuentes que quieras utilizar para los
textos dinmicos y de entrada, pues Flash se encargar de gestionar aquellas que utilices
en los estticos.
Para incorporar una fuente en tu pelcula debers hacer clic derecho en alguna parte
vaca de la Biblioteca y seleccionar Nueva fuente.

En el desplegable Fuente selecciona la fuente que deseas utilizar. Debers seleccionar
los estilos que vas a utilizar (Negrita, Cursiva y Tamao), de lo contrario la fuente no
estar disponible.
Dale un nombre, que se mostrar en la Biblioteca y estar lista para utilizarse.

Cuando crees un campo de texto dinmico o de entrada selecciona la fuente que
aparecer sealada con un asterisco (*).

Y no tendrs ms problemas en visualizarlas en equipos en los que no se encuentren
instaladas.

Manual de Dreamweaver

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual de Dreamweaver

Загружено:

Авторское право:

Доступные форматы

MACROMEDIA 8...

Вам также может понравиться