[FLASH] IDSYSTEMS 2011

LECCION 1. INTRODUCCION A FLASH

¿Qué es FLASH?
Flash 8 es una potente herramienta creada por Macromedia que ha superado las mejores expectativas de
sus creadores.

Inicialmente Macromedia Flash fue creado con el objeto de realizar animaciones vistosas para la web, así
como para crear GIFs animados.

Los motivos que han convertido a Flash 8 en el programa elegido por la mayoría de los diseñadores web
profesionales y aficionados son varios. Veamos pues, porque es interesante Flash 8.

Desde la web de Macromedia te puedes descargar una versión de evaluacion de Flash 8 válida para 30
días.

¿Por qué usar FLASH 8?

Las posibilidades de Flash son extraordinarias, cada nueva versión ha mejorado a la anterior, y el actual
Flash 8 no ha sido menos. Aunque su uso más frecuente es el de crear animaciones (a lo largo de este
curso veremos lo sencillo que puede resultar) sus usos son muchos más. Son tantos, que todos los
diseñadores web deberían saber utilizar Flash.

Flash ha conseguido hacer posible lo que más se echa en falta en Internet: Dinamismo, y con dinamismo
no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten
al usuario ver la web como algo atractivo, no estático (en contraposición a la mayoría de las páginas, que
están realizadas empleando el lenguaje HTML). Con Flash podremos crear de modo fácil y rápido
animaciones de todo tipo.

Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y horas
creando lo que nos dicte nuestra imaginación, pero esto no es suficiente para ser el preferido por los
diseñadores profesionales... ¿Entonces qué es?

LECCION 1 – Introduccion a flash Página 1

 [FLASH] IDSYSTEMS 2011

De Flash MX 2004 a Flash 8

Hay compañías que lanzan mejoras en sus productos por pura necesidad económica; Cuando sucede
esto, los usuarios lo notamos rápidamente por las pocas mejoras ofrecidas por las nuevas versiones. No es
este el caso de Flash 8, que continua con la costumbre de Macromedia de aplicar considerables mejoras a
las nuevas versiones de sus productos ...

Mejoras en cuanto a facilidad de manejo, mayor potencia gráfica y de integración con programas de
edición de imágenes, facilidad para importar vídeo, posibilidad de emular tus películas dirigidas a dispositivos
móviles y para los menos avanzados, se recupera el asistente de ActioScript que había desaparecido en la
versión anterior... Analicemos estas ventajas y otras muchas con un poco más de detalle:

Diseños más atractivos: Flash 8 permite el uso de efectos visuales que nos facilitarán la creación de
animaciones, presentaciones y formularios más atractivos y profesionales, así mismo, pone a nuestra
disposición mecanismos para hacer este trabajo más cómodo y rápido, tales como la existencia de filtros y
modos de mezcla añadidos en esta versión.

Optimización de fuentes: Incorpora también opciones de legibilidad para fuentes pequeñas, haciendo
la lectura de nuestros textos más agradables y de alta legibilidad. Además de poder modificar la
optimización, Flash permite también la selección de configuraciones preestablecidas para textos dinámicos y
estáticos.

Bibliotecas integradas: Ahora podemos buscar rápidamente cualquier objeto existente en nuestras
películas, navegando por las bibliotecas de todos los archivos abiertos desde un único panel.

Mayor potencia de animación: Flash 8 permite un mayor control de las interpolaciones habilitando un
modo de edición desde el que se podrá modificar independientemente la velocidad en la que se apliquen los
diferentes cambios de rotación, forma, color, movimiento, etc, de nuestras interpolaciones.

Mayor potencia gráfica: Evita la repetición innecesaria de la representación de objetos vectoriales

simplemente señalando un objeto como mapa de bits. Aunque el objeto se convierta al formato de mapa de
bits, los datos vectoriales se mantienen tal cual, con el fin de que, en todo momento, el objeto pueda
convertirse de nuevo al formato vectorial.

Mejoras en la importación de vídeo: Para facilitar el resultado con formatos de vídeo, Flash 8 incluye
un códec independiente de calidad superior capaz de competir con los mejores códecs de vídeo actuales
con un tamaño de archivo mucho más pequeño. Además de una gran posibilidad de revestimientos para los
controles de éste en nuestra película.

Compatiblidad Metadatos: Incluye tus SWF en buscadores de internet con la nueva característica de
definición de archivo con un título, una descripción y/o palabras clave para que los motores de búsqueda
reflejen con más precisión el contenido representado por el archivo.

Emulador para dispositivos móviles: Prueba tus películas destinadas a dispositivos móviles
compatibles con Flash Lite con el nuevo emulador que incorpora Flash 8. Podrás probar tus películas de un
modo eficiente antes de publicarlas.

Asistente de ActionScript: El Asistente de ActionScript ha vuelto. Fue eliminado en la versión anterior,

pero se ha vuelto a recuperar, y de forma mejorada, en esta última. Ahora ActionScript al alcance de tu
mano.

LECCION 1 – Introduccion a flash Página 2

 [FLASH] IDSYSTEMS 2011

Flash 8 trae muchísimas novedades

Las alternativas a Flash 8. Javascript

Desde hace mucho tiempo, el lenguaje HTML ha mostrado carencias importantísimas en todos los
aspectos. El HTML crea páginas web estáticas, páginas en las que todo el movimiento que podemos
encontrar se debe a imágenes animadas (GIFS) o a vídeos insertados en ellas... Este lenguaje,
revolucionario en su día, demostró pronto que era insuficiente en todos los campos. Pronto comenzaron a
surgir alternativas:

El Javascript nació con el objeto de crear acciones o programas cortos que se pudieran insertar en la
web para darle vida. El Javascript, no es un lenguaje de programación propiamente dicho, pues sólo crea
"acciones" que se ejecutarán posteriormente en el navegador que visualice la página, jamás podremos crear
un programa en Javascript, sólo complementos para la web. Este lenguaje presenta varios inconvenientes,
en primer lugar, su ejecución puede resultar peligrosa para la persona que accede a una web, por lo que
muchas personas optan por desactivar el "Javascript" de sus navegadores. Si nuestra página web contiene
mucho código Javascript, simplemente, no lo verán. En segundo lugar y como con casi todo, existen
navegadores (cada vez menos, eso sí) que no lo soportan y sería inútil intentar ejecutar un código Javascript
si el navegador no lo reconoce. Además, el Javascript no sirve para crear páginas web, tan sólo las
complementa, por lo que su uso general suele estar enfocado a pequeñas "ayudas" en la interactividad de la
web, como por ejemplo realizar comprobaciones en los formularios, efectos en la barra de estado... ).

Debemos destacar además, que Flash puede trabajar conjuntamente con javascript y ejecutar códigos y
funciones Javascript sin problemas, por lo que Javascript se convierte en una ayuda para todos los usuarios
de Flash 8.

Las alternativas a Flash 8. CSS

Aunque muchos no se hayan dado cuenta, HTML tiene una potencia muy limitada en el tratamiento de
textos. De hecho, el principal problema del HTML a la hora de mostrar y distribuir textos por pantalla no suele
ser su incapacidad para hacerlo (las posibilidades que permite suelen ser más que suficientes para cualquier
usuario normal), sino que su problema es la falta de precisión. Así, resulta prácticamente imposible asegurar
que el texto vaya a aparecer tal y como yo quiero en el navegador de otra persona, o por ejemplo, el HTML
no permite crear justificados de textos o simplemente dejar un margen a la izquierda del documento... Para
esto se crearon las Hojas de Estilo en Cascada (CSS en inglés).

Su potencia es mucha, y cuentan con la ventaja de que se han convertido en un estándar (aunque
siempre habrá alguien incapaz de visualizar un contenido que use una hoja de estilo). Además de permitir
administrar los textos e imágenes como queramos por nuestra página web, son una forma magnífica de
simplificar el código de la página web y de acelerar su creación, ya que como su nombre indica son "Hojas
de Estilo", una vez creado el tratamiento que queremos dar a un tipo de texto (por ejemplo, a los títulos),
todos los títulos que creemos y los identifiquemos como tales, tendrán ese tratamiento (color, tamaño de la

LECCION 1 – Introduccion a flash Página 3

 [FLASH] IDSYSTEMS 2011

letra, tipo de fuente...). Gracias a las CSS hemos ganado en control sobre nuestras páginas web, y tal vez en
vistosidad y diseño, pero no sirven para crear animaciones.

¿Por qué no usarlas dentro de Flash?

Pues porque esto no estaba contemplado en las anteriores versiones de Flash. Desde la versión 2004
(Flash 8) las hojas de estilo son perfectamente compatibles con Macromedia Flash, simplemente porque
pueden asociarse con textos empleados dentro de nuestra película sin más que asignar la hoja de estilo que
queramos a la propiedad StyleSheet del objeto texto al que queramos aplicar la hoja de estilo. Por tanto, las
CSS han dejado de ser una alternativa al uso de Flash y han pasado a quedar integradas dentro del mismo.
Otra ventaja de usar Flash.

Las alternativas a Flash 8. DHTML. AJAX.

Hemos visto como se solucionan los principales problemas que tiene el HTML, pero aún falta por saber
cómo se intenta eliminar esa "estaticidad" característica de las páginas HTML. La primera solución viene del
propio HTML. Se llama DHTML (o HTML Dinámico) y como su nombre indica se creó para crear contenidos
en movimiento en las páginas web. Su funcionalidad llega hasta mover objetos por la web, y sobre todo, se
emplea para crear menús animados. Seguro que habeis visto un montón sin daros cuenta. Suelen tener esta
apariencia:

En realidad el DHTML no es más que una combinación de HTML y Javascript (de ahí que lo hayamos
dejado para el final), aunque es una buena solución para crear menús vistosos sin animaciones
extraordinarias.

¿Su inconveniente? Hay demasiados navegadores que tiene problemas con él y su carga puede ser lenta
o retardada...

Asynchronous JavaScript and XML, o Ajax, es una nueva técnica de programación para crear
interactividad en la web formada por la combinación de varias tecnologías ya conocidas:

- XHTML (o HTML y CSS para dar formato y estilos).

- DOM ( Document Object Model) para manipular la información presentada de forma dinámica e
interactiva a través de JavaScript.

- El objeto XMLHttpRequest para intercambiar datos de forma asíncrona con el servidor web.

LECCION 1 – Introduccion a flash Página 4

 [FLASH] IDSYSTEMS 2011

El Eterno Debate
Y ante todo esto ¿Qué nos ofrece Flash? Pues Flash es, con diferencia, la herramienta más potente del
mercado para crear contenido multimedia para la web pero presenta dos inconvenientes importantes.

El primero es la compatibilidad con FLASH. Al igual que algunos navegadores no soportan javascript o
no pueden ver contenidos DHTML (o incluso CSS), para poder ver FLASH se requiere un PLUGIN especial
de la casa Macromedia. Un PLUGIN es un programita especial que permite a tu navegador identificar las
películas FLASH y descargarlas y visualizarlas correctamente. Este PLUGIN es gratuito. Puedes descargarlo
AQUÍ. Por suerte, cada vez más navegadores lo llevan incorporado y cada vez más gente sabe lo que es y
no se asusta cuando se le ofrece. Así que cada vez más gente lo tiene.

El segundo problema es el tamaño que ocupan las películas y su tiempo de descarga. Mientras que una
página HTML puede ocupar unos 10 KB como media, una animación Flash ocupa mucho más.
Evidentemente depende del contenido que tenga, pero suelen superar los 100 KB con facilidad, y si además
incorpora sonidos es fácil que la cifra se dispare. Al ocupar más espacio, el tiempo que tarda en estar visible
el contenido Flash es mayor y no todos los visitantes están dispuestos a esperar... simplemente, se irán a
otra página.

Por otra parte, las conexiones de banda ancha son cada vez más numerosas, lo que ellimina el problema
del tiempo de descarga, pero el día en el que todo el mundo se conecte a internet a alta velocidad aún está
lejos, así que el debate seguirá abierto mucho tiempo.

Aquí teneis algunas páginas interesantes hechas con FLASH

Con Flash se pueden hacer páginas web realmente asombrosas

Resumiendo, insertar o no contenido Flash en una página web puede ser cuestionable (a día de hoy),
aunque depende de muchas cosas, al igual que insertar DHTML, por ejemplo. Aún así, no hemos de olvidar que
Flash tiene muchísmas aplicaciones más (hecho que ha provocado que otras compañías traten de sacar a la
venta "clónicos" del Flash). Por ejemplo la creación de CDs interactivos (como los que incluyen las revistas de
informática, por ejemplo), la creación de banners publicitarios o lo que más está de moda ahora: la creación de
dibujos animados usando Flash 8 (os sorprendería saber la cantidad de dibujos animados conocidos creados o
animados mediante Flash). Además, Flash tiene uso industrial, pues se emplea para optimizar planos, crear
diseños de interiores y trabajar con imágenes vectoriales en general. No dejeis de aprender a manejar el
programa con más futuro... (al menos en cuánto a diseño web)

LECCION 1 – Introduccion a flash Página 5

 [FLASH] IDSYSTEMS 2011

CREACION DE PELICULAS

Una de las características principales de Flash 8 es su sencillez, esta sencillez en su utilización permite
crear animaciones de un modo efectivo y rápido.

Pongámonos en situación, supongamos que queremos crear una animación en la que una pelota realice
un movimiento de "bote", es decir, que baje y suba. Puede parecer un trabajo de horas, pero nada más
lejos de la realidad. Veamos cómo Flash nos lo pone fácil.

Realizando la Animación

NOTA: Ver videotutorial 01.

En este apartado no pretendemos enseñar cómo crear una animación Flash (pues eso se verá más
adelante), el objetivo es que entendamos cómo crea Flash las animaciones y de que modo nos facilita el
trabajo.

A primera vista, lo lógico parece ser dibujar la pelota en cada instante del movimiento, de modo que
cuantos más instantes dibujemos, más real parecerá el movimiento. Pues bien, con Flash bastará con
crear 3 fotogramas: en el primero dibujaremos la pelota en el instante inicial (arriba del todo), en el
segundo se dibujará la pelota en el momento de tocar el suelo y en el tercero la pelota volverá a estar
arriba (en realidad este tercer fotograma no hará falta crearlo, pues bastará con copiar el primero). Por
tanto, vemos que el trabajo más largo (dibujar los objetos) ya está hecho.

LECCION 1 – Introduccion a flash Página 6

 [FLASH] IDSYSTEMS 2011

Ahora, se determina el tiempo que durará cada movimiento (es decir, el tiempo que transcurre entre los
instantes en los que la pelota está arriba y abajo) y por último se le indica a Flash que cree una
animación de movimiento entre estos fotogramas. Fácil ¿verdad?

Observa como ha quedado viendo el videotutorial 02.

LECCION 1 – Introduccion a flash Página 7