Tema1 PDF

Programa Oficial de Postgrado:
Master en Comunicaciones, Redes y Gestin de Contenidos

TECNOLOGA DE LOS CONTENIDOS MULTIMEDIA

Optativa de 2 cuatrimestre

TEMA 1
Grficos vectoriales y de mapa de bits

Grficos Vectoriales y de mapa de bits UNED Curso 2007-2008
Pg. -2-

1. Grficos vectoriales y de mapa de bits

1.1. Revisin de conceptos de texto e hipertexto
1.2. Descripcin de las dos formas de representar grficos en formato digital
1.3. Problemtica de tamao en las imgenes de mapa de bits
1.4. Grficos vectoriales escalables (Especificacin SVG)
1.5. Grficos vectoriales animados (Especificacin SWF)
1.6. Introduccin a Flash y herramientas alternativas

Pg. -3-
INDICE

1. Revisin de conceptos de texto e hipertexto............................................................ 6
1.1. Concepto de texto............................................................................................. 6
Texto lingstico....................................................................................................... 6
Texto y discurso....................................................................................................... 7
Texto y escritura....................................................................................................... 7
Texto como "dilogo" y texto como "monlogo" .................................................... 7
Caractersticas........................................................................................................... 7
Tipologas 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
Interconexin e integracin. ................................................................................... 10
Descentralizacin de la autora............................................................................... 11
1.4. Ejercicios de autoevaluacin.......................................................................... 13

2. Descripcin de las dos formas de representar grficos en formato digital ............. 15
2.1. El formato raster o mapa de bits..................................................................... 15
Colores.................................................................................................................... 16
Codificacin y resolucin (Encoding).................................................................... 20
Formatos ms comunes.......................................................................................... 21
2.2. El formato vectorial ........................................................................................ 25
Ventajas y desventajas............................................................................................ 26
Operaciones vectoriales.......................................................................................... 27
Impresin................................................................................................................ 27
Formatos ms comunes.......................................................................................... 27

3. Problemtica de tamao en las imgenes de mapa de bits..................................... 31
3.1. Compresin sin prdidas................................................................................ 31
Sistemas no adaptativos.......................................................................................... 31
Sistemas semiadaptativo......................................................................................... 32
Sistemas adaptativos............................................................................................... 33
3.2. Compresin con prdidas............................................................................... 34
3.3. Optimizacin general de imgenes................................................................. 38
Formatos................................................................................................................. 38
Si la imagen es una fotografa................................................................................ 39
Si la imagen es un dibujo........................................................................................ 39
Sobre la edicin de las imgenes para Internet....................................................... 40
Reduccin de colores (dithering)............................................................................ 41
3.4. Optimizacin de imgenes para la web (II).................................................... 42
Paletas de colores e imgenes artificiales............................................................... 43
Optimizando imgenes con Adobe Photoshop....................................................... 44
3.5. Aplicaciones para optimizar el tamao de imgenes...................................... 47

Pg. -4-
4. Grficos vectoriales escalables (Especificacin SVG)........................................... 49
4.1. Conceptos....................................................................................................... 50
Escalable................................................................................................................. 50
Vector..................................................................................................................... 50
Grficos.................................................................................................................. 50
XML ....................................................................................................................... 51
Namespace.............................................................................................................. 51
Uso de estilos.......................................................................................................... 51
Conceptos importantes de SVG.............................................................................. 51
Objetos grficos...................................................................................................... 51
Smbolos................................................................................................................. 52
Efectos raster.......................................................................................................... 52
Fuentes.................................................................................................................... 52
Animacin.............................................................................................................. 52
Opciones para usar SVG en pginas Web.............................................................. 53
4.2. Beneficios de utilizar SVG............................................................................. 54
4.3. Estructura bsica de un documento................................................................ 55
4.4. Geometra....................................................................................................... 56
4.5. Elementos disponibles.................................................................................... 62
4.6. Scripting......................................................................................................... 68
4.7. SMIL............................................................................................................... 72
4.8. Grficos e interactividad en la Web............................................................... 78
4.9. SVG Mvil ..................................................................................................... 79
4.10. Ejercicios de autoevaluacin...................................................................... 86

5. Grficos vectoriales animados (Especificacin SWF) ........................................... 87
5.1. Licencia.......................................................................................................... 87
5.2. Especificacin del formato del archivo de SWF............................................ 88
Conceptos bsicos.................................................................................................. 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
Nmeros y coordenadas......................................................................................... 91
Transforma............................................................................................................. 92
Proceso de un archivo de SWF............................................................................... 92
Estrategia de la compresin del archivo................................................................. 92
Mecanismo de la extensin.................................................................................... 93
Archivo de muestra SWF ....................................................................................... 93
5.3. Alternativas para la visualizacin de informacin grfica en la Web.......... 100
Los grficos vectoriales en la Web....................................................................... 102
Comparacin entre SWF y SVG.......................................................................... 103
La Expresin Grfica ante las nuevas tecnologas de creacin de contenidos..... 108
5.4. Ejercicios de autoevaluacin........................................................................ 110

6. Introduccin a Flash y herramientas alternativas................................................. 111
6.1. Adobe Flash.................................................................................................. 111
Pg. -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
Lnea de tiempo (Timelines)............................................................................... 115
Modificacin del aspecto de la Lnea 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

Pg. -6-
1. Revisin de conceptos de texto e hipertexto
En este captulo vamos a crear una seccin para explicar el concepto de texto y otro
captulo para explicar el concepto de hipertexto. Por ltimo haremos una seccin que
explica el paso del hipertexto al hipermedia bajo la visin de una obra abierta.
No he querido hacer este apartado muy tcnico sino ms conceptual y con una visin
concreta.
1.1. Concepto de texto
Un texto es una composicin de signos codificado en un sistema de escritura (como un
alfabeto) que forma una unidad de sentido. Su tamao puede ser variable, desde una
obra literaria como "El Quijote" al mensaje de volcado de pila del kernel de Linux.

Tambin es texto una composicin de caracteres imprimibles (con grafa) 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 ingls

En otras palabras un texto es un enramado de signos con
una intencin comunicativa que adquiere sentido en
determinado contexto.
De los textos se pueden extraer ideas esenciales, a las que llamaremos
"macroproposisin".
Cmo extraer de un texto una idea esencial? Hay varios pasos:
1. Leer atentamente el prrafo. 2. Identificar "ncleos" (lo importante del prrafo) y
escribirlos en forma de oracin simple. 3. Identificar la informacin adicional. 4.
Relacionar esos ncleos a travs de una oracin compleja unida por uno o varios
conectores.
Texto lingstico
De acuerdo a Greimas, es un enunciado ya sea grfica o fnico que es utilizado para
manifestar el proceso lingstico. Mientras Hjelmslev usa ese trmino para designar el
todo de una cadena lingstica ilimitada. En lingstica no todo conjunto de signos
constituye un texto.

Pg. -7-
Se denomina texto a la configuracin lingstica que utiliza signos especficos (signo
lingstico) y est organizada segn reglas de construccin.
Texto y discurso
Se relaciona estrechamente con el discurso, puesto que ste es la emisin concreta de un
texto, por un emisor determinado, en una situacin de comunicacin 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 nocin 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 " dilogo" y texto como " monlogo"
Otra nocin importante es que los textos (y discursos) no son slo monologales.
En lingstica, el trmino texto sirve tanto para producciones en que slo 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 declamacin, un discurso poltico
Escrita: Una carta de solicitud, una novela
DIALOGAL
Oral: Una conversacin en un bar
Escrita: Una conversacin por chat

Caractersticas
Este texto o conjunto de signos extrados de un discurso debe reunir condiciones de
textualidad. Las principales son cohesin, coherencia, significado, progresividad,
intencionalidad y clausura o cierre.
Segn los lingistas Beaugrande y Dressler, todo texto bien elaborado ha de presentar
siete caractersticas:
Pg. -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 creacin de una idea global.
2. Ha de tener cohesin, lo que quiere decir que las diversas secuencias que lo
construyen han de estar relacionadas entre s.
3. Ha de contar con adecuacin 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 ncleo mencionados ms arriba) y de forma que,
adems, ofrezca toda la informacin necesaria (y el mnimo de informacin
innecesaria) para su lector ideal o destinatario.
4. Ha de contar con una intencin 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 situacin 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 comprensin.
6. Ha de entrar en relacin con otros textos o gneros para alcanzar sentido y poder
ser interpretado conforme a una serie de competencias, presupuestos, marcos de
referencia, tipos y gneros, pues ningn texto existe aisladamente de la red de
referencias que le sirve para dotarse de significado.
7. Ha de poseer informacin 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).
Tipologas textuales
A fin de agrupar y clasificar la enorme diversidad de textos se han propuesto tipologas
textuales. Estas se basan en distintos criterios como la funcin que cumple el texto en
relacin con los interlocutores o la estructura global interna que presenta.
Se ha hecho muy comn dividir los textos por el predominio de caractersticas
Narrativas
Descriptivas y
Argumentativas

1.2. Concepto de hipertexto
En computacin, hipertexto es un paradigma en la interfaz del usuario cuyo fin es el de
presentar documentos que puedan, segn la definicin de Ted Nelson, "bifurcarse o
ejecutarse cuando sea solicitado" (branch or perform on request). La forma ms
habitual de hipertexto en documentos es la de hipervnculos o referencias cruzadas
automticas que van a otros documentos. Si el usuario selecciona un hipervnculo, hace
que el programa de computador muestre el documento enlazado en un corto perodo 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 tamao por grados.
Pg. -9-
El hipertexto es una de las formas de la hipermedia que se enfoca en disear, escribir y
redactar texto en una media.
Hipertexto como documento con hiperenlaces
A partir de la definicin 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
hipervnculos y anclajes. Los nodos son las partes del hipertexto que contienen
informacin accesible para el usuario. Los enlaces son las uniones o vnculos que se
establecen entre nodos y facilitan la lectura secuencial o no secuencial por los nodos del
documento. Los anclajes son los puntos de activacin de los enlaces.
Los hipertextos pueden contener otros elementos, pero los tres anteriores son los
componentes mnimos. Otros elementos adicionales pueden ser los sumarios e ndices.
En este sentido, se habla, por ejemplo, de hipertextos de grado 1, 2, etc., segn tengan la
cantidad de elementos necesarios. Actualmente la mejor expresin de los hipertextos
son las pginas Web navegables.

1.3. Del texto al hipertexto e hipermedia
Los sistemas de comunicacin interactivos por red se basan en un lenguaje y en unas
tecnologas que transforman radicalmente la manera como se estructura y se adquiere la
informacin. Y lo que es ms 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
interconexin e integracin del conocimiento, y que se aleja de la autora y gestin
centralizada. Los sistemas basados en el hipermedia ayudan a desarrollar procesos de
comunicacin 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 Aristteles, 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 tericos apuntan que la narrativa clsica -la
estructuracin de la historia en una trama lineal- responde a condicionantes culturales.
As, la construccin temporal de la realidad y, consecuentemente, el auge de las
relaciones causales, se asocia a la aparicin de la imprenta.
Los diseos hipermediticos responden a un paradigma o modelo de estructuracin de
la informacin no lineal. Nos encontramos, por tanto, con una manera de organizar y
transmitir el conocimiento antittica a las formas clsicas de estructurar y narrar. En
Pg. -10-
estos sistemas, el usuario accede selectivamente a conjuntos de informacin que pueden
representarse en mltiples materias expresivas interconectadas.
Las principales ventajas de los modelos no lineales en los procesos de estructuracin de
conocimiento se podran 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
integracin, se produce un efecto contrario de aislamiento que ofrece a los
fragmentos una autonoma sustentada en no tener que depender de un "antes" y
de un "despus". En relacin a la segunda constatacin, 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 narracin y la naturalidad del lenguaje convencional".
Tienen la capacidad de describir fenmenos producidos en escalas de espacio y
de tiempo heterogneas. A diferencia de la narrativa lineal, el usuario los puede
integrar de una manera mucho ms intuitiva en el proceso de interpretacin
Su estructura es materia significante por s misma. As, por ejemplo, puede
proporcionar informacin de relaciones semnticas, causales, espaciales o
temporales entre los elementos que la forman.
La estructura y las relaciones que se establecen a partir de la lgica
hipermeditica se aproximan a la manera en que se organizan e interconectan las
neuronas humanas para desarrollar procesos cognitivos.
La ficcin no lineal, de la cual uno de los ejemplos ms destacados es Aftermoon
(1987), de Michael J oyce, 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 caractersticas expresivas del discurso
convencional.
El cine de Alfred Hitchcock, en este sentido, supone un buen ejemplo de la importancia
de la enunciacin, que, en su filmografa, 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 habitacin -
identificndose con el peligro que corre- porque antes ha visto como el propietario
comenzaba a subir las escaleras. Si la secuencia se hubiera montado al revs, slo habra
transmitido una sensacin de sorpresa.
Interconexin e integracin.
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 interconexin e integracin de la informacin, 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 suceda en la obra convencional.
A pesar de que en una primera instancia los sistemas multimediticos hacen posible que
la obra pueda relacionarse con ella misma, delegando al lector su lectura no lineal y la
Pg. -11-
estructuracin final, la conjuncin 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 informacin multiplica el nmero de comienzos y finales. Por otro lado, la
interconexin e integracin de textos y de obras y las posibles aportaciones del autor o
de los mismos usuarios, a travs de las redes interactivas, borran los inicios y finales
conceptuales de la obra.
Los productos culturales convencionales se basan en la utilizacin de determinadas
materias expresivas. Tradicionalmente, la base expresiva de la poesa 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 mltiples
materias expresivas, desdibuja todava ms la unicidad del producto cultural,
ampliando, a la vez, la relacin entre las capacidades perceptivas y cognoscitivas del ser
humano.
Por otro lado, la utilizacin de interficies basadas en sistemas icnicos (signos que
tienen una relacin 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 idiomticas propias de la comunicacin que se basa exclusivamente en el texto
verbal. En este sentido, hay que observar que cerca del 90% de los contenidos verbales
de la pginas Web son en ingls, segn un estudio reciente desarrollado por el buscador
de informacin Altavista.
Las experiencias comunicativas basadas en el hipermedia, adems, pueden
implementarse con la aplicacin de interficies inmersivas, desarrollndose entornos
virtuales que integren hipersensorialmente la informacin. A partir de la combinacin
del hipermedia y las tecnologas de la realidad virtual, el usuario podr disponer de la
potencialidad de integrar informaciones pertenecientes a espacios y tiempos
heterogneos en un entorno configurado por un nico espacio, el generado virtualmente,
y un slo tiempo, el de la interaccin.
Descentralizacin de la autora
El medio de comunicacin interactivo por red no acepta una nica voz dictatorial
materializada en una obra inmodificable, sino que potencia el dilogo entre los actores
de los procesos comunicativos, como consecuencia del carcter abierto y plural de su
lenguaje y de su estructura.
La mayora 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 hipermediticas por red determinan la
adquisicin de un conjunto de conocimientos que no haban sido integrados
previamente por otra persona y que, probablemente, no volvern a manifestarse del
mismo modo. La forma y el contenido de la informacin depender de las
Pg. -12-
caractersticas del sistema, de la competencia del usuario (creativa, integrativa,
tecnolgica y cultural) y de las interconexiones efectuadas.
Pierre Lvy (1990), difuminando la idea del individuo aislado como fundamento del
conocimiento humano, defiende que el saber slo se puede concebir mediante
estructuras provisionales que circulan de un conjunto de informacin a otro. En este
sentido, podemos llegar a pensar que la configuracin de miles de redes interconectadas
podr equipararse a una macroestructura neuronal propiedad de toda la humanidad, en
donde determinados conjuntos generadores de informacin se alternaran la capacidad de
actuar como nodos -cruces- de conexin, creando y distribuyendo significado y
conocimiento.
El usuario de un sistema multimeditico o hipermeditico puede realizar tres tipos de
aportaciones en relacin a la construccin particular y colectiva del conocimiento.
En primer lugar, puede colaborar con el autor, entendiendo que actualiza los hipotticos
caminos que previamente ha establecido. Como ya hemos visto, en el caso del
multimedia, en tanto que utiliza un soporte cerrado, el nmero de caminos es limitado,
de manera que el autor puede prever las secuencias que describir el usuario. Ahora
bien, en las obras hipermediticas 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 multimediticos
conceptualmente construye el texto, a pesar de que tiene que utilizar una gramtica que
le es creativamente ajena, entendiendo que el conjunto de normas establecidas por esta
"construccin" las ha delimitado el autor. En los sistemas hipermediticos, 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 (Lvi-Strauss le llama bricoleur) puede
generar, por ejemplo, desde determinadas criticas relacionadas con el texto hasta
material indito 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 pginas personales que pueden crearse en Internet, mediante la World Wide
Web.
Pg. -13-
1.4. Ejercicios de autoevaluacin
1.1 Cules son los pasos para extraer de un texto una idea esencial?
a) Leer atentamente, identificar ncleos, identificar la informacin adicional,
relacionar esos ncleos a travs de una oracin compleja unida por uno o varios
conectores.
b) Leer atentamente, identificar ncleos, relacionar esos ncleos a travs de una
oracin compleja unida por uno o varios conectores, identificar la informacin
adicional.
c) Identificar ncleos, relacionar esos ncleos a travs de una oracin compleja
unida por uno o varios conectores, identificar la informacin adicional, leer
atentamente.
d) Leer atentamente, identificar ncleos, identificar la informacin adicional.
1.2 Seale la respuesta incorrecta respecto a textos monologales y dialogales:
a) MONOLOGAL: Oral: Una declamacin, un discurso poltico.
b) MONOLOGAL: Escrita: Una carta de solicitud, una novela.
c) DIALOGAL: Oral: Una conversacin en un bar.
d) DIALOGAL: Escrita: Un informe electrnico en comit organizativo
1.3 Qu caracterstica del texto es incorrecta?
a) Coherencia
b) Cohesin
c) Intencin 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
hipervnculos y anclajes.
b) Los nodos son las partes del hipertexto que contienen informacin accesible para
el usuario.
c) Los enlaces son las uniones o vnculos 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 activacin de los anclajes.
Pg. -14-
1.5 Respecto a las principales ventajas de los modelos no lineales en los procesos de
estructuracin 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 fenmenos producidos en escalas de espacio y
de tiempo heterogneas.
c) Su estructura es materia significante por s misma.
d) La estructura y las relaciones que se establecen a partir de la lgica
hipermeditica se aproximan a la manera en que se organizan e interconectan las
neuronas humanas para desarrollar procesos cognitivos.

Pg. -15-
2. Descripcin de las dos formas de representar
grficos en formato digital
Existen dos formas de representar grficos 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 pxeles, 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 sera almacenado en la memoria
de la tarjeta de video o quizs en un dispositivo independiente. Un mapa de bits se
caracteriza por el ancho y el alto de la imagen en pxeles y el nmero de bits por pxel el
cual determina el nmero 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 pxel. Aumentando en mayor grado vemos tres pxeles cuyos colores estn construidos
aadiendo los valores de rojo, verde y azul.
Pg. -16-

Imagen 3. Imagen ampliada mostrando el tamao original en la esquina superior derecha.

Colores
El color de cada pxel esta definido individualmente; imgenes en el espacio de colores
RGB, por ejemplo, consisten de pxeles 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 dems colores. El nombre de el
modelo y la abreviacin RGB proviene de los tres colores primarios, rojo (Red), verde
(Green) y azul (Blue)

Imagen 4. Representacin de la mezcla aditiva de los tres colores.
Pg. -17-

Una aplicacin comn del modelo RGB es la muestra
de estos colores en tubos de rayos catdicos, cristal
lquido o plasma como una televisin o monitor de un
ordenador. Cada pxel 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 informacin
para cada pxel.

Imagen 5. Una imagen dividida en sus colores RGB

Representacin del modelo RGB

La representacin numrica del modelo RGB
puede ser descrita indicando cuando de color
rojo, verde y azul es incluido. Cada uno puede
variar desde el mnimo (no color) y su
mximo (intensidad completa). Si todos los
colores estn al mnimo el resultado es negro.
Pg. -18-
Si todos los colores estn al mximo 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 (mnimo) hasta el 1.0
(mximo). Muchas frmulas 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%
(mnimo) hasta el 100% (mximo). Rojo de intensidad completa es el 100%,
0%, 0%.
- El valor de los colores pueden ser escritos como nmeros en el rango 0 a 255,
simplemente multiplicando el rango 0.0 a 1.0 por 255. Este es la manera ms
comn en informtica e imgenes donde en la programacin es conveniente
almacenar cada valor en un byte (8 bits). Esta convencin 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 nmeros hexadecimales en este rango
pueden ser escrito con un formato fijo de dos dgitos, el rojo intenso #ff, #00,
#00 puede ser contrado a #ff0000. Esta convencin es usada en los colores Web
(colores usados en el diseo de pginas Web). Tambin es muy expandido su
visualizacin.

24-bit

Valores RGB en 24 bits por pxel (bpp) es tambin 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 ensea las tres caras saturadas de un cubo RGB desplegadas en un
plano
Pg. -19-

Imagen 6 Imagen RGB de un cubo abierto sobre las tres caras de colores saturados.
Con este sistema 16.777.216 (256
3
or 2
24
) 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 nmero puede variar de persona en
persona dependiendo de la condicin del ojo y de la edad de la persona.
16-bit
Hay tambin un modo de 16 bpp tambin llamado Highcolor en el que hay tambin 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 tambin idntico en precisin al modo de 24 bpp. Hay aun solo 8 bits por
componente y los ocho extra bits no suelen ser utilizados. La razn 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 estn alineados.
Algn hardware grfico 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 mens o el cursor del
Pg. -20-
ratn) 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 enseada de nuevo. Esta funcionalidad fue a menudo
utilizada en hardware grfico para estaciones de trabajo Unix en los noventa y ms tarde
en algunas tarjetas grficas de PC. Sin embargo la tarjetas grficas actuales ahora tienen
multitud de memoria y esta funcionalidad ha casi desaparecido.
Representacin en 48-bit
El modo 16-bit tambin 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 edicin profesional de imagen como en
Adobe Photoshop para mantener una gran precisin cuando una secuencia de ms 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.
Representacin RGBA
Con la necesidad para componer imgenes 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 informacin de
transparencia con la informacin de color en el mismo archivo.

Codificacin y resolucin (Encoding)
La calidad de una imagen raster est determinada por el nmero total de pxeles
(resolucin) y la cantidad de informacin en cada pxel (a menudo llamado profundidad
de color). Por ejemplo, una imagen que almacena 24 bits de color por pxel (el estndar
para todos los dispositivos desde 1995) puede representar grados suaves de sombras que
uno que solo almacena 16 bits por pxel pero no tan suave como uno que almacena 48
bits (tcnicamente; esto no puede ser discernible por el ojo humano). Por otro lado, una
imagen recogida en 640x480 pxeles (luego entonces conteniendo 307.200 pxeles) se
ver rugosa y en bloques comparada con la misma a 1280x1024 (1.310.720 pxeles).
Como ya se ve que conlleva una gran cantidad de informacin almacenar una imagen de
alta calidad, tcnicas de compresin de datos son utilizadas para reducir el tamao
almacenado en disco. Esto lo veremos en el siguiente apartado.
Los grficos raster no pueden ser escalados a una resolucin alta sin prdida de calidad
aparente. Esto es en contrate a grficos vectoriales, el cual puede fcilmente escalar a la
calidad del dispositivo en el cual est representado. Grficos raster son ms prcticos
que grficos vectoriales para fotografas y imgenes foto realistas, mientras grficos
vectoriales son ms prcticos para diseo grfico, sistemas de informacin geogrfica o
conjuntos de tipografas.

Pg. -21-
Otro punto a tener en cuenta es que los monitores modernos actuales pueden mostrar
acerca de 72 a 130 pxeles por pulgada y algunas impresoras modernas pueden llegar
has 2400 puntos por pulgada o ms; determinar la resolucin de imagen ms apropiada
para una impresora puede ser difcil ya que la salida impresa puede tener un nivel de
detalle ms grande que lo visto en el monitor.
Formatos ms comunes
BMP
Los archivos con extensin .BMP, en los sistemas operativos Windows, representan
la sigla BitMaP (o tambin Bit Mapped Picture), o sea mapa de bits. Los archivos de
mapas de bits se componen de direcciones asociadas a cdigos de color, uno para cada
cuadro en una matriz de pxeles tal como se esquematizara un dibujo de "colorea los
cuadros" para nios pequeos. 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 pginas Web debido a
su gran tamao en relacin a su resolucin.
Dependiendo de la profundidad de color que tenga la imagen cada pxel puede ocupar 1
o varios bytes. Generalmente se suelen transformar en otros formatos, como J PEG
(fotografas), GIF o PNG (dibujos y esquemas), los cuales utilizan otros algoritmos para
conseguir una mayor compresin (menor tamao del archivo).
Los archivos comienzan (cabecera o header) con las letras 'BM' (0x42 0x4D), que lo
identifica con el programa de visualizacin o edicin. En la cabecera tambin se indica
el tamao de la imagen y con cuntos bytes se representa el color de cada pxel.

GIF
GIF (Graphics Interchange Format) es un formato grfico utilizado ampliamente en la
World Wide Web, tanto para imgenes 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 poda usar el algoritmo de
compresin LZW (Lempel Ziv Welch) para realizar la compresin de la imagen, que era
ms eficiente que el algoritmo Run-Lenght Encoding (RLE) usado por los formatos
PCX y MacPaint. Por lo tanto, imgenes de gran tamao podan ser descargadas en un
razonable periodo de tiempo, incluso con modems muy lentos.

GIF es un formato sin prdida de calidad, siempre que partamos de imgenes de 256
colores o menos. Una imagen de alta calidad, como una imagen de color verdadero
(profundidad de color de 24 bits o superior) debera reducir literalmente el nmero de
Pg. -22-
colores mostrados para adaptarla a este formato, y por lo tanto existira una prdida de
calidad.
Sus principales caractersticas son:
Profundidad de color: 8 bits mximo (256 colores simultneos)
o Uso de color indexado, a travs de una paleta de colores que puede ser
de distintos tamaos, dependiendo del valor del Size of Local Color
Table, que tiene un tamao de 3 bits. El nmero de colores se puede
calcular mediante la frmula: 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
mximo de 256 colores en cada una) separadas por 0 milisegundos
(simultneas) entre ellas, si pueden mostrarse imgenes con ms de 24
colores diferentes [1] y [2], permitiendo mostrar un color real. Pese a
esto, esta ltima tcnica es poco eficiente, y rara vez se usa, y cuando se
hace es sobre todo para demostrar esta posibilidad, a veces, estas
imgenes no aparecen simultneamente sino que va apareciendo cada
una de las capas sucesivamente. En este caso, cada capa sera un
cuadrado de 16 por 16, en el que como mucho se podran 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 tambin
dispone transparencia variable.
Sus ltimas versiones permiten hacer animaciones simples, aunque la
compresin es muy deficiente.
Permite utilizar entrelazado en imgenes, de tal forma que las imgenes se
visualicen al completo nada ms empezar su descarga, pero con una baja
definicin que va progresando hasta cargarse por completo en los navegadores.
PNG
PNG (Portable Network Graphics) es un formato grfico basado en un algoritmo de
compresin sin prdida para bitmaps no sujeto a patentes. Este formato fue desarrollado
en buena parte para solventar las deficiencias del formato GIF y permite almacenar
imgenes con una mayor profundidad de color y otros importantes datos.
Las imgenes PNG usan la extensin (.png) y han obtenido un tipo MIME (image/png)
aprobado el 14 de octubre de 1996.
Sus principales caractersticas son:
El PNG admite, al igual que el GIF, imgenes 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 mayora de los casos, PNG comprime mejor que el formato GIF, aunque
algunas implementaciones (vase Photoshop) realizan una mala seleccin de los
mtodos de filtrado y se generan ficheros de mayor tamao.
Pg. -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
ms ricos y precisos que el GIF y disponer de valores de transparencia
intermedios. Desafortunadamente, esto permite que se compare errneamente
PNGs de color verdadero con un GIF de color indexado (256 colores)
GIF soporta animacin y PNG no. (ver seccin de animacin, arriba)
Pese a que las caractersticas tcnicas y de compresin hacen del PNG un formato ideal
para sustituir al GIF, su adopcin ha sido muy lenta debido en parte a comparaciones
errneas y algunas desventajas tcnicas:
No est soportado por algunos navegadores muy viejos (sin embargo estos
navegadores son muy raros hoy en da)
No soporta animacin
La administracin de color fallaba en algunos navegadores (actualmente no es
muy importante y se puede evitar)
Falsas creencias:
Internet Explorer 6 no soporta PNGs transparentes. Habra que matizar un
punto. Internet Explorer 6 e inferiores admiten transparencias binarias como en
el GIF, pero fallan al mostrar imgenes con canal alfa. Eso se debe a que el
paquete que especifica el canal alfa es opcional (tRNS) segn la especificacin
PNG, sin embargo Internet Explorer 7 si los soporta.
Las imgenes en PNG pesan ms 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.

J PG
JPEG (Joint Photographic Experts Group) es un algoritmo diseado para comprimir
imgenes con 24 bits de profundidad o en escala de grises. J PEG es tambin el formato
de fichero que utiliza este algoritmo para comprimir imgenes. J PEG slo trata
imgenes fijas, pero existe un estndar relacionado llamado MPEG para videos. El
formato de archivos J PEG se abrevia frecuentemente JPG debido a que algunos
sistemas operativos slo aceptan tres letras de extensin.
J PEG es un algoritmo de compresin con prdida. Esto significa que al descomprimir la
imagen no obtenemos exactamente la misma imagen que tenamos antes de la
compresin.
Una de las caractersticas que hacen muy flexible el J PEG es el poder ajustar el grado de
compresin. Si especificamos una compresin muy alta se perder una cantidad
significativa de calidad, pero obtendremos ficheros de pequeo tamao. Con una tasa de
compresin baja obtenemos una calidad muy parecida a la del original, y un fichero
mayor.
Pg. -24-
Esta prdida 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 J PEG o J PG fue creado por un grupo independiente, llamado
J FIF (J PEG File Interchange Format), quienes se encargan slo de la utilizacin del
algoritmo J PEG para almacenar imgenes. Existen otros formatos de fichero que
tambin utilizan el algoritmo J PEG, el ms conocido de ellos es J NG.
J PEG/J FIF es el formato ms utilizado para almacenar y transmitir archivos de fotos en
la Web. Pero la compresin con prdida del formato no conviene a diagramas que
incluyen textos y lneas.
El algoritmo de compresin J PEG se basa en dos defectos visuales del ojo humano, uno
es el hecho de que es mucho ms sensible al cambio en la luminancia que en la
crominancia, es decir, notamos ms claramente los cambios de brillo que de color. El
otro es que notamos con ms facilidad pequeos cambios de brillo en zonas
homogneas que en zonas donde la variacin es grande, por ejemplo en los bordes de
los cuerpos (entindase por cuerpo cualquier cosa y no un cuerpo humano).
TIFF
La denominacin en ingls "Tagged Image File Format" (formato de archivo de
imgenes con etiquetas) se debe a que los ficheros TIFF contienen, adems de los datos
de la imagen propiamente dicha, "etiquetas" en las que se archiva informacin sobre las
caractersticas de la imagen, que sirve para su tratamiento posterior.
Estas etiquetas describen el formato de las imgenes almacenadas, que pueden ser de
distinta naturaleza:
Binarias (blanco y negro), adecuadas para textos, por ejemplo.
Niveles de gris, adecuadas para imgenes de tonos continuos como fotos en
blanco y negro.
Paleta de colores, adecuadas para almacenar diseos grficos con un nmero
limitado de colores.
Color real, adecuadas para almacenar imgenes de tono continuo, como fotos en
color.
Las etiquetas tambin describen el tipo de compresin aplicado a cada imagen, que
puede ser:
Sin compresin
PackBits
Huffman modificado, el mismo que las imgenes de fax (UIT grupo III y IV
anteriormente CCITT).
LZW, el mismo que usa el formato GIF.
J PEG

Pg. -25-
2.2. El formato vectorial
Los grficos vectoriales (tambin conocidos como modelados geomtricos o grficos
orientados a objetos) son los que se conforman con primitivas geomtricas tales como
puntos, lneas, curvas o polgonos, de igual forma, son grficos que se construyen por
ordenador basndose en ecuaciones matemticas. Se utiliza como antnimo de aquellas
imgenes que estn configuradas sobre un conjunto de pxeles, que hemos visto en el
punto anterior.

Todos los ordenadores actuales traducen los grficos vectoriales a grficos rasterizados
para poderlos visualizar en pantalla. La imagen rasterizada posee un valor determinada
para cada pxel que la conforma, esta informacin se guarda en la memoria ocupando un
espacio especfico.
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 ms complejas que permiten el uso
de curvas de Bzier, degradados de color, etc. En algunos formatos, como el SWF, las
imgenes vectoriales pueden animarse muy fcilmente sin que ello suponga un aumento
excesivo en el tamao del archivo, al contrario de los bitmaps.

Dos imgenes de una locomotora la primera como imagen vectorial respecto de la segunda de la
que fue trazada.
Como hemos dicho anteriormente, las imgenes en los grficos vectoriales no se
construyen pxel a pxel, sino que se forman a partir de vectores, objetos formados por
una serie de puntos y lneas rectas o curvas definidas matemticamente.
Otro ejemplo, una lnea se define en un grfico de mapa de bits mediante las
propiedades de cada uno de los pxeles que la forman, mientras que en un grfico
vectorial se hace por la posicin de sus puntos inicial y final y por una funcin que
describe el camino entre ellos. Anlogamente, un crculo se define vectorialmente por la
posicin de su punto central (coordenadas x,y) y por su radio (r).
Pg. -26-

Cada vector en un grfico vectorial tiene una lnea de contorno, con un color y un
grosor determinados, y est relleno de un color a elegir. Las caractersticas de contorno
(o filete) y relleno se pueden cambiar en cualquier momento.
Las imgenes vectoriales se almacenan como una lista que describe cada uno de sus
vectores componentes, su posicin y sus propiedades.
En cuanto a la resolucin, los grficos vectoriales son independientes de la resolucin,
ya que no dependen de una retcula de pxeles dada. Por lo tanto, tienen la mxima
resolucin que permite el formato en que se almacena.

Ventajas y desventajas
Ventajas
Dependiendo del tipo de imagen, las imgenes vectoriales pueden requerir
menor espacio en disco que un bitmap. Las imgenes formadas por colores
planos o degradados sencillos son ms factibles de ser vectorizadas. A menor
informacin para crear la imagen, menor ser el tamao del archivo. Dos
imgenes con dimensiones de presentacin distintas pero con la misma
informacin vectorial, ocuparn 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 imgenes rasterizadas, llega un momento en el que el zoom revela que la
imagen est compuesta por pxeles.
Los parmetros de los objetos configurados por medio de vectores puedes ser
guardados y modificados en el futuro.
Algunos formatos permiten animacin. Est se realiza de forma sencilla
mediante operaciones bsicas como traslacin o rotacin 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 aplicacin de texturas, degradados, transparencias, etc.
Se puede controlar con gran precisin la forma, orientacin y ordenacin 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 imgenes
de mapas de bits, en las que una vez pintado un elemento ya no es posible
modificarlo.
Pg. -27-
Desventajas
Los grficos vectoriales no son aptos para mostrar fotografas o imgenes
complejas, aunque algunos formatos admiten una composicin mixta (vector +
imagen bitmap).
Los datos que describen el grfico 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 presentacin de la imagen, incluso en
imgenes pequeas.
Por ms que se construya una imagen con grficos vectoriales su visualizacin
tanto en pantalla, como en la mayora de sistemas de impresin, en ltima
instancia tiene que hacer una traduccin a sistema rasterizado.
Operaciones vectoriales
Los tpicos 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 dimensin de profundidad en 3D) y combinar objetos
primarios para componer objetos ms complejos
Hay otro tipo de operaciones de un nivel mucho ms sofisticado que incluye
acciones sobre objetos cerrados tales como: unir o soldar, combinar intersecar y
diferenciar.
Los grficos vectoriales son ideales para dibujos simples y compuestos que necesitan
tener formas independientes o que no necesitan tener un carcter de realismo
fotogrfico.

Impresin
Un punto clave en las artes finalizadas vectorialmente es su prctica aplicacin en el
momento de la impresin ya que es posible escalarlas y aumentar su definicin de forma
ilimitada. Por ejemplo: se puede tomar el mismo logo vectorizado imprimirlo en una
tarjeta personal, y despus, agrandarlo e imprimirlo en una valla manteniendo en ambas
imgenes el mismo nivel de calidad.
Otro modo de impresin en donde los grficos vectoriales son importantes es en el
proceso del plotter de corte, ya que este, como su nombre lo indica, busca cortar reas
de color diseadas 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
lneas lmite por donde debe pasar la cuchilla que en lugar de dibujar, corta el material.

Formatos ms comunes

Pg. -28-
POSTCRIPT
PostScript es un Lenguaje de Descripcin de Pgina (en ingls PDL, Page Description
Language), utillizado en muchas impresoras y como formato de transporte de archivos
grficos en talleres de impresin profesional. Est basado en el trabajo realizado por
J ohn Gaffney en Evans y Sutherland en 1976. Posteriormente, continuaron el desarrollo
'J aM' ('J ohn and Martin', Martin Newell) en Xerox PARC, y finalmente fue
implementado en su forma actual por J ohn Warnock y otros, luego de que l y Chuck
Geschke fundaran Adobe Systems Incorporated (tambin conocido como Adobe) en
1982.
PostScript se diferenci por utilizar un lenguaje de programacin completo, en vez de
una serie de secuencias de escapes de bajo nivel, para describir una imagen para que sea
impresa en una impresora lser o algn otro dispositivo de salida (en esto se parece a
Emacs, que explot un concepto interno parecido con respecto a las tareas de edicin).
Tambin implement notablemente la composicin de imgenes, que consiste de un
conjunto de lneas horizontales, pxeles al vuelo, descripciones por curvas de Bezier y
tipografa (fuentes) de alta calidad a baja resolucin (e.g. 300 puntos por pulgada).
Anteriormente se crea que tipografas de mapa de bits mejoradas manualmente eran
requeridas para esta tarea.
PDF
PDF (del ingls Portable Document Format, Formato de Documento Porttil) 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 informacin necesaria para la presentacin final del documento,
determinando todos los detalles de cmo va a quedar, no requirindose procesos
anteriores de ajuste ni de maquetacin. Cada vez se utiliza ms tambin como
especificacin de visualizacin, gracias a la gran calidad de las fuentes utilizadas y a las
facilidades que ofrece para el manejo del documento, como bsquedas, hiperenlaces,
etc.
Es un formato derivado del formato PostScript visto anteriormente
Caractersticas
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 combinacin de texto, grficos, imgenes e incluso
msica.
Es uno de los formatos ms extendidos en Internet para el intercambio de
documentos. Por ello es muy utilizado por empresas, gobiernos e instituciones
educativas.
Es una especificacin 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 ofimtica OpenOffice.org.
Puede cifrarse para proteger su contenido e incluso firmarlo digitalmente.
Pg. -29-
SVG
Este formato lo veremos en un captulo entero aparte
SWF
Este formato lo veremos en un captulo entero aparte
Pg. -30-

2.1. Qu efecto resulta el valor mnimo 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 fusin de los tres colores primarios.
2.2. Cul es la convencin genrica de representacin de colores en la Web?
a) La representacin hexadecimal compacta.
b) La representacin en tres nmeros de 0 a 255.
c) En porcentajes de cada uno de sus componentes.
d) En representacin de tres nmeros de 0.0 a 1.0.
2.3. Por qu determinar la resolucin 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. Cul 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 J PG es indicado para fotografas de alto nivel.
d) El formato TIFF dispone de etiquetas de informacin 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 compresin.
c) Una representacin de colores en cuatro componentes de color.
d) Ninguna de las anteriores.
Pg. -31-
3. Problemtica de tamao en las imgenes de mapa de
bits
Como hemos visto en el punto anterior. El tamao de las imgenes raster puede ser muy
grande. Debido al tamao 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) aaden tcnicas de compresin diferentes. La compresin, en realidad, consiste
en sustituir la cadena de datos por otra ms corta cuando se guarda el archivo.
Ciertos mtodos son reversibles o sin prdidas ("lossless", en ingls), porque permiten
la reconstruccin exacta del original. Pero con otros, la informacin original slo se
recupera aproximadamente, ya que se descarta una parte de los datos ("lossy"), a
cambio de relaciones de compresin mucho mayores.

3.1. Compresin sin prdidas
Se distingue entre sistemas adaptativos, no adaptativos y semiadaptativos, segn tengan
en cuenta o no las caractersticas del archivo a comprimir.
Sistemas no adaptativos
Los no adaptativos (cdigo Huffman, CCITT) establecen a priori una tabla de cdigos
con las combinaciones de bits que ms se repiten estadsticamente. A estas secuencias
se asignan cdigos cortos, y a otras menos probables claves ms 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 creacin de un rbol binario que tiene cada uno de los
smbolos por hoja, y construido de tal forma que siguindolo desde la raz a cada una de
sus hojas se obtiene el cdigo Huffman asociado.
1. Se crean varios rboles, uno por cada uno de los smbolos del alfabeto,
consistiendo cada uno de los rboles en un nodo sin hijos, y etiquetado cada uno
con su smbolo asociado y su frecuencia de aparicin.
2. Se toman los dos rboles de menor frecuencia, y se unen creando un nuevo
rbol. La etiqueta de la raz ser la suma de las frecuencias de las races de los
dos rboles que se unen, y cada uno de estos rboles ser un hijo del nuevo
rbol. Tambin 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 slo quede un rbol.
Pg. -32-
Con este rbol se puede conocer el cdigo asociado a un smbolo, as como obtener el
smbolo asociado a un determinado cdigo.
Para obtener el cdigo asociado a un smbolo se debe proceder del siguiente modo:
1. Comenzar con un cdigo vaco
2. Iniciar el recorrido del rbol en la hoja asociada al smbolo
3. Comenzar un recorrido del rbol hacia arriba
4. Cada vez que se suba un nivel, aadir al cdigo la etiqueta de la rama que se ha
recorrido
5. Tras llegar a la raz, invertir el cdigo
6. El resultado es el cdigo Huffman deseado
Para obtener un smbolo a partir de un cdigo se debe hacer as:
1. Comenzar el recorrido del rbol en la raz de ste
2. Extraer el primer smbolo del cdigo a descodificar
3. Descender por la rama etiquetada con ese smbolo
4. Volver al paso 2 hasta que se llegue a una hoja, que ser el smbolo asociado al
cdigo
En la prctica, casi siempre se utiliza el rbol para obtener todos los cdigos de una sola
vez; luego se guardan en tablas y se descarta el rbol.

Imagen 7 Ejemplo de codificacin de una lnea de pxeles sobre una tabla de cuatro entradas y
sobre otra de seis.

Sistemas semiadaptativo
Un cdigo 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
compresin, pero introduce dos inconvenientes: la prdida 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.

Pg. -33-
Los compresores de uso general ms populares utilizan mtodos como ste, por eso
tardan ms en empaquetar los datos que en descomprimirlos. El nmero de entradas de
la tabla puede ser configurable.

Sistemas adaptativos
Entre los mtodos adaptativos, el ms simple es el RLE (Run Lengh Encode), que
consiste en sustituir series de valores repetidos por una clave con indicador numrico.

Imagen 8 El mtodo RLE codifica series de pxeles repetidos. Esta secuencia de 12 valores se anota
con seis datos
Muchos otros mtodos 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 tamao, sino que lo duplica. La
anotacin de pxeles por series es adecuada en imgenes 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 J acob Ziv), del que deriva el LZW
(Lempel-Ziv-Welch), es ms ingenioso y consigue, en una lectura nica, codificar
repeticiones sin crear una tabla de cdigos. Cuando se localiza una secuencia similar a
otra anterior, se sustituye por una clave de dos valores: los correspondientes a cuntos
pasos se retrocede y cuntos datos se repiten.

Rpido y fiable, se utiliza en formatos universales como el GIF o el TIFF. Aunque no
logra relaciones de compresin muy altas, normalmente ahorra un tercio del archivo.
Pg. -34-

Imagen 9 Comportamiento del algoritmo LZ:
# 3 2 significa retroceder tres pxeles y repetir dos;
# 12 7 significa retroceder 12 pxeles y repetir siete.

3.2. Compresin con prdidas
Dentro de esta categora es universalmente conocido por su eficacia el formato J PEG,
aunque cabe mencionar tambin el mtodo Fractal, que analiza la imagen dividindola
en bloques y estableciendo regiones a mayor escala.
En este caso, se rastrean estas regiones de manera que mediante escalado, rotacin,
reflejo o combinacin de transformaciones puedan corresponder a un bloque. Se anotan
correspondencias y se testean, seleccionando las que permitan una reconstruccin ms
parecida de los datos.
La compresin basada en la geometra fractal consigue muy buenas ratios de
compresin y, en cierta manera, vectoriza las caractersticas 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 clculos.

El sistema propuesto por el J PEG (siglas cuyo significado traducido al castellano es el
de Grupo de Expertos en Fotografa Reunidos) es una combinacin de varias tcnicas
que crea un archivo J PEG (o J PG) con un nivel de compresin regulable capaz de
reducir en algunos casos el peso informtico de la imagen a menos del 1%. El proceso
estndar 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.
Pg. -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 cromtico, se iguala el tono en cada grupo de cuatro pxeles,
respetando los valores individuales de luz.

Imagen 12 En modo LAB, cada pxel tiene un valor L de luz y dos valores AB para definir el color.
Obsrvese como slo este paso de la compresin JPEG supone una disminucin del 50% de los
datos a anotar.

3. La imagen se divide en bloques de 8 x 8 pxeles. Para cada subimagen se anota el
valor promedio, la amplitud de la oscilacin de valores y una descripcin frecuencial de
esta oscilacin mediante una funcin de tipo Fourier, llamada Transformada Discreta
del Coseno (TDC), en la que se combinan varios parmetros de onda. Cuantos ms
parmetros, mejor correspondencia habr entre la funcin y la secuencia de valores; con
pocos datos, conservaremos los bsicos.
Pg. -36-

Imagen 13 La oscilacin 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 grfico D que vemos sumadas
en E.

4. Los valores TDC se cuantifican a la baja, dividindolos por un factor entero. El
nmero de coeficientes de onda y el factor a dividir determinan la profundidad de la
compresin, que es lo que decidimos en una escala que, segn el programa, va de 1 a
10, de 1 a 12 o de 0 a 100, pero siempre jugando inversamente entre el nivel de
compresin y la calidad del resultado.
Tras esta cuantificacin, abundan las fracciones decimales, que se redondean al entero
ms prximo. De este modo, resulta una cadena de datos con muchas probabilidades de
reiteracin.
5. Al resultado se le aplica la codificacin estadstica de Huffman, compactando las
cadenas ms repetidas en cdigos breves.
La compresin con prdida deja huellas
Los efectos negativos de una excesiva compresin pueden ser un empobrecimiento del
tono y la nitidez global, que notaramos ms bien en una impresin, y la aparicin de
artefactos a nivel local visibles sobre todo en pantalla, aunque J PEG sea un formato
habitual en Internet.
Estos efectos son menores en imgenes grandes, de varios megapxeles, en las que las
baldosas de 8 x 8 pxeles son menos importantes para el detalle y la codificacin de la
ltima fase es mucho ms efectiva. Se consiguen as buenas relaciones de compresin,
aunque indiquemos niveles de calidad media-alta.
Los efectos ms tpicos son la aparicin de los bloques de 8 x 8 pxeles, el ruido
cromtico en las zonas oscuras y la alteracin de las siluetas, que se ven borrosas en
imgenes de poca resolucin y reverberadas en las ms grandes.

Pg. -37-
A.

B.

C.

A. Imagen original. B. Reverberaciones en los bordes por una excesiva compresin. C.
Detalle de los bloques de 8 x 8 pxeles.

La reverberacin la producen las baldosas que coinciden con un borde marcado. Su
reconstruccin es mucho ms irregular que las de sus vecinas, que coinciden en una
zona de menor oscilacin y resultan mucho ms homogneas. As, se producen
pinceladas de falso contraste a varios pxeles de distancia de la verdadera silueta.
La solucin pasa por lograr una mejor correspondencia formal (que hoy se busca en las
formas Wavelet, un tipo de patrones de onda diseables que pueden ser sinusoidales o
no) y establecerse con una duracin finita. Combinando Wavelets (TDW), pueden
describirse formas complejas con muchos menos coeficientes. sta es la base de nuevas
tcnicas, como EZW, SPIHT, MrSID o J PEG 2000, que quieren ser la alternativa al
actual J PEG.
Pg. -38-
3.3. Optimizacin general de imgenes
Formatos
Lo primero que se debe saber es que los formatos de imgenes pueden (o no) admitir
algn tipo de compresin de datos.
Como hemos visto anteriormente los algoritmos de compresin de imgenes se
clasifican en dos tipos bsicos:
1. con prdida de calidad y
2. sin prdida de calidad.
Los formatos de archivo ms utilizados en la Web son J PEG, 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 bsicas
de cada uno.
Tabla comparativa de formatos de compresin de imgenes
Formato
Tipo de
compresin
Ventajas Desventajas
J PEG
Con prdida
(algoritmo J PEG)
Ficheros muy
reducidos
Muy bueno
para
fotografas
Prdida de calidad
notoria a altos niveles
de compresin
GIF
(algoritmo
LZW)
Sin prdida,
aunque limitado a
256 colores
Permite
animaciones
Paleta limitada
(obsoleto para
imgenes de muchos
colores)
Potenciales problemas
legales (en algunos
pases en otros ya
venci la licencia)
PNG Sin prdida
Excelente para
grficos
Permite
transparencias
Ficheros grandes para
imgenes de muchos
colores (fotografas,
ilustraciones, etc.)
Debido los posibles problemas legales del formato GIF y la superioridad del formato
PNG para grficos se desalienta fuertemente el uso del formato GIF.
Pg. -39-
Si la imagen es una fotografa
Se pueden guardar fotos tomadas con una cmara digital en J PEG y apenas ocupan
espacio en memoria. Sin embargo, parte de la informacin 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 prdida" para recuperar la calidad
perdida. Para estos casos conviene apegarse al formato J PEG, intentando obtener la
mejor relacin calidad/peso, pero no hay que cambiarse a otro formato.
Con J PEG el usuario decide cuanta informacin 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 vrselas con imgenes
detalladas como textos, o con cualquier objeto con
bordes definidos. Si ves cosas extraas, como
pelusillas o artefactos en su imagen, o bien la ests
comprimiendo demasiado o J PEG no es el formato
ideal para tu imagen.
GIF y PNG son casi intercambiables, ya que PNG
fue diseado 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, slo 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 grficos y dibujos lineales, ya
que cuando se usan tintas planas el nmero de
colores empleados es muy reducido. En tal caso
puedes elegir el nmero de colores que se ajuste al
nmero de tintas utilizadas. A menos colores, un
fichero ms pequeo. En general, cualquier dibujo de
tinta plana a una resolucin de 8 bits (256 colores)
debera ocupar bastante poco y, adems, verse muy
bien.
De arriba a abajo: J PEG
suavizado (917 bytes), PNG
espacio RGB (874 bytes) y
PNG indexado a 8 colores
(280 bytes).
Pg. -40-
Pero adems PNG puede trabajar con todo el rango de colores, por lo que servira para
imgenes que se quieran incorporar con una calidad excepcional, ya que al contrario que
el J PEG utiliza un algoritmo sin prdida de calidad.
Recuerda comprobar el tamao de la imagen en pxeles y reducir la resolucin si esta es
exagerada (ms de 500x500 px
2
por ejemplo).
Tampoco se debe usar J PEG si se puede guardar la misma imagen con PNG en ms o
menos el mismo tamao. 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 mxima compresin en archivos de formato PNG, existe un programa
libre llamado OptiPNG, el cual puede reducir el tamao de casi cualquier PNG
(exceptuando aquellos ya optimizados) sin prdida de calidad, hasta el lmite
matemtico. OptiPNG se encuentra disponible para Linux y Windows y puede se
desacargado de http://optipng.sourceforge.net/ (documentacin en ingls).
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 imgenes correctamente.
Sobre la edicin de las imgenes para Internet
A pesar de haber elegido uno de los formatos anteriores para la publicacin de imgenes
en Internet (u otro medio con ancho de banda limitado), no se debe eliminar nunca la
imagen original. Esta debera guardarse en un formato sin prdida (o muy poca prdida)
y con 24 bits de profundidad.
Si ms adelante necesitas cambiar la imagen debers 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 prdida de calidad progresiva.
Un clsico ejemplo que ilustra la necesidad de modificar una imagen en 24 bits de
profundidad es el cambio de tamao. Si intentas hacer ms pequea una imagen con una
profundidad de 8 bits (256 colores), sta se ver muy pixelada y se notar una grave
prdida de calidad.
Por el contrario, si usas la imagen original en 24 bits para cambiar el tamao y
posteriormente se guarda en el formato de 8 bits (256 colores), no existir ninguna
prdida, obteniendo as una imagen ms ntida y mucho menos pixelada.
Esto tambin es aplicable a las imgenes J PEG. Si la imagen que se guarda tiene un alto
grado de prdida, en cada modificacin perder algo de calidad. Si, por el contrario,
parte siempre del original, slo tendr la prdida correspondiente a la optimizacin de
tamao. Tambin puede ser que con el paso del tiempo te interese guardar las imgenes
con una mayor calidad (p.e. un mayor ancho de banda disponible). Si has guardado los
originales tan slo tendrs que guardar la imagen de nuevo en la calidad deseada. Si
slo tienes la imagen de poco peso, no existe ninguna manera de que recupere la calidad
inicial.
Pg. -41-
Por todo ello es aconsejable guardar las imgenes originales. Una buena costumbre para
llevar esto a cabo es tener en un directorio diferente los originales, para facilitar luego la
subida de las imgenes a Internet.
En resumen
Edita la imagen con un editor de imgenes.
Redimensiona la imagen al tamao al que va a ser visualizada en el artculo.
Actualmente esto es opcional y de hecho se recomienda que la imagen tenga
toda la calidad que sea posible.
Grbala con un nombre de fichero descriptivo.
Si es una foto o un dibujo con mucho detalle y colores prueba con el formato
J PEG. Gurdala con varios factores de compresin (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 compresin y
ajusta la paleta si el dibujo tiene un nmero de tintas planas reducido. Tambin
se puede utilizar el programa optimizador que se recomienda ms arriba.
Comparar el peso en formato PNG y J PEG. Elige el PNG si pesa menos o solo
un poco ms que el J PEG.

Reduccin de colores (dithering)

El principio del dithering se basa en la reduccin del nmero de colores usado en una
imagen, al considerar que en la mayora de los casos se utiliza demasiada informacin
grfica en un fichero, informacin que se puede eliminar sin prdidas notables en la
calidad final de la imagen.

Si una determinada imagen utiliza slo 40 colores, para reducir el tamao de su archivo
bastara 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
relacin a la misma imagen con 16,8 millones de colores, siendo, su tamao tres veces
Pg. -42-
ms pequeo. Para obtener un color no presente en la paleta de 256 colores de la imagen
siempre es posible mezclar los que s estn, consiguiendo en la mayora de los casos una
buena aproximacin al necesitado.

La tcnica del dithering va a ser la encargada de calcular la proporcin 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 prximo 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 ilusin de
nuevas tonalidades de color.
Este sistema de optimizacin por reduccin de colores es utilizado por ejemplo en el
formato GIF.
3.4. Optimizacin de imgenes para la web (II)
Solemos decir que una imagen tiene un tamao de 800x600, por ejemplo. Tambin es
habitual decir que una imagen tiene un tamao de 300 Kbytes. Es decir, usamos la
misma palabra, tamao, para hablar de dos conceptos totalmente diferentes. Del mismo
modo decimos que una imagen de 1024x768 es grande y tambin decimos que es
grande porque tiene 2 Mbytes.
Tamao, en pxeles: Siempre que en este manual hablemos nicamente de
tamao vamos a referirnos a las dimensiones de la imagen. Las imgenes se
forman a partir de puntos de color. Estos puntos se llaman, comnmente,
pxeles. Cuanto ms pxeles (puntos) tenga una imagen sta tendr mayor
resolucin, mayor detalle. Esto se comprueba fcilmente haciendo zoom sobre la
imagen. En una imagen grande podremos ver muchos detalles an despus de
haber ampliado. En una imagen pequea no sirve de nada ampliar porque solo se
ven grandes cuadros que desvirtan por completo la imagen.
Pg. -43-

Entenderemos que una imagen es:
- Grande cuando tengo un tamao superior o igual a 1024x768 pxeles (puntos)

- Mediana cuando su tamao oscile entre 320x240 y 1024x768 pxeles (puntos)

- Pequea cuando su tamao sea inferior a 320x240 pxeles (puntos)

- Muy pequea cuando su tamao sea inferior a 100x100 pxeles (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 imgenes publicadas en internet deberan tener un ancho mximo de entre 400
y 800 puntos. Los tamaos superiores, adems de entorpecer la navegacin, aumentan
innecesariamente el peso de la imagen porque cuantos ms puntos (pxeles) tiene una
imagen ms informacin contiene; y cuanta ms informacin contiene ms peso final
tendr el archivo de la imagen.
Paletas de colores e imgenes artificiales
La clave para aligerar una imagen artificial, esto es, no real, est en optimizar su paleta
de colores.

En la vida real las imgenes tienen millones de colores, pero cuando trabajamos con
imgenes artificiales, como las capturas de pantalla que solemos hacer para explicar
cmo 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 informacin de los colores que REALMENTE se usan en la
imagen. Sin perder ni un solo bit de informacin la optimizacin del peso del archivo es
mxima en estos casos, tal y como hemos podido comprobar con el ejemplo anterior.
Pg. -44-

Optimizando imgenes con Adobe Photoshop

Adobe Photoshop cuenta con una herramienta especfica para la optimizacin de
imgenes destinadas a ser publicadas en pginas 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 opcin es fundamental, ya que nos permite
elegir el formato de archivo en que vamos a grabar nuestra imagen. Los
formatos destinados a imgenes artificiales almacenan un mximo de 256
colores (8 bits) pero permiten optimizar la paleta de colores, mientras que los
formatos destinados a imgenes reales usan profundidades de color de 16,7
millones de colores (24 bits) pero incluyen mtodos de compresin de calidad
variable.
Pg. -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 imgenes en otros dos formatos, PNG-24
y WBMP que no debemos usar por ser el primero un tipo de archivo sin prdida
de calidad con el que obtenemos archivos muy grandes y el segundo por tener
una profundidad de colores de 1bit, esto eso, slo incluye dos colores: blanco y
negro.
2. Entrelazado: Cuando navegas por Internet hay algunas imgenes 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
tamao del archivo, aunque en cantidades despreciables.
3. Tabla de colores: Esta pestaa aparece nicamente cuando en el apartado 1
hemos elegido los formatos GIF o PNG. Aqu tenemos la clave para la
optimizacin de las imgenes artificiales. Como vers, 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 opcin limitamos el nmero mximo de colores que
tendr la imagen. Lgicamente 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
nmero 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 nmero 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 automtica, nicamente el nmero 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 informacin que nos indica el nmero de colores diferentes presentes
en la imagen y el tipo de paleta que estamos usando. Esta informacin es
esencial para poder ajustar correctamente el parmetro Colores cuando
trabajamos en formato GIF. Si se usa en formato PNG-8 esta casilla es
meramente informativa.
Pg. -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 tardara en descargar en una conexin lenta de 28,8 Kbit/s. Un poco
ms arriba de la zona marcada como 1 hay una pequea flechita negra orientada
hacia la derecha. Si pinchas en ella podr seleccionar otros tipos de conexiones
para comprobar cuanto tardara en descargar con cada una de ellas
5. Tamao de visualizacin: Por defecto aparece siempre al 100% mostrando por
tanto el tamao real de la imagen. Como norma general si la imagen no se puede
mostrar al completo con la visualizacin del 100% muy seguramente nuestra
imagen es demasiado grande para subirla a Internet y nos convendra reducirle
tamao. Podemos reducir el tamao de una imagen de forma rpida y sencilla
mediante la pestaa Tamao de imagen.

- Tamao original: Aqu veremos el tamao 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)
- Tamao nuevo: Aqu indicaremos de forma manual qu tamao 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
habra seguido siendo de 1.152 pxeles.
- Porcentaje: Tambin podemos reescalar la imagen usando un porcentaje en
lugar de un dato numrico. En este caso la imagen final tendr un tamao del
18,52% con respecto a la original. Este dato ha aparecido de forma automtica.
Si cambio el porcentaje de forma manual entonces el nuevo tamao cambiar
tambin de forma automtica.
- Calidad: La opcin por defecto es Bicbica. Da muy buenos resultados.
- Aplicar: Cuando lo tengas todo listo pincha aqu para que los cambios se hagan
efectivos

6. Compresin JPEG: La imagen que contiene las zonas marcadas al comienzo de
este apartado se corresponde con el formato PNG-8. Cuando elegimos J PEG
como formato de archivo desaparecen algunas opciones, como la tabla de
colores, y aparecen otras especficas del J PEG que veremos a continuacin:
Pg. -47-

- Formato de archivo: Para ver estas opciones es necesario que
est seleccionado el formato J PEG
- Tipo de compresin: Aqu encontramos unos ajustes
preestablecidos de calidad.
- Progresivo: Tiene la misma funcin que el entrelazado.
- Calidad: Esta es sin duda, la opcin ms importante de todo el
cuadro de dilogo. Aqu definimos la degradacin de calidad que
tendr la imagen. Valores ms pequeos darn como resultado
imgenes de menor peso pero, lgicamente, tambin de menor
calidad. El consejo es experimentar con diferentes valores para
encontrar el valor con el que, reduciendo al mximo 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 informacin de formato, peso y tiempo de descarga.
Ah podremos comprobar si la prdida de calidad que sufre la
imagen merece o no la pena.

3.5. Aplicaciones para optimizar el tamao de imgenes
Destacamos las siguientes aplicaciones para optimizar el tamao de las imgenes:
PNGOUT es un programa gratuito que convierte archivos PNG, GIF, BMP y
J PG en archivos PNG con un tamao optimizado en la mayora de los casos.
Existen muy contadas ocasiones en las que el archivo resultante tiene una
perdida de calidad apreciable o un tamao 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 nmero de colores que forma la imagen, pudiendo
escoger al final la opcin que mejor satisfaga la relacin calidad-tamao.
J PEGCruncher convierte archivos BMP, J PEG, TIF, GIF y PICT en archivos
J PEG optimizados, devolviendo como en el caso anterior diferentes opciones
para escoger entre la mejor calidad-tamao.
Pg. -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 J PG.
b) Tiene mayor compresin que Huffman.
c) Solo necesita leer el archivo fuente una nica vez.
d) Es el nico utilizado en el formato TIFF.
3.3. La tecnologa Wavelet se utiliza
a) En el formato J PG.
b) En el formato EZW.
c) En el formato MrSID .
d) En el formato J PEG 2000.
3.4. Diga cual de los siguientes enunciados es falso
a) J PEG utiliza un sistema de compresin con prdida.
b) GIF utiliza un sistema de compresin sin prdida pero limitado a 8bpp de
profundidad de color.
c) PNG es un formato que utiliza un sistema de compresin sin prdida.
d) PNG es un formato con problemas legales de libre distribucin.
3.5 Respecto a Dithering
a) Es un algoritmo de compresin sin prdida
b) Es un algoritmo de compresin con prdida
c) Es un sistema de disminucin de colores de la imagen
d) Es un sistema de cambio de tamao de resolucin de la imagen

Pg. -49-
4. Grficos vectoriales escalables (Especificacin SVG)

En este captulo vamos a entrar en profundidad en uno de los formatos vectoriales que
estn emergiendo ahora mismo.

Scalable Vector Graphics (SVG) es un lenguaje de marcado en XML para describir
grficos vectoriales de dos dimensiones, tanto estticos como animados. Las imgenes
pueden contener hiperenlaces usando XLinks simple de salida. Es un estndar abierto
creado por el consorcio del World Wide Web.

SVG permite tres tipos de objetos grficos:
Formas (p.e. trayectorias que consisten en lneas rectas y curvas, y reas
limitadas por ellas)
Imgenes raster o digitales.
Texto
Los objetos grficos se pueden agrupar, transformar y componer en objetos previamente
renderizados. El texto puede estar en cualquier namespace de XML conveniente al uso,
que realiza bsquedas y accesibilidad de los grficos de SVG. El conjunto de
caractersticas incluye transformaciones jerarquizadas, trayectorias que acortan,
mscaras alfa, efectos del filtro, objetos de plantilla y extensibilidad.

Imagen 14 Esta imagen muestra la diferencia entre imgenes raster y vectoriales con svg. La
imagen vectorial puede ser escalada indefinidamente sin perdida de calidad de imagen mientras el
mapa de bits no.
Pg. -50-
4.1. Conceptos
El significado de SVG es grficos de vector escalable, una gramtica de XML para los
grficos que permite uso de estilos, utilizable dentro del namespace de XML.
Escalable
Ser escalable significa aumentar o de disminuir uniformemente. En trminos de
grficos, escalable es que no son limitados a un solo, fijo, tamao del pxel. En el Web,
escalable es que una tecnologa particular puede ser una gran cantidad de archivos, una
gran cantidad de usuarios, una variedad amplia de usos. SVG, siendo una tecnologa de
los grficos para el Web, es escalable en ambos sentidos de la palabra.
Los grficos de SVG son escalables a diversas resoluciones de exhibicin, de modo que
por ejemplo la salida impresa utilice la resolucin completa de la impresora y se pueda
exhibir en el mismo tamao en las pantallas de diversas resoluciones. El mismo grfico
de SVG se puede colocar en diversos tamaos en la misma pgina Web, y reutilizar en
diversos tamaos en diversas pginas. Los grficos de SVG se pueden ampliar para ver
el detalle fino, o para ayudar a sos con la visin baja.
Los grficos de SVG son escalables porque el mismo contenido de SVG puede ser un
grfico independiente o se puede referir o incluir dentro de otros grficos de SVG, de tal
modo permitiendo que una ilustracin compleja sea acumulada en piezas, quizs por
varias personas. Las capacidades del smbolo, del marcador y de la fuente promueven la
reutilizacin de componentes grficos, maximizan las ventajas del HTTP que depositan
y evitan la necesidad de un registro centralizado de smbolos aprobados.
Vector
Los grficos del vector contienen objetos geomtricos tales como lneas y curvas. Esto
da la mayor flexibilidad comparada a los formatos de trama solamente (tales como PNG
y J PEG) que tienen que almacenar la informacin para cada pxel del grfico.
Tpicamente, los formatos del vector pueden tambin integrar imgenes de la trama y
pueden combinarlas con la informacin de vector tal como trayectorias del truncamiento
para producir una ilustracin completa; SVG no es ninguna excepcin.
Puesto que actualmente hoy en da esta todo orientado a grficos raster, la diferencia
entre el raster y los grficos del vector se viene abajo cuando estn rasterizados; el lado
del cliente en el caso de grficos del vector, en comparacin con lo ya rasterizado en el
servidor. SVG da control sobre el proceso del rasterizacin, por ejemplo permitir anti-
aliased las ilustraciones sin el aliasing feo tpico del vector de baja calidad. SVG
tambin proporciona filtros de efecto raster, de modo que el cambio a un formato del
vector no signifique la prdida de efectos populares tales como sombras suaves.
Grficos
La mayora de las gramticas existentes de XML representan cualquier informacin
textual, o representan informaciones en bruto tales como informacin financiera.
Proporcionan tpicamente solamente las capacidades grficas rudimentarias, a menudo
menos capaces que el elemento del img del HTML. SVG llena un hueco en el
Pg. -51-
mercado proporcionando una descripcin rica y estructurada de grficos de vector y
vector con raster; puede ser independiente usado, o como namespace de XML con otras
gramticas.
XML
XML, una recomendacin de W3C para el intercambio de informacin estructurado, ha
llegado a ser extremadamente popular y se pone en ejecucin extensamente y
confiablemente. Por ser escrito en XML, estructuras de SVG en esta fundacin y
aumentos fuertes muchas ventajas tales como una base sana para la
internacionalizacin, capacidad de estructuracin de gran alcance, un modelo del objeto,
y as sucesivamente. Las gramticas basadas en XML estn abiertas a la puesta en
prctica sin un esfuerzo de ingeniera reversa enorme.
Namespace
Es ciertamente til tener un independiente y nico visualizador de SVG. Pero SVG
tambin se piensa para ser utilizado como un componente en un uso de mltiples
namespace XML. Esto multiplica la energa de cada uno de los namespaces usados,
para permitir que el nuevo contenido innovador sea creado. Por ejemplo, los grficos de
SVG se pueden incluir en un documento que utilice cualquier namespace centrado en el
texto de XML - incluyendo XHTML. Un documento cientfico, por ejemplo, puede
tambin utilizar MathML para las matemticas en el documento. La combinacin de
SVG y de SMIL conduce a interesar, tiempo basado, las presentaciones grficamente
ricas.
SVG es un componente bueno, de uso general para cualquier gramtica multi-
namespace que necesite utilizar grficos.
Uso de estilos
Las ventajas del estilo cubren en trminos de control de presentacin, flexibilidad, una
transferencia directa ms rpida y el mantenimiento mejorado est generalmente
aceptado ahora, ciertamente para el uso con el texto. SVG ampla este control al reino
de grficos.
La combinacin de scripting, de DOM y del CSS se llama HTML dinmico y es a
menudo ampliamente utilizada para la animacin, la interactividad y los efectos de
interfaz.
Conceptos importantes de SVG
Objetos grficos
Con cualquier gramtica de XML, la consideracin tiene que ser dada a qu se est
modelando exactamente. Para los formatos textuales, el modelar est tpicamente en el
nivel de prrafos y de frases, ms bien que los sustantivos, los adverbios, o los fonemas
individuales. Semejantemente, SVG modela grficos en el nivel de objetos grficos ms
bien que puntos individuales.
Pg. -52-
SVG proporciona un elemento general de trayectoria, que se puede utilizar para crear
una variedad enorme de objetos grficos, y tambin proporciona formas bsicas
comunes tales como rectngulos y elipses. stos son convenientes para la codificacin
de la mano y se pueden utilizar de la misma manera que el elemento ms general de la
trayectoria. SVG proporciona control fino sobre el sistema coordinado en el cual se
definen los objetos grficos y las transformaciones que sern aplicadas durante la
representacin.
Smbolos
Habra sido posible definir algunos smbolos estndares que SVG proporcionara. Pero
que? Habra siempre smbolos adicionales para la electrnica, la cartografa, los
organigramas, el etc., que la gente necesitara que no fue proporcionada hasta la
versin siguiente. SVG permite que los usuarios creen, que reutilicen y que
compartan sus propios smbolos sin requerir un registro centralizado. Las comunidades
de usuarios pueden crear y refinar los smbolos que necesitan, sin tener que preguntar a
un comit. Los diseadores pueden ser seguros exactamente del aspecto grfico de los
smbolos que utilizan y que no tuvieron que preocuparse de smbolos sin apoyo.
Los smbolos se pueden utilizar en los diversos tamaos y orientaciones, y pueden ser
cambiados para caber adentro con el resto de la composicin grfica.
Efectos raster
Muchos grficos existentes del Web utilizan las operaciones de filtros encontradas en
paquetes grficos para crear las faltas de definicin, sombras, efectos de iluminacin y
as sucesivamente. Con la rasterizacin usada con formatos del vector, tales efectos
pudieron ser imposibles pensado. SVG permite la especificacin declarativa de filtros,
solo o en la combinacin, que se puede aplicar en el lado del cliente cuando se rinde el
SVG. Se especifican stos de una manera tal que los grficos sigan siendo escalablee y
mostrables en diversas resoluciones.
Fuentes
El material grficamente rico es a menudo altamente dependiente en la fuente particular
usada y el espaciamiento exacto de los glyphs. En muchos casos, los diseadores
convierten el texto a los contornos para evitar cualquier problema de la substitucin 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 regeneracin de diseadores, SVG incluye
elementos de la fuente para preservar texto y el aspecto grfico.
Animacin
La animacin se puede producir va la manipulacin escritura-basada del documento,
pero las escrituras son difciles de corregir y el intercambio entre ser autor de las
herramientas es ms duro. Otra vez en respuesta a la regeneracin de la comunidad del
diseo, SVG incluye los elementos declarativos de la animacin que fueron diseados
de colaboracin por los grupos de trabajo de SVG y de SYMM. Esto permite que los
efectos animados comunes en grficos existentes del Web sean expresados en SVG.
Pg. -53-
Opciones para usar SVG en pginas Web
Hay una variedad de maneras de las cuales el contenido de SVG pueda ser incluido
dentro de una pgina Web. Aqu estn algunas de las opciones:
Una pgina Web independiente de SVG
En este caso, un documento de SVG (es decir, un recurso del Web que tipo del
MIME es la i magen/ svg+xml ) se carga directamente en un agente del usuario
tal como un web browser. El documento de SVG es la pgina Web que se
presenta al usuario.
El encajar por referencia
En este caso, la pgina 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 pgina Web del padre. Para el HTML o
XHTML, aqu estn tres opciones:
o El elemento del img de HTML/XHTML es el mtodo ms comn para
usar grficos en pginas del HTML. Para una exhibicin ms rpida, 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 imgenes apagado, o que no puede
considerar las imgenes. La secuencia no puede contener ningn margen
de beneficio. Un atributo longdesc te deja sealar a una descripcin ms
larga - a menudo en el HTML - que puede tener margen de beneficio y
formato ms rico.
o El elemento del objeto de HTML/XHTML puede contener otros
elementos jerarquizados dentro de l, al contrario que img, que es
vaco. 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 J ava
applet Para ver el contenido de SVG dentro de la pgina Web dada.
Estos applet pueden hacer muchas cosas, pero una tarea comn es
utilizarlas a las imgenes de exhibicin, particularmente unas en
formatos inusuales o que necesitan ser presentadas bajo control de un
programa por una cierta otra razn.
El encajar en lnea
En este caso, el contenido de SVG se encaja en lnea directamente dentro de la
pgina Web del padre. Un ejemplo es una pgina 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 opcin se utiliza tpicamente para los formatos inusuales de la
imagen.
Referido de una caracterstica 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 caractersticas del CSS o de XSL permitan referirse
Pg. -54-
de las imgenes raster, incluyendo la capacidad de poner grficos de SVG
dondequiera que sea necesario y la capacidad de mostrar el SVG en el fondo si
tiene porciones transparentes.
SVG soporta caractersticas avanzadas como:
-Transformacin anidadas (matrices de transformacin).
-Clipping Paths.
-Alpha Masks.
-Filtros grficos.
-Interactividad y dinamismo, soportados tanto de forma declarativa como va scripting.
El SVG DOM permite a los lenguajes de script el acceso a todos los elementos,
propiedades y atributos que componen un documento SVG. Adems, existe la
posibilidad de asignar eventos a los distintos elementos (onmouseover o onclick).
Gracias a la estandarizacin de los elementos en SVG y su integracin 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 extensin .SVG o .SVGZ (en minsculas) en todas las
plataformas.
Espacio de nombre utilizado por SVG:
http://www.w3.org/2000/svg
DOCTYPE para la versin 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 versin 1.1:
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd ">

4.2. Beneficios de utilizar SVG

Veamos, a continuacin, 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.
Pg. -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 reduccin 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. Integracin con otras tecnologas 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. Slo algunas de sus funcionalidades
-HTML 4 y XHTML 1.0
-UNICODE
-WAI. Accesibilidad a contenidos web

4.3. Estructura bsica de un documento

Veamos la estructura que puede tener un documento SVG:

<?xml version="1.0"?>
"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"
<html>
<body>
<object type="image/svg+xml" data="layout02.svgz" width="550"
height="550">
Pg. -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"
<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: Definicin del sistema de coordenadas.- En SVG el rea de dibujo es infinita. A
continuacin 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 tamao del Viewport utilizando los atributos "width" y "height"
del elemento <SVG>.
Los valores que pueden tomar estos atributos pueden ser simplemente nmeros (si
expresamos el tamao en pxeles) o en unas unidades concretas (puntos, pulgadas,
picas, centmetros, milmetros, etc.).
El origen de coordenadas comienza en la esquina superior izquierda, incrementndose la
coordenada X hacia la derecha y la Y hacia abajo. El punto (0, 0) se conoce como
origen de coordenadas.

4.4. Geometra

Veamos cmo podemos utilizar el SVG para hacer formas geomtricas.

Rectngulo.-

<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"
Pg. -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 aaden propiedades sobre el estilo de la visualizacin.

Crculo.-
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 aaden propiedades
sobre el estilo de la visualizacin.

Pg. -58-

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

Lnea.-

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 lnea. "x2" y "y2". Coordenadas del fin de la
lnea.

La continuidad de las lneas pude ser modificada gracias al atributo de estilo "stroke-
dasharray". Con este atributo podemos definir la lnea como una sucesin de tramos
visibles e invisibles. El atributo "stroke-dasharray" permite definir una lista de nmeros
separados por comas de forma que por parejas nos marcan la continuidad de la lnea.
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "
Pg. -59-
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd ">
<line x1="10" y1="10" x2="150" y2="150" stroke="red" stroke-
width="8" stroke-dasharray="18, 4, 4, 18" />
</svg>

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

Polgono.-

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>
Pg. -60-

Texto.-

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>

Tambin 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/Embedd
edXHTML ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<span class="forobjpts">(100,100)</span>
</html>
</foreignObject>

Caminos.- Definicin de un conjunto de lneas de forma encadenada y con diferentes
formas.
Comandos disponibles para definir caminos:
M. Permite moverse a un punto determinado sin pintar ninguna lnea.
Pg. -61-
L. Creacin de una lnea hasta la coordenada indicada.
H. Creacin de una lnea horizontal hasta la coordenada indicada.
V. Creacin de una lnea vertical hasta la coordenada indicada.
C. Creacin de una lnea curva hasta la coordenada indicada.
S. Creacin de una lnea curva suave (smooth) hasta la coordenada indicada.
Q. Creacin de una lnea curva cuadrtica de Bezier hasta la coordenada indicada.
T. Creacin de una lnea curva suave cuadrtica de Bezier hasta la coordenada indicada.
A. Creacin de una lnea elptica hasta la coordenada indicada.
Z. Cerrar el comino.
Todos estos comandos tienen tambin su equivalente en minsculas, de forma que el
posicionamiento en este caso se considerar relativo y no absoluto.
<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" />

Pg. -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 geomtricas basadas en caminos, se hace
mucho ms recomendable el uso de programas grficos de edicin para este menester.

4.5. Elementos disponibles

El elemento SVG es la raz de todo documento y pude contener el siguiente conjunto de
atributos bsicos:
-Definiciones de espacios de nombres (xmlns="http://www.w3.org/2000/svg").
-Versin 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 representacin grfica (width).
-Alto de la representacin grfica (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>
Pg. -63-

Referencias dentro de SVG.- Las referencias dentro de SVG permiten la reutilizacin de
distintas definiciones de objetos en cualquier punto del documento. As, podemos
definir filtros u otras propiedades de ajuste grfico de forma general dentro del
documento y aplicarlas dinmicamente va 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 definicin del espacio de nombres asociado al mismo:
xmlns:xlink="http://www.w3.org/1999/xlink "

DEFS.- Seccin de declaracin de los elementos que posteriormente podrn 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>

Pg. -64-
DESC y TITLE.- Son dos elementos que no tiene ningn tipo de representacin grfica.
Slo se utilizan para la documentacin y especificacin del documento SVG. Cualquier
contenedor o elemento grfico dentro del documento puede definir su propio ttulo y
descripcin.

Symbol.- Este elemento permite definir patrones de objeto grfico para despus 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
semntica del documento SVG.

USE.- Cualquier elemento grfico de tipo SYMBOL, G, USE u otros elementos pueden
potencialmente ser considerados como patrones y ser susceptibles de reutilizarse
mediante la utilizacin 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>

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

Pg. -65-

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

<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>
Pg. -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 inclusin de imgenes externas rasterizadas en el rea
definida por las coordenadas de se adjuntan.
<svg width="200" height="200" version="1.1"
<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 redimensin o para el cambio de orientacin.
Traslacin: cambiar la ubicacin actual de un elemento, cambiando as el origen de
coordenadas.
Pg. -67-
Rotacin: 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)" />
</g>
Pg. -68-
</svg>

4.6. Scripting
Tenemos dos mtodos para modificar el contenido de un fichero SVG mediante
Scripting:

Considerando el documento como un fichero XML estndar y utilizando DOM para su
manipulacin.

Considerando el documento como un fichero especfico SVG y utilizando el modelo de
objetos de SVG para su manipulacin.
Funciones de ejemplo para el de DOM.-
"http://www.w3.org/TR/2001/REC-SVG-
20010904/DTD/svg10.dtd ">
<svg xmlns="http://www.w3.org/2000/svg "
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() + "," +
Pg. -69-

255*Math.random() + ");");
setTimeout("window.pinta()", 300);

document.getElementById("dr").appendChild(circleNode);
}
]]>
</script>

<g id="dr" />
</svg>

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd ">
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;
}
Pg. -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>
Pg. -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() {
xform.setTranslate(10,-10);
}
function Scalein() {
xform.setScale(1.5,1.5);
}
function Scaleout() {
xform.setScale(0.5,0.5);
}
Pg. -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 incorporacin 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 animacin definida variar los valores de uno de los atributos del
elemento durante el periodo especificado (ya est delimitado por la ejecucin de un
evento o por un tiempo fijo).
Para asociar una animacin podemos:
Definirla a parte y asociarla a travs del ID del elemento:
<animate xlink:href="#bubblesrect" attributeName="y"
begin="aboutbubbles.click" dur="4s" to="10"
fill="freeze"/>
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:
"http://www.w3.org/TR/SVG/DTD/svg10.dtd ">
<svg width="500" height="510" xmlns="http://www.w3.org/2000/svg "
Pg. -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>
dur="4s" to="10" fill="freeze"/>
<animate xlink:href="#bubblescrossrect" attributeName="y"
<animate xlink:href="#bubblescross01" attributeName="y1"
<animate xlink:href="#bubblesminrect" attributeName="y"
<animate xlink:href="#bubblesminline" attributeName="y1"
<animate xlink:href="#bubblesminline" attributeName="y2"
</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"
Pg. -74-
width="220" height="75"
rx="10" ry="10" />
<rect id="bubblescrossrect" class="textrect" x="350" y="140"
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"
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">
</rect>

<text id="bubblestext" class="text">
<tspan id="bubblestext00" x="170" y="158">
Ventana contextual
</tspan>
</text>
</g>
</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">
Pg. -75-
</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>
Pg. -76-

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"
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"
fill="freeze"/>
<animate attributeName="height"
fill="freeze"/>
<animate attributeName="width"
fill="freeze"/>
<animate attributeName="height"
Pg. -77-
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"
<animate id="fadeout" attributeName="fill"
attributeType="auto"
from="#ff0000" to="#ffffff" begin="indefinite"
</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>

Pg. -78-
4.8. Grficos e interactividad en la Web

SVG, al ser un formato XML, donde mejor se integra es en otros documentos XML. Si
partimos de la versin XML de HTML, es decir, XHTML, nos encontraremos con que
podemos embeber el cdigo SVG dentro del propio documento XHTML. Esto es
gracias a que XHTML soporta distintos espacios de nombres.
Con este tipo de documento integramos tecnologas 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 utilizacin de ningn plugin externo). Esto
quiere decir que podremos aadir cdigo SVG "inline" en el documento XHTML y que
el navegador lo interpretar al igual que hace con el cdigo HTML.

En teora consiguiremos el mismo comportamiento que con el plugin de Adobe,
aunque ahora no sea del todo cierto debido al estado del desarrollo del proyecto. A da
de hoy la versin que de Mozilla SVG que ms 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>
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>
Pg. -79-
</html>

4.9. SVG Mvil

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 compaas como Ericsson, Nokia y Sharp. Por ejemplo, a continuacin podemos ver
la implementacin de SVG Reducido de ZOOMON funcionando en telfonos mviles
de Nokia y Sony-Ericsson que utilizan el sistema operativo Symbian
Pg. -80-

Existen servicios comerciales que utilizan SVG Reducido en los telfonos mviles de
J apn; es de esperar que otros pases comiencen a utilizar estos servicios pronto.
Por ejemplo, podemos ver algunas imgenes de una aplicacin real de comercio mvil
desarrollada por KDDI Corp. - una importante operadora de telefona mvil, miembro
del Grupo de Trabajo de SVG - en colaboracin con J CB Co., Ltd., Toyota Finance
Corp., Mitsui Sumitomo Card Co., Ltd., y UC Card Co., Ltd. Utiliza la implementacin
de SVG Reducido de KDDI funcionando en los telfonos de 3 generacin
CDMA20001x KDDI "au", que cuentan con pantallas en color. Se muestra un mapa
SVG al cliente con las tiendas participantes ms cercanas; en la siguiente pantalla,
ampliando el mapa, podemos ver ms detalles de cmo llegar a la tienda, incluyendo
calles ms pequeas que no eran visibles en la imagen ms 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.
Pg. -81-

SVG 1.1 define el lenguaje SVG completo, incluyendo varias caractersticas avanzadas
que actualmente slo pueden ser implementadas en los ordenadores de sobremesa o
porttiles. SVG Mvil define dos subconjuntos de SVG 1.1, tomando la funcionalidad
ms comnmente utilizada y apropiada para dispositivos mviles.
SVG Mvil es el nombre de la especificacin que define SVG Reducido y SVG Bsico,
e indica que ambos perfiles de SVG estn diseados principalmente para su uso en
dispositivos mviles.
Los sistemas binarios bien diseados son frecuentemente compactos, al menos hasta
que se utilizan mecanismos de extensin para realizar mejoras. Tambin es posible
disear una sintaxis acorde a XML, y comprimirla posteriormente para su envo. SVG
fue diseado para ser pequeo, y todava ms pequeo cuando se comprime. Los
archivos comprimidos se reproducen directamente en los visualizadores.
Adicionalmente, SVG utiliza interpolacin - la construccin automtica de fotogramas
intermedios, de manera similar a los sistemas de animacin de alto rendimiento - en
lugar de mostrar explcitamente el contenido de todas y cada una de las imgenes de una
animacin. Esto tiene una influencia importante en el tamao del contenido - varios
operadores de telefona mvil han mencionado el menor tamao de archivo como un
factor significativo en la eleccin de SVG Reducido frente a otras alternativas
propietarias binarias - e incluso permite que se pueda ajustar la velocidad de imagen
segn la potencia de computacin disponible, sin tener que crear mltiples copias del
contenido para distintos dispositivos.
Todas las implementaciones conformes a SVG Reducido, SVG Bsico o SVG completo
mostrarn correctamente el contenido realizado con SVG Reducido, ya que SVG
Reducido es un subconjunto estricto de SVG Bsico, el cual es a su vez un subconjunto
estricto de SVG Completo; de igual manera todas las implementaciones conformes a
SVG Bsico y SVG Completo mostrarn correctamente todo el contenido realizado con
SVG Bsico.
SVG utiliza Unicode para representar el texto que se mostrar; esto significa que el
texto se puede mostrar, buscar e indexar en mltiples idiomas. Tambin permite una
cmoda generacin y personalizacin del texto contenido en un SVG.
Pg. -82-
SVG tambin tiene su propio mecanismo de tipos de letra, permitiendo
simultneamente 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 especificacin del W3C, disponible
por completo de manera gratuita, y se prueba mediante el juego de pruebas disponible
pblicamente, no mediante las capacidades o inestabilidades de la implementacin de
un vendedor en particular. Este es un factor diferenciador clave de los Estndares Web
abiertos en contraposicin a los sistemas propietarios cerrados, en los que puede estar
disponible parte de la documentacin, pero estn definidos por el comportamiento de
una implementacin. 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 comunicacin entre empresas
(B2B), y utilizan ampliamente XML. A menudo, ese tipo de comunicacin se realiza
entre dos mquinas; las distintas especificaciones de Servicios Web dirigen este aspecto.
En la mayora de los casos, tambin es necesaria la interaccin humana en algn
momento. Es por ello que los Servicios Web necesitan una fachada para la interaccin
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
grfica y de tipografa necesaria para la tarea, y tambin debe estar basado en XML.
SVG es una buena forma de proporcionar un interfaz grfico dinmico e interactivo
para los Servicios Web - especialmente cuando se combina con otras tecnologas XML
tales como XForms (tambin creada por el W3C).
Una de las diferencias clave entre los usos de sobremesa y mviles de SVG es que los
dispositivos mviles, cmo su propio nombre indica, se desplazan. Debido a su
reducido tamao y peso, son utilizados en una amplia variedad de localizaciones en las
que un ordenador de sobremesa o un porttil no seran adecuados. La localizacin
geogrfica del dispositivo puede ser determinada por distintos mtodos, abarcando
desde los satlites de Sistema de Posicionamiento Global (GPS) a la triangulacin de las
seales de los telfonos mviles, y esa informacin puede ser utilizada para modificar el
interfaz grfico. El ejemplo ms comn de un dispositivo que reconoce su localizacin
es probablemente un sistema de navegacin para automviles.
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 geogrfica representada y el sistema de coordenadas utilizado para
obtener un mapa plano a partir de una porcin de la superficie curva de la tierra. La
combinacin de esta informacin con la localizacin del dispositivo mvil da lugar a un
mapa interactivo del tipo "usted se encuentra aqu"; la combinacin de mltiples mapas
en relacin a su cobertura geogrfica permite la creacin de informacin superpuesta; el
envo de la localizacin en la red permite la realizacin de consultas basadas en la
geografa, tales como "dnde est el hospital ms prximo". La combinacin de
dispositivos capaces de reconocer su localizacin, Servicios Web activados por
Pg. -83-
localizacin, acceso inalmbrico a redes, y mapas SVG que contienen metadatos con
grficos SVG generados bajo demanda, da como resultado un servicio basado en la
localizacin.
SVG es una tecnologa neutral. Sus capacidades pueden utilizarse de cualquier manera,
el nico lmite es la imaginacin. SVG puede utilizarse para mostrar datos
empresariales, tales como grficos de informacin financiera o visualizacin del control
de procesos industriales, pero tambin puede ser utilizado para aplicaciones orientadas a
los consumidores, como pueden ser la mensajera o los juegos. Como ejemplo, a
continuacin tenemos una implementacin del juego de cartas "blackjack" en SVG
Bsico.

Aunque los navegadores ms antiguos no tienen soporte para el tratamiento de XML y
otros estndares relacionados, los navegadores ms 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 intrprete 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 ms antiguos que no pueden
ofrecer soporte para SVG.
El gran nmero de herramientas de autor que existen para SVG pueden utilizarse para
producir contenido en formato SVG Mvil, con tal de que la salida sea validada
mediante el perfil deseado en particular.
Tambin existen soluciones de autor especficas para SVG Mvil. BitFlash Brilliance
(mostrada a continuacin) es una de ellas. Proporciona tres vistas sincronizadas del
SVG que se est generando - visual (grfica), DOM (estructural) y el cdigo fuente real.
Pg. -84-
El contenido puede validarse para SVG Reducido o Bsico, y las partes que no sean
conformes se resaltan para que puedan remplazar o modificar. La visualizacin previa
grfica, utilizando un emulador, muestra cmo se ver el contenido en cualquier tamao
de pantalla y profundidad de color deseados.

KDDI ha anunciado un plugin destinado a autores de SVG Mvil (que se puede ver
abajo a la derecha) para Adobe Illustrator, lo que permitir utilizar un entorno de autor
conocido para crear contenido SVG Mvil.

La creacin de grficos 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
Traduccin: Anteriormente el producto se llamaba Composer), para animaciones de
SVG Reducido, con un interfaz simple y fcil de utilizar, mientras que e-animator de
Sharp es otra aplicacin de autor que lee archivos SVG y calcula la geometra
intermedia de una animacin.
Pg. -85-
Las soluciones SVG altamente interactivas utilizan frecuentemente scripting. Intesis,
que hace una implementacin de SVG Bsico para PocketPC, tambin produce un
Entorno de Desarrollo Integrado (IDE) J avaScript, lo que permite que el cdigo sea
desarrollado en un PC y luego se depure paso a paso en el dispositivo mvil de destino,
conectado al PC con un cable de sincronizacin, antes de desplegar la solucin en los
reproductores de SVG Bsico de Bitflash, CSIRO, o Intesis.
Pg. -86-
4.1. Cul de estas afirmaciones es falsa?
a) SVG es un lenguaje de marcado para describir grficos vectoriales en tres
dimensiones.
b) SVG sirve tanto para describir grficos estticos como animados
c) En SVG las imgenes pueden contener hiperenlaces
d) SVG es un estndar abierto creado por el consorcio de la World Wide Web
4.2. Cul de las siguientes afirmaciones es falsa?
a) SVG promueve la reutilizacin de componentes grficos, maximizan las
ventajas del HTTP que depositan y evitan la necesidad de un registro
centralizado de smbolos aprobados.
b) SVG no tiene sus propios estndares de smbologa
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
pgina Web?
a) Como una pgina independiente de SVG
b) Encajado por referencia
c) Referido en una caracterstica 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 tamao 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 polgono.
b) Poder definir la lnea del contorno externo de un polgono.
c) Poder modificar la continuidad de las lneas.
d) Aadir trazas de estilo en la continuidad de un elemento lineal.
Pg. -87-
5. Grficos vectoriales animados (Especificacin SWF)

SWF es un formato de archivo de grficos vectoriales creado por la empresa Adobe
(antes Macromedia). Los archivos SWF pueden ser creados por el programa Flash,
aunque hay otras aplicaciones que tambin lo permiten. Bsicamente es un formato
vectorial, pero tambin 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 pequeos para ser publicados en la World
Wide Web en forma de animaciones o applets con diversas funciones y grados de
interactividad. Tambin son usados frecuentemente para crear animaciones y grficos
en otros medios, como mens para pelculas en DVD y anuncios de televisin.

Los archivos SWF son compilados y comprimidos a partir de los archivos editables (en
formato .fla) con los que el usuario trabaja en Flash. Estn construidos principalmente
por dos elementos: objetos basados en vectores e imgenes. Las versiones ms
modernas tambin incorporan audio y vdeo (en formato Flash Video-FLV) y multitud
de formas diferentes de interaccin 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 aplicacin autnoma. En muchas ocasiones es posible
encapsular los ficheros SWF junto con el reproductor, creando un proyector autnomo
que reproduce la animacin que contiene cuando se ejecuta.
El objetivo principal del formato SWF es crear archivos pequeos pero que permitan la
interactividad y que funcionen en cualquier plataforma, an sobre un ancho de banda
reducido (cmo un navegador Web conectado a travs de un mdem). 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 (estndar abierto basado en XML,
recomendacin del W3C). SWF ha utilizado la compresin Zlib desde el 2002, y en
general el objetivo del formato es almacenar todos los datos usando el menor nmero de
bits, minimizando la redundancia.
5.1. Licencia
Aunque la especificacin completa del formato est disponible, no es un formato abierto
ya que la licencia de la especificacin no permite crear software que reproduzca el
formato. Por lo tanto, la ingeniera inversa es la nica va legal para competir con el
reproductor oficial.
Pg. -88-
Por otro lado, la creacin de software que 'cree' archivos SWF s est permitida con la
condicin que el archivo resultante pueda ser renderizado sin problemas por la ltima
versin pblica del reproductor de Macromedia.
5.2. Especificacin del formato del archivo de SWF
El formato del archivo de SWF fue diseado desde cero para la distribucin de grficos
y la animacin sobre Internet. El formato del archivo de SWF fue diseado como
formato muy eficiente de la entrega y no como formato para intercambiar grficos entre
los redactores de grficos. Fue diseado para resolver las metas siguientes:
Muestra en pantalla- formato se piensa sobre todo para la exhibicin de la en-
pantalla y as que apoya anti-aliasing, la representacin rpida a una BITMAP
de cualquier formato del color, la animacin y los botones interactivos.
Extensibilidad- es un formato marcado con etiqueta, as que el formato se puede
desarrollar con las nuevas caractersticas mientras que mantiene compatibilidad
hacia atrs con ms viejos jugadores.
Entrega en redes - se pueden entregar sobre una red con anchura de banda
limitada e imprevisible. Los archivos se comprimen para ser representacin
incremental pequea y de la ayuda con fluir.
Simplicidad- es simple de modo que el reproductor sea pequeo y portado
fcilmente. Tambin, 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 ms costoso cuando est disponible.
Velocidad. Los se disean para ser renderizados en una alta calidad muy
rpidamente.
El documento siguiente describe el formato del archivo detalladamente.
Conceptos bsicos
Formato del contenedor
Los archivos de SWF se almacenan en archivos con la extensin .swf y por razones
histricas 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
siempre W
Pg. -89-
siempre S
Versin UI8 Sola versin del archivo
del octeto
Longitud del archivo UI32 Longitud del archivo
entero en octetos
Tamao del frame RECT Tamao del captulo en
TWIPS
Frame Rate UI16 Retraso del frame fijado en
un nmero fijo de 8.8
frames por segundo
Cuenta del frame UI16 Nmero total de frames en
pelcula
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 tamao. Una etiqueta corta tiene 9 bits usados para el en bloques y 6 bits
usados para una longitud del bloque en gran nmero de octetos. Si un bloque es 63
octetos o ms 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] Identificacin 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] Identificacin de la
Pg. -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 sealar a desplazamientos dentro del bloque,
pero deben nunca sealar a una compensacin 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 nmeros de etiqueta 0-511
son reservados para el uso futuro. Los nmeros de etiqueta 512-1023 son reservados
para uso de usos de los terceros. Para ms informacin sobre mecanismos de la
extensin que se convierten, ver la seccin del mecanismo de la extensin.
Tipos de etiquetas
Las etiquetas de la definicin se utilizan para agregar la informacin de carcter al
diccionario. Las etiquetas de la definicin 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 informacin sobre etiquetas
especficas, ver la seccin 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
definicin 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 animacin.
Esta ordenacin de etiquetas es cmo 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 ms adelante
en el archivo.
La etiqueta del fin se debe utilizar en el extremo del archivo para indicar el fin del
archivo.
Pg. -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 carcter tiene un nombre numrico de 16 bits. Cada carcter en un archivo
debe tener un nombre nico. Tpicamente, el primer carcter es #1, el segundo carcter
es #2 y as sucesivamente. El carcter #0 es especial y se considera un carcter 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 nmero de identificacin del carcter.
Lista del Display
Conceptualmente, el formato del archivo de SWF se puede considerar como dos
corrientes interpoladas de datos. La corriente de la definicin agrega caracteres al
diccionario y la corriente del control realiza operaciones en la lista de la exhibicin
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 estn presentes
en la pantalla en cualquier punto dado a tiempo. Para SWF 3, esta lista se ha extendido a
una lista jerrquica donde un elemento en la exhibicin puede tener una lista de los
elementos hijo.
Los objetos en la lista de la exhibicin son referidos por un nmero 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 bsicas en la lista de la exhibicin:
Poner un objeto-Lugar que un carcter encendido en un nivel dado de la
profundidad que usa una transformacin especificada.
Mover un objeto-Modificacin el objeto en el nivel dado de la profundidad. El
transformar y el carcter pueden ser modificados.
Quitar un objeto-Quitar el objeto en un nmero dado de la profundidad de la
exhibicin.
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 optimizacin del tamao para
SWF 3.
Nmeros y coordenadas
SWF utiliza nmeros enteros y los nmeros del punto fijo para todas sus coordenadas y
matrices de la transformacin. El espacio coordinado es definido por coordenadas del
nmero entero. Este espacio coordinado se puede mapear al display de cualquier manera
que un visualizador quiera. Por convencin, las coordenadas son especificados donde
una unidad es igual a 1/1440 pulgadas. En un display tpico de 72 dpi esto es
equivalente a decir que un solo pxel est dividido en 20 unidades. Esta opcin de
unidades proporciona un buen compromiso entre dar una alta resolucin para zoom y la
Pg. -92-
colocacin exacta de objetos. Una resolucin ms alta aumentara el tamao del archivo
debido a los bits adicionales necesitados para la precisin.
Transforma
La colocacin del Matriz-Objeto es especificada por una matriz estndar de la
transformacin 2x3 usando 16.16 nmeros del punto fijo para los primeros cuatro
elementos y los nmeros 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 ecuacin 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 tambin 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 exhibicin 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 estn procesadas en una
corriente hasta que se encuentra una etiqueta de ShowFrame. En ese punto, la lista de la
exhibicin 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 captulo 1 es definido realizando todas las operaciones de control antes de la primera
etiqueta de ShowFrame. El captulo 2 es definido realizando todas las operaciones de
control antes de la segunda etiqueta de ShowFrame y as sucesivamente.
Estrategia de la compresin del archivo
Puesto que los archivos de SWF se entregan con frecuencia sobre una conexin de red,
es importante que sean tan compactos como sea posible. Hay varias tcnicas que se
utilizan para lograr esto:
Reutilizar- la estructura de las marcas del diccionario del carcter l muy fcil
reutilizar elementos en un archivo de SWF. Por ejemplo, una forma, un botn,
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 Compresin- SWF apoya una variedad de tcnicas de la
compresin. Las BITMAP se pueden comprimir con el J PEG o a Png-como la
compresin del zlib. El sonido se comprime con los varios niveles de la
Pg. -93-
compresin de ADPCM. Se comprimen las formas usando un esquema de
codificacin delta muy eficiente.
Enpaquetamiento de bits-Siempre que sea posible, los nmeros se empaquetan
en el nmero posible ms pequeo de los bits para un valor particular. Las
coordenadas se almacenan comnmente usando los campos variable-clasificados
del bit, donde algunos bits se utilizan para indicar cuntos 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 ms a menudo que otros. Por ejemplo, para una
matriz, el campo ms comn es el campo de la traduccin. El escalamiento y la
rotacin son menos comunes. Por lo tanto si el campo del escalamiento no est
presente, se asume para ser 100%. Si el campo de la rotacin no est presente, se
asume que no hay rotacin. Este uso de los valores prefijados ayuda a reducir al
mnimo tamaos 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 exhibicin.
Estructura de datos de formas- La estructura de datos de formas utiliza una nica
estructura para reducir al mnimo el tamao 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 compresin 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 extensin
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 ejecucin y una gama de la etiqueta que describa qu etiquetas sern
utilizadas por este sistema de la extensin. Los sistemas de la extensin 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 sern interpretados en el contexto de la
extensin nombrada. Los usos deben poder remapear la gama de la etiqueta para que un
archivo particular evite conflictos entre dos sistemas de la extensin.
La extensin debe estar en el tipo gama de la etiqueta 512-1023.
Archivo de muestra SWF
Ejemplo de archivo SWF

***** Dumping SWF File Information *****
Pg. -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 informacin. FWS indica que el archivo es un
archivo de SWF; su versin es el archivo 3.0. El tamao del archivo es 741 octetos. La
anchura de la pelcula es 550; su altura es 400 pxeles. La tasa de frames es de 12
frames por segundo; hay diez frames en esta pelcula.
----- 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 accin de DoAction es parada. El cdigo de accin
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]
Pg. -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 posicin 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 ms formas y un botn.
tag 5
pos matrix hex [ a_fixed b_fixed] = [0004dbd3
00000000]
0004dbd3]
[tx_fixed ty_fixed] [00000600
00000a1c]
Inserta el botn (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 botn de la lista del display.
00000000]
00010000]
[tx_fixed ty_fixed] [000012ea
00000690]
Pg. -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.
00000000]
00010000]
00000910]
etapa.
00000000]
00010000]
00000b90]
etapa.
00000000]
Pg. -97-
00010000]
[tx_fixed ty_fixed] [000019bc
00000e10]
etapa.
00000000]
00010000]
[tx_fixed ty_fixed] [00001c03
00001090]
etapa.
00000000]
00010000]
[tx_fixed ty_fixed] [00001e49
00001310]
etapa.
Pg. -98-
00000000]
00010000]
[tx_fixed ty_fixed] [0000208f
00001590]
etapa.
00000000]
00010000]
[tx_fixed ty_fixed] [000022d5
00001810]
etapa.
00000000]
00010000]
[tx_fixed ty_fixed] [0000251b
00001a90]
etapa.
Pg. -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 *****

Pg. -100-
5.3. Alternativas para la visualizacin de informacin
grfica en la Web

Frente la descripcin tradicional de un grfico como un conjunto de pxeles coloreados,
la arquitectura de almacenamiento vectorial de grficos describe las imgenes como un
conjunto de entidades geomtricas, denominadas primitivas, las cuales llevan asociada
informacin sobre sus propiedades por medio de una serie de atributos (figura 3).
Empleados profusamente en el mbito del CAD y el modelado tridimensional, los
grficos vectoriales presentan una serie de ventajas que los convierten en una alternativa
viable a la generacin de imgenes para la Web [5]. Las ms significativas se describen
a continuacin:
Las entidades que componen un grfico vectorial se describen por medio de su
ecuacin matemtica, lo que supone un grado de compresin elevadsimo, sin parangn
en los formatos bitmap.
Un fenmeno derivado de lo anterior es que la calidad de la representacin es
independiente del tamao de la imagen, y no depende de ningn parmetro ajustable
como ocurre con el tamao del pxel en los grficos bitmap. De ese modo, la
focalizacin puede variarse libremente sin que la visualizacin se vea afectada.
La capacidad de edicin de la escena es muy elevada, puesto que resulta muy sencillo
acceder a los atributos de las entidades previamente seleccionadas.
La adicin de metainformacin a las entidades posibilita la creacin de hipervnculos
a distintas referencias, abriendo adems la puerta a un comportamiento interactivo con
el usuario.
Pg. -101-

Imagen 15 Tecnologa de grficos de barrido (izquierda) y vectoriales (derecha)

Desde 1994, el consorcio W3C [11] trabaja en la confeccin de estndares grficos para
la Web, adaptados a las peculiaridades que presenta este medio de difusin. Las
recomendaciones establecidas por esta institucin en 1996 acerca de las caractersticas
imputables a una especificacin exitosa de grficos vectoriales para la Web se sustentan
en cinco grandes apartados:

La necesidad de una especificacin de libre distribucin y gratuita, que permita a los
programadores desarrollar aplicaciones sin ataduras.

La conveniencia de establecer una descripcin vectorial de entidades muy completa,
que no slo defina primitivas convencionales (puntos, lneas, crculos) sino tambin
especifique el empleo de textos, fuentes tipogrficas, o que incluye comportamientos
ms habituales en el mbito de los grficos bitmap, como la transparencia o los efectos
de mscara.
Pg. -102-

El inters que promueve la generacin de grficos animados e interactivos, para
promover su empleo en sectores donde estos comportamientos son muy demandados.

La necesidad de adosar metainformacin a las entidades vectoriales, con el fin de
vincular bases de datos alfanumricas a la informacin grfica.

La conveniencia de desarrollar herramientas de autor, es decir, entornos grficos y
amigables para que el usuario sin experiencia pueda crear sus contenidos sin necesidad
de aprender complicados lenguajes de programacin.

Desde esta declaracin de intenciones por parte del Consorcio, han surgido una serie de
iniciativas para dar respuesta a estos requisitos. A continuacin se describen las
propuestas ms relevantes.

Los grficos vectoriales en la Web

La primera iniciativa de inters est basada en el empleo del estndar ISO denominado
CGM (Computer Graphics Metafile), un formato de descripcin de entidades
vectoriales con casi dos dcadas de existencia, y que ha sido mejorado progresivamente
a lo largo de estos ltimos aos hasta dar lugar a la aparicin de perfiles de desarrollo
especficos para reas concretas. Un sosegado anlisis realizado por el W3C en 1997
concluye que es posible la definicin de un perfil CGM para la Web, ya que verifica
satisfactoriamente muchas de los requisitos contemplados en el epgrafe anterior. Se
trata de una especificacin abierta, con unas prestaciones muy satisfactorias
fundamentadas en otros dos estndares grficos ISO, como PHIGS (Programmer's
Hierarchical Interactive Graphics System) y GKS (Graphical Kernel System)

Como consecuencia de la colaboracin 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 haba sido concebido para la industria aeroespacial.
Compaas como Micrografx o SDI han elaborado plug-ins para los navegadores ms
habituales. Aunque en el mundo de la industria norteamericana es ampliamente
utilizado en aplicaciones CAD relacionadas con la aeronutica, no ha llegado a
alcanzar una difusin de mbito general, y fuera de estos sectores es un estndar
prcticamente desconocido. Las razones que explican este fenmeno son, por un lado, la
Pg. -103-
carencia que muestra WebCGM a la hora de definir primitivas grficas con atributos
como transparencias o capas mscaras, imprescindibles en el mundo del arte y el diseo.
Por otro, las escasas prestaciones a la hora de generar contenidos animados e
interactivos, lo que lo aleja de un amplio nmero de campos de aplicacin.
Tanto el Consorcio como las compaas privadas desarrolladoras de software han
seguido trabajando en creacin de propuestas de audiencias ms amplias, buscando
compatibilizar la facilidad de diseo con las prestaciones cada vez ms exigentes que
demandan los usuarios. En la actualidad, dos son las especificaciones que han adquirido
un papel preponderante a la hora de representar grficos vectoriales en la Web: el
formato SWF (ShockWave Flash), de la compaa Macromedia, y el formato SVG
(Scalable Vector Graphics) recomendado por el Consorcio W3C. El formato SWF se ha
convertido en un estndar de facto, aunque est bajo el control de un nico fabricante.
Cientos de miles de pginas Web hacen uso de esta tecnologa, ampliamente difundida
gracias a la inclusin gratuita del plug-in Macromedia Flash Player con los principales
navegadores. Creado por una modesta compaa denominada FutureSplash, el formato
fue adquirido en 1997 por la compaa Macromedia como un complemento a su
aplicacin Director, dedicada a la generacin de contenidos multimedia.

Por su parte, SVG es una especificacin libre para el desarrollo de grficos vectoriales
para la Web elaborada por W3C y basada en XML (Extensible Markup Language), un
lenguaje cuya aparicin en 1997 supuso un profundo cambio a la hora de valorar la
futura evolucin de la Web. XML es un metalenguaje empleado en la definicin de
lenguajes basados en etiquetas, como HTML, que permite el almacenamiento de
informacin estructurada en base a un rbol jerrquico de categoras previamente
definidas por el usuario. En 1998, el Consorcio recibi cuatro propuestas de formatos
vectoriales de grficos basados en XML: Web Schematics, Precision Graphics Markup
Language (PGML), Vector Markup Language (VML) y DrawML. Para su discusin y
anlisis, se form un grupo de trabajo que concibi SVG, convertido en recomendacin
de W3C en Septiembre de 2001.
En la actualidad, existe una gran confusin en torno a qu formato elegir para la
creacin de grficos vectoriales en la Web, en un momento en el que la coyuntura
tecnolgica abre la puerta a nuevos soportes de difusin y la situacin socioeconmica
provoca fuertes vaivenes en el sector de las grandes compaas informticas, lo que
hace coger impulso a la ya consabida discusin entre software libre y comercial. Para
tomar la decisin, es preciso contar con criterios objetivos que resalten las similitudes y
diferencias entre ambas tecnologas. Ese es el objetivo del siguiente captulo.

Comparacin entre SWF y SVG
El anlisis entre ambos formatos, que se inspira y mejora otras aportaciones realizadas
en este campo, se ha establecido en torno a los siguientes apartados: Caractersticas
generales, prestaciones grficas, comportamiento dinmico e integracin de recursos
multimedia. Se comparan las versiones SWF 7 y SVG 1.1.
Pg. -104-

Caractersticas generales

La diferencia fundamental entre los dos formatos radica, aparte de en el tipo de licencia,
en el procedimiento de creacin y edicin. Mientras que SWF es generado a travs de
Macromedia Flash, una potente herramienta de autor incluida en la Suite Studio, SVG
carece de entornos de desarrollo con prestaciones similares, aunque la situacin est
cambiando en los ltimos meses gracias a la aparicin de herramientas como Inkscape
o Sketsa. Sin embargo, el formato tipo texto de SVG favorece su edicin con un
sencillo procesador de textos, independizando su creacin de sistemas operativos y
plataformas, lo que otorga un mayor control sobre su generacin.
En ambos casos, la visualizacin se lleva a cabo a travs de un plug-in del navegador,
pero mientras Macromedia Flash Player est instalado por defecto en los browsers ms
difundidos, como Microsoft Internet Explorer, los plug-ins de SVG estn parcialmente
implementados, no se distribuyen de forma conjunta con el navegador, y su difusin 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 extensin .FLA, y el formato comprimido .SWF, derivado del anterior, pero ms
ligero y adaptado a las particularidades de la publicacin en Web.

Prestaciones grficas
Pg. -105-

Pg. -106-
Sorprende el hecho de que la mayor parte de las primitivas grficas no aparezcan
codificadas directamente en SWF. La razn hay que buscarla en la propia naturaleza de
este formato, enfocado hacia la publicacin en Web y por tanto ms ligero y optimizado
que el formato FLA generado por la herramienta de autor. Aunque en este entorno s
estn disponibles como herramientas grficas, en el formato SWF se aproximan
mediante una concatenacin de operaciones fundamentales como lineto o curveto.

Es significativo sealar que muchos de los parmetros de SVG se definen mediante
expresiones heredadas de la especificacin CSS (Cascading Style Sheets), utilizada
junto con HTML para la creacin de pginas Web con hojas de estilo. As ocurre con
las unidades de trabajo, el peso de la fuente, la codificacin de los colores o las
propiedades de bordes y rellenos. Esta circunstancia facilita el aprendizaje de esta
tecnologa 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
distincin entre contenido y presentacin.
Una de las grandes ventajas de SVG es la cuidada atencin que presta a procedimientos
ms propios de la manipulacin de imgenes bitmap, como las mscaras, los filtros o la
transparencia, en lo que puede considerarse como un intento promovido por el
consorcio W3C de crear una especificacin que rena lo mejor de ambas tecnologas.
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 ms, con lo que tanto la
flexibilidad como el rango de variacin alcanzados se incrementan notablemente.
Comportamiento dinmico

Pg. -107-
La arquitectura adoptada para la generacin de animaciones difiere bastante. Mientras
que Macromedia Flash emplea la metfora de la lnea de tiempo donde suceden eventos
secuencialmente, heredada de los programas de postproduccin de video e incluso de
otras aplicaciones de la misma compaa, como Director, SVG descarga en los objetos
de animacin esta responsabilidad, derivando ms el diseo hacia qu se anima en vez
de cundo se anima. Esta posiblidad ya se atisba en otras propuestas de estndares para
la Web como VRML (Virtual Reality Markup Language) o su sucesor X3D , tambin
basado en XML. En cualquier caso, las prestaciones exhibidas por ambas propuestas
son similares.

Para la obtencin de un comportamiento interactivo, ambos formatos recurren a un
lenguaje de programacin (ActionScript en Flash y ECMAScript en SVG), que tambin
proceden de un ncleo comn como es J avaScript. Resulta destacable la flexibilidad que
en SVG desencadenan los eventos de tipo mutacin, generados cada vez que se aade,
elimina o modifica un nodo de la estructura jerrquica de la escena creada. La
posibilidad de establecer vnculos directos entre las entidades definidas en SVG, sin
necesidad de acudir a la programacin, facilita notablemente la tarea a los diseadores.
Integracin de recursos multimedia

La especificacin SVG 1.1 no contempla la integracin de video y audio en la escena.
Tan slo algunos visores, como el desarrollado por Adobe, permiten la reproduccin de
video recurriendo a procedimientos propietarios de la compaa. Sin embargo, el
documento de trabajo de la especificacin 1.2 completa, publicado en Abril de 2005,
indica que SVG dar soporte a ambos medios en un futuro prximo. Flash, por el
contrario, presenta una excelente integracin de diversos contenidos multimedia, a los
que aplica de forma automtica compresores (MP3 en audio y Sorenson H.263 en
video) para minimizar as el peso de la pelcula final. En el caso de las imgenes bitmap,
Flash permite, aparte de aplicar una compresin J PEG directa al contenido raster,
realizar una vectorizacin de la misma para convertirla en un conjunto de entidades
vectoriales.

Pg. -108-
La Expresin Grfica ante las nuevas tecnologas de creacin de
contenidos
No cabe duda de que la aparicin de nuevos estndares para la publicacin de
contenidos grficos obliga al rea de conocimiento a realizar un estudio sosegado de las
capacidades de los mismos para evaluar su posible utilizacin en la futura accin
docente. La prxima entrada del Espacio Europeo de Educacin Superior traer consigo
la puesta en marcha de metodologas capaces de aprovechar todas las posibilidades que
brindan las Nuevas Tecnologas de la Informacin. El fin no es otro que el de dar
respuesta al reto de una enseanza ms orientada al alumno, el cual tendr a su
disposicin un elevado nmero de recursos no slo accesibles desde su centro de
estudio, sino en su domicilio, donde se desarrollar buena parte del proceso de
enseanza-aprendizaje que ahora ser necesario evaluar. Entendiendo la generacin de
grficos vectoriales para la Web como un recurso til para la transmisin del
conocimiento del rea de Expresin Grfica, en reas como la geometra, los sistemas
de representacin o el diseo 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 afirmacin son las siguientes:

La posibilidad de crear y editar contenidos grficos en SVG con un sencillo
procesador de textos ASCII lo convierte en una opcin independiente de sistemas
operativos y plataformas informticas (tabla 1).
La pluralidad de unidades de medida soportadas (tabla 2) acerca ms esta
especificacin a la realidad mtrica que plantean muchos de los conceptos manejados en
Expresin Grfica.
La creacin y edicin de primitivas nativas en SVG es siempre preferible frente a la
simulacin de las mismas, como ocurre en SWF (tabla 2), lo cual puede ser objetivo
irrenunciable en aquellas aplicaciones donde la precisin tenga un papel esencial.
Siguiendo con el objetivo de conseguir una representacin fidedigna, el control de los
fenmenos de antialiasing sobre las entidades individuales, inexistente en Flash,
proporciona una mejora sustancial de la calidad de visualizacin (tabla 2).
Las propiedades especficas de diseo 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 generacin de chaflanes y empalmes, la definicin de tipos
de lnea o de patrones de sombreado (tabla 2) son una buena muestra de estas
capacidades.
Aunque ambos formatos contemplan la realizacin de transformaciones geomtricas
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 edicin y posibilita la implementacin eficaz de rdenes de creacin de
patrones basados en la copia de un elemento base (tabla 2).
Pg. -109-
Los hipervnculos internos en SVG abren la puerta a la referenciacin de smbolos y
bloques de forma eficaz, emulando as las herramientas existentes en los programas de
diseo asistido por computador (tabla 3).

La generacin de grficos vectoriales en la Web es una tecnologa reciente que ha
venido a dar soluciones al problema de la transmisin de contenidos grficos elaborados
a travs de redes con anchos de banda ajustados, consiguiendo minimizar los tamaos y
los tiempos de descarga sin producir una merma en su calidad. Adems, la adicin de un
comportamiento dinmico mediante animaciones y comportamientos interactivos ha
abierto las puertas a que la informacin grfica no sea un simple contenido
complementario al texto, sino que tenga una entidad semntica 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 estndar realizada por el Consorcio W3C. Lejos de vislumbrarse un
panorama estable, hay una serie de acontecimientos que aaden una fundada
incertidumbre acerca del futuro de estas tecnologas:
La adquisicin de Macromedia por parte de Adobe (defensora del estndar SVG hasta
la fecha) en 2005 abre numerosas discusiones sobre la apuesta tecnolgica que esta
compaa adoptar en un futuro cercano.
La aparicin de nuevos dispositivos porttiles (PDAs, telfonos mviles,
videoconsolas) incrementa la audiencia potencial de estas tecnologas de manera
notable. Tanto el Consorcio (a travs 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 compaas del sector que han dado ya
su apoyo a esta iniciativa, comenzado a implantarla en sus telfonos mviles.
Una de las claves de la amplia difusin de SWF hasta la fecha radica en la existencia
de una potente e intuitiva herramienta de autor. La aparicin de alternativas de
prestaciones similares desde el mbito del software libre est empezando a poner en
entredicho esta supremaca.

Lo que s parece fuera de toda discusin es el papel relevante que la creacin de grficos
vectoriales para la Web puede tener en la accin del rea de Expresin Grfica en la
Ingeniera, toda vez que la disponibilidad de recursos grficos en lnea puede ser un
aliado indispensable para la eficaz puesta en marcha de las metodologas docentes que
propugna el Espacio Europeo de Educacin Superior.
Pg. -110-
5.1. Seale el enunciado incorrecto
a) Los archivos SWF pueden ser creados por el programa Flash, aunque hay otras
aplicaciones que tambin 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 especificacin permite crear software que reproduzca el
formato.
d) Es posible encapsular los ficheros SWF junto con el reproductor, creando un
proyector autnomo que reproduce la animacin 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 especificacin DOM.
c) SWF es formato ASCII mientras que SVG no.
d) Ambas disponen de sistemas de compresin.
5.4. Marcar el enunciado correcto
a) En SVG la mayor parte de las primitivas grficas no aparezcan codificadas.
b) Es significativo sealar que muchos de los parmetros de SVG se definen
mediante expresiones heredadas de la especificacin 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 programacin.
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
Pg. -111-
6. Introduccin a Flash y herramientas alternativas

6.1. Adobe Flash
Adobe FLASH (hasta 2005 Macromedia FLASH) o FLASH se refiere tanto al
programa de edicin multimedia como al reproductor de SWF (Shockwave FLASH)
Adobe Flash Player, escrito y distribuido por Adobe, que utiliza grficos vectoriales e
imgenes rster, sonido, cdigo de programa, flujo de vdeo y audio bidireccional (el
flujo de subida slo 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 mquina virtual utilizado para ejecutar los archivos generados con Flash.
Los archivos de Flash, que tienen generalmente la extensin de archivo SWF, pueden
aparecer en una pgina 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 pginas Web y sitios Web multimedia, y ms
recientemente Aplicaciones de Internet Ricas. Son tambin ampliamente utilizados en
anuncios de la Web.
En versiones recientes, Macromedia ha ampliado Flash ms all de las animaciones
simples, convirtindolo 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 estn reproducindose 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, slo pueden
comunicarse con el dominio del que ellos se originaron, a menos que sea permitido
explcitamente por otro dominio.
Flash Player es, como cualquier aplicacin que trata archivos recibidos de Internet,
susceptible a los ataques. Los archivos especialmente elaborados podran hacer que la
aplicacin funcionara mal, permitiendo la ejecucin potencial de cdigo maligno. No se
tiene conocimiento de problemas reales y concretos, pero el plug-in del Player ha tenido
defectos de seguridad que tericamente podran 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 fcilmente en su
cdigo fuente y sus valores. Hay disponibles varios programas que extraen grficos,
sonido y cdigo de programa a partir de archivos swf. Por ejemplo, un programa de
cdigo abierto denominado Flasm (http://flasm.sourceforge.net) permite a los usuarios
extraer ActionScript a partir de un archivo swf como mquina virtual de lenguaje
intermedio ("bytecode"), editarlo, y luego volverlo a insertar en el archivo. La
Pg. -112-
ofuscacin de los archivos swf hace prcticamente imposible la extraccin en la
mayora de los casos.
Influencia
La naturaleza y el renombre de Flash ha tenido una gran influencia en el diseo grfico.
Su funcin rotoscoping ha conducido a una gran popularidad a sus grficos de vector
con rotoscope, realizados con colores pastel de las herramientas de autora de Flash.
Muchos flyers, anuncios, revistas, e incluso sitios web que no utilizaban Flash han
adoptado este estilo grfico. Por ejemplo, la campaa del iPod de Apple con los
contornos de carcter en fondos coloridos se puede considerar enormemente influida
por el estilo de diseo paradigmtico de Flash.
API
La Interfaz de Programacin de Aplicaciones de Adobe Flash est basada en J avascript-
C, es decir, los comandos de C++no se interpretan directamente desde C/C++, sino con
J avascript. Es decir, da mayor flexibilidad al desarrollador en vista de la ampliacin-
personalizacin de la aplicacin al tratarse de cdigo abierto (que puede ser ampliado
con las APIs de J S); no como antes del Macromedia Flash 7, que era el programa en
C++.
ActionScript
Es cierto que la interfaz de programacin de Flash est basada en J avaScript, pero con
base en este lenguaje, fue creado ActionScript. Puede parecer a simple vista que
J avaScript y ActionScript son iguales, pero no lo son. Por una parte, J avaScript es un
lenguaje de programacin estructurada (tambin llamada programacin modular.
Debido a la caracterstica de poder armar por partes el script) y adems se utiliza
principalmente para agregarle interactividad a pginas web. Por otra parte, ActionScript,
desde su versin 2.0, pasa de ser de programacin estructurada a programacin
orientada a objetos, que trata de ver el entorno de programacin como el mundo real,
donde cada objeto tiene propiedades como el color, la forma y su ubicacin, y mtodos
(borrar un texto, parar la lnea de tiempo, cargar variables u hojas de estilo), y adems
nos encontramos con un lenguaje ms estricto y ms 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 fcil 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 pelcula como el cdigo, para crear el ejecutable, o el .swf, o ms si se quiere,
ya que flash puede exportar la pelcula final de varias maneras, desde sacar la pgina
.html, con el cdigo para embeber el swf, pasando por exportar .png, .jpg, y gif
(archivos de imagen) hasta exportar el .swf o un exe.
Pg. -113-
Flash CS3 ya emplea la versin 3.0 de Action Script con varios cambios sobre la
anterior versin.

6.2. Tutorial de Flash
INTRODUCCION A FLASH MX
Las pelculas de Flash son imgenes y animaciones para los sitios Web. Aunque estn
compuestas principalmente por imgenes vectoriales, tambin pueden incluir imgenes
de mapa de bits y sonidos importados. Las pelculas Flash pueden incorporar
interaccin para permitir la introduccin de datos de los espectadores, creando pelculas
no lineales que pueden interactuar con otras aplicaciones. Los diseadores de la Web
utilizan Flash para crear controles de navegacin, logotipos animados, animaciones de
gran formato con sonido sincronizado e incluso sitios Web con capacidad sensorial. Las
pelculas Flash son grficos vectoriales compactos que se descargan y se adaptan de
inmediato al tamao de la pantalla del usuario.
Flujo de trabajo de Flash
El trabajo en Flash para la creacin de una pelcula incluye el dibujo o la importacin de
una ilustracin, su organizacin en el Escenario y su animacin con la Lnea de tiempo.
La pelcula puede hacerse interactiva utilizando acciones que hagan que la pelcula
responda a determinados eventos de cierta manera.
Una vez terminada la pelcula, 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 pelcula misma.
Las pelculas de Flash pueden reproducirse de varias formas:
- En navegadores Internet, tales como Netscape Navigator y Microsoft Internet
Explorer, que estn equipados con Flash Player.
- Con el control ActiveX de Flash en Microsoft Office, Microsoft Internet Explorer para
Windows y otros entornos anfitrin de ActiveX.
- En Flash Player, una aplicacin independiente de manejo similar al complemento
Flash Player.
- Como un proyector independiente, un archivo de pelcula que se puede reproducir sin
disponer de Flash Player.
Animacin en Flash
Flash le permite animar objetos para dar la impresin de que se mueven por el
Escenario, as como cambiar su forma, tamao, color, opacidad, rotacin y otras
propiedades. Tambin puede crear animacin fotograma a fotograma, creando una
imagen diferente para cada fotograma. Otra posibilidad consiste en crear animacin
Pg. -114-
interpolada, es decir, crear los fotogramas primero y ltimo de una animacin y dejar
que Flash cree los fotogramas intermedios.
Grficos vectoriales y de mapa de bits
Los PC muestran imgenes en formato vectorial o de mapa de bits. Es muy importante
comprender la diferencia existente entre ambos formatos para poder utilizarlos de la
forma ms eficaz. Flash permite crear y animar grficos vectoriales compactos.
Tambin permite importar y manipular grficos vectoriales y de mapa de bits creados en
otras aplicaciones.
CREACION DE UN PELICULA EN FLASH
Cada vez que se abre Flash, la aplicacin crea un nuevo archivo. Durante la sesin de
trabajo es posible crear otras nuevas pelculas. Para definir el tamao, la velocidad de
fotogramas, el color de fondo y otras propiedades de una nueva pelcula, se utiliza el
cuadro de dilogo Propiedades de pelcula.
Seleccione Archivo >Nuevo .
1 Modificar
Para crear una pelcula nueva y establecer sus propiedades:
2 Elija Modificar >Pelcula . Aparecer el cuadro de dilogo Propiedades de pelcula.
3 En la seccin Velocidad de fotogramas, introduzca el nmero de fotogramas de
animacin que deben mostrarse cada segundo. La mayora 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 seccin Dimensiones, elija una de estas opciones:
- Para especificar el tamao del Escenario en pxeles, introduzca los valores en los
campos Anchura y Altura. El tamao de pelcula predeterminado es de 550 por 400
pxeles. El tamao mnimo es de 18 por 18 pxeles, mientras que el mximo es de 2880
por 2880 pxeles.
- Para establecer el tamao 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
mnimo el tamao de la pelcula, alinee todos los elementos en la esquina superior
izquierda del Escenario antes de utilizar el comando Coincidir contenido.
- Para establecer el tamao del Escenario con la mayor rea de impresin posible, haga
clic en Coincidir impresora. Este rea queda determinada por el tamao del papel menos
los mrgenes seleccionados en el rea Mrgenes del cuadro de dilogo Configurar
pgina (Windows) o del cuadro de dilogo Mrgenes de impresin (Macintosh).
Pg. -115-
5 Para establecer el color de fondo de la pelcula, 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 aplicacin.
7 Haga clic en Aceptar.

LINEA DE TIEMPO

Lnea de tiempo (Timelines)
La Lnea de tiempo organiza y controla el contenido de una pelcula a travs del tiempo,
en capas y fotogramas. Los componentes principales de la Lnea de tiempo son las
capas, los fotogramas y la cabeza lectora.
Las capas de una pelcula aparecen en una columna situada a la izquierda de la Lnea de
tiempo. Los fotogramas contenidos en capa cada aparecen en una fila a la derecha del
nombre de la capa. El encabezado de la Lnea de tiempo situado en la parte superior de
la Lnea de tiempo indica los nmeros de fotogramas. La cabeza lectora indica el
fotograma actual que se muestra en el Escenario.
La informacin de estado de la Lnea de tiempo situada en la parte inferior de la Lnea
de tiempo indica el nmero de fotograma actual, la velocidad de fotogramas actual y el
tiempo transcurrido hasta el fotograma actual.
Pg. -116-
Nota: Al reproducir una animacin, se muestra la velocidad de fotogramas actual, que
puede diferir de la velocidad de fotogramas de la pelcula si el sistema no puede mostrar
la animacin con la rapidez apropiada.
Puede cambiar la manera segn la que se muestran los fotogramas y mostrar miniaturas
del contenido de los fotogramas en la Lnea de tiempo. La Lnea de tiempo muestra
dnde hay animacin en una pelcula, incluyendo la animacin fotograma a fotograma,
la animacin interpolada y los trazados de movimiento.
Modificacin del aspecto de la Lnea de tiempo
De forma predeterminada, la Lnea de tiempo aparece en la parte superior de la ventana
de la aplicacin principal, encima del Escenario. Para cambiar su posicin, puede
acoplarla tanto a la parte inferior como a uno de los dos lados de la ventana de la
aplicacin principal, as como mostrarla en su propia ventana. Tambin es posible
ocultarla.
Puede cambiar el tamao de la Lnea de tiempo para cambiar el nmero de capas y
fotogramas visibles. Si hay ms capas de las que es posible mostrar en la Lnea de
tiempo, puede ver las capas adicionales utilizando las barras de desplazamiento situadas
a la derecha de la Lnea de tiempo.
Para mover la Lnea de tiempo:
Arrstrela desde el rea por encima del encabezado de la Lnea de tiempo.
Arrastre la Lnea de tiempo hasta el borde de la ventana de la aplicacin para acoplarla.
Presione Control (en Windows y en Macintosh) mientras la arrastra para impedir que la
Lnea 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 Lnea de tiempo.

Para cambiar el tamao de la Lnea de tiempo, utilice uno de los siguientes
procedimientos:
Si la Lnea de tiempo est acoplada a la ventana de la aplicacin principal, arrastre la
barra que separa la Lnea de tiempo de la ventana de la aplicacin.
Pg. -117-
Si la Lnea de tiempo no est acoplada a la ventana de la aplicacin principal, arrastre la
esquina inferior derecha (Windows)
Desplazamiento de la cabeza lectora
La cabeza lectora se mueve por la Lnea de tiempo para indicar el fotograma que se
muestra en cada momento en el Escenario. El encabezado de la Lnea de tiempo
muestra los nmeros de fotograma de la animacin. Para que aparezca en el Escenario
un determinado fotograma, puede mover la cabeza lectora hasta ese fotograma en la
Lnea de tiempo.
Si est trabajando con un nmero de fotogramas tal que no es posible que todos
aparezcan al mismo tiempo en la Lnea de tiempo, puede centrar la cabeza lectora en la
Lnea de tiempo para poder localizar fcilmente el fotograma actual.
Para ir a un fotograma:
Haga clic en la posicin del fotograma en el encabezado de la Lnea de tiempo o bien
arrastre la cabeza lectora hasta la posicin deseada.
Para centrar la cabeza lectora en el medio de la pelcula:
Haga clic en el botn Centrar fotograma situado en la parte inferior de la Lnea de
tiempo.
En la Lnea 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,
imgenes o smbolos, un conjunto de fotogramas conforman una animacin.
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 posicin 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 Lnea de tiempo permite ver los fotogramas interpolados de una animacin. Para
insertar fotogramas en la Lnea de tiempo, utilice uno de los siguientes procedimientos:
Pg. -118-
Para insertar un nuevo fotograma, seleccione Insertar >Fotograma .
Para crear un nuevo fotograma clave, seleccione Insertar >Fotograma o bien haga clic
con el botn derecho del ratn (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 vaco, seleccione Insertar >Fotograma vaco o
bien haga clic con el botn derecho del ratn (Windows) o Control-clic (Macintosh) en
el fotograma donde desea colocar el fotograma clave y seleccione Insertar fotograma
clave vaco en el men contextual.
Fotograma clave: Un fotograma clave es un fotograma en el que se define un cambio en
una animacin o bien se incluyen acciones de fotograma para modificar una pelcula.
Los fotogramas clave son fundamentales en la animacin interpolada. Puede cambiar la
longitud de una animacin interpolada arrastrando un fotograma clave en la Lnea 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, seleccinelo y
elija Insertar >Eliminar fotogramas o bien haga clic con el botn derecho del ratn
(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 permanecern tal como estaban.
Para mover un fotograma clave o una secuencia de fotogramas y su contenido, arrstrelo
a la posicin deseada.

Para alargar la duracin de un fotograma clave, arrastre con la tecla Alt. presionada
(Windows) o con la tecla Opcin presionada (Macintosh) el fotograma clave hasta el
fotograma final de la nueva duracin de la secuencia.
Para copiar un fotograma clave o secuencia de fotogramas mediante la operacin de
arrastre, haga clic con el ratn, presione Alt. (Windows) u Opcin (Macintosh) y
arrastre el fotograma clave a la nueva posicin.
Para copiar y pegar un fotograma o una secuencia de fotogramas, seleccione el
fotograma o la secuencia y elija Edicin >Copiar fotogramas. Seleccione el fotograma
o la secuencia que desee sustituir y elija Edicin >Pegar fotogramas .

Para convertir un fotograma clave en un fotograma comn, seleccinelo y elija Insertar
>Borrar fotograma clave o bien haga clic con el botn derecho del ratn (Windows) o
Control-clic (Macintosh) en el fotograma o la secuencia y seleccione Borrar fotograma
Pg. -119-
clave en el men contextual. El fotograma clave borrado y todos los fotogramas hasta el
fotograma clave siguiente sern 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.
Interpolacin: Una interpolacin es la generacin automtica 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 mltiples
capas permite ejecutar diversas animaciones al mismo tiempo.

Escena: Una escena es un conjunto de capas.

Pelcula: Una pelcula es un conjunto de Escenas, reproduciendo simultneamente en el
orden que fueron creadas. Previsualizacin de pelculas en el entorno de creacin Para
previsualizar las pelculas, 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 animacin se
reproducir en la ventana de la pelcula a la velocidad de fotogramas especificada.
Para desplazarse a travs de los fotogramas de la animacin, utilice los botones Avanzar
uno y Uno hacia atrs del Controlador, o bien elija los comandos correspondientes del
men Control. Tambin puede presionar las teclas <y >. Para desplazarse al primer
fotograma de la pelcula o al ltimo, utilice los botones Primer fotograma o ltimo
fotograma del Controlador.

Nota: Tambin puede arrastrar la cabeza lectora para ver los fotogramas de una pelcula.
Pg. -120-
Puede modificar la reproduccin de la pelcula utilizando los comandos del men
Control. Observe que tambin deber seleccionar Control > Reproducir para
previsualizar una pelcula al utilizar los siguientes comandos.
Para reproducir una pelcula en un bucle continuo: Seleccione Control >Reproducir
indefinidamente. Para reproducir todas las escenas de una pelcula:
Elija Control >Reproducir todas las escenas. Para reproducir una pelcula sin sonido:
Seleccione Control >enmudecer sonidos.
Para habilitar acciones de fotograma o de botn:
Seleccione Control >Habilitar acciones de fotogramas simples o Habilitar botones
simples . Para probar todas las funciones interactivas y la animacin: Elija Control >
Probar pelcula o Control > Probar escena .
Flash crea una pelcula 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 pelcula en un navegador Web:
Seleccione Archivo >Previsualizacin de publicacin >HTML .
Almacenamiento de archivos de pelculas
Puede guardar una pelcula FLA de Flash utilizando su nombre y ubicacin actuales, o
bien guardar el documento utilizando un nombre o una ubicacin diferentes. Tambin
puede volver a la ltima versin guardada de un archivo.
Para guardar un documento:

1 Utilice uno de los siguientes procedimientos:
Para sobrescribir la versin actual existente en el disco, seleccione Archivo >Guardar.
Para guardar el archivo en una ubicacin 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 ubicacin del archivo.
3 Haga clic en Guardar. Para volver a la ltima versin guardada de un archivo:
Seleccione Archivo >Descartar cambios

Pg. -121-
CREAR UNA ANIMACION

Crear una animacin
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 Interpolacin de movimiento

Uso de mltiples 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 Interpolacin de movimiento
8. Dar clic al icono de agregar capa
9. Regresamos en el punto 2 de este procedimiento
Pg. -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 visualizacin del Escenario. La paleta
de herramientas se divide en cuatro secciones:
La seccin Herramientas contiene las herramientas de dibujo, pintura y seleccin.
La seccin Ver contiene herramientas para ampliar y reducir, as como para realizar
recorridos de la ventana de la aplicacin.
La seccin Colores contiene modificadores de los colores de trazo y relleno.
La seccin Opciones muestra los modificadores de la herramienta seleccionada, los
cuales afectan a las operaciones de pintura o edicin de dicha herramienta.
Para mostrar u ocultar la paleta de herramientas:
Seleccione Ventana >Herramientas .
Pg. -123-
Para seleccionar una herramienta, utilice uno de los siguientes procedimientos:
Haga clic en la herramienta que desea utilizar. Segn la herramienta que haya
seleccionado, debajo de la paleta de herramientas aparecer un juego de modificadores
especfico.
Utilice el mtodo 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 rpidamente a los comandos de los mens. Puede acoplar las barras de
herramientas estndar 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 estndar, que contiene mtodos abreviados
para los comandos de mens estndar como, por ejemplo, Abrir e Imprimir.
Estado muestra la barra de estado, que contiene informacin acerca de los comandos y
los botones, as como el estado de las teclas Bloq Mays y Bloq Nm.
Controlador muestra el Controlador, que permite controlar la reproduccin de la
Previsualizacin de la pelcula. Para mover una barra de herramientas flotante: Arrastre
cualquier parte del fondo o del ttulo de la barra. Para acoplar la barra de herramientas,
arrstrela hasta la parte superior de la ventana de Flash. La barra de herramientas
adoptar automticamente un diseo horizontal si se acopla a la parte superior de la
pantalla o bien un diseo 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.
Pg. -124-

Herramientas de dibujo y pintura de Flash
Flash incorpora varias herramientas para dibujar formas libres o lneas precisas, formas,
y trazados, as como para pintar objetos rellenos
Para dibujar lneas y formas libres de manera muy similar a un lpiz real se utiliza la
herramienta Lpiz.
Para dibujar trazados precisos como lneas rectas o curvas se utiliza la herramienta
Pluma.
Para dibujar formas geomtricas bsicas, se utilizan las herramientas Lnea, valo y
Rectngulo.
Para crear trazos similares a los obtenidos al pintar en un lienzo, se utiliza la
herramienta Pincel.

Pg. -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 lneas de numerosas
maneras. Los rellenos y los trazos son tratados como objetos independientes.
Solapamiento de formas en Flash
Al utilizar las herramientas Lpiz, Lnea, valo, Rectngulo o Pincel para dibujar una
lnea sobre otra lnea o forma pintada, las lneas que se solapan se dividen en segmentos
en los puntos de interseccin. Puede utilizar la herramienta Flecha para seleccionar,
mover y remodelar cada segmento independientemente.
Nota: Las lneas que se solapan creadas con la herramienta Pluma no se dividen en
segmentos en los puntos de interseccin, sino que permanecen intactas.
Un relleno; el relleno con una lnea que lo corta; los dos rellenos y tres segmentos de
lnea creados por la segmentacin.
HERRAMIENTAS
Herramienta Puntero: Esta herramienta permite mover un objeto dentro del rea de
trabajo (Stage).
Herramienta Subseleccin: Esta herramienta permite distorsionar un objeto moviendo
sus nodos.
Herramienta Lnea: Esta herramienta permite trazar lneas rectas
Herramienta Lazo: Esta herramienta permite la seleccin de reas determinadas para
aplicarle otra herramienta.
Herramienta pluma: Para dibujar trazados precisos como lneas rectas o bien como
suaves curvas fluidas, puede utilizar la herramienta Pluma. Puede crear segmentos de
lneas 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 lneas rectas o bien hacer clic
y arrastrar para crear puntos en los segmentos de las lneas curvas. Puede ajustar los
segmentos de las lneas curvas y rectas ajustando los puntos de las lneas. Puede
Pg. -126-
convertir lneas curvas en lneas rectas y viceversa. Tambin puede mostrar los puntos
de las lneas creadas con otras herramientas de dibujo de Flash, como las herramientas
Lpiz, Pincel, Lnea, valo o Rectngulo, para ajustar estas lneas. Dibujo de lneas
rectas con la herramienta Pluma. Para dibujar segmentos de lneas rectas con la
herramienta Pluma, hay que crear puntos de anclaje, puntos de la lnea que determinan
la longitud de cada uno de los segmentos de lnea.
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 lnea recta y haga clic para
definir el primer punto de anclaje.
4 Vuelva a hacer clic para indicar dnde desea que termine el primer segmento de la
lnea recta. Haga Mays-clic para limitar la herramienta a los ngulos mltiplos de 45.

5 Siga haciendo clic para crear ms 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 pequeo bucle cerca de la punta
de la pluma. Haga clic o arrastre para cerrar el trazado.
Para terminar la forma tal cual, seleccionando Edicin >Anular todas las selecciones
Herramienta Texto
Para situar bloques de texto en el Escenario, utilice la herramienta Texto. Los tipos
pueden situarse en una lnea que se expande al escribir o en un bloque de anchura fija
que ajusta las lneas de forma automtica. 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.
Pg. -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 tamao del cuadro en
vertical y en horizontal segn 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, site el puntero donde desee que
comience el texto y arrstrelo hasta la anchura deseada.
Nota: Si crea un bloque de texto que al escribir se extiende ms all del borde derecho o
inferior del Escenario, el texto no se ha perdido. Agregue saltos de lnea, 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
tamao. Para cambiar un bloque de texto de anchura fija a extensible, y viceversa: Haga
doble clic en el selector de cambio de tamao.
Seleccin de fuente, tamao de tipo, estilo y color. Se puede establecer la fuente, el
tamao, el estilo y el color del tipo seleccionado mediante el panel Prrafo. Al
establecer el color del tipo, slo pueden utilizarse colores slidos y no se pueden utilizar
los degradados. Para aplicar un degradado a un tipo, debe convertirlo en las lneas y los
rellenos que lo componen.
Para elegir una fuente, tamao de tipo, estilo y color con el panel Carcter:
1 Si an no se visualiza el panel Carcter, elija Ventana >Paneles >Carcter.
2 Haga clic en el tringulo 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 informacin
de estas fuentes no se incorpora a los archivos SWF de Flash.
3 Haga clic en el tringulo situado junto al valor Tamao de fuente y arrastre el
deslizador para seleccionar un valor o introduzca un valor de tamao de fuente.
Pg. -128-
El tamao 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 botn Negrita o en el botn
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 crculos y valos, para
crear crculos perfectos presione la tecla shif y arrastre el mouse hasta que quede el
circulo deseado.
Herramienta Rectngulo: Las herramientas Lnea, valo y Rectngulo permiten crear
fcilmente las formas geomtricas habituales. Las herramientas valo y Rectngulo
crean tanto formas rellenas como formas slo definidas por el trazo. Puede utilizar la
herramienta Rectngulo para crear rectngulos con esquinas rectas o redondeadas.
Para dibujar lneas rectas, valos o rectngulos:
1 Seleccione las herramientas Lnea, valo o Rectngulo.
2 Seleccione los atributos de trazo y relleno.
Nota: No es posible establecer atributos de relleno para la herramienta Lnea.
3 En la herramienta Rectngulo, haga clic en el modificador Rectngulo 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 Rectngulo, presione las
teclas de direccin hacia arriba o abajo para ajustar el radio de la esquina redondeada.
Con las herramientas valo y Rectngulo, arrastre con Mays presionada para crear
slo crculos y cuadrados.
Con la herramienta Lnea, arrastre con Mays presionada para dibujar slo lneas en
ngulos mltiplos de 45.
Herramienta Lpiz: Para dibujar lneas y formas, se utiliza la herramienta Lpiz, de
manera muy similar a cmo se emplea un lpiz real para realizar un dibujo. Para aplicar
un suavizado o un enderezamiento a las lneas y las formas segn se va dibujando, basta
con seleccionar un modo de dibujo para la herramienta Lpiz.

Para dibujar con la herramienta Lpiz:
Pg. -129-
1 Seleccione la herramienta Lpiz.
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 lneas rectas y convertir figuras similares a
tringulos, valos, crculos, rectngulos y cuadrados en estas formas geomtricas.
Seleccione Suavizar para dibujar curvas suaves.
Seleccione Tinta para dibujar lneas a mano alzada sin aplicarles ninguna modificacin.

Lneas 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 Lpiz. Arrastre con la
tecla Mays presionada para dibujar slo lneas verticales u horizontales.
Herramienta Pincel
La herramienta Pincel dibuja trazos similares a los de un pincel. Permite crear efectos
especiales, incluidos efectos caligrficos. En muchas tablillas sensibles a la presin,
puede cambiar el grosor del trazo de pincel aumentando o disminuyendo la presin
sobre la pluma.
Tambin 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:
Pg. -130-
Pintar normal pinta sobre las lneas y rellenos de la misma capa.
Pintar detrs pinta en las reas vacas del Escenario de la misma capa, sin afectar ni a las
lneas ni los rellenos.
Pintar seleccin aplica un nuevo relleno a la seleccin al seleccionarlo en el modificador
Relleno o en el panel Relleno. (Esta opcin es como seleccionar un rea rellena y
aplicar un nuevo relleno).
Rellenos de pintura pinta rellenos y reas vacas y no afecta a las lneas.
Pintar dentro pinta el relleno en el que se inicia un trazo de pincel y nuca pinta sobre las
lneas. Funciona como un libro de colorear en el que la pintura no puede salirse nunca
de las lneas. Si el trazo comienza en un rea vaca, el relleno no afecta a ninguna rea
rellena.

Imagen original, Pintar normal, Pintar detrs, Rellenos de pintura, Pintar seleccin y
Pintar dentro.
4 Seleccione el tamao, 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 presin puede seleccionar el modificador
Presin para variar la anchura de los trazos de pincel aumentando o reduciendo la
presin sobre la pluma.
6 Arrastre sobre el Escenario. Arrastre con Mays presionada para dibujar slo trazos
de pincel verticales u horizontales.
Herramienta Bote de pintura
La herramienta Cubo de pintura rellena con color reas cerradas: Puede tanto rellenar
reas vacas como cambiar el color de reas ya pintadas. Puede utilizar colores slidos,
rellenos de degradados o de mapa de bits. Puede utilizar la herramienta Cubo de pintura
para rellenar reas que no estn cerradas por completo, as como especificar que Flash
cierre los huecos de los contornos de las formas al utilizar esta herramienta.
Tambin puede utilizar esta herramienta para ajustar el tamao, la direccin y el centro
de los rellenos de degradados y de mapas de bits. Si desea obtener informacin sobre
cmo crear un relleno de mapa de bits.
Nota: Al modificar un relleno de mapa de bits con la herramienta Cubo de pintura, se
modificarn todas las instancias del relleno de mapa de bits, no slo el relleno de la
seleccin actual.
Pg. -131-

La forma de la izquierda no est cerrada por completo pero puede rellenarse. La forma
de la estrella consiste en lneas 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 Tamao de hueco y seleccione una opcin de tamao del
hueco:
Seleccione No cerrar huecos si desea cerrar manualmente los huecos antes de rellenar la
forma. Para dibujos complicados, puede ser ms rpido cerrar los huecos manualmente.
Seleccione una opcin 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 tamao 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 delimitacin con los selectores de edicin. Al colocar el
puntero sobre uno de los selectores, cambia para indicar su funcin.
Presione Mays para que la direccin de un degradado lineal slo pueda colocarse en
ngulos mltiplos 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.

Pg. -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 delimitacin. (Esta opcin slo cambia el
tamao 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 delimitacin.
Para girar el relleno con degradado o de mapa de bits, arrastre el selector de rotacin
circular situado en la esquina. Tambin puede arrastrar el selector ms bajo del crculo
de delimitacin de un relleno o degradado circular.
Para cambiar el tamao de un degradado lineal o un relleno, arrastre el selector
cuadrado situado en el centro del recuadro de delimitacin.

Para cambiar el radio de un degradado circular, arrastre el selector redondo central del
crculo de delimitacin.

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

Para repetir la imagen del mapa de bits como un patrn dentro de una forma, ajuste el
tamao 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 lnea y el estilo
de los trazos de las lneas o contornos de formas. Puede aplicar nicamente colores
slidos, pero no degradados ni mapas de bits, a las lneas y contornos de formas.
Utilizar la herramienta Bote de pintura en lugar de seleccionar cada una de las lneas,
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 lnea 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 tambin 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 automticamente a la herramienta
Bote de tinta. Al hacer clic en una rea rellena, la herramienta cambiar
automticamente a la herramienta Cubo de pintura y se activar el modificador
Bloquear relleno.
Pg. -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 slo trazos, slo reas rellenas o slo
una nica rea rellena. El borrador puede ser redondo o cuadrado y hay cinco tamaos
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 continuacin, 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 slo borra rellenos, sin afectar a los trazos.
Borrar lneas slo borra los trazos, sin afectar a los rellenos.
Borrar rellenos seleccionados slo borra los rellenos actualmente seleccionados y no
afecta a los trazos, estn seleccionados o no. (Seleccione los rellenos que desea borrar
antes de utilizar la herramienta Borrador en este modo).
Borrar dentro slo borra el relleno en el que se ha iniciado el trazo de borrador. Si el
punto de inicio de borrado est vaco, no se borra nada. Este modo no afecta a los
trazos.
3 Haga clic en el modificador Forma de borrador y seleccione el tamao y la forma del
borrador. Asegrese de no seleccionar el modificador Grifo.
4 Arrastre sobre el Escenario
Herramienta Mano
Pg. -135-
Al aumentar el tamao de visualizacin del Escenario, es posible que no se vea todo su
contenido. La herramienta Mano permite desplazar el Escenario para cambiar la
visualizacin sin tener que cambiar el grado de aumento.
Para mover la visualizacin 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/reduccin para ver todo el Escenario en la pantalla
o una zona determinada del dibujo aumentada. El grado mximo de aumento/reduccin
depende de la resolucin del monitor y del tamao de la pelcula.
Utilice las siguientes tcnicas para aumentar o reducir la visualizacin 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 reduccin, utilice los
modificadores Agrandar y Reducir o mantenga presionadas las teclas Alt. (Windows) u
Opcin (Macintosh).

Para aumentar una zona concreta del dibujo, arrastre un recuadro de delimitacin
rectangular con la herramienta Zoom. Flash establece el grado de aumento/reduccin de
forma que el rectngulo especificado ocupe la ventana.
Para aumentar o reducir el tamao de todo el Escenario, seleccione Ver >Aumentar o
Ver >Alejar.
Para realizar un aumento o una reduccin con un determinado porcentaje, seleccione
Ver >magnificacin 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 aplicacin.

Para mostrar el contenido del fotograma actual, seleccione Ver >Magnificacin >
Mostrar todo o bien elija Mostrar todo en el control de Zoom situado en la esquina
inferior izquierda de la ventana de la aplicacin. Si la escena est vaca, se muestra todo
el Escenario.
Pg. -136-
Para mostrar todo el Escenario, seleccione Ver >Magnificacin >Mostrar fotograma o
elija Mostrar fotograma en el control de Zoom situado en la esquina inferior izquierda
de la ventana de la aplicacin.
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 estn, parcial o completamente, fuera del Escenario.
Por ejemplo, para hacer que un pjaro entre volando en un fotograma, puede colocar
inicialmente el pjaro fuera del Escenario en el rea de trabajo.
RELLENOS Y CONTORNOS
Rellenos degradados
Para seleccionar un relleno transparente, de color slido, con degradado o de mapa de
bits, puede utilizar el panel Relleno. El panel Relleno tambin 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 informacin sobre cmo 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 elimnelo.
Para aplicar un relleno de color slido mediante el panel Relleno:
1 Seleccione Ventana >Mezclador de color .
2 Seleccione Slido en el men mezclador de color.
3 Haga clic en el tringulo 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 botn 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:
Pg. -137-
Degradado lineal para crear un degradado que cambie de tonalidad desde el punto
inicial al final segn una lnea 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 tringulo 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 definicin del degradado y haga clic en el
cuadro de color que aparece junto a la barra de definicin del degradado para
seleccionar un color.
5 Para agregar un puntero al degradado, haga clic debajo de la barra de definicin 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
definicin del degradado.
7 Para guardar un degradado, haga clic en el tringulo 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.
Pg. -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 lnea 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 lnea en la barra de propiedades
2 Para seleccionar un color, haga clic en el tringulo 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 botn 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 elimnelo.
Haga clic en el botn Selector de color y seleccione un color del selector.
Pg. -139-
3 Para seleccionar un etilo de trazo, haga clic en el tringulo situado junto al campo
Estilo y seleccione una opcin 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 continuacin, seleccione las opciones que desee en el cuadro de
dilogo Estilo de lnea y haga clic en Aceptar.
Nota: Si selecciona un estilo de trazo diferente del slido puede aumentar el tamao del
archivo.
4 Para seleccionar la altura del trazo, haga clic en el tringulo situado junto al campo de
altura y ajuste el control deslizante a la altura deseada.
ANIMACION MORPHING

Animacin Morphing
Al interpolar formas se crea un efecto similar al de transformacin y las formas parecen
cambiar en el transcurso del tiempo. Flash tambin puede interpolar la ubicacin, el
tamao y el color de las formas.
La interpolacin 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, smbolos, bloques de texto ni imgenes de
mapas de bits. Use Modificar >Separar para aplicar la interpolacin de forma a estos
elementos. Para controlar los cambios de forma ms complejos o improbables, use los
Pg. -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 vaco donde desee que empiece la animacin.
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 posicin de la imagen creada en el paso 2).
5 Seleccione Ventana >lnea de tiempo . Para Interpolacin, seleccione Forma.
6 Haga clic y arrastre la flecha al lado del valor Aceleracin o introduzca un valor para
ajustar la velocidad del cambio entre fotogramas interpolados:
Para empezar la interpolacin de forma gradualmente y acelerar la interpolacin hacia el
final de la animacin, arrastre el deslizador hacia abajo o introduzca un valor entre -1 y
-100.
Para empezar la interpolacin de forma rpidamente y ralentizar la interpolacin hacia
el final de la animacin, 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 opcin Aceleracin crea una apariencia ms natural de transformacin
ajustando gradualmente la velocidad de cambio.
7 Elija una opcin para Mezcla:
Distributiva crea una animacin con formas intermedias suaves y regulares.
Angular crea una animacin que mantiene las esquinas y lneas rectas en las formas
intermedias.
Nota: Slo es apropiado para formas de mezcla con esquinas en punta y lneas rectas. Si
las formas elegidas no tienen esquinas, Flash toma a la interpolacin de forma
distributiva.

Efecto Alpha
Cada instancia de un smbolo 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 configuracin del panel Efecto tambin afecta a los
Pg. -141-
mapas de bits situados en los smbolos.
Instancias de smbolos, cada una con su propio efecto de color.
Cuando se cambia el color y la transparencia de una instancia en un fotograma
especfico, 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 despus se interpolan las configuraciones para que los colores
de las instancias cambien en el tiempo. La interpolacin cambia gradualmente el color o
la transparencia de una instancia.
Nota: Si se aplica un efecto de color al clip de una pelcula 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.
Tambin puede hacer doble clic con Alt. presionada (Windows) o hacer doble clic con
Opcin presionada (Macintosh) en la instancia en el Escenario para traer adelante el
panel Instancia y, a continuacin, haga clic en la ficha Efecto.
2 Seleccione una de las siguientes opciones del panel Efecto:
Mediante la opcin Alfa se ajusta la transparencia de la instancia.
Cualquier cambio realizado se actualiza de forma automtica en el Escenario.
Efecto Tinta
1 Seleccione una instancia en el Escenario y elija Ventana >Paneles >Efecto.
2 Seleccione una de las siguiente opcin del panel Efecto:
Mediante la opcin 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
opcin de color y seleccione brillo.
Pg. -142-
Mediante la opcin 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
opcin de color y seleccione avanzado.
Mediante la opcin 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 automtica en el Escenario
CREACION DE CLIPS
Creacin de Clips de Pelculas
Cada smbolo posee una Lnea de tiempo y un Escenario nicos, completo con capas.
Al crear un smbolo, debe elegir cmo se va a comportar el smbolo, en funcin cmo
se utilizar en la pelcula.
Utilice smbolos grficos para las imgenes estticas y para crear piezas de animacin
reutilizables ligadas a la Lnea de tiempo de la pelcula principal. Estos smbolos estn
Pg. -143-
sincronizados con la Lnea de tiempo de la pelcula principal. Los controles y sonidos
interactivos no funcionan en la secuencia de animacin de un smbolo grfico.
Utilice smbolos de botn para crear botones interactivos en la pelcula que respondan a
los clics y desplazamientos del ratn, o dems acciones. Defnalos grficos asociados
con varios estados del botn y, a continuacin, asigne acciones a una instancia del
botn.
Utilice smbolos de clip de pelcula para crear piezas de animacin reutilizables. Los
clips de pelculas tienen sus propias lneas de tiempo de varios fotogramas que se
reproducen de independientemente de la Lnea de tiempo de la pelcula principal; piense
en ellos como en mini-pelculas dentro de una pelcula principal que pueden contener
controles, sonidos e incluso otras instancias de clip de pelcula interactivos. Tambin
pueden colocarse instancias de clip de pelcula dentro de la Lnea de tiempo de un
smbolo de botn para crear botones animados.
Puede asignar parmetros de clip (variables con valores) a un clip de pelcula 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, mens desplegables
o informacin sobre herramientas, que respondan a los clics de ratn y a otros eventos.
Si desea ms informacin, consulte la Ayuda de ActionScript.
Nota: La interactividad y animacin en los smbolos de clips de pelculas no funciona
cuando la pelcula se reproduce en el entorno de creacin de Flash. Para ver la
interactividad y animacin de un clip de pelcula, elija Control >Probar pelcula o
Control >Probar escena . Puede crear un smbolo a partir de los objetos seleccionados
en el Escenario o crear un smbolo vaco y llenar o importar el contenido en modo de
edicin de smbolos. Los smbolos pueden tener toda la funcionalidad disponible en
Flash, incluida la animacin.
Mediante los smbolos con animacin pueden crearse pelculas con mucho movimiento,
al mismo tiempo que se reduce al mnimo el tamao del archivo. Considere la
posibilidad de crear animacin en un smbolo cuando exista una accin repetitiva o
cclica, por ejemplo el movimiento hacia arriba y hacia abajo de las alas de un pjaro.
Pg. -144-

Para crear un smbolo vaco nuevo:
1 Asegrese de que no hay nada seleccionado en el Escenario y realice uno de los
siguientes pasos:
Elija Insertar >Nuevo smbolo .
Haga clic en el botn Nuevo smbolo en la parte inferior izquierda de la ventana
Biblioteca.
Elija Nuevo smbolo del men Opciones de biblioteca en la esquina superior derecha de
la ventana Biblioteca.
2 En el cuadro de dilogo Propiedades de smbolo, escriba el nombre del smbolo y elija
el comportamiento: Grfico, Botn o Clip de pelcula.
Flash agrega los smbolos a la biblioteca y cambia al modo de edicin de smbolos. En
este modo, el nombre del smbolo aparece encima de la esquina superior izquierda,
encima de la Lnea de tiempo y una cruz filar indica el punto de registro del smbolo.
4 Para crear el contenido del smbolo, utilice la Lnea de tiempo, dibuje con las
herramientas de dibujo, importe medios o cree instancias de otros smbolos.
5 Cuando haya terminado de crear el contenido del smbolo, utilice uno de los
siguientes procedimientos para volver al modo de edicin de pelculas:
Elija Edicin >Editar smbolo.
Pg. -145-
Haga clic en el botn Escena en la esquina superior izquierda de la ventana de
documentos.

Haga clic en el botn Editar escena situado en la esquina superior derecha de la ventana
de documentos y elija una escena del men.

Creacin de Clips Grficos
Utilice smbolos grficos para las imgenes estticas y para crear piezas de animacin
reutilizables ligadas a la Lnea de tiempo de la pelcula principal. Estos smbolos estn
sincronizados con la Lnea de tiempo de la pelcula principal. Los controles y sonidos
interactivos no funcionan en la secuencia de animacin de un smbolo grfico.
1 Asegrese de que no hay nada seleccionado en el Escenario y realice uno de los
siguientes pasos:
Elija Insertar >Nuevo smbolo .
Pg. -146-
Haga clic en el botn Nuevo smbolo en la parte inferior izquierda de la ventana
Biblioteca.
Elija Nuevo smbolo del men Opciones de biblioteca en la esquina superior derecha de
la ventana Biblioteca.
2 En el cuadro de dilogo Propiedades de smbolo, escriba el nombre del smbolo y elija
el comportamiento: Grfico.
Flash agrega los smbolos a la biblioteca y cambia al modo de edicin de smbolos. En
este modo, el nombre del smbolo aparece encima de la esquina superior izquierda,
encima de la Lnea de tiempo y una cruz filar indica el punto de registro del smbolo.
4 Para crear el contenido del smbolo, utilice la Lnea de tiempo, dibuje con las
herramientas de dibujo, importe medios o cree instancias de otros smbolos.
5 Cuando haya terminado de crear el contenido del smbolo, utilice uno de los
siguientes procedimientos para volver al modo de edicin de pelculas:
Elija Edicin >Editar smbolo .
Haga clic en el botn Escena en la esquina superior izquierda de la ventana de
documentos.

Haga clic en el botn Editar escena situado en la esquina superior derecha de la ventana
de documentos y elija una escena del men.

CREACION DE CLIPS BOTONES
Utilice smbolos de botn para crear botones interactivos en la pelcula que respondan a
los clics y desplazamientos del ratn, o dems acciones. Defnalos grficos asociados
con varios estados del botn y, a continuacin, asigne acciones a una instancia del
botn.
Los botones son realmente clips de pelcula interactivos de cuatro fotogramas. Cuando
se selecciona el comportamiento del botn para un smbolo, Flash crea una Lnea de
tiempo con cuatro fotogramas. Los tres primeros fotogramas muestran los tres posibles
estados del botn; el cuarto fotograma define el rea activa del botn. La Lnea de
tiempo no se reproduce realmente; simplemente reacciona a los movimientos y acciones
del puntero saltando al fotograma correspondiente.
Pg. -147-
Para que un botn sea interactivo en una pelcula, coloque una instancia del smbolo del
botn en el Escenario y asigne acciones a la instancia. Las acciones deben asignarse a la
instancia del botn en la pelcula y no a los fotogramas en la Lnea de tiempo del botn.
Cada fotograma de la Lnea de tiempo de un smbolo de botn tiene una funcin
especfica:
El primer fotograma es el estado Reposo, representa el botn siempre que el puntero no
est sobre l.
El segundo fotograma es el estado Sobre, representa el aspecto del botn cuando el
puntero se encuentra sobre el mismo.
El tercer fotograma es el estado Presionado, representa el aspecto del botn cuando se
hace clic sobre el mismo.
El cuarto fotograma es el estado Zona activa, define el rea que responder al clic del
ratn. Esta rea es invisible en la pelcula.

Contenido tpico de los fotogramas Reposo, Sobre, Presionado y Zona activa.

Para crear un botn:
1 Elija Edicin >Anular seleccin de todo para asegurarse de que nada queda
seleccionado en el Escenario.
2 Elija Insertar >Nuevo smbolo o presione ctrl. +F8 (Windows) o Comando +F8
Pg. -148-
(Macintosh). Para crear el botn, debe convertir los fotogramas del botn en fotogramas
clave.
3 En el cuadro de dilogo Propiedades de smbolo, escriba un nombre para el smbolo
de botn nuevo y para Comportamiento elija Botn.
Flash cambia al modo de edicin de smbolos. La cabecera de la Lnea de tiempo
cambia para mostrar cuatro fotogramas consecutivos denominados: Reposo, Sobre,
Presionado y Zona activa. El primer fotograma, Reposo, es un fotograma clave vaco.
4 Para crear la imagen del botn del estado Reposo, utilice las herramientas de dibujo,
importe un grfico o coloque una instancia de otro smbolo en el Escenario.
En un botn puede utilizarse un smbolo de clip de pelcula o de grfico, pero no puede
utilizarse otro botn. Utilice smbolos de clips de pelcula si desea crear un botn
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 botn 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 botn
que responde cuando se hace clic. Asegrese de que la imagen del fotograma Zona
activa es una rea slida lo bastante grande para abarcar todos los elementos grficos de
los fotogramas Reposo, Presionado y Sobre. Tambin puede ser ms grande que el
botn 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 desconexin colocando el fotograma Zona activa en una ubicacin
diferente de los otros fotogramas de botn.
8 Para asignar un sonido a un estado del botn, seleccione el fotograma de dicho estado
en la Lnea de tiempo, elija Modificar >Fotograma y a continuacin haga clic en la
ficha Sonido en el panel Fotograma que aparecer.
9 Cuando haya finalizado, elija Edicin >Editar smbolo . Arrastre el smbolo del botn
fuera de la ventana Biblioteca para crear una instancia del smbolo en la pelcula.
Pg. -149-
ACTIONSCRIPT

Ventana de Acciones
Las acciones para un botn, un clip de pelcula o un fotograma se configuran en el panel
Acciones. La utilizacin 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 accin, como solicitar la detencin de la reproduccin de una
pelcula, o bien por una serie de acciones, como primero evaluar una condicin y, a
continuacin, realizar una accin. La configuracin de muchas de las acciones requiere
poca experiencia en programacin. Para otras acciones, es necesaria cierta familiaridad
con los lenguajes de programacin y estn diseadas para un desarrollo avanzado.
Si se desea que una pelcula realice una accin concreta cuando alcance un fotograma
clave, basta con asignar una accin de fotograma al fotograma clave. Por ejemplo, para
crear un ciclo en una pelcula, puede agregar una accin 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 ms
fcil su seguimiento. Los fotogramas que tiene acciones asociadas muestran una
pequea a en la Lnea de tiempo. Una vez asignada la accin, es recomendable que
pruebe la accin para verificar si funciona mediante el comando Control >Probar
pelcula . La mayora de las acciones no funcionan en modo de edicin.
Las siguientes instrucciones describen el modo de definir acciones para fotogramas
mediante el panel Acciones utilizado en modo Normal. Si desea obtener informacin
sobre la utilizacin del panel Acciones en modo Experto, consulte Ayuda de
ActionScript .
Pg. -150-

Para asignar una accin a un fotograma clave:
1 Seleccione un fotograma clave en la Lnea de tiempo y elija Ventana >Acciones.
Si el fotograma seleccionado no es un fotograma clave, la accin se asignar al
fotograma clave anterior. Si no se ha seleccionado ningn fotograma, o si la seleccin
incluye varios fotogramas, el panel Acciones estar atenuado.
(Si desea obtener informacin acerca de la asignacin de acciones a botones o clips de
pelcula.
2 Para mostrar las acciones bsicas, haga clic en la categora Acciones bsicas en la lista
de la Caja de herramientas situada en la parte izquierda del panel.
3 Para asignar una accin utilice uno de los siguientes procedimientos:
Haga doble clic en una accin en la categora Acciones bsicas en la lista de la Caja de
herramientas.
Arrastre una accin 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 botn Agregar (+) y elija una sentencia en el men emergente.
Utilice el mtodo abreviado de teclado.
4 Para mostrar los campos de parmetros, haga clic en el botn Parmetros, situado en
la esquina inferior derecha del panel Acciones. Seleccione la accin y especifique
nuevos valores en los campos de parmetros, si desea modificar los parmetros de las
acciones existentes. Los parmetros variarn dependiendo de la accin que seleccione.
5 Repita los pasos 3 y 4 para asignar ms acciones, si fuera necesario.
Para probar una accin de fotograma en una escena:
Seleccione Control >Probar pelcula
Pg. -151-
FUNCIONES ACTIONSCRIPT
Goto
Para saltar a un fotograma o a una escena especficos de la pelcula, se utiliza la accin
Ir a. Cuando la pelcula salta a un fotograma, se puede optar entre reproducirla a partir
del nuevo fotograma (predeterminado) o detenerla en el mismo. La pelcula tambin
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 botn o de clip de pelcula a la que desea
asignar la accin.
2 Seleccione Ventana>Acciones para mostrar el panel Acciones.
3 En la lista de la Caja de herramientas, haga clic en la categora Acciones bsicas para
mostrar las acciones bsicas, y seleccione la accin Ir a.
Flash inserta la accin Ir a y reproducir en la ventana Script.
4 Para que la pelcula siga reproducindose tras el salto, mantenga seleccionada la
opcin Ir a y reproducir (predeterminada) en la seccin Parmetros. Para detener la
pelcula en un fotograma especificado, anule la seleccin de Ir a y reproducir. La accin
cambia a Ir a y detener.
5 En el men emergente Escena de la seccin Parmetros, especifique la escena de
destino: Puede especificar la escena actual o una escena indicada, o siguiente o anterior
para que la pelcula salte al primer fotograma de la escena.
6 En el men emergente Tipo de la seccin Parmetros, especifique un fotograma de
destino.
Fotograma siguiente o anterior.
Seleccione Nmero de fotogramas, Etiqueta de fotograma o Expresin para especificar
un fotograma. Una expresin es cualquier parte de una sentencia que genera un valor,
como 1+1.
7 Si selecciona Nmero de fotogramas, Etiqueta de fotograma o Expresin en el paso 6,
para Fotograma, introduzca el nmero de fotograma, la etiqueta o una expresin que
calcule un nmero de fotograma o una etiqueta.
La siguiente sentencia indica el fotograma situado cinco fotogramas por delante del
fotograma que contiene la accin:
gotoAndStop(_currentframe +5);
Stop
Pg. -152-
A menos que se indique lo contrario, una vez que se inicia una pelcula se reproduce por
todos los fotogramas de la Lnea de tiempo. Puede detener e iniciar una pelcula a
intervalos especficos mediante las acciones Reproducir y Detener. Por ejemplo, puede
detener una pelcula al final de una escena antes de continuar con la siguiente escena.
Una vez detenida, una pelcula debe iniciarse de nuevo de forma explcita, mediante la
accin Reproducir.
Reproducir y Detener se utilizan por lo general para controlar los clips de pelculas con
botones o para controlar la Lnea de tiempo principal. El clip de pelcula que desea
controlar debe tener un nombre de instancia, un destino asignado y debe estar presente
en la Lnea de tiempo.
Para iniciar o detener una pelcula:
1 Seleccione la instancia de fotograma, de botn o de clip de pelcula a la que desea
asignar la accin.
2 Seleccione Ventana >Acciones para mostrar el panel Acciones.
3 En la lista de la Caja de herramientas, haga clic en la categora Acciones bsicas para
mostrar las acciones bsicas, y seleccione la accin Detener.
Flash inserta un ActionScript como el siguiente en la ventana Script:
onClipEvent (load) { stop (); }
Donde onClipEvent (load) indica que cuando se carga la pelcula, ejecuta la instruccin
stop para detener la pelcula.
Nota: Los parntesis vacos que aparecen detrs de una accin indican que es un mtodo
(capacidad) que no tiene parmetros 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 pelcula.
Ventana Un argumento opcional que especifica la ventana o el fotograma HTML en el
que debera cargarse el documento. Introduzca el nombre de una ventana especfica 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.
Pg. -153-
Variables Un argumento opcional que especifica un mtodo para enviar variables. Si no
hay variables, omita este argumento; en caso contrario, especifique si se cargan las
variables utilizando un mtodo GET o POST . GET anexa las variables al final de la
URL y se utiliza para un nmero pequeo de variables. POST enva las variables en un
encabezado HTTP aparte y se utiliza para cadenas largas de variables.
Descripcin
Accin; carga un documento de una URL especfica en una ventana o pasa variables a
otra aplicacin en una URL definida. Para probar esta accin, asegrese de que el
archivo que se va a cargar se encuentra en la ubicacin especificada. Para utilizar una
URL absoluta (por ejemplo, http://www.myserver.com ), necesita una conexin de red.
Reproductor
Flash 2 o posterior. Las opciones GET y POST estn disponibles solamente en Flash 4 y
versiones posteriores del Reproductor.
Ejemplo
Este ejemplo carga una nueva URL en una ventana del navegador vaca. La accin
getURL destina la variable incomingAd como el parmetro url para que pueda cambiar
la URL cargada sin tener que editar la pelcula de Flash. El valor de la variable
incomingAd se pasa antes a Flash en la pelcula utilizando una accin loadVariables .
on(release) { getURL(incomingAd, "_blank"); }
On Mouse Event
La asignacin de una accin a un botn asigna tambin, de forma automtica, una
accin de evento de ratn para controlar o administrar la accin.
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 parmetro Liberar indica que el
usuario presion y liber el botn del ratn.

Se puede especificar el evento de ratn que desencadena una accin de botn mediante
el panel Acciones. Para configurar las opciones de evento del ratn:
1 Seleccione el botn al que quiere asignar una accin.
2 Para mostrar las acciones bsicas, haga clic en la categora Acciones bsicas 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 accin On Mouse Event.
Seleccione una accin en la categora Acciones bsicas.
4 En la seccin Parmetros, para Evento, seleccione un evento de teclado o de ratn que
desencadenar la accin:
Presionar: desencadena la accin al presionar el botn del ratn mientras el puntero se
encuentra sobre el botn.
Pg. -154-
Liberar (predeterminado): desencadena la accin al liberar el botn del ratn mientras el
puntero se encuentra sobre el botn. Esto configura el comportamiento estndar de
hacer clic.
Liberar fuera: desencadena la accin al liberar el botn del ratn cuando el puntero no
se encuentra sobre el botn.
Presin de tecla: desencadena la accin al presionar la tecla especificada. Si selecciona
esta opcin, debe introducir la tecla en el cuadro de texto.
Situar sobre objeto: desencadena la accin al desplazar el puntero sobre el botn.
Situar fuera de objeto: desencadena la accin al desplazar el puntero fuera del botn.
Arrastrar sobre: desencadena la accin al presionar el botn del ratn mientras el
puntero se encuentra sobre el botn, se desplaza fuera del botn y, a continuacin,
vuelve a desplazarse sobre el botn.
Arrastrar fuera: desencadena la accin cuando el botn del ratn se presiona con el
puntero sobre el botn y, a continuacin, el puntero se desplaza fuera del botn. 5
Asigne cualquier accin adicional al botn. Para probar acciones de fotograma, utilice
uno de los siguientes procedimientos:
Elija Control >Habilitar acciones de fotogramas simples.
Seleccione Control >Probar pelcula
StartDrag
Sintaxis: startDrag(destino); startDrag(destino,[bloqueado]); startDrag(destino
[,bloqueado [,izquierda , arriba , derecha, abajo]]);
Argumentos: Destino La ruta de destino del clip de pelcula que se va a arrastrar.
Bloqueado Un valor Booleano que especifica si el clip de pelcula arrastrable est
bloqueado en el centro de la posicin del ratn ( true ), o bloqueado en el punto en el
que el usuario hizo clic por primera vez en el clip de pelcula ( false ). Este argumento
es opcional.
Izquierda, arriba, derecha, abajo Los valores relativos a las coordenadas del elemento
principal del clip de pelcula que especifica un rectngulo de limitacin para el clip de
pelcula. Estos argumentos son opcionales.
Descripcin: Accin; hace que el clip de pelcula destino se pueda arrastrar mientras se
reproduce la pelcula. Slo un clip de pelcula puede arrastrarse al mismo tiempo. Una
vez que se ha ejecutado una accin startDrag , el clip de pelcula permanece arrastrable
hasta que se detiene especficamente por una accin stopDrag o hasta que se llama a una
accin startDrag de otro clip de pelcula.
Pg. -155-
Ejemplo: Para crear un clip de pelcula que los usuarios puedan colocar en cualquier
ubicacin, anexe las acciones startDrag y stopDrag a un botn dentro del clip de
pelcula, como se muestra a continuacin:
on(press) { startDrag("",true); } on(release) { stopDrag(); }
StopDrag
Sintaxis: stopDrag();
Argumentos: Ninguno.
Descripcin: Accin; detiene la operacin de arrastre actual.
Reproductor: Flash 4 o posterior.
Ejemplo: Esta sentencia detiene la accin de arrastre de la instancia MC cuando el
usuario suelta el botn del ratn.
on(press) { startDrag("mc"); } on(release) { stopdrag(); }
Play
Sintaxis: play();
Argumentos: Ninguno.
Descripcin: Accin; desplaza la cabeza lectora hacia delante en la Lnea de tiempo.
Ejemplo: El cdigo 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 accin
play y la cabeza lectora avanza en la Lnea de tiempo. Si el usuario introduce cualquier
cosa diferente de Steve , la pelcula 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 [, ubicacin/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 pelcula. Para utilizarlos en Flash
Player o para realizar pruebas en el modo de prueba de pelcula en el entorno de
creacin 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.
Pg. -156-
Destino Un argumento opcional que especifica un clip de pelcula de destino que se
sustituir con la pelcula cargada. La pelcula cargada hereda las propiedades de
posicin, rotacin y escala del clip de pelcula de destino. Especificar destino es lo
mismo que especificar el (nivel) ubicacin de una pelcula de destino, no debera
especificar ambos.
Ubicacin Un argumento opcional que especifica el nivel en el que la pelcula est
cargada. La pelcula cargada hereda las propiedades de posicin, rotacin y escala del
clip de pelcula de destino. Para cargar una nueva pelcula adems de las pelculas
existentes, especifique un nivel que no est ocupado por otra pelcula. Para sustituir una
pelcula existente con la pelcula cargada, especifique un nivel que est actualmente
ocupado por otra pelcula. Para sustituir la pelcula original y descargar todos los
niveles, cargue la nueva pelcula en el nivel 0. La pelcula del nivel 0 establece la
velocidad de los fotogramas, el color de fondo y el tamao de los fotogramas de todas
las dems pelculas cargadas.
Variables Un argumento opcional que especifica un mtodo para enviar variables
asociadas con la pelcula 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 mtodo GET o POST . GET anexa las variables al
final de la URL y se utiliza para un nmero pequeo de variables. POST enva las
variables en un encabezado HTTP aparte y se utiliza para cadenas largas de variables.
Descripcin: Accin; reproduce pelculas adicionales sin cerrar Flash Player. Por lo
general, Flash Player muestra una sola pelcula de Flash Player (archivo SWF) y
despus se cierra. La accin loadMovie permite ver varias pelculas al mismo tiempo o
cambiar entre pelculas sin cargar otro documento HTML.
Puede cargar pelculas en los niveles que ya tienen archivos SWF cargados. Al hacerlo,
la nueva pelcula sustituye al archivo SWF existente. Si carga una nueva pelcula en el
nivel 0, todos los niveles se descargarn y el nivel 0 se sustituir por el nuevo archivo.
Utilice la accin loadVariables para mantener la pelcula activa y actualizar las variables
con nuevos valores.
Utilice la accin unloadMovie para eliminar pelculas cargadas con la accin loadMovie
.
Ejemplo: Esta sentencia loadMovie est anexada a un botn de navegacin con la
etiqueta Productos. Hay un clip de pelcula invisible en el Escenario con el nombre de
instancia dropZone. La accin loadMovie utiliza este clip de pelcula como parmetro
de destino para cargar los productos del archivo SWF, en la posicin correcta del
Escenario.
on(release) { loadMovie("products.swf",_root.dropZone); }

Pg. -157-
ESCENAS

Para organizar un pelcula por temas, puede utilizar escenas. Por ejemplo, puede utilizar
escenas diferentes para una introduccin, un mensaje de carga y los crditos.
Al publicar una pelcula de Flash que contiene ms 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 estn numerados
consecutivamente entre las diferentes escenas. Por ejemplo, si una pelcula contiene dos
escenas, cada una de ellas con 10 fotogramas, los fotogramas de la escena 2 estarn
numerados del 11 al 20.
Puede agregar, eliminar, duplicar, cambiar el nombre y cambiar el orden de las escenas.
Para detener la pelcula o hacer una pausa despus de cada escena, o bien para permitir
que los usuarios contemplen la pelcula 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 continuacin, elija el nombre de la escena del submen.
Para agregar una escena, utilice uno de los siguientes procedimientos:
Haga clic en el botn Agregar del panel Escena.
Seleccione Insertar >Escena . Para eliminar una escena, utilice uno de los siguientes
procedimientos:
Haga clic en el botn 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 botn Duplicar del panel Escena.
Para cambiar el orden de las escenas de la pelcula:
Arrastre el nombre de la escena a otra posicin en el panel Escena.
Pg. -158-
SONIDO
Utilice el comando Archivo >Importar para traer sonidos de archivos WAV (slo
Windows), AIFF (slo Macintosh) o MP3 (cualquier plataforma) de la misma forma
que lo hara 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 (slo Macintosh)
Pelculas QuickTime slo sonido (Windows o Macintosh)
Sun AU (Windows o Macintosh)
Sonidos System 7 (slo Macintosh)
WAV (Windows o Macintosh)
Flash almacena los sonidos en la biblioteca junto con los mapas de bits y los smbolos.
Al igual que con los smbolos grficos, slo es necesaria una copia del archivo de
sonido para utilizar ese sonido de varias formas en la pelcula. Si desea compartir
sonidos entre las pelculas 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 dilogo Propiedades de vnculos de smbolos. El
identificador tambin se puede usar para acceder al sonido como un objeto en
ActionScript. Para informacin 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 estn comprimidos y
son ms pequeos 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
estreo utilizan el doble de informacin), pero Flash puede importar sonidos de 8 o de
16 bits a velocidades de muestra de 11, 22 44 Khz. Tambin permite convertir los
sonidos a velocidades ms bajas al exportarlos.
Nota: Los sonidos grabados en formatos que no sean mltiplos de 11 Khz. (como 8, 32,
o 96 Khz.) se vuelven a muestrear cuando se importan en Flash.
Si desea aadir 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 dilogo Importar, localice y abra el archivo de sonido deseado.
El sonido importado se coloca en la biblioteca para la pelcula activa

Pg. -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. Arrastrndolo o asignndole un ngulo
en el panel Transformar.
Original, rotado hacia la derecha y rotado hacia la izquierda, respectivamente.
Para rotar un objeto arrastrndolo:
1 Seleccione el objeto.
Seleccione la herramienta Flecha y, en la seccin Opciones de la caja de herramientas,
haga clic en el Modificador de rotacin.
Elija Modificar >Transformar >Rotar.
3 Arrastre uno de los selectores de las esquinas.
4 Haga clic en un rea vaca del Escenario o elija Modificar >Transformar >Rotar para
ocultar los selectores de rotacin.
Para rotar un objeto con el panel Transformar:
2 Seleccione Ventana > Transformar .
3 Haga clic en Rotar.
4 Introduzca un ngulo de rotacin.
5 Presione Intro (Windows) o Retorno (Macintosh) para aplicar la rotacin.
Para rotar y cambiar el tamao proporcional de un objeto simultneamente:
2 Elija Modificar >Transformar >Escalar y rotar .
Pg. -160-
3 Introduzca los valores para Escala y Rotacin.
Escalar
Al cambiar el tamao proporcional de un objeto, el tamao de dicho objeto aumenta o
reduce en horizontal, en vertical o en ambas direcciones. Para escalar un objeto,
arrstrelo o introduzca los valores en el panel Transformar. Las instancias, grupos y
bloques de tipos se escalan en relacin a sus puntos de registro.
Para cambiar el tamao proporcional de un objeto mediante el arrastre:
2 Seleccione la herramienta Flecha y, en la seccin Opciones de la caja de herramientas,
haga clic en el Modificador de escala o elija Modificar >Transformar >Escalar.

Para cambiar el tamao proporcional del objeto en horizontal y en vertical, arrastre uno
de los selectores de esquina. Las proporciones se mantienen segn se cambia el tamao.

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

4 Haga clic en un rea vaca del Escenario o elija Modificar >Transformar >Escala r
para ocultar los selectores de escala.
Nota: Al aumentar el tamao de varios elementos, aquellos que estn situados cerca de
los bordes del recuadro de delimitacin 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 tamao proporcional de un objeto con el panel Transformar:
2 Seleccione Ventana >Transformar .
3 Introduzca un valor de escala entre 1 y 1000 para la vertical, la horizontal o para
ambas.
Pg. -161-
4 Seleccione Restringir para mantener las proporciones.
5 Presione Intro (Windows)
Girar CCW, CW
Para rotar un objeto 90:
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 segn su eje horizontal o vertical sin mover su posicin
relativa en el Escenario.
Original, reflejado horizontalmente y reflejado verticalmente, respectivamente.
Para reflejar un objeto:
2 Elija Modificar >Transformar >Reflejar verticalmente o Reflejar horizontalmente.

Efectos personalizado
Mscaras
Para crear una capa de mscara, se coloca una forma rellena sobre la capa. La capa de
mscara muestra el rea de las capas vinculadas y situadas por debajo de la forma
rellena y oculta todas las dems. Las capas de mscara pueden contener una sola forma,
instancia u objeto de tipo. (Las funciones de las capas de mscara de Flash son similares
Pg. -162-
a las del comando Pegar de FreeHand).
Para crear una capa de mscara:
1 Cree o seleccione una capa que incluya el contenido que se visualizar a travs de los
agujeros de la mscara.
2 Con la capa seleccionada, elija Insertar >Capa para crear una capa nueva encima. Una
capa de mscara siempre cubre la capa situada debajo, por tanto asegrese de crear la
capa de mscara en el lugar correcto.
3 Dibuje una forma rellena, coloque un tipo o cree una instancia de un smbolo en la
capa de mscara. Flash ignora los mapas de bits, degradados, transparencias, colores y
estilos de lnea en una capa de mscara. Todas las reas rellenas de una mscara son
transparentes; y las reas no rellenas son opacas.
4 Haga clic con el botn derecho del ratn (Windows), o Control-Clic (Macintosh), en
el nombre de la capa de mscara de la Lnea de tiempo y elija Mscara en el men
contextual. La capa se convierte en una capa de mscara, sealada por un icono de una
flecha hacia abajo. La capa situada inmediatamente debajo est vinculada a capa de
mscara y se muestra su contenido a travs del rea rellena en la mscara. El nombre de
capa de mscara aparece con sangra y su icono cambia a una flecha que apunta a la
derecha. Para visualizar el efecto de mscara en Flash, bloquee la capa de mscara y la
capa enmascarada.
Para enmascarar capas adicionales despus de crear una capa de mscara, utilice uno de
los siguientes procedimientos:
Arrastre una capa existente debajo de la capa de mscara.
Cree una capa nueva en cualquier sitio por debajo de la capa de mscara.
Elija Modificar >Capa y seleccione Con mscara en el cuadro de dilogo Propiedades
de capa.
Para desvincular capas de una capa de mscara:
1 Seleccione la capa que desea desvincular.
Arrastre la capa encima de la capa de mscara.
Elija Modificar >Capa y seleccione Normal.
Para cambiar el estado de una capa, entre con mscara y sin mscara:
Haga clic con Alt. presionada (Windows),
Seguir el Ratn
1. Crear Objeto
2. F8
Pg. -163-
3. Seleccionar Clip de pelcula
4. Clic derecho sobre el Objeto
5. Seleccionar Paneles Instancia
6. Dar Nombre
7. Agregar Capa nueva
8. Crear Objeto
9. F8
10. Seleccionar Botn
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 pelcula al pblico debe publicar o exportar el
archivo Flash FLA a otro formato para su reproduccin.
La funcin Publicar de Flash est diseada para presentar la animacin 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 pelcula le permitir crear el contenido de Flash que se puede
editar en otras aplicaciones y exportar una pelcula directamente en un formato nico.
Por ejemplo, puede exportar una pelcula entera como archivo de Flash Player, como
una serie de imgenes de mapas de bits, como un fotograma nico o un archivo de
imagen, y como imgenes estticas y de movimiento en varios formatos entre los que se
incluye GIF, J PEG, 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 creacin y ajustar las
configuraciones para el formato de archivo en particular. Flash publica automticamente
el archivo de creacin en los formatos seleccionados, crea archivos adicionales basados
en las configuraciones seleccionadas y guarda las configuraciones con el archivo de
pelcula para volverlas a usar.
Las opciones de Exportar pelcula coinciden por lo general con las de publicacin pero
no guardan las configuraciones para volverlas a utilizar.
Crear formatos de archivo alternativos "GIF, J PEG, PNG y QuickTime" y el HTML
necesario para visualizarlos en la ventana del navegador. Los formatos alternativos
activan un navegador para ver la animacin de su pelcula y la interactividad para los
usuarios que no tengan instalado Flash Player.
Crear plantillas de Generator para actualizar fcilmente el contenido en un sitio Web,
como grficos y texto, sin tener que sustituir los archivos de forma individual. Por
Pg. -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
produccin del sitio Web sea ms eficaz y crear ilustraciones, como listas de
desplazamiento, que no se pueden crear slo 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 pelcula de Flash.
Si cuenta con Macromedia Dreamweaver, podr aadir una pelcula de Flash a su sitio
Web fcilmente. Dreamweaver crea todos los cdigos HTML necesarios.
Antes de publicar la pelcula, es importante que pruebe si la pelcula funciona mediante
los comandos Probar pelcula y Probar escena. Si desea obtener ms informacin,
La reproduccin de una pelcula de Flash en un navegador Web necesita de un
documento HTML que active la pelcula y especifique la configuracin del navegador.
Este documento se genera automticamente con el comando Publicar desde los
parmetros HTML en un documento de plantilla.
Los parmetros HTML determinan dnde aparecer la pelcula de Flash en la ventana,
el color de fondo, el tamao de la pelcula, etc. y definir los atributos para las etiquetas
OBJ ECT y EMBED . Puede cambiar estos y otros valores en la ficha HTML del cuadro
de dilogo Configuracin de publicacin. El cambio de estas configuraciones suplantar
las opciones que haya establecido en la pelcula.
Sus configuraciones se insertarn 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 cdigo para intrpretes
especiales como ColdFusion o Active Server Pages (ASP) o una plantilla incluida con
Flash (para ms informacin.

Para publicar un HTML para visualizar el archivo Flash:
Pg. -165-
1 Seleccione Archivo >Configuracin de publicacin.
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 ms la extensin. 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 botn de informacin de la derecha para que aparezca una descripcin de la
plantilla seleccionada.
El men enumera todos los archivos de plantilla en la carpeta Macromedia Flash
5/HTML. Las plantillas bsicas slo muestran la pelcula en un navegador mientras que
las plantillas ms avanzadas contienen cdigo para la deteccin 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 pelcula de Flash
ms la extensin del archivo de plantilla. Por ejemplo, si selecciona una plantilla
denominada Estndar.asp para utilizarla con una pelcula de Flash denominada
MiPelcula.swf, el nombre del archivo resultante es MiPelcula.asp.
5 Elija una opcin de Dimensiones para configurar los valores de los atributos WIDTH
y HEIGHT en las etiquetas OBJ ECT y EMBED :
Coincidir con pelcula (predeterminado) utiliza el tamao de la pelcula.
Pxeles le permite introducir el nmero de pxeles en los campos Anchura y Altura.
Porcentaje para usar un porcentaje relativo a la ventana del navegador.
6 Seleccione las opciones de Reproduccin para controlar las funciones y reproduccin
de la pelcula de la manera siguiente:
Pausa al comienzo detiene la pelcula hasta que el usuario haga clic en un botn de la
pelcula o elija Reproducir del men emergente. De forma predeterminada, la opcin se
deselecciona y la pelcula empieza a reproducirse en cuanto se carga (el parmetro
PLAY est definido en true) .
Ciclo repite la pelcula en ciclo cuando alcanza el ltimo fotograma. Anule la seleccin
de esta opcin si desea parar la pelcula cuando llegue al ltimo fotograma. (El
parmetro LOOP est activo de forma predeterminada.)
Visualizar men muestra un men de mtodo abreviado cuando el usuario hace clic con
el botn derecho del ratn (Windows) o Control-clic (Macintosh) en la pelcula. Anule
la seleccin de esta opcin para que slo aparezca Acerca de Flash en el men atajo. De
forma predeterminada, esta opcin est activada (el parmetro MENU est definido en
true).
Pg. -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 tamaos pequeos y puede
disminuir el tamao del archivo de pelcula. Esta opcin slo afecta a las pelcula que
contienen texto esttico (texto que cre al crear una pelcula y que no cambia cuando
sta se muestra) definido para mostrarse con las fuentes de dispositivo. Si desea obtener
ms informacin.
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 reproduccin ante la apariencia y no utiliza la
visualizacin suavizada.
Baja automtica da ms importancia a la velocidad, pero mejora el aspecto siempre que
es posible. La opcin Reproduccin empieza con la visualizacin suavizada
desactivada. Si Flash Player detecta que el procesador puede gestionarla, la
visualizacin suavizada se activa.
Alta automtica en un principio da la misma importancia a la velocidad y al aspecto,
pero sacrifica el aspecto por la velocidad si es necesario. La opcin Reproduccin
empieza con la visualizacin suavizada activada. Si la velocidad real de los fotogramas
es inferior a la velocidad especificada, la visualizacin suavizada se desactiva con el
objeto de mejorar la velocidad de reproduccin. Utilice este valor para emular el valor
de Ver >Suavizado en Flash.
Medio aplica algo de visualizacin 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 reproduccin y
siempre utiliza la visualizacin suavizada. Si la pelcula no contiene animacin, los
mapas de bits se suavizan; de lo contrario, no se suavizan.
ptima proporciona la mejor calidad de visualizacin y no tiene en cuenta la velocidad
de reproduccin. Las imgenes resultantes y los mapas de bits siempre se suavizan.
Esta opcin configura el valor del parmetro QUALITY en las etiquetas OBJ ECT y
EMBED .
8 Para la versin Windows de Internet Explorer 4.0 con el control Flash ActiveX, elija
una opcin de Modo de ventana para transparencia, posicin y capas:
Windows reproduce una pelcula de Flash Player en su propia ventana rectangular de
una pgina Web para que la animacin sea lo ms rpido posible. La opcin configura
el parmetro WMODE de la etiqueta OBJ ECT a WINDOW .
Opaco sin ventana mueve los elementos detrs de las pelculas de Flash (por ejemplo,
con HTML dinmico) para evitar que stos se muestren, configurando el parmetro
WMODE en OPAQUE .
Pg. -167-
Transparente sin ventana muestra el fondo de la pgina HTML en la que la pelcula se
incrusta a travs de todas las reas transparentes de la pelcula, pero puede hacer la
animacin ms lenta. La opcin establece WMODE a TRANSPARENT .
9 Elija una opcin de Alineacin HTML para colocar la ventana de la pelcula de Flash
dentro de la ventana del navegador.
Predeterminado centra la pelcula en la ventana del navegador y recorta los bordes si la
ventana del navegador es ms pequea que la pelcula.
Izquierda, Derecha, Superior o Inferior alinea las pelculas por el borde correspondiente
de la ventana del navegador y recorta los otros tres lados si es necesario.
Esta opcin especifica el atributo ALIGN para las etiquetas OBJ ECT , EMBED e IMG .
10 Elija una opcin de Escala para colocar la pelcula dentro de los lmites especificados
si cambi el ancho y la altura original de la pelcula:
Predeterminada (mostrar todo) permite ver toda la pelcula en el rea especificada sin
distorsin, al mismo tiempo que mantiene la proporcin original de la pelcula. Es
posible que aparezcan bordes a ambos lados de la pelcula.
Sin borde dimensiona la pelcula para rellenar el rea especificada y mantiene la
proporcin del aspecto original de la pelcula sin distorsiones y recortando si fuera
necesario.
Ajuste exacto muestra la pelcula completa en el rea especificada sin mantener la
proporcin del aspecto original que podra causar distorsin.
La opcin Escala configura el parmetro SCALE en las etiquetas OBJ ECT y EMBED .
11 Elija una opcin de Alineacin Flash para configurar la forma en que se coloca la
pelcula
dentro de la ventana y cmo se recorta si fuera necesario.
Para la alineacin Horizontal, elija Izquierda, Centro o Derecha.
Para la alineacin Vertical, elija Superior, Centro o Inferior.
Esta opcin configura el parmetro SALIGN de las etiquetas OBJ ECT y EMBED .
12 Seleccione Mostrar mensajes de advertencia para que aparezcan los mensajes de
error si se produce algn conflicto en la configuracin, por ejemplo, si una plantilla
tiene cdigo refererido a una imagen alternativa que no se ha especificado.
13 Para guardar las configuraciones con el archivo activo, haga clic en Aceptar.
Pg. -168-

GENERAR EJ ECUTABLE 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 pelculas de Flash Player pueden reproducirse de varias formas:
En navegadores Internet como Netscape e Internet Explorer que estn 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 pelcula QuickTime.
Como un tipo de aplicacin independiente denominada proyector.
Para ubicar el sitio donde una pelcula puede entrar en pausa durante la descarga, puede
probar una escena o una pelcula completa mediante el comando Probar escena o Probar
pelcula o puede abrir un archivo SWF existente. Si existen datos necesarios que no se
han descargado una vez que la pelcula llega a un fotograma, la pelcula se detiene hasta
que llegan dichos datos.
Para ver el rendimiento de descarga de manera grfica, Flash Player puede visualizar el
Creador de perfil para ancho de banda y ver la cantidad de datos que se envan para
cada fotograma de la pelcula segn la velocidad de mdem 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 mdem. Por
Pg. -169-
ejemplo, un mdem de 28.8 Kbps puede en teora 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 tpico con ms precisin.
Tambin puede generar un informe para hallar los fotogramas que hacen la
reproduccin ms lenta y luego optimizar el contenido en esos fotogramas. Para generar
un informe, utilice la opcin Seleccionar generar informe en el cuadro de dilogo
Configuracin de publicacin.
Elija Archivo >Configuracin de publicacin para cambiar la configuracin del archivo
de Flash Player creado por Probar pelcula y Probar escena.
Para comprobar el rendimiento de descarga:
Elija Control >Probar escena o bien Control >Probar pelcula.
Flash muestra la ventana Salida para ayudarle a solucionar problemas en ActionScript.
Puede utilizar la accin trace para mostrar comentarios en la ventana Salida y ayudarle
as en la depuracin. Si desea obtener informacin, consulte los temas relacionados en
la Ayuda de ActionScript.
Elija Archivo >Abrir y seleccione un archivo SWF.
Si prueba una escena o pelcula, Flash publicar la seleccin activa como archivo SWF
utilizando las configuraciones en el cuadro de dilogo Configuracin de publicacin. 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
grfico del rendimiento de descarga:
El lado izquierdo del creador de perfil muestra informacin sobre la pelcula, sus
configuraciones y estado. En Pelcula se indican las dimensiones, velocidad de
fotograma, tamao en KB y bytes, duracin y precarga en nmero de fotogramas y
segundos.
En la seccin derecha del creador de perfil aparece la cabecera y grfico de la Lnea de
tiempo. En el grfico, cada barra representa un fotograma individual de la pelcula. El
tamao de la barra corresponde al tamao de ese fotograma en bytes. La lnea roja
inferior debajo de la cabecera de la Lnea de tiempo indica si un fotograma determinado
fluye en tiempo real o no con la velocidad de mdem activa configurada en el men
Control. Si una barra sobrepasa la lnea roja, la pelcula debe esperar hasta que dicho
fotograma est cargado.
4 Elija Ver >Mostrar flujo para activar y desactivar la barra de flujo.
Pg. -170-
La barra de flujo indica el nmero de fotogramas cargados y el fotograma que se est
reproduciendo.
5 Haga clic en una barra del grfico para mostrar las configuraciones para el fotograma
correspondiente en la ventana izquierda y detener la pelcula.
6 Ajuste la vista del grfico como desee:
Elija Ver >Grfico 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 tamao en bytes relativo. El primer
fotograma guarda el contenido del smbolo y es frecuentemente ms grande que otros
fotogramas.
Elija Ver >Grfico fotograma a fotograma para mostrar el tamao 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 ms all de la lnea roja en el grfico
entonces Flash Player detendr la reproduccin hasta que se descargue la totalidad del
fotograma.
Creador de perfil para ancho de banda mostrando barra de flujo y vista de Grfico
fotograma a fotograma.
7 Cierre la ventana de prueba para regresar al entorno de creacin habitual.

Pg. -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 visin seleccionadas.
Si desea obtener informacin sobre depuracin de pelculas, consulte el tema de
solucin 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 >Configuracin de publicacin .
2 Seleccione Generar informe de tamao.
3 Haga clic en Publicar.
Flash genera un archivo de texto con el mismo nombre que la pelcula exportada ms la
extensin .txt. En el informe aparece la cantidad de datos del archivo final de Flash
Player por fotogramas
Configurar Navegador
Para previsualizar la pelcula de Flash con la configuracin y el formato de publicacin
que ha elegido utilice el comando Previsualizacin de publicacin. Este comando
exporta el archivo y abre la Previsualizacin en el navegador predeterminado. Si
Pg. -172-
previsualiza una pelcula QuickTime, Previsualizacin de publicacin inicia el
reproductor de pelculas QuickTime. Si previsualiza un proyector, Flash inicia el
proyector.
Para previsualizar un archivo con el comando Previsualizacin de publicacin:
1 Defina las opciones de exportacin del archivo con el comando Configuracin de
publicacin.
Elija Archivo >Previsualizacin de publicacin 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 Configuracin de publicacin, Flash crea un archivo
del tipo especificado en la misma ubicacin que la pelcula de Flash. Este archivo
permanece en dicha ubicacin 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 cdigo abierto, software libre para la creacin de animaciones
vectoriales e ilustracin. Si, una alternativa real a Flash, libre.

Pg. -173-

KToon posee un modulo de ilustracin y otro de animacin; con ciertas herramientas y
elementos de interfaz que ha muchos de nosotros se nos harn 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 lnea de tiempo; el mezclador de color es muy similar,
permite animar y organizar los elementos por capas, etc. Aunque no es idntica y quizs
la organizacin de algunas de las barras flotantes no es tan intuitiva.

Pg. -174-

Navegando en el cdigo del programa se puede ver que han incorporado las libreras
ming; que sirven para que otros programas ajenos a Flash puedan generar archivos
SWF, aunque segn ellos, actualmente manejan un formato XML y a futuro planean
tambin exportar/usar SVG (Que es el formato abierto y estndar con el que compite el
SWF de Flash)

No incluye lenguajes de programacin

Por ahora no hay versin para Windows

ZINC

ZINC es una aplicacin 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 conexin directa a base de
datos. Aplicaciones con mltiples formularios, control remoto http

Pg. -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 dinmica 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 pelcula Flash, as como aadir o cambiar textos

Pg. -176-

Swish Max

Herramienta para crear animaciones flash interactivas.
Dispone de 230 efectos visuales, herramientas de dibujo, opciones de importacin y
exportacin, contenido dinmico, Lenguaje Swishscript, interfaz de usuario, formularios
de entrada.

Pg. -177-
6.1 Seleccione la respuesta incorrecta
a) Los archivos de Flash, tienen generalmente la extensin de archivo SWF,
b) pueden aparecer en una pgina Web para ser vista en un navegador,
c) No pueden ser reproducidos independientemente por un reproductor Flash.
d) Son tambin 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 Programacin de Aplicaciones de Adobe Flash est basada en
J avascript-C.
b) Los comandos de C++no se interpretan directamente desde C/C++, sino con
J avascript.
c) La interfaz de programacin de Flash est basada en J avaScript, pero con base
en este lenguaje, fue creado ActionScript.
d) J avaScript y ActionScript son iguales.
6.4 De que manera no se puede reproducir las pelculas de Flash?
a) En navegadores Internet, tales como Netscape Navigator y Microsoft Internet
Explorer, que estn equipados con Flash Player.
b) Con el control ActiveX de Flash en Microsoft Office, Microsoft Internet
Explorer para Windows y otros entornos anfitrin de ActiveX.
c) En Flash Player, una aplicacin independiente de manejo similar al
complemento Flash Player.
d) Como un applet J ava.
6.5 Respecto a la lnea de tiempo
a) La Lnea de tiempo organiza y controla el contenido de una pelcula a travs del
tiempo, en subcapas y pelculas.
b) Los componentes principales de la Lnea de tiempo son las subcapas, pelculas y
la cabeza lectora.
c) Las capas de una pelcula aparecen en una columna situada a la izquierda de la
Lnea 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 Lnea de tiempo situado en la parte superior de la Lnea de
tiempo indica los nmeros de capas.

Tema1 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema1 PDF

Cargado por

Copyright:

Formatos disponibles

Programa Oficial de Postgrado:

Master en Comunicaciones, Redes y Gestin de Contenidos

También podría gustarte