1. gráficos vectoriales y de mapa de bits

Programa Oficial de Postgrado:

Master en Comunicaciones, Redes y Gestión de Contenidos

TECNOLOGÍA DE LOS CONTENIDOS MULTIMEDIA

Optativa de 2º cuatrimestre

TEMA 1

Gráficos vectoriales y de mapa de bits

Gráficos Vectoriales y de mapa de bits UNED – Curso 2007-2008

Pág. -2-

1. Gráficos vectoriales y de mapa de bits

1.1. Revisión de conceptos de texto e hipertexto

1.2. Descripción de las dos formas de representar gráficos en formato digital

1.3. Problemática de tamaño en las imágenes de mapa de bits

1.4. Gráficos vectoriales escalables (Especificación SVG)

1.5. Gráficos vectoriales animados (Especificación SWF)

1.6. Introducción a Flash y herramientas alternativas


Pág. -3-

INDICE 1. Revisión de conceptos de texto e hipertexto ............................................................ 6

1.1. Concepto de texto ............................................................................................. 6 Texto lingüístico....................................................................................................... 6 Texto y discurso ....................................................................................................... 7 Texto y escritura ....................................................................................................... 7 Texto como "diálogo" y texto como "monólogo" .................................................... 7 Características........................................................................................................... 7 Tipologías textuales.................................................................................................. 8

1.2. Concepto de hipertexto..................................................................................... 8 Hipertexto como documento con hiperenlaces......................................................... 9

1.3. Del texto al hipertexto e hipermedia ................................................................ 9 No linealidad ............................................................................................................ 9 Interconexión e integración. ................................................................................... 10 Descentralización de la autoría............................................................................... 11

1.4. Ejercicios de autoevaluación .......................................................................... 13

2. Descripción de las dos formas de representar gráficos en formato digital ............. 15 2.1. El formato raster o mapa de bits..................................................................... 15

Colores.................................................................................................................... 16 Codificación y resolución (Encoding).................................................................... 20 Formatos más comunes .......................................................................................... 21

2.2. El formato vectorial ........................................................................................ 25 Ventajas y desventajas............................................................................................ 26 Operaciones vectoriales.......................................................................................... 27 Impresión................................................................................................................ 27 Formatos más comunes .......................................................................................... 27

2.3. Ejercicios de autoevaluación .......................................................................... 30

3. Problemática de tamaño en las imágenes de mapa de bits ..................................... 31 3.1. Compresión sin pérdidas ................................................................................ 31

Sistemas no adaptativos.......................................................................................... 31 Sistemas semiadaptativo......................................................................................... 32 Sistemas adaptativos............................................................................................... 33

3.2. Compresión con pérdidas ............................................................................... 34 3.3. Optimización general de imágenes................................................................. 38

Formatos ................................................................................................................. 38 Si la imagen es una fotografía ................................................................................ 39 Si la imagen es un dibujo........................................................................................ 39 Sobre la edición de las imágenes para Internet....................................................... 40 Reducción de colores (dithering)............................................................................ 41

3.4. Optimización de imágenes para la web (II).................................................... 42 Paletas de colores e imágenes artificiales............................................................... 43 Optimizando imágenes con Adobe Photoshop....................................................... 44

3.5. Aplicaciones para optimizar el tamaño de imágenes...................................... 47 3.6. Ejercicios de autoevaluación .......................................................................... 48


Pág. -4-

4. Gráficos vectoriales escalables (Especificación SVG)........................................... 49 4.1. Conceptos ....................................................................................................... 50

Escalable................................................................................................................. 50 Vector ..................................................................................................................... 50 Gráficos .................................................................................................................. 50 XML ....................................................................................................................... 51 Namespace.............................................................................................................. 51 Uso de estilos.......................................................................................................... 51 Conceptos importantes de SVG.............................................................................. 51 Objetos gráficos...................................................................................................... 51 Símbolos ................................................................................................................. 52 Efectos raster .......................................................................................................... 52 Fuentes.................................................................................................................... 52 Animación .............................................................................................................. 52 Opciones para usar SVG en páginas Web.............................................................. 53

4.2. Beneficios de utilizar SVG............................................................................. 54 4.3. Estructura básica de un documento ................................................................ 55 4.4. Geometría ....................................................................................................... 56 4.5. Elementos disponibles .................................................................................... 62 4.6. Scripting ......................................................................................................... 68 4.7. SMIL............................................................................................................... 72 4.8. Gráficos e interactividad en la Web ............................................................... 78 4.9. SVG Móvil ..................................................................................................... 79 4.10. Ejercicios de autoevaluación ...................................................................... 86

5. Gráficos vectoriales animados (Especificación SWF) ........................................... 87 5.1. Licencia .......................................................................................................... 87 5.2. Especificación del formato del archivo de SWF ............................................ 88

Conceptos básicos .................................................................................................. 88 Formato del contenedor .......................................................................................... 88 Tipos de etiquetas ................................................................................................... 90 Marcar ordenar y fluir con etiqueta ........................................................................ 90 Caracteres y el diccionario ..................................................................................... 91 Lista del Display..................................................................................................... 91 Números y coordenadas ......................................................................................... 91 Transforma ............................................................................................................. 92 Proceso de un archivo de SWF............................................................................... 92 Estrategia de la compresión del archivo................................................................. 92 Mecanismo de la extensión .................................................................................... 93 Archivo de muestra SWF ....................................................................................... 93

5.3. Alternativas para la visualización de información gráfica en la Web .......... 100 Los gráficos vectoriales en la Web....................................................................... 102 Comparación entre SWF y SVG .......................................................................... 103 La Expresión Gráfica ante las nuevas tecnologías de creación de contenidos..... 108

5.4. Ejercicios de autoevaluación ........................................................................ 110

6. Introducción a Flash y herramientas alternativas ................................................. 111 6.1. Adobe Flash.................................................................................................. 111


Pág. -5-

Seguridad.............................................................................................................. 111 Influencia .............................................................................................................. 112 API........................................................................................................................ 112 ActionScript.......................................................................................................... 112

6.2. Tutorial de Flash........................................................................................... 113 INTRODUCCION A FLASH MX....................................................................... 113 CREACION DE UN PELICULA EN FLASH .................................................... 114 Línea de tiempo (Timelines)............................................................................... 115 Modificación del aspecto de la Línea de tiempo .................................................. 116 ELEMENTOS DE LA LINEA DE TIEMPO....................................................... 117 CREAR UNA ANIMACION............................................................................... 121 BARRA DE HERRAMIENTAS.......................................................................... 122 HERRAMIENTAS............................................................................................... 125 RELLENOS Y CONTORNOS ............................................................................ 136 ANIMACION MORPHING ................................................................................ 139 CREACION DE CLIPS ....................................................................................... 142 CREACION DE CLIPS BOTONES .................................................................... 146 ACTIONSCRIPT ................................................................................................. 149 FUNCIONES ACTIONSCRIPT .......................................................................... 151 ESCENAS ............................................................................................................ 157 SONIDO ............................................................................................................... 158 TRANSFORMACION DE FIGURAS................................................................. 159 PUBLICAR LA PELICULA................................................................................ 163

6.3. Herramientas alternativas a Flash................................................................. 172 KToon................................................................................................................... 172 ZINC..................................................................................................................... 174 Delphi SWF SDK 2.1 ........................................................................................... 175 Sothink SWF Quicker........................................................................................... 175 Swish Max ............................................................................................................ 176


Pág. -6-

1. Revisión de conceptos de texto e hipertexto

En este capítulo vamos a crear una sección para explicar el concepto de texto y otro capítulo para explicar el concepto de hipertexto. Por último haremos una sección que explica el paso del hipertexto al hipermedia bajo la visión de una obra abierta.

No he querido hacer este apartado muy técnico sino más conceptual y con una visión concreta.

1.1. Concepto de texto

Un texto es una composición de signos codificado en un sistema de escritura (como un alfabeto) que forma una unidad de sentido. Su tamaño puede ser variable, desde una obra literaria como "El Quijote" al mensaje de volcado de pila del kernel de Linux.

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.

Imagen 1 Detalle de texto en inglés

En otras palabras un texto es un enramado de signos con una intención comunicativa que adquiere sentido en

determinado contexto.

De los textos se pueden extraer ideas esenciales, a las que llamaremos "macroproposisión".

¿Cómo extraer de un texto una idea esencial? Hay varios pasos:

1. Leer atentamente el párrafo. 2. Identificar "núcleos" (lo importante del párrafo) y escribirlos en forma de oración simple. 3. Identificar la información adicional. 4. Relacionar esos núcleos a través de una oración compleja unida por uno o varios conectores.

Texto lingüístico

De acuerdo a Greimas, es un enunciado ya sea gráfica o fónico que es utilizado para manifestar el proceso lingüístico. Mientras Hjelmslev usa ese término para designar el todo de una cadena lingüística ilimitada. En lingüística no todo conjunto de signos constituye un texto.


Pág. -7-

Se denomina texto a la configuración lingüística que utiliza signos específicos (signo lingüístico) y está organizada según reglas de construcción.

Texto y discurso

Se relaciona estrechamente con el discurso, puesto que éste es la emisión concreta de un texto, por un emisor determinado, en una situación de comunicación determinada.

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

Es importante no confundir la noción de texto con escrito. La base de un discurso oral es un texto oral y el sustento de un discurso escrito es un texto escrito.

Texto como "diálogo" y texto como "monólogo"

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

• Oral: Una declamación, un discurso político

• Escrita: Una carta de solicitud, una novela

DIALOGAL

• Oral: Una conversación en un bar

• Escrita: Una conversación por chat

Características

Este texto o conjunto de signos extraídos de un discurso debe reunir condiciones de textualidad. Las principales son cohesión, coherencia, significado, progresividad, intencionalidad y clausura o cierre.

Según los lingüistas Beaugrande y Dressler, todo texto bien elaborado ha de presentar siete características:


Pág. -8-

1. Ha de ser coherente, es decir, centrarse en un solo tema, de forma que las diversas ideas vertidas en él han de contribuir a la creación de una idea global.

2. Ha de tener cohesión, lo que quiere decir que las diversas secuencias que lo construyen han de estar relacionadas entre sí.

3. Ha de contar con adecuación al destinatario, de forma que utilice un lenguaje comprensible para su lector ideal, pero no necesariamente para todos los lectores (caso de los volcados de núcleo mencionados más arriba) y de forma que, además, ofrezca toda la información necesaria (y el mínimo de información innecesaria) para su lector ideal o destinatario.

4. Ha de contar con una intención comunicativa, es decir, debe querer decir algo a alguien y por tanto hacer uso de estrategias pertinentes para alcanzar eficacia y eficiencia comunicativa.

5. Ha de estar enmarcado en una situación comunicativa, es decir, debe ser enunciado desde un aquí y ahora concreto lo que permite configurar un horizonte de expectativas y un contexto para su comprensión.

6. Ha de entrar en relación con otros textos o géneros para alcanzar sentido y poder ser interpretado conforme a una serie de competencias, presupuestos, marcos de referencia, tipos y géneros, pues ningún texto existe aisladamente de la red de referencias que le sirve para dotarse de significado.

7. Ha de poseer información en grado suficiente para resultar novedoso e interesante pero no exigir tanta que colapse su sentido evitando que el destinatario sea capaz de interpretarlo (por ejemplo por una demanda excesiva de conocimientos previos).

Tipologías textuales

A fin de agrupar y clasificar la enorme diversidad de textos se han propuesto tipologías textuales. Estas se basan en distintos criterios como la función que cumple el texto en relación con los interlocutores o la estructura global interna que presenta.

Se ha hecho muy común dividir los textos por el predominio de características

• Narrativas • Descriptivas y • Argumentativas

1.2. Concepto de hipertexto

En computación, hipertexto es un paradigma en la interfaz del usuario cuyo fin es el de presentar documentos que puedan, según la definición de Ted Nelson, "bifurcarse o ejecutarse cuando sea solicitado" (branch or perform on request). La forma más habitual de hipertexto en documentos es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos. Si el usuario selecciona un hipervínculo, hace que el programa de computador muestre el documento enlazado en un corto período de tiempo. Otra forma de hipertexto es el strechtext que consiste en dos indicadores o aceleradores y una pantalla. El primer indicador permite que lo escrito pueda moverse de arriba hacia abajo en la pantalla. El segundo indicador induce al texto a que cambie de tamaño por grados.


Pág. -9-

El hipertexto es una de las formas de la hipermedia que se enfoca en diseñar, escribir y redactar texto en una media.

Hipertexto como documento con hiperenlaces

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.

1.3. Del texto al hipertexto e hipermedia

Los sistemas de comunicación interactivos por red se basan en un lenguaje y en unas tecnologías que transforman radicalmente la manera como se estructura y se adquiere la información. Y lo que es más importante: ponen al alcance del individuo la posibilidad de generar y conectar significados culturales.

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.

Los diseños hipermediáticos responden a un paradigma o modelo de estructuración de la información no lineal. Nos encontramos, por tanto, con una manera de organizar y transmitir el conocimiento antitética a las formas clásicas de estructurar y narrar. En


Pág. -10-

estos sistemas, el usuario accede selectivamente a conjuntos de información que pueden representarse en múltiples materias expresivas interconectadas.

Las principales ventajas de los modelos no lineales en los procesos de estructuración de conocimiento se podrían resumir mediante las siguientes constataciones:

• La pluralidad de conexiones de un hipermedia aumenta las posibles interacciones entre los componentes que lo forman. Paralelamente a esta integración, se produce un efecto contrario de aislamiento que ofrece a los fragmentos una autonomía sustentada en no tener que depender de un "antes" y de un "después". En relación a la segunda constatación, Barthes postula en S/Z "un texto que se ha de separar en bloques de significado, que antes quedaban despreciados por un proceso de lectura que se limitaba a recorrer la superficie textual, imperceptiblemente soldada por el movimiento de las frases, el discurso fluido de la narración y la naturalidad del lenguaje convencional".

• Tienen la capacidad de describir fenómenos producidos en escalas de espacio y de tiempo heterogéneas. A diferencia de la narrativa lineal, el usuario los puede integrar de una manera mucho más intuitiva en el proceso de interpretación

• Su estructura es materia significante por sí misma. Así, por ejemplo, puede proporcionar información de relaciones semánticas, causales, espaciales o temporales entre los elementos que la forman.

• La estructura y las relaciones que se establecen a partir de la lógica hipermediática se aproximan a la manera en que se organizan e interconectan las neuronas humanas para desarrollar procesos cognitivos.

La ficción no lineal, de la cual uno de los ejemplos más destacados es Aftermoon (1987), de Michael Joyce, es, actualmente, uno de los ámbitos menos explorados. Aquellos que critican a ultranza los productos culturales no lineales afirman que el hipermedia no puede asumir todas las características expresivas del discurso convencional.

El cine de Alfred Hitchcock, en este sentido, supone un buen ejemplo de la importancia de la enunciación, que, en su filmografía, determina decisivamente el valor emocional, el nivel de intriga, de la historia. Así, en una secuencia de Marnie (1964), el espectador se angustia al ver a una persona revolviendo los cajones de una habitación -identificándose con el peligro que corre- porque antes ha visto como el propietario comenzaba a subir las escaleras. Si la secuencia se hubiera montado al revés, sólo habría transmitido una sensación de sorpresa.

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. -11-

estructuración final, la conjunción del hipermedia y las redes interactivas la interconectan y la integran con otros documentos, que la convierten en una fuente apta para ser contrastada y ampliada inteligentemente por quien la consume.

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.

Los productos culturales convencionales se basan en la utilización de determinadas materias expresivas. Tradicionalmente, la base expresiva de la poesía ha sido el texto verbal, mientras que el cine se ha valido del audiovisual. Ahora bien, el hipermedia, al poder integrar e interconectar experiencias comunicativas que se basan en múltiples materias expresivas, desdibuja todavía más la unicidad del producto cultural, ampliando, a la vez, la relación entre las capacidades perceptivas y cognoscitivas del ser humano.

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.

Las experiencias comunicativas basadas en el hipermedia, además, pueden implementarse con la aplicación de interficies inmersivas, desarrollándose entornos virtuales que integren hipersensorialmente la información. A partir de la combinación del hipermedia y las tecnologías de la realidad virtual, el usuario podrá disponer de la potencialidad de integrar informaciones pertenecientes a espacios y tiempos heterogéneos en un entorno configurado por un único espacio, el generado virtualmente, y un sólo tiempo, el de la interacción.

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.

La mayoría de productos culturales incluyen nociones de propiedad y unicidad del creador que el hipermedia hace insostenibles. Las decisiones que toma el usuario durante el consumo no lineal de informaciones hipermediáticas por red determinan la adquisición de un conjunto de conocimientos que no habían sido integrados previamente por otra persona y que, probablemente, no volverán a manifestarse del mismo modo. La forma y el contenido de la información dependerá de las


Pág. -12-

características del sistema, de la competencia del usuario (creativa, integrativa, tecnológica y cultural) y de las interconexiones efectuadas.

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.

El usuario de un sistema multimediático o hipermediático puede realizar tres tipos de aportaciones en relación a la construcción particular y colectiva del 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.

Por orto lado, si el soporte es abierto y el producto comunicativo lo permite, puede aportar conjuntamente con otros usuarios informaciones susceptibles de ser incluidas en la obra. En este caso, el usuario-escritor (Lévi-Strauss le llama bricoleur) puede generar, por ejemplo, desde determinadas criticas relacionadas con el texto hasta material inédito a la obra.

Por último, tiene la capacidad de constituirse en instancia emisora, regulando los aspectos informativos, estructurales e interactivos de su obra. Un ejemplo del último caso son las páginas personales que pueden crearse en Internet, mediante la World Wide Web.


Pág. -13-

1.4. Ejercicios de autoevaluación

1.1 ¿Cuáles son los pasos para extraer de un texto una idea esencial?

a) Leer atentamente, identificar núcleos, identificar la información adicional, relacionar esos núcleos a través de una oración compleja unida por uno o varios conectores.

b) Leer atentamente, identificar núcleos, relacionar esos núcleos a través de una oración compleja unida por uno o varios conectores, identificar la información adicional.

c) Identificar núcleos, relacionar esos núcleos a través de una oración compleja unida por uno o varios conectores, identificar la información adicional, leer atentamente.

d) Leer atentamente, identificar núcleos, identificar la información adicional.

1.2 Señale la respuesta incorrecta respecto a textos monologales y dialogales:

a) MONOLOGAL: Oral: Una declamación, un discurso político. b) MONOLOGAL: Escrita: Una carta de solicitud, una novela. c) DIALOGAL: Oral: Una conversación en un bar. d) DIALOGAL: Escrita: Un informe electrónico en comité organizativo

1.3 ¿Qué característica del texto es incorrecta?

a) Coherencia b) Cohesión c) Intención comunicativa d) Debe existir aislado de la red de referencias

1.4 Marque la respuesta incorrecta

a) Un hipertexto consta de los siguientes elementos: nodos o secciones, enlaces o hipervínculos y anclajes.

b) Los nodos son las partes del hipertexto que contienen información accesible para el usuario.

c) 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.

d) Los enlaces son los puntos de activación de los anclajes.


Pág. -14-

1.5 Respecto a las principales ventajas de los modelos no lineales en los procesos de estructuración de conocimiento, es incorrecto:

a) La pluralidad de conexiones de un hipermedia aumenta las posibles interacciones entre los componentes que lo forman.

b) Tienen la capacidad de describir fenómenos producidos en escalas de espacio y de tiempo heterogéneas.

c) Su estructura es materia significante por sí misma. d) La estructura y las relaciones que se establecen a partir de la lógica

hipermediática se aproximan a la manera en que se organizan e interconectan las neuronas humanas para desarrollar procesos cognitivos.


Pág. -15-

2. Descripción de las dos formas de representar gráficos en formato digital

Existen dos formas de representar gráficos en formato digital, el formato raster o mapa de bits y el formato vectorial.

2.1. El formato raster o mapa de bits

La imagen raster, imagen digital o mapa de bits es un archivo o estructura representando generalmente una rejilla rectangular de píxeles, o puntos de color en un monitor de un ordenador, papel u otro medio de salida.

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.

Ejemplos de mapas de bits

Imagen 2. La cara sonriente en la esquina superior izquierda es un mapa de bits. Cuando aumentamos esta imagen aparece la gran cara sonriente a la derecha. Cada cuadrado representa un píxel. Aumentando en mayor grado vemos tres píxeles cuyos colores están construidos añadiendo los valores de rojo, verde y azul.


Pág. -16-

Imagen 3. Imagen ampliada mostrando el tamaño original en la esquina superior derecha.

Colores

El color de cada píxel esta definido individualmente; imágenes en el espacio de colores RGB, por ejemplo, consisten de píxeles coloreados por tres bytes. Un byte para el rojo, otro para el verde y otro para el azul. Veamos en mayor profundidad el espacio de colores RGB

Modelo de colores RGB

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)

Imagen 4. Representación de la mezcla aditiva de los tres colores.


Pág. -17-

Una aplicación común del modelo RGB es la muestra de estos colores en tubos de rayos catódicos, cristal líquido o plasma como una televisión o monitor de un ordenador. Cada píxel en una pantalla puede ser representado en el ordenador o hardware como valores de rojo, verde y azul. Estos valores pueden ser convertidos en intensidades los cuales pueden ser utilizados para mostrar.

El hardware actual usa hasta 24 bits de información para cada píxel.

Imagen 5. Una imagen dividida en sus colores RGB

Representación del modelo RGB

La representación numérica del modelo RGB puede ser descrita indicando cuando de color rojo, verde y azul es incluido. Cada uno puede variar desde el mínimo (no color) y su máximo (intensidad completa). Si todos los colores están al mínimo el resultado es negro.


Pág. -18-

Si todos los colores están al máximo el resultado es blanco.

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. -19-

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. -20-

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.

Codificación y resolución (Encoding)

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. -21-

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.

Formatos más comunes

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

GIF (Graphics Interchange Format) es un formato gráfico utilizado ampliamente en la World Wide Web, tanto para imágenes como para animaciones.

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. -22-

colores mostrados para adaptarla a este formato, y por lo tanto existiría una pérdida de calidad.

Sus principales características son:

• Profundidad de color: 8 bits máximo (256 colores simultáneos) o Uso de color indexado, a través de una paleta de colores que puede ser

de distintos tamaños, dependiendo del valor del Size of Local Color Table, que tiene un tamaño de 3 bits. El número de colores se puede calcular mediante la fórmula: 2(Size of Local Color Table+1) Esto permite a GIF usar una paleta de 2,4,8,16,32,64,128 ó 256 colores.

o Aunque con mediante el uso de varias capas transparentes (con un máximo de 256 colores en cada una) separadas por 0 milisegundos (simultáneas) entre ellas, si pueden mostrarse imágenes con más de 24 colores diferentes [1] y [2], permitiendo mostrar un color real. Pese a esto, esta última técnica es poco eficiente, y rara vez se usa, y cuando se hace es sobre todo para demostrar esta posibilidad, a veces, estas imágenes no aparecen simultáneamente sino que va apareciendo cada una de las capas sucesivamente. En este caso, cada capa sería un cuadrado de 16 por 16, en el que como mucho se podrían mostrar 256 colores, la imagen se divide en dichos recuadros, y se van superponiendo uno sobre otro.

• Permite transparencia de 1 bit, de tal forma que cada pixel de la imagen puede ser o no transparente. Esto lo diferencia de formatos como el PNG, que también dispone transparencia variable.

• Sus últimas versiones permiten hacer animaciones simples, aunque la compresión es muy deficiente.

• Permite utilizar entrelazado en imágenes, de tal forma que las imágenes se visualicen al completo nada más empezar su descarga, pero con una baja definición que va progresando hasta cargarse por completo en los navegadores.

PNG

PNG (Portable Network Graphics) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de color y otros importantes datos.

Las imágenes PNG usan la extensión (.png) y han obtenido un tipo MIME (image/png) aprobado el 14 de octubre de 1996.

Sus principales características son:

• El PNG admite, al igual que el GIF, imágenes indexadas con transparencia de 1 bit o "binaria". Este tipo de transparencia no requiere de un canal adicional y únicamente admite que un color de la paleta aparezca transparente al 100%.

• En la mayoría de los casos, PNG comprime mejor que el formato GIF, aunque algunas implementaciones (véase Photoshop) realizan una mala selección de los métodos de filtrado y se generan ficheros de mayor tamaño.


Pág. -23-

• El PNG admite formatos con una profundidad de color de millones de colores (color verdadero) y canal alfa, lo que proporciona unos rangos de color mucho más ricos y precisos que el GIF y disponer de valores de transparencia intermedios. Desafortunadamente, esto permite que se compare erróneamente PNGs de color verdadero con un GIF de color indexado (256 colores)

• GIF soporta animación y PNG no. (ver sección de animación, arriba)

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:

• Internet Explorer 6 no soporta PNGs transparentes. Habría que matizar un punto. Internet Explorer 6 e inferiores admiten transparencias binarias como en el GIF, pero fallan al mostrar imágenes con canal alfa. Eso se debe a que el paquete que especifica el canal alfa es opcional (tRNS) según la especificación PNG, sin embargo Internet Explorer 7 si los soporta.

• Las imágenes en PNG pesan más que los GIF. De nuevo, no es cierto. Esta falsa creencia es debido a que se compara con PNGs mal codificados o de 32 bits con GIFs de 256 colores.

JPG

JPEG (Joint Photographic Experts Group) es un algoritmo diseñado para comprimir imágenes con 24 bits de profundidad o en escala de grises. JPEG es también el formato de fichero que utiliza este algoritmo para comprimir imágenes. JPEG sólo trata imágenes fijas, pero existe un estándar relacionado llamado MPEG para videos. El formato de archivos JPEG se abrevia frecuentemente JPG debido a que algunos sistemas operativos sólo aceptan tres letras de extensión.

JPEG es un algoritmo de compresión con pérdida. Esto significa que al descomprimir la imagen no obtenemos exactamente la misma imagen que teníamos antes de la compresión.

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. -24-

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.

JPEG/JFIF es el formato más utilizado para almacenar y transmitir archivos de fotos en la Web. Pero la compresión con pérdida del formato no conviene a diagramas que incluyen textos y líneas.

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

La denominación en inglés "Tagged Image File Format" (formato de archivo de imágenes con etiquetas) se debe a que los ficheros TIFF contienen, además de los datos de la imagen propiamente dicha, "etiquetas" en las que se archiva información sobre las características de la imagen, que sirve para su tratamiento posterior.

Estas etiquetas describen el formato de las imágenes almacenadas, que pueden ser de distinta naturaleza:

• Binarias (blanco y negro), adecuadas para textos, por ejemplo. • Niveles de gris, adecuadas para imágenes de tonos continuos como fotos en

blanco y negro. • Paleta de colores, adecuadas para almacenar diseños gráficos con un número

limitado de colores. • Color real, adecuadas para almacenar imágenes de tono continuo, como fotos en

color.

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. -25-

2.2. El formato vectorial

Los gráficos vectoriales (también conocidos como modelados geométricos o gráficos orientados a objetos) son los que se conforman con primitivas geométricas tales como puntos, líneas, curvas o polígonos, de igual forma, son gráficos que se construyen por ordenador basándose en ecuaciones matemáticas. Se utiliza como antónimo de aquellas imágenes que están configuradas sobre un conjunto de píxeles, que hemos visto en el punto anterior.

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.

Como hemos dicho anteriormente, las imágenes en los gráficos vectoriales no se construyen píxel a píxel, sino que se forman a partir de vectores, objetos formados por una serie de puntos y líneas rectas o curvas definidas matemáticamente.

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. -26-

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.

En cuanto a la resolución, los gráficos vectoriales son independientes de la resolución, ya que no dependen de una retícula de píxeles dada. Por lo tanto, tienen la máxima resolución que permite el formato en que se almacena.

Ventajas y desventajas

Ventajas

• Dependiendo del tipo de imagen, las imágenes vectoriales pueden requerir menor espacio en disco que un bitmap. Las imágenes formadas por colores planos o degradados sencillos son más factibles de ser vectorizadas. A menor información para crear la imagen, menor será el tamaño del archivo. Dos imágenes con dimensiones de presentación distintas pero con la misma información vectorial, ocuparán el mismo espacio en disco.

• No pierden calidad al ser escalados, rotados o deformados. Ciertamente, se puede hacer zoom sobre una imagen vectorial de forma ilimitada. En el caso de las imágenes rasterizadas, llega un momento en el que el zoom revela que la imagen está compuesta por píxeles.

• Los parámetros de los objetos configurados por medio de vectores puedes ser guardados y modificados en el futuro.

• Algunos formatos permiten animación. Está se realiza de forma sencilla mediante operaciones básicas como traslación o rotación y no requiere un gran acopio de datos, ya que lo que se hace es reubicar los nodos base de los vectores en nuevos puntos dentro de los ejes x, y y z en el caso de 3D.

• Es posible un control independiente del color, tanto del contorno como del relleno, admitiendo la aplicación de texturas, degradados, transparencias, etc.

• Se puede controlar con gran precisión la forma, orientación y ordenación de los elementos.

• Cualquier efecto que se aplique a los objetos puede rectificarse en cualquier momento, ya que el dibujo es siempre editable. Esto no ocurre en las imágenes de mapas de bits, en las que una vez pintado un elemento ya no es posible modificarlo.


Pág. -27-

Desventajas

• Los gráficos vectoriales no son aptos para mostrar fotografías o imágenes complejas, aunque algunos formatos admiten una composición mixta (vector + imagen bitmap).

• Los datos que describen el gráfico vectorial deben ser procesados, es decir, el computador debe sumar todos los datos para formar la imagen final. Si hay demasiados datos se puede ralentizar la presentación de la imagen, incluso en imágenes pequeñas.

• Por más que se construya una imagen con gráficos vectoriales su visualización tanto en pantalla, como en la mayoría de sistemas de impresión, en última instancia tiene que hacer una traducción a sistema rasterizado.

Operaciones vectoriales

• Los típicos graficadores vectoriales permiten rotar, mover, reflejar, estirar, inclinar, realizar finas transformaciones de los objetos, cambiar en orden en el eje z (eje que define la dimensión de profundidad en 3D) y combinar objetos primarios para componer objetos más complejos

• 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

Un punto clave en las artes finalizadas vectorialmente es su práctica aplicación en el momento de la impresión ya que es posible escalarlas y aumentar su definición de forma ilimitada. Por ejemplo: se puede tomar el mismo logo vectorizado imprimirlo en una tarjeta personal, y después, agrandarlo e imprimirlo en una valla manteniendo en ambas imágenes el mismo nivel de calidad.

Otro modo de impresión en donde los gráficos vectoriales son importantes es en el proceso del plotter de corte, ya que este, como su nombre lo indica, busca cortar áreas de color diseñadas por el usuario a partir de una archivo digital, estas figuras deben estar construidas a partir de vectores los cuales son interpretados por el plotter como las líneas límite por donde debe pasar la cuchilla que en lugar de dibujar, corta el material.

Formatos más comunes


Pág. -28-

POSTCRIPT

PostScript es un Lenguaje de Descripción de Página (en inglés PDL, Page Description Language), utillizado en muchas impresoras y como formato de transporte de archivos gráficos en talleres de impresión profesional. Está basado en el trabajo realizado por John Gaffney en Evans y Sutherland en 1976. Posteriormente, continuaron el desarrollo 'JaM' ('John and Martin', Martin Newell) en Xerox PARC, y finalmente fue implementado en su forma actual por John Warnock y otros, luego de que él y Chuck Geschke fundaran Adobe Systems Incorporated (también conocido como Adobe) en 1982.

PostScript se diferenció por utilizar un lenguaje de programación completo, en vez de una serie de secuencias de escapes de bajo nivel, para describir una imagen para que sea impresa en una impresora láser o algún otro dispositivo de salida (en esto se parece a Emacs, que explotó un concepto interno parecido con respecto a las tareas de edición). También implementó notablemente la composición de imágenes, que consiste de un conjunto de líneas horizontales, píxeles al vuelo, descripciones por curvas de Bezier y tipografía (fuentes) de alta calidad a baja resolución (e.g. 300 puntos por pulgada). Anteriormente se creía que tipografías de mapa de bits mejoradas manualmente eran requeridas para esta tarea.

PDF

PDF (del inglés Portable Document Format, Formato de Documento Portátil) es un formato de almacenamiento de documentos, desarrollado por la empresa Adobe Systems. Está especialmente ideado para documentos susceptibles de ser impresos, ya que especifica toda la información necesaria para la presentación final del documento, determinando todos los detalles de cómo va a quedar, no requiriéndose procesos anteriores de ajuste ni de maquetación. Cada vez se utiliza más también como especificación de visualización, gracias a la gran calidad de las fuentes utilizadas y a las facilidades que ofrece para el manejo del documento, como búsquedas, hiperenlaces, etc.

Es un formato derivado del formato PostScript visto anteriormente

Características

• Es multiplataforma, es decir, puede ser presentado por los principales sistemas operativos (Windows, Unix/Linux o Mac), sin que se modifiquen ni el aspecto ni la estructura del documento original.

• Puede integrar cualquier combinación de texto, gráficos, imágenes e incluso música.

• Es uno de los formatos más extendidos en Internet para el intercambio de documentos. Por ello es muy utilizado por empresas, gobiernos e instituciones educativas.

• Es una especificación abierta, para la que se han generado herramientas de Software Libre que permiten crear, visualizar o modificar documentos en formato PDF. Un ejemplo es la suite ofimática OpenOffice.org.

• Puede cifrarse para proteger su contenido e incluso firmarlo digitalmente.


Pág. -29-

SVG

Este formato lo veremos en un capítulo entero aparte

SWF

Este formato lo veremos en un capítulo entero aparte


Pág. -30-


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.2. ¿Cuál es la convención genérica de representación de colores en la Web?

a) La representación hexadecimal compacta. b) La representación en tres números de 0 a 255. c) En porcentajes de cada uno de sus componentes. d) En representación de tres números de 0.0 a 1.0.

2.3. ¿Por qué determinar la resolución de una imagen para una impresora puede ser complicado?

a) Porque las impresoras disponen de menos puntos por pulgadas que la imagen que se visualiza en el monitor.

b) Porque algunas impresoras disponen de una cantidad mayor de puntos por pulgadas que las del monitor.

c) Por la profundidad de color que pueda tener la imagen. d) Ninguna de las anteriores es correcta.

2.4. ¿Cuál de estas afirmaciones es incorrecta?

a) El formato GIF solo puede almacenar hasta 256 colores. b) El formato PNG no admite transparencias. c) El formato JPG es indicado para fotografías de alto nivel. d) El formato TIFF dispone de etiquetas de información propia.

2.5. ¿Qué entendemos por RGBA?

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. -31-

3. Problemática de tamaño en las imágenes de mapa de bits

Como hemos visto en el punto anterior. El tamaño de las imágenes raster puede ser muy grande. Debido al tamaño actual de una imagen tipo de 640x480 con una profundidad de color de 24 bpp. podemos llegar a tener que almacenar un archivo de 2,5 Mb.

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.

3.1. Compresión sin pérdidas

Se distingue entre sistemas adaptativos, no adaptativos y semiadaptativos, según tengan en cuenta o no las características del archivo a comprimir.

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. -32-

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:

1. Comenzar con un código vacío 2. Iniciar el recorrido del árbol en la hoja asociada al símbolo 3. Comenzar un recorrido del árbol hacia arriba 4. Cada vez que se suba un nivel, añadir al código la etiqueta de la rama que se ha

recorrido 5. Tras llegar a la raíz, invertir el código 6. El resultado es el código Huffman deseado

Para obtener un símbolo a partir de un código se debe hacer así:

1. Comenzar el recorrido del árbol en la raíz de éste 2. Extraer el primer símbolo del código a descodificar 3. Descender por la rama etiquetada con ese símbolo 4. Volver al paso 2 hasta que se llegue a una hoja, que será el símbolo asociado al

código

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

Un código de tipo Huffman puede aplicarse de modo semiadaptativo, si se analiza primero la cadena de datos a comprimir y se crea una tabla a medida. Se logra mayor compresión, pero introduce dos inconvenientes: la pérdida de velocidad al tener que leer el original dos veces, por un lado, y la necesidad de incrustar en el archivo comprimido el índice de claves, por el otro.


Pág. -33-

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.

Rápido y fiable, se utiliza en formatos universales como el GIF o el TIFF. Aunque no logra relaciones de compresión muy altas, normalmente ahorra un tercio del archivo.


Pág. -34-

Imagen 9 Comportamiento del algoritmo LZ:

# 3 2 significa retroceder tres píxeles y repetir dos;

# 12 7 significa retroceder 12 píxeles y repetir siete.

3.2. Compresión con pérdidas

Dentro de esta categoría es universalmente conocido por su eficacia el formato JPEG, aunque cabe mencionar también el método Fractal, que analiza la imagen dividiéndola en bloques y estableciendo regiones a mayor escala.

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.

La compresión basada en la geometría fractal consigue muy buenas ratios de compresión y, en cierta manera, vectoriza las características de la imagen, de manera que se puede reconstruir la imagen a diferente escala. El principal inconveniente es la lentitud del proceso, debido a la gran cantidad de recursos que exigen los cálculos.

El sistema propuesto por el JPEG (siglas cuyo significado traducido al castellano es el de Grupo de Expertos en Fotografía Reunidos) es una combinación de varias técnicas que crea un archivo JPEG (o JPG) con un nivel de compresión regulable capaz de reducir en algunos casos el peso informático de la imagen a menos del 1%. El proceso estándar consta de cinco pasos:

1. Convertir la imagen a un modo de color que defina la luminancia en un canal, como YCC o LAB. Los bitmaps se pasan a grises, mientras que en las escalas de grises se obvia este paso.


Pág. -35-

Imagen 10 Modelo YCC

Imagen 11. Modelo RGB 2. Dado que ópticamente somos capaces de ver un cambio sutil en la luminosidad mucho antes que en el tono cromático, se iguala el tono en cada grupo de cuatro píxeles, respetando los valores individuales de luz.

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.

3. La imagen se divide en bloques de 8 x 8 píxeles. Para cada subimagen se anota el valor promedio, la amplitud de la oscilación de valores y una descripción frecuencial de esta oscilación mediante una función de tipo Fourier, llamada Transformada Discreta del Coseno (TDC), en la que se combinan varios parámetros de onda. Cuantos más parámetros, mejor correspondencia habrá entre la función y la secuencia de valores; con pocos datos, conservaremos los básicos.


Pág. -36-

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.

4. Los valores TDC se cuantifican a la baja, dividiéndolos por un factor entero. El número de coeficientes de onda y el factor a dividir determinan la profundidad de la compresión, que es lo que decidimos en una escala que, según el programa, va de 1 a 10, de 1 a 12 o de 0 a 100, pero siempre jugando inversamente entre el nivel de compresión y la calidad del resultado.

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.

5. Al resultado se le aplica la codificación estadística de Huffman, compactando las cadenas más repetidas en códigos breves.

La compresión con pérdida deja huellas

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. -37-

A.

B.

C.

A. Imagen original. B. Reverberaciones en los bordes por una excesiva compresión. C.

Detalle de los bloques de 8 x 8 píxeles.

La reverberación la producen las baldosas que coinciden con un borde marcado. Su reconstrucción es mucho más irregular que las de sus vecinas, que coinciden en una zona de menor oscilación y resultan mucho más homogéneas. Así, se producen pinceladas de falso contraste a varios píxeles de distancia de la verdadera silueta.

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. -38-

3.3. Optimización general de imágenes

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.

Como hemos visto anteriormente los algoritmos de compresión de imágenes se clasifican en dos tipos básicos:

1. con pérdida de calidad y 2. sin pérdida de calidad.

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.

Tabla comparativa de formatos de compresión de imágenes

Formato Tipo de compresión Ventajas Desventajas

JPEG Con pérdida (algoritmo JPEG)

• Ficheros muy reducidos

• Muy bueno para fotografías

• Pérdida de calidad notoria a altos niveles de compresión

GIF (algoritmo LZW)

Sin pérdida, aunque limitado a 256 colores

• Permite animaciones

• Paleta limitada (obsoleto para imágenes de muchos colores)

• Potenciales problemas legales (en algunos países en otros ya venció la licencia)

PNG Sin pérdida

• Excelente para gráficos

• Permite transparencias

• Ficheros grandes para imágenes de muchos colores (fotografías, ilustraciones, etc.)

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. -39-

Si la imagen es una fotografía

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

El formato JPEG no es indicado para dibujos Las simplificaciones que hace este algoritmo son desastrosas cuando tiene que vérselas con imágenes detalladas como textos, o con cualquier objeto con bordes definidos. Si ves cosas extrañas, como pelusillas o artefactos en su imagen, o bien la estás comprimiendo demasiado o JPEG no es el formato ideal para tu imagen.

GIF y PNG son casi intercambiables, ya que PNG fue diseñado como reemplazo de GIF. Se recomienda PNG, puesto que es un formato superior, es de uso libre y no tiene la amenaza de posibles problemas legales.

Tanto GIF como PNG tienen la posibilidad de trabajar con varias profundidades de color. En el caso del GIF comprimido, sólo hasta 256 colores en una paleta elegida de entre millones de posibilidades.

No hay que creer que los resultados puedan ser malos malos, sobre todo el gráficos y dibujos lineales, ya que cuando se usan tintas planas el número de colores empleados es muy reducido. En tal caso puedes elegir el número de colores que se ajuste al número de tintas utilizadas. A menos colores, un fichero más pequeño. En general, cualquier dibujo de tinta plana a una resolución de 8 bits (256 colores) debería ocupar bastante poco y, además, verse muy bien.

De arriba a abajo: JPEG suavizado (917 bytes), PNG espacio RGB (874 bytes) y PNG indexado a 8 colores (280 bytes).


Pág. -40-

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.

Recuerda comprobar el tamaño de la imagen en píxeles y reducir la resolución si esta es exagerada (más de 500x500 px2 por ejemplo).

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.

Para obtener la máxima compresión en archivos de formato PNG, existe un programa libre llamado OptiPNG, el cual puede reducir el tamaño de casi cualquier PNG (exceptuando aquellos ya optimizados) sin pérdida de calidad, hasta el límite matemático. OptiPNG se encuentra disponible para Linux y Windows y puede se desacargado de http://optipng.sourceforge.net/ (documentación en inglés).

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.

Sobre la edición de las imágenes para Internet

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.

Si más adelante necesitas cambiar la imagen deberás hacerlo desde el original. Si no guardas el original y haces tus modificaciones sobre la imagen de poco peso preparada para Internet, corres el riesgo de una pérdida de calidad progresiva.

Un clásico ejemplo que ilustra la necesidad de modificar una imagen en 24 bits de profundidad es el cambio de tamaño. Si intentas hacer más pequeña una imagen con una profundidad de 8 bits (256 colores), ésta se verá muy pixelada y se notará una grave pérdida de calidad.

Por el contrario, si usas la imagen original en 24 bits para cambiar el tamaño y posteriormente se guarda en el formato de 8 bits (256 colores), no existirá ninguna pérdida, obteniendo así una imagen más nítida y mucho menos pixelada.

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. -41-

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

• Edita la imagen con un editor de imágenes. • Redimensiona la imagen al tamaño al que va a ser visualizada en el artículo.

Actualmente esto es opcional y de hecho se recomienda que la imagen tenga toda la calidad que sea posible.

• Grábala con un nombre de fichero descriptivo. • Si es una foto o un dibujo con mucho detalle y colores prueba con el formato

JPEG. Guárdala con varios factores de compresión (entre 30 y 70%). Desecha las que tengan una calidad muy deficiente. Escoge la que menos pese del resto.

• Si es un dibujo, no uses el formato GIF, grabarlo con el formato PNG. Se puede probar como en el caso anterior con varios factores de compresión y ajusta la paleta si el dibujo tiene un número de tintas planas reducido. También se puede utilizar el programa optimizador que se recomienda más arriba.

• Comparar el peso en formato PNG y JPEG. Elige el PNG si pesa menos o solo un poco más que el JPEG.

Reducción de colores (dithering)

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. -42-

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.

Este sistema de optimización por reducción de colores es utilizado por ejemplo en el formato GIF.

3.4. Optimización de imágenes para la web (II)

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.

• Tamaño, en píxeles: Siempre que en este manual hablemos únicamente de tamaño vamos a referirnos a las dimensiones de la imagen. Las imágenes se forman a partir de puntos de color. Estos puntos se llaman, comúnmente, píxeles. Cuanto más píxeles (puntos) tenga una imagen ésta tendrá mayor resolución, mayor detalle. Esto se comprueba fácilmente haciendo zoom sobre la imagen. En una imagen grande podremos ver muchos detalles aún después de haber ampliado. En una imagen pequeña no sirve de nada ampliar porque solo se ven grandes cuadros que desvirtúan por completo la imagen.


Pág. -43-

Entenderemos que una imagen es:

- Grande cuando tengo un tamaño superior o igual a 1024x768 píxeles (puntos) - Mediana cuando su tamaño oscile entre 320x240 y 1024x768 píxeles (puntos) - Pequeña cuando su tamaño sea inferior a 320x240 píxeles (puntos) - Muy pequeña cuando su tamaño sea inferior a 100x100 píxeles (puntos)

• Peso, en Kbytes: En este manual llamaremos peso al espacio de disco o memoria que necesitamos para almacenar una imagen. Así, entenderemos que una imagen es: - Pesada cuando su peso sea superior o igual a 1 Mbyte (1.024Kbytes) - Peso mediano cuando su peso oscile entre 300Kbytes y 1 Mbyte (1.024Kbytes) - Ligera cuando su peso sea inferior a 300Kbytes - Muy ligera cuando su peso sea inferior a 100Kbytes

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.

Paletas de colores e imágenes artificiales

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. -44-

Optimizando imágenes con Adobe Photoshop

Adobe Photoshop cuenta con una herramienta específica para la optimización de imágenes destinadas a ser publicadas en páginas web que es simplemente perfecta para lograr los objetivos planteados en este manual. Para acceder a ella debes ir a Archivo -> Guardar para Web

1. Formato de archivo: Esta primera opción es fundamental, ya que nos permite elegir el formato de archivo en que vamos a grabar nuestra imagen. Los formatos destinados a imágenes artificiales almacenan un máximo de 256 colores (8 bits) pero permiten optimizar la paleta de colores, mientras que los formatos destinados a imágenes reales usan profundidades de color de 16,7 millones de colores (24 bits) pero incluyen métodos de compresión de calidad variable.


Pág. -45-

o Si vamos a archivar una imagen artificial debemos elegir el formato PNG-8 o GIF

o Si vamos a archivar una imagen real debemos elegir el formato JPEG

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.

- Colores: En la parte superior nos encontramos con una casilla llamada Colores que nos permite elegir uno de estos valores: 2, 4, 8, 16, 32, 64, 128 ó 256. Con esta opción limitamos el número máximo de colores que tendrá la imagen. Lógicamente si elegimos una cantidad inferior a los colores que posee la imagen perderemos calidad porque habrá que sustituir los colores originales por colores similares. Cuando elegimos un número de colores superior al que tiene la imagen pueden pasar dos cosas: - Si elegimos el formato GIF deberemos ajustar de forma manual la cantidad de colores al número de colores diferentes presentes en la imagen. De no hacelo aumentaremos innecesariamente el peso del archivo. - Si elegimos el formato PNG-8 deberemos elegir siempre 256 colores porque este formato usa, de forma automática, únicamente el número de colores diferentes presentes en la imagen. - Tabla de colores: Nos muestra, de forma visual, todos los colores diferentes presentes en la imagen - Tipo de paleta: En la parte inferior derecha nos encontramos con esta útil información que nos indica el número de colores diferentes presentes en la imagen y el tipo de paleta que estamos usando. Esta información es esencial para poder ajustar correctamente el parámetro Colores cuando trabajamos en formato GIF. Si se usa en formato PNG-8 esta casilla es meramente informativa.


Pág. -46-

4. Formato, peso y tiempo de descarga: Aquí se verá en todo momento el formato de archivo que has elegido, el peso final que tendrá la imagen y el tiempo que tardaría en descargar en una conexión lenta de 28,8 Kbit/s. Un poco más arriba de la zona marcada como 1 hay una pequeña flechita negra orientada hacia la derecha. Si pinchas en ella podrá seleccionar otros tipos de conexiones para comprobar cuanto tardaría en descargar con cada una de ellas

5. Tamaño de visualización: Por defecto aparece siempre al 100% mostrando por tanto el tamaño real de la imagen. Como norma general si la imagen no se puede mostrar al completo con la visualización del 100% muy seguramente nuestra imagen es demasiado grande para subirla a Internet y nos convendría reducirle tamaño. Podemos reducir el tamaño de una imagen de forma rápida y sencilla mediante la pestaña Tamaño de imagen.

- Tamaño original: Aquí veremos el tamaño original de nuestra imagen. En el ejemplo vemos que la imagen con la que estoy trabajando es exageradamente grande para subirla a Internet (1.728x1152)

- Tamaño nuevo: Aquí indicaremos de forma manual qué tamaño queremos que tenga finalmente el archivo de imagen. Si tenemos pinchada la casilla Restringir proporciones nos aseguraremos de no mantener las proporciones cuando reescalamos De no haber tenido pinchada "Mantener proporciones" la altura habría seguido siendo de 1.152 píxeles.

- Porcentaje: También podemos reescalar la imagen usando un porcentaje en lugar de un dato numérico. En este caso la imagen final tendrá un tamaño del 18,52% con respecto a la original. Este dato ha aparecido de forma automática. Si cambio el porcentaje de forma manual entonces el nuevo tamaño cambiará también de forma automática.

- Calidad: La opción por defecto es Bicúbica. Da muy buenos resultados. - Aplicar: Cuando lo tengas todo listo pincha aquí para que los cambios se hagan

efectivos

6. Compresión JPEG: La imagen que contiene las zonas marcadas al comienzo de este apartado se corresponde con el formato PNG-8. Cuando elegimos JPEG como formato de archivo desaparecen algunas opciones, como la tabla de colores, y aparecen otras específicas del JPEG que veremos a continuación:


Pág. -47-

- Formato de archivo: Para ver estas opciones es necesario que esté seleccionado el formato JPEG

- Tipo de compresión: Aquí encontramos unos ajustes preestablecidos de calidad.

- Progresivo: Tiene la misma función que el entrelazado. - Calidad: Esta es sin duda, la opción más importante de todo el

cuadro de diálogo. Aquí definimos la degradación de calidad que tendrá la imagen. Valores más pequeños darán como resultado imágenes de menor peso pero, lógicamente, también de menor calidad. El consejo es experimentar con diferentes valores para encontrar el valor con el que, reduciendo al máximo el peso final del archivo, la calidad no se vea afectada en exceso. Mientras se experimenta con estos valores suele ser de bastante utilidad fijarse en la información de formato, peso y tiempo de descarga. Ahí podremos comprobar si la pérdida de calidad que sufre la imagen merece o no la pena.

3.5. Aplicaciones para optimizar el tamaño de imágenes

Destacamos las siguientes aplicaciones para optimizar el tamaño de las imágenes:

• PNGOUT es un programa gratuito que convierte archivos PNG, GIF, BMP y JPG en archivos PNG con un tamaño optimizado en la mayoría de los casos. Existen muy contadas ocasiones en las que el archivo resultante tiene una perdida de calidad apreciable o un tamaño algo superior al original (esto suele ocurrir cuando el archivo original ya estaba optimizado).

• GIFCruncher optimiza archivos GIF devolviendo varios archivos con reducciones paulatinas del número de colores que forma la imagen, pudiendo escoger al final la opción que mejor satisfaga la relación calidad-tamaño.

• JPEGCruncher convierte archivos BMP, JPEG, TIF, GIF y PICT en archivos JPEG optimizados, devolviendo como en el caso anterior diferentes opciones para escoger entre la mejor calidad-tamaño.


Pág. -48-


3.1. El algoritmo Huffman está dentro de:

a) Los sistemas adaptativos. b) Los sistemas semiadaptativos. c) Los sistemas no adaptativos. d) Los sistemas acoplados.

3.2. El algoritmo LZW

a) Se utiliza en el formato JPG. b) Tiene mayor compresión que Huffman. c) Solo necesita leer el archivo fuente una única vez. d) Es el único utilizado en el formato TIFF.

3.3. La tecnología Wavelet se utiliza

a) En el formato JPG. b) En el formato EZW. c) En el formato MrSID . d) En el formato JPEG 2000.

3.4. Diga cual de los siguientes enunciados es falso

a) JPEG utiliza un sistema de compresión con pérdida. b) GIF utiliza un sistema de compresión sin pérdida pero limitado a 8bpp de

profundidad de color. c) PNG es un formato que utiliza un sistema de compresión sin pérdida. d) PNG es un formato con problemas legales de libre distribución.

3.5 Respecto a Dithering

a) Es un algoritmo de compresión sin pérdida b) Es un algoritmo de compresión con pérdida c) Es un sistema de disminución de colores de la imagen d) Es un sistema de cambio de tamaño de resolución de la imagen


Pág. -49-

4. Gráficos vectoriales escalables (Especificación SVG)

En este capítulo vamos a entrar en profundidad en uno de los formatos vectoriales que están emergiendo ahora mismo.

Scalable Vector Graphics (SVG) es un lenguaje de marcado en XML para describir gráficos vectoriales de dos dimensiones, tanto estáticos como animados. Las imágenes pueden contener hiperenlaces usando XLinks simple de salida. Es un estándar abierto creado por el consorcio del World Wide Web.

SVG permite tres tipos de objetos gráficos:

• Formas (p.e. trayectorias que consisten en líneas rectas y curvas, y áreas limitadas por ellas)

• Imágenes raster o digitales. • Texto

Los objetos gráficos se pueden agrupar, transformar y componer en objetos previamente renderizados. El texto puede estar en cualquier namespace de XML conveniente al uso, que realiza búsquedas y accesibilidad de los gráficos de SVG. El conjunto de características incluye transformaciones jerarquizadas, trayectorias que acortan, máscaras alfa, efectos del filtro, objetos de plantilla y extensibilidad.

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. -50-

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

Ser escalable significa aumentar o de disminuir uniformemente. En términos de gráficos, escalable es que no son limitados a un solo, fijo, tamaño del píxel. En el Web, escalable es que una tecnología particular puede ser una gran cantidad de archivos, una gran cantidad de usuarios, una variedad amplia de usos. SVG, siendo una tecnología de los gráficos para el Web, es escalable en ambos sentidos de la palabra.

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

La mayoría de las gramáticas existentes de XML representan cualquier información textual, o representan informaciones en bruto tales como información financiera. Proporcionan típicamente solamente las capacidades gráficas rudimentarias, a menudo menos capaces que el elemento del “img” del HTML. SVG llena un hueco en el


Pág. -51-

mercado proporcionando una descripción rica y estructurada de gráficos de vector y vector con raster; puede ser independiente usado, o como namespace de XML con otras gramáticas.

XML

XML, una recomendación de W3C para el intercambio de información estructurado, ha llegado a ser extremadamente popular y se pone en ejecución extensamente y confiablemente. Por ser escrito en XML, estructuras de SVG en esta fundación y aumentos fuertes muchas ventajas tales como una base sana para la internacionalización, capacidad de estructuración de gran alcance, un modelo del objeto, y así sucesivamente. Las gramáticas basadas en XML están abiertas a la puesta en práctica sin un esfuerzo de ingeniería reversa enorme.

Namespace

Es ciertamente útil tener un independiente y único visualizador de SVG. Pero SVG también se piensa para ser utilizado como un componente en un uso de múltiples namespace XML. Esto multiplica la energía de cada uno de los namespaces usados, para permitir que el nuevo contenido innovador sea creado. Por ejemplo, los gráficos de SVG se pueden incluir en un documento que utilice cualquier namespace centrado en el texto de XML - incluyendo XHTML. Un documento científico, por ejemplo, puede también utilizar MathML para las matemáticas en el documento. La combinación de SVG y de SMIL conduce a interesar, tiempo basado, las presentaciones gráficamente ricas.

SVG es un componente bueno, de uso general para cualquier gramática multi-namespace que necesite utilizar gráficos.

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.

La combinación de scripting, de DOM y del CSS se llama “HTML dinámico” y es a menudo ampliamente utilizada para la animación, la interactividad y los efectos de interfaz.

Conceptos importantes de SVG

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. -52-

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

El material gráficamente rico es a menudo altamente dependiente en la fuente particular usada y el espaciamiento exacto de los glyphs. En muchos casos, los diseñadores convierten el texto a los contornos para evitar cualquier problema de la substitución de la fuente. Esto significa que el texto original no está presente y así el poder ser buscado y la accesibilidad sufren. En respuesta a la regeneración de diseñadores, SVG incluye elementos de la fuente para preservar texto y el aspecto gráfico.

Animación

La animación se puede producir vía la manipulación escritura-basada del documento, pero las escrituras son difíciles de corregir y el intercambio entre ser autor de las herramientas es más duro. Otra vez en respuesta a la regeneración de la comunidad del diseño, SVG incluye los elementos declarativos de la animación que fueron diseñados de colaboración por los grupos de trabajo de SVG y de SYMM. Esto permite que los efectos animados comunes en gráficos existentes del Web sean expresados en SVG.


Pág. -53-

Opciones para usar SVG en páginas Web

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:

• Una página Web independiente de SVG En este caso, un documento de SVG (es decir, un recurso del Web que tipo del MIME es la “imagen/svg+xml”) se carga directamente en un agente del usuario tal como un web browser. El documento de SVG es la página Web que se presenta al usuario.

• El encajar por referencia En este caso, la página Web del padre se refiere a un documento por separado almacenado de SVG y especifica que el documento dado de SVG se debe encajar como componente de la página Web del padre. Para el HTML o XHTML, aquí están tres opciones:

o El elemento del “img” de HTML/XHTML es el método más común para usar gráficos en páginas del HTML. Para una exhibición más rápida, la anchura y la altura de la imagen se pueden dar como cualidades. Un atributo que se requiere que es alt, usado para dar una secuencia textual alterna para la gente que hojea con imágenes apagado, o que no puede considerar las imágenes. La secuencia no puede contener ningún margen de beneficio. Un atributo longdesc te deja señalar a una descripción más larga - a menudo en el HTML - que puede tener margen de beneficio y formato más rico.

o El elemento del “objeto” de HTML/XHTML puede contener otros elementos jerarquizados dentro de él, al contrario que “img”, que es vacío. Esto significa que varios diversos formatos se pueden ofrecer, usando elementos jerarquizados del “objeto”, con un alternativa textual final (margen de beneficio incluyendo, acoplamientos, etc). El elemento exterior que puede ser exhibido será utilizado.

o El elemento del “applet” de HTML/XHTML que puede invocar un Java applet Para ver el contenido de SVG dentro de la página Web dada. Estos applet pueden hacer muchas cosas, pero una tarea común es utilizarlas a las imágenes de exhibición, particularmente unas en formatos inusuales o que necesitan ser presentadas bajo control de un programa por una cierta otra razón.

• El encajar en línea En este caso, el contenido de SVG se encaja en línea directamente dentro de la página Web del padre. Un ejemplo es una página Web de XHTML con un fragmento del documento de SVG incluido textual dentro del XHTML.

• Acoplamiento externo, usando el elemento del HTML “a” Esto permite que utilicen a cualquier espectador independiente de SVG, que pueda (pero no necesitar) sea un diverso programa a ése usado para exhibir el HTML. Esta opción se utiliza típicamente para los formatos inusuales de la imagen.

• Referido de una característica de CSS2 o de XSL Cuando un agente del usuario apoya el contenido CSS de XML o formato de XSL se opone y el agente del usuario es un espectador de SVG que se conforma, entonces ese agente del usuario debe apoyar la capacidad de referirse a recursos de SVG dondequiera que las características del CSS o de XSL permitan referirse


Pág. -54-

de las imágenes raster, incluyendo la capacidad de poner gráficos de SVG dondequiera que sea necesario y la capacidad de mostrar el SVG en el fondo si tiene porciones transparentes.

SVG soporta características avanzadas como:

-Transformación anidadas (matrices de transformación). -Clipping Paths. -Alpha Masks. -Filtros gráficos. -Interactividad y dinamismo, soportados tanto de forma declarativa como vía scripting.

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).

Gracias a la estandarización de los elementos en SVG y su integración con XHTML, podemos tener conviviendo scripts dentro de XHTML y SVG dentro del mismo documento.

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.

Espacio de nombre utilizado por SVG:

http://www.w3.org/2000/svg DOCTYPE para la versión 1.0:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd "> DOCTYPE para la versión 1.1:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd ">

4.2. Beneficios de utilizar SVG

Veamos, a continuación, los beneficios de utilizar SVG. 1. Renderizado con antialiasing. 2. Patrones de relleno y gradientes. 3. Filtros y efectos avanzados. 4. Clipping. 5. Animaciones. 6. No pierde calidad si se hace zoom o si se redimensiona. 7. Puede escalarse.


Pág. -55-

8. Ideal para ser impreso. 10. Pueden mostrase de forma progresiva (igual que los GIF), no teniendo que esperar a que todo el documento sea descargado. 11. Pueden distribuirse en formato comprimido GZIP para la reducción del tiempo de descarga .SVGZ. 12. Pueden ser indexados y buscados debido a que su contenido es XML y es textual. 13. Pueden ser transformados por hojas de estilos (XSL o CSS). 14. Integración con otras tecnologías XML del W3 y compatible con:

-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

4.3. Estructura básica de un documento

Veamos la estructura que puede tener un documento SVG:

<?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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww.w3.org/TR/xhtml1/xhtml1-transitional.dtd"> <html> <body> <embed src="http://a.com/b.svg " width="210" height="26" type="image/svg+xml" /> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww.w3.org/TR/xhtml1/xhtml1-transitional.dtd"> <html> <body> <object type="image/svg+xml" data="layout02.svgz" width="550" height="550">


Pág. -56-

<a href="layout02.svgz"> <img alt="layout02" src="layout02.png"/> </a> </object> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww.w3.org/TR/xhtml1/xhtml1-transitional.dtd"> <html> <body> <object type="image/svg+xml" data="layout02.svgz" width="550" height="550"> <embed src="http://a.com/b.svg " width="210" height="26" type="image/svg+xml" /> </object> </body> </html> SVG: Definición del sistema de coordenadas.- En SVG el área de dibujo es infinita. A continuación veremos varias formas de decirle al visor de SVG en qué área estamos interesados. El área utilizada por el documento creado se conoce como Viewport. Podemos establecer el tamaño del Viewport utilizando los atributos "width" y "height" del elemento <SVG>.

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.).

El origen de coordenadas comienza en la esquina superior izquierda, incrementándose la coordenada X hacia la derecha y la Y hacia abajo. El punto (0, 0) se conoce como origen de coordenadas.

4.4. Geometría

Veamos cómo podemos utilizar el SVG para hacer formas geométricas. Rectángulo.- <svg xmlns="http://www.w3.org/2000/svg " width="200px" height="200px"> <rect x="25" y="25" width="100" height="100" fill="blue" opacity="0.5" /> <rect x="50" y="50" rx="20" ry="20" width="100" height="100" fill="red" opacity="0.5" /> <rect x="75" y="75" width="100" height="100" fill="green"


Pág. -57-

opacity="0.5" /> </svg>

"x" e "y". Desplazamiento del objeto respecto al origen de coordenadas. "width" y "height". Ancho y alto del objeto. "rx" y "ry". Redondean las esquinas del objeto. El resto de atributos añaden propiedades sobre el estilo de la visualización.

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. -58-

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.- <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="2" /> </svg> "x1" y "y1". Coordenadas del inicio de la línea. "x2" y "y2". Coordenadas del fin de la 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. -59-

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.- <svg xmlns="http://www.w3.org/2000/svg " width="150" height="200"> <polygon points="100,0,50,174,0,128,0,0" style="stroke:none; stroke-width:1; stroke-opacity:1; fill:#d5fbfd; fill-opacity:1" /> </svg>


Pág. -60-

Texto.- <svg xmlns="http://www.w3.org/2000/svg " width="150" height="200"> <text style="font-size: 72; font-weight: 900; fill: yellow; stroke: black; stroke-width: 0.6"> <tspan x="10" y="100">Texto en SVG</tspan> </text> </svg>

También existe la posibilidad de introducir elementos definidos en otros espacios de nombres como es XHTML. Así, podemos insertar pedazos de XHTML dentro del documento SVG. Este ejemplo no funciona con el plugin de Adobe, para visualizarlo utilizar el Mozilla.

<foreignObject x="82" y="100" width="40px" height="10px" requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML "> <html xmlns="http://www.w3.org/1999/xhtml "> <span class="forobjpts">(100,100)</span> </html> </foreignObject> Caminos.- Definición de un conjunto de líneas de forma encadenada y con diferentes formas.

Comandos disponibles para definir caminos:

M. Permite moverse a un punto determinado sin pintar ninguna línea.


Pág. -61-

L. Creación de una línea hasta la coordenada indicada.

H. Creación de una línea horizontal hasta la coordenada indicada.

V. Creación de una línea vertical hasta la coordenada indicada.

C. Creación de una línea curva hasta la coordenada indicada.

S. Creación de una línea curva suave (smooth) hasta la coordenada indicada.

Q. Creación de una línea curva cuadrática de Bezier hasta la coordenada indicada.

T. Creación de una línea curva suave cuadrática de Bezier hasta la coordenada indicada.

A. Creación de una línea elíptica hasta la coordenada indicada.

Z. Cerrar el comino.

Todos estos comandos tienen también su equivalente en minúsculas, de forma que el posicionamiento en este caso se considerará relativo y no absoluto.

<svg xmlns="http://www.w3.org/2000/svg " width="200px" height="200px"> <path d="M10 10 h 100 v 30 h -100 v -30 Z" fill="blue" /> <path d="M10 80 H 110 V 130 H 10 V 80 Z" fill="red" /> <path d="M10 80 C 10 80 60 30 110 80 Z" fill="green" /> </svg>

<path d="M50,100 Q200,0 200,200 100,500 600,200" style="fill:none; stroke:blue; stroke-width:2" />


Pág. -62-

<path d="M 10 10 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc" />

Debido a la complejidad de definir figuras geométricas basadas en caminos, se hace mucho más recomendable el uso de programas gráficos de edición para este menester.

4.5. Elementos disponibles

El elemento SVG es la raíz de todo documento y pude contener el siguiente conjunto de atributos básicos:

-Definiciones de espacios de nombres (xmlns="http://www.w3.org/2000/svg"). -Versión de SVG a la que se refiere el documento (version="1.1"). -Coordenada x a partir de la cual se definirá el documento (x). -Coordenada y a partir de la cual se definirá el documento (Y). -Ancho de la representación gráfica (width). -Alto de la representación gráfica (height).

<svg xmlns="http://www.w3.org/2000/svg " version="1.1" x="10" y="10" width="500px" height="400px"> ... </svg> 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.

<svg xmlns="http://www.w3.org/2000/svg " version="1.1" width="500" height="400"> <g opacity="0.2"> <rect x="100" y="100" width="100" height="100" fill="red" /> <rect x="150" y="150" width="100" height="100" fill="blue" /> </g> <rect x="200" y="200" width="100" height="100" fill="navy" /> </svg>


Pág. -63-

Referencias dentro de SVG.- Las referencias dentro de SVG permiten la reutilización de distintas definiciones de objetos en cualquier punto del documento. Así, podemos definir filtros u otras propiedades de ajuste gráfico de forma general dentro del documento y aplicarlas dinámicamente vía scripting.

<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:

<svg xmlns:xlink="http://www.w3.org/1999/xlink "> <image xlink:href="foo.gif" /> </svg> 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 "

DEFS.- Sección de declaración de los elementos que posteriormente podrán ser referenciados dentro del documento. La forma de referenciar los elementos declarados está descrita en el apartado anterior (Referencias dentro de SVG).

<svg width="8cm" height="3cm" xmlns="http://www.w3.org/2000/svg "> <defs> <linearGradient id="MyGradient"> </linearGradient> </defs> <rect style="fill:url(#MyGradient)"/> </svg>


Pág. -64-

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.

<svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink "> <defs> <rect id="MyRect" width="60" height="10"/> </defs> <rect x="0.1" y="0.1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width="0.2" /> <use x="20" y="10" xlink:href="#MyRect" /> </svg>

<svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink "> <defs> <symbol id="MySymbol" viewBox="0 0 20 20"> <desc>MySymbol - four rectangles in a grid</desc> <rect x="1" y="1" width="8" height="8"/> <rect x="11" y="1" width="8" height="8"/> <rect x="1" y="11" width="8" height="8"/> <rect x="11" y="11" width="8" height="8"/> </symbol> </defs>

<rect x="0.1" y="0.1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width="0.2" /> <use x="45" y="10" width="10" height="10" xlink:href="#MySymbol" /> </svg>


Pág. -65-

<svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink "> <defs> <rect id="MyRect" x="0" y="0" width="60" height="10"/> </defs> <rect x="0.1" y="0.1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width="0.2" /> <use xlink:href="#MyRect" transform="translate(20,2.5) rotate(10)" /> </svg>

<svg width="12cm" height="3cm" viewBox="0 0 1200 300" xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink "> <defs style="stroke-miterlimit: 10"> <path id="MyPath" d="M300,50 900,50 900,250 300,250" class="MyPathClass" style="stroke-dasharray:300,100" /> </defs> <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. -66-

<g style="stroke-width:40"> <use id="MyUse" xlink:href="#MyPath" class="MyUseClass" style="stroke-dashoffset:50" /> </g> </svg>

Image.- Este elemento permite la inclusión de imágenes externas rasterizadas en el área definida por las coordenadas de se adjuntan.

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink "> <image x="50" y="50" width="100px" height="100px" xlink:href="modele33.jpg"> <title>My image</title> </image> </svg> Figure 17. elemento-image.svg

Transformaciones.- Permiten realizar cambios de coordenadas sobre los elementos representados. Sobre cualquier objeto dentro de un documento SVG podemos realizar las siguientes transformaciones:

Escalado: utilizado para la redimensión o para el cambio de orientación.

Traslación: cambiar la ubicación actual de un elemento, cambiando así el origen de coordenadas.


Pág. -67-

Rotación: giro en grados que debe realizar el elemento con respecto al origen de coordenadas.

<svg width="140" height="170"> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" /> <circle cx="55" cy="80" r="5" stroke="black" fill="#339933" /> <circle cx="85" cy="80" r="5" stroke="black" fill="#339933" /> <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>

<svg width="200" height="200"> <defs> <g id="base"> <circle cx="80" cy="80" r="30" style="stroke: black; fill: none;" /> </g> </defs> <g transform="translate(50, 10)"> <use xlink:href="#base" transform="rotate(10)" /> <use xlink:href="#base" transform="rotate(12)" /> <use xlink:href="#base" transform="rotate(14)" /> <use xlink:href="#base" transform="rotate(16)" /> <use xlink:href="#base" transform="rotate(18)" /> <use xlink:href="#base" transform="rotate(20)" /> <use xlink:href="#base" transform="rotate(22)" /> <use xlink:href="#base" transform="rotate(24)" /> <use xlink:href="#base" transform="rotate(26)" /> <use xlink:href="#base" transform="rotate(28)" /> </g>


Pág. -68-

</svg>

4.6. Scripting

Tenemos dos métodos para modificar el contenido de un fichero SVG mediante Scripting:

Considerando el documento como un fichero XML estándar y utilizando DOM para su manipulación.

Considerando el documento como un fichero específico SVG y utilizando el modelo de objetos de SVG para su manipulación.

Funciones de ejemplo para el de DOM.- <?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="300" height="300" onload="pinta()"> <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. -69-

255*Math.random() + ");"); setTimeout("window.pinta()", 300); document.getElementById("dr").appendChild(circleNode); } ]]> </script> <g id="dr" /> </svg>

<?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; var frame = document.documentElement.getElementById("frame"); var filtered = document.documentElement.getElementById("filtered"); var clip = document.documentElement.getElementById("clipRecorte");

frame.addEventListener("mousedown", mousedown_listener, false); frame.addEventListener("mouseup", mouseup_listener, false); frame.addEventListener("mousemove", mousemove_listener, false);

function mousedown_listener(evt) { drag = true; dx = filtered.getAttribute("x") - evt.clientX; dy = filtered.getAttribute("y") - evt.clientY; }


Pág. -70-

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. -71-

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. -72-

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

SMIL permite la incorporación de animaciones basadas en tiempo dentro de un documento SVG. Realmente, dentro del documento SVG contamos con una serie de apoyos para poder animar cualquiera de elementos que hemos definido. Hay que tener en cuenta que cada animación definida variará los valores de uno de los atributos del elemento durante el periodo especificado (ya esté delimitado por la ejecución de un evento o por un tiempo fijo).

Para asociar una animación podemos:

Definirla a parte y asociarla a través del ID del elemento:

<animate xlink:href="#bubblesrect" attributeName="y" begin="aboutbubbles.click" dur="4s" to="10" fill="freeze"/> <animate xlink:href="#bubblesrect" attributeName="y" begin="aboutbubbles.click" end="aboutbubbles.click" to="10" fill="freeze"/> Definirla directamente en el elemento que la necesita:

<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"/> </rect> 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. -73-

#bubbleslabelrectinvis { fill:#f00; stroke: #700; stroke-width: 3; } #aboutbubbles { visibility: hidden; } .textrect { stroke:#888; stroke-width:2; fill:#eee; } .text { stroke-width:0; font-size:12; font-family:Arial; font-weight:300; fill:#444; } .cross { stroke:#888; stroke-width:3; stroke-linejoin:round; stroke-miterlimit:0; stroke-linecap:round; } </style> <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"/> <rect id="bubblesrect" class="textrect" x="160" y="130"


Pág. -74-

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" />

<rect id="bubblesmaxrect" class="textrect" x="326" y="140" width="0" height="0" rx="1" ry="1"> <animate attributeName="y" begin="aboutbubbles.click" dur="4s" to="10" fill="freeze"/> </rect>

<rect id="bubblesmaxbox" class="textrect" x="329" y="143" width="0" height="0" rx="1" ry="1"> <animate attributeName="y" begin="aboutbubbles.click" dur="4s" to="10" fill="freeze"/> </rect> <text id="bubblestext" class="text"> <tspan id="bubblestext00" x="170" y="158"> <animate attributeName="y" begin="aboutbubbles.click" dur="4s" to="38" fill="freeze"/> Ventana contextual </tspan> </text> </g> </svg>

<svg xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink " viewBox="0 0 100 100"> <animate attributeName="viewBox" begin="zoomIn.click" to="0 0 50 50" dur="12s" fill="freeze"/> <g id="zoomIn"> <rect x="40" y="40" width="20" height="4"/>


Pág. -75-

<rect x="48" y="32" width="4" height="20"/> </g> </svg>

<svg viewBox="-400 -200 1200 600"> <g> <circle cx="100" cy="50" r="1000" style="fill:#000"/> <circle cx="100" cy="50" r="0" style="fill:#F75"> <animate attributeName="r" begin="0s" dur="10.8s" from="0" to="1200"/> </circle> <circle cx="200" cy="100" r="0" style="fill:#FA8"> <animate attributeName="r" begin="2s" dur="10.8" from="0" to="1200"/> </circle> <circle cx="300" cy="150" r="0" style="fill:#FCB"> <animate attributeName="r" begin="3.5s" dur="10.8" from="0" to="1200"/> </circle> <circle cx="400" cy="200" r="0" style="fill:#FDC"> <animate attributeName="r" fill="freeze" begin="4.5s" dur="10.8s" from="0" to="1200"/> </circle> <circle cx="500" cy="250" r="0" style="fill:#FED"> <animate attributeName="r" fill="freeze" begin="5.25s" dur="10.8s" from="0" to="1200"/> </circle> <circle cx="600" cy="300" r="0" style="fill:#FEF"> <animate attributeName="r" fill="freeze" begin="5.75" dur="10.8s" from="0" to="1200"/> </circle> </g> </svg>


Pág. -76-

<svg xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink " id="svg-root" width="100%" height="100%" viewBox="0 0 480 360"> <g id="test-body-content" font-family="Arial" font-size="30"> <g transform="translate(0, 0)"> <rect x="60" y="20" width="60" height="210" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="1"> <animate id="largo1" attributeName="width" begin="0s" dur="4s" from="60" to="210" fill="freeze"/> <animate id="ancho1" attributeName="height" begin="0s" dur="4s" from="210" to="310" fill="freeze"/> <animate id="largo2" attributeName="width" begin="largo1.end" dur="4s" from="210" to="60" fill="freeze"/> <animate id="ancho2" attributeName="height" begin="ancho1.end" dur="4s" from="310" to="210" fill="freeze"/>

<animateMotion id="abajo1" from="0,0" to="80,80" begin="largo2.end" dur="3s" fill="freeze"/> <animateMotion id="zigzag1" values="80,80;10,0;0,10" begin="abajo1.end" dur="3s" fill="freeze"/> <animateMotion id="arco1" path="M0,10 C0,10 40,40 80,0" begin="zigzag1.end" dur="3s" fill="freeze"/> </rect> <rect x="60" y="20" width="50" height="20" fill="#00ff55" stroke="#008855" stroke-width="1"> <animate attributeName="width" begin="0s" dur="4s" from="50" to="200" fill="freeze"/> <animate attributeName="height" begin="0s" dur="4s" from="200" to="300" fill="freeze"/> <animate attributeName="width" begin="4s" dur="4s" from="200" to="50" fill="freeze"/> <animate attributeName="height"


Pág. -77-

begin="4s" dur="4s" from="300" to="200" fill="freeze"/> <animateMotion from="0,0" to="80,80" begin="8s" dur="3s" fill="freeze"/> <animateMotion values="80,80;10,0;0,10" begin="11s" dur="3s" fill="freeze"/> <animateMotion path="M0,10 C0,10 40,40 80,0" begin="14s" dur="3s" fill="freeze"/> </rect> </g> <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. -78-

4.8. Gráficos e interactividad en la Web

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.

En teoría consiguiéremos el mismo comportamiento que con el plugin de Adobe, aunque ahora no sea del todo cierto debido al estado del desarrollo del proyecto. A día de hoy la versión que de Mozilla SVG que más funciones soporta es la basada en el GDI+ de Windows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml " xmlns:svg="http://www.w3.org/2000/svg " > <head> <title>Test SVG dentro de XHTML</title> <style type="text/css"> polygon[class="base"] { fill:blue; } </style> </head> <body> <h1 class="top">Poligonos renderizados por Mozilla</h1> <svg:svg width="200px" height="200px"> <svg:polygon points="20,20 30,60 60,30" class="base" /> <svg:foreignObject x="5" y="60" width="40" height="10"> <span class="forobjpts" style="color:blue;">Poligono</span> </svg:foreignObject> </svg:svg> </body>


Pág. -79-

</html>

4.9. SVG Móvil

Ya hay en venta, productos comerciales de varios vendedores, tales como BitFlash, CSIRO, Intesis, KDDI y ZOOMON. Hay otras implementaciones en marcha por parte de compañías como Ericsson, Nokia y Sharp. Por ejemplo, a continuación podemos ver la implementación de SVG Reducido de ZOOMON funcionando en teléfonos móviles de Nokia y Sony-Ericsson que utilizan el sistema operativo Symbian


Pág. -80-

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. -81-

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.

Adicionalmente, SVG utiliza interpolación - la construcción automática de fotogramas intermedios, de manera similar a los sistemas de animación de alto rendimiento - en lugar de mostrar explícitamente el contenido de todas y cada una de las imágenes de una animación. Esto tiene una influencia importante en el tamaño del contenido - varios operadores de telefonía móvil han mencionado el menor tamaño de archivo como un factor significativo en la elección de SVG Reducido frente a otras alternativas propietarias binarias - e incluso permite que se pueda ajustar la velocidad de imagen según la potencia de computación disponible, sin tener que crear múltiples copias del contenido para distintos dispositivos.

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. -82-

SVG también tiene su propio mecanismo de tipos de letra, permitiendo simultáneamente una libertad de creatividad y la posibilidad de proporcionar tipos de letras embebidas en el contenido, para texto poco frecuente o lenguajes minoritarios. Estas fuentes no se instalan en el sistema cliente y desaparecen una vez que el contenido haya sido visualizado.

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.

Los Servicios Web proporcionan la infraestructura para la comunicación entre empresas (B2B), y utilizan ampliamente XML. A menudo, ese tipo de comunicación se realiza entre dos máquinas; las distintas especificaciones de Servicios Web dirigen este aspecto. En la mayoría de los casos, también es necesaria la interacción humana en algún momento. Es por ello que los Servicios Web necesitan una fachada para la interacción con las personas - una que esté bien documentada, implementada de manera fidedigna, y utilizable por un amplio rango de dispositivos, así como que proporcione la riqueza gráfica y de tipografía necesaria para la tarea, y también debe estar basado en XML. SVG es una buena forma de proporcionar un interfaz gráfico dinámico e interactivo para los Servicios Web - especialmente cuando se combina con otras tecnologías XML tales como XForms (también creada por el W3C).

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. -83-

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. -84-

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.

La creación de gráficos para Servicios Web, generados a partir de datos, se beneficia de las herramientas de autor especializadas. Corel ha anunciado una Smart Graphics Suite de herramientas de autor enfocadas especialmente a este segmento de mercado.

ZOOMON tiene una herramienta de autor SVG, ZOOMON Animator (Nota de Traducción: Anteriormente el producto se llamaba Composer), para animaciones de SVG Reducido, con un interfaz simple y fácil de utilizar, mientras que e-animator de Sharp es otra aplicación de autor que lee archivos SVG y calcula la geometría intermedia de una animación.


Pág. -85-

Las soluciones SVG altamente interactivas utilizan frecuentemente scripting. Intesis, que hace una implementación de SVG Básico para PocketPC, también produce un Entorno de Desarrollo Integrado (IDE) JavaScript, lo que permite que el código sea desarrollado en un PC y luego se depure paso a paso en el dispositivo móvil de destino, conectado al PC con un cable de sincronización, antes de desplegar la solución en los reproductores de SVG Básico de Bitflash, CSIRO, o Intesis.


Pág. -86-


4.1. ¿Cuál de estas afirmaciones es falsa?

a) SVG es un lenguaje de marcado para describir gráficos vectoriales en tres dimensiones.

b) SVG sirve tanto para describir gráficos estáticos como animados c) En SVG las imágenes pueden contener hiperenlaces d) SVG es un estándar abierto creado por el consorcio de la World Wide Web

4.2. ¿Cuál de las siguientes afirmaciones es falsa?

a) SVG promueve 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.

b) SVG no tiene sus propios estándares de símbología c) SVG está basado en XML y tiene su propio namespace d) SVG está modelado en base a puntos individuales

4.3 ¿De que opciones no se dispone para incluir un contenido SVG dentro de una página Web?

a) Como una página independiente de SVG b) Encajado por referencia c) Referido en una característica CSS1 d) Por acoplamiento externo, usando el elemento del HTML “a”

4.4. Entre los beneficios de utilizar SVG no se encuentra

a) Un menor tamaño si se hace zoom. b) Filtros y efectos avanzados. c) Ideal para ser impreso. d) Puede mostrarse de forma progresiva

4.5. El atributo “stroke-dasharray” nos permite

a) Poder definir la propiedad rectangular de un polígono. b) Poder definir la línea del contorno externo de un polígono. c) Poder modificar la continuidad de las líneas. d) Añadir trazas de estilo en la continuidad de un elemento lineal.


Pág. -87-

5. Gráficos vectoriales animados (Especificación SWF)

SWF es un formato de archivo de gráficos vectoriales creado por la empresa Adobe (antes Macromedia). Los archivos SWF pueden ser creados por el programa Flash, aunque hay otras aplicaciones que también lo permiten. Básicamente es un formato vectorial, pero también admite bitmaps y, necesita para ser ejecutado el plugin Flash, el cual permite mostrar las animaciones vectoriales que contienen los ficheros.

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

Aunque la especificación completa del formato está disponible, no es un formato abierto ya que la licencia de la especificación no permite crear software que reproduzca el formato. Por lo tanto, la ingeniería inversa es la única vía legal para competir con el reproductor oficial.


Pág. -88-

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.

5.2. Especificación del formato del archivo de SWF

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:

• Muestra en pantalla- formato se piensa sobre todo para la exhibición de la en-pantalla y así que apoya anti-aliasing, la representación rápida a una BITMAP de cualquier formato del color, la animación y los botones interactivos.

• Extensibilidad- es un formato marcado con etiqueta, así que el formato se puede desarrollar con las nuevas características mientras que mantiene compatibilidad hacia atrás con más viejos jugadores.

• Entrega en redes - se pueden entregar sobre una red con anchura de banda limitada e imprevisible. Los archivos se comprimen para ser representación incremental pequeña y de la ayuda con fluir.

• Simplicidad- es simple de modo que el reproductor sea pequeño y portado fácilmente. También, el reproductor depende solamente de un sistema muy limitado de funcionalidad del sistema operativo.

• Independencia del Archivo - del archivo se pueden exhibir sin ninguna dependencia de recursos externos tales como fuentes.

• Escalabilidad. Los ordenadores tienen diversas resoluciones de monitor y profundidades de color. Los archivos trabajan bien en el hardware limitado, mientras que se aprovechan de un hardware más costoso cuando está disponible.

• Velocidad. Los se diseñan para ser renderizados en una alta calidad muy rápidamente.

El documento siguiente describe el formato del archivo detalladamente.

Conceptos básicos

Formato del contenedor

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.

Campo Tipo Comentario

Signature UI8 Octeto 1 de la firma - siempre “F”

Signature UI8 Octeto 2 de la firma - siempre “W”


Pág. -89-

Signature UI8 Octeto 3 de la firma - siempre “S”

Versión UI8 Sola versión del archivo del octeto

Longitud del archivo UI32 Longitud del archivo entero en octetos

Tamaño del frame RECT Tamaño del capítulo en TWIPS

Frame Rate UI16 Retraso del frame fijado en un número fijo de 8.8 frames por segundo

Cuenta del frame UI16 Número total de frames en película

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.

Cabecera corta - para los registros de menos de 63 octetos en longitud


Etiqueta UB [10] Identificación de la etiqueta

Longitud UB [6] Longitud de la etiqueta

Cabecera larga - para los registros de 63 octetos en longitud o mayores


Etiqueta UB [10] Identificación de la


Pág. -90-

etiqueta

Bandera larga de cabecera UB [6] Siempre 0x3F

Longitud UI32 Longitud de la 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

Las etiquetas de la definición se utilizan para agregar la información de carácter al diccionario. Las etiquetas de la definición definen los datos que se pueden reutilizar en un archivo como formas, BITMAP, los botones, el texto, las fuentes y los sonidos. Las etiquetas del control manipulan caracteres y proporcionan funciones administrativas. Por ejemplo, las etiquetas del control se utilizan para mover objetos en la pantalla, para demostrar marcos, y para comenzar sonidos. Para la información sobre etiquetas específicas, ver la sección de la referencia de la etiqueta.

Marcar ordenar y fluir con etiqueta

Las etiquetas pueden ocurrir en el archivo en cualquier orden. Las etiquetas de definición deben ocurrir en el archivo antes de que cualquier etiqueta del control al que está definido. El orden de las etiquetas de control define la orden de la animación.

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. -91-

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.

Los caracteres se incorporan en el diccionario cuando una etiqueta del definir se encuentra en el archivo de .swf. Los caracteres se miran para arriba en el diccionario basado en el número de identificación del carácter.

Lista del Display

Conceptualmente, el formato del archivo de SWF se puede considerar como dos corrientes interpoladas de datos. La corriente de la definición agrega caracteres al diccionario y la corriente del control realiza operaciones en la lista de la exhibición usando los caracteres que se han definido en el diccionario.

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.

Los objetos en la lista de la exhibición son referidos por un número de profundidad. El objeto en profundidad 0 es el fondo de la orden que apila. Solamente un objeto puede existir en cualquier profundidad dada.

Hay tres operaciones básicas en la lista de la exhibición:

• Poner un objeto-Lugar que un carácter encendido en un nivel dado de la profundidad que usa una transformación especificada.

• Mover un objeto-Modificación el objeto en el nivel dado de la profundidad. El transformar y el carácter pueden ser modificados.

• Quitar un objeto-Quitar el objeto en un número dado de la profundidad de la exhibición.

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. -92-

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

La colocación del Matriz-Objeto es especificada por una matriz estándar de la transformación 2x3 usando 16.16 números del punto fijo para los primeros cuatro elementos y los números enteros para los dos elementos pasados.

Transformaciones de color- En aplicaciones SWF el color transforma para realizar efectos como descolorarse adentro o hacia fuera de un objeto en el display. La transformada de color consiste en una ecuación linear simple que se aplica a cada elemento del color de un objeto.

Cociente-Para algunos objetos como morphed, un cociente de 16 bits se utiliza controlar qué punto en el morph debe ser exhibido. El cociente también se utiliza para seguir el curso de la vida de los objetos del sprite.

Objeto de la profundidad-Un clip en la lista de la exhibición de SWF se puede utilizar como trayectoria del truncamiento para la gama de objetos. Esto es controlado por el campo de la profundidad del clip para el objeto del lugar.

Proceso de un archivo de SWF

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.

Un archivo de SWF es dividido en marcos numerados por las etiquetas de ShowFrame. El capítulo 1 es definido realizando todas las operaciones de control antes de la primera etiqueta de ShowFrame. El capítulo 2 es definido realizando todas las operaciones de control antes de la segunda etiqueta de ShowFrame y así sucesivamente.

Estrategia de la compresión del archivo

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. -93-

compresión de ADPCM. Se comprimen las formas usando un esquema de codificación delta muy eficiente.

• Enpaquetamiento de bits-Siempre que sea posible, los números se empaquetan en el número posible más pequeño de los bits para un valor particular. Las coordenadas se almacenan comúnmente usando los campos variable-clasificados del bit, donde algunos bits se utilizan para indicar cuántos bits son necesitados por valores subsecuentes. Ver RECT para un ejemplo.

• Omitir valor-Algunas estructuras como las matrices y el color transforma tienen campos comunes que se utilicen más a menudo que otros. Por ejemplo, para una matriz, el campo más común es el campo de la traducción. El escalamiento y la rotación son menos comunes. Por lo tanto si el campo del escalamiento no está presente, se asume para ser 100%. Si el campo de la rotación no está presente, se asume que no hay rotación. Este uso de los valores prefijados ayuda a reducir al mínimo tamaños del archivo.

• Cambiar Codificar-Como regla, en archivos SWF apenas se almacena los cambios entre los estados. Esto se refleja en estructuras de datos de la forma y en el lugar/el movimiento/quitar el modelo usado por la lista de la exhibición.

• Estructura de datos de formas- La estructura de datos de formas utiliza una única estructura para reducir al mínimo el tamaño de formas y para renderizar formas anti-aliased muy eficientemente en la pantalla.

Observar que aunque los componentes individuales de un archivo de SWF se comprimen, no hay compresión total aplicada al archivo de .swf. Esto permite para que un visalizador procese la estructura de archivo directamente fuera de la RAM sin descomprimirlo. Los varios elementos del archivo tales como BITMAP, formas y sonidos pueden ser descomprimidos mientras que son necesarios.

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:

<company name>/<extension set>

Para el archivo entero, estos tipos de la etiqueta serán interpretados en el contexto de la extensión nombrada. Los usos deben poder remapear la gama de la etiqueta para que un archivo particular evite conflictos entre dos sistemas de la extensión.

La extensión debe estar en el tipo gama de la etiqueta 512-1023.

Archivo de muestra SWF

Ejemplo de archivo SWF

***** Dumping SWF File Information *****


Pág. -94-

----- Reading the file header -----

FWS

File version 3

File size 741

Movie width 550

Movie height 400

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.

----- Reading movie details -----

<----- dumping frame 0 file offset 21 ----->

El desplazamiento del frame es de 0 a 21 octetos en el archivo.

tagLen 3: tagSetBackgroundColor RGB_HEX ffffff

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 7 stop

action code 0

Se detien brevemente el frame. (La acción de DoAction es parada. El código de acción 0 significa que no hay acciones.)

tagLen 32: tagDefineShape tagid 1

Define la primera forma.

tagLen 10: tagPlaceObject2 flags 1 depth 26

tag 1

pos matrix hex [ a_fixed b_fixed] = [00010000 00000000]


Pág. -95-

[ c_fixed d_fixed] [00000000 00010000]

[tx_fixed ty_fixed] [000010a4 00000410]

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.

tagLen 201: tagDefineShape2 tagid 2

tagLen 76: tagDefineShape tagid 3

tagLen 190: tagDefineShape2 tagid 4

tagLen 33: tagDefineButton2 tagid 5

Define más formas y un botón.


tag 5

pos matrix hex [ a_fixed b_fixed] = [0004dbd3 00000000]

[ c_fixed d_fixed] [00000000 0004dbd3]

[tx_fixed ty_fixed] [00000600 00000a1c]

Inserta el botón (etiqueta 5) en lista del display.

tagLen 0: tagShowFrame

Exhibe el contenido de la lista del display en la pantalla.


tagLen 2: tagRemoveObject2 depth 2

Quita el botón de la lista del display.



[ c_fixed d_fixed] [00000000 00010000]

[tx_fixed ty_fixed] [000012ea 00000690]


Pág. -96-

Los movimientos ajustan a la izquierda a la derecha, tapa de basar, diagonalmente en la etapa.


Contenido de la lista del display de las exhibiciones en la pantalla.




[ c_fixed d_fixed] [00000000 00010000]

[tx_fixed ty_fixed] [00001530 00000910]







[ c_fixed d_fixed] [00000000 00010000]

[tx_fixed ty_fixed] [00001776 00000b90]








Pág. -97-

[ c_fixed d_fixed] [00000000 00010000]

[tx_fixed ty_fixed] [000019bc 00000e10]







[ c_fixed d_fixed] [00000000 00010000]

[tx_fixed ty_fixed] [00001c03 00001090]







[ c_fixed d_fixed] [00000000 00010000]

[tx_fixed ty_fixed] [00001e49 00001310]






Pág. -98-



[ c_fixed d_fixed] [00000000 00010000]

[tx_fixed ty_fixed] [0000208f 00001590]







[ c_fixed d_fixed] [00000000 00010000]

[tx_fixed ty_fixed] [000022d5 00001810]







[ c_fixed d_fixed] [00000000 00010000]

[tx_fixed ty_fixed] [0000251b 00001a90]




Pág. -99-

Exhibe el contenido de la lista del display de la pantalla.


tagLen 0: tagEnd

el tagEnd indica el extremo del archivo.

***** Finished Dumping SWF File Information *****


Pág. -100-

5.3. Alternativas para la visualización de información gráfica en la Web

Frente la descripción tradicional de un gráfico como un conjunto de píxeles coloreados, la arquitectura de almacenamiento vectorial de gráficos describe las imágenes como un conjunto de entidades geométricas, denominadas primitivas, las cuales llevan asociada información sobre sus propiedades por medio de una serie de atributos (figura 3). Empleados profusamente en el ámbito del CAD y el modelado tridimensional, los gráficos vectoriales presentan una serie de ventajas que los convierten en una alternativa viable a la generación de imágenes para la Web [5]. Las más significativas se describen

a continuación:

• Las entidades que componen un gráfico vectorial se describen por medio de su ecuación matemática, lo que supone un grado de compresión elevadísimo, sin parangón en los formatos bitmap.

• Un fenómeno derivado de lo anterior es que la calidad de la representación es independiente del tamaño de la imagen, y no depende de ningún parámetro ajustable como ocurre con el tamaño del píxel en los gráficos bitmap. De ese modo, la focalización puede variarse libremente sin que la visualización se vea afectada.

• 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.

• La adición de metainformación a las entidades posibilita la creación de hipervínculos a distintas referencias, abriendo además la puerta a un comportamiento interactivo con el usuario.


Pág. -101-

Imagen 15 Tecnología de gráficos de barrido (izquierda) y vectoriales (derecha)

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:

• La necesidad de una especificación de libre distribución y gratuita, que permita a los programadores desarrollar aplicaciones sin ataduras.

• La conveniencia de establecer una descripción vectorial de entidades muy completa, que no sólo defina primitivas convencionales (puntos, líneas, círculos) sino también especifique el empleo de textos, fuentes tipográficas, o que incluye comportamientos más habituales en el ámbito de los gráficos bitmap, como la transparencia o los efectos de máscara.


Pág. -102-

• El interés que promueve la generación de gráficos animados e interactivos, para promover su empleo en sectores donde estos comportamientos son muy demandados.

• La necesidad de adosar metainformación a las entidades vectoriales, con el fin de vincular bases de datos alfanuméricas a la información gráfica.

• La conveniencia de desarrollar herramientas de autor, es decir, entornos gráficos y amigables para que el usuario sin experiencia pueda crear sus contenidos sin necesidad de aprender complicados lenguajes de programación.

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.

Los gráficos vectoriales en la Web

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)

Como consecuencia de la colaboración entre el W3C y el CGM Open Consortium, fundado en 1998, en Enero de 1999 se lanza el perfil WebCGM, aceptado por el Consorcio y el organismo regulador internacional ISO. Se basa en un perfil anterior, denominado ATA CGM, que había sido concebido para la industria aeroespacial. Compañías como Micrografx o SDI han elaborado plug-ins para los navegadores más habituales. Aunque en el mundo de la industria norteamericana es ampliamente utilizado en aplicaciones CAD relacionadas con la aeronáutica, no ha llegado a alcanzar una difusión de ámbito general, y fuera de estos sectores es un estándar prácticamente desconocido. Las razones que explican este fenómeno son, por un lado, la


Pág. -103-

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.

Tanto el Consorcio como las compañías privadas desarrolladoras de software han seguido trabajando en creación de propuestas de audiencias más amplias, buscando compatibilizar la facilidad de diseño con las prestaciones cada vez más exigentes que demandan los usuarios. En la actualidad, dos son las especificaciones que han adquirido un papel preponderante a la hora de representar gráficos vectoriales en la Web: el formato SWF (ShockWave Flash), de la compañía Macromedia, y el formato SVG (Scalable Vector Graphics) recomendado por el Consorcio W3C. El formato SWF se ha convertido en un estándar de facto, aunque está bajo el control de un único fabricante. Cientos de miles de páginas Web hacen uso de esta tecnología, ampliamente difundida gracias a la inclusión gratuita del plug-in Macromedia Flash Player con los principales navegadores. Creado por una modesta compañía denominada FutureSplash, el formato fue adquirido en 1997 por la compañía Macromedia como un complemento a su aplicación Director, dedicada a la generación de contenidos multimedia.

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.

Comparación entre SWF y SVG

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. -104-

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.

En ambos casos, la visualización se lleva a cabo a través de un plug-in del navegador, pero mientras Macromedia Flash Player está instalado por defecto en los browsers más difundidos, como Microsoft Internet Explorer, los plug-ins de SVG están parcialmente implementados, no se distribuyen de forma conjunta con el navegador, y su difusión es por tanto mucho menor.

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. -105-


Pág. -106-

Sorprende el hecho de que la mayor parte de las primitivas gráficas no aparezcan codificadas directamente en SWF. La razón hay que buscarla en la propia naturaleza de este formato, enfocado hacia la publicación en Web y por tanto más ligero y optimizado que el formato FLA generado por la herramienta de autor. Aunque en este entorno sí están disponibles como herramientas gráficas, en el formato SWF se aproximan mediante una concatenación de operaciones fundamentales como “lineto” o “curveto”.

Es significativo señalar que muchos de los parámetros de SVG se definen mediante expresiones heredadas de la especificación CSS (Cascading Style Sheets), utilizada junto con HTML para la creación de páginas Web con hojas de estilo. Así ocurre con las unidades de trabajo, el peso de la fuente, la codificación de los colores o las propiedades de bordes y rellenos. Esta circunstancia facilita el aprendizaje de esta tecnología al desarrollador, ya familiarizado con una sintaxis similar. De hecho, es posible modificar el aspecto de las entidades definidas en SVG desde una hoja de estilo externa vinculada al archivo, al igual que se hace en HTML, permitiendo así la anhelada distinción entre contenido y presentación.

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. -107-

La arquitectura adoptada para la generación de animaciones difiere bastante. Mientras que Macromedia Flash emplea la metáfora de la línea de tiempo donde suceden eventos secuencialmente, heredada de los programas de postproducción de video e incluso de otras aplicaciones de la misma compañía, como Director, SVG descarga en los objetos de animación esta responsabilidad, derivando más el diseño hacia qué se anima en vez de cuándo se anima. Esta posiblidad ya se atisba en otras propuestas de estándares para la Web como VRML (Virtual Reality Markup Language) o su sucesor X3D , también basado en XML. En cualquier caso, las prestaciones exhibidas por ambas propuestas son similares.

Para la obtención de un comportamiento interactivo, ambos formatos recurren a un lenguaje de programación (ActionScript en Flash y ECMAScript en SVG), que también proceden de un núcleo común como es JavaScript. Resulta destacable la flexibilidad que en SVG desencadenan los eventos de tipo mutación, generados cada vez que se añade, elimina o modifica un nodo de la estructura jerárquica de la escena creada. La posibilidad de establecer vínculos directos entre las entidades definidas en SVG, sin necesidad de acudir a la programación, facilita notablemente la tarea a los diseñadores.

Integración de recursos multimedia

La especificación SVG 1.1 no contempla la integración de video y audio en la escena. Tan sólo algunos visores, como el desarrollado por Adobe, permiten la reproducción de video recurriendo a procedimientos propietarios de la compañía. Sin embargo, el documento de trabajo de la especificación 1.2 completa, publicado en Abril de 2005, indica que SVG dará soporte a ambos medios en un futuro próximo. Flash, por el contrario, presenta una excelente integración de diversos contenidos multimedia, a los que aplica de forma automática compresores (MP3 en audio y Sorenson H.263 en video) para minimizar así el peso de la película final. En el caso de las imágenes bitmap, Flash permite, aparte de aplicar una compresión JPEG directa al contenido raster, realizar una vectorización de la misma para convertirla en un conjunto de entidades vectoriales.


Pág. -108-

La Expresión Gráfica ante las nuevas tecnologías de creación de contenidos

No cabe duda de que la aparición de nuevos estándares para la publicación de contenidos gráficos obliga al Área de conocimiento a realizar un estudio sosegado de las capacidades de los mismos para evaluar su posible utilización en la futura acción docente. La próxima entrada del Espacio Europeo de Educación Superior traerá consigo la puesta en marcha de metodologías capaces de aprovechar todas las posibilidades que brindan las Nuevas Tecnologías de la Información. El fin no es otro que el de dar respuesta al reto de una enseñanza más orientada al alumno, el cual tendrá a su disposición un elevado número de recursos no sólo accesibles desde su centro de estudio, sino en su domicilio, donde se desarrollará buena parte del proceso de enseñanza-aprendizaje que ahora será necesario evaluar. Entendiendo la generación de gráficos vectoriales para la Web como un recurso útil para la transmisión del conocimiento del Área de Expresión Gráfica, en áreas como la geometría, los sistemas de representación o el diseño asistido por computador, parece que la propuesta del Consorcio W3C parte con una cierta ventaja para erigirse en el formato a utilizar. Las razones que avalan esta afirmación son las siguientes:

• La posibilidad de crear y editar contenidos gráficos en SVG con un sencillo procesador de textos ASCII lo convierte en una opción independiente de sistemas operativos y plataformas informáticas (tabla 1).

• La pluralidad de unidades de medida soportadas (tabla 2) acerca más esta especificación a la realidad métrica que plantean muchos de los conceptos manejados en Expresión Gráfica.

• La creación y edición de primitivas nativas en SVG es siempre preferible frente a la simulación de las mismas, como ocurre en SWF (tabla 2), lo cual puede ser objetivo irrenunciable en aquellas aplicaciones donde la precisión tenga un papel esencial.

• Siguiendo con el objetivo de conseguir una representación fidedigna, el control de los fenómenos de antialiasing sobre las entidades individuales, inexistente en Flash, proporciona una mejora sustancial de la calidad de visualización (tabla 2).

• 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.

• Aunque ambos formatos contemplan la realización de transformaciones geométricas sobre las entidades generadas (desplazamientos, giros, etc.), en SVG es posible definirlas y concatenarlas mediante matrices, lo que expande las capacidades de las órdenes de edición y posibilita la implementación eficaz de órdenes de creación de patrones basados en la copia de un elemento base (tabla 2).


Pág. -109-

• Los hipervínculos internos en SVG abren la puerta a la referenciación de símbolos y bloques de forma eficaz, emulando así las herramientas existentes en los programas de diseño asistido por computador (tabla 3).

La generación de gráficos vectoriales en la Web es una tecnología reciente que ha venido a dar soluciones al problema de la transmisión de contenidos gráficos elaborados a través de redes con anchos de banda ajustados, consiguiendo minimizar los tamaños y los tiempos de descarga sin producir una merma en su calidad. Además, la adición de un comportamiento dinámico mediante animaciones y comportamientos interactivos ha abierto las puertas a que la información gráfica no sea un simple contenido complementario al texto, sino que tenga una entidad semántica por sí misma. Actualmente, el panorama está dominado por dos formatos que parten de presupuestos muy distintos, como son Macromedia Flash, una iniciativa empresarial privada, y SVG, una propuesta de estándar realizada por el Consorcio W3C. Lejos de vislumbrarse un panorama estable, hay una serie de acontecimientos que añaden una fundada incertidumbre acerca del futuro de estas tecnologías:

• 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.

• La aparición de nuevos dispositivos portátiles (PDAs, teléfonos móviles, videoconsolas) incrementa la audiencia potencial de estas tecnologías de manera notable. Tanto el Consorcio (a través del borrador de SVG Mobile [35]) como Adobe (mediante Flash Lite [36]) intentan dar respuesta en un ámbito en el que W3C parte con una cierta ventaja, debido al elevado numero de compañías del sector que han dado ya su apoyo a esta iniciativa, comenzado a implantarla en sus teléfonos móviles.

• 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. -110-


5.1. Señale el enunciado incorrecto

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):

a) Escalabilidad e independencia del Archivo b) Independencia del Archivo y Simplicidad c) Simplicidad y bajo acoplamiento d) Extensibilidad y muestra en pantalla.

5.3. De las diferencias entre SWF y SVG marcar la incorrecta:

a) SWF permite Streaming mientras que SVG no. b) SVG tiene su propia especificación DOM. c) SWF es formato ASCII mientras que SVG no. d) Ambas disponen de sistemas de compresión.

5.4. Marcar el enunciado correcto

a) En SVG la mayor parte de las primitivas gráficas no aparezcan codificadas. b) Es significativo señalar que muchos de los parámetros de SVG se definen

mediante expresiones heredadas de la especificación CSS. c) En SWF es posible modificar el aspecto de las entidades definidas en SVG

desde una hoja de estilo externa vinculada al archivo. d) Ambos no disponen de un lenguaje de programación.

5.5. Respecto al sonido y video

a) SWF no soporta video y pero si sonido b) SWF soporta video pero no sonido c) SVG no soporta video pero si sonido d) SVG no soporta ni video ni sonido


Pág. -111-

6. Introducción a Flash y herramientas alternativas

6.1. Adobe Flash

Adobe FLASH® (hasta 2005 Macromedia FLASH®) o FLASH® se refiere tanto al programa de edición multimedia como al reproductor de SWF (Shockwave FLASH) Adobe Flash Player, escrito y distribuido por Adobe, que utiliza gráficos vectoriales e imágenes ráster, sonido, código de programa, flujo de vídeo y audio bidireccional (el flujo de subida sólo está disponible si se usa conjuntamente con Macromedia Flash Communication Server). En sentido estricto, Flash es el entorno y Flash Player es el programa de máquina virtual utilizado para ejecutar los archivos generados con Flash.

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.

En versiones recientes, Macromedia ha ampliado Flash más allá de las animaciones simples, convirtiéndolo en una herramienta de desarrollo completa, para crear principalmente elementos multimedia e interactivos para Internet.

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.

Los archivos de aplicaciones Flash pueden ser decompilados muy fácilmente en su código fuente y sus valores. Hay disponibles varios programas que extraen gráficos, sonido y código de programa a partir de archivos swf. Por ejemplo, un programa de código abierto denominado Flasm (http://flasm.sourceforge.net) permite a los usuarios extraer ActionScript a partir de un archivo swf como máquina virtual de lenguaje intermedio ("bytecode"), editarlo, y luego volverlo a insertar en el archivo. La


Pág. -112-

ofuscación de los archivos swf hace prácticamente imposible la extracción en la mayoría de los casos.

Influencia

La naturaleza y el renombre de Flash ha tenido una gran influencia en el diseño gráfico. Su función rotoscoping ha conducido a una gran popularidad a sus gráficos de vector con rotoscope, realizados con colores pastel de las herramientas de autoría de Flash. Muchos flyers, anuncios, revistas, e incluso sitios web que no utilizaban Flash han adoptado este estilo gráfico. Por ejemplo, la campaña del iPod de Apple con los contornos de carácter en fondos coloridos se puede considerar enormemente influida por el estilo de diseño paradigmático de Flash.

API

La Interfaz de Programación de Aplicaciones de Adobe Flash está basada en Javascript-C, es decir, los comandos de C++ no se interpretan directamente desde C/C++, sino con Javascript. Es decir, da mayor flexibilidad al desarrollador en vista de la ampliación-personalización de la aplicación al tratarse de código abierto (que puede ser ampliado con las APIs de JS); no como antes del Macromedia Flash 7, que era el programa en C++.

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. -113-

Flash CS3 ya emplea la versión 3.0 de Action Script con varios cambios sobre la anterior versión.

6.2. Tutorial de Flash

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.

Flujo de trabajo de Flash

El trabajo en Flash para la creación de una película incluye el dibujo o la importación de una ilustración, su organización en el Escenario y su animación con la Línea de tiempo. La película puede hacerse interactiva utilizando acciones que hagan que la película responda a determinados eventos de cierta manera.

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.

Las películas de Flash pueden reproducirse de varias formas:

- En navegadores Internet, tales como Netscape Navigator y Microsoft Internet Explorer, que estén equipados con Flash Player.

- Con el control ActiveX de Flash en Microsoft Office, Microsoft Internet Explorer para Windows y otros entornos anfitrión de ActiveX.

- En Flash Player, una aplicación independiente de manejo similar al complemento Flash Player.

- Como un proyector independiente, un archivo de película que se puede reproducir sin disponer de Flash Player.

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. -114-

interpolada, es decir, crear los fotogramas primero y último de una animación y dejar que Flash cree los fotogramas intermedios.

Gráficos vectoriales y de mapa de bits

Los PC muestran imágenes en formato vectorial o de mapa de bits. Es muy importante comprender la diferencia existente entre ambos formatos para poder utilizarlos de la forma más eficaz. Flash permite crear y animar gráficos vectoriales compactos. También permite importar y manipular gráficos vectoriales y de mapa de bits creados en otras aplicaciones.

CREACION DE UN PELICULA EN FLASH

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.

Seleccione Archivo > Nuevo .

1 Modificar

Para crear una película nueva y establecer sus propiedades:

2 Elija Modificar > Película . Aparecerá el cuadro de diálogo Propiedades de película.

3 En la sección Velocidad de fotogramas, introduzca el número de fotogramas de animación que deben mostrarse cada segundo. La mayoría de las animaciones que se ven en los PC, especialmente las que se reproducen desde un sitio Web, no necesitan una velocidad mayor de 8 a 12 fps (fotogramas por segundo). (12 fps es la velocidad de fotogramas predeterminada).

4 En la sección Dimensiones, elija una de estas opciones:

- 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. -115-

5 Para establecer el color de fondo de la película, elija un color en la muestra de colores de fondo.

6 Seleccione la unidad de medida en el menú emergente Unidades de regla que se va a utilizar para las reglas que es posible mostrar en las partes superior y lateral de la ventana de la aplicación.

7 Haga clic en Aceptar.

LINEA DE TIEMPO

Línea de tiempo (Timelines)

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.

La información de estado de la Línea de tiempo situada en la parte inferior de la Línea de tiempo indica el número de fotograma actual, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual.


Pág. -116-

Nota: Al reproducir una animación, se muestra la velocidad de fotogramas actual, que puede diferir de la velocidad de fotogramas de la película si el sistema no puede mostrar la animación con la rapidez apropiada.

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.

Modificación del aspecto de la Línea de tiempo

De forma predeterminada, la Línea de tiempo aparece en la parte superior de la ventana de la aplicación principal, encima del Escenario. Para cambiar su posición, puede acoplarla tanto a la parte inferior como a uno de los dos lados de la ventana de la aplicación principal, así como mostrarla en su propia ventana. También es posible ocultarla.

Puede cambiar el tamaño de la Línea de tiempo para cambiar el número de capas y fotogramas visibles. Si hay más capas de las que es posible mostrar en la Línea de tiempo, puede ver las capas adicionales utilizando las barras de desplazamiento situadas a la derecha de la Línea de tiempo.

Para mover la Línea de tiempo:

Arrástrela desde el área por encima del encabezado de la Línea de tiempo.

Arrastre la Línea de tiempo hasta el borde de la ventana de la aplicación para acoplarla. Presione Control (en Windows y en Macintosh) mientras la arrastra para impedir que la Línea de tiempo se acople a los bordes.

Para aumentar o reducir los campos de nombre de las capas:

Arrastre la barra que separa los nombres de capa y la Línea de tiempo.

Para cambiar el tamaño de la Línea de tiempo, utilice uno de los siguientes procedimientos:

Si la Línea de tiempo está acoplada a la ventana de la aplicación principal, arrastre la barra que separa la Línea de tiempo de la ventana de la aplicación.


Pág. -117-

Si la Línea de tiempo no está acoplada a la ventana de la aplicación principal, arrastre la esquina inferior derecha (Windows)

Desplazamiento de la cabeza lectora

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:

Haga clic en la posición del fotograma en el encabezado de la Línea de tiempo o bien arrastre la cabeza lectora hasta la posición deseada.

Para centrar la cabeza lectora en el medio de la película:

Haga clic en el botón Centrar fotograma situado en la parte inferior de la Línea de tiempo.

En la Línea de tiempo, se trabaja con fotogramas y fotogramas clave

ELEMENTOS DE LA LINEA DE TIEMPO

Fotograma: Un fotograma es un espacio en cual podemos tener objetos vectoriales, imágenes o símbolos, un conjunto de fotogramas conforman una animación.

Puede realizar las siguientes modificaciones tanto a los fotogramas como a los fotogramas clave:

Insertar, seleccionar, eliminar y mover fotogramas y fotogramas clave.

Arrastrar fotogramas y fotogramas clave a una nueva posición en la misma capa o en otra diferente.

Copiar y pegar fotogramas y fotogramas clave.

Convertir fotogramas clave en fotogramas.

Arrastrar un elemento desde la ventana Biblioteca hasta el Escenario y agregar el elemento al fotograma clave actual.

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. -118-

Para insertar un nuevo fotograma, seleccione Insertar > Fotograma .

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.

Fotograma clave: Un fotograma clave es un fotograma en el que se define un cambio en una animación o bien se incluyen acciones de fotograma para modificar una película. Los fotogramas clave son fundamentales en la animación interpolada. Puede cambiar la longitud de una animación interpolada arrastrando un fotograma clave en la Línea de tiempo

Para eliminar o modificar un fotograma o fotograma clave, utilice uno de los siguientes procedimientos:

Para eliminar un fotograma, fotograma clave o secuencia de fotogramas, selecciónelo y elija Insertar > Eliminar fotogramas o bien haga clic con el botón derecho del ratón (Windows) o Control-clic (Macintosh) en el fotograma, el fotograma clave o la secuencia y seleccione Eliminar fotograma en el menú contextual. Los fotogramas circundantes permanecerán tal como estaban.

Para mover un fotograma clave o una secuencia de fotogramas y su contenido, arrástrelo a la posición deseada.

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.

Para copiar un fotograma clave o secuencia de fotogramas mediante la operación de arrastre, haga clic con el ratón, presione Alt. (Windows) u Opción (Macintosh) y arrastre el fotograma clave a la nueva posición.

Para copiar y pegar un fotograma o una secuencia de fotogramas, seleccione el fotograma o la secuencia y elija Edición > Copiar fotogramas. Seleccione el fotograma o la secuencia que desee sustituir y elija Edición > Pegar fotogramas .

Para convertir un fotograma clave en un fotograma común, selecciónelo y elija Insertar > Borrar fotograma clave o bien haga clic con el botón derecho del ratón (Windows) o Control-clic (Macintosh) en el fotograma o la secuencia y seleccione Borrar fotograma


Pág. -119-

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.

Para cambiar la longitud de una secuencia interpolada, arrastre el fotograma clave inicial o final a la izquierda o a la derecha.

Interpolación: Una interpolación es la generación automática de secuencias de movimientos en diferentes, delimitados por un fotograma clave inicial y otro final.

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.

Escena: Una escena es un conjunto de capas.

Película: Una película es un conjunto de Escenas, reproduciendo simultáneamente en el orden que fueron creadas. Previsualización de películas en el entorno de creación Para previsualizar las películas, puede utilizar los comandos del menú Control, los botones del Controlador o los comandos de teclado.

Para previsualizar la escena actual, utilice uno de los siguientes procedimientos: Seleccione Control > Reproducir .

Elija Ventana > Barras de herramientas > Controlador (Windows) o bien Ventana > Controlador (Macintosh) y haga clic en Reproducir.

Presione Intro (Windows) o Retorno (Macintosh). La secuencia de la animación se reproducirá en la ventana de la película a la velocidad de fotogramas especificada.

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. -120-

Puede modificar la reproducción de la película utilizando los comandos del menú Control. Observe que también deberá seleccionar Control > Reproducir para previsualizar una película al utilizar los siguientes comandos.

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.

Para habilitar acciones de fotograma o de botón:

Seleccione Control > Habilitar acciones de fotogramas simples o Habilitar botones simples . Para probar todas las funciones interactivas y la animación: Elija Control > Probar película o Control > Probar escena . Flash crea una película de Flash Player (un archivo SWF), la abre en otra ventana y la reproduce con Flash Player. El archivo SWF se coloca en la misma carpeta que el archivo FLA. Para probar la película en un navegador Web: Seleccione Archivo > Previsualización de publicación > HTML .

Almacenamiento de archivos de películas Puede guardar una película FLA de Flash utilizando su nombre y ubicación actuales, o bien guardar el documento utilizando un nombre o una ubicación diferentes. También puede volver a la última versión guardada de un archivo.

Para guardar un documento:

1 Utilice uno de los siguientes procedimientos: Para sobrescribir la versión actual existente en el disco, seleccione Archivo > Guardar. Para guardar el archivo en una ubicación diferente o con otro nombre, seleccione Archivo > Guardar como.

2 Si selecciona el comando Guardar como o si nunca a guardado antes el archivo, introduzca el nombre y la ubicación del archivo.

3 Haga clic en Guardar. Para volver a la última versión guardada de un archivo:

Seleccione Archivo > Descartar cambios


Pág. -121-

CREAR UNA ANIMACION

Crear una animación

1. Archivo > Nuevo 2. Crear Objeto 3. F5 asta cubrir cierto numero de fotogramas 4. F6 5. Mover el Objeto Creado 6. Clic derecho sobre el primer y ultimo fotograma clave 7. Seleccionar crear Interpolación de movimiento

Uso de múltiples capas

1. Archivo > Nuevo 2. Crear Objeto 3. F5 asta cubrir cierto numero de fotogramas 4. F6 5. Mover el Objeto Creado 6. Clic derecho sobre el primer y ultimo fotograma clave 7. Seleccionar crear Interpolación de movimiento 8. Dar clic al icono de agregar capa 9. Regresamos en el punto 2 de este procedimiento


Pág. -122-

BARRA DE HERRAMIENTAS

Barra de herramientas

Las herramientas de la paleta de herramientas le permiten dibujar, pintar, seleccionar y modificar las ilustraciones, así como cambiar la visualización del Escenario. La paleta de herramientas se divide en cuatro secciones: La sección Herramientas contiene las herramientas de dibujo, pintura y selección. La sección Ver contiene herramientas para ampliar y reducir, así como para realizar recorridos de la ventana de la aplicación. La sección Colores contiene modificadores de los colores de trazo y relleno. La sección Opciones muestra los modificadores de la herramienta seleccionada, los cuales afectan a las operaciones de pintura o edición de dicha herramienta.

Para mostrar u ocultar la paleta de herramientas: Seleccione Ventana > Herramientas .


Pág. -123-

Para seleccionar una herramienta, utilice uno de los siguientes procedimientos: Haga clic en la herramienta que desea utilizar. Según la herramienta que haya seleccionado, debajo de la paleta de herramientas aparecerá un juego de modificadores específico. Utilice el método abreviado del teclado para la herramienta.

Uso de barras de herramientas (Windows). En Windows, puede utilizar el submenú Barras de herramientas para mostrar y ocultar las barras de herramientas, las cuales permiten acceder rápidamente a los comandos de los menús. Puede acoplar las barras de herramientas estándar y de dibujo o bien dejar que floten sobre la ventana.

Para mostrar u ocultar las barras de herramientas:

Seleccione Ventana > Barras de herramientas y elija una de las siguientes opciones:

Principal muestra la barra de herramientas estándar, que contiene métodos abreviados para los comandos de menús estándar como, por ejemplo, Abrir e Imprimir.

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.

Controlador muestra el Controlador, que permite controlar la reproducción de la Previsualización de la película. Para mover una barra de herramientas flotante: Arrastre cualquier parte del fondo o del título de la barra. Para acoplar la barra de herramientas, arrástrela hasta la parte superior de la ventana de Flash. La barra de herramientas adoptará automáticamente un diseño horizontal si se acopla a la parte superior de la pantalla o bien un diseño vertical si se acopla al extremo derecho o izquierdo de la pantalla. Para evitar que la barra se acople, presione la tecla Control al arrastrar la barra de herramientas sobre un extremo de la ventana.


Pág. -124-

Herramientas de dibujo y pintura de Flash

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.

Para crear trazos similares a los obtenidos al pintar en un lienzo, se utiliza la herramienta Pincel.


Pág. -125-

Al utilizar una herramienta de dibujo o pintura para crear un objeto, la herramienta aplica los atributos actuales de relleno y trazo al objeto. Para cambiar los atributos de relleno y trazo de los objetos existentes, puede utilizar las herramientas Cubo de pintura y Bote de tinta.

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.

Solapamiento de formas en Flash

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 Subselección: Esta herramienta permite distorsionar un objeto moviendo sus nodos.

Herramienta Línea: Esta herramienta permite trazar líneas rectas

Herramienta Lazo: Esta herramienta permite la selección de áreas determinadas para aplicarle otra herramienta.

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. -126-

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.

Para dibujar rectas con la herramienta Pluma:

1 Seleccione la herramienta Pluma.

2 Seleccione los atributos de trazo y relleno.

3 Coloque el puntero en el Escenario, en el inicio de la línea recta y haga clic para definir el primer punto de anclaje.

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°.

5 Siga haciendo clic para crear más segmentos rectos.

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. -127-

Flash muestra un selector cuadrado en la esquina inferior derecha de los cuadros de texto que pueden editarse que indica la posibilidad de modificar el tamaño del cuadro en vertical y en horizontal según la cantidad de texto que deba introducirse.

Para crear texto:

1 Seleccione la herramienta Texto. 2 Realice uno de los siguientes pasos:

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 cambiar las dimensiones de un bloque de texto: Arrastre el selector de cambio de tamaño. Para cambiar un bloque de texto de anchura fija a extensible, y viceversa: Haga doble clic en el selector de cambio de tamaño. Selección de fuente, tamaño de tipo, estilo y color. Se puede establecer la fuente, el tamaño, el estilo y el color del tipo seleccionado mediante el panel Párrafo. Al establecer el color del tipo, sólo pueden utilizarse colores sólidos y no se pueden utilizar los degradados. Para aplicar un degradado a un tipo, debe convertirlo en las líneas y los rellenos que lo componen.

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.

3 Haga clic en el triángulo situado junto al valor Tamaño de fuente y arrastre el deslizador para seleccionar un valor o introduzca un valor de tamaño de fuente.


Pág. -128-

El tamaño del tipo se define en puntos independientemente de las unidades de regla actuales.

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:

Elija una muestra de color de la paleta.

Introduzca el valor hexadecimal de un color en el cuadro de texto. Haga clic en el selector de color y elija un color.

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.

Herramienta Rectángulo: Las herramientas Línea, Óvalo y Rectángulo permiten crear fácilmente las formas geométricas habituales. Las herramientas Óvalo y Rectángulo crean tanto formas rellenas como formas sólo definidas por el trazo. Puede utilizar la herramienta Rectángulo para crear rectángulos con esquinas rectas o redondeadas.

Para dibujar líneas rectas, óvalos o rectángulos:

1 Seleccione las herramientas Línea, Óvalo o Rectángulo.

2 Seleccione los atributos de trazo y relleno.

Nota: No es posible establecer atributos de relleno para la herramienta Línea.

3 En la herramienta Rectángulo, haga clic en el modificador Rectángulo redondeado para especificar que desea esquinas redondeadas e indique el valor del radio del ángulo. Si el valor es cero, las esquinas son rectas.

4 Arrastre sobre el Escenario. Si está utilizando la herramienta Rectángulo, presione las teclas de dirección hacia arriba o abajo para ajustar el radio de la esquina redondeada.

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°.

Herramienta Lápiz: Para dibujar líneas y formas, se utiliza la herramienta Lápiz, de manera muy similar a cómo se emplea un lápiz real para realizar un dibujo. Para aplicar un suavizado o un enderezamiento a las líneas y las formas según se va dibujando, basta con seleccionar un modo de dibujo para la herramienta Lápiz. Para dibujar con la herramienta Lápiz:


Pág. -129-

1 Seleccione la herramienta Lápiz.

2 Seleccione un estilo y color de trazo.

3 Seleccione un modo de dibujo de las opciones de la caja de herramientas:

Seleccione Enderezar para dibujar líneas rectas y convertir figuras similares a triángulos, óvalos, círculos, rectángulos y cuadrados en estas formas geométricas.

Seleccione Suavizar para dibujar curvas suaves.

Seleccione Tinta para dibujar líneas a mano alzada sin aplicarles ninguna modificación.

Líneas dibujadas con los modos Enderezar, Suavizar y Tinta.

4 Seleccione los atributos de estilo y peso del trazo en el panel Trazo.

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.

Trazo de pincel de anchura variable dibujado con una pluma.

Para pintar con la herramienta Pincel:

1 Seleccione la herramienta Pincel.

2 Seleccione el color de relleno.

3 Haga clic en el modificador de modo Pincel y seleccione un modo de pintura:


Pág. -130-

Pintar normal pinta sobre las líneas y rellenos de la misma capa.

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 selección aplica un nuevo relleno a la selección al seleccionarlo en el modificador Relleno o en el panel Relleno. (Esta opción es como seleccionar un área rellena y aplicar un nuevo relleno).

Rellenos de pintura pinta rellenos y áreas vacías y no afecta a las líneas.

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.

4 Seleccione el tamaño, la forma y el color del pincel con los modificadores de la herramienta Pincel.

5 Si acopla a su PC una tablilla sensible a la presión puede seleccionar el modificador Presión para variar la anchura de los trazos de pincel aumentando o reduciendo la presión sobre la pluma.

6 Arrastre sobre el Escenario. Arrastre con Mayús presionada para dibujar sólo trazos de pincel verticales u horizontales.

Herramienta Bote de pintura

La herramienta Cubo de pintura rellena con color áreas cerradas: Puede tanto rellenar áreas vacías como cambiar el color de áreas ya pintadas. Puede utilizar colores sólidos, rellenos 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. -131-

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:

1 Seleccione la herramienta Cubo de pintura.

2 Seleccione el color y el estilo del relleno.

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.

4 Haga clic en la forma o el área encerrada que desee rellenar.

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. -132-

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 tamaño de un degradado lineal o un relleno, arrastre el selector cuadrado situado en el centro del recuadro de delimitación.

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. -133-

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.

Herramienta Cubo de tinta

La herramienta Bote de tinta permite especificar el color, la anchura de línea y el estilo de los trazos de las líneas o contornos de formas. Puede aplicar únicamente colores sólidos, pero no degradados ni mapas de bits, a las líneas y contornos de formas.

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:

1 Seleccione la herramienta Bote de tinta. 2 Seleccione el color del trazo.

3 Seleccione el estilo y la anchura de la línea en el panel Trazo.

4 Haga clic en un objeto del Escenario para aplicar las modificaciones de trazo.

Herramienta Cuentagotas

La herramienta Cuentagotas permite copiar los atributos de trazo y relleno de un objeto y aplicarlos inmediatamente a otro objeto. Esta herramienta también permite copiar la imagen de un mapa de bits para utilizarla como relleno.

Para utilizar la herramienta Cuentagotas para copiar y aplicar atributos de trazo o de relleno:

1 Seleccione la herramienta Cuentagotas y haga clic en el trazo o área rellena cuyos atributos desea aplicar a otro trazo o área rellena. Al hacer clic en un trazo, la herramienta cambiará automáticamente a la herramienta Bote de tinta. Al hacer clic en una área rellena, la herramienta cambiará automáticamente a la herramienta Cubo de pintura y se activará el modificador Bloquear relleno.


Pág. -134-

2 Haga clic en otro trazo o área rellena para aplicar los nuevos atributos.

Herramienta Borradores

La herramienta Borrador permite eliminar trazos y rellenos. Puede borrar todo el Escenario con rapidez, borrar los diferentes segmentos de trazos o áreas rellenas, o borrar por arrastre.

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.

Para borrar con rapidez todo el Escenario:

Haga doble clic en la herramienta Borrador.

Para eliminar segmentos de trazos o áreas rellenas:

1 Seleccione la herramienta Borrador y, a continuación, haga clic en el modificador

Grifo.

2 Haga clic en el segmento de trazo o el área rellena que desea borrar.

Para borrar por arrastre:

1 Seleccione la herramienta Borrador.

2 Haga clic en el modificador Modo Borrador y seleccione un modo de borrado:

Borrar normal borra trazos y rellenos de la misma capa.

Borrar rellenos sólo borra rellenos, sin afectar a los trazos.

Borrar líneas sólo borra los trazos, sin afectar a los rellenos.

Borrar rellenos seleccionados sólo borra los rellenos actualmente seleccionados y no afecta a los trazos, estén seleccionados o no. (Seleccione los rellenos que desea borrar antes de utilizar la herramienta Borrador en este modo).

Borrar dentro sólo borra el relleno en el que se ha iniciado el trazo de borrador. Si el punto de inicio de borrado está vacío, no se borra nada. Este modo no afecta a los trazos.

3 Haga clic en el modificador Forma de borrador y seleccione el tamaño y la forma del borrador. Asegúrese de no seleccionar el modificador Grifo.

4 Arrastre sobre el Escenario

Herramienta Mano


Pág. -135-

Al aumentar el tamaño de visualización del Escenario, es posible que no se vea todo su contenido. La herramienta Mano permite desplazar el Escenario para cambiar la visualización sin tener que cambiar el grado de aumento.

Para mover la visualización del Escenario:

1 Seleccione la herramienta Mano. Para cambiar temporalmente de otra herramienta a la herramienta Mano, mantenga presionada la barra espaciadora y haga clic en esa herramienta en la paleta de herramientas.

2 Arrastre el Escenario.

Herramienta Zoom

Puede cambiar el grado de aumento/reducción para ver todo el Escenario en la pantalla o una zona determinada del dibujo aumentada. El grado máximo de aumento/reducción depende de la resolución del monitor y del tamaño de la película.

Utilice las siguientes técnicas para aumentar o reducir la visualización del Escenario:

Para aumentar un elemento determinado, seleccione la herramienta Zoom y haga clic en el elemento. Para cambiar la herramienta Zoom entre aumento y reducción, utilice los modificadores Agrandar y Reducir o mantenga presionadas las teclas Alt. (Windows) u Opción (Macintosh). 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 realizar un aumento o una reducción con un determinado porcentaje, seleccione Ver > magnificación y se desplegara un submenú donde podrá elegir un aumento del Zoom, y seleccione un porcentaje del submenú o bien seleccione un porcentaje del control de Zoom situado en la esquina inferior izquierda de la ventana de la aplicación.

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. -136-

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

Para seleccionar un relleno transparente, de color sólido, con degradado o de mapa de bits, puede utilizar el panel Relleno. El panel Relleno también permite crear y editar rellenos con degradados. Puede aplicar rellenos de mapa de bits utilizando los mapas de bits importados al archivo actual. Si desea obtener información sobre cómo crear un relleno de mapa de bits.

Para aplicar un relleno transparente mediante el panel Relleno:

1 Seleccione Ventana > Mezclador de color .

2 Seleccione Ninguno en el mezclador de color.

Nota: Puede aplicar un relleno transparente a un nuevo objeto, pero no a uno ya existente. En su lugar, seleccione el relleno existente y elimínelo.

Para aplicar un relleno de color sólido mediante el panel Relleno:

1 Seleccione Ventana > Mezclador de color .

2 Seleccione Sólido en el menú mezclador de color.

3 Haga clic en el triángulo situado junto al cuadro de color Relleno y utilice uno de los siguientes procedimientos:

Arrastre para seleccionar un color de la paleta.

Escriba el valor hexadecimal del color en el cuadro de texto.

Haga clic en el botón Selector de color de la ventana emergente de color y seleccione un color del selector de color.

Para aplicar, crear o editar un relleno con degradado mediante el panel Relleno:

1 Seleccione Ventana > Mezclador de color.

2 Seleccione una de las opciones siguientes del menú Relleno:


Pág. -137-

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.

3 Haga clic en el triángulo situado junto al cuadro de color Relleno de la caja de herramientas y seleccione un degradado de la paleta.

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.

6 Para eliminar un puntero del degradado, arrastre el puntero fuera de la barra de definición del degradado.

7 Para guardar un degradado, haga clic en el triángulo situado en la esquina superior derecha del panel Relleno y seleccione Agregar degradado del menú emergente situado en la esquina superior derecha. Se agregará el degradado a la paleta Muestras del documento actual.


Pág. -138-

Para aplicar un relleno de mapa de bits mediante el panel Relleno:

1 Seleccione Ventana > Mezclador de color.

2 Seleccione Mapa de bits en el menú mezclador de color.

3 Haga clic en un mapa de bits de la ventana Relleno de mapa de bits que aparece en el panel Relleno.

Puede modificar un relleno de mapa de bits utilizando la herramienta Cubo de pintura.

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:

1 seleccione el tipo de contorno o línea en la barra de propiedades

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:

Seleccione una muestra de color de la paleta. Escriba el valor hexadecimal del color en el cuadro de texto. Haga clic en el botón Sin color para aplicar un trazo transparente.

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.

Haga clic en el botón Selector de color y seleccione un color del selector.


Pág. -139-

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

Al interpolar formas se crea un efecto similar al de transformación y las formas parecen cambiar en el transcurso del tiempo. Flash también puede interpolar la ubicación, el tamaño y el color de las formas. La interpolación de una forma a la vez suele producir los mejores resultados. Si interpola varias capas de una sola vez, todas las formas deben estar en la misma capa.

Flash no puede interpolar la forma de grupos, símbolos, bloques de texto ni imágenes de mapas de bits. Use Modificar > Separar para aplicar la interpolación de forma a estos elementos. Para controlar los cambios de forma más complejos o improbables, use los


Pág. -140-

consejos de forma que controlan la manera en que partes de la forma original se desplazan a la nueva forma. Para interpolar una forma:

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.

Para empezar la interpolación de forma rápidamente y ralentizar la interpolación hacia el final de la animación, arrastre el deslizador hacia arriba o introduzca un valor entre 1 y 100.La velocidad de cambio predeterminada entre los fotogramas interpolados es constante. La opción Aceleración crea una apariencia más natural de transformación ajustando gradualmente la velocidad de cambio.

7 Elija una opción para Mezcla:

Distributiva crea una animación con formas intermedias suaves y regulares. Angular crea una animación que mantiene las esquinas y líneas rectas en las formas intermedias.

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. -141-

mapas de bits situados en los símbolos. Instancias de símbolos, cada una con su propio efecto de color.

Cuando se cambia el color y la transparencia de una instancia en un fotograma específico, Flash realiza el cambio en cuanto muestra el fotograma. Para realizar cambios graduales de color es necesario interpolar el cambio de color. Al interpolar el color se introducen distintas configuraciones de efectos en los fotogramas de inicio y final de una instancia y después se interpolan las configuraciones para que los colores de las instancias cambien en el tiempo. La interpolación cambia gradualmente el color o la transparencia de una instancia. Nota: Si se aplica un efecto de color al clip de una película de varios fotogramas, Flash aplica el efecto a cada fotograma del clip.

Para cambiar el color y la transparencia de una instancia:

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.

2 Seleccione una de las siguientes opciones del panel Efecto:

Mediante la opción Alfa se ajusta la transparencia de la instancia.

Cualquier cambio realizado se actualiza de forma automática en el Escenario.

Efecto Tinta

1 Seleccione una instancia en el Escenario y elija Ventana > Paneles > Efecto.


2 Seleccione una de las siguiente opción del panel 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

1 Seleccione una instancia en el Escenario y en la barra de propiedades de clic en la opción de color y seleccione brillo.


Pág. -142-



Mediante la opción Brillo se ajusta la luminosidad u opacidad relativas de la imagen, medidas en una escala de negro (-100%) a blanco (100%).


Efecto Avanzado

Para cambiar el color y la transparencia de una instancia:

1 Seleccione una instancia en el Escenario y en la barra de propiedades de clic en la opción de color y seleccione avanzado.



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).

Cualquier cambio realizado se actualiza de forma automática en el Escenario

CREACION DE CLIPS

Creación de Clips de Películas

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. -143-

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.

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.

Nota: La interactividad y animación en los símbolos de clips de películas no funciona cuando la película se reproduce en el entorno de creación de Flash. Para ver la interactividad y animación de un clip de película, elija Control > Probar película o Control > Probar escena . Puede crear un símbolo a partir de los objetos seleccionados en el Escenario o crear un símbolo vacío y llenar o importar el contenido en modo de edición de símbolos. Los símbolos pueden tener toda la funcionalidad disponible en Flash, incluida la animación.

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. -144-

Para crear un símbolo vacío nuevo:

1 Asegúrese de que no hay nada seleccionado en el Escenario y realice uno de los siguientes pasos:

Elija Insertar > Nuevo símbolo .

Haga clic en el botón Nuevo símbolo en la parte inferior izquierda de la ventana Biblioteca.

Elija Nuevo símbolo del menú Opciones de biblioteca en la esquina superior derecha de la ventana Biblioteca.

2 En el cuadro de diálogo Propiedades de símbolo, escriba el nombre del símbolo y elija el comportamiento: Gráfico, Botón o Clip de película.


Flash agrega los símbolos a la biblioteca y cambia al modo de edición de símbolos. En este modo, el nombre del símbolo aparece encima de la esquina superior izquierda, encima de la Línea de tiempo y una cruz filar indica el punto de registro del símbolo.

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:

Elija Edición > Editar símbolo.


Pág. -145-

Haga clic en el botón Escena en la esquina superior izquierda de la ventana de documentos.

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ú.

Creación de Clips Gráficos

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.

1 Asegúrese de que no hay nada seleccionado en el Escenario y realice uno de los siguientes pasos:

Elija Insertar > Nuevo símbolo .


Pág. -146-

Haga clic en el botón Nuevo símbolo en la parte inferior izquierda de la ventana Biblioteca.

Elija Nuevo símbolo del menú Opciones de biblioteca en la esquina superior derecha de la ventana Biblioteca.

2 En el cuadro de diálogo Propiedades de símbolo, escriba el nombre del símbolo y elija el comportamiento: Gráfico.


Flash agrega los símbolos a la biblioteca y cambia al modo de edición de símbolos. En este modo, el nombre del símbolo aparece encima de la esquina superior izquierda, encima de la Línea de tiempo y una cruz filar indica el punto de registro del símbolo.

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:

Elija Edición > Editar símbolo .

Haga clic en el botón Escena en la esquina superior izquierda de la ventana de documentos.

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ú.

CREACION DE CLIPS BOTONES

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. -147-

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.

Cada fotograma de la Línea de tiempo de un símbolo de botón tiene una función específica:

El primer fotograma es el estado Reposo, representa el botón siempre que el puntero no esté sobre él.

El segundo fotograma es el estado Sobre, representa el aspecto del botón cuando el puntero se encuentra sobre el mismo.

El tercer fotograma es el estado Presionado, representa el aspecto del botón cuando se hace clic sobre el mismo.

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.

Contenido típico de los fotogramas Reposo, Sobre, Presionado y Zona activa.

Para crear un botón: 1 Elija Edición > Anular selección de todo para asegurarse de que nada queda seleccionado en el Escenario. 2 Elija Insertar > Nuevo símbolo o presione ctrl. + F8 (Windows) o Comando + F8


Pág. -148-

(Macintosh). Para crear el botón, debe convertir los fotogramas del botón en fotogramas clave.

3 En el cuadro de diálogo Propiedades de símbolo, escriba un nombre para el símbolo de botón nuevo y para Comportamiento elija Botón. Flash cambia al modo de edición de símbolos. La cabecera de la Línea de tiempo cambia para mostrar cuatro fotogramas consecutivos denominados: Reposo, Sobre, Presionado y Zona activa. El primer fotograma, Reposo, es un fotograma clave vacío.

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.

7 Repita los pasos 5 y 6 para los fotogramas Presionado y Zona activa. El fotograma Zona activa no está visible en el Escenario, pero define el área del botón que responde cuando se hace clic. Asegúrese de que la imagen del fotograma Zona activa es una área sólida lo bastante grande para abarcar todos los elementos gráficos de los fotogramas Reposo, Presionado y Sobre. También puede ser más grande que el botón visible. Si no se especifica un fotograma Zona activa, se utilizará la imagen para el estado Reposo como fotograma Zona activa. Puede crear un estado de desplazamiento de desconexión colocando el fotograma Zona activa en una ubicación diferente de los otros fotogramas de botón.

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. -149-

ACTIONSCRIPT

Ventana de Acciones

Las acciones para un botón, un clip de película o un fotograma se configuran en el panel Acciones. La utilización de los controles del panel Acciones en modo Normal permite insertar acciones sin tener que utilizar ActionScript; si es un usuario experto en ActionScript puede construir sus propios scripts. Las instrucciones pueden estar formadas por una sola acción, como solicitar la detención de la reproducción de una película, o bien por una serie de acciones, como primero evaluar una condición y, a continuación, realizar una acción. La configuración de muchas de las acciones requiere poca experiencia en programación. Para otras acciones, es necesaria cierta familiaridad con los lenguajes de programación y están diseñadas para un desarrollo avanzado.

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.

Las siguientes instrucciones describen el modo de definir acciones para fotogramas mediante el panel Acciones utilizado en modo Normal. Si desea obtener información sobre la utilización del panel Acciones en modo Experto, consulte Ayuda de ActionScript .


Pág. -150-

Para asignar una acción a un fotograma clave:

1 Seleccione un fotograma clave en la Línea de tiempo y elija Ventana > Acciones. Si el fotograma seleccionado no es un fotograma clave, la acción se asignará al fotograma clave anterior. Si no se ha seleccionado ningún fotograma, o si la selección incluye varios fotogramas, el panel Acciones estará atenuado. (Si desea obtener información acerca de la asignación de acciones a botones o clips de película.

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.

3 Para asignar una acción utilice uno de los siguientes procedimientos:

Haga doble clic en una acción en la categoría Acciones básicas en la lista de la Caja de herramientas.

Arrastre una acción desde la lista de la Caja de herramientas, situada a la izquierda, hasta la lista Acciones, situada en la parte derecha del panel.

Haga clic en el botón Agregar (+) y elija una sentencia en el menú emergente.

Utilice el método abreviado de teclado.

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.

5 Repita los pasos 3 y 4 para asignar más acciones, si fuera necesario. Para probar una acción de fotograma en una escena:

Seleccione Control > Probar película


Pág. -151-

FUNCIONES ACTIONSCRIPT

Goto

Para saltar a un fotograma o a una escena específicos de la película, se utiliza la acción Ir a. Cuando la película salta a un fotograma, se puede optar entre reproducirla a partir del nuevo fotograma (predeterminado) o detenerla en el mismo. La película también puede saltar a una escena y reproducir un fotograma especificado o el primer fotograma de la escena siguiente o de la anterior. Para saltar a un fotograma o a una escena:

1 Seleccione la instancia de fotograma, de botón o de clip de película a la que desea asignar la acción.

2 Seleccione Ventana> Acciones para mostrar el panel Acciones.

3 En la lista de la Caja de herramientas, haga clic en la categoría Acciones básicas para mostrar las acciones básicas, y seleccione la acción Ir a.

Flash inserta la acción Ir a y reproducir en la ventana Script.

4 Para que la película siga reproduciéndose tras el salto, mantenga seleccionada la opción Ir a y reproducir (predeterminada) en la sección Parámetros. Para detener la película en un fotograma especificado, anule la selección de Ir a y reproducir. La acción cambia a Ir a y detener.

5 En el menú emergente Escena de la sección Parámetros, especifique la escena de destino: Puede especificar la escena actual o una escena indicada, o siguiente o anterior para que la película salte al primer fotograma de la escena.

6 En el menú emergente Tipo de la sección Parámetros, especifique un fotograma de destino.

Fotograma siguiente o anterior.

Seleccione Número de fotogramas, Etiqueta de fotograma o Expresión para especificar un fotograma. Una expresión es cualquier parte de una sentencia que genera un valor, como 1+1.

7 Si selecciona Número de fotogramas, Etiqueta de fotograma o Expresión en el paso 6, para Fotograma, introduzca el número de fotograma, la etiqueta o una expresión que calcule un número de fotograma o una etiqueta.

La siguiente sentencia indica el fotograma situado cinco fotogramas por delante del fotograma que contiene la acción:

gotoAndStop(_currentframe + 5);

Stop


Pág. -152-

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.

Para iniciar o detener una película:

1 Seleccione la instancia de fotograma, de botón o de clip de película a la que desea asignar la acción.

2 Seleccione Ventana > Acciones para mostrar el panel Acciones.

3 En la lista de la Caja de herramientas, haga clic en la categoría Acciones básicas para mostrar las acciones básicas, y seleccione la acción Detener.

Flash inserta un ActionScript como el siguiente en la ventana Script:

onClipEvent (load) { stop (); }

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

Sintaxis: getURL(Url [, ventana [, variables]]);

Argumentos: Url La URL de la cual obtener el documento. La URL debe estar en el mismo subdominio que la URL donde reside actualmente la película.

Ventana Un argumento opcional que especifica la ventana o el fotograma HTML en el que debería cargarse el documento. Introduzca el nombre de una ventana específica o seleccione uno de los nombres de destino reservados siguientes: _self especifica el fotograma actual de la ventana activa.

_blank especifica una nueva ventana.

_parent especifica el elemento principal del fotograma actual.

_top especifica el fotograma de nivel superior de la ventana actual.


Pág. -153-

Variables Un argumento opcional que especifica un método para enviar variables. Si no hay variables, omita este argumento; en caso contrario, especifique si se cargan las variables utilizando un método GET o POST . GET anexa las variables al final de la URL y se utiliza para un número pequeño de variables. POST envía las variables en un encabezado HTTP aparte y se utiliza para cadenas largas de variables.

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(release) { getURL(incomingAd, "_blank"); }

On Mouse Event

La asignación de una acción a un botón asigna también, de forma automática, una acción de evento de ratón para controlar o administrar la acción. Cada controlador comienza con la palabra on seguida del evento al que responde el controlador. Por ejemplo:

on (release) on (keyPress "<Space>") on (rollOver) El parámetro Liberar indica que el usuario presionó y liberó el botón del ratón. 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:

1 Seleccione el botón al que quiere asignar una acció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.

3 Seleccione una de las siguientes opciones: Seleccione la acción On Mouse Event. Seleccione una acción en la categoría Acciones básicas.

4 En la sección Parámetros, para Evento, seleccione un evento de teclado o de ratón que desencadenará la acción:

Presionar: desencadena la acción al presionar el botón del ratón mientras el puntero se encuentra sobre el botón.


Pág. -154-

Liberar (predeterminado): desencadena la acción al liberar el botón del ratón mientras el puntero se encuentra sobre el botón. Esto configura el comportamiento estándar de hacer clic.

Liberar fuera: desencadena la acción al liberar el botón del ratón cuando el puntero no se encuentra sobre el botón.

Presión de tecla: desencadena la acción al presionar la tecla especificada. Si selecciona esta opción, debe introducir la tecla en el cuadro de texto.

Situar sobre objeto: desencadena la acción al desplazar el puntero sobre el botón.

Situar fuera de objeto: desencadena la acción al desplazar el puntero fuera del botón.

Arrastrar sobre: desencadena la acción al presionar el botón del ratón mientras el puntero se encuentra sobre el botón, se desplaza fuera del botón y, a continuación, vuelve a desplazarse sobre el 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:

Elija Control > Habilitar acciones de fotogramas simples.

Seleccione Control > Probar película

StartDrag

Sintaxis: startDrag(destino); startDrag(destino,[bloqueado]); startDrag(destino [,bloqueado [,izquierda , arriba , derecha, abajo]]);

Argumentos: Destino La ruta de destino del clip de película que se va a arrastrar.

Bloqueado Un valor Booleano que especifica si el clip de película arrastrable está bloqueado en el centro de la posición del ratón ( true ), o bloqueado en el punto en el que el usuario hizo clic por primera vez en el clip de película ( false ). Este argumento es opcional.

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. -155-

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:

on(press) { startDrag("",true); } on(release) { stopDrag(); }

StopDrag

Sintaxis: stopDrag();

Argumentos: Ninguno.

Descripción: Acción; detiene la operación de arrastre actual.

Reproductor: Flash 4 o posterior.

Ejemplo: Esta sentencia detiene la acción de arrastre de la instancia MC cuando el usuario suelta el botón del ratón.

on(press) { startDrag("mc"); } on(release) { stopdrag(); }

Play

Sintaxis: play();

Argumentos: Ninguno.

Descripción: Acción; desplaza la cabeza lectora hacia delante en la Línea de tiempo.


Ejemplo: El código siguiente utiliza la sentencia if para comprobar el valor de un nombre que introduce el usuario. Si el usuario introduce Steve , se llama a la acción play y la cabeza lectora avanza en la Línea de tiempo. Si el usuario introduce cualquier cosa diferente de Steve , la película no se reproduce y aparece un campo de texto con el nombre de variable alert .

stop(); if (name = "Steve") { play(); } else { alert = "You are not Steve!"; }

LoadMovie

Sintaxis: loadMovie(url [, ubicación/destino, variables]]);

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. -156-

Destino Un argumento opcional que especifica un clip de película de destino que se sustituirá con la película cargada. La película cargada hereda las propiedades de posición, rotación y escala del clip de película de destino. Especificar destino es lo mismo que especificar el (nivel) ubicación de una película de destino, no debería especificar ambos.

Ubicación Un argumento opcional que especifica el nivel en el que la película está cargada. La película cargada hereda las propiedades de posición, rotación y escala del clip de película de destino. Para cargar una nueva película además de las películas existentes, especifique un nivel que no esté ocupado por otra película. Para sustituir una película existente con la película cargada, especifique un nivel que esté actualmente ocupado por otra película. Para sustituir la película original y descargar todos los niveles, cargue la nueva película en el nivel 0. La película del nivel 0 establece la velocidad de los fotogramas, el color de fondo y el tamaño de los fotogramas de todas las demás películas cargadas.

Variables Un argumento opcional que especifica un método para enviar variables asociadas con la película que se va a cargar. El argumento debe ser la cadena "GET" o "POST". Si no hay variables, omita este argumento; en caso contrario, especifique si se cargan las variables utilizando un método GET o POST . GET anexa las variables al final de la URL y se utiliza para un número pequeño de variables. POST envía las variables en un encabezado HTTP aparte y se utiliza para cadenas largas de variables.

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 .


Ejemplo: Esta sentencia loadMovie está anexada a un botón de navegación con la etiqueta Productos. Hay un clip de película invisible en el Escenario con el nombre de instancia dropZone. La acción loadMovie utiliza este clip de película como parámetro de destino para cargar los productos del archivo SWF, en la posición correcta del Escenario.

on(release) { loadMovie("products.swf",_root.dropZone); }


Pág. -157-

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:

Haga clic en el botón Eliminar del panel Escena. Abra la escena que desea eliminar y seleccione Insertar > Eliminar escena . Para cambiar el nombre de una escena:

Haga doble clic en el nombre de la escena en el panel Escena y escriba el nuevo nombre.

Para duplicar una escena:

Haga clic en el botón Duplicar del panel Escena.

Para cambiar el orden de las escenas de la película:

Arrastre el nombre de la escena a otra posición en el panel Escena.


Pág. -158-

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:

Sound Designer II (sólo Macintosh) Películas QuickTime sólo sonido (Windows o Macintosh)

Sun AU (Windows o Macintosh)

Sonidos System 7 (sólo Macintosh)

WAV (Windows o Macintosh)

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.

Los sonidos pueden necesitar una cantidad considerable de espacio en la unidad de disco y en la memoria RAM. No obstante los datos de sonido MP3 están comprimidos y son más pequeños que los datos de los sonidos WAV o AIFF. En general, cuando utilice archivos WAV o AIFF, es preferible utilizar sonidos mono de 22 Khz. y 16 bits (los estéreo utilizan el doble de información), pero Flash puede importar sonidos de 8 o de 16 bits a velocidades de muestra de 11, 22 ó 44 Khz. También permite convertir los sonidos a velocidades más bajas al exportarlos.

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.

Para importar un sonido: 1 Elija Archivo > Importar .

2 En el cuadro de diálogo Importar, localice y abra el archivo de sonido deseado.

El sonido importado se coloca en la biblioteca para la película activa


Pág. -159-

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.

Para rotar un objeto arrastrándolo: 1 Seleccione el objeto.

2 Realice uno de los siguientes pasos:

Seleccione la herramienta Flecha y, en la sección Opciones de la caja de herramientas, haga clic en el Modificador de rotación.

Elija Modificar > Transformar > Rotar.

3 Arrastre uno de los selectores de las esquinas.

4 Haga clic en un área vacía del Escenario o elija Modificar > Transformar > Rotar para ocultar los selectores de rotación.

Para rotar un objeto con el panel Transformar: 1 Seleccione el objeto.

2 Seleccione Ventana > Transformar .

3 Haga clic en Rotar.

4 Introduzca un ángulo de rotación.

5 Presione Intro (Windows) o Retorno (Macintosh) para aplicar la rotación.

Para rotar y cambiar el tamaño proporcional de un objeto simultáneamente: 1 Seleccione el objeto.

2 Elija Modificar > Transformar > Escalar y rotar .


Pág. -160-

3 Introduzca los valores para Escala y Rotación.


Escalar

Al cambiar el tamaño proporcional de un objeto, el tamaño de dicho objeto aumenta o reduce en horizontal, en vertical o en ambas direcciones. Para escalar un objeto, arrástrelo o introduzca los valores en el panel Transformar. Las instancias, grupos y bloques de tipos se escalan en relación a sus puntos de registro.

Para cambiar el tamaño proporcional de un objeto mediante el arrastre: 1 Seleccione el objeto.

2 Seleccione la herramienta Flecha y, en la sección Opciones de la caja de herramientas, haga clic en el Modificador de escala o elija Modificar > Transformar > 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.

Para cambiar el tamaño proporcional del objeto horizontalmente o verticalmente, arrastre uno de los selectores del centro.

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.

Para cambiar el tamaño proporcional de un objeto con el panel Transformar: 1 Seleccione el objeto.

2 Seleccione Ventana > Transformar .

3 Introduzca un valor de escala entre 1 y 1000 para la vertical, la horizontal o para ambas.


Pág. -161-

4 Seleccione Restringir para mantener las proporciones.

5 Presione Intro (Windows)

Girar CCW, CW

Para rotar un objeto 90°: 1 Seleccione el objeto.

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.

Original, reflejado horizontalmente y reflejado verticalmente, respectivamente.

Para reflejar un objeto: 1 Seleccione el objeto.

2 Elija Modificar > Transformar > Reflejar verticalmente o Reflejar horizontalmente.

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. -162-

a las del comando Pegar de FreeHand). Para crear una capa de máscara:

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:

Arrastre una capa existente debajo de la capa de máscara.

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 desvincular capas de una capa de máscara:

1 Seleccione la capa que desea desvincular.


Arrastre la capa encima de la capa de máscara.

Elija Modificar > Capa y seleccione Normal.

Para cambiar el estado de una capa, entre con máscara y sin máscara:

Haga clic con Alt. presionada (Windows),

Seguir el Ratón

1. Crear Objeto 2. F8


Pág. -163-

3. Seleccionar Clip de película 4. Clic derecho sobre el Objeto 5. Seleccionar Paneles à Instancia 6. Dar Nombre 7. Agregar Capa nueva 8. Crear Objeto 9. F8 10. Seleccionar Botón 11. Clic Derecho sobre el Objeto 12. Seleccionar Acciones 13. On Mouse event 14. Activar solo Situar sobre el objeto 15. Startdrag

Dar Mismo Nombre anteponiendo /

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.

El comando Exportar película le permitirá crear el contenido de Flash que se puede editar en otras aplicaciones y exportar una película directamente en un formato único. Por ejemplo, puede exportar una película entera como archivo de Flash Player, como una serie de imágenes de mapas de bits, como un fotograma único o un archivo de imagen, y como imágenes estáticas y de movimiento en varios formatos entre los que se incluye GIF, JPEG, PNG, BMP, PICT, QuickTime o AVI.

Con el comando Publicar puede hacer lo siguiente:

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.

Crear formatos de archivo alternativos "GIF, JPEG, PNG y QuickTime" y el HTML necesario para visualizarlos en la ventana del navegador. Los formatos alternativos activan un navegador para ver la animación de su película y la interactividad para los usuarios que no tengan instalado Flash Player.

Crear plantillas de Generator para actualizar fácilmente el contenido en un sitio Web, como gráficos y texto, sin tener que sustituir los archivos de forma individual. Por


Pág. -164-

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.

Antes de publicar la película, es importante que pruebe si la película funciona mediante los comandos Probar película y Probar escena. Si desea obtener más información,

La reproducción de una película de Flash en un navegador Web necesita de un documento HTML que active la película y especifique la configuración del navegador. Este documento se genera automáticamente con el comando Publicar desde los parámetros HTML en un documento de plantilla. Los parámetros HTML determinan dónde aparecerá la película de Flash en la ventana, el color de fondo, el tamaño de la película, etc. y definirá los atributos para las etiquetas OBJECT y EMBED . Puede cambiar estos y otros valores en la ficha HTML del cuadro de diálogo Configuración de publicación. El cambio de estas configuraciones suplantará las opciones que haya establecido en la película.

Sus configuraciones se insertarán en un documento de plantilla. El documento de plantilla puede ser cualquier archivo de texto que contenga las variables de plantilla correctas, incluido un archivo HTML normal, que incluya código para intérpretes especiales como ColdFusion o Active Server Pages (ASP) o una plantilla incluida con Flash (para más información.

Para publicar un HTML para visualizar el archivo Flash:


Pág. -165-

1 Seleccione Archivo > Configuración de publicación.

El tipo de archivo HTML se selecciona de forma predeterminada.

2 Introduzca un nombre único para Archivo o seleccione Usar nombre predeterminado para crear un archivo con el nombre de archivo Flash más la extensión. html.

3 Haga clic en el panel HTML para que aparezcan las configuraciones.

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.

El menú enumera todos los archivos de plantilla en la carpeta Macromedia Flash 5/HTML. Las plantillas básicas sólo muestran la película en un navegador mientras que las plantillas más avanzadas contienen código para la detección del navegador y otras funciones. Si no elige una plantilla, Flash utiliza la plantilla predeterminada, Default.html, y si ésta no estuviera utilizará la primera plantilla de la lista.

Flash guarda la plantilla modificada con el nombre de archivo de la película de Flash más la extensión del archivo de plantilla. Por ejemplo, si selecciona una plantilla denominada Estándar.asp para utilizarla con una película de Flash denominada MiPelícula.swf, el nombre del archivo resultante es MiPelícula.asp.

5 Elija una opción de Dimensiones para configurar los valores de los atributos WIDTH y HEIGHT en las etiquetas OBJECT y EMBED :

Coincidir con película (predeterminado) utiliza el tamaño de la película.

Píxeles le permite introducir el número de píxeles en los campos Anchura y Altura.

Porcentaje para usar un porcentaje relativo a la ventana del navegador.

6 Seleccione las opciones de Reproducción para controlar las funciones y reproducción de la película de la manera siguiente:

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. -166-

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.

7 Seleccione Calidad para determinar el equilibrio entre tiempo de procesamiento y el suavizado de cada fotograma antes de que aparezca en la pantalla del usuario, de la manera siguiente:

Baja favorece la velocidad de reproducción ante la apariencia y no utiliza la visualización suavizada.

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.

Alta automática en un principio da la misma importancia a la velocidad y al aspecto, pero sacrifica el aspecto por la velocidad si es necesario. La opción Reproducción empieza con la visualización suavizada activada. Si la velocidad real de los fotogramas es inferior a la velocidad especificada, la visualización suavizada se desactiva con el objeto de mejorar la velocidad de reproducción. Utilice este valor para emular el valor de Ver > Suavizado en Flash.

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.

Alta (valor predeterminado) favorece a la apariencia ante la velocidad de reproducción y siempre utiliza la visualización suavizada. Si la película no contiene animación, los mapas de bits se suavizan; de lo contrario, no se suavizan.

Óptima proporciona la mejor calidad de visualización y no tiene en cuenta la velocidad de reproducción. Las imágenes resultantes y los mapas de bits siempre se suavizan.

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:

Windows reproduce una película de Flash Player en su propia ventana rectangular de una página Web para que la animación sea lo más rápido posible. La opción configura el parámetro WMODE de la etiqueta OBJECT a WINDOW .

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. -167-

Transparente sin ventana muestra el fondo de la página HTML en la que la película se incrusta a través de todas las áreas transparentes de la película, pero puede hacer la animación más lenta. La opción establece WMODE a TRANSPARENT .

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.

Predeterminado centra la película en la ventana del navegador y recorta los bordes si la ventana del navegador es más pequeña que la película.

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.

Sin borde dimensiona la película para rellenar el área especificada y mantiene la proporción del aspecto original de la película sin distorsiones y recortando si fuera necesario.

Ajuste exacto muestra la película completa en el área especificada sin mantener la proporción del aspecto original que podría causar distorsión.

La opción Escala configura el parámetro SCALE en las etiquetas OBJECT y EMBED .

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.

Para la alineación Horizontal, elija Izquierda, Centro o Derecha.

Para la alineación Vertical, elija Superior, Centro o Inferior.

Esta opción configura el parámetro SALIGN de las etiquetas OBJECT y EMBED .

12 Seleccione Mostrar mensajes de advertencia para que aparezcan los mensajes de error si se produce algún conflicto en la configuración, por ejemplo, si una plantilla tiene código refererido a una imagen alternativa que no se ha especificado.

13 Para guardar las configuraciones con el archivo activo, haga clic en Aceptar.


Pág. -168-

GENERAR EJECUTABLE SWF Y CONFIGURAR NAVEGADOR

Generar Ejecutable SWF

El formato de Flash Player (SWF) es el formato de archivo principal para distribuir el contenido de Flash y el único formato que admite toda la funcionalidad interactiva de Flash.

Las películas de Flash Player pueden reproducirse de varias formas: En navegadores Internet como Netscape e Internet Explorer que estén equipados con Flash Player.

Con Flash Xtra en Director y Authorware.

Con el control ActiveX de Flash en Microsoft Office y otros sistemas anfitriones de ActiveX.

Como parte de una película QuickTime.

Como un tipo de aplicación independiente denominada proyector.

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. -169-

ejemplo, un módem de 28.8 Kbps puede en teoría descargar datos a 3.5 Kbytes/segundo. Pero si elige 28.8 del menú Control, Flash definirá la velocidad real a 2.3 Kbytes/segundo para simular el rendimiento de Internet típico con más precisión.

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.

Para comprobar el rendimiento de descarga:


Elija Control > Probar escena o bien Control > Probar película.

Flash muestra la ventana Salida para ayudarle a solucionar problemas en ActionScript. Puede utilizar la acción trace para mostrar comentarios en la ventana Salida y ayudarle así en la depuración. Si desea obtener información, consulte los temas relacionados en la Ayuda de ActionScript.

Elija Archivo > Abrir y seleccione un archivo SWF.

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.

En la sección derecha del creador de perfil aparece la cabecera y gráfico de la Línea de tiempo. En el gráfico, cada barra representa un fotograma individual de la película. El tamaño de la barra corresponde al tamaño de ese fotograma en bytes. La línea roja inferior debajo de la cabecera de la Línea de tiempo indica si un fotograma determinado fluye en tiempo real o no con la velocidad de módem activa configurada en el menú Control. Si una barra sobrepasa la línea roja, la película debe esperar hasta que dicho fotograma esté cargado.

4 Elija Ver > Mostrar flujo para activar y desactivar la barra de flujo.


Pág. -170-

La barra de flujo indica el número de fotogramas cargados y el fotograma que se está reproduciendo.

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.

6 Ajuste la vista del gráfico como desee:

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.

7 Cierre la ventana de prueba para regresar al entorno de creación habitual.


Pág. -171-

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.

Si desea obtener información sobre depuración de películas, consulte el tema de solución de problemas en la Ayuda de ActionScript .

Para generar un informe donde figure la cantidad de datos en el archivo final de Flash Player por archivos:

1 Seleccione Archivo > Configuración de publicación .

2 Seleccione Generar informe de tamaño.

3 Haga clic en Publicar.

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

Para previsualizar la película de Flash con la configuración y el formato de publicación que ha elegido utilice el comando Previsualización de publicación. Este comando exporta el archivo y abre la Previsualización en el navegador predeterminado. Si


Pág. -172-

previsualiza una película QuickTime, Previsualización de publicación inicia el reproductor de películas QuickTime. Si previsualiza un proyector, Flash inicia el proyector.

Para previsualizar un archivo con el comando Previsualización de publicación: 1 Defina las opciones de exportación del archivo con el comando Configuración de publicación.


Elija Archivo > Previsualización de publicación y seleccione, en el submenú, el formato de archivo que desee previsualizar.

Presione la tecla F12 para exportar y previsualizar el formato predeterminado.

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.

6.3. Herramientas alternativas a Flash

Entre las diferentes herramientas alternativas a flash hemos encontrado las siguientes:

KToon

Es un programa de código abierto, software libre para la creación de animaciones vectoriales e ilustración. Si, una alternativa real a Flash, libre.


Pág. -173-

KToon posee un modulo de ilustración y otro de animación; con ciertas herramientas y

elementos de interfaz que ha muchos de nosotros se nos harán muy familiares , a pesar de ser tan joven ya incluye algunas de las cosas a las que estamos acostumbrados como motion tweening u Onion-skin en la linea de tiempo.

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. -174-

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)

No incluye lenguajes de programación

Por ahora no hay versión para Windows

ZINC

ZINC es una aplicación para crear, construir y desplegar aplicaciones de escritorio basados en el formato de Adobe Flash. Está disponible para Windows, Mac OSX y Pocket PC.

Dispone de un entorno de desarrollo integrado con posible conexión directa a base de datos. Aplicaciones con múltiples formularios, control remoto http


Pág. -175-

Delphi SWF SDK 2.1

Es una herramienta de desarrollo para mostrar y generar Adobe Flash utilizando el entorno de desarrollo de Delphi.

Esta herramienta contiene bibliotecas de Object Pascal para crear archivos SWF, sin ninguna biblioteca dinámica externa.

Sothink SWF Quicker

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. -176-

Swish Max

Herramienta para crear animaciones flash interactivas.

Dispone de 230 efectos visuales, herramientas de dibujo, opciones de importación y exportación, contenido dinámico, Lenguaje Swishscript, interfaz de usuario, formularios de entrada.


Pág. -177-


6.1 Seleccione la respuesta incorrecta

a) Los archivos de Flash, tienen generalmente la extensión de archivo SWF, b) pueden aparecer en una página Web para ser vista en un navegador, c) No pueden ser reproducidos independientemente por un reproductor Flash. d) Son también ampliamente utilizados en anuncios de la Web.

6.2 Respecto a la seguridad en el reproductor Flash

a) Flash Player usa un modelo de seguridad sandbox. b) Las aplicaciones, pueden leer archivos del disco duro como cookies que ellos

mismos hayan escrito, denominadas SharedObjects. c) Flash Player no es susceptible a los ataques. d) No ha habido publicados incidentes de seguridad.

6.3 Marcar la respuesta incorrecta

a) La Interfaz de Programación de Aplicaciones de Adobe Flash está basada en Javascript-C.

b) Los comandos de C++ no se interpretan directamente desde C/C++, sino con Javascript.

c) La interfaz de programación de Flash está basada en JavaScript, pero con base en este lenguaje, fue creado ActionScript.

d) JavaScript y ActionScript son iguales.

6.4 ¿De que manera no se puede reproducir las películas de Flash?

a) En navegadores Internet, tales como Netscape Navigator y Microsoft Internet Explorer, que estén equipados con Flash Player.

b) Con el control ActiveX de Flash en Microsoft Office, Microsoft Internet Explorer para Windows y otros entornos anfitrión de ActiveX.

c) En Flash Player, una aplicación independiente de manejo similar al complemento Flash Player.

d) Como un applet Java.

6.5 Respecto a la línea de tiempo

a) La Línea de tiempo organiza y controla el contenido de una película a través del tiempo, en subcapas y películas.

b) Los componentes principales de la Línea de tiempo son las subcapas, películas y la cabeza lectora.

c) 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.

d) El encabezado de la Línea de tiempo situado en la parte superior de la Línea de tiempo indica los números de capas.

1. gráficos vectoriales y de mapa de bits

Documents