Está en la página 1de 177

Colección G UÍAS P RÁCTICAS

t o s d e D i s e ñ o w e b
Fundamen

Flash CS6
1
Flash CS6 N° 1 - Fundamentos de Diseño web
Flash CS6 N° 2 - Animación y Efectos para la Web
Flash CS6
Flash CS6N°
- Animación y Efectos
3 - Programación Web con Action Script
y Animación
Flash CS6
Flash CS6N°
- Programación con ActionWeb
4 - Proyecto: Publicación Sctipt
Flash CS6 - Publicación de Proyectos

ltimedia
Mu
D
C
ye
Inclu
EDITORIAL
Colección G UÍAS P RÁCTICAS

a m e n t o s d e Dis e ñ o We b
Fund
Flash CS6
Guía Práctica Adobe Flash CS6 Fundamentos de Diseño Web
Autor: Denis Rodriguez García

© Derecho de autor reservado

© Derecho de edición, arte gráfico y diagramación reservados


Empresa Editora Macro E.I.R.L.

Edición a cargo de:


Empresa Editora Macro E.I.R.L.
Av. Paseo de la República N° 5613 - Miraflores
Lima - Perú

(511) 748-0560

ventas@editorialmacro.com
http://www.editorialmacro.com

Primera edición: Octubre 2012


Primera reimpresión: Mayo 2014

Impresión
Talleres Gráficos de la Empresa Editora Macro E.I.R.L.
Jr. San Agustín 612-624 - Surquillo
Lima - Perú

ISBN Nº 978-612-304-086-4
Hecho el Depósito Legal en la Biblioteca Nacional del Perú Nº 2014-06953

Prohibida la reproducción parcial o total, por cualquier medio o método de este


libro sin previa autorización de la Empresa Editora Macro E.I.R.L.

EDITORIAL
Introducción

Actualmente las empresas necesitan difundir y consolidar su imagen hacia su mercado.


Adobe Flash CS6 le ofrece todos los elementos, para facilitarle la producción de proyectos
visuales o audiovisuales que necesite. Actualmente, la World Wide Web constituye, un
entorno autónomo de trabajo con un nivel de complejidad y un entramado de peculiaridades
tan extenso como el de otros entornos relacionados con el diseño o la informática. Esta
complejidad ha desembocada en una nueva disciplina, el diseño Web, que requiere de
profesionales capaces de generar estructuras de contenido que se muestren de forma eficaz
en la Web.
Mediante esta edición, la primera de cuatro títulos se pretende, crear un perfil de profesional
capaz de organizar, crear y tomar decisiones en la definición y ejecución de proyectos Web,
donde predomine la creatividad del diseñador. No podemos olvidarnos de dar una hábil y ágil
respuesta a las exigencias que impone el mercado.
El perfil de dichos profesionales debería abarcar toda una serie de conocimientos, no
únicamente específicos de la Web en internet en general, sino también relativos a áreas
como el diseño gráfico, la multimedia, la programación o la creación de diagramas y guiones.
La disciplina que se ha fijado Flash como columna vertebral es la Animación Web, es decir,
aquella que está orientada principalmente a las animaciones de gran impacto, a la creación
de contenido tanto textual y de imagen, como multimedia y a la puesta en marcha de los
mecanismos de programación y organización necesarios para conseguir un resultado que
cumpla ampliamente su función comunicativa, divulgativa y que, además, lo haga de forma
eficaz, tanto por su morfología visual, como por su agilidad de representación en pantalla y
otros periféricos.
Índice
Índice Índice Índice
Índice
Índice
Índice
Índice

Sesión 1: CONCEPTOS BÁSICOS

1.1. Lo nuevo de la versión Adobe Flash CS6 ................................................................... 9


1.2. Principios generales de diseño en la web .................................................................. 10
1.2.1. Páginas estáticas y dinámicas con Flash .........................................................................10
1.3. El nivel de inclusión de Flash en las páginas .............................................................. 11
1.4. Clases de páginas....................................................................................................... 11
1.4.1. Las páginas personales ...................................................................................................11
1.4.2. Las páginas informativas de texto y animación ..............................................................12
1.4.3. Páginas informativas con animación y sonido ................................................................12
1.4.4. Páginas para B2B ............................................................................................................12
1.4.5. Las páginas E-Commerce................................................................................................12
1.4.6. Las páginas de Juego ......................................................................................................13
1.5. Consejos prácticos sobre el diseño ............................................................................ 13
1.5.1. La sencillez .....................................................................................................................13
1.5.2. El fondo ..........................................................................................................................13
1.5.3. Combinaciones de colores .............................................................................................13
1.5.4. El mapa de superficie .....................................................................................................14
1.6. Palabras sobre el diseño para el E-Commerce........................................................... 14
1.6.1. Los catálogos ..................................................................................................................15
1.6.2. Los tours virtuales ..........................................................................................................15
1.6.3. Animación ......................................................................................................................16
1.6.4. Las ventanas emergentes ...............................................................................................16
1.6.5. Los portales comerciales ................................................................................................17
1.6.6. La navegación en las páginas E-Commerce ....................................................................17

Sesión 2: ENTORNO DE ADOBE FLASH CS6

2.1. Primera pantalla ........................................................................................................ 19


2.2. Descripción del Entorno de Trabajo de Adobe Flash CS6 .......................................... 20
2.2.1. Barra de menús ..............................................................................................................22
2.2.2. Barra de títulos y escenas ..............................................................................................22
2.2.3. Escena y zona de trabajo ................................................................................................22
2.2.4. Paneles ...........................................................................................................................23
2.2.5. Barra de herramientas ...................................................................................................23
2.2.6. Línea de tiempo..............................................................................................................24
2.3. Creación de un Documento Nuevo, Abrir y Guardar ................................................. 24
2.3.1. Para crear un documento nuevo ....................................................................................25
2.3.2. Para guardar un archivo .................................................................................................27
2.4. Métodos de Visualización .......................................................................................... 28
2.4.1. Herramienta Zoom .......................................................................................................28
2.4.2. Herramientas Mano .......................................................................................................31
2.5. Métodos de Reproducción y Ejecución ..................................................................... 32
Primera Evaluación ..................................................................................................... 35

Sesión 3: DIBUJO DE OBJETOS VECTORIALES

3.1. Dibujo de Objetos Vectoriales ................................................................................... 37


3.2. Gráficos Vectoriales y de Mapa de Bits ..................................................................... 37
3.2.1. Gráficos vectoriales ........................................................................................................38
3.2.2. Gráficos de mapa de bits ................................................................................................38
3.3. Herramientas de Dibujo ............................................................................................ 38
3.4. Métodos de Selección y Visualización de Propiedades de Objetos ........................... 39
3.4.1. Herramienta Flecha .....................................................................................................39
3.4.2. Herramienta Mover .......................................................................................................46
3.5. Creación de Objetos .................................................................................................. 51
3.5.1. Geometrías estándar (rectángulo, círculo...) .................................................................52
3.6. Creación de Líneas ..................................................................................................... 59
3.6.1. Herramienta Línea ........................................................................................................59
3.7. Herramienta Lápiz .................................................................................................... 63
3.8. Rellenar Contornos .................................................................................................... 65
3.9. Herramienta Cubo de Pintura .................................................................................. 66
3.10. Herramienta Deco .................................................................................................. 68
3.11. Herramienta Bote de Tinta .................................................................................... 70
3.12. Herramienta Cuenta Gotas .................................................................................... 71
3.13. Herramientas con la herramienta Selección ........................................................... 71
3.14. Estirar y curvar objetos con la herramienta Selección............................................. 75
3.15. Curvar Líneas y Objetos con Relleno ....................................................................... 76
3.16. Herramienta Pincel ................................................................................................ 77
3.16.1. Tamaño del trazo de Pincel ...........................................................................................79
3.16.2. Forma del trazo de Pincel .............................................................................................79
3.16.3. Opciones del modo de Pintura .....................................................................................80
3.17. Control de Líneas Vectoriales con la Herramienta Pluma ....................................... 81
3.17.1. Herramienta Pluma ....................................................................................................81
3.17.2. Trazo de Líneas Curvas .................................................................................................82
3.17.3. Edición de líneas con la Herramienta Pluma ................................................................84
3.18. Transformacion Libre ............................................................................................... 85

Sesión 4: DISTRIBUCIÓN DE GRUPOS, CAPAS Y TEXTO

4.1. Distribución de objetos ............................................................................................. 89


4.2. Agrupar objetos ......................................................................................................... 89
4.2.1. Editar grupos ..................................................................................................................91
4.2.2. Desagrupar .....................................................................................................................93
4.3. Organizar objetos ...................................................................................................... 93
4.4. Dibujar entre capas ................................................................................................... 96
4.4.1. Propiedades visuales de las capas ..................................................................................98
4.5. Herramienta Texto ..................................................................................................... 115
4.5.1. Creación de un texto ......................................................................................................115
4.5.2. Grupo carácter ...............................................................................................................117
4.5.3. Suavizado de texto .........................................................................................................119
4.5.4. Grupo párrafo.................................................................................................................119
4.5.5. Tipo de texto ..................................................................................................................121
4.5.6. Revisión ortográfica........................................................................................................122
Segunda Evaluación .................................................................................................... 123

Sesión 5: AYUDANTES DE PRECISIÓN EN EL DIBUJO

5.1. Utilización de la Cuadrícula ....................................................................................... 125


5.2. Utilización de las Reglas............................................................................................. 127
5.3. Utilización de las Guías .............................................................................................. 128
5.4. Capas Guía ................................................................................................................. 129
5.5. Panel Alinear.............................................................................................................. 130
5.6. Panel Transformación ................................................................................................ 133
5.7. Panel Información ..................................................................................................... 135
Sesión 6: USO Y EDICIÓN DE ILUSTRACIONES IMPORTADAS

6.1. Edición de Imágenes Mapa de Bits ............................................................................ 137


6.1.1. Importar imágenes mapa de bits ...................................................................................138
6.1.2. Transformar los mapas de bits .......................................................................................140
6.1.3. Separar mapa de bits para su edición ............................................................................140
6.1.4. Recortar los mapas de bits .............................................................................................142
6.1.5. Herramienta de selección Lazo ......................................................................................144
6.1.6. Selección con Varita Mágica ..........................................................................................147
6.1.7. Herramienta Borrador ...................................................................................................150
6.1.8. Importar archivos PDS ....................................................................................................153
Tercera Evaluación ...................................................................................................... 155

Sesión 7: CREACIÓN DE RELLENOS Y CONTORNO

7.1. Utilización del color ................................................................................................... 157


7.2. La Herramienta Colores ............................................................................................. 158
7.2.1. La paleta de colores .......................................................................................................158
7.2.2. Utilización de colores sólidos .........................................................................................159
7.3. Utilización del Panel de Colores ................................................................................ 160
7.3.1. Duplicar muestra ............................................................................................................161
7.3.2. Eliminar muestra ............................................................................................................161
7.3.3. Añadir colores ................................................................................................................161
7.3.4. Cargar colores predefinidos ...........................................................................................162
7.3.5. Guardar colores ..............................................................................................................162
7.3.6. Ordenar por colores .......................................................................................................162
7.3.7. Creación de colores degradados ....................................................................................162
7.4. Panel de Color ........................................................................................................... 163
7.5. Tipos de Relleno ........................................................................................................ 164
7.5.1. Degradado Lineal ...........................................................................................................164
7.5.2. Degradado Radial ...........................................................................................................166
7.5.3. Edición de Relleno ..........................................................................................................166
7.5.4. Configuración de tipos de contornos .............................................................................167
7.6. Mapa Bits................................................................................................................... 173
n
s ió
1

Se
CONCEPTOS BÁSICOS

1.1. LO NUEVO DE LA VERSIÓN ADOBE FLASH CS6

Adobe Flash CS6 es la herramienta perfecta para los diseñadores de páginas Web, profesionales de
medios interactivos o personas especializadas que desarrollen contenido multimedia. Pone énfasis en
la creación, importación y manipulación de distintos tipos de medios (audio, vídeo, mapas de bits,
vectores, texto y datos).
El Software Adobe® Flash® Professional CS6 es el estándar del sector para la creación y entrega
interactivas de experiencias virtuales y envolventes presentadas de manera uniforme en ordenadores
personales, dispositivos móviles y pantallas de prácticamente cualquier tamaño y resolución.
Las nuevas funciones de Adobe Flash CS6 ofrecen mayor productividad, mejor soporte para multimedia
y publicación optimizada.
Las características siguientes son nuevas en Adobe Flash Professional CS6:
ሳ Motor de texto Nuevo
Controle el texto mediante tipografía con calidad de impresión a través del nuevo Text Layout
Framework.
ሳ INtegracIóN coN creatIve SuIte Mejorada
Mejore la productividad al usar componentes de Adobe Creative Suite® como Adobe Photoshop®,
Illustrator®, InDesign® y Flash Builder™.
ሳ dISeñe experIeNcIaS vIrtualeS, eNvolveNteS e INteractIvaS
Importe sus diseños desde Photoshop CS6 Extended, Ilustrator CS6 o InDesign CS6 y, a continuación,
agregue interactividad y movimiento mediante Flash Professional para dar vida a sus proyectos.
ሳ coMpatIbIlIdad aMplIa coN plataforMaS y dISpoSItIvoS
Llegue a dispositivos Android™ e IOS concentrándose en los tiempos de ejecución más recientes
de Adobe Flash Player y AIR.
ሳ aMplIa dIStrIbucIóN de coNteNIdo Mejorada
Entregue de forma uniforme en pantallas de prácticamente cualquier tamaño, incluido el iPhone®**,
y use Adobe Device Central para realizar pruebas mejoradas.

9
Guía Práctica Adobe Flash CS6

ሳ SIMulacIóN de dISpoSItIvoS MóvIleS de adobe aIr


Simule interacciones comunes de aplicaciones para dispositivos móviles como la orientación de la
pantalla, los gestos táctiles y el acelerómetro para acelerar las pruebas.
ሳ orIeNtacIóN a Stage 3d
Acelere el rendimiento de la presentación gráfica utilizando el modo directo para aprovechar Starling
Framework de código abierto para contenido 2D acelerado de hardware.

1.2. PRINCIPIOS GENERALES DE DISEÑO EN LA WEB

Si el alumno es diseñador gráfico, le recomendamos que lea esta pequeña sección para tener una idea
y abra un espacio cerebral diferente para alojar todo lo relacionado con el diseño de las páginas Web.
La diferencia entre ambos diseños, el gráfico y el de internet, es muy considerable. Varios factores son
los que entran en juego a la hora de diseñar para la Web:
• El tamaño del archivo.
• La dependencia de un lenguaje de marcas, como es el HTML, que se ha quedado a todas luces
muy corto.
• El monitor del ordenador, con sus limitaciones y las diferencias entre marcas.
• Las múltiples plataformas.
• La pobre estandarización que hay entre los navegadores.
• Las diferentes versiones de navegadores que aún están “vivos” en el mercado.
• Las modas.
• La necesidad que sienten las empresas de incorporar toda naciente tecnología a su sitio Web.
• La necesidad de incluir en toda página un sistema de navegación coherente, claro y eficiente.
• Las diferentes tecnologías que almacenan los servidores, siempre limitadas, que el profesional
tiene que tener en cuenta al crear su diseño, para un conocimiento de lo que puede hacer y lo
que no.
• Las diversas conexiones a la red de los particulares, con sus diferentes velocidades y tráfico.

Para estructurar el trabajo de diseñar una página Web, lo primero que hay que debe hacer es definir
con exactitud la audiencia a la que va dirigido el mensaje que la página contiene. La audiencia es el
verdadero cliente, no quien le encarga el proyecto.

1.2.1. PÁGINAS ESTÁTICAS Y DINÁMICAS CON FLASH

La página, aún con Flash, puede ser estática o dinámica. Muchas veces, el contenido es estático
pero con gran superficie dedicada a las imágenes. En estos casos, Flash viene a ayudarnos con su
enorme poder de compresión de los archivos gráficos y las posibilidades de convertir mapas de bits
en vectoriales.

10
Se
sió 1
n Conceptos Básicos

1.3. EL NIVEL DE INCLUSIÓN DE FLASH EN LAS PÁGINAS

La inclusión se refiere a la cantidad del terreno de la pantalla que se dedique a Flash, y puede ser:
pequeña, media o total. Por otra parte, la inclusión de Flash puede estar definida por la cantidad de
animación que debe introducir, está a vez deberá ser comedida y relativa al diseño general de la página.

1.4. CLASES DE PÁGINAS

Las clases de páginas representan, junto con el tamaño de los archivos, el factor principal a la hora de
decidir el tipo de diseño que va a presentar. Se reconocen las siguientes en la Web, aunque algunos
profesionales discreparán de esta lista:

1.4.1. LAS PÁGINAS PERSONALES

Estas páginas tienen que llevar, por la propia exigencia del personaje, una gran riqueza de imaginación,
un complemento de animación discreto y algo de texto. El sonido es complementario, pues mucha
gente con buena conexión no lo tiene incorporado al ordenador (Véase Fig. 1.1).

Fig. 1.1

11
Guía Práctica Adobe Flash CS6

1.4.2. LAS PÁGINAS INFORMATIVAS DE TEXTO Y ANIMACIÓN

En las páginas combinadas, de texto y animación, lo que se acostumbra es realizarlas en HTML


(Dreamweaver) e incrustar la superficie concertada para la animación Flash. Se puede incluir todo el
texto en la película Flash y realizar el diseño completo en la película, pero no hay que perder de vista
que los textos no se ven con la misma claridad desde Flash (o por lo mismo, como imágenes de
Photoshop o cualquier otro programa, incluso vectorial) que directamente con HTML. (Véase Fig. 1.2).

Fig. 1.2

1.4.3. PÁGINAS INFORMATIVAS CON ANIMACIÓN Y SONIDO

Estas páginas suelen encargarlas compañías para su presentación empresarial. No suelen venderse
productos en ellas y suelen complementar algún CD- ROM que envían las empresas a sus clientes.
Estas páginas se realizan en todo Flash.

1.4.4. PÁGINAS PARA B2B

El mercado de B2B (business to business) es un mercado en plena expansión, con un pronóstico


más alentador aún que el de e-commerce. Las páginas de esta categoría suelen realizarse en HTML
con inclusión de terreno de Flash o con demostraciones completas de Flash por medio de navegación.
No escasean las que son todo Flash.

1.4.5. LAS PÁGINAS E-COMMERCE

Hasta que no estuvo ampliamente generalizada la versión de Flash, no tuvo verdadera oportunidad de
realizar páginas comerciales de venta e inclusión de Flash o todo Flash.
Estas páginas tienen unos requerimientos especiales en lo tocante a interactividad y conectividad con
las bases de datos, que no se han podido realizar con plenitud hasta la versión 5, del programa, si
bien es cierto que algunos diseñadores lograron efectos considerables Flash 5.
12
Se
sió 1
n Conceptos Básicos

1.4.6. LAS PÁGINAS DE JUEGO

Estas páginas están llenas de Flash a todo lo que el programa puede dar. Todos los diseños de
juegos, que además, llevan buena carga de sonido contienen animaciones muy sofisticadas y están
dedicadas por lo general a una audiencia especializada y con conexiones de alta velocidad.
1.5. CONSEJOS PRÁCTICOS SOBRE EL DISEÑO

El diseño, desafortunadamente, no es algo que se puede aprender como las matemáticas o la gramática.
Tiene ingredientes que se relacionan con la sensibilidad, la cultura, la elegancia, el gusto, la moda y
estos aspectos no son aptos para una enseñanza sistematizada. Sin embargo, tomando en cuenta
el momento histórico en que vivimos, se puede considerar algunas líneas generales de conducta al
diseñar. Son reglas más o menos establecidas a las que uno se puede ajustar en lo posible, y que se
llaman “consejos prácticos”.
Afortunadamente, hay un grupo de grandes profesionales del diseño que utilizan Flash en sus
realizaciones, logran diseños de gran altura y perfección artística.

1.5.1. LA SENCILLEZ

A veces, el entusiasmo por un nuevo ingrediente en la página, hace que se abuse y se pierda el sentido
de la proporcionalidad. Las composiciones complicadas, que no dejan libre ni un píxel de la página,
carecen de la elegancia que todo diseño debe poseer. La sencillez en el diseño es fundamental para
que el usuario recuerde la página y se recree en ella aunque sólo sea unos segundos. Los espacios
en blanco, bien medidos y distribuidos en la superficie de que se dispone, pueden hacer que la página
sea más elegante y de mejor gusto.

1.5.2. EL FONDO

Los colores y los fondos juegan un papel de gran importancia en la página, como es natural. Con
respecto de los fondos, hay profesionales que abusan tanto de los mismos, que a veces se hace
difícil distinguir el contenido, sobre todo sobre fondo negro, que si bien es elegante, es también
agresivo y difícil de llenar con textos y formas de color.

1.5.3. COMBINACIONES DE COLORES

Existen dos corrientes en la red. Una, que utiliza composiciones de colores vivos, aun respetando la
elegancia y sencillez del diseño, como algunos pintores que han sabido utilizarlos para nuestro recreo
y placer. Y otra, que prefiere colores suaves o incluso colores pastel.
Las empresas comerciales prefieren estos últimos, aunque se ven muchas páginas de e-commerce
con colores muy vivos y gran diseño. En realidad, el impacto de los colores depende del diseño de la
página, o lo que es lo mismo, de cómo se utilicen.

13
Guía Práctica Adobe Flash CS6

1.5.4. EL MAPA DE SUPERFICIE

Qué duda cabe de que hay que hacer un mapa de diseño en hojas de papel, junto con múltiples
bocetos, como en cualquier otra actividad artística. Un mapa de superficie es fundamental para no
perderse en el mar de la imaginación de elementos de un diseño, sobre todo si se utilizan tablas o
marcos.
1.6. PALABRAS SOBRE EL DISEÑO PARA EL E-COMMERCE

La mayoría de los diseños para lo comercial muestran un fondo blanco. En primer lugar, para no parecer
agresivos, y, por otra parte, para no tener problemas con el escalado y el tamaño de la información.
No obstante, el fondo negro, bien administrado, para la portada del sitio, puede resultar muy elegante
si sabe elegir los colores del contenido, tanto para el texto como para las formas e imágenes (Véase
Fig. 1.3).

Fig. 1.3

Los bloques de texto deben situarse asimétricamente en la página. Es importante que las páginas que
componen un sitio mantengan un mismo estilo de escritura, es decir, que los textos sean de la misma
fuente o todo, o a lo más, de dos de ellas. Pero si no hace algo, caerá en la monotonía. Lo que se puede
hacer es distribuir los bloques de texto de manera asimétrica en la superficie de la página.
Se dice que hay que balancear los bloques de texto en la página, pero es muy difícil explicar bien lo que
se entiende por textos balanceados.

14
Se
sió 1
n Conceptos Básicos

Se refiere al texto que pertenece al diseño y no a la información, requiere aplicar dos principios:
• El principio. Lo bueno, si es breve, dos veces bueno.
• Enclaustrar. Los bloques de texto de diseño, como por ejemplo, los mensajes breves y los
títulos.
1.6.1. LOS CATÁLOGOS

Los sitios Web no deben utilizarse como catálogos. Un catálogo es un folleto o un libro que nada tiene
que ver con la interactividad. Un sitio Web es una colección de páginas debidamente vinculadas, en
las que el usuario tiene cuando menos la potestad de dirigir su atención. Él decide cuánta información
desea. Por lo tanto, nunca hay que caer en la tentación de presentar los productos en forma de
catálogo, a lo cual Flash le ayuda notablemente. (Véase la Fig.1.4).

Fig. 1.4

1.6.2. LOS TOURS VIRTUALES

En el último año, se está poniendo de moda en la Web la inclusión de tours virtuales en las páginas.
Es un medio muy conveniente para mostrar al usuario una larga película en Flash, incluso con sonido.

15
Guía Práctica Adobe Flash CS6

1.6.3. ANIMACIÓN

La animación debe ser dosificada en la medida en que se pueda necesitar, sin por ello renunciar a
las ventajas de Flash. El hecho de que conozca una tecnología tan importante no le debe llevar al
abuso de la misma. No hace falta mucho para que un usuario, se salga del sitio si le abruma con
animación irrelevante. Ni tampoco es necesaria la animación para utilizar Flash, pues recuerde las
ventajas que tiene el programa sin contar con la animación o el sonido (Véase la Fig. 1.5).

Fig. 1.5

1.6.4. LAS VENTANAS EMERGENTES

Nos referimos a esas ventanas que se pueden hacer aparecer en la pantalla del usuario, bien
automáticamente, bien haciendo clic en un botón de la película. Pueden ser muy interesantes e
ilustrativas, o pueden ser muy molestas. No caiga en el uso indiscriminado de estas ventanas, que
aparecen con códigos de Java Script o de Action Script.

16
Se
sió 1
n Conceptos Básicos

1.6.5. LOS PORTALES COMERCIALES

Los portales no son otra cosa que una congregación de vínculos, lo que equivale a decir que su
arquitectura y sistema de navegación tienen que ser difíciles de diseñar. Es cierto que en los portales
hay que diseñar con una gama de colores restringida, generalmente con diferentes valores de un solo
color, pues suelen contener muchos sectores. Pero lo difícil en el portal es, con mucho, la estructura
y cantidad de sus vínculos (Véase la Fig. 1.6).

Fig. 1.6

1.6.6. LA NAVEGACIÓN EN LAS PÁGINAS E-COMMERCE

Sí, este tema es de gran importancia en cualquier sitio Web, tratándose de páginas comerciales,
cobra mayor importancia. Un buen sistema de navegación es bastante complicado para sitios de
e-commerce y se hace difícil de mantener cuando se van quitando y añadiendo páginas con frecuencia,
un tema interesante que trataremos más adelante.

NOTA

Con este pequeño y preciso resumen está apto para entrar al


mundo del diseño y la animación, suerte…

17
n
s ió
2

Se
ENTORNO DE
ADOBE FLASH CS6

2.1. PRIMERA PANTALLA

Al abrir por primera vez Adobe Flash CS 6 se muestra una pantalla inicial con tres columnas de opciones
(véase la fig. 2.1), descritas a continuación:
• La primera columna muestra todos los Archivos recientemente usados, siendo esta la primera vez
que abre el programa, no se mostrarán, obviamente, ningún archivo. Pero se muestra un botón
en forma de carpeta que permite explorar y abrir un archivo ya creado.
• La segunda columna muestra las opciones para Crear un archivo Nuevo, es decir, un documento
en blanco. Para esta nueva versión algunas herramientas, como las que manejan elementos en
3D, requieren la creación de archivos tipo Flash (AS 3.0) que es la actualización de ActionScrip
de Flash.
• La tercera columna muestra opciones para crear plantillas, es decir, elementos prediseñados
para iniciar un diseño, donde generalmente se indican valores pre-establecidos de tamaños de
documentos como para crear banners verticales u horizontales.

Fig. 2.1

19
Guía Práctica Adobe Flash CS6

Para facilitar el entendimiento del entorno de Adobe Flash CS6 use la opción para Abrir un archivo de
referencia ubicado en el CD, que acompaña esta edición, en la Carpeta: Archivos de Capítulos, explore
y ubique la carpeta correspondiente al sesión 2, donde se encuentra el archivo: Entorno de Adobe Flash
CS6.fla, siendo la extensión del archivo base de flash (.fla) y hacer dos veces clic para abrir el archivo
y comenzar la exploración.

2.2. DESCRIPCIÓN DEL ENTORNO DE TRABAJO DE ADOBE FLASH CS6

En este capítulo se definirá el entorno de Adobe Flash CS6 y las herramientas de ayuda visual. Analizando
el uso de cada una de ellas, así como la forma en que pueden ser utilizadas y controladas (véase la
fig. 2.2).
Los elementos del entorno pueden ser a veces muy pequeños o muy grandes, pueden cambiar el grado
de Aumento/Reducción o mover el escenario dentro del entorno de trabajo Adobe Flash CS6. También
pueden ajustar la visualización del escenario mediante los comandos de visualización en la pantalla.

Fig. 2.2

20
Se
sió 2
n Entorno de Adobe Flash CS6

Los elementos de la interfaz pueden desplazarse de su sitio de apertura simplemente arrastrándolos


con el cursor, para situarlos en la parte de la pantalla que más nos convenga. Las dos barras de
herramienta, el controlador e incluso la línea de tiempo, todos pueden redistribuirse en la superficie.
Si este es el primer contacto con Flash CS6, para Ud. lector utilizará en archivo abierto previamente que
le ayudará a iniciar su recorrido por el entorno del programa (véase la fig. 2.3). También, se le recuerda
encarecidamente que “juegue” con todas las herramientas a medida que se den las explicaciones, ya
que la única forma de conocer sus características y acciones con más rapidez, de llegar enseguida a la
interacción entre el programa y diseñador.
Para un fácil entendimiento de que es lo que debe obtener con Flash CS6, el archivo de ayuda contiene
elementos distribuidos entre capas, que a su vez presentan animaciones.

Barra de Menús

Paneles

Escena

Zona de
Trabajo

Área de Animación

Fig. 2.3

A continuación se da una breve descripción de las áreas más importantes del programa, ya que en
los capítulos siguientes se detallarán con mayor precisión.

21
Guía Práctica Adobe Flash CS6

2.2.1. BARRA DE MENÚS

Como la mayoría de softwares están creados en el entorno Windows, Flash presenta menús, donde
encontrará todas las funciones del programa, pero como la mayoría de programas las herramientas de
mayor aplicación se encuentran visibles en pantalla (véase la fig. 2.4), dejando de lado a los menús
sólo para funciones especiales.

Fig. 2.4

2.2.2. BARRA DE TÍTULOS Y ESCENAS

La barra de títulos muestra todos los archivos abiertos en Flash, esto permite trabajar de forma
múltiple con varios archivos abiertos a la vez. Cada uno de estos archivos también incluyen por
defecto un escenario rotulado como Scene-1, pudiendo crear más de una escena para cada archivo
(véase la fig. 2.5).

Fig. 2.5

También puede cerrar de forma individual cada archivo abierto presionando en la (X) ubicada al
extremo de cada título.

2.2.3. ESCENA Y ZONA DE TRABAJO

La escena es el espacio que se representará en la ejecución de las presentaciones o animaciones,


mientras que la zona de trabajo le puede servir para acomodar los elementos que integraran la escena
(véase la fig. 2.6).

Fig. 2.6

22
Se
sió 2
n Entorno de Adobe Flash CS6

2.2.4. PANELES

Los paneles en Flash permiten controlar y configurar diversos parámetros de objetos o del mismo
archivo en sí. En pantalla por defecto sólo se muestran dos de los paneles, como son el de Propiedades
y la Biblioteca, ubicados en la esquina superior derecha del escenario (véase la fig. 2.7).
Por defecto estos paneles se encuentran contraídos, es decir, parcialmente ocultos, pero como se
muestra en la imagen siguiente puede expandir los paneles presionando en los símbolos señalados.

Fig. 2.7

a Este proceso de expansión o contracción de herramientas, es válido también para la barra de


herramientas y la línea de tiempo.
2.2.5. BARRA DE HERRAMIENTAS

Las herramientas del panel Herramientas permiten dibujar,


pintar, seleccionar y modificar ilustraciones, así como Seleccionar y Transformar
cambiar la visualización del escenario (véase la fig. 2.8).
El panel Herramientas se divide en cuatro secciones:
La sección de herramientas contiene las herramientas de Dibujo de Formas
dibujo, pintura y selección.
• La sección de visualización contiene herramientas Rellenar y Vincular
para ampliar y reducir, así como para realizar Visualización
recorridos de la ventana de la aplicación.
• La sección de colores contiene modificadores de Color de Contorno y Relleno
los colores de trazo y relleno.
• La sección configuración de herramientas contiene Configuración de Herramientas
las opciones de la herramienta actualmente
seleccionada. Los modificadores afectan las
operaciones de pintura o edición de la herramienta. Fig. 2.8

Para especificar las herramientas que se mostrarán en el entorno de edición, utilice el cuadro de
diálogo Personalizar panel de herramientas.
23
Guía Práctica Adobe Flash CS6

2.2.6. LÍNEA DE TIEMPO

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 (véase la fig. 2.9).

Edición de Animación Área de Animación

Capas y Línea
de Tiempo

Fig. 2.9

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.

2.3. CREACIÓN DE UN DOCUMENTO NUEVO, ABRIR Y GUARDAR

Cada vez que se abre Flash, la aplicación crea un nuevo archivo con la extensión “.FLA”. Durante la
sesión de trabajo es posible crear otros documentos de Flash. Para establecer el tamaño, la velocidad
de fotogramas, el color de fondo y otras propiedades de un documento nuevo, utilice el cuadro de
diálogo Propiedades del documento.
También puede abrir una plantilla como documento nuevo. Puede elegir entre varias plantillas estándar
incluidas en Flash o abrir una plantilla guardada previamente (véase la fig. 2.10).

24
Se
sió 2
n Entorno de Adobe Flash CS6

2.3.1. PARA CREAR UN DOCUMENTO NUEVO

• Despliegue el menú Archivo, luego elija la opción Nuevo.


• Seguido a esto se abre un cuadro de diálogo con las opciones para crear un Documento.

Fig. 2.10

• En la primera persiana General, tiene opciones para crear directamente un documento en


blanco según las versiones de ActionScript, diapositivas, formatos de móviles, entre otros.
• La segunda persiana Plantillas, tiene archivos con configuraciones pre- establecidas de
configuraciones del documento, como el tamaño y la velocidad de salida.

Elija una de estas opciones y acepte.


Los archivos de ejemplo para esta edición han sido
creados con Adobe Flash (AS 3.0), de preferencia use
este formato o Adobe Flash (AS 2.0).
Para configurar las propiedades del documento:
Las propiedades del documento se configuran desde el
panel de Propiedades ubicado en la esquina superior
derecha del área de trabajo, para ello presione en su
ícono para desplegarlo o presione la conbinación del
teclado control +F3 (véase la fig. 2.11).

Fig. 2.11

25
Guía Práctica Adobe Flash CS6

En el grupo Propiedades se encuentra la información actual del documento (véase la fig. 2.12), como
la Velocidad de Fotogramas por Segundo reproducido en las secuencias (por defecto 24 fps, para
esta nueva versión), además las dimensiones del documento y color de fondo. Para configurar estas
propiedades presione sobre el botón editar.

Fig. 2.12

En el cuadro de Propiedades del Documento abierto puede


cambiar las Dimensiones de la salida del archivo, tome en
cuenta que para la mayoría de pantallas, la resolución es de
1024*768 (véase la fig. 2.13), eso no quiere decir que el
documento debe ser de ese tamaño, ya que en realidad al
publicar este espacio será menor.

Fig. 2.13 Fig. 2.14

NOTA

El tamaño de su página también dependera del tipo de pantalla a utilizar y la


resolucion de la misma (véase la fig. 2.14).

26
Se
sió 2
n Entorno de Adobe Flash CS6

En la sección Velocidad de fotogramas, introduzca el número de fotogramas de animación que deben


mostrarse cada segundo. La mayoría de las animaciones que se ven en los equipos, especialmente las
que se reproducen desde un sitio Web, no necesitan una velocidad superior a 8-12 fps (fotogramas
por segundo). La velocidad de fotogramas predeterminada ahora es de 24 fps.
La cantidad de fotogramas por segundo indica que a mayor cantidad de imágenes o fotogramas, el
archivo incrementará su tamaño, es esta nueva versión de Adobe Flash se considera 24 fps ya que
la capacidad de dispositivos y red a mejorado sustancialmente. Por último, el color de fondo depende
del tipo de diseño a crear, presione en el cuadrito de color blanco para que se despliegue la paleta
de color de fondo y elija uno diferente si así lo requiere.
2.3.2. PARA GUARDAR UN ARCHIVO

Puede guardar un documento FLA de Flash con su nombre y ubicación actuales, o bien utilizar un
nombre o una ubicación diferentes.
Si un documento contiene cambios sin guardar, aparece un asterisco (*) detrás del nombre del
documento en la barra de título del documento, la barra de título de la aplicación y la ficha del
documento. El asterisco se quita al guardar el documento.
Realice uno de los siguientes pasos:
• Para sobrescribir la versión actual existente en el disco, seleccione el menú Archivo > Guardar.
• Para guardar el documento en una ubicación distinta o con otro nombre, o para comprimir el
documento, seleccione el menú Archivo > Guardar como.
Si ha seleccionado Guardar como o si el documento no se ha guardado nunca, introduzca el nombre
y la ubicación del archivo (véase la fig. 2.15).

Fig. 2.15

Para abrir un archivo existente:


• Seleccione el menú Archivo > Abrir.
• En el cuadro de diálogo Abrir, busque el archivo o introduzca la ruta del mismo en el cuadro de
texto Ir a.
• Haga clic en Abrir.
27
Guía Práctica Adobe Flash CS6

2.4. MÉTODOS DE VISUALIZACIÓN

Puede cambiar la visualización del escenario cambiando el grado de aumento/reducción o moviendo el


escenario dentro del entorno de trabajo de Adobe Flash CS6 (véase la fig. 2.16 y la fig. 2.17). También
puede ajustar la visualización del escenario mediante los comandos de visualización.

Fig. 2.16 Fig. 2.17

2.4.1. HERRAMIENTA ZOOM

También conocida como el Aumento y Reducción de la Visualización para ver todo el escenario en la
pantalla o sólo un área determinada del dibujo con un grado de aumento alto, modifique el grado de
aumento (véase la fig. 2.18). El grado máximo de aumento depende de la resolución del monitor y
del tamaño del documento.
Al aumentar el tamaño de visualización del escenario es posible que no se vea todo su contenido.

Fig. 2.18

28
Se
sió 2
n Entorno de Adobe Flash CS6

ሳ vISualIzacIóN del eSceNarIo coMpleto


Necesitamos utilizar la herramienta del Zoom (véase la fig. 2.19 y la fig. 2.20). Para visualizar de
una forma más detallada de la siguiente manera:
• Presionar el ícono de Zoom.
• Presionar con un clic izquierdo sobre la zona que desee visualizar con un acercamiento.

Fig. 2.19

• Zona aumentada con un acercamiento, puede continuar presionando para realizar más
acercamientos.

Fig. 2.20

29
Guía Práctica Adobe Flash CS6

• Para cambiar el modo de acercamiento por lejanía, presione la tecla ALT y presione con un
clic izquierdo sobre el área de trabajo. También puede cambiar el modo de Zoom desde las
opciones de la barra de Herramientas.

Opciones de la herramienta Zoom, agrandar y reducir.

ሳ zooM de veNtaNa
• Otra forma de usar la herramienta Zoom es realizando acercamientos a una zona establecida
por una marco creada sobre el dibujo (véase la fig. 2.21).
• Active la herramienta Zoom, luego presione en con un clic izquierdo en un punto del gráfico y
sin soltar el clic izquierdo arrastre el cursor hasta que se forme una ventana, cuando enmarque
la zona que desea visualizar mejor deje de presionar (véase la fig. 2.22).

Fig. 2.21

Aplicación de la herramienta Zoom,


método ventana.

Fig. 2.22

30
Se
sió 2
n Entorno de Adobe Flash CS6

2.4.2. HERRAMIENTAS MANO

Esta herramienta sirve para mover el escenario rápidamente, en lugar de tener que hacerlo con las
barras deslizantes. Ubicada en la sección Ver de la barra de herramientas de dibujo.
Constituye una de las herramientas más utilizadas del entorno de Flash para mejorar la visualización
cuando se realiza un acercamiento (véase la fig. 2.23).
Para usar la herramienta mano:
• Active la herramienta mano.
• Presione con un clic izquierdo en pantalla y sin soltar
desplace el cursor.
• Al desplazar el cursor el escenario se desplaza, para
este caso sólo cambie su punto de vista ya que ningún
objeto se desplaza en el escenario.

Fig. 2.23

Aplicación de la herramienta mano cuando ya se ha usado un acercamiento de zoom, ahora se


encuadra el escenario para visualizar otras zonas. Con esta herramienta puede navegar en el diseño
en cualquier dirección del plano de la pantalla (véase la fig. 2.24).

Fig. 2.24

31
Guía Práctica Adobe Flash CS6

2.5. MÉTODOS DE REPRODUCCIÓN Y EJECUCIÓN

Como ya se sabe los archivos creados por Flash son animados; por tanto, para estos se realiza la
reproducción de los fotogramas, que son imágenes ubicadas una a continuación de otra para simular
el movimiento al reproducir esta secuencia de imágenes con cierta velocidad; por ejemplo, a 24 fps
(fotogramas por segundo) es decir que en un segundo de reproducción está viendo 24 imágenes
diferentes (véase la fig. 2.25).

Fig. 2.25

El archivo de muestra abierto tiene una animación, esto lo podrá notar al reproducir la secuencia o
también visualizando el panel Línea de Tiempo, que muestra una regla de tiempo donde puede desplazar
el contador de tiempo vertical de color Rojo para realizar una reproducción manual, donde podrá notar el
orden y la animación de los elementos que componen el escenario (véase la fig. 2.26).

Fig. 2.26

32
Se
sió 2
n Entorno de Adobe Flash CS6

Para reproducir también puede presionar simplemente la tecla Enter o desplegar el menú Control y elegir
la opción Reproducir (Véase Fig. 2.27).

Fig. 2.27

Para reproducir y ejecutar la animación como se vería fuera del programa, presione Control + Enter, en
esta ventana sólo se visualizarán los elementos de salida, menos los elementos de referencia como
reglas, líneas guía, objetos de referencia (Véase Fig. 2.28).

Fig. 2.28

33
Guía Práctica Adobe Flash CS6

Además, automáticamente se crea un archivo de ejecución SWF ubicado donde se ha guardado el


archivo creado, esta también es una forma de exportar uno de los archivos de Flash. También puede
presionar F-12 para ver como se vería el archivo publicado (Véase Fig. 2.29).

Fig. 2.29

34
1 RA EVALUACIÓN

1 ¿Cuáles son los principios generales para diseñar una página web?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................

2 ¿Qué tipo de páginas se pueden encontrar en la web?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
3 ¿Qué elementos del diseño se deben tener en cuenta al diseñar una página web?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
4 ¿Existe un tamaño ideal para una página web?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
5 ¿Qué métodos de visualización se pueden usar en Flash?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................

35
n
s ió
3

Se
DIBUJO DE OBJETOS
VECTORIALES

3.1. DIBUJO DE OBJETOS VECTORIALES

En este capítulo se detallarán todas las herramientas para la creación de objetos vectoriales de Flash
CS6, entre trazos de línea y geometrías estándar. Así como la forma en que pueden ser utilizadas y
controladas mediante herramientas de transformación para crear composiciones más complejas.
Para un correcto entendimiento de las herramientas, usará un archivo de referencia como una
composición ya creada, esto le permitirá analizar un diseño ya creado y los conceptos que debe tener
para seleccionar y modificar cada elemento de la composición y como se relacionan entre ellos. Como
también editar las propiedades de los objetos, como el color de relleno y los ajustes de las líneas. Haga
clic en el archivo de referencia ubicado en el CD en la Carpeta: Archivos de Capítulos, explore y ubique
la carpeta correspondiente al Capítulo 3 - Métodos de Selección.fla y haga clic dos veces para abrir el
archivo y comience la exploración.

3.2. GRÁFICOS VECTORIALES Y DE MAPA DE BITS

Los sistemas informáticos muestran las imágenes en formato de vectores o de mapa de bits. Si conoce
las diferencias entre estos dos formatos, podrá trabajar de forma más eficaz. Con Flash, puede crear y
animar gráficos vectoriales compactos. Flash también permite importar y manipular gráficos vectoriales
y de mapa de bits creados en otras aplicaciones (Véase Fig. 3.1).

Fig. 3.1

37
Guía Práctica Adobe Flash CS6

3.2.1. GRÁFICOS VECTORIALES

Los gráficos vectoriales describen las imágenes mediante líneas y curvas,


denominadas vectores, que incluyen propiedades de color y posición. Por
ejemplo, la imagen de las nubes se describe mediante puntos por los que
pasan las líneas, creando el contorno de las nubes (Véase Fig. 3.2). El
color de la nube queda determinado por el color del contorno y del área que
encierra este contorno. Cuando se edita una imagen vectorial, se modifican
las propiedades de las líneas y curvas que describen su forma. Podrá Fig. 3.2
desplazar o modificar el tamaño, la forma o el color de un gráfico vectorial sin alterar la calidad de
su aspecto. La edición de gráficos vectoriales no afecta a la resolución, es decir, las imágenes se
pueden mostrar en dispositivos de salida de distintas resoluciones sin perder calidad en absoluto
(Véase Fig. 3.2).
3.2.2. GRÁFICOS DE MAPA DE BITS

Las imágenes de mapa de bits están compuestas por puntos de color, denominados píxeles,
organizados en una cuadrícula. Por ejemplo, la imagen de la modelo se describe mediante la posición
específica y el valor de color de cada píxel en la cuadrícula, creando la
imagen de forma muy similar a un mosaico.
Cuando se edita una imagen de mapa de bits, se modifican los píxeles,
no las líneas y curvas. En las imágenes de mapa de bits la resolución
sí es determinante, ya que los datos que las definen están fijos en una
cuadrícula que tiene un tamaño determinado. Al editar un gráfico de mapa
de bits se puede modificar la calidad de su aspecto (Véase Fig. 3.3).
Fig. 3.3
3.3. HERRAMIENTAS DE DIBUJO

Flash incorpora varias herramientas para dibujar formas libres o líneas precisas, formas y trazados,
así como para pintar objetos rellenos. Esta barra se divide en 4 partes: herramientas básicas, vistas,
colores y opciones (Véase Fig. 3.4).

Seleccionar y Transformar

NOTA

Cada vez que se seleccione una herramienta básica Dibujo de Formas


de dibujo aparecen las opciones de modificación o
modificadores que continúen en la parte inferior
de la barra de herramientas de dibujo. Rellenar y Vincular

Visualización

Color de Contorno y Relleno

Configuración de Herramientas

Fig. 3.4

38
Se
sió 3
n Dibujo de objetos vectoriales

3.4. MÉTODOS DE SELECCIÓN Y VISUALIZACIÓN DE PROPIEDADES DE OBJETOS

Para un mejor entendimiento de los recursos proporcionados por Adobe Flash CS6, conviene analizar
un archivo ya creado. Para visualizar las propiedades de los objetos vectoriales se requiere la selección
de los mismos, ya sean rellenos o contornos, para lo cual existen diferentes métodos de selección
descritos a continuación (Véase Fig. 3.5).

Fig. 3.5

3.4.1. HERRAMIENTA FLECHA

Para modificar un objeto, primero debe seleccionarlo. Adobe Flash CS6 proporciona diferentes
métodos de selección, incluidos en la herramienta Flecha de Selección y los comandos de teclado.
La Herramienta de Selección es una de las más importantes ya que con esta puede realizar las
siguientes acciones:
• Seleccionar los contornos y rellenos de los objetos.
• Visualizar y editar las propiedades de los objetos seleccionados.
• Mover uno o varios objetos seleccionados.
• Eliminar objetos seleccionados.
• Copiar la selección de objetos.
• Modificar los vértices y aristas de los objetos.
• Cortar los objetos por marcos de selección
• Cortar los objetos interceptando entre otros moviéndolos.
39
Guía Práctica Adobe Flash CS6

ሳ SeleccIoNar objetoS de forMa INdIvIdual y ModIfIcar SuS propIedadeS de color y aNcho de líNea
Active la herramienta Flecha de selección de la barra de herramientas.

ሳ SeleccIoNar y caMbIar el color de relleNo


Para seleccionar un objeto presione un clic izquierdo cuando se encuentre sobre el objeto a
seleccionar (Véase Fig. 3.6).

Fig. 3.6

Para ver las propiedades del objeto seleccionado, presione el ícono de propiedades ubicado en
la esquina superior derecha del área de trabajo o presione la combinación de las teclas Control
+ F3, seguido a esto se habilitará el panel de Propiedades. Las propiedades de los objetos
vectoriales se dividen en dos grupos: el primero el grupo de Posición y Tamaño que se describirá
más adelante, y el grupo de Relleno y Trazo (Véase Fig. 3.7).

Fig. 3.7

40
Se
sió 3
n Dibujo de objetos vectoriales

Luego de seleccionar un color, el objeto seleccionado cambiará de color como se muestra en la


imagen siguiente. Ahora seleccione el objeto al lado del anterior, haciendo clic izquierdo sobre este,
al seleccionar el otro objeto, el anterior queda deseleccionado automáticamente (Véase Fig. 3.8).

Fig. 3.8

Otra forma de cambiar las propiedades del color es desplegar la lista de color de relleno desde la
barra de herramientas como se señala en el gráfico siguiente. Al presionar en este ícono también se
despliega el cuadro de color, luego seleccione el color para el cambio (Véase Fig. 3.9).

Fig. 3.9

Para deseleccionar los objetos, sólo tiene que hacer un clic sobre un área vacía del espacio de trabajo.

41
Guía Práctica Adobe Flash CS6

ሳ SeleccIoNar varIoS relleNoS a la vez


También puede cambiar las propiedades de varios objetos seleccionados a la vez. Al realizar el
cambio de estos, todos los objetos tendrán el mismo cambio como el de color por ejemplo.
Para seleccionar varios objetos, presione la tecla Shift sin soltar y presione sobre los objetos que
quiere seleccionar de forma múltiple (Véase Fig. 3.10).

Fig. 3.10

Como notará en la imagen siguiente al cambiar el color de relleno de los objetos seleccionados,
todos cambian de color (Véase Fig. 3.11). Si selecciona rellenos que tienen diferente color,
ambos asumirán el último cambio de color que se realice a la selección.

Fig. 3.11

ሳ SeleccIoNar uN trazo y caMbIar Su color


Cuando se crean los objetos geométricos, estos generalmente se componen del relleno y su
contorno, para notar estos deb en tener colores diferentes.
Para seleccionar un contorno, presione una vez sobre el borde de un objeto con la herramienta de
selección activa. Presione el cuadro de color y elija un color diferente del cuadro de color como
en el caso de los rellenos. De preferencia un color opuesto al color de relleno (Véase Fig. 3.12).
Luego despliegue nuevamente el panel de Propiedades y ubique el ícono del lado del grupo de
Relleno y Trazo.

42
Se
sió 3
n Dibujo de objetos vectoriales

ሳ SeleccIoNar uN trazo y caMbIar Su color


Cuando se crean los objetos geométricos, estos generalmente se componen del relleno y su
contorno, para notar estos deben tener colores diferentes.
Para seleccionar un contorno, presione una vez sobre el borde de un objeto con la herramienta de
selección activa. Presione el cuadro de color y elija un color diferente del cuadro de color como
en el caso de los rellenos. De preferencia un color opuesto al color de relleno (Véase Fig. 3.12).
Luego despliegue nuevamente el panel de Propiedades y ubique el ícono del lado del grupo de
Relleno y Trazo.

Fig. 3.12

ሳ SeleccIoNar y caMbIar el aNcho del trazado


Entre otras propiedades de los trazados, se encuentra el ancho de las mismos, para que
seleccione un contorno y desde el panel Propiedades ajuste al ancho del contorno desde la barra
deslizante Trazo. Al incrementar el ancho, el contorno se notará más claro, pero también puede
reducirlo a un valor de 2.0 con lo cual se obtiene el trazo de línea más fino (Véase Fig.3.13).

Fig. 3.13

43
Guía Práctica Adobe Flash CS6

ሳ SeleccIoNar varIoS trazoS a la vez


Al igual que en los rellenos, también puede presionar la tecla Shift y hacer clic en diferentes
contornos para seleccionarlos a la vez. Con todo el contorno seleccionado también puede
cambiar las propiedades de color y ancho de trazado, teniendo en cuenta que todos los objetos
seleccionados tendrán el mismo cambio.
Si selecciona trazos que tienen diferente ancho de línea, al seleccionarlos y cambiar el ancho o
color de trazado, ambos elementos asumirán el último cambio realizado (Véase Fig. 3.14).

Fig. 3.14

ሳ SeleccIoNar y caMbIar el tIpo de trazo de líNeaS


Otra propiedad de los contornos o trazos, es el tipo de línea, el tipo de línea por defecto es el
continuo, si utiliza tipos de línea discontinuos puede crear diversos efectos visuales en su diseño.
Para ello seleccione uno o varios contornos, luego desde el panel de propiedades despliegue
la lista de Estilo de trazado. Luego elija uno de los tipos de trazado, notará como los contornos
pueden tener diferentes presentaciones. (Véase Fig. 3.15).

Fig. 3.15

44
Se
sió 3
n Dibujo de objetos vectoriales

ሳ SeleccIoNar líNeaS coNtINuaS hacIeNdo doS veceS clIc


Cuando se crean los diseños generalmente los trazos de línea quedan interceptados por otros
trazos, o estos se continúan con otros trazos, esto facilita la selección múltiple de objetos (Véase
Fig. 3.16).
Para seleccionar trazos de línea continuos, presione dos clics izquierdos sobre un contorno,
notará que los objetos adyacentes a este también se seleccionan.

Fig. 3.16

Con los trazos seleccionados puede cambiar las propiedades de color, ancho o tipo de trazado
como se muestra en la imagen siguiente.
De todas maneras si quiere seleccionar mayor cantidad de contornos que estén separados,
también puede presionar la tecla Shift y hacer dos veces clic sobre otros contornos para añadirlos
a la selección.
ሳ SeleccIoNar relleNo y coNtorNo hacIeNdo doS veceS clIc
Para seleccionar los rellenos y los contornos a la vez, presione dos veces clic izquierdo sobre un
relleno, notará que ahora se seleccionan los dos elementos.
Con los dos objetos seleccionados, despliegue el panel de propiedades y desde aquí ahora puede
cambiar ambas propiedades de relleno y trazado. Si realiza un cambio de propiedades a esta
selección, todos los objetos asumirán el último cambio que se realice (Vease Fig. 3.17).

Fig. 3.17

45
Guía Práctica Adobe Flash CS6

ሳ SeleccIoNar varIoS objetoS coN Marco de SeleccIóN


Otro método de selección es el de marco de selección, ya que
la herramienta de selección tiene diversas funciones, utilice este
método solo para seleccionar objetos que se encuentren en el
interior del marco realizado.
Para realizar un marco de selección, presione en un primer punto
de la pantalla con un clic izquierdo y sin dejar de presionar mueva
el cursor hasta encerrar los objetos en su interior, realizado esto
los objetos quedan seleccionados para cambiar sus propiedades
(Véase Fig. 3.18).
Fig. 3.18
También puede seleccionar varios objetos realizando marcos de selección, pero presionando la
tecla Shift para añadirlos a la selección.
ሳ elIMINar objetoS SeleccIoNadoS
Para eliminar elementos del escenario, sólo basta con seleccionar los objetos con cualquiera de
los métodos de selección anteriormente indicados, y luego presionar la tecla Suprimir.

3.4.2. HERRAMIENTA MOVER

Otra de las aplicaciones de la herramienta de Selección es la mover


los objetos, el desplazamiento de los objetos se realiza en un espacio
bidimensional. Con la herramienta de selección puede mover los objetos
en todas las direcciones del plano del escenario (Véase Fig. 3.19). El
desplazamiento puede ser realizado manualmente como se suele hacer,
pero también puede ser controlado desde el panel de propiedades.
Fig. 3.19
ሳ Mover objetoS SeleccIoNadoS MaNualMeNte
Para facilitar el entendimiento de este tema, abra el archivo de referencia ubicado en el CD, en la
Carpeta: Archivos de Capítulos, explore y ubique la carpeta correspondiente al Sesión 3, donde
se encuentra el archivo: Mover Objetos_Ejercicios.fla y hacer clic dos veces para abrir el archivo
y comenzar la exploración.
Para desplazar los objetos active la herramienta de selección.
Luego seleccione los objetos con los métodos antes descritos, teniendo en cuenta que la mayoría
están compuestos por relleno y su contorno, además el texto se comporta como un sólo elemento.
Con alguno de los objetos seleccionados, presione un clic izquierdo sobre la selección y sin dejar
de presionar arrastre el objeto en el área de trabajo, tome en cuenta que estos objetos no se
encuentran apoyados entre ellos, sino mantienen cierta separación entre ellos (Véase Fig. 3.20).

46
Se
sió 3
n Dibujo de objetos vectoriales

Fig. 3.20

ሳ Mover coN teclaS dIreccIoNaleS


Debido al reciente uso del programa quizá no tenga mucho pulso para realizar ciertos
desplazamientos, como cuando los objetos ya se encuentran muy cerca, para ello puede utilizar
las teclas direccionales con el objeto seleccionado.
Si tiene un objeto seleccionado presione las teclas direccionales, con esto el objeto se moverá
en las cuatro direcciones de las flechas del teclado, el movimiento que se realiza en muy lento,
por tal motivo se utilizará para movimientos de detalle (Véase Fig. 3.21).

Fig. 3.21

ሳ copIar objetoS

Para crear el otro diseño notará


que le falta algunos elementos para
completarse, pero los elementos
faltantes son idénticos a los del diseño
anterior, para lo cual puede realizar
copias de parte de ese diseño, para
completar este (Véase Fig. 3.22).

Fig. 3.22

47
Guía Práctica Adobe Flash CS6

Para copiar una selección:


• Seleccione los elementos a copiar.
• Luego mantenga presionada la tecla Alt.
• Paso seguido, desplace el objeto hacia un lado, notará que lo que se desplaza es una copia
de la selección (Véase Fig. 3.23).

Fig. 3.23

Puede copiar también varios objetos seleccionados a la vez o seleccionar todo el diseño y crear
una copia de este. Realizando este procedimiento copie los elementos faltantes en el nuevo
diseño y complételo.
ሳ Mover coN ajuSte a objetoS
Para facilitar el desplazamiento de los objetos, cuando estos se deben desplazar en relación a
otros, Flash proporciona una detección de los objetos para ajustarlos entre ellos, con esto puede
realizar desplazamientos con cierto grado de precisión apoyado en los vértices, aristas, puntos
medios de aristas y proyecciones de los objetos (Véase Fig. 3.24).

Fig. 3.24

48
Se
sió 3
n Dibujo de objetos vectoriales

Para facilitar el entendimiento de este tema, abra el archivo mover objetos_ajuste.fla, que viene
con el CD adjunto en esta edición.
Active la herramienta de Selección , luego en las opciones de la barra de Herramientas
verifique que se encuentre activa la opción Ajuste a objetos , se indica verificar ya que esta
opción se encuentra activa por defecto.
Para mover objetos ajustados a otros:
• Active la herramienta se selección y seleccione un objeto.
• Luego mueva el objeto arrastrándolo pero desde un punto cercano a un vértice del objeto.
• Notará que al acercar el objeto al vértice de otros elementos, este se ajusta automáticamente,
y si deja de arrastrar el objeto quedará acoplado al otro (Véase Fig. 3.25).

Fig. 3.25

• También cuando mueva los objetos desde los vértices, notará que al acercar a otros objetos
se muestra una línea de referencia para que los objetos queden alineados bajo estas líneas
(Véase Fig. 3.26).

Fig. 3.26

49
Guía Práctica Adobe Flash CS6

• Estas líneas de referencia no sólo sirven para acoplar objetos, también puede usarlas para
que los objetos se encuentren separados pero a la misma altura, es decir, alineados bajo esta
referencia (Véase Fig. 3.27).

Fig. 3.27

La línea de referencia que aparece en pantalla se presenta de forma horizontal y vertical, además
al acercar objetos puede alinearlos a ambas líneas a la vez, como el círculo desplazado desde un
lado del mismo y alineado al otro círculo.
También estas líneas de referencia, que se muestran para varios objetos, sirven para visualizar
los ejes, sólo basta con acercar el objeto a mover a estos objetos y sin soltar alejarse de ellos,
de esta manera se rastrea la proyección de los otros objetos para alinearlos en función a estas
líneas de referencia (Véase Fig. 3.28).

Fig. 3.28

50
Se
sió 3
n Dibujo de objetos vectoriales

• Forzar el movimiento horizontal y vertical (con Shift)


Como notó en el desplazamiento manual, los objetos se
desplazan en cualquier dirección del plano, para realizar
movimientos más controlados, como para mover los objetos
sólo en dirección horizontal o vertical, puede presionar la
tecla Shift mientras desplaza el objeto seleccionado (Véase
Fig. 3.29).
Fig. 3.29

Objeto desplazado sólo en dirección horizontal y vertical, manteniendo la tecla Shift presionada.
ሳ Mover objetoS por propIedadeS de poSIcIóN
Otra forma de controlar el desplazamiento ordenado de los objetos seleccionados, es usando las
opciones de Posición del Panel Propiedades.
Las opciones del grupo Posición permiten un desplazamiento en los ejes X para un movimiento
horizontal y el eje Y para un desplazamiento vertical, estas distancias están en función al tamaño
del documento (Véase Fig. 3.30).

Fig. 3.30

3.5. CREACIÓN DE OBJETOS

Para crear escenarios Adobe Flash CS6 dispone de herramientas de dibujo, separadas en dos grupos:
elementos geométricos como rectángulos, círculos, polígonos y estrellas; además de trazos de línea
para lo cual se dispone de herramientas como el lápiz, línea, pincel entre otros.
La composición de estos elementos le permite crear diversos diseños, también por medio de la edición
de los mismos, cortando, estirando o curvando los objetos; además de colorearlos.

51
Guía Práctica Adobe Flash CS6

3.5.1. GEOMETRÍAS ESTÁNDAR (RECTÁNGULO, CÍRCULO...)

El primer grupo a utilizar es el de las geometrías


estándar, ubicadas en la barra de herramientas
en una lista desplegable, donde se encuentran
los elementos geométricos, cada uno de estos
compuestos por un contorno y su respectivo
relleno (Véase Fig. 3.31).
Este, como casi todas las demás herramientas,
se puede configurar antes de ser usado desde
el panel de propiedades.

Fig. 3.31

ሳ herraMIeNta rectáNgulo
Esta herramienta puede crear rectángulos o cuadrados perfectos, polígonos y estrellas. Se utiliza
arrastrando el cursor una vez presionado el clic izquierdo del mouse.
Para dibujar Rectángulos:
• Seleccione la herramienta Rectángulo.
• Antes de crear el objeto puede configurar el color, ancho y tipo de línea que tendrá el rectángulo
desde el Panel Propiedades o la Barra de Herramientas.
• Luego presione en un punto del escenario con un clic izquierdo y sin soltar arrastre el cursor
en diagonal hasta formar un rectángulo, dejando de presionar el cursor para definir el segundo
punto (Véase Fig. 3.32).
• Si se requiere crear un cuadrado, tiene que presionar la tecla Shift al momento de crear el
objeto con el método anterior.

Fig. 3.32

52
Se
sió 3
n Dibujo de objetos vectoriales

• Crear objetos usando Ajuste de Objetos:

Si el ajuste a objetos está activado, puede crear


rectángulos tomando como primer punto en el vértice o
arista de cualquier objeto como referencia de creación, de
igual forma para el segundo punto, así puede dibujar de
forma más ordenada (Véase Fig. 3.33).

Fig. 3.33

• Crear un rectángulo con esquinas redondeadas:


Así como puede configurar los colores y el ancho de trazo antes de dibujar los objetos, también
puede configurar el redondeo de las esquinas desde el panel de propiedades (Véase Fig. 3.34).
• Presionar el ícono de la herramienta rectángulo.
• Desplegar el panel de propiedades.
• En el grupo Propiedades de Rectángulo, incremente el valor de redondeo de las esquinas.
• Luego cree un rectángulo con el método anterior.

Fig. 3.34

Además, el valor del redondeo de esquinas puede tomar un valor negativo, esto produce
rectángulos con una curva opuesta en las esquinas (Véase Fig. 3.35).

Fig. 3.35

NOTA
Como se vio en el tema de selección, para editar las propiedades de color y ancho de trazo bastaba con
seleccionar el objeto y editar esas propiedades, pero lo que no se puede modificar es el redondeo que dio al
inicio; por tanto, este redondeo será permanente.

53
Guía Práctica Adobe Flash CS6

• Crear sólo Contornos o sólo Rellenos:


Para crear sólo contornos:
• Configure el color de Relleno desde el Panel de Propiedades o desde la barra de Herramientas.
• En el cuadro de color elija el Símbolo para anular la creación del relleno.
• Luego al crear el objeto sólo se crea su contorno (Véase Fig. 3.36).

Fig. 3.36

De igual manera puede anular la creación del contorno para sólo crear Rellenos.
ሳ herraMIeNta rectáNgulo SIMple
Este tipo de rectángulo se crea como el rectángulo anterior, pero la diferencia entre ambos es
que es paramétrico en el redondeo de sus esquinas, esto quiere decir que se puede editar su
redondeo antes y después de crearlo.
• Crear un Rectángulo paramétrico:
Cree un rectángulo con esta herramienta, notará que sus esquinas están resaltadas.
A diferencia de los objetos anteriormente vistos, este requiere un sólo clic sobre él para
seleccionarlo y editar sus parámetros de color, ancho de línea y redondeo de sus esquinas, a
diferencia del rectángulo anterior. Otra manera de redondear sus esquinas es arrastrando los
vértices que aparecen en las esquinas del rectángulo creado (Véase Fig. 3.37).

Fig. 3.37

54
Se
sió 3
n Dibujo de objetos vectoriales

Pero con este último método sólo se puede redondear las esquinas y no redondear en sentido
contrario.
NOTA
Al parecer este rectángulo sería más completo ya que es igual al anterior, además de redondear las
esquinas, pero más adelante verificará el porqué se utiliza el objeto no paramétrico, es decir, el primer
tipo de rectángulo.

ሳ herraMIeNta óvalo

Esta herramienta crea elipses y círculos. La


creación de estos elementos se da igual
que en los rectángulos, es decir, definiendo
dos puntos opuestos.
Para dibujar una Elipse con la herramienta
Óvalo:
• Seleccione la herramienta Óvalo.
• Antes de crear el objeto puede configurar
el color, ancho y tipo de línea que tendrá
el Óvalo. Fig. 3.38

• Luego presione en un punto del escenario con un clic izquierdo y sin soltar arrastre el cursor en
diagonal hasta formar una elipse, dejando de presionar el cursor para definir el segundo punto
(Véase Fig. 3.38).

• Para dibujar Círculos:


Si se requiere crear un círculo, tiene que presionar la tecla Shift al momento de crear el objeto
con el método anterior (Véase Fig. 3.39).

Fig. 3.39

55
Guía Práctica Adobe Flash CS6

• Crear objetos usando Ajuste de Objetos


Si el ajuste a objetos está activado, puede crear Óvalos tomando como primer punto en el vértice
o arista de cualquier objeto como referencia de creación, de igual forma para el segundo punto,
así puede dibujar de forma más ordenada (Véase Fig. 3.40).

Fig. 3.40

Como se puede ver en la imagen de la derecha, el círculo ha sido creado encajado en el interior
del cuadrado, apoyándose en los vértices del cuadrado.
• Para dibujar Óvalos desde su centro:

Si se requiere crear óvalos definiendo su


centro, luego su dimensión, presione la tecla
Alt al momento de crear el objeto con el
método anterior (Véase Fig. 3.41).

Fig. 3.41
• Para crear Círculos desde su centro:

Como en el caso anterior se deberá presionar la tecla Alt para crear el objeto desde su centro,
pero para que se forme un círculo también deberá presionar la tecla Shift (Véase Fig. 3.42).
De esta forma puede tratar de crear círculos concéntricos, dibujándolos unos sobre otros, pero
a la vez de tratar de mantener el mismo centro, ya que el rastreo del centro del círculo no está
definido en Flash.

Fig. 3.42

56
Se
sió 3
n Dibujo de objetos vectoriales

• Crear Círculos con Radio Interior:


Así como puede configurar los colores y el ancho
del trazo antes de dibujar los objetos, también
puede configurar el radio interior del círculo para
hacer un anillo desde el panel de propiedades
(Véase Fig. 3.43).

Fig. 3.43

• Crear Sectores Circulares:


Antes de crear los círculos también puede configurar los ángulos inicial y final (Véase Fig. 3.44).

Fig. 3.44

Además, puede configurar ambos parámetros para obtener círculos con radio interior y seccionado
(Véase Fig. 3.45).

Fig. 3.45

ሳ herraMIeNta óvalo SIMple


Este tipo de Óvalo es similar al
Rectángulo Simple, es decir, también
es un objeto paramétrico y se
puede manipular sus características
después de haberlo creado, como el
radio rnterior y los ángulos de sus
extremos. Además, la creación de
este óvalo simple es igual al anterior
(Véase Fig. 3.46). Fig. 3.46

57
Guía Práctica Adobe Flash CS6

ሳ herraMIeNta polyStar
La herramienta PolyStar ofrece opciones que permiten especificar el número de caras de un
polígono; puede utilizar también opciones para que la herramienta cree una estrella.
• Para crear un Polígono:
• Seleccione la herramienta PolyStar.
• Antes de crear el objeto puede configurar el color, ancho y tipo de línea que tendrá el Polígono.
• Luego presione en un punto del escenario con un clic para definir el centro del polígono y sin
soltar arrastre el cursor hasta definir el radio, dejando de presionar el cursor para especificar
el segundo punto (Véase Fig. 3.47).

Fig. 3.47

NOTA

Como por defecto se crea un objeto regular desde el centro, la presión del las
teclas Shift y Alt no tienen mayor implicancia como en los objetos anteriores.

• Para configurar el número de lados del


Polígono:

• Seleccione la Herramienta PolyStar.


• Luego despliegue el panel de
Propiedades y desde el grupo
Configuración de Herramienta
presione sobre el botón Opciones
(Véase Fig. 3.48).

Fig. 3.48

58
Se
sió 3
n Dibujo de objetos vectoriales

Desde el cuadro de Configuración, incremente o disminuya el número de lados del polígono


seleccionado por defecto, antes de crearlos (Véase Fig. 3.49).

NOTA
Una vez creado el polígono, ya no se puede
cambiar el número de lados porque no es un
objeto paramétrico.

Fig. 3.49

• Para crear una Estrella:

Desde el mismo cuadro de Configuración de PolyStar


puede cambiar el estilo de objeto a Estrella, siendo el
número de lados igual al número de puntas de la estrella
(Véase Fig. 3.50).

Fig. 3.50

La creación de la estrella es la misma que la del polígono (Véase Fig. 3.51).

Fig. 3.51

3.6. CREACIÓN DE LÍNEAS

3.6.1. HERRAMIENTA LÍNEA

La herramienta Línea es una de las más usadas, ya que permite crear contornos rectos con mucha
facilidad apoyado en el ajuste a objetos, este trazo se crea a partir de dos puntos.
Para dibujar un trazo de línea:
• Seleccione la herramienta Línea .
• Puede configurar el color, el ancho y tipo de línea antes o después de crear la línea.
• Luego presionar con un clic sobre el escenario, además mover el cursor hasta indicar una
distancia aproximada y la dirección con un segundo punto (Véase Fig. 3.52).
59
Guía Práctica Adobe Flash CS6

Fig. 3.52

ሳ para crear líNeaS coN ajuSte a objetoS:


Si la opción ajuste a objetos se encuentra activo, puede crear fácilmente contornos rectos uniendo
los puntos de la línea.
Como cada línea es individual y se crea a partir de dos puntos, puede crear varias líneas
coincidiendo en los extremos de la misma línea. De la misma forma puede crear contornos
cerrados coincidiendo los extremos de la figura a crear (Véase Fig. 3.53).

Fig. 3.53

ሳ para crear líNeaS rectaS:


Para crear líneas rectas mantenga presionada la tecla Shift, luego al indicar la dirección y distancia
del segundo punto notará como el trazo va en dirección con un intervalo de 45º (Véase Fig. 3.54).

Fig. 3.54

60
Se
sió 3
n Dibujo de objetos vectoriales

Si bien es cierto, esta forma de dibujar permite crear rápidamente objetos rectos e inclinados
45º, no obstante las líneas no tienen una distancia fija al crearse, por tanto al rodear una figura
no se puede precisar que cierre de forma exacta (Véase Fig. 3.55).

Fig. 3.55

Lo mejor en estos casos es terminar el dibujo cruzando las líneas para cerrarlas, de esta forma
objeto se podrá rellenar de color y eliminar los sobrantes.
NOTA

cuando los trazos de línea están unidos en sus vértices o están cruzadas, puede
picar dos veces en uno de ellos para seleccionar todo el contorno.

ሳ para crear líNeaS apoyáNdoSe eN otroS objetoS:


Si la herramienta ajuste a objetos se encuentra activa, esta reconoce los vértices de los objetos,
además de los puntos medios y cualquier punto perteneciente a la arista de un objeto para poder
apoyarse en ellos y así permitir un dibujo más dinámico y rápido.
Para la imagen siguiente, se tiene una línea horizontal como base, luego se dibujó un par de
líneas hacia el extremo y el punto medio, esta última línea divide ahora en dos a la línea
horizontal, teniendo está para el siguiente dibujo dos puntos medios adicionales, ya que la línea
anterior ayudó a crear una nueva división (Véase Fig. 3.56).

Fig. 3.56

61
Guía Práctica Adobe Flash CS6

De igual forma cree objetos geométricos conocidos sin relleno y si los crea con relleno simplemente
elimínelos. Luego cree líneas tomando como primer punto un punto conocido de las geometrías
y termine de ubicar el segundo punto también en un punto conocido de las geometrías como
vértices, aristas o algún lugar del sus contornos (Véase Fig. 3.57).

Fig. 3.57

De esta forma puede crear con mayor rapidez objetos sin necesidad todavía de editarlos para
obtener objetos más complejos.
ሳ coNfIgurar laS propIedadeS de la líNea:
Como en los objetos anteriores puede configurar las características de las líneas antes o después
de crearlas, como el color, ancho y tipo de línea (Véase Fig. 3.58).

Fig. 3.58

NOTA

estos parámetros son comunes a todos los tipos de trazos como de las
Herramientas Lápiz, Pluma y los Contornos de los objetos geométricos.

ሳ coNfIgurar el extreMo y uNIóN de líNeaS:


Cuando las líneas tienen un ancho de línea apreciable claramente, los extremos y las uniones se
hacen más visibles, teniendo estas varias formas (Véase Fig. 3.59).
Seleccione unos trazos de línea y despliegue el panel de Propiedades y configure los valores de
Extremo y Unión de línea:

62
Se
sió 3
n Dibujo de objetos vectoriales

Fig. 3.59

NOTA

estos parámetros son comunes a todos los tipos de trazos como de las
Herramientas Lápiz, Pluma y los Contornos de los objetos geométricos.

3.7. HERRAMIENTA LÁPIZ

La herramienta Lápiz crea un trazo de línea continua, formando rectas o curvas. Para dibujar líneas y
formas con el Lápiz, este se utiliza de manera similar al lápiz real, es decir, a mano alzada.
Al aplicar la herramienta lápiz. El trazo se ve defectuoso mientras los estamos dibujando, pero cuando
suelta el ratón, se ajusta automáticamente a lo que Flash entiende que debería ser, utilizando su
función “Reconocimiento de formas”.
Para aplicar un suavizado o enderezamiento a las líneas y las formas según se vayan dibujando, basta
con seleccionar el modo de dibujo para la herramienta Lápiz.
ሳ para dIbujar coN la herraMIeNta lápIz:
• Seleccione la herramienta Lápiz.
• Configure el color, ancho o tipo de línea.
• Seleccione un modo de dibujo de las opciones de la barra de
herramientas (Véase Fig. 3.60).

Para dibujar con cualquiera de los modos, arrastre el cursor sin dejar de
presionar el clic izquierdo, como cuando dibuja a mano alzada.
Fig. 3.60

63
Guía Práctica Adobe Flash CS6

ሳ para dIbujar líNeaS eNderezadaS:


La opción Enderezar es la que mayor cantidad de corrección pone en la línea que está dibujando.
Configure el modo de dibujo a Enderezar, este se encuentra activo por defecto.
Cree figuras simples, notará que estas se enderezan a las formas que más se parezcan, como
rectas y curvas. Como se puede ver, si la forma tiene la tendencia circular, creará círculos fácilmente
o rectas si la dirección es más pronunciada (Véase Fig. 3.61).

Fig. 3.61

ሳ para dIbujar líNeaS SuavIzadaS:


La opción Suavizar. Se encarga de suavizar el perfil de línea
que estamos creando, rectificando la figura en mucha menor
proporción que la opción Enderezar (Véase Fig. 3.62).

Fig. 3.62

ሳ para dIbujar líNeaS coN tINta:


La opción Tinta es la que menos proporción de corrección
produce, aunque suaviza en un buen grado el perfil de la
línea (Véase Fig. 3.63).
Fig. 3.63

El inconveniente del uso de la herramientas Lápiz, radica en


que la forma de dibujar se da por mano alzada y como la
precisión del dibujo con el mouse no es la misma que la de
dibujar con un Lápiz real, es difícil crear contornos de línea
con una buena definición.
Una solución para el diseñador, sería usar un tablero
electrónico de dibujo, ya que estos vienen con un puntero en
forma de lápiz con diversas características para un dibujo a
mano alzada (Véase Fig. 3.64).
Fig. 3.64

64
Se
sió 3
n Dibujo de objetos vectoriales

Este dispositivo es de uso amplio en cualquier


software de diseño, con una mayor aplicación en el
software Photoshop CS6 (Véase Fig. 3.65).

Dibujo realizado con tablero digital usando las


herramientas Lápiz y Pincel.

Fig. 3.65

ሳ deShacer y rehacer accIoNeS


Para deshacer o rehacer acciones en objetos individuales o en todos los objetos del documento
actual, utilice los comandos Deshacer o Rehacer desde el menú Edición > Deshacer (Control + Z)
o Edición > Rehacer (Control + Y). De forma predeterminada, estos comandos se aplican a todo el
documento.

3.8. RELLENAR CONTORNOS

Una vez que ha dibujado el contorno del diseño, el


siguiente paso es rellenarlo de color. Para esta primera
etapa se enseñará sólo como rellenar fácilmente los
contornos, ya que en otro capítulo se verá como se
personaliza completamente los rellenos degradados
(Véase Fig. 3.66).

Fig. 3.66

65
Guía Práctica Adobe Flash CS6

3.9. HERRAMIENTA CUBO DE PINTURA

La herramienta Cubo de pintura rellena con color áreas cerradas. Puede tanto rellenar áreas vacías
como cambiar el color de áreas ya pintadas. Puede utilizar colores sólidos, rellenos con degradado o
de mapa de bits.
ሳ para relleNar coNtorNoS cerradoS:
Cuando un contorno se encuentra completamente cerrado, este no presenta problemas para
rellenarlo.

• Seleccione la herramienta Cubo de pintura .


• Configure el color y tipo de relleno desde la barra de herramientas o el panel de propiedades
(Véase Fig. 3.67).

Fig. 3.67

• Luego presione con un clic en el interior de un contorno cerrado para rellenarlo (Véase Fig.
3.68).

Fig. 3.68

66
Se
sió 3
n Dibujo de objetos vectoriales

Puede cambiar el color de Relleno para cada contorno, o si este color se repite en diversos
contornos, puede rellenar de forma continua con el mismo color (Véase Fig. 3.69).

Fig. 3.69

Si un contorno ya tiene relleno, este se puede reemplazar por otro relleno utilizando nuevamente
sobre él, el Cubo de pintura con un color diferente.
ሳ para relleNar coNtorNoS poco cerradoS:
Normalmente se aplica a formas cerradas, pero Flash es
bastante indulgente en la interpretación del concepto cerrado
de las formas. Admite que la línea del contorno puede no estar
cerrada del todo y tener algún hueco. Flash aplicará el relleno
en estos casos a discreción seleccionando la opción de este
modificador que más convenga (Véase Fig. 3.70). Fig. 3.70

Las opciones para definir el hueco que desea se admita. Estas son: No cerrar huecos, Cerrar
huecos pequeños, Cerrar huecos medios y Cerrar huecos grandes (Véase Fig. 3.71).

Fig. 3.71

NOTA

Al ampliar o reducir la imagen con la lupa, cambia el tamaño aparente


de los huecos, pero no el real. Si los huecos son demasiado grandes, puede
ser necesario cerrarlos a mano.

67
Guía Práctica Adobe Flash CS6

3.10. HERRAMIENTA DECO

La herramienta Lápiz Deco es también una herramienta de relleno que crea un patrón de objetos
personalizados, pero para poder personalizar completamente el patrón se requieren conocimientos
acerca del uso de Símbolos gráficos que se verán en capítulos posteriores.
ሳ para relleNar coNtorNoS coN patróN deco:
• Seleccione la herramienta Deco .
• Despliegue el panel de propiedades,
luego elija entre los efectos de Dibujo.
La nueva Herramientas Deco de Adobe
Flash Professional CS6 es el Relleno de
Cuadrícula (Véase Fig. 3.72).

Fig. 3.72

• Luego presione con un clic sobre un contorno cerrado y el patrón comenzará a crecer en el interior
(Véase Fig. 3.73).

Fig. 3.73

NOTA

El tercer tipo de patrón Pincel de Simetría, no toma en cuenta los


contornos, es decir, no crea rellenos, sino crea un dibujo radial de patrón
repetitivo de diferentes radios.

68
Se
sió 3
n Dibujo de objetos vectoriales

También puede configurar la escala del patrón antes de crearla para definir el tamaño de la muestra
(Véase Fig. 3.74).

Fig. 3.74

Escala 150% Escala 100% Escala 50%


Si el contorno tiene un hueco, el patrón saldrá del límite del contorno por la zona abierta. Esta no
dejará de crecer hasta los límites del área de trabajo si no presiona escape (Véase Fig. 3.75).

Fig. 3.75

Si utiliza la herramienta Deco sobre un objeto que ya tiene relleno, este se sobrepondrá sobre el ya
existente (Véase Fig. 3.76).

NOTA

A diferencia del cubo de


pintura esta herramienta
no crea un contorno al
presionar sobre objetos sin
contorno.

Fig. 3.76

69
Guía Práctica Adobe Flash CS6

3.11. HERRAMIENTA BOTE DE TINTA

La herramienta Bote de tinta permite cambiar el color, la anchura y el estilo de trazo de las líneas o
añadir contornos a los objetos sin contorno. Ahora en esta versión también se puede aplicar colores
degradados a las líneas.
Esta herramienta es útil porque permite cambiar las propiedades de todo un contorno, sin necesidad
de seleccionar todas las líneas que forman el contorno, sino sólo con aplicar la herramienta a una línea
del contorno.
ሳ para caMbIar laS propIedadeS de loS coNtorNoS:
• Seleccione la herramienta Bote de Tinta.
• Luego configure el color, el ancho y el tipo de trazo que usará.
• Si sólo se trata de un contorno sin relleno, puede hacer un clic izquierdo sobre cualquiera de los
bordes del contorno y automáticamente todo el contorno cambiará (Véase Fig. 3.77).

Fig. 3.77

ሳ para añadIr uN coNtorNo a loS objetoS:


Según el avance de su diseño se
encontrará con algunos elementos que
creó sin contorno o los eliminó por alguna
razón. Para añadir contornos a un objeto
sólo basta con aplicar la herramienta
Bote de tinta sobre un relleno (Véase Fig.
3.78).
Fig. 3.78

Si el objeto es una imagen como un Mapa de Bits, estos generalmente no poseen contorno, a estos
también se les puede aplicar la herramienta Bote de tinta para que tengan un contorno (Véase Fig. 3.79).

Fig. 3.79

70
Se
sió 3
n Dibujo de objetos vectoriales

3.12. HERRAMIENTA CUENTA GOTAS

Con la herramienta Cuenta Gotas puede copiar las características del relleno o de los contornos como el
color, el ancho de línea y el tipo de contorno. Una vez copiadas estas características las puede aplicar
a otros objetos para que posean las mismas características.
ሳ para copIar laS caracteríStIcaS del
relleNo:
• Seleccione la Herramienta Cuenta
Gotas.
• Sitúe el cursor sobre un relleno y
presione una vez sobre ella para
copiar sus características (Véase
Fig. 3.80). Fig. 3.80

Luego automáticamente se habilitará la herramienta Cubo de Pintura, para aplicar las características
de relleno a otros objetos. Repita este procedimiento para completar la figura, también se procederá
de igual forma pero esta vez presionando una vez sobre un contorno para copiar sus propiedades y
aplicar las características del contorno a otras líneas (Véase Fig. 3.81).

Fig. 3.81

3.13. HERRAMIENTAS CON LA HERRAMIENTA SELECCIÓN

Entre otra de las aplicaciones de la herramienta Selección , se encuentra la de cortar objetos mediante
dos métodos: por selección y por intersección de objetos, de este modo puede crear figuras aun más
complejas y dibujar con mayor rapidez.
ሳ cortar objetoS INterSecaNdo líNeaS:
Al interceptar líneas, estas dividen un simple trazo en dos, tres o más elementos independientes.
Una vez interceptadas las líneas puede seleccionar las divisiones creadas, para moverlas o
simplemente eliminarlas (Véase Fig. 3.82).

71
Guía Práctica Adobe Flash CS6

Fig. 3.82

La intersección también puede ser entre líneas y objetos, ya que la herramienta línea es fácil de
crear, le puede servir para formar intersecciones rápidamente. Seleccione y elimine las intersecciones
exteriores para formar las figuras siguientes (Véase Fig. 3.83).

Fig. 3.83

ሳ cortar objetoS INterSecaNdo geoMetríaS coN relleNo:


Este tipo de operación se realiza entre dos objetos con relleno, al interceptar dos de estos elementos
se puede crear una nueva geometría por el corte que se da después de separarlos nuevamente.
Crear una sustracción por intersección:
• Cree dos geometrías con diferente color de
contorno para que note una diferencia (Véase
Fig. 3.84).

Fig. 3.84

• Para un mejor entendimiento llame a cada uno de los objetos,


operador A y operador B. Luego desplace todo el objeto A
(Relleno y Contorno) intersecándolo con el objeto B como se
muestra a continuación (Véase Fig. 3.85).

Fig. 3.85

72
Se
sió 3
n Dibujo de objetos vectoriales

• Luego deseleccione el operador A que


desplazó.
• Nuevamente seleccione el operador A
completamente y sepárelo del objeto
anterior (Véase Fig. 3.86).

Fig. 3.86

Al realizar esta última acción se produce una operación de sustracción A – B.


También notará que la estructura que acaba de formar no tiene un contorno completo, esto es debido
que al sustraer el operador A, seleccionó completamente el objeto.
ሳ crear uNa SuStraccIóN MaNteNIeNdo el coNtorNo del operador b:
Para que la estructura formada tenga todo su contorno de línea completa, retire el operador A
por partes, ya que al existir una intersección como en el caso anterior las líneas se dividen al
interceptarse (Véase Fig. 3.87).
• Seleccione sólo el relleno del operador A con un clic y retírelo o elimínelo.

Fig. 3.87

• Seleccione con un clic la parte inferior del contorno del círculo, como está intersecado con el
contorno del rectángulo este ya se encuentra dividido.
• Luego mueva la línea o elimínela para crear la nueva estructura con su contorno completo
(Véase Fig. 3.88).

Fig. 3.88

73
Guía Práctica Adobe Flash CS6

• También puede realizar el mismo procedimiento con varios objetos interceptados como
operadores A. También puede crear huecos en las geometrías interceptando completamente el
operador A dentro del operador B (Véase Fig. 3.89).

Fig. 3.89

ሳ cortar eNtre líNeaS y objetoS coN relleNo:


• Tomando en cuenta los dos métodos anteriores,
también se puede cortar objetos con Relleno a partir
de la intersección con Trazos de Líneas, contornos
de objetos y trazos con la herramienta Línea, que al
final, todas estas tienen la misma propiedad (Véase
Fig. 3.90).

Fig. 3.90

ሳ cortar objetoS coN MarcoS de SeleccIóN:


• Otro método para cortar los objetos, se puede dar
realizando marcos de selección, encerrando parte
del objeto dentro del marco, tomando en cuenta
que estos marcos son rectangulares.
• Este método de cortar a diferencia de los otros,
deja el objeto cortado sin parte de su contorno,
pero permite un corte rápido (Véase Fig. 3.91).

Fig. 3.91

NOTA

Para seleccionar distintos objetos a la vez, mantenga presionada


la tecla Shift e ir seleccionando objeto por objeto.

74
Se
sió 3
n Dibujo de objetos vectoriales

Este tipo de corte se puede aplicar también a trazos de Línea y objetos sin relleno (Véase Fig.
3.92).

NOTA

Para evitar modificar accidentalmente las formas


y las líneas al interceptarlas, puede agrupar las
formas o bien utilizar capas para separarlas.

Fig. 3.92

3.14. ESTIRAR Y CURVAR OBJETOS CON LA HERRAMIENTA SELECCIÓN

Puede que el lector haya visualizado las diferentes formas que toma el cursor cuando la herramienta
selección se encuentra activa y se desplaza por el escenario encima de un objeto. Si no es así, vaya al
escenario y dibuje cualquier objeto.
Al pasar el cursor por encima del objeto, aparece junto a
la flecha del mismo un ícono de navegación con las tres
formas siguientes dependiendo de dónde se ubique (Véase
Fig. 3.93).
Fig. 3.93
Estas formas permiten estirar, curvar o mover los objetos, este último ya se ha realizado con anterioridad
según el método de selección que se aplicó.
ሳ eStIrar vértIceS de líNeaS y objetoS coN relleNo:
Para remodelar una línea (objeto) o el contorno de una forma, puede arrastrar cualquier punto de la
línea mediante la herramienta Flecha. El puntero cambia la forma para indicar el tipo de modificación
que se puede realizar en la línea o relleno.
ሳ para caMbIar laS dIMeNSIoNeS de uNa líNea:
• Seleccione la herramienta de Selección.
• Acerque el cursor a la esquina del trazo,
notará que aparece un símbolo al lado de
la flecha.
• Luego presione y arrastre el vértice para
cambiarlo de posición.
• Al realizar esta acción varía la distancia
y el ángulo de la línea original según se Fig. 3.94
requiera (Véase Fig. 3.94).
75
Guía Práctica Adobe Flash CS6

ሳ para eStIrar vértIceS coMuNeS:


Cuando las líneas tienen un vértice en común, este vértice se puede estirar afectando a ambas
líneas cambiando sus dimensiones y posición, no son sólo aplicables a los objetos predefinidos,
sino a cualquier cruce de líneas creadas con la herramienta Línea o Lápiz (Véase Fig. 3.95).

Fig. 3.95

Si los objetos están compuestos


por Contorno y Relleno, también
se pueden estirar sus vértices,
para estos casos el relleno se
acomodará al espacio en el que
queda encerrado por el contorno
estirado (Véase Fig. 3.96). Fig. 3.96

3.15. CURVAR LÍNEAS Y OBJETOS CON RELLENO

Flash ajusta la curva del segmento de la línea para acomodarla a la posición del punto desplazado.
Pasando el cursor cerca de la línea (lejos de los vértices) o cerca de la línea, aparece junto al cursor
una pequeña curva, indicativa de que está en el estado reformar curva o línea.
ሳ para curvar uNa líNea:
• Seleccione la herramienta Selección.
• Acerque el cursor a la mitad del trazo, notará que aparece un símbolo al lado de la flecha.
• Luego presione y arrastre la línea para cambiarla de posición.
• Al realizar esta acción añade curvatura a la línea sin variar la posición de los extremos de la línea
(Véase Fig. 3.97).

Fig. 3.97

76
Se
sió 3
n Dibujo de objetos vectoriales

La cantidad de curvatura que tendrá la línea depende de la lejanía o cercanía del arrastre de la línea.
Este mismo procedimiento se puede aplicar a líneas que tengan vértices comunes con otras líneas,
ya que cada línea para este efecto se considera independiente.
También puede alterar completamente la curvatura de un objeto compuesto de varias líneas,
curvándolos de uno en uno. Puede ser hacia el interior del objeto o también hacia el exterior, así crear
fácilmente un diseño diferente (Véase Fig. 3.98).

Fig. 3.98

Si los objetos están compuestos por Contorno y Relleno, también se puede curvar sus lados o aristas,
para estos casos el relleno se acomodará al espacio en el que queda encerrado por el contorno
curvado (Véase Fig. 3.99).

Fig. 3.99

Si la forma es sólo el relleno, también se aplica el mismo procedimiento en sus aristas o lados.

3.16. HERRAMIENTA PINCEL

La herramienta Pincel dibuja trazos similares


a los de un pincel. Permite crear efectos
especiales, incluidos efectos caligráficos.
Puede elegir una forma y un tamaño de pincel
con las opciones de la herramienta Pincel
(Véase Fig. 3.100).

Fig. 3.100

77
Guía Práctica Adobe Flash CS6

Como esta es una herramienta a mano alzada, la precisión al dibujar es un poco ineficiente. Para este
tipo de herramientas es recomendable el uso de tableros electrónicos que vienen con un puntero lápiz
de dibujo, que permite acercarse al trazo de un dibujo real.
Si usa tableros electrónicos de dibujo la presión al dibujar puede variar el espesor del trazo de pincel.
NOTA

La herramienta pincel no pinta sobre mapas de bits. Solamente


sobre formas Vectoriales.

ሳ para pINtar coN la herraMIeNta pINcel:


• Seleccione la herramienta Pincel.
• Elija el color de Relleno que tendrá el trazo.
• Elija un tamaño y una forma de pincel desde las opciones de la Barra de herramientas.
• Luego arrastre el cursor sobre el escenario para crear un trazo (Véase Fig. 3.101).

Forma del Pincel

Forma del Pincel


Fig. 3.101

Este trazo de Pincel crea un objeto formado sólo por el relleno, por tal motivo el color del Pincel
depende del color de Relleno de los objetos.
Con este además puede crear composiciones y diseños con el concepto del trazo de pinceladas
(Véase Fig. 3.102).

Fig. 3.102

Dibujo creado apoyado en el uso de un tablero electrónico digital y su puntero lápiz.


78
Se
sió 3
n Dibujo de objetos vectoriales

3.16.1. TAMAÑO DEL TRAZO DE PINCEL

Antes de aplicar el trazo de pincel en el escenario,


puede configurar el tamaño del trazo desde las
opciones de la barra de herramientas mientras
el pincel está activo. Puede escoger hasta 8
tamaños diferentes de pincel (Véase Fig. 3.103).

Fig. 3.103

Según la distancia y la presión del trazado en


tableros electrónicos, el ancho del trazo puede
variar.

3.16.2. FORMA DEL TRAZO DE PINCEL

Antes de aplicar el trazo de pincel en el escenario,


puede configurar la forma del trazo desde las opciones
de la barra de herramientas mientras el pincel está
activo. Puede escoger hasta 9 formas de pincel que
le permiten simular los trazos reales por la presión
o por el arrastre de los pinceles reales (Véase Fig.
3.104).

Fig. 3.104

Según el desplazamiento del trazo y la presión de la misma, la forma puede variar.


Así según la práctica puede crear escenarios simples como el siguiente. Además, puede rellenar los
espacios encerrados con la herramienta Cubo de Pintura para crear tramas más complejas (Véase
Fig. 3.105).

Fig. 3.105

79
Guía Práctica Adobe Flash CS6

En realidad para crear un diseño que se vea llamativo, tiene que mezclar el uso de los comandos de
creación, como geometrías, líneas y pinceles (Véase Fig. 3.106).

Fig. 3.106

También puede utilizar la misma herramienta Cubo de Pintura para reemplazar el color del trazo de
Pincel, ya que el color base del Pincel es el de Relleno y no de Línea.

3.16.3. OPCIONES DEL MODO DE PINTURA

Las opciones del modo de pintura se muestran en la barra de Modos de pintura


herramientas, el menú emergente aparece cuando se hace un
clic izquierdo sobre el botón de modo (Véase Fig. 3.107).

Fig. 3.107

Es importante entender bien, los resultados de aplicar los diferentes modos de pintura porque cuando
se está diseñando podemos llegar a confusiones molestas si no se conoce bien esta herramienta.

Pintar Normal Pintar Detrás Pintar Dentro


Original Relleno de Pintura Pintar Selección

Fig. 3.108

Al aplicar los diferentes modos de pintura a un objeto (estrella) con relleno: Imagen original, Pintar
normal, Pintar detrás, Rellenos de pintura, Pintar selección y Pintar dentro.

80
Se
sió 3
n Dibujo de objetos vectoriales

• Cuando se pinta con el modo Pintar Normal, toda el área por donde pasa el Pincel queda “pintada”.
• El modo Rellenos de pintura pinta rellenos y áreas vacías, pero no afecta a las líneas.
• Con el modo Pintar detrás, la imagen queda intacta y por encima del área pintada.
• El modo Pintar Selección pinta rellenos seleccionados.
• Con el modo Pintar dentro se pinta dentro de una forma cerrada. Se pinta en el área donde se
ha iniciado el pincel y nunca afecta a las líneas. Si se comienza el trazado del pincel en un área
vacía no afectará a ninguna área de relleno.
NOTA

Si utiliza pintado con un color degradado, hay que comenzar a pintar con el relleno bloqueado en
la figura donde queramos que aparezca el centro del degradado luego pintar las demás.

3.17. CONTROL DE LÍNEAS VECTORIALES CON LA HERRAMIENTA PLUMA

Si bien es cierto, con las herramientas de dibujo


vistas hasta el momento, se pueden crear distintas
formas y diseños. Pero con la herramienta Pluma
tiene mayores posibilidades de controlar la forma de
las líneas, ya que con estas se puede definir cada
tramo de dibujo, creando líneas rectas o curvas
con una mayor precisión. Como la pluma no es
una herramienta de dibujo a mano alzada, permite
dibujar poco a poco con puntos bien definidos
(Véase Fig. 3.109).

Fig. 3.109

Se podría decir que esta es una de las herramientas principales del dibujo vectorial, ya que con esta
puede crear cualquier tipo de figuras en un tiempo relativo, ya que esto depende de la práctica del
usuario.

3.17.1. HERRAMIENTA PLUMA

Para dibujar trazados precisos como líneas rectas o bien como suaves curvas, puede utilizar la
herramienta Pluma, para lo cual debe crear puntos de anclaje (puntos de la línea que determinan
la longitud de los segmentos individuales de la línea). Tiene varias aplicaciones, como son crear
segmentos rectilíneos, curvas suaves, ajustar el ángulo y la longitud de los segmentos rectos, así
como la pendiente de los segmentos curvos.

81
Guía Práctica Adobe Flash CS6

ሳ MétodoS de creacIóN coN pluMa:


Con la herramienta Pluma puede crear tres tipos de trazos, una de líneas rectas, otra de líneas
curvas y una que mezcla los dos casos anteriores.
Para dibujar líneas rectas con la herramienta Pluma:
• Seleccione la herramienta Pluma.
• Coloque el puntero en el escenario y haga clic para definir el primer punto de anclaje.
• Vuelva a hacer clic para indicar dónde desea que termine el primer segmento de la línea recta.
• Siga haciendo clic para crear más segmentos rectos (Véase Fig. 3.110).

Fig. 3.109

3.17.2. TRAZO DE LÍNEAS CURVAS

Puede crear curvas arrastrando la herramienta Pluma en la dirección en la que desea dirigir la
curva para crear el primer punto de anclaje y arrastrando a continuación la herramienta Pluma en la
dirección opuesta para crear el segundo punto de anclaje.
Al utilizar la herramienta Pluma:
Para crear un segmento curvo, los puntos de anclaje del
segmento de línea muestran los selectores de tangentes. La
pendiente y la longitud de cada selector de tangente determinan
la pendiente y la altura, o la profundidad de la curva. Al mover
los selectores de tangentes cambian las formas de las curvas
del trazado (Véase Fig. 3.111).

Fig. 3.111

82
Se
sió 3
n Dibujo de objetos vectoriales

ሳ para dIbujar uN trazado curvo:


• Seleccione la herramienta Pluma .
• Coloque la herramienta Pluma en el punto del escenario donde desee que empiece la curva y
mantenga presionado el botón del ratón.
• Arrastre en la dirección en la que desea dibujar el segmento curvo (Véase Fig. 3.112).

Fig. 3.112

• Conforme vaya arrastrando, aparecerán los selectores de tangentes de la curva.


• Suelte el botón del ratón.
• La longitud y la pendiente de los selectores de tangentes determinan la forma del segmento
curvo. Más tarde, puede mover los selectores de tangentes para ajustar la curva.
• Coloque el puntero donde desea que finalice el segmento curvo, mantenga presionado el botón
del ratón y arrastre en la dirección opuesta para finalizar el segmento.
• Para dibujar el siguiente segmento de la curva, coloque el puntero donde desea que finalice el
siguiente segmento y arrástrelo lejos de la curva (Véase Fig. 3.113).

NOTA

Al finalizar una línea curva o recta, tal vez no se


adecue a lo que desea, entonces puede agregar más
nodos en cualquiera de los segmentos de la línea o
modificar la forma de los segmentos.

Fig. 3.113

ሳ para crear líNeaS rectaS y curvaS:


• Para crear Líneas Rectas y Curvas basta con
mezclar los dos métodos anteriores, alternando los
procedimientos según la forma que se requiera crear
(Véase Fig. 3.114).

Fig. 3.114

83
Guía Práctica Adobe Flash CS6

ሳ edItar la poSIcIóN de loS vértIceS y taNgeNteS coN la herraMIeNta Sub-SeleccIóN


Esta herramienta es muy útil cuando se requiere modificar un segmento, ya sea una línea o una curva.
En caso de un segmento (recto) de una línea, se puede modificar el ángulo y la longitud del
segmento, trasladando el punto de anclaje del segmento a otro lugar.
En caso de un segmento curvo, ya sea cerrada o abierta se puede trasladar el punto de anclaje de
la curva a otro lugar (Véase Fig. 3.115).

Fig. 3.115

El punto de anclaje a se ha trasladado a la situación a´ en el segmento rectilíneo de la línea,


utilizando la tangente que se ha formado en el punto de anclaje con la primera modificación.

Fig. 3.116

NOTA

Se puede observar que toda la curva, aunque esté realizada con la


herramienta Óvalo perfectamente, tiene puntos de anclaje. Esto es
una consecuencia de la técnica de imagen vectorial. Puede ser una
ventaja o desventaja según la situación en que nos encontremos.

3.17.3. EDICIÓN DE LÍNEAS CON LA HERRAMIENTA PLUMA

Para agregar o quitar más nodos:


• Seleccionar la Herramienta Pluma.
• Presionar sobre la línea, el cursor cambia de forma dando la posibilidad de agregar, eliminar o
convertir un nodo curvo a recto (Véase Fig. 3.117).
84
Se
sió 3
n Dibujo de objetos vectoriales

Convertir un nodo curvo a recto Agregar

Eliminar

Fig. 3.117

Al eliminar los vértices de una línea recta o curva, mediante la aplicación de la herramienta pluma
haciendo clic en los vértices, como quiera esta herramienta presentan ciertas dificultades de manejo
al comienzo; se pide al lector que realice ejercicios (Véase Fig. 3.118).

Fig. 3.118
NOTA

Antes de realizar las líneas puede utilizar la opción Dibujo de


objeto, que también es una opción de esta herramienta.

3.18. TRANSFORMACION LIBRE

Se puede utilizar la herramienta Transformación libre para transformar objetos, grupos, instancias o
bloques de texto libremente. También se pueden realizar transformaciones individuales o combinar
varias transformaciones, como el movimiento, la rotación, la escala, el sesgo y la distorsión.
Esta transformación por defecto hace las modificaciones de Escalar, Rotar y Sesgar a la vez (Véase
Fig. 3.119).

Fig. 3.119

85
Guía Práctica Adobe Flash CS6

Aplicar los diferentes modos de transformación libre tendremos: el objeto normal, el escalado, el
rotado y el sesgado. Opciones de transformación libre (Véase Fig. 3.120).

Rotar y Sesgar

Escalar Distorsionar

Envoltura

Fig. 3.120

Cuando es seleccionado el botón de Rotar y sesgar con un objeto ya previamente seleccionado,


aparecen en los extremos del mismo los selectores de la rotación, al mismo tiempo al poner el cursor
en una de las esquinas, se convierten en el ícono de rotación. Arrastrando con el cursor una esquina
del objeto con un movimiento circular, se obtiene la deseada rotación “visual”. Se dice visual porque
ya se estudirá otra forma más precisa de rotar en el escenario (Véase Fig. 3.121).

Fig. 3.121

Cuando es seleccionado el botón de Escalar con un objeto ya previamente seleccionado, cualquier


objeto del escenario es susceptible de ser escalado (en ambos sentidos, horario y anti-horario) con
la transformación libre. La opción de Escalar de la herramienta transformación libre, presionando Shift
es Uniforme (Véase Fig. 3.122).

Fig. 3.122

86
Se
sió 3
n Dibujo de objetos vectoriales

Cuando es seleccionado el botón de Envoltura, con un objeto ya previamente seleccionado, aparecen


los selectores normales y circulares estos dan la posibilidad de transformar los objetos, arrastrando
los selectores circulares a la forma deseada y los selectores cuadrados pueden cambiar el tamaño de
la forma. La opción de Envoltura de la herramienta transformación libre (Véase Fig. 3.123).

Fig. 3.123

NOTA

La palabra escalar hay que tomarla en un sentido de “aplicar una


escala” y no en el sentido literario de “aumentar”.

Cuando es seleccionado el botón de Distorsión con un objeto ya previamente seleccionado, aparecen


los selectores y tan solo tenemos que cambiar sus posiciones. Se puede lograr el efecto perspectiva.
La opción de Distorsión de la herramienta transformación libre.

Fig. 3.124

NOTA

La herramienta Transformación Libre no puede transformar símbolos, mapas de bits,


objetos de vídeo, sonidos, degradados ni texto. Si una selección múltiple contiene alguno
de estos elementos, únicamente se distorsionarán los objetos de forma. Para transformar
texto, en primer lugar convierta los caracteres en objetos de forma.

87
n
s ió
4

Se
DISTRIBUCIÓN DE GRUPOS,
CAPAS Y TEXTO

4.1. DISTRIBUCIÓN DE OBJETOS

A medida que se incrementa la cantidad de elementos que componen el escenario, se presentan


problemas en la distribución de los objetos. Como el hecho de que los objetos interceptados de forma
accidental se corten, una forma práctica para que esto no ocurra sería que los objetos estén agrupados
o estar distribuidos entre capas. La distribución de los objetos es importante también para crear
animaciones, ya que cuando se crea una animación, esta afecta a todos los objetos que se encuentran
en una capa.
Por último, la distribución de los objetos permite crear una escena ordenada y por consiguiente una
mayor eficiencia en la creación de escenarios y animaciones complejas.

4.2. AGRUPAR OBJETOS

Para poder manipular los elementos como un único objeto, debe agruparlos. Por ejemplo, después
de crear un dibujo, agrupe los elementos del dibujo para facilitar la selección y el desplazamiento del
mismo como un todo.
Al seleccionar un grupo, el inspector de propiedades visualiza las coordenadas X e Y del grupo y sus
dimensiones en pixeles.
Se pueden editar grupos sin desagruparlos. También se puede seleccionar un solo objeto de un grupo
para editarlo, sin desagrupar los demás objetos (Véase Fig. 4.1).
ሳ para agrupar objetoS:
• Seleccione los objetos que desea agrupar. Puede
seleccionarse formas, otros grupos, símbolos,
texto, etc.

Fig. 4.1

89
Guía Práctica Adobe Flash CS6

• Luego seleccione el menú Modificar y de la lista elija Agrupar (Véase Fig. 4.2).

Fig. 4.2

• Para seleccionar los objetos ahora agrupados sólo se requiere presionar una sola vez sobre este,
luego puede desplazarlos o transformarlo como un todo.
• Otra manera de agrupar, se da seleccionando los objetos y luego presionar la combinación de
teclado Control + G.
• Cuando los objetos se encuentran agrupados, estos no cortan a otros objetos al interceptarlos
como cuando se encuentran sueltos (Véase Fig. 4.3).

Fig. 4.3

90
Se
sió 4
n Distribución de grupos, capas y texto

4.2.1. EDITAR GRUPOS

Al seleccionar un grupo, este se puede desplazar como un todo. Además. en el panel de propiedades
sólo aparecen las coordenadas de posición y dimensiones del grupo tomado como un objeto rectangular
(Véase Fig. 4.4).

Fig. 4.4

Si los objetos se encuentran agrupados no se puede editar directamente las características de los
objetos que componen el grupo.
ሳ para edItar uN grupo:
• Active la herramienta Selección.
• Luego presione dos veces sobre el grupo a editar (Véase Fig. 4.5).

Fig. 4.5

91
Guía Práctica Adobe Flash CS6

Notará que el espacio de trabajo cambia, mostrándose sólo resaltado los elementos que componen
el grupo.
Otra forma de saber que no se encuentra en el escenario anterior, sino dentro del grupo, es
observar la esquina superior izquierda del escenario, donde se indica el nivel donde se encuentra,
que es el del grupo (Véase Fig. 4.6).

Fig. 4.6

Como ahora se encuentra dentro del grupo, puede cambiar las características de los objetos como
el color, el ancho de línea o transformarlos de forma individual (Véase Fig. 4.7).

Fig. 4.7

Una vez editado el contenido del grupo, se debe regresar a la Escena principal donde se encuentran
los demás objetos de la escena.
Para regresar a la Escena principal, sólo debe presionar en el nombre Escena de la esquina superior
izquierda del espacio de trabajo (Véase Fig. 4.8).

Fig. 4.8

NOTA

Según las características del diseño que este creando, puede crear grupos de
elementos ya agrupados previamente. De esta forma al editar estaríamos
hablando de niveles de grupo, y la barra de escenas podría mostrarse como
sigue (Véase Fig. 4.9).

Fig. 4.9

92
Se
sió 4
n Distribución de grupos, capas y texto

Para editar los sub grupos en el interior del grupo, también se tiene que hacer clic dos veces para
estar dentro del sub grupo (Véase Fig. 4.10).

Fig. 4.10

Igualmente, para regresar a la Escena principal, sólo debe presionar en el nombre Escena de la
esquina superior izquierda del espacio de trabajo.

4.2.2. DESAGRUPAR

Cuando las condiciones del grupo ya no convienen, es mejor desagruparla para que los componentes
se encuentren como al inicio.
ሳ para deSagrupar:
• Active la herramienta Selección.
• Luego seleccione un grupo.
• Despliegue el menú Transformar y elija la opción.
4.3. ORGANIZAR OBJETOS

Cuando los objetos pertenecen a una misma capa, y estos a su vez se encuentran agrupados, al
interceptarlos estos se solapan cubriendo unos a otros. El orden de solapamiento se da según el orden
de creación de los grupos, siendo esto inconveniente ya que según se va diseñando el orden de creación
es relativo (Véase Fig. 4.11).

Fig. 4.11

93
Guía Práctica Adobe Flash CS6

Tome en cuenta las imágenes incluidas en el ejemplo y el orden


inicial de cómo se encuentran solapados, para entender fácilmente
estos procedimientos de cambiar el orden de solapamiento (Véase
Fig. 4.12).

Fig. 4.12

Luego de seleccionar un Grupo o un Símbolo, presione clic derecho sobre el objeto y al desplegarse
la lista de opciones, despliegue también la lista Organizar que contiene las opciones para controlar el
solapamiento de objetos (Véase Fig. 4.13).

Fig. 4.13

ሳ eNvIar al freNte:
Con esta opción los objetos que se encuentren detrás de otros, sin importar el nivel en el que se
encuentren, estos serán los más visibles ya que se encontrarán delante de todos los objetos (Véase
Fig. 4.14).

Fig. 4.14

94
Se
sió 4
n Distribución de grupos, capas y texto

Como se puede ver el objeto B, que se encuentra detrás de todos los objetos, después de Enviarlo al
frente es el más visible.
ሳ eNvIar al foNdo:
Con esta opción los objetos que se encuentren delante de otros, sin importar el nivel en el que se
encuentren, estos se ubicarán detrás de todos los objetos (Véase Fig. 4.15).

Fig. 4.15

Como se puede ver el objeto A que era el más visible, después de Enviarlo al fondo ahora esta
solapado por todos los objetos.
ሳ traer hacIa adelaNte:
Con esta opción los objetos se mueven sólo un nivel, delante del objeto que se encuentre en frente
de él (Véase Fig. 4.16).

Fig. 4.16

Como se puede ver el objeto C se ha desplazado un nivel para encontrarse delante del objeto D.

ሳ eNvIar hacIa atráS:


Con esta opción los objetos se mueven sólo un nivel, detrás del objeto que se encuentre detrás de
él (Véase Fig. 4.17).

95
Guía Práctica Adobe Flash CS6

Fig. 4.17

Como se puede ver el objeto A se ha desplazado un nivel para encontrarse detrás del objeto D.

4.4. DIBUJAR ENTRE CAPAS

Se puede imaginar las capas de flash como hojas


transparentes superpuestas. Por defecto, todo lo que
dibuje en la escena queda incluido en una capa, que
es con la que arranca el programa y a la que irá a parar
todo aquello que dibuje mientras no se diga lo contrario
(Véase Fig. 4.18).

Fig. 4.18

La superposición de varias capas independientes conforma la totalidad del dibujo (Véase Fig. 4.19).

Fig. 4.19

96
Se
sió 4
n Distribución de grupos, capas y texto

La creación de una película de Flash con varias capas podría compararse a la proyección de varias
películas de cine a la vez y sobre la misma pantalla. Añadiendo capas podremos gozar de varias
ventajas a la hora de crear películas de Flash.
• Cada capa podrá contener aquellos objetos que desea, con la ventaja de que los objetos de
una capa no influirán sobre los de otra. De este modo no tendrá que preocuparse por agrupar
los objetos para que no interaccionen entre sí.
• Podemos activar y desactivar la visualización de la capa o capas que deseemos con objeto de
visualizar únicamente aquello que deseamos editar y evitar confusiones con otros elementos.
• Podemos organizar nuestro trabajo colocando en cada capa una animación, gráfica, sonido o
elemento diferente.
• Podemos organizar las capas en carpetas.
• Podemos crear capas especiales de máscara que le permitirá mostrar y ocultar objetos
selectivamente.
Tnga en cuenta que el tamaño del archivo no depende del número de capas que tenga definidas y
podrá crear tantas como quiera (Véase Fig. 4.20).

Área de Visualización de capas

Capas

Fig. 4.20

Opciones de Capas

• El panel Línea de tiempo, contiene la zona de control de capas.


Para facilitar el entendimiento de este tema, abrir el archivo de referencia ubicado en el CD,
en la Carpeta: Archivos de Capítulos, explore y ubique la carpeta correspondiente al Sesión
4, donde se encuentra el archivo: Manejo de Capas.fla y hacer dos veces clic para abrir el
archivo y comenzar la exploración.

97
Guía Práctica Adobe Flash CS6

4.4.1. PROPIEDADES VISUALES DE LAS CAPAS

ሳ vISualIzacIóN de capaS
Como se ha dicho, una de
las ventajas de trabajar con
capas es que puede activar o
desactivar su visualización a
voluntad. Eso quiere decir que, Visualización
si desactiva la visualización de
una capa, todo lo que tenga
desaparecerá de la pantalla,
con lo cual podrá editar el resto
de elementos de otras capas sin
riesgo de confusión con otros
objetos (Véase Fig. 4.21).
Fig. 4.21

• El panel de línea de tiempo y los controles de visualización de todas las capas.


• En la imagen anterior se señalan los controles de visualización como el símbolo del Ojo y los
puntos que se encuentran en cada capa, a la altura del símbolo del Ojo.

• Para ocultar o mostrar contenido de Capas:


Para Ocultar el contenido de las capas haga un clic izquierdo sobre el ícono, de la capa que desea
ocultar y en la columna de la zona de capas indicada con un ojo. Aparecerá un aspa, indicando así
que la visualización de esa capa está desactivada (Véase Fig. 4.22).

Fig. 4.22

98
Se
sió 4
n Distribución de grupos, capas y texto

Todos los elementos que contenga esa capa desaparecerán. Para volver a visualizar la capa vuelva
hacer un clic en el mismo lugar.
De igual manera si requiere ocultar más de una capa, puede repetir el procedimiento anterior para
varias capas. Según la cantidad de capas que pueda tener este procedimiento podría tornarse
tedioso (Véase Fig. 4.23).

Fig. 4.23

• Para ocultar las Capas No Seleccionadas:


Si por ejemplo su escenario consta de 25 capas y sólo requiere visualizar una de ellas para editar
su contenido, ocultar las demás capas puede tomarle algún tiempo.
Para facilitar el procedimiento de visualizar
solo una capa:
• Seleccione la capa que desee aislar
de la visualización (Véase Fig. 4.24).

Fig. 4.24

99
Guía Práctica Adobe Flash CS6

• Presione un clic con el botón derecho sobre la capa seleccionada.


• De la lista desplegada elija la opción Ocultar otros (Véase Fig. 4.25).

Fig. 4.25

• Con esto se ocultarán todas las capas, menos la capa seleccionada (Véase Fig. 4.26).

Fig. 4.26

• Igualmente, desde ese menú podrá activar a la vez la visualización de todas las capas
eligiendo la opción Mostrar todo.
• Si desea ocultar varias capas rápidamente, arrastre el ratón verticalmente por la columna de
visualización de las capas. Según vaya arrastrando irá apareciendo los símbolos indicativos
de cada capa oculta. Si realiza la misma operación con capas ocultas, las visualizará todas
a la vez.

100
Se
sió 4
n Distribución de grupos, capas y texto

• Si desea ocultar todas las capas a la vez, haga un clic izquierdo directamente sobre el ojo. Si
vuelve hacer clic, visualizará todas las capas a la vez.

ሳ bloquear y deSbloquear capaS


A medida que la cantidad de objetos y capas incluyen su escenario, puede seleccionar o inclusive
editar los objetos por accidente. Si bien es cierto que una forma de evitar esto es ocultando las
capas, pero no siempre esta es la solución ya que si la capa que ocultó es una referencia de
posición, no sabría dónde colocar el objeto nuevo que esté ubicando en la escena.
Si bloquea una capa, los objetos que contengan seguirán apareciendo en la escena pero no podrán
ser seleccionados ni editados.
• Para bloquear y desbloquear capas:
Para Bloquear las capas haga un clic izquierdo sobre el ícono, de la capa que desea ocultar y en
la columna de la zona de capas indicada con un Candado. Aparecerá un aspa, indicando así que la
capa está bloqueada (Véase Fig. 4.27).

Fig. 4.27

Con la capa bloqueada, el contenido de esta será visible pero no podrá seleccionarla ni editarla,
siendo así solo una referencia en la escena para ubicar otros objetos.
• Para desbloquear una capa vuelva hacer clic en el mismo lugar.
• Si hace clic con el botón derecho sobre el nombre de la capa, aparecerá un menú contextual
en el que si selecciona la opción Bloquear otros podrá bloquear todas las capas menos la capa
sobre la que haya hecho clic. De forma similar al caso de Ocultar capas (Véase Fig. 4.28).

101
Guía Práctica Adobe Flash CS6

Fig. 4.28

La capa seleccionada y las demás capas bloqueadas.


• Otra forma de realizar este último procedimiento, se da presionando la tecla Alt. y presionando
sobre la capa que no debe bloquearse. Este procedimiento también es válido para el grupo
de Ocultar capas.
• Si presiona sobre el símbolo del Candado que se encuentra en el área de visualización de
capas, todas las capas quedarán bloqueadas.

ሳ ver laS capaS coMo coNtorNoS


Ver una capa como contornos implica que todos los objetos que cree aparecerán mostrando
únicamente su silueta. Eso puede resultar útil para; por ejemplo, ver los objetos interiores
que permanezcan ocultos por objetos de capas superiores o bien para trabajar cómodamente
prescindiendo de los rellenos de los objetos (Véase Fig. 4.29).

Fig. 4.29

102
Se
sió 4
n Distribución de grupos, capas y texto

• Para activar la visualización de contornos en una capa, haga clic sobre el cuadrado de color
que aparecerá en cada capa. El cuadrado quede hueco indicándose así que la capa está en
modo de visualización de contornos.
• Para volver al modo de visualización normal vuelva a hacer clic en el mismo sitio.
El color de contorno para cada capa está asignado por defecto. No obstante, si desea cambiarlo
haga doble clic sobre el cuadrado de la capa cuyo color de contorno desea cambiar y se abrirá la
ventana de propiedades de la capa en la que podrá elegir el color que desee mediante el selector
de colores color de contorno.
ሳ caMbIar el ordeN de laS capaS
La visualización y el solapamiento de los objetos entre las capas, depende del orden en que se
encuentren en el área de Capas del panel Línea de Tiempo (Véase Fig. 4.30).

Fig. 4.30

En la ventana de línea de tiempo y en la zona donde aparecen los nombres de las capas, el orden
de apilamiento coincide con el orden real de las capas en la escena, es decir, las capas que están
en la parte inferior de la lista de capas están realmente por debajo de las que aparecen en la parte
superior de dicha lista (Véase Fig. 4.31).

Fig. 4.31

103
Guía Práctica Adobe Flash CS6

Pues bien, en determinados momentos le puede interesar cambiar de orden de apilamiento de


las capas con objeto de que; por ejemplo, los objetos que aparezcan por debajo de otros pasen a
ocultar el primer plano. Para ello puede hacer lo siguiente:
• Para mover una Capa sobre otra:
• Al mover una capa sobre otra, esta será más visible que la otra, además solapará a la
anterior.
• Seleccione la capa Gaby del ejemplo.
• Para seleccionar una capa individualmente basta con que haga un clic izquierdo sobre ella y
quedará resaltada. Al mismo tiempo aparecerá en la línea de las capa el símbolo de un lápiz,
indicativo de que ahora es la capa activa y todo lo que se dibuje o incorpore a la escena
quedará alojado en esta capa (Véase Fig. 4.32).

Fig. 4.32

• También como puede notar la capa Gaby es una de las últimas, quiere decir que esta
solapada por varias capas.
• Luego presione sobre la capa seleccionada con clic izquierdo y arrástrela sobre la capa Nubes
1. Notará un símbolo que indica el movimiento entre capas, luego suelte la capa (Véase Fig.
4.33).

Fig. 4.33

104
Se
sió 4
n Distribución de grupos, capas y texto

• Visualmente notará en el escenario como ahora la capa Gaby es más visible que la capa Nube
1 (Véase Fig. 4.34).

Fig. 4.34

Si bien es cierto sobre la capa Gaby se encuentran más de una capa, visualmente los objetos que
pertenecen a esas capas no se encuentran a la misma altura en el escenario.
ሳ para Mover uNa capa detráS de otra:
Si se desplaza una capa detrás de otra esta quedará solapada por la capa que se encuentre delante
de esta, si es que los objetos de esta capa la cubren.
De igual forma que se desplazó la capa Gaby delante de otras capas, también puede arrastrar las
capas y ubicarlas detrás de otras. Por ejemplo, se requiere que la capa Gaby esté detrás de la capa
Nube 1 (Véase Fig. 4.35).
Seleccione la capa Gaby y arrástrela detrás de la capa Nubes.

Fig. 4.35

Notará que ahora la capa Gaby se encuentra solapada por otras capas y es menos visible en el
escenario.
105
Guía Práctica Adobe Flash CS6

Evidentemente, si arrastra la capa hacia arriba, esta se colocará en niveles superiores, es decir,
más cerca de usted con relación al plano de la pantalla, en cambio, si arrastra la capa hacia abajo
la colocará en un plano inferior y, en consecuencia, hipotéticamente más lejos de usted.
ሳ caMbIar el NoMbre de uNa capa
Indicar un nombre a las capas, al crearlas o posteriormente puede ahorrarle inconvenientes, ya que
según lo complejo de su diseño puede tener más de 25 capas por escena, facilitando el nombre
la ubicación de las mismas.
Para cambiar el nombre de una capa seleccionada haga doble clic sobre su nombre y edítelo (Véase
Fig. 4.36).

Fig. 4.36

También puede cambiar el nombre desde la ventana de Propiedades, presionando clic derecho
sobre la capa y eligiendo la opción Propiedades.
ሳ SeleccIoNar capaS
Cuando se selecciona una capa todos los objetos que se encuentran en esa capa se seleccionan,
permitiendo una edición rápida de todo su contenido.
Además, al encontrarse la capa seleccionada también se posiciona como la capa activa apareciendo
un lápiz en la misma, indicando que cualquier objeto que se cree o se incluya en el escenario se
ubicará en esta capa (Fig. 4.37).

Fig. 4.37

También puede seleccionar varias capas a la vez. El procedimiento varía según desee seleccionar
capas consecutivas o capas alternas.
106
Se
sió 4
n Distribución de grupos, capas y texto

• Para seleccionar varias capas a la vez:


Seleccionar varias capas le permite cambiar el orden de varias capas, ubicarlas en carpetas o para
eliminarlas de ser necesario.
Para seleccionar capas consecutivas haga clic sobre la capa inferior del grupo de capas que desee
seleccionar y, manteniendo presionada la tecla Shift, haga en la capa superior que desee. Estas
y todas las capas intermedias quedarán seleccionadas a la vez. También puede hacerlo al revés.
Para seleccionar capas salteadas vaya haciendo clic sobre cada capa que desee seleccionar mientras
mantiene pulsada la tecla Ctrl., lo cual provocará la selección conjunta de esas capas (Véase Fig.4.38).

Fig. 4.38
NOTA

Aunque tengas varias capas seleccionadas a la vez, sólo puede haber una capa
activa, que será la que muestre el ícono de lápiz, también se deberá mantener el
orden establecido dentro de la carpeta porque puede desordenar y mover capas
entre carpetas y así alterar el solapado entre capas.

ሳ crear carpetaS para ordeNar laS capaS


Para administrar mejor la cantidad de capas que puede incluir su diseño, no sólo basta con indicarles
un nombre, sino también agruparlas en carpetas para reducir la cantidad de elementos de área de
capas.
Tome en cuenta que el orden de las Carpetas es similar al orden de las capas, pudiendo solapar
o ser visibles todas las capas que se encuentren en la carpeta.
Para crear una Carpeta de Capas:
• Presione el ícono de creación de Carpeta de la línea de tiempo (Véase Fig.4.39).

Fig. 4.39

107
Guía Práctica Adobe Flash CS6

• También puede añadir carpetas, presionando clic derecho sobre cualquier capa y eligiendo de
la lista la opción Crear Carpeta.
Las carpetas de capas se controlan exactamente igual que las capas simples en lo que respecta a
la visualización, ocultación, bloqueo, cambio de posición, cambio de nombre, etc.
• Para llevar las capas a la Carpeta creada:
Para incluir las capas dentro de las carpetas se deben arrastrar sobre la carpeta creada, el
arrastre se da como cuando se mueven las capas para variar su apilamiento. Puede desplazar
varias capas dentro de la carpeta, arrastrando la selección de las capas con los métodos antes
mencionados (Véase Fig. 4.41).

Fig. 4.41

NOTA

las carpetas que estén abiertas no afectan la visualización de las capas del escenario. Los
controles de la línea de tiempo afectan a todas las capas de una carpeta, para llevar varias
capas a una carpeta deberá mantener el orden en el que se encontraban.

• Para crear capas nuevas:


• Desde las opciones del panel de Línea de tiempo, presione el botón Nueva Capa, luego
automáticamente aparecerá una capa nueva con el nombre de Capa 2 (Véase Fig. 4.42).

Fig. 4.42

108
Se
sió 4
n Distribución de grupos, capas y texto

• Para crear más capas, repita el procedimiento y cree unas tres capas más (Véase Fig. 4.43).

Fig. 4.43

• Luego cambie el nombre de cada capa como se indica en la imagen anterior, para crear los
objetos según el tipo de elemento que sean.
• Otra forma de crear Capas Nuevas:
• También puede crear Capas nuevas, desplegando el menú Insertar / Línea de Tiempo / Capa.
• Presionando clic derecho sobre una capa y de la lista elegir la opción Insertar Capa. La nueva
capa se sitúa siempre por encima de la capa que estuviera activa.
• Para crear objetos entre las capas:
• Lo adecuado según va avanzando la creación de su diseño, es crear los objetos según el tipo,
la forma o la aplicación que tendrán estos como para animarlos entre capas, así el flujo de
trabajo se hace más sencillo.
• Por ejemplo, para crear Rectángulos en la
capa que corresponden:
• Seleccione la capa Rectángulos, presionando
una vez en el nombre de la capa. De esta
forma la capa será la actual.
• Cuando una Capa es la actual se muestra un
Lápiz al lado del nombre de la capa (Véase
Fig. 4.44).
Fig. 4.44

• Luego cree varios rectángulos en el escenario, de diferentes colores. Como la capa ya es la


actual, todos los objetos que se creen o se inserten pertenecerán a esta capa (Véase Fig. 4.45).

Fig. 4.45

109
Guía Práctica Adobe Flash CS6

• Además notará que el cuadrito al lado de la capa se rellena de color, este elemento se
denomina fotograma y se definirá con más detalle en el capítulo de animaciones.
• También notará que para las otras capas este fotograma está de color blanco, esto indica que
está vacío, es decir, no existe ningún objeto en este fotograma, por consiguiente en esa capa.

• Para seleccionar y modificar los objetos de las capas:


• Para seleccionar los objetos distribuidos entre las capas, se aplica los métodos de selección
ya vistos hasta el momento, pero bajo la nueva condición de las capas.
• Cuando se está trabajando con varias capas y su visualización está activada, todos los
objetos de las capas se ven a la vez, independientemente de la capa que esté activa.
• Si se selecciona un objeto, su capa se activa y se vuelve a la actual, con lo cual vemos que
para poder seleccionar un objeto no es necesario activar la capa que la contiene ya que esta
se activa directamente al seleccionar un objeto cualquiera que contenga.
• Lo mismo sucede si desea cambiar el color de relleno de una forma mediante la herramienta
Cubo de pintura. Bastará con que haga clic con esa herramienta sobre el objeto cuyo color
de relleno desee cambiar y el cambio se producirá sin que haya un cambio de la capa activa.

• Para seleccionar todos los objetos de una capa:


• Al seleccionar una capa desde el panel Línea de Tiempo, todos los objetos pertenecientes a
esta capa se seleccionan.
• De esta forma puede desplazar o modificar fácilmente el contenido de toda la capa Rectángulos
(Véase Fig. 4.46).

Fig. 4.46

110
Se
sió 4
n Distribución de grupos, capas y texto

• Para seleccionar algunos elementos de una capa:


Por ejemplo, para este caso se requiere mover sólo unos elementos que componen los círculos,
para lo cual se bloquea la capa Rectángulos, facilitando la selección de algunos elementos de la
capa Círculos (Véase Fig. 4.47).

Fig. 4.47

Ahora con la capa Rectángulos bloqueada, puede aplicar cualquiera de los métodos de selección
para mover o transformar algunos elementos de la capa Círculos (Véase Fig. 4.48).

Fig. 4.48

• Seleccionar objetos sin bloquear las Capas:


Si los objetos que se encuentran distribuidos entre las capas son fáciles de seleccionar, no requiere
bloquear las capas, ya que si todas se encuentran visibles y desbloqueadas, puede seleccionar
cualquiera de los objetos, señalándose además la capa a la cual pertenecen (Véase Fig. 4.49).

Fig. 4.49

111
Guía Práctica Adobe Flash CS6

ሳ elIMINar capaS
Al eliminar una capa, todo su contenido también queda eliminado del escenario, además de la línea
de tiempo que corresponde a cada capa.
• Para eliminar una capa:
Seleccione la capa a eliminar, luego presione en el botón en forma de Tacho ubicado en el
área de opciones de capa (Véase Fig. 4.50).

Fig. 4.50

También puede hacerlo haciendo un clic derecho sobre una capa y eligiendo la opción eliminar
capa.
Si desea eliminar varias capas a la vez, selecciónelas según los procedimientos anteriores
(selección de capas) y luego al presionar eliminar capa todas estas se borrarán.

ሳ copIar y pegar objetoS eNtre capaS


Según va creando la distribución de la escena, se le presentará la necesidad de mover algunos
objetos a otras capas, para que se encuentren en las que correspondan. Puede llevar objetos de
una capa a otra utilizando las herramientas típicas de Windows copiar, cortar y pegar.

• Para mover un objeto a otra capa:


• Seleccione el objeto u objetos
que desee mover a otra capa.
• Luego presione un clic derecho
sobre la selección que realizó.
• De la lista desplegada elija la
opción Cortar (Véase Fig. 4.51).

Fig. 4.51

112
Se
sió 4
n Distribución de grupos, capas y texto

• Seguidamente seleccione la capa donde se colocará el objeto cortado.


• Nuevamente presione un clic derecho sobre el escenario y elija la opción Pegar para que los
objetos se incluyan en esta capa (Véase Fig. 4.52).

Fig. 4.52
NOTA

Dado que Flash sólo puede tener una capa activa a la vez, todas las
operaciones de pegado de elementos que se realicen afectarán únicamente a
la capa que se encuentre activa en ese momento, es decir, no es posible pegar o
llevar directamente un objeto a una capa que no esté activa.

ሳ veNtaNa de propIedadeS de laS capaS


Ya se ha visto todo lo referente a las capas normales en Flash. Hemos visto fugazmente una
ventana en la que puede realizar algunas operaciones en las capas, se trata de la ventana de
propiedades de capas, a la cual puede acceder de varios modos (Véase Fig. 4.53).
• Haciendo clic derecho sobre una capa y
seleccionando la opción de propiedades.
• Haciendo doble clic izquierdo en el símbolo de capa,
que está a la izquierda del nombre de la capa.
• Menú Modificar > línea de tiempo >Propiedades de
Capa.
En cualquier caso se abrirá la ventana de propiedades de
la capa activa. En ella podrá:
• Cambiar el nombre de la capa.
• Activar o desactivar su visualización.
• Bloquear y desbloquear. Fig. 4.53
• Definir si se trata de una capa normal, de guía, de máscara, etc. Enseguida se estudiará esos
otros tipos de capas, etc.

113
Guía Práctica Adobe Flash CS6

ሳ dIStrIbuIr objetoS eN capaS


Según las condiciones del diseño puede que en una capa se encuentren varios elementos que
convendría que se encuentren en capas de forma individual; por ejemplo, para realizar animaciones
esta es una condición.
Para facilitar el entendimiento de este comando, haga clic en el archivo de referencia ubicado en
el CD en la Carpeta: Archivos de Capítulos, explore y ubique la carpeta correspondiente al Sesión
4 – Distribuir en Capas.fla y haga clic dos veces para abrir el archivo y comenzar la exploración.
Para esto basta seguir los siguientes pasos:
• Selecciones los elementos de la capa que desea distribuir en las capas individuales (Fig. 4.54).

Fig. 4.54

• Luego presione un clic derecho sobre los objetos seleccionados y elija la opción Distribuir en
capas. (Fig. 4.55).

Fig. 4.55

Se observa que al utilizar la opción de distribuir en capas los objetos se han distribuido en capas
que por defecto se van rotulando automáticamente (Fig. 4.56).
NOTA

El comando distribuir en capas puede utilizarse a cualquier tipo de elemento


del escenario, incluidos los objetos gráficos, las instancias, los clips de películas
y los textos. Antes de utilizar la distribución de textos debe separarlos.

114
Se
sió 4
n Distribución de grupos, capas y texto

Fig. 4.56

NOTA

la capa original queda vacía, ya que todos los elementos antes


seleccionados, se han distribuido totalmente en otras capas.

4.5. HERRAMIENTA TEXTO

La herramienta texto puede crear bloques de texto, para sacarle el máximo provecho es necesario
conocer cómo funciona esta herramienta (Véase Fig. 4.57).

Fig. 4.57

4.5.1. CREACIÓN DE UN TEXTO

Para crear un bloque de texto en el escenario, utilice la herramienta Texto. Los tipos pueden situarse
en una línea que se expande al escribir o en un bloque de anchura (línea base) fija que ajuste en
una línea de forma automática.

115
Guía Práctica Adobe Flash CS6

• Seleccione la herramienta texto.


• Luego para crear puede seguir cualquiera de los siguientes pasos:
• Presionar un clic izquierdo en la escena y arrastrar hasta crear una línea base o anchura. El
puntero se ubica dentro de la línea base del texto, esperando que digité su contenido (Véase
Fig. 4.58).

Fig. 4.58

• Digite su contenido y para cambiar sus atributos,


primero seleccione el texto a cambiar, funciona de
igual forma que un cambio de atributos en Word
(Véase Fig. 4.59).

Fig. 4.59

• Para cambiar el área de inclusión del texto, arrastre el selector de bloque de texto fijo (Véase
Fig. 4.60).

Fig. 4.60

Todos los atributos y opciones están disponibles a través del panel de propiedades. Sin embargo, no
podrá cambiar si no selecciona el texto con la herramienta selección. Este panel proporciona todo el
control que se necesite con respecto a las fuentes empleadas (Véase Fig. 4.61).

Fig. 4.61

116
Se
sió 4
n Distribución de grupos, capas y texto

Selección del texto con la herramienta Selección (Véase Fig. 4.62).

Fig. 4.62

El primer grupo que se muestra en el Panel de Propiedades es el de Posición y Tamaño, estos


controles son iguales a los que se aplican a cualquier objeto de la escena, por tanto no se indicará
en este tema.

4.5.2. GRUPO CARÁCTER

• FAMILIA: Lo primero que hay en este grupo es una lista emergente para la elección de la Familia
(fuente de texto) que necesite. Este menú tiene en Flash la particularidad de que le muestra un
modelo de escritura al pasar el cursor por los nombres de las fuentes, que son las del sistema
en que se está creando la película (Véase Fig. 4.63).

Fig. 4.63

117
Guía Práctica Adobe Flash CS6

• ESTILO: La elección de atributos como negrita y cursiva se hace mediante la lista del Estilo que
se ubica debajo de la Familia (Véase Fig. 4.64).

Fig. 4.64

• TAMAÑO: Debajo de la lista de Estilo está la elección del tamaño, con una barra deslizante que
va del tamaño 8 al 96. Para cambiar sólo arrastre el deslizador hacia arriba hasta el tamaño que
desea, compruebe que su tipo de texto sea estático (Véase Fig. 4.65).

Fig. 4.65

• ESPACIADO ENTRE LETRAS: Con esta opción puede separar las letras, pero también las puede
juntar hasta el punto de cruzarlas, este tipo de cambios realizados se podrían animar para generar
un efecto de movimiento entre letras.
Los valores positivos separan los caracteres del texto, mientras que los valores negativos los
juntan. Los valores del tracking se miden en 1/1000 del espacio de una letra (Véase Fig. 4.66).

Fig. 4.66

118
Se
sió 4
n Distribución de grupos, capas y texto

• COLOR: El color de texto se puede cambiar desde este grupo, también se puede usar la opción
de color de la barra de herramientas o también el mismo cubo de pintura para cambiar el relleno
de texto.
• El normal es el que se escribe por defecto, es decir, con el carácter situado en la línea base
de la palabra.
• El superíndice lo sitúa más arriba, se utiliza para los grados y las potencias.
• El subíndice lo sitúa más abajo, se utilizan más que nada en Química o un diseño en
particular.
• El tamaño del carácter que disponemos tanto como subíndice y superíndice, se ajustan al
texto que está escribiendo y es siempre más pequeño (Véase Fig. 4.67).

Fig. 4.67

4.5.3. SUAVIZADO DE TEXTO

Flash proporciona funciones mejoradas de conversión de fuentes a mapa de bits que permiten
especificar las propiedades de suavizado de las mismas.

ሳ para defINIr uNa opcIóN de SuavIzado


para uN texto SeleccIoNado:
En el inspector de propiedades, elija una
de las opciones siguientes en el menú
emergente Suavizado del grupo Carácter
(Véase Fig. 4.68).
Fig. 4.68

4.5.4. GRUPO PÁRRAFO

Cuando se crea un párrafo podemos, en primer


lugar, alinear el párrafo en los estilos que nos tiene
acostumbrados el Word, es decir, alineación a la
izquierda, al centro, a la derecha y texto justificado
(Véase Fig. 4.69).

Fig. 4.69

119
Guía Práctica Adobe Flash CS6

La dirección por defecto es la horizontal como se


muestra (Véase Fig. 4.70).
Fig. 4.70

La dirección que se muestra es la Vertical de izquierda a derecha. (Véase Fig. 4.71).

Fig. 4.71

La alineación del párrafo: alineación a la izquierda y alineación centrada (Véase Fig. 4.72).

Fig. 4.72

La alineación del párrafo de alineación a la Derecha y Justificación con la última línea alineada al
principio (Véase Fig. 4.73).

Fig. 4.73

Justificación de todas las líneas (Véase Fig. 4.74).

Fig. 4.74

120
Se
sió 4
n Distribución de grupos, capas y texto

Si queremos manipular mejor el párrafo de texto, se nos presenta un panel de opciones de formato.
Que le permitirá regular mediante barras deslizantes que aparecen al hacer clic izquierdo sobre
cualquiera de sus botones (Véase Fig. 4.75).

Fig. 4.75

4.5.5. TIPO DE TEXTO

El primer menú emergente que vemos nos sirve para seleccionar el tipo de texto que queremos. Son
tres los tipos que Flash ofrece: Texto Estático, Texto Dinámico y Texto de Entrada (Véase Fig. 4.76).

Fig. 4.76

ሳ texto eStátIco
El tipo de texto estático es al valor que aparece por defecto en el panel de propiedades. Este tipo
de texto se refiere al texto que incluimos en la película y que no va variar en ninguna forma, tanto
así por la parte del usuario como por medio de variable. Suele llamarse también tipo de texto para
“Rotular”.
ሳ texto dINáMIco
El tipo de texto Dinámico se refiere al texto
que puede variar según valores de variables
que se encuentran en el servidor o desde
archivos externos, como ocurre en los casos de
numeraciones o comentarios. El usuario no tiene
posibilidad de editar el texto, pues este depende
de variables (Véase Fig. 4.77).
Fig. 4.77

121
Guía Práctica Adobe Flash CS6

• LÍNEA ÚNICA: Esta opción permite escribir el texto en una sola línea, que se va expandiendo a
medida que va escribiendo.
• MULTI-LÍNEA: Esta opción permite escribir el texto en varias líneas, por lo que puede utilizar el
salto (tabulación) a discreción.

ሳ texto de eNtrada
Este tipo de texto que puede ser editado por el usuario. Es un campo de texto en el que el usuario
introduce datos que se le han pedido o que tiene que enviar.
El texto de entrada tiene una opción propia que es restringir la longitud de texto a un número
máximo de caracteres, que nosotros ponemos en el cuadro numérico del panel. Esta opción nos
ayuda a controlar el texto que le está permitiendo introducir al usuario.
NOTA

Si crea un bloque de texto que al escribir se extiende más allá del borde del escenario, el
texto no se pierde. Añada saltos de línea, desplace el bloque de texto o seleccione Ver >
Área de trabajo para acceder de nuevo al selector.

4.5.6. REVISIÓN ORTOGRÁFICA

Para revisar la ortografía, configure primero las opciones de Configuración de ortografía y, a


continuación, ejecute el corrector ortográfico.
Ir al menú Texto > Configuración de ortografía.
Verifique y compruebe el contenido del documento, asegúrese que esté seleccionado el diccionario
adecuado.
Ir al menú Texto > Revisar ortografía y responda a los cuadros de diálogo que muestre el corrector
ortográfico.
Cuando haya acabado de comprobar la ortografía, guarde el documento.
NOTA

Para comprobar la ortografía de archivos externos, utilice la función de revisión


ortográfica asociada con la aplicación que ha utilizado para crear el archivo externo.

122
2 DA EVALUACIÓN

1 ¿Cuál es la diferencia entre una imagen mapa de Bits y una imagen Vectorial?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................

2 ¿Cuáles son las funciones de la herramienta Selección?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
3 ¿Cómo se puede mover objetos en la pantalla a posiciones exactas o con mayor precisión?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
4 ¿Qué diferencia existe entre las geometrías rectángulo, rectángulo simple, ovalo y ovalo simple entre otros?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
5 ¿Cuáles son las formas de distribuir u organizar los objetos en Flash?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................

123
n
s ió
5

Se
Ayudantes de precisión
en el dibujo

Si bien es cierto que Flash CS6 no es un programa de precisión como AutoCad, entre otros, esto porque
esencialmente es un programa de diseño que le interesa la presentación o el impacto visual de sus
clientes, más que la exactitud de los elementos que la componen. Pero por otra parte, en el diseño se
entiende que el orden y la simetría de los elementos del escenario pueden influir en parte al impacto
visual del diseño. Por tal motivo Flash CS6 proporciona elementos que le permiten dibujar y transformar
objetos con cierto grado de precisión, utilizando herramientas como Reglas, guías o el mismo ajuste
que se usó en el capítulo de Dibujo de Objetos, entre otras herramientas que se verán en este capítulo.
5.1. UTILIZACIÓN DE LA CUADRÍCULA

Flash incluye una cuadrícula que ayuda a dibujar y diseñar objetos de manera precisa. Puede colocar
cuadrículas en un documento y ajustar objetos a las mismas o desactivar la cuadrícula y ajustar objetos
en esta.
Cuando aparece la cuadrícula en un documento, se muestra como un conjunto de líneas detrás de
la ilustración en todas las escenas. Puede ajustar los objetos a la cuadrícula, así como modificar el
tamaño de la cuadrícula y el color de las líneas que la componen (véase la fig. 5.1).
ሳ para MoStrar u ocultar la cuadrícula de dIbujo:
• Presionar el menú Ver > Cuadrícula > Mostrar cuadrícula.

Fig. 5.1

• La cuadrícula de referencia cubre todo el área de trabajo.


125
Guía Práctica Adobe Flash CS6

ሳ Para establecer Preferencias Para la cuadrícula:


• Presionar el menú Ver > Cuadrícula > Editar cuadrícula.
• Panel de editar Cuadrícula (véase la Fig. 5.2)

Fig. 5.2

Al elegir esta opción el panel presenta tres cuadros de verificación de: Mostrar cuadrícula, mostrar
sobre objetos y ajustar a cuadrícula. Esta última es una opción muy importante porque mediante esta
podremos dibujar a través de los puntos de intersección de la cuadrícula con mayor precisión (véase
la fig. 5.3).
En la imagen siguiente se puede observar objetos creados apoyando sus vértices en la cuadrícula,
permitiendo así crear rápidamente los objetos y alinearlos con facilidad.

Fig. 5.3

126
Se
sió 5
n Ayudantes de precisión en el dibujo

También puede usar la cuadrícula mientras desplaza los objetos, coincidiendo los puntos de
desplazamiento con la cuadrícula, así podrá alinear los objetos con facilidad (véase la fig. 5.4).

Fig. 5.4

5.2. UTILIZACIÓN DE LAS REGLAS

Si se muestran las reglas, estas aparecen en la parte superior y a la izquierda del documento (véase
la fig. 5.5). Puede cambiar la unidad de medida que se utiliza en las reglas; la unidad predeterminada
es píxeles. Al mover un elemento en el escenario con las reglas visibles, aparecerán unas líneas en
las reglas indicando las dimensiones del elemento.
ሳ para MoStrar u ocultar laS reglaS:
• Presionar el menú Ver > Reglas.

Fig. 5.5

127
Guía Práctica Adobe Flash CS6

5.3. UTILIZACIÓN DE LAS GUÍAS

Si las reglas son visibles, puede arrastrar las guías horizontales y verticales de las reglas en el escenario.
Puede mover, bloquear, ocultar y eliminar las guías. También puede ajustar objetos a las guías y cambiar
el color de las guías y la tolerancia al ajuste (véase la fig. 5.6).
Para mostrar u ocultar las guías de dibujo:
Presionar el menú Ver > Guías > Mostrar guías.
NOTA

Si la cuadrícula está visible y la opción Ajustar a cuadrícula está activada, al


crear guías, estas se ajustarán a la cuadrícula.

ሳ para actIvar o deSactIvar el ajuSte a laS guíaS


El ajuste a guías permite crear objetos alineados a las guías, permitiendo tener estos elementos para
distribuir el escenario por sectores.
Presionar el menú Ver > Guías > Ajustar a guías
NOTA

El ajuste a las guías tiene prioridad sobre el ajuste a la cuadrícula, en caso de que
haya guías entre las líneas de la cuadrícula.

Fig. 5.6

128
Se
sió 5
n Ayudantes de precisión en el dibujo

ሳ para crear uNa guía:


• Presione sin soltar sobre una de las reglas, horizontal o vertical.
• Luego arrastre sobre el escenario y ubíquela según convenga para distribuir el escenario en sectores.
Para el diseño del escenario es de mayor utilidad el uso de las Reglas y Guías, que el uso de las
cuadrículas, debido a que las guías permiten una distribución rápida del escenario por sectores.
NOTA

El grado de presión para el encajado de los objetos está definido en píxeles con
respecto del tamaño del escenario y no de la pantalla de Windows.

5.4. CAPAS GUÍA


Al estudiar los puntos anteriores hemos estado utilizando capas normales. Ahora va a utilizar un tipo
de capa especial denominada capa guía.
Las capas guías se utilizan como referencia como las guías, para facilitar la ubicación de los objetos
en el escenario. Así puede dibujar un rectángulo para luego usarla como guía para introducir textos
en posiciones exactas. Flash no incluirá las capas guías en la película final, es decir, nada de lo que
aparezca en la capa guía se verá (véase la fig. 5.7).
Para una mejor comprensión, haga clic en el archivo de referencia ubicado en el CD en la Carpeta:
Archivos de Capítulos, explore y ubique la carpeta correspondiente al Sesión 5 – Manejo de Capas.
fla y haga clic dos veces para abrir el archivo y comenzar la exploración.
Para crear una capa guía se debe seguir los siguientes pasos:
• Primero cree una capa para luego crear en esta el objeto de referencia, algo como para distribuir
los elementos del escenario.

Fig. 5.7

129
Guía Práctica Adobe Flash CS6

• Cambie el nombre de esta capa a objeto Guía, para reconocerla con mayor facilidad.
• Luego presione un clic derecho sobre esta capa y elija la opción Guía, luego notará un símbolo al
inicio de la capa, señalando así que esta es una capa Guía (véase la fig. 5.8).

Fig. 5.8

De preferencia bloquee esta capa guía, ya que sólo se utilizará como referencia de posición para otros
elementos.
• Por ejemplo necesita que un texto encaje en este espacio, cree un texto y ajuste su tamaño hasta
que coincida con nuestra referencia o guía (véase la fig. 5.9).

Fig. 5.9

Al ejecutar una secuencia animada o exportar archivos, estos elementos salientes no incluirán la capa
guía, como en el caso de la Cuadrícula y las Líneas Guía extraídas de las reglas.
Para verificar este tema, presione Control más Enter, para ejecutar la aplicación, notará que en esta no
se muestra la capa guía.
• Hay otros tipos de capas muy interesantes como son: las capas guías de movimiento y las capas
máscaras que se verán en el capítulo correspondiente a animaciones.

5.5. PANEL ALINEAR

Este panel pertenece al grupo de paneles de diseño. Los objetos se pueden alinear, distribuir o
redimensionar con respecto a alguna referencia, como el borde superior del objeto situado más arriba,
el centro de los objetos o el tamaño mayor. También es posible alinear, distribuir o redimensionar varios
objetos tomando como referencia al escenario, así podemos hacer que se alineen con respecto a uno
de los bordes del escenario o que se repartan este espacio de manera uniforme.

130
Se
sió 5
n Ayudantes de precisión en el dibujo

Flash proporciona el panel de alinear (véase la fig. 5.10). Pero además presenta ya una ayuda visual
por defecto que funciona tan sólo al pasar sobre ella y aparece una línea punteada, dándonos la
referencia de alineación con respecto a un objeto, ya sea horizontal o vertical (véase la fig. 5.11, fig.
5.12, fig. 5.13, fig. 5.14).
Para una mejor comprensión, haga clic en el archivo de referencia ubicado en el CD en la Carpeta:
Archivos de Capítulos, explore y ubique la carpeta correspondiente al Sesión 5 – Alineación de Objetos.
fla y haga clic dos veces para abrir el archivo y comenzar la exploración.

Fig. 5.10

Figuras ubicadas en diferentes posiciones en el escenario:

Fig. 5.11

131
Guía Práctica Adobe Flash CS6

Objetos alineados con el borde superior del objeto más alto de alineación:

Fig. 5.12

Alineación automática de formas verticales, horizontales y combinadas:

Fig. 5.13

Fig. 5.14

132
Se
sió 5
n Ayudantes de precisión en el dibujo

5.6. PANEL TRANSFORMACIÓN

Con este panel podemos determinar las transformaciones que quiere aplicar al objeto seleccionado,
teniendo en cuenta que toda transformación es aplicada al rectángulo que el objeto ocupa en el
escenario (véase la fig. 5.15).

Fig. 5.15

Además, con este panel tenemos una cantidad de opciones que son muy prácticas como son:
Escalar, Girar y Sesgar. En este caso se cambió el tamaño a un 50% del tamaño original (veáse la
Fig. 5.16).

Fig. 5.16

133
Guía Práctica Adobe Flash CS6

En este caso se ha utilizado el Panel de Transformación cambiando el tamaño a un 50 % del tamaño


original.
Puede girar un objeto, pero antes recordar que este se efectúa sobre su centro de gravedad, punto base
o pívot. Será necesario cambiarlo de acuerdo a lo deseado (véase Fig. 5.17).

Fig. 5.17

El objeto ha sido rotado desde su centro un ángulo de 50º.


Al activar la casilla de sesgar nos muestra dos opciones de sesgo como son: sesgar horizontalmente y
sesgar horizontalmente introduciendo un valor en los recuadros (véase Fig. 5.18).

Fig. 5.18

Objeto original, sesgado horizontal con ángulos de 30º y -30º respectivamente.

134
Se
sió 5
n Ayudantes de precisión en el dibujo

5.7. PANEL INFORMACIÓN

Este panel contiene información sobre cualquier objeto en el escenario y nos permite modificar su forma
y situación con precisión matemática en píxeles (véase Fig. 5.19).

Fig. 5.19

El panel de información con respecto a la esquina superior izquierda del escenario.


Observe los valores que aparecen en los cuadros de texto X e Y, estos valores indican la posición del
objeto con respecto a la esquina superior izquierda del escenario (0,0). Modifique estos valores si
desea que el objeto se situé en una nueva posición (véase Fig. 5.20).

Fig. 5.20

La posición se determina desde el centro del objeto, como se muestra. También se cambió el tamaño
en píxeles.
NOTA

La posición de un objeto en el escenario puede tomar dos puntos de referencia, los


cuales son: la esquina superior izquierda, como el de la escena, o el centro del objeto.

135
n
s ió
6

Se
Uso y edición de
ilustraciones importadas

6.1. EDICIÓN DE IMÁGENES MAPA DE BITS

Si bien es cierto el uso de gráficos vectoriales convirtió a Flash en lo que es actualmente por el tamaño
de sus archivos animados, este también se ve en la necesidad de usar imágenes en mapa de bits.
Esta dependencia se da debido a que con gráficos vectoriales no se tiene una calidad visual de ciertos
gráficos como fotografías, es por eso que en un diseño generalmente se requiere el uso de imágenes
en mapa de Bits.

Fig. 6.1

Una ventaja clave de Adobe Flash


CS6 Professional es la posibilidad
de importar ilustraciones creadas en
otras aplicaciones y utilizar dichos
activos en los documentos de
Flash. Es posible importar gráficos
vectoriales e imágenes de mapas de
bits en distintos formatos de archivo,
lo que convierte a Adobe Flash CS6
Professional en una herramienta
versátil de ilustración.

Fig. 6.2

137
Guía Práctica Adobe Flash CS6

• Al importar un mapa de bits, se puede aplicar compresión y suavizado, colocar el mapa de


bits directamente en un documento de Adobe Flash CS6 Professional, utilizar el mapa de bits
como relleno, editarlo en un editor externo, separarlo en píxeles y editarlo en Adobe Flash CS6
Professional o convertirlo en una ilustración vectorial.
6.1.1. IMPORTAR IMÁGENES MAPA DE BITS

Adobe Flash CS6 Professional puede utilizar ilustraciones creadas en otras aplicaciones. Puede
importar gráficos vectoriales y mapas de bits en una gran variedad de formatos de archivo. Si tiene
QuickTime 4 o posterior instalado en su sistema, podrá importar formatos de archivo vectoriales o de
mapa de bits adicionales. Se pueden importar archivos de Adobe FreeHand (versión MX y anteriores) y
archivos PNG de Adobe Fireworks directamente en Flash conservando los atributos de dichos formatos.
Para importar un archivo a Flash:
• Seleccione la capa donde quedará el archivo importado.
• Despliegue el menú Archivo y elija la opción Importar.
• Del sub menú elija la opción Importar a Escenario o la combinación de teclado Control + R.
Del cuadro de importación puede elegir el tipo de formato a importar (véase Fig. 6.3).

Fig. 6.3

138
Se
sió 6
n Uso y edición de ilustraciones importadas

O de forma general puede dejar esta lista en todos los formatos, para elegir rápidamente algún archivo
admisible en Flash.
• Busque el archivo deseado y selecciónelo. Si un archivo importado tiene varias capas, Flash
puede crear nuevas capas (según el tipo de archivo importado). Las nuevas capas aparecen en
la línea de tiempo. Para facilitar el entendimiento de este capítulo, use la opción para Abrir un
archivo de referencia ubicado en el CD, en la Carpeta: Archivos de Capítulos, explore y ubique la
carpeta correspondiente al capítulo 6, donde se encuentra el archivo: Ilustraciones Importadas
CS6.fla.
• Por último, presione en abrir y el archivo se incluirá en la escena y en la capa actual.

Fig. 6.4

Si el nombre del archivo que va a importar acaba con un número y existen archivos adicionales
numerados secuencialmente en la misma carpeta, siga uno de los siguientes procedimientos:
• Haga clic en No para importar sólo el archivo especificado. Para este capítulo, si se presenta este
tipo de situaciones use la opción No, ya que la opción Sí añade más fotogramas a la escena y
este pertenece al capítulo de animación. Para mayor comprensión siga lo siguiente:
• Haga clic en Sí para importar todos los archivos de la secuencia.
A continuación se muestran ejemplos de nombres de archivos que pueden utilizarse como secuencias:
Foto001.gif, Foto002.gif, Foto003.gif
Pájaro 1, Pájaro 2, Pájaro 3
Mar-001.ai, Mar-002.ai, Mar-003.ai
139
Guía Práctica Adobe Flash CS6

6.1.2. TRANSFORMAR LOS MAPAS DE BITS

Los mapas de Bits se comportan como grupos, es decir, puede aplicar casi todos los métodos de
selección, pero no puede recortarlos con marcos de selección. Pero si puede desplazar el mapa de
Bits, también puede aplicar la herramienta de transformación libre para deformarlo.
Siendo su comportamiento y forma rectangular dependiendo del tipo de archivo importado, como los
archivos que tienen transparencia (Alfa) incluida (véase Fig. 6.5).

Fig. 6.5

Lo que no se puede aplicar a los mapas de bits, es la transformación de Envoltura, ya que eso
implicaría deformar la dirección de los píxeles y ese procedimiento se puede realizar en programas
como Adobe Photoshop.

6.1.3. SEPARAR MAPA DE BITS PARA SU EDICIÓN

Como se habrá dado cuenta los mapa de bits importados no se recortan al interceptarlos con otros
objetos y no se cortan cuando se realizan marcos de selección en el borde de los mismos, ya que su
comportamiento es diferente. (Véase Fig. 6.6).
Para un facilitar un entendimiento de este capítulo, use la opción Abrir un archivo de referencia
ubicado en el CD, en la Carpeta: Archivos de Capítulos, explore y ubique la carpeta correspondiente
al sesión 6, donde se encuentra el archivo: Separar Imágenes CS6.fla.

140
Se
sió 6
n Uso y edición de ilustraciones importadas

Fig. 6.6

De forma similar a los objetos agrupados incluidos en una misma capa, también se puede ordenar la
posición en el solapamiento de las mismas.
Para editar y recortar el mapa de bits este primero se tiene que separar, es decir, pasar a ser un
objeto editable. La edición del mapa de bits generalmente consiste no sólo en transformarlo como se
vio, sino más bien en eliminar ciertos sectores de este para quedarse; por ejemplo, sólo con la silueta
del elemento que se necesite de una imagen (véase Fig. 6.7).

Fig. 6.7

141
Guía Práctica Adobe Flash CS6

ሳ para Separar uN Mapa de bItS:


Seleccione el mapa de bits, luego puede realizar cualquiera de estas acciones:
• Despliegue el menú Modificar y elija la opción Separar.
• De forma práctica use la combinación de teclado Control + B.

Luego podrá realizar la edición en la imagen.

6.1.4. RECORTAR LOS MAPAS DE BITS

Una vez que el mapa de bits está separado, se le puede tratar como un objeto simple de Flash, es decir,
se puede recortar con todos los métodos antes vistos, por selección e intersección de objetos (véase
Fig. 6.8).
Puede aprovechar la herramienta de selección para reducir el área del mapa de bits, realizando
marcos de selección sobre la imagen ya separada.

Fig. 6.8

Si lo que requiere es sólo el contorno de elementos de la imagen, conviene eliminar parte del mapa
de bits después de seleccionar los bordes como muestra la imagen siguiente (véase Fig. 6.9).

Fig. 6.9

142
Se
sió 6
n Uso y edición de ilustraciones importadas

Como en el caso de los objetos vectoriales, puede interceptar trazos de línea sobre el mapa de Bits,
para limitar las zonas que utilizará. Como en la imagen siguiente se intercepta el contorno de un
círculo sobre el mapa de Bits (véase Fig. 6.10).

Fig. 6.10

Luego puede eliminar la parte exterior del mapa de Bits para crear una nueva trama de la imagen
(véase Fig. 6.11).

Fig. 6.11

También puede eliminar la parte interior para crear una perforación en la imagen (véase Fig. 6.12).

Fig. 6.12

En conclusión puede aplicar los cortes que se vieron con los objetos vectoriales..

143
Guía Práctica Adobe Flash CS6

6.1.5. HERRAMIENTA DE SELECCIÓN LAZO

Con la herramienta de selección Lazo, puede seleccionar sectores de un gráfico en el modo de


mano alzada, es decir, dibujar la zona de selección, este tipo de selección puede variar según la
configuración de las opciones de la herramienta.
Esta herramienta sirve para seleccionar partes de figuras, imágenes y objetos situados de cualquier
manera en el escenario. Selecciona todo lo que está dentro de la línea que crea con la herramienta,
como una sola unidad o grupo, y se puede trasladar, cortar, escalar, rotar y copiar como desee.
Tome en cuenta que si lo que requiere es quedarse sólo con un contorno definido del gráfico, esta
herramienta no le da una solución total, sino más bien una parcial, ya que al seleccionar a mano
alzada no se tiene precisión.
ሳ para SeleccIoNar objetoS a MaNo alzada:
• Primero separe la imagen mapa de Bits.
• Active la herramienta Lazo .
• Luego con clic izquierdo inicial en el gráfico, arrastre el cursor por la zona a seleccionar, para
finalizar trate de acercar el cursor donde inicio el trazo (véase Fig. 6.13).

Fig. 6.13

Si deja de arrastrar el cursor para cerrar el área dibujada, Flash cerrará el área con una línea recta.
Una vez finalizada la selección desplace el área seleccionada para ir reduciendo el borde del
contorno (véase Fig. 6.14).

144
Se
sió 6
n Uso y edición de ilustraciones importadas

Fig. 6.14

NOTA

Este tipo de selección no sólo se puede aplicar a contornos interiores o sólo a


mapas de Bits, sino también a cualquier tipo de objeto en Flash.

Con esto ya tiene una solución parcial para luego eliminar los bordes restantes con otra herramienta,
como con el uso del Borrador (véase Fig. 6.15).

Fig. 6.15

NOTA

Si desea añadir una selección a otra previamente realizada, hay que presionar y
mantener la tecla Shift antes de realizar la segunda selección.

145
Guía Práctica Adobe Flash CS6

ሳ opcIoNeS y coNfIguracIóN del lazo


Utilizando las opciones de la herramienta Lazo puede facilitar la selección, dependiendo del tipo de
gráfico, como aquellos que tienen bordes rectos o colores de relleno uniformes.
Esta herramienta dispone de 3 opciones: Modo Polígono, Varita Mágica y las Propiedades de Varita
Mágica (Véase Fig. 6.16).
Fig. 6.16

ሳ SeleccIóN polIgoNal
Si el gráfico que desea editar tiene bordes rectos, puede usar la opción de selección poligonal para
facilitar la selección, ya que esta no es una herramienta de mano alzada, sino de selección por
puntos consecutivos (véase Fig. 6.17).
Para seleccionar objetos con un área de selección de bordes rectos:
• Seleccione la herramienta Lazo.
• En la sección Opciones de la barra de herramientas, seleccione la opción Modo de Selección
Poligonal.
• Haga clic para establecer el punto de inicio.
• Luego añada puntos consecutivos alrededor de la imagen a seleccionar.

Fig. 6.17

• Para cerrar el área de selección, presione doble clic izquierdo (Véase Fig. 6.18).

Fig. 6.18

146
Se
sió 6
n Uso y edición de ilustraciones importadas

• Utilizar la herramienta Lazo con el modo Polígono para seleccionar un área poligonal en un mapa
de bits. Una vez seleccionada, la hemos trasladado fuera de la imagen, para que se vea con
más claridad.
6.1.6. SELECCIÓN CON VARITA MÁGICA

Esta opción se utiliza de la misma manera que en otros programas populares, como es Photoshop. Su
trabajo es seleccionar todas las áreas de similar color en un mapa de bits. Sin embargo, tiene algunas
diferencias con Photoshop: si se selecciona un área, luego puede añadir más zonas a la selección
presionando la tecla Shift y haciendo un clic sobre otras zonas (véase Fig. 6.19).

Fig. 6.19

• Para seleccionar con la Varita Mágica:


• Seleccione la herramienta Lazo.
• En la sección Opciones de la Barra de herramientas, seleccione la opción Varita Mágica.
• Si la opción Selección Poligonal se encuentra activa, desactívela para no mezclar las opciones.
• Luego presione una vez sobre una zona del dibujo, donde se encuentre una concentración de
color para seleccionarlo fácilmente (véase Fig. 6.20).

Fig. 6.20

147
Guía Práctica Adobe Flash CS6

• Una vez seleccionada la zona, puede desplazarla o eliminarla para ir calando el gráfico de
importancia (véase Fig. 6.21).

Fig. 6.21

• Como notará en la imagen anterior se eliminó la parte superior del gráfico, pero no se llega a
seleccionar quizá toda la zona que se desea eliminar, esto se da porque al reconocer colores
semejantes, esta herramienta tiene problemas cuando los gráficos presentan escalas de
color.
• También puede continuar seleccionando otras zonas para ir calando la figura por sectores
o también añadir a la selección otras zonas con la varita mágica presionando la tecla Shift
(véase Fig. 6.22).

Fig. 6.22

• Notará también que al reducir parte del gráfico con la Varita Mágica, esta no selecciona
correctamente la zona de interés, es por eso que después de esta herramienta se debe usar
el Borrador Manual para definir mejor las zonas.

148
Se
sió 6
n Uso y edición de ilustraciones importadas

ሳ coNfIguracIóN de varIta MágIca


Para incrementar la intensidad o umbral de la herramienta Varita Mágica, puede seleccionar mayor
cantidad de color semejante al que se designa con un punto en el gráfico, es decir, si el color
designado se encuentra en escala de colores, con la varita puede seleccionar un gran rango de
esta escala para facilitar la selección en el panel de las opciones para la Varita Mágica. (Véase
Fig. 6.23).

Fig. 6.23

Lo primero que se ve en el panel de las opciones de la Varita Mágica es un cuadrado de texto donde
puede introducir el umbral que quiera para la selección de los colores.
Umbral. Se puede introducir un valor de 1 a 200, y es indicativo a la similitud que queremos para
los píxeles adyacentes que se han de introducir en la selección que sean similares al color del píxel
que hemos escogido con la varita mágica. Cuando más grande sea el número que introduzcamos,
más píxeles o áreas se van a seleccionar.
Suavizado. Con su menú emergente de cuatro opciones: Píxeles, Brusca, Normal y Suave. El
suavizado se refiere a los bordes del mapa bits. Con esto puede mejorar la selección del contorno
del gráfico.

• Para configurar la Varita Mágica:


• Seleccione la herramienta Lazo.
• Presione el botón de Configuración de Varita
Mágica.
• Luego incremente el valor del umbral; por
ejemplo, a 30 unidades.
• Presione una vez sobre la parte superior del
gráfico.

Fig. 6.24

149
Guía Práctica Adobe Flash CS6

Notará claramente como se ha seleccionado gran parte del gráfico, luego puede mover o eliminar
esta.
Si incrementa demasiado el valor del umbral, puede seleccionar más zonas de las que requiera,
por tanto regule este umbral según las condiciones del gráfico. Es decir, puede incrementar para
algunas zonas y reducirlas para otras.

Fig. 6.25

6.1.7. HERRAMIENTA BORRADOR

Como se indicó anteriormente, los métodos para seleccionar sectores del dibujo no son una solución
definitiva, para terminar o corregir el calado de las imágenes se debe usar la herramienta Borrador,
ya que con esta puede controlar mejor las zonas de detalle a eliminar. También tome en cuenta que
este tipo de borrado es a mano alzada, es decir, el detalle del borrado dependerá de la destreza del
usuario.
La herramienta Borrador permite eliminar trazos y rellenos. Puede borrar todo el escenario con rapidez,
borrar los diferentes segmentos de trazos o áreas rellenas, o borrar arrastrando el puntero. Produce
el mismo efecto contrario al de la herramienta Pincel. Es decir en vez de pintar, borra.
Tiene 3 opciones: Modo borrado, Grifo y Forma del borrador (Véase la Fig. 6.26).

Grifo

Modos de Formas de
Borrado Borrador

Fig. 6.26

150
Se
sió 6
n Uso y edición de ilustraciones importadas

ሳ coNfIguracIóN de la forMa y el taMaño del borrador


Al hacer un clic izquierdo sobre el botón de la forma borrador, aparece el menú
emergente donde se escoge la forma y el tamaño del borrador, como se muestra
(Véase la Fig. 6.27).

Fig. 6.26

Una vez elegida la forma y el tamaño del borrador, pasamos a escoger el modo de borrar. Se puede:
borrar todo el escenario con rapidez, borrar segmentos de líneas y rellanos o borrar por arrastre
(Véase la Fig. 6.28).
• Para eliminar sectores con la herramienta Borrador:
• Primero separe el mapa de bits a editar y elimine la
mayor cantidad de elementos con las herramientas
antes vistas.

Fig. 6.28

• Active la herramienta borrador, luego elija el tamaño y la forma del mismo, según las
condiciones del dibujo.
• Se recomienda realizar acercamientos a las zonas de detalle antes de proceder a borrar
(Véase la Fig. 6.29).
• Arrastre el cursor sobre las zonas a eliminar, como la herramienta pincel.

Fig. 6.29

De esta forma puede examinar con detalle el contorno de cualquier imagen, sólo basta con tener
paciencia y cuidado.

151
Guía Práctica Adobe Flash CS6

Si comete el error de borrar una zona que no debía borrar, esta se puede recuperar con facilidad.
Para ello utilice la herramienta de selección y arrastre el borde de la imagen como cuando se
curvaba el borde de los objetos vectoriales (Véase la Fig. 6.30).

Fig. 6.30

De esta forma puede completar la edición de cualquier contorno y corregirlo de ser necesario.
ሳ opcIóN grIfo
Para utilizar la opción modificador Grifo, se emplea lo mismo del cubo de pintura sólo que para
borrar. Una vez seleccionado, se hace clic sobre la línea o relleno que se quiera borrar del escenario
y queda borrado rápidamente.
• Opción Modos de Borrado
Al utilizar el modificador modo de borrado, haciendo un clic izquierdo sobre el botón, aparece el
menú emergente en el que podemos seleccionar el modo borrado que queremos. Hay cinco modos
de borrado: Borrar Normal, Borrar Rellenos, Borrar Editar líneas, Borrar Rellenos seleccionados y
Borrar Dentro (Véase Fig. 6.31).

Fig. 6.31

Con el Modo Borrar Normal se borran todos los elementos (líneas y rellenos) que están en
la misma capa. El borrador se hace mediante pasadas del borrador, como si se tratara de un
borrador normal. No es necesario seleccionar previamente el objeto.
Con el Modo Borrar Rellenos se borran solamente rellenos, sin afectar a las líneas. El método
es el mismo; mediante pasadas del borrador. No es necesario seleccionar previamente el objeto.

152
Se
sió 6
n Uso y edición de ilustraciones importadas

Con el Modo Editar líneas se borran solamente las líneas sin afectar a los rellenos. El método
es el mismo; mediante pasadas del borrador. No es necesario seleccionar previamente el objeto.
Con el Modo Borrar Rellenos Seleccionados se borran rellenos que previamente han de
seleccionarse. Es necesario seleccionar previamente el objeto.
Con el Modo Borrar Dentro se borra el relleno en el que se ha iniciado el trazo del borrador
(situación similar a la de pintar dentro con el pincel) este modo no afecta a las líneas (Véase
la Fig. 6.32).
Borrar Rellenos Borrar Rellenos
Seleccionados
Borrar Normal Editar Líneas Borrar Dentro

Fig. 6.32

NOTA

Para borrar todos los objetos del escenario presionar dos clics
izquierdos en el ícono de borrador.

6.1.8. IMPORTAR ARCHIVOS PDS

Para Importar un Archivo que tiene capas y creado en Photoshop, iremos a Menú < Archivo < Importar
< Importar a escenario (Véase Fig. 6.32, Fig. 6.33).

Fig. 6.33

153
Guía Práctica Adobe Flash CS6

Fig. 6.34

Para una mejor comprensión, haga clic en el archivo de referencia ubicado en el CD en la Carpeta:
Archivos de Capítulos, explore y ubique la carpeta correspondiente al Sesión 6 – hancook.psd y haga
clic en abrir.
Se abrirá una ventana donde se especifica cuántas capas hay y si queremos seleccionamos todas las
capas o solamente las que deseamos seleccionar, también se puede convertir en capas de Flash, el
tipo de compresión de la imagen si es en alta calidad o en menor calidad (Véase Fig. 6.34).
Al hacer clic en Abrir las capas de Photoshop se separan en capas también en Flash (Véase Fig.
6.35).

Fig. 6.35

154
3 RA EVALUACIÓN

1 ¿Cuáles son las herramientas de precisión que se pueden usar en Flash?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................

2 ¿Qué se requiere para editar imágenes importadas en Flash y qué ocurre con las imágenes importadas a Flash?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
3 ¿Qué ocurre si se separa varios mapas de bits y estos se encuentran solapados unos a otros?

....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
4 Adobe Flash al ser un programa con herramientas Vectoriales pero también usa imágenes en mapa de bits,
qué capacidad tiene en comparación a Adobe Photoshop.
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................

155
n
s ió
7

Se
Creación de rellenos
y contorno

7.1. UTILIZACIÓN DEL COLOR

La utilización tiene sus particularidades en todo el sistema de pintura, dibujo o impresión. Pero
estas aumentan cuando se trata de medios eléctricos. Es necesario entender bien las diferencias
entre la formación y reproducción de un color con los distintos medios, si queremos manejar el color
eficientemente en Flash o en cualquier otro programa gráfico.

La pantalla de un monitor está compuesta por una rejilla de píxeles, donde cada píxel tiene una
dirección. El ordenador envía a cada una de las direcciones de estos píxeles un color determinado.
Cada píxel está compuesto por tres puntos, uno por cada color primario, rojo, verde y azul (R, V, B)
que reciben del ordenador la cantidad de intensidad con que cada uno debe iluminarse. Cada punto de
color puede lograr una intensidad que va de 0 a 255. Estos son los valores que el ordenador envía a
cada dirección.
Esta es la descripción de la formación del color en el monitor en su más
eficiente presentación, y es lo que se denomina “un sistema de color de 24
bits” (Véase la Fig. 7.2). Sin embargo, existen ordenadores y situaciones
en que no se dispone o no se desea el sistema de 24 bits, sino de 16 bits
o incluso de 8 bits. En estos casos, habremos de conformarnos con una
reproducción de colores no tan eficiente o bastante menos exacta.

157
Guía Práctica Adobe Flash CS6

Es importante pues, tener en cuenta ciertas premisas cuando estamos trabajando con el color en
cualquier programa gráfico, y flash lo es.
• Para reproducir con el máximo grado de exactitud los colores fotográficos en la pantalla, es
necesario disponer del sistema de 24 bits.
• Los sistemas de 16 bits y de 9-8 bits no pueden reproducir la misma cantidad de colores, por lo
que existe en los ordenadores y en los programas la posibilidad de introducir la trama.
• La trama: es un mecanismo mediante el cual se producen colores intermedios, es decir, que un
color que falta en la paleta puede “generarse” con la mezcla de dos colores más cercanos a
ambos lados del color.
• El formato “gif” limita la salida a un número total de 255 colores, con la posibilidad de aplicar
trama. Este sistema se denomina color indexado.

7.2. LA HERRAMIENTA COLORES

Esta herramienta se encuentra en la barra de herramientas de dibujo y tiene dos opciones: color de
línea y color de relleno. Se utiliza con todas las herramientas de dibujo: Línea, Lápiz, Pluma, Bote de
tinta, Cubo de pintura, Óvalo y Rectángulo. Por lo mismo, es necesario estudiarlo a fondo. Como ambos
nombres lo indican, se activa cada una de ellas cuando necesitamos un color para los trazos o para los
rellenos, respectivamente (Véase la Fig. 7.3).
Color de Trazo Color de Relleno

Botón sin color


Botón de Trazo
y Relleno
Predeterminado
Fig. 7.3

Botón Intercambio de
Trazo y Relleno

Los modificadores absolutos del contenido de las opciones color de línea y color de relleno.
• En primer lugar tenemos el botón de blanco y negro, haciendo un clic izquierdo sobre el color de
línea en negro y el color de relleno en blanco.
• El botón del centro sirve para convertir en transparente el color de la opción que este activa.
• El botón de la derecha sirve para intercambiar los colores de ambas opciones.
7.2.1. LA PALETA DE COLORES

La paleta de colores de Flash 6 tiene 216 muestras de color, precisamente los del Web-safe por
defecto. Sin embargo, no solamente podemos añadir color web, como hemos explicado. También
podemos escoger otro color cualquiera, como veremos. Podemos alcanzar desde el menú: Ventana>
paneles de diseño> muestra de colores. Sin embargo, hay una diferencia entre abrir el panel desde
el botón de la barra de herramientas de dibujo a hacerlo desde el menú. El panel desde luego es el
mismo, pero no así sus modificadores.
158
Se
sió 7
n Creación de rellenos y de contorno

7.2.2. UTILIZACIÓN DE COLORES SÓLIDOS

Al hacer un clic izquierdo en el botón de la herramienta, emerge el panel con sus 216 colores sólidos
de web. Muestra el color escogido por nosotros. En él se puede observar dos cosas:
• Que en la parte superior izquierda hay una ventana donde aparece como relleno el color escogido.
• Que el número hexadecimal, aparece en el campo de texto a su derecha (Véase la Fig. 7.4,
Fig. 7.5). Lo que significa que podemos escribir dentro de él y anteponemos el símbolo #, para
obtener el color que deseemos y del que ya conocemos el número.
Color Hexadecimal Transparencia

Colores de
Muestra Windows

Color Capturado
Colores
Degradados

Fig. 7.4

NOTA

Si pasea el cursor (que ahora es un cuenta gotas) por cualquier parte de la pantalla
general de Flash 8, en la ventana del panel se irán captando los colores de los puntos por
donde pase el cuenta gotas y por supuesto, podrán ser utilizados en la película.

Color Hexadecimal Transparencia

Transparencia
Fig. 7.5 sin Color

En la esquina superior derecha de la paleta, se encuentra el botón que abre el panel de colores de
Windows. De este panel puede incorporarse cualquier color a la película de Flash.
• Haga un clic izquierdo en el ícono de colores de Windows (colores personalizados) que aparece
en la paleta de colores (Véase Fig. 7.6).
• Automáticamente se cierra la paleta, pero aparece un panel de color donde se puede controlar
mejor el color que queremos incorporar.

159
Guía Práctica Adobe Flash CS6

Espectro de
Colores

Indicador de
Luminosidad

Fig. 7.6

• Presionar el botón de “agregar a los colores personalizados”, una vez que elija un color del
espectro de colores y variar el indicador de luminosidad.
• Presionar Aceptar, el color elegido sustituirá el color previo. De esta forma podrá trabajar con
facilidad con un nuevo color.
• También se puede especificar un color exacto introduciendo valores precisos en los cuadros de
Matiz, Saturación, Luminosidad y el los RVA.

7.3. UTILIZACIÓN DEL PANEL DE COLORES

En este panel lo primero que observamos es que aparece la paleta de color. Tiene dos recuadros, el
de arriba para la paleta de los colores sólidos y el abajo para los degradados. Por su puesto, haciendo
un clic izquierdo en cualquiera de las muestras o degradados, se traslada el color al relleno o línea que
tenga seleccionada.
Botón Opciones
Cada nuevo documento
de Flash trae consigo una
paleta de colores web
por defecto, y además,
siete degradados (lineal
y radial). En la esquina
superior derecha están las
opciones del panel, que
al presionarse emerge el
menú con las opciones
(Véase Fig. 7.7).
Fig. 7.7

160
Se
sió 7
n Creación de rellenos y de contorno

7.3.1. DUPLICAR MUESTRA

En determinadas circunstancias, queremos duplicar una muestra de color (sea sólido o degradado)
para tenerlo mejor definido y más a mano en la paleta, añadiéndose en la parte inferior. Para duplicar
una muestra, basta activarla con el cursor y pulsar la opción del menú emergente Duplicar muestra
(Véase Fig. 7.8).

Fig. 7.8

En el panel muestra de color, la opción duplicar se da de la siguiente forma:


• Seleccionar el color a duplicar.
• Presionar el botón de opciones del panel de muestra de color
• Elegir la opción > duplicar muestra.

7.3.2. ELIMINAR MUESTRA

La siguiente opción es eliminar muestra. Se utiliza de la misma manera que la anterior opción. Se
selecciona una muestra de sólido o degradado, y se hace un clic izquierdo sobre la opción. La muestra
desaparecerá de la paleta, aunque sea una de las muestras web.

7.3.3. AÑADIR COLORES

Este comando abre la ventana de importación y exportación de colores. En ella podemos encontrar las
paletas de colores que hayamos guardado en nuestro disco duro con el comando guardar colores. Estas
se guardan por defecto con la extensión “clr”. La paleta que tengamos a la vista será reemplazada
por la que importamos.
NOTA

Existe la posibilidad de importar y exportar a Photoshop y Fireworks


paletas de colores, con extensión act. En este caso sólo se podrá exportar
colores sólidos y no degradados.

161
Guía Práctica Adobe Flash CS6

7.3.4. CARGAR COLORES PREDEFINIDOS

Hay una opción en este panel que resulta muy oportuno en circunstancias en que hemos añadido
colores que no hemos utilizado, queremos volver a la paleta que estaba y se cambia por la paleta
normal de Flash.
7.3.5. GUARDAR COLORES

Al activar la opción de muestra de color aparece la ventana de importación y exportación de colores.


En este caso, vamos a exportar la paleta con la que estamos trabajando. Podemos elegir entre las
tres extensiones más importantes, que son: Flash color set (clr) y color table (act) y gif. Utilizaremos
la opción clr para paletas que vayamos a usar dentro de flash, y la act para tablas de colores que
queramos exportar a Photoshop o Fireworks. También se puede exportar como imágenes gif, en
cuyo caso no podrán ser utilizadas como tablas de colores. Se muestra la ventana de importación y
exportación de juegos de colores de Flash (Véase Fig. 7.9).

Fig. 7.9

7.3.6. ORDENAR POR COLORES

El orden en que aparecen las muestras de color en la paleta está establecido según el valor del
primer color, lo que hace que las muestras vayan en disminución de intensidad, pero con mezcla de
colores. En muchas ocasiones, este orden no nos conviene para visualizar cambios que queramos,
pero se puede cambiar el orden a otro en el que las muestras estén distribuidas por color, mediante
el comando Cambiar colores.
7.3.7. CREACIÓN DE COLORES DEGRADADOS

Una mejor forma de representar el relleno de color de los objetos, es mediante el uso de colores
degradados, un buen color de degradado puede cambiar toda la expresión de su diseño, además de
producir una mejor sensación visual, siendo esta más agradable que el color de relleno sólido (Véase
Fig. 7.10).
Flash proporciona herramientas para que pueda crear diversas alternativas para crear degradados de
tipo lineal o radial, combinando todos los colores antes mencionados.
162
Se
sió 7
n Creación de rellenos y de contorno

Fig. 7.10

7.4. PANEL DE COLOR

El Panel Color permite modificar la paleta de colores de un archivo FLA y modificar el color de los trazos
y rellenos. Algunas de las opciones son:
• Importar, exportar, eliminar y modificar la paleta de colores de un archivo FLA utilizando el panel
Muestras.
• Seleccionar colores en modo hexadecimal.
• Crear degradados de varios colores.
Utilizar degradados para obtener una amplia variedad de efectos, como dar profundidad a un objeto
bidimensional. Panel Color y los estilos de relleno (Véase Fig. 7.11)

Fig. 7.11

NOTA

El grado de transparencia en Flash nos permite un mejor control sobre los


gráficos gif. En este formato, todos los píxeles son opacos o vacíos, en el
sentido de que no tienen un color ciento por ciento o no tienen color.

163
Guía Práctica Adobe Flash CS6

En este panel nos da la posibilidad de crear estilos de relleno, que por defecto está en el estilo sólido,
pero existen otros estilos como: Lineal, Radial, Mapa bits y Ninguno. Panel de mezclador de colores con
estilos de relleno (Véase Fig. 7.12).

Tipo de
Degradado de Degradado
Relleno

Deslizador

Degradado de
Relleno

Deslizador
Fig. 7.12

7.5. TIPOS DE RELLENO

7.5.1. DEGRADADO LINEAL

Esta opción permite definir rellenos con degradados de tipo lineal. Por defecto, los degradados se
establecen con los colores blanco y negro, pero podemos hacer que en el degradado intervengan más
colores y que se mezclen en distinta proporción.
• Para elegir colores del degradado:
• Seleccionar el puntero, que definirá el color de degradado.
• Ir al sector del espectro de colores y elegir el color deseado, mover el deslizador hasta
encontrar el color deseado (Véase Fig. 7.13).
Fig. 7.13

Mover Deslizador

Elegir Color

Muestra
Elegir Puntero

164
Se
sió 7
n Creación de rellenos y de contorno

• Para Añadir o eliminar colores del degradado:


• Presionar un clic izquierdo debajo de la barra de definición, justo en el punto en el que desee
añadir el color. Un nuevo puntero aparece en la barra de definición.
• Seleccionar el nuevo puntero para darle un color de degradado que desea asignar al puntero.
Selección del nuevo puntero y agregar color (Véase Fig. 7.14).

Barra de definición

Puntero seleccionado

Fig. 7.14

• Para eliminar un puntero:


• Seleccionar el puntero.
• Presionar y arrastrar fuera de la barra de definición (Véase Fig. 7.15).
Puntero Seleccionado

Fig. 7.15

Luego de definir el degradado, guárdelo de la forma siguiente:


• Presionar el botón de opciones del panel Mezclador de colores.
• Aparece el menú emergente y elija Añadir muestra (Véase Fig. 7.16).

Fig. 7.16

165
Guía Práctica Adobe Flash CS6

7.5.2. DEGRADADO RADIAL

Al elegir este estilo de degradado note que todo lo que ha estudiado sobre el degradado lineal es aplicable
al degradado radial. El aspecto es lo único que cambia. Estilo de degradado radial (Véase Fig. 7.17).

Fig. 7.17

7.5.3. EDICIÓN DE RELLENO

Una vez que se ha logrado la combinación de color o el degradado este se aplica como relleno de
objetos o contornos, pero según las condiciones de su diseño puede variar la presentación del relleno
en el interior de un objeto, cambiando el ángulo del degradado, como también el radio si se trata de
un degradado radial, entre otros parámetros directamente en el escenario. Para un control del aspecto
del relleno degradado utilice la herramienta Transformación de Rellenos como se indica a continuación
(Véase Fig. 7.18).

Fig. 7.18

Para una mejor comprensión, haga clic en el archivo de referencia ubicado en el CD en la Carpeta:
Archivos de Capítulos, explore y ubique la carpeta correspondiente al Sesión 7 – Edición de Relleno.
fla y haga clic dos veces para abrir el archivo y comenzar la exploración.
166
Se
sió 7
n Creación de rellenos y de contorno

ሳ herraMIeNta traNSforMacIóN de loS relleNoS


Este herramienta de transformación de los rellenos tiene una gran importancia porque permite
modificar la orientación y la forma del relleno degradado, tanto lineal como radial.
• Para modificar el relleno:
• Se selecciona la herramienta haciendo un clic izquierdo en el ícono.
• Hacer un clic dentro de la figura con el relleno degradado.
• Aparecerán los selectores para realizar las modificaciones que se pueden realizar con cada
tipo de relleno (lineal o radial).
• Al aplicar el cubo de pintura con un degradado radial a un objeto circular, en las 12:00,
3:00, 6:00 y 9:00 (Véase Fig. 7.19).
las 12:00 las 3:00 las 6:00 las 9:00

Fig. 7.19

7.5.4. CONFIGURACIÓN DE TIPOS DE CONTORNOS

El panel de estilo de línea (personalizado) requiere de un estudio detallado, ya que contiene múltiples
opciones y combinaciones. Pero antes de comenzar dicho estudio, queremos hacer notar que cualquier
opción que escoja para personalizar el estilo de la línea es el resultado de una combinación de los
estilos predefinidos.
Naturalmente, la personalización nos permite un mayor grado de ajuste, pero no hay que olvidar que
se hace a costas de un mayor tamaño en el archivo final, y que en los ordenadores lentos el paso de
la película se hace menos eficiente (para esto último hay medios de control en muchos casos, como
veremos en el parte dedicada a la programación).
Para acceder al cuadro de configuración de los contornos, primero debe seleccionar un trazo de línea
o mantener activa una de las herramientas de dibujo como el Lápiz por ejemplo. Luego desplegar el
panel de propiedades (Véase Fig. 7.20).

Fig. 7.20

167
Guía Práctica Adobe Flash CS6

Con el panel de propiedades visible, presione una vez sobre el símbolo del Lápiz que se encuentra
al lado de la lista de Estilo de trazado para acceder al cuadro de configuración del trazado (Véase
Fig. 7.21).

Panel del estilo de Línea

Fig. 7.21

ሳ eStIlo de líNea SólIda


Con este estilo se traza una línea sólida, sin ningún adorno. Las únicas
variables de que se disponen con este estilo son el grosor y las esquinas
en punta.
Las opciones de grosor en el estilo Línea Sólida (Véase Fig. 7.22).
Fig. 7.22

ሳ eStIlo de líNea dIScoNtINua


Este estilo traza una línea de discontinua, cuyos elementos pueden modificarse a voluntad mediante
las opciones que nos permite el panel. Además, sus variables son las mismas que la de una línea
sólida, es decir, el grosor y las esquinas en punta. Si aumenta el cuadro visor a 4x, al seleccionar
las esquinas en punta puede observarse que los vértices están siempre señalados aunque los
espacios en blanco no lo permitan (Véase Fig. 7.23).

Fig. 7.23

168
Se
sió 7
n Creación de rellenos y de contorno

ሳ eStIlo de líNea de puNtoS


Este es otro estilo derivado de la línea sólida. En lugar de guiones se trazan puntos. Tienen, desde
luego, las variables de la línea sólida (grosor y esquinas en punta) y la opción que es propia, que
es el espacio entre los puntos de la línea o trazó, medido en puntos. Si se activa la casilla de las
esquinas en punta aseguramos que todos los vértices estén definidos con un punto, aunque este
se aglomere a veces con el último de la línea (Véase Fig. 7.24).

Fig. 7.24

ሳ eStIlo de líNea deNtada


Este tipo de línea es una combinación de puntos y guiones cuya apariencia puede personalizarse
ampliamente. Aparte de las opciones de todas las líneas (grosor y esquinas en punta) tiene otras
variables que son propias como el patrón con las variables y sus valores por defecto.
Las variaciones del patrón son siete: Sólida, Simple, Aleatoria, Punteada, Punteada Aleatoria,
Punteada Triple y Punteada Triple Aleatoria. Los resultados al aplicar cualquiera de ellas pueden
apreciarse en el cuadro del visor.
Las opciones de la altura de onda son cuatro: Plana, Ondulada, Muy Ondulada y Salvaje. Esta
última, (salvaje) es algo como muy, muy ondulada.
También son cuatro las opciones de la longitud de onda: Muy Corta, Corta, Media y Larga (Véase
Fig. 7.25).

Fig. 7.25

169
Guía Práctica Adobe Flash CS6

Los valores por defecto de las variables en el estilo dentada del trazo línea y las variaciones del
patrón.
Como es natural, con tantas opciones y combinaciones a nuestro alcance, establecer un trazo de
línea personalizado puede ser una tarea que consuma tiempo, pero que siempre tiene resultados
satisfactorios, si queremos que nuestro trazo se distinga o se corresponda con el espíritu del
mensaje que quiere llevar con su diseño (Véase Fig. 7.26).

Fig. 7.26

ሳ eStIlo de líNea puNteada


Este es un estilo que trata de imitar la línea irregular que solemos trazar a mano. Con todas sus
opciones y variables, puede ajustarse bastante bien a la idea que tengamos de lo que es un trazo
manual. Aparece de los ajustes en el grosor de la línea y los vértices, tiene sus propios parámetros,
que son: Tamaño del punto, Variación del punto y Densidad. Es una derivación del estilo de línea
de puntos, lo que se pone de manifiesto cuando ponemos el zoom a 4x en el cuadro visor (Véase
Fig. 7.27, Fig. 7.28).

Fig. 7.28

Fig. 7.27

Las opciones del tamaño del punto son cuatro: Muy pequeño, pequeño, medio y grande. Se refieren
todas ellas al tamaño y por lo tanto, no cambian la configuración de la línea, esta opción se refiere
a todos los puntos de la línea.
La opción de variación del punto se refiere a las diferencias de tamaño entre los puntos. Por lo
tanto, no afectan por igual a todos los puntos, como ocurre con la variable Tamaño de punto. Son
cuatro: Un tamaño, Pequeña variación, Diversos tamaños y Tamaños aleatorios (Véase Fig. 7.29).
170
Se
sió 7
n Creación de rellenos y de contorno

Fig. 7.29

ሳ eStIlo de líNea coN SoMbra


Este estilo de trazos de líneas es original y queda muy bien según en el diseño. La línea está
formada por guiones paralelos separados por un espacio regulable, como veremos. Además de las
propiedades de la línea (grosor y esquinas en punta), tiene seis parámetros manipulables: Grosor,
Espaciado, Vaivén, Girar, Curva y Longitud. Cada uno de ellos merece su estudio por la personalidad
al trazo que se quiera conseguir.
Colocar el grosor de la línea a 5 y las esquinas en punta para que se aprecie bien en el cuadro del
visor la composición del trazo. Activando el zoom a 4x, aunque no se ven los vértices, se aprecia
aún mejor el trazo, por lo que hemos incluido del cuadro del visor (Véase Fig. 7.30).

Fig. 7.30

El parámetro grosor se refiere desde


luego al grosor de las líneas verticales y
nada tiene que ver con el grosor o ancho
de la línea en general, se ajusta como
siempre con el menú emergente de la
izquierda. Sus opciones son cuatro: Muy
fina, Fina, Media y Gruesa, y sus efectos
se aprecian muy bien en el cuadro del
visor (Véase Fig. 7.31). Fig. 7.31

171
Guía Práctica Adobe Flash CS6

El parámetro espacio se refiere al espacio en puntos entre los guiones verticales. Cuando se pone
a Muy cercano y el parámetro Grosor no está en Muy fina ocurre que el resultado es una línea
continua, no se apreciará los guiones verticales (Véase Fig. 7.32).

Fig. 7.32

El parámetro vaivén se refiere a que las barras no se quedan dentro de unas paralelas imaginarias
y se modifica en algo el espacio entre las mismas. Tiene las opciones: Ninguno, Con rebote, Suelto
y Extremo (Véase Fig. 7.33).

Fig. 7.33

El parámetro Vaivén con sus cuatro opciones. En el cuadro visor se ve el efecto de aplicar la opción
Extremo aumentado a 4x.
El parámetro Giro hace que las barras giren y dejen de ser paralelas. Sus opciones son: Ninguna,
Leve, Media y Libre (Véase Fig. 7.34).
El parámetro Girar con sus cuatro opciones. En el cuadro visor se ve el efecto de aplicar la opción
Extremo aumentado a 4x.
172
Se
sió 7
n Creación de rellenos y de contorno

Fig. 7.34

El parámetro Curva hace que las barras dejen de ser rectilíneas para curvarse. El grado de curvatura
se puede ajustar con sus cuatro opciones: Recta, Algo curvada, Medianamente curvada y Muy
curvada.
El parámetro Longitud afecta a la longitud de las barras. Tienen cuatro opciones: Igual, Ligera
Variación, Variación Media, Aleatoria.

7.6. MAPA BITS

Este estilo aplica rellenos de mapa bits a las figuras. Inicialmente, el panel no muestra mapas bits para
su aplicación, por lo que debe incorporar archivos de mapa bits a su biblioteca de recursos.
• 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 (Véase Fig. 7.35).

Fig. 7.35

173
Guía Práctica Adobe Flash CS6

• Para repetir la imagen del mapa de bits como un patrón dentro de una forma, ajuste el tamaño
del relleno (Véase Fig. 7.36).

Fig. 7.36

• Seleccionando el patrón con la herramienta de Modificar relleno. Tenemos: Relleno normal,


Relleno con patrón escalado, Relleno con patrón rotado (Véase Fig. 7.37).

Fig. 7.37

NOTA

Para alinear objetos deberá tener en cuenta que


primero se debe de seleccionar los objetos, antes de
presionar las opciones de alinear.

174
Impreso en los Talleres Gráficos de

Surquillo
 7199700

También podría gustarte