2. ¿Que Es Flash?
Flash Professional CS5 es una potente herramienta
desarrollada por Adobe que ha superado las mejores
expectativas de sus creadores.
Flash fue creado con el objeto de realizar animaciones y
diseños vistosos para la web, y gráficos interactivos.
Los motivos que han convertido a Flash en el programa
elegido por la mayoría de los diseñadores web
profesionales y aficionados son varios. Veamos pues,
porque es interesante Flash Pro CS5.
Desde la web de Adobe te puedes descargar una versión
de evaluación de Flash Professional CS5 válida para 30
días. Esta versión estará disponible hasta que salga la
siguiente.
3. ¿Por qué Usar Flash?
Las posibilidades de Flash son extraordinarias, con cada nueva
versión se han mejorado y simplificado las herramientas, y cada
vez es posible lograr mejores efectos con menos trabajo.
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.
Durante mucho tiempo, Flash consiguió 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. Con Flash podremos crear de
modo fácil y rápido desde animaciones simples para lograr
algunos efectos visuales, hasta eplicaciones complejas, como
juegos .
4. Ventajas De Flash
El tiempo de carga. Mientras que una página HTML puede
ocuparnos 10-20 KB como media, una animación Flash ocupa
mucho más. Evidentemente depende del contenido que
tenga, pero suelen superar los100 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 tardan 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.
Los buscadores. Son capaces de indexar el contenido de nuestra
página, el texto, pero no el contenido del Flash, ya que no lo
pueden leer, lo que afectará negativamente al posicionamiento
de la página. Y hoy en día es crucial para una web encontrarse
bien posicionada. No obstante, los buscadores trabajan para
solucionar este problema, pero de momento al mejor forma de
solucionarlo es crear un diseño paralelo sin Flash, lo que aumenta
el trabajo.
5. Desventajas De Flash
La web se vuelve muy vistosa y atractiva, además de añadirle
más interactividad. El aspecto visual es muy importante para la
web, ya que al visitante, sobre todo al principio, "le entra por los
ojos".
Con un poco de práctica, el desarrollo con Flash se vuelve rápido.
Flash permite comportamientos que de otra forma no podríamos
lograr.
Compatibilidad con navegadores. Uno de los principales
problemas en el diseño web es que el resultado no tiene por qué
verse igual en todos los navegadores. Con Flash, nos aseguramos
de que lo que hemos creado es exactamente lo que se verá.
Por tanto, se hace necesario cuando lo que se necesita es que el
usuario pueda interactuar completamente con el contenido.
6. Desventajas De Flash
Flash requiere de plugins para poder visualizarse, y el
hecho de no tenerlos instalados, o de que un navegador
tenga los scripts deshabilitados por seguridad, impedirán la
visualización del Flash. Este plugin lo suelen incorporar la
mayoría de navegadores, es gratuito y se puede instalar
desde aquí de forma muy intuitiva, pero siempre habrá
usuarios que prefieran salir de nuestra página si tienen que
instalar "algo raro".
Compatibilidad con distintos dispositivos. Cada vez es
más frecuente acceder a la web con teléfonos móviles,
SmartPhones y Tablets, y algunos de ellos no soportan
Flash (como los Android anteriores a la versión 2.2).
Flash es una tecnología propietaria de Adobe, por lo que
su futuro depende de lo que esta compañía quiera hacer
con él.
7. Animaciones De Flash
Una de las características principales de Flash 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 realidadA 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.
8. Animaciones De Flahs
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?
En esta versión de Flash aún se ha facilitado más la realización de
animaciones de movimiento como veremos en el tema
correspondiente.
9. Línea Del Tiempo
La Línea de Tiempo representa una forma de ver los
fotogramas de modo simplificado. Consta de 2 partes.
1) Los Fotogramas (frames) que vienen delimitados por
líneas verticales (formando rectángulos)
2) Los Números de Fotograma que permiten saber qué
número tiene asignado cada fotograma, cuánto dura o
cuándo aparecerá en la película.
10. Las Capas
El concepto de Capa es fundamental para
manejar Flash de forma eficiente. Dada la
importancia de estas, se le dedicará un
tema completo. Aún así, veamos a grandes
rasgos qué son las capas.
Una Capa se puede definir como una
película independiente de un único nivel.
Es decir, una capa contiene su propia Línea
de Tiempo (con infinitos fotogramas).
Los objetos que estén en una
determinada capa comparten fotograma y
por tanto, pueden "mezclarse" entre sí.
Esto es interesante a menudo, pero otras
veces es conveniente separar los objetos
de modo que no interfieran entre sí. Para
ello, crearemos tantas capas como sea
necesario.
11. El Escenario
A continuación veremos las diferentes partes que
conforman el Área de trabajo empezaremos con la más
importante: el Escenario.
Sobre el escenario dibujaremos y colocaremos los
diferentes elementos de la película que estemos realizando.
El escenario tiene unas propiedades muy importantes, ya
que coinciden con las Propiedades del documento. Para
acceder a ellas, hagamos clic con el botón derecho sobre
cualquier parte del escenario en la que no haya ningún
objeto y después sobre Propiedades del documento:
Añade metadatos a tus archivos para una mejor inclusión
de estos en los motores de busqueda rellenando los
campos de Título y Descripción.
12. Escenario..
Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de
1 x 1 px (píxeles) y el máximo de 2880 x 2880 px.
Unidades de Regla: Unidad que se empleará para medir las cantidades.
Coincidir: Provocan que el tamaño de la película coincida con el botón
seleccionado (tamaño por defecto de la Impresora, Contenidos existentes o
los elegidos como Predeterminados)
13. Los Fotogramas
Un fotograma representa el contenido de la película en un instante de
tiempo. Por tanto, una animación no es más que una sucesión de
fotogramas. Todo esto se puede controlar desde la Línea de Tiempo, pero
no todos los fotogramas tienen el mismo comportamiento ni se tratan igual.
Veamos qué tipos de fotogramas hay y cuáles son sus rasgos.
14. Tipos De Fotogramas
Fotograma Clave (KeyFrame) : Son fotogramas con un contenido
especifico, se crean, por tanto, para insertar en ellos un nuevo contenido
no existente en la película. Se identifican por tener un punto negro en el
centro y cuando esté vacío se le diferencia por una línea negra vertical.
Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habría
3 Keyframes. Uno para cada posición distinta de la pelota.
Fot. Normal
Fotograma Normal (Normal Frame) : Estos fotogramas siempre
siguen a los fotogramas clave, no representan contenido nuevo y son de
color gris.
El último fotograma de una secuencia de fotogramas normales viene
representado por un cuadrado blanco sobre fondo gris.
En el ejemplo, los fotogramas del 2 - 4 son fotogramas normales, su
contenido no es nuevo, esto es, es el mismo que el del fotograma 1.
Como vemos, su misión es prolongar la duración de un fotograma clave
o keyframe.
15. Tipos De Fotogramas
Fotograma Contenedor: No son fotogramas propiamente dichos, sino que
representan un lugar dentro de la Línea de Tiempo en la que se puede
insertar uno. Por defecto ocupan toda la película y Flash no los tendrá en
cuenta al publicar la película. En la imagen anterior, son fotogramas
contenedor todos los fotogramas a partir del 11 (incluido). 1 de cada
5 fotogramas contenedor es gris, el resto, blancos.
Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco.
En la imagen, los fotogramas del 6 al 10 (incluidos) son fotogramas vacíos.
No debemos confundirlos con los fotogramas contenedor, pues estos
últimos vienen delimitados por líneas verticales grises (no negras). Si se
inserta algo en estos fotogramas, pasan a ser Keyframes.
16. Fotogramas De Movimiento
Fotogramas de Animación de Movimiento: Vienen caracterizados
por el color morado y representa el movimiento (con o sin efectos)
de un objeto, que pasa de la posición del Keyframe inicial al final.
Para representar esta animación aparece una flecha entre
estos Keyframes.
Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa
al 6, (Flash representará el movimiento entre ambas posiciones en la
película final) y del 6 al 11. Otro movimiento.
17. Fotogramas de animación de
Forma:
Fotogramas de animación de Forma: Vienen caracterizados por el
color verde y representan un cambio en la forma de un objeto, que
pasa de la forma que tenía en el Keyframe inicial a la del final. Para
representar esta animación aparece una flecha entre
estos Keyframes.
Este ejemplo, similar al de arriba representa el cambio de forma de
la pelota. En el frame 1 tendría la forma original, en el frame 5, forma
de cuadrado (por ejemplo) y en el 11, otra forma distinta.