PDF de programación - Realización de páginas web con Flash

REALIZACIÓN DE PÁGINAS WEB CON FLASH

Carmen Pérez González
Facultad de Bellas Artes - UCM

———————––

RESUMEN

Las posibilidades que ofrece nuestro Cam-
pus Virtual en relación con el apoyo a la do-
cencia presencial son únicas e inestimables,
amén de necesarias por el momento en el que
nos encontramos.

Pero no sólo hablamos de un software va-
liosísimo que facilita al profesor su labor do-
cente, sino también ofrece una serie de posi-
bilidades externas como la perspectiva de
generar páginas web que puedan ser visualiza-
das por todo el mundo.

Algunos docentes que pretenden virtuali-
zar sus asignaturas se encuentran con barreras
que deben solventar. La creación de una pági-
na web está subordinada a una labor de diseño,
de programación y de alojamiento en un servi-
dor, además de su continua actualización. El
docente que quiera enseñar su asignatura en la
web deberá disponer todos los años de un di-
nero (sacado de los presupuestos académicos)
para pagar a un diseñador y programador que
se encargará de su realización, actualización y
de su posterior colocación en un servidor, al
que también hay que pagar el alquiler de su
alojamiento.

Con la posibilidad que nos ofrece el Cam-
pus Virtual, estas barreras han desaparecido y
se facilita al profesorado que le interese la po-
sibilidad de ser autosuficiente y crear él mis-
mo la página web de su asignatura.

Éste es el ejemplo de la página web de la
asignatura de Dibujo del Natural II de la Fa-

cultad de Bellas Artes, realizada gracias a la
plataforma digital del Campus Virtual y que
utiliza el programa Flash para su construcción.

INTRODUCCIÓN A FLASH

El programa Flash en este momento es el
software líder en el mercado en realización de
páginas web. Anualmente se realizan festiva-
les donde se exponen los diseños más audaces
y se galardonan los más sobresalientes.

Este programa fue concebido como pro-
grama abierto al público; esto hace que pro-
gramadores y diseñadores cuelguen en la red
trucos y páginas a disposición del usuario
(p. ej.: solo hay que buscar en gloogle archi-
vos *.fla o *.swf).

Desde su primera versión como Future
Splash Animator (1996) hasta la versión 8
(2006), Flash ha sido el programa más elegido
como herramienta para la creación de conteni-
do multimedia para la web.

Pero no se queda sólo ahí; este programa te
permite por sus herramientas de dibujo únicas
ser una potente aplicación gráfica, ser un buen
generador de animaciones para video (utili-
zando su salida a Quick Time sin compresión,
con un tamaño de película de 720 ⫻ 576 y te-
niendo en cuenta sus 25 frames por segundo) y
aparecer como un inmejorable proyector inde-
pendiente con sus autoejecutables .exe para Pc
y .hqx para Mac creándose con ellos CDR
interactivos valederos para posibles proyectos

268

III JORNADA CAMPUS VIRTUAL UCM

académicos y, por supuesto, para presentacio-
nes para clase.

La versión utilizada para la página de Di-
bujo del Natural II ha sido una versión baja, la
de Flash 5, que asegura la compatibilidad con
versiones antiguas de Flash Player (pequeño
programa que se añade al navegador para que
pueda visualizar películas Flash con extensión
SWF), aunque suponga sacrificar prestaciones,
pero que posibilita el acceso a usuarios que no
dispongan de las ultimas actualizaciones.

El único inconveniente del Flash es que,
aunque su principal finalidad sea la integra-
ción de sus películas dentro de las páginas
web, no es una aplicación pensada para reali-
zar páginas web, sino que necesita de otro
programa (Dreamweaver normalmente o len-
guaje HTML) para su inclusión y, aunque
Flash genera ficheros HTML, siempre nece-
sita retoques en un generador exterior de
proyectos.

Es éste un punto importante de nuestro
ejemplo. Aquí se sustituye cualquier genera-
dor de páginas web por nuestro Campus Vir-
tual. Nos deshacemos del engorro de dominar
otro programa como Dreamweaver, Front Pa-
ge o código HTML (y no hablo de los servi-
cios del molesto servidor al que tendríamos
que alquilar el espacio para alojar nuestra pá-
gina web) utilizando el botón de creación de
páginas web de nuestro Campus Virtual.

Sólo tenemos que hacer funcionar nuestras
películas .SWF, bajarlas al Campus Virtual, co-
mo ellos nos indican, para después obtener
una dirección web a la que todo el mundo pue-
de acceder.

PROCEDIMIENTOS
PRELIMINARES AL
TRABAJO EN FLASH

Todo programa debe ser visto como un
procedimiento más que debe ser dominado
cuanto antes para poder utilizarse de una for-
ma personal.

Aquí se expone una forma personal de tra-
bajar con Flash y Photoshop. Una vez que el
usuario domine esos programas podrá hacer
con ellos sus propios procedimientos.

Antes de realizar nuestra película Flash
(los archivos .SWF) tomémonos un tiempo
para reflexionar y para minimizar esfuerzos.
Respóndase a estas consideraciones. ¿Las
imágenes se van a utilizar sólo para la web o
cabe la duda de que también se necesiten para
posibles publicaciones o presentaciones?

¿El texto que se va a aplicar se modificará
periódicamente o, por el contrario, va a ser fijo?
Y la finalidad de la película, ¿cuál va a
ser?, ¿realizar una animación para video, un
CDR interactivo, una presentación para clase
o sólo está pensada como web? Y si su finali-
dad va a ser la realización de una página web
hay que determinar qué tipo de usuario las va
a ver o, para ser más preciso, de qué monitor
dispondrá.

Y tómese su tiempo para definir su proyec-
to y decida las partes de que consta, como el
inicio, la presentación, las páginas de conteni-
do, los créditos, etc., y, por supuesto, su nave-
gación.

Es el momento de dar respuesta a las con-

sideraciones anteriores.

LAS IMÁGENES

Un consejo sobre las imágenes (en mapa
de bits): nunca se sabe qué finalidad tendrá
una imagen en el futuro; por tanto, quedémo-
nos con una buena imagen fuente. Eso supone
que, a la hora de adquirir una imagen del escá-
ner o descargarla de la cámara digital, debe te-
ner un buen tamaño y resolución.

Los archivos iniciales se guardarán en Tif
como archivo fuente al que se volverá una y
otra vez siempre que lo necesitemos.

Como norma, los archivos de salida, según

su finalidad, serán:

Si una imagen va a ser impresa, debe estar
guardada en Tif, acopladas todas sus capas, su
modo color será CMAN y la resolución reco-
mendada de 150 ppi. para impresora a tamaño
real, 300 ppi para imprenta en tamaño propor-
cionado en Din A-4 o tamaño real si el ele-
mento necesita mucha definición.

Con relación a las imágenes de mapa de
bits con salida a página web y que se van a im-
portar a Flash, deberán estar a 72 ppi de reso-

REALIZACIÓN DE PÁGINAS WEB CON FLASH

269

lución y su tamaño de imagen dependerá del
tamaño del monitor en que deseemos verlas.
Por tanto, no serán superiores a 36 ⫻ 27 cm.
(que corresponde en pixels a 1.024 ⫻ 768) y
su modo de color estará en RGB.

Flash comprime las imágenes mediante una
compresión jpg haciéndolas aptas para la web,
pero la película pesará menos si posee menos
imágenes y si éstas tienen menor tamaño.

El fabricante aconseja que, desde Photos-
hop, se utilice su imagen fuente (Tif que ocu-
pa muchos kb) y la baje de tamaño con
«guardar para web» eligiendo la extensión
Png como archivo sin pérdida ni compresión
y más fiel a la imagen fuente. Su inconve-
niente es la incompatibilidad con los navega-
dores antiguos.

Sin embargo, no aconseja la compresión
jpg de Photoshop porque a esa compresión se
suma a la de Flash, lo que puede ir en detri-
mento de la calidad de la imagen final.

En mi caso, prefiero la compresión de Pho-
toshop, ya que se controla de una forma más
visual la calidad y el peso de la imagen.

Así, para generar un archivo de 35 k (tama-
ño de archivo aceptable para que se descargue
de una forma fluida en la web) existen dos op-
ciones: la elección del fabricante, un PNG al
que se tendrá que bajar la calidad de salida de
la película .SWF al 50%, o bien un jpg al que
se le dará una calidad de salida del 100%.

También es posible que desee importar a
Flash ficheros vectoriales, sonido editándolo
con el Sound Forge o videos creados con el
software de su cámara de video. Para ello con-
sulte la lista de formatos compatibles de ser
importados y elija guardarlos como uno de la
lista. Los más usuales son: como imagen vec-
torial los eps o los ai, para sonido el mp3 o el
wav y, para video, el mov. o avi.

EL TEXTO. SU EDITOR
Y LA TIPOGRAFÍA

Al pasar de su editor de texto (Microsoft
Word, Word Pad, Bloc de notas…) a Flash,
tenga en cuenta que no reconocerá ni la tipo-
grafía ni el estilo y tendrá que volver a maque-
tarlo desde Flash.

La forma más usual de hacerlo es seleccio-
narlo todo desde su editor y copiar el texto
(Ctrl.E y Ctrl. C), ir a Flash y pegarlo
(Ctrl. V).

Si pensamos en el diseño tipográfico de
nuestra página, utilizaremos dos tipografías
como norma general para dar dinamismo al di-
seño y separar las zonas clave de la página. Un
ejemplo sería título y menú con una tipografía
y contenido con otra.

Si aún así tenemos la necesidad de dife-
renciar alguna otra parte, se aconsejaría utili-
zar la negrita o la cursiva (al gusto del dise-
ñador) para separarla. Así, se utilizaría una
tipografía para título, subtítulo y menú. El títu-
lo iría en negrita y se usaría otra tipografía pa-
ra el contenido.

No es conveniente utilizar más de dos tipo-

grafías para no complicar el diseño.

Obtendremos siempre mejores resultados

con un diseño sencillo y claro.

Muchos diseñadores, amantes de este pun-
to, sólo utilizan una tipografía, a la que cam-
bian el tamaño y el estilo de la fuente para rea-
lizar su página.

Por supuesto, es necesario resaltar los títu-
los y subtítulos con diferente tamaño de la le-
tra del contenido para distinguirlos.

EL DISEÑO Y EL TAMAÑO
DE LA PELÍCULA

Sobre el diseño tendríamos que tener en
cuenta la vinculación de la asignatura dentro
de un departamento, y si estamos de acuerdo
con s