Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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
(511) 748-0560
ventas@editorialmacro.com
http://www.editorialmacro.com
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
EDITORIAL
Introducción
Se
CONCEPTOS BÁSICOS
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
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.
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
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.
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:
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
Fig. 1.2
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.
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
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.
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
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
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
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
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
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
17
n
s ió
2
Se
ENTORNO DE
ADOBE FLASH CS6
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.
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
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
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
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.
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
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
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).
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.
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
Fig. 2.10
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
NOTA
26
Se
sió 2
n Entorno de Adobe Flash CS6
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
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
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.
ሳ 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
Fig. 2.22
30
Se
sió 2
n Entorno de Adobe Flash CS6
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
Fig. 2.24
31
Guía Práctica Adobe Flash CS6
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
Fig. 2.29
34
1 RA EVALUACIÓN
1 ¿Cuáles son los principios generales para diseñar una página 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
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.
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
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
Visualización
Configuración de Herramientas
Fig. 3.4
38
Se
sió 3
n Dibujo de objetos vectoriales
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
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.
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
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
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
42
Se
sió 3
n Dibujo de objetos vectoriales
Fig. 3.12
Fig. 3.13
43
Guía Práctica Adobe Flash CS6
Fig. 3.14
Fig. 3.15
44
Se
sió 3
n Dibujo de objetos vectoriales
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
46
Se
sió 3
n Dibujo de objetos vectoriales
Fig. 3.20
Fig. 3.21
ሳ copIar objetoS
Fig. 3.22
47
Guía Práctica Adobe Flash CS6
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
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
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
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
Fig. 3.33
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
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
• 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).
Fig. 3.39
55
Guía Práctica Adobe Flash CS6
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:
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
Fig. 3.43
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
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.
Fig. 3.48
58
Se
sió 3
n Dibujo de objetos vectoriales
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
Fig. 3.50
Fig. 3.51
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
Fig. 3.53
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.
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.
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.
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
Fig. 3.61
Fig. 3.62
64
Se
sió 3
n Dibujo de objetos vectoriales
Fig. 3.65
Fig. 3.66
65
Guía Práctica Adobe Flash CS6
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.
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
67
Guía Práctica Adobe Flash CS6
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
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
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
Fig. 3.76
69
Guía Práctica Adobe Flash CS6
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
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
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
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
Fig. 3.84
Fig. 3.85
72
Se
sió 3
n Dibujo de objetos vectoriales
Fig. 3.86
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
Fig. 3.90
Fig. 3.91
NOTA
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
Fig. 3.92
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
Fig. 3.95
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.
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
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
Fig. 3.103
Fig. 3.104
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.
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.
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.
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.
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
Fig. 3.109
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
Fig. 3.112
NOTA
Fig. 3.113
Fig. 3.114
83
Guía Práctica Adobe Flash CS6
Fig. 3.115
Fig. 3.116
NOTA
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
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
Fig. 3.121
Fig. 3.122
86
Se
sió 3
n Dibujo de objetos vectoriales
Fig. 3.123
NOTA
Fig. 3.124
NOTA
87
n
s ió
4
Se
DISTRIBUCIÓN DE GRUPOS,
CAPAS Y TEXTO
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
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
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.
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.
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).
Capas
Fig. 4.20
Opciones de Capas
97
Guía Práctica Adobe Flash CS6
ሳ 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
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
Fig. 4.24
99
Guía Práctica Adobe Flash CS6
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.
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
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
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
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.
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.
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
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.
Fig. 4.46
110
Se
sió 4
n Distribución de grupos, capas y texto
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
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.
Fig. 4.51
112
Se
sió 4
n Distribución de grupos, capas y texto
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.
113
Guía Práctica Adobe Flash CS6
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
114
Se
sió 4
n Distribución de grupos, capas y texto
Fig. 4.56
NOTA
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
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
Fig. 4.58
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
Fig. 4.62
• 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
Flash proporciona funciones mejoradas de conversión de fuentes a mapa de bits que permiten
especificar las propiedades de suavizado de las mismas.
Fig. 4.69
119
Guía Práctica Adobe Flash CS6
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
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
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.
122
2 DA EVALUACIÓN
1 ¿Cuál es la diferencia entre una imagen mapa de Bits y una imagen Vectorial?
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
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
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
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
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
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
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.
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.
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
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
Fig. 5.13
Fig. 5.14
132
Se
sió 5
n Ayudantes de precisión en el dibujo
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
Fig. 5.17
Fig. 5.18
134
Se
sió 5
n Ayudantes de precisión en el dibujo
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
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
135
n
s ió
6
Se
Uso y edición de
ilustraciones importadas
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
Fig. 6.2
137
Guía Práctica Adobe Flash CS6
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
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.
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
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
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
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
ሳ 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
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
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.
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
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
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.
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
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
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
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.
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 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
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.
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.
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
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
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.
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
161
Guía Práctica Adobe Flash CS6
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
Fig. 7.9
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
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
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
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
Barra de definición
Puntero seleccionado
Fig. 7.14
Fig. 7.15
Fig. 7.16
165
Guía Práctica Adobe Flash CS6
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
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
Fig. 7.19
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).
Fig. 7.21
Fig. 7.23
168
Se
sió 7
n Creación de rellenos y de contorno
Fig. 7.24
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
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
Fig. 7.30
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.
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
Fig. 7.37
NOTA
174
Impreso en los Talleres Gráficos de
Surquillo
7199700