Inspiron 14 3458 Laptop Service Manual Es MX

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL
COMPUTACIÓN E
INFORMÁTICA
MANUAL DE APRENDIZAJE
SOFTWARE
APLICATIVO II
CÓDIGO: 89001565
Profesional Técnico
SOFTWARE APLICATIVO II
CONTENIDO.
I. RECONOCER LA IMPORTANCIA DE FIREWORKS PARA LA GENERACIÓN Y
DISEÑO DE INTERFACES WEB COMO SOFTWARE DE APLICACIÓN. ................. 6
II. ELABORAR DISEÑOS DE INTERFACE WEB UTILIZANDO OBJETOS

VECTORIALES. ............................................................................................................................ 35
III. ELABORAR PROTOTIPOS WEB EMPLEANDO OBJETOS DE TEXTO, FILTROS,

CAPAS Y EL PANEL PÁGINAS. ............................................................................................. 61
IV. RECONOCER LA IMPORTANCIA DE FLASH PARA LA GENERACIÓN Y DISEÑO

MULTIMEDIA DE INTERFACES WEB COMO SOFTWARE DE APLICACIÓN. ..... 85
V. ELABORAR SÍMBOLOS E INSTANCIAS PARA COLOCAR EN LA ESCENA DE

TRABAJO FLASH....................................................................................................................... 107
VI. GENERAR DIVERSOS TIPOS DE MOVIMIENTOS. ...................................................... 125
VII.ELABORAR ANIMACIONES INCLUYENDO SONIDOS Y VIDEOS. ....................... 149
VIII.ELABORAR ANIMACIONES INCLUYENDO ACCIONES. ......................................... 164
IX. RECONOCER LA IMPORTANCIA DE DREAMWEAVER PARA LA GENERACIÓN,

DISEÑO Y ADMINISTRACIÓN DE SITIOS WEB. ........................................................... 173
X. ESTILOS Y ETIQUETAS DIV. ................................................................................................ 196
XI. AGREGAR VÍNCULOS Y NAVEGACIÓN A LAS PÁGINAS WEB. ............................ 212
XII.ELABORAR PÁGINA WEB CON CONTENIDO. ............................................................. 225
XIII.CONECTARSE CON LA WEB. ............................................................................................ 241
ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 5

01
I. RECONOCER LA IMPORTANCIA DE FIREWORKS PARA LA
GENERACIÓN Y DISEÑO DE INTERFACES WEB COMO
SOFTWARE DE APLICACIÓN.
En esta tarea trataremos las siguientes operaciones:
Reconocer las herramientas básicas de Fireworks.

Uso de las herramientas de selección con imágenes Bitmap.
Equipos y Materiales:
 Computadora con microprocesadores Core 2 Duo o de mayor capacidad.

 Sistema operativo Windows 8.
 Software de Adobe Fireworks CS6
Orden de Ejecución:
 Reconocer las herramientas básicas de Fireworks.
 Uso de las herramientas de selección.

1.1. RECONOCER LAS HERRAMIENTAS BÁSICAS DE FIREWORKS.
Adobe Fireworks CS6, es una exclusiva herramienta de edición de imágenes

vectoriales y de mapa de bits, que proporciona el entorno más eficaz para el
diseño de sitios web, interfaces de usuario, la creación y optimización de
imágenes para la web.
Para producir imágenes de calidad para la web, se

debe comprender cómo las imágenes digitales se
crean y a continuación, aprender y aplicar los
principios esenciales del diseño. Hay una serie de
programas con diferentes fortalezas para crear y
optimizar imágenes para la web. Adobe Fireworks
CS6 es un programa diseñado para optimizar
imágenes y gráficos para páginas web.
Fireworks CS6 es una parte integral de Adobe Master Collection CS6 que
permite a creativos experimentar un flujo ininterrumpido de energía e ideas
desde el concepto inicial hasta la ejecución final en dispositivos de impresión,
video, web y móviles.
La integración global es la clave de la eficiencia de Adobe Master Collection

CS6 ya que los diseñadores o comunicadores visuales pueden centrarse en su
proyecto y conseguir resultados de máxima calidad en menos tiempo.
Ingresar a Fireworks.
Para iniciar Adobe Fireworks CS6 realice los mismos pasos que se emplea
para ejecutar cualquier aplicación Windows. Puede iniciar el programa
mediante:
El Botón Inicio , luego escribir en el cuadro de texto Fireworks CS6, se

mostrará una lista de los programas instalados, haga clic sobre el ícono de
Fireworks y abrirá el programa.
De igual manera podrá ingresar al programa mediante el ícono de acceso

directo del escritorio de Windows 8 o mediante el ancla de la barra de tareas.
Página de Inicio de Fireworks CS6.
Al iniciar Adobe Fireworks CS6 sin ningún documento abierto, por cualquiera
de las formas explicadas en el punto anterior, aparece la página de inicio de
Fireworks en el entorno de trabajo.

La página de inicio le ofrece un acceso rápido a las nuevas funciones,

recursos, crear nuevo, archivos recientes y Fireworks Exchange, con el que se
puede añadir nuevas capacidades a algunas funciones de Fireworks.
El espacio de Trabajo de Fireworks.
La pantalla inicial de Fireworks CS6, similar a las aplicaciones de Windows

contiene los siguientes elementos:
Barra Superior, en esta barra usted puede observar el nombre de la aplicación
con las letras FW y otras aplicaciones como acceso a Adobe Bridge, Zoom o
búsqueda.
Barra de Control, Se encuentra en el lado extremo derecho de la barra
superior, le permitirá cerrar, maximizar, minimizar, restaurar, mover o cambiar
el tamaño de la ventana de Fireworks CS6, si presiona el botón cerrar la
aplicación le preguntará si desea guardar el documento actual.
Barra de Menú, en esta barra podemos observar los menús disponibles en
Fireworks CS6, al dar clic en cualquiera de los menús se visualizarán sus
respectivas opciones que contiene cada uno de ellos.
Panel herramientas, este panel contiene todas las herramientas de diseño de
Fireworks CS6, cuando en el ángulo inferior derecho de una herramienta
aparece un triángulo pequeño, indica que la herramienta forma parte de un
grupo, si damos un clic se visualiza el grupo de herramientas. Está organizado
en seis categorías: Selección, Mapa de Bits, Vector, Web, Colores y Ver. Este
panel es personalizable, es decir que podemos agregar más botones o quitar
algunos de los botones existentes, además podemos colocarlo flotante en el
entorno de trabajo, mediante un arrastre en las dos líneas punteadas ubicadas
sobre Selección.
Inspector de Propiedades, nos permite editar las propiedades de la selección,
herramienta o documentos actuales. De forma predeterminada, el Inspector de
Propiedades está acoplado en la parte inferior del área de trabajo.
Paneles, los paneles ayudan a modificar aspectos de elementos u objetos
seleccionados en el documento. Los paneles están inicialmente acoplados en
grupos a lo largo de la parte derecha de la pantalla. Con los paneles se puede
trabajar en capas, símbolos y otros. Los paneles pueden arrastrarse por
separado, por lo que es posible agruparlos en función de las necesidades del
diseñador. Para ocultar o mostrar de clic en la flechita horizontal ubicado al
lado izquierdo del grupo de paneles.
Botones de Presentación Preliminar, los botones de vista previa muestran la
imagen tal como aparecerá en un navegador web, conforme a los parámetros
de optimización. Puede ver el comportamiento de los rollovers y las barras de
navegación, además de las navegaciones. La vista dos y cuatro copias,
muestran datos adicionales que varían en función del tipo de archivo
seleccionado.

Área de dibujo o lienzo, en esta área se creará todos los diseños en

Fireworks CS6, se puede cambiar a un lienzo transparente, modificar color de
fondo, cambiar el tamaño o ajustar al contenido.
Reglas, puede visualizar opcionalmente las reglas para organizar la disposición
del trabajo.
Barra de estado, en esta barra se podrá visualizar el peso del archivo, la
velocidad de conexión a Internet del archivo, el formato del documento, los
controles de animación, el zoom, etc.
Apertura de archivos en Fireworks CS6.
En Fireworks CS6 es fácil abrir y editar gráficos vectoriales y de mapa de bits.
Abrir un Archivo.
1. Diríjase al menú archivo y seleccione la opción Abrir.
2. En el cuadro de diálogo Abrir, seleccione el archivo y dé clic en Abrir.
El cuadro de diálogo Abrir tiene varias opciones:
Buscar en, se puede abrir el cuadro de lista dando clic en el o también en la

flechita hacia abajo que se muestra en la parte derecha. En él se ve un listado
de carpetas alojadas en el escritorio ordenadas en forma de árbol.
Lista de archivos, en este cuadro se muestran los archivos contenidos en la

carpeta que esté seleccionada en el cuadro de lista Buscar en. Cada archivo

aparece en la lista con su respectivo nombre y precedido del icono de

Fireworks CS6.
Nombre, en este cuadro de texto se muestra el nombre de archivo que se ha

seleccionado, también se puede escribir el nombre del archivo que deseamos
aperturar.
Tipo, este cuadro de lista muestra todos los tipos de archivos que podemos
abrir.
Abrir como “Sin título”, esta casilla de verificación se activará si se desea

abrir un archivo sin sobre escribir la versión anterior, una vez abierto el archivo
podrá guardarlo con un nombre diferente y en una ruta diferente si se desea.
Por defecto la ficha de nombre mostrará el nombre Sin título-1.fw.png.
Abrir como Animación, esta casilla de verificación la activamos cuando

deseamos abrir un archivo como animación, en la ficha de título del documento
se muestra Sin título-1.png donde png es la extensión nativa de Fireworks
CS6.
Subir un nivel, este botón nos permite dirigirnos a una carpeta de nivel
superior en el cuadro de lista Buscar.
Crear nueva carpeta, esta opción nos permite crear una nueva carpeta en la
ruta deseada sin tener la necesidad de abandonar el cuadro de diálogo Abrir.
Menú ver, despliega un menú con opciones para elegir la forma como se van a
mostrar los archivos en el cuadro de diálogo Abrir, tal como se muestra en la
siguiente figura.
Vista previa, en este recuadro se visualiza una imagen previa del archivo que
hemos seleccionado en la lista de archivos. Dicha previsualización se realiza

siempre, independiente al tipo de vista que este seleccionado en el menú ver

del cuadro de diálogo abrir.
Creación de nuevos archivos en Fireworks CS6.
Al crear un nuevo archivo o documento en Adobe Fireworks CS6, se genera un

archivo PNG.PNG es el formato de archivo nativo de Fireworks CS6. Este
archivo se puede convertir fácilmente a otros formatos de gráficos web, como
JPEG, GIF animado.
También se puede exportar o guardar imágenes en muchos otros formatos

frecuentemente utilizados fuera de la web, como TIFF y BMP.
Los archivos PNG de Fireworks CS6 se pueden conservar para facilitar las
ediciones posteriores.
Para crear un gráfico web en Fireworks CS6, primero es preciso configurar un

documento nuevo o abrir uno existente. Las opciones de configuración pueden
ajustarse después en el inspector de propiedades.
Crear un archivo nuevo.
Nos dirigimos al menú Archivo y damos un clic sobre la opción nuevo.
Se abre un cuadro de diálogo Nuevo documento.
Anchura, este cuadro de texto nos permite ingresar el ancho que va a tener
nuestro lienzo. Por defecto para el diseño de interfaces o entornos web,
trabajamos con el sistema de medidas pixeles.

Altura, este cuadro de texto nos permite ingresar la altura que va a tener
nuestro lienzo. Se trabaja con el mismo sistema de medida de la anchura.
Resolución, este cuadro de texto ingresamos la resolución que va a tener

nuestro lienzo. Para Internet la resolución adecuada es de 72 pixeles/ pulgada
como mínimo y 96 pixeles/ pulgada como máximo. La cantidad de pixeles de
altura y anchura de una imagen de mapa de bits se denomina dimensiones en
pixeles de la imagen. El número de pixeles por pulgada (ppi) mostrado en
un lienzo determina la resolución de la imagen.
Color del lienzo, en el cuadro de grupo color de lienzo podemos seleccionar

entre las opciones: blanco, transparente y personalizado. Si deseamos
preparar la imagen solo con la silueta de uno o varios objetos sin color de
fondo, para emplearlo en otras aplicaciones compatibles con Fireworks CS6 es
recomendable elegir Transparente, si deseamos emplear un color
personalizado damos clic en la ventana emergente del cuadro de colores
personalizados que por defecto aparece como negro, para elegir el color
deseado.
Ventajas de crear un archivo PNG.
El archivo de origen PNG siempre se puede modificar, es posible seguir

introduciendo cambios incluso después de exportar el archivo para utilizarlo en
la Web.
En el archivo PNG es posible dividir imágenes complejas en porciones y

después exportarlas en archivos distintos de formato diferente y diversos
parámetros de optimización.
Visualización y navegación por el documento.
Podemos controlar el aumento o reducción del zoom en el documento, el

número de vistas y su modo de visualización. Además es fácil desplazarse por
el documento para ver otras partes del mismo, lo cual resulta útil si éste se
amplia y el lienzo ya no está visible en su totalidad.
Utilización de las fichas del documento.
Cuando el documento activo está maximizado, podemos elegir fácilmente

cualquiera de los documentos abiertos utilizando las fichas de documento que
aparecen en la parte superior de la ventana de documento. Todos los

documentos abiertos muestran su nombre en una ficha que aparece encima de

los botones de vistas.
Para seleccionar otro documento cuando el actual está maximizado dé clic en

la ficha del documento que desee ver.
AUMENTO Y DESPLAZAMIENTO DE UN DOCUMENTO.
Fireworks CS6 nos permite ampliar y reducir en porcentajes de aumento

preestablecidos o definidos por el usuario.
o Se puede incrementar la vista del documento con los siguientes incrementos
preestablecidos.
o Seleccione la herramienta Zoom y de un clic en la ventana del documento
para especificar el nuevo punto central. Con cada clic, la imagen se amplía
al siguiente aumento preestablecido.
o En el menú emergente Establecer nivel de aumento de la parte inferior de
la ventana de documento seleccionamos un nivel de aumento.
o Nos dirigimos al menú Ver y seleccionamos Acercar.
o De un clic en el menú Ver, opción Aumentar y reducir y seleccionamos un
nivel de aumento preestablecido.
Para alejar el documento en incremento preestablecido utilice alguna de estos

procedimientos.
o Seleccione la herramienta Zoom y pulse la tecla Alt mientras da clic en la

ventana de documento. Cada clic reduce al siguiente porcentaje
preestablecido.
o Seleccione un nivel de alejamiento en la sección Establecer nivel de
aumento de la parte inferior de la ventana de documento.
o Nos dirigimos al menú Ver y seleccionamos Alejar.

o De un clic en el menú Ver, opción Aumentar y reducir y seleccionamos un

nivel de aumento preestablecido.
Recuperar el nivel de aumento del 100%
o Dé doble clic en la herramienta Zoom del panel de herramientas.
Desplazarse por el documento.
1. Seleccione la herramienta Mano del panel herramientas.

2. Arrastre el cursor con forma de mano sobre la imagen.
Para ajustar el tamaño del Zoom al tamaño de la vista actual del documento
mediante el método abreviado pulse la tecla CTRL acompañado de la tecla
Cero (0) del teclado numérico.
MODOS DE VISUALIZACIÓN PARA GESTIONAR EL ESPACIO DE

TRABAJO.
Los botones de modo de visualización de la sección Ver del panel de

Herramientas se utilizan para controlar la disposición del área de trabajo.
Podemos visualizar a pantalla completa con o sin menú o modo estándar.
Se pueden seleccionar tres modos de visualización.
Modo pantalla estándar.
Es la vista predeterminada de la ventana de documento. Si
ingresamos a los otros modos y luego retornamos a este modo, la
ventana del documento actual se restaura.
Modo pantalla completa con menús.
Mediante esta vista, se maximiza la ventana del documento activo sobre un
fondo gris con los menús, barras de herramientas, barras de desplazamiento y
paneles visibles. En esta vista se ocultan las fichas de títulos de los
documentos.
Modo pantalla completa.
Es la vista maximizada de la ventana de documento sobre un fondo negro sin
menús, barras de herramientas ni fichas de títulos visibles.
PRESENTACIÓN PRELIMINAR DEL DOCUMENTO.
Los botones de vista previa muestran la imagen tal como aparecería en un

navegador Web, conforme a los parámetros de optimización.

Podrá ver el comportamiento de los rollovers y las barras de navegación

además de las animaciones.
Botón original y botones de vista previa del documento
Vista previa.
El botón de vista previa del documento muestra el tamaño total, el tiempo de
descarga estimado y el formato del archivo. El tiempo de descarga estimado es
la media de tiempo que llevará la descarga de todas las divisiones y marcos del
documento.
Las vistas 2 copias y 4 copias.
Estas vistas muestran datos adicionales que varían en función del tipo de
archivo y a los parámetros de optimización del documento seleccionado.
PANEL HERRAMIENTAS.
Este panel contiene todas las herramientas que Fireworks CS6 utiliza para
diseñar. Está organizado en seis categorías: Mapa de bits, Vector, Web,
Colores y Ver.
Podrá personalizar este panel, agregando o quitando más botones, además

podrá colocarlo flotante en el entorno de trabajo, mediante un arrastre en las
dos líneas punteadas que se encuentran sobre la categoría Seleccionar.

Selección de una herramienta en un grupo de herramientas.

Cuando en el ángulo inferior derecho de una herramienta aparece un triángulo
pequeño, indica que la herramienta forma parte de un grupo. Por ejemplo la
herramienta Rectángulo es una forma básica, que incluye las herramientas de
Elipse y Polígono, así como las herramientas de formas automáticas.
Para seleccionar otra herramienta de un grupo de herramientas siga los

siguientes pasos.
De clic en el icono de la herramienta y mantenga pulsado el botón del mouse.
Se muestra un menú emergente con los iconos los nombres y las teclas de
método abreviado de las herramientas.
Desplace el puntero para seleccionar la herramienta que desee y suelte el
botón.
La herramienta aparece en el panel Herramientas, mientras que sus opciones
aparecen en el Inspector de propiedades.
UTILIZACIÓN DEL INSPECTOR DE PROPIEDADES.
El Inspector de propiedades es un panel que varía según el contexto; y que

muestra las propiedades de la selección actual, las opciones de la herramienta
seleccionada o las propiedades del documento.
Expandir, Reducir y Contraer el Inspector de propiedades.

Realice uno de estos procedimientos.
o De un clic en el botón Vistas Inspector de propiedades que se muestra
en la imagen anterior, flecha izquierda; observará como el panel se
reduce con algunas herramientas disponibles.
o De un segundo clic en el mismo botón Vistas Inspector de propiedades,
observará que el panel Inspector de Propiedades se contrae permitiendo
así mayor espacio de trabajo en Fireworks CS6.
o El tercer clic Expandirá la vista del Inspector de Propiedades, donde se
tendrá disponible todos los comandos del panel.

ADMINISTRACIÓN DE PANELES.
Un panel es un tipo particular de controles flotantes que sirven de gran apoyo

en Fireworks CS6 por que nos permiten modificar aspectos de elementos u
objetos seleccionados en el documento. Con los paneles se puede trabajar en
fotogramas, capas, símbolos, muestra de color y otros. Los paneles pueden
arrastrarse por separado, por lo que es posible agruparlos en función de las
necesidades propias.
Algunos paneles aparecer agrupados de forma predeterminada y otros no.
Cerrar todos los paneles.
o Nos dirigimos al menú Ventana y seleccionamos Ocultar paneles.
o Mediante el método abreviado presionamos la tecla F4.
Contraer o expandir un panel o un grupo de paneles.
o Dé clic en el título del panel o grupo de paneles.
o Dé clic en la flecha contraer del ángulo superior derecho del panel o grupo
de paneles.
USO DEL PANEL HISTORIAL PARA DESHACER Y REPETIR ACCIONES.
El panel historial permite ver, modificar y repetir las acciones realizadas para
crear el documento. En este panel se enumeran las últimas acciones realizada
en Fireworks CS6 hasta el número especificado de pasos de deshacer en el
cuadro de diálogo Preferencias. El panel Historial nos permite realizar lo
siguiente:
o Deshacer y rehacer rápidamente las acciones realizadas para crear el
documento. En este panel se enumeran las últimas acciones realizadas en
el panel Historial y repetirlas.

o Copiar comandos seleccionados en el portapapeles como guardar un grupo

de acciones recientes como comando personalizado.
Deshacer y rehacer acciones.
1. Diríjase al menú ventana y seleccione Historial para abrir el panel Historial.
2. Suba o baje el marcador de deshacer.
Repetir acciones.
1. Realice las acciones que usted desee.
2. Realice una de las siguientes acciones para resaltar en el panel Historial las
acciones que se repetirán.
 Para resaltar una acción, de clic sobre ella.
 Para resaltar varias acciones, pulse la tecla Control y de clic sobre ellas.
 Pulse la tecla Shift mientras hace clic para resaltar varios comandos
consecutivos.
3. De clic en el botón reproducir de la parte inferior del panel Historial.
Repetir acciones.
1. En el panel Historial resalte las acciones que desee guardar.
2. De clic en el botón Guardar pasos como un comando del panel Historial.
3. Introduzca un nombre para el comando y haga clic en Aceptar.
MENÚS EMERGENTES.
Este menú también denominado contextual aparece cuando se pulsa el botón
derecho del mouse sobre el elemento que deseamos, dicho menú contextual
cambia de opciones de acuerdo al elemento que hemos pulsado.
DEFINICIÓN DE LOS PRINCIPALES PANELES.
Panel optimizar.
Este panel permite nos permite administrar los parámetros que supervisan el
tamaño, el tipo de archivo, la paleta de colores del archivo o la división que se
van a exportar.

Panel edición de imagen.

Este panel incluye las herramientas y comandos de transformación, ajuste de
colores, filtros y opciones de edición de imágenes más empleadas por
Fireworks CS6.
Panel capas.
Permite organizar la estructura de un documento de Fireworks CS6 y contiene
acciones para crear, eliminar y administrar capas, allanar, fusionar, visualizar.
Panel Propiedades de forma automática.
Este panel nos permite administrar los cambios en las propiedades de una
forma automática que se inserte en un documento.
Panel Estilos.
Este panel nos permite crear, almacenar y aplicar estilos a objetos o texto. Los
estilos son un conjunto de propiedades y atributos almacenados que se
pueden aplicar a un objeto o a un texto.
Panel Biblioteca común.
Este panel contiene símbolos gráficos, de botón y de animación. Es fácil
arrastrar instancias de estos símbolos desde el panel biblioteca al documento.
Panel URL.
Este panel nos permite crear bibliotecas que contengan valores URL utilizados
con frecuencia. En este panel podemos añadir, editar y organizar direcciones
URL los cuales pueden ser instanciados varias veces en un objeto.
1.2. USO DE LAS HERRAMIENTAS DE SELECCIÓN CON IMÁGENES

BITMAP.
Mapa de Bits.
Los mapas de bits son imágenes compuestas por pequeños cuadrados de
color denominados pixel, que se combinan en forma de mosaico para crear una
imagen. En Fireworks CS6 se pueden combinar las posibilidades de la edición
fotográfica, el dibujo vectorial y las aplicaciones de pintura.
Las imágenes de mapa de bits se crean dibujando y pintando con herramientas

de mapa de bits, convirtiendo objetos vectoriales en imágenes de mapa de bits
o abriendo o importando imágenes.
Utilización de la Herramienta Recuadro.
El panel herramientas contiene una sección Mapa de bits en la cual podrá

encontrar herramientas que permitirán seleccionar y editar mapa de bits. Las

herramientas de esta sección se utilizan para modificar los pixeles de un mapa

de bits del documento. Una de ella es la Herramienta Recuadro que permite
editar imágenes importadas.
Realice los siguientes ejercicios para familiarizarse con el programa, siga los
pasos y vuélvalos a ejecutar si fuera necesario.
Cortar, copiar y pegar pixeles.
1. Realice una selección de pixeles con las herramientas Recuadro, Lazo o
Varita mágica.
2. Realice uno de los siguientes procedimientos:

• Elija el menú Edición / Cortar, luego Edición / Pegar.
• Elija el menú Edición / Copiar, luego Edición / Pegar.
• Elija el menú Edición / Insertar / mapa de bits mediante Copiar para
copiar la selección actual en otro mapa de bits.
EDICIÓN DE OBJETOS DE MAPA DE BITS.
En la sección Mapa de bits del panel Herramientas encontramos

herramientas que nos van a permitir editar objetos de mapa de bits, como por
ejemplo seleccionar un área de mapa de bits, retocar, ajustar color y el tono de
un mapa de bits, desenfocar y perfilar mapa de bits.
UTILIZANDO LAS HERRAMIENTAS DE SELECCIÓN DE PÍXELES.
Una de las principales operaciones que se realiza con los objetos de mapa de
bits es seleccionar áreas de los respectivos mapas de bits, para ello contamos
con las herramientas recuadro, recuadro oval, lazo, lazo polígono y varita

mágica. Con estas herramientas podemos seleccionar un área de pixeles ya

sea de forma cuadrada, rectangular, circular, oval y forma libre.
OPCIONES DE LAS HERRAMIENTAS DE SELECCIÓN DE MAPA DE BITS.

Cuando se eligen las herramientas Recuadro, Recuadro Oval, Lazo, Lazo
polígono o Varita mágica, el Inspector de propiedades muestra tres opciones
para cada herramienta:
Recuadro automático.
Si activa la casilla de verificación Recuadro automático usted puede cambiar
los valores del borde y la cantidad de fundido (si se ha especificado Fundido
como opción de Borde) para la selección de mapa de bits mientras emplea las
herramientas Recuadro, Recuadro Oval, Lazo polígono y Varita mágica.
Bordes.
El Inspector de propiedades también muestra tres opciones de bordes para
estas herramientas:
1. Duro crea una selección de recuadro con un borde definido.
2. Suavizado evita la aparición de bordes dentados en la selección del
recuadro.
3. Fundido permite fundir el borde de la selección de pixeles.
Estilo.
Cuando se eligen las herramientas Recuadro o Recuadro Oval, el Inspector de
propiedades también muestra tres opciones de estilo:
1. Normal permite crear un recuadro de altura y anchura interdependientes.
2. Tasa fija limita la altura y la anchura a los valores definidos.
3. Tamaño fijo limita la altura y la anchura a dimensiones definidas.

HERRAMIENTA RECUADRO.
La herramienta Recuadro de la sección Mapa de bits del panel Herramientas

nos permite seleccionar áreas de pixeles específicas de una imagen de mapa
de bits dibujando un recuadro a su alrededor.
Seleccionar un área de pixeles rectangular.

1. Seleccione la Herramienta Recuadro.
2. Defina las opciones Estilo y Borde en el Inspector de propiedades.
3. Arrastre el puntero para trazar un recuadro que defina la selección de
pixeles.
4. Proceda a cortar, copiar o pegar la selección.
5. Puede seleccionar inverso desde el menú Seleccionar para invertir la
selección.
• Si desea puede cambiar los parámetros de su selección mientras utiliza la

herramienta Recuadro (este procedimiento también es válido para las
herramientas recuadro oval, lazo, lazo polígono y varita mágica),
asegúrese de que esté marcada la casilla de verificación Recuadro
automático en el Inspector de propiedades antes de realizar la selección.
Por ejemplo si usted ha seleccionado un área de pixeles con la opción de
borde duro, puede cambiar a borde fundido sin la necesidad de crear de
nuevo la selección.
• Para crear una selección rectangular desde un punto central, anule la
selección de los demás recuadros activos y después mantenga pulsada la
tecla Alt mientras arrastra el puntero. Si desea crear una selección cuadrada
desde su centro pulse las teclas Alt y Shift mientras arrastra el puntero.
• Para desactivar la selección presione la tecla Esc.
HERRAMIENTA RECUADRO OVAL.
La herramienta Recuadro oval de la selección de mapa de bits del panel

Herramientas nos permite seleccionar áreas de pixeles específicas de una
imagen de mapa de bits dibujando una selección elíptica o circular a su
alrededor.

Crear una selección circular.

1. Seleccione la Herramienta Recuadro oval.
2. Defina las opciones de Estilo y Borde en el Inspector de propiedades.
3. Mantenga presionada la tecla Shift y arrastre el puntero para trazar un
recuadro que defina la selección circular de pixeles.
• Para crear una selección elíptica desde un punto central, anule la

selección de los demás recuadros activos y después mantenga pulsada la
tecla Alt mientras arrastra el puntero. Si desea crear una selección cuadrada
desde su centro pulse las teclas Alt y Shift mientras arrastra el puntero.
• Para desactivar la selección presione la tecla Esc.
HERRAMIENTA LAZO.
La herramienta Lazo de la selección Mapa de bits del panel Herramientas nos

permite seleccionar un área de pixeles de estilo libre en la imagen. Para crear
la selección de estilo libre primero defina el estilo y borde; duro suavizado o
fundido, luego arrastre en forma libre el puntero del mouse sobre el área de la
imagen que desee seleccionar.
Crear una selección estilo libre de pixeles.

1. Seleccione la Herramienta Lazo.
2. Defina la opción Borde en el Inspector de propiedades.
3. Arrastre el puntero para crear una selección de estilo libre en la imagen.

HERRAMIENTA LAZO POLÍGONO.
La herramienta Lazo polígono de la sección mapa de bits del panel

Herramientas nos permite seleccionar un área de pixeles de estilo libre y
bordes rectos haciendo clic repetidamente a lo largo del perímetro del área de
pixeles que desea seleccionar. Al pulsar clic para trazar puntos por el perímetro
del objeto vamos creando el contorno de la selección. Esta herramienta es una
de las más empleadas por la versatilidad que posee para crear la selección
deseada.
Crear una selección poligonal.
1. Seleccione la Herramienta Lazo polígono.
2. Defina una opción de borde en el Inspector de propiedades.
3. De clic para trazar puntos por el perímetros del objeto o el área para crear el
contorno de la selección.
Mantenga pulsada la tecla shift para restringir los segmentos de la
herramienta Lazo polígono a incrementos de 45º.
4. Realice uno de estos procedimientos para cerrar el polígono:
o De clic en el punto inicial.
o De doble clic en el espacio de trabajo.
HERRAMIENTA VARITA MÁGICA.
La herramienta Varita mágica de la sección Mapa de bits del panel

Herramientas nos permite seleccionar áreas de pixeles de color similar. Para
controlar el modo de seleccionar los pixeles se utilizan las opciones Tolerancia
y Borde de la herramienta Varita mágica en el Inspector de propiedades.
Seleccionar un área de una gama similar de colores
1. Seleccione la herramienta Varita mágica.
2. Elija una opción de borde en el Inspector de propiedades.
Para ajustar el nivel de Tolerancia, arrastre el deslizador en el Inspector de
propiedades.

3. De clic en el área cuyo color desee seleccionar. Alrededor de los pixeles

seleccionados aparece un recuadro seleccionado.
o Tolerancia, define el rango tonal de colores que se seleccionan al dar clic
en un pixel con la herramienta Varita mágica.
Por ejemplo si introduce el valor 0 y hace clic en un pixel, solo se

seleccionan los pixeles adyacentes que tengan exactamente el mismo
tono. Si aumentamos la Tolerancia, al dar clic en un color nos va a
permitir seleccionar una mayor cantidad de pixeles.
MODOS DE SELECCIÓN.
Empleando las herramientas de selección de mapa de bits anteriormente
vistos, se podrá crear una selección nueva, añadir pixeles a una selección,
sustraer pixeles de una selección. Para crear diversos modos de selección,
como agregar a la selección, restar de la selección, una de las mejores formas
es utilizando los métodos abreviados con el teclado.
AÑADIR PIXELES A UNA SELECCIÓN.
Después de dibujar un recuadro de selección con cualquier herramienta de

selección de mapa de bits, es posible aumentar la selección con la propia
herramienta o con otra de la misma clase.
Ampliar una selección de pixeles existente.
1. Utilice una de las herramientas de selección de mapa de bits.
2. Mantenga pulsada la tecla Shift y dibuje más recuadros de selección.

3. Para seguir aumentando la selección repita los pasos 1 y 2 con cualquier

herramienta de selección de mapa de bits. Los recuadros superpuestos se
unen para formar un recuadro continuo.
SUSTRACCIÓN DE PIXELES DE UNA SELECCIÓN.
Podemos sustraer o excluir pixeles de una selección, para ello se definen áreas
de pixeles dentro del recuadro original que desde ese momento dejan de
formar parte de la selección.
Sustraer pixeles de una selección.
1. Utilice una de las herramientas de selección de mapa de bits.
2. Mantenga pulsada la tecla Alt y dibuje otro recuadro de selección sobre la
primera selección para restar un área de pixeles.
CREACIÓN DE UNA SELECCIÓN DE PIXELES INVERSA.
A partir de la selección de pixeles actual es posible crear otra selección con

todos los pixeles que no están seleccionados. Este método es útil, por ejemplo,
para seleccionar y después eliminar todos los pixeles que rodean la selección
original.
1. Cree una selección de pixeles con cualquier herramienta de selección de
mapa de bits.
2. Diríjase al menú Seleccionar y de clic en Seleccionar inverso.
También se puede realizar esta operación presionando Ctrl + Shift + I.

FUNDIDO DE SELECCIONES DE PIXELES.

El fundido desenfoca los bordes de una selección de pixeles y ayuda a integrar
el área seleccionada en los pixeles circundantes. Esta función es útil cuando se
copia una selección para pegarla en otro fondo.
1. Seleccione una herramienta de selección de mapa de bits del panel

herramientas.
2. Elija fundido en el menú emergente Borde del Inspector de propiedades y
arrastre el deslizador para ajustar el número de pixeles que desee
desenfocar en el borde de la selección.
3. Realice una selección.
4. Invierta la selección.
5. Luego presione la tecla suprimir.
Ejemplo desarrollado.
1. Se creará un documento nuevo con las siguientes dimensiones: An: 800

pixeles, Al: 700, resolución 72 ppp, color de lienzo: transparente y guardarlo
con el nombre interfaz_mdb.png.

2. Con la Herramienta rectángulo dibujar rectángulos sobre el lienzo con las

propiedades de tamaño y color como se observa en la siguiente imagen:
3. Importe la imagen reloj.jpg de la carpeta “Tarea 1“del material del curso

sobre el lienzo de trabajo.
4. Seleccione la Herramienta Varita mágica / active Tolerancia 30 del
Inspector de propiedades / borde suavizado.
5. De clic en el área blanca de la imagen reloj.jpg luego presione la tecla
suprimir.
6. Presione la tecla Q para visualizar los controles de la selección, luego rote el
reloj.jpg arrastrando uno de sus controladores a la izquierda.
Obtendrá el siguiente resultado.
7. Proceda a editar los siguientes mapas de bits filatelia 2.jpg, monedas.jpg,

blackberry.jpg, lapicero.jpg, lentes 1.jpg, folleto.jpg con las herramientas de
selección.
8. Cada imagen que importe al lienzo se ubica independientemente en una
capa, si es necesario reubique las capas moviéndolas con un arrastre, de
modo que todas las imágenes se visualicen.

9. Una vez reubicada cada capa en su lugar se podrán visualizar las imágenes.
10. Se terminará la edición de las imágenes mapa de bits con las herramientas
de selección para lograr la siguiente composición.
FUNDAMENTO TEÓRICO.
Hoy todas las empresas tienen su espacio en Internet,

cualquiera sea su tamaño, la web es primordial y actúa
como principal transmisor de la identidad corporativa.
La imagen de la empresa debe lograr comunicarse de
forma clara y precisa.
Hace tiempo que Internet ha modificado radicalmente

nuestra forma de trabajar, estudiar, vivir y sobretodo
de comunicarnos. Todo pasa por Internet y pareciera
también que aquello que no está en la red, no existe o no tiene la suficiente
trascendencia para ser tenido en cuenta.
La página web de una empresa actúa cada vez más como puerta de entrada
de muchos públicos, y mucho más si hablamos de emprendimientos o pymes.
Hoy la web es el primer punto de contacto con la empresa y es mucho más
probable que antes de conocer personalmente las instalaciones de la misma,

comprar sus productos o contratar sus servicios, se ingrese a la página para

tener una “idea” de con quien estamos tratando.
Es por ello que la web debe transmitir y respectar con la mayor fidelidad posible
la identidad de la empresa, lo cual repercute en la percepción, una imagen
consistente y uniforme.
Es preciso que los colores corporativos sean respetados, que los logos no sean
distorsionados y que no se omitan datos e información esencial para saber
¿Quién es? y ¿Qué hace?, ¿Cuáles son sus valores, su misión y su
filosofía de trabajo?
También hay que tener en cuenta que la información esté correctamente

ordenada, sea fácil y agradable de navegar. No todos aquellos que ingresan a
la página conocen la empresa o saben que es lo que hace, por lo que esta
información debe estar claramente explicada, fácil de encontrar pero sobretodo,
simple, breve y fácil de entender.
Si una página corporativa no concuerda con la identidad que quiere transmitir a

sus públicos, es difícil que estos puedan formarse una imagen sólida y
consistente de la empresa, si tenemos en cuenta que la evolución digital
avanza cada vez con más velocidad y hoy Internet se ha convertido en la
tarjeta de presentación más importante que una empresa puede tener para sus
públicos externos.
Con Fireworks CS6 podrá acelerar el diseño y el desarrollo de webs,

herramienta ideal para crear y optimizar imágenes para la web, así como para
diseñar prototipos y aplicaciones web rápidamente. Fireworks CS6 ofrece la
flexibilidad para editar imágenes de mapas de bits y vectores, una biblioteca
común de activos prediseñados y una rápida integración con Adobe Photoshop
CS6, Adobe Illustrator CS6, Adobe Dreamweaver CS6 y Adobe Flash CS6.
Visualice diseños rápidamente en Fireworks, o aproveche otros activos de
Illustrator, Photoshop y Flash. A continuación podrá trasladarlo directamente a
Dreamweaver CS6 para su desarrollo.
El desarrollador web deberá tener en cuenta una serie de fundamentos visuales

para la construcción de una interfaz web, estos y el contenido sobre el producto
permitirán el éxito de un sitio web.
La línea, forma, color, equilibrio, armonía, contraste, textura, serán algunos

conceptos necesarios de conocer y aplicar en la construcción del diseño.

Los colores en la Web.

Si observa alrededor podrá observar que estamos rodeados de colores. Los
colores envían impulsos que se convierten en sensaciones, los colores pueden
provocarnos tranquilidad, excitación, alegría e incluso depresión.
En el mundo del diseño la forma en la que aplicamos el color es un aspecto de

máxima importancia, a través de los colores seremos capaces de comunicar
sensaciones o sentimientos empleando muy poco espacio y muy poco tiempo.
Estos dos aspectos hacen que sea básico su uso en una página web, donde en
un tiempo menor de diez segundos debemos captar la atención de nuestros
visitantes si no queremos que abandonen nuestra web para irse a otro lugar
que capte más su atención.
El uso adecuado del color en una página es una

clave segura para su éxito. A la hora de navegar
por la red todos hemos encontrado las típicas
páginas con aspecto descuidado, o con páginas
donde a veces el texto era ilegible debido a una
mala combinación de los colores. O donde el uso
de colores estridentes nos ha alterado y enseguida
hemos ido a otro lugar más agradable.
Los colores en nuestros monitores se forman mezclando el rojo, verde y azul.

En inglés Red, Green, Blue, estas iniciales dan lugar al nombre RGB para
definir los diferentes colores. Así un color se describe por la cantidad de cada
uno de estos colores primarios, cantidad que va de 0 a 255. Habitualmente esto
se expresa en hexadecimal como un código de 6 dígitos (RRGGBB) dos dígitos
para cada componente. Por ejemplo: un color 10A2C0, tiene un componente de
rojo igual a 10, de verde igual a A2 y de azul C0. En decimales Rojo = 16,
Verde = 162, Azul = 192. Por ejemplo el blanco es el FFFFFF (máximo de rojo,
verde y azul), mientras que el negro es el 000000, ausencia de todo color.
Cada elemento de una página web y cada agrupación de ellos deben

desempeñar en la misma un papel perfectamente definido, que además debe
corresponderse con su peso visual dentro del total de la página. Una de las
herramientas más potentes con las que cuenta el diseñador web para cumplir
este objetivo es el uso adecuado de los colores.
Imagen de Mapa de Bits.

Una imagen en mapa de bits, o extensión .bmp, es una estructura o fichero de
datos que representa una rejilla rectangular de píxeles o puntos de color,

denominada matriz, que se puede visualizar en un monitor, papel u otro

dispositivo de representación.
A las imágenes en mapa de bits se las suele definir por su altura y anchura (en
píxeles) y por su profundidad de color (en bits por píxel), que determina el
número de colores distintos que se pueden almacenar en cada punto individual, y
por lo tanto, en gran medida, la calidad del color de la imagen.
Los gráficos en mapa de bits se distinguen de los gráficos vectoriales en que

estos últimos representan una imagen a través del uso de
objetos geométricos como curvas de Bézier y polígonos, no del simple
almacenamiento del color de cada punto en la matriz. El formato de imagen
matricial está ampliamente extendido y es el que se suele emplear para tomar
fotografías digitales y realizar capturas de vídeo. Para su obtención se usan
dispositivos de conversión analógica-digital, tales como escáneres y cámaras
digitales.
Cada punto representado en la imagen debe contener información de color,

representada en canales separados que representan los componentes
primarios del color que se pretende representar, en cualquier modelo de color,
bien sea RGB, CMYK, LAB o cualquier otro disponible para su representación.
A esta información, se puede sumar otro canal que representa la transparencia
respecto al fondo de la imagen. En algunos casos, (GIF) el canal de
transparencia tiene un solo bit de información, es decir, se puede representar
como totalmente opaco o como totalmente transparente; en los más avanzados
(PNG, TIFF), el canal de transparencia es un canal con la misma profundidad
del resto de canales de color, con lo cual se pueden obtener centenares, miles
o incluso millones de niveles de transparencia distintos.

Resolución.
En una imagen en mapa de bits no se pueden cambiar sus dimensiones sin

que la pérdida de calidad sea notoria. Esta desventaja contrasta con las
posibilidades que ofrecen los gráficos vectoriales, que pueden adaptar su
resolución fácilmente a la de cualquier dispositivo de visualización. De todas
maneras, existe mayor pérdida cuando se pretende incrementar el tamaño de
la imagen (aumentar la cantidad de píxeles por lado) que cuando se efectúa
una reducción del mismo. Las imágenes en mapa de bits son más prácticas
para tomar fotografías o filmar escenas, mientras que los gráficos vectoriales
se utilizan sobre todo para la representación de figuras geométricas con
parámetros definidos, lo cual las hace útiles para el diseño gráfico o la
representación de texto. Las pantallas de ordenador actuales habitualmente
muestran entre 72 y 130 píxeles por pulgada (PPP), y algunas impresoras
imprimen 2400 puntos por pulgada (ppp) o más; determinar cuál es la mejor
resolución de imagen para una impresora dada puede llegar a ser bastante
complejo, dado que el resultado impreso puede tener más nivel de detalle que
el que el usuario pueda distinguir en la pantalla del ordenador. Habitualmente,
una resolución de 150 a 300 ppp funciona bien para imprimir a 4 colores
(CMYK).
Resolución de la imagen

Ejercicios y tareas de investigación
1. Investigue sobre la regla de los tercios. (para una mejor composición de

página web.
2. Encontrar 4 muestras de los siguientes tipos de gráficos: GIF, JPEG y
PNG.
3. Leer y comprender sobre los principios y normas de derecho de autor.
Sitio web con información sobre los derechos de autor de la Universidad

de Stanford: http://fairuse.stanford.edu
4. ¿Que es la optimización de archivos JPEG y GIF para la web?

5. Sepa describir los tipos de gráficos mapa de bits.
6. Optimice 4 imágenes de internet para su página web.
7. Sepa Identificar y distinguir entre GIF, JPEG y PNG.
8. Lleve a cabo una búsqueda (tal vez en www.google.com) con las
siguientes palabras: imagen, tipo de imagen, Imágenes GIF, JPEG o
PNG.

Software Aplicativo II
02
II. ELABORAR DISEÑOS DE INTERFACE WEB UTILIZANDO
OBJETOS VECTORIALES.
Generación de objetos vectoriales.

Formas básicas e inteligentes.
Creación y edición de trazos.
Edición de vectores.
Rellenos de formas

 Generación de objetos vectoriales.
 Formas básicas e inteligentes.
 Creación y edición de trazos.
 Edición de vectores.
 Rellenos de formas.
Redes de Computadoras y Comunicación de Datos 35

2.1. GENERACIÓN DE OBJETOS VECTORIALES.
Un objeto vectorial es un objeto gráfico cuya forma se crea mediante un

trazado. La forma de un trazado de vectores está determinado por los puntos
que atraviesa. El trazo y el relleno determinan el aspecto del objeto cuando se
imprime o publica en Web. Fireworks CS6 cuenta con una gran variedad de
herramientas que nos van a permitir dibujar, trazar y editar objetos vectoriales
mediante distintas técnicas. Las herramientas formas básicas permiten dibujar
con rapidez líneas rectas, círculos y elipses, cuadrados y rectángulos, estrellas
y polígonos equiláteros de 3 a 360 lados. Se pueden dibujar trazados de
vectores de estilo libre con las herramientas Trazado de vectores y Pluma. La
herramienta Pluma permite dibujar formas complejas con curvas suaves y
líneas rectas punto a punto. Fireworks CS6 nos brinda una serie de técnicas
para editar los objetos vectoriales que se hayan dibujado en el lienzo. Se puede
cambiar la forma de un objeto mediante el desplazamiento. La adición o el
borrado de puntos. Los tiradores o selectores de puntos sirven para cambiar la
forma de los segmentos de trazados adyacentes. Las herramientas de Estilo
libre permiten cambiar la forma de los objetos mediante la edición directa de los
trazados.
Herramienta línea.
Con esta herramienta podemos crear con rapidez líneas rectas horizontales,
líneas rectas verticales, líneas diagonales con ángulo restringido o líneas con
ángulo libre.
Dibujar una línea.
1. Seleccione la Herramienta Línea de la sección Vector del panel
Herramientas.
2. Establezca los atributos de trazo en el Inspector de Propiedades.
3. Arrastre el ratón por el lienzo para dibujar la línea.
Dibujar una línea con restricción de 45º.

1. Mantenga pulsada la tecla Shift mientras arrastra para restringir el dibujo de
líneas a incrementos de 45º
Herramienta Rectángulo.
Con esta herramienta creamos con rapidez rectángulos y/o cuadrados.
Podemos crear rectángulos, cuadrados a partir de un punto central o moverlo
mientras se crea.

Dibujar un rectángulo.
En la tarea anterior realizó cuadrados para la interfaz web, en esta ocasión se
detallaran más propiedades de esta herramienta.
1. Seleccione la herramienta Rectángulo de la sección Vector en el panel
Herramientas.
2. Establezca los atributos de trazo y relleno en el Inspector de propiedades.
3. Arrastre el ratón por el lienzo para dibujar el rectángulo.
Dibujar un cuadrado.
1. Seleccione la herramienta Rectángulo de la sección Vector en el panel
Herramientas.
2. Establezca los atributos de trazo y relleno en el Inspector de propiedades.
3. Mantenga pulsada la tecla Shift mientras arrastra el ratón para crear un
cuadrado.
Dibujar un rectángulo a partir de un punto central.

2. Sitúe el cursor en el que será el punto central y mantenga pulsada la tecla
Alt mientras arrastra la herramienta Rectángulo.
Dibujar un cuadrado a partir de un punto central

3. Sitúe el cursor en el que será el punto central y mantenga pulsadas las
teclas Shift + Alt mientras arrastra la herramienta Rectángulo.

HERRAMIENTA ELIPSE.
Con esta herramienta podemos crear fácilmente elipses o círculos. Podemos

crear elipses y/o círculos a partir de un punto central o moverlo mientras se
crea.
Dibujar una elipse
1. Seleccione la Herramienta Elipse de la sección Vector del panel
Herramientas.
2. Establezca los atributos de trazo en el Inspector de Propiedades.
3. Arrastre el ratón por el lienzo para dibujar la elipse
Dibujar un círculo.
o Seleccione la herramienta Elipse en el panel Herramientas.
o Establezca los atributos de trazo y relleno en el Inspector de propiedades.
o Mantenga pulsada la tecla Shift mientras arrastra el ratón para crear un
círculo.
Dibujar una elipse a partir de un punto central.

o Sitúe el cursor en el que será el punto central y mantenga pulsada la tecla
Alt mientras arrastra la herramienta Elipse.
Dibujar un círculo a partir de un punto central.

o Sitúe el cursor en el que será el punto central y mantenga pulsadas las
teclas Shift + Alt mientras arrastra la herramienta Elipse.
CAMBIO DE TAMAÑO DE UNA FORMA BÁSICA SELECCIONADA.
Fireworks CS6 nos permite modificar los tamaños de las formas básicas
haciendo uso del Inspector de Propiedades, herramienta Escala o mediante el
menú Modificar, Transformar y seleccione Transformación Numérica.

Para ello seleccionamos el objeto y realizamos una de las siguientes acciones.
o Nos dirigimos al Inspector de propiedades o al panel Información y luego

ingresamos nuevos valores de anchura y/o altura.
o Elija la herramienta Escala en la sección Seleccionar del panel

Herramientas y arrastre un tirador de transformación de una esquina. Así el
tamaño del objeto cambia proporcionalmente.
o Nos dirigimos al menú Modificar, Transformar y seleccionamos

Transformación numérica.
HERRAMIENTA RECTÁNGULO REDONDEADO BÁSICO.
Podemos también dibujar rectángulos con esquinas redondeadas empleando la

herramienta Rectángulo redondeado, así como ajustar la Redondez del
rectángulo del Inspector de propiedades.
La herramienta Rectángulo redondeado dibuja los rectángulos como objetos

agrupados. Para desplazar los puntos de un rectángulo por separado, es
preciso desagrupar el rectángulo o utilizar la herramienta Subselección.
Dibujar un rectángulo con esquinas redondeadas.
1. En el menú emergente de la herramienta Rectángulo en la sección Vector

del Panel de herramientas, seleccione la herramienta Rectángulo
redondeado.
2. Arrastre el ratón por el lienzo para dibujar el rectángulo.
Redondear las esquinas de un rectángulo seleccionado.
o Puede digitar entre 0 y 100 en la sección Redondez del Inspector de

propiedades.

o De igual manera podrá ajustar la redondez de las esquinas conforme va

dibujando un rectángulo. Empleando la Herramienta Rectángulo, arrastre
para crear y pulse cualquiera de las teclas de flecha o las teclas numéricas 1
y 2 las veces que sean necesarias.
FORMAS AUTOMÁTICAS.
Las formas automáticas de Fireworks son conjuntos de objetos vectoriales

inteligentes que simplifican la creación y modificación de los principales
elementos visuales comunes. Las herramientas de formas automáticas dibujan
grupos de objetos. Al contrario que otros grupos de objetos, las formas
automáticas seleccionadas tienen puntos de control de forma de diamante
además de los tiradores del grupo de objetos. Las herramientas de formas
automáticas crean formas con orientaciones predefinidas. Por ejemplo, la
herramienta flecha dibuja flechas horizontales. Puede transformar las formas
automáticas para cambiar su orientación. Aunque cada herramienta de forma
automática del panel Herramientas utiliza el mismo método de dibujo sencillo,
los atributos editables de cada forma automática son distintos.
PRINCIPALES HERRAMIENTAS DE FORMAS AUTOMÁTICAS.
Las principales formas automáticas en Fireworks son: Flecha, Rectángulo

redondeado, Rectángulo biselado, Rectángulo con chaflan, línea conexión,
Donut, Forma de L, Polígono inteligente, Sección, Espiral, Estrella.
Las formas automáticas nos permiten dibujar conjunto o grupo de objetos que
aparecen en su forma. Mediante los puntos de control puede ajustar la
agudeza, longitud y anchura de las formas.
Dibujo de formas
1. Diríjase al menú Ventana y seleccione Propiedades de forma automática.

Se muestra el panel de propiedades de formas automáticas ubicado en la

parte derecha del espacio de trabajo de Fireworks.
2. De esta ventana seleccionamos alguna opción, por ejemplo Donut.

3. Se crea automáticamente la forma en el lienzo.
4. Modifique sus propiedades en el panel de Propiedades de forma
automática.
5. Ajuste la forma automática de la figura con sus puntos de control.
DIBUJO VECTORIAL MARCANDO PUNTOS.
Herramienta de pluma.
Un método de dibujar y editar objetos vectoriales en Fireworks CS6 es el de
trazar puntos como si se estuviera dibujando un dibujo de “une los puntos”. Al

hacer clic en cada punto con la herramienta pluma, Fireworks CS6 dibuja
automáticamente el trazado del objeto vectorial desde el último punto colocado
con el ratón. Además de conectar los puntos con segmentos rectos, la
herramienta pluma permite dibujar lo que se conoce como curvas Bezier, que
son segmentos curvos calculados matemáticamente. Cada tipo de punto, ya
sea punto de esquina o de curva, determina si las curvas adyacentes son
líneas rectas o curvas.
Los segmentos de trazados rectos y curvos se pueden modificar arrastrando
sus puntos. Los segmentos curvos se pueden editar mediante el arrastre de
sus tiradores de punto. Los segmentos rectos se pueden convertir en curvos y
viceversa con la conversión de sus puntos.
DIBUJO DE SEGMENTOS DE TRAZADOS RECTOS.
Para dibujar segmentos de línea recta con la herramienta de Pluma basta con
hacer clic para colocar los puntos. Con cada clic de la herramienta de Pluma
se traza un punto de esquina. La unión de dos puntos genera un segmento y
el grupo de todos los puntos genera un trazado.
Dibujar un trazado con segmentos de línea recta.
1. Seleccione la herramienta Pluma de la sección Vector del panel

Herramientas.
2. Si lo desea, elija Edición, Preferencias y active cualquiera de las opciones
siguientes en la ficha Edición del cuadro de diálogo Preferencias:
o Mostrar vista previa de la pluma muestra una presentación preliminar
del segmento de línea que se obtendrá con el clic siguiente.
o Mostrar puntos sólidos muestra puntos sólidos al dibujar.
3. De clic en el lienzo para colocar el primer punto de esquina.
4. Desplace el cursor y de clic para colocar el siguiente punto. Un segmento
de línea recta une los dos puntos. Continúe trazando puntos para ir creando
la forma deseada. Los segmentos rectos unirán el espacio entre ellos.
5. Realice una de las siguientes acciones para terminar el trazado, ya sea
abierto o cerrado.
o De doble clic en el último punto para terminar como trazado abierto.
o Seleccione otra herramienta para terminarlo como trazado abierto.
o Para cerrar el trazado haga clic en el primer punto que dibujó. Los puntos
de inicio y finalización de un trazado cerrado son el mismo.

DIBUJO DE SEGMENTOS DE TRAZADOS CURVOS.
Para dibujar segmentos de trazados curvos, basta con hacer clic y arrastrar el
ratón conforme se trazan los puntos. Al dibujar, el punto actual muestra
tiradores de punto. Todos los puntos de los objetos vectoriales, tanto si se han
dibujado con la herramienta Pluma o con cualquier otra herramienta de dibujo
de Fireworks, tiene tiradores de punto. Sin embargo, estos tiradores sólo están
visibles en los puntos de curva.
Dibujar un objeto con segmentos curvos.
1. Seleccione la herramienta Pluma de la sección Vector del panel

Herramientas.
2. De clic para colocar el primer punto de esquina.
3. Ubíquese en el punto siguiente, haga clic y arrastre para generar un punto

de curva. Cada vez que se hace clic y se arrastra, Fireworks extiende el
segmento de línea hasta el nuevo punto.
4. Continúe trazando puntos. Si hace clic y arrastra un punto nuevo, se produce

un punto de curva; si solo hace clic, se crea un punto de esquina.
5. Realice una de las siguientes acciones para terminar el trazado, ya sea

abierto o cerrado.
o De doble clic en el último punto para terminar como trazado abierto.
o Seleccione otra herramienta para terminarlo como trazado abierto. Al

elegir determinadas herramientas y volver luego a la herramienta Pluma,
Fireworks continuará dibujando el objeto la próxima vez que haga clic.

o Para cerrar el trazado haga clic en el primer punto que dibujó. Los puntos
de inicio y finalización de un trazado cerrado son el mismo.
EDICIÓN DE LA FORMA.
Moviendo los puntos de un segmento de trazado curvo o recto es posible

alargarlo, acortarlo o cambiar su posición.
Para editar los puntos de un trazado podemos emplear las herramientas
Puntero y Subselección.
Modificar puntos de trazado.
1. Seleccionamos el trazado con la herramienta Puntero o Subselección.

2. De clic en un punto con la herramienta Subselección para seleccionar dicho
punto.
Los puntos de esquina seleccionados aparecen en la pantalla como
cuadrados azules sólidos.
3. Arrastre el punto o utilice las teclas de flechas para mover el punto a una
nueva ubicación.
4. Seleccionando un trazado curvo aparecerán los tiradores que se proyectan a
partir del punto.
5. Arrastre los tiradores a otra posición. Para restringir el movimiento de los
tiradores a ángulos de 45º, pulse la tecla Shift mientras arrastras.
6. Para añadir un punto en un trazado seleccionado seleccione la herramienta
Pluma de la sección Vector del panel Herramientas y de clic en cualquier
lugar del trazado en donde no exista un punto.
7. Para eliminar un punto de un trazado de clic con la herramienta
Subselección en un punto de un objeto seleccionado y presione Supr.

RELLENOS DE FORMAS.
Fireworks CS6 nos provee de una gran diversidad de paneles, herramientas y

opciones para organizar, elegir y aplicar colores a las imágenes de mapa de
bits y a los objetos vectoriales. En el panel Muestras es posible elegir un grupo
de muestras preestablecidas. La sección colores del panel Herramientas
contiene controles de color de trazo y relleno junto con otras opciones. La
sección Mapa de bits contiene las herramientas Cubo de pintura, Degradado y
cuentagotas, que permiten aplicar color a selecciones de mapa de bits, a áreas
de un color similar y a objetos vectoriales.
Color de relleno sólido.
1. Seleccionamos el objeto.
2. Realice cualquiera de los siguientes procedimientos.
o En el panel Herramientas activamos el menú emergente Color de relleno.
o En el Inspector de propiedades seleccionamos el cuadro emergente Color
de relleno.
o En el panel Muestras seleccionamos el color deseado.
o Seleccionamos la herramienta Cuentagotas y elegimos un color deseado
de cualquier lugar del espacio de trabajo de Firewoks.
o Seleccione la herramienta Cubo de Pintura y seleccionamos el color de
relleno en el Inspector de Propiedades.
o Elegimos un color deseado en el Panel Mezclador.

Rellenos degradados.
Permiten mezclar colores para crear distintos efectos.
1. Seleccione un objeto.
2. Seleccionar un degradado en el menú emergente Categoría de relleno del
Inspector de Propiedades.
3. Nos dirigimos a la opción Degradado y seleccionamos el tipo de degradado
que deseamos.
4. El relleno se visualiza en el objeto seleccionado y se convierte en relleno
activo
Rellenos de patrón.
Un objeto de trazado se puede rellenar con un gráfico de mapa de bits, esto es
lo que se conoce como relleno de patrón.
1. Seleccione Patrón en el menú emergente Categoría de relleno del
Inspector de propiedades.

2. Seleccione el patrón en el menú emergente de nombres de patrón. El relleno

de patrón aparecerá en el objeto seleccionado y se convertirá en el color de
relleno activo.
Ejemplo desarrollado.
1. Se creará un documento nuevo con las siguientes dimensiones: An: 775

pixeles, Al: 615, resolución 72 ppp, color de lienzo: transparente y guardarlo
con el nombre interfaz_vector.png.
2. Luego importe la imagen “perú_aventura” de la carpeta de trabajo.
3. Procederá a vectorizar zonas de la imagen.
4. Para este procedimiento se sugiere a modo de práctica en la iniciación de

dibujo vectorial calcar las imágenes, proceso que facilitará la creación de
vectores, para esto siga los siguientes pasos.
5. Sobre la imagen importada al lienzo de clic derecho y seleccione la opción

Bloquear selección. Esto facilitará calcar la imagen impidiendo que el
documento se mueva.
6. Cambie el color del trazo a Rojo y el color de relleno Transparente en la

barra de Herramientas.

7. Con la Herramienta Zoom acérquese a la siguiente sección de la imagen:
8. En el Panel de Propiedades cambie la intensidad del trazo a línea suave

del grupo Básico y grosor de línea a 2 puntos.
9. Luego seleccione la herramienta Pluma e inicie el dibujo vectorial desde

algún punto del borde del tablista, controlando las líneas rectas y curvas
según vaya avanzando en el recorrido de la forma.
10. Si quisiera deshacer algún trazo incorrecto pulse el comando Ctrl +Z

cuantas veces lo necesite.
11. Si realiza líneas curvas debe regresar al último nodo o unión de vectores
para poder seguir el trayecto, con el arrastre sostenido sobre el modelo.

12. Para corregir errores de dibujo seleccione la herramienta Subselección del

sector Selección de la barra de Herramientas y modifique el punto, nodo
o vector, editando así sus vectores.
13. Con la Herramienta Lazo Polígono seleccione la zona central inferior del
tablista, y en el Inspector de propiedades active de Borde Suavizado.
14. Realice el trazado.
15. Proceda a guardar la selección / menú Seleccionar / Guardar selección de

Mapa de bits, en el sector Nombre escriba selección 1, luego presione el
botón aceptar. Usted puede guardar la cantidad de selecciones que desee
y utilizarlas en cualquier momento.
16. Con la herramienta Selección selecciones su trazado, aplíquele un color

sólido. Si tuviera problemas para seleccionar el trazado active el Panel
capas y seleccione la capa que contiene su trazado.
17. Ahora se debe restar la selección guardada a la zona central inferior de la

forma, para esto siga los siguientes procedimientos.
o En el Panel Capa seleccione la capa Trazado, luego añada máscara

presionando el botón inferior derecho Añadir capa como muestra la
siguiente imagen, observará un cuadro al lado derecho de la miniatura
de capa.

o Luego haga clic en menú Seleccionar / Restaurar selección de mapa

de bits / Selección 1.
o Presione la tecla suprimir para eliminar la sección contenida.
o Luego presione la tecla Esc para salir de la selección.
o Cierre el panel Capas.
18. Retire el trazo de su forma vectorial y aplique un color degradado.
19. Continúe desarrollando su proyecto para lograr la siguiente interfaz.
Una imagen vectorial es una imagen digital formada

por objetos geométricos independientes (segmentos,
polígonos, arcos, etc.), cada uno de ellos definido por
distintos atributos matemáticos de forma, de posición,
de color, etc. Por ejemplo un círculo de color rojo
quedaría definido por la posición de su centro, su
radio, el grosor de línea y su color.

Este formato de imagen es completamente distinto al formato de las imágenes

de mapa de bits, también llamados imágenes matriciales, que están formados
por píxeles. El interés principal de los gráficos vectoriales es poder ampliar el
tamaño de una imagen a voluntad sin sufrir la pérdida de calidad que sufren los
mapas de bits. De la misma forma, permiten mover, estirar y retorcer imágenes
de manera relativamente sencilla. Su uso también está muy extendido en la
generación de imágenes en tres dimensiones tanto dinámicas como estáticas.
Todos los ordenadores actuales traducen los gráficos vectoriales a mapas de
bits para poder representarlos en pantalla al estar ésta constituida físicamente
por píxeles.
PRINCIPALES APLICACIONES.
Generación de gráficos.
Se utilizan para crear logos ampliables a voluntad así como en el diseño
técnico con programas de tipo CAD (Computer Aided Design, diseño asistido
por computadora). Muy populares para generar escenas 3D.
Lenguajes de descripción de documentos.

Los gráficos vectoriales permiten describir el aspecto de un documento
independientemente de la resolución del dispositivo de salida. Los formatos
más conocidos son PostScript y PDF. A diferencia de las imágenes matriciales,
se puede visualizar e imprimir estos documentos sin pérdida en cualquier
resolución.
Tipografías.
La mayoría de aplicaciones actuales utilizan texto formado por imágenes
vectoriales. Los ejemplos más comunes sonTrueType, OpenType y PostScript.
Videojuegos.
En los videojuegos 3D es habitual la utilización de gráficos vectoriales.
Internet.
Los gráficos vectoriales que se encuentran en el World Wide Web suelen ser o
bien de formatos abiertos VML y SVG, o bien SWF en formato propietario.
Estos últimos se pueden visualizar con Adobe Flash Player.
VENTAJAS Y DESVENTAJAS AL USAR IMÁGENES VECTORIALES.
Ventajas.

o Dependiendo de cada caso particular, las imágenes vectoriales pueden

requerir menor espacio en disco que un mapa de bits. Las imágenes
formadas por colores planos o degradados sencillos son más factibles de ser
vectorizadas. A menor información para crear la imagen, menor será el
tamaño del archivo. Dos imágenes con dimensiones de presentación
distintas pero con la misma información vectorial, ocuparán el mismo
espacio en disco.
o No pierden calidad al ser escaladas. En principio, se puede escalar una
imagen vectorial de forma ilimitada. En el caso de las imágenes matriciales,
se alcanza un punto en el que es evidente que la imagen está compuesta
por píxeles.
o Los objetos definidos por vectores pueden ser guardados y modificados en
el futuro.
o Algunos formatos permiten animación. Esta se realiza de forma sencilla
mediante operaciones básicas como traslación o rotación y no requiere un
gran acopio de datos, ya que lo que se hace es reubicar las coordenadas de
los vectores en nuevos puntos dentro de los ejes x, y, y z en el caso de las
imágenes 3D.
Desventajas.
o Los gráficos vectoriales en general no son aptos para codificar fotografías o
vídeos tomados en el «mundo real» (fotografías de la Naturaleza, por
ejemplo), aunque algunos formatos admiten una composición mixta (vector +
mapa de bits). Prácticamente todas las cámaras digitales almacenan las
imágenes en mapa de bits.
o Los datos que describen el gráfico vectorial deben ser procesados, es decir,
el computador debe ser suficientemente potente para realizar los cálculos
necesarios para formar la imagen final. Si el volumen de datos es elevado se
puede volver lenta la representación de la imagen en pantalla, incluso
trabajando con imágenes pequeñas.
o Por más que se construya una imagen con gráficos vectoriales su
visualización tanto en pantalla, como en la mayoría de sistemas de
impresión, en última instancia tiene que ser traducida a píxeles.
TEXTURAS Y PATRONES.
Textura en las Artes visuales y elemento del Lenguaje visual. Se denomina así
no sólo a la apariencia externa de la estructura de los materiales, sino al
tratamiento que puede darse a una superficie a través de los materiales.
Puede ser táctil, cuando presenta diferencias que responden al tacto, y a
la visión, puede ser: rugosa, áspera, suave, etc.

La textura es expresiva, significativa y trasmite de por sí reacciones variables

en el espectador, las que son utilizadas por los artistas, que llevan la materia a
un nivel superior del que ella tiene, para aumentar el grado de contenido a
transmitir en su obra.
La textura es la apariencia de una superficie. Como elemento plástico puede
enriquecer la expresividad de un plano o ser el elemento configurador de una
composición.
La textura visual es la representación por medios gráficos,
como pintura, dibujo o fotografía, de las texturas táctiles. Por ello, las
percibimos únicamente de manera visual y se llaman también texturas gráficas.
Existen diversos procedimientos para obtener texturas visuales a partir de
materiales de pintura y dibujo: raspado, transparencia, estampación, etc.
Expresividad de las texturas en el diseño.

La realización de texturas en el diseño tiene dos papeles destacados:
uno funcional y otro estético. El material y las texturas de cada objeto deben
ser adecuados a la función práctica que tienen que desempeñan.
Además de una función práctica, las texturas poseen un efecto expresivo.
Están cuidadosamente pensadas y diseñadas para conseguir resaltar la forma
de los objetos y hacerlos tan atractivos como sea posible.
La textura de los objetos influye en los sentidos del ser humano y crea una
corriente de atracción o rechazo según sus características, y unas impresiones
visuales y táctiles de variados efectos.
Una superficie de textura lisa y uniforme produce una sensación visual estética,
y una textura rugosa, irregular y de diferentes colores produce mayor efecto de
movimiento visual.
En los sitios web.

Uno de los atractivos más típicos en cualquier diseño es la utilización de

texturas para darle profundidad y dinamismo a un fondo.
Al momento de diseñar un sitio web, es importante utilizar elementos que
optimicen la velocidad. Uno de ellos es la utilización de texturas de fondos, las
cuales funcionan como imágenes muy pequeñas (por ende que pesan muy
poco y cargan rápidamente) que se repiten en el fondo infinitamente.
PATRONES, TEXTURAS Y RELLENOS.
Llamado también patterns, estas herramientas en Fireworks CS6 da mayor

personalidad, estilo y estética a una interfaz web, sumándose así al logro del
objetivo del mensaje a transmitir.
Dentro de los rellenos en Fireworks CS6 están los Degradados que a su vez
se le puede agregar una textura siendo así Fireworks CS6 un programa versátil
por las múltiples posibilidades de transformar sus imágenes.
Edición de rellenos degradados.

Se puede editar relleno degradado actual, podemos hacer clic en cualquier
cuadro Color de relleno, y luego utilizar la ventana emergente Editar
degradado. Podemos realizar la edición de rellenos degradados desde el
Inspector de propiedades, la sección colores del Panel Herramientas.
Abrir la ventana emergente Editar degradado.
1. Seleccione un objeto que tenga un relleno degradado o elija un relleno de
este tipo en el menú emergente Categoría de relleno del Inspector de
propiedades.
2. De clic en el cuadro Color de relleno del panel Inspector de propiedades o
del panel Herramientas para abrir la ventana emergente.
Se abre la ventana emergente de edición de degradado con la pendiente de
color y la vista previa del degradado.

Añadir una muestra de color o de opacidad al degradado.

Realice una de estas operaciones:
o Para añadir una muestra de color, haga clic en el área situada debajo de la
pendiente de color del degradado.
o Para añadir una muestra de opacidad, haga clic en el área situada sobre la
pendiente del degradado de color.
Eliminar una muestra de color o de opacidad al degradado.

Realice esta operación:
o Arrastre la muestra fuera de la ventana emergente Editar degradado.
Definir o cambiar el color de una muestra de color.

1. De clic en la muestra de color.
2. Elija un color en la ventana emergente.
Definir o cambiarla transparencia de una muestra de opacidad

1. De clic en la muestra de opacidad.
2. Realice uno de estos procedimientos.
o Arrastre el deslizador para definir el porcentaje de transparencia,
correspondiendo cero a total transparencia y 100 a total opacidad.
o Introduzca un valor numérico entre 0 y 100 para definir la opacidad.
3. Cuando haya terminado de editar el degradado, pulse Intro o haga clic fuera
de la ventana emergente Editar degradado.
El relleno degradado aparece en los objetos que estén seleccionados y se
convierte en el relleno activo.
Para ajustar la transición entre los colores del relleno arrastre las muestras
de color hacia la izquierda o derecha de la vista del degradado.
TRANSFORMACIÓN Y DISTORSIÓN DE DEGRADADOS Y PATRÓN.
Es posible mover, rotar, sesgar y cambiar la anchura del relleno del patrón o
degradado de un objeto. Es decir podemos transformarlos y distorsionarlos de
manera fácil.
Cuando se utilizan las herramientas Puntero y Degradado para seleccionar un
objeto que tiene un relleno degrado o de patrón aparecen una serie de
tiradores en el objeto o cerca de él.
Estos tiradores se pueden arrastrar para ajustar el relleno del objeto. Utilice los
tiradores de relleno para ajustar de forma interactiva un relleno de patrón o
degradado.

Mover el relleno dentro de un objeto.

o Arrastre el tirador redondo o haga clic en otra posición dentro del relleno con
la herramienta Degrado.
o Rote el relleno arrastrando las líneas que unen los tiradores, aparecerá un
tirador arco curvo.
Adición de textura a un relleno.

Las texturas modifican el brillo de un relleno, aunque
no el matiz, y le dan un aspecto menos mecánico y
más orgánico. Es posible añadir una textura a
cualquier relleno. Fireworks CS6 se suministra con
varias texturas para elegir. También se pueden
utilizar archivos de mapa de bits como texturas, lo
cual permite crear cualquier tipo de textura
personalizada.
Realice los siguientes procedimientos.
1. Abra el menú emergente Textura en el inspector de propiedades.
2. Seleccione una textura del menú emergente.
3. Cambie la cantidad de Textura entre 100 y 0 para intensificar la textura.
4. Puede controlar el grado de transparencia en el porcentaje de Textura.

Puede agregar a un degradado una textura para lograr mayor efecto visual.

ORGANIZACIÓN DE OBJETOS.
Cuando se trabaja con varios objetos en un único documento, es posible utilizar

diversas técnicas para organizar el documento como:
o Agrupar objetos individuales para tratarlos como si fuera un solo objeto o
proteger la relación de cada objeto con otros objetos del grupo.
 Seleccione los objetos a agrupar.
 Nos dirigimos al menú modificar y seleccionamos la opción Agrupar.
 Para desagrupar objetos, seleccionamos el objeto agrupado.
 Nos dirigimos al menú modificar y seleccionamos la opción Desagrupar.
o Situar los objetos delante o detrás de otros objetos, a esto se le llama orden
de apilamiento, las capas influyen en el orden de apilamiento, ya que cada
objeto que se va agregando al lienzo se ubica en una capa.
 Seleccionamos el menú modificar nos dirigimos a la opción Organizar y
elegimos traer al frente o Enviar al fondo para situar el objeto o grupo
en el primer plano o en el fondo del orden de apilamiento.
 Seleccionamos el menú modificar nos dirigimos a la opción Organizar y
elegimos traer hacia adelante o Enviar hacia atrás para mover el objeto
o grupo una posición hacia arriba o hacia abajo en el orden de
apilamiento.

o Alinear los objetos seleccionados respecto a un área del lienzo o respecto al

eje horizontal o vertical.
 Nos dirigimos al menú Modificar, opción Alinear y seleccionamos
Izquierda para alinear los objetos con el objeto seleccionado situado más
a la izquierda.
Centrar verticalmente para alinear los puntos centrales de los objetos en
el eje vertical.
Derecha para alinear los objetos con el objeto seleccionado situado más
a la derecha.
Superior los objetos con el objeto seleccionado situado más arriba.
Centrar horizontalmente para alinear los puntos centrales de los objetos
en el eje horizontal.
Inferior para alinear los objetos con el objeto seleccionado situado más
abajo.
COMBINACIÓN DE OBJETOS DE TRAZADO.
Podemos combinar varios objetos de trazado en un solo objeto.

Es posible combinar los extremos de dos trazados abiertos para
crear uno cerrado, o unir varios trazados para crear uno
compuesto.
Realizaremos la figura de la derecha con formas combinadas;
siga los siguientes procedimientos.
1. Dibuje las siguientes figuras en el lienzo con las herramientas de la sección

Vector de la barra de Herramientas.

2. Luego junte las formas 1 y 2 de la siguiente manera: alineado central

izquierdo para la forma 1con respecto a la forma 2.
3. Clic en el menú Modificar / Combinar trazado / Unión.
4. Luego realice una nueva unión con el resultado de la forma 1 y 2 uniéndola

con la forma 3. Obtendrá el siguiente resultado.
5. Ahora ubique la forma 4 sobre el resultado de la unión, como en la siguiente

figura, seleccione las dos formas, luego clic en el menú Modificar /
Combinar trazado / Perforación.
6. Por ultimo ubique la forma 5 sobre el resultado de las combinaciones y

aplique perforación.

1. Mencione la diferencia entre las imágenes vectoriales y los mapas de bits en

un cuadro de doble entrada.
2. ¿Cuál es la mayor ventaja al utilizar imágenes vectoriales?
3. ¿Qué es el relleno de patrón?
4. Mencione 4 programas de diseño que trabajan con vectores.
5. ¿Cómo usted bloquea una capa en Fireworks cs6?
6. ¿Cuáles son las opciones de combinar trazados?
7. Mencione los tipos de degradado que tiene Fireworks CS6
8. Explique los significados de:
a. Tono.
b. Textura.
c. Color plano.
d. Tipografía.
e. Saturación
9. Dibuje el siguiente logotipo, utilizando la herramienta Pluma y Combinar,
utilice la imagen logo vector.jpg de su carpeta de trabajo.

03
III. ELABORAR PROTOTIPOS WEB EMPLEANDO OBJETOS
DE TEXTO, FILTROS, CAPAS Y EL PANEL PÁGINAS.
Adición y alineación de texto.

Empleo de los principales filtros.
Uso de capas.
Uso de máscaras de imagen.
Utilización de páginas.
Utilización de página maestra.
Exportación de páginas.

 Reconocer las herramientas básicas de Fireworks.
 Uso de las herramientas de selección.

3.1. ADICIÓN Y ALINEACIÓN DE TEXTO.
Fireworks permite crear texto con una variedad de fuentes y tamaños así como
ajustar su acercamiento, espaciado, color, interlineado, desplazamiento de
línea de base y otras características. La combinación de las funciones de
edición de texto de Fireworks con la amplia variedad de trazos, rellenos, filtros
y estilos permite que el texto se convierta en un elemento vivo de los diseños
gráficos. Cuando crea un objeto de texto, Fireworks guarda automáticamente el
objeto con un nombre relacionado con el contenido de texto, lo que facilita su
localización posterior.
La posibilidad de editar el texto en cualquier momento, incluso después de

aplicar filtros automáticos como sombras y biseles, facilitan la modificación del
texto. Para aumentarlas posibilidades de diseño, se dispone de texto vertical,
texto transformado, texto amoldado a un trazado y texto convertido en trazado
o imágenes.
Introducir texto.
1. Seleccione la Herramienta Texto de la sección Vector del panel

Herramientas. En el Inspector de Propiedades visualizamos las opciones
de la Herramienta Texto.
2. Seleccione el color, la fuente, el tamaño y otras características de texto.
3. Realice uno de estos procedimientos:
o De clic en el lugar del documento donde desea que empiece el bloque de
texto. Así se crea un bloque de texto de tamaño automático.
o Arrastre el ratón para dibujar un bloque de texto. Así se crea un bloque de
texto de anchura fija.
4. Escriba el texto. Para introducir un cambio o salto de párrafo, pulse Enter.

5. Si lo desea, seleccione texto en el bloque de texto después de escribirlo y
cambie su formato.

6. Cuando termine de introducir texto, siga uno de estos procedimientos:

o De clic fuera del bloque de texto.
o Seleccione otra herramienta en el panel Herramientas.
o Pulse Esc.
Desplazar un bloque de texto
1. Seleccionamos la herramienta Puntero de la sección Seleccionar de la

barra de Herramientas.
2. Arrastre el bloque de texto a la nueva ubicación.
Edición de texto
1. Seleccione el texto que desea modificar:

o De clic en un bloque de texto con la herramienta Puntero o
Subselección para seleccionar todo el bloque. Para seleccionar varios
bloques, mantenga pulsada la tecla Shift mientras selecciona cada uno
de ellos.
o De doble clic en un bloque de texto con la herramienta Puntero o
Subselección y seleccione las palabras que desee editar.
o De clic dentro de un bloque de texto con la herramienta Texto y
seleccione las palabras que desee editar.
o De clic dentro de un bloque de Texto y seleccione las palabras que desee
editar.
2. Realice las modificaciones en el Inspector de propiedades.
3. Realice uno de los siguientes procedimientos para aplicar los cambios:
o De clic fuera del bloque de texto o bien presione Esc.
o Seleccione otra herramienta en el panel Herramientas.
Cambiar una fuente, tamaño y estilo de texto.

1. Seleccionamos el texto deseado.
2. Elija una fuente distinta en el menú emergente Fuente para cambiarlo. Las
fuentes que se han utilizado recientemente aparecen en la parte superior del
menú emergente Fuente.
3. Para cambiar el tamaño de fuente, arrastre el deslizador emergente Tamaño
o introduzca un valor en el cuadro de texto.
4. Para aplicar un estilo de negrita, cursiva o subrayado, de clic en el botón del
estilo correspondiente.
De la carpeta de trabajo abra el archivo “interfaz_texto.fw.png, luego proceda a
completar la página Web siguiendo los siguientes procedimientos.

1. Dentro del lienzo escribirá texto que servirá como hipervínculos (menú).
Seleccione la herramienta de Texto, arrastre el ratón sobre el lienzo, escriba
los textos, luego aplique las propiedades que observa en la imagen inferior.
2. Procederemos a escribir el texto de la página (Fuentes sugeridas).
o Propiedades de texto para “GATOPARDO”:

Fuente – Britanic Bold, Regular
Color - Blanco
Tamaño – 100 pts
Ajuste o espacio entre caracteres – 39
Escala horizontal – 61%
o Propiedades de texto para “La Revista local del Mundo”:

Fuente – Freestyle Script, Regular
Color - Blanco
Tamaño – 31 pts

o Propiedades de texto para “ELY GUERRA”:

Fuente – Bell MT
Color - #545454
Tamaño – 28 pts
o Propiedades de los párrafos:

Fuente – Arial
Color - #000000
Tamaño – 12 pts
Interlineado – 122
3. En caso que usara otras fuentes será conveniente instalarlas en el

ordenador en el que va a abrir su diseño. Fireworks mostrará una ventana de
advertencia de solo lectura o de reemplazo de fuentes de no hallar dichas
fuentes.
3.2. MANEJO DE FILTROS.
Los filtros de Fireworks son mejoras que se pueden aplicar a los objetos
vectoriales, imágenes de mapa de bits y texto. Podemos aplicar filtros a los
objetos seleccionados, directamente desde el inspector de propiedades.

Fireworks actualiza estos filtros automáticamente cuando se editan los objetos

a los que se han aplicado. Después de aplicar un filtro, es posible cambiar sus
opciones en cualquier momento o reorganizar el orden de los filtros para
experimentar con un filtro combinado. Los filtros se pueden activar, desactivar o
eliminar en el Inspector de propiedades. Cuando se elimina un filtro, el objeto o
imagen recupera su aspecto anterior.
Se trabajará con los elementos de la interfaz anterior, que se ubica en su

carpeta de trabajo; para este ejercicio seleccione uno a uno cada objeto y siga
los siguientes procedimientos.
1. Seleccione el reloj de su documento y active el filtro brillo y contraste de la
opción ajustar color de la opción filtros. La función de este filtro modifica el
contraste o brillo de los pixeles de una imagen, afectando los resaltados,
medios tonos y sombras de la imagen. Este filtro se utiliza normalmente para
corregir imágenes demasiado oscuras o claras.
2. La función del filtro Niveles es corregir los mapa de bits que tiene una alta
concentración de pixeles en resaltados, medios tonos o sombras, también
establece el negro para los pixeles más oscuros y el blanco para los más
claros, de esta forma redistribuir los medios tonos proporcionalmente. Esto
permite generar una imagen con detalles bien definidos en todos sus pixeles.
El histograma del cuadro de diálogo Niveles sirve para ver la distribución de

pixeles de un mapa de bits y para determinar la mejor manera de corregir el

rango tonal de una imagen.
El eje horizontal muestra los valores de color del más oscuro (0) al más claro
(255). El eje vertical muestra el número de pixeles en cada nivel de brillo. El
ajuste de medios tonos permite mejorar los valores de brillo sin que ello
afecte a los resaltados ni a las sombras.
De igual manera puede ajustar resaltados, medios tonos y sombras.
o Seleccione la imagen filatelia y active el filtro Niveles de la opción ajustar
color de la opción filtros.
o Seleccione el Canal Rojo.
o Seleccione el gotero Color de medio tono y haga clic en alguna parte de
la estampilla roja de la fotografía filatelia.
o De clic en Aceptar.
3. Podemos asignarle el aspecto con relieve a un objeto empleando bordes

Biselados. Es posible crear un bisel interior o exterior.
o Abre la imagen folleto.
o Copie en otro lienzo una de las imágenes del folleto.
o De clic en la opción Filtros del Inspector de propiedades y seleccione
Bisel y Relieve.
o Aplique Bisel Interior con las siguientes características.
o Aplique Iluminado con las siguientes características.

o Aplique Iluminado Interior con las siguientes características.
4. Perfilar se utilizará para corregir imágenes desenfocadas, Fireworks nos

provee de tres opciones de perfilado: Perfilar, perfilar más y desperfilar
máscara.
o Seleccione la imagen periódico 2 de su carpeta de trabajo.
o En el inspector de propiedades, haga clic en el botón añadir filtros (+) y a
continuación en el menú emergente Filtros, elija Perfilar / Perfilar más,
observará el siguiente cambio.
o Para eliminar uno o más filtros solo tiene que seleccionarlo del Inspector
de propiedades y presionar el botón (-), como se muestra en la siguiente
imagen.

3.3. USO DE CAPAS.
Las capas fraccionan los documentos de Fireworks CS6 en planos

discrecionales, como si los elementos de una ilustración se dibujasen en
distintas hojas transparentes superpuestas una sobre otras. Los documentos
de Fireworks pueden estar compuestos por muchas capas y cada una contener
muchos objetos. En Fireworks, el panel Capas muestra una lista de las capas y
los objetos contenidos en cada capa. Las capas de Photoshop equivalen a los
objetos individuales de Fireworks.
El empleo de máscaras nos facilita un control creativo sobre las capas y los
diversos objetos. Las máscaras y los modos de mezcla, este se puede aplicar
desde el panel Capas como también por el Inspector de Propiedades.
1. 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. Las máscaras también se muestran
en el panel Capas.
Los controles de la opacidad y de los modos de mezcla se encuentran en la

parte superior del panel Capas.
o Para activar una capa dé clic en el nombre de la capa en el panel Capas /
Seleccione un objeto de esa capa.
o Para agregar una capa dé clic en el botón capa nueva / duplicada sin
que haya ninguna capa seleccionada y elija una nueva capa en el menú
de opciones del panel Capas. Recuerde que al importar un nuevo objeto
sobre el lienzo genera su propia capa.
o Para eliminar una capa arrastre la capa al icono de cubo de basura o

seleccione la capa y de clic en el icono cubo de basura del panel Capas.

o Para duplicar una capa seleccione la capa y elija Duplicar capa en el

menú de opciones del panel capas. A continuación elija el número de
capas duplicadas que deben insertarse y donde deben colocarse en el
orden de apilamiento.
o Asigne un nombre a la capa haciendo doble clic sobre la capa y
escribiendo el nombre que desee.
o Puede mover una capa arrastrándola a la posición que desee en el panel
Capas.
o Proteja una capa bloqueando su contenido haciendo clic en el cuadro
izquierdo de la capa junto al visualizador de capa, se deberá activar el
candado de forma visible.
2. La capa Web es una capa exclusiva que se muestra como la capa superior
de cada documento. Contiene objetos Web, como divisiones y zonas
interactivas, que nos permiten asignar interactividad a los documentos de
Fireworks CS6 exportados.
Esta capa Web es imposible suprimir, duplicar, mover, cambiar de nombre ni

dejar de compartir la capa de Web. Tampoco se permite fusionar los objetos

que residen en ella. Esta capa se comparte siempre en todos los fotogramas
y los objetos Web son visibles en todos ellos.
3. Siga los siguientes procedimientos para crear una interfaz Web aplicando lo
aprendido sobre el panel Capas.
o Abra el documento capas_inicio.png de la carpeta de trabajo.
o Oculte la capa donde se ubica el mundo.
o Seleccione la imagen del teclado, clic en el menú Comandos / Creativo
/ Máscara de vector automática.
o Se visualiza la siguiente ventana Máscara de vector automática,
seleccione la cuarta del grupo lineal y presione Aplicar.
o Edite la máscara con el control de degradado emergente, reduzca o

mueva este control hasta lograr la siguiente imagen.
o Luego dibuje dos rectángulos de color verde y azul y active a cada una el
Modo de Mezcla / Multiplicar.

o Para desarrollar el efecto del mundo realice una circunferencia del mismo
tamaño y aplíquele un degradado con los siguientes colores.
o Ubique la circunferencia debajo de la capa mapa de bits del mundo

arrastrándola en el Panel capas.
o Active Modo de mezcla / Iluminación intensa a la capa mapa de bits –

mundo – desde el panel capas o el Inspector de propiedades, y
obtenga el siguiente resultado.
o Termine la interfaz para lograr el, siguiente impacto visual.

3.4. USO DE MÁSCARAS DE IMÁGENES.
Las máscaras ocultan o muestran partes o zonas de una imagen. Podemos

emplear varias técnicas de enmascaramiento para lograr varios tipos de
efectos creativos. Existen tipos de máscaras que utilizan la escala de grises
para hacer más o menos visibles los objetos seleccionados. Se puede crear
una máscara mediante el panel capas o también empleando los menús
Edición, Modificar o el comando Shift + Ctrl + V
o En el ejercicio anterior realizamos una máscara vector, ahora puede

visualizar la miniatura de máscara; al seleccionarla puede seguir editando la
visibilidad del objeto con el controlador del objeto vectorial marcado en la
imagen inferior.
o Aplicará ahora una máscara usando el comando Shift + Ctrl + V, para eso
abra el archivo máscara.png de su carpeta de trabajo.
o Debe saber que debajo de la foto de Eli Guerra existe un rectángulo con
bordes redondeados, este debe estar ubicado en la posición que permita
ver el área enmascarada.
o Seleccione la foto de Ely Guerra (objeto enmascarado) / presione en
comando Ctrl + x.
o Seleccione el rectángulo gris (objeto enmascaracte) y presione el comando
Shift + Ctrl + V
o Aplique filtros de Fireworks CS6 a la máscara como: bisel, matiz y saturación

y sombra.

3.5. UTILIZACIÓN DE PÁGINAS.
Las páginas se pueden crear antes de comenzar el diseño o bien añadirse a

medida de que se necesiten. Un archivo de Fireworks CS6 (.png) puede
contener una o varias páginas. Las páginas sirven para crear el Sitio Web,
quiere decir que a partir de estas y su exportación se puede tener la
navegabilidad entre páginas del Sitio Web.
Si no se crean páginas nuevas, todos los elementos del archivo residen en una
sola página 01 Página 1.
En el panel Páginas puede ver las páginas de su archivo. Las páginas se

añaden en el orden en el que se crean. Cada página tiene una jerarquía
independiente que incluye la capa Web y capas generales, que pueden
compartirse en distintas páginas. También se puede crear una página maestra
para los elementos comunes. Todas las demás páginas heredan los objetos y
la jerarquía de capas de la página maestra.
Para añadir una página siga uno de estos procedimientos:
o De clic en el botón añadir / duplicar página en el panel Páginas.

o Diríjase al menú Edición, Insertar y elija Página.
o Elija Nueva página en el menú de opciones del panel Páginas.
Para desplazarse entre páginas, siga uno de estos procedimientos:
o Seleccione la página adecuada en el panel páginas.

o Utilice los botones Av Pág y Re Pág del teclado.
Edición de páginas.
Cada página es un documento de lienzo diferente. Puede personalizar el

tamaño, el color y la resolución de la imagen para cada página, según sus
necesidades.
Para editar el tamaño de lienzo, el color o la resolución de la imagen del lienzo
de una página siga el siguiente procedimiento.
1. Elija una página en el panel páginas o en el menú emergente páginas que
se encuentra en la parte inferior de la ventana del documento.

2. Diríjase al menú Modificar, Lienzo y elija Tamaño de la imagen o menú

Modificar, Lienzo, Color del Lienzo o menú Modificar, Lienzo, Tamaño
del Lienzo.
3. Realice los cambios necesarios. Estos cambios también pueden realizarse
en el panel Propiedades cuando el lienzo de una página está seleccionado
4. Para aplicar los cambios solamente a la página seleccionada, deje activa la
casilla Solo página actual. Para aplicar los cambios a todas las páginas,
desactive la casilla.
3.6. UTILIZACIÓN DE PÁGINA MAESTRA.
Si tiene algunos elementos que desea que compartan todas las páginas, puede
utilizar una página maestra. Cuando convierte una página normal en una
página maestra, ésta se sitúa en la parte superior de la lista del panel Páginas.
Cuando se crea una página maestra, se añade una capa de página maestra al
final de la jerarquía de capas en cada página.
o En el panel Páginas, seleccione una página que haya creado y elija Definir
como página maestra en el menú de opciones.
o Las páginas maestras no pueden tener capas compartidas, por lo que al
convertir una página en página maestra, se eliminan las capas compartidas
que tenga y se cambian por capas normales (no compartidas).
o Una vez creada la página maestra, las páginas que se creen heredan la
configuración de la página maestra, como el color y el tamaño del lienzo. Las
páginas existentes no heredan esta configuración, excepto si están
“vinculadas” a la página maestra. Además si la configuración de la página
maestra se modifica posteriormente, ninguna página hereda estos cambios a
menos que esté vinculada a la página maestra.
o Para vincular de forma permanente una página a la página maestra,
seleccione la página en el panel páginas y elija Vincular con página maestra,
en el menú de opciones.
o Si cambia un parámetro de configuración, como el color del lienzo, en una
página que está vinculada a la página maestra, este parámetro tiene

prioridad sobre el de la página maestra y el vínculo se rompe

automáticamente.
o Para eliminar la capa de página maestra seleccione la opción Eliminar capa
de página maestra en el menú de opciones del panel Capas.
o Vuelva a convertir una página maestra en una página normal, seleccione la
página maestra en el panel páginas y elija Reestablecer página maestra en
el menú de opciones.
Generando las páginas del sitio Web.
Para definir la página maestra, concluya el diseño y las zonas interactivas, para
esto deberá analizar y observar estas últimas que funcione la interactividad de
la botonera.
o Convierta a botón los menús, esta servirá a los visitantes del sitio web poder
navegar por el sitio sin problemas.
o Seleccione el menú Nosotros, de clic derecho y seleccione la opción
Convertir en símbolo botón.
o Para darle actividad a los estados seleccione la palabra Nosotros del menú y
presione el comando Ctrl + C
o Abra el panel Estados, de clic al estado Sobre y péguelo, Ctrl + V, en el
centro del área de trabajo y cambie el color a verde con estilo subrayado.
o Observe que ahora está activo el nivel Símbolo del botón.
o Si desea darle actividad al estado Abajo y Sobre abajo pegue el mismo texto
en cada estado y haga la modificación que desee.

o Regrese a Página 1 y realice el mismo procedimiento para los botones:

Lima, Paracas, Ayacucho.
o En las propiedades debe figurar cada nombre del botón y también su
respectivo vínculo. Para esto escriba en la caja de texto en nombre del botón
seguido del término .html este permitirá ver la página en el navegador una
vez esté en el servidor Web. Se sugiere colocar el nombre de Index.html a la
primera página de su sitio Web para poder verlo en el navegador Web.
o Ahora proceda a crear las páginas, basadas en la página maestra.

o Definidos los botones y el diseño genere las páginas de la siguiente forma:
- Seleccione la página maestra, de clic en el botón de opción del panel
Páginas y seleccione Nueva Página renómbrela con el nombre Index,
solo en el caso que sea la primera página de su sitio web que abra el
navegador.
- Utilice los recursos de la carpeta de trabajo para diagramar y ubicar las
imágenes y texto de cada una de sus páginas.
- Termine las cuatro páginas de su sitio web con el mismo procedimiento,
cada página tendrá el nombre de su vínculo, respetando las mayúsculas o
minúscula, de preferencia sin acento ni letra ñ.
o Creadas las cuatro páginas del sitio Web proceda a realizar la exportación
de su sitio Web.
3.7. EXPORTACIÓN DE PÁGINAS A HTML
Puede exportar todas las páginas en una sola acción como archivos HTML.
1. Seleccione el menú Archivo, Exportar.

2. Elija la ubicación de los archivos de exportación.

3. Seleccione HTML e imágenes en el menú emergente Exportar.

4. De clic en el botón opciones y elija su editor de HTML en el menú
emergente Estilo de HTML de la ficha General del cuadro de diálogo
Configuración de HTML.
5. De clic en aceptar para volver al cuadro de diálogo Exportar.
6. Seleccione Exportar archivo HTML en el menú emergente HTML. Al
seleccionar la opción Exportar archivo HTML, se genera un archivo HTML
y los archivos de imagen asociados en la ubicación que se especifique.
7. Seleccione Exportar divisiones en el menú emergente Divisiones si su
documento contiene divisiones.
8. Si desea exportar todas las páginas en el archivo, desactive la casilla Sólo
página actual.
9. Seleccione Colocar imágenes en subcarpeta para almacenar las imágenes
en una carpeta independiente. Puede elegir una carpeta específica o utilizar
el valor predeterminado de Fireworks, una carpeta denominada images.
10. De clic en exportar.
Tras la exportación, los archivos de Fireworks aparecen en su unidad de disco

duro. Si decide exportar todas las páginas, se crea un archivo HTML para cada
página. Las imágenes y los archivos HTML se crean en la ubicación
especificada en el cuadro de diálogo Exportar.
Pruebe la navegabilidad de su sitio web, entre a la carpeta donde se ubica la

exportación, observará las páginas en formato html con el icono de su
navegador predefinido.
Presione clic derecho en index.html / abrir con /google Chrome, como se

muestra en la siguiente imagen. Esta prueba es de tipo Local ya que su PC
funciona como servidor.

Escoja el servidor de su preferencia para colgar su carpeta con el sitio web y

así navegar de forma remota desde Internet.
Para diseñar páginas Web es necesario tener ciertas nociones de composición

gráfica que darán la funcionalidad, usabilidad y estética de la página.

La composición se define como una distribución o disposición de todos los

elementos que incluiremos en un diseño o composición, de una forma perfecta
y equilibrada.
En un diseño lo primero que se debe elegir son todos los elementos que
aparecerán en él, luego debemos distribuirlos, para colocarlos con el espacio
disponible. Los elementos pueden ser tanto imágenes, como espacios en
blanco. Es muy importante tener en cuenta de que forma situaremos estos
elementos, en nuestra composición, para que tengan un equilibrio formal y un
peso igualado.
El peso de un elemento, se determina no sólo por su tamaño, que es bastante

importante, sino por la posición en que este ocupa respecto del resto de
elementos. Por ejemplo, si queremos hacer destacar un elemento en concreto,
lo colocaremos en el centro.
En toda composición, los elementos que se sitúan en la parte derecha, poseen

mayor peso visual, y nos transmiten una sensación de avance. En cambio los
que se encuentran en la parte izquierda, nos proporcionan una sensación de
ligereza.
Esto también se observa, si lo aplicamos en la parte superior de un documento,

posee mayor ligereza visual, mientras que los elementos que coloquemos en la
parte inferior, nos transmitirán mayor peso visual.
Las proporciones, la forma, el tamaño.

Uno de los formatos más conocidos y utilizados es el DINA-4. Podemos limitar
las proporciones de nuestra composición a través del color. También existen
las formas, las angulares alargadas amplían el campo de visión, mientras que
formas angulares cortas, nos transmiten la sensación de timidez y humildad.
Las formas redondas (modelo curvilíneo y rectangular), la proporción y la

simetría, suelen combinarse, las formas en sus variantes también son
simétricas. Estas formas crean armonía, suavidad y perfección. Por ejemplo las
formas simples y regulares son las que se perciben y recuerdan con mayor
facilidad. Las formas simétricas, en el mundo de la naturaleza, un ejemplo del
orden geométrico sobre la formación de sus estructuras vivientes. El tamaño de
un elemento, en relación al resto, también presenta diferentes definiciones. Las
formas grandes, anchas o altas, se perciben cómo, más fuertes, pero las más
pequeñas, finas o cortas, simbolizan la debilidad y delicadeza.

El Equilibrio.
Cada forma o figura representada sobre un papel se comporta como un peso,
un peso visual, porque ejerce fuerza óptica. Los elementos de nuestra
composición gráfica pueden ser imaginados como los pesos de una balanza.
Una composición se encuentra en equilibrio si los pesos de los distintos
elementos que la forman se compensan entre sí.
El Equilibrio Simétrico.
En una composición se puede conseguir el equilibrio a través del uso de líneas
y formas. Todos los pesos deberán estar compensados para obtener el
equilibrio ideal. El equilibro simétrico se produce cuando al dividir una
composición en dos partes iguales, existe igualdad de peso en ambos lados.
No se encuentran elementos que sobresalgan más que el resto en importancia
y peso.
El Equilibrio Asimétrico.
Un equilibrio es asimétrico cuando al dividir una composición en dos partes
iguales, no existen las mismas dimensiones en tamaño, color, peso etc, pero
existe un equilibrio entre dos elementos.
En el equilibrio asimétrico, al ser desiguales los pesos a un lado y otro del eje,
el efecto es variado. La asimetría transmite agitación, tensión, dinamismo,
alegría y vitalidad; en este tipo de equilibrio una masa grande cerca del centro
se equilibra por otra pequeña alejada del aquel. Existe una variedad de
composiciones o diagramaciones para una página Web, entre ellas tenemos:

Modelos de diseño Web.
Observe la composición de una página web mediante la diagramación de

contenidos a través de los siguientes modelos.
Modelo 1: Menú lateral con contenido central.

Modelo 2: Pantalla completa.
Modelo 3: Composición con varios frames.

1. ¿Cuántos tipos de capas tiene un archivo nuevo de Fireworks CS6?

2. ¿Cuál es el objetivo del uso de Página maestra?
3. ¿En que menú se encuentra la opción para la exportación de páginas?
4. ¿Qué debe configurar desde el botón Opciones de la siguiente vista?
5. Después de la exportación, describa como se visualizan las imágenes

de la sub carpeta exportada.
6. Mencione los navegadores con los que cuenta su computadora
personal.
7. Pruebe su Sitio Web y mencione el navegador de mejor visualización.
8. Abra de su carpeta de trabajo el archivo “boceto web.png”, termine la
propuesta del sitio Web, genere cinco páginas, exporte y navegue en él.
Busque recursos en la Web (texto e imágenes)

04
IV. RECONOCER LA IMPORTANCIA DE FLASH PARA LA
GENERACIÓN Y DISEÑO MULTIMEDIA DE INTERFACES
WEB COMO SOFTWARE DE APLICACIÓN.
Reconocer las herramientas básicas de Flash.

Modos de Dibujos de formas.
Trabajo con grupos.
Cambio de colores de relleno, trazado y degradado.
Modificar rellenos con la herramienta Transformar Degradados.
Uso de la herramienta transformación libre.
Alineación de objetos.
 Computadora con microprocesadores Core 2 Duo o de mayor

capacidad.
 Software de Adobe Flash CS6.
 Reconocer las herramientas básicas de Flash.
 Modos de Dibujos de formas.
 Trabajo con grupos.
 Cambio de colores de relleno, trazado y degradado.
 Modificar rellenos con la herramienta Transformar Degradados.
 Uso de la herramienta transformación libre.
 Alineación de objetos.

4.1. RECONOCER LAS HERRAMIENTAS BÁSICAS DE FLASH CS6.
Flash CS6 es un programa utilizado para la creación de animaciones

interactivas de experiencias virtuales presentadas en computadoras
personales, dispositivos móviles y pantallas de cualquier tamaño y resolución;
permite la creación de diseños web, y con contenido interactivo, tipografía
especial, vídeo de alta calidad y animaciones realmente atractivas.
Flujo de trabajo general de Flash.
Para crear una aplicación Flash, se realizan normalmente los pasos básicos
siguientes:
o Planificar la aplicación Decida las tareas básicas que realizará la

aplicación.
o Añadir elementos multimedia Cree e importe elementos multimedia como

imágenes, vídeo, sonido y texto.
o Organizar los elementos Organice los elementos multimedia en el

escenario y en la línea de tiempo.
o Aplicar efectos especiales Aplique filtros gráficos (como desenfoques,

iluminados y biseles), mezclas, además de otros efectos especiales que
considere oportunos.
o Utilizar ActionScript para controlar el comportamiento Escriba código

ActionScript para controlar cómo se comportarán los elementos multimedia,
incluido cómo responderán los elementos a las interacciones del usuario.
o Probar y publicar la aplicación Realice pruebas para verificar que la

aplicación funcione del modo deseado; asimismo, busque y solucione los
errores que encuentre. La aplicación se debe probar durante todo el proceso
de creación. Publique el archivo FLA como archivo SWF para que pueda
mostrarse en una página web y reproducirse con Flash Player.
El Espacio de Trabajo.
Para crear y manipular documentos y archivos se emplean distintos elementos

como paneles, barras y ventanas. Cualquier distribución de estos elementos se
denomina espacio de trabajo.
Para aprovechar al máximo las funciones de la aplicación, es preciso conocer

estas herramientas.

Cuando ejecute Adobe Flash CS6 se muestra un diálogo compuesto por 3

columnas.
En la primera columna se encuentra "Crear con plantilla", esta columna ayuda

a la creación de proyectos en caso no sepa cómo empezar, Adobe Flash CS5
ayuda en la creación de dichos proyectos.
En la misma columna se encuentra "Abrir un elemento reciente", esto significa

que anteriormente ha creado un archivo en flash, ya sea una simple animación
o el index de una página web, se ubicará en esa columna para que resulte más
rápido trabajar nuevamente en ese proyecto.
En la segunda columna se sitúa "Crear nuevo", se utiliza para empezar con un

nuevo proyecto ya sea una página web, una presentación, etc.; entre otras
opciones se apreciará "Archivo de Flash ActionScript 3.0"
En la tercera columna está dispuesta la ayuda del producto con temas

específicos.
Para elegir una opción debe hacer clic sobre ella, Para este caso elija Archivo
AS3, en donde verá la interfaz de Flash CS6
o La pantalla se desglosa en diferentes apartados, como la barra de menú o

barra de herramientas principal donde encontrará todas las ventanas
necesarias para la elaboración de proyectos en Flash, etc.
o La Línea de Tiempo, organiza y controla el contenido de una película a

través del tiempo, en capas y fotogramas. Sus componentes principales son
las capas, los fotogramas y la cabeza lectora.
o El panel inspector de propiedades, sirve para cambiar los atributos de los

elementos creados en Flash, Aquí también visualizará la propiedad del
documento de flash en pixeles, medida estándar para páginas web y
multimedia y por último el escenario donde se insertan los elementos que
forman parte del archivo.
Flash trabaja al máximo de sus

capacidades y crea archivos de
mínimo tamaño si trabaja con
imágenes vectoriales, y en especial
si aprovecha su capacidad para
crear símbolos reutilizables en la
biblioteca, el tamaño de la
publicación se reducirá
drásticamente.

Gestión de ventanas y paneles.

Puede escoger dentro de 7 tipos de espacios de Trabajo: Conceptos básicos,
Clásico, Depurar, Desarrollador y Pantalla pequeña y Animador; inclusive
puede crear un espacio de trabajo personalizado moviendo y manipulando los
paneles y las ventanas del documento.
Cómo acercar el escenario.

Para visualizar el escenario completo en la pantalla, o ampliar un área
determinada del dibujo, modifique el grado de aumento. El grado máximo de
aumento depende de la resolución del monitor así como el tamaño del
documento. El valor mínimo para acercar el escenario es 8%. El valor máximo
de alejamiento del escenario es 2.000%.
o Para acercar un elemento determinado, seleccione la herramienta Zoom en

el panel Herramientas y haga clic en el elemento. Para cambiar entre las
funciones de acercar y alejar de la herramienta Zoom, utilice los
modificadores Aumentar o Reducir (del área de opciones del panel
Herramientas cuando la herramienta Zoom está seleccionada.
o Para acercar una zona específica del dibujo de manera que llene la ventana,
arrastre una selección elástica rectangular del escenario con la herramienta
Zoom.
o Para acercar o alejar el escenario completo, seleccione Ver / Acercar o Ver /
Alejar.
o Para acercar o alejar con un porcentaje específico, elija Ver / Aumentar y
seleccione un porcentaje del submenú, o bien elija un porcentaje del control
de zoom ubicado en la esquina superior derecha de la ventana del
documento.
Utilización del panel Herramientas.
Las herramientas del panel Herramientas permiten dibujar, pintar, seleccionar y

modificar ilustraciones, así como cambiar la visualización del escenario. El
panel Herramientas se divide en cuatro
secciones:
1. La sección de herramientas contiene las

herramientas de dibujo, pintura y selección.
2. La sección de visualización contiene
herramientas para ampliar y reducir, así como
para realizar recorridos de la ventana de la
aplicación.
3. La sección de colores contiene modificadores
de los colores de trazo y relleno.

4. La sección de opciones contiene los modificadores de la herramienta

actualmente seleccionada. Los modificadores afectan a las operaciones de
pintura o edición de la herramienta.
Línea de tiempo en la animación.
La línea de tiempo organiza y controla el contenido de un documento a través

del tiempo en capas y fotogramas. Al igual que en las películas, los
documentos de Flash dividen el tiempo en fotogramas. Las capas son como
varias bandas de película apiladas unas sobre otras, cada una de las cuales
contiene una imagen diferente que aparece en el escenario. Los componentes
principales de la línea de tiempo son las capas, los fotogramas y la cabeza
lectora.
Las capas de un documento aparecen en una columna situada a la izquierda

de la línea de tiempo. Los fotogramas contenidos en cada capa aparecen en
una fila a la derecha del nombre de la capa. El encabezado de la línea de
tiempo situado en la parte superior de la línea de tiempo indica los números de
fotograma. La cabeza lectora indica el fotograma actual que se muestra en el
escenario. Mientras se reproduce el documento, la cabeza lectora se desplaza
de izquierda a derecha de la línea de tiempo.
La información de estado de la línea de tiempo situada en la parte inferior de la

misma indica el número del fotograma seleccionado, la velocidad de
fotogramas actual y el tiempo transcurrido hasta el fotograma actual.
Si se desea organizar las capas se puede utilizar la carpeta de capa, mediante

el menú insertar/línea de tiempo/carpeta de capa o mediante la miniatura nueva
carpeta situada debajo de las capas del panel línea de tiempo.
Partes de la línea de tiempo.

La línea de tiempo muestra dónde hay animación en un documento, incluidas la
animación fotograma por fotograma, la animación interpolada y los trazados de
movimiento.
Los controles de la sección de capas de la línea de tiempo permiten mostrar u

ocultar y bloquear o desbloquear capas, el bloqueo evita cambios accidentales
en el contenido de la capa; también se puede mostrar el contenido de las capas
como contornos. Puede arrastrar fotogramas a una nueva posición en la misma
capa o a otra capa.

A. Cabeza lectora B. Fotograma clave vacío C. Encabezado de la línea de

tiempo D. Icono Capa de guías E. Menú emergente Visualización de
fotogramas F. Animación fotograma a fotograma G. Animación interpolada H.
Botón Desplazarse hasta la cabeza lectora I. Botones Papel cebolla J.
Indicador Fotograma actual K. Indicador Velocidad de fotogramas L. Indicador
Tiempo transcurrido.
Desplazamiento de la cabeza lectora.
La cabeza lectora se mueve por la línea de tiempo mientras se reproduce el

documento para indicar el fotograma que se muestra en cada momento en el
escenario. El encabezado de la línea de tiempo muestra los números de
fotograma de la animación. Para que en el escenario aparezca un determinado
fotograma, desplace la cabeza lectora hasta ese fotograma en la línea de
tiempo.
Para mostrar un fotograma determinado, si trabaja con tantos fotogramas que

no es posible que todos aparezcan a la vez en la línea de tiempo, desplace la
cabeza lectora por la línea de tiempo.
o Para ir a un fotograma, haga clic en la posición del fotograma en el

encabezado de la línea de tiempo, o bien arrastre la cabeza lectora hasta la
posición deseada.
o Para centrar la línea de tiempo en el fotograma actual, Haga clic en la barra

de desplazamiento hasta la cabeza lectora situada en la parte inferior de la
línea de tiempo.
El inspector de propiedades.
El inspector de propiedades facilita el acceso a los atributos más utilizados de

la selección actual, ya sea en el escenario o en la línea de tiempo. Puede
modificar los atributos del objeto o documento en el inspector de propiedades
sin acceder a los menús o paneles que contienen estos atributos. Como por
ejemplo características de formas o textos como Fuente, Color, Espaciado,
Dirección, Suavizado etc.

El inspector de propiedades muestra información y la configuración del

elemento que está seleccionado, que puede ser un documento, un texto, un
símbolo, una forma, un mapa de bits, un vídeo, un grupo, un fotograma o una
herramienta. Cuando hay dos o más tipos de objetos seleccionados, el
inspector de propiedades muestra el número total de objetos seleccionados.
El inspector de propiedades facilita el acceso a los atributos más utilizados de
la selección actual, ya sea en el escenario o en la línea de tiempo. Puede
modificar los atributos del objeto o documento en el inspector de propiedades
sin acceder a los menús o paneles que contienen estos atributos. Como por
ejemplo características de formas o textos como Fuente, Color, Espaciado,
Dirección, Suavizado etc.
El inspector de propiedades muestra

información y la configuración del elemento que
está seleccionado, que puede ser un
documento, un texto, un símbolo, una forma, un
mapa de bits, un vídeo, un grupo, un fotograma
o una herramienta. Cuando hay dos o más tipos
de objetos seleccionados, el inspector de
propiedades muestra el número total de objetos
seleccionados. Para mostrar el inspector de
propiedades, seleccione Ventana /
Propiedades, o presione Control+F3.
Panel Biblioteca.
El panel Biblioteca (Ventana / Biblioteca) es donde se

guardan y organizan los símbolos creados en Flash,
además de archivos importados tales como gráficos de
imágenes de mapa de bits, archivos de sonido y clips
de vídeo. El panel Biblioteca permite organizar
elementos de biblioteca en carpetas, consultar con qué
frecuencia se utiliza un elemento en un documento y
ordenar los elementos por nombre, tipo, fecha, número
de usos o el identificador de vinculación de ActionScript.
También puede buscar en el panel Biblioteca con el
campo de búsqueda y definir propiedades en las

selecciones de la mayoría de objetos múltiples.
Panel Acciones.
El panel Acciones permite crear y editar código ActionScript para un objeto o

fotograma. El panel Acciones se activa cuando se selecciona una instancia de
un fotograma, botón o clip de película. El título del panel Acciones cambia a
Acciones - Botón, Acciones Clip de película o Acciones - Fotograma, según el
elemento que esté seleccionado.
Para mostrar el panel Acciones, seleccione Ventana / Acciones o presione F9.
4.2. MODOS DE DIBUJOS DE FORMAS.
Dibujo de rectángulos y óvalos Las herramientas Óvalo y Rectángulo permiten

crear estas formas geométricas básicas y aplicar trazos, rellenos y esquinas
redondeadas. Además del modo de dibujo combinado y de objetos, las
herramientas Óvalo y Rectángulo también proporcionan el modo de dibujo de
objeto simple.
Al crear rectángulos u óvalos con las herramientas Rectángulo simple u Óvalo

simple, Flash dibuja las formas como objetos independientes, no muy distintos
de las que se crean con el modo de dibujo de objetos. Las herramientas de
formas simples permiten especificar el radio de esquina de los rectángulos, así
como el ángulo inicial y final y el radio interior de los óvalos, mediante el
inspector de propiedades. Tras crear una forma simple, modifique los radios y
dimensiones. Para ello, seleccione la forma en el escenario y ajuste los
controles correspondientes en el inspector de propiedades.
Dibujo de rectángulos simples.
1. Para seleccionar la herramienta Rectángulo simple, haga clic en la

herramienta Rectángulo, mantenga presionado el botón del ratón y
seleccione la herramienta Rectángulo simple en el menú emergente.
2. Para crear un rectángulo simple, arrastre la herramienta Rectángulo simple
al escenario.
3. Con el rectángulo simple seleccionado, puede utilizar los controles del
inspector de propiedades para seguir modificando la forma o especificar los
colores de trazo y relleno.
Dibujo de óvalos simples.
1. Haga clic en la herramienta Rectángulo y mantenga presionado el botón del

ratón, y seleccione la herramienta Óvalo simple.

2. Para crear un óvalo simple, arrastre la herramienta Óvalo simple al

escenario. Para dibujar la forma de un círculo, mantenga presionada la tecla
Shift mientras arrastra.
3. Con el óvalo simple seleccionado en el escenario, puede utilizar los
controles del inspector de propiedades para seguir modificando la forma o
especificar los colores de trazo o relleno.
En Flash, puede crear varios tipos de objetos gráficos con ayuda de los
distintos modos y herramientas de dibujo. Cada uno de ellos tiene ventajas e
inconvenientes. Si entiende las posibilidades de los distintos tipos de objetos
gráficos, podrá tomar decisiones adecuadas a la hora de elegir el tipo de objeto
con el que trabajar.
Modo de dibujo combinado.

El modo de dibujo predeterminado combina automáticamente las formas
dibujadas cuando se superponen. Cuando se dibujan formas que se
superponen una a otra en la misma capa, la forma de la parte superior corta la
parte de la forma inferior sobre la que se superpone. De esta forma, el dibujo
de formas es un modo de dibujo destructivo.
Por ejemplo, si dibuja un círculo, lo cubre con un círculo más pequeño y

seguidamente selecciona el círculo más pequeño y lo desplaza, la parte del
segundo círculo que ha quedado cubierta por el primero quedará eliminada. De
forma predeterminada, Flash utiliza el modo de dibujo combinado.
Cuando una forma tiene trazo y relleno, éstos se consideran elementos gráficos
independientes, que se pueden seleccionar y mover de forma independiente.
Las formas creadas con este modo de dibujo se fusionan cuando quedan
solapadas. Al seleccionar una forma y desplazarla, se altera la forma
superpuesta.
1. Seleccione la opción Dibujo combinado del panel Herramientas.

2. Seleccione una herramienta de dibujo del panel Herramientas y dibuje en
el escenario.
Modo de dibujo de objetos.
Crea formas denominadas objetos de dibujo. Los objetos de dibujo son objetos
gráficos independientes que no se combinan automáticamente cuando se

superponen. Esto le permite combinar formas unas sobre otras sin que se
altere su apariencia si más tarde decide separarlas o modificar algunas de
ellas. Flash crea las formas como objetos independientes que pueden
manipularse por separado.
Cuando una herramienta de dibujo está en el modo de dibujo de objetos, las

formas que se crean con ella tienen contenido propio. El trazo y relleno de una
forma no son elementos independientes y las formas que se superponen no se
alteran unas a otras. Cuando se selecciona una forma creada con el modo de
dibujo de objetos, Flash rodea la forma con un cuadro delimitador para
identificarla.
Para dibujar formas con el modo de dibujo de objetos, debe activarlo

explícitamente.
1. Seleccione una herramienta de dibujo que admita el modelo de dibujo de

objetos (las herramientas Lápiz, Línea, Pluma, Pincel, Óvalo, Rectángulo y
Polígono).
2. Seleccione el botón Dibujo de objetos en la categoría Opciones del panel de
herramientas, o bien presione la tecla J para alternar entre los modos de
dibujo de objetos y combinado. Este botón alterna los modos de dibujo
combinado y de objetos. Puede definir las preferencias aplicables a la
sensibilidad de contacto cuando se seleccionan formas creadas con el modo
de dibujo de objetos.
3. Dibuje en el escenario.
Conversión de forma modo de dibujo combinado a modo dibujo de

objetos
1. Seleccione la forma en el escenario.

2. Para convertir la forma al modo de dibujo de objetos, seleccione Modificar /
Combinar objetos / Unión. Tras la conversión, la forma se trata como un
objeto de dibujo vectorial que no altera su apariencia al interactuar con otras
formas.
Objetos simples.
Los objetos simples son formas que permiten ajustar sus características desde
el inspector de propiedades. Después de crear una forma, se puede controlar

con precisión su tamaño, radio de esquina y otras propiedades en cualquier

momento sin necesidad de volverla a dibujar desde cero.
Solapamiento de formas.
Al dibujar una línea sobre otra línea o una forma pintada en el modo de dibujo
combinado, las líneas solapadas se dividen en segmentos en los puntos de
intersección. Utilice la herramienta Selección para seleccionar, mover y
remodelar cada segmento por separado.
Al pintar sobre formas y líneas, lo que queda en la parte superior sustituye a lo

que estaba debajo. La pintura del mismo color se mezcla. La pintura de colores
diferentes conserva los distintos colores. Utilice estas funciones para crear
máscaras, siluetas y otras imágenes en negativo.
Para evitar modificar accidentalmente las formas y las líneas al solaparlas,

agrupe las formas o utilice capas para separarlas.
Eliminación del contenido del escenario.
Haga doble clic en la herramienta Borrador de la barra de herramientas. De

este modo borrará todos los tipos de contenido del escenario y del
portapapeles.
1. Seleccione la herramienta Borrador y, a continuación, haga clic en el

modificador Grifo.
2. Haga clic en el segmento de trazo o el área rellena que desea eliminar.
Borrado mediante arrastre.
1. Seleccione la herramienta Borrador.

2. Haga clic en el modificador Modo Borrador y seleccione un modo de
borrado:
o Borrar normal Borra trazos y rellenos de la misma capa.
o Borrar rellenos Sólo borra rellenos, sin afectar a los trazos.
o Borrar líneas Sólo borra trazos, sin afectar a los rellenos.
o Borrar rellenos seleccionados Sólo borra los rellenos que haya
seleccionado y no afecta a los trazos, estén seleccionados o no.
(Seleccione los rellenos que desea borrar antes de utilizar la herramienta
Borrador en este modo).

o Borrar dentro Sólo borra el relleno en el que se ha iniciado el trazo del

borrador. Si el punto de inicio de borrado está vacío, no se borra nada.
Este modo no afecta a los trazos.
3. Haga clic en el modificador Forma de borrador y seleccione el tamaño y la
forma del borrador. Asegúrese de no seleccionar el modificador Grifo.
4. Arrastre sobre el escenario.
Selección de Objetos.
Para modificar un objeto, primero debe seleccionarlo. Seleccione objetos con

las herramientas Selección, Subselección y Lazo. Puede agrupar objetos
individuales para manipularlos como un único objeto. La modificación de líneas
y formas puede alterar otras líneas y formas de la misma capa. Flash resalta
los objetos y los trazos que se han seleccionado con un recuadro de
delimitación.
Puede optar por seleccionar únicamente los trazos de un objeto o sus rellenos.
Se puede ocultar el resaltado de la selección para editar los objetos sin tener
que visualizar dicho resaltado.
Selección con la herramienta selección (V) Selección con la herramienta subselección (A)
Al seleccionar un objeto, el inspector de propiedades muestra lo siguiente:
o El trazo y el relleno de dicho objeto, sus dimensiones en píxeles y las

coordenadas "x" e "y" del punto de transformación del objeto.
o Si se seleccionan varios elementos, se visualizan. Las dimensiones en

píxeles y las coordenadas "x" e "y" del conjunto de elementos seleccionado.
El inspector de propiedades se puede utilizar para cambiar el trazo y el relleno

de un objeto.
Para evitar que se seleccione y se cambie accidentalmente un grupo o símbolo,
bloquéelos.

La herramienta Selección permite seleccionar objetos enteros haciendo clic en

un objeto o arrastrando para incluir al objeto dentro de un recuadro de
delimitación rectangular.
o Para seleccionar un trazo, relleno, grupo, instancia o bloque de texto, haga

clic en el objeto.
o Para seleccionar líneas conectadas, haga doble clic en una de las líneas.
o Para seleccionar una forma que tenga relleno y contorno, haga doble clic en
el relleno.
o Para seleccionar objetos dentro de un área rectangular, arrastre un recuadro

de delimitación alrededor del objeto u objetos que desee seleccionar.
o Para añadir elementos a una selección, mantenga presionada la tecla Shift

mientras realiza las selecciones.
o Para seleccionar todos los elementos de todas las capas de una escena,
seleccione Edición / Seleccionar todo, o presione Control+A. La opción
Seleccionar todo no selecciona los objetos de capas bloqueadas u ocultas,
ni capas que no estén en la línea de tiempo actual.
o Para anular la selección de todos los elementos en todas las capas,

seleccione Edición / Anular todas las selecciones, o presione Ctrl+Shift+A.
o Para seleccionar todo en una capa entre fotogramas clave, haga clic en un
fotograma de la línea de tiempo.
o Para bloquear o desbloquear un grupo o símbolo, seleccione el grupo o

símbolo y elija Modificar / Organizar / Bloquear.Seleccione. Modificar /
Organizar / Desbloquear todo para desbloquear todos los grupos y
símbolos bloqueados.
4.3. TRABAJO CON GRUPOS.
Puede agrupar objetos individuales para manipularlos como un único objeto en

un grupo de dibujo; esto ayudará a organizar mejor sus dibujos o formas; de la
misma manera cuando tenga que aplicar interpolación de movimiento a sus
gráficos, podrá entrar al grupo para animarlos.

Otra forma de grupo en Flash CS6 es grupo de interpolación (tema que se

desarrollará más adelante) es un grupo de fotogramas de la línea de tiempo en
el que el objeto tiene una o más propiedades que cambian con el tiempo. Un
grupo de interpolación se muestra en la línea de tiempo como un grupo de
fotogramas en una sola capa con fondo azul. Los grupos de interpolación se
pueden seleccionar como un solo objeto y se pueden arrastrar de un lugar a
otro de la línea de tiempo (también entre capas). Sólo es posible animar un
objeto del escenario en cada grupo de interpolación. Este objeto se denomina
objeto de destino del grupo de interpolación.
4.4. CAMBIO DE COLOR DE RELLENO, TRAZADO Y DEGRADADO.
La herramienta Cubo de pintura rellena con color las áreas cerradas. Con esta
herramienta es posible realizar lo siguiente:
o Rellenar áreas vacías así como cambiar el color de áreas ya pintadas.

o Pintar con colores sólidos, degradados y rellenos de mapa de bits.
o Utilizar la herramienta Cubo de pintura para rellenar áreas que no están
cerradas por completo.
1. Seleccione la herramienta Cubo de pintura en el panel Herramientas.

2. Seleccione un color y estilo de relleno.
3. Haga clic en el modificador Tamaño de hueco que aparece en la parte
inferior del panel Herramientas y seleccione una opción de tamaño de
hueco:

No cerrar huecos para cerrar manualmente los huecos antes de rellenar la

forma. Para dibujos complicados, puede ser más rápido cerrar los huecos
manualmente.
La herramienta Bote de tinta permite dar color o cambiar de color al trazo, en

ambos casos puede variar las propiedades de estas herramientas en el
respectivo panel.
4.5. USO DE LA HERRAMIENTA TRANSFORMACIÓN LIBRE.
Se pueden realizar transformaciones individuales o combinar varias

transformaciones, como el movimiento, la rotación, la escala, el sesgo y la
distorsión.
1. Seleccione un objeto gráfico, grupo, instancia o bloque de texto en el

escenario.
2. Haga clic en la herramienta Transformación libre. Al mover el puntero por

encima y alrededor de la selección, éste cambiará para indicar la función de
transformación que se encuentra disponible.
3. Arrastre los selectores para transformar la selección de la manera siguiente:
o Para mover la selección, sitúe el puntero encima del objeto dentro del
recuadro de delimitación y arrastre el objeto a una nueva posición. No
arrastre el punto de transformación.
o Para establecer el centro de rotación o escala, arrastre el punto de

transformación a una nueva ubicación.
o Para rotar la selección, sitúe el puntero fuera de un selector de esquina y

arrastre. La selección gira alrededor del punto de transformación. Arrastre
con la tecla Shift presionada para rotar en incrementos de 45°.
o Para girar alrededor de la esquina opuesta, arrastre con la tecla Alt

presionada.
o Para escalar la selección, arrastre un selector de esquina en diagonal

para escalar en dos dimensiones. Arrastre con la tecla Shift presionada
para cambiar el tamaño de forma proporcional.
o Arrastre un selector de esquina o lateral (horizontal o vertical) para

escalar únicamente en la dirección correspondiente.
o Para sesgar la selección, sitúe el puntero en el contorno entre los

selectores de transformación y arrastre.

o Para distorsionar formas, presione la tecla Ctrl y arrastre un selector de

esquina o lateral.
Con las teclas Shift y Ctrl presionadas, arrastre un selector de esquina para estrechar el objeto,
es decir, para situar la esquina seleccionada y la adyacente a la misma distancia de su origen.
4. Para finalizar la transformación, haga clic fuera del elemento seleccionado.
4.6. TRANSFORMACIÓN DE LOS RELLENOS CON DEGRADADO.
Puede transformar un relleno con degradado o de mapa de bits ajustando el

tamaño, la dirección o el centro del relleno.
1. Seleccione la herramienta Transformación de degradado del panel

Herramientas. Si no puede ver la herramienta Transformación de degradado
en el panel Herramientas, haga clic en la herramienta Transformación libre y,
sin soltar el botón del ratón, seleccione la herramienta Transformación de
degradado en el menú que se muestra.
2. Haga clic en un área rellena con un degradado o un mapa de bits. Se

muestra un recuadro de delimitación con selectores de edición. Al colocar el
puntero sobre uno de los selectores, éste cambia para indicar su función.
o Punto central El icono de desplazamiento del selector central adopta la

forma de una flecha de cuatro puntas.
o Punto focal El selector del punto focal
se muestra únicamente cuando el
degradado es de tipo radial. Su icono de
desplazamiento adopta la forma de un
triángulo invertido.
o Tamaño El icono de desplazamiento del
selector de tamaño (icono del selector
central del borde del recuadro de
delimitación) es un círculo con una flecha
en su interior.
o Rotación Ajusta la rotación del degradado. El icono de desplazamiento
del selector de rotación (icono del selector inferior del borde del recuadro

de delimitación) adopta la forma de cuatro flechas que surgen de un

círculo.
o Anchura Ajusta la anchura del degradado. El icono de desplazamiento de
este selector (selector cuadrado) adopta la forma de una flecha de dos
puntas.
Controles de degradado radial.

Rehaga el relleno con degradado con mapa de bits utilizando cualquiera de los
procedimientos siguientes:
o Para mover el centro del relleno con degradado o de mapa de bits, arrastre
el punto central.
o Para cambiar el grosor del relleno con degradado o de mapa de bits, arrastre
el selector cuadrado situado en un lado del recuadro de delimitación "C".
Esta opción sólo cambia el tamaño del relleno, no el del objeto que contiene
el relleno
o Para cambiar la altura del relleno con degradado o de mapa de bits, arrastre
el selector cuadrado situado en la parte inferior del recuadro de delimitación.
o Para girar el relleno con degradado o de mapa de bits, arrastre el selector de

rotación circular situado en la esquina. También puede arrastrar el selector
más bajo del círculo de delimitación de un relleno o degradado circular.
o Para escalar un degradado lineal o un relleno, arrastre el selector cuadrado

situado en el centro del recuadro de delimitación.
o Para cambiar el punto focal de un degradado circular, arrastre el selector

redondo central del círculo de delimitación.
o Para sesgar o inclinar un relleno dentro de una forma, arrastre uno de los
selectores circulares de la parte superior o derecha del recuadro de
delimitación.
o Para repetir la imagen del mapa de bits como un patrón dentro de una forma,
ajuste el tamaño del relleno.
Alineación de objetos.
El panel Alinear permite alinear objetos seleccionados a lo largo de los ejes

vertical y horizontal. Puede alinear objetos verticalmente a lo largo del borde
derecho, del centro o del borde izquierdo de los objetos seleccionados, o bien,
horizontalmente a lo largo del borde superior, del centro o del borde inferior de
dichos objetos.

1. Seleccione los objetos que desea alinear.

2. Seleccione Ventana / Alinear.
3. En el panel Alinear, seleccione "En escenario" para aplicar modificaciones
de alineación relativas a las dimensiones del escenario.
4. Para modificar los objetos seleccionados, seleccione los botones de
alineación.
El color, es una sensación que se produce en respuesta a una estimulación

nerviosa del ojo, causada por una longitud de onda luminosa. El ojo humano
interpreta diferentes colores, dependiendo de las distancias longitudinales.
El color nos produce muchas sensaciones, sentimientos, diferentes estados de

ánimo, nos transmite mensajes, nos expresa valores, situaciones y sin
embargo no existe más allá de nuestra percepción visual. El mundo es de
colores, donde hay luz, hay color. La percepción de la forma, profundidad o
claroscuro está estrechamente ligada a la percepción de los colores. El color es
un atributo que percibimos de los objetos cuando hay luz. La luz es constituida
por ondas electromagnéticas que se propagan a unos 300.000 kilómetros por
segundo. Esto significa que nuestros ojos reaccionan a la incidencia de la
energía y no a la materia en sí. Las ondas forman, según su longitud de onda,
distintos tipos de luz, como infrarroja, visible, ultravioleta o blanca. Las ondas
visibles son aquellas cuya longitud de onda está comprendida entre los 380 y
770 nanómetros.
Los objetos devuelven la luz que no absorben hacia su entorno. Nuestro campo
visual interpreta estas radiaciones electromagnéticas que el entorno emite o
refleja, como la palabra “COLOR”.
Definición de tono, saturación, luminosidad y brillo.
1. Tono: (hue), Matiz o croma es el atributo que diferencia el color y por la cual
designamos los colores: verde, violeta, anaranjado.
2. Saturación:(saturation) Es la intensidad cromática o pureza de un color.

Valor (value) es la claridad u oscuridad de un color, está determinado por la
cantidad de luz que un color tiene. Valor y luminosidad expresan lo mismo.
3. Brillo: (brightness) Es la cantidad de luz emitida por una fuente lumínica o

reflejada por una superficie.
4. Luminosidad: (lightness) Es la cantidad de luz reflejada por una superficie

en comparación con la reflejada por una superficie blanca en iguales
condiciones de iluminación.

El color ha sido estudiado, por científicos, físicos, filósofos y artistas. Cada uno
en su campo y en estrecho contacto con el fenómeno del color, llegaron a
diversas conclusiones, muy coincidentes en algunos aspectos o bien que
resultaron muy satisfactorias y como punto de partida para posteriores
estudios.
Armonías Cromáticas.
Es la relación entre gamas que produce en nuestra sensibilidad una impresión

de equilibrio, de paz, de amabilidad; aunque su interpretación es muy personal
no deja de mantener un denominador común. La más elemental de las
armonías es la formada por los colores de una misma gama; pero esto no es
preciso, deben tener un valor parecido, o si los valores son muy extremos, la
distribución de las diversas superficies coloreadas debe ser equilibrada, de
cualquier modo siempre habrá un color dominante.
Podemos organizar una composición armoniosa si todos los colores tienen un

elemento subdominante común. Por ejemplo no se puede hablar de armonía
entre un rojo, un ocre y un azul; pero si al rojo se le agrega un poco de azul, se
torna algo violáceo, y si le agregamos al ocre, se torna algo verdoso; lo que
resuelve el problema.
Las armonías de relación son muy bellas en el efecto y pueden ser obtenidas,
pintando todo el diseño con colores cálidos o con colores fríos, aunque esto
puede determinar un resultado monótono; este será más satisfactorio si se
combinan colores de las dos temperaturas y es compensada con el descanso
de los fríos la excitación de los cálidos o viceversa.
Colores Armónicos: Se llaman armónicos a dos o más colores cuando están

integrados por un color común. Por ejemplo: El amarillo y el anaranjado son
armónicos porque ambos tienen amarillo.
El amarillo verdoso, el amarillo, el amarillo anaranjado y el anaranjado son

armónicos porque todos tienen amarillo.
Clases de Armonías:
1. ARMONÍA ACROMÁTICA: Llamada también de valores. Está formada por

una serie de grises graduados sucesivamente hacia el blanco o al negro.
2. ARMONÍA MONOCROMÁTICA: Se forma por un solo color, graduando su
tono de menor a mayor o viceversa. Se consigue graduando el color con
blanco o negro. Será una armonía monocromática, una serie yuxtapuesta de
tonos verdes ordenados de acuerdo a su intensidad tonal.
3. ARMONÍA DE COLORES ANÁLOGOS: Está formada por la yuxtaposición
de colores que tienen en su integración un color en común. Ejemplo: Verde,
amarillo y anaranjado; son análogos porque todos tienen amarillo

Anaranjado, rojo y violeta; son análogos porque todos tienen rojo. Violeta,
azul y verde; son análogos porque todos tienen azul.
4. ARMONIA DE COMPLEMENTARIOS: Se llama armonía de

complementarios cuando se yuxtaponen dos colores complementarios. Esta
armonía está sujeta a la ley de las áreas y de las intensidades. La colocación
yuxtapuesta de dos colores complementarios con la intensidad que aparecen
en el círculo cromático, resulta demasiados contrastantes y chocantes a la
vista; por la Ley de exaltación mutua se realzan demasiado, se intensifican
violentamente resultando desagradables. Por lo tanto para evitar la
estridencia cromática y conseguir la armonía, conviene compensar tonos y
valores o regularlos por la extensión. Si el valor de un tono cromático es muy
alto, intenso o fuerte, conviene que su complementario sea de valor bajo,
agrisado o neutro. Dos complementarios intensos armonizan, atenuándolos
o neutralizándolos.
Panel Color.
El panel Color permite modificar la paleta de colores de un archivo FLA y
modificar el color de los trazos y rellenos, el panel Muestras contiene colores
disponibles, como también almacena colores para utilizar. Algunas de las
opciones son:
o Importar, exportar, eliminar y modificar la paleta de colores de un archivo
FLA utilizando el panel Muestras.
o Seleccionar colores en modo hexadecimal.
o Crear degradados de varios colores.
o Utilizar degradados para obtener una amplia variedad de efectos, como dar
profundidad a un objeto bidimensional.
El panel Color incluye los siguientes controles:

a) Color de trazo Cambia el color del trazo, o borde, de un objeto gráfico.
b) Color de relleno Cambia el color del relleno. El relleno es el área de color

contenida en la forma.
c) Menú Tipo de color Cambia el estilo del relleno.
d) Ninguno Quita el relleno.
e) Sólido Color Proporciona un único color, sólido, de relleno.
f) Lineal Degradado Produce un degradado que se difumina siguiendo un

trazado lineal.
g) Radial Degradado Produce un degradado que se difumina siguiendo un

trazado circular a partir de un punto focal central.
h) Mapa de bits Rellenar Rellena el área seleccionada repitiendo en mosaico

la imagen de mapa de bits que seleccione. Al elegir esta opción, se abre un
cuadro de diálogo en el que se puede seleccionar una imagen de mapa de
bits almacenada en el sistema local y añadirla a la biblioteca. El mapa de bits
se aplica como relleno y adopta la apariencia de un mosaico en el que la
imagen se repite en el interior de la forma.
i) RGB Permite cambiar la densidad de los colores rojo, verde y azul (RVA) del
relleno.
j) Alfa Establece la opacidad de un relleno sólido o del deslizador

seleccionado para un relleno con degradado. Un valor del 0% crea un relleno
invisible (transparente), mientras que un valor del 100% crea un relleno
opaco.
k) Muestra de color actual Muestra el color actualmente seleccionado. Si se

ha seleccionado un relleno con degradado (lineal o radial) en el menú Tipo,
la opción Muestra de color actual presenta las transiciones de color del
degradado.
l) Selector de color del sistema Permite seleccionar un color visualmente.

Haga clic en el selector de color del sistema y arrastre el puntero en forma
de cruz hasta encontrar el color que desea aplicar.
m)Valor hexadecimal Muestra el valor hexadecimal del color actual. Para

cambiar el color utilizando este parámetro, introduzca su valor hexadecimal.
Los valores hexadecimales de color son combinaciones alfanuméricas de
seis dígitos, cada una de las cuales representa un color determinado.

n) Flujo Permite controlar los colores aplicados más allá de los límites de un
degradado lineal o radial.
o) Extender Color (Valor predeterminado) Aplica los colores seleccionados

más allá del límite del gradiente.
p) Reflejo Color Rellena la forma aplicando a los colores del degradado un

efecto especular. El degradado especificado se aplica de forma repetida
desde el principio hasta el final; a continuación se repite del final al principio
y de nuevo desde el principio al final del gradiente, hasta que la forma queda
rellena.
q) Repetir Color Repite el degradado de principio a fin hasta que la forma

queda rellena.
r) RGB lineal Crea un degradado radial o lineal compatible con SVG-(gráficos

vectoriales escalables).

1. Abra el archivo degradado.fla de su carpeta de trabajo y realice cambios de
color al degradado de la capa fondo.
2. Abra el archivo degradado.fla de su carpeta de trabajo y realice cambios de
color de relleno a la imagen de la capa logo.
3. Abra el archivo grupo de trabajo.fla y entre al grupo para contar cuantos
elementos conforman en objeto de dibujo.
4. Qué beneficio aporta el manejo de grupos de trabajo al dibujar en Flash
CS6.
5. Ingrese al archivo niño y mascota.fla de su carpeta de trabajo y analice las
características del diseño y sus posibles animaciones dentro de su grupo de
trabajo.
6. Con ayuda de su Instructor, realice una interpolación de movimiento para
que el niño y mascota se desplace de izquierda a derecha en el escenario,
observe la capa 1 y haga un comentario de la línea de tiempo.

05
V. ELABORAR SÍMBOLOS E INSTANCIAS PARA COLOCAR
EN LA ESCENA DE TRABAJO FLASH.
Tipos de símbolos.
Edición de símbolos de clip de película.
Conversión de animación en clip de película.
Duplicación de símbolos
Creación de instancias
Creación de botones
Copia de elementos de bibliotecas.
 Computadora con microprocesadores Core 2 Duo o de mayor
capacidad.
 Software de Adobe Flash CS6
 Tipos de símbolos.
 Edición de símbolos de clip de película.
 Conversión de animación en clip de película.
 Duplicación de símbolos
 Creación de instancias
 Creación de botones
 Copia de elementos de bibliotecas.

5.1. TIPOS DE SÍMBOLOS.
Un símbolo es un gráfico, botón o clip de película que se crea una vez en el

entorno de edición de Flash Professional o mediante las clases SimpleButton
(AS 3.0) y MovieClip. Estos símbolos pueden volver a utilizarse en el mismo o
en otros documentos.
Los símbolos pueden incluir ilustraciones importadas de otras aplicaciones. Los

símbolos creados forman parte automáticamente de la biblioteca del
documento activo.
Una instancia es una copia de un símbolo ubicada en el escenario o anidada

en otro símbolo. Una instancia puede presentar un color, tamaño o función
diferente de los de su símbolo principal. Al editar el símbolo, se actualizan
todas sus instancias, pero al aplicar efectos a una instancia de un símbolo, sólo
se aplica a la instancia en cuestión.
La utilización de símbolos en los documentos reduce el tamaño del archivo de

forma considerable; el almacenamiento de varias instancias de un símbolo
requiere menos espacio que el almacenamiento de varias copias del contenido
del símbolo. La utilización de símbolos acelera la reproducción de archivos
SWF, ya que estos tan sólo deben descargarse sólo una vez en Flash®
Player.
Los símbolos pueden compartirse entre varios documentos como elementos de

bibliotecas compartidas durante la edición o en tiempo de ejecución. En el caso
de elementos compartidos en tiempo de ejecución, puede vincular elementos
de un documento de origen a cuantos documentos de destino desee, sin tener
que importar los elementos a los documentos de destino.
Si importa elementos de bibliotecas con el mismo nombre que otros elementos

de la biblioteca, puede solucionar los conflictos de nombres sin sobrescribir
accidentalmente los elementos ya existentes.
Cada símbolo posee una línea de tiempo y un escenario exclusivos que

incluyen capas. Así como puede añadir fotogramas, fotogramas clave y capas
a la línea de tiempo principal, también puede efectuar la misma operación en la
línea de tiempo de un símbolo. Cuando se crea un símbolo, se elige el tipo de
símbolo.
Utilice símbolos gráficos para las imágenes estáticas y para crear

animaciones reutilizables asociadas a la línea de tiempo principal. Los símbolos
gráficos funcionan de manera sincronizada con la línea de tiempo principal. Los
controles y sonidos interactivos no funcionan en la secuencia de animación de
un símbolo gráfico. Los símbolos gráficos añaden menos tamaño al archivo
FLA que los botones o clips de película, ya que no tienen línea de tiempo.

Utilice símbolos de botón para crear botones interactivos que respondan a las
pulsaciones y desplazamientos del ratón, o a otras acciones. Defina los
gráficos asociados con varios estados del botón y, a continuación, asigne
acciones a una instancia del botón.
Utilice símbolos de clip de película para crear piezas de animación

reutilizables. Los clips de película tienen sus propias líneas de tiempo de varios
fotogramas, independientes de la línea de tiempo principal. Se encuentran
dentro de una línea de tiempo principal que contiene elementos interactivos
como controles, sonidos e incluso otras instancias de clip de película. También
pueden colocarse instancias de clip de película dentro de la línea de tiempo de
un símbolo de botón para crear botones animados.
5.2. CREACIÓN DE SÍMBOLOS.
Puede crear un símbolo a partir de los objetos seleccionados en el escenario,

crear un símbolo vacío y elaborar o importar el contenido en modo de edición
de símbolos. Los símbolos pueden tener todas las funcionalidades que Flash
CS6 puede crear, incluidas animaciones.
Mediante los símbolos con animación pueden crearse aplicaciones Flash

Professional con mucho movimiento, al mismo tiempo que se reduce al mínimo
el tamaño de archivo. Considere la posibilidad de crear una animación en un
símbolo que incluya una acción repetitiva o cíclica, como por ejemplo el
movimiento hacia arriba y hacia abajo de las alas de un pájaro.
Para añadir símbolos a su documento utilizando elementos de bibliotecas

compartidas durante la edición o en tiempo de ejecución.
Conversión de elementos seleccionados en un símbolo.

Seleccione uno o varios elementos en el escenario. Realice uno de los
siguientes pasos:
1. Seleccione Modificar / Convertir en símbolo o presione la tecla F8.
2. Arrastre la selección al panel Biblioteca.
3. Haga clic con el botón derecho del ratón y seleccione Convertir en símbolo
en el menú contextual.

4. En el cuadro de diálogo Convertir en símbolo, escriba el nombre del símbolo

y seleccione el comportamiento.
5. Haga clic en la cuadrícula de registro para colocar el punto de registro del

símbolo.
6. Haga clic en Aceptar.
Flash CS6 añade el símbolo a la biblioteca. La selección en el escenario es

ahora una instancia del símbolo. Una vez que haya creado un símbolo, puede
editarlo en modo de edición de símbolos; para ello, debe elegir Edición / Editar
símbolos, o en el contexto del escenario, mediante las opciones Edición / Editar
en contexto. También puede cambiar el punto de registro de un símbolo.
5.3. CONVERSIÓN DE ANIMACIÓN EN CLIP DE PELÍCULA.
Para volver a utilizar una secuencia animada en el escenario, o para

manipularla como una instancia, selecciónela y guárdela como un símbolo de
clip de película.
1. En la línea de tiempo principal, seleccione cada fotograma de cada capa de

la animación del escenario que desee utilizar.
2. Siga uno de estos procedimientos para copiar los fotogramas:
o Haga clic con el botón derecho del ratón, en todos los fotogramas
seleccionados y seleccione Copiar fotogramas en el menú contextual.
Para eliminar la secuencia tras convertirla en un clip de película,
seleccione Cortar.

o Seleccione Edición / Línea de tiempo / Copiar fotogramas. Para eliminar la

secuencia tras convertirla en un clip de película, seleccione Cortar
fotogramas.
3. Anule la selección y asegúrese de que no haya nada seleccionado en la

escena. Seleccione Insertar / Nuevo símbolo.
4. Asígnele un nombre al símbolo. Para Tipo, seleccione Clip de película y, a

continuación, haga clic en Aceptar.
5. En la línea de tiempo, haga clic en el Fotograma 1 de la Capa 1 y seleccione

Edición / Línea de tiempo / Pegar fotogramas.
Esta acción pega los fotogramas (junto con las capas y los nombres de
capas) copiados de la línea de tiempo principal en la línea de tiempo de este
símbolo de clip de película. Todas las animaciones, botones o interacciones
de los fotogramas copiados se transforman en una animación independiente
(un símbolo de clip de película) que se puede volver a utilizar.
6. Para volver al modo de edición de documentos, realice una de las siguientes

operaciones:
o Haga clic en el botón Atrás.

o Seleccione Edición / Editar documento.
o Haga clic en el nombre de escena, en la barra de edición, encima del
escenario.
5.4. DUPLICACIÓN DE SÍMBOLOS.
La duplicación de un símbolo permite utilizar un símbolo existente como punto

de partida para la creación de otro.
También puede utilizar instancias para crear versiones del símbolo con
distintos aspectos.
Duplicación de un símbolo utilizando el panel Biblioteca.
Seleccione un símbolo en el panel Biblioteca y realice una de las siguientes

acciones:
o Haga clic en el botón derecho del ratón y seleccione Duplicar en el menú

contextual.
o Elija Duplicar en el menú de panel de la biblioteca.

Duplicación de un símbolo seleccionando una instancia.
1. Seleccione una instancia del símbolo en el escenario.
2. Seleccione Modificar / Símbolo / Duplicar símbolo.
El símbolo se duplica y la instancia se sustituye por una instancia del símbolo

duplicado.
5.5. EDICIÓN DE SÍMBOLOS.
Cuando se edita un símbolo, Flash CS6 actualiza todas las instancias

correspondientes en el documento. Los símbolos se editan de las siguientes
formas:
o En contexto con los demás objetos del escenario, mediante el comando

Editar en contexto. Otros objetos aparecen atenuados para distinguirlos del
símbolo que se está editando. El nombre del símbolo que se está editando
aparece en una barra de edición situada en la parte superior del escenario, a
la derecha del nombre de la escena.
o En una ventana aparte, mediante el comando Editar en nueva ventana. La

edición de un símbolo en una ventana independiente le permite ver a la vez
el símbolo y la línea de tiempo principal. El nombre del símbolo que se está
editando aparece en la barra de edición situada en la parte superior del
escenario.
El símbolo se edita cambiando la ventana de la vista del escenario a una vista

de sólo el símbolo, con el modo de edición de símbolos. El nombre del símbolo
que se está editando aparece en la barra de edición situada en la parte
superior del escenario, a la derecha del nombre de la escena actual.
Cuando se edita un símbolo, Flash CS6 actualiza todas las instancias

correspondientes en todo el documento para reflejar los cambios. Durante la
edición de un símbolo, puede utilizar las herramientas de dibujo, importar
medios o crear instancias de otros símbolos.
o El punto de registro de un símbolo (el punto que se identifica mediante las

coordenadas 0, 0) se cambia con cualquiera de los métodos de edición de
símbolos.
Edición de un símbolo en contexto.
1. Realice uno de los siguientes pasos:
o Haga doble clic en una instancia del símbolo en el escenario.

o Seleccione una instancia del símbolo en el escenario, haga clic con el

botón derecho del ratón y seleccione Editar en contexto.
o Seleccione una instancia del símbolo en el escenario y seleccione

Edición / Editar en contexto.
2. Edite el símbolo.
3. Para salir del modo editar en contexto y volver al modo de edición de

documentos, siga uno de estos procedimientos:
o Haga clic en el botón Atrás.
o Seleccione el nombre de escena actual en el menú Escena en la barra de

edición.
o Haga doble clic fuera del contenido del símbolo.
Edición de un símbolo en una nueva ventana.
1. Seleccione una instancia del símbolo en el escenario, haga clic con el botón
derecho del ratón y seleccione Editar en nueva ventana.
3. Haga clic en el cuadro Cerrar situado en la esquina superior derecha para

cerrar la ventana nueva y haga clic en la ventana del documento principal
para seguir editando el documento principal.
Edición de un símbolo en el modo de edición de símbolos.
1. Siga uno de estos procedimientos para seleccionar el símbolo:
o Haga doble clic en el icono del símbolo en el panel Biblioteca.
o Seleccione una instancia del símbolo en el escenario, haga clic con el

botón derecho del ratón y seleccione Editar en el menú contextual.
o Seleccione una instancia del símbolo en el escenario y, a continuación,

Edición / Editar símbolos.
o Seleccione el símbolo en el panel Biblioteca y, a continuación, la opción

Edición del menú Panel de la biblioteca, o bien haga clic con el botón
derecho del ratón en el símbolo del panel Biblioteca y seleccione Edición.

3. Para salir del modo de edición de símbolos y volver a la edición del

documento, siga uno de estos procedimientos:
o Haga clic en el botón Atrás situado en la parte izquierda de la barra de

edición, en la parte superior del escenario.
o Haga clic en el nombre de la escena, en la barra de edición situada en la

parte superior del escenario.
o Haga doble clic fuera del contenido del símbolo.
5.6. CREACIÓN DE INSTANCIAS.
Después de crear un símbolo, puede crear instancias de dicho símbolo en el

documento, incluso dentro de otros símbolos. Al modificar un símbolo, Flash
CS6 actualiza todas sus instancias.
Para asignar un nombre a una instancia se utiliza el inspector de propiedades.

Utilice el nombre de la instancia para referirse a una instancia en ActionScript.
Para especificar efectos de color, asignar acciones, establecer el modo de
visualización gráfica o cambiar el comportamiento de instancias nuevas, se
utiliza el inspector de propiedades. El comportamiento de la instancia es el
mismo que el comportamiento del símbolo a menos que se especifique lo
contrario. Cualquier cambio que realice sólo afectará a las instancias pero no a
los símbolos.
Creación de una instancia de un símbolo
1. Seleccione una capa en la línea de tiempo. Flash CS6 puede situar

instancias únicamente en fotogramas clave, siempre en la capa actual. Si no
selecciona un fotograma clave, Flash CS6 incorpora la instancia al primer
fotograma clave situado a la izquierda del fotograma actual.
Un fotograma clave es un fotograma en el que se definen los cambios en la

animación. Para obtener más información, consulte Inserción de fotogramas en
la línea de tiempo.
2. Seleccione Ventana / Biblioteca.
3. Arrastre el símbolo desde la biblioteca hasta el escenario.
4. Si ha creado una instancia de un símbolo gráfico, seleccione Insertar /

Línea de tiempo / Fotograma para añadir el número de fotogramas que
contendrá el símbolo gráfico.

Aplicación de un nombre personalizado a una instancia
1. Seleccione la instancia en el escenario.
2. Seleccione Ventana / Propiedades e introduzca un nombre en el cuadro

Nombre de instancia.
Trabajo con Bibliotecas.
En la biblioteca de un documento de Flash CS6

se almacenan los elementos que se crean en el
entorno de edición de Flash CS6 o se importan
para utilizarlos en el documento. Puede crear
ilustraciones vectoriales o texto directamente en
Flash CS6; importar ilustraciones vectoriales,
mapas de bits, vídeo y sonido, y crear símbolos.
Un símbolo es un gráfico, un botón o un clip de
película que se crea una vez y se puede volver a
utilizar varias veces. También puede utilizar
ActionScript para añadir dinámicamente
contenido multimedia a un documento.
Puede abrir la biblioteca de cualquier documento de Flash CS6 mientras está

trabajando en Flash CS6, para poner a disposición del documento actual los
elementos de la biblioteca de ese archivo.
Puede crear bibliotecas permanentes en la aplicación de Flash Professional

que están disponibles siempre que se inicie Flash CS6. Flash CS6 también
incluye varias bibliotecas de ejemplos que contienen botones, gráficos, clips de
película y sonidos.
El panel Biblioteca Ventana / Biblioteca muestra una lista desplegable con los
nombres de todos los elementos de la biblioteca, lo que permite ver y organizar
dichos elementos mientras trabaja. Un icono situado junto al nombre de cada
elemento del panel Biblioteca indica el tipo de archivo.
Copia de Elementos de Biblioteca.
Al seleccionar un elemento del panel Biblioteca, aparecerá una vista previa en

miniatura del elemento en la parte superior del panel. Si el elemento
seleccionado está animado o es un archivo de sonido, puede utilizar el botón
Reproducir de la ventana de vista previa de la biblioteca o el controlador para
previsualizar el elemento.

Utilización de un elemento de biblioteca en el documento actual.
o Arrastre el elemento del panel Biblioteca al escenario.
o El elemento se añadirá a la capa actual.
Conversión de un objeto del escenario en un símbolo de la biblioteca.
o Seleccione el objeto en el escenario, haga clic con el botón derecho y elija

Convertir en símbolo.
Copia de elementos de bibliotecas de un documento a otro.
Puede copiar de diversas maneras los activos de la biblioteca desde un

documento de origen a uno de destino. También puede compartir los símbolos
entre varios documentos como elementos de bibliotecas compartidas durante la
edición o en tiempo de ejecución.
Si intenta copiar elementos que tienen el mismo nombre que otros ya

existentes en el documento de destino, en el cuadro de diálogo Solucionar
conflictos de biblioteca puede elegir si desea sobrescribir los elementos
existentes o conservarlos y añadir los nuevos con otros nombres. Puede
organizar los elementos de las bibliotecas en carpetas para minimizar los
conflictos de nombres al copiar elementos de un documento a otro.

Copia de un elemento de una biblioteca con Copiar y Pegar.
1. Seleccione el elemento en el escenario del documento de origen.
2. Seleccione Edición / Copiar.
3. Active el documento de destino.
4. Para pegar el elemento en el centro del área de trabajo visible, coloque el

puntero en el escenario y seleccione Edición / Pegar en el centro. Para
colocar el elemento en la misma ubicación en la que se encontraba en el
documento de origen, seleccione Edición / Pegar en contexto.
Copia de un elemento de biblioteca arrastrándolo.
Con el documento de destino abierto, seleccione el elemento en el panel

Biblioteca en el documento de origen y arrástrelo hasta el panel Biblioteca en el
documento de destino. Puede duplicar el símbolo desde el panel Biblioteca,
copiar varias instancias al escenario para editarlas.
Copia de un elemento de biblioteca abriendo la biblioteca del documento

de origen en el documento de destino.
1. Con el documento de destino activo, seleccione Archivo / Importar / Abrir

biblioteca externa.
2. Seleccione el documento de origen y haga clic en Abrir.
3. Arrastre un elemento de la biblioteca del documento de origen al escenario o

a la biblioteca del documento de destino.
Creación de botones.
1. Decida qué tipo de botón es el que necesita símbolo de botón.
La mayoría de usuarios eligen símbolos de botón por su flexibilidad. Los

símbolos de botón contienen una línea de tiempo interna especializada para

estados de botón. Puede crear fácilmente y de forma visual distintos estados

Arriba, Presionado, Sobre o Zona activa. Los símbolos de botón también
cambian de estado automáticamente cuando reaccionan a las acciones del
usuario.
Botón de clip de película.
Puede utilizar un símbolo de clip de película para crear efectos de botón

sofisticados. Los símbolos de clip de película pueden contener casi cualquier
tipo de contenido, incluidas animaciones. Sin embargo, los símbolos de película
no tienen incorporados los estados Arriba, Presionado y Sobre. Deberá crear
estos estados usted mismo con ActionScript. Una desventaja es que los
archivos de clip de película son más grandes que los archivos de botón. Utilice
los siguientes recursos para aprender a crear un botón con un símbolo de clip
de película:
2. Defina los estados del botón.
Fotograma Arriba El aspecto del botón cuando el usuario no está

interactuando con él.
Fotograma Sobre La apariencia del botón cuando el usuario está a punto de

seleccionarlo.
Fotograma Presionado El aspecto del botón cuando el usuario lo selecciona.
Fotograma Zona activa El área que responde ante el clic del usuario. La
definición del fotograma Zona activa es optativa. Si el botón es pequeño o si el
área gráfica no está contigua, definir este fotograma puede resultar útil.
o El contenido del fotograma Zona activa no está visible en el escenario

durante la reproducción.

o El gráfico del fotograma Zona activa es un área sólida lo bastante grande

para abarcar todos los elementos gráficos de los fotogramas Arriba,
Presionado y Sobre.
o Si no especifica ningún fotograma Zona activa, se utilizará la imagen del

estado Arriba.
o Puede hacer que un botón responda al hacer clic en un área distinta del
escenario o al pasar el ratón por encima. Coloque el gráfico del fotograma
Zona activa en otra ubicación distinta a la de los gráficos de fotogramas de
botones.
3. Asocie una acción al botón.
Para que suceda algo cuando el usuario seleccione un botón, debe añadir
código ActionScript a la línea de tiempo. Inserte el código ActionScript en los
mismos fotogramas que los botones.
El panel Fragmentos de código contiene código predefinido de

ActionScript 3.0 para muchos usos habituales de botones. Consulte Cómo
añadir interactividad mediante fragmentos de código.
ActionScript 2.0 no es compatible con ActionScript 3.0. Si su versión de

Flash utiliza ActionScript 3.0, no podrá pegar código de ActionScript 2.0 en
el botón (y viceversa). Antes de pegar ActionScript desde otro origen en los
botones, debe comprobar si la versión es compatible.
Abra el Archivo Botón 1. fla de su carpeta de trabajo y siga los

procedimientos
1. Seleccione el único fotograma de la capa acciones.
2. Haga clic en Ventana / Fragmentos de código para ver dicho panel.
3. Haga clic derecho sobre el primer fragmento Hacer clic para ir a página
Web y seleccione Añadir a fotograma.
4. Defina su nombre de instancia.

5. Aparece la ventana de acciones con el Fragmento de código, ActionScript

3.0. reemplace aquí el destino para el evento “URLRequest” por ejemplo
elcomercio.pe para que figure así:
navigateToURL(newURLRequest("http://www.elcomercio.pe"), "_blank");
6. Cierre la ventana Fragmentos de código.
7. Haga clic en el menú Control / probar película / Probar, Para probar la

funcionalidad de un botón.
Creación de un botón con un símbolo de botón.
Para que un botón sea interactivo, coloque una instancia del símbolo del botón
en el escenario y asigne acciones a la instancia. El usuario asigna las acciones
a la línea de tiempo raíz del archivo FLA. No añada acciones a la línea de
tiempo del símbolo de botón. Para añadir acciones a la línea de tiempo del
botón, utilice un botón de clip de película.
1. Seleccione Edición / Anular todas las selecciones, o bien, haga clic en un

área vacía del escenario para garantizar que no haya nada seleccionado en
el escenario.
2. Seleccione Insertar / Nuevo símbolo.
3. En el cuadro de diálogo Crear nuevo símbolo, especifique un nombre. Para

el tipo de símbolo, seleccione Botón.
Flash CS6 cambia al modo de edición de símbolos. La línea de tiempo

cambia para mostrar cuatro fotogramas consecutivos denominados: Arriba,
Sobre, Presionado y Zona activa. El primer fotograma, Arriba, es un
fotograma clave vacío.
4. Para crear la imagen del botón del estado Arriba, seleccione el fotograma
Arriba en la línea de tiempo. A continuación, utilice las herramientas de
dibujo, importe un gráfico o coloque una instancia de otro símbolo en el
escenario.

Es posible utilizar símbolos gráficos o símbolos de clip de película dentro de

un botón, pero no se puede utilizar otro símbolo de botón.
5. En la línea de tiempo, haga clic en el fotograma Sobre y, a continuación,

elija Insertar / Línea de tiempo / Fotograma clave.
Flash CS6 inserta un fotograma clave que duplica el contenido del

fotograma Arriba anterior.
6. Con el fotograma Sobre aún seleccionado, cambie o modifique la imagen

del botón en el escenario para crear el aspecto que desee para el estado
Sobre.
7. Repita los pasos 5 y 6 para el fotograma Presionado y el fotograma

opcional Zona activa.
8. Para asignar un sonido a un estado del botón, seleccione el fotograma de

dicho estado en la línea de tiempo y seleccione Ventana / Propiedades.
Seguidamente, seleccione un sonido en el menú Sonido del inspector de
propiedades. Únicamente los sonidos que ya se han importado aparecen en
el menú Sonido.
9. Cuando haya terminado, seleccione Edición / Editar documento. Con esto

Flash vuelve a la línea de tiempo principal del archivo FLA. Para crear una
instancia del botón creado en el escenario, arrastre el símbolo de botón
desde el panel Biblioteca al escenario.
10. Para probar la funcionalidad de un botón, utilice el comando

Control / Probar. También es posible previsualizar los estados de un
símbolo de botón en el escenario seleccionando Control / Habilitar
botones simples. Este comando permite ver los estados Arriba, Sobre y
Presionado de un símbolo de botón sin utilizar Control / Probar.
FUNDAMENTO TEÓRICO:
Adobe Flash Player es una aplicación en forma de

reproductor multimedia creado inicialmente por
Macromedia y actualmente distribuido por Adobe Systems.
Permite reproducir archivos SWF que pueden ser creados
con la herramienta de autoría Adobe Flash, con Adobe Flex
o con otras herramientas de Adobe y de terceros. Estos
archivos se reproducen en un entorno determinado. En un
sistema operativo tiene el formato de aplicación del sistema, mientras que si el
entorno es un navegador, su formato es el de un Plug-in u objeto ActiveX.

Adobe Flash, o simplemente Flash, se refieren tanto al programa de creación

de animaciones como al reproductor. Estrictamente hablando, Adobe Flash es
el entorno de creación y Adobe Flash Player el reproductor o máquina virtual.
Sin embargo, en lenguaje coloquial, se usa el término Flash para referirse al
entorno, al reproductor e, incluso, a los archivos generados.
Flash Player tiene soporte para un lenguaje de programación interpretado

conocido como ActionScript(AS) basado en el estándar ECMAScript. Desde su
origen ActionScript ha pasado de ser un lenguaje muy básico a un lenguaje
avanzado con soporte de programación orientada a objetos, comparable en
funciones y uso al lenguaje JavaScript (también basado en ECMAScript).
Originalmente creado para mostrar animaciones vectoriales en 2 dimensiones,

ha pasado a convertirse en la opción preferida a la hora de crear aplicaciones
Web que incluyen flujo de audio y video e interactividad. La utilización de
gráficos vectoriales le permite disminuir el ancho de banda necesario para la
transmisión y, por ende, el tiempo de carga de la aplicación.
Actualmente Flash Player está disponible para las versiones más recientes de
los navegadores más populares (Internet Explorer, Mozilla Firefox, Safari,
Opera, etc.). El navegador Google Chrome no lo necesita porque Google
distribuye su propia versión con el programa.
Principales versiones de Flash Player.
A la fecha se han lanzado varias versiones con diferentes características, las

últimas son:
Adobe Flash Player 10.
• Fecha de aparición de la versión 10.0.12.36: octubre de 2009.
Características:
o Transformaciones de objetos 3D.

o Filtros personalizados a través de Pixel Bender.
o Soporte avanzado para texto.
o Speex códec de audio.
o Protocolo de flujo en los medios de comunicación en tiempo real (RTMFP).
o Generación de sonido dinámico.
o Tipo de datos vectoriales.
Características mejoradas:
o Ampliar el soporte al mapa de bits.

o Gráficos API de dibujo.

o Menú contextual.
o Aceleración de hardware.
o Motor anti-aliasing (Saffron 3,1).
o Lectura / escritura clipboard.
o Wmode.
Adobe Flash Player 10.1
o Fecha de aparición de la versión 10.1.53.64: junio de 2010.
Características:
o Reutilización de mapas de bits copiados para una mejor gestión de memoria.

o Implementado un recolector de basura.
o Decodificación por hardware de video codificado con H.264.
o Flujo dinámico por HTTP.
o Soporte para modos de privacidad.
o API para soporte multitáctil.
o Para OSX:
- Uso de la interfaz Cocoa para Mac.
- Uso del contexto OpenGl de doble búfer para pantalla completa.
Origen flash Player.
Hasta la llegada de HTML5, mostrar el vídeo en una página web requiere que
el navegador disponga de plugin, que son los únicos ejecutados por terceros
proveedores. Prácticamente todos los plugins existentes para vídeo son libres y
multiplataforma, se incluye la oferta de Adobe de Flash Video, el cual fue
introducido por primera vez con la versión de Flash 6. Flash Video ha sido una
opción popular para los sitios web debido a la gran cantidad de usuarios que
tienen instalada esta tecnología y también a la capacidad de programación de
Flash. En 2010, Apple criticó públicamente la aplicación de Adobe Flash de
reproducción de vídeo por no tomar ventaja de la aceleración de hardware,
además criticó toda la tecnología Flash en general, que ha sido citado como
una razón para no aplicarla los dispositivos móviles de Apple. Poco después de
las críticas de Apple, Adobe lanzó una versión beta de Flash 10.1, que hace
uso de la aceleración de hardware, incluso en un Mac.
Flash Audio.
El audio en Flash es más comúnmente codificado en MP3 o AAC (Advanced

Audio Coding), sin embargo también es compatible con ADPCM, codecs
Nellymoser (Nellymoser Asao Codec) y Speex audio. Flash permite frecuencias
de muestreo de 11, 22 y 44,1 kHz. No es compatible con frecuencias de
muestreo de audio de 48 kHz, que es el estándar de televisión y DVD.

El 20 de agosto de 2007, Adobe anunció en su blog que con la actualización 3

de Flash Player 9, Flash Video también soportaría algunas partes de la
especificación MPEG-4 de la normativa internacional. En concreto, Flash
Player tendrá soporte para video comprimido en H 0.264 (MPEG-4 Parte 10),
para audio comprimido con AAC (MPEG-4 Parte 3), el F4V, MP4 (MPEG-4
Parte 14), M4V, M4A, 3GP y formatos de contenido multimedia MOV,
especificación de textos programados 3GPP ( MPEG-4 Parte 17), que es un
formato normalizado de subtítulos y soporta análisis parcial para «ilst atom, el
cual es el ID3 equivalente de iTunes utilizado para almacenar los metadatos.
MPEG-4 Parte 2 y H.263 no soportan el formato de archivo F4V. Adobe
también anunció que se irá alejando del formato FLV para acercarse al formato
estándar ISO para multimedia (MPEG-4 parte 12), debido a los límites
funcionales de FLV y el streaming de H.264. La versión final del reproductor de
Flash soportó algunas partes de los estándares MPEG-4 que se encontró
disponible en el otoño de 2007.
Abra el archivo Ejercicio 1.fla de su carpeta de trabajo y convierta la imagen

en símbolo Clip de película con el nombre tabla y con ayuda de su Instructor
genere una animación básica.
1. Abra un archivo nuevo y lleve al escenario el símbolo Clip de película tabla

creado en el ejercicio anterior desde el panel Biblioteca.
2. Duplique el Clip de película para copiar 3 instancias del símbolo tabla en el

escenario luego rótelos y cambie sus tamaños.
3. Investigue el procedimiento para agregar un sonido al botón del archivo

Ejercicio 2 .fla de su carpeta de trabajo, se sugiere que sea al estado
Sobre. Usted encontrará una carpeta sonidos del cual podrá escoger un
sonido para el botón.

06
VI. GENERAR DIVERSOS TIPOS DE MOVIMIENTOS.
Tipos de fotogramas
Tipos de interpolación
Aplicación de aceleración/ desaceleración a Interpolación.
Editor de Movimiento.
Utilización de capas de máscara.
Vinculación de texto a una URL.
 Computadora con microprocesadores Core 2 Duo ó de mayor
capacidad.
 Tipos de fotogramas
 Tipos de interpolación
 Aplicación de aceleración/ desaceleración a Interpolación.
 Editor de Movimiento.
 Utilización de capas de máscara.
 Vinculación de texto a una URL.

6.1. TIPOS DE FOTOGRAMAS.
Al igual que en las películas, los documentos de Adobe Flash Professional

dividen el tiempo en fotogramas. En la línea de tiempo, se trabaja con estos
fotogramas para organizar y controlar el contenido de los documentos. Los
fotogramas se colocan en la línea de tiempo en el orden en que se desea que
aparezcan los objetos de los fotogramas en el contenido final.
Un fotograma clave es un fotograma donde una nueva instancia del símbolo

aparece en la línea de tiempo. Un fotograma clave también puede ser un
fotograma que incluya código ActionScript para controlar determinados
aspectos del documento. También se puede añadir un fotograma clave vacío
en la línea de tiempo como marcador de posición de los símbolos que se
pretendan añadir más adelante, o bien para dejar el fotograma vacío de forma
premeditada.
Un fotograma clave de propiedad es un fotograma clave en el que se definen

cambios en las propiedades de un objeto para una animación. Flash CS6
puede interpolar, o rellenar automáticamente, los valores de propiedades entre
los fotogramas clave de propiedad para generar animaciones sin cortes.
Puesto que los fotogramas clave de propiedad permiten producir animaciones
sin tener que dibujar cada fotograma individual, facilitan la creación de
animaciones. Una serie de fotogramas con animación interpolada recibe el
nombre de interpolación de movimiento.
Un fotograma interpolado es cualquier fotograma perteneciente a una

interpolación de movimiento.
Un fotograma estático es cualquier fotograma que no pertenezca a una

interpolación de movimiento.
Es posible organizar los fotogramas clave y los fotogramas clave de propiedad

en la línea de tiempo para controlar la secuencia de eventos del documento y
su animación.
Inserción de fotogramas en la línea de tiempo.
o Para insertar un fotograma nuevo, seleccione Insertar / Línea de tiempo /

Fotograma o presione la tecla F5.
o Para crear un nuevo fotograma clave, elija Insertar / Línea de tiempo /

Fotograma clave F6, o bien, haga clic con el botón derecho del ratón o
presione la tecla Control.
o Para crear un nuevo fotograma clave vacío, elija Insertar / Línea de tiempo
/ Fotograma clave vacío, o bien, haga clic con el botón derecho del ratón

en el fotograma donde desee colocar el fotograma clave y seleccione

Insertar fotograma clave vacío en el menú contextual.
Selección de fotogramas en la línea de tiempo.
Flash CS6 ofrece dos métodos para seleccionar fotogramas en la línea de

tiempo. Con la selección basada en los fotogramas, se seleccionan fotogramas
individuales en la línea de tiempo. En la selección basada en el tamaño, al
hacer clic en cualquier fotograma de una secuencia, se selecciona toda la
secuencia de fotogramas, desde un fotograma clave hasta el siguiente. La
selección basada en el tamaño se puede especificar en las preferencias de
Flash CS6.
o Para seleccionar un fotograma, haga clic en el fotograma.
o Para seleccionar varios fotogramas contiguos, arrastre el cursor sobre los

fotogramas o haga clic con la tecla Shift. pulsada en fotogramas adicionales.
o Para seleccionar varios fotogramas no contiguos, con la tecla Control

presionada, haga clic en los fotogramas.
o Para seleccionar todos los fotogramas en la línea de tiempo, seleccione

Editar / Línea de tiempo / Seleccionar todos los fotogramas.
o Para seleccionar un grupo completo de fotogramas estáticos, haga doble clic

en un fotograma entre dos fotogramas clave. Si está activada la opción
Selección basada en el tamaño, haga clic en cualquier fotograma de la
secuencia.
o Para seleccionar todo el grupo de fotogramas (interpolación de movimiento o

cinemática inversa) haga clic una vez si ha activado la opción Selección
basada en el tamaño en Preferencias. Para seleccionar varios grupos, haga
clic en cada uno de ellos mientras mantiene presionada la tecla Shift.
Copiar o pegar un fotograma o secuencia de fotogramas.
Realice uno de los siguientes pasos:
o Seleccione el fotograma o la secuencia y haga clic en Editar / Línea de

tiempo / Copiar fotogramas. Seleccione el fotograma o la secuencia que
desea sustituir y seleccione Edición / Línea de tiempo/ Pegar fotogramas.
o Mientras mantiene la tecla Alt y arrastre un fotograma clave hasta la

posición en la que desee copiarlo.
Eliminación de un fotograma o secuencia de fotogramas.

Seleccione el fotograma o la secuencia y elija Editar / Línea de tiempo /

Quitar fotogramas o haga clic con el botón derecho del ratón sobre el
fotograma o la secuencia y seleccione Quitar fotogramas en el menú
contextual.
Los fotogramas de alrededor permanecen intactos.
Mover un fotograma clave o una secuencia de fotogramas.
Seleccione un fotograma clave o una secuencia de fotogramas y arrastre el

fotograma clave o secuencia de fotogramas hasta la posición que desee.
Cambie la longitud de una secuencia de fotogramas estáticos.
Mantenga presionada la tecla Control mientras arrastra el ratón hasta el

fotograma inicial o final del grupo hacia la izquierda o la derecha.
Conversión de un fotograma clave en fotograma.
Seleccione el fotograma clave y elija Editar / Línea de tiempo / Borrar

fotograma o haga clic con el botón derecho del ratón sobre el fotograma clave
y seleccione Borrar fotograma en el menú contextual.
El contenido del escenario del fotograma clave eliminado y todos los

fotogramas hasta el fotograma clave siguiente se sustituirán por el contenido
del escenario del fotograma que preceda al fotograma clave eliminado.
6.2. TIPOS DE INTERPOLACIÓN.
Flash CS6 ofrece varias formas de crear animaciones y efectos especiales.

Cada método proporciona distintas posibilidades para crear contenido animado.
Flash admite los siguientes tipos de animación:
- Interpolaciones de movimiento.
- Interpolaciones clásicas.
- Poses de cinemática inversa Interpolaciones de forma.
- Fotograma a fotograma o cuadro por cuadro.

Creación de una interpolación de movimiento.
1. Seleccione uno o varios objetos del escenario para interpolarlos.
El objeto puede encontrarse en cualquiera de los siguientes tipos de capas:

Normal, Guía, Máscara o Con máscara.
2. Realice uno de los siguientes pasos:
o Seleccione Insertar / Interpolación de movimiento.
o Haga clic con el botón derecho en la selección o en el fotograma actual y

seleccione la opción Crear interpolación de movimiento en el menú
contextual.
Si el objeto no es de tipo interpolable, o si hay varios objetos seleccionados

en la misma capa, aparece un cuadro de diálogo. En él, es posible convertir
la selección en un símbolo de clip de película. Convierta la selección en un
clip de película para continuar.
Si el objeto interpolado era el único elemento de la capa, Flash convierte la

capa que contiene el objeto en una capa de interpolación.
Si el objeto original se encontraba sólo en el primer fotograma de la línea de

tiempo, la duración del grupo de interpolación tiene una duración de un
segundo. Si la velocidad de fotogramas es 24 fps, el grupo contiene 24
fotogramas. Si el objeto original estaba presente en más de un fotograma
contiguo, el grupo de interpolación contiene el número de fotogramas
ocupados por el objeto original.
Si la capa era una capa normal, se convierte en una capa de interpolación.

Si se trataba de una capa de guía, de máscara o con máscara, se convierte
en una capa interpolada de guía, de máscara o con máscara
respectivamente.
3. Arrastre cualquier extremo del grupo de interpolación en la línea de tiempo

para prolongar o reducir la duración del grupo según sus necesidades.
4. Para añadir movimiento a la interpolación, coloque la cabeza lectora en un

fotograma del grupo de interpolación y arrastre el objeto a una nueva
posición del escenario. Aparece un trazado de movimiento en el escenario
para indicar el trazado desde la posición del primer fotograma del grupo de
interpolación hasta la nueva posición. Como ha definido explícitamente las
propiedades "X" e "Y" del objeto, los fotogramas clave de propiedad de "X" e
"Y" se añaden al fotograma que contiene la cabeza lectora. Los fotogramas

clave de propiedad se muestran como pequeños diamantes en el grupo de

interpolación.
5. Para especificar otra posición del objeto, coloque la cabeza lectora en otro
fotograma del grupo de interpolación y arrastre el objeto a otra posición del
escenario. El trazado de movimiento se ajusta para incluir todas las
posiciones especificadas.
6. Para interpolar la posición o rotación 3D, utilice la herramienta Rotación 3D o

Transformación 3D. Asegúrese de situar la cabeza lectora en el fotograma
donde desee añadir en primer lugar el fotograma clave de propiedad 3D.
Interpolación de una propiedad no posicional con el inspector de

propiedades.
Utilice el inspector de propiedades para modificar el valor de cualquier

propiedad de la interpolación en el fotograma actual.
1. Seleccione un objeto del escenario.
2. Seleccione Insertar / Interpolación de movimiento.
3. Si es preciso convertir el objeto en un símbolo, haga clic en Aceptar en el

cuadro de diálogo. Flash convierte el objeto en un símbolo de clip de
película.
o Si se aplica una interpolación a un objeto que existe sólo en un fotograma

clave, la cabeza lectora se mueve hasta el último fotograma de la nueva
interpolación. Si no es así, la cabeza lectora no se mueve.
o Coloque la cabeza lectora en el fotograma del grupo de interpolación en el

que quiera especificar un valor de propiedad.
4. Con el objeto seleccionado en el escenario, defina un valor para una

propiedad no posicional como, por ejemplo, transparencia alfa, brillo, tinta,
sesgo, etc. Defina el valor con ayuda del inspector de propiedades o con
alguna de las herramientas del panel Herramientas. El fotograma actual del
grupo se convierte en un fotograma clave de propiedad.

5. Deslice la cabeza lectora en la línea de tiempo para observar la interpolación

en el escenario.
6. Pruebe película.
Animación interpolada.
Una interpolación es una animación que se crea especificando el valor para

una propiedad de objeto de un fotograma y otro valor para la misma propiedad
en otro fotograma. Flash CS6 calcula los valores de dicha propiedad entre los
dos fotogramas.
Los tipos de objetos que se pueden interpolar son los clips de película, los
símbolos gráficos, los botones y los campos de texto.
Animación fotograma a fotograma.
La animación fotograma a fotograma cambia el contenido del escenario en

cada fotograma y es ideal para las animaciones complejas en las que la
imagen cambia en cada fotograma en lugar de moverse por el escenario. Este
tipo incrementa el tamaño del archivo con mayor rapidez que la animación
interpolada. En la animación fotograma a fotograma, Flash guarda los valores
de los fotogramas completos.
Para crear una animación fotograma a fotograma, defina cada fotograma como
fotograma clave y cree una imagen distinta para cada uno. Inicialmente, cada
fotograma clave tiene el mismo contenido que el fotograma clave
inmediatamente anterior, de modo que los fotogramas pueden modificarse en
la animación de forma gradual.
1. Abra el archivo logo_adobe_final.fla
2. Haga clic en el nombre de una capa para activarla y seleccione un fotograma

de la capa donde debe iniciarse la animación.
3. Si el fotograma no es un fotograma clave, seleccione Insertar / Línea de

tiempo / Fotograma clave.
4. Cree la ilustración del primer fotograma de la secuencia. Utilice las

herramientas de dibujo, pegue imágenes del portapapeles o importe un
archivo.
5. Para añadir un nuevo fotograma cuyo contenido sea igual al del primer
fotograma clave, haga clic en el siguiente fotograma a la derecha de la
misma flecha y seleccione Insertar / Línea de tiempo / Fotograma clave, o
haga clic con el botón derecho del ratón presionada, y seleccione Insertar
fotograma clave.

6. Para crear el siguiente incremento de la animación, cambie el contenido de

este fotograma en el escenario.
7. Para completar la secuencia de animación fotograma a fotograma, repita los

pasos 4 y 5 hasta que haya creado el movimiento deseado.
8. Para probar la secuencia de animación, elija Control / Reproducir o haga clic

en el botón Reproducir del controlador (Ventana / Barras de herramientas /
Controlador).
Creación de fotogramas.
Los fotogramas interpolados se muestran en verde claro o azul claro con una
flecha entre los fotogramas clave, mientras que la interpolación clásica se
muestra entre fotogramas clave de color lila. Puesto que los documentos de
Flash guardan las formas en cada fotograma clave, cree fotogramas clave sólo
en los puntos de las ilustraciones en los que se produzca alguna modificación.
Los fotogramas clave se indican en la línea de tiempo: un círculo sólido

representa un fotograma con contenido y un círculo vacío delante del
fotograma representa uno vacío. Los fotogramas siguientes añadidos a la
misma capa tendrán el mismo contenido que el fotograma clave.
Para ver y editar varios fotogramas a la vez, utilice las opciones de edición con
papel cebolla.

Inserción de fotogramas en la línea de tiempo.
o Todo archivo nuevo de flash tiene un fotograma clave vacío (círculo en

blanco) que se convierte en fotograma clave (círculo negro) cuando
insertamos un objeto en el escenario.
o Para insertar un fotograma nuevo, seleccione Insertar / Línea de tiempo /

Fotograma.
o Para crear un fotograma clave nuevo, elija Insertar / Línea de tiempo /

Fotograma clave, o haga clic con el botón derecho del ratón en el
fotograma donde desee colocar un fotograma clave y elija Insertar fotograma
clave.
o Para crear un fotograma clave vacío, elija Insertar / Línea de tiempo /

Fotograma clave vacío, o haga clic con el botón derecho del ratón en el
fotograma donde desee colocar un fotograma clave y elija Insertar fotograma
clave vacío.
1. Abra el archivo logo_adobe.fla de su carpeta de trabajo.
2. Observe el primer fotograma de la Capa 1 en la línea de tiempo, visualizará

un fotograma clave vacío.
3. Haga clic secundario en el fotograma 20 y seleccione Insertar fotograma.
4. En el mismo fotograma haga clic secundario y escoja Insertar fotograma

clave, observe que sigue siendo un fotograma clave vacío (círculo blanco).
5. Abra el panel biblioteca y cree una instancia del

gráfico logo adobe (arrastre el gráfico al escenario)
observará que el fotograma se convirtió en un
fotograma clave (círculo negro).
6. Haga clic secundario en el fotograma 40 y escoja

insertar fotograma, seguidamente en el mismo
fotograma, con clic secundario escoja crear
interpolación de movimiento, acepte convertir
selección en símbolo del cuadro de diálogo.
7. Desplace el logo hacia la derecha del escenario y

observe que se crea un fotograma clave que cierra la interpolación.
8. Luego presione la tecla Q y escale reduciendo la imagen presionando la

tecla Shift.
9. Con la imagen seleccionada aplique la propiedad alfa a 20% de Efecto de

color.
6.3. APLICACIÓN DE ACELERACIÓN / DESACELERACIÓN

PERSONALIZADA A INTERPOLACIÓN DE MOVIMIENTO CLÁSICO.
La aceleración es una técnica que modifica el modo en que Flash calcula los
valores de las propiedades en fotogramas clave de propiedad de una
interpolación. Sin aceleración, Flash calcula estos valores de modo que los
cambios en los valores son iguales en todos los fotogramas. Con aceleración,
es posible ajustar la velocidad de cambios de los valores para conseguir una
animación más compleja o natural.
La aceleración es una curva matemática que se aplica a los valores de

propiedad de una interpolación. El efecto final de la interpolación es el
resultado de la combinación del rango de valores de propiedad en la
interpolación y la curva de aceleración.
La pendiente de la curva en el gráfico representa la velocidad de cambio del

objeto.

Cómo añadir aceleración personalizada.
1. Abra el archivo sky aceleración.fla
2. Seleccione en la línea de tiempo una capa que tenga aplicada una

interpolación clásica, si no hubiera realícela.
3. En el inspector de propiedades, haga clic en el botón Editar situado junto al

deslizador Aceleración.
4. Para añadir un punto de control, haga clic con la tecla Control presionada en
la línea diagonal.
5. Para aumentar la velocidad del objeto, arrastre el punto de control hacia

arriba; arrástrelo hacia abajo para reducirla.
6. Para ajustar la curva y precisar el valor de aceleración de la interpolación

arrastre los selectores de vértice.
7. Para ver la animación en el escenario, haga clic en el botón de reproducción

situado en la esquina inferior izquierda.
8. Ajuste los controles hasta obtener el efecto que desea.
Interpolación de forma.
En la interpolación de forma, se dibuja una forma vectorial en un fotograma

concreto de la línea de tiempo y se modifica o se dibuja otra forma en otro
fotograma específico. Posteriormente, Flash interpola las formas intermedias
de los fotogramas intermedios y crea la animación de una forma cambiante.
Las interpolaciones de forma funcionan mejor con las formas simples. Evite las
formas con recortes o espacios negativos. Puede utilizar los consejos de forma
para indicar a Flash qué puntos de la forma de inicio deben corresponder a los
puntos específicos de la forma final.
También puede interpolar la posición y el color de las formas de una

interpolación de forma.
Para aplicar la interpolación de forma a grupos, instancias o imágenes de

mapas de bits, separe estos elementos.
Para aplicar la interpolación de forma a texto, separe el texto dos veces para
convertirlo en objetos.
Creación de una interpolación de forma.

Los siguientes pasos indican cómo crear una interpolación de forma desde el
fotograma 1 al fotograma 30 de la línea de tiempo. No obstante, puede crear
interpolaciones en cualquier parte de la línea de tiempo que elija.
1. En el fotograma 1, dibuje un cuadrado con la herramienta Rectángulo.
2. Seleccione el fotograma 30 de la misma capa y añada un fotograma clave

vacío, seleccionando Insertar / Línea de tiempo / Fotograma clave vacío,
o bien, presione F7.
3. En el escenario, dibuje un círculo con la herramienta Óvalo en el fotograma

30 en el mismo lugar donde dibujó el cuadrado, para esto utilice líneas guías
de las reglas.
4. En este momento debe haber un fotograma clave en el fotograma 1 con un

cuadrado y un fotograma clave en el fotograma 30 con un círculo.
5. En la línea de tiempo, seleccione todos los fotogramas de la capa que

contiene las dos formas.
6. Elija Insertar / Interpolación de forma.
7. Flash interpola las formas en todos los fotogramas entre los dos fotogramas
clave.
8. Para obtener una vista previa de la interpolación, arrastre la cabeza lectora

por los fotogramas de la línea de tiempo o presione la tecla Intro.
9. Para interpolar movimiento además de la forma, mueva la forma del

fotograma 30 a una ubicación del escenario que sea distinta de la ubicación
de la forma del fotograma 1.
10. Pruebe la película.
11. Para interpolar el color de la forma, aplique a la forma del fotograma 1 un

color diferente de la forma del fotograma 30.
12. Para añadir aceleración a la interpolación, seleccione uno de los

fotogramas entre los dos fotogramas clave e indique un valor en el campo
Aceleración del inspector de propiedades.
13. Especifique un valor negativo para acelerar el comienzo de la interpolación.

Indique un valor positivo para acelerar el final de la interpolación.

6.4. UTILIZACIÓN DE CAPAS DE MÁSCARA.
Para obtener el efecto de foco y de transiciones, utilice una capa de máscara

para crear un agujero a través del cual se puedan ver las capas situadas por
debajo. Un elemento de máscara puede ser una forma rellena, un bloque de
texto, una instancia de un símbolo de gráfico o un clip de película. Agrupe
varias capas bajo una misma capa de máscara para crear efectos sofisticados.
Para crear efectos dinámicos, anime una capa de máscara. Para una forma
rellena utilizada como máscara, utilice interpolación de formas; para un objeto
de tipo, una instancia de gráfico o un clip de película, utilice la interpolación de
movimiento. Si utiliza una instancia de clip de película como máscara, anime la
máscara a lo largo de un trazado de movimiento.
Las capas de máscara permiten mostrar partes de una imagen o gráfico de la

capa situada debajo. Para crear una máscara, se especifica que una capa es
una capa de máscara y se dibuja o coloca una forma rellena en la capa. Se
puede utilizar cualquier forma rellena, como grupos, texto y símbolos. La capa
de máscara muestra el área de capas vinculadas situada debajo de la forma
rellena.
Creación de capas de máscara.
1. Seleccione o cree una capa que contenga los objetos que deben aparecer
dentro de la máscara.
2. Seleccione Insertar / Línea de tiempo / Capa para crear una capa nueva
encima. Una capa de máscara siempre cubre la capa situada
inmediatamente debajo de la misma; cree la capa de máscara en el lugar
correcto.
3. Coloque una forma rellena, un tipo o una instancia de un símbolo en la capa

de máscara. Flash ignora los mapas de bits, degradados, transparencias,
colores y estilos de línea de una capa de máscara. Todas las áreas rellenas
de una máscara son transparentes y las áreas no rellenas son opacas.

4. Haga clic con el botón derecho del ratón en el nombre de la capa de

máscara de la línea de tiempo y elija Máscara. Un icono de capa de máscara
indica la capa de máscara. La capa situada inmediatamente debajo está
vinculada a la capa de máscara y se muestra su contenido a través del área
rellena en la máscara. El nombre de la capa de máscara aparece sangrado y
su icono cambia a un icono de capa de máscara.
5. Para visualizar el efecto de máscara en Flash, bloquee la capa de máscara y

la capa enmascarada.
6.5. EDITOR DE MOVIMIENTO.
Desde el panel Editor de movimiento es posible visualizar todas las

propiedades de interpolación y las propiedades de fotogramas clave de
propiedad. También contiene herramientas que permiten añadir precisión y
detalle a las interpolaciones. El editor de movimiento muestra las propiedades
de la interpolación seleccionada en ese momento. Una vez creada la
interpolación en la línea de tiempo, el editor de movimiento permite controlar la
interpolación de diversos modos.
Desde el panel Editor de movimiento es posible:
o Establecer el valor de fotogramas clave de propiedad independientes.
o Añadir o eliminar fotogramas clave de propiedad de propiedades

individuales.
o Mover fotogramas clave de propiedad a diferentes fotogramas de la

interpolación.

o Copiar y pegar una curva de propiedad de una propiedad a otra.
o Invertir los fotogramas clave para propiedades independientes.
o Restablecer propiedades individuales o categorías de propiedad.
o Tener control de precisión sobre la forma de las curvas de interpolación de la

mayoría de propiedades individuales mediante controles de Bezier. (Las
propiedades X, Y Z no tienen controles de Bezier).
o Añadir o quitar filtros o efectos de color y ajustar su configuración.
o Añadir distintas aceleraciones predefinidas a propiedades individuales y a

categorías de propiedades.
o Crear curvas de aceleración personalizadas.
o Añadir aceleración personalizada a las distintas propiedades interpoladas o

a los grupos de propiedades.
o Permitir que los distintos fotogramas clave de propiedad para las

propiedades X, Y Z sean errantes. Los fotogramas clave de propiedad
errantes pueden moverse a distintos fotogramas o entre fotogramas
individuales para crear movimiento suavizado.
Cuando selecciona un grupo de interpolación en la línea de tiempo, o un objeto

interpolado o trazado de movimiento en el escenario, en el editor de
movimiento se muestran las curvas de propiedades de la interpolación. El
editor de movimiento muestra las curvas de propiedades en una cuadrícula que
representa los fotogramas de la línea de tiempo en los que se produce la
interpolación seleccionada. La cabeza lectora aparece en la línea de tiempo y
en el editor de movimiento, siempre en el mismo número de fotograma.

El editor de movimiento también permite aplicar la aceleración a cualquier

curva de propiedad. Al aplicar aceleración en el editor de movimiento, se
pueden crear varios tipos de efectos complejos de animación sin necesidad de
crear trazados de movimiento. Algunas propiedades tienen valores mínimos y
máximos que no se pueden superar, por ejemplo, la transparencia alfa (0-
100%). Los gráficos de estas propiedades no pueden aplicar valores que no se
encuentren dentro del rango.
El uso del Editor de movimiento es opcional para varios tipos de interpolaciones

de movimiento simples comunes. El Editor de movimiento está diseñado para
facilitar la creación de interpolaciones de movimiento más complejas. No se
utiliza con las interpolaciones clásicas.
6.6. VINCULACIÓN DE TEXTO A UNA URL.
Seleccione el texto o un campo de texto:
o Con la herramienta Texto, seleccione texto en un campo de texto.
o Para vincular todo el texto de un campo de texto, utilice la herramienta

Selección para seleccionar el campo.
o En el cuadro de texto Vínculo del inspector de propiedades Ventana /

Propiedades / Propiedades, introduzca la URL con la que desea vincular el
campo de texto.
Etiquetado de fotogramas en la línea de tiempo.
Puede etiquetar fotogramas en la línea de tiempo para ayudarle a organizar el

contenido. También puede etiquetar un fotograma para poder hacer referencia
a él en ActionScript por su etiqueta. De ese modo, si reorganiza la línea de
tiempo y mueve la etiqueta a otro número de fotograma, el código ActionScript
seguirá haciendo referencia a la misma etiqueta y no será preciso actualizarla.
Las etiquetas de fotograma sólo se pueden aplicar a fotogramas clave. La

recomendación es crear una capa distinta en la línea de tiempo para que
contenga las etiquetas de fotograma.
Para añadir una etiqueta de fotograma:
1. Seleccione el fotograma que desee etiquetar en la línea de tiempo.
2. Con el fotograma seleccionado, asigne un nombre a la etiqueta en la sección

Etiqueta del inspector de propiedades. Presione Intro o Retorno.

Velocidades de fotogramas.
La velocidad de fotogramas, es la rapidez con que se reproduce la animación,

se expresa en fotogramas por segundo (fps). Si la velocidad de fotogramas es
muy baja, la animación parece detenerse y volver a empezar y si es muy alta
los detalles se ven borrosos. Los nuevos documentos de Flash tienen una
velocidad de fotogramas predeterminada de 24 fps, con la que suelen obtener
los mejores resultados en la web.
La complejidad de la animación y la velocidad del sistema donde se reproduce

afectan a la suavidad de la reproducción. Para determinar la velocidad de
fotogramas óptima, pruebe las animaciones en varios equipos.
Identificación de animaciones en la línea de tiempo

Flash diferencia la animación interpolada de la animación fotograma a
fotograma en la línea de tiempo mediante distintos indicadores en cada
fotograma con contenido.
En la línea de tiempo se muestran los siguientes indicadores de contenido de

fotogramas:
o Un intervalo de fotogramas con fondo azul indica una interpolación de

movimiento. Un punto negro en el primer fotograma del grupo indica que el
grupo de interpolación tiene asignado un objeto de destino. Unos diamantes

negros indican el último fotograma y otros fotogramas clave de propiedad.

Los fotogramas clave de propiedad son fotogramas que contienen cambios
de propiedades específicamente definidos por el usuario. Puede elegir qué
tipos de fotogramas clave de propiedad se visualizan: haga clic con el botón
derecho del ratón, sobre el grupo de interpolación de movimiento y
seleccione Ver fotogramas clave / tipo en el menú contextual. De forma
predeterminada.
o Un punto hueco en el primer fotograma indica que se ha eliminado el objeto

de destino de la interpolación de movimiento. El grupo de interpolación sigue
conteniendo los fotogramas clave de propiedad y puede aplicársele un
nuevo objeto de destino.
o Un grupo de fotogramas con fondo verde indican una capa de pose de

cinemática inversa (IK). Las capas de pose contienen esqueletos IK y poses.
Cada pose se muestra en la línea de tiempo como un diamante negro. Flash
interpola las posiciones del esqueleto en los fotogramas entre las poses.
o Un punto negro al principio de un fotograma clave con una flecha negra y

fondo azul indica una interpolación clásica.
o Una línea discontinua indica que la interpolación clásica se ha interrumpido o

está incompleta, por ejemplo, cuando falta el fotograma clave final.
o Un punto negro al principio de un fotograma clave con una flecha negra y

fondo verde claro indica una interpolación de forma.
o Un punto negro indica un solo fotograma. Los fotogramas en gris claro que
siguen a un fotograma clave contienen el mismo contenido, sin cambios.
Estos fotogramas se muestran con una línea negra vertical y un rectángulo
vacío en el último fotograma.

Creación de interpolaciones de movimiento.

Las interpolaciones se aplican a las instancias de símbolo y los campos de
texto. Sólo se pueden interpolar las instancias de símbolo y los campos de
texto. Todos los demás tipos de objetos se agrupan en un símbolo cuando se
les aplica una interpolación. La instancia de símbolo puede contener símbolos
anidados que, a su vez, se pueden interpolar en sus propias líneas de tiempo.
Para poder crear una capa de interpolación, debe existir al menos un grupo de
interpolación. Un grupo de interpolación es una capa de interpolación que
contiene una sola instancia de símbolo. Esta instancia de símbolo recibe el
nombre de instancia de destino del grupo de interpolación. Si se añade un
segundo símbolo al grupo de interpolación, éste sustituirá al símbolo original en
la interpolación. Para cambiar el objeto de destino de una interpolación,
arrastre un símbolo distinto desde la biblioteca hasta el grupo de interpolación
de la línea de tiempo. Es posible eliminar un símbolo de una capa de
interpolación sin eliminar ni romper la interpolación. Puede editar fotogramas
clave de propiedad independientes en el escenario, en el inspector de
propiedades o editor de movimiento.
Si se agrega una interpolación a un objeto o conjunto de objetos en una capa,

Flash convierte la capa en una capa de interpolación o crea nuevas capas para
conservar el orden de apilamiento original de los objetos de la capa, según las
siguientes reglas:
o Si no hay objetos en la capa distintos a los de la selección, la capa cambia a

una capa de interpolación.
o Si la selección está en la parte inferior del orden de apilamiento de la capa
(bajo todos los demás objetos), se creará una capa sobre la capa original
para que incluya los elementos no seleccionados y la capa original pasará a
ser una capa de interpolación.
o Si la selección está en la parte superior del orden de apilamiento de la capa
(sobre todos los demás objetos), se creará una nueva capa, la selección se
moverá a la misma y esa capa pasará a ser una capa de interpolación.
o Si la selección está en la parte central del orden de apilamiento de la capa
(hay objetos no seleccionados sobre y bajo la selección), se crearán dos
capas, una que incluya la nueva interpolación y otra sobre dicha capa para
que albergue los elementos no seleccionados en la parte superior del orden
de apilamiento. Los elementos no seleccionados de la parte inferior del
orden de apilamiento permanecen en la capa original, bajo las capas recién
insertadas.
Una capa de interpolación puede contener grupo de interpolación, fotogramas

estáticos y ActionScript. Sin embargo, los fotogramas de una capa de
interpolación que contienen un grupo de interpolación no pueden incluir objetos

distintos al objeto interpolado. Para agregar objetos adicionales en el mismo

fotograma, sitúelos en capas independientes.
Si una interpolación contiene movimiento, aparece en el escenario un trazado

de movimiento. El trazado de movimiento muestra la posición del objeto
interpolado en cada fotograma. No se puede añadir una guía de movimiento a
una capa de interpolación/ cinemática inversa.
Utilización de consejos de forma.
o Seleccione el primer fotograma clave de una secuencia de forma

interpolada.
o Seleccione Modificar / Forma / Añadir consejo de forma. El consejo de
forma inicial aparece como un círculo rojo con la letra a en algún lugar de la
forma.
o Colóquelo en un punto que desee marcar.
o Seleccione el último fotograma clave de la secuencia. El consejo de forma
final aparece en algún lugar de la forma como un círculo verde con la letra a.
o Coloque el consejo de forma en el punto de la forma final que debería
corresponder con el primer punto marcado.
o Para ver el cambio introducido con los consejos de forma, vuelva a
reproducir la animación. Para afinar la interpolación, mueva los consejos de
forma.
o Repita el proceso para añadir más consejos de forma. Los nuevos consejos
aparecen con las letras siguientes.
Tipografía Web.
Buena tipografía es tan importante en una página Web como en cualquier otro
medio. El hecho de que aparece en una pantalla de ordenador y no en un
pedazo de papel es inmaterial; todavía debe ser agradable para mirar y fáciles
de leer. El diseñador tiene que adaptar sus técnicas según el medio.
Diseñar para una pantalla de ordenador tiene su propio conjunto de problemas.

Añadir la naturaleza elástica de una página Web, que tiene que trabajar a
través de diferentes plataformas y tamaños de pantalla y los problemas incluso
empeoran. Es trabajo del diseñador para entender estas cuestiones y para

hacerles frente, para mantener algún tipo de control cuando todo lo demás está
cambiando.
Si está familiarizado con las hojas de estilo en el diseño de página o en

programas de procesamiento de textos, usted comprenderá cómo es posible
crear un conjunto de especificaciones de tipo y aplicarlos a un bloque de texto
o un sitio entero. Puede hacer que todos titulares 48-punto veces subpartidas
negritas, 32 puntos Helvetica bold y el cuerpo texto 10-Times New Roman con
cualquier líder y guiones que le gusta. Si desea cambiar la apariencia general
de su diseño a algo más técnico, sólo es necesitan editar la hoja de estilos.
Puede cambiar los encabezados a Arial Black, los subtítulos a Arial negrita y el
texto del cuerpo a Arial rápida y fácilmente.
Uso de hojas de estilo en cascada (CSS): La idea detrás de CSS es contenido

y tipo de lenguaje de formato se mantienen separados, dando el control
diseñador de tipo que no ha sido previsto en HTML básico. Además de la
capacidad de realizar cambios globales en estilos muy fácilmente, también es
posible entregar el mismo contenido con especificaciones diferentes según el
navegador utilizado. Si el usuario tiene un equipo whiz-bang con un gran
monitor de 24 bits o un pequeño organizador en blanco y negro, es
técnicamente viable para invocar un conjunto de estilos que dan la experiencia
de usuario óptima en cualquier navegador diferente. Y, si el navegador no tiene
capacidades CSS, el diseño degradará correctamente para una visualización
satisfactoria.
Aliasing es un término utilizado para describir los efectos indeseables

producidos cuando se presenta la información visual a una resolución inferior
óptima.
Diseño tipográfico.
Cuando un lector analiza un impreso o una página Web, en busca de

información, El diseñador puede hacer más fácil a las personas el encontrar
información que necesitan si se presenta de manera lógica. Cualquier página
de texto comienza como un bloque sólido de tipo. Sin ninguna otra
intervención, el lector inicia en la parte superior izquierda y trabaja hasta la
parte inferior derecha-, por lo que hay un flujo natural desde el principio.
Prioridad de la información.
La primera necesidad es romper esa masa de palabras en trozos más

pequeños, más fácilmente digeridos: los párrafos. Cada párrafo se separa
visualmente desde el siguiente con un espacio de guion o párrafo.
Porque es más difícil aplicar sangría a los párrafos en páginas Web, muchas
personas utilizan sólo una línea en blanco. Es mejor utilizar sangrías de párrafo

para párrafos, y párrafo espacios para las secciones: colecciones de los

párrafos relacionados.
Para cualquier página Web, la información debe fluir en forma serial de arriba a
la parte inferior de la página. Utilice titulares con hipervínculos a páginas o
bloques de información de serie. Estos titulares pueden ser en la parte superior
de las páginas más largas o en páginas de menú completamente separado.
Cursiva.
Cursiva se utilizan a menudo en los impresos para dar énfasis a una palabra o
dos dentro de un bloque de texto romano normal. Cursiva es generalmente
más difícil de leer que romano, porque el lector tiene que ser más lento para
leerlo. Pone énfasis en primer lugar porque tiene un aspecto distinto de la
tensión vertical de la romana y también porque está impidiendo el flujo del
lector.
Subrayado.
Subrayado tiene un significado especial en una página Web. Indica un vínculo

de hipertexto, por lo que realmente no es una buena idea utilizar subrayado
para ningún otro fin, o puede confundir al lector.
Color.
Color es considerado un lujo en la impresión, sin duda lo que se refiere a texto.

En una página Web, no cuesta nada extra y puede utilizarse para compensar
otras deficiencias tipográficas. De nuevo, es la desviación de la norma que
hace énfasis y, por tanto, trastornos visuales.

Orientación.
Una línea del tipo que es al revés en una página es muy notable, pero también
difícil de leer. En una página impresa, el lector simplemente convertiría la
página alrededor, pero que no es tan fácil con un monitor.
Tipo que se ejecuta hacia arriba o hacia abajo de la página verticalmente es

imposible con texto HTML, pero puede realizarse fácilmente con un GIF, JPG o
PNG. Utilizado con moderación, puede ser eficaz en un mundo en horizontal.
Equilibrado con otros atributos tipográficos, tamaño, peso y color, un titular en
su lado como esta puede ser prominente o recesivo. Por supuesto, esto es
cierto para cualquier línea de texto, pero la orientación lateral actúa como una
lámina visual, contradiciendo el flujo natural y llamar la atención sobre sí
mismo.
Posición.
Al igual que con el estilo de tipo inconformista, se destaca una línea de texto
que se encuentra en una posición inusual. Rompiendo la geometría regular de
una página con un guión o sangría francesa, llamará la atención sobre ese
elemento, incluso reemplazar el flujo natural de arriba hacia abajo.
Espacio.
Una línea de texto de 8 puntos en medio de una página en blanco domina la

página completamente. En una página completa del tipo de 12 puntos, se
pierde. No sólo son importantes los tamaños de tipo relativo, pero el espacio
que rodea el tipo es demasiado.

1. Investigue en que consiste las configuraciones predefinidas de movimiento

de Flash CS6.
2. ¿En qué ventana encuentra la opción “Configuración predefinida de

movimiento”?
3. Dibuje algunas formas geométricas en diferentes capas y aplique

configuraciones predefinidas de movimiento.
4. ¿Qué son los consejos de forma?
5. ¿En qué ventana encuentra la opción Añadir consejo de forma?
6. Realice un ejemplo de interpolación de forma y aplique consejos de forma.
7. ¿Cuáles son las ventajas de un archivo con extensión .SWF?
8. Encuentre la diferencia entre el formato .SWF y .FLA.
9. Realice un banner publicitario sobre el mundial Brasil 2014 de 850 px de

ancho por 165 px de alto, busque recursos en Internet.
Entregue al Instructor una carpeta con sus respuestas y archivos
desarrollados.

07
VII. ELABORAR ANIMACIONES INCLUYENDO SONIDOS Y
VIDEOS.
Utilización de vídeo en Flash.

Descarga progresiva de vídeo.
El inspector de propiedades para vídeo.
Control del vídeo con la línea de tiempo.
Importación y control del sonido a documentos y a botones.
capacidad.
 Utilización de vídeo en Flash.

 Descarga progresiva de vídeo.
 El inspector de propiedades para vídeo.
 Control del vídeo con la línea de tiempo.
 Importación y control del sonido a documentos y a botones.

7.1. UTILIZACIÓN DE VIDEO EN FLASH CS6.
Flash CS6 puede incorporar vídeo digital en presentaciones basadas en web.

Los formatos de vídeo FLV y F4V (H.264) ofrecen ventajas tecnológicas y
creativas que permiten fusionar vídeo con datos, gráficos, sonido y control
interactivo. El vídeo FLV o F4V permite colocar fácilmente vídeo en una página
web en un formato que pueden ver prácticamente todos los usuarios.
La forma en que decida implementar el vídeo determina la forma en que deberá

crear e integrar el contenido de vídeo con Flash. Puede incorporar vídeo a
Flash de las formas siguientes:
En Flash el vídeo se puede utilizar de diferentes maneras:
1. Descarga progresiva desde un servidor web
o Este método mantiene al archivo de vídeo externo en el archivo de Flash

y el archivo resultante SWF. Con este método el tamaño del archivo SWF
se mantiene pequeño. Se trata del método más habitual de uso de vídeo
en Flash.
2. Flujo de vídeo con Adobe Flash Media Server
o Este método también mantiene el archivo de vídeo externo en el archivo

de Flash. Adobe Flash Media Streaming Server proporciona una
protección segura del contenido del vídeo junto con una experiencia fluida
de la reproducción del flujo.
3. Incorporación directa de vídeo dentro de un archivo de Flash
o Con este método se obtienen archivos de Flash de gran tamaño y sólo se

recomienda para clips de vídeo cortos.
Control de reproducción de vídeo.
1. Puede controlar la reproducción de vídeo en Flash con el componente

FLVPlayback, escribiendo custom ActionScript para reproducir un flujo de
vídeo externo, o bien escribiendo custom ActionScript para controlar la
reproducción de vídeo en la línea de tiempo para vídeo integrado.
2. Componente FLVPlayback: Permite añadir de forma rápida a su documento

de Flash un control de reproducción FLV completo, y admite descarga
progresiva y archivos FLV o F4V de flujo. FLVPlayback permite crear con
facilidad controles de vídeo intuitivos para usuarios que controlan
reproducción de vídeo y aplican aspectos previos, o bien aplican sus propios
aspectos a la interfaz de vídeo.

3. Open Source Media Framework (OSMF): OSMF permite a los

desarrolladores seleccionar y combinar fácilmente componentes acoplables
para crear experiencias de reproducción completas y de alta calidad.
4. Controlar vídeo externo con ActionScript: Reproduzca archivos FLV o F4V

externos en un documento de Flash en tiempo de ejecución utilizando los
objetos NetConnection y NetStream de ActionScript. Puede utilizar
comportamientos de vídeo (scripts predefinidos de ActionScript).
5. Controlar vídeo incorporado en la línea de tiempo: Para controlar la

reproducción de archivos de vídeo incorporados, debe escribir ActionScript
para controlar la línea de tiempo que contiene el vídeo.
Nosotros en esta tarea incorporaremos videos con control de reproducción

de la forma 2 y 5 antes mencionadas.
7.2. DESCARGA PROGRESIVA DE VIDEO.
La descarga progresiva permite utilizar el componente FLVPlayback o

ActionScript que escribe para cargar archivos y volver a reproducir archivos
FLV o F4V externos en un archivo SWF en tiempo de ejecución, para lograr
este tipo de descarga usaremos el asistente de importación de video.
En la carpeta de trabajo encontrará videos .FLV para su utilización.
Asistente de importación de vídeo.
El asistente de importación de vídeo simplifica el proceso de importación de

vídeo en un documento de Flash y le guía por los pasos necesarios:
Seleccionar un archivo de vídeo existente e importar el archivo para su uso en
uno de los tres contextos distintos de reproducción de vídeo. El cuadro de
diálogo de importación de vídeo contiene 2 opciones de importación:
1. Cargar vídeo externo con componente de reproducción: Importa el vídeo y

crea una instancia del componente FLVPlayback para controlar la
reproducción del vídeo. Cuando esté listo para publicar el documento de
Flash como SWF y cargarlo en el servidor web, también debe cargar el
archivo de vídeo a un servidor web o a Flash Media Server y configurar el
componente FLVPlayback con la ubicación del archivo de vídeo cargado
2. Incorporar FLV o F4V en SWF y reproducir en la línea de tiempo
Incorpora FLV o F4V en el documento Flash. Cuando se importa vídeo
por este procedimiento, se sitúa en la línea de tiempo, en la que pueden
verse todos los fotogramas de vídeo representados en los fotogramas de
la propia línea de tiempo. Un archivo de vídeo FLV o F4V incorporado
forma parte del documento de Flash.

Incorporación de vídeo a Flash.
Antes de comenzar a trabajar con vídeo en Flash, es importante tener en

cuenta la siguiente información:
o Flash sólo puede reproducir formatos de vídeo específicos.

Entre estos se incluyen FLV, F4V y vídeo MPEG. Para obtener instrucciones
sobre la conversión de vídeo en otros formatos.
o Utilice una aplicación de Adobe Media Encoder independiente (incluida con
Flash) para convertir otros formatos de vídeo a FLV y F4V.
o Flash incluye un asistente para importación de vídeo que se abre al
seleccionar Archivo / Importar / Importar vídeo.
o El uso del componente FLVPlayback es la forma más sencilla de que el
vídeo se reproduzca con rapidez en un archivo de Flash.
7.3. EL INSPECTOR DE PROPIEDADES PARA VIDEO.
Dependiendo la opción de importación de archivo de video podrá observar las

propiedades del video en el Inspector de propiedades, si escogió con
componente de reproducción observará las siguientes propiedades:

Incorporando un vídeo en flash en línea de tiempo.
Cuando se incorpora un vídeo, todos los datos del archivo de vídeo se agregan
al archivo de Flash. Con esto se genera un archivo de Flash, mucho más
grande y un archivo SWF posterior. El vídeo se sitúa en la línea de tiempo, en
la que pueden verse todos los fotogramas de vídeo representados en los
fotogramas de la propia línea de tiempo. Dado que cada fotograma de vídeo se
representa con un fotograma en la línea de tiempo, la velocidad de fotogramas
del clip de vídeo y del archivo SWF debe ser la misma.
El vídeo incorporado encuentra su mayor utilidad cuando se trata de archivos
de vídeo de pequeño tamaño, con tiempos de reproducción inferiores a 110
segundos. Si utiliza clips de vídeo de mayor duración, piense en la posibilidad
de utilizar descarga progresiva o flujo de vídeo con Flash Media Server.
Entre las limitaciones del vídeo incorporado se encuentran las siguientes:
o Puede encontrar problemas si SWF resultante es demasiado grande. Flash
Player reserva gran cantidad de memoria cuando descarga e intenta
reproducir archivos SWF de gran tamaño con vídeo incorporado, lo que
puede causar un bloqueo de Flash Player.
o Los archivos de vídeo más largos (más de 10 segundos) suelen plantear
problemas de sincronización entre los elementos de audio y vídeo del clip. Al
cabo de un tiempo, las pistas de audio comienzan a reproducirse fuera de
secuencia con la imagen, lo que resulta una experiencia bastante
desagradable.
o Para reproducir un vídeo incorporado a un archivo SWF, se debe descargar
todo el vídeo antes de que comience la reproducción. Si se incorpora un
archivo de vídeo excesivamente grande, la descarga del archivo SWF en su
totalidad y el inicio de la reproducción pueden requerir mucho tiempo.
o Una vez importado un clip, ya no puede editarse. En su lugar, debe volver a
editarse e importarse el archivo de vídeo.
o Al publicar el archivo SWF a través de la web, el vídeo completo se debe
descargar en el equipo del usuario antes de que pueda comenzar su
reproducción.
Puede previsualizar los fotogramas de un vídeo incorporado arrastrando la

cabeza lectora a lo largo de la línea de tiempo. Tenga en cuenta que la pista de
sonido del vídeo no se reproduce durante el avance rápido. Para previsualizar
el vídeo con el sonido, utilice el comando Probar película.
Incorporación de vídeo en un archivo de Flash.
1. Seleccione Archivo / Importar / Importar vídeo.

2. Seleccione en su equipo local el clip de vídeo que desea importar.
3. Seleccione Incorporar FLV en SWF y Reproducir en la línea de tiempo.

4. Haga clic en Siguiente.

5. Elija el tipo de símbolo con el que se incorporará el vídeo al archivo SWF.
o Vídeo incorporado: Si el clip de vídeo está destinado a reproducción lineal

en la línea de tiempo, éste es el método más apropiado.
o Movie Clip: Es aconsejable incluir el vídeo en una instancia de clip de
película, para tener el máximo control sobre el contenido. La línea de tiempo
de vídeo se reproduce independientemente de la línea de tiempo principal.
No es necesario ampliar en muchos fotogramas la línea de tiempo principal
para ajustarla al vídeo, pues podría dificultar el trabajo con el archivo FLA.
o Gráfico: La incorporación de un clip de vídeo como símbolo gráfico implica
que no pueda interactuar con él mediante ActionScript (normalmente, los
símbolos gráficos se utilizan con imágenes estáticas y para crear elementos
de animación reutilizables ligados a la línea de tiempo principal).
6. Importación de vídeo directamente al escenario (y a la línea de tiempo) o

como elemento de biblioteca.
o De forma predeterminada, Flash sitúa en el escenario los vídeos

importados. Para importar solamente a la biblioteca, anule la selección de
Colocar instancia en el escenario.
o Si va a crear una sencilla presentación de vídeo con narración lineal y
poca o ninguna interacción, acepte la configuración predeterminada e
importe el vídeo al escenario. Para crear una presentación dinámica,
trabajar con varios clips de vídeo o añadir transiciones dinámicas a otros

elementos mediante ActionScript, importe el vídeo a la biblioteca. Una vez

que el vídeo esté en la biblioteca, personalícelo convirtiéndolo en un
objeto MovieClip, más fácil de controlar con ActionScript.
o De forma predeterminada, Flash expande la línea de tiempo para abarcar
toda la duración de la reproducción del clip.
7. Haga clic en Finalizar.
o El asistente de importación de vídeo incorpora el vídeo en el archivo

SWF. El vídeo se mostrará en el escenario o en la biblioteca, según las
opciones de incorporación que haya seleccionado.
8. En el inspector de propiedades ventana / Propiedades, asigne al clip un

nombre de instancia y realice las modificaciones que desee en sus
propiedades.
7.4. IMPORTACIÓN Y CONTROL DE SONIDO A DOCUMENTOS Y

BOTONES.
Para colocar archivos de sonido en Flash, impórtelos a la biblioteca del

documento actual.
1. Seleccione Archivo / Importar / Importar a biblioteca.

2. En el cuadro de diálogo Importar, localice y abra el archivo de sonido
deseado.
Flash almacena los sonidos en la biblioteca junto

con los mapas de bits y los símbolos. Sólo es
necesaria una copia del archivo de sonido para
ese sonido de varias formas en el documento.
Flash incluye una biblioteca de sonidos que

utilizar contiene una gran variedad de sonidos
que se pueden emplear para aplicar efectos.
o Para abrir la biblioteca de sonidos, elija Ven-

tana / Bibliotecas comunes / Sonidos. Para
importar un sonido de la biblioteca Sonidos a
su archivo FLA, arrastre el sonido desde la
biblioteca de sonidos al panel Biblioteca de su
archivo FLA.
Los sonidos pueden necesitar una cantidad considerable de espacio en disco y

de memoria RAM. No obstante, los datos de sonido mp3 están comprimidos y

ocupan menos espacio que los datos de sonido WAV o AIFF. En general,
cuando utilice archivos WAV o AIFF, es preferible utilizar sonidos mono de 16-
22 kHz (los estéreo utilizan el doble de información), pero Flash puede importar
sonidos de 8 o de 16 bits a una frecuencia de muestreo de 11, 22 ó 44 kHz.
Formatos de archivo de sonido admitidos.

Puede importar a Flash los siguientes formatos de archivo de sonido:
o ASND (Windows o Macintosh). Se trata del formato de sonido nativo de

Adobe Soundbooth.
o WAV. (sólo en Windows).
o mp3. (Windows o Macintosh).
Añadir un sonido a la línea de tiempo.

Puede añadir un sonido a un documento desde la biblioteca o cargar un sonido
en un archivo SWF en tiempo de ejecución mediante el método loadSound o el
objeto Sound (action Script). Importe el sonido a la biblioteca, si no lo ha hecho
aún.
1. Seleccione Insertar / Línea de tiempo / Capa.

2. Con la nueva capa de sonido seleccionada, arrastre el sonido desde el panel
Biblioteca hasta el escenario. El sonido se añade a la capa activa.
Puede colocar múltiples sonidos en una capa o en capas que contengan
otros objetos. No obstante, se recomienda que cada sonido se coloque en
una capa separada. Cada capa actúa como un canal de sonido separado.
Los sonidos de todas las capas se combinan cuando se reproduce el archivo
SWF.
3. En la línea de tiempo, seleccione el primer fotograma que contiene el archivo
de sonido.
4. Seleccione Ventana / Propiedades y haga clic en la flecha que aparece en

la parte inferior derecha para ampliar el inspector de propiedades.
5. En el inspector de propiedades, elija el archivo de sonido en el menú
emergente Sonido.
6. Elija una opción de efecto en el menú emergente Efectos:
Ninguno: No aplica ningún efecto al archivo de sonido. Seleccione esta

opción para eliminar efectos aplicados con anterioridad.

Canal izquierdo/Canal derecho:

Sólo reproducen el sonido en el canal
izquierdo o derecho.
Desvanecimiento de izquierda a
derecha/ Desvanecimiento de derecha a
izquierda.
Cambia el sonido de un canal al otro.
Difuminado: Incrementa gradualmente el

volumen de un sonido.
Desaparecer: Reduce gradualmente el

volumen de un sonido.
Personalizada: Permite crear sus propios puntos de entrada y salida y de

sonido mediante Editar envoltura.
7. Seleccione una opción de sincronización en el menú emergente Sinc.:

o Evento: Sincroniza el sonido con un evento. Un sonido de evento, como
el sonido que se reproduce cuando el usuario hace clic en un botón, no
comienza a sonar hasta que aparece el fotograma clave inicial y se
reproduce por completo, independientemente de la línea de tiempo,
aunque el archivo SWF se detenga. Al reproducir el archivo SWF
publicado, los sonidos de evento se mezclan. Si un sonido de evento se
está reproduciendo y se crea una nueva instancia del sonido (por ejemplo,
cuando el usuario hace clic en el botón nuevamente), la primera instancia
del sonido continúa reproduciéndose y la nueva instancia empieza a
reproducirse de forma simultánea.
o Iniciar: Es equivalente a Evento, pero si el sonido ya se está
reproduciendo, no se reproduce una nueva instancia del mismo.
o Detener: Detiene el sonido especificado.
o Flujo: Sincroniza el sonido para reproducirlo en un sitio web.Flash hace
que la animación vaya a la misma velocidad que los flujos de sonido. Si
Flash no puede dibujar los fotogramas de animación a una velocidad
suficiente, se los salta. Al contrario que los sonidos de evento, los flujos
de sonido se detienen cuando el archivo SWF se detiene.
8. Introduzca un valor en Repetir para especificar el número de veces que el

sonido debe reproducirse o seleccione Reproducir indefinidamente para que
se repita continuamente. Para una reproducción continua, introduzca un
número suficientemente alto para reproducir el sonido con una duración
larga. Para probar el sonido, arrastre la cabeza lectora sobre los fotogramas

que contienen el sonido o utilice los comandos del Controlador o del menú
Control.
Añadir sonido a un botón.
Puede asociar sonidos con los diferentes estados de un símbolo de botón. Los
sonidos se almacenan con el símbolo, por lo que funcionan en todas las
instancias del mismo.
1. Seleccione el botón del panel Biblioteca.

2. Seleccione Editar en el menú Panel situado en la esquina superior derecha
del panel.
3. En la línea de tiempo del botón, añada una capa de sonido Insertar / Línea
de tiempo/Capa.
4. En la capa de sonido, cree un fotograma clave normal o vacío para que se
corresponda con el estado del botón al que desea añadir un sonido Insertar
/ Línea de tiempo / Fotograma clave o Insertar / Línea de tiempo /
Fotograma clave vacío. Por ejemplo, para añadir un sonido cuando el
botón está presionado, cree un fotograma clave en el fotograma con la
etiqueta Presionado.
5. Haga clic en el fotograma clave que ha creado.
6. Seleccione Ventana / Propiedades.
7. En el inspector de propiedades, elija un archivo de sonido en el menú emer-
gente Sonido.
8. Seleccione Evento en el menú emergente Sinc.
Sincronización de un sonido con animación.

Para sincronizar un sonido con animación, inicie y detenga en sonido en los
fotogramas clave.
1. Para añadir sonido a un documento.

2. Para sincronizarlo con un evento de la escena, elija un fotograma clave de
inicio que se corresponda con el fotograma clave del evento de la escena.
Puede seleccionar todas las opciones de sincronización.
3. Cree un fotograma clave en la línea de tiempo de la capa de sonido, en el
fotograma donde desee que termine el sonido. En la línea de tiempo aparece
una representación del archivo de sonido.
4. Seleccione Ventana / Propiedades y haga clic en la flecha que aparece en
la parte inferior derecha para ampliar el inspector de propiedades.
5. En el inspector de propiedades, elija el mismo sonido en el menú emergente
Sonido.
6. Seleccione Detener en el menú emergente Sinc. Cuando se reproduce el
archivo SWF, el sonido se detiene al llegar al fotograma clave final.
7. Para reproducir el sonido basta con mover la cabeza lectora.

Edición de un sonido en Flash

En Flash, puede definir el punto inicial de un sonido o controlar el volumen del
sonido mientras se reproduce. También puede modificar los y final puntos
inicial de los sonidos. Esto es útil para reducir el tamaño de los archivos de
sonido mediante la eliminación de las secciones no utilizadas.
1. Añada un sonido a un fotograma o seleccione un fotograma que ya contenga

un sonido.
2. Seleccione Ventana / Propiedades.
3. Haga clic en el botón Editar situado en la parte derecha del inspector de
propiedades.
4. Siga uno de estos procedimientos:
o Cambiar los puntos inicial o final del sonido.
o Para cambiar la envoltura de sonido.
o Vea una parte mayor o menor del sonido en la ventana.
o Para cambiar la unidad de tiempo de segundos a fotogramas, haga clic en
los botones Segundos y Fotogramas.
o Para escuchar sonidos editados, haga clic en el botón Reproducir.
FUNDAMENTO TEÓRICO:
Importar archivos de vídeo a la biblioteca.
Para importar archivos en formato FLV o F4V se utilizan los comandos Importar
o Importar a biblioteca, o el botón Importar del cuadro de diálogo Propiedades
de vídeo incorporado.
Para crear su propio reproductor de vídeo, que cargue de forma dinámica

archivos FLV o F4V de una fuente externa, coloque su vídeo dentro de un
símbolo de clip de película. Al cargar archivos FLV o F4V de forma dinámica,
ajuste las dimensiones del clip de película para que correspondan a la
dimensión real del archivo FLV y ajuste la escala del vídeo mediante la escala
del clip de película.
Es aconsejable incluir el vídeo en una instancia de clip de película, para tener

el máximo control sobre el contenido. La línea de tiempo de vídeo se reproduce
independientemente de la línea de tiempo principal. No es necesario ampliar en
muchos fotogramas la línea de tiempo principal para ajustarla al vídeo, pues
podría dificultar el trabajo con el archivo FLA.
Para importar un archivo FLV o F4V en la biblioteca, realice uno de los pasos
siguientes:
o Seleccione Archivo / Importar / Importar a biblioteca.

o Seleccione un clip de vídeo existente en el panel Biblioteca y elija

Propiedades en el menú del panel Biblioteca. Haga clic en Importar. Localice
el archivo que va a importar y haga clic en Abrir.
Cambio de propiedades de un clip de vídeo.

Puede modificar las propiedades de una instancia de clip de vídeo incorporado
o vinculado en el escenario, asignarle un nombre de instancia y modificar su
anchura, altura y posición en el escenario con el inspector de propiedades.
También puede intercambiar una instancia de un clip de vídeo, es decir,

asignarle un símbolo diferente. Cuando se asigna un símbolo distinto a una
instancia, en el escenario se muestra una instancia diferente, pero las
propiedades de la otra instancia (como dimensiones y punto de registro) se
mantienen intactas.
En el cuadro de diálogo Propiedades de vídeo, puede realizar estas acciones:
o Ver información sobre un clip de vídeo importado, como su nombre, ruta,

fecha de creación, dimensiones de píxeles, longitud y tamaño de archivo.
o Cambiar el nombre del clip de vídeo.
o Actualizar el clip de vídeo si se modifica en un editor externo.
o Importar un archivo FLV o F4V para que sustituya al clip seleccionado.
o Exportar un clip de vídeo como archivo FLV o F4V.
Cambio de las propiedades de una instancia de vídeo en el inspector de

propiedades.
1. Seleccione una instancia de un clip de vídeo incorporado o vinculado en el

escenario.
2. Seleccione Ventana / Propiedades y siga uno de estos procedimientos:

o Introduzca un nombre de instancia en el cuadro de texto correspondiente
de la parte izquierda del inspector de propiedades.
o Introduzca valores de altura y anchura para cambiar las dimensiones de la
instancia de vídeo.
o Introduzca valores en X e Y para cambiar la posición de la esquina
superior izquierda de la instancia en el escenario.
o Haga clic en Intercambiar. Seleccione un clip de vídeo para sustituir el
que está asignado a la instancia.

Baja calidad de vídeo | Flash Player.
Es posible que perciba un rendimiento de vídeo deficiente con Adobe Flash

Player si se tiene un ancho de banda de red bajo o inferior a los requisitos de
hardware recomendados. Los síntomas pueden incluir:
• Reproducción de audio o vídeo entrecortada.

• Baja calidad de imagen.
• Fotogramas eliminados.
• Tiempos lentos de visualización.
• Balbuceo.
• Imagen de vídeo movida.
• Pérdida de audio.
• Vídeo y audio no sincronizados.
Solución
Libere el máximo ancho de banda de red posible. Por ejemplo, desactive las
aplicaciones que puedan estar utilizando ancho de banda como mensajería
instantánea, aplicaciones de uso compartido punto a punto, etc.
Asegúrese de que el ordenador cumpla con las configuraciones de hardware

mínimas recomendadas para una experiencia de reproducción óptima:
Resolución Windows Macintosh Linux

Procesador PowerPC G5
de 1.8 GHz o más rápido
Procesador Intel Pentium Procesador Intel Pentium
de 4 2.33 GHz (o de 4 2.33 GHz (o
Procesador Intel Core
852 x 480 equivalente) equivalente)
Duo de 1.33 GHz o más
(480p)
rápido
24 fps 128 MB de RAM 128 MB de RAM
256 MB de RAM
64 MB de VRAM 64 MB de VRAM
64 MB de VRAM
Procesador Intel Pentium Procesador Intel Pentium
Duo de 1.83 GHz o más
de 4 3 GHz (o equivalente) de 4 3 GHz (o equivalente)
1280 x 720 rápido
(720 p)
128 MB de RAM 128 MB de RAM
2430 fps 256 MB de RAM
64 MB de VRAM
Procesador Intel Core Duo Procesador Intel Core Duo
Duo de 2.66 GHz
1920 x de 1.8 GHz (o equivalente) de 1.8 GHz (o equivalente)
(o equivalente)
1080
(1080p) 128 MB de RAM 128 MB de RAM
512 MB de RAM
24 fps
128 MB de VRAM

Además, si tiene problemas de visualización con Flash Player, como una baja
calidad de imagen o tiempos lentos de visualización, puede ser de ayuda
anular la selección de Activar la aceleración de hardware en el panel Mostrar.
Esto puede eliminar los problemas de compatibilidad del hardware o el

controlador con Flash Player. A continuación, Flash Player utiliza software para
escalar y mostrar el contenido.
Para desactivar la aceleración de hardware:
1. Haga clic con el botón derecho del ratóno mantenga presionada la tecla
Control y haga clic en la aplicación de Flash o vídeo durante la
reproducción.
2. En el menú contextual, seleccione Configuración. En primer lugar, aparecerá
el panel Mostrar.
3. Anule la selección de la opción Activar la aceleración de hardware y, a
continuación, haga clic en Cerrar
Vista previa de la configuración y el formato de publicación.

El comando Vista previa de publicación exporta el archivo y abre la vista previa
en el navegador predeterminado. Si previsualiza un vídeo QuickTime, Vista
previa de publicación inicia el reproductor de vídeo QuickTime. Si previsualiza
un proyector, Flash inicia el proyector.
o Seleccione Archivo / Vista previa de publicación y seleccione el formato

de archivo que desea mostrar.
Con los valores que aparecen en Configuración de publicación, Flash crea un

archivo del tipo especificado en la misma ubicación que el archivo FLA. Este
archivo permanece en dicha ubicación hasta que se sobrescribe o se elimina.

Ejercicio 1
1. Abra un archivo nuevo en Flash CS6 .

2. Importe el video bicicletas.flv de la carpeta de trabajo, para que se
incorpore en la línea de tiempo.
3. Ajuste el tamaño del escenario al tamaño del video.
4. De su carpeta de trabajo importe a biblioteca instrumental.mp3.
5. Agregue una capa.
6. Con la capa seleccionada arrastre al escenario instrumental.mp3.
7. Modifique las propiedades del sonido en el panel de propiedades para
que sincronice con el video.
8. Si desea que el video dure menos tiempo puede reducir sus fotogramas
desde la línea de tiempo.
Ejercicio 2
1. De su carpeta de trabajo abra el archivo sonido sincronizado_inicio.fla.

2. Abra el Panel biblioteca y utilice el sonido disparo.wav para sincronizar
el sonido con la animación.
3. Se sugiere crear una capa nueva para colocar el sonido.
Ejercicio 3
1. Abra el archivo botonera.fla, observe y analice en el escenario y

biblioteca la forma de agregar un sonido a sus botones. Use sonido de
la carpeta de trabajo.

08
VIII. ELABORAR ANIMACIONES INCLUYENDO ACCIONES.
Uso de Acciones.
Panel de acciones.
Controlar la línea de tiempo con acciones básicas.

capacidad.
 Uso de Acciones.
 Panel de acciones.
 Controlar la línea de tiempo con acciones básicas.

8.1. USO DE ACCIONES.
Hay varias formas de trabajar con ActionScript. El modo Asistente de script le

permite añadir ActionScript a su archivo FLA sin tener que digitar el código. Se
seleccionan las acciones y el software presenta una interfaz de usuario para
ingresar los parámetros que se requieren para cada una de ellas. Debe tener
algunas nociones sobre qué funciones debe utilizar para realizar tareas
específicas, pero no tiene que aprender la sintaxis. Los diseñadores y usuarios
que no son programadores utilizan esta manera.
Los comportamientos también le permiten añadir código al archivo sin tener

que escribirlo. Los comportamientos son scripts predefinidos para tareas
comunes. Puede añadir un comportamiento y, a continuación, configurarlo en el
panel Comportamientos. Los comportamientos sólo están disponibles para
ActionScript 2.0 y versiones anteriores.
Escribir su propio ActionScript le ofrece la mayor flexibilidad y control sobre su

documento, pero requiere que esté familiarizado con el lenguaje y las
convenciones de ActionScript.
Cómo escribir ActionScript.

Cuando escribe código ActionScript en el entorno de edición, utiliza el panel
Acciones o la ventana Script. El panel Acciones y la ventana Script contienen
un editor de código completo que incluye sugerencias y consejos para el
código, coloreado y aplicación de formato del código, resaltado de sintaxis,
revisión de sintaxis, depuración, números de línea, ajuste de texto y
compatibilidad con Unicode.
Utilice el panel Acciones para escribir scripts que son parte de su documento
Flash (es decir, scripts que están incorporados en el archivo FLA). El panel
Acciones incluye funciones como la caja de herramientas Acciones.

8.2. PANEL ACCIONES.
Para crear scripts incorporados en un archivo FLA, se introduce código

ActionScript directamente en el panel Acciones. El panel Acciones contiene tres
paneles: la caja de herramientas Acciones, que agrupa los elementos de
ActionScript por categoría; el navegador de scripts, que permite moverse
rápidamente entre los scripts del documento Flash; y el panel Script, que es
donde se escribe el código ActionScript.
Visualización del panel Acciones.
o Seleccione Ventana / Acciones.

o Presione F9.
Eliminación de una acción.
1. Seleccione una sentencia en el panel Script.

2. Haga clic en Eliminar (-) o presione la tecla Supr.
Los comentarios de código son partes del código que el compilador de

ActionScript ignora. Una línea de comentario explica lo que hace el código, o
desactiva temporalmente el código que no desea eliminar. Para aplicar un
comentario a una línea de código, iníciela con una barra diagonal (//).
El compilador omite todo el texto de esa línea que sigue a la barra diagonal.

8.3. CONTROLAR LA LÍNEA DE TIEMPO CON ACCIONES BÁSICAS.
Actionscript3.0 es una de las más grandes herramientas para los diseñadores

o desarrolladores web, para aquellos que utilizan Flash en sus proyectos.
Actionscript3 permitirá realizar y hacer cosas que con la línea del tiempo nos
llevaría el doble, triple o más tiempo y en la mayoría de los casos sería
imposible realizar.
Para poder diseñar o realizar una página web, es básico e imprescindible poder
manejar la línea de tiempo de manera fluida. Conoceremos los principales
metodos.
GotoAndStop (fotograma), situará el cabezal en el fotograma indicado y

parará la reproducción.
play(), hará que la reproducción prosiga en el fotograma en el que se
encuentre el cabezal.
prevFrame(), hará que el cabezal retroceda al fotograma anterior al que nos
encontramos.
nextFrame(), hará que el cabezal avance al fotograma siguiente al que nos
encontramos.
Stop( ) Esta función sirve para detener el cabezal de la línea de tiempo donde
sea colocada. Así que seleccionamos el último fotograma de la sección y
abrimos el Panel Acciones.
Se colocan las acciones en una capa aparte llamada Acciones para así poder
acceder más rápido a ella. El método es el mismo, solamente habrá que crear
fotogramas claves en la línea de tiempo en aquellos sitios en los que queramos
insertar un stop().
Es posible el uso del Panel Comportamiento para crear saltos a fotogramas de

forma sencilla y sin tener que escribir ninguna línea de código, para ver cómo
se hace visita este tema básico.
Control de reproducción de clips de película.

Flash utiliza la metáfora de una línea de tiempo para expresar animación o un
cambio de estado. Cualquier elemento visual que emplee una línea de tiempo
debe ser un objeto MovieClip o una ampliación de la clase MovieClip. Aunque
se puede utilizar el código ActionScript para ordenar a cualquier clip de película
que se detenga, se reproduzca o pase a otro punto de la línea de tiempo, no
se puede utilizar para crear dinámicamente una línea de tiempo ni añadir
contenido en fotogramas específicos; esto solo es posible en la herramienta de
edición de Flash CS6 .

Cuando se reproduce un clip de película, avanza por su línea de tiempo a la

velocidad indicada en la velocidad de fotogramas del archivo SWF.
Proyecto Galería Simple.
Realice los siguientes procedimientos para crear una galería de fotos simple
en Flash CS6 con ActionScript.
1. Crear un nuevo archivo AS 3.0, guardarlo con el nombre galería.

2. Importamos a biblioteca 6 fotos de la carpeta de trabajo imágenes galería,
seleccionamos todas y las importamos.
3. Cambiar el tamaño del escenario a 960 x 600 px para que coincida con el
tamaño de las fotos.
4. Cambie el nombre de capa 1 por imágenes ya que será la que contenga

las imágenes.
5. Agregue en esta capa un fotograma clave en blanco por cada foto, y
ubíquela en el escenario para que coincida con cada fotograma clave vacío,

observe que el fotograma clave vacío al contener una foto se convierte en

fotograma clave.
6. Cada foto debe estar alineada al escenario horizontalmente y verticalmente

con respecto al centro.
7. Guarde y ejecute, se observará la animación a una velocidad de 24
fotogramas por segundo (fps ) realizando un bucle de animación.
8. Prosiga a insertar botones para controlar el tiempo que se visualizará la
imagen en línea de tiempo.
9. Crear una nueva capa y renombrarla con el nombre acciones.
10. Agregar otra capa más con el nombre botones.
11. De preferencia mueva la capa acciones por encima de todas.
12. Abra el panel Bibliotecas comunes / botones / playback flat.
13. En la capa botones, primer fotograma ubique los botones flat blue back y
flat blue forward en la parte inferior de la foto, aumente su tamaño para
que el usuario pueda utilizarlo.
14. Proceda a dar nombre a cada botón en las propiedades (nombre de
instancia), como por ejemplo: siguiente_btn y anterior_btn. Para poder
acceder a ellos mediante AS y mediante la programación asignar eventos
a los botones.
15. Seleccione la capa acciones, primer fotograma y presiono la tecla función
F9 para escribir en el Panel Acciones.

• Escribo el nombre de la instancia del botón:

siguiente_btn.addEventListener que quiere decir agregar un oyente
de eventos y entre paréntesis escribo los parámetros al evento al cual
va a responder el botón.
• El evento será :(MouseEvent.CLICK,siguienteFoto); a la función la
llamaremos siguienteFoto.
• Ahora creará el siguiente oyente de eventos para el otro botón anterior,
con la misma estructura y cambiando el nombre de la función para no
ocasionar conflicto:
anterior_btn.addEventListener(MouseEvent.CLICK,anteriorFoto);
• Puede copiar y copiar la primera línea.
• Estas funciones van a mover para adelante y para atrás las imágenes en
la línea de tiempo.
• Ahora utilizará la función predefinida nextFrame
• Utilice un parámetro del tipo MouseEvent con el término: void que
quiere decir que no va a devolver ningún valor y siempre se agrega
cuando esta función es un oyente de eventos.
• Luego copio y pego la función y cambio lo necesario para que active al
otro botón y en lugar de nextFrame utilizo prevFrame.
• Ubíquese en la línea 1 y escriba Stop() esta acción detiene la línea de
tiempo al cargar la película.
• Pruebe la película.
• No omita los operadores.
stop();
siguiente_btn.addEventListener(MouseEvent.CLICK,siguienteFoto);
anterior_btn.addEventListener(MouseEvent.CLICK,anteriorFoto);
function siguienteFoto(event:MouseEvent):void
{
nextFrame();
}
function anteriorFoto(event:MouseEvent):void
{
prevFrame();
}
Introducción a ActionScript
El lenguaje de creación de scripts ActionScript le permite ingresar interactividad
compleja, control de reproducción y visualización de datos a su aplicación.
Puede añadir ActionScript en el entorno de creación mediante el panel
Acciones, la ventana Script o con un editor externo.

ActionScript tiene sus propias reglas sintácticas, palabras clave reservadas y

permite utilizar variables para almacenar y recuperar información. ActionScript
incluye una extensa biblioteca de clases incorporadas que permiten crear
objetos y realizar una gran cantidad de tareas útiles. No es fundamental
entender todos los elementos de ActionScript para comenzar a crear scripts; si
parte de un objetivo claro, podrá empezar a crear scripts con acciones
sencillas.
Flash incluye más de una versión de ActionScript para satisfacer las

necesidades de los distintos tipos de desarrolladores y hardware de
reproducción.
o ActionScript 3.0, Se ejecuta extremadamente rápido.

o ActionScript 2.0, Resulta más fácil de aprender que ActionScript 3.0. Aunque
Flash Player ejecuta el código compilado de ActionScript 2.0 más lentamente
que el código compilado de ActionScript 3.0
o ActionScript 1.0, es la forma más simple de ActionScript, y todavía se utiliza
en algunas versiones de Flash Lite Player.
o ActionScript de Flash Lite 2.x, es un subconjunto de ActionScript 2.0 que se
admite en Flash Lite 2.x que se ejecuta en teléfonos y dispositivos móviles.
o ActionScript de Flash Lite 1.x, es un subconjunto de ActionScript 1.0 que se
admite en Flash Lite 1.x que se ejecuta en teléfonos y dispositivos móviles.
Operadores en AS 3.0
Los operadores pueden ser unarios, binarios o ternarios. Un operador unario se

aplica a un operando. Por ejemplo, el operador de incremento (++) es un
operador unario porque se aplica a un solo operando. Un operador binario se
aplica a dos operandos. Por ejemplo, el operador división (/) se aplica a dos
operandos. Un operador ternario se aplica a tres operandos. Por ejemplo, el
operador condicional (?:) se aplica a tres operandos.
Algunos operadores están sobrecargados, lo que significa que se comportan de

distinta manera en función del tipo o la cantidad de operandos que se les pase.
El operador suma (+) es un ejemplo de un operador sobrecargado que se
comporta de distinta manera en función del tipo de datos de los operandos. Si
ambos operandos son números, el operador suma devuelve la suma de los
valores. Si ambos operandos son cadenas, el operador suma devuelve la
concatenación de los dos operandos. En el siguiente ejemplo de código se
muestra cómo cambia el comportamiento del operador en función de los
operandos:
trace(5 + 5); // 10

trace("5" + "5"); // 55
Precedencia y asociatividad de operadores.
La precedencia y asociatividad de los operadores determina el orden en que se

procesan los operadores. Aunque para aquellos usuarios familiarizados con la
programación aritmética puede parecer natural que el compilador procese el
operador de multiplicación (*) antes que el operador de suma (+), el compilador
necesita instrucciones explícitas sobre qué operadores debe procesar primero.
Dichas instrucciones se conocen colectivamente como precedencia de

operadores. ActionScript establece una precedencia de operadores
predeterminada que se puede modificar utilizando el operador paréntesis (()).
Por ejemplo, el código siguiente modifica la precedencia predeterminada del
ejemplo anterior para forzar al compilador a procesar el operador suma antes
que el operador producto:
var sumNumber:uint = (2 + 3) * 4; // uint == 20
1. Abra el archivo web_personal.fla y pruebe película.

2. Analice la biblioteca, y mencione cuales son los clip de película que
contiene animaciones.
3. Visualice las propiedades de los botones del menú y mencione cuáles
son sus nombres de instancias.
4. Explique la función de la acción que se encuentra ubicada en el
fotograma 40 de la capa acciones.
5. De la web_personal.fla explique: ¿Qué función desempeña la acción
gotoAndStop(10)?
6. ¿Cuál es la tarea de la siguiente línea de código?
b_nosotros.addEventListener(MouseEvent.CLICK, verNosotros);
7. Realice una web destinada a la venta de equipos de cómputo en Flash
CS6 y reutilice el código de Action Script 3.0 de la web_personal.fla.

09
IX. RECONOCER LA IMPORTANCIA DE DREAMWEAVER
PARA LA GENERACIÓN, DISEÑO Y ADMINISTRACIÓN DE
SITIOS WEB.
Reconocer las herramientas básicas de Dreamweaver.

Administración y configuración de sitios.
Visualización y utilización de archivos y carpetas desde el panel
archivos.
Uso de la función Vista en Vivo.

capacidad.
 Software de Adobe Dreamwaver CS6
 Reconocer las herramientas básicas de Dreamweaver.

 Administración y configuración de sitios.
 Visualización y utilización de archivos y carpetas desde el panel
archivos.
 Uso de la función Vista en Vivo.

9.1. RECONOCER LAS HERRAMIENTAS BÁSICAS DE DREAMWEAVER

CS6.
Adobe Dreamweaver CS6 nos permite diseñar, desarrollar y realizar el

mantenimiento integral de sitios y aplicaciones web de forma rápida y sencilla.
Creado tanto para diseñadores como para desarrolladores, Dreamweaver CS5
ofrece la posibilidad de trabajar en una interfaz de diseño visual intuitiva o en
un entorno de codificación agilizado. Diseñe de forma visual o directamente
sobre el código, desarrolle páginas con sistemas de gestión de contenido y
pruebe de forma precisa la compatibilidad con los navegadores.
Con Adobe Dreamweaver CS6 podemos crear tablas, trabajar con capas,
insertar comportamientos JavaScript, datos, objetos y efectos Spry, diseño y
gestión de CSS, etc. de una manera visual, amigable y sencilla, obtenga una
perspectiva directa de los métodos, objetos y funciones PHP principales
gracias a la sugerencia de códigos PHP dinámica.
El Entorno de trabajo de Dreamweaver.

El espacio de trabajo de Dreamweaver permite ver las propiedades de los
documentos y los objetos. Además, coloca muchas de las operaciones más
frecuentes en barras de herramientas para que pueda realizar cambios en los
documentos rápidamente.
En la plataforma Windows, Dreamweaver proporciona un diseño integrado en

una única ventana. En el espacio de trabajo integrado, todas las ventanas y
paneles están integrados en una única ventana de la aplicación de mayor
tamaño.
Ventana de documento.
La ventana de documento muestra el documento activo. Puede optar para
trabajar una de las siguientes vistas:
o Vista Diseño. Es un ambiente de diseño y edición visual de la página así

como también para desarrollar rápidamente aplicaciones. En esta vista,
Dreamweaver muestra una representación visual del documento
completamente editable, exactamente igual a la que aparecería en un
navegador. Podemos configurar la vista Diseño para que muestre el
contenido dinámico mientras trabaja en el documento.
o Vista Código. Es un ambiente que se emplea para codificar, escribir y editar

manualmente código HTML, JavaScript, código de lenguaje de servidor,
como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros
tipos de código.

o Vista de código dividida. Versión dividida de la vista Código que le permite

desplazarse por el trabajo realizado en diferentes secciones del documento
a la vez.
o Vista en vivo. La Vista en vivo, que es similar a la vista Diseño, muestra una
representación más realista de la apariencia que tendrá el documento en un
navegador y le permite interactuar con el documento de la misma forma que
lo haría en un navegador. La Vista en vivo no es editable. No obstante,
puede realizar modificaciones en la vista Código y actualizar la Vista en vivo
para ver los cambios.
o Vista Código en vivo. Sólo está disponible al visualizar un documento en la

Vista en vivo. La vista Código en vivo muestra el código que un navegador
utiliza para ejecutar la página y cambia dinámicamente conforme se
interactúa con la página en la Vista en vivo. La vista Código en vivo no es
editable.
Barra de herramientas Documento.
Contiene botones para las operaciones más habituales de los menús Archivo y
Edición: Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir
código, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de
herramientas Estándar, seleccione Ver / Barras de herramientas / Estándar.
En la barra de herramientas Documento, aparecen las siguientes opciones:

o Barra de la aplicación: A lo largo de su parte superior, la ventana de la

aplicación contiene un conmutador de espacios de trabajo, menús y otros
controles de aplicación.
o Barra de herramientas Documento: Contiene botones que proporcionan
opciones para diferentes vistas de la ventana de documento (como la vista
Diseño y la vista Código), diversas opciones de visualización y algunas
operaciones comunes como la obtención de una vista previa en un
navegador.
o Barra de herramientas Codificación: Sólo se muestra en la vista Código.
Contiene botones que le permiten realizar numerosas operaciones de
codificación estándar.
o Barra de herramientas Representación de estilos: Oculta de manera
predeterminada. Contiene botones que le permiten ver cómo aparecería el
diseño en distintos tipos de medios si utilizase hojas de estilos dependientes
de los medios. También contiene un botón que le permite activar o
desactivar estilos de hojas de estilos en cascada (CSS).
o Ventana de documento: Muestra el documento actual mientras lo está
creando y editando.
o Inspector de propiedades: Le permite ver y cambiar diversas propiedades
del objeto o texto seleccionado. Cada objeto tiene propiedades distintas. El
inspector de propiedades no está ampliado de forma predeterminada en el
diseño del espacio de trabajo del codificador.
o Selector de etiquetas: Situado en la barra de estado de la parte inferior de

la ventana de documento. Muestra la jerarquía de etiquetas que rodea a la
selección actual. Haga clic en cualquier etiqueta de la jerarquía para
seleccionar la etiqueta y todo su contenido.
o Paneles: Le ayudan a supervisar y modificar el trabajo realizado. Ejemplos
de paneles son el panel Insertar, el panel Estilos CSS y el panel Archivos.
Para ampliar un panel, haga doble clic en su ficha.
o Panel Insertar: Contiene botones para la inserción de diversos tipos de
objeto, como imágenes, tablas y elementos multimedia, en un documento.
Cada objeto es un fragmento de código HTML que le permite establecer
diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla
haciendo clic en el botón Tabla del panel Insertar. Si lo prefiere, puede
insertar objetos utilizando el menú Insertar en lugar del panel Insertar.
o Panel Archivos: Le permite administrar los archivos y las carpetas, tanto si
forman parte de un sitio de Dreamweaver como si se encuentran en un

servidor remoto. El panel Archivos también proporciona acceso a todos los

archivos del disco local.
Barra Insertar.
El panel Insertar contiene botones para crear e insertar objetos como tablas,
imágenes y vínculos. Los botones están ordenados en diferentes categorías,
entre las que puede cambiar seleccionando la categoría deseada del menú
desplegable Categoría. Si el documento actual contiene código de servidor,
como los documentos ASP o CFML, aparecen también otras categorías.
Algunas categorías tienen botones con menús emergentes. Al seleccionar una

opción de un menú emergente, dicha opción se convierte en la acción
predeterminada del botón. Por ejemplo, si selecciona Marcador de posición de
imagen en el menú emergente del botón Imagen, la siguiente vez que haga clic
en el botón Imagen, Dreamweaver insertará un marcador de posición de
imagen. Siempre que seleccione una nueva opción del menú emergente
cambiará la acción predeterminada del botón.
El panel Insertar está organizado en las categorías siguientes:
o Categoría Común: Permite crear e insertar los objetos que se utilizan con
más frecuencia, como las imágenes y las tablas.
o Categoría Diseño: Permite insertar tablas, etiquetas div, marcos y widgets
de Spry. También puede elegir dos vistas para tablas: Estándar (valor
predeterminado) y Tablas expandidas.
o Categoría Formularios: Contiene botones que permiten crear formularios e
insertar elementos de formulario, incluidos widgets de validación de Spry.
o Categoría InContext Editing: Contiene botones para la creación de páginas
de InContext Editing, incluidos botones para Regiones editables, Regiones
repetidas y la administración de clases CSS.
o Categoría Spry: Contiene botones para crear páginas de Spry, incluidos
objetos de datos y widgets de Spry.
o Categoría Texto: Permite insertar diversas etiquetas de formato de texto y
listas, como b, em, p, h1 y ul.
o Categoría Favoritos: Permite agrupar y organizar los botones de la barra
Insertar que utiliza con más frecuencia en un lugar común.
o Categorías de código de servidor: Sólo están disponibles para las páginas
que emplean un lenguaje de servidor determinado, como ASP, ASP.NET,
CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada una de estas

categorías contiene objetos de código de servidor que pueden insertarse en

la vista Código.
Barra de estado.
Situada en la parte inferior de la ventana de documento, proporciona

información adicional sobre el documento que está creando.
o Selector de etiquetas: Muestra la jerarquía de etiquetas que rodea a la

selección actual. Dé clic en cualquier etiqueta de la jerarquía para
seleccionar la etiqueta y todo su contenido. Dé clic en <body> para
seleccionar todo el cuerpo del documento.
Para definir los atributos Class o Id para una etiqueta en el selector de
etiquetas, dé clic con el botón de derecho del ratón en la etiqueta y elija una
clase o un ID del menú contextual.
o Herramienta Seleccionar: Activa y desactiva la herramienta Mano.
o Herramienta Mano: Permite hacer clic en el documento y arrastrarlo por la
ventana de documento.
o Herramienta Zoom y menú emergente Establecer nivel de aumento:
Permiten establecer un nivel de aumento para el documento.
o Menú emergente Tamaño de ventana (Sólo visible en la vista Diseño.):
Permite cambiar el tamaño de la ventana de documento a dimensiones
predeterminadas o personalizadas.
o Tamaño del documento y tiempo de descarga: Muestra la estimación del
tamaño del documento y del tiempo de descarga de la página, incluidos
todos los archivos dependientes, como imágenes y otros archivos
multimedia.
o Indicador de codificación: Muestra la codificación del texto del documento
actual.
El inspector de propiedades permite examinar y editar las propiedades más

comunes del elemento de página seleccionado actualmente, como texto o un
objeto insertado. El contenido del inspector de propiedades es distinto en
función del elemento seleccionado. Por ejemplo, si selecciona una imagen de
la página, el inspector de propiedades cambiará para mostrar las propiedades
de la imagen (por ejemplo, la ruta de archivo de la imagen, el ancho y el alto de
la imagen, el borde que rodea la imagen en caso de que lo haya, etc.).
El Panel Archivos.
Utilice el panel Archivos para ver y administrar los archivos del sitio de
Dreamweaver. Al visualizar sitios, archivos o carpetas en el panel Archivos,
puede cambiar el tamaño del área de visualización y expandir o contraer el

panel Archivos. Cuando el panel Archivos se contrae, muestra el contenido del

sitio local, el sitio remoto o el servidor de prueba como una lista de archivos.
Cuando se expande, muestra el sitio local, además del sitio remoto o el
servidor de prueba.
Para sitios de Dreamweaver, también puede personalizar el panel Archivos

cambiando la vista (sitio local o sitio remoto) que aparece de forma
predeterminada en el panel contraído.
El panel Estilos CSS.
El panel Estilos CSS le permite supervisar las reglas

y propiedades CSS que afectan a un elemento de
página actualmente seleccionado (modo Actual) o las
reglas y propiedades que afectan a todo un
documento (modo Todo). Un botón situado en la
parte superior del panel Estilos CSS le permite
cambiar entre estos dos modos. El panel Estilos CSS
también le permite modificar propiedades CSS tanto
en modo Todo como en modo Actual.
En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas
las reglas arriba y un panel Propiedades abajo. El panel Todas las reglas
muestra una lista de reglas definidas en el documento actual, así como las
reglas definidas en las hojas de estilo adjuntas al documento actual. El panel
Propiedades le permite editar propiedades CSS para cualquier regla
seleccionada en el panel Todas las reglas. Todos los cambios que realice en el
panel Propiedades se aplican de forma inmediata; de este modo, puede pre
visualizar el trabajo a medida que lo vaya llevando a cabo.
Utilización de la ventana de documento.
La ventana de documento permite visualizar documentos en la vista Código, la

vista Código dividida, la vista Diseño, las vistas Código y Diseño (vista Dividida)
o en la Vista en vivo. También puede optar por visualizar la vista de código
dividida o las vistas Código y Diseño horizontal o verticalmente. (La
visualización predeterminada es la horizontal.)

Cambio a la vista Código.
Siga uno de estos procedimientos:
o Seleccione Ver / Código.

o En la barra de herramientas Documento, haga clic en el botón Mostrar vista
de Código.
Cambio a la vista de código dividida.
La vista de código dividida, divide el documento en dos para que pueda trabajar
en dos secciones del código a la vez.
o Seleccione Ver / Dividir código.
Cambio a la vista Diseño.
o Seleccione Ver / Diseño.

o En la barra de herramientas Documento, haga clic en el botón Mostrar vista
de Diseño.
Visualización de las vistas Código y Diseño.
o Seleccione Ver / Código y diseño.

o En la barra de herramientas Documento, haga clic en el botón Mostrar
vistas de Código y Diseño.
De manera predeterminada, la vista Código aparece en la parte superior de la

ventana de documento y la vista Diseño, en la parte inferior. Para mostrar la
vista Diseño en la parte superior, seleccione Ver / Vista de diseño encima.
Cambio de la vista Código a la vista Diseño y viceversa.
o Presione Control + comilla invertida (`).
Si aparecen ambas vistas en la ventana de documento, este método abreviado

de teclado permite pasar de una vista a otra.

División vertical de las vistas.
Esta opción sólo está disponible para la vista de código dividida y para las
vistas Código y Diseño (vista dividida). Está desactivada para la vista Código y
para la vista Diseño.
o Asegúrese de que se encuentra en la vista de código dividida Ver / Dividir

código o en las vistas Código y Diseño Ver / Código y Diseño.
o Seleccione Ver / Dividir verticalmente.
9.2. ADMINISTRACIÓN Y CONFIGURACIÓN DE SITIOS.
Dreamweaver CS6 le permite trabajar con una gran variedad de tipos de

archivos. El tipo de archivo principal con el que va a trabajar es el archivo
HTML. Los archivos HTML5 o archivos en lenguaje de formato de hipertexto—
incluyen un lenguaje basado en etiquetas que es el responsable de mostrar la
página Web a través del navegador. De forma predeterminada, Dreamweaver
guarda los archivos con la extensión .html.
A continuación se incluyen algunos de los tipos de archivos más comunes que

se utilizan en Dreamweaver CS6:
CSS: Los archivos de Hojas de estilos en cascada tienen la extensión .CSS. Se

utilizan para aplicar formato al contenido.
CSS3: Módulos que añaden nuevas funcionalidades a las definidas en CSS2,

de manera que se preservan las anteriores para mantener la compatibilidad.
HTML: HyperText Markup Language, hace referencia al lenguaje de marcado

para la elaboración de páginas web. Es un estándar que, en sus diferentes
versiones, define una estructura básica y un código para la definición de
contenido de una página web, como texto, imágenes, etc.

HTML 5: Establece una serie de nuevos elementos y atributos que reflejan el

uso típico de los sitios web modernos
GIF: Archivos de Formato de intercambio de gráficos, que tienen la extensión

.gif. El formato GIF es un formato gráfico popular en la Web para cómics,
logotipos, gráficos con zonas transparentes y animaciones. Los archivos GIF
contienen un máximo de 256 colores.
JPEG: Archivos de Grupo conjunto de expertos fotográficos (el nombre de la

organización que creó el formato) que tienen la extensión .jpg y suelen ser
fotografías o imágenes de tonalidades intensas. El formato JPEG es el más
indicado para las fotografías digitales o digitalizadas, imágenes que utilizan
texturas, imágenes con transiciones de gradiente de color y, en general,
cualquier imagen que requiera más de 256 colores.
XML: Archivos de Lenguaje de formato ampliable, que tienen la extensión .xml.

Contienen datos en formato original al que se puede aplicar formato mediante
el lenguaje XSL (Lenguaje de hoja de estilos ampliable, Extensible Stylesheet
Language).
XSL: Archivos de Lenguaje de hoja de estilos ampliable, que tienen la

extensión .xsl o .xslt. También se utilizan para aplicar estilo a los datos XML
que se van a mostrar en una página Web.
CFML: Archivos de Lenguaje de formato ColdFusion, que tienen la extensión

.cfm. Se utilizan para procesar páginas dinámicas.
PHP: Los archivos de Preprocesador de hipertexto tienen la extensión .php y

se utilizan para procesar páginas dinámicas.
Configuración de un sitio de Dreamweaver CS6.
En Dreamweaver, el término “sitio” se emplea para referirse a una ubicación de

almacenamiento local o remota de los documentos que pertenecen a un sitio
Web. Un sitio de Dreamweaver permite organizar y administrar todos los
documentos Web, cargar el sitio en un servidor Web, controlar y mantener
vínculos y administrar y compartir archivos. Para aprovechar al máximo las
funciones de Dreamweaver, debe definir un sitio.
Un sitio de Dreamweaver consta de un máximo de tres partes o carpetas,

según el entorno de desarrollo y el tipo de sitio Web que se desarrolle:
Carpeta raíz local: Almacena los archivos con los que está trabajando.
Dreamweaver se refiere a esta carpeta como el “sitio local”. Esta carpeta suele

encontrarse en el equipo local, pero también se puede encontrar en un servidor

de red.
Carpeta remota: Almacena los archivos para pruebas, producción,

colaboración, etc. Dreamweaver se refiere a esta carpeta como el “sitio remoto”
en el panel Archivos. En general, la carpeta remota suele colocarse en el
equipo donde se ejecuta el servidor Web. La carpeta remota incluye los
archivos a los que los usuarios acceden en Internet.
Las carpetas locales y remotas permiten transferir archivos entre el disco duro
local y el servidor Web, lo cual facilita la administración de los archivos en los
sitios de Dreamweaver. Se trabaja en archivos en la carpeta local y se publican
en la carpeta remota cuando se desea que otras personas los puedan ver.
Carpeta de servidor de prueba: La carpeta en la que Dreamweaver procesa

páginas dinámicas.
Aspectos básicos de la estructura de carpetas locales y remotas.

Cuando desee utilizar Dreamweaver CS6 para conectar con una carpeta
remota, deberá especificar la carpeta remota en la categoría Datos remotos del
cuadro de diálogo Definición del sitio. La carpeta remota que especifique
(también conocida como “directorio del servidor”) deberá corresponder a la
carpeta raíz local del sitio de Dreamweaver. (Lacarpeta raíz local es la carpeta
de nivel superior del sitio de Dreamweaver.) Las carpetas remotas, al igual que
las carpetas locales, pueden tener cualquier nombre, aunque los proveedores
de acceso a Internet suelen denominar las carpetas remotas de nivel superior
para cuentas de usuarios individuales public_html, pub_html o algo similar. Si
es usted el responsable de su propio servidor remoto y puede asignar a la
carpeta remota el nombre que desee, es recomendable que asigne el mismo
nombre a la carpeta raíz local y la carpeta remota.
Creación y Configuración de un Sitio Web.

Después de planificar la estructura del sitio, configure y defina un sitio en
Dreamweaver CS6. También deberá definir un sitio para editar un sitio Web
que no se ha creado en Dreamweaver CS6. Configurar un sitio de
Dreamweaver permite organizar todos los documentos asociados con un sitio
Web.
La carpeta raíz local es el directorio de trabajo del sitio de Dreamweaver CS6.

Esta carpeta puede encontrarse en el equipo local o en un servidor de red.
Si desea comenzar a editar archivos en su equipo sin publicarlos, configure

solamente una carpeta local y, más adelante, añada la información remota y de
prueba.

Puede utilizar Dreamweaver para editar un sitio Web existente en el disco local
o editar un sitio remoto, aunque no haya utilizado Dreamweaver para crear el
sitio original.
No necesita especificar una carpeta remota si la carpeta raíz local está en el

sistema que ejecuta el servidor Web. Esto implica que el servidor Web se
ejecuta en el equipo local.
Nombre del sitio: El nombre que aparece en el panel Archivos y en el cuadro

de diálogo Administrar sitios; no aparece en el navegador.
Carpeta del sitio local: El nombre de la carpeta del disco local en la que se
almacenan los archivos del sitio, las plantillas y los elementos de biblioteca.
Cree una carpeta en el disco duro o haga clic en el icono de carpeta para
localizar la carpeta. Cuando Dreamweaver resuelve vínculos relativos a la raíz
del sitio, toma como referencia esta carpeta.
Definir un Sitio Web.

Inicie Adobe Dreamweaver CS6, menú Sitio y dé clic en la opción Administrar
Sitios.
1. Dé clic en el menú Sitio / Nuevo sitio.

2. Aparecerá el cuadro de diálogo Configuración del sitio.
3. En el cuadro de texto Nombre del sitio, digite ejercicio2.

4. En el cuadro de texto Carpeta del sitio local, dé clic en el ícono de la carpeta
ubicada al lado derecho y ubique la carpeta situada en su ordenador, por
ejemplo: D:\ejercicio2.
5. Dé clic en Aceptar.
Una vez configurado el sitio el panel Archivos muestra la nueva carpeta raíz
local que corresponde al sitio actual “ejercicio2”. La lista de archivos de dicho
panel actúa como administrador de archivos, la cual nos permite copiar, pegar,
eliminar, mover y abrir archivos como si se tratara del explorador de Windows.

Categoría Servidores.
La categoría Servidores le permite especificar los servidores remoto y de
prueba.
El servidor remoto es donde se especifica la carpeta remota, en la que se

almacenarán los archivos para producción, colaboración, despliegue u otros
escenarios diversos. En general, la carpeta remota suele colocarse en el
equipo donde se ejecuta el servidor Web.
En el panel Archivos de Dreamweaver, la carpeta remota se denomina sitio

remoto. Al configurar una carpeta remota, debe seleccionar un método de
conexión para que Dreamweaver cargue y descargue archivos del servidor
Web.
Configuración de las opciones para conexiones FTP.

Utilice este parámetro si se conecta a su servidor Web a través de FTP.
1. Seleccione Sitio / Administrar sitios.

2. Haga doble clic en su sitio para configurarlo.
3. En la lista de Configuración del sitio, seleccione la categoría Servidores y
Seleccione un servidor existente y llene los datos de dicho servidor o
dirección FTP.
4. En el cuadro de texto Nombre de servidor, especifique un nombre para el
nuevo servidor. Puede elegir el nombre que desee.
5. Seleccione FTP en el menú emergente Conectar usando.
6. En el cuadro de texto Dirección FTP, introduzca la dirección del servidor FTP
donde se cargan los archivos del sitio Web.
La dirección FTP es la dirección de Internet completa de un sistema
informático, como ftp.mindspring.com. Introduzca la dirección completa sin
texto adicional. En particular, no debe añadir un nombre de protocolo delante
de la dirección.
Si no conoce la dirección FTP, consulte a su proveedor de servicios de
Internet.
7. En los cuadros de texto Nombre de usuario y Contraseña, introduzca el
nombre de usuario y la contraseña que se deben utilizar para conectar al
servidor FTP. El administrador del sistema de la empresa que aloje el sitio
deberá proporcionarle la dirección FTP, el nombre de usuario y la
contraseña. Nadie más tendrá acceso a esta información. Introduzca la
información exactamente como el administrador del sistema se la haya
proporcionado.
En la siguiente ilustración se muestra la pantalla Básicas de la categoría
Servidor con los campos de texto ya rellenos.

8. Haga clic en Prueba para comprobar la dirección FTP, el nombre de usuario

y la contraseña.
9. Dreamweaver guarda la contraseña de forma predeterminada. Desactive la
opción Guardar si prefiere que Dreamweaver le solicite la contraseña cada
vez que conecte con el servidor remoto.
10. En el cuadro de texto Directorio raíz, introduzca el directorio (la carpeta) del
servidor remoto donde se almacenan los documentos visibles para los
visitantes.
Si no está seguro de lo que debe especificar como directorio raíz, póngase
en contacto con el administrador del servidor o deje en blanco el cuadro de
texto. En algunos servidores, el directorio raíz es el directorio con el que se
conecta en primer lugar a través de FTP. Para averiguar si es así, conecte
con el servidor. Si en la vista Archivos remotos del panel Archivos aparece
una carpeta con un nombre del tipo public_html, www o su nombre de
conexión, probablemente ése sea el directorio que debe introducir en el
cuadro de texto Directorio raíz.
11. En el cuadro de texto URL Web, introduzca el URL del sitio Web (por
ejemplo, http://www.mysite.com). Dreamweaver utiliza el URL Web para
crear los vínculos relativos a la raíz del sitio y para comprobar los vínculos
cuando se utiliza el verificador de vínculos.
12. Expanda la sección Más opciones si aún necesita configurar más opciones.
13. Seleccione Utilizar FTP pasivo si la configuración del firewall requiere el
uso de FTP pasivo. El uso de FTP pasivo permite al software local
configurar la conexión FTP en lugar de solicitarlo al servidor remoto. Si no
sabe con seguridad si utiliza FTP pasivo, consúltelo con el administrador de
su sistema o pruebe a activar o desactivar la opción Utilizar FTP pasivo.
14. Seleccione Utilizar el modo de transferencia IPv6 si utiliza un servidor FTP
con capacidad IPv6. Con la implementación de la versión 6 del protocolo de
Internet (IPv6), EPRT y EPSV han sustituido a los comandos PORT y
PASV de FTP respectivamente. Por consiguiente, si intenta conectar con

un servidor FTP apto para IPv6, deberá utilizar los comandos pasivo
extendido (EPSV) y activo extendido (EPRT) en las conexiones de datos.
15. Seleccione Utilizar Proxy si desea especificar un host proxy o un puerto
proxy.
Para más información, haga clic en el vínculo para acceder al cuadro de
diálogo Preferencias y luego haga clic en el botón Ayuda de la categoría
Sitio del cuadro de diálogo Preferencias.
16. Haga clic en Guardar para cerrar la pantalla Básicas. Seguidamente, en la
categoría Servidores, especifique si el servidor que acaba de añadir o
editar es un servidor remoto, un servidor de prueba o ambas cosas.
9.3. VISUALIZACIÓN Y UTILIZACIÓN DE ARCHIVOS Y CARPETAS DESDE

EL PANEL ARCHIVOS.
Creación de documentos de Dreamweaver.

Dreamweaver ofrece un entorno flexible para trabajar con varios documentos
Web. Además de documentos HTML, podemos crear y abrir una gran variedad
de documentos basados en texto, archivos ColdFusion Markup Language
(CFML), ASP, JavaScript y hojas de estilos en cascada (CSS). También admite
archivos de código fuente, como Visual Basic, .NET, C# y Java. Dreamweaver
proporciona varias opciones para crear un documento nuevo. Puede crear
cualquiera de los tipos de documento siguientes:
o Un nuevo documento o plantilla en blanco.

o Un documento basado en uno de los diseños de página predefinidos que
vienen con Dreamweaver, incluidos más de 30 diseños de página basados
en CSS.
o Un documento basado en una de las plantillas existentes
Creación de una página basada en HTML.

Será necesario que cuente con un sitio local (“Ejercicio 2”) y que su carpeta
raíz contenga por ejemplo las subcarpetas: css, fuentes e imagnes.
1. Seleccione el menú Archivo y elija la opción Nuevo.

2. Elija HTML de la sección tipo de página y en tipo de documento
seleccione HTML, luego presione el botón Crear.
Cómo guardar un documento nuevo.
1. Seleccione el menú Archivo y elija Guardar.

2. En el cuadro de diálogo que aparece a continuación, vaya hasta la carpeta
en la que desea guardar el archivo, en este caso la carpeta “Ejercicio 2“, por
lo general usted debe visualizar la carpeta de su sitio local.
3. En el cuadro de texto Nombre de archivo, digite “index“ como nombre para
el archivo.

Evite emplear espacios y caracteres especiales en los nombres de archivos

y carpetas, de igual manera, no inicie los nombres de los archivos con
números. No utilice caracteres especiales (como é, ç o ¥) ni signos de
puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de
archivos que desee ubicar en un servidor remoto; muchos servidores
cambian estos caracteres durante la carga, lo que provoca que se rompan
los vínculos existentes con los archivos.
4. Dé clic en Guardar.
Abrir archivos en Dreamweaver.

Puede abrir una página Web existente desde el panel Archivos de
Dreamweaver CS6 o un documento basado en texto, aunque no se hayan
creado en Dreamweaver, y editarlos en la vista Diseño o la vista Código.
Puede abrir documentos de Microsoft Word guardado como HTML y utilizar el

comando Limpiar HTML de Word para eliminar las etiquetas de formato
sobrantes que Word inserta en los archivos HTML. También puede abrir
archivos de texto no HTML, como archivos JavaScript, archivos XML, hojas de
estilos CSS o archivos de texto guardados con procesadores de texto o
editores de texto.
Abrir un archivo.
1. Seleccione el menú Archivo y elija Abrir.

También puede utilizar el panel Archivos para
abrir los archivos.
2. Localice y seleccione el documento “index“.
3. Dé clic en Abrir.
El documento se abrirá en la ventana de

documento. Los archivos JavaScript, archivos de
texto y las hojas de estilos CSS se abren de forma
predeterminada en la vista Código.
Puede actualizar el documento mientras trabaja con Dreamweaver y luego

guardar los cambios en el archivo.
9.4. USO DE LA FUNCIÓN VISTA EN VIVO.
La vista en Vivo es una mejora de Dreamweaver. Nos ofrece una vista del
resultado final no editable. A diferencia de la vista Diseño, que nos permite
editar los elementos, esta vista nos permite interactuar con ellos, tal como lo
haríamos con el navegador.

La función de esta vista es la de ahorrarnos tiempo, al no tener que

comprobar que pequeños cambios se previsualizan correctamente en el
navegador.
No obstante, siempre hay que comprobar la página con los principales

navegadores del mercado que serán los que emplearán nuestros visitantes.
Algunos elementos se ven de forma muy distinta si los vemos en la vista de
diseño, en la vista en vivo o en el navegador. También es conveniente
comprobar la página con los distintos tamaños de pantalla, teléfono móvil,
tablet y PC.
Configurar los visores para pre visualización.
1. Haga clic en Vista previa/ Depurar en el navegador.

2. Haga clic en Editar lista de navegadores.
3. Borre los que tenga por defecto con el icono signo menos en
Navegadores.
4. Clic en el signo más para ver la venta Añadir navegador, escriba Internet
Explorer en el cuadro Nombre.
5. Busque la ubicación de Internet Explorer, haga clic en Examinar /
programas file x86 / carpeta Internet Explorer / clic en el icono
iexplore.exe
6. Repita el paso 4 para los demás navegadores como: Opera, Safari, Mozilla
y Crome.
7. El primer navegador será Firefox y el segundo recomendado Internet
Explorer, ya que todo lo que visualice en Firefox será visualizado sin
problema en Crome, Opera y Safari.
8. Acceda a Firefox, pulse F12 y para Internet Explorer Ctrl + F12.

MARCO TEÓRICO.
CICLO DE TRABAJO DE DREAMWEAVER PARA LA CREACIÓN DE

SITIOS WEB.
Se puede emplear varios métodos para crear un sitio Web; éste es uno de
ellos:
Planificación y configuración del sitio.
Determine la ubicación de los archivos y examine las necesidades del sitio, el

perfil de la audiencia y sus objetivos. Además, tenga en cuenta requisitos
técnicos como el acceso de los usuarios, las limitaciones del navegador, los
plug-ins o la descarga de archivos. Una vez que haya organizado la
información y determinado una estructura, podrá comenzar a crear el sitio.
Organización y administración de los archivos del sitio.
En el panel Archivos puede añadir, borrar y

cambiar el nombre de los archivos y carpetas
fácilmente con el fin de modificar la organización
según resulte necesario. Allí encontrará
numerosas herramientas que le ayudarán a
administrar el sitio, transferir archivos desde y
hacia un servidor remoto, configurar un proceso
de desprotección/protección que evite que se
sobrescriban archivos y sincronizar los archivos
de los sitios local y remoto.
El panel Activos permite organizar fácilmente

los activos de un sitio, que se pueden arrastrar
directamente desde el panel hasta un
documento de Dreamweaver. Puede utilizar
Dreamweaver para administrar diversos
aspectos de sus sitios de Adobe Contribute.
Diseño de las páginas Web.
Elija el diseño más apropiado, o combine las opciones de diseño de

Dreamweaver para definir el aspecto de su sitio. En la creación de su diseño
puede utilizar elementos PA, estilos de posición CSS o diseños CSS
predefinidos de Dreamweaver. Las herramientas de tabla le permiten diseñar
páginas rápidamente y, posteriormente, reorganizar la estructura de las
mismas. Para mostrar varios documentos de forma simultánea en un

navegador, pueden utilizarse marcos para diseñar los documentos. Por último,
puede crear páginas nuevas basadas en una plantilla de Dreamweaver y
actualizar su diseño de forma automática cuando cambie la plantilla.
Adición de contenido a las páginas.
Añada activos y elementos de diseño, como texto, imágenes, imágenes de

sustitución, mapas de imágenes, colores, películas, sonido, vínculos HTML,
menús de salto y mucho más. Puede utilizar funciones de creación de páginas
incrustadas para dichos elementos, como títulos y fondos, escribir directamente
en la página o importar contenido desde otros documentos. Dreamweaver
también proporciona comportamientos para llevar a cabo tareas en respuesta a
eventos específicos, como la validación de un formulario cuando el visitante
hace clic en el botón Enviar o abrir una segunda ventana del navegador cuando
la página principal ha terminado de cargarse. Por último, Dreamweaver incluye
herramientas para maximizar el rendimiento del sitio Web y para la
comprobación de las páginas, con objeto de garantizar su compatibilidad con
navegadores Web distintos.
Creación de páginas mediante la introducción manual de código.
Utilizar la codificación manual de páginas Web es uno de los métodos de

crear páginas. Dreamweaver ofrece sencillas herramientas de edición visual,
pero también incluye un entorno de codificación más sofisticado. Puede
utilizar el método que prefiera, o una combinación de ambos, para crear y
editar sus páginas.
Configuración de una aplicación Web para contenido dinámico.

Cada vez más existen muchos sitios Web que contienen páginas dinámicas
permitiendo a los visitantes ver información almacenada en bases de datos y
que suelen permitirles agregar y editar información. Para crear esas páginas,
debe configurar primero un servidor y una aplicación Web, crear o modificar un
sitio de Dreamweaver y conectarse a una base de datos.
Creación de páginas dinámicas.

Con Dreamweaver se pueden definir diversas fuentes de contenido dinámico,
incluidos juegos de registros extraídos de bases de datos, parámetros de
formularios y componentes JavaBeans. Para añadir el contenido dinámico a
una página, basta con arrastrarlo a ella. Puede establecer que los registros de
la página aparezcan de uno en uno o en grupos, mostrar varias páginas de
registros, añadir vínculos especiales para pasar de una página de registros a la
siguiente (o a la anterior) y crear contadores para que los usuarios puedan
llevar un control de los registros. Puede incorporar lógica de aplicaciones o
empresarial mediante tecnologías como Macromedia ColdFusion de Adobe y

servicios Web. Si necesita más flexibilidad, puede crear sus propios

comportamientos de servidor y formularios interactivos.
Comprobación y publicación.
La comprobación de las páginas es un proceso continuo que se lleva a cabo
durante todo el ciclo de desarrollo. Al final del ciclo, publicará el sitio en un
servidor. Muchos desarrolladores también programan operaciones de
mantenimiento periódico para asegurarse de que el sitio se mantiene
actualizado y operativo.
ANÁLISIS DE LA EMPRESA POR EL DISEÑADOR WEB.
El diseñador web es un creador y por lo tanto sus creaciones están en gran

medida inspiradas por su personalidad, estado de ánimo, etc. Pero podemos
seguir una serie de reglas generales que nos orienten.
a) Dependiendo del tipo de institución, por ejemplo sitios institucionales

(Fundaciones, ONG’s, Hospitales, etc.). Deberán especificar y hacer
hincapié en sus servicios, o actividades. O sea, una sección (divisible o no
en diferentes ítems) que describa con precisión, la utilidad de estos servicios
o actividades.
b) Sitios comerciales: Es imperativo que estos sitios tengan un catálogo de
productos. Completo, visualmente claro, y muy ordenado. Estos productos
pueden ser, sitios turísticos, paquetes de viajes u ofertas. De todos modos
estos deben ser esquematizados en forma de catálogo, sobre todo en lo
referido a lo que se ofrece.
También dependiendo del tipo de sitio comercial, deberá poseer un “carrito
de compras” on-line, que facilite la interactividad con sus usuarios/clientes.
c) Sitios de empresas de servicios: Como el servicio
es algo intangible, debe haber alguna manera en
que el usuario del sitio concretice algún aspecto
del servicio que se quiere contratar. Algunos sitios
le ahorran tiempo a sus usuarios mediante un
esquema variable de los ítems del servicio, que dé
como resultado la posibilidad de un presupuesto
aproximado.
Si hay algo que interesa más, que el hecho de que un usuario visite un sitio, es
que ese usuario vuelva. Por eso muchos sitios apuntan alguna de sus
iniciativas a lo que comúnmente llamamos “fidelización” del usuario.
Una de estas iniciativas puede pasar por la elaboración de un newsletter.

Estamos hablando de un sitio que renueve en parte o en todo, alguno de sus

contenidos periódicamente; y que además, la renovación de estos contenidos

sea de interés para los usuarios.
Cada mes, cada quince días, semanalmente o diariamente, el usuario recibirá

en su casilla de correo el resumen de las novedades del sitio, sin necesidad de
visitarlo nuevamente para enterarse de si las hay o no. Pero este resumen lo
llevará, inevitablemente, a volver al sitio y realizar un breve repaso de sus
contenidos, principalmente en las secciones donde estos se renuevan.
Cabe, sin embargo, recordar, que debe haber mucha disciplina y objetividad en
este tema. Si los contenidos no son lo suficientemente relevantes, o no se
mantiene la periodicidad prometida, el usuario formará en su mente una
connotación negativa respecto del sitio, al que asociará con contenido
irrelevante, o con poca seriedad en la entrega de la información.
Otra de las iniciativas que pueden llegar a resultar interesantes, son las
famosas “galerías”. Pero aquí debemos recordar que la pauta que prima al
presentar una galería está asociada más a lo estético que a lo conceptual.
Debe haber “algo” que valga la pena mostrar, ya sea por su belleza, o su
importancia, o por su llamativa novedad.
De nada le sirve, por ejemplo, a una fundación médica, una galería de

imágenes del lugar. Estas se pueden ir mostrando a medida que se
desarrollan los contenidos relacionados con cada servicio.
Lugares para eventos; lugares para alojamiento; lugares turísticos atractivos

por sus paisajes; restaurantes o locales nocturnos con gran ambiente, etc. Este
tipo de sitios tienen mucho para mostrar, y si es hecho con inteligencia visual y
buen gusto, marcarán la mente del usuario de una manera altamente positiva.
Otra iniciativa interesante puede llegar a ser la inclusión, dentro del sitio, de
una mini-interface para la preproducción de música acorde con el sitio. No es
una cuestión indispensable, pero si alguno de los contenidos amerita una visita
prolongada, puede ayudar tener a la mano pequeñas clips de sonidos que
acompañen esta visita sin molestar.
Animaciones de Flash: Son elementos con el que más se comete abusos

últimamente. Animaciones abundantes, en cantidad, en extensión, y en peso.
Sitios donde ni el mouse se queda quieto. Sitios en donde hay que esperar
para todos los contenidos, porque siempre hay un animación primero. Sitios en
donde la cantidad de contenido tarda mucho en cargar, porque es mucha, y la
han metido toda dentro de una animación de Flash, entre otras cosas.

No siempre hace falta Flash. El usuario busca cosas puntuales dentro de un

sitio. La medida del sitio se resuelve con la respuesta a la siguiente pregunta:
¿los contenidos que busca el usuario se encuentran claros, precisos, rápidos, y
completos?. Muchas cosas del resto del sitio serán superfluas si la estructura
no responde satisfactoriamente a esta pregunta. Y las animaciones de Flash
pueden ser geniales, exquisitas, deslumbrantes, inspiradoras, divertidas, y
exitosas, pero no indispensables.
Una animación pequeña y sobria, puede levantar visualmente la calidad de un

sitio si es desarrollada con inteligencia y capacidad de síntesis, y ubicada con
criterio visual certero.
Una gran animación, excelente y profesional, puede impresionar la primera vez;

pero la segunda puede llegar a molestar si está entre el usuario y lo que busca.
Texto, texto y más texto: Una característica que no posee el usuario habitual
de internet, es la de buen lector. Ni aun quienes somos buenos lectores en la
vida real, lo somos también en la web.
La web es un medio implacablemente sintético, rápido, fugaz; e impone sobre

el usuario la misma urgencia para encontrar lo que busca.
De nada sirve poner párrafos institucionales en un sitio de venta de productos.

Al usuario le interesa comprar, no la vida y milagros de la institución.
Una imagen por cada párrafo: Si el texto no es lo suficientemente claro,

ninguna imagen suplirá esa falta de claridad. No hace falta rellenar la falta de
sentido con imágenes, tampoco hace falta que las imágenes superabunden
acompañando a TODOS los contenidos, salvo, por supuesto, que el sentido de
los contenidos precise de manera necesaria un complemento visual.
Cuestionarios extensos: Son molestos, invasivos, y dan una fuerte

sensación de pérdida en el usuario. Si se necesita utilizar un formulario, que
sea breve y se acote a lo importante. Sino, nunca dará la información que el
dueño del sitio necesita.

Ejercicio 1
1. Configure un sitio Local en su equipo con la carpeta ejercicio2 ubicada

en su carpeta de trabajo, analice el contenido de las subcarpetas.
2. Configure un sitio Local en su equipo con la carpeta diagramación web
2 ubicada en su carpeta de trabajo, analice el contenido de las
subcarpetas.
3. Edite la lista de navegadores desde Dreamweaver CS6 para que el
navegador principal sea Google Crome y el secundario sea Internet
Explorer.
4. Explique el significado y función del término FTP, dirección FTP.
5. Investigue ¿Qué son las páginas web dinámicas?
6. Investigue ¿Qué es y qué función cumple un servidor de alojamiento de
páginas Web?

10
X. ESTILOS Y ETIQUETAS DIV.
Trabajando con Plantillas

Insertar etiquetas Div
Creando estilos CCS

capacidad.
 Trabajando con Plantillas

 Insertar etiquetas Div
 Creando estilos CCS

10.1. DOCUMENTO HTML BASADO EN PLANTILLA.
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta
que las páginas deben seguir un formato uniforme.
Esta es la forma más sencilla de tener páginas con una estructura basada en la
estructura de otras ya creadas previamente.
Las plantillas son páginas en la que van a estar basadas el resto de páginas
del sitio web, son editables y se puede manejar los estilos que son fuentes y
colores para nuestra Web. El objetivo de usar plantilla será agilizar el proceso
de creación de páginas Web.
Abrir, editar y guardar plantillas.

1. Cree un nuevo sitio ejercicio3, luego realice el siguiente procedimiento.
2. Menú archivo / Nuevo / página en blanco / HTML / Diseño: 2 columnas

flotantes, barra lateral a la izquierda, encabezado y pie / tipo de documento
HTML 1.0
3. Clic en botón crear.

4. Modifique los vínculos editándolos, escriba en ellos:
a. Inicio.
b. Servicio.
c. Instalaciones.
d. Contacto
5. Cambie el texto de los encabezados.
a. Adobe Dreamweaver CS6.
b. Usando Plantillas.
6. Cambie el color del encabezado, haga clic en Dividir de vistas.

7. Seleccione el área de encabezad, debe marcarse la selección con línea

amarilla, y en la vista código se seleccionará el código del encabezado.
8. Abra el panel Estilos CSS clic en el botón Actual, clic en background, doble
clic para abrirlo, observe los estilos predefinidos en la plantilla.
9. Cambie el color en Backgroun-color y escoja un color o escriba la
nomenclatura de un color sexagesimal #72D384, clic en Aceptar, observe
que cambio el color del Encabezado.
10. Haga clic en la vista Diseño.
Borrar contenido.
1. Elimine el contenido de la columna izquierda.
2. Proceda a eliminar el espacio restante.
3. Clic en la vista Dividir.
4. Dentro de la etiqueta, elimine el código perteneciente al párrafo
(<P> </p>) y luego de clic en el botón Actualizar en el panel Estilos
CSS.

5. Continúe con la edición para generar la siguiente vista.
6. Guarde la plantilla con el nombre index.html en el sitio ejercicio3 y proceda

a visualizarlo en el navegador.
10.2. INSERTAR ETIQUETAS DIV.
Las etiquetas servirán para organizar la información de la página. Para la

aplicación de etiquetas Div realizaremos nuestra propia plantilla:
1. Cree el sitio local ejercicio4.
2. Clic en Archivo / Nuevo / página HTML / diseño Ninguno.
3. Guarde la página con el nombre index.html en el sitio local ejercicio 4.
4. Habilite la barra Estándar, menú Ver / Barras de herramientas / Estándar.
5. Cree una hoja de estilos: Archivo / Nuevo / Tipo de página / CSS / clic en
botón Crear.
6. Guarde la hoja de estilos con el nombre Estilos.
7. Enlace la página Index.html a estilos,css , para esto haga clic en el botón
adjuntar hoja de estilo del panel Estilos CSS para que los estilos o reglas
que se van creando se guarden en dicha hoja.

8. Al presionar el botón Adjuntar hoja de estilos aparecerá la ventana

Vincular hoja de estilos externa, haga clic en Examinar y seleccione la
hoja de estilo estilos.css, presione el botón Aceptar.
9. Comience a crear la plantilla con la siguiente estructura:

a. Clic en el botón Común de la barra de herramientas.
b. Clic en el botón Insertar etiqueta Div de la barra común.
c. Coloque el nombre base en ID: / Acepte.
d. Aparece la primera etiqueta con forma de línea punteada con una

inscripción.
e. Dentro de ella insertará las demás etiquetas que servirán de contenedor

de los objetos y textos de la diagramación de la página Web.
f. Haga clic dentro de esta etiqueta, presione Enter para dejar un espacio.
g. Clic en el botón Insertar etiquetas Div, en la sección ID: escriba la
palabra cabecera.
h. Haga clic en el espacio inferior sin salir de base.
i. Inserte otra etiqueta div, con el nombre menu_horizontal.

j. La siguiente etiqueta se llamará contenedor, dentro de esta etiqueta,

ubíquese al final de la palabra contenedor y presione Enter, aquí
insertara 3 etiquetas más:
o Menú_vertical
o Contenido
o Publicidad
k. Dentro de la etiqueta base, inserte la última etiqueta que se llamará
pie_pagina.
Se sugiere utilizar nombres comunes para luego identificar cada una de las
etiquetas y reglas.
Estructura inicial del trabajo con etiquetas Div
Selección de la etiqueta base
10.3. ESTILOS CSS.
También llamadas reglas, puede crear una o varias reglas CSS para
automatizar la aplicación de formato a etiquetas HTML o rangos de texto
identificados mediante un atributo class o ID.

Los nombres de clase deben comenzar por un punto y pueden contener

cualquier combinación alfanumérica (por ejemplo .myhead1). Si no introduce el
punto inicial, Dreamweaver lo hará de forma automática.
Los ID deben comenzar por un signo de almohadilla (#) y pueden contener

cualquier combinación alfanumérica (por ejemplo #myID1). Si no introduce la
almohadilla inicial, Dreamweaver la introducirá de forma automática.
Del proyecto Web ejercicio4 abra el archivo index.html y con la estructura de

etiquetas Div genere el siguiente procedimiento.
1. Seleccione la etiqueta base haciendo clic en el borde de la etiqueta.

2. Cree una regla css haciendo clic el botón Nueva regla CSS del panel Estilos
CSS.
3. En la ventana Nueva regla CSS seleccione la ubicación de su regla. Por

defecto debe visualizarse ID, #base y en donde se va a definir la regla será
estilos.css, haga clic en Aceptar.
4. Aparece otra ventana con categorías como Tipo, fondo, Bloque, Cuadro,
Borde, Lista, Posición, Extensiones.
5. Defina los siguientes parámetros para dar otra dimensión a la base.

Cuadro
a. Width 1000 px
b. Height 900 px
6. De clic en Aceptar.

7. Seleccione el texto Colocar aquí el contenido para id “base” y elimínelo.
8. Ahora seleccione la etiqueta cabecera y cree una nueva regla para esta
etiqueta.
9. Defina los siguientes parámetros para dar otro color a la cabecera de color y
ubicación.
Fondo
a. Background-color: negro
Tipo
a. Color: blanco
Cuadro
a. Width 1000 px
10. Luego seleccione la etiqueta menú_horizontal y cree una nueva regla

para esta etiqueta de color y ubicación.
Fondo
a. Background-color: #09C
Cuadro
a. Width 1000 px
11. Luego seleccione la etiqueta contenedor y cree una nueva regla para esta
etiqueta de color y ubicación.
Fondo
a. Background-color: #3C3
Cuadro
a. Width 1000 px
b. Height 600 px
12. Seleccione Colocar aquí el contenido para id “contenedor” y presione la

tecla suprimir.
13. Ahora seleccione la etiqueta menú_vertical y cree una regla para esta
etiqueta de color y ubicación.
Fondo
a. Background-color: #666
Cuadro
a. Width 150 px
b. Height 600 px
c. Float left
14. Ahora seleccione la etiqueta contenido y cree una regla para esta etiqueta
de color y ubicación.
Fondo

a. Background-color: #CCC
Cuadro
a. Width 700 px
b. Height 600 px
c. Float left
15. Luego seleccione la etiqueta publicidad y cree una regla para esta
etiqueta, de color y ubicación.
Fondo
Cuadro
d. Width 150 px
e. Height 600 px
f. Float right
16. Por último seleccione la etiqueta pie de página y cree una regla para esta
etiqueta, de color y ubicación.
Fondo
Cuadro
a. Width 1000 px
Bloque
a. Text-align center
Tipo
a. Color #FFF
17. Guarde cambios.
18. Pruebe la página en el navegador.
19. Centre la plantilla en toda la ventana, para esto realice lo siguiente:

a. Haga doble clic en la etiqueta base del panel Estilos CSS.
b. Categoría Cuadro y active la casilla de verificación Igual para todo.
Right: auto
Left: auto

20. Guarde cambios.

21. Pruebe en el navegador.
22. Para eliminar ciertos espacios o márgenes en blanco que no utilizará, edite
el estilo #base, categoría Cuadro y en sección Height escoja auto, Acepte.
23. Si persistiera espacio en blanco haga clic en la vista Dividir, (el cursor debe
estar en el área que desea eliminar) y elimine la línea <P> </p>.
24. Actualice la página.

25. Guarde los cambios.
27. Ajuste el margen de la página, en el panel Propiedades haga clic en el
botón Propiedades de la página, categoría Apariencia(CSS).
En el área márgenes ajuste de esta manera:

Margen Superior: 0
Margen Inferior: 0
28. Acepte.
29. Guarde todo.

Portafolio Web.
El portafolio web para el diseño de un sitio web en Dreamwaver será la reunión

de todos los recursos para la construcción de dicho sitio. Esto requiere una
serie de pasos que se transformará en un proyecto web. Por ejemplo tenemos:
La investigación y la fluidez de información, evaluar y utilizar la

información.
o Planificar estrategias al orientar la investigación.

o Localizar, organizar, analizar, evaluar, sintetizar y utilizar la información ética
de una variedad de las fuentes y los medios de comunicación.
o Evaluar y seleccionar las fuentes de información.
Utilización de imágenes optimizadas.
La optimización es importante para gráficos web. El éxito de sitios web

permitirá a los visitantes descargar páginas web rápidamente. El éxito del sitio
también depende de la calidad de la imagen. Aunque un archivo pequeño es
importante, los diseñadores equilibran el tamaño de archivo con una calidad de
imagen.
o Optimización de las imágenes como archivos GIF y JPEG.

o Crear un archivo de imagen pequeño; y al mismo tiempo mantener la calidad
de imagen deseada.
o Guardar y exportar archivos de imagen.
Creación del logotipo.
o Introducir la totalidad del proyecto: La creación de un logotipo como

elemento de identificación de la empresa, para una organización ficticia
como una empresa de diseño o sin fines de lucro, o para un grupo de
estudios.

o Discutir cómo estos logotipos son marcas adecuadas para las

organizaciones que representan.
o Discutir cómo estos diseños llegan al público objetivo de la organización y
cumplir con los objetivos de la empresa.
Objetivos de la Comunicación Web.
o Identificar el propósito, audiencia y necesidades de la audiencia para un sitio

web.
o Realizar el diseño de página, conceptos de diseño y principios.
o Realizar guiones gráficos, y estructuras para crear páginas web y un mapa
del sitio (índice de sitio) que mantienen la jerarquía de página web prevista.
Diseño de un sitio Web del Cliente.
Diseño Visual: Tratamiento gráfico de los elementos de la interfaz (el “look” del
“look & feel”). Tratamiento visual de los elementos de texto y gráficos en la
página y componentes de navegación.
Diseño de la Interfaz: Diseño de los elementos de la interfaz para facilitar la

interacción del usuario con la funcionalidad.
Diseño de la Información: Para facilitar el entendimiento.
Diseño de la Navegación: Diseño de elementos de interfaz para facilitar el

movimiento de los usuarios a través de la arquitectura de la información.
Diseño de la Interacción: Desarrollo del flujo de las aplicaciones para facilitar

las tareas del usuario, definiendo cómo el usuario interactúa con la
funcionalidad del sitio.
Arquitectura de la Información: El diseño estructural del espacio de

información para facilitar el acceso intuitivo al contenido.
Especificaciones Funcionales: “Set de herramientas”: Descripciones

detalladas de las funcionalidades que el sitio debe incluir para satisfacer las
necesidades del usuario.
Requerimientos de Contenido: Definición de los elementos de contenido

requeridos para satisfacer las necesidades de usuario.
Necesidades de Usuario: Objetivos para el sitio externamente derivados,

identificadas a través de la investigación de los
usuarios,etno/tecno/psicográficos, etc.

Objetivos del Sitio: De negocios, creativos, u otros generadas de manera

interna para el sitio.
Creación de un sitio Web de Cliente.
Los usuarios de documentos Web no sólo miran la información, sino que

interactúan con ella. La interfaz gráfica del usuario (GUI) de una computadora
incluye metáforas de interacción, imágenes y conceptos que se utilizan para
transmitir función y significado a la pantalla de la computadora. Las
características visuales detalladas en cada componente de la interfaz gráfica, y
la sucesión funcional de interacciones, elaboran un producto final que tendrá
una apariencia y sensación características de las páginas Web y de los
vínculos entre las relaciones del hipertexto. El propósito del diseño gráfico y la
“firma” visual de los gráficos incluidos en una página Web no es tan sólo
“animar” la página sino que son una parte integral de la experiencia del usuario.
En los documentos interactivos es imposible mantener separado el diseño
gráfico de los asuntos relativos al diseño de la interfaz.
Haga que cada una de sus páginas Web sea un documento completo.
Existe un aspecto crucial en el que las páginas de la Internet son diferentes de

aquellas en libros y otros documentos: Los vínculos en un hipertexto permiten
al usuario visitar una página web sin necesidad de ninguna introducción. Es por
eso que las páginas Web necesitan ser más completas que las páginas de un
libro convencional. Lo que esto significa, por lo general, es que los
encabezados y las notas al pie de las páginas Web deben ser más informativas
y completas que aquellas que aparecen en una página impresa pues aunque
sería absurdo repetir la información sobre los derechos de autor, el nombre del
autor del libro y la fecha de su publicación en cada una de las páginas de un
libro es, sin embargo, necesario que dicha información aparezca en cada
página Web puesto que es posible que esa página sea la única que el usuario
visite de todas las que conforman tu sitio web.
¿Quién?
¿Quién está hablando? La pregunta es tan básica que es común que los
autores que escriben para la Web piensen que dicha información es obvia e
innecesaria, olvidando así la pieza más fundamental de información que
cualquier lector necesita saber para asegurarse del origen de un documento:
¿Quién me está diciendo esto? Ya sea que la página sea de un autor individual
o de una organización, siempre dile a tu lector quién escribió la página Web.
¿Qué?

Todos los documentos necesitan títulos claros, que capturen la atención del
lector. Sin embargo, por varias razones particulares, este elemento editorial
básico es especialmente importante en la Web. El título de un documento es a
menudo lo primero que cualquier navegante de documentos de Internet ve al
aparecer la página. En páginas donde hay muchos gráficos, el título puede ser
la única cosa que los usuarios vean durante varios segundos, hasta que los
gráficos terminen de descargarse en la ventana de su navegador. Además, el
título de la página se convierte en el texto que el navegador agregará a los
favoritos si el usuario decide añadir la página a su archivo de direcciones URL.
Cuándo.
La vigencia de un documento es un elemento importante al estimar su valor.

Prácticamente todos los documentos impresos en papel, tales como periódicos,
revistas y correspondencia están fechados, lo que nos lleva a dar por sentada
la información sobre la edad de un documento. Por eso, ponga la fecha en
todas sus páginas Web y cámbielas cada vez que actualices la información.
Este aspecto es especialmente importante cuando se trata de documentos en
línea que son largos o complejos y que son actualizados con regularidad, pero
cuyas diferencias pueden no ser notadas a simple vista por el visitante
ocasional. La información de una empresa, los manuales para el personal, la
información relativa a productos y cualquier otro documento técnico presentado
en páginas Web deberían siempre indicar la fecha en que fueron actualizados.
Dónde.
La Internet es un lugar “extraño” que contiene una increíble cantidad de

información, pero que muy pocas veces aclara la localización física del origen
de un documento. Haz clic en un vínculo de una página Web y podrías
conectarte a un servidor en Sídney, Australia, Chicago, EEUU o prácticamente
cualquier sitio en el mundo donde haya Internet. A no ser que seas un experto
en analizar direcciones web (URLs) puede resultarte muy difícil averiguar
dónde se ha originado una página web.
Una manera sencilla de informar al usuario dónde se origina una página es

poner un vínculo a “home” (tu página de inicio) en, todas tus páginas
principales.
Recuerda incluir de manera consistente el título, el autor, la organización a la

que pertenece el autor, la fecha de actualización y por lo menos un vínculo a tu
página de inicio (home) en todas las páginas que componen tu sitio web.
Incluye estos elementos básicos y habrás recorrido el 90% del camino para
brindar a tus lectores una interfaz Web de fácil comprensión.

Diseño pensando en el usuario.
La interfaz gráfica del usuario fue diseñada para darle a la gente control directo
sobre sus computadoras personales. Los usuarios se han acostumbrado a
contar con un cierto nivel de sofisticación en todos los diseños, incluyendo el de
páginas Web. El objetivo es satisfacer las necesidades de todos tus usuarios
potenciales, adaptando la tecnología Web a fin de cubrir sus expectativas, sin
esperar nunca que el lector se conforme con una interfaz que pone obstáculos
innecesarios en su camino.
Es aquí donde resulta absolutamente crucial investigar las necesidades y datos

demográficos de tu público objetivo. Diseñar para una persona desconocida,
cuyas necesidades no comprendes, es imposible. Bosqueja varios guiones
para diferentes tipos de usuarios que buscan información en tu sitio Web. ¿El
diseño de tu página de inicio facilitará o complicará las cosas para un usuario
experimentado que busca una pieza específica de información? ¿Tu menú
complejo con sólo texto intimidará a un usuario principiante? La mejor manera
de saber si tus diseños les dan a los usuarios lo que necesitan es probarlos y
solicitar sus opiniones.
Hojas de estilo.
El contenido de tu sitio Web puede ser aún más accesible si utilizas Hojas de
Estilo en Cascada (Cascading Style Sheets - CSS) para aplicar formato a tus
páginas. Si utilizas hojas de estilo en tus páginas, los usuarios podrán
personalizar fácilmente el formato de los documentos Web. Una página
diseñada utilizando texto rojo sobre un fondo verde representa un problema
para los usuarios daltónicos (que no pueden ver el rojo y el verde): es posible
que el contraste entre el texto y el fondo no sea suficiente para permitirles leer
el texto. Si aplicas los colores mediante hojas de estilo, estos usuarios pueden
usar sus navegadores para aplicar un estilo propio en vez del tuyo. Si diseñas
tus páginas con hojas de estilo, el usuario puede transformar el contenido Web
a un formato que resuelva sus necesidades especiales de accesibilidad.

1. Configure un sitio Local en su equipo con la carpeta ejercicio4 ubicada

en su carpeta de trabajo, analice el contenido de los archivos .html
2. Cree un nuevo sitio local y genere un archivo index.html con diferente
diagramación y nuevos estilos.
3. Diseñe la siguiente diagramación utilizando etiquetas Div y Estilos en
Dreamweaver CS6, puede utilizar otros colores.

11
XI. AGREGAR VÍNCULOS Y NAVEGACIÓN A LAS PÁGINAS
WEB.
Cabecera e imagen de fondo

Spry menú
Menú vertical y links
Hipervínculos y etiquetas meta.

capacidad.
 Cabecera e imagen de fondo

 Spry menú
 Menú vertical y links
 Hipervínculos y etiquetas meta.

11.1. CABECERA E IMAGEN DE FONDO.

Luego de haber creado las etiquetas Div y las reglas CSS de nuestro sitio
procederemos a utilizar imágenes y fondos que nos servirán de cabecera y
fondo de nuestra interfaz, contamos con imágenes generadas en algún
programa de diseño gráfico o puedes ser bajadas de internet, debe tener en el
tamaño de nuestra web así como también de los tamaños de nuestras
etiquetas Div, esto será para que coincidan en la etiquetas y no haya un
desfase en la maquetación.
Para esta tarea usted encontrará imágenes que deberá utilizar en las
ubicaciones indicadas.
Cree un sitio local con la carpeta ejercicio5 de su material de trabajo y a

continuación siga los siguientes pasos.
1. Abra el archivo index.html de su sitio local y en la vista diseño elimine la
línea de texto referida a “cabecera” para insertar aquí la imagen.
2. Clic en la pestaña Común, clic en el botón imagen, ubique en la ventana
Seleccionar origen de imagen la ruta donde tiene almacenada la imagen y
acepte.
3. En la siguiente ventana Atributos de accesibilidad de la etiqueta imagen

en la sección Texto alternativo digite: header y Acepte.
4. Observe la imagen insertada que encaja perfectamente ya que tiene un
ancho de 1000 px que es el que tiene la página, debe saber también que el
alteo de la imagen es de 150 px.
5. Actualice y guarde los cambios.
6. Para colocar un color de fondo o imagen de fondo a la página Web.
7. Clic a Propiedades de la página.

8. Clic en la categoría Apariencia CSS, opción Color de fondo para escoger

algún color de fondo.
9. Para colocar una imagen de fondo que ocupe el tamaño de la ventana,

prepárela en Fireworks CSS.
10. Clic en Propiedades de página elimine el color del paso anterior y haga
clic en el botón Examinar, busque la ruta donde esta almacenada la
imagen con el nombre fondo.png, visualice la vista previa donde figura las
dimensiones de la imagen.
11. Clic en el botón Aceptar.

12. En la sección Repetir escoja repeat.
13. Clic en el botón Aceptar.
14. Guarde los cambios y actualice la página.
15. Observe en el navegador.

11.2. SPRY MENÚ.
Dreamweaver CS6 incorpora múltiples utilidades para crear páginas web sin
necesidad de programar. Estas herramientas permiten, entre otras cosas,
insertar tablas, formularios, textos, widgets, contenidos multimedia
o transiciones css de manera rápida y sencilla.
La barra de menú desplegable Spry puede ser tanto vertical como horizontal.
1. Para agregar un Spry debe situar el cursor en la zona donde quiere insertar
el menú Spry, ajústelo en la parte superior, junto al logotipo de la web. La
barra lateral izquierda también puede ser una buena opción.
2. Configure el número de elementos que mostrará y
sus vínculos correspondientes. Sitúe el cursor sobre el menú y haga clic en
el recuadro azul superior.
3. Observe ahora el panel propiedades de Dreamweaver, donde podrá añadir o
eliminar elementos mediante los símbolos + -. También tiene el campo
texto, que permite escribir los títulos de cada opción, y
el campo vínculos, que permite crear enlaces entre las diferentes páginas
del sitio.
Editar las propiedades del menú.

Una vez creada la barra de menú desplegable completamente funcional con la
ayuda de Spry, puede personalizar algunas propiedades de la barra: fuentes,
colores, tamaños.
Este sistema ha creado un conjunto de archivos auxiliares con extensiones css

y jsp, que se encuentran en una carpeta llamada SpryAssets. Puede editar su
diseño desde el panel Estilo CSS de Dreamweaver, o desde el propio archivo
css que ha generado Spry.
Abra el sitio web ejercicio 5 y en el archivo index.html realice el siguiente

procedimiento.
1. Abra el estilo menú horizontal para editar el estilo.

2. En la categoría Cuadro aumente alto Height a 40px.
3. Elimine el texto Colocar aquí el contenido para id "menu_horizontal".
4. Haga clic dentro de esta etiqueta y dibuje una etiqueta Div pa marcando un
recuadro dentro del tamaño observado, Barra Diseño / botón dibujar
Etiqueta Div Pa.
5. Dentro de esta etiqueta Div Pa insertaremos el Spry menú, clic en menú
Insertar / Spry / barra de menú Spry, escoja el modelo y Acepte.

6. Observe que su menú se insertó.
7. Proceda a cambiar los textos, eliminando los ítems de la Barra de

Propiedades de Spry con los signos + y -.
8. Para agregar un enlace a un menú, selecciónelo y en la barra de
propiedades (HTML) escriba la página con la que quiere vincular.
9. Debe quedar como la siguiente imagen.
10. Ajuste la ubicación y tamaño si lo necesita para que se ubique al centro de

la etiqueta Div.
11. Cambie el color del menú Spry, desde el panel Archivos abra el estilo
SpryMenuBarhorizontal.css, y en las líneas de código Background-
color cambie el número sexagesimal: #EEE por #999966.


11.3. MENÚ VERTICAL.
El menú vertical en ocasiones puede ser el menú principal, siga el siguiente

procedimiento para su creación en el sitio web ejercicio5.
1. Haga clic en la vista dividir, ubíquese dentro del menú vertical, seleccione la
línea de efecto y elimínela.

2. Presione la tecla Enter 3 veces para dejar un espacio.

3. Inserte desde esta ubicación una Etiqueta Div, en la sección ID escriba el
nombre menu_header.
4. Agregue la siguiente regla:

Fondo
a. Background-color: #07634A
Bloque
a. Text-align center
Tipo
a. Color #FFF
b. Font-weight bold
c. Font-size 14
d. Font-Family: Arial, Helvetica, sans-serif
5. En vista diseño borre el texto y escriba Menú Principal.
6. Vuelva a la vista Dividir, ubíquese dentro del menú principal como en la
siguiente imagen:
7. Inserte aquí otra etiqueta Div, se llamará menu_enlaces.

8. De la regla:
Tipo
a. Color #FFF
a. Font-weight bold
b. Font-size 14
c. Font-Family: Arial, Helvetica, sans-serif
Cuadro
a. Desmarque la casilla de verificación Igualar para todo
b. Right 10px
c. Left 10px
Borde
a. Marque la casilla de verificación Igualar para todo de Style
b. Top solid
c. Bottom solid
d. Marque la casilla de verificación Igualar para todo de Width y
coloque 1 en la primera y tercera caja de texto de Width
e. Color, desmarque la casilla de verificación Igualar para todo y
escoja los colores: #999966 para el primer y tercer selector.
9. Borre el texto y escriba los enlaces.
10. Copie las demás etiquetas, seleccione la línea que se acaba de crear y
cópiela las veces que la necesite dependiendo de la cantidad de menú.
11. Ahora cambie el color de fondo del menu_vertical del panel Estilos CSS
por el color #999966 de la categoría Fondo con la finalidad que su diseño
sea mucho más amigable.
13. Pruebe en el navegador

14. Agregue un vínculo a cada menú, no es necesario que la página este

creada; seleccione cada uno de ellos y en el panel Propiedades (HTML)
escriba el nombre de la página .html. la primera si debe llamarse index.o
página principal.
15. Cambie el color del texto del menú, para esto clic en Propiedades de la
página, Categoría Vinculos CSS, secciónes:
a. Color de vínculo #FFF
b. Vínculos visitados #FFF
c. Vínculos de sustitución #693
d. Vínculos activos #FFF
e. Estilo subrayado Mostrar subrayado solamente al situar cursor
encima.
16. Guarde todo y pruebe en el navegador.
MARCO TEÓRICO.
ETIQUETAS META.
Las etiquetas meta suministran información sobre la página web, esta

información puede ser sobre el autor del documento, la descripción de la
página, palabras claves o keywords, toda esta información es analizada por la
mayoría de los motores de búsqueda o arañas.

La etiqueta meta se inserta dentro de la etiqueta head, por lo tanto, la

etiqueta meta no afectará la presentación de la página.
Según el W3C, la etiqueta meta es:

“meta data es información para ser interpretada en el ámbito de máquina”
Usted puede ingresar meta mediante código HTML; o también generarlas al

realizar alguna acción en la vista diseño, desde el menú Insertar, sección
HTML, etiquetas Head puede encontrar la acción Meta.
FASES DE UN PROYECTO INTERACTIVO.
A continuación realizaremos el proceso de toma de decisiones implicado en la

puesta en marcha de proyectos de comunicación que utilicen medios digitales,
y pretende ser a la vez una herramienta útil para la evaluación y rediseño de
esos mismos proyectos.
Este proceso tiene por objeto servir de pauta de trabajo durante las tres fases
básicas de todo proyecto de comunicación interactiva: el planteamiento inicial,
el desarrollo de la producción y la evaluación de los resultados.
Planteamiento | Desarrollo | Evaluación.

Para las tres fases se han tenido en cuenta los elementos básicos sobre los
que deben tomarse decisiones. Cada uno de ellos es definido, y analizado de
dos formas: como recomendaciones y a modo de preguntas.
1. Planteamiento.
Objetivo: Propósito o finalidad del proyecto. La formulación de objetivos claros,
concisos y alcanzables ayuda a enfocar el desarrollo del proyecto y aporta
criterios básicos para su evaluación.

Usuarios: Grupo objetivo (target) al que se orienta el proyecto. El perfil de

usuarios previsto constituye el eje del proyecto y es el baremo para calibrar
todas las decisiones de producción.
Medios: Soportes digitales empleados para implementar el proyecto.
Contenidos: Información actualizada y de calidad, valor agregado del

proyecto. En los proyectos basados en información, la calidad del contenido
editorial es la clave del éxito.
Servicios: Prestaciones de utilidad para los usuarios, valor agregado del

proyecto. En los proyectos basados en servicios a usuarios finales, la utilidad y
accesibilidad de los servicios ofertados es la clave del éxito.
Herramientas: Soluciones de software, y eventualmente de hardware, sobre

las que se realiza la implementación técnica del proyecto. La estabilidad
técnica y la transparencia de uso, tanto para proveedores de contenido o
servicios, como para usuarios finales, son criterios básicos para la definición de
herramientas.
Competencia: Proveedores alternativos de contenidos y/o servicios similares

en el mismo mercado.
Estrategia: Articulación del proyecto con el modelo de negocio del cliente y con
sus otros medios. Un proyecto de comunicación digital bien concebido puede
alterar la estrategia de medios y, en algunos casos, hasta el modelo de negocio
del cliente.
Calendario: Plan de trabajo para el desarrollo del proyecto. La planificación del

proyecto debería incluir pruebas alfa de funcionalidad, pruebas beta con
usuarios tipo y evaluación de usabilidad de la primera versión.
2. DESARROLLO.
2.1. Gestión de contenidos.

Producción: Elaboración de contenidos originales e integración de contenidos
producidos por terceros. Identificar las fuentes primarias internas y externas a
la organización constituye el primer paso en la producción de los contenidos.
Formatos: Modos de tratamiento de la información: texto, audio, vídeo,
imágenes y animaciones. Las decisiones acerca de uso de formatos repercuten
directamente sobre los requerimientos de almacenamiento y ancho de banda.

Actualización: Frecuencia con la que se renuevan los contenidos editoriales

del proyecto. En proyectos online, la actualización de contenidos es
consustancial a la naturaleza del medio.
2.2. Diseño de navegación.

Estructura del sitio: Arquitectura de la información, hipertexto del proyecto. El
mapa de nodos y enlaces, debidamente codificados, es una herramienta básica
para el desarrollo del proyecto.
Enlaces: Articulación entre los nodos del proyecto y con sitios externos. Las
decisiones acerca de enlaces internos y externos determinan la experiencia del
usuario con el interactivo.
Recursos de navegación: Medios a disposición del

usuario para explorar una página. El criterio que rige
la incorporación de recursos de navegación es
facilitar la tarea al usuario.
Interactividad: Grado en el que el usuario puede

intervenir en el proceso de comunicación.
Personalización, publicación y participación son las
claves de la interacción desde el punto de vista de
los usuarios.
2.3. Diseño de interfaz.

Imagen corporativa: Representación de la identidad visual del cliente. Es
conveniente el empleo de una guía de estilo que defina todos los aspectos
determinantes de la identidad visual del cliente.
Colores y fuentes: Decisiones acerca de la paleta de color y la tipografía

empleadas. La legibilidad suele ser uno de los principales criterios que rigen la
selección de colores y fuentes.
Imágenes: Fotografías, ilustraciones o gráficos utilizados en los contenidos y

en los controles de navegación.
Composición: Disposición de los elementos visuales en la interfaz. La

composición determina la apariencia estética de la aplicación y facilita la
interpretación de los elementos de la interfaz.
Controles de navegación: Representación gráfica de los recursos de
navegación con los que interactúa el usuario. La eficacia de los controles de
navegación radica en su legibilidad, sencillez, expresividad y facilidad para ser
reconocidos y recordados.

2.4. Producción técnica.

Programación: Implementación del proyecto sobre la solución de software
escogida El uso de software propietario (código cerrado) o software libre
(código abierto) tiene un alcance económico, técnico y cultural de gran
importancia.
Dominios: Direcciones URL en proyectos online. La reserva de dominios es

una decisión trascendente cuando se desarrolla un proyecto online.Un buen
nombre de dominio puede constituir la base de la identidad del cliente en el
mundo digital.
Alojamiento: En proyectos online, se refiere al servicio de hospedaje (hosting)

del sitio. La gestión del alojamiento requiere definir las necesidades en cuanto
a volumen de almacenamiento, volumen de tráfico y ancho de banda,
estadísticas, gestión de bases de datos y otros servicios como correo
electrónico, foros, etc.
Seguridad: Medidas a exigir al proveedor de alojamiento para salvaguardar el

acceso al dominio y ficheros del cliente. Entre las medidas de seguridad
básicas debe incluirse la previsión de cortafuegos (firewalls), antivirus y gestión
de copias de seguridad (backups).
Mantenimiento: Conservación de la funcionalidad del sitio, sus ficheros,

enlaces y bases de datos.El mantenimiento técnico, la renovación de
contenidos y el rediseño gráfico constituyen el trípode de un sitio web
actualizado.
1. Agregue un segundo menú vertical debajo de MENÚ PRINCIPAL, que

contenga las siguiente información:
CATEGORÍAS
a. Instrumentos
b. Fotos
c. Foros
d. Colaboradores
2. Investigue sobre las etiquetas meta y mencione las acciones que
pueden realizar para la mejora de su página Web.

12
XII. ELABORAR PÁGINA WEB CON CONTENIDO.
Insertar pie de página y banner

Títulos, párrafos, imagen y video
Insertar tablas y galería de imágenes
capacidad.
 Insertar Banner y pie de página

 Títulos, párrafos, imagen y video
 Insertar tablas y galería de imágenes

12.1. INSERTAR PIE DE PÁGINA Y BANNER.
Cree un sitio local para ejercicio 6 de su carpeta de trabajo.

Siga el siguiente procedimiento
1. Clic en el botón dividir para la página index.html

2. Seleccione el texto del contenido y elimínelo.
3. Presione la tecla Enter 3 veces para dejar espacio y dentro de esta etiqueta
contenido inserte una nueva etiqueta.
4. A esta etiqueta póngale el nombre mi_contenido
5. Presione el botón Aceptar

6. Cree una regla para esta etiqueta con los siguientes características:
Cuadro
a. Marque la casilla de verificación Igualar para todo
b. Right 10px
c. Top 10px
d. Left 10px
e. Bottom 10px
7. Debe quedar como la imagen, conforme vamos insertando el contenido la

etiqueta se ira ajustando.

Insertar Pie de página.
1. Clic en la sección pie de página de la página index.html

2. Clic en la vista Dividir
3. Dentro de la etiqueta de página seleccione le siguiente texto y elimínelo.
4. Presione la tecla Enter 1 vez y escriba lo siguiente:
Derechos Reservados © 2014 <br />

www.paratujardin.com
5. Actualice y pruebe en el navegador.
6. El código &copy será para escribir el signo de Copyright y el código

<br /> será para realizar salto de página.
7. Actualice y pruebe en el navegador.
Insertar Banner.
1. Para insertar un banner en la etiqueta publicidad realice los siguientes

procedimientos:
a. El banner que insertará se ubica en la carpeta de trabajo con nombre
banner.swf realizado en Flash CS6.
b. Elimine el texto: Colocar aquí el contenido para id "publicidad"
c. Clic en el botón media, de la ficha Común, seleccione SWF, ubique la
ruta donde se almacena el banner.swf.
d. Clic en Aceptar
e. Dreamweaver pregunta si desea copiar el archivo en la carpeta raíz,
presione “SI”.

f. Luego presione el botón Guardar, se visualizará otra ventana de Atributos

de accesibilidad de la etiqueta de objeto, escriba en Título: banner.
g. Presione el botón Aceptar

h. Guarde cambios y acepte la Copia de archivos dependientes
i. Visualice en el navegador o pruebe en vista en vivo.

12.2. TÍTULOS, PÁRRAFOS, IMÁGENES Y VIDEOS.
Creada la plantilla personalizada procederemos a crear las demás página, siga

el siguiente procedimiento.
1. Clic derecho en la página index.html / Edición / Duplicar

2. Aparece la copia de la página index.html, selecciónela y presione la tecla
F2 para cambiarle el nombre a Nosotros.html.
3. Realice el procedimiento anterior para crear las páginas Tienda.html y
Contacto.html.
4. Aparecerá la ventana Actualizar archivos de clic en la opción No
actualizar.
Agregar contenido a Index.html (página principal).
1. Borre el texto “Colocar aquí el contenido para id "mi_contenido" y escriba el

encabezado Bienvenidos.
2. Selecciónelo y de la barra de propiedades sección Formato escoja
Encabezado 1.
3. Cree una nueva regla, el tipo selector será una Clase, seleccione la opción:
Clase (puede ser aplicable a cualquier elemento HTML).
4. De un nombre descriptivo, escriba títulos en la sección Elija o introduzca
un nombre para un selector.
5. Acepte.
6. En la categoría:
a. Tipo cambie el color marrón y de Font –family seleccione la fuente
Courier New.
b. Bloque cambie Text-align center
7. Acepte.
8. Clic en la sección Clase de la barra de propiedades y escoja títulos, que es
el que usted creó.
9. Presione Enter y proceda a escribir un párrafo de 5 líneas.
10. Seleccione el párrafo que acaba de ingresar, Clic en Nueva regla CSS, el
tipo selector será clase y dele el nombre párrafo.
11. Acepte.
12. En la categoría:
a. Tipo cambie el color marrón y de Font –family seleccione la fuente
Palatino Linotype, en tamaño escoja 16.
b. Bloque text-align - justify
13. Acepte.
14. Seleccione nuevamente el párrafo y en el panel de propiedades escoja de
la sección Clase Párrafos.
15. Puede escribir los párrafos que desee y darle la clase párrafos.

Insertar una imagen de sustitución.
1. Ubíquese en el punto donde desea insertar una imagen.

2. Clic en la ficha Común / icono imagen / imagen de sustitución
3. Se abre la ventana Insertar imagen de sustitución, en el hay que

seleccionar la ruta de la imagen 1 (jardinería1.png – jardinería 2.png) y de
la imagen 2; que para esta ocasión deberá estar en la carpeta imágenes de
su sitio web local.
4. Debe recordar que las imágenes serán optimizadas en Fireworks tanto en

color como en tamaño antes de insertarlas en Dreamweaver CS6.
5. Ahora alinee la imagen haciendo clic derecho sobre la imagen alternativa
alinear opción Izquierda. De esta manera el texto rodeará la imagen.
6. Edite la regla Formato para dar separación de la imagen y el texto, desde la

sección Cuadro con los parámetros de la siguiente imagen.

7. Observe el resultado.
Video.
Ubíquese en un punto para insertar el video, genere un espacio apropiado para

el video.
Dibuje una etiqueta div, selecciónela desde la pestaña Diseño. Con esta
herramienta puede ubicar cualquier elemento que desee.
Dibuje un rectángulo con esta herramienta, luego haga clic dentro de la

etiqueta, vaya a la pestaña Común clic en el botón Media, escoja la alternativa
.FLV que es la extensión de video que acepta Dreamweaver.
Desde la ventana Insertar FLV seleccione el archivo de la carpeta local, haga

clic en el botón detectar tamaño, observe que abarca pixeles de alto y ancho,
luego busque un tipo de control, puede escoger también un tipo de control para
su video dentro de la lista Aspecto.

De clic en Aceptar y en propiedades puede modificar su tamaño.
Puede mover la etiqueta div para posicionar bien el objeto, ya que esta es una
ventaja de etiqueta div.
Guarde los cambios, actualice la página y visualice el video.
12.3. GALERÍA DE IMÁGENES.
Duplique la página index.html luego cambie el nombre por tienda.html para

agregar en esta página la galería de imágenes que será basada en tablas.
Escribir el siguiente encabezado: Galería de Imágenes y siga los siguientes

pasos:
1. Seleccione la pestaña Común y de clic en el icono Tabla.

2. Inserte tabla: 2 filas 3 columnas.
3. Ancho tabla 80 / grosor de borde 1.

En su carpeta de trabajo encontrará la carpeta imágenes con 6 imágenes

optimizadas, quiere decir del mismo tamaño y resolución.
Agregue a cada celda una imagen, si desea dar cambios de tamaño a las
imágenes podrá realizarlo mediante el panel de propiedades.
Una vez insertadas las seis imágenes observará que la tabla se autoajusta.
Luego seleccione la tabla haciendo clic en el borde de esta y en el cuadro de

propiedades hacer clic en <table>, después haga clic en la opción Centro de la
sección Alinear.
Vemos que la tabla queda centrada en el área de trabajo, guarde los cambios y
pruebe en el navegador.
Ahora enlazará cada una de las imágenes a ellas mismas para que cuando
haga clic en el navegador se visualice el tamaño real.

Expanda la carpeta de imágenes del panel Archivos, y desde la barra de

propiedades señalamos el vínculo al archivo de destino asta cada imagen o
escriba la ruta de cada imagen en la sección vínculo de la barra de
Propiedades.
Guarde cambios y actualice la página.
Visualice la pequeña mano que indica que hay un vínculo, haga clic y
observará la imagen en su dimensión real.
ACTIVOS.
Puede utilizar Dreamweaver para realizar un seguimiento y obtener vistas

previas de activos almacenados en el sitio, como imágenes, películas, colores,
scripts y vínculos. Además, puede arrastrar un activo para insertarlo
directamente en una página del documento actual.

Los activos pueden obtenerse de distintas

fuentes. Por ejemplo, puede crear activos en
una aplicación como Adobe Fireworks o
Adobe Flash, se los puede proporcionar un
compañero, los puede copiar de un CD de
ilustraciones o copiarlos de un sitio Web de
gráficos.
Dreamweaver también proporciona acceso a

dos tipos de activos especiales: las
bibliotecas y las plantillas. Ambos son
activos vinculados: al editar un elemento de
biblioteca o una plantilla, Dreamweaver
actualiza todos los documentos que lo
utilizan. Los elementos de biblioteca suelen
representar pequeños activos de diseño,
como el logotipo o el copyright de un sitio.
Para controlar áreas de diseño de mayor
tamaño, utilice una plantilla.
Elementos de biblioteca.
Una biblioteca es un archivo especial de Dreamweaver que contiene un
conjunto de activos individuales o copias de activos que puede colocar en las
páginas Web. Los activos de una biblioteca se denominan elementos de
biblioteca. Entre los elementos que puede almacenar en una biblioteca se
encuentran imágenes, tablas, sonidos y archivos creados con Adobe Flash.
Puede actualizar automáticamente todas las páginas que utilizan un elemento

de biblioteca cada vez que modifique el elemento.
Puede crear un elemento de biblioteca a partir de cualquier elemento de la

sección body de un documento, incluyendo texto, tablas, formularios, applets
de Java, plug-ins, elementos ActiveX, barras de navegación e imágenes.
En el caso de elementos vinculados como imágenes, la biblioteca solamente

almacena una referencia al elemento. El archivo original debe permanecer en
la ubicación especificada para que el elemento de biblioteca funcione
correctamente.
Si el elemento de biblioteca contiene vínculos, es posible que éstos no

funcionen en el sitio nuevo. Además, las imágenes de un elemento de
biblioteca no se copian en el sitio nuevo.

Cuando se utiliza un elemento de biblioteca, Dreamweaver inserta en la página

Web un vínculo con éste en lugar del elemento de biblioteca propiamente
dicho. Es decir, Dreamweaver inserta una copia del código fuente HTML para
dicho elemento en el documento y añade un comentario HTML que contiene
una referencia al elemento externo original. Esta referencia externa es la que
hace posible la actualización automática.
Cuando se crea un elemento de biblioteca con un comportamiento de

Dreamweaver adjunto, Dreamweaver copia el elemento y su manejador de
eventos (el atributo que especifica el evento que desencadena la acción, como,
por ejemplo, onClick, onLoad o onMouseOver, y la acción que se debe llamar
cuando se produce el evento) en el archivo de elemento de biblioteca.
Dreamweaver no copia en el elemento de biblioteca las funciones JavaScript
asociadas. Cuando se inserta un elemento de biblioteca en un documento,
Dreamweaver inserta automáticamente las funciones JavaScript
correspondientes en la sección head de ese documento.
INICIO DE UN EDITOR EXTERNO DE ARCHIVOS MULTIMEDIA.
Puede iniciar un editor externo desde Dreamweaver para editar la mayoría de

los archivos multimedia. También es posible especificar el editor que
Dreamweaver debe iniciar para editar el archivo.
Asegúrese de que el tipo de archivo esté asociado a un editor de su sistema.
Para averiguar qué editor está asociado a cada tipo de archivo, seleccione
Edición / Preferencias en Dreamweaver y elija Tipos de archivo/editores de la
lista Categoría. Haga clic en la extensión de archivo de la columna Extensiones
para ver el editor o (editores) asociado en la columna Editores. Puede cambiar
el editor asociado a un determinado tipo de archivo.
Haga doble clic en el archivo multimedia del panel Archivos para abrirlo en el
editor externo.
El editor que se inicia al hacer doble clic en el archivo del panel Archivos se
denomina editor principal. Si hace doble clic en un archivo de imagen, por

ejemplo, Dreamweaver ejecutará el archivo en el editor de imágenes externo

principal, como Adobe Fireworks.
Especificación del editor que se iniciará desde Dreamweaver.
Puede especificar el editor que utilizará Dreamweaver para editar cada tipo de
archivo y añadir o eliminar los tipos de archivo reconocidos por Dreamweaver.
Especificación explícita de los editores externos que deben iniciarse para un
tipo de archivo determinado
Seleccione Edición / Preferencias y elija Tipos de archivo/editores de la lista

Categoría.
Las extensiones de nombres de archivo, como .gif, .wav y .mpg, aparecen a la

izquierda, bajo Extensiones. Los editores asociados a una extensión
seleccionada figuran en la parte derecha, bajo Editores.
Elija la extensión del tipo de archivo en la lista Extensiones y siga uno de estos
procedimientos:
Para asociar un nuevo editor al tipo de archivo, haga clic en el botón de signo
más (+) situado sobre la lista Editores y seleccione las opciones deseadas en
el cuadro de diálogo que aparece.
Para convertir un editor en el editor principal de un tipo de archivo determinado

(es decir, en el editor que se abrirá al hacer doble clic en el tipo archivo en el
panel Archivos), seleccione el editor en la lista Editores y haga clic en Convertir
en principal.
Para anular la asociación de un editor con un tipo de archivo, seleccione el

editor en la lista Editores y haga clic en el botón de signo menos (-) situado
sobre la lista Editores.
Eliminación de un tipo de archivo.
Seleccione el tipo de archivo en la lista Extensiones y haga clic en el botón de

signo menos (-) situada sobre dicha lista.
FLASH VIDEO.
Flash Video (FLV) es un formato contenedor propietario usado para transmitir

video por Internet usando Adobe Flash Player (anteriormente conocido
como Macromedia Flash Player), desde la versión 6 a la 10. Los contenidos
FLV pueden ser incrustados dentro de archivos SWF. Entre los sitios más

notables que utilizan el formato FLV se encuentran YouTube, Google

Video, Reuters.com, Yahoo! Video y MySpace.
Flash Video puede ser visto en la mayoría de los sistemas operativos, mediante
Adobe Flash Player, el plugin extensamente disponible para navegadores web,
o de otros programas de terceros como MPlayer, VLC media player, o cualquier
reproductor que use filtros DirectShow (tales como Media Player
Classic, Windows Media Player, y Windows Media Center) cuando el
filtro ffdshow está instalado.
Los archivos FLV contienen bit streams de video que son una variante del
estándar H.263, bajo el nombre de Sorenson Spark. Flash Player 8 y las
nuevas versiones soportan la reproducción de video On2 TrueMotion VP6. On2
VP6 puede proveer más alta calidad visual que Sorenson Spark, especialmente
cuando se usa un bit rate menor. Por otro lado es computacionalmente más
complejo y por lo tanto puede tener problemas al utilizarse en sistemas con
configuraciones antiguas.
Actualmente existen muchos reproductores capaces de reproducir el formato

FLV. Entre ellos se incluyen:
• Flash Video Player

• FLV Player
• BitComet FLV Player
• GOM Player
• K-Lite Codec Pack
• MPlayer
• Perian
• Kmplayer
• Kaffeine
• RealPlayer
• VLC media player

• Xine
• Winamp
• SWF & FLV Player
• JetAudio
• Ashampoo Clipfinder (www.ashampoo.com)
• Cualquier reproductor que utilice DirectShow con ffdshow
Los archivos FLV pueden ser distribuidos en varias diferentes maneras:

Como un archivo.FLV autónomo. Aunque los archivos FLV son normalmente
distribuidos usando Flash Player como control, el mismo archivo.FLV es
completamente funcional y puede ser reproducido o convertido a otros
formatos.
Incrustados en un archivo SWF usando la herramienta de autoría de Flash

(soportada en Flash Player 6 y superiores). El archivo entero debe ser
transferido antes de que la reproducción pueda comenzar. Cambiar el video
requiere reconstruir el SWF.
Descarga progresiva vía HTTP (soportada en Flash Player 7 y superiores).

Este método usa ActionScript para incluir un archivo alojado externamente, en
el lado del cliente para su reproducción. La descarga progresiva tiene varias
ventajas, incluyendo el buffer de datos, uso de servidores HTTP genéricos, y la
habilidad de reutilizar un solo reproductor en SWF para múltiples fuentes FLV.
Flash Player 8 incluye soporte para accesos aleatorios dentro de archivos de
video usando la funcionalidad de descarga parcial del HTTP, algunas veces
referido como streaming. Sin embargo, a diferencia del streaming usando
RTMP, el "streaming" HTTP no soporta transmisiones en tiempo real. El
streaming vía HTTP requiere un reproductor personalizado y la inyección de
metadatos específicos del FLV conteniendo la posición exacta de inicio en
bytes y el código de tiempo (timecode) de cada cuadro clave (keyframe).
Usando esta información específica, un reproductor FLV personalizado puede
solicitar cualquier parte del archivo FLV empezando en un cuadro específico.
Así es como ocurre en Google Video, que soporta descargas progresivas y
puede buscar cualquier parte del video antes de que el buffering se complete.
YouTube, si bien en sus principios no ofrecía dicha funcionalidad, ahora
también lo hace.

1. Cree un banner publicitario en Flash CS6 relacionado a su página web y

ubíquelo debajo del menú lateral izquierdo de la página nosotros.html.
2. Investigue la forma de convertir formatos de video .avi, mov u otros
formatos en formatos .flv.
3. ¿Qué formatos de video puede bajar desde Youtube?
4. Busque 6 fotografías (relacionadas a su web) y optimícelas en Fireworks
CS6 para agregar una galería de imágenes en una nueva página
llamada galería.html.
Las imágenes deberán ser de 200 px x 200 px y 72 de resolución.

13
XIII. CONECTARSE CON LA WEB.
Formulario de contenido
Elaboración de propuesta de página Web.

capacidad.
 Insertar Banner y pie de página

 Títulos, párrafos, imagen y video
 Insertar tablas y galería de imágenes

13.1. FORMULARIO DE CONTENIDO.
CREE Un sitio local para ejercicio 7 de su carpeta de trabajo. Siga el siguiente

procedimiento
Realice el siguiente procedimiento para crear un formulario dentro de la página

contacto.html
1. Escriba el título de la página: “Escríbenos un e-mail” aplíquele un formato

2. Clic en la pestaña formularios haga clic en el botón formulario, dentro de él
se encuentran todas las entradas para el formulario.
3. Seleccione la primera herramienta de la ficha formulario y dibuje un
rectángulo dentro del área de trabajo, esta será el contenedor del formulario.
4. Haga clic dentro de ella y presione varias veces Enter hasta que el
formulario abarque el tamaño de la página.
5. Luego haga clic en el borde del formulario y en las propiedades el formulario

sección id de formulario escriba: formcontacto.
6. Seleccione el tipo de Acción en el panel de propiedades, por ejemplo:
mailto:direccion@dominio.com, en la sección Método seleccione GET.
7. Luego inserte las entradas del formulario:

• Escriba Asunto: y a continuación inserte un campo de texto,
selecciónelo y en el ancho de las propiedades digite 45 y en número
máximo de caracteres Car.max 45.
• Póngale de nombre “subject” al campo de texto en el panel de
propiedades, presione Enter.

• Ahora escriba Escriba mensaje:, inserte un área de texto con el nombre

“mensaje”, selecciónelo y cambie las propiedades Ancho 45, línea num
7, en val inicia escriba: Comentario…, este es el mensaje que aparecerá
cuando cargue la página, en campo de texto del panel de propiedades
escriba “body”
• Inserte los botones que ejercerán una acción al formulario.

• Ubíquese en un punto debajo del área de texto y haga clic en el icono
botón de la ficha Formularios, con nombre ID “enviar” el tipo de acción
que va a ejercer este botón será “enviar formularios” que viene de
forma predeterminada en Dreamweaver CS6.
• Inserte el siguiente botón en Id y de nombre escriba “restablecer”
observe la imagen.
• Cambie sus propiedades: en valor “Restablecer” y en el tipo de acción

será “restablecer formularios”.

• Guarde los cambios y pruebe el formulario en el navegador.
Personalizar el formulario.
Seleccione el campo de texto, cree una nueva regla, que será Tipo clase con
nombre subject, luego acepte.
• En la categoría tipo cambie el color al texto.

• En la categoría fondo cambie el color Background-color.
• En la categoría borde Style solid, Width 1, y color.

Seleccione el campo de texto y desde el panel de propiedades sección Clase

seleccione Subjet, observe que el objeto de formulario cambia a los colores y
diseño que usted escogió.
Puede continuar creando nueva clase para el área de texto para dar un diseño
a sus formularios como tamaño, tipo de fuente etc.
MARCO TEORICO.
ACERCA DE LOS FORMULARIOS WEB.
Cuando un visitante introduce información en un formulario Web visualizado en

un navegador Web y hace clic en el botón de envío, la información se transfiere
al servidor, donde será procesada por una aplicación o un script del lado del
servidor. El servidor responde devolviendo la información procesada al usuario
(o cliente) o bien realizando alguna otra acción basada en el contenido del
formulario.
Puede crear formularios que envíen datos a la mayoría de servidores de

aplicaciones, entre ellos PHP, ASP y ColdFusion. Si utiliza ColdFusion, también
podrá añadir a los formularios controles de formulario específicos de
ColdFusion.
Nota: También puede enviar datos de formulario directamente a un destinatario

de correo electrónico.
Objetos de formulario.
En Dreamweaver, los tipos de entrada de los formularios se denominan objetos
de formulario. Los objetos de formulario son mecanismos que permiten a los

usuarios introducir datos. Puede añadir a un formulario los siguientes objetos

de formulario:
Campos de texto.
Aceptan cualquier valor alfanumérico. El texto se puede visualizar como una
sola línea, como varias líneas y como un campo de contraseña en el que el
texto introducido se sustituye por asteriscos o viñetas para ocultar el texto a
otras personas que puedan estar mirándolo.
Las contraseñas y el resto de datos que se envían a un servidor mediante

campos de contraseña no están cifrados. Los datos transferidos pueden ser
interceptados y leídos como texto alfanumérico. Por esta razón, debe facilitar
siempre el cifrado de los datos que desea que permanezcan seguros.
Campos ocultos.
Permiten almacenar información introducida por el usuario, como un nombre,
una dirección de correo electrónico o una preferencia de visualización, y
utilizarla la próxima vez que el usuario visite el sitio.
Botones.
Realizan acciones cuando se hace clic en ellos. Puede añadir una etiqueta o un
nombre personalizado a un botón, o bien usar una de las etiquetas
predefinidas, “Enviar” o “Restablecer”. Utilice un botón para enviar datos de
formulario al servidor o para restablecer el formulario. También se pueden
asignar otras tareas de proceso definidas en un script. Por ejemplo, el botón
puede calcular el coste total de elementos seleccionados, basándose en los
valores asignados.
Casillas de verificación.
Admiten múltiples respuestas en un solo grupo de opciones. Un usuario puede
seleccionar tantas acciones como sean necesarias.
Botones de opción.
Representan opciones que se excluyen mutuamente. Cuando se selecciona un
botón de un grupo de botones de opción, se desactivan todos los demás
botones del grupo (un grupo está formado por dos o más botones que
comparten el mismo nombre).
Lista/menú.
Muestra valores de opciones en una lista de desplazamiento que permite a los
usuarios seleccionar varias opciones. La opción Lista muestra los valores de
las opciones en un menú que permite a los usuarios seleccionar una sola
opción. Utilice los menús si dispone de una cantidad de espacio limitada pero
necesita mostrar muchos elementos, o bien para controlar valores devueltos al

servidor. A diferencia de los campos de texto, en los que el usuario puede

escribir todo lo que desea, incluso datos no válidos, usted establece los valores
exactos que debe devolver un menú.
Nota: Un menú emergente de un formulario HTML no es igual que un menú

emergente gráfico. Para información sobre cómo crear, editar, mostrar y ocultar
un menú emergente gráfico, consulte el vínculo situado al final de esta sección.
Menús de salto.
Listas de navegación o menús emergentes que permiten insertar un menú en el
que cada opción se vincula a un documento o archivo.
Campos de archivo.
Permiten al usuario examinar los archivos de su ordenador y cargarlos como
datos de un formulario.
Campos de imagen.
Permiten insertar una imagen en un formulario. Utilice los campos de imagen
para crear botones gráficos, como Enviar o Restablecer. El uso de una imagen
para llevar a cabo tareas distintas del envío de datos requiere adjuntar un
comportamiento al objeto de formulario.
HTML5.
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión

importante del lenguaje básico de la World Wide Web, HTML. HTML5
especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html),
la variante conocida como HTML5 y una variante XHTML conocida como
sintaxis XHTML5 que deberá ser servida como XML).
El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso
típico de los sitios web modernos. Algunos de ellos son técnicamente similares
a las etiquetas <div> y<span>, pero tienen un significado semántico, como por
ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros
elementos proporcionan nuevas funcionalidades a través de una interfaz
estandarizada, como los elementos <audio> y <video>. Mejora el
elemento <canvas>, capaz de renderizar elementos 3D en los navegadores
más importantes (Mozilla, Chrome, Opera, Safari e IE).
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo

elementos puramente de presentación, como <font> y <center>, cuyos efectos
son manejados por Hojas de estilo en cascada. También hay un renovado

énfasis en la importancia del scripting DOM para el comportamiento de la web.

2.0
Ejemplos de código HTML5.
Código HTML5 para reproducir audio sin la necesidad de plugins.

Para video es algo similar.
<!DOCTYPE HTML>
<html>
<head>
<title>fuente de múltiples elementos</title>
</head>
<body>
<audio id="audioTestElem" autobuffer controls >
<source src="test.m4a">
<source src="test.ogg" type="audio/ogg; codecs=vorbis">
<source src="url">
no audio for you
</audio>
</body>
</html>
Ejemplo de Consulta SQL a una Base de Datos en el Navegador.

// CREAR BBDD
function prepareDatabase(ready, error) {
return openDatabase('documents', '1.0', 'Offline document

storage', 5*1024*1024, function (db) {
db.changeVersion('', '1.0', function (t) {
t.executeSql('CREATE TABLE docids (id, name)');
}, error);
});
}
// CONSULTAR BBDD
function showDocCount(db, span) {
db.readTransaction(function (t) {
t.executeSql('SELECT COUNT(*) AS c FROM docids', [], function (t, r) {
span.textContent = r.rows[0].c;
}, function (t, e) {
// couldn't read database
span.textContent = '(unknown: ' + e.message + ')';
});
});
}

prepareDatabase(function(db) {
// got database
var span = document.getElementById('doc-count');
showDocCount(db, span);
}, function (e) {
// error getting database
alert(e.message);
});
// Ejemplo de SELECT con parámetros

db.readTransaction(function (t) {
t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t,
data) {
report(data.rows[0].title, data.rows[0].author);
});
});
Cree un banner publicitario en Flash CS6 relacionado a su página web y

ubíquelo debajo del menú lateral izquierdo de la página nosotros.html.
1. Investigue y analice páginas web con Dreamweaver CS6.

2. Mencione otras plataformas en donde se pueda diseñar páginas web.
3. Elabore una página web en Dreamweaver CS6 orientada al rubro de
informática y redes, que cuente con 4 menús verticales y horizontales
4. Busque los recursos en internet (texto, video e imágenes) y genere un
banner publicitario referente al tema.

Inspiron 14 3458 Laptop Service Manual Es MX

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Inspiron 14 3458 Laptop Service Manual Es MX

Caricato da

Copyright:

Formati disponibili

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

II. ELABORAR DISEÑOS DE INTERFACE WEB UTILIZANDO OBJETOS

III. ELABORAR PROTOTIPOS WEB EMPLEANDO OBJETOS DE TEXTO, FILTROS,

IV. RECONOCER LA IMPORTANCIA DE FLASH PARA LA GENERACIÓN Y DISEÑO

V. ELABORAR SÍMBOLOS E INSTANCIAS PARA COLOCAR EN LA ESCENA DE

VI. GENERAR DIVERSOS TIPOS DE MOVIMIENTOS. ...................................................... 125

VII.ELABORAR ANIMACIONES INCLUYENDO SONIDOS Y VIDEOS. ....................... 149

VIII.ELABORAR ANIMACIONES INCLUYENDO ACCIONES. ......................................... 164

IX. RECONOCER LA IMPORTANCIA DE DREAMWEAVER PARA LA GENERACIÓN,

X. ESTILOS Y ETIQUETAS DIV. ................................................................................................ 196

XI. AGREGAR VÍNCULOS Y NAVEGACIÓN A LAS PÁGINAS WEB. ............................ 212

XII.ELABORAR PÁGINA WEB CON CONTENIDO. ............................................................. 225

XIII.CONECTARSE CON LA WEB. ............................................................................................ 241

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 5

En esta tarea trataremos las siguientes operaciones:

Reconocer las herramientas básicas de Fireworks.

 Computadora con microprocesadores Core 2 Duo o de mayor capacidad.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 6

1.1. RECONOCER LAS HERRAMIENTAS BÁSICAS DE FIREWORKS.

Adobe Fireworks CS6, es una exclusiva herramienta de edición de imágenes

Para producir imágenes de calidad para la web, se

La integración global es la clave de la eficiencia de Adobe Master Collection

El Botón Inicio , luego escribir en el cuadro de texto Fireworks CS6, se

De igual manera podrá ingresar al programa mediante el ícono de acceso

Página de Inicio de Fireworks CS6.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 7

La página de inicio le ofrece un acceso rápido a las nuevas funciones,

El espacio de Trabajo de Fireworks.

La pantalla inicial de Fireworks CS6, similar a las aplicaciones de Windows

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 8

Área de dibujo o lienzo, en esta área se creará todos los diseños en

Apertura de archivos en Fireworks CS6.

En Fireworks CS6 es fácil abrir y editar gráficos vectoriales y de mapa de bits.

1. Diríjase al menú archivo y seleccione la opción Abrir.

2. En el cuadro de diálogo Abrir, seleccione el archivo y dé clic en Abrir.

El cuadro de diálogo Abrir tiene varias opciones:

Buscar en, se puede abrir el cuadro de lista dando clic en el o también en la

Lista de archivos, en este cuadro se muestran los archivos contenidos en la

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 9

aparece en la lista con su respectivo nombre y precedido del icono de

Nombre, en este cuadro de texto se muestra el nombre de archivo que se ha

Abrir como “Sin título”, esta casilla de verificación se activará si se desea

Abrir como Animación, esta casilla de verificación la activamos cuando

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 10

siempre, independiente al tipo de vista que este seleccionado en el menú ver

Creación de nuevos archivos en Fireworks CS6.

Al crear un nuevo archivo o documento en Adobe Fireworks CS6, se genera un

También se puede exportar o guardar imágenes en muchos otros formatos

Para crear un gráfico web en Fireworks CS6, primero es preciso configurar un

Crear un archivo nuevo.

Nos dirigimos al menú Archivo y damos un clic sobre la opción nuevo.

Se abre un cuadro de diálogo Nuevo documento.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 11

Resolución, este cuadro de texto ingresamos la resolución que va a tener

Color del lienzo, en el cuadro de grupo color de lienzo podemos seleccionar

Ventajas de crear un archivo PNG.

El archivo de origen PNG siempre se puede modificar, es posible seguir

En el archivo PNG es posible dividir imágenes complejas en porciones y

Visualización y navegación por el documento.

Podemos controlar el aumento o reducción del zoom en el documento, el

Utilización de las fichas del documento.

Cuando el documento activo está maximizado, podemos elegir fácilmente

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 12