Bloque VIII

Bloque VIII

Generar y publicar películas swf (V)

Calidad: Aquí podemos modificar la calidad de visualización de la película, que depende del suavizado de la imagen y el tiempo de reproducción. Las opciones son:
Baja No hay suavizado. El tiempo de reproducción es el de máxima velocidad.
Baja Automática: El reproductor detecta si la máquina soporta en cada instante un ligero suavizado, si lo soporta, lo aplica. El tiempo sigue siendo muy rápido.
Alta Automática: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna limitación, siempre dará preferencia a la velocidad.
Media: Valores intermedios de velocidad y suavizado. No suaviza los bitmaps.
Alta: Usa siempre el suavizado, los mapas de bits se suavizan sólo si no hay animación. Da preferencia a la buena visualización.
Óptima: Se suaviza todo, incluidos los mapas de bits en cualquier caso. Total preferencia de la apariencia frente a la velocidad.

Modo de Ventana: Opciones para la reproducción dentro de las ventanas de Windows:
Ventana: Se reproduce la película en la ventana de la web en la que está insertada.
Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrás de la película no se vean (en páginas DHTML).
Transparente sin Ventanas: Es el opuesto al anterior. Permite que los objetos situados detrás se vean.

Alineación HTML: Posición relativa de la película dentro de la página web HTML. Tenemos varias opciones:

Predeterminada: Centra la película en la página. Si no cabe se cortan los extremos.
Izquierda: Alineación a la izquierda. También se recortan los bordes si no cabe.
Derecha: Alineación a la derecha.
Superior: Alineación en el borde superior de la página.
Inferior: Alineación en el borde inferior de la página.

Escala: Si hemos especificado el tamaño en píxeles o en tanto por ciento, podemos decirle a Flash cómo distribuir la película en el rectángulo que hemos decidido que la contenga:
Predeterminada: Se ve toda la película guardando las proporciones originales.
Sin Borde: Recorta (en caso de que la película sea más grande que el rectángulo) todo lo que sobre con el fin de mantener las proporciones.
Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la película ocupe el rectángulo completo.

Alineación Flash: Se hace necesario alinear la película cuando esta no tiene las mismas dimensiones que el rectángulo definido. Las opciones son:
Alineación Horizontal: Podemos escoger entre Centro, Izquierda o Derecha.
Alineación Vertical: Podemos escoger entre Centro, Superior o Inferior.

Mostrar Mensajes de advertencia: Permite que se muestren los posibles mensajes de error de código ActionScript.

Además, Flash creará el código JavasScript que detecte la versión de Flash y otras acciones.

De todas formas, lo más habitual es utilizar un editor web, como Dreamweaver para crear la página web, y desde ahí insertar el archivo SWF, por lo que será el propio editor el que se encargue de generar este código.

Fuente : http://www.aulaclic.es/flash-cs5/t_2_2.htm

Bloque VII

Bloque VII

Importando vídeos

Lo primero que deberemos hacer es transformar nuestro vídeo de formato avi, mpeg, mov, wmv o dv al formato que utiliza Flash: flv.

Este formato, además de crear archivos de vídeo de buena calidad muy comprimidos, te permitirá introducir puntos de referencia desde donde controlaremos la interacción del entorno de la película con el vídeo.

Haz clic en Archivo → Importar → Importar vídeo para empezar a configurar el archivo .flv que crearemos.

Se abrirá una pantalla como ésta:



Aquí deberás seleccionar el archivo que quieres importar para utilizarlo en tu película. Haz clic en el botón Examinar y búscalo en tus carpetas. Cuando lo hayas encontrado pulsa el botón Aceptar y estarás listo para seguir pulsando el botón Siguiente.

También es posible marcar la opción Ya se ha implementado en un servidor Web, Flash Vídeo Streaming Service o Flash Communication Server. En este caso deberás introducir la URL del archivo, que previamente habrá sido preparado para poder utilizarlo en Flash.

La siguiente pantalla te permitirá seleccionar el aspecto del reproductor:



La siguiente pantalla te mostrara la información del video que vamos a exportar, donde se importara, etc:



A partir de este punto, ya tenemos el vídeo incorporado en nuestro proyecto.

Fuente : http://www.aulaclic.es/flash-cs5/t_2_2.htm

Bloque VI

Bloque VI

El sonido en Flash

Hasta hace poco, los únicos sonidos que oíamos en las páginas web eran los famosos "midis", de escaso tamaño y de escasa calidad. De hecho, eran sólo instrumentos musicales sin voz, de ahí su pequeño tamaño (y calidad). Aún así, siempre existía algún creador de páginas web que se aventuraba a poner algún sonido complejo (.wav o .mp3) en su página web, por desgracia, su carga es tan lenta, que la mayoría de los visitantes se irían de la página sin llegar a escucharla.

Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner sonido a las páginas web es un poco más fácil, ¿qué aporta Flash?

Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav, .aiff, .mp3, etc...) de forma fácil y muy efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con nuestra película.

Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón), efectos complejos (música de fondo) e incluso podemos hacer que la animación se desarrolle conjuntamente con una música (si bien esto último necesitaría que toda la película estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la animación). En definitiva, Flash nos lo vuelve a poner fácil.

Pero hemos de tener cuidado al incluir sonidos, sobre todo si son melodías. Es preferible que sea el usuario quien las active a través de un botón, o si es necesario que se reproduzcan automáticamente, tener un control fácilmente localizable para silenciarlo.

Importar sonidos

Utilizar sonidos externos. Podemos insertar en una película de Flash sonidos que tengamos en formato digital: grabados por nosotros mismos, descargados de internet, etc...Pero para que esté disponible en nuestra película y podamos usarlo, antes debemos de importarlo.

Realmente debemos de importar a flash cualquier archivo externo que queramos usar: sonidos, gráficos, e incluso con otras películas Flash. Importar por tanto, no es más que decirle a Flash que añada un determinado archivo a nuestra película, para que podamos usarlo cuando queramos. En realidad, lo añade a nuestra Biblioteca, que es el Panel en el que están todos los objetos que participan en la película (este panel se verá más adelante).

Así pues si queremos manejar un sonido en nuestra película, deberemos importarlo previamente.

Una vez esté importado, podremos usarlo con total libertad.

Para importar un sonido haz clic en el menú Archivo → Importar → Importar a biblioteca.

Se abrirá el cuadro de diálogo de Importar a biblioteca. Allí deberás seleccionar en Tipo de archivo Todos los formatos de sonido.

Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu película. Selecciónalo haciendo clic sobre él y haz pulsa el botón Aceptar.

El sonido estará listo para usarlo donde quieras, podrás encontrarlo en la Biblioteca (menú Ventana → Biblioteca).

Utilizar los sonidos incorporados. Flash ya incluye una serie de sonidos incorporados que podemos importar a nuestro proyecto. Se trata principalmente de sonidos como disparos, risas, sonidos animales, etc. Los podemos encontrar a través del menú Ventana → Bibliotecas comunes → Sonidos. Se abrirá un panel como el siguiente:

Para incorporar alguno de estos sonidos a nuestra biblioteca de proyecto, no tenemos más que arrastrarlos desde este panel.

Fuente : http://www.aulaclic.es/flash-cs5/t_2_2.htm

Bloque V

Bloque V

¿Qué es un botón?

Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas Flash con aquel que las está visualizando. Un botón, en Flash, es igual que un botón de cualquier entorno informático, sea web o cualquier otro.

Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. También es habitual ver cómo este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando están pulsados.

La interfaz de Flash está diseñada de manera especial para la creación de botones, lo que nos permite crear todos estos efectos de una manera muy sencilla.

Al igual que los otros símbolos de Flash CS5, los botones tienen su propia línea de tiempo. Esta es independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno para cada estado posible del botón:


Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él.
Sobre. Aspecto del botón cuando situamos el puntero sobre él.
Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado.
Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto es importante sobre todo en botones compuestos sólo por texto como veremos más adelante.

Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de espectacularidad y utilidad de estos símbolos, pero no es así. Ten en cuenta que podemos tener todas las capas que queramos.

Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo Bitmap). La unión de las posibilidades de todos los símbolos pueden dotar a los botones de efectos asombrosos.

Todo esto es lo referente a la apariencia del botón. Después, tenemos que programar lo que queremos que haga el botón, cómo queremos que afecte a la película. Y esto lo haremos con ActionScript.

Creación de un botón

En la creación de un botón podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo completarlo internamente, lo que nos ayudará a entender mejor dicha estructura.

Comenzamos creando el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash CS5. Recuerda que puedes usar varias capas.

Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo, le daremos el Tipo Botón y asignaremos un nombre a nuestro nuevo símbolo.

De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo completaremos internamente.

Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Editar.

Cuando tengamos delante la línea de tiempo del botón (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.

Ahora ya podemos modificar el aspecto inicial del botón para cada posición del cursor y marcar el área de acción del botón (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso sólo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentirá aludido" nuestro botón.

Fuente : http://www.aulaclic.es/flash-cs5/t_2_2.htm

Bloque IV

Bloque IV

La animación en Flash

Flash es un programa básicamente orientado a la animación, de ahí la gran importancia de este tema. No obstante, para ir creando animaciones cada vez más complicadas se necesita, sobre todo, mucha práctica, aparte de conocer bien las herramientas.

En este tema y los sucesivos mostraremos las técnicas básicas de animación en Flash. La unión de estas técnicas será la que nos permita crear las más variadas y vistosas animaciones.

En el tema de la animación, Flash ofrece unas facilidades muy grandes, consiguiendo efectos que normalmente requieren ciertos conocimientos y espacio de almacenamiento para ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programación como JavaScript, de una manera muy sencilla, sin necesidad de excesivos conocimientos y ocupando muy poco espacio en disco.

Aunque Flash ofrece técnicas mejores, también se pueden crear animaciones a modo de GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las animaciones más básicas y conviene conocerlas.

A continuación veremos distintos tipos de animaciones que el creador de películas Flash deberá tomar como guía inicial. Cabe destacar que podremos aplicar varias de estas animaciones colocándolas en distintas capas. Con esto es con lo que conseguiremos los efectos más espectaculares a la par que útiles.

Desde el punto de vista del diseño general de una página web es muy importante tener claro un concepto: no se debe crear animaciones en páginas que no lo necesitan ni crear animaciones que distraigan al que visualice nuestros documentos de lo realmente importante, el mensaje.

Ya en la versión anterior de Flash se hicieron cambios importantes en el tema de animaciones. Lo que hasta entonces se llamaba interpolación de movimiento, pasa a llamarse interpolación clásica y la interpolación de movimiento actual es totalmente nueva, más potente y versátil.

Interpolación de movimiento

Es la acción básica de las animaciones en Flash. Permite desplazar un símbolo Flash de un lugar a otro del escenario, siendo necesarios únicamente dos fotogramas, lo que optimiza mucho el rendimiento de la película.

Es importante destacar que para que una Interpolación de movimiento se ejecute correctamente aquellos objetos que intervengan deberán haber sido previamente convertidos a símbolos. Los gráficos, clips de película, textos y botones son algunos de los símbolos que se pueden interpolar.

También se debe tener cuidado al realizar una interpolación con dos símbolos que se encuentren en la misma capa, ya que el motor de animación los agrupará como uno sólo y el resultado no será el esperado. Por esto es conveniente asegurarse de dos cosas:
Separar en distintas capas los objetos fijos y los que estarán animados.
Poner también en distintas capas objetos que vayan a ser animados con direcciones o formas distintas.

Pasemos pues al tema en cuestión. Una interpolación de movimiento, como hemos dicho, es el desplazamiento de un símbolo de un punto a otro del escenario. El hecho de que sólo se necesiten dos fotogramas es debido a que Flash, únicamente con la posición inicial y final, calcula una trayectoria en línea recta y la representa (veremos que también se pueden realizar movimientos no rectilíneos).

Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolación de movimiento. Por defecto, se añadirán unos cuantos fotogramas, rellenos de un color azulado.

Ahora vamos al fotograma final, o creamos uno clave de propiedad donde nos plazca. Y desplazamos el símbolo. Veremos que aparece una línea punteada, por defecto recta, que representa el trazado de la animación.

Cuando realicemos la interpolación correctamente observaremos un aspecto como este en la línea de tiempo, en el que los fotogramas aparecen de color azul.

Esto indica que la animación cambiará la posición del símbolo del fotograma 1 hasta la posición del mismo símbolo en el fotograma 24, utilizando precisamente 24 fotogramas. El número de fotogramas que se usen en la interpolación indicará las subetapas de que constará la animación. Cuantas más subetapas más sensación de "continuidad" (menos saltos bruscos) pero a la vez menos velocidad en el movimiento.

Podemos seleccionar cualquier fotograma y ver dónde se sitúa el clip en cada punto. De hecho, si en alguno de estos fotogramas lo cambiamos, se creará un fotograma clave de propiedad, mostrándose como un diamante en la línea de tiempo.

La velocidad en el movimiento de las películas la podemos cambiar también modificando su parámetro en la línea de tiempo, pero esto no cambiará lo que hemos comentado anteriormente respecto al número de fotogramas.

La velocidad está expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la línea de tiempo. A mayor valor más velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animación como queremos.

El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y arrastrándolo, una vez seleccionada previamente la herramienta 

En cualquier fotograma de la interpolación podemos cambiar la posición del símbolo (o cualquier otra propiedad), creando ahí un fotograma clave de propiedad, que se representa por un pequeño rombo en la línea de tiempo

Fuente : http://www.aulaclic.es/flash-cs5/t_2_2.htm

Bloque III

Bloque III

Qué son los símbolos

Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS5.

Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones (instancias), ya sea en la misma o en otra película. Los símbolos nos resultarán fundamentales a la hora de crear nuestras animaciones.

Cómo crear un símbolo

La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de los primeros pasos para crear una animación, como veremos más adelante.

El procedimiento es el siguiente:

Seleccionamos el o los objetos que queramos convertir en un símbolo. Lo más habitual es partir de una forma.

Abrimos a la ventana Convertir en símbolo, accediendo al menú Insertar → Nuevo Símbolo, desde el menú contextual eligiendo Convertir en símbolo, o directamente con las teclas Ctrl + F8 o F8.

Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen. Introducimos el nombre del símbolo que vamos a crear, y que nos permitirá identificarlo en la biblioteca, lo que se hará imprescindible cuando tengamos muchos símbolos.

Las Bibliotecas

En Flash CS5 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas asociadas a las películas que hemos creado. Todas ellas las tenemos a nuestra disposición para utilizar los símbolos que contienen.

Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir a al menú Ventana → Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de símbolos: botones, clips o gráficos.

Para acceder a la biblioteca de símbolos de la película que estamos creando, de nuevo vamos a la Barra de Menús, Ventana → Biblioteca. En esta biblioteca aparecerán todos los símbolos que hemos creado hasta el momento.

Podemos comprobar como el nuevo símbolo que hemos creado en el ejercicio paso a paso de la unidad anterior se ha añadido a nuestra biblioteca accediendo a ella como acabamos de indicar.

Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono que representa el tipo de símbolo que representan:

Clip Botón Gráfico

Fuente : http://www.aulaclic.es/flash-cs5/t_2_2.htm

Bloque II

Bloque II

La barra de Herramientas. Herramientas básicas

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Algunas herramientas llevan asociados modificadores de herramientas, que permiten cambiar algunas propiedades de la herramienta, y que aparecen al final del panel de herramientas. Veamos las herramientas más importantes:

Herramienta Selección (flecha): . Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con doble clic), los rellenos (con un sólo clic), zonas a nuestra elección... Su uso adecuado puede ahorrarnos tiempo en el trabajo.

Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán en el tema siguiente.

Herramienta Línea:  Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Una vez creada la podemos modificar situando el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.

Herramienta de forma: Permite dibujar formas predefinidas como las que aparecen en la imagen, la última herramienta utilizada es la que aparece como icono en la barra de herramientas. Manteniendo pulsado el icono podremos acceder a las diferentes herramientas de forma. Por ejemplo:
La herramienta Óvalo permite dibujar círculos o elipses de manera rápida y sencilla.

Herramienta Lápiz:   Es la primera herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.

Herramienta Pincel:  Su funcionalidad es parecida a la del lápiz, pero por defecto su trazo es más grueso e irregular. Se suele emplear para aplicar rellenos. Se puede modificar su herramientas.

Herramienta Cubo de pintura:  Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará esta herramienta se puede modificar, bien desde el Panel Color o bien desde el subpanel Relleno que hay en la Barra de Herramientas.

Herramienta Borrador:  Su funcionamiento es análogo a la Herramienta Pincel. Pero su función es la de eliminar todo aquello que "dibuje".

Herramienta Lazo: Su función es complementaria a la de la herramienta Selección, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano).

Herramienta Pluma:  Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando.

Herramienta Subselección:  Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.

Herramienta Bote de Tinta:  Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.)

Herramienta Cuentagotas:  Su misión es "capturar" colores para que posteriormente podamos utilizarlos

Fuente : http://www.aulaclic.es/flash-cs5/t_2_2.htm