28

Continuación del curso de Flassh

  • Upload
    jemoma

  • View
    19

  • Download
    2

Embed Size (px)

DESCRIPTION

Continuación del curso de Flash, como en el caso anterior es la conitnuación de un curso muy bueno.

Citation preview

Page 1: Continuación del curso de Flassh
Page 2: Continuación del curso de Flassh

1ª edición, mayo de 2011

Autora: Carla Novillo Lapeyra

de esta edición:FOREM. Fundación Formación y Empleo Miguel EscaleraC/ Las Mercedes, 19, 28020 Madrid (España)Tel.: +34 91 572 54 00 —902 300 290Fax: +34 91 306 91 93Correo electrónico: [email protected]://www.forem.es

Comité editorial: Marta del Castillo Coba, Sonia Fanega García, Ana Fernández Fernández y Pablo Martín de la Hoz

ISBN: 978-84-694-3499-4

Reservados todos los derechos. Quedan prohibidas, sin el permiso escrito de FOREM, la reproducción o la transmisión total o parcial de esta obra por cualquier procedimiento mecánico o electrónico, incluyendo la reprografía y el tratamiento informático, y la distribución de ejemplares mediante alquiler o préstamos públicos.

2

Page 3: Continuación del curso de Flassh

1.- Aplicación práctica en el entorno de la enseñanza

EJEMPLO I · Diagrama de una célula animal típica

1. Dinámica de funcionamiento

2. Recursos utilizados

Esta primera aplicación práctica es un ejemplo de lo que se podría hacer en el entorno de la enseñanza con los conocimientos adquiridos hasta ahora.

En este caso el ejemplo se basa en el diagrama de una célula animal típica pero se podría haber hecho con diferentes ejemplos como las capitales del mundo, con un mapamundi de fondo, la anatomía del cuerpo humano, etc.

3

Page 4: Continuación del curso de Flassh

La dinámica de funcionamiento de la aplicación que vamos a desarrollar es exactamente igual que la del acuario interactivo que ya hemos creado.

Este ejemplo práctico está basado en el diagrama de una célula animal típica. Encontramos un gráfico de una célula (dibujado con las herramientas de Flash) sobre el que se amplia información pulsando sobre determinados elementos.

1. Ejemplo I | 1. Dinámica de funcionamiento

Pantalla inicial Ventana emergente (pop-up)

La dinámica de funcionamiento es la siguiente:

Tanto la imagen de la célula como los 12 botones están presentes en toda la película.

La película se queda parada en el primer fotograma, no avanza al tener un stop, y lo único que el usuario ve son los 12 botones (capa Botones) y la imagen de la célula (capa Imagen). Cuando el usuario pulse sobre cualquiera de los botones, Flash “saltará” al fotograma correspondiente de la película, donde se encuentra la información. El usuario entenderá que se ha abierto una ventana emergente con la información relativa al botón pulsado. Al pulsar sobre el botón cerrar de dicha ventana, Flash volverá al fotograma 1 de la película, y el usuario entenderá que se ha cerrado la ventana emergente.

Hemos simulado la apertura y el cierre de la ventana saltando de un fotograma a otro, de tal forma que el usuario entiende que dicha ventana se abre y cierra.

Como puedes observar, tanto la imagen de la célula (capa Imagen) como los botones (capa Botones), están presentes en todo momento.

stop();

4

Page 5: Continuación del curso de Flassh

1. Ejemplo I | 2. Recursos utilizados

Todos los recursos utilizados en este ejemplo los has estudiado anteriormente en los contenidos del curso y has trabajado con ellos.

– Usar la interfaz de trabajo de Flash

– Crear y modificar elementos

– Copiar objetos

– Hacer uso de capas

– Trabajar con los elementos de un fotograma

– Importar elementos (importar imágenes)

– Utilizar campos de texto

– Trabajar con botones / Crear botones con varios estados

– Utilizar ActionScript

– Publicar una película

5

Page 6: Continuación del curso de Flassh

2.- Aplicación práctica en el entorno de la enseñanza

EJEMPLO II · La evolución del ser humano

1. Dinámica de funcionamiento

2. Botón + info

3. Cuadro de texto con desplazamiento (scroll)

Esta segunda aplicación práctica es un ejemplo muy parecido al acuario y al Ejemplo I que acabamos de ver, pero con algunas diferencias y novedades.

• Una de las diferencias es el sistema de navegación: Vamos a desarrollar una navegación lineal, es decir, iremos avanzando a lo largo de diferentes pantallas (no hay una sola pantalla en la que se amplia información pulsando sobre determinados elementos).

Además vamos a ver cómo utilizar los botones para ampliar información sin necesidad de utilizar ActionScript.

• La novedad es que aprenderemos a utilizar un cuadro de texto con desplazamiento, para ello estudiaremos un nuevo elemento predefinido llamado componente, concretamente el componente UIScrolBar.

6

Page 7: Continuación del curso de Flassh

La dinámica de funcionamiento de la aplicación que vamos a desarrollar consiste en una navegación lineal. Es decir, empezamos por el fotograma 1, pasamos al siguiente fotograma, el 2, y así sucesivamente hasta el último fotograma, en este caso el fotograma 7.

1 / 7 2 / 7 3 / 7 4 / 7 5 / 7 6 / 7 7 / 7

Navegación lineal

on (release) {nextFrame();

}

on (release) {prevFrame();

}

En esta aplicación hay 2 botones de navegación: un botón de avance y otro de retroceso. La acción para cada botón es:

(ir al fotograma siguiente)(ir al fotograma anterior)

2. Ejemplo II | 1. Dinámica de funcionamiento

1. Selecciona el botón de navegación.

2. Despliega el panel Acciones y activa el “Asistente de script” . Al activar este modo de edición, aparecerán los controles en la parte superior de la Ventana de script, donde activaremos la opción que necesitemos.

3. Selecciona el Tipo “Fotograma siguiente” (nextFrame();) para el botón de avance, y el Tipo“Fotograma anterior” (prevFrame();) para el botón de retroceso.

La acción goto (ir al fotograma especificado de la película), nos ofrece diferentes opciones de control de la línea de tiempo: Número de fotograma / Etiqueta de fotograma / Expresión / Fotograma siguiente / Fotograma anterior.

• Fotograma siguiente: nextFrame(); / Fotograma anterior: prevFrame();

7

Page 8: Continuación del curso de Flassh

En esta aplicación nos encontramos con otro tipo de símbolo Botón:Es un botón para ampliar información.

2. Ejemplo II | 2. Botón + info

Imagen: M. Garde

Este botón no necesita programación. Simplemente hemos incluido la información dentro del propio símbolo Botón, en el fotograma SOBRE. De tal forma que al pasar el cursor por encima del botón, aparecerá la información relativa al botón.

En este caso hemos incluido una caja de color gris claro con el radio de las esquinas redondeado, una imagen (formato PNG) y un Texto estático.

Recuerda que el símbolo Botón está constituido por

cuatro fotogramas o estados: Reposo, Sobre, Presionado y Zona activa. Cuando se habla de estado se hace referencia a

los distintos aspectos que puede mostrar un botón.

8

Page 9: Continuación del curso de Flassh

Todo lo que hemos visto hasta ahora en este 2º ejemplo lo has estudiado en módulos anteriores. Sin embargo hay una novedad: un cuadro de texto con desplazamiento. Hemos utilizado un elemento predefinido llamado componente, concretamente el componente UIScrolBar.

Los componentes predefinidos aportan una serie de controles predefinidos para que no sea necesario que nos encarguemos de crearlos nosotros. Como por ejemplo una barra de desplazamiento de texto o scroll.

2. Ejemplo II | 3. Cuadro de texto con desplazamiento (scroll)

Imagen: M. Garde

• Crear un scrollbar en Flash con el componente UIScrolBar

1. Crea una caja de texto dinámico. Para ello, en el panel Propiedades despliega la ventana donde pone Texto estático (es el texto que viene predeterminado en Flash) y escoge la opción “Texto dinámico”.

Existen 3 tipos de campos de texto:

• Texto estático (predeterminado)• Texto dinámico• Introducción de texto

Los bloques de texto dinámico muestran información que podremos variar durante la reproducción de la película.

Panel Propiedades9

Page 10: Continuación del curso de Flassh

2. Dale el comportamiento Multilínea a la caja de Texto dinámico. Para ello selecciona la caja de texto y ve al panel Propiedades > opción PÁRRAFO > Despliega la ventana “Comportamiento” y selecciona la opción “Multilínea”.

El comportamiento de un texto indica si el bloque tendrá una sola línea, varias líneas o varias líneas sin ajuste.

3. Escribe o vuelca la información y dale el tamaño que quieras al cuadro de texto. Para acortar el alto de la caja de texto dinámico, haz clic derecho sobre ella y selecciona la opción “Desplazamiento permitido”(como muestra la siguiente imagen).

10

Page 11: Continuación del curso de Flassh

Una vez activada la opción “Desplazamiento permitido”, hemos podido acortar el alto de la caja de texto dinámico.

4. Y para terminar de preparar nuestra caja de Texto dinámico, ya sólo nos queda asignarle un Nombre de instancia a la caja de texto.

A los bloques de texto dinámico se les asigna un identificador, denominado variable, que servirá para poder acceder al contenido del bloque durante la ejecución de la película. Esto se hace desde el panel Propiedades.

Para ello selecciona la caja de texto dinámico y ve al panel Propiedades. La primera casilla que aparece en el panel Propiedades es la correspondiente al Nombre de instancia.Escribe en ella el nombre que quieras para identificar a tu caja de texto.

En el ejemplo hemos asignado como nombre de instancia “homoAE”. 11

Page 12: Continuación del curso de Flassh

Una vez que tenemos la caja de Texto dinámico preparada, pasaremos a añadir una barra de desplazamiento al cuadro de texto. Para ello arrastra desde el panel “Componentes” (Menú principal: Ventanas > Componentes) el componente UIScrollBarhasta el margen derecho de la caja de texto y suelta.

Automáticamente se ajustará al margen derecho de la caja de texto y se vinculará a esta caja.

5.

Panel componentes

Si no asignamos ningún nombre de instancia a la caja de texto, Flash lo haráautomáticamente una vez que el componente se ajusta al cuadro de texto y se vincula a este. De forma predeterminada Flash le asignará el nombre de InstanceName_1. El número del nombre predeterminado irá aumentando en función del número de componentes UIScrolBar que utilicemos en la misma película (InstanceName_2, InstanceName_3, etc.).

6. Pulsa Control-Intro para probar la película.

Si todo ha salido bien podrás desplazar el texto utilizando la barra de desplazamiento.

Automáticamente se ajusta al margen derecho de la caja de texto y se vincula a esta caja.

12

Page 13: Continuación del curso de Flassh

¡Ya tenemos nuestro cuadro de texto con desplazamiento!

Al probar o publicar la película veremos los botones de la barra de desplazamiento.

Imagen: M. Garde

13

Page 14: Continuación del curso de Flassh

3.- Aplicación práctica en el entorno de la enseñanza

EJEMPLO III · Familia clásica de instrumentos de cuerda frotada

1. Dinámica de funcionamiento

2. Botón invisible

3. Importar vídeo

4. Importar sonido a la línea de tiempo

5. Enlace Web con texto

Esta tercera aplicación práctica es un ejemplo más de lo que se podría hacer en el entorno de la enseñanza con los conocimientos adquiridos hasta ahora, pero con algunas diferencias y novedades.

• Una de las diferencias es el sistema de navegación: Iremos entrando en diferentes espacios, volviendo siempre al espacio principal.

Además vamos a utilizar únicamente la Zona activa de los botones para crear botones invisibles.

• Las novedades que estudiaremos en este tercer ejemplo son: importar video, importar sonido a la línea de tiempo de la película y crear un enlace Web con texto (estas dos últimas funciones ya están explicadas en los contenidos del curso aunque aquí lo pondremos en práctica).

14

Page 15: Continuación del curso de Flassh

La dinámica de funcionamiento de la aplicación que vamos a desarrollar es muy parecida a la del acuario. La única diferencia es que en este caso las ventanas de información no funcionan como ventanas emergentes, es decir, no hay una sola pantalla en la que se amplia información pulsando sobre determinados elementos.

En este ejemplo, cuando el usuario pulse sobre alguno de los instrumentos de la pantalla de inicio, Flash “saltará” a otro fotograma de la película (2, 3, 4, 5 ó 6), donde únicamente se encuentra la información relativa al instrumento pulsado (los elementos sobre los que pulsamos, los instrumentos de la página principal, no están presentes en toda la película como pasaba con los elementos del acuario). El usuario entenderá que ha accedido a otro espacio. Al pulsar sobre el botón “inicio” de la película (esquina superior derecha de la pantalla), Flash volverá al fotograma 1 de la película, y el usuario entenderá que ha vuelto al espacio principal.

FOTOGRAMA 1 FOTOGRAMA 2 FOTOGRAMA 3 FOTOGRAMA 4 FOTOGRAMA 5

stop();

FOTOGRAMA 6

3. Ejemplo III | 1. Dinámica de funcionamiento

Con Flash puedes utilizar cualquier forma o gráfico para crear un botón, de esta forma puedes integrar los botones en la película. En este ejemplo hemos utilizado un botón transparente o invisible al usuario, de tal forma que al pasar el puntero del ratón sobre cada uno de los instrumentos se activa el botón (en el momento que colocamos el cursor sobre el botón, Flash transforma el puntero y lo convierte en una mano) aunque este sea invisible.

Para crear un botón invisible al usuario hemos utilizado únicamente la Zona activa del botón. Fíjate en la imagen, observa que los fotogramas o etiquetas Reposo, Sobre y Presionado están vacíos. Solamente el fotograma Zona activa está definido (en este ejemplo hemos creado una figura sólida, un rectángulo).

La Zona activa no es visible para el usuario. En este estado, tendrás que definir el área del botón que puede utilizar el usuario, es decir, tendrás que determinar la zona en la que se puede hacer clic dentro del botón.

3. Ejemplo III | 2. Botón invisible

15

Page 16: Continuación del curso de Flassh

Al abrir el archivo FLA de trabajo, observamos que en el espacio de trabajo, es decir, en el Escenario, los botones invisibles aparecen de color azul turquesa. ¿Porqué? Porque cuando no definimos el primer fotograma o etiqueta de un botón (Reposo), éste se muestra de color azul (como vemos en la siguiente imagen) para facilitarnos su visualización a la hora de trabajar con él. Sin embargo, al probar o publicar la película, este color azul no se verá.

3. Ejemplo III | 3. Importar vídeo

Los dos métodos más habituales en Flash para importar vídeos son:

– Vídeo insertado en la película: El vídeo se inserta dentro del proyecto como un elemento más y es manipulado como cualquier otro símbolo.

– Descarga progresiva del vídeo: El vídeo no se insertará dentro del proyecto, sino que permanecerá fuera de él. Por lo tanto en el archivo SWF indicaremos la dirección del vídeo. Al reproducir la película el vídeo se irá descargando poco a poco.

Al trabajar con vídeos el problema del tamaño se vuelve más agudo ya que los vídeos ocupan mucho más tamaño aún que una simple imagen. Es por esto que Flash incorpora su propio formato de codificación (FLV y F4V) que produce vídeos muy pequeños y de alta calidad.

En nuestro ejemplo práctico, Familia clásica de instrumentos de cuerda frotada, optaremos por la segunda opción, descarga progresiva del vídeo, que no incorporará el vídeo en el interior de nuestro documento Flash sino que permanecerá fuera de él.

16

Page 17: Continuación del curso de Flassh

El método Descarga progresiva del vídeo es el utilizado hoy en día por numerosos portales de distribución de vídeo y es el que vamos a utilizar en esta aplicación práctica.

El proceso para importar un vídeo en Flash es similar al utilizado con las imágenes.

1. Selecciona la opción Archivo > Importar > Importar vídeo. Aparecerá el cuadro de diálogo “Importar vídeo” (como el de la imagen que hay a continuación).

• Insertar un vídeo como elemento externo

2. En primer lugar debes especificar dónde se encuentra el archivo de vídeo. Mediante la opción En el equipo, puedes utilizar un vídeo que tengas en tu ordenador. Deberás indicar la ruta de acceso al archivo mediante el enlace Examinar.

También puedes utilizar las opciones Archivo>Importar>Importar a escenario yArchivo>Importar>Importar a biblioteca para insertar un vídeo en Flash. En el primer caso el vídeo se presentará directamente en la escena, en el segundo caso el vídeo no se presentará directamente en la escena sino que tendrás que seleccionarlo en el panel Biblioteca y arrastrarlo hasta la escena.

Indica la ruta de acceso al archivo mediante el enlace Examinar.

Haz clic en el botón Examinar y escoge el vídeo con el que vas a trabajar.

17

Page 18: Continuación del curso de Flassh

Si es un vídeo en formato FLV o F4V (estos son los formatos de vídeo de Flash) podemos avanzar sin problema. Por el contrario, si se trata de un vídeo en otro formato (MOV, AVI, MPG, etc.), Flash nos recomienda convertirlo a estos formatos utilizando el botón AdobeMedia Encoder (del cuadro de diálogo “Importar vídeo”).

Como ocurre con las imágenes o con el sonido, el vídeo se puede encontrar almacenado en varios formatos distintos, cada uno de ellos aportando sus propias características como la calidad o la compresión. Flash incorpora su propio formato de codificación (FLV y F4V) que produce vídeos muy pequeños y de alta calidad.

3. A continuación aparecen tres opciones para definir el método de inserción del vídeo. Haz clic en la opción Carga vídeo externo con componente de reproducción.

Al seleccionar esta opción, Carga vídeo externo con componente de reproducción, el vídeo se cargará desde su propio archivo sin insertarlo dentro de la película y se mostrará mediante un reproductor de vídeo que generará Flash.

Al hacer clic en Siguiente aparece el cuadro de diálogo desde el que podremos elegir la apariencia del reproductor de vídeo (siguiente imagen).

Reproductor externo

Puedes elegir la apariencia del reproductor de vídeo desde el enlace Aspecto dondeencontrarás distintos modelos al desplegar la lista.

Puedes optar entre distintos modelos en la lista Aspecto.

18

Page 19: Continuación del curso de Flassh

Por ejemplo, el aspecto ClearOverAll.swf incluye controles que aparecen directamente sobre el archivo de vídeo.

4. Haz clic en el botón Siguiente y posteriormente en Finalizar. En la escena verás el vídeo mientras que en el panel Biblioteca no hay vídeo alguno, solo un componente denominado FLVPlayBack que se encarga de reproducir el vídeo mediante descarga progresiva. Los controles que aparecen sobre el vídeo se corresponden con este componente.

En el fotograma 1 de la Línea de tiempo aparecerá el componente y nada más.

19

Page 20: Continuación del curso de Flassh

Seleccionado el componente en la escena tendrás acceso mediante el panel Propiedadesa las características del mismo.

Al activar la casilla skinAutoHide, el reproductor externo sólo aparecerá al pasar el cursor sobre del vídeo, de tal forma que el reproductor externo no estará visible durante la reproducción del vídeo hasta que nos pongamos sobre el archivo de vídeo.(El componente del vídeo de Violonchelo del ejemplo práctico tiene activada esta opción).

La casilla contentPath nos indica la ruta del contenido.

La casilla skin nos indica la apariencia del reproductor de vídeo que hemos escogido.

5. Pulsa Control-Intro para probar la película y ver el vídeo.

Junto al proyecto final debes enviar también el SWF del componente (se genera automáticamente al probar la película) y el propio vídeo. En esta modalidad (insertar un vídeo como elemento externo), como venimos diciendo, el vídeo no se insertará dentro del proyecto, sino que permanecerá fuera de él. Este detalle es fundamental ya que cuando lo distribuyas debes asegurarte de que también entregas el vídeo junto al SWF adicional que se genera, de otro modo no será visible.

Al probar la película aparecerá un nuevo archivo: el SWF del componente.

SWF del componenteVídeo Película Flash

20

Page 21: Continuación del curso de Flassh

En el ejemplo práctico “Familia clásica de instrumentos de cuerda frotada”, en el apartado del Violín, hemos incorporado un vídeo del Capricho No. 24 en La menor de Niccolò Paganini (1782 - 1840) interpretado por Kyoko Yonemoto.

Hemos utilizado el aspecto SteelExternalAll.swf.

En el ejemplo del Violonchelo, hemos incorporado un fragmento del primer movimiento (Preludio) de la Suite para Violonchelo No. 2 en Re menor de J. S. Bach (1685 - 1750) interpretado por Pablo Pérez Martínez.

Hemos utilizado el aspecto ClearOverNoVol.swf, donde los controles aparecen directamente sobre el archivo de vídeo. Además hemos activado la opción skinAutoHide (desde el panel Propiedades) de tal forma que el reproductor externo sólo aparecerá al pasar el cursor sobre el vídeo.

El aspecto ClearOverincluye controles que aparecen directamente sobre el archivo de vídeo.

21

Page 22: Continuación del curso de Flassh

3. Ejemplo III | 4. Importar sonido a la Línea de tiempo

Flash puede insertar y manipular efectos sonoros dentro de las películas. Los sonidos se utilizan de 2 maneras distintas:

• Mediante la línea de tiempo: se puede insertar un sonido en una capa de la línea de tiempo y controlar mediante fotogramas clave.

• Asociados a eventos y botones: se puede asociar los sonidos para que se reproduzcan o se detengan al interactuar con un botón o al controlarlos con ActionScript.

Con la idea de OPTIMIZAR LA PUBLICACIÓN, lo primero que debemos tener en cuenta a la hora de trabajar con archivos de sonido es su tamaño y sus características. Al igual que pasa con las imágenes, en algunos momentos es interesante perder algo de calidad si el tamaño de la película Flash se reduce significativamente. Es muy importante conseguir que nuestra película tenga un tamaño reducido. El formato MP3 es el más se comprime, utilízalo siempre que sea posible.

En el ejemplo práctico “Familia clásica de instrumentos de cuerda frotada”, en el apartado de la Viola, hemos incorporado un fragmento de audio del concierto para Viola en Sol mayor - 2. Allegro de Georg Philipp Telemann (1681 - 1767) interpretado por EliasGoldstein (viola).

• Insertar sonido a la Línea de tiempo

Para insertar un archivo de sonido en Flash selecciona la opción Archivo > Importar > Importar a biblioteca y escoge el sonido que vayas a insertar. Al importar un sonido éste se introduce como un elemento de la biblioteca de símbolos.

Después de insertar el sonido en la biblioteca, arrastra el archivo desde la biblioteca hasta la escena. En los fotogramas de la línea de tiempo aparecerá una representación del sonido que se extenderá hasta que éste acabe o hasta que se terminen los fotogramas que hayas insertado en la escena.

NOTA: Para que el panel Propiedades muestre las propiedades del sonido es necesario seleccionar algún fotograma en la línea de tiempo que contenga dicho sonido.

22

Page 23: Continuación del curso de Flassh

Hemos incorporado el sonido en la línea de tiempo de un símbolo Clip de película.

Recuerda que los símbolos Clip de película tienen su propia línea de tiempo de varios fotogramas, independiente de la línea de tiempo principal. Pueden contener otros símbolos clip de película, botones, gráficos, audio, etc., consiguiendo de esta manera objetos de mayor complejidad e interacción superior.

El símbolo Clip de película, al que hemos llamado “audioViola”, además de contener el sonido, hemos añadido otros elementos para controlar la reproducción del audio, como son:

on (release) {play();

}

Interpolación de movimiento

• Una acción stop: Hemos creado una capa a la que hemos llamado “AS”(ActionScript) y hemos añadido en el primer fotograma la acción stop para que la película no avance.

• Botón play: Hemos creado una capa a la que hemos llamado “Botón play” y hemos añadido un símbolo Botón, con la acción play, para que el usuario ponga en marcha la reproducción del sonido.

• Gráfico animado: Hemos creado una carpeta a la que hemos llamado “Animación desarrollo” que contiene dos capas, en una hemos creado una sencilla animación, con la técnica Interpolación de movimiento, para indicar por dónde va la reproducción del sonido (capa “señal”), en la otra hemos dibujado una línea (capa “línea”).

23

Page 24: Continuación del curso de Flassh

stop();

La interpolación de movimiento abarca el mismo número de fotogramas que el sonido (en este caso la animación se extiende hasta el fotograma 1038).

Si te fijas en la imagen del panel Línea de tiempo del Clip de película “audioViola”, el sonido(capa “Sonido”) empieza en el fotograma 2 de la línea de tiempo del Clip de película (elprimer fotograma es un fotograma clave en blanco). De esta forma no se reproduce hasta que el usuario haga clic sobre el Botón play y ponga en marcha la reproducción.

El fotograma 1 de la capa Sonido es un Fotograma clave en blanco.

La dinámica de funcionamiento es la siguiente:

El Clip de película se queda parado en el primer fotograma, no avanza al tener un stop. El usuario ve el botón de play (capa “Botón play”) y el gráfico que nos indicará el desarrollo del sonido (carpeta “Animación desarrollo”), que está parado en el principio (la animación va de izquierda a derecha).

Cuando el usuario pulse sobre el botón play, Flash se pondrá en marcha y recorrerá todos los fotogramas de la línea de tiempo del Clip de película, reproduciéndose así el sonido. El sonido se extiende hasta el fotograma 1038. Hemos dado el mismo número de fotogramas a la animación del gráfico para que coincidan. Al llegar al último fotograma Flash volverá a empezar la reproducción por el fotograma 1, pero al tener un stop se detendrá en este fotograma, donde el usuario deberá volver a pulsar sobre el botón play para escuchar de nuevo el sonido. 24

Page 25: Continuación del curso de Flassh

3. Ejemplo III | 5. Enlace Web con texto

En el ejemplo práctico “Familia clásica de instrumentos de cuerda frotada”, en el apartado del Contrabajo, hemos incorporado un texto enlazado a Youtube, donde el usuario podráver (partitura) y escuchar el 1er movimiento del concierto para Contrabajo de G. Bottesini(1821–1889) interpretado por Ludwig Streicher (1920–2003).

Sin necesidad de crear ningún símbolo Botón ni de escribir nada de código ActionScript, tenemos la posibilidad de acceder a una página Web mediante la herramienta de texto.

Giovanni Bottesini - Double Bass concerto No. 2 in B menor1st mov. (Allegro)Double Bass: Ludwig Streicher

> ver enlace

1. Escribe el texto. Puedes darle color para resaltarlo.

http://www.youtube.com

3. Si despliegas la casilla “Destino” yseleccionas la opción “_blank”, la Web se abrirá en una nueva ventana.

• Convertir el texto en un enlace Web

2. Selecciónalo y en el panel Propiedades > OPCIONES > “Vínculo”, escribe la dirección URL.

> ver enlace

Vínculo de URL

4. Pulsa Control-Intro para probar la película. En el momento que colocamos el cursor sobre el texto, Flash transforma el puntero y lo convierte en una mano.

25

Page 26: Continuación del curso de Flassh

Aplicaciones educativas de Adobe Flash / RESUMEN

Podemos utilizar diferentes maneras de navegación: ampliando información sobre un elemento, saltando a diferentes espacios, una navegación lineal, etc.

Utilizando las etiquetas o fotogramas de un símbolo Botón (Reposo, Sobre, Presionado, Zona activa) podemos crear diferentes tipos de botones: rollover, botón invisible, etc.

Utilizando el componente UIScrolBar, del panel “Componentes” (Menú principal: Ventanas > Componentes), podemos crear un cuadro de texto con desplazamiento.

Podemos importar un vídeo en Flash. Para ello selecciona la opción Archivo >Importar > Importar vídeo.

Si insertamos un vídeo como elemento externo, el vídeo no se insertará dentro del proyecto sino que permanecerá fuera de él. Por lo que si publicamos nuestro proyecto debemos enviar también, junto al proyecto final, el SWF del componente (se genera automáticamente al probar la película) y el propio vídeo.

1.

3.

2.

4.

Flash puede insertar y manipular efectos sonoros.

Para insertar un archivo de sonido en Flash selecciona la opción Archivo > Importar > Importar a biblioteca, y escoge el sonido que vayas a insertar.

Después de insertar el sonido en la Biblioteca de símbolos, arrastra el archivo desde la Biblioteca hasta la Escena. En los fotogramas de la línea de tiempo aparecerá una representación del sonido que se extenderá hasta que éste acabe o hasta que se terminen los fotogramas que hayas insertado en la escena.

Desde la opción Vínculo de URL del panel Propiedades podemos convertir un texto en un enlace Web.

5.

6.

26

Page 27: Continuación del curso de Flassh

27

Page 28: Continuación del curso de Flassh