Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Optativa de 2º cuatrimestre
TEMA 1
Pág. -2-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
INDICE
Pág. -3-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -4-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -5-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
No he querido hacer este apartado muy técnico sino más conceptual y con una visión
concreta.
También es texto una composición de caracteres imprimibles (con grafía) generados por
un algoritmo de cifrado que aunque no tienen sentido para cualquier persona si puede
ser descifrado por su destinatario texto claro original.
Texto lingüístico
Pág. -6-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Texto y discurso
No puede haber discurso sin un texto que lo sustente; por lo tanto, debe tenerse en
cuenta que lo que se postula sobre los textos bien vale para los discursos.
Texto y escritura
Otra noción importante es que los textos (y discursos) no son sólo monologales.
En lingüística, el término texto sirve tanto para producciones en que sólo hay un emisor
(situaciones monogestionadas o monocontroladas) como en las que varios intercambian
sus papeles (situaciones poligestionadas o policontroladas) como las conversaciones.
Ejemplos:
MONOLOGAL
DIALOGAL
Características
Según los lingüistas Beaugrande y Dressler, todo texto bien elaborado ha de presentar
siete características:
Pág. -7-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Tipologías textuales
• Narrativas
• Descriptivas y
• Argumentativas
Pág. -8-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
A partir de la definición original de Ted Nelson han surgido otras propuestas como el
documento digital, que se puede leer de manera no secuencial o multisecuencial. Un
hipertexto consta de los siguientes elementos: nodos o secciones, enlaces o
hipervínculos y anclajes. Los nodos son las partes del hipertexto que contienen
información accesible para el usuario. Los enlaces son las uniones o vínculos que se
establecen entre nodos y facilitan la lectura secuencial o no secuencial por los nodos del
documento. Los anclajes son los puntos de activación de los enlaces.
Los hipertextos pueden contener otros elementos, pero los tres anteriores son los
componentes mínimos. Otros elementos adicionales pueden ser los sumarios e índices.
En este sentido, se habla, por ejemplo, de hipertextos de grado 1, 2, etc., según tengan la
cantidad de elementos necesarios. Actualmente la mejor expresión de los hipertextos
son las páginas Web navegables.
En este contexto, el hipermedia propone y hace posible un tipo de producto cultural que
se consume no linealmente, que se organiza en una estructura orientada a la
interconexión e integración del conocimiento, y que se aleja de la autoría y gestión
centralizada. Los sistemas basados en el hipermedia ayudan a desarrollar procesos de
comunicación participativos, en donde la materia comunicativa es apta para ser
"vivida", y acercan firmemente el producto cultural a lo que llamamos "obras abiertas".
No linealidad
Para Aristóteles, una trama -el modo en el que se disponen los elementos que forman la
historia- bien construida tenia que describir una secuencia fija, un principio y un final
determinados, y una magnitud de la historia definida. El hipermedia vulnera todos y
cada uno de sus postulados. Algunos teóricos apuntan que la narrativa clásica -la
estructuración de la historia en una trama lineal- responde a condicionantes culturales.
Así, la construcción temporal de la realidad y, consecuentemente, el auge de las
relaciones causales, se asocia a la aparición de la imprenta.
Pág. -9-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Interconexión e integración.
El hipermedia, como lenguaje vertebrador de las potencialidades del medio digital, y las
redes bidirecionales, paradigma de los soportes on-line interactivos, aumentan las
posibilidades de interconexión e integración de la información, a la vez que desdibujan
los factores que diferencian los productos culturales. En el medio interactivo por red, el
texto pierde su soberbia desde el momento que deja de ser una entidad cerrada en el
espacio y el tiempo, como sucedía en la obra convencional.
A pesar de que en una primera instancia los sistemas multimediáticos hacen posible que
la obra pueda relacionarse con ella misma, delegando al lector su lectura no lineal y la
Pág. -10-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
En el medio interactivo por red, las marcas de origen y final que caracterizan cualquier
obra convencional pueden desaparecer definitivamente. En primer lugar, la variedad de
caminos asociacionistas que puede describir el usuario durante el proceso de acceso no
lineal a la información multiplica el número de comienzos y finales. Por otro lado, la
interconexión e integración de textos y de obras y las posibles aportaciones del autor o
de los mismos usuarios, a través de las redes interactivas, borran los inicios y finales
conceptuales de la obra.
Por otro lado, la utilización de interficies basadas en sistemas icónicos (signos que
tienen una relación de semejanza con lo que representan), que se pueden animar, asociar
y transformar significativamente, representando entidades, relaciones y acciones de
manera intuitiva, y la universalidad del lenguaje audiovisual ayudan a superar las
barreras idiomáticas propias de la comunicación que se basa exclusivamente en el texto
verbal. En este sentido, hay que observar que cerca del 90% de los contenidos verbales
de la páginas Web son en inglés, según un estudio reciente desarrollado por el buscador
de información Altavista.
Descentralización de la autoría
El medio de comunicación interactivo por red no acepta una única voz dictatorial
materializada en una obra inmodificable, sino que potencia el diálogo entre los actores
de los procesos comunicativos, como consecuencia del carácter abierto y plural de su
lenguaje y de su estructura.
Pág. -11-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pierre Lévy (1990), difuminando la idea del individuo aislado como fundamento del
conocimiento humano, defiende que el saber sólo se puede concebir mediante
estructuras provisionales que circulan de un conjunto de información a otro. En este
sentido, podemos llegar a pensar que la configuración de miles de redes interconectadas
podrá equipararse a una macroestructura neuronal propiedad de toda la humanidad, en
donde determinados conjuntos generadores de información se alternaran la capacidad de
actuar como nodos -cruces- de conexión, creando y distribuyendo significado y
conocimiento.
En primer lugar, puede colaborar con el autor, entendiendo que actualiza los hipotéticos
caminos que previamente ha establecido. Como ya hemos visto, en el caso del
multimedia, en tanto que utiliza un soporte cerrado, el número de caminos es limitado,
de manera que el autor puede prever las secuencias que describirá el usuario. Ahora
bien, en las obras hipermediáticas los caminos pueden ampliarse hasta casi el infinito y
escaparse del control autorial. Así, el conjunto de informaciones exteriores a las que se
accede desde los enlaces previstos en la obra (que, a su vez, contienen otras
conexiones), pueden haberse modificado sin que el autor que sugiere estas referencias
exteriores sea consciente de los cambios. El usuario de los sistemas multimediáticos
conceptualmente construye el texto, a pesar de que tiene que utilizar una gramática que
le es creativamente ajena, entendiendo que el conjunto de normas establecidas por esta
"construcción" las ha delimitado el autor. En los sistemas hipermediáticos, el grado de
libertad del usuario aumenta significativamente.
Pág. -12-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
1.1 ¿Cuáles son los pasos para extraer de un texto una idea esencial?
a) Coherencia
b) Cohesión
c) Intención comunicativa
d) Debe existir aislado de la red de referencias
Pág. -13-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
1.5 Respecto a las principales ventajas de los modelos no lineales en los procesos de
estructuración de conocimiento, es incorrecto:
Pág. -14-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Un mapa de bits o imagen raster corresponde bit a bit con una imagen mostrada en la
pantalla, probablemente en el mismo formato en el que sería almacenado en la memoria
de la tarjeta de video o quizás en un dispositivo independiente. Un mapa de bits se
caracteriza por el ancho y el alto de la imagen en píxeles y el número de bits por píxel el
cual determina el número de colores que puede representar.
Pág. -15-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Colores
El modelo de colores RGB es un modelo aditivo en el que el rojo, verde y azul son
combinados de varias maneras para reproducir los demás colores. El nombre de el
modelo y la abreviación ‘RGB’ proviene de los tres colores primarios, rojo (Red), verde
(Green) y azul (Blue)
Pág. -16-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -17-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Un aspecto interesante es que estos colores pueden ser representados de varias maneras
que nos hemos encontrado en diferentes situaciones:
- La ciencia del color habla de colores en el rango 0.0 (mínimo) hasta el 1.0
(máximo). Muchas fórmulas de colores cogen estos valores. Un rojo de
intensidad completa es 1.0, 0.0, 0.0.
- Los valores de los colores pueden ser escritos como porcentajes, desde el 0%
(mínimo) hasta el 100% (máximo). Rojo de intensidad completa es el 100%,
0%, 0%.
- El valor de los colores pueden ser escritos como números en el rango 0 a 255,
simplemente multiplicando el rango 0.0 a 1.0 por 255. Este es la manera más
común en informática e imágenes donde en la programación es conveniente
almacenar cada valor en un byte (8 bits). Esta convención ha sido tan divulgada
que muchos escritores ahora consideran el rango 0 a 255 como autorizado. Rojo
intenso es 255,0,0.
- El mismo rango, 0 a 255 es a veces escrito en hexadecimal, muchas veces con
un prefijo (por lo general #). Como los números hexadecimales en este rango
pueden ser escrito con un formato fijo de dos dígitos, el rojo intenso #ff, #00,
#00 puede ser contraído a #ff0000. Esta convención es usada en los colores Web
(colores usados en el diseño de páginas Web). También es muy expandido su
visualización.
24-bit
Valores RGB en 24 bits por píxel (bpp) es también conocido como Color Verdadero
(Truecolor) y como hemos visto antes generalmente se especifica con tres enteros con
valores entre 0 y 255 representando cada uno las intensidades de rojo, verde y azul.
La siguiente imagen enseña las tres caras saturadas de un cubo RGB desplegadas en un
plano
Pág. -18-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Imagen 6 Imagen RGB de un cubo abierto sobre las tres caras de colores saturados.
Con este sistema 16.777.216 (2563 or 224) combinaciones discretas de tinte e intensidad
pueden ser especificadas. Está comprobado que el ojo humano solo puede distinguir
hasta diez millones de colores discretos (este número puede variar de persona en
persona dependiendo de la condición del ojo y de la edad de la persona.
16-bit
Hay también un modo de 16 bpp también llamado Highcolor en el que hay también 5
bits por color, llamado modo 555, o un bit extra para el verde (porque el componente
verde contribuye a el brillo de un color en el ojo humano), llamado modo 565.
32-bit
Este modo es también idéntico en precisión al modo de 24 bpp. Hay aun solo 8 bits por
componente y los ocho extra bits no suelen ser utilizados. La razón para la existencia
del modo 32 bpp es la mayor velocidad en la cual mucho del hardware moderno puede
acceder a datos que son alineados a direcciones de byte divisibles en potencias de dos
que los datos que no están alineados.
Algún hardware gráfico permite el byte no utilizado para ser usado como una capa de
paleta de colores. Una entrada de esta paleta (normalmente 0 o 255) está designada para
ser transparente, por ejemplo, cuando la capa es este valor la imagen de color verdadero
es mostrada. De otra manera el valor de la capa es buscado en la paleta y utilizado. Esto
permite a elementos de la GUI (Interfaz de usuario como los menús o el cursor del
Pág. -19-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
ratón) ser superpuesto sobre una imagen en color verdadero sin modificarla. Cuando
esta capa necesita ser eliminada, es simplemente limpiada de su valor de transparencia y
la imagen de color verdadero es enseñada de nuevo. Esta funcionalidad fue a menudo
utilizada en hardware gráfico para estaciones de trabajo Unix en los noventa y más tarde
en algunas tarjetas gráficas de PC. Sin embargo la tarjetas gráficas actuales ahora tienen
multitud de memoria y esta funcionalidad ha casi desaparecido.
Representación en 48-bit
El modo “16-bit” también puede ser referido a 16 bit por componente, resultando en 48
bpp. Este modo hace posible representar 65536 tonos de cada componente de color en
vez de 256. Este es utilizado principalmente en edición profesional de imagen como en
Adobe Photoshop para mantener una gran precisión cuando una secuencia de más de un
algoritmo de filtro es usado en una imagen. Con solo 8 bits por componente, errores de
redondeo tienden a ser acumulados con cada filtro realizado distorsionando el resultado
final.
Representación RGBA
Con la necesidad para componer imágenes hay una variante de RGB que incluye un
canal extra de 8 bit para las transparencias, resultando esto en un formato de 32 bpp. El
canal de transparencia es conocido generalmente como el canal alfa, por eso es el
nombre RGBA. Hay que notar que no cambia nada en el modelo RGB. RGBA no es un
modelo de color distinto, es solo un formato de archivo que integra información de
transparencia con la información de color en el mismo archivo.
La calidad de una imagen raster está determinada por el número total de píxeles
(resolución) y la cantidad de información en cada píxel (a menudo llamado profundidad
de color). Por ejemplo, una imagen que almacena 24 bits de color por píxel (el estándar
para todos los dispositivos desde 1995) puede representar grados suaves de sombras que
uno que solo almacena 16 bits por píxel pero no tan suave como uno que almacena 48
bits (técnicamente; esto no puede ser discernible por el ojo humano). Por otro lado, una
imagen recogida en 640x480 píxeles (luego entonces conteniendo 307.200 píxeles) se
verá rugosa y en bloques comparada con la misma a 1280x1024 (1.310.720 píxeles).
Como ya se ve que conlleva una gran cantidad de información almacenar una imagen de
alta calidad, técnicas de compresión de datos son utilizadas para reducir el tamaño
almacenado en disco. Esto lo veremos en el siguiente apartado.
Los gráficos raster no pueden ser escalados a una resolución alta sin pérdida de calidad
aparente. Esto es en contrate a gráficos vectoriales, el cual puede fácilmente escalar a la
calidad del dispositivo en el cual está representado. Gráficos raster son más prácticos
que gráficos vectoriales para fotografías y imágenes foto realistas, mientras gráficos
vectoriales son más prácticos para diseño gráfico, sistemas de información geográfica o
conjuntos de tipografías.
Pág. -20-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Otro punto a tener en cuenta es que los monitores modernos actuales pueden mostrar
acerca de 72 a 130 píxeles por pulgada y algunas impresoras modernas pueden llegar
has 2400 puntos por pulgada o más; determinar la resolución de imagen más apropiada
para una impresora puede ser difícil ya que la salida impresa puede tener un nivel de
detalle más grande que lo visto en el monitor.
BMP
Los archivos con extensión .BMP, en los sistemas operativos Windows, representan
la sigla BitMaP (o también Bit Mapped Picture), o sea mapa de bits. Los archivos de
mapas de bits se componen de direcciones asociadas a códigos de color, uno para cada
cuadro en una matriz de píxeles tal como se esquematizaría un dibujo de "colorea los
cuadros" para niños pequeños. Normalmente, se caracterizan por ser muy poco
eficientes en su uso de espacio en disco, pero pueden mostrar un buen nivel de calidad.
Otra desventaja de los archivos BMP es que no son utilizables en páginas Web debido a
su gran tamaño en relación a su resolución.
Dependiendo de la profundidad de color que tenga la imagen cada píxel puede ocupar 1
o varios bytes. Generalmente se suelen transformar en otros formatos, como JPEG
(fotografías), GIF o PNG (dibujos y esquemas), los cuales utilizan otros algoritmos para
conseguir una mayor compresión (menor tamaño del archivo).
Los archivos comienzan (cabecera o header) con las letras 'BM' (0x42 0x4D), que lo
identifica con el programa de visualización o edición. En la cabecera también se indica
el tamaño de la imagen y con cuántos bytes se representa el color de cada píxel.
GIF
El formato fue creado por CompuServe en 1987 para dotar de un formato de imagen a
color para sus áreas de descarga de ficheros, sustituyendo su temprano formato RLE en
blanco y negro. GIF llegó a ser muy popular porque podía usar el algoritmo de
compresión LZW (Lempel Ziv Welch) para realizar la compresión de la imagen, que era
más eficiente que el algoritmo Run-Lenght Encoding (RLE) usado por los formatos
PCX y MacPaint. Por lo tanto, imágenes de gran tamaño podían ser descargadas en un
razonable periodo de tiempo, incluso con modems muy lentos.
GIF es un formato sin pérdida de calidad, siempre que partamos de imágenes de 256
colores o menos. Una imagen de alta calidad, como una imagen de color verdadero
(profundidad de color de 24 bits o superior) debería reducir literalmente el número de
Pág. -21-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
colores mostrados para adaptarla a este formato, y por lo tanto existiría una pérdida de
calidad.
PNG
Las imágenes PNG usan la extensión (.png) y han obtenido un tipo MIME (image/png)
aprobado el 14 de octubre de 1996.
Pág. -22-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pese a que las características técnicas y de compresión hacen del PNG un formato ideal
para sustituir al GIF, su adopción ha sido muy lenta debido en parte a comparaciones
erróneas y algunas desventajas técnicas:
• No está soportado por algunos navegadores muy viejos (sin embargo estos
navegadores son muy raros hoy en día)
• No soporta animación
• La administración de color fallaba en algunos navegadores (actualmente no es
muy importante y se puede evitar)
Falsas creencias:
JPG
Una de las características que hacen muy flexible el JPEG es el poder ajustar el grado de
compresión. Si especificamos una compresión muy alta se perderá una cantidad
significativa de calidad, pero obtendremos ficheros de pequeño tamaño. Con una tasa de
compresión baja obtenemos una calidad muy parecida a la del original, y un fichero
mayor.
Pág. -23-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Esta pérdida de calidad se acumula. Esto significa que si comprime una imagen y la
descomprime obtendrá una calidad de imagen, pero si vuelve a comprimirla y
descomprimirla otra vez obtendrá una perdida mayor. Cada vez que comprima y
descomprima la imagen, esta perderá algo de calidad.
El formato de ficheros JPEG o JPG fue creado por un grupo independiente, llamado
JFIF (JPEG File Interchange Format), quienes se encargan sólo de la utilización del
algoritmo JPEG para almacenar imágenes. Existen otros formatos de fichero que
también utilizan el algoritmo JPEG, el más conocido de ellos es JNG.
El algoritmo de compresión JPEG se basa en dos defectos visuales del ojo humano, uno
es el hecho de que es mucho más sensible al cambio en la luminancia que en la
crominancia, es decir, notamos más claramente los cambios de brillo que de color. El
otro es que notamos con más facilidad pequeños cambios de brillo en zonas
homogéneas que en zonas donde la variación es grande, por ejemplo en los bordes de
los cuerpos (entiéndase por cuerpo cualquier cosa y no un cuerpo humano).
TIFF
Estas etiquetas describen el formato de las imágenes almacenadas, que pueden ser de
distinta naturaleza:
Las etiquetas también describen el tipo de compresión aplicado a cada imagen, que
puede ser:
• Sin compresión
• PackBits
• Huffman modificado, el mismo que las imágenes de fax (UIT grupo III y IV
anteriormente CCITT).
• LZW, el mismo que usa el formato GIF.
• JPEG
Pág. -24-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Todos los ordenadores actuales traducen los gráficos vectoriales a gráficos rasterizados
para poderlos visualizar en pantalla. La imagen rasterizada posee un valor determinada
para cada píxel que la conforma, esta información se guarda en la memoria ocupando un
espacio específico.
Al contrario que un bitmap, una imagen vectorial puede ser escalada, rotada o
deformada, sin que ello perjudique en su calidad. Normalmente, un conjunto de trazos
se puede agrupar, formando objetos, y crear formas más complejas que permiten el uso
de curvas de Bézier, degradados de color, etc. En algunos formatos, como el SWF, las
imágenes vectoriales pueden animarse muy fácilmente sin que ello suponga un aumento
excesivo en el tamaño del archivo, al contrario de los bitmaps.
Dos imágenes de una locomotora la primera como imagen vectorial respecto de la segunda de la
que fue trazada.
Otro ejemplo, una línea se define en un gráfico de mapa de bits mediante las
propiedades de cada uno de los píxeles que la forman, mientras que en un gráfico
vectorial se hace por la posición de sus puntos inicial y final y por una función que
describe el camino entre ellos. Análogamente, un círculo se define vectorialmente por la
posición de su punto central (coordenadas x,y) y por su radio (r).
Pág. -25-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Cada vector en un gráfico vectorial tiene una línea de contorno, con un color y un
grosor determinados, y está relleno de un color a elegir. Las características de contorno
(o filete) y relleno se pueden cambiar en cualquier momento.
Las imágenes vectoriales se almacenan como una lista que describe cada uno de sus
vectores componentes, su posición y sus propiedades.
Ventajas y desventajas
Ventajas
Pág. -26-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Desventajas
Operaciones vectoriales
• Hay otro tipo de operaciones de un nivel mucho más sofisticado que incluye
acciones sobre objetos cerrados tales como: unir o soldar, combinar intersecar y
diferenciar.
Los gráficos vectoriales son ideales para dibujos simples y compuestos que necesitan
tener formas independientes o que no necesitan tener un carácter de realismo
fotográfico.
Impresión
Pág. -27-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
POSTCRIPT
Características
Pág. -28-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
SVG
SWF
Pág. -29-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
2.1. ¿Qué efecto resulta el valor mínimo en los tres componentes del modelo RGB?
a) El color blanco.
b) El color negro.
c) El color Rojo, Verde y Azul.
d) El color magenta fusión de los tres colores primarios.
2.3. ¿Por qué determinar la resolución de una imagen para una impresora puede ser
complicado?
a) Una variante del RGB que incluye un canal extra de 8 bit para las
transparencias.
b) Un formato de imagen que no incluye compresión.
c) Una representación de colores en cuatro componentes de color.
d) Ninguna de las anteriores.
Pág. -30-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Para solucionar esto los diferentes formatos de imagen (que hemos visto en el punto
anterior) añaden técnicas de compresión diferentes. La compresión, en realidad, consiste
en sustituir la cadena de datos por otra más corta cuando se guarda el archivo.
Ciertos métodos son reversibles o sin pérdidas ("lossless", en inglés), porque permiten
la reconstrucción exacta del original. Pero con otros, la información original sólo se
recupera aproximadamente, ya que se descarta una parte de los datos ("lossy"), a
cambio de relaciones de compresión mucho mayores.
Sistemas no adaptativos
Los no adaptativos (código Huffman, CCITT) establecen a priori una tabla de códigos
con las combinaciones de bits que más se repiten estadísticamente. A estas secuencias
se asignan códigos cortos, y a otras menos probables claves más largas. El problema
que presentan es que un diccionario de claves único tiene resultados muy diferentes en
distintos originales.
Algoritmo de Huffman
El algoritmo consiste en la creación de un árbol binario que tiene cada uno de los
símbolos por hoja, y construido de tal forma que siguiéndolo desde la raíz a cada una de
sus hojas se obtiene el código Huffman asociado.
1. Se crean varios árboles, uno por cada uno de los símbolos del alfabeto,
consistiendo cada uno de los árboles en un nodo sin hijos, y etiquetado cada uno
con su símbolo asociado y su frecuencia de aparición.
2. Se toman los dos árboles de menor frecuencia, y se unen creando un nuevo
árbol. La etiqueta de la raíz será la suma de las frecuencias de las raíces de los
dos árboles que se unen, y cada uno de estos árboles será un hijo del nuevo
árbol. También se etiquetan las dos ramas del nuevo árbol: con un 0 la de la
izquierda, y con un 1 la de la derecha.
3. Se repite el paso 2 hasta que sólo quede un árbol.
Pág. -31-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Con este árbol se puede conocer el código asociado a un símbolo, así como obtener el
símbolo asociado a un determinado código.
Para obtener el código asociado a un símbolo se debe proceder del siguiente modo:
En la práctica, casi siempre se utiliza el árbol para obtener todos los códigos de una sola
vez; luego se guardan en tablas y se descarta el árbol.
Imagen 7 Ejemplo de codificación de una línea de píxeles sobre una tabla de cuatro entradas y
sobre otra de seis.
Sistemas semiadaptativo
Pág. -32-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Los compresores de uso general más populares utilizan métodos como éste, por eso
tardan más en empaquetar los datos que en descomprimirlos. El número de entradas de
la tabla puede ser configurable.
Sistemas adaptativos
Entre los métodos adaptativos, el más simple es el RLE (Run Lengh Encode), que
consiste en sustituir series de valores repetidos por una clave con indicador numérico.
Imagen 8 El método RLE codifica series de píxeles repetidos. Esta secuencia de 12 valores se anota
con seis datos
Muchos otros métodos derivan de éste, pero su eficacia depende del tipo de imagen. Los
dos ejemplos siguientes tienen 25 valores, pero mientras que el primero se queda en 10
datos, el segundo (un caso extremo) no reduce su tamaño, sino que lo duplica. La
anotación de píxeles por series es adecuada en imágenes con zonas amplias de colores
uniformes, pero no en otras con cambios frecuentes de valor o predominio de texturas:
El sistema adaptativo LZ (de Abraham Lempel y Jacob Ziv), del que deriva el LZW
(Lempel-Ziv-Welch), es más ingenioso y consigue, en una lectura única, codificar
repeticiones sin crear una tabla de códigos. Cuando se localiza una secuencia similar a
otra anterior, se sustituye por una clave de dos valores: los correspondientes a cuántos
pasos se retrocede y cuántos datos se repiten.
Pág. -33-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
En este caso, se rastrean estas regiones de manera que mediante escalado, rotación,
reflejo o combinación de transformaciones puedan corresponder a un bloque. Se anotan
correspondencias y se testean, seleccionando las que permitan una reconstrucción más
parecida de los datos.
Pág. -34-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Imagen 12 En modo LAB, cada píxel tiene un valor L de luz y dos valores AB para definir el color.
Obsérvese como sólo este paso de la compresión JPEG supone una disminución del 50% de los
datos a anotar.
Pág. -35-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Imagen 13 La oscilación sobre un valor medio (A) puede representarse por una forma lineal (B) y
ésta puede reproducirse como una suma de ondas.
La onda C describe la forma B mucho peor que las cinco ondas del gráfico D que vemos sumadas
en E.
Tras esta cuantificación, abundan las fracciones decimales, que se redondean al entero
más próximo. De este modo, resulta una cadena de datos con muchas probabilidades de
reiteración.
Los efectos negativos de una excesiva compresión pueden ser un empobrecimiento del
tono y la nitidez global, que notaríamos más bien en una impresión, y la aparición de
artefactos a nivel local visibles sobre todo en pantalla, aunque JPEG sea un formato
habitual en Internet.
Estos efectos son menores en imágenes grandes, de varios megapíxeles, en las que las
baldosas de 8 x 8 píxeles son menos importantes para el detalle y la codificación de la
última fase es mucho más efectiva. Se consiguen así buenas relaciones de compresión,
aunque indiquemos niveles de calidad media-alta.
Los efectos más típicos son la aparición de los bloques de 8 x 8 píxeles, el ruido
cromático en las zonas oscuras y la alteración de las siluetas, que se ven borrosas en
imágenes de poca resolución y reverberadas en las más grandes.
Pág. -36-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
A.
B.
C.
La solución pasa por lograr una mejor correspondencia formal (que hoy se busca en las
formas Wavelet, un tipo de patrones de onda diseñables que pueden ser sinusoidales o
no) y establecerse con una duración finita. Combinando Wavelets (TDW), pueden
describirse formas complejas con muchos menos coeficientes. Ésta es la base de nuevas
técnicas, como EZW, SPIHT, MrSID o JPEG 2000, que quieren ser la alternativa al
actual JPEG.
Pág. -37-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Formatos
Lo primero que se debe saber es que los formatos de imágenes pueden (o no) admitir
algún tipo de compresión de datos.
Los formatos de archivo más utilizados en la Web son JPEG, GIF y PNG. Cada uno de
ellos posee ventajas y desventajas que lo hacen adecuado para ciertos casos de uso y, a
la vez, obsoleto para otros. La siguiente tabla ilustra las ventajas y desventajas básicas
de cada uno.
• Paleta limitada
(obsoleto para
imágenes de muchos
GIF Sin pérdida, • Permite colores)
(algoritmo aunque limitado a animaciones • Potenciales problemas
LZW) 256 colores legales (en algunos
países en otros ya
venció la licencia)
Debido los posibles problemas legales del formato GIF y la superioridad del formato
PNG para gráficos se desalienta fuertemente el uso del formato GIF.
Pág. -38-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Se pueden guardar fotos tomadas con una cámara digital en JPEG y apenas ocupan
espacio en memoria. Sin embargo, parte de la información se ha perdido en el proceso,
y cada vez que se abra esa imagen y se le pida al ordenador que la guarde (no
visualizarla, sino el acto de guardarla) volverá a perder un poco de calidad de la imagen.
Tampoco es posible cambiar a un formato "sin pérdida" para recuperar la calidad
perdida. Para estos casos conviene apegarse al formato JPEG, intentando obtener la
mejor relación calidad/peso, pero no hay que cambiarse a otro formato.
Con JPEG el usuario decide cuanta información esta dispuesto a sacrificar, se pierde
calidad y se gana menor peso del fichero. Se puede recomendar entre un 50 y un 70%
para el compresor. Si la imagen no se ve bien con esta calidad, se debe intentar otros
formatos.
Si la imagen es un dibujo
Pág. -39-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pero además PNG puede trabajar con todo el rango de colores, por lo que serviría para
imágenes que se quieran incorporar con una calidad excepcional, ya que al contrario que
el JPEG utiliza un algoritmo sin pérdida de calidad.
Tampoco se debe usar JPEG si se puede guardar la misma imagen con PNG en más o
menos el mismo tamaño. Muchas veces ocupará menos con PNG. El único problema
de PNG es que no puede ser visualizado directamente por navegadores Web antiguos.
Todos los navegadores modernos admiten el formato PNG, aunque hay que tener en
cuenta la conocida incapacidad de Internet Explorer de mostrar las transparencias de
estas imágenes correctamente.
A pesar de haber elegido uno de los formatos anteriores para la publicación de imágenes
en Internet (u otro medio con ancho de banda limitado), no se debe eliminar nunca la
imagen original. Esta debería guardarse en un formato sin pérdida (o muy poca pérdida)
y con 24 bits de profundidad.
Esto también es aplicable a las imágenes JPEG. Si la imagen que se guarda tiene un alto
grado de pérdida, en cada modificación perderá algo de calidad. Si, por el contrario,
parte siempre del original, sólo tendrá la pérdida correspondiente a la optimización de
tamaño. También puede ser que con el paso del tiempo te interese guardar las imágenes
con una mayor calidad (p.e. un mayor ancho de banda disponible). Si has guardado los
originales tan sólo tendrás que guardar la imagen de nuevo en la calidad deseada. Si
sólo tienes la imagen de poco peso, no existe ninguna manera de que recupere la calidad
inicial.
Pág. -40-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Por todo ello es aconsejable guardar las imágenes originales. Una buena costumbre para
llevar esto a cabo es tener en un directorio diferente los originales, para facilitar luego la
subida de las imágenes a Internet.
En resumen
El principio del dithering se basa en la reducción del número de colores usado en una
imagen, al considerar que en la mayoría de los casos se utiliza demasiada información
gráfica en un fichero, información que se puede eliminar sin pérdidas notables en la
calidad final de la imagen.
Si una determinada imagen utiliza sólo 40 colores, para reducir el tamaño de su archivo
bastaría con definir los 40 colores utilizando una paleta de color, guardando luego los
puntos de la imagen con una profundidad de 8 bits.
Por otra parte, una imagen que utilice 256 colores puede tener una calidad aceptable en
relación a la misma imagen con 16,8 millones de colores, siendo, su tamaño tres veces
Pág. -41-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
más pequeño. Para obtener un color no presente en la paleta de 256 colores de la imagen
siempre es posible mezclar los que sí están, consiguiendo en la mayoría de los casos una
buena aproximación al necesitado.
La técnica del dithering va a ser la encargada de calcular la proporción con que se deben
mezclar los colores de la paleta para obtener otros.
Para obtener una determinada tonalidad de color se utilizan varios puntos que tienen un
color muy próximo al que se desea conseguir. Cuando se observar la imagen desde una
cierta distancia, el color de los puntos adyacentes se mezcla, dando lugar a la ilusión de
nuevas tonalidades de color.
Solemos decir que una imagen tiene un tamaño de 800x600, por ejemplo. También es
habitual decir que una imagen tiene un tamaño de 300 Kbytes. Es decir, usamos la
misma palabra, tamaño, para hablar de dos conceptos totalmente diferentes. Del mismo
modo decimos que una imagen de 1024x768 es grande y también decimos que es
grande porque tiene 2 Mbytes.
Pág. -42-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Las imágenes publicadas en internet deberían tener un ancho máximo de entre 400
y 800 puntos. Los tamaños superiores, además de entorpecer la navegación, aumentan
innecesariamente el peso de la imagen porque cuantos más puntos (píxeles) tiene una
imagen más información contiene; y cuanta más información contiene más peso final
tendrá el archivo de la imagen.
La clave para aligerar una imagen artificial, esto es, no real, está en optimizar su paleta
de colores.
En la vida real las imágenes tienen millones de colores, pero cuando trabajamos con
imágenes artificiales, como las capturas de pantalla que solemos hacer para explicar
cómo funciona un programa, lo habitual es que estas tengan 2, 4, 16, 32, 64, 128 ó 256
colores como mucho. Si en lugar de usar el formato BMP usamos un formato que
permita limitar la paleta de colores, como GIF o PNG, podemos generar un archivo que
únicamente guarde la información de los colores que REALMENTE se usan en la
imagen. Sin perder ni un solo bit de información la optimización del peso del archivo es
máxima en estos casos, tal y como hemos podido comprobar con el ejemplo anterior.
Pág. -43-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -44-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Adobe Photoshop permite guardar las imágenes en otros dos formatos, PNG-24
y WBMP que no debemos usar por ser el primero un tipo de archivo sin pérdida
de calidad con el que obtenemos archivos muy grandes y el segundo por tener
una profundidad de colores de 1bit, esto eso, sólo incluye dos colores: blanco y
negro.
2. Entrelazado: Cuando navegas por Internet hay algunas imágenes que cargan de
golpe y otras que van apareciendo poco a poco. Cuando la marcas la foto el
navegador de Internet carga poco a poco la imagen en lugar de esperar a haberla
descargado por completo antes de mostrarla. Marcar esta casilla aumenta el
tamaño del archivo, aunque en cantidades despreciables.
3. Tabla de colores: Esta pestaña aparece únicamente cuando en el apartado 1
hemos elegido los formatos GIF o PNG. Aquí tenemos la clave para la
optimización de las imágenes artificiales. Como verás, en este apartado 3 hay
unidas tres zonas por estar todas íntimamente relacionadas.
Pág. -45-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -46-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -47-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
a) En el formato JPG.
b) En el formato EZW.
c) En el formato MrSID .
d) En el formato JPEG 2000.
Pág. -48-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
En este capítulo vamos a entrar en profundidad en uno de los formatos vectoriales que
están emergiendo ahora mismo.
Imagen 14 Esta imagen muestra la diferencia entre imágenes raster y vectoriales con svg. La
imagen vectorial puede ser escalada indefinidamente sin perdida de calidad de imagen mientras el
mapa de bits no.
Pág. -49-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
4.1. Conceptos
El significado de SVG es gráficos de vector escalable, una gramática de XML para los
gráficos que permite uso de estilos, utilizable dentro del namespace de XML.
Escalable
Los gráficos de SVG son escalables a diversas resoluciones de exhibición, de modo que
por ejemplo la salida impresa utilice la resolución completa de la impresora y se pueda
exhibir en el mismo tamaño en las pantallas de diversas resoluciones. El mismo gráfico
de SVG se puede colocar en diversos tamaños en la misma página Web, y reutilizar en
diversos tamaños en diversas páginas. Los gráficos de SVG se pueden ampliar para ver
el detalle fino, o para ayudar a ésos con la visión baja.
Los gráficos de SVG son escalables porque el mismo contenido de SVG puede ser un
gráfico independiente o se puede referir o incluir dentro de otros gráficos de SVG, de tal
modo permitiendo que una ilustración compleja sea acumulada en piezas, quizás por
varias personas. Las capacidades del símbolo, del marcador y de la fuente promueven la
reutilización de componentes gráficos, maximizan las ventajas del HTTP que depositan
y evitan la necesidad de un registro centralizado de símbolos aprobados.
Vector
Los gráficos del vector contienen objetos geométricos tales como líneas y curvas. Esto
da la mayor flexibilidad comparada a los formatos de trama solamente (tales como PNG
y JPEG) que tienen que almacenar la información para cada píxel del gráfico.
Típicamente, los formatos del vector pueden también integrar imágenes de la trama y
pueden combinarlas con la información de vector tal como trayectorias del truncamiento
para producir una ilustración completa; SVG no es ninguna excepción.
Puesto que actualmente hoy en día esta todo orientado a gráficos raster, la diferencia
entre el raster y los gráficos del vector se viene abajo cuando están rasterizados; el lado
del cliente en el caso de gráficos del vector, en comparación con lo ya rasterizado en el
servidor. SVG da control sobre el proceso del rasterización, por ejemplo permitir anti-
aliased las ilustraciones sin el aliasing feo típico del vector de baja calidad. SVG
también proporciona filtros de efecto raster, de modo que el cambio a un formato del
vector no signifique la pérdida de efectos populares tales como sombras suaves.
Gráficos
XML
Namespace
Uso de estilos
Las ventajas del estilo cubren en términos de control de presentación, flexibilidad, una
transferencia directa más rápida y el mantenimiento mejorado está generalmente
aceptado ahora, ciertamente para el uso con el texto. SVG amplía este control al reino
de gráficos.
Objetos gráficos
Con cualquier gramática de XML, la consideración tiene que ser dada a qué se está
modelando exactamente. Para los formatos textuales, el modelar está típicamente en el
nivel de párrafos y de frases, más bien que los sustantivos, los adverbios, o los fonemas
individuales. Semejantemente, SVG modela gráficos en el nivel de objetos gráficos más
bien que puntos individuales.
Pág. -51-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
SVG proporciona un elemento general de trayectoria, que se puede utilizar para crear
una variedad enorme de objetos gráficos, y también proporciona formas básicas
comunes tales como rectángulos y elipses. Éstos son convenientes para la codificación
de la mano y se pueden utilizar de la misma manera que el elemento más general de la
trayectoria. SVG proporciona control fino sobre el sistema coordinado en el cual se
definen los objetos gráficos y las transformaciones que serán aplicadas durante la
representación.
Símbolos
Habría sido posible definir algunos símbolos estándares que SVG proporcionaría. ¿Pero
que? Habría siempre símbolos adicionales para la electrónica, la cartografía, los
organigramas, el etc., que la gente necesitaría que no fue proporcionada hasta la
“versión siguiente”. SVG permite que los usuarios creen, que reutilicen y que
compartan sus propios símbolos sin requerir un registro centralizado. Las comunidades
de usuarios pueden crear y refinar los símbolos que necesitan, sin tener que preguntar a
un comité. Los diseñadores pueden ser seguros exactamente del aspecto gráfico de los
símbolos que utilizan y que no tuvieron que preocuparse de símbolos sin apoyo.
Los símbolos se pueden utilizar en los diversos tamaños y orientaciones, y pueden ser
cambiados para caber adentro con el resto de la composición gráfica.
Efectos raster
Muchos gráficos existentes del Web utilizan las operaciones de filtros encontradas en
paquetes gráficos para crear las faltas de definición, sombras, efectos de iluminación y
así sucesivamente. Con la rasterización usada con formatos del vector, tales efectos
pudieron ser imposibles pensado. SVG permite la especificación declarativa de filtros,
solo o en la combinación, que se puede aplicar en el lado del cliente cuando se rinde el
SVG. Se especifican éstos de una manera tal que los gráficos sigan siendo escalablee y
mostrables en diversas resoluciones.
Fuentes
Animación
Pág. -52-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Hay una variedad de maneras de las cuales el contenido de SVG pueda ser incluido
dentro de una página Web. Aquí están algunas de las opciones:
Pág. -53-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
El SVG DOM permite a los lenguajes de script el acceso a todos los elementos,
propiedades y atributos que componen un documento SVG. Además, existe la
posibilidad de asignar eventos a los distintos elementos (onmouseover o onclick).
El tipo MIME que utiliza SVG es "image/svg+xml" [RFC3023]. Se recomienda que los
ficheros SVG tengan extensión .SVG o .SVGZ (en minúsculas) en todas las
plataformas.
http://www.w3.org/2000/svg
DOCTYPE para la versión 1.0:
Pág. -54-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
-XML 1.0
-XML Namespaces
-XLink y XML Base para la referencia a URIs
-XPointer
-CSS
-XSL
-DOM nivel 1 y 2 incluyendo DOM-Style y DOM-Event
-SMIL 1.0. Sólo algunas de sus funcionalidades
-HTML 4 y XHTML 1.0
-UNICODE
-WAI. Accesibilidad a contenidos web
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd ">
<svg xmlns="http://www.w3.org/2000/svg " width="200px" height="200px">
...
</svg>
Pág. -55-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
<a href="layout02.svgz">
<img alt="layout02" src="layout02.png"/>
</a>
</object>
</body>
</html>
Los valores que pueden tomar estos atributos pueden ser simplemente números (si
expresamos el tamaño en píxeles) o en unas unidades concretas (puntos, pulgadas,
picas, centímetros, milímetros, etc.).
4.4. Geometría
Rectángulo.-
Pág. -56-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
opacity="0.5" />
</svg>
Círculo.-
<svg xmlns="http://www.w3.org/2000/svg " width="200px"
height="200px">
<circle cx="100px" cy="100px" r="50px" style="fill:red;
stroke:black; stroke-width:0.1cm" transform="translate(-
20,20)" />
<circle cx="100px" cy="100px" r="50px" style="fill:green;
stroke:black; stroke-width:0.1cm" transform="translate(10,-
20)"/>
<circle cx="100px" cy="100px" r="50px" style="fill:blue;
stroke:black; stroke-width:0.1cm"
transform="translate(40,40)" />
</svg>
"cx" e "cy". Desplazamiento del objeto respecto al origen de coordenadas el cual indica
el centro del objeto. "r". Radio del objeto. El resto de atributos añaden propiedades
sobre el estilo de la visualización.
Pág. -57-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Elipse.-
<svg xmlns="http://www.w3.org/2000/svg " width="200px"
height="200px">
<ellipse cx="96.5" cy="143" rx="59.5" ry="41"
style="fill:rgb(255,229,242); stroke:rgb(242,0,125);
stroke-width:3"/>
</svg>
"cx" y "cy". Desplazamiento del objeto respecto al origen de coordenadas el cual indica
el centro del objeto. "rx" y "ry". Definen el radio horizontal y vertical de la elipse.
Línea.-
La continuidad de las líneas pude ser modificada gracias al atributo de estilo "stroke-
dasharray". Con este atributo podemos definir la línea como una sucesión de tramos
visibles e invisibles. El atributo "stroke-dasharray" permite definir una lista de números
separados por comas de forma que por parejas nos marcan la continuidad de la línea.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "
Pág. -58-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd ">
<svg xmlns="http://www.w3.org/2000/svg " width="200px" height="200px">
<line x1="10" y1="10" x2="150" y2="150" stroke="red" stroke-
width="8" stroke-dasharray="18, 4, 4, 18" />
</svg>
Polilínea.-
<svg xmlns="http://www.w3.org/2000/svg " width="300"
height="100">
<polyline points="0,0 0,20 40,20 40,0 80,0 80,20 120,20
120,0 160,0 160,20 200,20 200,0 240,0 240,20"
style="stroke:red; stroke-width:2; fill:none;"
transform="translate(20,20)" />
</svg>
Polígono.-
Pág. -59-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Texto.-
requiredExtensions="http://example.com/SVGExtensions/Embedd
edXHTML ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<span class="forobjpts">(100,100)</span>
</html>
</foreignObject>
Pág. -60-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
T. Creación de una línea curva suave cuadrática de Bezier hasta la coordenada indicada.
Z. Cerrar el comino.
Pág. -61-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
El elemento G.- El elemento "G" se utiliza como contenedor para agrupar distintos
objetos y así poder realizar sobre ellos acciones de forma global. Podemos asignarle un
ID y así realizar transformaciones, animaciones u otras acciones. Las definiciones de
grupos pueden utilizarse de forma animada.
Pág. -62-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
<linearGradient id="MyGradient">
</linearGradient>
<rect style="fill:url(#MyGradient)"/>
Otro tipo de referencias aceptadas en SVG y que se refieren a recursos
externos al documento, son las realizadas mediante XLink:
Para utilizar enlaces XLink dentro del documento, es necesario especificar previamente
la definición del espacio de nombres asociado al mismo:
xmlns:xlink="http://www.w3.org/1999/xlink "
Pág. -63-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
DESC y TITLE.- Son dos elementos que no tiene ningún tipo de representación gráfica.
Sólo se utilizan para la documentación y especificación del documento SVG. Cualquier
contenedor o elemento gráfico dentro del documento puede definir su propio título y
descripción.
Symbol.- Este elemento permite definir patrones de objeto gráfico para después poder
instanciarlos con un USE. Mediante SYMBOL conseguimos reutilizar elementos que se
declaran de forma reiterativa dentro del documento y así mejoras la legibilidad y la
semántica del documento SVG.
USE.- Cualquier elemento gráfico de tipo SYMBOL, G, USE u otros elementos pueden
potencialmente ser considerados como patrones y ser susceptibles de reutilizarse
mediante la utilización de USE.
Pág. -64-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
<style type="text/css">
<![CDATA[
#MyUse { fill: blue }
#MyPath { stroke: red }
use { fill-opacity: .5 }
path { stroke-opacity: .5 }
.MyUseClass { stroke-linecap: round }
.MyPathClass { stroke-linejoin: bevel }
use > path { shape-rendering: optimizeQuality }
g > path { visibility: hidden }
]]>
</style>
Pág. -65-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
<g style="stroke-width:40">
<use id="MyUse" xlink:href="#MyPath" class="MyUseClass"
style="stroke-dashoffset:50" />
</g>
</svg>
Pág. -66-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Rotación: giro en grados que debe realizar el elemento con respecto al origen de
coordenadas.
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke:
black;" />
<line x1="75" y1="95" x2="135" y2="105" style="stroke:
black;" />
</g>
<use xlink:href="#whiskers" transform="scale(-1 1)
translate(-140 0)" />
</svg>
Pág. -67-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
</svg>
4.6. Scripting
<script type="text/ecmascript">
<![CDATA[
function pinta() {
var circleNode =
svgDocument.createElement("circle");
circleNode.setAttribute("cx", 300*Math.random());
circleNode.setAttribute("cy", 300*Math.random());
circleNode.setAttribute("r", 30);
circleNode.setAttribute("style", "stroke: none; "
+
"opacity: 0.3; "
+
"fill: rgb(" +
255*Math.random() + "," +
255*Math.random() + "," +
Pág. -68-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
255*Math.random() + ");");
setTimeout("window.pinta()", 300);
document.getElementById("dr").appendChild(circleNode);
}
]]>
</script>
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd ">
<svg xmlns="http://www.w3.org/2000/svg "
xmlns:xlink="http://www.w3.org/1999/xlink "
width="236" height="295">
<script type="text/ecmascript"><![CDATA[
var drag = false;
var dx = 0;
var dy = 0;
var x = 0;
var y = 0;
function mousedown_listener(evt) {
drag = true;
dx = filtered.getAttribute("x") - evt.clientX;
dy = filtered.getAttribute("y") - evt.clientY;
}
Pág. -69-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
function mouseup_listener(evt) {
drag = false;
alert('x: ' + filtered.getAttribute("x") + ', ' +
'y: ' + filtered.getAttribute("y"));
}
function mousemove_listener(evt) {
if (drag) {
x = evt.clientX + dx;
y = evt.clientY + dy;
filtered.setAttribute("x", x);
filtered.setAttribute("y", y);
clip.getChildNodes().item(1).setAttribute("d",
"M" + x + "," + y + " " +
"L" + (100+x) + "," + y + " " +
"L" + (100+x) + "," + (100+y) + " " +
"L" + x + "," + (100+y) + " Z");
}
}
]]>
</script>
<defs>
<clipPath id="clipRecorte">
<path d="M0,0 L100,0 L100,100 L0,100 Z" />
</clipPath>
</defs>
<g id="target">
<image width="236" height="295" xlink:href="wilber-wizard.png"
opacity="0.3" />
<image width="236" height="295" xlink:href="wilber-wizard.png"
clip-path="url(#clipRecorte)" />
<g id="frame">
<rect id="filtered" width="100" height="100"
style="fill: red; fill-opacity: 0; stroke: red; stroke-
width: 1;
shape-rendering: optimizeSpeed;" />
</g>
</g>
</svg>
Pág. -70-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Funciones de ejemplo para el uso del modelo de objetos de SVG function init().-
{
transform_list = document.getElementById('all').transform.baseVal;
svg_element = document.getElementById('all').ownerSVGElement;
}
function Rotate() {
var xform = document.getElementById('foo').createSVGTransform();
xform.setRotate(30,50,300);
var id = svg_element.suspendRedraw(1000);
transform_list.appendItem(xform);
svg_element.unsuspendRedraw(id);
}
function Translate() {
var xform = document.getElementById('foo').createSVGTransform();
xform.setTranslate(10,-10);
var id = svg_element.suspendRedraw(1000);
transform_list.appendItem(xform);
svg_element.unsuspendRedraw(id);
}
function Scalein() {
var xform = document.getElementById('foo').createSVGTransform();
xform.setScale(1.5,1.5);
transform_list.appendItem(xform);
}
function Scaleout() {
var xform = document.getElementById('foo').createSVGTransform();
xform.setScale(0.5,0.5);
var id = svg_element.suspendRedraw(1000);
transform_list.appendItem(xform);
svg_element.unsuspendRedraw(id);
}
Pág. -71-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
function DOMTest() {
var p = document.getElementById('barx').points.getItem(0);
for (var i=50;i<250;++i) {
p.x = i;
}
}
function DOMTest2() {
var p = document.getElementById('bary').points.getItem(0);
for (var i=50;i<250;++i) {
p.y = i;
}
}
4.7. SMIL
Ejemplos de animaciones:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd ">
<svg width="500" height="510" xmlns="http://www.w3.org/2000/svg "
xmlns:xlink="http://www.w3.org/1999/xlink ">
<style type="text/css">
Pág. -72-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
<g id="base">
<rect id="bubbleslabelrectinvis" pointer-events="all" x="272"
y="72" width="86" height="24"
rx="10" ry="10">
<set attributeName="opacity" attributeType="CSS" to="0.5"
begin="bubbleslabelrectinvis.click"
end="bubblescrossrect.click; bubblescross01.click;
bubblescross02.click"/>
</rect>
</g>
<defs>
<g>
<animate xlink:href="#bubblesrect" attributeName="y"
begin="aboutbubbles.click"
dur="4s" to="10" fill="freeze"/>
<animate xlink:href="#bubblescrossrect" attributeName="y"
begin="aboutbubbles.click"
dur="4s" to="20" fill="freeze"/>
<animate xlink:href="#bubblescross01" attributeName="y1"
begin="aboutbubbles.click"
dur="4s" to="24" fill="freeze"/>
<animate xlink:href="#bubblescross01" attributeName="y2"
begin="aboutbubbles.click"
dur="4s" to="32" fill="freeze"/>
<animate xlink:href="#bubblescross02" attributeName="y1"
begin="aboutbubbles.click"
dur="4s" to="32" fill="freeze"/>
<animate xlink:href="#bubblescross02" attributeName="y2"
begin="aboutbubbles.click"
dur="4s" to="24" fill="freeze"/>
<animate xlink:href="#bubblesminrect" attributeName="y"
begin="aboutbubbles.click"
dur="4s" to="20" fill="freeze"/>
<animate xlink:href="#bubblesminline" attributeName="y1"
begin="aboutbubbles.click"
dur="4s" to="28" fill="freeze"/>
<animate xlink:href="#bubblesminline" attributeName="y2"
begin="aboutbubbles.click"
dur="4s" to="28" fill="freeze"/>
</g>
</defs>
<g id="aboutbubbles">
<set attributeName="visibility" attributeType="CSS" to="visible"
begin="bubbleslabelrectinvis.click" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="bubblescrossrect.click; bubblescross01.click;
bubblescross02.click" fill="freeze"/>
Pág. -73-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
width="220" height="75"
rx="10" ry="10" />
<rect id="bubblescrossrect" class="textrect" x="350" y="140"
width="16" height="16"
rx="1" ry="1" />
<line id="bubblescross01" class="cross" x1="354" y1="152" x2="362"
y2="144" />
<line id="bubblescross02" class="cross" x1="354" y1="144" x2="362"
y2="152" />
<rect id="bubblesminrect" class="textrect" x="326" y="140"
width="16" height="16"
rx="1" ry="1" />
<line id="bubblesminline" class="cross" x1="330" y1="150" x2="338"
y2="150" />
Pág. -75-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -76-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
<g>
<rect x="320" y="100" width="40" height="40" fill="#ffffff">
<animate id="fadein" attributeName="fill" attributeType="auto"
from="#ffffff" to="#ff0000" begin="indefinite"
dur="3s" fill="freeze"/>
<animate id="fadeout" attributeName="fill"
attributeType="auto"
from="#ff0000" to="#ffffff" begin="indefinite"
dur="3s" fill="freeze"/>
</rect>
<g id="buttons">
<a xlink:href="#fadein">
<rect x="320" y="10" width="60" height="40" fill="green"/>
<text fill="white" font-size="10" font-weight="bold" x="330"
y="20">Oscuro</text>
</a>
<a xlink:href="#fadeout">
<rect x="320" y="50" width="60" height="40" fill="maroon"/>
<text fill="white" font-size="10" font-weight="bold" x="330"
y="60">Claro</text>
</a>
</g>
</g>
</g>
</svg>
Pág. -77-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
SVG, al ser un formato XML, donde mejor se integra es en otros documentos XML. Si
partimos de la versión XML de HTML, es decir, XHTML, nos encontraremos con que
podemos embeber el código SVG dentro del propio documento XHTML. Esto es
gracias a que XHTML soporta distintos espacios de nombres.
Con este tipo de documento integramos tecnologías como CSS, Scripting, XML y ahora
SVG. Todos estos recursos disponibles en un único tipo de documento XHTML.
Sobre esta base nace el proyecto SVG Mozilla que intenta hacer de este navegador un
motor nativo de renderizado de SVG (sin la utilización de ningún plugin externo). Esto
quiere decir que podremos añadir código SVG "inline" en el documento XHTML y que
el navegador lo interpretará al igual que hace con el código HTML.
Pág. -78-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
</html>
Pág. -79-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Existen servicios comerciales que utilizan SVG Reducido en los teléfonos móviles de
Japón; es de esperar que otros países comiencen a utilizar estos servicios pronto.
Por ejemplo, podemos ver algunas imágenes de una aplicación real de comercio móvil
desarrollada por KDDI Corp. - una importante operadora de telefonía móvil, miembro
del Grupo de Trabajo de SVG - en colaboración con JCB Co., Ltd., Toyota Finance
Corp., Mitsui Sumitomo Card Co., Ltd., y UC Card Co., Ltd. Utiliza la implementación
de SVG Reducido de KDDI funcionando en los teléfonos de 3ª generación
CDMA20001x KDDI "au", que cuentan con pantallas en color. Se muestra un mapa
SVG al cliente con las tiendas participantes más cercanas; en la siguiente pantalla,
ampliando el mapa, podemos ver más detalles de cómo llegar a la tienda, incluyendo
calles más pequeñas que no eran visibles en la imagen más reducida; en la última
pantalla tenemos el horario de apertura y detalles de contacto de la tienda mostrados en
SVG mientras el cliente se dirige a la tienda para hacer una compra justo antes de que
cierre.
Pág. -80-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
SVG 1.1 define el lenguaje SVG completo, incluyendo varias características avanzadas
que actualmente sólo pueden ser implementadas en los ordenadores de sobremesa o
portátiles. SVG Móvil define dos subconjuntos de SVG 1.1, tomando la funcionalidad
más comúnmente utilizada y apropiada para dispositivos móviles.
SVG Móvil es el nombre de la especificación que define SVG Reducido y SVG Básico,
e indica que ambos perfiles de SVG están diseñados principalmente para su uso en
dispositivos móviles.
Los sistemas binarios bien diseñados son frecuentemente compactos, al menos hasta
que se utilizan mecanismos de extensión para realizar mejoras. También es posible
diseñar una sintaxis acorde a XML, y comprimirla posteriormente para su envío. SVG
fue diseñado para ser pequeño, y todavía más pequeño cuando se comprime. Los
archivos comprimidos se reproducen directamente en los visualizadores.
Todas las implementaciones conformes a SVG Reducido, SVG Básico o SVG completo
mostrarán correctamente el contenido realizado con SVG Reducido, ya que SVG
Reducido es un subconjunto estricto de SVG Básico, el cual es a su vez un subconjunto
estricto de SVG Completo; de igual manera todas las implementaciones conformes a
SVG Básico y SVG Completo mostrarán correctamente todo el contenido realizado con
SVG Básico.
SVG utiliza Unicode para representar el texto que se mostrará; esto significa que el
texto se puede mostrar, buscar e indexar en múltiples idiomas. También permite una
cómoda generación y personalización del texto contenido en un SVG.
Pág. -81-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
La conformidad con SVG viene determinada por la especificación del W3C, disponible
por completo de manera gratuita, y se prueba mediante el juego de pruebas disponible
públicamente, no mediante las capacidades o inestabilidades de la implementación de
un vendedor en particular. Este es un factor diferenciador clave de los Estándares Web
abiertos en contraposición a los sistemas propietarios cerrados, en los que puede estar
disponible parte de la documentación, pero están definidos por el comportamiento de
una implementación. Ello estimula el crecimiento del mercado posibilitando que los
implementadores de SVG puedan competir en velocidad, impacto, calidad y precio sin
tener que sacrificar la interoperabilidad ni atar a los creadores de contenidos y usuarios
a un único vendedor.
Una de las diferencias clave entre los usos de sobremesa y móviles de SVG es que los
dispositivos móviles, cómo su propio nombre indica, se desplazan. Debido a su
reducido tamaño y peso, son utilizados en una amplia variedad de localizaciones en las
que un ordenador de sobremesa o un portátil no serían adecuados. La localización
geográfica del dispositivo puede ser determinada por distintos métodos, abarcando
desde los satélites de Sistema de Posicionamiento Global (GPS) a la triangulación de las
señales de los teléfonos móviles, y esa información puede ser utilizada para modificar el
interfaz gráfico. El ejemplo más común de un dispositivo que reconoce su localización
es probablemente un sistema de navegación para automóviles.
Los ficheros SVG son XML, y es por ello que pueden contener XML de otros espacios
de nombres, tales como distintos tipos de metadatos. Como ejemplo de esos metadatos,
el SVG que representa visualmente un mapa puede contener metadatos XML que
describan el área geográfica representada y el sistema de coordenadas utilizado para
obtener un mapa plano a partir de una porción de la superficie curva de la tierra. La
combinación de esta información con la localización del dispositivo móvil da lugar a un
mapa interactivo del tipo "usted se encuentra aquí"; la combinación de múltiples mapas
en relación a su cobertura geográfica permite la creación de información superpuesta; el
envío de la localización en la red permite la realización de consultas basadas en la
geografía, tales como "dónde está el hospital más próximo". La combinación de
dispositivos capaces de reconocer su localización, Servicios Web activados por
Pág. -82-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
localización, acceso inalámbrico a redes, y mapas SVG que contienen metadatos con
gráficos SVG generados bajo demanda, da como resultado un servicio basado en la
localización.
SVG es una tecnología neutral. Sus capacidades pueden utilizarse de cualquier manera,
el único límite es la imaginación. SVG puede utilizarse para mostrar datos
empresariales, tales como gráficos de información financiera o visualización del control
de procesos industriales, pero también puede ser utilizado para aplicaciones orientadas a
los consumidores, como pueden ser la mensajería o los juegos. Como ejemplo, a
continuación tenemos una implementación del juego de cartas "blackjack" en SVG
Básico.
Aunque los navegadores más antiguos no tienen soporte para el tratamiento de XML y
otros estándares relacionados, los navegadores más recientes normalmente cuentan con
la infraestructura necesaria para el soporte de SVG. El navegador X-Smile incluye
soporte para SVG, el desarrollo de SVG dentro del proyecto Mozilla está madurando, y
el navegador Konqueror - cuyo intérprete de HTML es la base del nuevo navegador
Safari de Apple para el MacOSX - tiene un componente SVG en desarrollo. Hay
disponibles plugins de Adobe y Corel para los navegadores más antiguos que no pueden
ofrecer soporte para SVG.
El gran número de herramientas de autor que existen para SVG pueden utilizarse para
producir contenido en formato SVG Móvil, con tal de que la salida sea validada
mediante el perfil deseado en particular.
También existen soluciones de autor específicas para SVG Móvil. BitFlash Brilliance
(mostrada a continuación) es una de ellas. Proporciona tres vistas sincronizadas del
SVG que se está generando - visual (gráfica), DOM (estructural) y el código fuente real.
Pág. -83-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
El contenido puede validarse para SVG Reducido o Básico, y las partes que no sean
conformes se resaltan para que puedan remplazar o modificar. La visualización previa
gráfica, utilizando un emulador, muestra cómo se verá el contenido en cualquier tamaño
de pantalla y profundidad de color deseados.
KDDI ha anunciado un plugin destinado a autores de SVG Móvil (que se puede ver
abajo a la derecha) para Adobe Illustrator, lo que permitirá utilizar un entorno de autor
conocido para crear contenido SVG Móvil.
Pág. -84-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -85-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
4.3 ¿De que opciones no se dispone para incluir un contenido SVG dentro de una
página Web?
Pág. -86-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Los archivos SWF suelen ser suficientemente pequeños para ser publicados en la World
Wide Web en forma de animaciones o applets con diversas funciones y grados de
interactividad. También son usados frecuentemente para crear animaciones y gráficos
en otros medios, como menús para películas en DVD y anuncios de televisión.
Los archivos SWF son compilados y comprimidos a partir de los archivos editables (en
formato .fla) con los que el usuario trabaja en Flash. Están construidos principalmente
por dos elementos: objetos basados en vectores e imágenes. Las versiones más
modernas también incorporan audio y vídeo (en formato Flash Video-FLV) y multitud
de formas diferentes de interacción con el usuario. Una vez creados, los ficheros SWF
pueden ser ejecutados por el reproductor Macromedia Flash Player, tanto en formato
plugin de un navegador o como aplicación autónoma. En muchas ocasiones es posible
encapsular los ficheros SWF junto con el reproductor, creando un proyector autónomo
que reproduce la animación que contiene cuando se ejecuta.
El objetivo principal del formato SWF es crear archivos pequeños pero que permitan la
interactividad y que funcionen en cualquier plataforma, aún sobre un ancho de banda
reducido (cómo un navegador Web conectado a través de un módem). El plugin que
permite reproducir ficheros SWF está disponible en Macromedia para diferentes
navegadores y diferentes sistemas operativos, incluido Microsoft Windows, Apple
Macintosh y Linux. Este plugin está instalado en un 98% de los ordenadores de los
internautas.
El formato es bastante simple, si bien es cierto que está en formato binario y por lo tanto
no es de lectura accesible, como el SVG (estándar abierto basado en XML,
recomendación del W3C). SWF ha utilizado la compresión Zlib desde el 2002, y en
general el objetivo del formato es almacenar todos los datos usando el menor número de
bits, minimizando la redundancia.
5.1. Licencia
Pág. -87-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Por otro lado, la creación de software que 'cree' archivos SWF sí está permitida con la
condición que el archivo resultante pueda ser renderizado sin problemas por la última
versión pública del reproductor de Macromedia.
El formato del archivo de SWF fue diseñado desde cero para la distribución de gráficos
y la animación sobre Internet. El formato del archivo de SWF fue diseñado como
formato muy eficiente de la entrega y no como formato para intercambiar gráficos entre
los redactores de gráficos. Fue diseñado para resolver las metas siguientes:
Conceptos básicos
Los archivos de SWF se almacenan en archivos con la extensión .swf y por razones
históricas el tipo del MIME es actualmente application/x-shockwave-flash. Los archivos
de SWF son archivos binarios almacenados como bytes de 8 bits. El formato del envase
consiste en un bloque del Cabecera con la estructura demostrada abajo.
Pág. -88-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Siguiendo la cabecera está una serie de bloques marcados con etiqueta de los datos.
Cada bloque de los datos tiene un tipo de la etiqueta y una longitud. Hay un formato
corto y largo de la etiqueta. Las etiquetas cortas se utilizan para los bloques con 62
octetos de datos o menos y las etiquetas grandes se pueden utilizar para cualquier
bloque del tamaño. Una etiqueta corta tiene 9 bits usados para el en bloques y 6 bits
usados para una longitud del bloque en gran número de octetos. Si un bloque es 63
octetos o más largos, debe ser almacenado en una etiqueta larga que consista en una
etiqueta corta que longitud sea 0x3f y sea seguida por una longitud de 32 bits.
Las tablas siguientes demuestran la estructura de las cabeceras cortas y largas del
registro.
Pág. -89-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
etiqueta
Cualquier programa que analiza un archivo de SWF puede saltar sobre bloques que no
entiende. Los bloques de los datos pueden señalar a desplazamientos dentro del bloque,
pero deben nunca señalar a una compensación en otro bloque. Esto permite a etiquetas
ser quitada, ser insertada, o ser modificada por las herramientas que procesan un archivo
de SWF. Con algunas redes de transportes como RealFlash, los bloques de los datos se
pueden reordenar y entregar con diversas prioridades.
Actualmente, se definen muchos tipos útiles del bloque. Los números de etiqueta 0-511
son reservados para el uso futuro. Los números de etiqueta 512-1023 son reservados
para uso de usos de los terceros. Para más información sobre mecanismos de la
extensión que se convierten, ver la sección del mecanismo de la extensión.
Tipos de etiquetas
Esta ordenación de etiquetas es cómo el formato del archivo de SWF soporta streaming.
La regla es que una etiqueta dada debe depender solamente de las etiquetas que vienen
antes de ella. Una etiqueta debe nunca depender de una etiqueta que venga más adelante
en el archivo.
La etiqueta del fin se debe utilizar en el extremo del archivo para indicar el fin del
archivo.
Pág. -90-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Caracteres y el diccionario
Para apoyar streaming y referencias entre las etiquetas, SWF utiliza el concepto de
caracteres y de un diccionario de caracteres que se han encontrado hasta ahora en un
archivo. Un carácter tiene un nombre numérico de 16 bits. Cada carácter en un archivo
debe tener un nombre único. Típicamente, el primer carácter es #1, el segundo carácter
es #2 y así sucesivamente. El carácter #0 es especial y se considera un carácter nulo.
En SWF 1 y 2, la lista de display era una lista plana de los objetos que están presentes
en la pantalla en cualquier punto dado a tiempo. Para SWF 3, esta lista se ha extendido a
una lista jerárquica donde un elemento en la exhibición puede tener una lista de los
elementos hijo.
Observar que para SWF 1 y 2, las únicas operaciones son ponerlo y quitarlo. El
movimiento fue agregado a los sprites de la ayuda y como optimización del tamaño para
SWF 3.
Números y coordenadas
SWF utiliza números enteros y los números del punto fijo para todas sus coordenadas y
matrices de la transformación. El espacio coordinado es definido por coordenadas del
número entero. Este espacio coordinado se puede mapear al display de cualquier manera
que un visualizador quiera. Por convención, las coordenadas son especificados donde
una unidad es igual a 1/1440 pulgadas. En un display típico de 72 dpi esto es
equivalente a decir que un solo píxel está dividido en 20 unidades. Esta opción de
unidades proporciona un buen compromiso entre dar una alta resolución para zoom y la
Pág. -91-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
colocación exacta de objetos. Una resolución más alta aumentaría el tamaño del archivo
debido a los bits adicionales necesitados para la precisión.
Transforma
El modelo para procesar una corriente es que todas las etiquetas están procesadas en una
corriente hasta que se encuentra una etiqueta de ShowFrame. En ese punto, la lista de la
exhibición se copia a la pantalla y el jugador es ocioso hasta que es hora de procesar el
marco siguiente.
Puesto que los archivos de SWF se entregan con frecuencia sobre una conexión de red,
es importante que sean tan compactos como sea posible. Hay varias técnicas que se
utilizan para lograr esto:
• Reutilizar- la estructura de las marcas del diccionario del carácter él muy fácil
reutilizar elementos en un archivo de SWF. Por ejemplo, una forma, un botón,
un sonido, una fuente, o una BITMAP se pueden almacenar en un archivo una
vez y se refirieron a muchas veces.
• El contenido de la Compresión- SWF apoya una variedad de técnicas de la
compresión. Las BITMAP se pueden comprimir con el JPEG o a Png-como la
compresión del zlib. El sonido se comprime con los varios niveles de la
Pág. -92-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Mecanismo de la extensión
Para dejar los usos definir tus propios tipos de la etiqueta, él es posible definir una
etiqueta de AppExtension que contenga el nombre de la funcionalidad del uso que es
puesta en ejecución y una gama de la etiqueta que describa qué etiquetas serán
utilizadas por este sistema de la extensión. Los sistemas de la extensión deben ser
similares a un tipo del MIME donde toman la forma de la secuencia siguiente:
Pág. -93-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
FWS
File version 3
Frame rate 12
Frame count 10
La cabecera del fichero muestra mucha información. FWS indica que el archivo es un
archivo de SWF; su versión es el archivo 3.0. El tamaño del archivo es 741 octetos. La
anchura de la película es 550; su altura es 400 píxeles. La tasa de frames es de 12
frames por segundo; hay diez frames en esta película.
TagLen especifica la longitud real de la etiqueta, en este caso, 3 octetos (ffffff). Este
tagSetBackgroundColor fija el color del fondo al blanco.
tagLen 2: tagDoAction
action code 0
tag 1
Pág. -94-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Inserta la primera forma (etiqueta 1) en la lista del display. La posición del objeto
respecto a la etapa es definida por la matriz.
tag 5
tagLen 0: tagShowFrame
Pág. -95-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
tagLen 0: tagShowFrame
tagLen 0: tagShowFrame
tagLen 0: tagShowFrame
Pág. -96-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
tagLen 0: tagShowFrame
tagLen 0: tagShowFrame
tagLen 0: tagShowFrame
Pág. -97-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
tagLen 0: tagShowFrame
tagLen 0: tagShowFrame
tagLen 0: tagShowFrame
Pág. -98-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
tagLen 0: tagEnd
Pág. -99-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
a continuación:
• La capacidad de edición de la escena es muy elevada, puesto que resulta muy sencillo
acceder a los atributos de las entidades previamente seleccionadas.
Pág. -100-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Desde 1994, el consorcio W3C [11] trabaja en la confección de estándares gráficos para
la Web, adaptados a las peculiaridades que presenta este medio de difusión. Las
recomendaciones establecidas por esta institución en 1996 acerca de las características
imputables a una especificación exitosa de gráficos vectoriales para la Web se sustentan
en cinco grandes apartados:
Desde esta declaración de intenciones por parte del Consorcio, han surgido una serie de
iniciativas para dar respuesta a estos requisitos. A continuación se describen las
propuestas más relevantes.
La primera iniciativa de interés está basada en el empleo del estándar ISO denominado
CGM (Computer Graphics Metafile), un formato de descripción de entidades
vectoriales con casi dos décadas de existencia, y que ha sido mejorado progresivamente
a lo largo de estos últimos años hasta dar lugar a la aparición de perfiles de desarrollo
específicos para áreas concretas. Un sosegado análisis realizado por el W3C en 1997
concluye que es posible la definición de un perfil CGM para la Web, ya que verifica
satisfactoriamente muchas de los requisitos contemplados en el epígrafe anterior. Se
trata de una especificación abierta, con unas prestaciones muy satisfactorias
fundamentadas en otros dos estándares gráficos ISO, como PHIGS (Programmer's
Hierarchical Interactive Graphics System) y GKS (Graphical Kernel System)
Pág. -102-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
carencia que muestra WebCGM a la hora de definir primitivas gráficas con atributos
como transparencias o capas máscaras, imprescindibles en el mundo del arte y el diseño.
Por otro, las escasas prestaciones a la hora de generar contenidos animados e
interactivos, lo que lo aleja de un amplio número de campos de aplicación.
Por su parte, SVG es una especificación libre para el desarrollo de gráficos vectoriales
para la Web elaborada por W3C y basada en XML (Extensible Markup Language), un
lenguaje cuya aparición en 1997 supuso un profundo cambio a la hora de valorar la
futura evolución de la Web. XML es un metalenguaje empleado en la definición de
lenguajes basados en etiquetas, como HTML, que permite el almacenamiento de
información estructurada en base a un árbol jerárquico de categorías previamente
definidas por el usuario. En 1998, el Consorcio recibió cuatro propuestas de formatos
vectoriales de gráficos basados en XML: Web Schematics, Precision Graphics Markup
Language (PGML), Vector Markup Language (VML) y DrawML. Para su discusión y
análisis, se formó un grupo de trabajo que concibió SVG, convertido en recomendación
de W3C en Septiembre de 2001.
En la actualidad, existe una gran confusión en torno a qué formato elegir para la
creación de gráficos vectoriales en la Web, en un momento en el que la coyuntura
tecnológica abre la puerta a nuevos soportes de difusión y la situación socioeconómica
provoca fuertes vaivenes en el sector de las grandes compañías informáticas, lo que
hace coger impulso a la ya consabida discusión entre software libre y comercial. Para
tomar la decisión, es preciso contar con criterios objetivos que resalten las similitudes y
diferencias entre ambas tecnologías. Ese es el objetivo del siguiente capítulo.
El análisis entre ambos formatos, que se inspira y mejora otras aportaciones realizadas
en este campo, se ha establecido en torno a los siguientes apartados: Características
generales, prestaciones gráficas, comportamiento dinámico e integración de recursos
multimedia. Se comparan las versiones SWF 7 y SVG 1.1.
Pág. -103-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Características generales
La diferencia fundamental entre los dos formatos radica, aparte de en el tipo de licencia,
en el procedimiento de creación y edición. Mientras que SWF es generado a través de
Macromedia Flash, una potente herramienta de autor incluida en la Suite Studio, SVG
carece de entornos de desarrollo con prestaciones similares, aunque la situación está
cambiando en los últimos meses gracias a la aparición de herramientas como Inkscape
o Sketsa. Sin embargo, el formato tipo texto de SVG favorece su edición con un
sencillo procesador de textos, independizando su creación de sistemas operativos y
plataformas, lo que otorga un mayor control sobre su generación.
Por último, destaca como particularidad que el desarrollo con Flash involucra siempre
dos tipos de ficheros distintos: el formato nativo generado por la herramienta de autor
con extensión .FLA, y el formato comprimido .SWF, derivado del anterior, pero más
ligero y adaptado a las particularidades de la publicación en Web.
Prestaciones gráficas
Pág. -104-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -105-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Una de las grandes ventajas de SVG es la cuidada atención que presta a procedimientos
más propios de la manipulación de imágenes bitmap, como las máscaras, los filtros o la
transparencia, en lo que puede considerarse como un intento promovido por el
consorcio W3C de crear una especificación que reúna lo mejor de ambas tecnologías.
En el caso de la transparencia, se observa como mientras en Flash la propiedad radica en
el propio espacio de color, en SVG se trata de un atributo más, con lo que tanto la
flexibilidad como el rango de variación alcanzados se incrementan notablemente.
Comportamiento dinámico
Pág. -106-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -107-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
• Las propiedades específicas de diseño ofrecidas por las entidades en SVG son muy
adecuadas para el trabajo en aplicaciones relacionadas con el trazado eficaz de planos y
esquemas. La posibilidad de generación de chaflanes y empalmes, la definición de tipos
de línea o de patrones de sombreado (tabla 2) son una buena muestra de estas
capacidades.
Pág. -108-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
• La adquisición de Macromedia por parte de Adobe (defensora del estándar SVG hasta
la fecha) en 2005 abre numerosas discusiones sobre la apuesta tecnológica que esta
compañía adoptará en un futuro cercano.
• Una de las claves de la amplia difusión de SWF hasta la fecha radica en la existencia
de una potente e intuitiva herramienta de autor. La aparición de alternativas de
prestaciones similares desde el ámbito del software libre está empezando a poner en
entredicho esta supremacía.
Lo que sí parece fuera de toda discusión es el papel relevante que la creación de gráficos
vectoriales para la Web puede tener en la acción del Área de Expresión Gráfica en la
Ingeniería, toda vez que la disponibilidad de recursos gráficos en línea puede ser un
aliado indispensable para la eficaz puesta en marcha de las metodologías docentes que
propugna el Espacio Europeo de Educación Superior.
Pág. -109-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
a) Los archivos SWF pueden ser creados por el programa Flash, aunque hay otras
aplicaciones que también lo permiten.
b) Los archivos SWF son compilados y comprimidos a partir de los archivos
editables (en formato .fla) con los que el usuario trabaja en Flash.
c) La licencia de la especificación permite crear software que reproduzca el
formato.
d) Es posible encapsular los ficheros SWF junto con el reproductor, creando un
proyector autónomo que reproduce la animación que contiene cuando se ejecuta.
5.2. Entre las metas del formato de archivo SWF tenemos (marcar la incorrecta):
Pág. -110-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Los archivos de Flash, que tienen generalmente la extensión de archivo SWF, pueden
aparecer en una página Web para ser vista en un navegador, o pueden ser reproducidos
independientemente por un reproductor Flash. Los archivos de Flash aparecen muy a
menudo como animaciones en páginas Web y sitios Web multimedia, y más
recientemente Aplicaciones de Internet Ricas. Son también ampliamente utilizados en
anuncios de la Web.
Seguridad
Flash Player usa un modelo de seguridad sandbox, lo cual significa que las aplicaciones
Flash que están reproduciéndose en un navegador disponen de recursos muy estrictos y
limitados disponibles para ellos. Las aplicaciones, por ejemplo, no pueden leer archivos
del disco duro (excepto los datos como cookies que ellos mismos hayan escrito,
denominadas SharedObjects). A partir del lanzamiento de Flash Player 7, sólo pueden
comunicarse con el dominio del que ellos se originaron, a menos que sea permitido
explícitamente por otro dominio.
Flash Player es, como cualquier aplicación que trata archivos recibidos de Internet,
susceptible a los ataques. Los archivos especialmente elaborados podrían hacer que la
aplicación funcionara mal, permitiendo la ejecución potencial de código maligno. No se
tiene conocimiento de problemas reales y concretos, pero el plug-in del Player ha tenido
defectos de seguridad que teóricamente podrían haber puesto en peligro un ordenador a
los ataques remotos. No ha habido (publicados) incidentes de seguridad desde entonces.
Flash Player es considerado seguro de usar, especialmente cuando se compara con los
navegadores modernos en general.
Pág. -111-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Influencia
API
ActionScript
Es cierto que la interfaz de programación de Flash está basada en JavaScript, pero con
base en este lenguaje, fue creado ActionScript. Puede parecer a simple vista que
JavaScript y ActionScript son iguales, pero no lo son. Por una parte, JavaScript es un
lenguaje de programación estructurada (también llamada programación modular.
Debido a la característica de poder armar por partes el script) y además se utiliza
principalmente para agregarle interactividad a páginas web. Por otra parte, ActionScript,
desde su versión 2.0, pasa de ser de programación estructurada a programación
orientada a objetos, que trata de ver el entorno de programación como el mundo real,
donde cada objeto tiene propiedades como el color, la forma y su ubicación, y métodos
(borrar un texto, parar la línea de tiempo, cargar variables u hojas de estilo), y además
nos encontramos con un lenguaje más estricto y más amplio donde usted puede crear
sus propias clases.
Desde Flash 6 se integran los flotadores, es decir las ventanitas de herramientas, como
las de colores, componentes, ayuda (que en las últimas versiones, ha tenido su propio
panel, y llamar a éste es tan fácil como presionar la tecla F1).
Los componentes, son una especie de movieClips, ya construidos que vienen de varios
tipos, como los uiComponentes, o los componentes de interfaz, todo estos creados por
el equipo de macromedia, para simplificar y ahorrar tiempo.
Una vez listo el archivo .fla, se procede a compilarlo, que es el proceso donde se junta,
tanto la película como el código, para crear el ejecutable, o el .swf, o más si se quiere,
ya que flash puede exportar la película final de varias maneras, desde sacar la página
.html, con el código para embeber el swf, pasando por exportar .png, .jpg, y gif
(archivos de imagen) hasta exportar el .swf o un exe.
Pág. -112-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Flash CS3 ya emplea la versión 3.0 de Action Script con varios cambios sobre la
anterior versión.
INTRODUCCION A FLASH MX
Las películas de Flash son imágenes y animaciones para los sitios Web. Aunque están
compuestas principalmente por imágenes vectoriales, también pueden incluir imágenes
de mapa de bits y sonidos importados. Las películas Flash pueden incorporar
interacción para permitir la introducción de datos de los espectadores, creando películas
no lineales que pueden interactuar con otras aplicaciones. Los diseñadores de la Web
utilizan Flash para crear controles de navegación, logotipos animados, animaciones de
gran formato con sonido sincronizado e incluso sitios Web con capacidad sensorial. Las
películas Flash son gráficos vectoriales compactos que se descargan y se adaptan de
inmediato al tamaño de la pantalla del usuario.
Una vez terminada la película, es posible exportarla para verla en Flash Player o bien
como un proyector de Flash independiente, lo cual permite verla con un reproductor que
se incluye con la película misma.
- Con el control ActiveX de Flash en Microsoft Office, Microsoft Internet Explorer para
Windows y otros entornos anfitrión de ActiveX.
Animación en Flash
Flash le permite animar objetos para dar la impresión de que se mueven por el
Escenario, así como cambiar su forma, tamaño, color, opacidad, rotación y otras
propiedades. También puede crear animación fotograma a fotograma, creando una
imagen diferente para cada fotograma. Otra posibilidad consiste en crear animación
Pág. -113-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
interpolada, es decir, crear los fotogramas primero y último de una animación y dejar
que Flash cree los fotogramas intermedios.
Cada vez que se abre Flash, la aplicación crea un nuevo archivo. Durante la sesión de
trabajo es posible crear otras nuevas películas. Para definir el tamaño, la velocidad de
fotogramas, el color de fondo y otras propiedades de una nueva película, se utiliza el
cuadro de diálogo Propiedades de película.
1 Modificar
- Para especificar el tamaño del Escenario en píxeles, introduzca los valores en los
campos Anchura y Altura. El tamaño de película predeterminado es de 550 por 400
píxeles. El tamaño mínimo es de 18 por 18 píxeles, mientras que el máximo es de 2880
por 2880 píxeles.
- Para establecer el tamaño del Escenario de forma que el espacio que rodea el
contenido sea igual en todos los lados, haga clic en Coincidir contenido. Para reducir al
mínimo el tamaño de la película, alinee todos los elementos en la esquina superior
izquierda del Escenario antes de utilizar el comando Coincidir contenido.
- Para establecer el tamaño del Escenario con la mayor área de impresión posible, haga
clic en Coincidir impresora. Este área queda determinada por el tamaño del papel menos
los márgenes seleccionados en el área Márgenes del cuadro de diálogo Configurar
página (Windows) o del cuadro de diálogo Márgenes de impresión (Macintosh).
Pág. -114-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
LINEA DE TIEMPO
La Línea de tiempo organiza y controla el contenido de una película a través del tiempo,
en capas y fotogramas. Los componentes principales de la Línea de tiempo son las
capas, los fotogramas y la cabeza lectora.
Las capas de una película aparecen en una columna situada a la izquierda de la Línea de
tiempo. Los fotogramas contenidos en capa cada 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 fotogramas. La cabeza lectora indica el
fotograma actual que se muestra en el Escenario.
Pág. -115-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Puede cambiar la manera según la que se muestran los fotogramas y mostrar miniaturas
del contenido de los fotogramas en la Línea de tiempo. La Línea de tiempo muestra
dónde hay animación en una película, incluyendo la animación fotograma a fotograma,
la animación interpolada y los trazados de movimiento.
Pág. -116-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
La cabeza lectora se mueve por la Línea de tiempo para indicar el fotograma que se
muestra en cada momento en el Escenario. El encabezado de la Línea de tiempo
muestra los números de fotograma de la animación. Para que aparezca en el Escenario
un determinado fotograma, puede mover la cabeza lectora hasta ese fotograma en la
Línea de tiempo.
Si está trabajando con un número de fotogramas tal que no es posible que todos
aparezcan al mismo tiempo en la Línea de tiempo, puede centrar la cabeza lectora en la
Línea de tiempo para poder localizar fácilmente el fotograma actual.
Para ir a un fotograma:
Puede realizar las siguientes modificaciones tanto a los fotogramas como a los
fotogramas clave:
La Línea de tiempo permite ver los fotogramas interpolados de una animación. Para
insertar fotogramas en la Línea de tiempo, utilice uno de los siguientes procedimientos:
Pág. -117-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Para crear un nuevo fotograma clave, seleccione Insertar > Fotograma o bien haga clic
con el botón derecho del ratón (Windows) o Control-clic (Macintosh) en el fotograma
donde desea colocar un fotograma clave y seleccione Insertar fotograma clave en el
menú contextual.
Para crear un nuevo fotograma clave vacío, seleccione Insertar > Fotograma vacío o
bien haga clic con el botón derecho del ratón (Windows) o Control-clic (Macintosh) en
el fotograma donde desea colocar el fotograma clave y seleccione Insertar fotograma
clave vacío en el menú contextual.
Para eliminar o modificar un fotograma o fotograma clave, utilice uno de los siguientes
procedimientos:
Para alargar la duración de un fotograma clave, arrastre con la tecla Alt. presionada
(Windows) o con la tecla Opción presionada (Macintosh) el fotograma clave hasta el
fotograma final de la nueva duración de la secuencia.
Pág. -118-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
clave en el menú contextual. El fotograma clave borrado y todos los fotogramas hasta el
fotograma clave siguiente serán sustituidos por el contenido del fotograma anterior al
fotograma clave borrado.
Capa: Una capa es un área en la cual podemos tener animaciones, el uso de múltiples
capas permite ejecutar diversas animaciones al mismo tiempo.
Elija Ventana > Barras de herramientas > Controlador (Windows) o bien Ventana >
Controlador (Macintosh) y haga clic en Reproducir.
Para desplazarse a través de los fotogramas de la animación, utilice los botones Avanzar
uno y Uno hacia atrás del Controlador, o bien elija los comandos correspondientes del
menú Control. También puede presionar las teclas < y >. Para desplazarse al primer
fotograma de la película o al último, utilice los botones Primer fotograma o Último
fotograma del Controlador.
Nota: También puede arrastrar la cabeza lectora para ver los fotogramas de una película.
Pág. -119-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Para reproducir una película en un bucle continuo: Seleccione Control > Reproducir
indefinidamente. Para reproducir todas las escenas de una película:
Elija Control > Reproducir todas las escenas. Para reproducir una película sin sonido:
Seleccione Control > enmudecer sonidos.
Pág. -120-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -121-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
BARRA DE HERRAMIENTAS
Barra de herramientas
Pág. -122-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Seleccione Ventana > Barras de herramientas y elija una de las siguientes opciones:
Estado muestra la barra de estado, que contiene información acerca de los comandos y
los botones, así como el estado de las teclas Bloq Mayús y Bloq Núm.
Pág. -123-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Flash incorpora varias herramientas para dibujar formas libres o líneas precisas, formas,
y trazados, así como para pintar objetos rellenos
Para dibujar líneas y formas libres de manera muy similar a un lápiz real se utiliza la
herramienta Lápiz.
Para dibujar trazados precisos como líneas rectas o curvas se utiliza la herramienta
Pluma.
Para dibujar formas geométricas básicas, se utilizan las herramientas Línea, Óvalo y
Rectángulo.
Pág. -124-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Una vez creados, remodelar los contornos de las formas y las líneas de numerosas
maneras. Los rellenos y los trazos son tratados como objetos independientes.
Al utilizar las herramientas Lápiz, Línea, Óvalo, Rectángulo o Pincel para dibujar una
línea sobre otra línea o forma pintada, las líneas que se solapan se dividen en segmentos
en los puntos de intersección. Puede utilizar la herramienta Flecha para seleccionar,
mover y remodelar cada segmento independientemente.
Nota: Las líneas que se solapan creadas con la herramienta Pluma no se dividen en
segmentos en los puntos de intersección, sino que permanecen intactas.
Un relleno; el relleno con una línea que lo corta; los dos rellenos y tres segmentos de
línea creados por la segmentación.
HERRAMIENTAS
Herramienta Puntero: Esta herramienta permite mover un objeto dentro del área de
trabajo (Stage).
Herramienta pluma: Para dibujar trazados precisos como líneas rectas o bien como
suaves curvas fluidas, puede utilizar la herramienta Pluma. Puede crear segmentos de
líneas rectas o curvas, y ajustar el ángulo y la longitud de los segmentos rectos, así
como la pendiente de los segmentos curvos. Al dibujar con la herramienta Pluma,
puede hacer clic para crear puntos en los segmentos de las líneas rectas o bien hacer clic
y arrastrar para crear puntos en los segmentos de las líneas curvas. Puede ajustar los
segmentos de las líneas curvas y rectas ajustando los puntos de las líneas. Puede
Pág. -125-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
convertir líneas curvas en líneas rectas y viceversa. También puede mostrar los puntos
de las líneas creadas con otras herramientas de dibujo de Flash, como las herramientas
Lápiz, Pincel, Línea, Óvalo o Rectángulo, para ajustar estas líneas. Dibujo de líneas
rectas con la herramienta Pluma. Para dibujar segmentos de líneas rectas con la
herramienta Pluma, hay que crear puntos de anclaje, puntos de la línea que determinan
la longitud de cada uno de los segmentos de línea.
4 Vuelva a hacer clic para indicar dónde desea que termine el primer segmento de la
línea recta. Haga Mayús-clic para limitar la herramienta a los ángulos múltiplos de 45°.
6 Para terminar el trazado como una forma abierta o cerrada, utilice uno de los
siguientes procedimientos:
Para terminar un trazado abierto, haga doble clic en el último punto, haga clic en la
herramienta Pluma de la caja de herramientas o bien haga Control + clic (Windows).
Para cerrar un trazado, coloque la herramienta Pluma sobre el primer punto de anclaje.
Al colocar correctamente la herramienta, aparecerá un pequeño bucle cerca de la punta
de la pluma. Haga clic o arrastre para cerrar el trazado.
Para terminar la forma tal cual, seleccionando Edición > Anular todas las selecciones
Herramienta Texto
Para situar bloques 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 fija
que ajusta las líneas de forma automática. Flash muestra un selector redondo en la
esquina superior derecha de los bloques de texto que se expanden y uno cuadrado en los
bloques de texto con anchura definida.
Pág. -126-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Para crear un bloque de texto que se expande al escribir, haga clic donde desee que
comience el tipo.
Para crear un bloque de texto con anchura fija, sitúe el puntero donde desee que
comience el texto y arrástrelo hasta la anchura deseada.
Nota: Si crea un bloque de texto que al escribir se extiende más allá del borde derecho o
inferior del Escenario, el texto no se ha perdido. Agregue saltos de línea, desplace el
bloque de texto o elija Ver > Área de trabajo para acceder de nuevo al selector.
Para elegir una fuente, tamaño de tipo, estilo y color con el panel Carácter:
1 Si aún no se visualiza el panel Carácter, elija Ventana > Paneles > Carácter.
2 Haga clic en el triángulo situado junto al campo Fuente y seleccione una fuente de la
lista o introduzca un nombre de fuente.
Nota: Las fuentes _sans, _serif y typewriter son fuentes de dispositivo. La información
de estas fuentes no se incorpora a los archivos SWF de Flash.
Pág. -127-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
4 Para aplicar el estilo negrita o cursiva, haga clic en el botón Negrita o en el botón
Cursiva.
5 Para elegir un color de relleno para el tipo, haga clic en el cuadro de color y realice
uno de los siguientes pasos:
Herramienta Ovalo: Seleccione la herramienta ovalo para crear círculos y óvalos, para
crear círculos perfectos presione la tecla shif y arrastre el mouse hasta que quede el
circulo deseado.
Con las herramientas Óvalo y Rectángulo, arrastre con Mayús presionada para crear
sólo círculos y cuadrados.
Con la herramienta Línea, arrastre con Mayús presionada para dibujar sólo líneas en
ángulos múltiplos de 45°.
Pág. -128-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Seleccione Tinta para dibujar líneas a mano alzada sin aplicarles ninguna modificación.
5 Arrastre sobre el Escenario para dibujar con la herramienta Lápiz. Arrastre con la
tecla Mayús presionada para dibujar sólo líneas verticales u horizontales.
Herramienta Pincel
La herramienta Pincel dibuja trazos similares a los de un pincel. Permite crear efectos
especiales, incluidos efectos caligráficos. En muchas tablillas sensibles a la presión,
puede cambiar el grosor del trazo de pincel aumentando o disminuyendo la presión
sobre la pluma.
También puede utilizar un mapa de bits importado como relleno al pintar con la
herramienta Pincel.
Pág. -129-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pintar detrás pinta en las áreas vacías del Escenario de la misma capa, sin afectar ni a las
líneas ni los rellenos.
Pintar dentro pinta el relleno en el que se inicia un trazo de pincel y nuca pinta sobre las
líneas. Funciona como un libro de colorear en el que la pintura no puede salirse nunca
de las líneas. Si el trazo comienza en un área vacía, el relleno no afecta a ninguna área
rellena.
Imagen original, Pintar normal, Pintar detrás, Rellenos de pintura, Pintar selección y
Pintar dentro.
6 Arrastre sobre el Escenario. Arrastre con Mayús presionada para dibujar sólo trazos
de pincel verticales u horizontales.
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 de degradados o de mapa de bits. Puede utilizar la herramienta Cubo de pintura
para rellenar áreas que no están cerradas por completo, así como especificar que Flash
cierre los huecos de los contornos de las formas al utilizar esta herramienta.
También puede utilizar esta herramienta para ajustar el tamaño, la dirección y el centro
de los rellenos de degradados y de mapas de bits. Si desea obtener información sobre
cómo crear un relleno de mapa de bits.
Nota: Al modificar un relleno de mapa de bits con la herramienta Cubo de pintura, se
modificarán todas las instancias del relleno de mapa de bits, no sólo el relleno de la
selección actual.
Pág. -130-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
La forma de la izquierda no está cerrada por completo pero puede rellenarse. La forma
de la estrella consiste en líneas individuales que encierran un área que puede rellenarse.
Para utilizar la herramienta Cubo de pintura para rellenar una área:
3 Haga clic en el modificador Tamaño de hueco y seleccione una opción de tamaño del
hueco:
Seleccione No cerrar huecos si desea cerrar manualmente los huecos antes de rellenar la
forma. Para dibujos complicados, puede ser más rápido cerrar los huecos manualmente.
Seleccione una opción Cerrar para que Flash rellene una forma con huecos.
Nota: Al ampliar o reducir la imagen con la lupa, cambia el tamaño aparente de los
huecos, pero no el real. Si los huecos son demasiado grandes, puede ser necesario
cerrarlos a mano.
Para ajustar un relleno con degradado o de mapa de bits con la herramienta Cubo de
pintura:
1 Seleccione la herramienta Cubo de pintura.
2 Haga clic en el modificador Transformar relleno.
3 Haga clic en un área rellena con un degradado o un mapa de bits.
Cuando selecciona un relleno con degradado o de mapa de bits para editarlo, aparece el
punto central y su recuadro de delimitación con los selectores de edición. Al colocar el
puntero sobre uno de los selectores, cambia para indicar su función.
Presione Mayús para que la dirección de un degradado lineal sólo pueda colocarse en
ángulos múltiplos de 45°.
4 Remodele el relleno degradado o de mapa de bits utilizando cualquiera de los
procedimientos siguientes:
Para mover el centro del relleno degradado o de mapa de bits, arrastre el punto central.
Pág. -131-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Para cambiar la anchura del relleno con degradado o de mapa de bits, arrastre el selector
cuadrado situado en un lado del recuadro de delimitación. (Esta opción sólo cambia el
tamaño del relleno, no el del objeto que contiene el relleno).
Para cambiar la altura del relleno con degradado o de mapa de bits, arrastre el selector
cuadrado situado en la parte inferior del recuadro de delimitación.
Para girar el relleno con degradado o de mapa de bits, arrastre el selector de rotación
circular situado en la esquina. También puede arrastrar el selector más bajo del círculo
de delimitación de un relleno o degradado circular.
Para cambiar el radio de un degradado circular, arrastre el selector redondo central del
círculo de delimitación.
Para inclinar o distorsionar un relleno dentro de una forma, arrastre uno de los
selectores redondos de la parte superior o derecha del recuadro de delimitación.
Pág. -132-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Para repetir la imagen del mapa de bits como un patrón dentro de una forma, ajuste el
tamaño del relleno.
Nota: Para ver todos los selectores al trabajar con rellenos grandes o cerca del borde del
Escenario, seleccione Ver > Área de trabajo.
Utilizar la herramienta Bote de pintura en lugar de seleccionar cada una de las líneas,
facilita modificar los atributos de trazo de varios objetos de una sola vez. Para utilizar la
herramienta Bote de tinta:
4 Haga clic en un objeto del Escenario para aplicar las modificaciones de trazo.
Herramienta Cuentagotas
Pág. -133-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
2 Haga clic en otro trazo o área rellena para aplicar los nuevos atributos.
Herramienta Borradores
Personalice la herramienta Borrador para borrar sólo trazos, sólo áreas rellenas o sólo
una única área rellena. El borrador puede ser redondo o cuadrado y hay cinco tamaños
disponibles.
Borrar líneas sólo borra los trazos, sin afectar a los rellenos.
Herramienta Mano
Pág. -134-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
2 Arrastre el Escenario.
Herramienta Zoom
Utilice las siguientes técnicas para aumentar o reducir la visualización del Escenario:
Para aumentar una zona concreta del dibujo, arrastre un recuadro de delimitación
rectangular con la herramienta Zoom. Flash establece el grado de aumento/reducción de
forma que el rectángulo especificado ocupe la ventana.
Para aumentar o reducir el tamaño de todo el Escenario, seleccione Ver > Aumentar o
Ver > Alejar.
Para mostrar el contenido del fotograma actual, seleccione Ver > Magnificación >
Mostrar todo o bien elija Mostrar todo en el control de Zoom situado en la esquina
inferior izquierda de la ventana de la aplicación. Si la escena está vacía, se muestra todo
el Escenario.
Pág. -135-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Para mostrar todo el Escenario, seleccione Ver > Magnificación > Mostrar fotograma o
elija Mostrar fotograma en el control de Zoom situado en la esquina inferior izquierda
de la ventana de la aplicación.
Para mostrar el área de trabajo que rodea al Escenario, seleccione Ver > Área de trabajo
. El área de trabajo se muestra en gris claro. Utilice el comando Área de trabajo para ver
los elementos de una escena que están, parcial o completamente, fuera del Escenario.
Por ejemplo, para hacer que un pájaro entre volando en un fotograma, puede colocar
inicialmente el pájaro fuera del Escenario en el área de trabajo.
RELLENOS Y CONTORNOS
Rellenos degradados
3 Haga clic en el triángulo situado junto al cuadro de color Relleno y utilice uno de los
siguientes procedimientos:
Para aplicar, crear o editar un relleno con degradado mediante el panel Relleno:
Pág. -136-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Degradado lineal para crear un degradado que cambie de tonalidad desde el punto
inicial al final según una línea recta.
Degradado radial para crear un degradado que cambie de tonalidad desde el punto
inicial al final siguiendo una forma circular.
4 Para cambiar uno de los colores del degradado seleccionado, haga clic en uno de los
punteros situados debajo de la barra de definición del degradado y haga clic en el
cuadro de color que aparece junto a la barra de definición del degradado para
seleccionar un color.
5 Para agregar un puntero al degradado, haga clic debajo de la barra de definición del
degradado. Seleccione el color del nuevo puntero de la manera descrita en el paso 4.
Pág. -137-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
3 Haga clic en un mapa de bits de la ventana Relleno de mapa de bits que aparece en el
panel Relleno.
Contornos
El panel Trazo permite cambiar el color, estilo y altura de línea del trazo de un
determinado objeto. Para el estilo de trazo, puede elegir entre los estilos predefinidos
que incluye Flash o bien crear un estilo personalizado.
Para seleccionar el color, estilo y altura del trazo mediante el panel Trazo:
2 Para seleccionar un color, haga clic en el triángulo situado junto al cuadro de color
Trazo y utilice uno de los siguientes procedimientos:
Nota: Puede aplicar un trazo transparente a un nuevo objeto, pero no a uno ya existente.
En su lugar, seleccione el trazo existente y elimínelo.
Pág. -138-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
3 Para seleccionar un etilo de trazo, haga clic en el triángulo situado junto al campo
Estilo y seleccione una opción del menú. Para crear un estilo personalizado, seleccione
Personalizado del menú emergente del panel Trazo situado en la esquina superior
derecha del panel y, a continuación, seleccione las opciones que desee en el cuadro de
diálogo Estilo de línea y haga clic en Aceptar.
Nota: Si selecciona un estilo de trazo diferente del sólido puede aumentar el tamaño del
archivo.
4 Para seleccionar la altura del trazo, haga clic en el triángulo situado junto al campo de
altura y ajuste el control deslizante a la altura deseada.
ANIMACION MORPHING
Animación Morphing
Pág. -139-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
1 Haga clic sobre un nombre de capa para activarla como capa actual y seleccione un
fotograma clave vacío donde desee que empiece la animación.
2 Cree la imagen del primer fotograma de la secuencia.
Para crear la forma, utilice una de las herramientas de dibujo.
3 Cree otro fotograma clave a una distancia de tantos fotogramas hacia la derecha como
desee agregar.
4 Cree la imagen del último fotograma de la secuencia. (Puede interpolar la forma, color
o posición de la imagen creada en el paso 2).
5 Seleccione Ventana > línea de tiempo . Para Interpolación, seleccione Forma.
6 Haga clic y arrastre la flecha al lado del valor Aceleración o introduzca un valor para
ajustar la velocidad del cambio entre fotogramas interpolados:
Para empezar la interpolación de forma gradualmente y acelerar la interpolación hacia el
final de la animación, arrastre el deslizador hacia abajo o introduzca un valor entre -1 y
-100.
Nota: Sólo es apropiado para formas de mezcla con esquinas en punta y líneas rectas. Si
las formas elegidas no tienen esquinas, Flash toma a la interpolación de forma
distributiva.
Efecto Alpha
Cada instancia de un símbolo puede tener su propio efecto de color. Para establecer las
opciones de color y transparencia de las instancias, se utiliza el panel Efecto, que está
acoplado al panel Instancia. La configuración del panel Efecto también afecta a los
Pág. -140-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
1 Seleccione una instancia en el Escenario y elija Ventana > Paneles > Efecto.
También puede hacer doble clic con Alt. presionada (Windows) o hacer doble clic con
Opción presionada (Macintosh) en la instancia en el Escenario para traer adelante el
panel Instancia y, a continuación, haga clic en la ficha Efecto.
Efecto Tinta
1 Seleccione una instancia en el Escenario y elija Ventana > Paneles > Efecto.
También puede hacer doble clic con Alt. presionada (Windows) o hacer doble clic con
Opción presionada (Macintosh) en la instancia en el Escenario para traer adelante el
panel Instancia y, a continuación, haga clic en la ficha Efecto.
Mediante la opción Tinta se proporciona color a la instancia con el mismo matiz. Utilice
el deslizador Tinta situado en la parte superior panel para establecer el porcentaje de
tinta, desde transparente (1%) a completamente saturado (100%). Para seleccionar un
color, introduzca valores de rojo, verde y azul en los campos correspondientes o arrastre
los deslizadores de los componentes; o utilice el selector de color.
Efecto Brillo
Pág. -141-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
También puede hacer doble clic con Alt. presionada (Windows) o hacer doble clic con
Opción presionada (Macintosh) en la instancia en el Escenario para traer adelante el
panel Instancia y, a continuación, haga clic en la ficha Efecto.
Efecto Avanzado
También puede hacer doble clic con Alt. presionada (Windows) o hacer doble clic con
Opción presionada (Macintosh) en la instancia en el Escenario para traer adelante el
panel Instancia y, a continuación, haga clic en la ficha Efecto.
Mediante la opción Avanzado se ajustan por separado los valores para el rojo, el verde,
el azul y la transparencia de una instancia. Esto es muy útil cuando se desea crear y
animar efectos de color sutiles en objetos como los mapas de bits. Los controles
situados a la izquierda permiten reducir los valores para el color o la transparencia en el
porcentaje especificado. Los controles de la derecha permiten reducir o aumentar los
valores del color o la transparencia por un valor constante.
Los valores del rojo, verde, azul y alfa se multiplican por los valores del porcentaje y se
agregan a los valores constantes de la columna derecha de manera que proporcionan los
nuevos valores del color. Por ejemplo, si el valor actual del rojo es 100, si se establece
el control deslizante izquierdo en 50% y el derecho en 100, el resultado es un nuevo
valor de rojo de 150 ((100 x 0,5) + 100 = 150).
CREACION DE CLIPS
Cada símbolo posee una Línea de tiempo y un Escenario únicos, completo con capas.
Al crear un símbolo, debe elegir cómo se va a comportar el símbolo, en función cómo
se utilizará en la película.
Utilice símbolos gráficos para las imágenes estáticas y para crear piezas de animación
reutilizables ligadas a la Línea de tiempo de la película principal. Estos símbolos están
Pág. -142-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Utilice símbolos de botón para crear botones interactivos en la película que respondan a
los clics y desplazamientos del ratón, o demás acciones. Defínalos gráficos asociados
con varios estados del botón y, a continuación, asigne acciones a una instancia del
botón.
Utilice símbolos de clip de película para crear piezas de animación reutilizables. Los
clips de películas tienen sus propias líneas de tiempo de varios fotogramas que se
reproducen de independientemente de la Línea de tiempo de la película principal; piense
en ellos como en mini-películas dentro de una película principal que pueden contener
controles, sonidos e incluso otras instancias de clip de película interactivos. También
pueden colocarse instancias de clip de película dentro de la Línea de tiempo de un
símbolo de botón para crear botones animados.
Puede asignar parámetros de clip (variables con valores) a un clip de película para crear
un clip "inteligente". Puede agregar acciones de clip y construir scripts para el clip
inteligente para crear elementos de interfaz, como botones de radio, menús desplegables
o información sobre herramientas, que respondan a los clics de ratón y a otros eventos.
Si desea más información, consulte la Ayuda de ActionScript.
Mediante los símbolos con animación pueden crearse películas con mucho movimiento,
al mismo tiempo que se reduce al mínimo el tamaño del archivo. Considere la
posibilidad de crear animación en un símbolo cuando exista una acción repetitiva o
cíclica, por ejemplo el movimiento hacia arriba y hacia abajo de las alas de un pájaro.
Pág. -143-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Elija Nuevo símbolo del menú Opciones de biblioteca en la esquina superior derecha de
la ventana Biblioteca.
4 Para crear el contenido del símbolo, utilice la Línea de tiempo, dibuje con las
herramientas de dibujo, importe medios o cree instancias de otros símbolos.
5 Cuando haya terminado de crear el contenido del símbolo, utilice uno de los
siguientes procedimientos para volver al modo de edición de películas:
Pág. -144-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Haga clic en el botón Editar escena situado en la esquina superior derecha de la ventana
de documentos y elija una escena del menú.
Utilice símbolos gráficos para las imágenes estáticas y para crear piezas de animación
reutilizables ligadas a la Línea de tiempo de la película principal. Estos símbolos están
sincronizados con la Línea de tiempo de la película principal. Los controles y sonidos
interactivos no funcionan en la secuencia de animación de un símbolo gráfico.
Pág. -145-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Elija Nuevo símbolo del menú Opciones de biblioteca en la esquina superior derecha de
la ventana Biblioteca.
4 Para crear el contenido del símbolo, utilice la Línea de tiempo, dibuje con las
herramientas de dibujo, importe medios o cree instancias de otros símbolos.
5 Cuando haya terminado de crear el contenido del símbolo, utilice uno de los
siguientes procedimientos para volver al modo de edición de películas:
Haga clic en el botón Editar escena situado en la esquina superior derecha de la ventana
de documentos y elija una escena del menú.
Utilice símbolos de botón para crear botones interactivos en la película que respondan a
los clics y desplazamientos del ratón, o demás acciones. Defínalos gráficos asociados
con varios estados del botón y, a continuación, asigne acciones a una instancia del
botón.
Los botones son realmente clips de película interactivos de cuatro fotogramas. Cuando
se selecciona el comportamiento del botón para un símbolo, Flash crea una Línea de
tiempo con cuatro fotogramas. Los tres primeros fotogramas muestran los tres posibles
estados del botón; el cuarto fotograma define el área activa del botón. La Línea de
tiempo no se reproduce realmente; simplemente reacciona a los movimientos y acciones
del puntero saltando al fotograma correspondiente.
Pág. -146-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Para que un botón sea interactivo en una película, coloque una instancia del símbolo del
botón en el Escenario y asigne acciones a la instancia. Las acciones deben asignarse a la
instancia del botón en la película y no a los fotogramas en la Línea de tiempo del botón.
El cuarto fotograma es el estado Zona activa, define el área que responderá al clic del
ratón. Esta área es invisible en la película.
Pág. -147-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
(Macintosh). Para crear el botón, debe convertir los fotogramas del botón en fotogramas
clave.
4 Para crear la imagen del botón del estado Reposo, utilice las herramientas de dibujo,
importe un gráfico o coloque una instancia de otro símbolo en el Escenario.
En un botón puede utilizarse un símbolo de clip de película o de gráfico, pero no puede
utilizarse otro botón. Utilice símbolos de clips de película si desea crear un botón
animado.
5 Haga clic en el segundo fotograma, Sobre y elija Insertar > Fotograma clave.
Flash inserta un fotograma clave que duplica el contenido del fotograma Reposo.
6 Modifique la imagen del botón para el estado Sobre.
8 Para asignar un sonido a un estado del botón, seleccione el fotograma de dicho estado
en la Línea de tiempo, elija Modificar > Fotograma y a continuación haga clic en la
ficha Sonido en el panel Fotograma que aparecerá.
9 Cuando haya finalizado, elija Edición > Editar símbolo . Arrastre el símbolo del botón
fuera de la ventana Biblioteca para crear una instancia del símbolo en la película.
Pág. -148-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
ACTIONSCRIPT
Ventana de Acciones
Si se desea que una película realice una acción concreta cuando alcance un fotograma
clave, basta con asignar una acción de fotograma al fotograma clave. Por ejemplo, para
crear un ciclo en una película, puede agregar una acción de fotograma al Fotograma 20
que especifique "go to Frame 10 and play".
Una buena idea es colocar todas las acciones de fotograma en una capa para hacer más
fácil su seguimiento. Los fotogramas que tiene acciones asociadas muestran una
pequeña a en la Línea de tiempo. Una vez asignada la acción, es recomendable que
pruebe la acción para verificar si funciona mediante el comando Control > Probar
película . La mayoría de las acciones no funcionan en modo de edición.
Pág. -149-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
2 Para mostrar las acciones básicas, haga clic en la categoría Acciones básicas en la lista
de la Caja de herramientas situada en la parte izquierda del panel.
Haga doble clic en una acción en la categoría Acciones básicas en la lista de la Caja de
herramientas.
Haga clic en el botón Agregar (+) y elija una sentencia en el menú emergente.
4 Para mostrar los campos de parámetros, haga clic en el botón Parámetros, situado en
la esquina inferior derecha del panel Acciones. Seleccione la acción y especifique
nuevos valores en los campos de parámetros, si desea modificar los parámetros de las
acciones existentes. Los parámetros variarán dependiendo de la acción que seleccione.
Pág. -150-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
FUNCIONES ACTIONSCRIPT
Goto
La siguiente sentencia indica el fotograma situado cinco fotogramas por delante del
fotograma que contiene la acción:
gotoAndStop(_currentframe + 5);
Stop
Pág. -151-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
A menos que se indique lo contrario, una vez que se inicia una película se reproduce por
todos los fotogramas de la Línea de tiempo. Puede detener e iniciar una película a
intervalos específicos mediante las acciones Reproducir y Detener. Por ejemplo, puede
detener una película al final de una escena antes de continuar con la siguiente escena.
Una vez detenida, una película debe iniciarse de nuevo de forma explícita, mediante la
acción Reproducir.
Reproducir y Detener se utilizan por lo general para controlar los clips de películas con
botones o para controlar la Línea de tiempo principal. El clip de película que desea
controlar debe tener un nombre de instancia, un destino asignado y debe estar presente
en la Línea de tiempo.
Donde onClipEvent (load) indica que cuando se carga la película, ejecuta la instrucción
stop para detener la película.
Nota: Los paréntesis vacíos que aparecen detrás de una acción indican que es un método
(capacidad) que no tiene parámetros ni argumentos.
getURL
Pág. -152-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Descripción
Acción; carga un documento de una URL específica en una ventana o pasa variables a
otra aplicación en una URL definida. Para probar esta acción, asegúrese de que el
archivo que se va a cargar se encuentra en la ubicación especificada. Para utilizar una
URL absoluta (por ejemplo, http://www.myserver.com ), necesita una conexión de red.
Reproductor
Flash 2 o posterior. Las opciones GET y POST están disponibles solamente en Flash 4 y
versiones posteriores del Reproductor.
Ejemplo
Este ejemplo carga una nueva URL en una ventana del navegador vacía. La acción
getURL destina la variable incomingAd como el parámetro url para que pueda cambiar
la URL cargada sin tener que editar la película de Flash. El valor de la variable
incomingAd se pasa antes a Flash en la película utilizando una acción loadVariables .
On Mouse Event
Se puede especificar el evento de ratón que desencadena una acción de botón mediante
el panel Acciones. Para configurar las opciones de evento del ratón:
2 Para mostrar las acciones básicas, haga clic en la categoría Acciones básicas en la lista
de la Caja de herramientas situada en la parte izquierda del panel Acciones.
Pág. -153-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Liberar fuera: desencadena la acción al liberar el botón del ratón cuando el puntero no
se encuentra sobre el botón.
Situar fuera de objeto: desencadena la acción al desplazar el puntero fuera del botón.
Arrastrar fuera: desencadena la acción cuando el botón del ratón se presiona con el
puntero sobre el botón y, a continuación, el puntero se desplaza fuera del botón. 5
Asigne cualquier acción adicional al botón. Para probar acciones de fotograma, utilice
uno de los siguientes procedimientos:
StartDrag
Izquierda, arriba, derecha, abajo Los valores relativos a las coordenadas del elemento
principal del clip de película que especifica un rectángulo de limitación para el clip de
película. Estos argumentos son opcionales.
Descripción: Acción; hace que el clip de película destino se pueda arrastrar mientras se
reproduce la película. Sólo un clip de película puede arrastrarse al mismo tiempo. Una
vez que se ha ejecutado una acción startDrag , el clip de película permanece arrastrable
hasta que se detiene específicamente por una acción stopDrag o hasta que se llama a una
acción startDrag de otro clip de película.
Pág. -154-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Ejemplo: Para crear un clip de película que los usuarios puedan colocar en cualquier
ubicación, anexe las acciones startDrag y stopDrag a un botón dentro del clip de
película, como se muestra a continuación:
StopDrag
Sintaxis: stopDrag();
Argumentos: Ninguno.
Play
Sintaxis: play();
Argumentos: Ninguno.
stop(); if (name = "Steve") { play(); } else { alert = "You are not Steve!"; }
LoadMovie
Argumentos: url Una URL absoluta o relativa para el archivo SWF que se va a cargar.
Una ruta relativa debe ser relativa respecto al SWF. La URL debe estar en el mismo
subdominio que la URL donde reside actualmente la película. Para utilizarlos en Flash
Player o para realizar pruebas en el modo de prueba de película en el entorno de
creación de Flash, todos los archivos SWF tienen que guardarse en la misma carpeta y
los nombres de archivo no pueden incluir especificaciones de carpeta ni de unidad de
disco.
Pág. -155-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Descripción: Acción; reproduce películas adicionales sin cerrar Flash Player. Por lo
general, Flash Player muestra una sola película de Flash Player (archivo SWF) y
después se cierra. La acción loadMovie permite ver varias películas al mismo tiempo o
cambiar entre películas sin cargar otro documento HTML.
Puede cargar películas en los niveles que ya tienen archivos SWF cargados. Al hacerlo,
la nueva película sustituye al archivo SWF existente. Si carga una nueva película en el
nivel 0, todos los niveles se descargarán y el nivel 0 se sustituirá por el nuevo archivo.
Utilice la acción loadVariables para mantener la película activa y actualizar las variables
con nuevos valores.
Utilice la acción unloadMovie para eliminar películas cargadas con la acción loadMovie
.
on(release) { loadMovie("products.swf",_root.dropZone); }
Pág. -156-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
ESCENAS
Para organizar un película por temas, puede utilizar escenas. Por ejemplo, puede utilizar
escenas diferentes para una introducción, un mensaje de carga y los créditos.
Al publicar una película de Flash que contiene más de una escena, las escenas del
archivo SWF se reproducen en una sola secuencia en el orden en el que aparecen en el
panel Escena del archivo FLA. Los fotogramas del archivo SWF están numerados
consecutivamente entre las diferentes escenas. Por ejemplo, si una película contiene dos
escenas, cada una de ellas con 10 fotogramas, los fotogramas de la escena 2 estarán
numerados del 11 al 20.
Puede agregar, eliminar, duplicar, cambiar el nombre y cambiar el orden de las escenas.
Para detener la película o hacer una pausa después de cada escena, o bien para permitir
que los usuarios contemplen la película de manera no lineal, se utilizan las acciones.
Escena, panel . Para mostrar el panel Escena:
Seleccione Ventana > Escena . Para ver una escena determinada:
Seleccione Ver > Goto y, a continuación, elija el nombre de la escena del submenú.
Para agregar una escena, utilice uno de los siguientes procedimientos:
Haga clic en el botón Agregar del panel Escena.
Seleccione Insertar > Escena . Para eliminar una escena, utilice uno de los siguientes
procedimientos:
Pág. -157-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
SONIDO
Utilice el comando Archivo > Importar para traer sonidos de archivos WAV (sólo
Windows), AIFF (sólo Macintosh) o MP3 (cualquier plataforma) de la misma forma
que lo haría con cualquier otro tipo de archivo.
Si tiene QuickTime 4 o posterior instalado en su sistema podrá importar los siguientes
formatos de archivo de sonido:
Flash almacena los sonidos en la biblioteca junto con los mapas de bits y los símbolos.
Al igual que con los símbolos gráficos, sólo es necesaria una copia del archivo de
sonido para utilizar ese sonido de varias formas en la película. Si desea compartir
sonidos entre las películas Flash, puede incluir sonidos en las bibliotecas compartidas.
Para usar un sonido en una biblioteca compartida, asigne al archivo de sonido una
cadena identificadora en el cuadro de diálogo Propiedades de vínculos de símbolos. El
identificador también se puede usar para acceder al sonido como un objeto en
ActionScript. Para información sobre objetos en ActionScript.
Nota: Los sonidos grabados en formatos que no sean múltiplos de 11 Khz. (como 8, 32,
o 96 Khz.) se vuelven a muestrear cuando se importan en Flash.
Si desea añadir efectos a los sonidos de Flash, es preferible importar sonidos de 16 bits.
Si la memoria RAM del sistema es limitada, trabaje con clips de sonido cortos o con
sonidos de 8 bits en lugar de 16-bits.
Pág. -158-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
TRANSFORMACION DE FIGURAS
Rotar
Al rotar un objeto, éste gira sobre su punto de registro. Como valor predeterminado, éste
el es centro del objeto, pero puede desplazarlo. Arrastrándolo o asignándole un ángulo
en el panel Transformar.
Original, rotado hacia la derecha y rotado hacia la izquierda, respectivamente.
4 Haga clic en un área vacía del Escenario o elija Modificar > Transformar > Rotar para
ocultar los selectores de rotación.
Pág. -159-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Escalar
Para cambiar el tamaño proporcional del objeto en horizontal y en vertical, arrastre uno
de los selectores de esquina. Las proporciones se mantienen según se cambia el tamaño.
4 Haga clic en un área vacía del Escenario o elija Modificar > Transformar > Escala r
para ocultar los selectores de escala.
Nota: Al aumentar el tamaño de varios elementos, aquellos que están situados cerca de
los bordes del recuadro de delimitación se pueden mover fuera del Escenario. Si se diera
el caso, elija Ver > Área de trabajo para ver los elementos situados fuera de los bordes
del Escenario.
Girar CCW, CW
2 Elija Modificar > Transformar > Rotar 90° en el sentido de las agujas del reloj o Rotar
90° en sentido contrario a las agujas del reloj.
Reflejar
Los objetos pueden reflejarse según su eje horizontal o vertical sin mover su posición
relativa en el Escenario.
Efectos personalizado
Máscaras
Para crear una capa de máscara, se coloca una forma rellena sobre la capa. La capa de
máscara muestra el área de las capas vinculadas y situadas por debajo de la forma
rellena y oculta todas las demás. Las capas de máscara pueden contener una sola forma,
instancia u objeto de tipo. (Las funciones de las capas de máscara de Flash son similares
Pág. -161-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
1 Cree o seleccione una capa que incluya el contenido que se visualizará a través de los
agujeros de la máscara.
2 Con la capa seleccionada, elija Insertar > Capa para crear una capa nueva encima. Una
capa de máscara siempre cubre la capa situada debajo, por tanto asegúrese de crear la
capa de máscara en el lugar correcto.
3 Dibuje una forma rellena, coloque un tipo o cree una instancia de un símbolo en la
capa de máscara. Flash ignora los mapas de bits, degradados, transparencias, colores y
estilos de línea en una capa de máscara. Todas las áreas rellenas de una máscara son
transparentes; y las áreas no rellenas son opacas.
4 Haga clic con el botón derecho del ratón (Windows), o Control-Clic (Macintosh), en
el nombre de la capa de máscara de la Línea de tiempo y elija Máscara en el menú
contextual. La capa se convierte en una capa de máscara, señalada por un icono de una
flecha hacia abajo. La capa situada inmediatamente debajo está vinculada a capa de
máscara y se muestra su contenido a través del área rellena en la máscara. El nombre de
capa de máscara aparece con sangría y su icono cambia a una flecha que apunta a la
derecha. Para visualizar el efecto de máscara en Flash, bloquee la capa de máscara y la
capa enmascarada.
Para enmascarar capas adicionales después de crear una capa de máscara, utilice uno de
los siguientes procedimientos:
Cree una capa nueva en cualquier sitio por debajo de la capa de máscara.
Elija Modificar > Capa y seleccione Con máscara en el cuadro de diálogo Propiedades
de capa.
Para cambiar el estado de una capa, entre con máscara y sin máscara:
Seguir el Ratón
1. Crear Objeto
2. F8
Pág. -162-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
PUBLICAR LA PELICULA
Cuando esté listo para presentar su película al público debe publicar o exportar el
archivo Flash FLA a otro formato para su reproducción.
La función Publicar de Flash está diseñada para presentar la animación en la Web. Este
comando crea el archivo (SWF) de Flash Player y un documento HTML que inserta
dicho archivo en una ventana del navegador.
Elegir los formatos en los que desea entregar el archivo de creación y ajustar las
configuraciones para el formato de archivo en particular. Flash publica automáticamente
el archivo de creación en los formatos seleccionados, crea archivos adicionales basados
en las configuraciones seleccionadas y guarda las configuraciones con el archivo de
película para volverlas a usar.
Las opciones de Exportar película coinciden por lo general con las de publicación pero
no guardan las configuraciones para volverlas a utilizar.
Pág. -163-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
ejemplo, en Flash puede usar datos de Generator como variables para ofrecer una
respuesta inmediata o personalizada a sus visitantes del sitio Web de Flash, hacer que la
producción del sitio Web sea más eficaz y crear ilustraciones, como listas de
desplazamiento, que no se pueden crear sólo con Flash.
Como alternativa al uso del comando Publicar y si es experto en HTML, puede crear su
propio documento HTML con cualquier editor HTML e incluir las etiquetas que se
necesitan para mostrar una película de Flash.
Si cuenta con Macromedia Dreamweaver, podrá añadir una película de Flash a su sitio
Web fácilmente. Dreamweaver crea todos los códigos HTML necesarios.
Pág. -164-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
4 Elija una plantilla instalada para utilizarla desde el menú emergente Plantilla; haga
clic en el botón de información de la derecha para que aparezca una descripción de la
plantilla seleccionada.
5 Elija una opción de Dimensiones para configurar los valores de los atributos WIDTH
y HEIGHT en las etiquetas OBJECT y EMBED :
Pausa al comienzo detiene la película hasta que el usuario haga clic en un botón de la
película o elija Reproducir del menú emergente. De forma predeterminada, la opción se
deselecciona y la película empieza a reproducirse en cuanto se carga (el parámetro
PLAY está definido en true) .
Ciclo repite la película en ciclo cuando alcanza el último fotograma. Anule la selección
de esta opción si desea parar la película cuando llegue al último fotograma. (El
parámetro LOOP está activo de forma predeterminada.)
Visualizar menú muestra un menú de método abreviado cuando el usuario hace clic con
el botón derecho del ratón (Windows) o Control-clic (Macintosh) en la película. Anule
la selección de esta opción para que sólo aparezca Acerca de Flash en el menú atajo. De
forma predeterminada, esta opción está activada (el parámetro MENU está definido en
true).
Pág. -165-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Para Windows únicamente, seleccione Fuente de dispositivo para sustituir las fuentes
suavizadas del sistema por fuentes no instaladas en el sistema del usuario. El uso de las
fuentes de dispositivo aumenta la legibilidad del tipo en tamaños pequeños y puede
disminuir el tamaño del archivo de película. Esta opción sólo afecta a las película que
contienen texto estático (texto que creó al crear una película y que no cambia cuando
ésta se muestra) definido para mostrarse con las fuentes de dispositivo. Si desea obtener
más información.
Baja automática da más importancia a la velocidad, pero mejora el aspecto siempre que
es posible. La opción Reproducción empieza con la visualización suavizada
desactivada. Si Flash Player detecta que el procesador puede gestionarla, la
visualización suavizada se activa.
Medio aplica algo de visualización suavizada, pero no suaviza los mapas de bits.
Produce mejor calidad que el valor Baja, pero menor calidad que el valor Alta.
Esta opción configura el valor del parámetro QUALITY en las etiquetas OBJECT y
EMBED .
8 Para la versión Windows de Internet Explorer 4.0 con el control Flash ActiveX, elija
una opción de Modo de ventana para transparencia, posición y capas:
Opaco sin ventana mueve los elementos detrás de las películas de Flash (por ejemplo,
con HTML dinámico) para evitar que éstos se muestren, configurando el parámetro
WMODE en OPAQUE .
Pág. -166-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
9 Elija una opción de Alineación HTML para colocar la ventana de la película de Flash
dentro de la ventana del navegador.
Izquierda, Derecha, Superior o Inferior alinea las películas por el borde correspondiente
de la ventana del navegador y recorta los otros tres lados si es necesario.
Esta opción especifica el atributo ALIGN para las etiquetas OBJECT , EMBED e IMG .
10 Elija una opción de Escala para colocar la película dentro de los límites especificados
si cambió el ancho y la altura original de la película:
Predeterminada (mostrar todo) permite ver toda la película en el área especificada sin
distorsión, al mismo tiempo que mantiene la proporción original de la película. Es
posible que aparezcan bordes a ambos lados de la película.
11 Elija una opción de Alineación Flash para configurar la forma en que se coloca la
película
dentro de la ventana y cómo se recorta si fuera necesario.
13 Para guardar las configuraciones con el archivo activo, haga clic en Aceptar.
Pág. -167-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Para ubicar el sitio donde una película puede entrar en pausa durante la descarga, puede
probar una escena o una película completa mediante el comando Probar escena o Probar
película o puede abrir un archivo SWF existente. Si existen datos necesarios que no se
han descargado una vez que la película llega a un fotograma, la película se detiene hasta
que llegan dichos datos.
Para ver el rendimiento de descarga de manera gráfica, Flash Player puede visualizar el
Creador de perfil para ancho de banda y ver la cantidad de datos que se envían para
cada fotograma de la película según la velocidad de módem definida. Para simular la
velocidad de descarga, el Creador de perfil para ancho de banda utiliza valores
estimados del rendimiento habitual de Internet, no la velocidad exacta del módem. Por
Pág. -168-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
También puede generar un informe para hallar los fotogramas que hacen la
reproducción más lenta y luego optimizar el contenido en esos fotogramas. Para generar
un informe, utilice la opción Seleccionar generar informe en el cuadro de diálogo
Configuración de publicación.
Elija Archivo > Configuración de publicación para cambiar la configuración del archivo
de Flash Player creado por Probar película y Probar escena.
Elija Control > Probar escena o bien Control > Probar película.
Si prueba una escena o película, Flash publicará la selección activa como archivo SWF
utilizando las configuraciones en el cuadro de diálogo Configuración de publicación. El
archivo SWF se abre en una nueva ventana y empieza a reproducirse de inmediato.
2 En el menú Depurar de Flash Player, elija una velocidad de descarga para determinar
la velocidad de descarga que imita Flash: 14.4 Kbps, 28.8 Kbps, 56 Kbps. Para
introducir sus propias configuraciones, elija Personalizar.
3 En Flash Player, elija Ver > Creador de perfil para ancho de banda para visualizar un
gráfico del rendimiento de descarga:
El lado izquierdo del creador de perfil muestra información sobre la película, sus
configuraciones y estado. En Película se indican las dimensiones, velocidad de
fotograma, tamaño en KB y bytes, duración y precarga en número de fotogramas y
segundos.
4 Elija Ver > Mostrar flujo para activar y desactivar la barra de flujo.
Pág. -169-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
5 Haga clic en una barra del gráfico para mostrar las configuraciones para el fotograma
correspondiente en la ventana izquierda y detener la película.
Elija Ver > Gráfico por flujo para que aparezcan los fotogramas que se detienen.
Esta vista predeterminada muestra bloques gris claro y oscuro que representan a cada
fotograma. En el lateral de cada bloque se indica su tamaño en bytes relativo. El primer
fotograma guarda el contenido del símbolo y es frecuentemente más grande que otros
fotogramas.
Elija Ver > Gráfico fotograma a fotograma para mostrar el tamaño de cada fotograma.
Esta vista le ayudará a ver los fotogramas que contribuyen a las demoras de flujo. Si
cualquier bloque de fotograma se extiende más allá de la línea roja en el gráfico
entonces Flash Player detendrá la reproducción hasta que se descargue la totalidad del
fotograma.
Creador de perfil para ancho de banda mostrando barra de flujo y vista de Gráfico
fotograma a fotograma.
Pág. -170-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Una vez que haya configurado un entorno de prueba incorporando el Creador de perfil
para ancho de banda, podrá abrir cualquier SWF directamente en modo de prueba. El
archivo se abre en una ventana del reproductor utilizando el Creador de perfil para
ancho de banda y otras opciones de visión seleccionadas.
Para generar un informe donde figure la cantidad de datos en el archivo final de Flash
Player por archivos:
Flash genera un archivo de texto con el mismo nombre que la película exportada más la
extensión .txt. En el informe aparece la cantidad de datos del archivo final de Flash
Player por fotogramas
Configurar Navegador
Con los valores que aparecen en Configuración de publicación, Flash crea un archivo
del tipo especificado en la misma ubicación que la película de Flash. Este archivo
permanece en dicha ubicación hasta que se sobrescribe o se elimina.
Entre las diferentes herramientas alternativas a flash hemos encontrado las siguientes:
KToon
Pág. -172-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Al igual que Flash tiene una línea de tiempo; el mezclador de color es muy similar,
permite animar y organizar los elementos por capas, etc. Aunque no es idéntica y quizás
la organización de algunas de las barras flotantes no es tan intuitiva.
Pág. -173-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Navegando en el código del programa se puede ver que han incorporado las librerías
ming; que sirven para que otros programas ajenos a Flash puedan generar archivos
SWF, aunque según ellos, actualmente manejan un formato XML y a futuro planean
también exportar/usar SVG (Que es el formato abierto y estándar con el que compite el
SWF de Flash)
ZINC
Pág. -174-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Esta herramienta contiene bibliotecas de Object Pascal para crear archivos SWF, sin
ninguna biblioteca dinámica externa.
Es una herramienta para hacer aplicaciones basadas en Flash para sitios Web.
Puede ser usada para crear juegos, videos Flash, animaciones interactivas, efectos de
texto.
Esta herramienta permite editar SWF. Provee funcionalidad para editar todos los
elementos de una película Flash, así como añadir o cambiar textos
Pág. -175-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Swish Max
Pág. -176-
Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008
Pág. -177-