Edición 2005

Manual del curso

DISEÑO FLASH DE

RECURSOS MULTIMEDIA

PARA LA ENSEÑANZA

MATERIALES PARA LA FORMACIÓN

A DISTANCIA DEL PROFESORADO

Autor: Fernando Posada Prieto

MATERIALES PARA LA FORMACIÓN A DISTANCIA DEL PROFESORADO

Diseño Flash de recursos

multimedia para la enseñanza

© 2005. CNICE. Centro Nacional de Información y Comunicación Educativa Dirección General de Educación, Formación Profesional e Innovación Educativa Secretaría General de Educación

Ministerio de Educación y Ciencia

www.cnice.mec.es

CONTENIDOS

Contenidos

CAPÍTULO 1. ACERCÁNDOSE A FLASH

1.1 ¿Por qué Flash?.................................................................................................... 6

1.2 Requisitos del sistema .......................................................................................... 7

1.3 El CDROM del curso.............................................................................................. 7

1.4 Instalar Flash MX.................................................................................................. 8

1.5 Instalar materiales del curso ................................................................................. 8

1.6 Cómo abrir Flash .................................................................................................. 9

1.7 El entorno de diseño............................................................................................. 9

1.8 Guardar una película ........................................................................................... 11

1.9 Abrir un archivo de película existente ................................................................. 12

1.10 Salir de Flash ...................................................................................................... 12

1.11 Los ejercicios del curso ....................................................................................... 12

CAPÍTULO 2. DIBUJAR Y PINTAR

2.1 Cuadro de Herramientas ..................................................................................... 13

2.2 Dibujar formas geométricas ................................................................................ 14

2.3 Utilización del lápiz en Flash ................................................................................ 17

2.4 Herramienta Pincel ............................................................................................. 19

2.5 Herramienta Cubo de pintura ............................................................................... 20

2.6 Herramienta Bote de Tinta .................................................................................. 27

2.7 Herramienta Pluma............................................................................................. 28

2.8 Herramienta Borrador ......................................................................................... 32

2.9 Modificar la forma de líneas y siluetas.................................................................. 33

CAPÍTULO 3. SOBRE EL ESCENARIO

3.1 Seleccionar objetos con la Flecha ........................................................................ 34

3.2 Seleccionar objetos con el Lazo ........................................................................... 36

3.3 Mover objetos sobre el escenario......................................................................... 37

3.4 Eliminación de objetos ........................................................................................ 38

3.5 Escala de objetos ............................................................................................... 39

3.6 Transformación libre de objetos .......................................................................... 40

3.7 Rotar y sesgar un objeto..................................................................................... 41

3.8 Distorsión de formas........................................................................................... 43

3.9 Reflejo de objetos .............................................................................................. 45

3.10 Agrupación de formas......................................................................................... 45

3.11 Agrupación de objetos ........................................................................................ 47

3.12 Apilamiento de objetos ....................................................................................... 48

3.13 Alineación de objetos en el escenario................................................................... 48

3.14 Visualización del escenario .................................................................................. 50

CAPÍTULO 4. SÍMBOLOS

4.1 ¿Qué es un símbolo?........................................................................................... 52

4.2 Tipos de comportamiento de los símbolos ............................................................ 52

4.3 Usando símbolos ................................................................................................ 53

4.4 Crear un símbolo nuevo con elementos seleccionados .......................................... 53

4.5 Crear un símbolo vacío nuevo. ............................................................................ 55

4.6 Crear y modificar instancias. ............................................................................... 57

4.7 Edición de símbolos ............................................................................................ 59

4.8 Separar la instancia de un símbolo ...................................................................... 60

4.9 Asignar un símbolo distinto a una instancia .......................................................... 61

Diseño Flash de recursos web y multimedia para la enseñanza 3

CONTENIDOS

CAPÍTULO 5. LA BIBLIOTECA

5.1 Modos de visualización de la Biblioteca ................................................................ 62

5.2 Abrir la biblioteca de otro archivo Flash................................................................ 64

5.3 Organización de la Biblioteca............................................................................... 65

5.4 Trabajar con Bibliotecas comunes........................................................................ 67

CAPÍTULO 6. IMPORTAR RECURSOS

6.1 Introducción....................................................................................................... 69

6.2 Importar una imagen desde Flash ....................................................................... 69

6.3 Pegar un mapa de bits desde otra aplicación........................................................ 70

6.4 Importar archivos gráficos .................................................................................. 71

6.5 Configuración de propiedades de mapas de bits ................................................... 71

6.6 Conversión de mapas de bits a imágenes vectoriales ............................................ 73

6.7 Formatos de archivos de importación de video ..................................................... 74

6.8 Importar clips de video como archivos incorporados ............................................. 75

6.9 Edición de clips de video importados.................................................................... 81

6.10 Importar clips de video QuickTime como archivos vinculados ................................ 83

CAPÍTULO 7. CAPAS

7.1 ¿Qué son las capas? ........................................................................................... 84

7.2 Creando capas: El acuario virtual......................................................................... 84

7.3 Operaciones básicas con capas............................................................................ 85

7.4 Uso de capas: La escudería multicolor ................................................................. 89

7.5 Organización de las capas en carpetas................................................................. 90

CAPÍTULO 8. TEXTO

8.1 Uso de textos en Flash........................................................................................ 93

8.2 Creación de texto ............................................................................................... 93

8.3 Configurar las propiedades del cuadro de texto .................................................... 94

8.4 Configurar las propiedades del párrafo de texto.................................................... 96

8.5 Uso de fuentes de dispositivo .............................................................................. 97

8.6 Separación de texto............................................................................................ 97

8.7 Vinculación de bloques de texto a direcciones URL ............................................... 98

8.8 Efecto sombra en un cuadro de texto .................................................................. 98

CAPÍTULO 9. BOTONES

9.1 ¿ Qué es un botón ? ......................................................................................... 100

9.2 Usar un botón de una Biblioteca común ............................................................. 100

9.3 Crear un botón................................................................................................. 101

9.4 Asociar una acción a un botón........................................................................... 104

CAPÍTULO 10. SONIDOS

10.1 Uso del sonido en Flash .................................................................................... 109

10.2 Importación de sonidos..................................................................................... 109

10.3 Añadir un sonido a una película......................................................................... 110

10.4 Detener o iniciar sonidos en fotogramas clave.................................................... 112

10.5 Añadir sonido a un botón .................................................................................. 113

10.6 Controles de edición de sonidos ........................................................................ 114

Diseño Flash de recursos web y multimedia para la enseñanza 4

CONTENIDOS

CAPÍTULO 11. ANIMACIONES

11.1 La animación con Flash..................................................................................... 117

11.2 La línea de tiempo............................................................................................ 117

11.3 Interpolación de movimiento I: El vuelo de un águila.......................................... 118

11.4 Interpolación de movimiento II: La rueda que gira ............................................. 121

11.5 Interpolación de cambio de color: El fantasma ................................................... 123

11.6 Animaciones fotograma a fotograma ................................................................. 124

11.7 Interpolación de movimiento utilizando capa guía............................................... 125

11.8 Papel cebolla.................................................................................................... 129

11.9 Interpolación de cambio de forma I: Del círculo al cuadrado ............................... 131

11.10 Interpolación de cambio de forma II: Del uno al dos .......................................... 132

11.11 Capas máscara................................................................................................. 133

11.12 Clips de película ............................................................................................... 135

CAPÍTULO 12. ESCENAS

12.1 Uso de escenas ................................................................................................ 137

12.2 Una animación por escenas............................................................................... 137

12.3 Trabajar con fotogramas en la línea de tiempo................................................... 144

CAPÍTULO 13. SWISH

13.1 Ejemplo práctico de diseño con Swish................................................................ 146

CAPÍTULO 14. PUBLICACIÓN

14.1 Configuración de las propiedades del documento ............................................... 148

14.2 Publicación de un documento Flash ................................................................... 149

14.3 Configuración de la publicación ......................................................................... 150

14.4 Descargar una animación Flash de la web.......................................................... 155

14.5 Edición HTML para visualizar SWF ..................................................................... 156

CAPÍTULO 15. DISEÑO MULTIMEDIA

15.1 Generar un proyector .EXE................................................................................ 160

15.2 La acción getURL.............................................................................................. 161

15.3 La acción fscommand ....................................................................................... 163

15.4 Rutas de archivos con fscommand y getURL ...................................................... 166

15.5 Crear un CD con autoarranque .......................................................................... 168

15.6 Crear un proyector EXE a partir de un SWF ........................................................ 169

CAPÍTULO 16. EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

16.1 Diseño de una agenda de enlaces: “Portales educativos” .................................... 171

16.2 Diseño de una aplicación multimedia: “Oriente Próximo”..................................... 173

16.3 Diseño de una presentación multimedia : “Fauna asturiana” ............................... 178

GLOSARIO ............................................................................................................. 184

ÍNDICE ALFABÉTICO........................................................................................ 190

Diseño Flash de recursos web y multimedia para la enseñanza 5

CAPÍTULO 1: ACERCÁNDOSE A FLASH

Capítulo

1

Acercándose a Flash

1.1 ¿Por qué Flash?

lash se ha convertido en un clásico para el diseño de páginas web y de presentaciones multimedia interactivas. Las características más destacadas de esta herramienta son:

F Velocidad y economía de tamaño

Flash utiliza gráficos vectoriales como medio de representación gráfica por defecto.

Estos gráficos son independientes de la resolución del dispositivo que los muestra. Por ello pueden aumentar de tamaño sin perder calidad y sin incrementar el tamaño del archivo que los contiene. Esta eficiente forma de manejar las imágenes genera archivos relativamente pequeños en relación con la complejidad y calidad de los mismos. La reducción de tamaño se traduce en un incremento de la velocidad de descarga en Internet.

Los símbolos que Flash utiliza en una película: gráficos, botones, sonidos, etc se organizan en una Biblioteca de tal forma que almacena sólo una vez la información relativa a cada elemento. Cuando un objeto se utiliza varias veces, las instancias del mismo no ocupan espacio ya que son simples referencias al símbolo.

Flash permite el “streaming”, una técnica en virtud de la cual el usuario puede comenzar a ver la animación aunque no haya sido descargada por completo. Con una adecuada planificación del proyecto, el usuario puede llegar a ver presentaciones web de 10-15 minutos sin percibir que el contenido se está descargando en su ordenador sobre la marcha.

Además cuando una animación Flash se descarga, queda almacenada en la caché del navegador, de tal forma que no es necesario repetir la operación de descarga en posteriores accesos a esa dirección web.

Compatibilidad

Para asegurar la máxima compatibilidad de la presentación Flash, Macromedia ha optado por ofrecer Reproductor Flash. Es un plug-in (pequeña aplicación que se instala en el navegador) para visualizar los desarrol os hechos con Flash exactamente igual en cualquier navegador, sistema operativo, dispositivo e incluso consolas de videojuegos.

Diseño Flash de recursos web y multimedia para la enseñanza 6

CAPÍTULO 1: ACERCÁNDOSE A FLASH

La expansión de la tecnología Flash ha sido excepcional en los últimos años. Las versiones actuales de los navegadores ya incluyen directamente su plug-in. Cada vez existen más páginas web diseñadas con esta herramienta. Este éxito ha provocado que desarrolladores y fabricantes de software hayan creado productos capaces de exportar e importar información en formato SWF.

Asimismo se diseñan con Flash las presentaciones con autoarranque que bajo la forma de menús interactivos se incluyen en los CDs para la instalación de drivers y programas de utilidades de las principales empresas de software y hardware.

Interactividad

Flash permite dotar a las presentaciones de interactividad con el usuario: recoger información a través del teclado, imprimir información, llevar al usuario a distintos momentos de la presentación, a otros sitios web, etc. mediante la reacción a los eventos provocados con el ratón y teclado. Las respuestas más complejas se consiguen gracias a un lenguaje de script específico de Flash. Se denomina ActionScript y supera al clásico Javascript permitiendo un control de numerosas características de navegación.

1.2 Requisitos del sistema

Hay una versión de Flash MX 2004 para la plataforma Windows y otra para Macintosh. Las necesidades de software y hardware para Windows son:

• Windows 98 SE, 2000 ó XP.

• Procesador Intel Pentium III 600 Mhz.

• 128 Mb de RAM (se recomiendan 256 Mb).

• 190 Mb de espacio disponible en disco duro.

• Resolución en pantalla: 800x600 (se recomiendan 1024x768).

1.3 El CDROM del curso

Para acceder a los contenidos del Curso proporcionados en el CD: 1.

Introduce el CD del curso en la unidad del equipo.

2.

Si no se muestra la portada principal por sí sola al cabo de unos segundos, abre el Explorador de Windows

3.

Navega hasta situarte en la unidad de CD/DVD de Mi PC haciendo clic sobre esta unidad.

4.

Doble clic sobre el icono del documento HTML index para visualizar la portada principal desde el navegador.

Diseño Flash de recursos web y multimedia para la enseñanza 7

CAPÍTULO 1: ACERCÁNDOSE A FLASH

Figura 1.1 Portada principal del Curso

1.4 Instalar Flash MX 2004

1.

Sitúate en la portada principal del Curso siguiendo las instrucciones del apartado anterior.

2.

Haz clic sobre el botón Recursos.

3.

En el marco izquierdo abre la carpeta Shareware y selecciona la entrada Flash MX 2004. Pulsa el botón Iniciar Instalación.

4.

Sigue las instrucciones de la pantalla.

5.

Si te lo indica, reinicia el equipo.

Figura 1.2 Sección “Recursos” desde donde se puede instalar Flash MX 2004

Nota: La aplicación instalable desde este CD es una versión de prueba por un periodo de 30 días. Para evitar que tu trabajo se limite a este plazo es necesario conseguir e introducir el correspondiente número de licencia educativa, estándar o profesional.

1.5 Instalar materiales del Curso

Después de concluir con éxito la instalación de Flash, es imprescindible, para seguir el contenido del curso, instalar los siguientes elementos: 1.

Carpeta de recursos: Curso Flash. Contiene archivos con imágenes, sonidos, videos, documentos, animaciones, etc. Se usarán en el diseño de las prácticas que se sugieren durante el desarrollo del Curso. Ésta se instalará por defecto en la ruta C:\Curso Flash de tu disco duro.

Diseño Flash de recursos web y multimedia para la enseñanza 8

CAPÍTULO 1: ACERCÁNDOSE A FLASH

2.

Biblioteca común: Curso. Es una biblioteca de símbolos que serán reutilizados desde el entorno de diseño Flash en las distintas prácticas planteadas. Se guardará por defecto en la carpeta C:\Archivos de programa\Macromedia\Flash MX 2004\es\First Run\Libraries.

3.

Winzip. Es el programa que necesitas en tu ordenador para visualizar, extraer y comprimir ficheros en archivos ZIP. Si todavía no dispones de él, puedes instalarlo desde aquí. Incluye parche de traducción al castellano.

4.

Adobe Acrobat Reader. Esta aplicación te permitirá leer, navegar e imprimir documentación en formato PDF.

5.

Swish. En el capítulo “13. Swish” se ilustran las instrucciones básicas para crear animación de texto usando este programa. La aplicación instalable desde este CD es una versión de prueba para 15 días. Se recomienda no realizar su instalación hasta el comienzo del capítulo 13

del curso. Otra opción es conseguir la correspondiente licencia para evitar que tu trabajo se limite al plazo de prueba.

El resto de programas que se ofrecen en la sección Recursos > Shareware del CD

no son necesarios para el seguimiento del curso. Sin embargo constituyen una recopilación interesante para completar y ampliar las posibilidades de diseño web y multimedia.

En la sección Recursos > Documentación del CD se recogen tutoriales sobre el uso de estos programas.

1.6 Cómo abrir Flash

Se puede utilizar uno de los siguientes procedimientos:

• Doble clic sobre el icono de acceso directo de Macromedia Flash MX

situado en el escritorio.

• Clic en Inicio > Todos los Programas > Macromedia > Macromedia Flash MX 2004.

Al cabo de unos segundos se muestra la pantalla principal con el entorno de diseño.

1.7 El entorno de diseño

Al entrar en la pantalla principal de Flash MX 2004 nos encontramos:

• Herramientas: Es la caja de herramientas para la creación y edición de gráficos.

• Ver: Se usa para ajustar la visualización del escenario.

• Colores: Haciendo clic en los cuadros de color se puede seleccionar el color del relleno o el trazo de un gráfico.

• Opciones: En esta parte aparecen los modificadores u opciones accesorias de una herramienta cuando se selecciona en la caja.

• Escenario: Es el espacio de trabajo o lienzo donde se van a dibujar o importar imágenes para mostrar al usuario. Muestra el contenido del fotograma actualmente seleccionado por la cabeza lectora en la línea de Diseño Flash de recursos web y multimedia para la enseñanza 9

CAPÍTULO 1: ACERCÁNDOSE A FLASH

tiempo. Será visible durante la edición de una película Archivo > Nuevo.

• Línea de Tiempo: Organiza y controla el contenido de una película en el tiempo. Al igual que en un largometraje, Flash divide el tiempo en fotogramas. La sucesión de fotogramas sobre el escenario en el orden y velocidad definidos en la línea de tiempo produce la animación deseada.

• Paneles: Los paneles de Flash permiten definir propiedades de objetos en el escenario, de todo el documento, establecer acciones, etc. Si están ocultos se muestran en su configuración por defecto mediante Ventana

> Conjunto de paneles > Diseño predeterminado.

• Capas: Se usan para organizar el contenido de la línea de tiempo. Por ejemplo una capa de fondo puede contener una ilustración ambiente y otra encima mostrar la animación de otro objeto.

• Biblioteca: Almacena los símbolos de una forma organizada. Los símbolos son elementos reutilizables dentro de la película. Pueden ser gráficos, botones o clips de película.

Figura 1.3 Localización de los principales elementos del entorno de diseño Diseño Flash de recursos web y multimedia para la enseñanza 10

CAPÍTULO 1: ACERCÁNDOSE A FLASH

Manejo de los paneles

Cada panel puede mostrarse encajado en el conjunto de paneles que aparece en la parte derecha o inferior de la pantalla o bien como ventanas flotantes independientes.

1.

Aproxima el puntero del ratón a la esquina izquierda de la barra de título del panel hasta que el puntero del ratón tome el aspecto de una cruz de dobles flechas.

2.

Manteniendo pulsado el botón del ratón, arrastra dentro o fuera del conjunto de paneles.

Figura 1.4a Procedimiento para mover un panel

No te desanimes al principio ante la visión de tantos elementos sobre la pantal a.

Para comenzar puedes ocultar los paneles que no vas a utilizar al principio: Mezclador de colores, Componentes, Inspector de componentes, Acciones y Ayuda. El procedimiento para cerrar cada panel es similar:

1.

Clic en la esquina superior derecha del panel

2.

Selecciona la opción Cerrar panel.

Figura 1.4b Acceso al Menú de Opciones de un panel.

1.8 Guardar una película

1.

Archivo > Guardar como

2.

En la casilla Guardar en selecciona la carpeta destino donde guardar la película Flash. Por ejemplo el directorio Mis Documentos .

3.

En la casilla Nombre teclea práctica como nombre del archivo creado.

Advierte que se guarda en un archivo de tipo *.FLA

4.

En la lista Tipo se pueden elegir dos opciones:

• Documento de Flash MX 2004 (*.fla). Opción por defeco. Este archivo *.FLA no se podrá abrir con la versión anterior: Flash MX.

• Documento de Flash MX (*.fla). El formato *.FLA resultante es editable con Flash MX.

Diseño Flash de recursos web y multimedia para la enseñanza 11

CAPÍTULO 1: ACERCÁNDOSE A FLASH

5.

Archivo > Cerrar

1.9 Abrir un archivo de película existente

1.

Archivo > Abrir

2.

En la casilla Buscar en seleccionar la carpeta origen donde buscar el archivo *.fla que contiene la película. Por ejemplo, Mis Documentos .

3.

Clic sobre el archivo elegido y luego clic en el botón Abrir .

1.10 Salir de Flash

Como en otras aplicaciones Windows, existen dos procedimientos alternativos para abandonar el programa:

• Archivo > Salir

• Clic en el botón Cerrar (“X”) en la esquina superior derecha de la ventana principal.

1.11 Los ejercicios del Curso

Los contenidos del curso se organizan en capítulos y éstos a su vez en apartados. Se recomienda que el ejercicio planteado en cada apartado se realice en un nuevo documento Flash. Puedes ir guardando cada uno de ellos en tu carpeta favorita. Al pasar de un apartado a otro, deberás cerrar el existente utilizado Archivo > Cerrar e iniciar un documento nuevo.

1.

Archivo > Nuevo.

2.

En el cuadro de diálogo Nuevo documento, haz clic sobre el modelo Documento de Flash en la solapa General.

3.

Pulsa en el botón Aceptar.

Otra posibilidad es situarse en la página de inicio de Flash MX 2004 y pulsar en la entrada Documento de Flash en el área Crear Nuevo. Esta página de inicio se muestra en el centro de la pantalla siempre que se inicia Flash y en caso de que ningún documento se encuentre abierto.

Diseño Flash de recursos web y multimedia para la enseñanza 12

CAPÍTULO 2: DIBUJAR Y PINTAR

Capítulo

2

Dibujar y pintar

2.1 El cuadro de herramientas

e pueden diseñar ilustraciones para las películas Flash utilizando las herramientas de dibujar y pintar. En este capítulo se explican sus técnicas básicas de uso.

S

Figura 2.1 Herramientas de edición disponibles en Flash Diseño Flash de recursos web y multimedia para la enseñanza 13

CAPÍTULO 2: DIBUJAR Y PINTAR

2.2 Dibujar formas geométricas

Figura 2.2 Herramientas Línea, Óvalo y Rectángulo

Las herramientas Línea, Rectángulo y Óvalo funcionan de una forma similar a otros programas de diseño gráfico.

1.

Clic en la herramienta Óvalo del cuadro de herramientas para seleccionar ésta. Al colocar el puntero del ratón sobre ella aparece el mensaje " Herramienta Óvalo (O)".

Figura 2.3 Herramienta Óvalo

2.

Usa los controles Color de Trazo y Color de Relleno en la caja de herramientas para definir el color de trazo como negro y el color de relleno como azul marino. Sitúa el puntero sobre cada cuadro de color, pincha y se despliega la paleta de colores. Haz clic sobre un color para seleccionarlo.

Figura 2.4 Controles de color en el Cuadro de herramientas 3.

Al pinchar, arrastrar y soltar sobre el escenario se dibujará un óvalo con estas características de color de trazo y rel eno.

Figura 2.5 Óvalo dibujado sobre el escenario

También se puede utilizar el Inspector de propiedades cuando la herramienta Óvalo esté seleccionada para elegir los colores de trazo y de relleno: 1.

Asegúrate de que la herramienta Óvalo está activada en la caja de herramientas.

Diseño Flash de recursos web y multimedia para la enseñanza 14

CAPÍTULO 2: DIBUJAR Y PINTAR

2.

Si no se visualiza el Inspector de propiedades , selecciona Ventana

> Propiedades para activarlo.

Figura 2.6 Inspector de propiedades de la herramienta Óvalo 3.

Clic en el control Color de trazo y cambia el color del borde. Por ejemplo: rojo.

4.

En el control Color de relleno define el color verde.

5.

Sitúa el puntero en el control Altura del trazo y cambia el grosor de la línea. Pincha y arrastra el deslizador adjunto. También admite hacer clic sobre la casilla y teclear directamente la cantidad. Introduce, por ejemplo, el valor 4 y pulsa <enter> para confirmar.

6.

Despliega el control Estilo del trazo y cambia el estilo de la línea.

Selecciona el trazo de rayas discontinuas

7.

Pincha, arrastra y suelta sobre el escenario para dibujar otro óvalo.

8.

Para que el óvalo sea un círculo perfecto, pulsa la tecla <Mayus> y sin soltar, pincha y arrastra con el ratón para dibujar un tercer óvalo.

Para dibujar un rectángulo sobre el escenario:

1.

Clic en la herramienta Rectángulo del cuadro de herramientas para seleccionar ésta. Al colocar el puntero del ratón sobre ella aparece el mensaje " Herramienta Rectángulo (R)".

Figura 2.7 Herramienta Rectángulo

2.

Usa los controles Color de Trazo y Color de Relleno en la caja de herramientas para definir el color de trazo como amarillo y el color de relleno como azul marino. Sitúa el puntero sobre cada cuadro de color, pincha y se despliega la paleta de colores. Haz clic sobre un color para seleccionarlo.

3.

Al pinchar, arrastrar y soltar sobre el escenario se dibujará un rectángulo con estas características de color de trazo y relleno.

4.

Cuando se selecciona una herramienta de la paleta en la sección Opciones aparecen sus modificadores asociados.

5.

Asegúrate que la herramienta Rectángulo está activada en el cuadro de herramientas.

6.

Advierte que en la sección Opciones, en la parte inferior del cuadro de herramientas, se muestra el modificador Radio de rectángulo redondeado.

Diseño Flash de recursos web y multimedia para la enseñanza 15

CAPÍTULO 2: DIBUJAR Y PINTAR

Figura 2.8 Configuración del radio de esquina de la herramienta Rectángulo 7.

Al hacer clic sobre este modificador, se despliega la ventana Configuración de rectángulo. Permite especificar si se desean esquinas redondeadas indicando el valor en puntos del radio de esquina.

Si el valor es cero (Radio de esquina), las esquinas son rectas. Teclea, por ejemplo, 20 puntos.

8.

Clic en el botón Aceptar.

9.

Al pinchar, arrastrar y soltar sobre el escenario se dibujará un rectángulo con las características de color de trazo y relleno definidos y con los bordes más o menos redondeados en función del valor introducido en Radio de esquina.

10.

Para que el rectángulo sea un cuadrado perfecto, pulsa la tecla

<Mayus> y sin soltar, pincha y arrastra con el ratón para dibujar esta figura.

11.

Prueba y dibuja distintos rectángulos y cuadrados variando el color , grosor y estilo de trazo, relleno y ángulo de redondeo de las esquinas.

Para dibujar un polígono sobre el escenario:

1.

Clic sobre la herramienta Rectángulo del cuadro de herramientas y mantenlo pulsado hasta que se muestre la opción Herramienta PolyStar (Polígono-Estrella). A continuación mueve el puntero sobre la opción Herramienta PolyStar y haz clic sobre ella.

Figura 2.9 Herramienta Polystar

2.

Usa los controles Color de Trazo y Color de Relleno en la caja de herramientas para definir el color de trazo como negro y el color de relleno como naranja. Sitúa el puntero sobre cada cuadro de color, pincha y se despliega la paleta de colores. Haz clic sobre un color para seleccionarlo.

3.

Pulsa sobre el botón Opciones... del Inspector de propiedades Diseño Flash de recursos web y multimedia para la enseñanza 16

CAPÍTULO 2: DIBUJAR Y PINTAR

Figura 2.10 Botón Opciones para configurar el polígono o estrella 4.

Se mostrará el cuadro de diálogo Configuración de herramientas. En él podrás definir:

• Estilo: selecciona Polígono o Estrella.

• Número de lados: introduce un valor que oscile entre 3 y 32.

• Tamaño de puntos de estrella: puedes teclear un valor entre 0.00 y 1.00. Por ejemplo: 0.56. Cuanto más próximo a cero sea este valor, las picas de la estrella serán más profundas o afiladas. Estos parámetros no tienen incidencia si dibujas un polígono.

Figura 2.11 Cuadro para definir las propiedades del polígono o estrella 5.

Clic sobre en el botón Aceptar.

6.

Pulsa, arrastra y suelta sobre el escenario para crear la figura geométrica con las características definidas.

2. 3 Utilización del Lápiz en Flash

2.3.1 Opciones del Lápiz

La herramienta Lápiz tiene un comportamiento muy especial en Flash. Se puede usar para dibujar líneas, siluetas y formas a mano alzada.

1.

Clic en la herramienta Lápiz.

Figura 2.12 Herramienta Lápiz

Diseño Flash de recursos web y multimedia para la enseñanza 17

CAPÍTULO 2: DIBUJAR Y PINTAR

2.

Selecciona el modificador Enderezar en la sección Opciones. En el escenario trata de dibujar una línea poligonal quebrada. Observa que Flash endereza las líneas dibujadas a mano alzada.

3.

Con esta opción flash convierte triángulos, óvalos, círculos, rectángulos y cuadrados realizados a mano alzada en formas más o menos regulares.

Prueba a dibujar estas formas a mano alzada para comprobar cómo Flash corrige para regularizarlas.

4.

Selecciona el modificador Suavizar. En el escenario trata de dibujar una línea curva. Flash suaviza los picos dibujados.

5.

Selecciona el modificador Tinta para dibujar líneas a mano alzada sin que Flash aplique ninguna modificación.

Figura 2.13 Opciones de la herramienta Lápiz

6.

Para dibujar con la herramienta Lápiz una línea perfectamente horizontal o vertical, debes mantener pulsada la tecla <Mayús> mientras pinchas y arrastras sobre el escenario.

2.3.2 Propiedades del Lápiz

Cuando seleccionas la herramienta Lápiz, el Inspector de propiedades muestra su configuración. Puedes seleccionar el color, el grosor y el estilo de las líneas que utiliza el Lápiz.

1.

Asegúrate de que la herramienta Lápiz está activada en la caja de herramientas.

2.

Si no se visualiza el Inspector de propiedades , selecciona Ventana > Propiedades.

Figura 2.14 Inspector de propiedades de la herramienta Lápiz 3.

Utiliza el control Color de trazo para seleccionar otro color para la línea del lápiz.

4.

Utiliza el control Altura del trazo para cambiar el grosor de la línea.

Pincha y arrastra el deslizador para definir un valor de 3.

Diseño Flash de recursos web y multimedia para la enseñanza 18

CAPÍTULO 2: DIBUJAR Y PINTAR

5.

Despliega la lista Estilo del trazo para cambiar el estilo de línea por una línea de puntos.

6.

Trata de dibujar distintas líneas en el escenario definiendo previamente sus propiedades en el panel inspector o bien en los modificadores de la caja de herramientas.

7.

Para definir opciones personalizadas en el estilo de trazo, haz clic en el botón Personalizado.

2.4 Herramienta Pincel

Con la herramienta Pincel (B) puedes crear trazos similares a los de un pincel.

1.

Clic en Ventana > Otros paneles > Biblioteca comunes > Curso .

Doble clic sobre la carpeta Gráficos para abrirla. Pincha y arrastra el símbolo bombilla desde esta Biblioteca hasta el centro del escenario.

2.

Selecciona Modificar > Separar para romper el nexo entre el símbolo en la biblioteca y su instancia en el escenario. Gracias a esta operación de separación se consigue un gráfico sobre el lienzo como si hubiera terminado de dibujarse con las herramientas de Flash. Esta ilustración ya permite aplicar la herramienta Pincel para probar todas sus posibilidades.

Puedes repetir los pasos 1 y 2 para situar diversas imágenes de la bombilla sobre el escenario. Haz clic en cualquier parte del escenario para deseleccionar la figura.

3.

Selecciona la herramienta Pincel

Figura 2.15 Herramienta Pincel

4.

Selecciona el rojo como color de relleno en la sección Colores del Cuadro de Herramientas.

5.

En Opciones haz clic en el modificador del Modo Pincel y selecciona uno:

Figura 2.16 Opciones del modificador Modo Pincel

Diseño Flash de recursos web y multimedia para la enseñanza 19

CAPÍTULO 2: DIBUJAR Y PINTAR

• Pintar normal: pinta sobre las líneas y rellenos de la misma capa.

•

Rellenos de pintura: pinta rellenos y áreas vacías y no afecta a las líneas de contorno de la ilustración.

•

Pintar detrás: pinta las áreas vacías del escenario de la misma capa, sin afectar ni a las líneas ni a los rellenos.

•

Pintar selección: pinta solamente un área previamente seleccionada mediante la herramienta Flecha.

•

Pintar dentro: pinta el relleno donde se inicia el trazo de pincel y nunca pinta sobre las líneas de contorno. La pintura nunca se sale de las líneas.

Si el trazo comienza en un área vacía, el rel eno no afecta a ninguna área.

Figura 2.17 Modos del Pincel: Imagen original, Pintar normal, Detrás, Selección , Rellenos y Dentro.

6.

Selecciona el Tamaño, Forma y Color del pincel con los modificadores de la herramienta Pincel.

Figura 2.18 Opciones de Tamaño y Forma del Pincel

7.

Pincha y arrastra sobre la bombilla. Comprobarás las distintas modalidades de pintura de esta herramienta. El resultado podría ser similar a la figura 2.17.

8.

Al arrastrar manteniendo pulsada la tecla <Mayús> se dibujan trazos verticales u horizontales.

2.5 Herramienta Cubo de Pintura

2.5.1 Rellenar áreas semicerradas

El Cubo de pintura permite rellenar con color áreas cerradas o semicerradas. Se pueden utilizar colores sólidos, rellenos degradados, etc.

1.

Dibuja con la herramienta Lápiz una forma circular casi cerrada en el escenario. Si Flash completa la forma no permitiendo que dejes un hueco, selecciona en Opciones el modificador Suavizar y vuelve a intentarlo.

2.

Selecciona la herramienta Cubo de Pintura

Diseño Flash de recursos web y multimedia para la enseñanza 20

CAPÍTULO 2: DIBUJAR Y PINTAR

Figura 2.19 Herramienta Cubo de Pintura

3.

Selecciona el Color del relleno. Por ejemplo: azul claro.

Figura 2.20 Controles de color para la herramienta Cubo de Pintura 4.

Clic en el modificador Tamaño de hueco y elige una opción:

• No cerrar saltos: sólo rellenará formas completamente cerradas.

• Cerrar huecos pequeños, medianos y huecos grandes: va a permitir rellenar las formas casi cerradas en función del tamaño del hueco que muestren.

Nota: Si el hueco es demasiado grande, puede que tengas que cerrarlo manualmente aún más antes de admitir relleno incluso aunque selecciones Huecos Grandes.

Figura 2.21 Opciones del modificador Tamaño de hueco

5.

Clic sobre la forma o el área encerrada que desees rellenar.

2.5.2 Cambiar relleno y trazo de un objeto existente

Los controles Color de trazo y Color de relleno de la caja de herramientas establecen los atributos de pintura de los objetos que se vayan a crear a continuación con Diseño Flash de recursos web y multimedia para la enseñanza 21

CAPÍTULO 2: DIBUJAR Y PINTAR

herramientas de dibujo como Óvalo, Rectángulo, etc. Para cambiar estos atributos en objetos ya dibujados en el escenario es necesario seleccionarlos previamente para luego proceder a cambiarlos en los respectivos controles.

1.

Dibuja previamente un óvalo en el escenario. Observa que toma el color de trazo y de relleno que en ese momento está seleccionado en los controles respectivos del cuadro de herramientas.

2.

Selecciona la herramienta Flecha y haz doble clic sobre el óvalo para seleccionarlo por completo: rel eno y trazo.

3.

A continuación define en los controles Color de trazo y Color de relleno de la caja de herramientas otros colores distintos de los actuales.

Para aplicar otros colores distintos haz clic en la cabeza de flecha negra apuntando hacia abajo y situada en la esquina inferior derecha del cuadro de color Trazo o Relleno .

Figura 2.22 Controles de color en el Cuadro de Herramientas Se despliega una paleta donde se puede definir un color utilizando uno de los siguientes procedimientos:

• Clic en un color de la paleta. Los degradados que aparecen en la parte inferior sólo se pueden seleccionar para el color de relleno.

• Clic en el botón Selector de color (botón superior derecho) y elegir uno en la nueva paleta que se despliega.

• Clic en la casilla superior para introducir por teclado el valor hexadecimal del color deseado. Por ejemplo #FFCC00. Confirma pulsando al final la tecla <enter>.

Figura 2.23 Paleta de colores

Advierte que al cambiar un color en estos controles se modifica en el objeto seleccionado en el escenario.

Diseño Flash de recursos web y multimedia para la enseñanza 22

CAPÍTULO 2: DIBUJAR Y PINTAR

4.

Debajo de los cuadros de color de trazo y relleno, se encuentran los siguientes botones:

• Clic en el botón Blanco y negro para volver a los colores predeterminados: relleno blanco y trazo negro.

• Clic en el botón Intercambiar colores para intercambiar entre sí los colores definidos para trazo y relleno.

Figura 2.24 Controles de color en el Cuadro de Herramientas A continuación se expone otro procedimiento para modificar el relleno de una forma existente en el escenario:

1.

Dibuja un cuadrado en el escenario utilizando la herramienta Rectángulo

2.

Selecciona la herramienta Cubo de Pintura

3.

Clic en la casilla Color de relleno para definir un color distinto 4.

Clic sobre el relleno del rectángulo situado en el escenario.

2.5.3 Dibujar una forma geométrica sin relleno

1.

Clic sobre la herramienta Rectángulo .

2.

En la sección Colores del cuadro de herramientas, haz clic en el botón Sin color (Ningún relleno) situado debajo del cuadro de Color de Relleno. Advierte que en el control Color de relleno desaparece el color y se sustituye con una línea roja diagonal que cruza la casilla.

3.

Pincha, arrastra y suelta el puntero del ratón sobre el escenario. Se dibujará un rectángulo sin relleno.

Nota: El botón Sin color sólo está disponible cuando se selecciona la herramienta Óvalo o Rectángulo para crear uno nuevo. No es accesible cuando se selecciona una forma ya existente sobre el escenario. Para eliminar el trazo o el relleno basta hacer un solo clic sobre él con la herramienta Flecha previamente seleccionada y luego pulsar la tecla

<Supr>.

Diseño Flash de recursos web y multimedia para la enseñanza 23

CAPÍTULO 2: DIBUJAR Y PINTAR

2.5.4 Rellenar con un degradado estándar

En lugar de rellenar con un color sólido se puede aplicar un degradado: 1.

Dibuja un círculo en el escenario utilizando la herramienta Óvalo.

2.

Clic en la herramienta Cubo de Pintura.

3.

Clic en la casilla Color de Relleno en la sección Colores y selecciona un degradado de los situados en la parte inferior del panel que se despliega: esfera roja, verde, plata, etc.

4.

Clic dentro del círculo del escenario. Se rellenará con el seleccionado.

Observa que el máximo brillo se consigue en el punto de la figura donde se efectúa el clic

Figura 2.25 Diseño de una bola con un degradado estándar 2.5.5 Crear un degradado personalizado

Para personalizar un degradado de relleno se usa el panel Mezclador de colores: 1.

Si el panel Mezclador de Colores no está visible, selecciona Ventana

> Paneles de diseño > Mezclador de colores .

2.

En la lista desplegable Tipo de relleno situado en el centro del mezclador de colores seleccionar el tipo de degradado que se desea:

• Lineal . Crea un degradado que cambia de tonalidad desde el punto inicial al final en línea recta.

• Radial. Cambia de tonalidad desde el punto inicial al final siguiendo un patrón circular.

En la barra de definición del degradado se muestra el mismo y los punteros de degradado situados bajo la barra indican el color usado.

3.

Si el Mezclador de colores no tuviese el aspecto de la figura, será necesario expandirlo haciendo clic en la cabeza de flecha blanca situada en la esquina inferior derecha del mezclador.

4.

Para cambiar un color de degradado, haz clic en uno de los punteros de degradado situado bajo la barra de definición. Cuando está seleccionado tiene el vértice superior de color negro.

5.

A continuación selecciona mediante clic un color en el Espacio de color o bien despliega el control Color usado para seleccionar uno distinto. Se puede arrastrar el control Brillo para ajustar la luminosidad del color.

Diseño Flash de recursos web y multimedia para la enseñanza 24

CAPÍTULO 2: DIBUJAR Y PINTAR

Figura 2.26 Panel Mezclador de Colores

6.

Para agregar nuevos punteros al degradado, acerca el puntero del ratón hasta la barra de definición, haz clic cuando bajo el puntero aparece un símbolo “+”.

7.

Se puede desplazar un puntero de degradado mediante pinchar y arrastrar con el ratón a lo largo de la barra de definición.

8.

Para eliminar un puntero, pincha y arrástralo fuera de la ventana.

9.

De acuerdo con las instrucciones anteriores crea un degradado lineal de 2 colores: amarillo y azul, por ejemplo.

10.

Selecciona la herramienta Rectángulo y crea un rectángulo. Como podrás comprobar adquiere el relleno con el degradado personalizado.

11.

De acuerdo con las instrucciones anteriores crea un degradado radial de 2 colores: amarillo y negro, por ejemplo.

12.

Selecciona la herramienta Óvalo y crea un círculo. Verás que toma el aspecto personalizado de rel eno.

13.

Si deseas guardar un degradado personalizado, clic en el triángulo situado en la esquina superior derecha del panel Mezclador de colores y selecciona Añadir muestra en el menú emergente. Al desplegar el cuadro Color de relleno del cuadro de herramientas, el degradado personalizado se ha añadido en la parte inferior del panel.

2.5.6 Modificar un relleno con degradado

1.

Selecciona la herramienta Óvalo .

2.

Clic en el control de Relleno y selecciona un degradado radial standard de los que aparecen en la parte inferior de esta paleta. Por ejemplo, bola plateada.

Diseño Flash de recursos web y multimedia para la enseñanza 25

CAPÍTULO 2: DIBUJAR Y PINTAR

3.

Pincha, arrastra y suelta sobre el escenario para crear un bola con aspecto tridimensional

4.

Selecciona la herramienta Transformación de relleno situada en el cuadro de herramientas.

Figura 2.27 Herramienta Transformación de relleno

5.

Haz clic en el área rellena con el degradado. Cuando se selecciona un relleno con degradado para editarlo, aparece un punto central y selectores de edición periféricos.

Figura 2.28 Modificadores de degradado

6.

Para modificar el degradado se puede utilizar uno de los siguientes procedimientos:

• Desplazar: Arrastra el selector central para desplazar el gradiente respecto a la figura.

• Anchura/Altura: Arrastra los selectores con forma cuadrada para aumentar o disminuir la altura y anchura del degradado.

• Girar: Arrastra los selectores con forma circular para girar el degradado en relación con la figura.

• Radio: En degradados radiales aparece otro selector circular periférico en medio que permite modificar el radio del degradado.

Figura 2.29 Aspecto del puntero del ratón en cada opción de modificación del degradado Diseño Flash de recursos web y multimedia para la enseñanza 26

CAPÍTULO 2: DIBUJAR Y PINTAR

2.6 Herramienta Bote de Tinta

La herramienta Bote de Tinta se utiliza junto con el Inspector de propiedades para aplicar nuevos estilos, grosores o colores de trazo a una línea: 1.

Dibuja previamente un óvalo en el escenario.

2.

Selecciona la herramienta Bote de Tinta

Figura 2.30 Herramienta Bote de Tinta

3.

Si no se visualiza el Inspector de propiedades, selecciona Ventana > Propiedades.

Figura 2.31 Inspector de propiedades de la herramienta Bote de Tinta 4.

En este panel define un estilo distinto para la línea, por ejemplo, un trazado discontinuo o de puntos, un grosor de 4 píxeles y un color rojo.

Para definir estilos de trazo más personalizados pulsa el botón Personalizado ... Experimenta con las distintas opciones de Tipo. Para concluir clic en el botón Aceptar

Figura 2.32 Cuadro para personalizar el estilo del trazo 5.

Al hacer clic con el extremo del puntero sobre la línea de contorno del óvalo del escenario. Ésta adquiere las propiedades de estilo, grosor y color definidas en el Inspector de propiedades.

6.

El Estilo del Trazo es definible a través del Inspector de Propiedades en las herramientas: Línea, Pluma, Óvalo, Rectángulo y Lápiz.

Diseño Flash de recursos web y multimedia para la enseñanza 27

CAPÍTULO 2: DIBUJAR Y PINTAR

2.7 Herramienta Pluma

Figura 2.33 Herramienta Pluma

Para dibujar trazados precisos como líneas rectas o bien como suaves curvas fluidas, puedes utilizar la herramienta Pluma. Puedes crear segmentos de líneas rectas o curvas, y ajustar el ángulo y la longitud de los segmentos rectos, así como la pendiente de los segmentos curvos.

2.7.1 Preferencias de la herramienta Pluma

1.

Selecciona Edición > Preferencias y haz clic en la ficha Edición.

2.

En Herramienta Pluma, establece las siguientes opciones:

• Selecciona Mostrar previsualización de pluma para disponer de una vista previa de los segmentos de línea conforme vas dibujando. Flash muestra una vista previa del segmento de línea conforme mueves el puntero sobre el Escenario, antes de hacer clic para crear el punto final del segmento. Si no se ha seleccionado esta opción, Flash no mostrará un segmento de línea hasta que se haya creado el punto final del segmento.

• Selecciona Mostrar puntos sólidos para especificar que los puntos de anclaje no seleccionados aparezcan como puntos sólidos y que los puntos de anclaje seleccionados aparezcan como puntos huecos (esta es la opción seleccionada de manera predeterminada). No actives esta opción si deseas mostrar los puntos de anclaje no seleccionados como puntos huecos y los puntos de anclaje seleccionados como puntos sólidos.

• Selecciona Mostrar cursores de precisión para especificar que el puntero de la herramienta Pluma aparezca como una cruz, en lugar del icono predeterminado de la herramienta Pluma, para poder colocar así las líneas con mayor precisión. Si deseas utilizar el icono predeterminado de la herramienta Pluma, no selecciones esta opción.

Figura 2.34 Preferencias de Edición para la herramienta Pluma 3.

Clic en Aceptar.

Diseño Flash de recursos web y multimedia para la enseñanza 28

CAPÍTULO 2: DIBUJAR Y PINTAR

Nota: Presiona la tecla <Bloq Mayús> mientras estás trabajando con la pluma para cambiar el aspecto del cursor.

2.7.2 Dibujar rectas con la Pluma

Figura 2.35 Herramienta Pluma

Para dibujar líneas con la herramienta Pluma, hay que ir creando mediante clic puntos de anclaje sobre el escenario. Los puntos de anclaje son los puntos que determinan la longitud de cada uno de los segmentos que formarán esa línea.

1.

Selecciona la herramienta Pluma.

2.

Define los atributos de trazo y relleno.

3.

Coloca el puntero en el Escenario, en el inicio de la línea recta y haz clic para definir el primer punto de anclaje.

4.

Vuelve a hacer clic para indicar dónde deseas que termine el primer segmento de la línea recta. Haz <Mayús>+clic para limitar la herramienta a los ángulos múltiplos de 45° .

5.

Sigue haciendo clic para crear más segmentos rectos como se indica en la figura.

Figura 2.36 Dibujar rectas con la pluma

6.

Para terminar el trazado como una forma abierta utiliza uno de los siguientes procedimientos:

• Doble clic en el último punto.

• Clic en la herramienta Pluma de la caja de herramientas para deseleccionarla.

Diseño Flash de recursos web y multimedia para la enseñanza 29

CAPÍTULO 2: DIBUJAR Y PINTAR

7.

Para cerrar un trazado, coloca la herramienta Pluma sobre el primer punto de anclaje. Al colocar correctamente la herramienta, aparecerá un pequeño bucle cerca de la punta de la pluma. Haz clic para cerrar el trazado.

8.

Para terminar la forma tal cual, seleccionando Edición > Anular todas las selecciones o bien elige otra herramienta de la caja de herramientas.

2.7.3 Dibujar curvas con la Pluma

1.

Selecciona la herramienta Pluma (P).

2.

Haz clic sobre el escenario para situar el inicio de la curva. Aparecerá el primer punto de anclaje con aspecto de círculo hueco.

3.

Para situar el siguiente punto de anclaje haz clic en otro lugar del escenario, y sin soltar, arrastra en la dirección que necesites para lograr la curvatura adecuada. Según vas arrastrando, el puntero del ratón tira de un selector de tangente (cuadrados rellenos que delimitan el segmento tangente). La longitud y pendiente de este segmento tangente determinarán la forma del segmento curvo.

4.

Cuando el segmento adquiera la curvatura deseada, suelta el botón del ratón. Si lo deseas, puedes arrastrar con la tecla <Mayus> pulsada para limitar la herramienta a los ángulos múltiplos de 45 grados. Más tarde es posible mover el selector de tangente para afinar la forma del segmento curvo.

5.

Repite el paso 3 y 4 para crear un nuevo punto de anclaje y el segmento curvo que lo conecta con el anterior.

Figura 2.37 Selectores y puntos de anclaje

2.7.4 Ajustar los puntos de anclaje en los trazados

Al dibujar una curva con la herramienta Pluma, se crean puntos curvos, es decir, puntos de anclaje sobre un trazado curvo continuo.

Al dibujar un segmento de línea recta o una línea recta conectada a un segmento curvo, se crean puntos angulares, es decir, puntos de anclaje sobre un trazado recto o en la unión de un trazado recto y uno curvo.

Cuando se selecciona un punto de anclaje con la herramienta Subselección, éste toma aspecto de círculo o cuadrado hueco según se trate de un punto curvo o angular. En el caso de un punto curvo también aparecen los selectores de tangente.

Diseño Flash de recursos web y multimedia para la enseñanza 30

CAPÍTULO 2: DIBUJAR Y PINTAR

Siguiendo las instrucciones del apartado anterior puedes dibujar un trazado recto y un trazado curvo con varios puntos de anclaje utilizando la herramienta Pluma. A continuación experimenta los siguientes procedimientos para ajustar el trazado.

Para mover un punto de anclaje:

1.

Elige la herramienta Subselección.

Figura 2.38 Herramienta Subselección

2.

Si el trazado no está seleccionado, haz clic sobre él. Lo verás en color verde y serán visibles los puntos de anclaje en forma de cuadrados rellenos.

3.

Pincha y arrastra el punto de anclaje deseado. Si es un punto curvo mostrará los selectores de tangente asociados. El punto seleccionado adquiere un aspecto hueco.

Para retocar la posición de uno o varios puntos de anclaje: 1.

Elige la herramienta Subselección

2.

Si este trazado no está seleccionado, haz clic sobre él. Lo verás en color verde y serán visibles los puntos de anclaje en forma de cuadrados rellenos.

3.

Clic sobre el punto o bien <Mayus>+clic para incorporar más puntos a la selección.

4.

Pincha y arrastra o bien utiliza las teclas de dirección para mover el punto o los puntos.

Para convertir un punto de anclaje angular en curvo o viceversa:

• Punto angular Punto curvo: con la herramienta Subselección, haz clic sobre el trazado si no estuviera activado y arrastra el punto deseado con la tecla <Alt> presionada. Al arrastrar definirás la curvatura del nuevo segmento curvo.

• Punto curvo Punto angular: Elige la herramienta Pluma y haz clic sobre el trazado si no estuviera activado. Al acercar el puntero del ratón sobre el punto curvo deseado, el cursor toma aspecto de cruz con un símbolo “<”. Al hacer clic transformará éste en angular.

Para agregar un punto de anclaje:

1.

Selecciona la herramienta Pluma.

2.

Clic sobre el trazado si no estuviera activado.

3.

Sitúa el puntero del ratón en el lugar deseado del trazado, el cursor toma aspecto de cruz con un símbolo “+”.

4.

Haz clic para añadirlo.

Para eliminar un punto de anclaje:

Utiliza uno de los siguientes procedimientos:

• Para eliminar un punto angular: Selecciona la herramienta Pluma y acerca el puntero sobre el punto elegido. Fíjate que el cursor toma aspecto de cruz con un signo menos. Efectúa un clic para borrarlo.

Diseño Flash de recursos web y multimedia para la enseñanza 31

CAPÍTULO 2: DIBUJAR Y PINTAR

• Para eliminar un punto curvo: haz clic dos veces en el punto con la herramienta Pluma. (Clic una vez para convertir el punto en un punto angular y haz clic otra vez para eliminar el punto).

• Selecciona el punto con la herramienta Subselección y pulsa <Supr> .

2.8 Herramienta Borrador

Figura 2.39 Herramienta Borrador

Permite eliminar trazos y rellenos.

Dibuja varias figuras en el escenario para probar el comportamiento de esta herramienta.

2.8.1 Borrar todo el escenario

1.

Doble clic en la herramienta Borrador (E).

2.8.2 Eliminar segmentos de trazos o áreas rellenas

1.

Selecciona la herramienta Borrador y a continuación clic en el modificador Grifo.

2.

Clic en el segmento de trazo o el área rellena que se desea borrar.

Figura 2.40 Modificador Grifo de la herramienta Borrador 2.8.3 Borrar mediante arrastre

1.

Selecciona la herramienta Borrador.

2.

Clic en el modificador Modo borrador y selecciona un modo:

• Borrar normal: Borra trazos y rellenos de la misma capa.

• Borrar rellenos: Sólo borra rellenos sin afectar a los trazos

• Editar líneas: Sólo borra trazos sin afectar a los rellenos.

• Borrar rellenos seleccionados: Sólo borra los rellenos seleccionados.

• Borrar dentro: Sólo borra el relleno en el que se ha iniciado el trazo del borrador.

3.

Clic en el modificador Forma del Borrador para seleccionar el tamaño y la forma del borrador.

4.

Arrastra el puntero del ratón sobre el escenario para comprobar el efecto de borrado seleccionado.

Diseño Flash de recursos web y multimedia para la enseñanza 32

CAPÍTULO 2: DIBUJAR Y PINTAR

Figura 2.41 Modificador Modo de Borrador

2.9 Modificar la forma de líneas y siluetas

La herramienta Flecha permite cambiar la forma de líneas y siluetas.

Figura 2.42 Herramienta Flecha

1.

Utiliza las herramientas Lápiz y Cubo de pintura para dibujar un triángulo con relleno interior.

2.

Selecciona la herramienta Flecha

3.

Al situar el ratón sobre una línea del triángulo, bajo el puntero aparece una pequeña línea curva o bien una esquina para indicar el tipo de modificación que se producirá al pinchar y arrastrar en ese punto: bien en el medio de la línea o bien en un vértice. No hacer clic sobre el triángulo antes de que el puntero tome uno de estos aspectos.

Esto también se puede realizar sobre una silueta sin contorno o bien sobre una línea.

Figura 2.43 Modificación de formas con la herramienta Flecha Diseño Flash de recursos web y multimedia para la enseñanza 33

CAPÍTULO 3: SOBRE EL ESCENARIO

Capítulo

3

Sobre el Escenario

3.1 Seleccionar objetos con la Flecha

ntes de proceder a modificar un objeto sobre el escenario, es necesario previamente seleccionarlo utilizando la herramienta Flecha o bien la herramienta Lazo.

A

Figura 3.1 Herramienta Flecha

Al seleccionar un objeto, el Inspector de Propiedades (visible mediante Ventana

> Propiedades) mostrará toda su información brindando la posibilidad de modificarla: color del trazo, del rel eno, dimensión, posición, etc.

Figura 3.2 Inspector de propiedades

Diseño Flash de recursos web y multimedia para la enseñanza 34

CAPÍTULO 3: SOBRE EL ESCENARIO

3.1.1 Seleccionar relleno y trazo

1.

Dibuja un óvalo con relleno utilizando la herramienta Óvalo 2.

Clic para elegir la herramienta Flecha (flecha negra) y luego un sólo clic en el centro del óvalo.

3.

El relleno de la silueta toma un aspecto resaltado para mostrar que está seleccionado.

4.

Pincha y arrastra la forma seleccionada y comprueba que sólo se mueve el relleno. El trazo o borde permanece en su sitio.

5.

Mediante Edición > Deshacer o bien <Ctrl>+<Z> , puedes deshacer la última modificación realizada. En este caso mover el relleno.

6.

Ahora realiza doble clic en el centro del óvalo. Se selecciona simultáneamente trazo y relleno, lo cual se puede comprobar arrastrando.

3.1.2 Seleccionar trozos en un grupo de líneas adyacentes 1.

Selecciona la herramienta Línea

2.

Dibuja sobre el escenario un conjunto de líneas que se cortan entre sí.

3.

Activa la herramienta Flecha.

4.

Un solo clic permite seleccionar el trozo hasta la primera intersección.

5.

Un doble clic selecciona todo el conjunto de líneas adyacentes.

6.

Si se mantiene pulsada la tecla <Mayús> al hacer clic sobre un segmento se va añadiendo al conjunto de trozos seleccionados sin elegirlos todos.

Nota: Al pulsar la tecla <Supr> se eliminan los trozos seleccionados.

3.1.3 Seleccionar un área rectangular del escenario

1.

Arrastra el símbolo árbol desde la carpeta Gráficos en la Biblioteca Ventana > Otros paneles > Bibliotecas comunes > Curso 2.

Selecciona Modificar > Separar.

3.

Activa la herramienta Flecha y haz clic en cualquier parte del escenario para deseleccionar esta forma.

4.

Pincha en un punto y arrastra hasta otro para definir las esquinas opuestas de un rectángulo que contenga por completo a esta figura. De esta forma se selecciona.

5.

Una vez que una forma o línea está seleccionada se puede usar cualquier modificador disponible para cambiarlo. Una vez seleccionado el árbol realizar sucesivos clic en el modificador Suavizar en la sección Opciones del cuadro de herramientas.

Diseño Flash de recursos web y multimedia para la enseñanza 35

CAPÍTULO 3: SOBRE EL ESCENARIO

Figura 3.3 Modificador Suavizar de la herramienta Flecha 3.1.4 Agregar objetos a una selección

1.

Sitúa sobre el escenario varias instancias del símbolo árbol desde la carpeta Gráficos en Ventana > Otros paneles > Bibliotecas comunes > Curso.

2.

Activa la herramienta Flecha. Para ir agregando objetos a una selección, mantén presionada la tecla <Mayús> mientras haces clic sobre ese objeto. Advierte que el nuevo objeto aparece seleccionado junto con el resto

3.

Para anular la selección de un objeto, haz clic sobre el mismo manteniendo pulsada la tecla <Mayús>.

3.2 Seleccionar objetos con el Lazo

1.

Arrastra el símbolo árbol desde la carpeta Gráficos en la Biblioteca Ventana > Otros paneles > Bibliotecas comunes > Curso 2.

Selecciona Modificar > Separar para romper el nexo entre el símbolo en la biblioteca y su instancia en el escenario. Gracias a esta operación de separación se consigue una forma sobre el lienzo como si hubiera terminado de dibujarse con las herramientas de Flash. Clic en cualquier parte del escenario para deseleccionar este objeto.

3.

Clic en la herramienta Lazo (L) para seleccionar a mano alzada un área que encierre una porción de esta forma. Flash selecciona el área encerrada incluso aunque falte un hueco al soltar el botón del ratón.

Figura 3.4 Herramienta Lazo

4.

Haciendo clic en la opción Modo Polígono , el área de selección se marca haciendo clic para definir los segmentos periféricos y doble clic en la última para cerrar esta área de bordes rectos.

Diseño Flash de recursos web y multimedia para la enseñanza 36

CAPÍTULO 3: SOBRE EL ESCENARIO

Figura 3.5 Modo Polígono para seleccionar áreas poligonales con la herramienta Lazo

3.3 Mover objetos sobre el Escenario

1.

Arrastra el símbolo árbol desde la carpeta Gráficos en la Biblioteca Ventana > Otros paneles > Bibliotecas comunes > Curso hasta el escenario.

2.

Selecciona la herramienta Flecha y haz clic sobre la instancia del símbolo árbol que has situado en el escenario.

Una vez que un objeto está seleccionado sobre el escenario, se puede cambiar su posición utilizando uno de los siguientes procedimientos: 3.3.1 Mover el objeto mediante arrastre

1.

Sitúa el puntero del ratón sobre el objeto, pincha y arrastra hasta una nueva posición.

2.

Para copiar el objeto y mover la copia, arrastra manteniendo la tecla

<Alt> pulsada.

3.3.2 Mover el objeto con las teclas de dirección

1.

Para mover el objeto 1 pixel en cada paso en la dirección deseada, pulsa la tecla de dirección correspondiente: arriba, abajo, derecha e izquierda (teclas de flechas).

2.

Presiona <Mayús>+<tecla dirección> para mover el objeto 10

pixeles en cada pulsación.

3.3.3 Mover el objeto usando el Inspector de propiedades 1.

Si el inspector de propiedades no está abierto, selecciona Ventana > Propiedades.

Diseño Flash de recursos web y multimedia para la enseñanza 37

CAPÍTULO 3: SOBRE EL ESCENARIO

2.

Teclea los valores X e Y y pulsa <enter> para confirmar. Las unidades tienen como punto de referencia la esquina superior izquierda del escenario.

Figura 3.6 Sitúa el objeto tecleando coordenadas X e Y en el Inspector de Propiedades 3.3.4 Mover el objeto usando el Panel de información

1.

Si el panel de información no está visible, selecciona Ventana > Paneles de diseño > Información.

2.

Teclea los valores X e Y y confirma pulsando <enter>.

Figura 3.7 Sitúa el objeto tecleando coordenadas X e Y en el Panel Información 3.4 Eliminación de objetos

Cuando se elimina una instancia del escenario, el símbolo no se elimina de la Biblioteca. Para borrar un objeto del escenario hay que seleccionarlo previamente y a continuación presionar la tecla <Supr> o bien la tecla <Retroceso> . También se puede eliminar mediante Edición > Borrar o bien Edición > Cortar.

Diseño Flash de recursos web y multimedia para la enseñanza 38

CAPÍTULO 3: SOBRE EL ESCENARIO

3.5 Escala de objetos

3.5.1 Cambiar el tamaño de un objeto sobre el escenario 1.

Pincha y arrastra el símbolo gafas desde la carpeta Gráficos en la Biblioteca Ventana > Otros paneles > Bibliotecas comunes > Curso hasta el escenario.

2.

Activa la herramienta Flecha y selecciona este objeto sobre el escenario.

3.

Clic en la herramienta Transformación libre y en la sección Opciones, clic en el modificador Escalar o bien elige Modificar > Transformar > Escalar

Figura 3.8 Opciones de la herramienta Transformación Libre 4.

Se puede realizar uno de los siguientes pasos:

• Para cambiar el tamaño proporcional del objeto en horizontal y en vertical, arrastra uno de los selectores de la esquina. Las proporciones se mantienen según se cambia de tamaño.

• Para cambiar el tamaño del objeto horizontalmente o verticalmente, arrastra uno de los selectores del centro.

Figura 3.9 Arrastrando los selectores se modifica el tamaño 5.

Clic en un área vacía del escenario para ocultar los selectores de escala.

3.5.2 Escalar un objeto mediante el Panel Transformar

1.

Pincha y arrastra el símbolo gafas desde la carpeta Gráficos en la Biblioteca Ventana > Otros paneles > Bibliotecas comunes > Curso hasta el escenario.

2.

Selecciona la herramienta Flecha y haz clic sobre este objeto sobre el escenario.

3.

Elige Ventana > Paneles de diseño > Transformar Diseño Flash de recursos web y multimedia para la enseñanza 39

CAPÍTULO 3: SOBRE EL ESCENARIO

4.

Introduce un valor de escala entre para el porcentaje vertical y otro para el horizontal. Confirma el valor pulsando <enter> para concluir.

5.

Activa la casilla Restringir si deseas mantener las proporciones del objeto.

Figura 3.10 Panel Transformar para modificar el tamaño

3.6 Transformación libre de objetos

1.

Pincha y arrastra el símbolo árbol desde la carpeta Gráficos en la Biblioteca Ventana > Otros paneles > Bibliotecas comunes > Curso hasta el escenario.

2.

Selecciona la herramienta Transformación libre

Figura 3.11 Herramienta Transformación libre

Advierte que al seleccionar esta herramienta, aparecen una serie de selectores alrededor del objeto. Inicialmente en el centro, alineado con el punto de registro del objeto (en forma de cruz sobre el objeto) se muestra el punto de transformación (círculo hueco que aparece por defecto en el centro del objeto).

Figura 3.12 Selectores para modificar el objeto con la herramienta Transformación libre No obstante se puede mover el punto de transformación mediante la acción de pinchar y arrastrar o bien recuperar la posición inicial del mismo haciendo doble clic sobre Diseño Flash de recursos web y multimedia para la enseñanza 40

CAPÍTULO 3: SOBRE EL ESCENARIO

éste. El punto de transformación define el punto opuesto al selector que se arrastra durante una transformación.

3.

Pincha y arrastra los selectores de transformación para modificar la apariencia de la instancia :

• Mover un objeto sobre el escenario: sitúa el puntero del ratón sobre él, pincha y arrastra el objeto hasta la nueva posición. No arrastres el objeto por el punto de transformación ya que esto no conseguirá desplazarlo.

• Rotar un objeto: sitúa el puntero del ratón por el exterior de un selector de esquina. Cuando adquiera el aspecto de una flecha de giro, pincha y arrastra. El objeto girará alrededor del punto de transformación.

Figura 3.13 Puntero del ratón para rotar el objeto

• Escalar un objeto: pincha sobre un selector y arrastra como en el apartado anterior.

• Sesgar un objeto: sitúa el puntero del ratón en el contorno de un selector intermedio (no en una esquina) hasta que éste tome el aspecto de una doble flecha apuntando en ambos sentidos. Pincha y arrastra para sesgar el objeto.

Figura 3.14 Sesgar un objeto para inclinarlo lateralmente 4.

Para finalizar la transformación, haz clic en cualquier lugar del escenario fuera del objeto.

3.7 Rotar y sesgar un objeto

3.7.1 Rotar un objeto mediante arrastre

1.

Selecciona la herramienta Flecha.

2.

Pincha y arrastra varias veces el símbolo gafas desde la carpeta Gráficos de la Biblioteca Ventana > Otros paneles > Bibliotecas comunes > Curso hasta el escenario.

3.

Clic en una instancia de este símbolo sobre el escenario.

4.

Clic en la herramienta Transformación libre . Selecciona el modificador Rotar y sesgar. También es posible mediante Modificar > Transformar > Rotar y sesgar.

Diseño Flash de recursos web y multimedia para la enseñanza 41

CAPÍTULO 3: SOBRE EL ESCENARIO

Figura 3.15 Opciones de la herramienta Transformación libre 5.

Arrastra uno de los selectores de las esquinas para girar la instancia.

Advierte que gira tomando como centro el punto de transformación.

6.

Clic en un área vacía del escenario para ocultar estos selectores.

3.7.2 Rotar un objeto 90 grados

1.

Selecciona un objeto sobre el escenario.

2.

Elige Modificar > Transformar > Rotar 90º en el sentido (contrario) de las agujas del reloj

Figura 3.16 Rotación de un objeto

3.7.3 Rotar objetos mediante el panel Transformar

1.

Selecciona un objeto sobre el escenario.

2.

Ventana > Paneles de diseño > Transformar

Figura 3.17 Girar un objeto utilizando el panel Transformar 3.

Clic sobre el botón de radio Girar

4.

Introduce mediante teclado el valor del ángulo de rotación. Éste puede ser positivo o negativo y expresa lo que girará el objeto respecto a la instancia inicial tomando como referencia la línea que forma la base del símbolo.

5.

Pulsa <Enter> para aplicar el valor de rotación.

Diseño Flash de recursos web y multimedia para la enseñanza 42

CAPÍTULO 3: SOBRE EL ESCENARIO

3.7.4 Sesgar un objeto

Sesgar un objeto consiste en distorsionarlo mediante la inclinación sobre su eje vertical u horizontal o bien sobre ambos.

1.

Clic sobre una instancia del símbolo gafas en el escenario.

2.

Ventana > Paneles de diseño > Transformar

3.

Clic sobre el botón de radio Sesgar.

4.

Introduce mediante teclado, los ángulos para los valores horizontal y vertical. Pulsa <enter> para confirmar.

Figura 3.18 Se puede sesgar un objeto utilizando el panel Transformar 3.8 Distorsión de formas

1.

Clic Ventana > Otros paneles > Biblioteca comunes > Curso .

Desde la carpeta Gráficos, pincha y arrastra el símbolo árbol de esta Biblioteca hasta el centro del escenario.

2.

Selecciona Modificar > Separar para romper el nexo entre el símbolo en la biblioteca y su instancia en el escenario. Gracias a esta operación de separación se consigue una forma sobre el lienzo como si hubiera terminado de dibujarse con las herramientas de Flash.

3.

Activa la herramienta Flecha. A continuación haz clic en cualquier parte del escenario para deseleccionar la figura.

4.

Vuelve a seleccionar el árbol haciendo doble clic sobre su silueta.

5.

Selecciona la herramienta Transformación libre y en el panel Opciones elige Distorsionar. También se puede acceder por Modificar > Transformar > Distorsionar.

6.

Pincha y arrastra sobre un selector de transformación.

Diseño Flash de recursos web y multimedia para la enseñanza 43

CAPÍTULO 3: SOBRE EL ESCENARIO

Figura 3.19 Modificar un objeto con la opción Distorsionar de la herramienta Transformación 7.

En el panel Opciones selecciona el modificador Envoltura. Para llegar hasta aquí también se puede utilizar el camino Modificar > Transformar > Envoltura. Una envoltura es un recuadro de delimitación que contiene uno o más objetos y que permite cambiar la forma de los objetos contenidos en él.

8.

Arrastra los puntos y los selectores de tangente para modificar la envoltura.

Nota: Advierte que los modificadores Distorsionar y Envoltura sólo están disponibles para formas sobre el escenario y no se pueden aplicar a instancias, degradados, mapa de bits, bloques de texto, sonidos, etc.

Figura 3.20 Modificador envoltura

Diseño Flash de recursos web y multimedia para la enseñanza 44

CAPÍTULO 3: SOBRE EL ESCENARIO

3.9 Reflejo de objetos

Flash permite reflejar un objeto según su eje horizontal o vertical sin modificar su posición relativa en el escenario. Para realizar esta operación: 1.

Clic Ventana > Otros paneles > Bibliotecas comunes > Curso .

Doble clic para abrir la carpeta gráficos. Pincha y arrastra varias veces el símbolo bombilla de esta Biblioteca hasta el centro del escenario.

2.

Selecciona una instancia del escenario.

3.

Elige Modificar > Transformar > Voltear verticalmente u horizontal. Repite los pasos 2-3 con las distintas instancias y opciones: sin voltear, volteo vertical y volteo horizontal.

Figura 3.21 Objetos volteados a partir de uno original

Para deshacer las transformaciones realizadas a un objeto y restaurarlo a su estado original:

1.

Selecciona el objeto transformado. Por ejemplo una bombilla volteada.

2.

Modificar > Transformar > Quitar transformación.

3.10 Agrupación de formas

3.10.1 Conexión y segmentación de formas

Cuando se sitúan formas y líneas unas sobre otras en una misma capa, Flash las conecta o divide.

1.

Selecciona la herramienta Flecha.

2.

Arrastra el símbolo árbol desde la carpeta Gráficos en la Biblioteca Ventana > Otros paneles > Bibliotecas comunes > Curso 3.

Para convertirla en una forma sobre el escenario selecciona Modificar > Separar . Clic en cualquier parte del escenario para deseleccionar este objeto.

4.

Arrastra el símbolo casa1 desde la Biblioteca Ventana > Otros paneles

> Bibliotecas comunes > Curso

5.

Selecciona Modificar > Separar . Clic en cualquier parte del escenario para deseleccionar este objeto.

6.

Usando la herramienta Flecha, clic sobre una de ellas y arrástrala encima de la otra. Si ambas figuras son del mismo color, Flash las conecta cuando se deselecciona la figura que se arrastró haciendo clic en Diseño Flash de recursos web y multimedia para la enseñanza 45

CAPÍTULO 3: SOBRE EL ESCENARIO

cualquier parte del escenario. Advierte que ahora al hacer clic sobre el conjunto, se selecciona todo.

7.

Repite los pasos 1-5 con los símbolos gráficos árbol y casa2 de la Biblioteca común Curso.

8.

Usando la herramienta Flecha, selecciona una de ellas y arrástrala encima de la otra. A continuación deselecciónala haciendo clic en cualquier parte del escenario.

9.

Clic de nuevo en la forma anterior y arrástrala separándola. Flash ha segmentado la figura inferior que fue solapada por la otra. Esto ocurre cuando ambas son de distinto color.

3.10.2 Agrupación de formas

Para evitar la segmentación y conexión de formas se utiliza el agrupamiento de formas. Una vez que se ha agrupado cada forma, ésta es tratada como si se tratase de un objeto independiente.

Figura 3.22 Flash conecta o segmenta formas cuando se solapan Los pasos necesarios para agrupar una forma son:

1.

Arrastra el símbolo árbol desde la carpeta Gráficos en la Biblioteca Ventana > Otros paneles > Bibliotecas comunes > Curso 2.

Para convertirla en una forma sobre el escenario selecciona Modificar > Separar . Observa que en el Inspector de propiedades (accesible desde Ventana > Propiedades) se indica que el objeto seleccionado ya no es una instancia del símbolo árbol sino una forma sobre el escenario. Hasta aquí es como si hubiésemos pintado esta silueta sobre el escenario.

3.

Mientras esté todavía seleccionada, haz clic en: Modificar > Agrupar.

Advierte que en el Inspector de propiedades el objeto seleccionado ya no es una forma sino un grupo.

4.

Repite los pasos 1-3 con el símbolo casa1 ó casa2 .

5.

Al mover el objeto de la casa sobre el objeto del árbol o viceversa ya no se conectan ni se segmentan.

Al hacer doble clic sobre un grupo, el resto toma un aspecto velado y los cambios que se realizan sólo afectan a este grupo. Al hacer doble clic de nuevo se accede a todo el escenario.

Diseño Flash de recursos web y multimedia para la enseñanza 46

CAPÍTULO 3: SOBRE EL ESCENARIO

3.11 Agrupación de objetos

Para poder mover conjuntamente objetos en el escenario, respetando su posición relativa, debes agruparlos. Por ejemplo, se puede crear un bosque o un pueblo a base de pinchar y arrastrar al escenario instancias del símbolo árbol o casa3 desde Ventana > Otros paneles > Bibliotecas comunes > Curso. Conviene agrupar todas las instancias para facilitar la selección y el desplazamiento del mismo como un todo.

Los grupos pueden editarse sin desagruparlos. También puedes seleccionar un objeto individual de un grupo para su edición, sin tener que desagrupar los objetos.

3.11.1 Crear un grupo de objetos

1.

Pincha y arrastra desde la carpeta Gráficos en Ventana > Otros paneles > Bibliotecas comunes > Curso , varias instancias del símbolo casa1.

2.

Para cada instancia define a tu gusto su tamaño y su situación relativa.

Utiliza las herramientas Flecha y Transformación libre.

3.

Selecciona con la herramienta Flecha en el Escenario todas las instancias que deseas agrupar. Pueden seleccionarse formas, otros grupos, símbolos, texto, etc.

4.

Elige Modificar > Agrupar . Fíjate que al mover el grupo utilizando la herramienta Flecha, se mueve todo el grupo de casas.

Figura 3.23 Agrupamiento de objetos para conservar sus posiciones relativas 3.11.2 Desagrupar objetos

1.

Selecciona el grupo haciendo clic sobre él.

2.

Elige Modificar > Desagrupar

3.

Clic en cualquier parte del escenario para deseleccionar y aplicar el desagrupamiento.

Nota:

En la Agrupación de formas se persigue evitar que las formas dibujadas en el escenario se conecten entre sí o se segmenten al situar una sobre otra en la misma capa. Si cada forma se convierte en un símbolo o bien se sitúa en una capa distinta, no sería necesario realizar el agrupamiento de formas para evitar estos efectos no deseados (conexión y segmentación).

Diseño Flash de recursos web y multimedia para la enseñanza 47

CAPÍTULO 3: SOBRE EL ESCENARIO

En la Agrupación de objetos se desea agrupar varios objetos (pudiendo ser de distinto tipo: gráficos, mapas de bits, textos, etc) para poder mover el conjunto con facilidad sin alterar las posiciones relativas de sus componentes.

3.12 Apilamiento de objetos

En una misma capa, Flash apila los objetos en el orden en que se crearon; el último objeto creado es el primero de la pila. El orden de apilamiento de los objetos determina cómo aparece cuando se solapan.

Las líneas y formas siempre aparecen por debajo de los grupos y los símbolos en la pila. Para moverlos hacia arriba en la pila, es necesario agruparlos o convertirlos en símbolos. El orden de apilamiento puede modificarse en cualquier momento: 1.

Pincha y arrastra desde la carpeta Gráficos en la Ventana > Otros paneles > Bibliotecas comunes > Curso , varias instancias del símbolo casa3.

2.

Ajusta el tamaño de cada instancia para lograr un efecto de perspectiva: más pequeño al fondo, más grande en primer plano. Intenta reproducir esta aldea o similar.

Figura 3.24 La ordenación permite el apilamiento de objetos en una misma capa 3.

Para controlar el apilamiento de objetos, selecciona un objeto con la herramienta Flecha y utiliza uno de los comandos siguientes:

• Modificar > Organizar > Traer al frente o Enviar al fondo para mover el objeto o el grupo al principio o al final del orden de apilamiento.

• Modificar > Organizar > Traer hacia delante o Enviar hacia atrás para mover el objeto o el grupo hacia arriba o hacia abajo una posición en el orden de apilamiento.

3.13 Alineación de objetos en el escenario

1.

Pincha y arrastra desde la carpeta Gráficos en Ventana > Otros paneles > Bibliotecas comunes > Curso , hasta ocho instancias del Diseño Flash de recursos web y multimedia para la enseñanza 48

CAPÍTULO 3: SOBRE EL ESCENARIO

símbolo mouse. Sitúalas aproximadamente en dos filas de cuatro ratones.

2.

Despliega el panel Alineamiento utilizando Ventana > Paneles de diseño > Alinear.

3.

Activa la herramienta Flecha, pincha y arrastra sobre el escenario para definir un área rectangular que incluya la primera fila de cuatro ratones.

4.

Sobre el panel de alineamiento haz clic en los botones Alinear borde superior y Distribuir horizontal respecto al centro. Asegúrate previamente de que el botón En Escenario no está activado (hundido).

Figura 3.25 Panel Alineamiento para ajustar la posición absoluta/relativa de cada objeto 5.

Para evitar que estos objetos se descoloquen accidentalmente, selecciona Modificar > Agrupar. Para probar otras opciones de alineamiento, debes desagrupar previamente los objetos utilizando Modificar > Desagrupar.

6.

Repite los pasos 3-4-5 para alinear la fila inferior con los otros cuatro ratones.

7.

Con la herramienta Flecha activada, selecciona ambos grupos y pulsa el botón Alinear borde izquierdo. El resultado será similar al de la figura.

Figura 3.26 Objetos correctamente alineados usando el panel Alineamiento Diseño Flash de recursos web y multimedia para la enseñanza 49

CAPÍTULO 3: SOBRE EL ESCENARIO

8.

Clic en los botones de alineación para modificar la posición de los objetos seleccionados. Aunque los iconos de estos botones son suficientemente ilustrativos, puedes situar el puntero del ratón sobre un botón, y al cabo de unos instantes, se muestra un cuadro indicando el efecto del mismo:

• Para Alinear: selecciona Alinear borde izquierdo, Alinear horizontalmente respecto al centro o Alinear borde derecho.

También puedes optar por Alinear borde superior, Alinear verticalmente respecto al centro o bien Alinear borde inferior.

• Para Distribuir: elige Distribuir borde superior, Distribuir verticalmente respecto al centro o bien Distribuir borde inferior .

También puedes elegir selecciona Distribuir borde izquierdo, Distribuir horizontalmente respecto al centro o Distribuir borde derecho.

• Para Coincidir tamaño, selecciona Coincidir anchura, Coincidir altura o Coincidir anchura y altura. De esta forma todos los objetos adquieren la misma anchura y/o altura.

• Para Espacio, selecciona Espaciar uniformemente en horizontal o Espaciar uniformemente en vertical. Con estos botones es posible distribuir uniformemente el espacio entre los objetos.

Cuando el botón En Escen. no está activado, la alineación será relativa al grupo de objetos seleccionados. Si el botón En Escenario está activado la alineación se realizará en referencia al tamaño del escenario.

3.14 Visualización del escenario

Para modificar el grado de aumento y reducción en la visualización del escenario: 1.

Selecciona la herramienta Zoom situada en la sección Ver del Cuadro de herramientas.

Figura 3.27 Opciones de magnificación del zoom

Diseño Flash de recursos web y multimedia para la enseñanza 50

CAPÍTULO 3: SOBRE EL ESCENARIO

2.

Activa el modificador Ampliar o Reducir en la sección Opciones.

3.

Efectúa sucesivos clics sobre el escenario para aumentar o reducir el zoom de visualización.

4.

En la esquina inferior derecha de la línea de tiempo se muestra una lista desplegable con el % de zoom actual. Puedes hacer clic sobre esta lista y teclear el valor o bien seleccionar uno de los definidos.

Diseño Flash de recursos web y multimedia para la enseñanza 51

CAPÍTULO 4: SÍMBOLOS

Capítulo

4

Símbolos

4.1 ¿Qué es un símbolo?

n símbolo es un gráfico, un botón o un clip de película que se crea una vez y que se puede volver a utilizar a lo largo de la película o en otras películas. Al crear un símbolo, éste pasa automáticamente a la biblioteca de la película.

U Una instancia es una copia de un símbolo que se sitúa en el escenario o bien anidada en otro símbolo.

El uso de símbolos reduce considerablemente el tamaño del archivo de la película y simplifica su edición. La edición del símbolo actualiza todas sus instancias mientras que cuando se cambia el color, tamaño o comportamiento de una instancia, estos cambios sólo afectan a ésta.

4.2 Tipos de comportamiento de símbolos

Cada símbolo tiene una línea de tiempo con sus correspondientes capas y un escenario propio.

Existen fundamentalmente 3 tipos de comportamiento de los símbolos: Gráfico: se utilizan para imágenes estáticas y también para animaciones reutilizables ligadas a la línea de tiempo de la película principal.

Botón: elemento interactivo en la película para responder a la pulsación y desplazamiento del ratón y teclado.

Clip de película: elemento animado reutilizable. Tiene su propia línea de tiempo de varios fotogramas que se reproducen independientemente de la línea de tiempo de la película principal. Son como minipelículas dentro de la película principal que pueden contener a su vez botones, gráficos, sonidos, etc.

Diseño Flash de recursos web y multimedia para la enseñanza 52

CAPÍTULO 4: SÍMBOLOS

4.3 Usando símbolos

Flash permite usar símbolos de una biblioteca común:

1.

Selecciona Ventana > Otros paneles > Bibliotecas Comunes > Curso

2.

Se muestra la biblioteca Curso. Doble clic para abrir la carpeta Gráficos.

3.

Clic sobre el símbolo Fantasma y se visualiza en la ventana superior de la ventana Biblioteca-Curso

4.

Arrástralo hasta el escenario. Se crea una instancia de ese símbolo.

5.

Deselecciona esta instancia haciendo clic en cualquier parte del escenario para volver a seleccionarla haciendo clic sobre ella. Se puede mover a otro lado del escenario y se comporta como un solo objeto.

6.

Cierra la ventana de la Biblioteca Curso mediante clic en la “X” situada en la esquina superior derecha de esta ventana o bien pulsando en la esquina superior derecha de la barra de título para luego elegir Cerrar panel.

7.

Flash almacena los símbolos en la Biblioteca . Cada película tiene su propia librería. Selecciona Ventana > Biblioteca para abrir la biblioteca de símbolos del documento actual.

8.

Observa que el símbolo Fantasma aparece en la lista.

Figura 4.1 Los símbolos se guardan en la Biblioteca del documento 4.4 Crear un símbolo nuevo con elementos

seleccionados

Vamos a crear un símbolo a partir de los objetos seleccionados en el escenario.

Diseño Flash de recursos web y multimedia para la enseñanza 53

CAPÍTULO 4: SÍMBOLOS

1.

Con las herramientas de dibujo diseña, por ejemplo, una bola con relleno de gradiente. Ver apartado “2.5.4 Rellenar con un degradado estandar”.

2.

Clic en la herramienta Flecha y doble clic sobre esta figura para seleccionarla.

3.

Selecciona Modificar > Convertir en símbolo (F8) o bien clic derecho y selecciona la opción Convertir en símbolo en el menú contextual que se despliega.

4.

En el cuadro de diálogo Convertir en símbolo, escribe su nombre en la casilla: bola gris y elige el comportamiento: Clip de película, Botón o Gráfico. En este caso Gráfico.

Figura 4.2 Definición de nombre y comportamiento del nuevo símbolo 5.

Define la posición del registro en el símbolo mediante clic en algún punto de la parrilla Registro. Selecciona el punto central (en negrita).

6.

Clic en Aceptar. Flash agrega el símbolo a la biblioteca. La selección en el Escenario es ahora una instancia del símbolo. Ahora para modificarlo no se podrá hacer en el Escenario sino a través del modo edición de símbolos.

7.

Abre la biblioteca del documento actual mediante la tecla <Ctrl>+<L> o bien Ventana > Biblioteca. El símbolo “bola gris” aparece en la lista.

Figura 4.3 Símbolo en la Biblioteca y correspondiente Instancia en el Escenario Diseño Flash de recursos web y multimedia para la enseñanza 54

CAPÍTULO 4: SÍMBOLOS

4.5 Crear un símbolo vacío nuevo

1.

Asegúrate de que no hay ningún objeto seleccionado en el Escenario.

2.

Se puede optar por uno de los siguientes métodos:

• Insertar > Nuevo Símbolo .

• Clic en el botón Nuevo Símbolo. Tiene el icono de un folio con el signo más (+) en la parte inferior de la ventana de la Biblioteca.

• Clic en el menú Opciones situado en la esquina superior derecha de la ventana Biblioteca . Escoge la opción Nuevo Símbolo Figura 4.4 La ventana Biblioteca del documento actual

3.

En el cuadro de diálogo Crear un nuevo símbolo, escribe el Nombre del símbolo, por ejemplo, cuadrado, y elige un comportamiento: Gráfico, Botón o Clip de Película . En este caso: Gráfico.

Figura 4.5 Definición de nombre y comportamiento en la creación de un símbolo Diseño Flash de recursos web y multimedia para la enseñanza 55

CAPÍTULO 4: SÍMBOLOS

4.

Clic en Aceptar.

5.

Flash agrega el símbolo a la Biblioteca y entra en el modo edición de este símbolo. En este modo, el nombre del símbolo aparece encima de la esquina superior izquierda sobre la Línea de Tiempo y una cruz filar señala el punto de registro del símbolo.

Figura 4.6 Modo edición de símbolo gráfico cuadrado

6.

Para crear el símbolo se puede dibujar con las herramientas de dibujo, se pueden importar otros medios, añadir instancias de otros símbolos de la Biblioteca, etc. Por ejemplo puedes dibujar un cuadrado con relleno gris degradado radial.

7.

Es recomendable centrar el dibujo respecto al punto de registro del símbolo. Elige la herramienta Flecha y a continuación selecciona el dibujo completo. Mediante Ventana > Paneles de diseño >

Información se accede al panel Información. En este panel, haz clic en el selector centro para centrar la ilustración. También puedes hacer clic en el selector esquina izquierda . En cualquier caso el selector activo se muestra en forma de cuadrado negro. Clic en las casillas X e Y para teclear en ambas el valor 0 y concluir pulsando la tecla <enter>. Advierte que la ilustración se centra respecto al punto de registro del símbolo.

Figura 4.7 Centrar el punto de registro usando panel Info 8.

Cuando hayas terminado de crear el contenido del símbolo, utiliza uno de los siguientes procedimientos para volver al modo de edición de películas:

• Edición > Editar Documento

• Clic en el nombre de la escena, en la barra de información, encima de la línea de tiempo.

• Clic en el botón Atrás situado en la parte izquierda de la barra de información.

Diseño Flash de recursos web y multimedia para la enseñanza 56

CAPÍTULO 4: SÍMBOLOS

Figura 4.8 Flecha atrás para abandonar el modo de edición de símbolos 9.

Abre la biblioteca mediante Ventana > Biblioteca . En esta ventana aparece el símbolo gráfico que has creado: cuadrado. Pincha y arrastra este símbolo desde la Biblioteca hasta el Escenario para crear varias instancias en el lienzo.

4.6 Crear y modificar instancias

Una vez diseñado un símbolo, se pueden crear instancias del mismo en la película, incluso dentro de otros símbolos, en cualquier momento.

1.

Arrastra hasta el escenario el símbolo Fantasma situado en la carpeta Gráficos desde Ventana > Otros paneles > Bibliotecas Comunes

> Curso.

2.

Repite esta operación varias veces para crear en el escenario distintas instancias del mismo símbolo. Se puede modificar una instancia sin que los cambios afecten al resto de instancias ni al símbolo original.

3.

Clic en la herramienta Flecha y selecciona una instancia.

4.

Elige la herramienta Transformación Libre. Mediante sus opciones Escalar así como Rotar y sesgar puedes cambiar el aspecto de tamaño y giro de esta instancia.

5.

Repite esta operación en las otras instancias de este símbolo.

6.

También se pueden modificar las propiedades de color y transparencia de una instancia.

7.

Selecciona una instancia del escenario y elige Ventana > Propiedades 8.

En el Inspector de propiedades, elige una de las opciones siguientes en el menú emergente Color:

• Brillo: ajusta la luminosidad o brillo relativas a la imagen, medidas en una escala de negro (-100%) a blanco (+100%). Haz clic en el triángulo y arrastra el deslizador o introduce un valor en el cuadro de texto para ajustar el brillo.

Figura 4.9 Ajuste de Brillo de instancia

• Tinta: proporciona color a la instancia con el mismo matiz. Con el deslizador Tinta del Inspector de Propiedades, se puede establecer el porcentaje de tinta, desde transparente (0%) a completamente saturada (100 %). También admite introducir un valor en el cuadro de texto. No olvides concluir pulsando <enter> para confirmar el valor introducido por teclado. Para cambiar el color de la tinta se puede Diseño Flash de recursos web y multimedia para la enseñanza 57

CAPÍTULO 4: SÍMBOLOS

emplear el selector de color. Para definir un color de tinta concreto, se introduce un valor de rojo (R), verde (V) y azul (A) en los campos correspondientes o se arrastran los deslizadores de los componentes.

Figura 4.10 Ajuste Tinta de instancia

• Alfa: permite ajustar la transparencia de la instancia desde invisible 0 %

hasta el actual 100 %.

Figura 4.11 Ajuste transparencia (Alfa) de instancia

• Avanzado: al seleccionar la opción Avanzado en la lista desplegable Color del Inspector de propiedades, se muestra el botón Configuración . Mediante clic sobre este botón se mostrará el cuadro de diálogo Efecto avanzado. Este panel permite ajustar por separado el color rojo, verde y azul y la transparencia de la instancia.

9.

Selecciona una a una las distintas instancias situadas sobre el escenario del símbolo fantasma y modifica sus propiedades de Color experimentando con las opciones explicadas con anterioridad.

Figura 4.12 Instancias de un mismo símbolo con sus propiedades de color modificadas Diseño Flash de recursos web y multimedia para la enseñanza 58

CAPÍTULO 4: SÍMBOLOS

4.7 Edición de símbolos

Al editar un símbolo, Flash actualiza todas las instancias del mismo en la película.

Durante su edición se puede modificar éste utilizando las herramientas de dibujo, importar otros medios o incluso insertar instancias de otros símbolos.

1.

Abre la biblioteca común Curso siguiendo: Ventana > Otros paneles

> Bibliotecas comunes > Curso.

2.

Pincha y arrastra al escenario el símbolo casa3 almacenado en la carpeta Gráficos. Con esta operación se ha importado este símbolo a la Biblioteca del documento actual. La edición de este símbolo sólo afecta al documento actual y no al símbolo en la biblioteca original.

3.

Para visualizar la Biblioteca del documento actual, Ventana > Biblioteca. Pincha y arrastra para situar varias instancias del símbolo casa3 en el escenario.

4.

Para iniciar la edición de un símbolo se puede optar por uno de los siguientes procedimientos:

• Clic derecho sobre una instancia de ese símbolo y selecciona la opción Edición en el menú contextual.

• Selecciona una instancia de ese símbolo en el escenario y a continuación Edición > Editar símbolos

• Doble clic sobre ese símbolo en la ventana Biblioteca.

Con cualquiera de los dos primeros métodos también puedes optar por Editar en contexto donde la edición del símbolo se produce sin abandonar el contexto del escenario donde se sitúa ese símbolo. En este caso el resto de los objetos se muestran atenuados para distinguirlos del símbolo que se está editando. Si haces doble clic sobre una instancia de este símbolo también entrarías en modo edición en contexto.

5.

Desde el modo edición de símbolos, haz clic en el tejado de la casa para seleccionarlo. En el cuadro Color de relleno del Cuadro de Herramientas, elige el color amarillo, por ejemplo.

6.

Para salir del modo edición de símbolo y volver al modo edición de película, existen 3 procedimientos alternativos:

• Clic en el botón Atrás situado en la parte izquierda de la barra de información, encima de la línea de tiempo o bien sobre el nombre de la escena actual que aparece a su lado, en este caso Escena 1.

• Clic en el nombre de la escena actual que aparece en el menú emergente Escena que se muestra en la barra de información situada en la parte superior izquierda de la línea de tiempo.

• Edición > Editar documento.

Diseño Flash de recursos web y multimedia para la enseñanza 59

CAPÍTULO 4: SÍMBOLOS

Figura 4.13 Botón escena para ir a Escena 1

7.

Observa que las modificaciones realizadas en el símbolo han afectado a todas las instancias del documento actual.

4.8 Separar la instancia de un símbolo

La separación de una instancia consiste en romper el vínculo entre esa instancia y su símbolo. La instancia se convierte en una serie de formas y líneas sobre el escenario que se pueden editar y modificar gracias a las herramientas de dibujo y pintura.

1.

Pincha y arrastra al escenario el símbolo árbol desde la carpeta Gráficos en Ventana > Otros paneles > Bibliotecas comunes > Curso.

2.

Clic para seleccionar esta instancia en el escenario.

3.

Elige Modificar > Separar. De este modo la instancia se convierte en los elementos gráficos que la componen.

4.

En el cuadro Color de relleno del Cuadro de herramientas modifica el color de esta forma.

5.

Visualiza la biblioteca del documento actual mediante Ventana > Biblioteca.

6.

Comprueba que las modificaciones realizadas sobre el escenario ya no modifica el símbolo original árbol en la Biblioteca.

Figura 4.14 Separar una instancia de su símbolo

Diseño Flash de recursos web y multimedia para la enseñanza 60

CAPÍTULO 4: SÍMBOLOS

4.9 Asignar un símbolo distinto a una instancia.

Esta opción se suele utilizar para cambiar el símbolo asociado a una instancia del escenario conservando sus propiedades: efectos, acciones, posición, tamaño, etc.

definidas con anterioridad.

1.

Mediante Ventana > Otros paneles > Biblioteca comunes > Curso muestra la biblioteca compartida Curso.

2.

Utiliza Ventana > Biblioteca para visualizar la ventana de la Biblioteca propia de la película actual.

3.

Pincha y arrastra símbolos desde la ventana Biblioteca-Curso situados en la carpeta Gráficos hasta la Biblioteca de la película actual: árbol, gafas, bombilla, fantasma, etc.

4.

Pincha y arrastra el símbolo fantasma desde la Biblioteca hasta el Escenario.

5.

Elige Ventana > Propiedades si el Inspector de Propiedades no estuviera visible.

6.

Haz clic en el botón Intercambiar del Inspector de Propiedades.

Figura 4.15 Botón Intercambiar para asignar otro símbolo a una instancia 7.

En el cuadro de diálogo Intercambiar símbolo, selecciona el símbolo que sustituirá al que está actualmente asignado a la instancia.

Figura 4.16 Ventana para elegir otro símbolo vinculado a la instancia actual Diseño Flash de recursos web y multimedia para la enseñanza 61

CAPÍTULO 5: LA BIBLIOTECA

Capítulo

5

La Biblioteca

5.1 Modos de visualización de la Biblioteca

a biblioteca de una película de Flash almacena los símbolos, tanto los creados en Flash como los importados, y permite ver y organizar estos archivos para facilitar el diseño. La ventana Biblioteca muestra una lista desplegable con los L nombres de todos los elementos de la biblioteca. Un icono situado junto al nombre de cada elemento de la ventana de la biblioteca indica de qué tipo de símbolo se trata.

Figura 5.1 La Biblioteca

Al seleccionar un elemento en la ventana Biblioteca, aparece una vista previa en miniatura del elemento en la parte superior de la ventana. Si el elemento seleccionado es animado o es un archivo de sonido, se puede utilizar un controlador (play/stop) para una vista previa.

Diseño Flash de recursos web y multimedia para la enseñanza 62

CAPÍTULO 5: LA BIBLIOTECA

Se pueden organizar los elementos de biblioteca en carpetas. Las columnas de la ventana Biblioteca, cuando está expandida, muestran: el nombre de un elemento, su tipo, el número de veces que se utiliza en el archivo, su estado de vinculación (si el elemento está asociado con una biblioteca compartida) y la fecha en que se modificó por última vez.

Se pueden ordenar los elementos de la ventana Biblioteca por cualquier columna.

La ventana Biblioteca también contiene un menú emergente Opciones que permite modificar los elementos de la biblioteca.

1.

Arrastra algunos símbolos gráficos desde Ventana > Otros paneles > Bibliotecas comunes > Curso hasta el escenario de la película actual: abeja, mouse, árbol, gafas, casa3, etc. Algunos en más de una ocasión.

2.

Visualiza la biblioteca en Ventana > Biblioteca. También se visualiza mediante la combinación de teclas <Ctrl>+<L> . Advierte que en ella se han incluido automáticamente los símbolos arrastrados desde la biblioteca común Curso.

3.

Para cambiar el tamaño de esta ventana, puedes realizar una de las siguientes acciones:

• Arrastrar la esquina inferior derecha de la ventana

• Clic en el botón Estado ancho para ampliar la ventana y que ésta muestre todas las columnas.

• Clic en el botón Estado estrecho para reducir la anchura de la ventana.

Figura 5.2 Biblioteca en modo Estado ancho

4.

Cuando la ventana Biblioteca se encuentra en estado ancho, para cada símbolo se muestran columnas con la siguiente información adicional:

• Número de usos: indica el número de instancias que se están usando de ese símbolo en la película actual. Clic en el Menú de Opciones de la librería en la esquina superior derecha para seleccionar Actualizar Diseño Flash de recursos web y multimedia para la enseñanza 63

CAPÍTULO 5: LA BIBLIOTECA

número de usos ahora o bien Mantener número de usos actualizado . De esta forma se actualizarán el número de usos si no estuviera activada esta última opción.

• Vinculación: indica el directorio en que se encuentra la fuente u origen con que se encuentra vinculado este símbolo como por ejemplo un video.

• Fecha de modificación: del símbolo.

5.2 Abrir la Biblioteca de otro archivo Flash

Desde el documento actual se pueden utilizar los símbolos diseñados en otro documento FLA almacenado en el disco duro:

1.

Selecciona Archivo > Importar > Abrir biblioteca externa …

2.

Se muestra el cuadro de diálogo Abrir como Biblioteca. En el casil a Buscar en: localiza la carpeta C:\Curso Flash\ejemplos y dentro el archivo ejemplo.fla.

Figura 5.3 Abrir un archivo FLA como biblioteca para reutilizar sus símbolos 3.

Clic en el botón Aceptar. Fíjate que se abre la ventana Biblioteca -

ejemplo mostrando los símbolos que contiene este documento pero no se abre el documento en sí.

4.

Para reutilizar en la película actual, los elementos contenidos en la biblioteca de ejemplo.fla, basta con arrastrarlos a la biblioteca de la película actual o bien se añaden automáticamente a ésta, al arrastrarlos sobre el escenario. Pincha y arrastra el símbolo escarabajo o auto color hasta el escenario

Diseño Flash de recursos web y multimedia para la enseñanza 64

CAPÍTULO 5: LA BIBLIOTECA

Figura 5.4 Arrastra desde la biblioteca abierta hasta el escenario 5.

Elige Ventana > Biblioteca para ver la biblioteca del documento actual. Observa que este símbolo ya se ha incorporado a la misma.

5.3 Organización de la Biblioteca

Se pueden organizar los elementos de la ventana Biblioteca mediante carpetas, del mismo modo que en el Explorador de Windows. Al crear un nuevo símbolo, éste se guarda en la carpeta seleccionada. Si no hay ninguna carpeta seleccionada, el símbolo se guardará en la raíz de la biblioteca.

1.

Abre la biblioteca del documento actual utilizando Ventana > Biblioteca

2.

Mediante Ventana > Otros paneles > Bibliotecas comunes > Curso visualizas esta biblioteca común. Abre la carpeta Gráficos.

3.

Arrastra algunos símbolos de Biblioteca – Curso hasta el escenario: abeja, mouse, árbol, gafas, casa1, etc. Algún símbolo puedes arrastrarlo varias veces.

4.

Para cerrar la biblioteca común, clic en la esquina superior derecha de su panel y elige Cerrar panel en el menú contextual que se despliega.

Figura 5.5 Botón Opciones de panel en la esquina superior derecha del mismo A continuación vamos a realizar las operaciones básicas de organización de los elementos de esta Biblioteca:

Diseño Flash de recursos web y multimedia para la enseñanza 65

CAPÍTULO 5: LA BIBLIOTECA

Figura 5.6 Botones para organizar la Biblioteca

5.

Crear una nueva carpeta: clic en el botón Nueva carpeta, en la parte inferior izquierda de la ventana Biblioteca; teclea el nombre de la nueva carpeta en el cuadro de texto (por ejemplo gráficos) y pulsa

<enter> para concluir.

6.

Mover un elemento de una carpeta a otra: pincha, arrastra y suelta cada símbolo sobre la carpeta creada gráficos.

7.

Abrir/cerrar una carpeta: doble clic sobre la carpeta. Observa que los símbolos no han desaparecido. Se muestran indentados debajo del nombre de la carpeta para indicar que se hallan en su interior. Para cerrar una carpeta abierta, doble clic sobre ella.

8.

Ordenar los elementos de la Biblioteca: haz clic en el encabezado de la columna Nombre para clasificarlos por ésta. Si lo haces sobre el encabezado Tipo lo ordenará por esta columna. Haciendo clic en el botón triángulo situado en el extremo derecho de los encabezados de columna se puede invertir el sentido de la ordenación.

9.

Cambiar el nombre de un elemento de la Biblioteca: Por ejemplo puedes cambiar el nombre del símbolo arbol a arbolito. Utiliza uno de los siguientes procedimientos:

• Doble clic en el nombre del elemento y escribe el nuevo nombre en el campo de texto.

• Selecciona el elemento y hacer clic en el icono de propiedades situado en la parte inferior de la ventana Biblioteca. Escribe el nuevo nombre en el cuadro de diálogo Propiedades de Símbolo y haz clic en Aceptar.

Diseño Flash de recursos web y multimedia para la enseñanza 66

CAPÍTULO 5: LA BIBLIOTECA

10.

Editar un símbolo: doble clic sobre el elemento que desees en la biblioteca de la película actual. Advierte que no es posible editar un símbolo de la ventana Biblioteca de un archivo FLA abierto como biblioteca ni tampoco de la ventana de una Biblioteca común.

11.

Eliminar un símbolo: selecciona el elemento en la Biblioteca y a continuación haz clic en el icono de papelera situado en la parte inferior de esta ventana. Se solicita confirmación al borrado porque es una operación irreversible. Comprueba que al eliminar un elemento de la Biblioteca, todas las instancias o las apariciones de tal elemento en la película también se eliminan.

12.

Localizar símbolos no usados: clic en Seleccionar elementos no utilizados en el menú opciones de la Biblioteca o también puedes ordenar los elementos por la columna Número de usos. Para facilitar la organización del documento, puedes localizar los elementos de la Biblioteca que no se utilizan para eliminarlos posteriormente. Sin embargo no es necesario eliminar los elementos de la Biblioteca no utilizados para reducir el tamaño final que tendrá una película Flash ya que estos elementos no se incluyen en el archivo SWF.

5.4 Trabajar con Bibliotecas Comunes

Se pueden utilizar las bibliotecas que incluye Flash para agregar símbolos, botones o sonidos a las películas. También se pueden crear Bibliotecas comunes para la aplicación Flash, las cuales podrás utilizar en cualquier película. Ambos tipos de Bibliotecas son accesibles desde Ventana > Otros paneles > Bibliotecas Comunes.

La Biblioteca que se crea al realizar una película de Flash sólo está disponible para esa película, a menos que se convierta en una biblioteca permanente.

Para crear una biblioteca permanente:

1.

Clic en Ventana > Biblioteca para abrir la biblioteca de la película actual.

2.

Arrastra desde Ventana > Otros paneles > Bibliotecas Comunes > Curso algunos símbolos desde la carpeta Gráficos: arbol, gafas, etc hasta la Biblioteca de la película actual. También puedes crear sobre el escenario, utilizando las herramientas de dibujos, formas gráficas; selecciónalas a continuación y convirtiéndolas en símbolos mediante Modificar > Convertir en símbolo.

3.

Guarda este documento mediante Archivo>Guardar como con el nombre comun, en la subcarpeta Libraries que se encuentra dentro del directorio de instalación de Flash en el disco duro. Por defecto éste último suele ser: C:\Archivos de Programa\Macromedia\Flash MX

2004\es\First Run\Libraries.

4.

Cierra la aplicación Flash mediante Archivo >Salir.

5.

Abre de nuevo la aplicación Flash y comprueba que ahora existe una Biblioteca permanente desde donde se pueden reutilizar sus símbolos. Se accede a ella mediante Ventana > Otros paneles > Bibliotecas comunes > comun.

Diseño Flash de recursos web y multimedia para la enseñanza 67

CAPÍTULO 5: LA BIBLIOTECA

Figura 5.7 Ruta de acceso a una Biblioteca común personalizada Nota: La biblioteca común Curso es simplemente un archivo FLA que ha sido creado para reutilizar sus símbolos en los ejercicios que se proponen en este curso. Es accesible desde Ventana > Otros paneles > Bibliotecas comunes porque previamente ha sido copiado a la carpeta Libraries dentro del directorio en el cual está instalada la aplicación Flash.

Diseño Flash de recursos web y multimedia para la enseñanza 68

CAPÍTULO 6: IMPORTAR RECURSOS

Capítulo

6

Importar recursos

6.1 Introducción

as películas de Flash admiten el empleo de ilustraciones creadas en otras aplicaciones. Puedes importar gráficos vectoriales, mapas de bits, vídeos, sonidos, etc. en muy diversos formatos de archivo.

L Los gráficos vectoriales representan las imágenes mediante líneas y curvas, es decir, mediante vectores que también incluyen información de color y posición.

No dependen de la resolución del dispositivo que los visualiza y en consecuencia pueden aumentar o disminuir de tamaño de visualización sin que ello afecte a su calidad y al tamaño del archivo.

Los mapas de bits representan las imágenes mediante una parrilla de puntos de color o píxeles a modo de mosaico. A diferencia de los gráficos vectoriales, al aumentar o disminuir su tamaño de visualización se suelen deformar sus bordes y pierde calidad. El tamaño del archivo dependerá del tamaño de la parrilla de puntos que definen la imagen.

6.2 Importar una imagen desde Flash

Vamos a utilizar archivos gráficos de distinto tipo para estudiar cómo son importados.

Podemos utilizar los gráficos que se encuentran almacenados en la carpeta Curso Flash aunque puedes utilizar cualquier otro.

1.

Elige Archivo > Importar > Importar a escenario.

2.

En el cuadro de diálogo Importar, localiza, en la casilla Buscar en, la carpeta Curso Flash situada en el directorio raíz de tu disco duro.

3.

Dentro de la carpeta images pincha sobre un archivo gráfico como por ejemplo: chicos.gif.

4.

Clic en Abrir. Si el nombre del archivo que se va a importar acaba con un número y existen archivos adicionales numerados secuencialmente en la misma carpeta, Flash te preguntará si deseas importar la secuencia de archivos.

5.

Cuando se importa un mapa de bits (archivos bmp, gif, jpeg, etc) a un documento Flash, éste aparece en la Biblioteca precedida del icono correspondiente a un mapa de bits.

Diseño Flash de recursos web y multimedia para la enseñanza 69

CAPÍTULO 6: IMPORTAR RECURSOS

Figura 6.1 Importar a Flash un archivo de imagen

Figura 6.2 Mapa de bits en la Biblioteca

Nota: Puedes optar por Archivo > Importar > Importar a Biblioteca para que la imagen se sitúe directamente en la Biblioteca sin pasar por el escenario.

6.3 Pegar un mapa de bits desde otra aplicación

1.

Abre Word y sitúa en el documento una imagen de la Galería utilizando Insertar > Imagen > Imágenes prediseñadas.

2.

Clic sobre esta imagen para seleccionarla en el documento y a continuación elige Edición > Copiar. De esta forma la imagen se almacena temporalmente en el portapapeles de Windows.

3.

Abre Flash y elige Edición > Pegar. Advierte que la imagen ha sido transferida directamente para ser usada en la película Flash.

Diseño Flash de recursos web y multimedia para la enseñanza 70

CAPÍTULO 6: IMPORTAR RECURSOS

Nota: Mediante Copiar/Pegar puedes importar imágenes desde cualquier aplicación Windows: Paint, Paint Shop Pro, Adobe Photoshop, Word, etc 6.4 Importar archivos gráficos

1.

En la subcarpeta images situada dentro de la carpeta Curso Flash puedes encontrar imágenes en distinto formato de archivo.

2.

Siguiendo esta tabla, comprueba cómo Flash puede importarlos usando la opción Archivo > Importar > Importar a escenario.

Tipo de archivo

Extensión

Archivo ejemplo

Comentario

Mapa de bits

.bmp

profe.bmp

Mapa de bits

Freehand

.fh8, .fh9, etc iconos.fh9

Puede editarse desde Flash. Respeta las

capas si así se indica durante la

importación.

GIF

.gif

chicos.gif,

coche.gif, Mapa de bits.

gente.gif

GIF animado

.gif

alumna.gif, maestra.gif

Crea una animación de mapas de bits con

tantos fotogramas como estados tiene el

gif animado original.

JPEG

.jpeg, .jpg

foto1.jpg

Mapa de bits.

PNG de Fireworks

.png

natura.png

Puede editarse desde Flash. Respeta las

capas si así se indica durante la

importación.

Metarchivo de Windows

.wmf, .emf

geometría.wmf,

Puede editarse desde Flash si contiene

mundo.wmf

una imagen vectorial.

Flash Player

.swf

rotulo.swf

Puede importar una animación Flash en

formato swf.

Nota: Observa que la importación de una imagen vectorial no produce un mapa de bits en la Biblioteca y es perfectamente editable desde el entorno Flash. Como has podido comprobar es el caso de archivos anteriores como: iconos.fh9, natura.png ó geometria.wmf.

6.5 Configuración de propiedades de mapas de

bits

La importación de imágenes de mapas de bits a una película puede incrementar excesivamente el tamaño del archivo de la misma. Para reducir su tamaño se utiliza la Configuración de propiedades de mapas de bits. También se puede utilizar esta opción para dar formato de visualización a la imagen en la película o incluso para suavizar los bordes de la imagen.

Diseño Flash de recursos web y multimedia para la enseñanza 71

CAPÍTULO 6: IMPORTAR RECURSOS

1.

Utiliza los pasos indicados en el apartado “Importar una imagen desde Flash” con el archivo foto1.jpg que se encuentra en la subcarpeta Curso Flash \images.

2.

Selecciona este mapa de bits en la ventana de la Biblioteca.

3.

Sigue uno de los siguientes procedimientos:

• Clic en el botón Propiedades situado en la parte inferior de la ventana Biblioteca

Figura 6.3 Botón Propiedades en la Biblioteca

• Clic derecho sobre el icono de mapa de bits y elige Propiedades en el menú contextual.

4.

En el cuadro de diálogo Propiedades de mapa de bits, selecciona Permitir suavizado para mostrar los bordes del mapa de bits con visualización suavizada.

5.

En cuanto a la Compresión elige una de estas opciones:

• Foto (JPEG): comprime la imagen en formato JPEG. Para utilizar la imagen con su calidad de compresión original, activa la casilla Usar datos de JPEG importado. Si se desactiva esta casilla te permitirá introducir un valor de 1 a 100 para definir la Calidad específica de esta imagen en la película. Una calidad próxima a 100 nos dará una imagen de calidad pero la reducción del tamaño del archivo será menor.

• Sin pérdida (PNG/GIF): para realizar la comprensión de la imagen sin pérdida de calidad.

La compresión Foto se destina a fotografías e imágenes con relleno degradado mientras que la compresión Sin pérdida se suele aplicar a dibujos e imágenes con formas simples y pocos colores.

6.

Haciendo clic en el botón Probar puedes conocer la diferencia entre el tamaño original y el tamaño comprimido del archivo tras configurar las propiedades del mapa de bits. Clic en el botón Aceptar para terminar.

Diseño Flash de recursos web y multimedia para la enseñanza 72

CAPÍTULO 6: IMPORTAR RECURSOS

Figura 6.4 Configuración de las propiedades de un mapa de bits 6.6 Conversión de mapas de bits a imágenes

vectoriales

En ocasiones interesa transformar un mapa de bits en una imagen cuyas áreas de color se pueden editar y modificar. Si conviertes un mapa de bits en una imagen editable, ésta ya no aparecerá vinculada al mapa de bits en la ventana Biblioteca.

1.

Importa al escenario el archivo gente.gif situado en la carpeta Curso Flash/images de tu disco duro.

2.

Activa la herramienta Flecha y haz clic en este mapa de bits sobre el escenario. Conviene aumentar el zoom de visualización del escenario usando la herramienta Zoom.

3.

Elige Modificar > Mapa de bits > Trazar mapa de bits…

4.

Se muestra el cuadro de diálogo Trazar Mapa de Bits donde debes configurar los siguientes parámetros:

• Umbral de color: introduce un valor comprendido entre 1 y 500. Al comparar el color de dos píxeles, si la diferencia en los valores RVA (Rojo-Verde-Azul) es inferior al umbral de color, se consideran iguales. A medida que aumenta el valor del umbral de color, disminuye el número de colores.

• Área mínima: comprendido entre 1 y 1000 para establecer el número de píxeles circundantes que deben considerarse al asignar un color a un píxel.

• Ajustar a curva: selecciona una opción del menú emergente para determinar la suavidad de los contornos en los trazos curvos. Se consigue más calidad con la opción Píxeles.

• Umbral de esquina: selecciona una opción del menú emergente para determinar si se mantienen los bordes afilados o se suavizan. Se logra más calidad usando la opción Muchas esquinas.

Diseño Flash de recursos web y multimedia para la enseñanza 73

CAPÍTULO 6: IMPORTAR RECURSOS

Figura 6.5 Opciones del trazado de mapas de bits

5.

Para crear una imagen editable lo más similar posible al mapa de bits original, introduce los siguientes valores: Umbral de color: 1; Área mínima: 1 píxel; Ajustar a curva: Píxeles y Umbral de esquina: Muchas esquinas. Clic en el botón Aceptar.

6.

Tras concluir con éxito el proceso de vectorización, elige la herramienta Flecha y selecciona mediante clic un área de color de esta imagen.

7.

Modifica el color del Cuadro de relleno en el Cuadro de herramientas. Como puedes comprobar ahora la imagen es perfectamente editable.

Notas:

El proceso de Trazar mapa de bits es lento y necesita equipos con mucha memoria RAM. Para mapas grandes puede tardar varios minutos y en determinados momentos dar la sensación de que Flash se ha colgado. Con un poco de paciencia suele terminar la operación. Evita trazar mapas de bits grandes para que el archivo resultante no ocupe mucho espacio.

Para vectorizar mapas de bits existen programas en el mercado con más prestaciones como por ejemplo Freehand, CorelDraw o TraceArt.

6.7 Formatos de archivos de importación de video

Desde una película Flash se pueden importar clips de video almacenados en distintos formatos de archivo:

• Si tienes instalado en el ordenador el reproductor QuickTime 4 o posterior, desde Flash se podrán importar archivos .AVI, .DV,

.MPG/.MPEG y .MOV (QuickTime).

• Si tienes instalado Windows con DirectX 7 o superior podrás importar a Flash desde formatos .AVI, .MPG/.MPEG y .WMV/.ASF.

El reproductor QT4 se puede descargar en la web de Apple: www.apple.com/quicktime . El componente DirectX 7 o superior en la web de Microsoft: www.microsoft.com/downloads

Diseño Flash de recursos web y multimedia para la enseñanza 74

CAPÍTULO 6: IMPORTAR RECURSOS

De forma predeterminada, Flash importa y exporta video utilizando el códec Sorenson Spark. Un códec es un algoritmo que permite comprimir/descomprimir los archivos multimedia durante los procesos de importación/exportación.

Desde Flash puedes importar clips de videos como archivos incorporados dentro de la película actual o bien como archivos externos vinculados desde la película.

Nota: En ocasiones Flash puede importar la secuencia de imágenes de un video pero no su sonido porque no es compatible con el formato MPG/MPEG. El sonido importado, cuando es compatible, se publica o exporta como sonido de flujo.

6.8 Importar clips de video como archivos

incorporados

Vamos a importar un clip de video almacenado en la carpeta Curso Flash/videos con el nombre stuart_little.mov. (formato para QuickTime). Es imprescindible para realizar esta práctica tener instalado QuickTime en tu ordenador. Desde la sección Materiales en la portada del CD del curso, puedes realizar la instalación de este conocido reproductor.

1.

Selecciona Archivo > Importar > Importar a escenario.

2.

Localiza el archivo stuart_little.mov . Clic en el botón Abrir.

3.

En el cuadro de diálogo Importar video, selecciona Incorporar video en documento de Macromedia Flash (recomendado) y cllic en el botón Siguiente.

Figura 6.6 Opciones de importación de video

4.

Si el archivo de video original está en formato *.MOV, Flash te ofrecerá la posibilidad de poder editarlo para recortar su duración, dividir en varios Diseño Flash de recursos web y multimedia para la enseñanza 75

CAPÍTULO 6: IMPORTAR RECURSOS

clips, cambiar el orden de los mismos, etc. Si el archivo de video original está en formato *.WMV ó *.AVI en el cuadro de diálogo sólo te permitirá Importar todo el video. En este caso en concreta selecciona esta opción Importar todo el video y haz clic en el botón Siguiente.

Figura 6.7. Flash permite editar el video original si su formato es *.MOV

5.

En el cuadro de diálogo Importar vídeo > Codificación es necesario definir un Perfil de compresión y un Perfil de configuración avanzada.

Figura 6.8. Se pueden crear y reutilizar perfiles de compresión y configuración avanzada 6.

Perfil de compresión. Despliega la lista de perfiles de compresión y elige en función del ancho de banda previsto en el usuario final de nuestra película. Para ello selecciona entre una de estas opciones: Módem a 56 Kbps, Red local (LAN) a 150 Kbps, Cable/DSL a 256 Kbps, Diseño Flash de recursos web y multimedia para la enseñanza 76

CAPÍTULO 6: IMPORTAR RECURSOS

Cable/DSL a 512 Kbps y Cable/DSL a 786 Kbps. Se puede reutilizar un perfil ya existente o bien crear uno nuevo definiendo los distintos valores del mismo.

7.

Perfil de compresión personalizado. Para cambiar los parámetros correspondientes a un perfil de compresión ya existente, selecciónalo en la lista desplegable y haz clic en el botón Edición … que aparece a la derecha. Otra posibilidad es crear un perfil nuevo pulsando en la entrada Crear nuevo perfil … que aparece al final de la lista desplegable de perfiles. En cualquier caso, se mostrará un nuevo cuadro de diálogo donde se pueden configurar los siguientes valores:

• Ancho de banda: especifica la velocidad aproximada de descarga del video en kilobytes por segundo. Se puede definir hasta un valor de 750

Kbps. Las opciones preestablecidas se contemplan para anchos de banda de 56 Kbps, 150, 256, … Si activas el botón de radio Ancho de banda no podrás definir la Calidad del video porque Flash ajustará este valor para conseguir una velocidad de descarga uniforme y próxima a lo indicado.

• Calidad: oscila entre 0 y 100 y señala el nivel de compresión de todos los fotogramas. En este caso no es posible definir el Ancho de banda porque Flash ajustará este valor para conseguir la calidad que has definido.

Figura 6.9. Selección de perfiles predefinidos de compresión de video Una vez elegido el método de configuración de la compresión: Ancho de banda/Calidad se pueden definir otros parámetros adicionales:

• Fotogramas clave: determina cada cuantos fotogramas del video se coge un fotograma y se almacena completo en la película Flash. En la película Flash sólo se almacenarán los datos de los fotogramas intermedios que cambian entre un fotograma clave y el siguiente. Cuanto más pequeño sea este intervalo, más fotogramas completos se Diseño Flash de recursos web y multimedia para la enseñanza 77

CAPÍTULO 6: IMPORTAR RECURSOS

almacenarán en la película flash y el tamaño del archivo será mayor.

Arrastra el deslizador o introduce por teclado en el cuadro de texto situado al final del mismo para definir como valor: 24. Esto significa que cada 24 fotogramas del video se tomará uno para almacenarlo completo en la película Flash.

• Fotogramas clave de alta calidad. Activa esta opción para asegurar una calidad de imagen uniforme en todos los fotogramas clave. Si no seleccionas esta opción podría disminuir la calidad de los fotogramas clave.

• Compresión rápida. Marca esta casilla para acelerar el proceso de compresión del video. Esto podría traducirse en cierta pérdida de calidad de imagen.

• Sincronizar con velocidad de fotogramas del documento de Macromedia Flash. Selecciona esta casilla para ajustar la velocidad de reproducción del video a la velocidad de reproducción de la línea de tiempo en la película Flash.

• Número de fotogramas de video para codificar por número de fotogramas de Macromedia Flash. Esta opción permite definir proporciones como 1:1 (1 fotograma de video importado por cada fotograma de la línea de tiempo principal de Flash) o bien 1:2 (1

fotograma de video importado por cada 2 fotogramas de la línea de Flash), etc. La eliminación de los fotogramas del video importado no reduce la velocidad del mismo. Consigue que se muestren menos fotogramas por segundo de modo que el video se exhibe más entrecortado.

Para terminar pulsa en Siguiente. En la próxima ventana podrás introducir un nombre para el perfil de compresión y una pequeña descripción.

Si estás editando un perfil ya existente se sobrescribirán los valores del mismo. Los nuevos parámetros que has definido se podrán utilizar en la compresión del video actual y en posteriores importaciones al seleccionar este perfil.

Figura 6.10. El nombre del perfil de compresión permitirá identificarlo en posteriores usos Pulsa de nuevo en el botón Siguiente. Regresarás de nuevo al cuadro de configuración de la Codificación.

Diseño Flash de recursos web y multimedia para la enseñanza 78

CAPÍTULO 6: IMPORTAR RECURSOS

8.

Perfil de configuración Avanzada. En el asistente de importación de video, una vez que hemos definido el perfil de compresión, es necesario establecer el perfil de opciones avanzadas. También en este caso se puede reutilizar un perfil ya existente o bien crear uno nuevo definiendo los distintos valores del mismo.

9.

Nuevo perfil de Configuración Avanzada. Despliega la lista y haz clic sobre la entrada Crear nuevo perfil ...

Figura 6.11. Construcción de un perfil de configuración avanzada para la importación de video A continuación se muestra un cuadro de diálogo donde podrás configurar los siguientes parámetros:

• Color. Arrastra los deslizadores de Matiz, Saturación, Gama, Brillo y Contraste para aplicar al video estas correcciones de color.

• Escala. Introduce un valor de 0 a 100 para reducir la escala del video original. Los valores de anchura y altura indican el tamaño del video en píxeles. No es posible aumentar la escala del video por encima de su tamaño original. En este caso mantendremos la escala al 100%.

• Recorte: Introduce los valores para recortar el video por sus bordes. Las guías de la ventana de vista previa mostrarán el aspecto final del video tras el recorte.

• Importar a: Establece dónde se situará el video importado: Línea de tiempo actual, Clip de película, o Símbolo gráfico. En los dos últimos casos, Flash crea un símbolo en la biblioteca del documento actual y sitúa en video importado en su interior. Este símbolo es situado en el primer fotograma de la línea de tiempo principal de la película. Elige la opción Línea de tiempo actual.

• Pista de audio: Separado (importa la pista de audio como un objeto independiente en la Biblioteca del documento), Integrado o Ninguno (no importa la pista de audio). En este caso seleccionaremos la opción Integrado.

Para terminar pulsa en Siguiente. En la próxima ventana podrás introducir un nombre para el perfil de configuración avanzada y una pequeña descripción. Si estás editando un perfil ya existente se sobrescribirán los valores del mismo. Los nuevos parámetros que has definido se podrán utilizar en la importación del video actual y en posteriores importaciones al seleccionar este perfil.

Diseño Flash de recursos web y multimedia para la enseñanza 79

CAPÍTULO 6: IMPORTAR RECURSOS

Figura 6.12. Parámetros de un perfil de configuración avanzada 10.

Clic en el botón Finalizar. Espera unos segundos mientras se realiza la importación.

Figura 6.13 Se insertan automáticamente fotogramas para visualizar el video importado 11.

Para situar el clip de video en el escenario, selecciona la herramienta Flecha y arrastra este elemento desde la Biblioteca hasta el lienzo. Flash mostrará un mensaje de advertencia si el clip tiene más fotogramas que la línea de tiempo de la película donde se quiere insertar. Clic en Sí para añadir los fotogramas necesarios en la línea de tiempo actual.

12.

Para probar la película Flash resultante, elige Control > Probar película. Más adelante podrás añadir rótulos de texto y otras imágenes Diseño Flash de recursos web y multimedia para la enseñanza 80

CAPÍTULO 6: IMPORTAR RECURSOS

para adornar el escenario. Observa que el video importado se ha integrado en la propia película.

13.

Repite la operación de importar un clip de video usando en este caso el archivo anuncio.wmv almacenado en la carpeta Curso Flash/videos.

6.9 Edición de clips de video importados.

A continuación vamos a crear distintos clips de película a partir de un archivo de video externo en formato *.MOV para QuickTime. Utilizaremos el archivo de video guardado en la carpeta Curso Flash/videos con el nombre stuart_little.mov. Es imprescindible para realizar esta práctica tener instalado QuickTime en tu ordenador. Desde la sección Materiales en la portada del CD del curso, puedes realizar la instalación de este conocido reproductor.

1.

Selecciona Archivo > Importar > Importar a biblioteca 2.

Localiza el archivo stuart_little.mov . Clic en el botón Abrir.

3.

En el cuadro de diálogo Importar video, selecciona Incorporar video en documento de Macromedia Flash (recomendado) y clic en el botón Siguiente.

4.

En el cuadro de diálogo Importar Vídeo > Edición, selecciona la opción Editar primero el video y pulsa en el botón Siguiente. Si el archivo original está en formato *.WMV (Windows Media Video) o *.AVI no es posible su edición desde Flash.

Figura 6.14 Consola de edición de video importado

Diseño Flash de recursos web y multimedia para la enseñanza 81

CAPÍTULO 6: IMPORTAR RECURSOS

5.

Desde la consola de edición localiza el fragmento de video para recortar.

Para buscar los fotogramas de video arrastra la cabeza lectora sobre la barra de reproducción del video o bien utiliza los botones play/stop. Para situar más finamente la cabeza lectora, pulsa reiteradamente los botones de retroceder/avanzar fotograma.

6.

Para definir el comienzo y final del fragmento pulsa y arrastra los selectores de comienzo y final (con forma de triángulo) situados debajo de la barra de reproducción. Para situar el selector de comienzo o final en la posición actual de la cabeza lectora pulsa respectivamente los botones que se indican en la figura adjunta como Situar punto salida o bien Situar punto entrada.

Figura 6.15 Detal e de los botones de edición de video

7.

Una vez definido el fragmento en la barra de reproducción, pulsa en el botón Crear clip y en la columna izquierda se creará una entrada cuyo nombre es modificable. Repite los pasos 5 y 6 para crear en esta lista otros dos fragmentos del video original.

Figura 6.16 Gestión de la lista de clips extraídos del video original 8.

Sitúate en la columna izquierda donde se muestra la lista de clips de video extraídos y define un orden distinto de los mismos. Para subir/bajar uno de ellos en la lista haz clic sobre él y pulsa en el botón de flecha arriba/abajo.

9.

Activa la casilla Combinar la lista de clips en un único elemento de biblioteca tras la importación. De esta forma en la Biblioteca del documento actual se creará un sólo clip de película que contendrá la secuencia de videos en el orden establecido. Si esta celda no está activada, se producirán tantos clips de video en la Biblioteca como fragmentos hemos creado.

10.

Para concluir el proceso de edición, pulsa en el botón Siguiente y regresarás al cuadro de Codificación. Selecciona el perfil de compresión Diseño Flash de recursos web y multimedia para la enseñanza 82

CAPÍTULO 6: IMPORTAR RECURSOS

y el de configuración avanzada. Para ello sigue las instrucciones del apartado anterior: "Importar clips de video como archivos incorporados"

11.

Clic en el botón Finalizar. Espera unos segundos mientras se realiza la importación. En este caso, porque así lo indicaste al comienzo del ejercicio, el video o videos importados se guardarán en la Biblioteca del documento actual. Elige Ventana > Biblioteca para visualizar estos clips de video. Pulsa y arrastra un clip de video desde la Biblioteca al escenario para utilizarlo en tu película.

6.10 Importar clips de video Quicktime como

archivos vinculados

Si importas un clip de video QuickTime (QT), puedes optar por crear un vínculo con el video desde la película Flash en lugar de incorporarlo. Un clip de video QT vinculado no pasa a formar parte del archivo Flash. En lugar de esto, la película mantiene un puntero al archivo de origen.

Si se crea un enlace con un video QT, entonces la película Flash debe publicarse necesariamente en formato MOV para QuickTime. No es posible visualizar un video QT

vinculado desde un formato de publicación de película para Flash Player (SWF). Por esta razón no se puede visualizar el resultado final mediante Control > Probar película sino cuando el documento Flash haya sido publicado en formato MOV (Ver capítulo Publicación).

Para importar un video QT como archivo vinculado:

1.

Archivo > Importar > Importar a Biblioteca

2.

En el cuadro de diálogo Importar video selecciona Vinculo a archivo de video externo .

Figura 6.17 Vínculo a archivo de video externo en Importar video

Diseño Flash de recursos web y multimedia para la enseñanza 83

CAPÍTULO 7: CAPAS

Capítulo

7

Capas

7.1 ¿Qué son las capas?

as capas son como hojas de acetato transparentes apiladas una sobre otra.

Cuando una capa está vacía permite que puedan verse a través de ésta las capas situadas debajo. Las capas ayudan a organizar las películas. Los objetos L contenidos en una capa se pueden dibujar y editar sin que afecten a objetos de otras.

7.2 Creando capas: el acuario virtual

Se puede crear una capa siguiendo cualquiera de los siguientes procedimientos:

• Clic en el botón Insertar Capa en la esquina inferior izquierda de la Línea de Tiempo.

Figura 7.1 Botón Insertar Capa en la línea de tiempo

• Selecciona en el menú Insertar > Línea de tiempo > Capa.

• Clic con botón derecho del ratón en un nombre de capa de la Línea de Tiempo para seleccionar Insertar Capa en el menú contextual que se despliega.

Cuando se crea una capa nueva, ésta aparece encima de la capa seleccionada. La nueva se convierte en la capa activa.

Vamos a crear nuestro Acuario virtual:

1.

Doble Clic sobre el nombre de Capa 1 para cambiarle su nombre: Fondo.

2.

Pincha y arrastra al escenario el símbolo fondo mar de la Biblioteca Ventana > Otros paneles > Bibliotecas Comunes > Curso > gráficos.

3.

Crea una capa nueva. La capa activa aparece resaltada en negro. Doble clic sobre su nombre para cambiárselo: Peces.

Diseño Flash de recursos web y multimedia para la enseñanza 84

CAPÍTULO 7: CAPAS

4.

Desde la biblioteca común Curso, arrastra al escenario varias instancias del símbolo pez. Estas instancias se sitúan en esta capa. Puedes jugar con el tamaño de los peces usando la herramienta Transformación libre.

5.

Crea una tercera capa siguiendo el procedimiento anterior. Doble clic sobre su nombre para cambiárselo: Flora.

6.

Desde la biblioteca común Curso arrastra al escenario el símbolo plantas. Advierte que las instancias de cada símbolo se sitúan en una capa diferente.

Figura 7.2 Aspecto final del Acuario virtual

7.3 Operaciones básicas con capas

Utilizando el ejemplo del apartado anterior puedes experimentar todas las operaciones que permite Flash en el manejo de capas.

7.3.1 Mostrar/ocultar capas

Para facilitar la edición las capas se pueden ocultar o mostrar. Se emplea uno de estos procedimientos:

• Clic a la derecha del nombre de una capa en la Línea de Tiempo, en la columna del ojo, para ocultarla. Clic de nuevo para mostrarla.

• Clic en el icono del ojo para ocultarlas todas. Clic de nuevo para mostrarlas todas.

Nota: Las capas se pueden ocultar o mostrar para facilitar el diseño de la película pero cuando se ejecuta la reproducción de la misma, se visualizarán todas las capas de la línea de tiempo.

Diseño Flash de recursos web y multimedia para la enseñanza 85

CAPÍTULO 7: CAPAS

Figura 7.3 Botones para trabajar con capas

7.3.2 Seleccionar capas

Para dibujar, pintar o modificar una capa, primero debes seleccionarla para activarla.

Un icono en forma de lápiz junto al nombre de la capa indica que la capa es modificable.

Sólo puede existir una capa activa en un momento dado.

Para seleccionar una capa:

Clic en el nombre de la capa en la Línea de Tiempo. La fila correspondiente a esa capa en la Linea de Tiempo aparecerá destacada en video inverso.

Para seleccionar dos o más capas:

Clic, con la tecla <Mayús> presionada, sobre los nombres de capa de la Línea de tiempo. Las capas nuevas reciben como nombre predeterminado el número de orden en el que se crearon Capa 1, 2, etc. Conviene cambiar el nombre de las capas para reflejar su contenido.

7.3.3 Cambiar el nombre de una capa

Doble clic en el nombre de la capa peces y escribir el nombre nuevo: pececitos.

Otra opción posible es: clic derecho y elegir Propiedades en el menú contextual que se despliega y en el cuadro de diálogo Propiedades de capa , introducir el nuevo nombre y clic en Aceptar.

Diseño Flash de recursos web y multimedia para la enseñanza 86

CAPÍTULO 7: CAPAS

Figura 7.4 Cambio de nombre a una capa

7.3.4 Copiar una capa

1.

Clic en el nombre de la capa para seleccionarla por completo.

2.

Elige Edición > Línea de tiempo > Copiar fotogramas 3.

Agrega una capa nueva, haciendo clic en el botón Añadir Capa en la esquina inferior izquierda de la Línea de Tiempo. Clic sobre el primer fotograma de esta nueva capa.

4.

Selecciona Edición > Línea de tiempo > Pegar fotogramas. Oculta la capa origen para observar que la capa destino muestra el mismo contenido.

Fíjate que en la nueva capa se copian todos los fotogramas de la capa origen.

7.3.5 Eliminar una capa

1.

Selecciónala haciendo clic sobre su nombre.

2.

Realiza uno de los siguientes procedimientos:

• Clic en el icono de la papelera de la Línea de tiempo.

• Clic botón derecho en el nombre de la capa y elige Eliminar capa en el menú contextual.

7.3.6 Bloquear o desbloquear una capa

1.

Clic a la derecha de un nombre de capa, en la columna del candado, para bloquear esa capa. Esto impide realizar ninguna modificación accidental sobre los objetos situados en este capa. Conviene utilizar esta opción cuando se emplean varias capas de denso contenido.

2.

Clic de nuevo para desbloquearla.

Diseño Flash de recursos web y multimedia para la enseñanza 87

CAPÍTULO 7: CAPAS

Figura 7.5 Bloquear/Desbloquear capa

7.3.7 Cambiar el orden de las capas

Pincha y arrastra la capa en la Línea de tiempo hacia arriba o hacia abajo.

7.3.8 Propiedades de capa

1.

Clic sobre el encabezado de capa para seleccionarla en la línea de tiempo.

2.

Elige Modificar > Línea de tiempo > Propiedades de capa. Se muestra el cuadro de diálogo Propiedades de Capa para modificar las propiedades de la capa activa en ese momento. Otro método es hacer clic derecho y seleccionar Propiedades ... en el menú contextual que se despliega.

Figura 7.6 Configurar propiedades de capa

Diseño Flash de recursos web y multimedia para la enseñanza 88

CAPÍTULO 7: CAPAS

7.4 Uso de capas: la escudería multicolor

1.

Doble clic sobre el nombre de Capa 1 para introducir uno nuevo: color.

2.

Elige Ventana > Otros paneles > Bibliotecas comunes > Curso.

Doble clic para abrir la carpeta gráficos. Busca en su interior y abre la carpeta capas auto.

3.

Pincha y arrastra al escenario el símbolo gráfico: auto skin.

4.

Vamos a configurar la propiedad Tinta para esta instancia. En el Inspector de propiedades, despliega la lista Color y selecciona la opción Tinta. Elige en el cuadro de color una tonalidad roja, por ejemplo. Arrastra el deslizador del % de tinta hasta 100 %.

5.

Repite los pasos 3 y 4 para situar en el escenario otra instancia de auto skin con otra tonalidad distinta. Por ejemplo: verde.

Figura 7.7 Uso de los símbolos auto body y auto skin de la Biblioteca Curso 6.

Inserta una nueva capa haciendo clic en el botón Insertar capa situado en la base izquierda de la línea de tiempo.

Figura 7.8 Botón Insertar capa

7.

Renombra esta nueva capa haciendo doble clic sobre ella y tecleando: auto.

Diseño Flash de recursos web y multimedia para la enseñanza 89

CAPÍTULO 7: CAPAS

Figura 7.9 Organización de capas en este ejercicio

8.

Asegúrate de que la capa auto es la capa activa. En caso contrario haz clic sobre su encabezado para seleccionarla.

9.

Arrastra el mapa de bits auto body para situarlo sobre la sombra de color rojo. Utiliza las teclas de flechas para ajustar su posición con mayor precisión.

10.

Repite el paso anterior para situar otra instancia de auto body sobre la sombra de color verde

11.

Cuando hayas concluido, bloquea las dos capas para evitar desplazamientos o borrados accidentales.

Figura 7.10 Aspecto final del ejercicio La escudería multicolor En este ejemplo hemos visto cómo crear imágenes distintas utilizando los mismos componentes gracias al uso de capas y de propiedades de instancias.

7.5 Organización de las capas en carpetas

Las carpetas de capas facilitan la organización de la línea de tiempo. Las carpetas pueden contener capas y a su vez otras carpetas.

Diseño Flash de recursos web y multimedia para la enseñanza 90

CAPÍTULO 7: CAPAS

Las carpetas admiten las mismas operaciones que una capa: crear, mostrar y ocultar, seleccionar, cambiar el nombre, copiar, eliminar, reordenar, bloquear, etc. El procedimiento para cada operación es similar al descrito para las capas.

Cuando una carpeta se bloquea, esto afecta a todas los elementos que contiene.

Para

expandir y contraer una carpeta basta con hacer clic sobre el triángulo situado a la izquierda del nombre de la carpeta.

A continuación vamos a crear otra versión de la pecera: Acuario virtual 2.0 . En esta ocasión situaremos cada pez en una capa distinta y todas las capas que contienen peces van a organizarse en una carpeta llamada banco.

1.

Doble Clic sobre el nombre de Capa 1 para cambiarle su nombre: Fondo.

2.

Pincha y arrastra al escenario el símbolo fondo mar desde la carpeta Gráficos en la Biblioteca Ventana > Otros paneles > Bibliotecas Comunes > Curso.

3.

Crea una capa nueva haciendo clic en el botón Insertar capa situado en la base izquierda de la línea de tiempo. La capa activa aparece resaltada en negro. Doble clic sobre su nombre para cambiárselo: Pez 1

Figura 7.11 Botón Insertar capa

4.

Desde la biblioteca Curso arrastra al escenario una instancia del símbolo pez. Esta instancia se sitúa en esta capa. Puedes jugar con su tamaño.

5.

Repite los pasos 3 y 4 para crear la capa Pez 2 y Pez 3. Cada una de ellas con sendos pececitos de adecuado tamaño. Nota que la nueva capa se crea encima de la capa seleccionada.

6.

Una vez que tienes las tres capas de peces, crea una carpeta de capas haciendo clic en el botón Insertar carpeta de capas que aparece en la esquina inferior izquierda de la línea de tiempo.

Figura 7.12 Botón Insertar carpeta de capas

7.

Doble clic sobre el nombre de esta nueva carpeta para cambiárselo: Banco. Advierte que las capas Pez 1, Pez 2 y Pez 3 no están dentro de esta carpeta.

8.

Para introducir estas capas en la carpeta, pincha cada una de el as y suéltalas sobre el nombre de la carpeta. Advertirás que ahora el nombre de la capa muestra indentación hacia la derecha. Prueba a contraer la carpeta y advertirás que las capas que contiene se ocultan en la línea de tiempo.

9.

Clic sobre la carpeta Banco para seleccionarla y crear una capa nueva por encima siguiendo el procedimiento habitual de insertar capa. Doble clic sobre su nombre para cambiárselo: Flora.

Diseño Flash de recursos web y multimedia para la enseñanza 91

CAPÍTULO 7: CAPAS

10.

Desde la biblioteca común Curso arrastra al escenario el símbolo plantas. Ya tenemos nuestro nuevo acuario

Figura 7.13 Distribución en capas de este ejercicio

Diseño Flash de recursos web y multimedia para la enseñanza 92

CAPÍTULO 8: TEXTO

Capítulo

8

Texto

8.1 Uso de textos en Flash

i se utilizan textos en las películas Flash, se puede establecer el tamaño, el tipo de fuente, el espaciado, el color y la alineación. Los bloques de texto o tipos pueden transformarse: rotar, escalar, inclinar, reflejar, etc del mismo modo S que cualquier objeto.

8.2 Creación de texto

Figura 8.1 Herramienta Texto

Para situar bloques de texto en el Escenario, se emplea la Herramienta Texto (T) 1.

Clic en la Herramienta Texto

2.

Vamos a crear un cuadro de texto que se expanda a medida que se vaya escribiendo en su interior. Clic en aquella parte del escenario donde deseas comenzar el texto. Aparece un recuadro con un selector circular en la esquina superior derecha. Es un cuadro de texto horizontal estático de anchura variable.

3.

Teclea, por ejemplo, el siguiente texto: “Mi mamá me mima mucho”.

4.

Al concluir, vamos a crear otro bloque distinto de texto horizontal estático de anchura fija. Para ello sitúa el puntero donde desees comenzar el texto y arrastra hasta la anchura deseada. Advierte que ahora el cuadro de texto muestra un recuadro con un selector cuadrado en la esquina superior derecha.

5.

A continuación teclea, por ejemplo, el siguiente texto: “Mi papá fuma en pipa”. Al pulsar <enter> o bien alcanzar el final de la línea, el texto continuará en el siguiente renglón. Si necesitas aumentar la anchura inicialmente definida: pincha y arrastra el selector de la esquina superior derecha del recuadro.

Diseño Flash de recursos web y multimedia para la enseñanza 93

CAPÍTULO 8: TEXTO

Figura 8.2 Los tipos de cuadros de texto se distinguen por la ubicación y forma de su selector 8.3 Configurar las propiedades del cuadro de

texto

1.

Selecciona la herramienta Texto.

2.

Activa Ventana > Propiedades para visualizar el Inspector de Propiedades si no estuviera todavía visible.

Figura 8.3 Inspector de propiedades de la herramienta Texto 3.

Se puede elegir un tipo de texto de la lista desplegable para indicar el tipo de campo de texto deseado:

• Texto estático. Es la opción por defecto. Muestra caracteres que no se modificarán durante la visualización de la película.

• Texto dinámico. Su contenido va actualizarse dinámicamente a medida que la película se ejecuta.

• Texto de entrada. Permite que el usuario introduzca por teclado texto para formularios o encuestas.

En principio vamos a utilizar la modalidad de Texto estático.

4.

Haz clic en el triángulo situado junto al campo Fuente y selecciona una fuente de la lista, por ejemplo, Tahoma.

5.

En la casilla Tamaño de la fuente, arrastra el deslizador para seleccionar un valor o introduce por teclado un valor de tamaño de fuente, por ejemplo, 18 puntos.

6.

Clic en el botón Negrita B o Cursiva I para aplicar el estilo negrita o cursiva.

Diseño Flash de recursos web y multimedia para la enseñanza 94

CAPÍTULO 8: TEXTO

7.

Para elegir un color de texto, clic en el cuadro de color y elige una muestra de la paleta. También es posible introducir el valor hexadecimal de un color precedido del signo # en el cuadro de texto. Ejemplo:

“#FFCC00”.

8.

En el deslizador AV se especifica la separación entre caracteres y en la lista desplegable Posición del carácter se indica la altura respecto a la línea base: Normal, Superíndice y Subíndice. En este caso vamos a dejar los valores por defecto: Normal.

9.

Clic sobre el escenario para comenzar a escribir un cuadro de texto estático con los atributos de carácter definidos previamente: “Canción del pirata”.

10.

Modifica la configuración del inspector de propiedades. Por ejemplo, reduce el tamaño de la fuente a 12 puntos y el color del texto será negro

#000000. Haz clic en otro lugar del escenario para crear otro cuadro con las nuevas propiedades. Teclea: “Con diez cañones por banda, viento en popa, a toda vela, no corta el mar, sino vuela un velero bergantín.” Figura 8.4 Aspecto final del cuadro de texto Canción del pirata Para modificar las propiedades de un cuadro de texto:

1.

Selecciona la herramienta Flecha (flecha negra).

2.

Clic sobre el cuadro de texto seleccionado. En este caso el que contiene el título “Canción del Pirata”. Advierte que aparecerá destacado en un recuadro con un borde fino azul.

3.

Visualiza, si no lo estuviera, el Inspector de Propiedades mediante Ventana > Propiedades.

4.

Sobre este panel puedes cambiar el tipo de fuente, tamaño, color, etc.

Advierte que las nuevas propiedades son asumidas automáticamente 5.

Para convertir el cuadro de texto horizontal en uno vertical, haz clic en el botón Cambiar dirección del texto y selecciona en la lista emergente una de las dos opciones: Vertical, izquierda a derecha y Vertical, derecha a izquierda.

Figura 8.5 Opciones de dirección del cuadro de texto

Diseño Flash de recursos web y multimedia para la enseñanza 95

CAPÍTULO 8: TEXTO

8.4 Configurar las propiedades de párrafo del

texto

1.

Selecciona la herramienta Texto.

2.

Pincha y arrastra en cualquier parte del escenario para definir un cuadro de texto de anchura fija.

3.

Escribe el siguiente texto: “En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor....” 4.

En caso de que no estuviera visible el Inspector de propiedades selecciona Ventana > Propiedades.

5.

Para establecer la alineación, clic en uno de los botones: Justificar por la izda, Centrar, Justificar por la dcha y Justificar.

Figura 8.6 Opciones de alineación en el cuadro de texto 6.

Haz clic en el botón Formato del Inspector de propiedades. Se mostrará el cuadro de diálogo Opciones de formato donde se pueden definir éstas.

7.

Para establecer el Margen izquierdo y Margen derecho, pincha sobre el triángulo situado a la derecha del correspondiente valor numérico y arrastra el deslizador para seleccionar un valor o bien introduce un valor en el campo numérico.

8.

Para especificar la Sangría , idem sobre esta casilla.

9.

Idem para el valor del Espacio Interlineal.

Figura 8.7 Configuración del formato de párrafo

10.

Clic en el botón Aceptar.

11.

Para conseguir que este cuadro de texto sea seleccionable mediante el ratón durante la reproducción de la película, se puede definir esta opción pulsando el botón Seleccionable en el Inspector de propiedades.

De esa forma el usuario podrá seleccionar el texto para copiarlo al portapapeles (<Ctrl>+<C>) y reutilizarlo en otra aplicación.

Diseño Flash de recursos web y multimedia para la enseñanza 96

CAPÍTULO 8: TEXTO

Figura 8.8 Botón para activar/desactivar opción de texto seleccionable 12.

Para visualizar cómo se comportará el cuadro de texto durante la reproducción de la película, selecciona Control > Probar Película. Para salir de la reproducción, cerrar la ventana de reproducción.

8.5 Uso de fuentes de dispositivo

Cuando en un cuadro de texto se usa una fuente del sistema (Arial, Times New Roman, Tahoma, etc.), Flash incorpora la información de la fuente a la película SWF para garantizar una correcta visualización del texto en el Flash Player. Sin embargo, durante el diseño se pueden crear cuadros de texto utilizando las fuentes de dispositivo de tal forma que no se incorporan al archivo SWF final. Cuando el reproductor de Flash, encuentra un cuadro de texto con este tipo de fuente buscará en el equipo local la fuente disponible más parecida. El uso de las fuentes de dispositivo además de reducir el tamaño de archivo de la película Flash, permite una lectura más nítida de los textos por debajo de los 10 puntos de tamaño.

Flash ofrece tres tipos de fuentes de dispositivo: _sans (similar a Arial), _serif (similar a Times New Roman) y _typewriter (similar a Courier).

Para utilizar las fuentes de dispositivo en un cuadro de texto, es necesario activar la casilla Utilizar fuentes dispositivo en el Inspector de propiedades. Esto sólo funciona en cuadros de texto horizontales.

8.6 Separación de texto

Para remodelar y manipular un cuadro de texto es necesario convertirlo previamente en líneas y rellenos. Una vez realizada esta operación, el bloque no puede volver a editarse como texto.

1.

Selecciona la herramienta Texto.

2.

Crea sobre el escenario un cuadro de texto y teclea: “FLASH” 3.

Selecciona la herramienta Flecha (flecha negra) y clic sobre este cuadro de texto.

4.

Elige Modificar > Separar. Cada carácter del texto seleccionado se coloca en un cuadro de texto distinto. El texto permanece en la misma posición del escenario.

5.

Si vuelves a seleccionar Modificar > Separar de nuevo, los caracteres del texto seleccionado se convierten en formas en el Escenario.

6.

Clic fuera del cuadro de texto convertido para deseleccionar las formas.

7.

Aproxima el puntero del ratón sobre el borde de un carácter y arrástralo para cambiar su forma

8.

Selecciona la herramienta Flecha y efectúa un clic sobre una letra para seleccionarla. Modifica el cuadro de Color de relleno en la Caja de Herramientas. Advierte que la letra elegida cambia de color.

Diseño Flash de recursos web y multimedia para la enseñanza 97

CAPÍTULO 8: TEXTO

Figura 8.9 Si separas un texto puedes editarlo como una forma 8.7 Vinculación de bloques de texto a direcciones

URL

Se pueden vincular un cuadro de texto horizontal a una dirección URL para permitir que el usuario salte a otro archivo al hacer clic sobre este texto.

1.

Selecciona la herramienta Texto

2.

Crea sobre el escenario un cuadro de texto horizontal tecleando

“EDUCASTUR”

3.

Para visualizar el Inspector de Propiedades seleccionar Ventana > Propiedades si no está a la vista.

4.

Selecciona la herramienta Flecha y haz clic sobre este cuadro de texto en el escenario. Advierte que el cuadro de texto seleccionado se muestra encuadrado en un marco azul. Evita hacer doble clic para no entrar en el modo de edición del cuadro de texto.

5.

En la casilla URL del Inspector de Propiedades, teclea la URL al que se desea vincular el cuadro de texto: http://www.educastur.princast.es. Es importante teclear la cabecera http:// . No olvides concluir pulsando la tecla <enter>. Fíjate que el texto aparece subrayado en trazo discontinuo para indicar que es un enlace.

6.

Para probar la película, seleccionar Control > Probar película 7.

Al hacer clic sobre la palabra EDUCASTUR, se abre una ventana del navegador por defecto y se muestra en su interior la web de esta dirección.

Figura 8.10 Teclea una dirección en la casilla URL en el Inspector de propiedades 8.8 Efecto sombra en un cuadro de texto

En el siguiente ejemplo se diseñará un cuadro de texto con efecto de sombra: 1.

Si el fondo del documento no es blanco, clic en Modificar > Documento y elige este color en la casilla Color de fondo.

2.

Activa la herramienta Texto.

3.

En el Inspector de propiedades define para la fuente como tamaño 48 puntos, color gris claro (#CCCCCC) y efecto negrita.

Diseño Flash de recursos web y multimedia para la enseñanza 98

CAPÍTULO 8: TEXTO

4.

Clic en el escenario para escribir el texto. Por ejemplo: “El Quijote” .

5.

Elige la herramienta Flecha .

6.

Pulsa la tecla <Alt> y sin soltarla arrastra ligeramente el cuadro de texto creado. Con esta operación has creado un segundo cuadro de texto encima del anterior.

7.

En el Inspector de propiedades modifica el color de la fuente a negro del cuadro de texto situado encima.

8.

Utilizando las teclas de dirección sitúa con precisión el cuadro de texto negro sobre su sombra para conseguir la adecuada dirección.

9.

Pincha y arrastra para definir un área lo suficientemente grande donde se muestren seleccionados ambos cuadros de texto.

10.

Elige Modificar > Agrupar para anclarlos y evitar desplazamientos relativos. Cuando pinches y arrastres sobre el cuadro, éste se desplazará como un todo conservando el efecto sombra.

Figura 8.11 Aspecto final del rótulo

Nota: Flash MX 2004 incorpora Efectos especiales que automatizan ciertos procesos. En lugar de hacerlo manualmente puedes seleccionar el cuadro de texto original y luego elegir Insertar > Efectos de línea de tiempo

> Efectos > Sombra. Se mostrará un asistente que te facilitará el diseño.

El resultado será otro objeto distinto del original cuyas características serán modificables a posteriori pulsando en un botón con la etiqueta Edición ...

en el Inspector de propiedades.

Diseño Flash de recursos web y multimedia para la enseñanza 99

CAPÍTULO 9: BOTONES

Capítulo

9

Botones

9.1 ¿Qué es un botón?

os botones son clips de películas interactivos de 4 fotogramas. Cuando se selecciona el comportamiento botón para un símbolo, Flash crea un símbolo con una línea de Tiempo de 4 fotogramas.

L Cada fotograma tiene una función específica:

• Reposo: aspecto del botón cuando el puntero no está sobre él.

• Sobre: aspecto del botón cuando el puntero se encuentra sobre él.

• Presionado: cuando se hace clic sobre el mismo

• Zona activa: define el área que responderá al clic del ratón. Es un área invisible.

Generalmente las imágenes de cada fotograma son pequeñas variaciones de una misma imagen. La línea de tiempo no se reproduce realmente. El botón es sensible a las acciones del puntero del ratón saltando al fotograma correspondiente.

Figura 9.1 Estados Reposo, Sobre, Presionado y Zona activa de un botón 9.2 Usar un botón de una Biblioteca común

1.

Selecciona Ventana > Otros paneles > Bibliotecas Comunes > Curso

2.

En la ventana Biblioteca-Curso realiza doble clic sobre la carpeta Botones para abrirla.

3.

Pincha y arrastra al escenario el botón ejemplo botón.

4.

Control > Probar película para estudiar su comportamiento. Cierra la ventana de reproducción para regresar al diseño.

5.

Para editarlo y ver su estructura haz clic derecho sobre su instancia y selecciona Editar en contexto . Flash cambia al modo edición de símbolos. La cabecera de la Línea de Tiempo cambia para mostrar los cuatro fotogramas consecutivos.

Diseño Flash de recursos web y multimedia para la enseñanza 100

CAPÍTULO 9: BOTONES

6.

Al hacer clic sobre el encabezado de cada fotograma se visualiza en el escenario el aspecto del botón en cada estado.

7.

Para abandonar el modo edición de símbolo hacer clic sobre el nombre de la escena (Escena 1) en la parte inferior de la Línea de Tiempo.

Figura 9.2 Edición de ejemplo botón

9.3 Crear un botón

1.

Selecciona Insertar > Nuevo símbolo.

2.

En el cuadro de diálogo Crear un nuevo símbolo, escribe un nombre para el símbolo, por ejemplo, botón y como comportamiento elige Botón. Clic en Aceptar.

Figura 9.3 Introduce nombre y comportamiento para crear un botón 3.

Flash cambia al modo de edición de símbolos. La cabecera de la Línea de tiempo cambia para mostrar cuatro fotogramas consecutivos denominados: Reposo, Sobre, Presionado y Zona Activa. El primer fotograma, Reposo, es un fotograma clave vacío.

4.

Para crear la imagen del botón del estado Reposo, activa la herramienta de dibujo Rectángulo (R). Selecciona el color azul como relleno y como trazo. Activa el modificador Radio del rectángulo redondeado e introduce 30 como valor del radio. Clic en el botón Aceptar.

5.

Pincha y arrastra para dibujar el rectángulo de esquinas redondeadas que formará el botón en su estado de Reposo.

Diseño Flash de recursos web y multimedia para la enseñanza 101

CAPÍTULO 9: BOTONES

6.

Selecciona la herramienta Flecha. Doble clic sobre el rectángulo para seleccionarlo. Abre el panel Ventana > Paneles de diseño > Información. Para situar el objeto en el centro, clic en el selector centro de la parrilla que se muestra en el panel Información e introduce los valores 0 en las casillas X e Y. Para darle un tamaño adecuado, introducir los valores 160 y 40 en anchura (An) y altura (Al) respectivamente. No olvides pulsar <enter> para concluir. Clic en cualquier parte del escenario para deseleccionar.

Figura 9.4 Introduce X e Y para situar con precisión el objeto 7.

Selecciona la herramienta Texto (T). Sobre el Inspector de Propiedades define previamente como tipo de fuente: Arial, tamaño: 24 puntos y color del texto: blanco. Activa el botón B de las negritas. Clic en el escenario encima del botón y escribe "Reposo".

8.

Selecciona la herramienta Flecha. Clic sobre el cuadro de texto. En el Inspector de propiedades introducir los valores 0 en las casillas X e Y

para centrar este texto en relación con el rectángulo. Pulsa la tecla

<enter> para concluir.

Figura 9.5 Diseño del estado Reposo del botón

Diseño Flash de recursos web y multimedia para la enseñanza 102

CAPÍTULO 9: BOTONES

9.

Clic en el segundo fotograma, Sobre, y elige Insertar > Línea de tiempo > Fotograma clave. Flash inserta un fotograma clave que duplica el contenido del fotograma Reposo.

10.

Modifica la imagen del botón para el estado Sobre. Doble clic sobre el cuadro de texto para escribir Sobre. Activa de nuevo la herramienta Flecha. En el Inspector de Propiedades introduce 0 para los valores de X e Y. Pulsa <enter> para que Flash asuma el valor tecleado en la casilla. De esta forma el cuadro de texto se centrará sobre el fondo.

11.

En el estado Sobre también se puede cambiar el color del contorno del botón. Selecciona la herramienta Flecha y pincha en cualquier parte del escenario para deseleccionar el cuadro de texto.

12.

Selecciona la herramienta Bote de Tinta y el color negro como color de trazo. En el Inspector de propiedades selecciona un ancho de 3

pixeles para el trazo. Clic sobre el contorno del botón situado en el escenario en el fotograma Sobre.

Figura 9.6 Diseño del estado Sobre del botón

13.

Clic en el tercer fotograma, Presionado, y elige Insertar > Línea de tiempo > Fotograma clave. Flash inserta un fotograma clave que duplica el contenido del fotograma Sobre.

14.

En este nuevo fotograma el botón aparecerá seleccionado. Clic fuera para deseleccionar y pulsa sobre el relleno solamente. A continuación cambia el color de relleno en el Cuadro de Relleno del cuadro de herramientas seleccionando un color azul claro.

15.

Activa la herramienta Flecha y haz doble clic sobre el texto para teclear Press. Vuelve a escoger la herramienta Flecha y sobre el Inspector de Propiedades se puede definir el color negro como color del texto.

Centra el cuadro de texto introduciendo 0 como valores X e Y.

Figura 9.7 Diseño del estado Press del botón

Diseño Flash de recursos web y multimedia para la enseñanza 103

CAPÍTULO 9: BOTONES

16.

Clic en el cuarto fotograma, Zona Activa, y elegir Insertar > Línea de tiempo > Fotograma clave. Flash inserta un fotograma clave que duplica el contenido del fotograma Presionado.

17.

Con la herramienta Flecha activada, haz clic en cualquier parte del escenario para deseleccionar. A continuación haz clic sólo sobre el cuadro de texto en el fotograma Zona activa. Pulsa la tecla <Supr> para eliminarlo. Clic sobre el relleno y cambia el color a negro en la Caja de Herramientas o el Inspector de Propiedades. De esta forma la Zona activa es un rectángulo de esquinas redondeadas del mismo tamaño que el resto de estados del botón.

18.

El fotograma Zona Activa no está visible en el Escenario, pero define el área del botón que responde al ratón. Asegúrate de que la imagen del fotograma Zona Activa es una área sólida lo bastante grande para abarcar todos los elementos gráficos de los fotogramas Reposo, Sobre y Presionado. También puede ser más grande que el botón visible. Si no se especifica un fotograma Zona Activa, se utilizará la imagen para el estado Reposo como fotograma Zona Activa.

Figura 9.8 Aspecto de todos los estados del botón

19.

Para asignar un sonido a un estado del botón, selecciona el fotograma de dicho estado en la Línea de tiempo. Por ejemplo el estado Presionado.

A continuación abre la Biblioteca común Curso mediante Ventana > Otros paneles > Bibliotecas Comunes > Curso. Pincha y arrastra un sonido, por ejemplo, Clic plástico desde la carpeta Sonidos hasta el escenario. Clic sobre el fotograma “Presionado”. Advierte que en el Inspector de Propiedades de este fotograma aparece este sonido en la lista desplegable Sonido. Para eliminarlo bastaría con seleccionar Ninguno en esta lista.

20.

Tras crear el botón, elige Edición > Editar documento.

21.

Arrastra desde la Biblioteca del documento actual hasta el escenario el símbolo del botón para crear una instancia del símbolo en la película.

22.

Para probar el botón, Control > Probar película. Para abandonar el test cierra la ventana de reproducción.

9.4 Asociar una acción a un botón

Para que el usuario realice una tarea al hacer clic sobre la instancia de un botón, es necesario asignarle una acción. Las demás instancias del símbolo no se verán afectadas: 1.

Abre un documento Flash nuevo mediante Archivo > Nuevo.

2.

Selecciona Ventana > Otros paneles > Bibliotecas comunes > Curso y mediante doble clic abre la carpeta Botones > Crystal 3.

Pincha y arrastra al escenario una instancia del símbolo botón verde.

Diseño Flash de recursos web y multimedia para la enseñanza 104

CAPÍTULO 9: BOTONES

4.

Es importante observar que sólo el botón se encuentra seleccionado para poder seguir. A continuación vamos a asignarle una acción. En este caso podría ser que al hacer clic sobre él (evento clic) se visualice el navegador por defecto del sistema para mostrar una determinada dirección URL (acción)

5.

Elige Ventana > Paneles de desarrollo > Acciones para visualizar el panel Acciones-Botón si no está abierto todavía. La tecla de atajo para mostrar directamente el panel Acciones-Botón es <F9>. También este panel es accesible desde el botón Editar el script ... que aparece a la derecha del Inspector de propiedades una vez que has seleccionado previamente el objeto.

Figura 9.9 Botón para editar el script del objeto seleccionado 6.

En el panel Acciones-Botón, teclea el siguiente código: on (release) {

getURL("http://www.educastur.princast.es");

}

A continuación se explica el significado del código

• on(release) : define el evento que inicia la acción. release significa

"liberar". El usuario sitúa el puntero del ratón sobre el botón, pulsa con el botón izquierdo del ratón sobre él y la acción se desencadena justo en el instante en que el usuario suelta el botón del ratón. Más adelante veremos otros eventos o posibles interacciones que el usuario puede realizar sobre un botón. Se puede programar una respuesta de la película para cada una.

• getURL(): esta acción abre una ventana del navegador mostrando la página web cuya dirección se indica: "http://www.educastur.princast.es".

Es importante añadir el prefijo " http://" y situar la dirección entre comillas para que funcione correctamente.

Diseño Flash de recursos web y multimedia para la enseñanza 105

CAPÍTULO 9: BOTONES

Figura 9.10 Asignación de la acción getURL a un botón

7.

Comprueba el resultado usando Control > Probar película.

Notas:

Asistente para la escritura de scripts.

Para evitar errores de sintaxis en la redacción del código se puede utilizar las ayudas que proporciona Flash MX 2004. Utiliza uno de estos procedimientos alternativos:

• Pulsa en el botón Añadir script situado en la esquina superior izquierda del cuadro de diálogo Acciones-Botón. Tiene el icono de un signo "+".

Localiza la acción on() a través de las categorías que van apareciendo: Funciones globales > Control de clip de película > on . Efectúa un clic sobre esta acción y ésta se añadirá al código del botón. Se muestra una lista entre los paréntesis de la orden on(...) y elige en ella el evento release (liberar). Sitúa el cursor entre las llaves del código para introducir a continuación la acción getURL que se muestra repitiendo el mismo procedimiento en: Funciones globales > Navegador/Red > getURL. Entre los paréntesis de la orden getURL(...) tendrás que escribir la URL. No olvides situar esta dirección entre comillas.

Diseño Flash de recursos web y multimedia para la enseñanza 106

CAPÍTULO 9: BOTONES

Figura 9.11 Asistente para la escritura de scripts

• Utiliza el cuadro izquierdo del panel de Acciones para localizar la acción adecuada en la estructura jerárquica de funciones globales que se muestra.

Figura 9.12 Asistente para la escritura de scripts

Eventos de usuario para un botón.

Al seleccionar la acción on(...) en la ventana Acciones se muestra una lista con todos los eventos posibles que se pueden elegir para un botón. Debe especificarse la interacción que el usuario debe realizar sobre el botón para que se ejecute las acciones encerradas entre las llaves {} del on(...)

Diseño Flash de recursos web y multimedia para la enseñanza 107

CAPÍTULO 9: BOTONES

Figura 9.13 Lista de eventos de usuario para un botón

• press (presionar): se pulsa el botón izquierdo del ratón sobre el botón de la película. La acción se desencadena en el momento en que el usuario pulsa.

• release (liberar): se sitúa el puntero sobre el botón de la película, se pulsa el botón izquierdo del ratón y a continuación se suelta este botón.

La acción se inicia en el instante en que se libera o suelta el botón y no cuando se pulsa o se mantiene pulsado. Es el comportamiento estándar de pulsación sobre un botón.

• releaseOutside (liberar fuera): se pulsa el botón izquierdo del ratón sobre el botón de la película, manteniéndolo pulsado, se arrastra el puntero fuera del botón de la película y una vez fuera se suelta . La acción se desencadena en el momento en que se suelta el botón del ratón fuera del botón de la película.

• rollOver (situar sobre objeto): se mueve el puntero desde fuera del botón de la película para situarlo encima del mismo. Se inicia la acción en el instante en que el puntero del ratón se coloca encima del botón de la película.

• rollOut (situar fuera de objeto): el puntero está situado sobre el botón de la película y se mueve hacia fuera. La acción se ejecuta cuando el puntero deja de estar sobre el botón de la película.

• dragOver (arrastrar sobre): se pulsa el botón izquierdo del ratón sobre el botón del escenario, sin soltarlo, se mueve el puntero fuera del botón y se vuelve a situar encima. La acción se inicia en el instante en que el puntero se vuelve a colocar encima del botón de la película.

• dragOut (arrastrar fuera): se pulsa el botón izquierdo del ratón sobre el botón de la película y sin soltarlo se arrastra fuera. La acción se desencadena en el momento en que el puntero del ratón deja de estar encima del botón de la película.

• keyPress "<tecla>" (presión de tecla): desencadena la acción al presionar la tecla especificada. Ejemplo: keyPress(“<enter”); Flash admite la selección múltiple de eventos, de tal forma que la acción especificada se desencadenará cuando el usuario realice alguno de los eventos contemplados. Además para un objeto también es posible definir varias acciones que se ejecutan una detrás de otra cuando el usuario realiza el evento previsto.

Diseño Flash de recursos web y multimedia para la enseñanza 108

CAPÍTULO 10: SONIDOS

Capítulo

10

Sonidos

10.1 Uso del sonido en Flash

lash ofrece dos métodos distintos de utilizar un sonido en una película:

•

F Sonidos de evento: Debe descargarse por completo para que empiece a reproducirse. Una vez que empieza a sonar continuará haciéndolo hasta que termine su duración física o bien hasta que la cabeza lectora alcance un fotograma con una acción de detener ese sonido. Sonará hasta terminar su duración aunque se alcance el final de la película. Un ejemplo de sonido de evento es un clic asociado al estado presionado de un botón. Sonará cuando el usuario haga un clic (evento) con el puntero sobre ese botón.

• Flujo de sonido: Cuando una película se descarga desde Internet, el sonido empieza a reproducirse en cuanto se haya descargado información suficiente de los primeros fotogramas y luego se sincroniza con la línea de tiempo. Flash hace que la animación vaya a la misma velocidad que el flujo de sonido. Si no puede dibujar los fotogramas a la velocidad exigida, se los salta. A diferencia de los sonidos de evento, el flujo de sonido se detiene cuando la película se detiene. Un ejemplo de flujo de sonido puede ser la voz de un personaje animado fotograma a fotograma.

10.2 Importación de sonidos

Flash admite la importación de los principales formatos de archivos de sonido: WAV, AIFF y MP3. Flash almacena los sonidos en la Biblioteca al igual que los mapas de bits y los símbolos. En el archivo Flash sólo se guarda una copia del sonido aunque éste puede usarse en distintos momentos de la película y definiendo para cada instancia diferentes propiedades: efectos, sincronización, etc.

Para importar un sonido a una película Flash:

1.

Elige Archivo > Importar > Importar a biblioteca 2.

En el cuadro de diálogo Importar, localiza en la carpeta Curso Flash/sound el archivo clic.wav

3.

Selecciónalo y haz clic en el botón Abrir.

Diseño Flash de recursos web y multimedia para la enseñanza 109

CAPÍTULO 10: SONIDOS

4.

Mediante Ventana > Biblioteca , comprueba que el sonido se ha incorporado a la biblioteca del documento actual.

5.

Para escuchar este sonido selecciónalo en la ventana Biblioteca y haz clic en el botón Reproducir que aparece en la esquina superior derecha sobre el diagrama de su envolvente.

Figura 10.1 Pulsa el botón play para escuchar el sonido en la Biblioteca 10.3 Añadir un sonido a una película

Para añadir un sonido a una película, se asigna un sonido a una capa y se configura las opciones en el Inspector de propiedades. Es aconsejable colocar cada sonido en una capa separada.

1.

Selecciona Insertar > Línea de tiempo > Capa para crear una específica para el sonido. Doble clic sobre su nombre para cambiarlo a Sonido.

2.

Con la nueva capa de sonido seleccionada, arrastra el sonido loop tecno desde la carpeta Sonidos en la biblioteca Ventana > Otros paneles > Bibliotecas comunes > Curso hasta el Escenario. El sonido se añade a la capa activa. Se pueden colocar múltiples sonidos en una capa o en capas que contengan otros objetos. No obstante se recomienda que cada sonido se coloque en una capa separada. Cada capa actúa como un canal de sonido independiente. Los sonidos de todas las capas se mezclan cuando se reproduce la película.

3.

Haz clic en el fotograma nº50 de esa capa y selecciona Insertar > Línea de tiempo > Fotograma clave . Observarás que la onda del sonido elegido se despliega hasta más allá de este fotograma.

4.

Clic en el fotograma nº1. Selecciona Ventana > Propiedades en caso de que no esté visible el Inspector de propiedades. Si el panel no se encuentra totalmente expandido, clic en la cabeza de flecha blanca situada en la esquina inferior derecha del panel para expandirlo.

Diseño Flash de recursos web y multimedia para la enseñanza 110

CAPÍTULO 10: SONIDOS

5.

En el Inspector de Propiedades, en la lista desplegable Sonido aparece seleccionado loop tecno. Aquí se puede cambiar el archivo de sonido del fotograma actual. En esta lista aparecen todos los archivos sonoros incluidos en la Biblioteca de la película actual.

Figura 10.2 Inspector de propiedades del fotograma que contiene el sonido 6.

Elige una opción de sincronización desde el menú emergente Sincronización(Sinc.):

• Evento: utiliza el sonido como un sonido de evento. Una vez comience a reproducirse este sonido, aunque la cabeza lectora alcance el final de la película, seguirá sonando hasta que concluya su duración física. En este caso es de 8 segundos.

• Flujo: utiliza el sonido como un flujo de sonido. Cuando la cabeza lectora alcance el final de la película, el sonido se detendrá.

7.

Elige, por ejemplo, la opción Evento y para probar la configuración selecciona Control > Reproducir. Advierte que el sonido sigue reproduciéndose aunque la cabeza lectora alcance el final. Ahora en el Inspector de propiedades seleccionas la opción Flujo y pruébala mediante Control > Reproducir. En este caso el sonido se corta cuando la cabeza lectora llega al final.

Se puede conseguir que un sonido se repita un número concreto de veces: 1.

Abre un archivo nuevo de película mediante Archivo > Nuevo 2.

Pincha y arrastra hasta el escenario el sonido cámara fotos desde la carpeta Sonidos en Ventana > Otros paneles > Bibliotecas comunes > Curso.

3.

Clic sobre el fotograma nº1.

4.

Si el Inspector de propiedades no está visible, selecciona Ventana > Propiedades. Mostrará las propiedades del fotograma que hemos seleccionado previamente.

5.

Elige como opción de Sincronización (Sinc.) : Evento. No se recomienda hacer ciclos con sonidos de flujo.

6.

En la lista desplegable situada a la derecha, selecciona la opción Repetir y en la casilla siguiente un valor que especifique el número de veces que el sonido debe repetirse. En este caso introduce el valor 5. Ejemplo: Para conseguir un ciclo de un sonido de 15 segundos durante 6 minutos, introduce 24 (24x15=360 s. = 6 min.). Para una reproducción contínua elige la opción Reproducir indefinidamente en lugar de Repetir.

Diseño Flash de recursos web y multimedia para la enseñanza 111

CAPÍTULO 10: SONIDOS

7.

Para probar el sonido definido, selecciona Control > Probar película .

De esta forma en este caso hemos conseguido rellenar un espacio sonoro de 3,5 segundos con un mismo sonido de duración física 0,7

Nota: Observa que el sonido de evento se reproduce el número de veces expresado aunque la película sólo contenga un fotograma de duración.

10.4 Detener o iniciar sonidos en fotogramas

clave

La tarea con sonidos más habitual en Flash es la de empezar y terminar un sonido utilizando fotogramas clave de inicio y final para sincronizarlo con la animación.

1.

Pincha y arrastra al escenario el sonido loop tecno desde la carpeta Sonidos en Ventana > Otros paneles > Bibliotecas comunes > Curso.

2.

Haz clic en el fotograma nº40 de esa capa y selecciona Insertar > Línea de tiempo > Fotograma clave.

3.

Clic en el fotograma nº1 . Selecciona Ventana > Propiedades en caso de que el Inspector de propiedades no se encuentre visible. Haz clic en la cabeza de flecha blanca que aparece en la esquina inferior derecha del panel para expandirlo.

4.

En el Inspector de Propiedades, en la lista desplegable Sonido aparece seleccionado loop tecno.

5.

Elige como opción de sincronización desde el menú emergente Sincronización(Sinc.): Inicio. Es igual que Evento pero si el sonido ya está reproduciéndose, NO se iniciará una nueva instancia.

6.

Clic sobre el fotograma nº40.

7.

En el Inspector de Propiedades selecciona loop tecno en la lista emergente Sonido y Detener como opción de Sincronización 8.

Para probar la configuración selecciona Control > Reproducir. Observa que cuando la cabeza lectora alcanza el fotograma nº40, el sonido se detiene.

Diseño Flash de recursos web y multimedia para la enseñanza 112

CAPÍTULO 10: SONIDOS

Figura 10.3 Fotogramas para iniciar y detener un sonido 10.5 Añadir sonido a un botón

Se puede asociar sonidos con los diferentes estados de un símbolo de botón. Los sonidos se almacenan con el símbolo, por lo que funcionan en todas las instancias de éste.

1.

Arrastra hasta el escenario el botón sonido desde la carpeta Botones en Ventana > Otros paneles > Bibliotecas Comunes > Curso.

2.

Clic derecho sobre este botón y selecciona Edición en el menú contextual que se despliega para entrar en el modo edición de este símbolo.

3.

En la Línea de tiempo del botón, añade una capa de sonido mediante Insertar > Línea de tiempo > Capa

4.

Haz doble clic sobre el nombre de esta capa para introducir por teclado un nuevo nombre: Sonido.

5.

Para añadir un sonido cuando el botón está presionado, haz clic sobre el fotograma Presionado de la capa Sonido.

6.

Selecciona Insertar > Línea de tiempo > Fotograma clave para añadir un fotograma clave en esta posición. Este fotograma aparece seleccionado.

7.

Pincha y arrastra desde la carpeta Sonidos en la biblioteca de Curso el sonido aullido lobo.

8.

Clic en el fotograma Presionado de la capa Sonido.

9.

Selecciona Ventana > Propiedades para visualizar el Inspector de propiedades. Advierte que en la lista desplegable Sonido aparece seleccionado el sonido de aullido lobo.

10.

Asegúrate de que la opción de sincronización Evento está seleccionada.

Es la opción por defecto.

11.

Clic en Edición > Editar documento para salir del modo edición de símbolo.

12.

Comprueba el funcionamiento de este botón en Control > Probar Película

Diseño Flash de recursos web y multimedia para la enseñanza 113

CAPÍTULO 10: SONIDOS

Figura 10.4 Asignación de un sonido de evento al estado Presionado de un botón 10.6 Controles de edición de sonidos

1.

Selecciona Insertar > Línea de tiempo > Capa para crear una capa para el sonido

2.

Con la nueva capa de sonido seleccionada, arrastra el sonido loop tecno desde la carpeta Sonidos en la biblioteca Ventana > Otros paneles > Bibliotecas Comunes > Curso al Escenario. El sonido se añade a la capa activa.

3.

Insertar > Línea de tiempo > Fotograma clave en la posición nº

50 de esa capa.

4.

Clic en el fotograma nº1

5.

Si no estuviera visible el Inspector de propiedades, selecciona Ventana

> Propiedades.

6.

Elige una opción de efecto en el menú emergente Efectos :

• Ninguno: no aplica ningún efecto al archivo de sonido. Elige esta opción para eliminar efectos aplicados con anterioridad.

• Canal izquierdo/Canal derecho: sólo reproducen el sonido en el canal izquierdo/derecho.

• Desvanecimiento de izda a dcha/Desvanecimiento de dcha a izda: mueven el sonido de un canal a otro.

• Aumento progresivo: incrementa de forma paulatina la amplitud de un sonido.

• Desvanecimiento: reduce de forma paulatina la amplitud de un sonido.

7.

Para probar cómo se escucha el efecto introducido, clic en Control > Reproducir

Diseño Flash de recursos web y multimedia para la enseñanza 114

CAPÍTULO 10: SONIDOS

Figura 10.5 Efectos de sonido

El efecto sólo se aplica a la instancia del sonido que arrancamos en el fotograma nº1. Es el fotograma que hemos seleccionado previamente antes de proceder a establecer su efecto. El sonido original se conservará en el símbolo loop tecno de la biblioteca. Es posible usar otra instancia del mismo sonido en otro fotograma de la película, estableciendo un efecto completamente distinto.

Para definir un efecto de sonido más personalizado:

1.

Clic en el fotograma nº1 para seleccionar esa instancia del símbolo loop tecno

2.

En la lista desplegable Efecto selecciona la opción Personalizado o bien haz clic en el botón Editar... que aparece al lado.

3.

En el cuadro de diálogo Editar envolvente se pueden realizar las siguientes operaciones:

• Para cambiar los puntos inicial o final del sonido, arrastra los controles de comienzo y final en este panel.

• Para cambiar la envolvente del sonido, arrastra los selectores de envolvente para modificar los niveles en los distintos puntos del sonido.

Las líneas envolventes muestran el volumen del sonido al reproducirse.

Para crear selectores de envolvente adicionales (hasta 8 en total), clic en las líneas envolventes. Para eliminarlos, arrástralos fuera de la ventana.

• Para ver una parte mayor o menor del sonido en la ventana, haga clic en los botones de Aumento o Reducción.

• Para cambiar la unidad de tiempo de segundos a fotogramas, clic en los botones Segundos (icono de reloj) o Fotogramas (icono de celuloide).

4.

Para escuchar cómo queda el sonido una vez editado, haz clic en el botón Reproducir que aparece en el cuadro de diálogo Editar envolvente.

5.

Clic en el botón Aceptar

Diseño Flash de recursos web y multimedia para la enseñanza 115

CAPÍTULO 10: SONIDOS

Figura 10.6 Edición personalizada de la envolvente del sonido Diseño Flash de recursos web y multimedia para la enseñanza 116

CAPÍTULO 11: ANIMACIONES

Capítulo

11

Animaciones

11.1 La animación con Flash

ara crear animación en una película Flash, se modifica el contenido de fotogramas sucesivos. Flash ofrece dos maneras de crear secuencias de animación: fotograma a fotograma y por interpolación.

P En la animación fotograma a fotograma, el diseñador crea la imagen de cada fotograma.

En la animación por interpolación, el diseñador crea los fotogramas inicial y final, y Flash genera automáticamente los fotogramas intermedios. La animación interpolada es una forma eficaz de crear movimiento y cambios a lo largo del tiempo y de reducir el tamaño del archivo.

11.2 La línea de tiempo

La Línea de tiempo organiza y controla el contenido de una película a través del tiempo, en capas y fotogramas. Los componentes principales de la Línea de tiempo son las capas, los fotogramas y la cabeza lectora.

Vamos a abrir la película natura.fla contenida en la carpeta Curso Flash/ejemplos para observar detal es de su línea de tiempo.

1.

Mediante Archivo > Abrir busca y selecciona el archivo natura.fla.

2.

Haciendo clic sobre los extremos de la barra de desplazamiento horizontal de la Línea temporal podrás observar todos los fotogramas de sus respectivas capas.

3.

Los nombres de las capas de la película aparecen en una columna situada a la izquierda de la línea de tiempo. Los fotogramas contenidos en cada capa se organizan secuencialmente en una fila a la derecha del nombre de la capa. El encabezado de la Línea de tiempo indica el número de fotograma. La cabeza lectora apunta al fotograma actual que se muestra en el Escenario.

Diseño Flash de recursos web y multimedia para la enseñanza 117

CAPÍTULO 11: ANIMACIONES

Figura 11.1 La línea de tiempo

4.

La información de estado de la Línea de tiempo situada en la parte inferior de la misma indica el número de fotograma actual, la velocidad de fotogramas y el tiempo transcurrido hasta el fotograma actual.

5.

Para visualizar la película sin perder de vista la línea de tiempo, elige Control > Reproducir. Observa que la cabeza lectora lee en cada instante simultáneamente el fotograma de todas y cada una de las capas. Para visualizar la película tal y como quedará en el reproductor, selecciona Control >Probar película.

Un fotograma clave es un tipo de fotograma en el que el diseñador dibuja la imagen utilizando las herramientas que le proporciona Flash. En la animación fotograma a fotograma, cada fotograma es clave. En la interpolada, se definen fotogramas clave en puntos importantes y Flash genera automáticamente el contenido de los intermedios.

11.3 Interpolación de movimiento I : el vuelo de un

águila

En la interpolación de movimiento, el diseñador define la posición, el tamaño y la rotación de un objeto sobre el escenario en un fotograma clave inicial. Estas propiedades las modifica en el fotograma clave final. Flash generará sobre el escenario la secuencia de transición de un estado a otro.

Diseño Flash de recursos web y multimedia para la enseñanza 118

CAPÍTULO 11: ANIMACIONES

Figura 11.2 Simbolo del águila sobre el escenario.

En este ejemplo vamos a diseñar el vuelo de un águila.

1.

Cuando se abre un archivo de película nueva mediante Archivo > Nuevo, Flash se sitúa en la capa actual Capa 1 y en ella sitúa en la posición nº 1 un fotograma clave (rectángulo con punto hueco en su base) a la espera de rellenarlo con alguna imagen.

2.

Arrastra una instancia del símbolo gráfico Águila desde la carpeta Gráficos en Ventana > Otros paneles > Bibliotecas comunes > Curso. Sitúa el águila en la esquina inferior izquierda del escenario.

Observa que el fotograma clave ahora muestra un punto negro indicando que ya contiene una imagen.

3.

Crea un segundo fotograma clave (fotograma clave final) donde desees que concluya la animación. Por ejemplo, haz clic sobre el fotograma nº

30 de esa capa. Una vez seleccionado, elige la opción Insertar > Línea de tiempo > Fotograma Clave. Otra opción es hacer directamente clic derecho sobre el fotograma nº 30 y seleccionar Insertar fotograma clave en el menú contextual que se despliega. Flash automáticamente rellena ese nuevo fotograma clave con el contenido del anterior.

4.

Asegúrate que está seleccionado el fotograma nº 30. Ahora pincha y arrastra el águila para moverlo hasta la esquina superior derecha del escenario.

5.

También puedes reducir su tamaño. Utiliza la herramienta Transformación libre (Q) y su opción Escalar. Arrastra el selector de la esquina superior derecha del águila.

6.

Advierte que los cambios de posición y tamaño sólo afectan al fotograma clave nº 30. Al hacer clic en la línea de tiempo sobre el fotograma clave nº 1, se observa la posición y tamaño inicial del objeto.

7.

Clic sobre el fotograma clave nº1. Si el Inspector de Propiedades no está visible, selecciona Ventana > Propiedades.

8.

En la lista desplegable Animar del Inspector de propiedades selecciona Movimiento. Éste es el tipo de interpolación que vamos a utilizar.

Diseño Flash de recursos web y multimedia para la enseñanza 119

CAPÍTULO 11: ANIMACIONES

Figura 11.3 Inspector de propiedades del fotograma inicial 9.

Activa la casilla Escalar para interpolar el cambio de tamaño del elemento seleccionado.

10.

En la lista desplegable Aceleración arrastra el deslizador o se introduce un valor para ajustar la velocidad del cambio entre fotogramas interpolados:

• Para empezar la interpolación de movimiento lentamente y acelerar hacia el final de la animación, arrastra el deslizador hacia abajo o introduce un valor entre -1 y -100. Nota que aparece la etiqueta Dentro.

• Para empezar la interpolación de movimiento rápidamente y ralentizar hacia el final de la animación, arrastra el deslizador hacia arriba o introduce un valor entre 1 y 100. Aparece la etiqueta Fuera.

La velocidad de cambio predeterminada entre los fotogramas interpolados es constante. La opción Aceleración crea una apariencia más natural de aceleración o ralentización ajustando gradualmente la velocidad de cambio.

11.

Al concluir estas tareas en la capa actual los fotogramas clave están indicados por un punto negro mientras que los fotogramas intermedios muestran una flecha negra sobre fondo azul claro.

Figura 11.4 Representación de una animación de movimiento por interpolación en la línea de tiempo Si se elimina el fotograma clave final esta flecha se transforma en una línea discontinua.

Figura 11.5 No hay interpolación porque falta fotograma final 12.

Para visualizar la animación resultante selecciona Control > Reproducir o bien Control > Probar Película.

Diseño Flash de recursos web y multimedia para la enseñanza 120

CAPÍTULO 11: ANIMACIONES

Nota: El objeto que se anima por interpolación debe encontrarse solo en una capa. Es posible animar simultáneamente varios objetos sobre el escenario si se sitúa cada uno en una capa distinta. Esta es la razón más importante que justifica el uso de capas en Flash.

11.4 Interpolación de movimiento II: la rueda que

gira

En este ejemplo diseñaremos una animación en la cual una rueda gira y aumenta de tamaño.

1.

Cuando se abre un archivo de película nueva mediante Archivo > Nuevo, Flash se sitúa en la capa actual Capa 1 y en ella sitúa en la posición nº 1 un fotograma clave (rectángulo con punto hueco en su base) a la espera de rellenarlo con alguna imagen.

2.

Arrastra una instancia de un símbolo desde la carpeta Gráficos en Bibliotecas Comunes-Curso: Ventana > Otros paneles > Bibliotecas comunes > Curso. Por ejemplo el símbolo gráfico Rueda. Sitúalo en el centro del escenario.

3.

Crea un segundo fotograma clave donde desees que termine la animación. Clic sobre el fotograma nº 30, por ejemplo, de esa capa. Una vez seleccionado elegir la opción Insertar > Línea de tiempo > Fotograma clave o bien clic derecho para seleccionar Insertar fotograma clave.

4.

Asegúrate que está seleccionado el fotograma nº 30. Ahora utilizando el panel Transformar vamos a realizar algunos cambios en esta rueda del fotograma clave final. Selecciona Ventana > Paneles de diseño > Transformar.

5.

Activa la casilla Restringir para que el aumento de escala sea proporcional en altura y anchura.

6.

Introduce el valor 200% en Escala y 180 grados en Girar. Para concluir pulsa la tecla <enter> y cierra el panel Transformar.

Figura 11.6 Modificación de la escala y giro de la instancia usando el panel Transformar Diseño Flash de recursos web y multimedia para la enseñanza 121

CAPÍTULO 11: ANIMACIONES

7.

Clic para volver a seleccionar el fotograma nº1 en la línea de tiempo.

Selecciona Insertar > Línea de tiempo > Crear interpolación de movimiento. Al concluir estas tareas en la capa actual los fotogramas clave están indicados por un punto negro mientras que los fotogramas intermedios muestran una flecha negra sobre fondo azul claro.

8.

Para visualizar la animación seleccionar Control > Reproducir o bien Control > Probar Película.

9.

Si deseas modificar algún parámetro de la animación por interpolación, clic sobre el fotograma clave inicial y realiza los cambios oportunos sobre el Inspector de Propiedades.

10.

Pulsa y arrastra el deslizador de la casilla Aceleración o introduce un valor para ajustar la velocidad del giro entre fotogramas interpolados:

• Para empezar la interpolación de movimiento lentamente y acelerar la interpolación hacia el final de la animación, arrastra el deslizador hacia abajo o introduce un valor entre -1 y -100. (dentro)

• Para empezar la interpolación de movimiento rápidamente y ralentizar la interpolación hacia el final de la animación, arrastre el deslizador hacia arriba o introduce un valor entre 1 y 100. (fuera) La velocidad de cambio predeterminada entre los fotogramas interpolados es constante. La opción Aceleración crea una apariencia más natural de aceleración o ralentización ajustando gradualmente la velocidad de cambio.

Figura 11.7 Inspector de propiedades del fotograma inicial 11.

Elige una opción de la lista desplegable Girar:

• Ninguno: Es la configuración predeterminada. Para no aplicar ninguna rotación.

• Auto (Automática): para girar el objeto una vez en la dirección que requiera el movimiento menor.

• Horario o Antihorario (Sentido de las agujas del reloj o sentido contrario): para girar el objeto como corresponda y luego introduce un número en la casilla veces para especificar el número de rotaciones. Por ejemplo 2 veces.

Estas 2 opciones permiten alterar el sentido del giro.

12.

Para visualizar la animación resultante selecciona Control > Reproducir o bien Control > Probar Película. A continuación vamos a añadir un nuevo movimiento.

Diseño Flash de recursos web y multimedia para la enseñanza 122

CAPÍTULO 11: ANIMACIONES

13.

Clic en fotograma nº50 e inserta un fotograma clave mediante Insertar

> Línea de tiempo > Fotograma Clave

14.

Nota que la rueda aparece seleccionada en este nuevo fotograma clave.

Selecciona Ventana > Paneles de diseño > Transformar.

15.

En el panel Transformar, activa la casilla Restringir para que la disminución de escala sea proporcional en altura y anchura.

16.

Restaura el valor 100 en Escala y deja el valor 180 introducido con anterioridad. Para concluir pulsa la tecla <enter> y cierra el panel Transformar.

17.

Clic en el fotograma clave situado en el fotograma nº 30 e introduce una interpolación de movimiento mediante Insertar > Línea de tiempo > Crear interpolación de movimiento.

18.

Para ver la animación completa selecciona Control > Reproducir o bien Control > Probar película.

11.5 Interpolación de cambio de color: el

fantasma

En este ejemplo, diseñaremos una animación en la cual un fantasma desaparece o cambia de color.

Figura 11.8 El punto de registro se sitúa en el centro del símbolo 1.

Arrastra una instancia de un símbolo desde Bibliotecas Comunes-Curso: Ventana > Otros paneles > Bibliotecas comunes > Curso > Gráficos. Por ejemplo el símbolo gráfico Fantasma. Sitúalo en el centro del escenario.

2.

Crea un segundo fotograma clave donde desees que termine la animación. Clic sobre el fotograma nº 30, por ejemplo, de esa capa. Una vez seleccionado elegir la opción Insertar > Línea de tiempo > Fotograma clave o bien clic derecho para seleccionar Insertar fotograma clave. Advierte que este fotograma está seleccionado. En el Inspector de Propiedades aparece la información relativa al Fotograma seleccionado.

3.

Haz clic sobre la instancia del fantasma en el fotograma nº30. El Inspector de propiedades ahora muestra la información de la instancia seleccionada y no del fotograma.

Diseño Flash de recursos web y multimedia para la enseñanza 123

CAPÍTULO 11: ANIMACIONES

Figura 11.9 Inspector de propiedades de la instancia del objeto seleccionado 4.

En el menú desplegable Color selecciona la opción Alfa . Pincha y arrastra el deslizador hasta el 0% . Nota que el fantasma se ha hecho invisible. Otro efecto distinto puede ser con la opción Tinta, 50% y tinta de color rojo.

5.

Clic para volver a seleccionar el fotograma inicial en la Línea de Tiempo.

Selecciona Insertar > Línea de tiempo > Crear interpolación de movimiento.

6.

Para visualizar la animación seleccionar Control > Reproducir o bien Control > Probar Película.

11.6 Animaciones fotograma a fotograma

En la animación fotograma a fotograma se cambia el contenido del escenario en cada fotograma. Es idóneo para las animaciones complejas en las que la imagen cambia en cada fotograma además de moverse. Este tipo de animación genera archivos más grandes que por interpolación.

Figura 11.10 Símbolo dance01

1.

Arrastra una instancia del símbolo dance01 desde la carpeta Gráficos/Baile en Ventana > Otros paneles > Bibliotecas comunes > Curso hasta el escenario.

2.

Con la instancia de dance1 seleccionada en el escenario, introduce 50

como valores en las casillas X e Y del Inspector de propiedades. De esta forma este elemento se situará en un mismo sitio del escenario.

Diseño Flash de recursos web y multimedia para la enseñanza 124

CAPÍTULO 11: ANIMACIONES

Figura 11.11 Sitúa con precisión el objeto introduciendo las coordenadas X e Y

3.

Clic en el siguiente fotograma hacia la derecha de la misma capa.

Selecciona Insertar > Línea de tiempo > Fotograma clave vacío o bien clic derecho sobre el fotograma para seleccionar la opción Insertar fotograma clave vacío en el menú contextual. Repite los pasos 1 y 2

para ir insertando en cada nuevo fotograma clave un nuevo símbolo de la carpeta Baile: dance02, dance03, etc. hasta crear el movimiento completo.

4.

Para visualizar la animación completa seleccionar Control > Reproducir o bien Control > Probar Película.

Figura 11.12 Detal e de la línea de tiempo de una animación fotograma a fotograma 11.7 Interpolación de movimiento utilizando capa

guía

Las capas de guía de movimiento permiten dibujar trazados no visibles al usuario a lo largo de los cuales se mueven objetos en el escenario. Se pueden vincular varias capas a una capa de guía de movimiento para hacer que varios objetos sigan el mismo trazado. Al vincular una capa normal a una capa de guía de movimiento se convierte en un tipo de capa con guía.

1.

Doble clic sobre el nombre de la Capa 1 para cambiar su nombre: Escribe Fondo y luego pulsa <enter>

2.

Abre la Biblioteca común Curso: Ventana > Otros paneles > Bibliotecas comunes> Curso. Desde la carpeta Gráficos , arrastra una instancia del símbolo colmena hasta el borde izquierdo del escenario y una instancia del símbolo flor hasta el extremo derecho.

Diseño Flash de recursos web y multimedia para la enseñanza 125

CAPÍTULO 11: ANIMACIONES

Figura 11.13 Botón Insertar capa en la base de la Línea de Tiempo 3.

Añade una nueva capa siguiendo uno de estos métodos:

• Clic derecho sobre el nombre de la Capa Fondo y seleccionar Insertar capa en el menú contextual

• Clic en el botón Nueva Capa en la esquina inferior derecha de la Línea de tiempo.

• Insertar > Línea de tiempo > Capa

4.

Doble clic sobre el nombre de la Capa 2 para cambiar su nombre: Escribe Abeja y luego pulsa <enter>. Arrastra una instancia del símbolo Abeja hasta el centro del escenario en esta capa.

Figura 11.14 Situación de la colmena y la flor en el ejercicio 5.

En la capa Abeja crea un fotograma clave en la posición nº 30. Clic en este fotograma y seleccionar Insertar > Línea de tiempo > Fotograma clave.

6.

En la capa Fondo crea un fotograma en la posición nº30. Clic en este fotograma y seleccionar Insertar > Línea de tiempo > Fotograma.

7.

Clic para seleccionar el fotograma 1 de la capa Abeja. Selecciona la herramienta Flecha, pincha y arrastra la abeja para situarla sobre la flor.

8.

Clic para seleccionar el fotograma 30 de la capa Abeja. Selecciona la herramienta Flecha, pincha y arrastra la abeja para situarla sobre la colmena.

Diseño Flash de recursos web y multimedia para la enseñanza 126

CAPÍTULO 11: ANIMACIONES

Figura 11.15 Botón Añadir guía de movimiento

9.

Para crear una capa guía asociada a la capa "Abeja", puedes optar por uno de los siguientes procedimientos:

• Selecciona la capa que contiene la animación y eliges Insertar > Guía de movimiento

• Clic con el botón derecho del ratón en la capa que contiene la animación y elige Añadir Guía de Movimiento en el menú contextual que se despliega.

• Clic en el botón Añadir guía de movimiento

Flash crea una nueva capa sobre la seleccionada con el icono de guía de movimiento a la izquierda del nombre de la capa.

10.

Selecciona el fotograma 1 de la capa guía. Utilizando la herramienta Lápiz dibuja una trayectoria curva desde la flor a la colmena. Elige previamente la opción Suavizar del Lápiz en la caja de herramientas para conseguir bordes más suaves en la trayectoria dibujada.

11.

En la capa Abeja haz clic sobre el fotograma 1. Selecciona la herramienta Flecha, clic en la abeja y haz clic en el modificador Ajustar a objetos.

Figura 11.16 Modificador Ajustar a objetos de la herramienta Flecha 12.

Arrastra el símbolo por su punto de registro hasta ajustar el centro del símbolo animado al comienzo de la línea en este primer fotograma.

13.

Repite esta operación para ajustar el centro del símbolo al final de la línea en el último fotograma de la capa Abeja. El centro del símbolo adquiere la apariencia de un anillo negro cuando está correctamente ajustado.

Diseño Flash de recursos web y multimedia para la enseñanza 127

CAPÍTULO 11: ANIMACIONES

Figura 11.17 Aspecto de anillo negro que toma el punto de registro del objeto Nota: La operación de enganchar el objeto con el principio y final de la trayectoria requiere bastante pericia con el ratón. A veces el anillo negro no se consigue ver porque no se arrastra el objeto precisamente por su punto de registro. Si tienes bien cogido el objeto, observa cómo éste efectúa un pequeño saltito, como si fuese un imán, para pegarse al acercarlo a la línea trayectoria. Esto es un indicio de que la operación se ha realizado con éxito.

14.

Crea una secuencia de animación interpolada de movimiento mediante: Selecciona el fotograma nº 1 de la capa Abeja y a continuación clic derecho y Crear interpolación de movimiento o bien Insertar > Línea de tiempo > Crear interpolación de movimiento.

15.

En el Inspector de Propiedades activa la casilla Orientar según trazado para que la línea base del símbolo interpolado se oriente hacia el trazado de movimiento. Activa también la casilla Ajustar, para que el punto de registro del elemento interpolado se ajuste al trazado de movimiento.

16.

Para visualizar la animación completa selecciona Control > Reproducir o bien Control > Probar Película.

Figura 11.18 Visualización con papel cebolla de la animación resultante Diseño Flash de recursos web y multimedia para la enseñanza 128

CAPÍTULO 11: ANIMACIONES

Nota: Se recomienda seguir el orden sugerido en este apartado para el diseño con capas guía. Puedes realizar otro ejercicio similar utilizando el símbolo autoloco en la carpeta Gráficos o bien el símbolo avión en la carpeta Clips de película de la biblioteca común Curso.

11.8 Papel Cebolla

Por defecto, Flash sólo muestra en el escenario el fotograma de la Línea de Tiempo sobre el que está situado la cabeza lectora. Sin embargo es posible ver varios fotogramas de una animación en el escenario de forma simultánea utilizando la edición con papel cebolla.

Con la animación del vuelo de la abeja diseñada en el apartado anterior, puedes experimentar las distintas opciones de visualización utilizando el papel cebolla: Figura 11.19 Botones para controlar la visualización de la animación con Papel Cebolla 1.

Clic en el botón Papel cebolla de la línea de tiempo. Todos los fotogramas entre los marcadores de Inicio y Fin de Papel Cebolla (en el encabezado de la línea de tiempo) aparecerán superpuestos en el escenario. El fotograma situado bajo el cabezal de lectura aparece en color normal mientras que los fotogramas anteriores y posteriores aparecen atenuados.

2.

Para ver los fotogramas de papel cebolla como contornos, haz clic en el botón Contornos de papel cebolla.

3.

Para cambiar la posición de los marcadores de Inicio y Fin de Papel Cebolla, arrastra el puntero correspondiente hasta una nueva posición.

Los marcadores se mueven de forma conjunta cuando se desplaza la cabeza lectora.

4.

Si deseas editar todos los fotogramas situados entre los marcadores de papel cebolla, haz clic previamente en el botón Editar varios Diseño Flash de recursos web y multimedia para la enseñanza 129

CAPÍTULO 11: ANIMACIONES

fotogramas. Si la capa está bloqueada no se mostrará en el escenario al hacer clic sobre el botón Papel cebolla.

5.

Para cambiar los marcadores de papel cebolla, hacer clic en el botón Modificar marcadores de papel cebolla y selecciona una opción en la lista que se despliega:

• Siempre mostrar los marcadores: Muestra los marcadores en el encabezado de la línea de tiempo, esté activada o no la opción Papel cebolla.

• Definir papel transparente: con esta opción se anclan los marcadores de papel cebolla de tal forma que no se desplazan en conjunto cuando lo hace el puntero sobre el fotograma actual.

• Papel cebolla 2, 5 o todo: Muestra 2, 5 o todos los fotogramas a cada lado del fotograma actual.

Figura 11.20 Opciones de los marcadores de Papel Cebol a Diseño Flash de recursos web y multimedia para la enseñanza 130

CAPÍTULO 11: ANIMACIONES

1.9 Interpolación de cambio de forma I: del

círculo al cuadrado

Flash puede realizar por interpolación la animación de una silueta que cambia de forma en el transcurso del tiempo.

Figura 11.21 Inspector de propiedades de la forma círculo 1.

Crea la imagen del primer fotograma de la secuencia. Para crear la forma, utiliza una de las herramientas de dibujo. Traza, por ejemplo, un círculo con relleno.

2.

Doble clic sobre el círculo para seleccionar su trazo y su relleno. En el Inspector de propiedades define los siguientes parámetros: An (anchura) 100 y de Al (altura) 100 y situado en la posición X e Y

(200,200) del escenario.

3.

Crea otro fotograma clave a una distancia de tantos fotogramas hacia la derecha como desees agregar: Insertar > Línea de tiempo > Fotograma Clave Vacío en la posición nº 20, por ejemplo.

4.

Crea la imagen del último fotograma de la secuencia. Puede ser otra imagen distinta, por ejemplo, un cuadrado con relleno. También puede ser la imagen original pero modificada.

5.

Doble clic sobre el cuadrado para seleccionar su trazo y su relleno. En el Inspector de propiedades puedes definir los siguientes parámetros: anchura 100 y de altura 100 y situado en la posición (200,200) del escenario. Con ello se consigue que la silueta cambie de forma pero que no desplace su posición sobre el escenario.

6.

Clic para seleccionar el primer fotograma clave.

7.

En la lista desplegable Animar selecciona la opción de interpolación

Forma. Observa que al realizar esta selección en la línea de tiempo la interpolación de forma aparece representada por una flecha del fotograma inicial al final sobre fondo verde claro.

Diseño Flash de recursos web y multimedia para la enseñanza 131

CAPÍTULO 11: ANIMACIONES

Figura 11.22 Representación de la animación de cambio de forma por interpolación 8.

Ajusta el valor en la casilla Aceleración.

9.

Elige una opción para Mezcla:

• Distributivo: crea una animación con formas intermedias suaves y regulares.

• Angular: crea una animación que mantiene las esquinas y líneas rectas en las formas intermedias.

Figura 11.23 En el Inspector de propiedades del fotograma inicial se pueden configurar parámetros de la animación por interpolación: aceleración, mezcla, etc.

10.

Para visualizar la animación completa seleccionar Control > Reproducir o bien Control > Probar Película.

11.10 Interpolación de cambio de forma II: del

uno al dos

1.

Crea la imagen del primer fotograma de la secuencia: Selecciona la herramienta Texto; en el Inspector de propiedades define un tamaño de fuente de 120 puntos y sitúa un "1" en el centro del escenario.

2.

Flash no puede cambiar la forma mediante interpolación de grupos, símbolos, bloques de texto ni imágenes de mapas de bits. Es necesario transformar estos objetos en simples formas en el escenario. Selecciona la herramienta Flecha y a continuación haz clic sobre el cuadro de texto que contiene el "1"

3.

Selecciona Modificar > Separar. Observa que tras realizar esta operación el Inspector de propiedades indica que se trata de una forma y no ya un cuadro de texto.

4.

Ajusta su posición al punto (200,200) del escenario, introduciendo estos valores en las casillas X e Y del Inspector de propiedades.

5.

Crea otro fotograma clave a una distancia de tantos fotogramas hacia la derecha como desees agregar: Insertar > Línea de tiempo > Fotograma Clave Vacío en la posición nº 20

6.

Sobre este fotograma repite los pasos anteriores del 1 al 4 para situar un

"2"

Diseño Flash de recursos web y multimedia para la enseñanza 132

CAPÍTULO 11: ANIMACIONES

7.

Clic para seleccionar el primer fotograma clave.

8.

En la lista desplegable Animar selecciona la opción de interpolación

Forma.

9.

Ajusta el valor en la casilla de Aceleración.

10.

Elige una opción para Mezcla:

• Distributivo: crea una animación con formas intermedias suaves y regulares.

• Angular: crea una animación que mantiene las esquinas y líneas rectas en las formas intermedias.

Figura 11.24 Inspector de propiedades del fotograma inicial 11.

Para visualizar la animación completa seleccionar Control > Reproducir o bien Control > Probar Película.

11.11 Capas Máscara

Una capa máscara es un tipo de capa donde los elementos que contiene: formas, instancias de símbolos, etc definen áreas o agujeros a través de los cuales es visible el contenido de la capa situada debajo.

Las formas y símbolos de una capa máscara admiten animación. Por ello las capas máscara se suelen utilizar para obtener el efecto de foco y de transiciones. Vamos a diseñar una animación que muestre un efecto de foco luminoso sobre la palabra Bienvenidos.

1.

Mediante Modificar > Documento despliega el cuadro de diálogo Propiedades del documento. En el menú desplegable Color de fondo selecciona el color negro.

Diseño Flash de recursos web y multimedia para la enseñanza 133

CAPÍTULO 11: ANIMACIONES

Figura 11.25 Configuración de las propiedades de la película 2.

Selecciona la herramienta Texto. En el Inspector de propiedades define como Color de relleno de caracteres el color blanco y como tamaño de la fuente 60 puntos. Clic en el centro del escenario y escribe

“Bienvenidos” .

3.

Elige la herramienta Flecha, pincha y arrastra este cuadro de texto para situarlo en el centro del escenario.

4.

Con la capa seleccionada, elige Insertar > Línea de tiempo > Capa para crear una capa nueva encima. Esta nueva capa será la máscara.

5.

Haz clic derecho sobre el nombre de la capa de máscara en la Línea de Tiempo y elige Máscara en el menú contextual. La capa se convierte en una capa de máscara, señalada por un icono de capa máscara. La capa situada inmediatamente debajo está vinculada a la capa de máscara y se muestra su contenido a través del área rel ena en la máscara. El nombre de capa de máscara aparece con sangría y su icono cambia.

6.

Desbloquea la capa máscara antes de editarla.

7.

En la capa máscara, dibuja un círculo seleccionando previamente la herramienta Óvalo. Una capa de máscara siempre cubre la capa situada debajo, por tanto asegúrate de crear la capa de máscara en el lugar correcto. Puedes dibujar una forma rellena, colocar un texto o crear una instancia de un símbolo en la capa de máscara. Flash ignora los mapas de bits, degradados, transparencias, colores y estilos de línea en una capa de máscara. Todas las áreas rellenas de una máscara son transparentes; y las áreas no rellenas son opacas

8.

Selecciona la herramienta Flecha y haz doble clic sobre el óvalo dibujado. A continuación selecciona Modificar > Convertir en símbolo . En el cuadro de diálogo Convertir en símbolo define como nombre del símbolo: Foco y como comportamiento Gráfico. Clic en Aceptar. La animación de movimiento por interpolación sólo se puede aplicar a instancias de símbolos luego es necesario convertir este forma circular sobre el escenario en un símbolo.

9.

Arrastra este nuevo símbolo para situarlo a la izquierda y a la misma altura del rótulo que dice Bienvenidos.

10.

Desbloquea la capa que contiene el rótulo de texto y para que el texto se visualice hasta el fotograma nº 20, clic sobre este fotograma en esta Diseño Flash de recursos web y multimedia para la enseñanza 134

CAPÍTULO 11: ANIMACIONES

capa y selecciona Insertar > Línea de tiempo > Fotograma (no es necesario insertar un fotograma clave puesto que el contenido en esta capa no cambia).

11.

Ahora vamos a crear por interpolación la animación de movimiento del foco. Mediante Insertar > Línea de tiempo > Fotograma Clave, crea un fotograma clave en el fotograma nº 20 de la capa máscara. Clic sobre este fotograma. Una vez situado en él desplazar la instancia del Foco al lado derecho del rótulo Bienvenidos manteniendo su altura.

12.

Clic derecho sobre el fotograma 1 de la capa máscara y selecciona Crear interpolación de movimiento. Con esta operación hemos dotado de movimiento por interpolación a la instancia foco dentro de la capa máscara.

13.

Control > Probar película para comprobar el efecto foco diseñado.

Figura 11.26 Aspecto final de la línea de tiempo y el escenario en este ejercicio Nota: Puedes dotar al foco de una animación de aumento de tamaño para simular la apertura del foco sobre este rótulo luminoso.

11.12 Clips de película

Los símbolos de clips de películas son piezas de animación reutilizables que tienen su propia línea de tiempo de varios fotogramas que se reproducen independientemente de la línea de tiempo de la película principal. Un clip de película es como una minipelícula dentro de una película.

1.

Selecciona Insertar > Nuevo Símbolo. Teclea “vuelo” como nombre y activa el botón de radio Clip de película como comportamiento. Clic en Aceptar.

Diseño Flash de recursos web y multimedia para la enseñanza 135

CAPÍTULO 11: ANIMACIONES

2.

Entras en el modo edición del símbolo. Utilizando su particular línea de tiempo, crea una animación por interpolación como la del vuelo de águila, por ejemplo. Para probar la animación debes utilizar Control > Reproducir.

3.

Clic en el nombre Escena 1 para regresar a la película principal.

4.

Pincha y arrastra desde la biblioteca al escenario, el clip de película vuelo.

5.

A continuación selecciona Control > Probar película.

6.

Advierte que la película principal sólo tiene un fotograma pero que el clip de película vuelo está reproduciéndose indefinidamente con independencia de la línea de tiempo principal.

Diseño Flash de recursos web y multimedia para la enseñanza 136

CAPÍTULO 12: ESCENAS

Capítulo

12

Escenas

12.1 Uso de escenas

ara organizar una película se usan las escenas. Por ejemplo, puedes utilizar escenas diferentes para el mensaje de carga, la introducción, el desarrollo, el desenlace y los créditos finales.

P Al publicar una película de Flash que contiene más de una escena, las escenas del archivo SWF se reproducen en una sola secuencia en el orden en el que aparecen en el panel Escena.

La descarga en Internet de una película Flash se realiza siguiendo el orden de reproducción por fotogramas, capas (de abajo hacia arriba o viceversa) y escenas.

Precisamente el mensaje de precarga (“Cargando ...”) que aparece en muchas animaciones web diseñadas con Flash es la primera escena que se reproduce ininterrumpidamente y que no da paso a la siguiente escena hasta que no detecta que ya ha sido bajada a la caché del navegador cliente.

12.2 Una animación por escenas

Vamos a diseñar una película Flash que contenga 3 animaciones distintas. Cada animación se va a situar en una escena diferente. Al reproducir la película, las escenas se visualizarán una a continuación de la otra siguiendo el orden establecido 12.2.1 Configurar las propiedades de la película

1.

Selecciona Modificar > Documento para visualizar el cuadro de diálogo Propiedades del Documento.

2.

En la paleta de colores desplegable Color de fondo selecciona el color negro como color de fondo de nuestra nueva película.

3.

Clic en el botón Aceptar.

Diseño Flash de recursos web y multimedia para la enseñanza 137

CAPÍTULO 12: ESCENAS

Figura 12.1 Configuración de las propiedades de la película 12.2.2 Diseño de la Escena 1

1.

Elige la herramienta Texto. En el Inspector de propiedades, define como fuente Arial, tamaño 36 y color #FFCC33 (hexadecimal de un color amarillo-anaranjado). Clic en la parte superior del escenario para escribir el texto en mayúsculas “CONÉCTATE” .

Figura 12.2 Inspector de propiedades de la herramienta Texto 2.

Selecciona la herramienta Flecha para pinchar y arrastrar este cuadro de texto y centrarlo en la parte superior del escenario.

3.

Añade una nueva capa con Insertar > Línea de tiempo > Capa. En la línea de tiempo aparece una capa con el nombre por defecto Capa 2.

4.

Abre la subcarpeta Conecta dentro de la carpeta Gráficos en la Biblioteca común Curso: Ventana > Otros paneles > Bibliotecas comunes > Curso. Pincha y arrastra al escenario el símbolo Enchufe.

Asegúrate de que esta instancia se ubica en el primer fotograma de Capa 2.

5.

Sobre Capa 2 (la que contiene la imagen), haz clic derecho en el fotograma nº30 y selecciona Insertar Fotograma Clave.

6.

Clic en el fotograma inicial nº1 de la Capa 2. A continuación haz clic sobre la instancia de la imagen. En el Inspector de propiedades, despliega la lista Color, para elegir la propiedad Alfa. Arrastra el deslizador hasta 0% o bien teclea este valor en la casilla adjunta. Otra posibilidad para hacerlo desaparecer es definir la propiedad de color Brillo con un valor de -100%.

Diseño Flash de recursos web y multimedia para la enseñanza 138

CAPÍTULO 12: ESCENAS

Figura 12.3 Escenario tras situar el cuadro de texto y el gráfico enchufe en la escena 1

7.

Clic derecho sobre el fotograma nº1 de Capa 2 y selecciona Crear interpolación de movimiento. Nota que se ha creado una interpolación de movimiento que define una transición de transparencia de 0 al 100 % en la instancia del símbolo enchufe.

8.

Clic derecho en el fotograma nº 45 de Capa 2 y selecciona Insertar Fotograma .No es necesario añadir un fotograma clave porque del 30 al 45 su contenido no varía. Este espacio se muestra en la línea de tiempo sobre fondo gris claro con un punto negro en el extremo izquierdo y un rectángulo hueco en el derecho.

9.

El rótulo “CONÉCTATE” debe ser visible hasta el fotograma nº45. Para ello clic derecho sobre el fotograma nº 45 en Capa 1 y selecciona Insertar Fotograma. La línea de tiempo tendrá el aspecto de la figura.

Figura 12.4 Aspecto final de la línea de tiempo de la Escena 1

10.

Para contemplar la animación contenida en esta escena , elige Control

> Probar Escena.

Diseño Flash de recursos web y multimedia para la enseñanza 139

CAPÍTULO 12: ESCENAS

12.2.3 Diseño de la Escena 2

1.

Clic en Ventana > Paneles de diseño > Escena para visualizar el panel de Escena

Figura 12.5 Panel Escena para trabajar con las escenas que forman la película 2.

Para añadir una nueva escena, sigue uno de estos procedimientos alternativos:

• Clic en el botón Añadir escena del panel Escena.

• Insertar > Escena en la barra de menú principal.

Observa que ha desaparecido la línea de tiempo anteriormente diseñada porque ahora Flash te sitúa en la nueva Escena. En la base izquierda de la línea de tiempo se muestra la etiqueta Escena 2 para indicar al diseñador que esa línea de tiempo corresponde a esta escena.

Figura 12.6 Etiqueta Escena 2 en la esquina inferior izquierda de la línea de tiempo 3.

Para ir a una escena en concreto, haz clic sobre su nombre en el panel Escena. Si te has olvidado algún detal e en la escena 1, utiliza este procedimiento. Cerciórate de que estás en la Escena 2 para continuar.

Diseño Flash de recursos web y multimedia para la enseñanza 140

CAPÍTULO 12: ESCENAS

4.

Activa la herramienta Texto. Con la misma configuración escribe el texto: “Para compartir con los demás”.

5.

Selecciona la herramienta Flecha para arrastrar y situar este cuadro de texto en la zona inferior centrada del escenario.

6.

Añade una nueva capa con Insertar > Línea de tiempo > Capa. En la línea de tiempo aparece una capa con el nombre por defecto Capa 2.

7.

Arrastra una instancia del símbolo astronauta desde la carpeta Gráficos/conecta en Ventana > Otros paneles > Bibliotecas Comunes > Curso.

8.

Asegúrate de que esta imagen se sitúa en el fotograma nº1 de Capa 2.

Sitúa la instancia del astronauta en el extremo superior derecho del escenario. Utiliza la herramienta Transformación libre con el modificador Escalar para reducir su tamaño.

9.

Sobre Capa 2 (la que contiene la imagen), haz clic derecho en el fotograma nº30 y selecciona Insertar Fotograma Clave.

10.

Una vez seleccionado este fotograma clave final, pincha y arrastra la instancia del astronauta hasta la esquina inferior izquierda.

Figura 12.7 Escenario tras situar el astronauta y el texto en la Escena 2

11.

Clic derecho sobre el fotograma nº1 de Capa 2 y selecciona Crear interpolación de movimiento. En el Inspector de Propiedades elige Horario o Antihorario en la lista desplegable Girar para definir el sentido del giro e introduce el valor 2 en la casilla Veces. Nota que se ha creado una interpolación de movimiento combinado de traslación y 2

giros del astronauta.

12.

Clic derecho en el fotograma nº 45 de Capa 2 y selecciona Insertar Fotograma. De esta forma el espectador dispondrá de unos instantes para contemplar el astronauta.

13.

El rótulo “para compartir con los demás” debe ser visible hasta el fotograma nº45. Para ello clic derecho sobre el fotograma nº 45 en Capa 1 y selecciona Insertar Fotograma.

14.

Para contemplar la animación contenida en esta escena , elige Control

> Probar Escena.

Diseño Flash de recursos web y multimedia para la enseñanza 141

CAPÍTULO 12: ESCENAS

12.2.4 Diseño de la Escena 3

1.

Clic en Ventana > Paneles de diseño > Escena para visualizar el panel de Escena si no estuviera visible.

2.

Para añadir una nueva escena, sigue uno de estos procedimientos alternativos:

• Clic en el botón Añadir escena del panel Escena.

• Insertar > Escena en la barra de menú principal.

En la base izquierda de la línea de tiempo se muestra la etiqueta Escena 3 para indicar al diseñador que esa línea de tiempo corresponde a esta escena.

3.

Para ir a una escena en concreto, haz clic sobre su nombre en el panel Escena. Si te has olvidado algún detalle en la escena 1 o en la escena 2, utiliza este procedimiento. Cerciórate de que estás en la Escena 3 para continuar.

4.

Activa la herramienta Texto. Con la misma configuración escribe el texto: “CNICE”.

5.

Selecciona la herramienta Flecha para arrastrar y situar este cuadro de texto en la zona superior centrada del escenario. Clic en cualquier parte del escenario para deseleccionar este cuadro.

6.

Clic en la herramienta Texto. En el Inspector de Propiedades define un tamaño más pequeño de fuente, 24 puntos por ejemplo. Como color del texto se puede elegir el color azul celeste. Teclea “Una comunidad educativa interconectada”

7.

Escoge la herramienta Flecha para situar este rótulo sitúalo en la zona inferior centrada del escenario.

8.

Añade una nueva capa con Insertar > Línea de tiempo > Capa. En la línea de tiempo aparece una capa con el nombre por defecto Capa 2.

9.

Arrastra una instancia del símbolo red desde la carpeta Gráficos/conecta en Ventana > Otros paneles > Bibliotecas Comunes > Curso. Sitúala en el centro del escenario.

10.

Sobre Capa 2 (la que contiene la imagen), haz clic derecho en el fotograma nº30 y selecciona Insertar Fotograma Clave.

11.

Clic en el fotograma nº1 de Capa 2 , selecciona la herramienta Transformación libre con el modificador Escalar. Pincha y arrastra sobre la esquina inferior izquierda de esta imagen para reducir el tamaño de la misma hasta un pequeño punto en el centro.

Diseño Flash de recursos web y multimedia para la enseñanza 142

CAPÍTULO 12: ESCENAS

Figura 12.8 Escenario con la imagen y el texto de la Escena 3

12.

Clic derecho sobre el fotograma nº1 de Capa 2 y selecciona Crear interpolación de movimiento. Acabas de crear una interpolación de movimiento con efecto de zoom positivo.

13.

Clic derecho en el fotograma nº 45 de Capa 2 y selecciona Insertar Fotograma. De esta forma el espectador dispondrá de unos instantes para contemplar la imagen.

14.

Los rótulos que acompañan a la imagen deben ser visible hasta el fotograma nº45. Para ello clic derecho sobre el fotograma nº 45 en Capa 1 y selecciona Insertar Fotograma.

15.

Para contemplar la animación contenida en esta escena , elige Control

> Probar Escena.

16.

Ya hemos concluido el diseño de todas las escenas. Para ver la película completa: Control > Probar película.

12.2.5 Otras operaciones con escenas

Usando el documento Flash diseñado anteriormente, se pueden realizar distintas operaciones con escenas a través del panel Escena:

• Para cambiar el orden de las escenas de la película: Arrastra el nombre de la escena a otra posición en el panel Escena. Al reproducir la película, las escenas se suceden una detrás de otra siguiendo el orden en que aparecen en este panel.

• Para cambiar el nombre de una escena: Doble clic en el nombre de la escena en el panel Escena y escribe el nuevo nombre.

• Para duplicar una escena: Clic en el botón Duplicar del panel Escena.

Diseño Flash de recursos web y multimedia para la enseñanza 143

CAPÍTULO 12: ESCENAS

Figura 12.9 Las escenas se reproducen en el orden que aparece en este panel.

12.3 Trabajar con fotogramas en la Línea de

Tiempo

En la línea de tiempo se trabaja con fotogramas y con fotogramas clave. Un fotograma clave es un tipo de fotograma en el que el diseñador dibuja la imagen utilizando las herramientas que le proporciona Flash. Se representa en la línea de tiempo como un rectángulo con un punto hueco cuando el fotograma está vacío y negro cuando contiene algún objeto.

A continuación puedes experimentar los procedimientos más habituales para modificar los fotogramas de una capa en la línea de tiempo. Todos ellos comienzan por clic derecho sobre una posición de fotograma en la capa y seleccionando la opción deseada en el menú contextual que se despliega.

Diseño Flash de recursos web y multimedia para la enseñanza 144

CAPÍTULO 12: ESCENAS

Figura 12.10 Clic derecho sobre un fotograma para elegir qué hacer en él.

Diseño Flash de recursos web y multimedia para la enseñanza 145

CAPÍTULO 13: SWISH

Capítulo

13

Swish

13.1 Ejemplo práctico de diseño con Swish

wish es una herramienta fácil de usar que permite producir en pocos minutos complejas animaciones con texto e imágenes. Contempla más de 150 efectos especiales: Aparecer, Desaparecer, Giro 3D, Vórtice, Onda, etc. que se pueden S aplicar a un cuadro de texto o a una imagen. Las animaciones producidas se pueden importar desde Flash para incorporarlas a nuestra película.

1.

Abre Swish haciendo doble clic sobre su icono en el escritorio 2.

Clic en el botón Insertar Texto de la barra de herramientas o bien Insertar >Texto. Se insertará una nueva capa que muestra el cuadro de texto

Figura 12.1 Botón Texto para insertar un cuadro

3.

En la ventana Texto teclea el texto. En este caso es "Bienvenidos". En este cuadro de diálogo es posible definir previamente el tipo de fuente, tamaño, orientación del texto, alineación, color, etc.

Diseño Flash de recursos web y multimedia para la enseñanza 146

CAPÍTULO 13: SWISH

4.

Para insertar un efecto animado selecciona Insertar > Efectos > ...

Prueba con un efecto cualquiera: Giro 3D, Vórtice, Explosión, Onda, etc. En la ventana que se despliega puedes definir ciertos parámetros de esta animación. Clic en el botón Cerrar de la ventana para concluir.

5.

Para visualizar el efecto haz clic en el botón Reproducir de la barra de herramientas.

Figura 13.2 Linea de tiempo de la animación de texto realizada con Swish 6.

Archivo > Exportar > SWF para guardar esta animación en un archivo SWF en el disco. Por ejemplo en la carpeta Mis documentos.

7.

Cerrar el programa Swish y abrir Flash.

8.

Desde Flash , Archivo > Importar > Importar a escenario para importar el archivo SWF que hemos creado con Swish. Nótese que los fotogramas de la animación se insertan en la capa activa y en la biblioteca aparecen los símbolos gráficos que contienen las letras animadas del rótulo animado.

Nota:

Este texto animado se puede importar a un símbolo de Clip de Película mediante Archivo > Importar durante la edición de un símbolo de este tipo. De esta forma se podrá situar el clip que contiene el texto animado en cualquier parte de la película principal. No obstante se reproducirá de forma contínua con independencia de la línea de tiempo principal.

Swish no viene integrado con Flash. Es un programa independiente fabricado por la empresa DJJ Holdings. Hemos incluido este breve apunte en el Curso por su utilidad y sencillez en la animación de textos para nuestras películas de Flash. Algunos docentes utilizan este programa para el diseño web y multimedia en lugar de Flash ya que ofrece ciertas prestaciones (muchas más de las vistas aquí) y es más fácil de manejar.

Diseño Flash de recursos web y multimedia para la enseñanza 147

CAPÍTULO 14: PUBLICACIÓN

Capítulo

14

Publicación

14.1 Configuración de las propiedades del

documento

amos a abrir la película natura.fla guardada en la carpeta Curso Flash/ejemplos. No es necesario guardar los cambios producidos pero V puede servir para estudiar el efecto que sobre ella produce la configuración de distintas propiedades del documento Flash. También puedes experimentar con otra película que hayas diseñado.

1.

Archivo > Abrir para localizar y abrir el documento Flash natura.fla 2.

Selecciona Modificar > Documento. Aparecerá el cuadro de diálogo Propiedades del documento.

3.

En la sección Velocidad de fotogramas, introduce el número de fotogramas de animación que deben mostrarse cada segundo. La mayoría de las animaciones que se ven en los ordenadores, especialmente las que se reproducen desde un sitio Web, no necesitan una velocidad mayor de 8 a 12 fps (fotogramas por segundo). 12 fps es la velocidad de fotogramas predeterminada.

4.

En la sección Dimensiones para especificar el tamaño del Escenario en píxeles, introduce los valores en los campos Anchura y Altura. El tamaño de película predeterminado es de 550 por 400 píxeles. El tamaño mínimo es de 1 por 1 píxel, mientras que el máximo es de 2880 por 2880 píxeles.

5.

Para establecer el tamaño del Escenario de forma que el espacio que rodea el contenido sea igual en todos los lados, haz clic en Coincidir contenido. Para reducir al mínimo el tamaño de la película, alinea todos los elementos en la esquina superior izquierda del Escenario antes de utilizar este comando. Para establecer el tamaño del Escenario con la mayor área de impresión posible, haga clic en Coincidir impresora.

6.

Para establecer el color de fondo de la película, elige un color en la muestra de colores de fondo.

7.

Selecciona la unidad de medida en el menú emergente Unidades de regla que se va a utilizar para las reglas que es posible mostrar en las partes superior y lateral.

8.

Haz clic en Aceptar. Es conveniente definir las propiedades de la película antes de comenzar su edición.

Diseño Flash de recursos web y multimedia para la enseñanza 148

CAPÍTULO 14: PUBLICACIÓN

14.2 Publicación de un documento Flash

Cuando tu película esté preparada para mostrar al mundo, es necesario publicar el documento Flash (archivo FLA) para su reproducción. Vamos a utilizar como ejemplo una película ya terminada como natura.fla almacenada en la carpeta Curso Flash/Ejemplos.

1.

Abre el documento natura.fla mediante Archivo > Abrir.

2.

Flash generará los archivos de publicación de la película en la misma carpeta del disco duro donde se encuentra almacenado el documento FLA. Por ello es necesario guardar previamente el archivo FLA si deseas publicar en otra carpeta distinta. Selecciona Archivo > Guardar como

... y graba el documento actual en una carpeta del disco duro distinta de la original. En Mis Documentos, por ejemplo.

3.

Por defecto, al seleccionar Archivo > Publicar, este comando crea un archivo SWF y una página HTML donde va vinculada la película Flash para su visualización a través de la ventana del navegador. Si eres experto en HTML puedes editar este documento y realizar las modificaciones oportunas.

4.

Utilizando el Explorador de Windows puedes abrir el contenido de la carpeta Mis Documentos y observarás que en este caso aparecen al menos tres archivos:

• natura.fla, que contiene el documento editable utilizando la herramienta de diseño Flash. Al hacer doble clic sobre su icono, se iniciará Flash que arranca en modo edición con este documento.

• natura.swf, que contiene la película en formato compacto. Al hacer doble clic sobre él se iniciará su visionado en la ventana del reproductor independiente de Flash. Este archivo no es editable y optimiza adecuadamente su tamaño no incluyendo aquellos elementos de la biblioteca que no se usan en el documento FLA original.

• natura.html. Es una página HTML que contiene la información necesaria para mostrar la película SWF dentro de la ventana del navegador. Al hacer doble clic sobre este archivo se iniciará el navegador por defecto y mostrará una página con la película. El archivo HTML no contiene la película sino una referencia de vinculación al archivo SWF. Por esta razón es necesario que, al menos por defecto, ambos archivos se encuentren en la misma carpeta. Obviamente es necesario subir estos dos archivos al servidor web para que el usuario pueda visualizar la animación Flash al cargar el documento HTML.

Figura 14.1 Archivos FLA(editable), HTML(visualización navegador) y SWF (reproductor) Diseño Flash de recursos web y multimedia para la enseñanza 149

CAPÍTULO 14: PUBLICACIÓN

14.3 Configuración de la publicación

Flash permite configurar muchos parámetros de la publicación. Una vez abierto el documento natura.fla o cualquier otro almacenado en una carpeta del disco duro, puedes experimentar personalizando las distintas opciones que a continuación se detallan.

Para comprobar el efecto elegido, una vez realizada la publicación, a través del Explorador de Windows, busca el icono del archivo SWF o HTML y haz doble clic sobre él.

Selecciona Archivo > Configuración de publicación. Se despliega un cuadro de diálogo con 3 solapas: Formatos, Flash y HTML. Vamos a analizar los detalles de cada pestaña.

14.3.1 Configuración de los formatos de publicación.

1.

En la solapa Formatos puedes activar la casilla correspondiente a cada formato de archivo que desees crear. El formato SWF y HTML se seleccionan automáticamente.

Figura 14.2 Solapa Formatos para configurar los archivos destino de la publicación.

2.

Si la casilla Usar nombres predeterminados está activada se utilizarán los nombres de archivo por defecto. Si no se activa existe la opción de introducir el propio nombre de archivo en cada caso. Introduce Diseño Flash de recursos web y multimedia para la enseñanza 150

CAPÍTULO 14: PUBLICACIÓN

un nombre exclusivo para cada uno y la extensión apropiada de dicho formato.

3.

Para crear un proyector, activa la casilla Proyector Windows (.exe). El archivo producido es un programa ejecutable por sí solo que reproduce directamente la película independientemente del entorno de diseño Flash. El usuario final no necesita tener instalado Flash en su ordenador.

14.3.2 Configuración del archivo SWF

En esta sección es posible configurar opciones de compresión de imagen y sonido y la opción de proteger la película ante la importación de otros usuarios.

1.

En la lista desplegable Versión puedes elegir para qué versión del reproductor vas a crear el archivo SWF.

Figura 14.3 Solapa Flash para configurar parámetros del SWF resultante Diseño Flash de recursos web y multimedia para la enseñanza 151

CAPÍTULO 14: PUBLICACIÓN

2.

La lista Orden de carga se utiliza para definir el orden en que Flash cargará las capas para mostrar el primer fotograma. Esta opción tiene utilidad en caso de conexiones lentas a Internet por parte de los clientes.

3.

Si la casilla Generar informe de tamaño está activada, durante la publicación Flash producirá un archivo TXT, natura REPORT en este caso, informando sobre la cantidad de datos por archivos.

4.

Al marcar la casilla Proteger frente a importación , se evita que otros importen nuestra película Flash en formato SWF y la integren en su documento de Flash (FLA). Al activar este campo, es posible teclear una clave en el campo de texto Contraseña para evitar que usuarios no autorizados importen esta película. Si no se especifica clave alguna no se podrá importar. Si se ha introducido alguna contraseña, ésta será solicitada al intentar importarla, siendo necesario teclearla para concluir esta tarea.

5.

Puedes activar la casilla Comprimir película para reducir el tamaño de archivo y el tiempo de descarga. Esta opción está activada de forma predeterminada y resulta especialmente útil cuando un archivo tiene mucho texto o ActionScript. Sólo funciona para archivos de la versión Flash Player 6 y 7.

6.

Ajusta el deslizador Calidad JPEG o introduce un valor en esta casilla, para controlar la compresión de los mapas de bits que se utilizan en la película. Una imagen de baja calidad produce archivos de menor tamaño, mientras que una de alta calidad produce archivos de tamaño mayor.

Prueba con configuraciones distintas hasta lograr un equilibrio óptimo entre tamaño y calidad, el valor 100 ofrece el máximo de calidad con el mínimo de compresión.

7.

Para establecer la velocidad de muestra y la compresión de todos los flujos de sonido o sonidos de evento de la película, haz clic en el botón Establecer, situado junto a Flujo de sonido o Evento de audio, y elige las opciones para Compresión, Velocidad y Calidad en el cuadro de diálogo Configuración de sonido. Haz clic en Aceptar cuando hayas terminado.

8.

Selecciona Suplantar configuración de sonido con el fin de utilizar las configuraciones seleccionadas en el paso anterior para sobreescribir los parámetros definidos para sonidos específicos seleccionados en la sección Sonido del inspector de propiedades. Esta opción se suele utilizar para crear una versión de menos tamaño de baja fidelidad. Si no se activa esta opción Flash explora todos los flujos de sonido de la película (incluidos los sonidos de un video importado) y publica todos los flujos de sonido con la configuración más alta.

14.3.3 Configuración del archivo HTML

1.

Elige una plantilla instalada para utilizarla desde el menú emergente Plantilla; haz clic en el botón de información Información de la derecha para que aparezca una descripción de la plantilla seleccionada.

Las plantillas básicas sólo muestran la película en un navegador mientras que las plantillas más avanzadas contienen código para la detección del navegador y otras funciones.

Diseño Flash de recursos web y multimedia para la enseñanza 152

CAPÍTULO 14: PUBLICACIÓN

2.

Elige una opción de la lista desplegable Dimensiones para configurar los valores de los atributos WIDTH (Anchura) y HEIGHT(Altura) en las etiquetas OBJECT y EMBED del lenguaje HTML :

• Coincidir con película: Es el valor predeterminado. Utiliza el tamaño de la película.

• Píxeles: permite introducir el número de píxeles en los campos Anchura y Altura.

• Porcentaje: para usar un porcentaje relativo a la ventana del navegador.

Figura 14.4 Solapa de configuración del archivo HTML que muestra el SWF en el navegador.

3.

Seleccionar las opciones de Reproducción para controlar las funciones y reproducción de la película de la manera siguiente:

• Pausa al comienzo: detiene la película hasta que el usuario haga clic en un botón de la película o elija Reproducir del menú emergente. De Diseño Flash de recursos web y multimedia para la enseñanza 153

CAPÍTULO 14: PUBLICACIÓN

forma predeterminada, la opción está deseleccionada y la película empieza a reproducirse en cuanto se carga (el parámetro PLAY está definido como true).

• Reproducir indefinidamente: repite la película en ciclo cuando alcanza el último fotograma. Anula la selección de esta opción si deseas parar la película cuando llegue al último fotograma. (El parámetro LOOP

está activo de forma predeterminada.)

• Mostrar menú: muestra un menú de método abreviado cuando el usuario hace clic con el botón derecho del ratón en la película. Anula la selección de esta opción para que sólo aparezca Acerca de Flash en el menú atajo. De forma predeterminada, esta opción está activada (el parámetro MENU está definido en true).

• Fuente del dispositivo: Selecciona Fuente de dispositivo para sustituir las fuentes suavizadas por fuentes instaladas en el sistema del usuario. El uso de las fuentes de dispositivo aumenta la legibilidad del tipo en tamaños pequeños y puede disminuir el tamaño del archivo de película.

Esta opción sólo afecta a las películas que contienen texto estático (texto que se generó al crear una película y que no cambia cuando ésta se muestra) definido para mostrarse con las fuentes de dispositivo.

4.

Selecciona Calidad para determinar el equilibrio entre tiempo de procesamiento y el suavizado de cada fotograma antes de que aparezca en la pantalla del usuario. Esta opción configura el valor del parámetro QUALITY en las etiquetas OBJECT y EMBED .

5.

Para la versión Windows de Internet Explorer 4.0 con el control Flash ActiveX o superior, elige una opción de Modo de ventana para transparencia, posición y capas:

• Ventana: reproduce la película Flash en su propia ventana rectangular dentro de la página web. De esta forma la animación resulta lo más rápido posible.

• Opaco sin ventanas: mueve los elementos detrás de las películas Flash ( por ejemplo, con HTML dinámico) para evitar que éstos se muestren.

• Transparente sin ventanas: Muestra el fondo de la página HTML

donde se incrusta la película a través de todas las áreas transparentes de la película.

6.

Elige una opción de Alineación HTML para colocar la ventana de la película de Flash dentro de la ventana del navegador.

7.

Elige una opción de Escala para colocar la película dentro de los límites especificados si cambió el ancho y la altura original de la película.

8.

Elige una opción de Alineación Flash para configurar la forma en que se coloca la película dentro de la ventana y cómo se recorta si fuera necesario.

9.

Selecciona Mostrar mensajes de advertencia para que aparezcan los mensajes de error si se produce algún conflicto en la configuración.

Diseño Flash de recursos web y multimedia para la enseñanza 154

CAPÍTULO 14: PUBLICACIÓN

14.3.4 Publicación final

1.

Para proceder a generar los archivos de publicación deseados, haz clic en el botón Publicar del cuadro de diálogo Configuración de publicación

2.

Para guardar, junto con el archivo activo, las configuraciones de publicación definidas en las 3 solapas, haz clic en el botón Aceptar del cuadro de diálogo Configuración de publicación. Una vez realizada esta operación bastará con seleccionar Archivo > Publicar para hacerlo de acuerdo a los parámetros guardados. En cada proceso de publicación se sobrescriben encima los nuevos archivos sin solicitar ninguna confirmación.

14.4 Descargar una animación Flash de la web

En ocasiones puede interesar disponer de una animación en formato SWF para usarla en la red local del centro. De esta forma se ahorra consumo en el acceso a Internet y se incrementa la velocidad de acceso a los recursos Flash desde los distintos equipos de la red local. Desde el navegador no es posible mediante clic derecho guardar la animación en una carpeta conocida como se hace, por ejemplo, cuando deseamos descargar una imagen jpeg o gif. Sin embargo hemos de tener en cuenta que una animación Flash de la web sólo es visible en pantalla si previamente se ha descargado en la carpeta caché del navegador.

1.

Desde Internet Explorer, selecciona Herramientas > Opciones de Internet.

2.

En la solapa General, en la sección Archivos temporales de Internet, pulsa el botón Eliminar archivos ... Tras unos segundos de espera se habrán eliminado todos los archivos de la caché del navegador.

Esto facilitará la posterior búsqueda dentro de esta carpeta.

3.

Pulsa el botón Aceptar para regresar al navegador. Accede a través del navegador a la página que contiene la película Flash.

4.

Una vez que hayas descargado la animación, desde Internet Explorer, vuelve a seleccionar Herramientas > Opciones de Internet.

5.

En la solapa General, haz clic en el botón Configuración dentro de la sección Archivos temporales de Internet.

6.

En el cuadro de diálogo Configuración aparece la ubicación actual en el disco duro C: de la carpeta que funciona como caché del navegador. En Windows 2000 y XP suele localizarse en la carpeta C:\Documents And Settings\<nombre de usuario>\Configuración local\Archivos temporales de Internet. Anota la ruta a este directorio.

7.

Minimiza el navegador y abre el Explorador de Windows. En algunas configuraciones de Windows 2000 y XP, la carpeta caché está oculta como otras del sistema. Para mostrarlas desde el Explorador de Windows debes seleccionar en la barra de menús del Explorador: Herramientas

> Opciones de carpeta. En el cuadro de diálogo Opciones de carpeta, en la solapa Ver, en el item Archivos y carpetas > Archivos y carpetas ocultos, activa el elemento con el título Mostrar todos los archivos y carpetas ocultos. Pulsa en el botón Aceptar para terminar.

Diseño Flash de recursos web y multimedia para la enseñanza 155

CAPÍTULO 14: PUBLICACIÓN

8.

Sitúate en esta carpeta caché usando el Explorador de Windows. Localiza y haz clic sobre el archivo *.SWF para seleccionarlo. Mediante Edición > Copiar y Edición > Pegar haz una copia de este archivo a otra carpeta de tu disco duro. Por ejemplo: Mis documentos.

9.

Haz doble clic sobre esa copia del archivo. Arrancará el reproductor de Flash mostrando la animación.

Nota:

Existen diversos programas en el mercado que facilitan la descarga en una carpeta conocida mediante un sencillo clic de una animación Flash que se esté visualizando en Internet a través de la ventana del navegador.

En la sección Materiales de la portada principal del CD del curso, puedes acceder a la instalación de Flash Saver. En el apartado Documentación encontrarás un sencil o tutorial sobre su uso.

14.5 Edición HTML para visualizar SWF

Para reproducir una película Flash en formato SWF dentro de la ventana del navegador web es necesario diseñar un documento HTML que contenga una llamada a este archivo Flash. Para visualizar la animación, se abrirá el documento HTML desde el navegador.

La referencia al archivo SWF puede ser de dos tipos:

• Incrustación: La película se visualiza dentro de la propia página. En el diseño del documento HTML se utilizan las etiquetas OBJECT/EMBED con sus correspondientes parámetros.

• Vinculación: En el documento HTML existe un hipervínculo al archivo SWF. Al hacer clic sobre él, la animación se muestra a continuación ocupando toda la ventana del navegador.

14.5.1 Uso de las etiquetas OBJECT/EMBED

En este ejercicio diseñarás un documento HTML que muestre una animación Flash en la propia página.

1.

Abre el Bloc de Notas de Windows.

2.

Teclea el siguiente código HTML:

Diseño Flash de recursos web y multimedia para la enseñanza 156

CAPÍTULO 14: PUBLICACIÓN

<html>

<head>

<title>Blobs</title>

</head>

<body>

<object width="550" height="400">

<param name=movie value="blobs.swf">

<embed src="blobs.swf" width="550" height="400"></embed>

</object>

</body>

</html>

La duplicidad de etiquetas OBJECT y EMBED asegura la compatibilidad del documento con los navegadores NetScape e Internet Explorer respectivamente.

Los parámetros fundamentales son el nombre del archivo SWF (blobs.swf) y las dimensiones de visualización de la animación (550x400 pixeles).

Este código, todavía con más parámetros, es generado automáticamente por Flash en el documento HTML que se genera al seleccionar Archivo > Publicar.

Figura 14.5 Código HTML con referencia para incrustación de SWF

3.

Archivo > Guardar como

4.

Teclea como nombre blobs.htm y guarda este documento HTML en la carpeta Juegos situada en el directorio Curso Flash. Aquí se encuentra precisamente el archivo Flash blobs.swf. Como en las etiquetas no hemos incluido ruta a la animación Flash, ambos archivos, HTML y SWF, deben grabarse en la misma carpeta.

5.

Archivo > Salir para abandonar la edición y cerrar la aplicación Bloc de Notas.

6.

Con el Explorador de Windows sitúate en la carpeta Curso Flash/juegos.

7.

Ejecuta doble clic en el documento blobs.htm. Arrancará el navegador por defecto y a continuación muestra el juego blobs.swf. En este caso se trata de un juego cuyas instrucciones se pueden leer en el archivo blobs.txt

Diseño Flash de recursos web y multimedia para la enseñanza 157

CAPÍTULO 14: PUBLICACIÓN

Notas:

Durante la edición HTML del documento blobs.htm puedes añadir a continuación de la etiqueta OBJECT/EMBED las instrucciones recogidas en el archivo blobs.txt

Repite el ejercicio tomando como referencia otros archivos SWF contenidos en la carpeta Curso Flash/juegos. Fíjate que basta con sólo cambiar el nombre del archivo swf en las etiquetas OBJECT/EMBED.

14.5.2 Hipervínculo a un archivo SWF: Rincón de juegos

Vamos a diseñar un documento HTML que contenga un índice de hipervínculos a animaciones SWF.

1.

Abre el Bloc de Notas de Windows.

2.

Teclea el siguiente código HTML:

<html>

<head>

<title>Rincón de juegos</title>

</head>

<body>

<h1>RINCÓN DE JUEGOS </h1>

<ul>

<li><a href="blobs.swf">Blobs</a></li>

<li><a href="cymin.swf">Cymin</a></li>

<li><a href="mm.swf">Mastermind</a></li>

<li><a href="tetris.swf">Tetris</a></li>

</ul>

</body>

</html>

3.

Archivo > Guardar como.

4.

Teclea rincón.htm y guarda este documento HTML en la carpeta Juegos dentro del directorio Curso Flash. Dentro de la misma se localizan los archivos swf con los juegos referenciados.

5.

Archivo > Salir para cerrar el Bloc de Notas.

6.

Con el Explorador de Windows , busca el documento rincon.htm que has diseñado y efectúa un doble clic para abrirlo.

7.

Al hacer clic en un enlace de este documento, se mostrará el archivo swf en la ventana completa del navegador.

Notas:

Diseño Flash de recursos web y multimedia para la enseñanza 158

CAPÍTULO 14: PUBLICACIÓN

Este método de visualización funciona correctamente con el navegador Microsoft Internet Explorer. Es más directo pero tiene el inconveniente de no permitir dimensionar la animación y no disponer de un botón en el documento para navegar hacia atrás. El ejercicio se puede mejorar creando una página para cada juego como en el apartado anterior y la página índice rincón.htm con enlaces a ellas.

Puedes añadir, durante la edición HTML del documento rincon.htm, a continuación del título/enlace de cada juego, la descripción e instrucciones de cada uno, tal y como aparece en los respectivos TXT de la carpeta Curso Flash/juegos.

Diseño Flash de recursos web y multimedia para la enseñanza 159

CAPÍTULO 15: DISEÑO MULTIMEDIA

Capítulo

15

Diseño multimedia

15.1 Generar un proyector .EXE

l archivo producido es un ejecutable que reproduce directamente la película independientemente del entorno de diseño Flash y de que el cliente tenga o no instalado el Reproductor de Flash en su ordenador.

E 1. Abre un archivo FLA cualquiera. Como hemos hecho en anteriores secciones puedes abrir el archivo natura.fla situado en Curso Flash/ejemplos.

Figura 15.1 Activa casilla Proyector Windows (.exe) para generar este archivo al Publicar.

Diseño Flash de recursos web y multimedia para la enseñanza 160

CAPÍTULO 15: DISEÑO MULTIMEDIA

2.

Selecciona Archivo > Configuración de publicación.

3.

Activa la casilla Proyector Windows (.exe) en la solapa Formatos.

4.

Clic en el botón Publicar . Esto producirá en el directorio por defecto el proyector de la película.

5.

Clic en Aceptar.

6.

Utilizando el Explorador de Windows puedes buscar, en este caso en la carpeta Curso Flash/ejemplos, el proyector .EXE. Haciendo doble clic sobre su icono arrancará el reproductor autónomo de Flash, mostrando la película.

Figura 15.2 Archivos creados por Flash tras la publicación de natura.fla 15. 2 La acción getURL

Vamos a diseñar una película con un botón que lleve al usuario a visualizar en el navegador por defecto una página web o bien un archivo pdf, doc, xls, etc.

1.

Selecciona Ventana > Otros paneles > Bibliotecas comunes > Curso para abrir esta biblioteca común.

2.

Doble clic para abrir la carpeta Botones y luego la carpeta Push buttons. Pincha y arrastra al escenario una instancia del símbolo push button – green (verde).

3.

Observa que el botón se encuentra seleccionado. A continuación vamos a asignarle una acción. En este caso deseamos que durante la ejecución de la animación, al hacer clic sobre él (evento clic) se visualice el navegador por defecto del sistema para mostrar el documento videojuegos.pdf .

Este documento puedes encontrarlo en la carpeta Curso Flash/pdf.

Figura 15.3 Botón Acciones para editar las acciones asociadas al objeto seleccionado 4.

Elige Ventana > Paneles de desarrollo > Acciones para visualizar el panel Acciones-Botón si no está abierto todavía. También este panel Diseño Flash de recursos web y multimedia para la enseñanza 161

CAPÍTULO 15: DISEÑO MULTIMEDIA

es accesible desde el botón Editar el script ... que aparece a la derecha del Inspector de propiedades una vez que has seleccionado previamente el objeto. Otra posibilidad es pulsar la tecla de función

<F9> .

5.

En el cuadro de texto escribe el siguiente código respetando con detalle la sintaxis:

on (release) {

getURL("videojuegos.pdf");

}

Este script va a definir que al liberar el botón izquierdo del ratón tras su pulsación sobre el botón del escenario: on(release) se muestre en la ventana del navegador web el documento "videojuegos.pdf": getURL("videosjuegos.pdf");

En lugar de escribirlo directamente puedes usar el Asistente de scripts que aparece en la columna izquierda del cuadro de diálogo Acciones-Botón. La función on() se localiza en Funciones globales > Control de clip de película y la función getURL() en Funciones globales > Navegador/Red. Este asistente es igualmente accesible pulsando en el botón con el icono "+" que aparece en la botonera superior del cuadro de diálogo Acciones.

Figura 15.4 Acción getURL para visualizar en el navegador el documento videojuegos.pdf 6.

Ubicación de los archivos: Mediante Archivo > Guardar, graba el archivo FLA en la carpeta del disco duro: Curso Flash/pdf con el nombre videojuego.fla. De esta forma el resto de los archivos de publicación incluido el proyector .exe también se ubicarán aquí.

Recuerda: El proyecto .exe debe guardarse en la misma carpeta que el pdf que invoca.

Diseño Flash de recursos web y multimedia para la enseñanza 162

CAPÍTULO 15: DISEÑO MULTIMEDIA

7.

Publica la película para generar el proyector .exe utilizando Archivo > Publicar. Cerciórate antes de que en Archivo > Configuración de publicación hemos activado la casilla Proyector Windows (.exe).

8.

Este enlace no funciona desde el entorno de edición de Flash. Por ello es necesario, salir de Flash y desde el Explorador de Windows ejecutar el proyector exe. Al hacer clic en el botón de la película, observa que se dispara encima una ventana con el navegador por defecto mostrando este archivo. Al cerrar esta ventana, reaparece desde abajo el proyector.

Es necesario que el cliente tenga instalado el lector de archivos pdf, Acrobat Reader, para acceder con el explorador a archivos de este tipo.

Lo mismo ocurre con archivos .doc, .xls, etc.

Nota: Puedes instalar en tu ordenador el lector de archivo PDF, Adobe Acrobat Reader, desde la sección Materiales en la portada principal del CD.

15.3 La acción fscommand

Se utiliza para controlar el reproductor autónomo de Flash y para ejecutar comandos del sistema operativo no relacionados con el navegador. Vamos a crear una sencilla película que se visualice en el reproductor autónomo de Flash a pantalla completa y con un botón para salir.

Figura 15.5 Aspecto final del ejercicio Coches modernos 1.

Selecciona la herramienta Texto y sitúa en la parte superior centro del escenario, un rótulo como por ejemplo “Coches modernos” .

Selecciona la herramienta Flecha para pinchar y arrastrar el cuadro de texto al centro.

Diseño Flash de recursos web y multimedia para la enseñanza 163

CAPÍTULO 15: DISEÑO MULTIMEDIA

2.

Arrastra al centro del Escenario desde la carpeta Bitmaps en Ventana

> Otros paneles > Bibliotecas comunes > Curso una instancia de Bitmap: Car por ejemplo.

3.

Arrastra a la esquina superior derecha del Escenario desde la carpeta Botones/Circle Buttons en Ventana > Otros paneles > Bibliotecas comunes > Curso, una instancia de circle button: next.

4.

Clic sobre el primer fotograma de la línea de tiempo para seleccionarlo.

Selecciona Ventana > Paneles de desarrollo > Acciones o bien pulsa directamente la tecla <F9> . Aparece el cuadro de diálogo Acciones – Fotograma. Las acciones se pueden vincular a botones y se iniciarán cuando el usuario realice sobre él el evento previsto: al soltar el ratón (release), al pasar sobre él (rollover), etc. En este caso la acción se vincula a un fotograma y se ejecutará cuando la cabeza lectora alcance este fotograma durante la visualización de la película.

5.

En el cuadro de diálogo Acciones – Fotograma , escribe el código: fscommand("fullscreen", "true");

Figura 15.6 La orden fscommand permite proyectar la película Flash a pantalla completa 6.

El comando fscommand admite varios usos destinados al reproductor autónomo de Flash:

• fullscreen [true/false] (Pantal a completa [Verdadero/Falso]): Para controlar la visualización del proyector. El valor del argumento true (verdadero) produce una visualización a pantalla completa. El valor false (falso) para una visualización normal. Ejemplo: fscommand("fullscreen",

"true");

• allowscale [true/false] (Permitir escala [V/F]): Para controlar la escala de la película. El valor del argumento true (verdadero) para cambiar el tamaño de la animación y ajustarla al reproductor. False (falso) para mostrar la animación sin cambio de tamaño.

Ejemplo:

fscommand("allowscale", "true");

Diseño Flash de recursos web y multimedia para la enseñanza 164

CAPÍTULO 15: DISEÑO MULTIMEDIA

• showmenu [true/false] (Mostrar menú [V/F]): Para controlar los elementos que aparecen en el menú emergente de reproducción. True (verdadero) para mostrar el panel completo de elementos cuando el usuario hace clic con el botón derecho del ratón o introduce false (falso) para ocultarlo. Ejemplo: fscommand("showmenu", "false");

• exec, para ejecutar una aplicación desde el interior del proyector. En el campo Argumentos, introduce el nombre de la aplicación EXE. Ejemplo: fscommand("exec", "aplicación.exe");

• quit, para cerrar el proyector de películas. Ejemplo: fscommand("quit"); En este caso hemos seleccionado la opción fullscreen. Cuando la cabeza lectora alcance el primer fotograma, ejecutará esta acción y la película se mostrará a pantal a completa.

7.

Clic sobre la instancia del botón circle button: next que hemos situado en la esquina superior derecha. Si el cuadro de diálogo Acciones no está visible, pulsa la tecla <F9> . Ahora aparece el cuadro de diálogo Acciones–Botón. Esto indica que las acciones especificadas se ejecutarán ante un evento del cliente sobre el botón.

8.

Teclea el siguiente código de script:

on (release) {

fscommand("quit");

}

9.

Este script indica que al soltar tras hacer clic sobre este botón se cerrará el reproductor. Es conveniente situar este botón para permitir al cliente abandonar nuestra aplicación cuando lo desee.

10.

Usando Archivo > Guardar, graba el archivo FLA creado en una carpeta del disco duro. Por ejemplo en la carpeta Mis Documentos con el nombre de automoderno.fla. De esta forma ya le indicas a Flash dónde guardar el resto de archivos de publicación.

11.

En el cuadro de diálogo que se despliega mediante Archivo > Configuración de Publicación, activa la casilla Proyector Windows (.exe) y haz clic en el botón Publicar.

12.

Desde el Explorador de Windows, buscar y haz doble clic sobre automoderno.exe para iniciarlo. La película se proyecta en pantalla completa. Para salir de la aplicación, haz clic sobre el botón de la esquina superior derecha. Durante la proyección de una película, el usuario puede pasar del modo Pantalla completa al tamaño de pantalla normal mediante la pulsación de la tecla <Esc>.

Notas: • Las opciones del reproductor autónomo de Flash con fscommand sólo funcionan cuando la película se está visualizando a partir del proyector

*.EXE. Ninguna opción de fscommand (fullscreen, quit, exec, etc.) funciona cuando la película se visualiza a través del navegador usando los archivos HTML y SWF.

• A continuación se especifica el código que permite asociar a un botón la posibilidad de cerrar la ventana del navegador. En este caso sólo Diseño Flash de recursos web y multimedia para la enseñanza 165

CAPÍTULO 15: DISEÑO MULTIMEDIA

funcionará si la película Flash se visualiza a través del navegador web: HTML y SWF:

on (release) {

getURL("javascript:window.close()");

}

15.4 Rutas de archivos con fscommand y getURL

15.4.1 La carpeta fscommand

El comando exec de la acción fscommand se usa para arrancar una aplicación externa EXE. Su sintaxis es: fscommand("exec", "aplicacionexterna.exe"); En Macromedia Flash MX esta aplicación externa debe estar situada en una subcarpeta nombrada como “fscommand” . Esta subcarpeta tiene que ubicarse en el mismo directorio que el proyector Flash que invoca la acción fscommand. Se trata de una restricción de seguridad novedosa en la versión MX que evita malos usos de la opción exec del fscommand.

El siguiente script asociado a un botón lanza una aplicación Windows

APLIexterna.exe que se encuentra alojada en la carpeta fscommand en el mismo nivel que el proyector.

on (release) {

fscommand(“exec”,

“APLIexterna.exe”);

}

Figura 15.7 Un archivo EXE llamado desde fscommand debe situarse en una carpeta llamada fscommand Diseño Flash de recursos web y multimedia para la enseñanza 166

CAPÍTULO 15: DISEÑO MULTIMEDIA

Notas:

La aplicación externa se sitúa dentro de esta subcarpeta para usar sólo el nombre (sin especificar la ruta) de la misma en el argumento de fscommand.

El comando exec no permite llamar a la aplicación externa usando parámetros adicionales para ser interpretados por ésta. Esta limitación se suele resolver creando un archivo BAT que sí contenga una llamada a esta aplicación con sus correspondientes argumentos e invocando este BAT

desde la casilla argumentos del comando exec.

15.4.2 Rutas a documentos con getURL

La acción getURL permite desde la película Flash enlazar con documentos situados en un URL específico y mostrarlos en la ventana del navegador.

Su sintaxis es:

getURL("url_documento"); o bien getURL("url_documento","tipo_ventana"); Ejemplos:

• getURL("http://www.educastur.princast.es");

• getURL ("http://www.google.es", "_self");

• getURL("http://www.educalia.org", "_blank"); El parámetro <tipo_ventana> es opcional. Si no se especifica, la URL se mostrará en la ventana actual del navegador. No obstante permite especificar para el navegador web si esa dirección se mostrarán en el mismo marco(_self), en una nueva ventana (_blank), en toda la página (_top) o bien en el marco primario (_parent).

El uso de barras y puntos permite especificar la ruta que debe seguir el proyector para localizar ese documento cuando se ejecuta geturl. Ver figura adjunta.

1.

Sin ruta: Si no se especifica, Flash toma por defecto la misma carpeta donde se encuentra grabado el proyector. Ejemplo:

geturl(“tutorial1.pdf”);

2.

Ruta absoluta en Internet: se puede indicar la url completa del documento. No olvides incluir la cabecera de protocolo: http://.

Ejemplo:

geturl(“http://www.educastur.princast/es/cp/evaristo/tutorial2.pdf”); 3.

Ruta absoluta en CD: si la ruta comienza con el signo barra tumbada (“/”) entonces Flash busca a partir de la carpeta raíz o principal del disco donde está grabado el proyector. Ejemplo:

geturl(“/carpeta1/tutorial4.pdf”). Esto sólo funciona en soporte CD.

Diseño Flash de recursos web y multimedia para la enseñanza 167

CAPÍTULO 15: DISEÑO MULTIMEDIA

4.

Ruta con 1 punto: Un solo punto representa la carpeta donde está situado el proyector. Ejemplo: geturl(“./carpeta3/tutorial3.pdf”); 5.

Ruta con 2 puntos: Dos puntos se refieren al directorio padre de la carpeta en la cual se aloja el proyecto. Ejemplo:

geturl(“../carpeta4/tutorial5.pdf”);

Figura 15.8 Rutas absolutas y relativas a documentos desde el proyector 15.5 Crear un CD con autoarranque

Prácticamente todos los CD-ROM que llegan a nuestras manos actualmente tienen la capacidad de autoarrancar una aplicación que contienen al insertarlo físicamente en la unidad. Desde Windows 95, Microsoft incluyó esta posibilidad en sus sistemas operativos.

Diseño Flash de recursos web y multimedia para la enseñanza 168

CAPÍTULO 15: DISEÑO MULTIMEDIA

Para el o, el CD-ROM debe tener en su directorio raíz un fichero de texto con el nombre Autorun.inf que contenga al menos la siguiente información:

[autorun]

OPEN=proyector.exe

ICON=cdicon.ico

donde proyector.exe puede ser un proyector Flash que arranque en modo pantalla completa. La línea de código cdicon.ico es opcional y sirve para vincular un icono gráfico a la representación del disco en el explorador.

Para que el CD arranque al insertarlo debe estar activado en el sistema Windows del cliente el modo autoarranque de CDROM. Éste puede estar desactivado. Se activa o desactiva mediante edición del Registro de Windows en la entrada: HKEY_LOCAL_MACHINES\System\CurrentControlset\Services\

CdRom\Autorun

La clave REG_DWORD con valor 0 desactivará el autoarranque mientras que si toma el valor 1, activará el autoarranque.

15.6 Crear un proyector exe a partir de un swf

En esta sección vamos a estudiar cómo crear un proyector EXE a partir de una animación Flash en formato SWF.

1.

Utilizando el Explorador de Windows sitúate en la carpeta ejemplos dentro del directorio Curso Flash.

2.

Doble clic para abrir el archivo atapuerca.swf.

3.

Arranca el reproductor autónomo de Flash mostrando esta película.

Selecciona Ver > Pantalla completa y luego la tecla <Esc> para experimentar.

4.

Elige Archivo > Crear proyector .

5.

En el cuadro de diálogo Guardar como selecciona la carpeta donde deseas guardarlo y el nombre. Por ejemplo: Mis Documentos y el nombre por defecto: atapuerca.exe

6.

Cierra el reproductor de Flash y sitúate en Mis Documentos. Al abrir este archivo EXE arranca el reproductor mostrando la película como si se tratase del SWF. Sin embargo el archivo EXE puedes distribuirlo a terceros sin necesidad de que tengan instalado Flash en su ordenador.

Diseño Flash de recursos web y multimedia para la enseñanza 169

CAPÍTULO 15: DISEÑO MULTIMEDIA

Figura 15.9 Creación con el reproductor de Flash de un EXE a partir de un SWF

Diseño Flash de recursos web y multimedia para la enseñanza 170

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

Capítulo

16

Ejemplos de diseño web y

multimedia

16.1 Diseño de una agenda de enlaces: “Portales

educativos”

n este ejercicio vamos a crear una película Flash que contenga varios botones. En el navegador se mostrará una URL distinta al hacer clic en cada uno.

E 1. Clic en Modificar > Documento para definir como tamaño del escenario: 550 px de Anchura por 400 px de Altura. Configura el color negro como fondo del escenario. Clic en el botón Aceptar.

2.

Selecciona la herramienta Texto. En el Inspector de propiedades define previamente el tipo de fuente: Arial, tamaño: 18 y color de la fuente: blanco o amarillo/anaranjado. Escribe en el centro superior del escenario un encabezado con el texto “PORTALES EDUCATIVOS”.

3.

Con la herramienta Flecha selecciona este bloque para situarlo en el centro.

4.

Archivo> Importar > Importar a escenario . Localiza el archivo mundo.wmf en la carpeta Curso Flash/images . Pulsa el botón Abrir.

5.

Para agrupar los elementos editables que forman la imagen: Modificar

> Agrupar. Ahora puedes arrastrar el conjunto para situarlo en el centro.

6.

Elige Ventana > Otros paneles > Bibliotecas Comunes > Curso.

Desde la carpeta Botones > Ovals pincha y arrastra al escenario del documento actual los 5 botones ovalados. Cada uno muestra un color diferente. Cierra la ventana de la Biblioteca común.

7.

Ventana > Biblioteca. Ahora sólo aparece la Biblioteca del documento actual. Clic derecho, por ejemplo, sobre el botón Oval buttons-yellow y elige Edición. Entrarás en el modo edición de ese botón.

8.

Insertar > Línea de tiempo > Capa para añadir una nueva capa al diseño del botón. Clic derecho en el fotograma Sobre de esa nueva capa y selecciona Insertar fotograma clave.

Diseño Flash de recursos web y multimedia para la enseñanza 171

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

9.

Selecciona la herramienta Texto. En el Inspector de propiedades define las características del texto: Arial, 12 puntos, negrita y color amarillo. A continuación haz clic sobre el escenario, inmediatamente debajo del botón y teclea “EDUCASTUR” . Elige la herramienta Flecha y sitúa este cuadro de texto en una adecuada posición. Edición > Editar documento para abandonar el modo de edición de símbolo.

10.

Reitera los pasos 7-9 para el resto de botones ovalados de la Biblioteca: blue (azul) con el texto “CNICE” , green (verde) con el texto “PNTE” , orange (naranja) con el texto “XTEC” y red (rojo) con el texto

“EDUCALIA”.

11.

Activa la herramienta Flecha.

12.

Para alinear los botones, selecciona los cinco a la vez y en Ventana > Paneles de diseño > Alinear haz clic en los botones Alinear verticalmente respecto al centro y Distribuir horizontalmente respecto al centro.

Figura 16.1 Aspecto final del ejercicio Portales educativos 13.

Clic derecho sobre el botón amarillo del escenario para seleccionarlo y pulsa la tecla <F9> . Se despliega el panel Acciones – Botón.

14.

Introduce el código:

on(release) {

getURL("http://www.educastur.princast.es");

}

15.

Repite los pasos 13-14 e introduce una URL según el color del botón: Portal

Color

URL

Educastur Amarillo

http://www.educastur.princast.es

XTEC Naranja http://www.xtec.es

Educalia Rojo

http://www.educalia.org

PNTE Verde http://www.pnte.cfnavarra.es/pnte/

CNICE Azul

http://www.cnice.mecd.es

Diseño Flash de recursos web y multimedia para la enseñanza 172

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

16.

Graba el documento en la carpeta Mis Documentos, por ejemplo, con el nombre portales.fla.

17.

Elige Archivo > Publicar para generar los archivos de publicación de Flash.

18.

Desde el Explorador de Windows, busca la carpeta Mis Documentos y haz doble clic sobre el documento web portales.html.

Se abrirá el navegador y mostrará esta publicación Flash. Prueba que los enlaces funcionan correctamente.

16.2 Diseño de una aplicación multimedia:

“Oriente Próximo”

El objetivo de este apartado es el diseño de un proyector EXE que indexe distintos recursos informativos en un CDROM. El tema de actualidad que se propone es “Oriente Medio”. La información ha sido recopilada de la sección Temas del País Digital.

Con los contenidos aquí capturados se han elaborado archivos de distinto formato: DOC, XLS, TXT, PDF, HTM, JPG y EXE que ahora resta indexar mediante el diseño de un proyector Flash. Todos estos archivos se pueden encontrar en la subcarpeta Oriente dentro de la famosa carpeta Curso Flash que has instalado en tu ordenador.

Los archivos requeridos para realizar nuestro proyector son:

• intro.txt: texto a modo de introducción que va a ser utilizado dentro de la película.

• crono.htm: “Cronología”.

• claves.doc: “Claves del conflicto”.

• prota.pdf: “Protagonistas”.

• refu.xls: “Los refugiados”.

• israel.exe: proyector Flash con la animación interactiva “Israel en mapas”.

• inti.exe: proyector Flash con la animación interactiva: “Cronología de una nueva intifada”

• enlaces.htm: “Enlaces” a webs sobre el tema.

• biblio.txt: “Bibliografía”.

• exodo.jpg. Fotografía del barco del éxodo con el título “Oriente Medio”.

• logopais.gif: logo de la fuente ElPais.es

• rotulo.jpg: rótulo con el título “Oriente Medio”.

• trinegro.gif: icono para las viñetas de los archivos htm.

Sigue los siguientes pasos para crear este interfaz:

1.

Clic en Modificar > Documento para definir como tamaño del escenario: 550 px de Anchura por 400 px de Altura. Configura el color blanco como fondo del escenario. Clic en el botón Aceptar.

2.

La imagen del barco se importa desde el archivo exodo.jpg. Elige Archivo > Importar > Importar a Biblioteca. En este cuadro de Diseño Flash de recursos web y multimedia para la enseñanza 173

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

diálogo navegar hasta situarse en la carpeta del disco duro Oriente.

Seleccionar como Tipo, los archivos de extensión JPEG. Clic en el archivo exodo y más tarde en Abrir.

3.

Mediante Ventana > Biblioteca puedes comprobar que en la biblioteca del documento actual aparece un mapa de bits que contiene esta imagen importada.

4.

Arrastra desde la Biblioteca al Escenario este mapa de bits .

5.

Para ajustar su tamaño, selecciona la herramienta Transformación libre y el modificador Escalar. Pincha y arrastra sobre la esquina inferior izquierda de la imagen para reducir un poco su tamaño hasta alcanzar unas dimensiones de 300 x 195 pixeles aproximadamente. (Ver los valores X e Y del Inspector de Propiedades). Ajusta la posición del mapa de bits a la esquina superior izquierda del escenario.

6.

Minimiza la ventana de Macromedia Flash MX 2004 y haz doble clic sobre el archivo intro.txt de la carpeta Oriente. Al tratarse de un archivo de texto, arrancará la aplicación Bloc de Notas de Windows mostrando el contenido de este archivo. Selecciona todo el texto mediante pinchar y arrastrar y cópialo mediante Edición > Copiar desde Bloc de Notas. Cierra la ventana del editor de textos y restaura la ventana de Flash.

Figura 16.2 Aspecto final de ejercicio Oriente Próximo

Diseño Flash de recursos web y multimedia para la enseñanza 174

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

7.

Selecciona la herramienta Texto. A continuación pincha y arrastra sobre el escenario en el espacio inmediatamente debajo de la fotografía. Has creado un cuadro de texto de anchura fija.

8.

En el Inspector de Propiedades de este cuadro de texto, define: Tipo de fuente: Tahoma; Tamaño: 11 puntos; Color de la fuente:

#333399 (azul). Clic sobre el selector de color para que se despliegue la paleta. Clic sobre la casilla que contiene el valor numérico y teclea este código de color precedido del símbolo “#”. En ocasiones es necesario trabajar con los valores hexadecimales de los colores para asegurarse la misma tonalidad en distintos objetos de un mismo escenario.

9.

Nota que el cursor parpadea en el cuadro de texto del escenario. Si esto no ocurre repite el paso 7. En lugar de teclear la información de este bloque la vamos a pegar desde el portapapeles mediante: Edición > Pegar.

10.

Inserta debajo otro cuadro de texto “Fuente: El Pais Digital” . Puedes utilizar como color de la fuente “#FFCC33” (amaril o/naranja) y de Tamaño: 9 puntos.

11.

Ahora vamos a crear los botones del interfaz. Cada botón va a ser un cuadro de texto. El texto variará de color: negro (reposo) y amarillo/naranja (sobre). Al pulsar (estado presionado) el bloque se desplazará ligeramente hacia la derecha y hacia abajo simulando la pulsación.

12.

Insertar > Nuevo símbolo. Teclea butcrono como nombre del símbolo y selecciona el Comportamiento de Botón. Clic en Aceptar.

13.

Selecciona la herramienta Texto. En el Inspector de propiedades selecciona la fuente Tahoma, el tamaño de 14 puntos y el color negro.

Haz clic sobre el escenario y teclea la etiqueta “Cronología”.

14.

Selecciona la herramienta Flecha. Clic sobre este cuadro de texto. En Ventana > Paneles de diseño > Información aparece el panel Info. Clic sobre el selector esquina en la parrilla de selectores. (Ver figura). Teclea el valor 0 en las casillas X e Y para centrar el cuadro de texto respecto a su esquina superior izquierda.

Figura 16.3 Selectores esquina y centro para situar X e Y

15.

Clic derecho sobre el fotograma Sobre en la línea de tiempo y selecciona Insertar Fotograma Clave en este menú contextual.

16.

Con la herramienta Flecha activada, haz clic sobre el cuadro de texto. En el Inspector de Propiedades cambiar el color del mismo. Puedes desplegar la paleta de colores e introducir en la casil a el valor “FFCC33”.

17.

Clic derecho sobre el fotograma Presionado en la línea de tiempo y selecciona Insertar Fotograma Clave en este menú contextual.

18.

Con la herramienta Flecha activada, haz clic sobre el cuadro de texto. En el Inspector de Propiedades introduce el valor 2 en las casil as X e Y.

Diseño Flash de recursos web y multimedia para la enseñanza 175

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

De esta forma simulamos la pulsación desplazando el cuadro de texto ligeramente a la derecha y abajo.

19.

Clic derecho sobre el fotograma Zona activa en la línea de tiempo y selecciona Insertar Fotograma Clave.

20.

Selecciona la herramienta Rectángulo. No importa el color de trazo y de rel eno definidos porque la zona activa no es visible. Pincha y arrastra para definir un rectángulo encima del cuadro de texto. Éste área será la zona sensible al ratón. No conviene dejar como zona activa el cuadro de texto porque entre los huecos que ofrecen las letras el botón no sería activo.

21.

Clic en el botón Atrás (flecha) situado en la esquina inferior izquierda de la línea de tiempo o bien Edición > Editar documento para abandonar el modo de edición de símbolos y regresar a la película.

22.

Repetir la secuencia de pasos 12-21 para crear los siguientes botones: Nombre símbolo

Texto

Butclaves

Claves del conflicto

Butprota Protagonistas

Butrefu Los

refugiados

Butisrael

Israel en mapas

Butinti

Cronología de la nueva Intifada

Butenlaces Enlaces

Butbiblio Bibliografía

Butsalir Salir

->

23.

Para visualizar la biblioteca de símbolos selecciona Ventana > Biblioteca. Selecciona la herramienta Flecha. Arrastra los botones creados para situarlos uno debajo de otro en la parte derecha del escenario. Ver ilustración anterior.

24.

Selecciona la herramienta Línea y dibuja en color negro una línea de grosor 3 pixeles por encima y por debajo de esta botonera. Sitúa el botón Salir -> por debajo de la línea inferior un poco separado del resto.

25.

Elige la herramienta Flecha. Pincha y arrastra para seleccionar ambas líneas y todos los botones de la botonera.

26.

Utiliza Ventana > Paneles de diseño > Alinear para visualizar el panel Alineamiento. En Alineamiento selecciona la opción Alinear borde izquierdo. En Distribuir selecciona la opción Distribuir verticalmente respecto al centro. En este caso evita pulsar el botón En escenario. Cierra este panel.

27.

Vamos a asignar una acción a cada botón. Vamos a comenzar por la instancia del botón Butcrono situada en el escenario. Selecciona este botón y despliega el panel Acciones mediante Ventana > Paneles de desarrollo > Acciones.

28.

En la parte derecha de este panel, teclea el script:

on (release) {

getURL("crono.htm");

}

Diseño Flash de recursos web y multimedia para la enseñanza 176

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

29.

Repite la secuencia de pasos 27-28 para asignar las correspondientes acciones a los distintos botones del escenario.

Nombre símbolo

Acción

Butclaves

getURL("claves.doc");

Butprota

getURL("prota.pdf");

Butrefu

getURL("refu.xls");

Butisrael

fscommand("exec", "israel.exe");

Butinti

fscommand("exec", "inti.exe");

Butenlaces

getURL("enlaces.htm");

Butbiblio

getURL("biblio.txt");

Butsalir

fscommand(“quit”);

30.

Clic sobre el fotograma nº1 para seleccionarlo y pulsa la tecla <F9> para mostrar el panel de Acciones-Fotograma.

31.

Introduce el script: fscommand("fullscreen","true"); 32.

Usando Archivo > Guardar, guarda este archivo FLA en la carpeta Oriente. De esta forma ya le indicas a Flash dónde guardar el resto de archivos de publicación. Puedes utilizar como nombre de este archivo OrienteMedio.fla

33.

En el cuadro de diálogo que se despliega mediante Archivo > Configuración de Publicación, activa la casilla Proyector Windows (.exe) y haz clic en el botón Publicar. Clic en el botón Aceptar.

34.

Cierra Flash usando Archivo > Salir.

35.

Utilizando el Explorador de Windows, sitúate

en la carpeta Oriente de tu disco duro y

observarás que aparecen los distintos archivos

de publicación de Flash. No obstante todavía nos

falta situar en la carpeta fscommand los

ejecutables EXE que invoca nuestro proyector

para que los encuentre.

36.

Crea una subcarpeta dentro de la carpeta

Oriente con el nombre fscommand: Clic

derecho, selecciona Nuevo > Carpeta. Escribe

como nombre fscommand y pulsa <enter> para confirmar.

37.

Arrastra a ella los EXE: israel.exe e inti.exe.

38.

Doble clic sobre el proyector

orientemedio.exe

y comprueba su

funcionamiento.

Figura 16.4 Contenido final de la carpeta oriente

Diseño Flash de recursos web y multimedia para la enseñanza 177

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

16.3 Diseño de una presentación multimedia:

“Fauna asturiana”

En este apartado diseñaremos un proyector EXE que contenga una presentación de varias dispositivas. El tema elegido es “Fauna asturiana”. Las imágenes y los textos han sido bajados de Internet. Todos los archivos que vamos a necesitar se encuentran en la subcarpeta Fauna dentro de la carpeta Curso Flash.

El uso de Flash en el diseño de una presentación de diapositivas tiene varias ventajas en relación con el empleo de otras herramientas conocidas:

• Mayor control en la edición de la presentación

• Compatibilidad plena tanto en el entorno web como multimedia.

• Genera archivos de reducido tamaño.

• Produce un archivo ejecutable final compacto y fácilmente portable.

Los archivos que vamos a necesitar para crear nuestro proyector son las imágenes: fotoasturcon.jpg, fotolobo.jpg, fotooso.jpg, fotourogallo.jpg; los archivos de texto: txtasturcon.txt, txtlobo.txt, txtoso.txt y txturogallo.txt; así como los sonidos: soniasturcon.wav, sonilobo.wav, sonioso.wav y soniurogallo.wav.

1.

Clic en Modificar > Documento para definir como tamaño del escenario: 550 px de Anchura por 400 px de Altura. Definir el color negro como fondo del escenario. Clic en el botón Aceptar.

2.

Vamos a importar las imágenes a la Biblioteca del documento actual.

Elige Archivo > Importar > Importar a Biblioteca. En casilla Buscar en, localiza y abre la carpeta Fauna situada en Curso Flash.

Selecciona como Tipo, los archivos de extensión JPEG. Aparecen las cuatro imágenes a importar. Clic en la primera, pulsa la tecla <Mayus> y sin soltarla clic en la última. Has seleccionado todos los archivos. Clic en el botón Abrir.

3.

Ahora vamos a importar los sonidos. Selecciona Archivo > Importar > Importar a Biblioteca. Selecciona como Tipo los archivos de extensión WAV. Aparecen los cuatro sonidos. Selecciónalos todos con el procedimiento anterior. Clic en el botón Abrir.

4.

Mediante Ventana > Biblioteca puedes comprobar que en la biblioteca del documento actual aparecen los mapas de bits y sonidos importados.

La información que contienen los TXT será pegada en el interior de bloques de texto.

5.

Abre la biblioteca común Curso mediante Ventana > Otros paneles > Bibliotecas comunes > Curso. Pincha y arrastra hasta la librería del documento actual, el botón sonido botón almacenado en la carpeta Botones. A partir de ese botón vamos a crear 4 botones, cada uno de los cuales reproducirá la voz del animal cuando el cliente pulse sobre él.

6.

Clic derecho sobre el nombre del botón sonido botón en la Biblioteca actual. Selecciona la opción Duplicar. Teclea como nombre del nuevo Diseño Flash de recursos web y multimedia para la enseñanza 178

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

botón: butlobo. Repite esta operación para crear butasturcon, butoso y buturogallo.

7.

Clic derecho sobre el nombre del botón butlobo en la ventana de la Biblioteca actual y selecciona Edición.

8.

Una vez situado en el modo de edición de símbolos, Insertar > Línea de tiempo > Capa. Doble clic sobre el nombre de la capa para cambiarlo: Sonido.

9.

En el fotograma Presionado de esta nueva capa, clic derecho y selecciona Insertar Fotograma Clave. Pincha y arrastra desde la Biblioteca actual a este fotograma, el sonido sonilobo.

10.

Clic en el nombre Escena 1 o bien en la flecha atrás situados en la base de la línea de tiempo para abandonar la edición de este símbolo.

11.

Repite los pasos 7-10 sobre los botones butasturcon, butoso y buturogallo para incorporarles los sonidos soniasturcon, sonioso, y soniurogallo, respectivamente.

12.

Ahora vamos a definir las capas de la presentación. Haz doble clic sobre el nombre de la capa y define su nuevo nombre: Diapos.

13.

Inserta una nueva capa encima. Su nombre será: Botonera. Haciendo doble clic sobre su nombre se puede cambiar. Esta capa contendrá el título principal y la botonera.

14.

Selecciona la herramienta Texto. En el Inspector de Propiedades define como fuente Arial, como tamaño 18 puntos, color azulito y efecto negrita. Clic sobre el escenario y teclea “FAUNA ASTURIANA” .

15.

Elige la herramienta Flecha para pinchar y situar este título principal en la esquina superior izquierda.

16.

Ventana > Otros paneles > Bibliotecas comunes > Curso para abrir esta biblioteca común. Dentro de la carpeta Botones, abre la carpeta Playback. Vete arrastrando hasta la esquina superior derecha del escenario y situando de izquierda a derecha los siguientes botones: playback-rewind, playback-step back, playback-step forward, playback-go to end y playback – stop. De esta forma hemos creado la botonera que nos dará control sobre la proyección de diapositivas.

17.

Selecciona la herramienta Flecha y selecciona todos los botones.

Ventana > Paneles de diseño > Alinear para visualizar el panel de Alineamiento. Clic en los botones Alinear borde superior y Distribuir horizontalmente respecto al centro.

18.

Clic en la capa Diapos. Vamos a crear la primera diapositiva.

19.

Pincha y arrastra desde la Biblioteca, el mapa de bits fotolobo para situarlo en la izquierda del escenario.

20.

Selecciona la herramienta Texto. En el Inspector de Propiedades define como fuente Arial, como tamaño 16 puntos, color de la fuente: amarillo-naranja (“#FFCC33”) y efecto negrita. Clic sobre el escenario y teclea “1. EL LOBO” .

21.

Elige la herramienta Flecha para pinchar y situar este título secundario al lado de la esquina superior derecha de la fotografía. Para ajustar con precisión la posición, usa las teclas de flechas.

22.

Minimiza la ventana de Macromedia Flash MX 2004 y haz doble clic sobre el archivo txtlobo.txt de la carpeta Fauna. Al tratarse de un archivo de texto, arrancará la aplicación Bloc de Notas de Windows mostrando el contenido de este archivo. Selecciona todo el texto mediante pinchar y arrastrar y cópialo mediante Edición > Copiar Diseño Flash de recursos web y multimedia para la enseñanza 179

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

desde Bloc de Notas. Cierra la ventana del editor de textos y restaura la ventana de Flash.

Figura 16.5 Primera diapositiva del ejercicio Fauna Asturiana

23.

Selecciona la herramienta Texto. A continuación pincha y arrastra sobre el escenario en el espacio inmediatamente debajo del título secundario y al lado derecho de la fotografía. Has creado un cuadro de texto de anchura fija.

24.

En el Inspector de Propiedades de este cuadro de texto, definir: Tipo de fuente: Arial; Tamaño: 14 puntos; Color de la fuente blanco y efecto Negrita.

25.

Observa que el cursor parpadea en el cuadro de texto del escenario. Si esto no ocurre repite el paso 23. En lugar de teclear la información de este cuadro la vamos a pegar desde el portapapeles mediante: Edición

> Pegar.

26.

Activa la herramienta Flecha y pincha y arrastra este cuadro para situarlo correctamente en el escenario en relación con el título y la fotografía

27.

Pincha y arrastra una instancia del símbolo butlobo para situarlo debajo de este cuadro de texto.

28.

Clic derecho en el fotograma nº2 en la capa Diapos y selecciona Insertar fotograma Clave. Ahora nos encontramos en el fotograma nº2. Vamos a cambiar su contenido para mostrar la información del siguiente animal: el oso. Haz clic en cualquier parte del escenario para deseleccionar el contenido del escenario.

29.

Clic derecho sobre la imagen del lobo, elige Intercambiar mapa de bits, selecciona fotooso.jpg y acepta.

Diseño Flash de recursos web y multimedia para la enseñanza 180

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

30.

Clic derecho sobre el botón de sonido, elige Intercambiar símbolo, selecciona butoso y acepta.

31.

Doble clic sobre el título de la diapositiva y sustitúyelo por “2. EL OSO” .

Acepta.

32.

Minimiza la ventana de Flash y abre mediante doble clic el archivo de texto txtoso.txt. Arrastra para seleccionar su contenido y copialo al portapapeles mediante Edición > Copiar . Cierra el Bloc de Notas y regresa a Flash.

33.

Doble clic sobre el texto del fotograma nº2, arrastra para seleccionarlo todo y elige Edición > Pegar. El contenido inicial es sustituido por el almacenado en el portapapeles.

34.

Elige la herramienta Flecha y sitúa adecuadamente los bloques de este fotograma.

35.

Clic derecho sobre el fotograma nº2 de la capa Botonera y selecciona Insertar fotograma.

36.

Repite los pasos 28-35 para crear los fotogramas nº3 y nº4 con los siguientes datos:

• Fotograma nº3. Título secundario: “3. EL ASTURCÓN”. Mapa de bits: fotoasturcon. Archivo de texto con información: txtasturcon.txt.

Botón con sonido: butasturcon.

• Fotograma nº4. Título secundario: “4. EL UROGALLO.”. Mapa de bits: fotourogallo. Archivo de texto con información: txturogallo.txt. Botón con sonido: buturogallo

37.

A continuación vamos a asignar acciones de navegación a cada botón de la consola. Con la herramienta Flecha activada, selecciona el primer botón. En este caso el botón playback-rewind.

38.

Muestra el panel de acciones utilizando Ventana > Paneles de diseño

> Acciones .

Figura 16.6 Acción gotoAndStop para llevar la cabeza lectora a un fotograma concreto Diseño Flash de recursos web y multimedia para la enseñanza 181

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

39.

Introduce el código de script, tratando de respetar los signos de puntuación, las llaves y paréntesis así como las minúsculas/mayúsculas: on (release){

gotoAndStop(1);

}

La acción gotoAndStop(<número_de_fotograma>) envía (goto) la cabeza lectora al fotograma cuyo número se indica y se detiene allí (stop). Con ello se regresará a la primera diapositiva siempre que se pulse en este botón.

40.

Sin cerrar el panel Acciones, realiza clic sobre el botón playback –

step back. Ahora introduce el siguiente código:

on (release){

prevFrame();

}

La acción PrevFrame(); envía la cabeza lectora al fotograma anterior para detenerse allí.

41.

Clic sobre el botón playback - step forward. Introduce el código de ActionScript:

on (release) {

nextFrame();

}

La acción nextFrame(); mueve la cabeza lectora al siguiente fotograma para detenerse allí.

42.

Clic sobre el botón playback - go to end. Teclea el siguiente código: on (release){

gotoAndStop(4);

}

La acción gotoAndStop(); envía la cabeza lectora al fotograma cuyo número se indica. En este caso al pulsar en este botón se alcanzará siempre la última diapositiva: nº4.

43.

Clic sobre el botón playback – stop. Debes introducir el siguiente código:

on (release){

fscommand("quit");

}

La acción fscommand("quit"); cierra el proyector. Esto ocurrirá cuando se pulse en este botón. Recuerda que esto sólo funciona si la película se visualiza a través del proyector .EXE. Debes sustituirlo por getURL("javascript:window.close()"); si la película se visualizará a través Diseño Flash de recursos web y multimedia para la enseñanza 182

CAPÍTULO 16: EJEMPLOS DE DISEÑO WEB Y MULTIMEDIA

del navegador web. En este caso el ejercicio consiste en crear un proyector de diapositivas para ejecutar en el disco duro local. Por este motivo utilizaremos la acción fscommand.

44.

Sólo resta indicar a Flash que cuando comience a reproducir el primer fotograma, se detenga para mostrar la diapositiva. Clic sobre el fotograma 1 de la capa botonera. Si el panel Acciones - Fotograma no está visible entonces elige Ventana > Paneles de desarrollo > Acciones. Teclea el código:

stop();

45.

Usando Archivo > Guardar, guarda este archivo FLA en tu carpeta favorita. De esta forma ya le indicas a Flash dónde guardar el resto de archivos de publicación. Puedes utilizar como nombre de este archivo Fauna.fla

46.

En el cuadro de diálogo que se despliega mediante Archivo > Configuración de Publicación, activa la casilla Proyector Windows (.exe) y haz clic en el botón Publicar.

47.

Cierra la aplicación Flash.

48.

Utilizando el Explorador de Windows, localiza el proyector EXE en tu disco duro y observarás que aparecen los distintos archivos de publicación de Flash. Doble clic sobre el proyector fauna.exe y comprueba su funcionamiento. Advierte que esta presentación se puede visualizar también desde el navegador a través de la página fauna.html que se ha creado.

Diseño Flash de recursos web y multimedia para la enseñanza 183

GLOSARIO

Glosario

A

Acción: Proceso que ejecuta la aplicación Flash: ir a una determinada URL

(getURL), detener la película (Stop), ejecutar una aplicación externa (Fscommand), etc. cuando la cabeza lectora alcanza un cierto fotograma o bien en respuesta a un evento de usuario sobre un botón o clip de película.

Agrupación de formas: Convertir una forma en un objeto para que no se fusione con otras dentro de la misma capa.

Alfa: Porcentaje de 0 a 100 que define la opacidad/transparencia de una instancia sobre el escenario.

Animación fotograma a fotograma: El movimiento se consigue por sucesivos fotogramas ordenados en la línea de tiempo. El diseñador crea la imagen para cada fotograma.

Animación por interpolación: El movimiento lo genera automáticamente Flash entre un fotograma inicial y otro final creados por el diseñador.

Apilamiento de objetos: Orden en que se sitúan uno encima de otro los distintos objetos de una misma capa.

Archivo FLA: Contiene el documento editable. Al hacer doble clic sobre su icono, se iniciará Flash que arranca en modo edición con este documento.

Archivo HTML: Página HTML que contiene la información necesaria para mostrar la película SWF dentro de la ventana del navegador. Al hacer doble clic sobre su icono, se iniciará el navegador por defecto y mostrará una página con la película.

Archivo SWF: Contiene la película en formato compacto no editable. Al hacer doble clic sobre su icono, se iniciará su visionado en la ventana del reproductor autónomo de Flash.

B

Biblioteca común: Archivo *.FLA situado en la carpeta Libraries dentro del directorio de instalación de Flash MX. Se pueden reutilizar sus símbolos en el documento actual a través de Ventana > Otros paneles > Bibliotecas comunes

Diseño Flash de recursos web y multimedia para la enseñanza 184

GLOSARIO

Biblioteca: Ventana que muestra y organiza los símbolos creados o importados en el documento actual.

Borrador: Herramienta para eliminar trazos y rellenos.

Bote de tinta: Herramienta para aplicar nuevos estilos, grosores o colores al trazo o borde de una forma.

Botón: Tipo de símbolo interactivo que responde a los eventos de ratón y de teclado del usuario. Consta de 4 estados o fotogramas: Reposo, Sobre, Presionado y Zona Activa.

C

Caché del navegador: Carpeta del disco duro local donde el navegador guarda automáticamente todos los elementos web que descarga para mostrarlos en su ventana.

Caja de herramientas: Cuadro donde aparecen todas las herramientas disponibles en Flash para dibujar y pintar.

Capa guía de movimiento: Tipo especial de capa que permite definir trazados más o menos complejos sobre los que se moverá un objeto animado por interpolación.

Capa máscara: Tipo especial de capa donde los elementos que contiene: formas, instancias de símbolos, etc definen áreas o agujeros a través de los cuales es visible el contenido de la capa vinculada que se sitúa debajo.

Capas: Simulan láminas de acetato transparentes apiladas una sobre otra donde a través de los huecos vacíos se puede observar el contenido de las capas inferiores.

Clip de película: Tipo de símbolo animado. Tiene su propia línea de tiempo que se reproduce con independencia de la línea de tiempo principal.

Códec Sorenson Spark: Algoritmo que utiliza Flash para comprimir/descomprimir los archivos de video que se importan/exportan.

Código hexadecimal de color: Valor precedido del símbolo “#” donde los 2

primeros dígitos expresan en hexadecimal la cantidad de Rojo, los 2 siguientes la cantidad de Verde y los 2 últimos la cantidad de Azul (RVA).

Color de relleno: Color del interior de una figura dibujada con las herramientas de Flash.

Color de trazo: Color del contorno de una figura dibujada con las herramientas de Flash.

Cubo de pintura: Herramienta para colorear formas cerradas y semicerradas.

Diseño Flash de recursos web y multimedia para la enseñanza 185

GLOSARIO

D

Degradado de color: Relleno que permite definir transiciones lineales o circulares de un color a otro.

Deshacer: Opción de Flash para deshacer el último cambio realizado. Se consigue mediante <Ctrl>+<Z> o bien Edición > Deshacer.

E

Envoltura: Recuadro de delimitación que contiene uno o más objetos y que permite cambiar la forma de los objetos contenidos en él.

Envolvente de sonido: Representación gráfica del sonido.

Escena: Cada uno de los fragmentos en que se puede dividir una película.

Escenario: Espacio de trabajo o lienzo donde se suceden los contenidos para generar la animación Flash.

Evento: Operación que realiza el usuario durante la reproducción de una película sobre un botón o clip de película utilizando el ratón o el teclado: pulsar el botón izquierdo, soltar el botón izquierdo, arrastrar, situar encima, pulsar una tecla, etc. Se puede programar una o varias acciones para cada evento o eventos.

F

Flash: Aplicación de la empresa Macromedia que permite la creación de animaciones interactivas para el diseño web y multimedia Flecha: Herramienta con el icono de flecha negra, el primero por arriba y por la izquierda en la Caja de herramientas, que se utiliza para seleccionar objetos en el escenario.

Fotograma clave: Es un tipo de fotograma donde el diseñador dibuja la imagen. En la animación fotograma a fotograma cada fotograma es clave. En la interpolada sólo el primero y el último son claves.

Fotograma: Cada uno de los cuadros que aparecen en la línea de tiempo. De la sucesión de fotogramas en la línea de tiempo surge la animación.

Fscommand: Acción de ActionScript que se utiliza para controlar el reproductor autónomo de Flash en opciones como modo pantalla completa, ejecutar otra aplicación, salir, etc.

Fuentes de dispositivo: Tipo de fuentes que se pueden usar en los cuadros de texto de una película para que al reproducirse Flash busque la más parecidas en las fuentes instaladas en el ordenador cliente. Se utiliza para ahorrar espacio en el archivo SWF final.

Diseño Flash de recursos web y multimedia para la enseñanza 186

GLOSARIO

G

GetURL: Acción de ActionScript que permite visualizar en el navegador una página web, archivo pdf, doc, xls, txt, etc cuya URL, local o remota, se introduce como dato.

Gráfico vectorial: Representa la imagen mediante vectores (líneas y curvas) que también incluyen información de color y posición. Son independientes de la resolución del dispositivo por lo que pueden aumentar su tamaño de visualización sin modificar la calidad o tamaño del archivo.

Gráfico: Tipo de símbolo que se utiliza para imágenes estáticas y para animaciones reutilizables ligadas a la línea de tiempo de la película principal.

I

Inspector de propiedades: Panel situado en la parte inferior de la pantalla que permite mostrar y configurar las propiedades del objeto o herramienta seleccionada en cada momento.

Instancia: Copia del símbolo que se sitúa en el escenario o anidada en otro símbolo.

Interpolación de cambio de forma: Animación de una transformación de una silueta o forma sobre el escenario generada automáticamente por Flash a partir de un fotograma clave inicial y otro final.

Interpolación de movimiento: Animación de traslación, giro o cambio de color de un objeto sobre el escenario generada automáticamente por Flash a partir de un fotograma clave inicial y otro final.

L

Lápiz: Herramienta de dibujo para trazar líneas, siluetas y formas a mano alzada.

Lazo: Herramienta para seleccionar un área de contornos irregulares en el escenario.

Línea de tiempo: Muestra la sucesión temporal de fotogramas que componen una película.

M

Mapa de bits: Representa la imagen mediante una parrilla de puntos de color o píxeles a modo de mosaico. Al aumentar su tamaño se deforma la imagen y el tamaño del archivo depende de las dimensiones de la parrilla de puntos que la definen.

Mezclador de colores: Panel de Flash para personalizar un degradado o gradiente de color.

Modificador: Alternativas que ofrece una herramienta en la sección Opciones de la Caja de herramientas.

Diseño Flash de recursos web y multimedia para la enseñanza 187

GLOSARIO

P

Papel cebolla: Opción de visualización de una animación en virtud de la cual se pueden visualizar varios fotogramas a la vez sobre el escenario.

Plug-in: Pequeña aplicación que se instala en el navegador para visualizar desde él los contenidos, en este caso, de Flash.

Pluma: Herramienta para dibujar trazos precisos a base de líneas rectas o curvas.

Proyector EXE: Archivo ejecutable que reproduce directamente la película, independiente del entorno de diseño Flash y de que el cliente tenga instalado o no el Reproductor en su equipo.

Publicar: Generar desde Flash los archivos HTML, SWF o incluso EXE para que otros usuarios puedan ver la película.

Punto de anclaje: Punto que define los vértices de la línea poligonal formada por segmentos rectos o curvos que se dibuja con la herramienta Pluma.

R

Radio de rectángulo redondeado: Ángulo con que se trazan las esquinas redondeadas de un rectángulo.

Reflejo de objetos: Genera la imagen especular de un objeto según su eje horizontal o vertical.

S

Selector de tangente: Extremo del segmento tangente que permite definir, mediante arrastre del ratón, la curvatura de un segmento dibujado con la herramienta Pluma.

Separar texto: Convertir el cuadro de texto en un conjunto de formas sobre el escenario.

Separar: Romper el nexo existente entre una símbolo de la Biblioteca y la instancia seleccionada en el Escenario.

Sesgar un objeto: Modificador de la herramienta Transformación Libre para inclinar el objeto seleccionado sobre su eje vertical u horizontal o bien sobre ambos.

Símbolo: Es un gráfico, botón o clip de película que se crea una vez y que es reutilizable en cualquier parte de la película o incluso en otras películas. Se localizan en la Biblioteca del documento Flash.

Sonido de evento: Sonido que debe descargarse por completo para reproducirse y una vez que empieza a sonar continúa hasta concluir su duración física o bien hasta

Diseño Flash de recursos web y multimedia para la enseñanza 188

GLOSARIO

que la cabeza lectora alcanza un fotograma con una acción de detener el sonido.

Suena con independencia de la línea de tiempo principal de la película.

Sonido de flujo: Sonido que comienza a reproducirse en cuanto se ha descargado información suficiente de los primeros fotogramas y luego se sincroniza con la línea de tiempo principal.

Streaming: Sincronización que permite al usuario iniciar la reproducción del contenido de un archivo mientras se completa su descarga desde la web al disco duro local.

Subselección: Herramienta con el icono de flecha blanca que permite trabajar con los puntos de anclaje de un objeto forma.

Swish: Aplicación independiente de Flash para producir fácilmente complejas animaciones con texto e imágenes en formato final *.SWF.

T

Transformación libre: Herramienta para rotar, reflejar, escalar, distorsionar y modificar la envoltura del objeto seleccionado sobre el escenario.

Trazar un mapa de bits: Conversión de un mapa de bits a un gráfico vectorial para poder editarlo con las herramientas de dibujo y pintura de Flash.

Diseño Flash de recursos web y multimedia para la enseñanza 189

ÍNDICE ALFABÉTICO

Índice alfabético

A

Abrir un archivo de película existente ................................................................... 12

Acción, fscommand........................................................................................... 163

Acción, geturl ................................................................................................... 161

Agrupación de formas ......................................................................................... 46

Agrupación de objetos ........................................................................................ 46

Alineación de objetos .......................................................................................... 48

Animación, fotograma a fotograma .................................................................... 124

Animación, interpolación cambio de forma I ....................................................... 131

Animación, interpolación cambio de forma II ...................................................... 132

Animación, interpolación de cambio de color ...................................................... 123

Animación, interpolación movimiento II.............................................................. 118

Animación, interpolación movimiento II.............................................................. 121

Animación, tipos en Flash.................................................................................. 117

Animación, uso de Capa Guía ............................................................................ 125

Apilamiento de objetos........................................................................................ 48

Archivo fla........................................................................................................ 149

Archivo html..................................................................................................... 149

Archivo swf ...................................................................................................... 149

B

Biblioteca, abrirla de otro archivo FLA .................................................................. 64

Biblioteca, bibliotecas comunes............................................................................ 67

Biblioteca, modos de visualización........................................................................ 62

Biblioteca, organización con carpetas ................................................................... 65

Borrador, borrar mediante arrastre ...................................................................... 32

Borrador, borrar todo el escenario ....................................................................... 32

Borrador, herramienta......................................................................................... 32

Borrador, herramienta propiedades ..................................................................... 32

Bote de tinta, herramienta................................................................................... 27

Diseño Flash de recursos web y multimedia para la enseñanza

190

ÍNDICE ALFABÉTICO

Bote de tinta, herramienta propiedades................................................................ 27

Botón, asociar una acción.................................................................................. 104

Botón, crear botón............................................................................................ 101

Botón, definir un evento.................................................................................... 106

Botón, qué es ................................................................................................... 100

Botón, uso de un botón de la Biblioteca ............................................................. 100

C

Cambiar color de relleno y trazo .......................................................................... 21

Capa guía......................................................................................................... 125

Capa máscara................................................................................................... 133

Capas, creando................................................................................................... 84

Capas, operaciones básicas ................................................................................. 85

Capas, organización en carpetas.......................................................................... 90

Capas, propiedades............................................................................................. 88

Capas, qué son................................................................................................... 84

Capas, uso de capas ........................................................................................... 89

CD autoarranque, crearlo .................................................................................. 168

Clip de película ................................................................................................. 135

Conexión de formas ............................................................................................ 45

Crear un grupo de objetos................................................................................... 47

Cuadro de herramientas...................................................................................... 13

Cubo de Pintura, herramienta.............................................................................. 20

Cubo de pintura, herramienta propiedades ........................................................... 20

Curso, CDROM......................................................................................................7

Curso, ejercicios ................................................................................................. 12

Curso, instalar materiales ......................................................................................8

D

Degradado, crear uno personalizado .................................................................... 24

Degradado, modificar un relleno .......................................................................... 25

Degradado, rellenar con un estándar ................................................................... 24

Desagrupar objetos............................................................................................. 47

Descargar animación Flash de la web................................................................. 155

Dibujar forma geométrica sin relleno.................................................................... 23

Dibujar formas geómetricas................................................................................. 14

Diseño multimedia ............................................................................................ 160

Distorsión de formas ........................................................................................... 43

Documento, configuración de propiedades ......................................................... 148

Diseño Flash de recursos web y multimedia para la enseñanza

191

ÍNDICE ALFABÉTICO

E

Edición html, etiquetas object/embed ................................................................ 156

Edición html, hipervínculo a swf......................................................................... 158

Edición html, visualización de archivos swf ......................................................... 156

Ejemplo de diseño, Acuario virtual ....................................................................... 84

Ejemplo de diseño, Acuario virtual 2.0.................................................................. 91

Ejemplo de diseño, Baile de salón ...................................................................... 124

Ejemplo de diseño, Coches modernos ................................................................ 165

Ejemplo de diseño, Conéctate............................................................................ 137

Ejemplo de diseño, Del círculo al cuadrado......................................................... 131

Ejemplo de diseño, Del uno al dos ..................................................................... 132

Ejemplo de diseño, El fantasma ......................................................................... 123

Ejemplo de diseño, Escudería multicolor............................................................... 89

Ejemplo de diseño, Fauna asturiana................................................................... 178

Ejemplo de diseño, Foco luminoso ..................................................................... 134

Ejemplo de diseño, Juego Flash ......................................................................... 156

Ejemplo de diseño, Oriente próximo................................................................... 173

Ejemplo de diseño, Portales educativos .............................................................. 171

Ejemplo de diseño, Rincón de Juegos ................................................................ 158

Ejemplo de diseño, Rueda que gira .................................................................... 121

Ejemplo de diseño, Vuelo de la abeja................................................................. 125

Ejemplo de diseño, Vuelo del águila ................................................................... 118

Eliminar objetos.................................................................................................. 38

Entorno de diseño.................................................................................................9

Escalar objetos mediante arrastre ........................................................................ 39

Escalar objetos mediante panel Transformar ........................................................ 39

Escalar un objeto................................................................................................ 39

Escalar, panel transformar................................................................................... 39

Escenario, Visualización....................................................................................... 50

Escenas, organización y diseño.......................................................................... 137

Escenas, uso .................................................................................................... 137

F

Flash MX, abrir .....................................................................................................9

Flash MX, por qué? ...............................................................................................6

Flash MX, salir .................................................................................................... 12

Flecha, agregar objetos a selección...................................................................... 36

Flecha, herramienta modificar formas .................................................................. 33

Flecha, seleccionar área del escenario.................................................................. 35

Flecha, seleccionar objetos.................................................................................. 34

Diseño Flash de recursos web y multimedia para la enseñanza

192

ÍNDICE ALFABÉTICO

Flecha, seleccionar relleno y trazo........................................................................ 35

Flecha, seleccionar trozos.................................................................................... 35

Fotograma clave ............................................................................................... 118

Fscommand, acción .......................................................................................... 164

Fscommand, carpeta......................................................................................... 166

Fscommand, exec ............................................................................................. 165

Fscommand, fullscreen...................................................................................... 165

Fscommand, quit .............................................................................................. 165

G

Geturl, acción ................................................................................................... 161

Guardar una película ........................................................................................... 11

I

Importar, archivos gráficos.................................................................................. 71

Importar, edición de videos ................................................................................. 75

Importar, formatos de video................................................................................ 74

Importar, formatos gráficos de importación.......................................................... 71

Importar, imagen................................................................................................ 69

Importar, pegar un mapa de bits ......................................................................... 70

Importar, recursos .............................................................................................. 69

Importar, videos incorporados ............................................................................. 75

Importar, videos QuickTime vinculados ................................................................ 83

Inspector de propiedades.................................................................................... 15

Instancia, asignar otro símbolo ............................................................................ 61

Instancia, crear y modificar ................................................................................. 57

Instancia, separar del Símbolo............................................................................. 60

L

Lápiz, herramienta .............................................................................................. 17

Lápiz, herramienta propiedades .......................................................................... 17

Lazo, herramienta............................................................................................... 36

Lazo, herramienta Modo Polígono ........................................................................ 36

Línea de tiempo, estructura............................................................................... 117

Linea de tiempo, trabajar con fotogramas .......................................................... 144

M

Mapa de bits, configuración................................................................................. 71

Mapa de bits, conversión a vectoriales ................................................................. 73

Diseño Flash de recursos web y multimedia para la enseñanza

193

ÍNDICE ALFABÉTICO

Mezclador de colores, panel................................................................................. 24

Modificar Envoltura ............................................................................................. 43

Mover, objeto mediante arrastre.......................................................................... 37

Mover, objeto usando Inspector .......................................................................... 37

Mover, objeto usando panel Inform. .................................................................... 38

Mover, objeto usando teclas flechas..................................................................... 37

O

Óvalo, herramienta ............................................................................................. 14

P

Papel cebolla .................................................................................................... 129

Pincel, herramienta ............................................................................................. 19

Pincel, herramienta propiedades .......................................................................... 19

Pluma, ajustar puntos de anclaje ......................................................................... 30

Pluma, añadir un punto de anclaje....................................................................... 31

Pluma, convertir punto angular en curvo .............................................................. 31

Pluma, dibujar curvas.......................................................................................... 30

Pluma, dibujar rectas .......................................................................................... 29

Pluma, eliminar un punto de anclaje .................................................................... 31

Pluma, herramienta ............................................................................................ 28

Pluma, herramienta preferencias ......................................................................... 28

Pluma, mover punto de anclaje ........................................................................... 31

Pluma, retocar posición de punto de anclaje......................................................... 31

Polystar, herramienta de dibujo ........................................................................... 16

Proyector exe, crearlo a partir del swf ................................................................ 169

Proyector exe, generar...................................................................................... 160

Publicación, configuración de formatos............................................................... 150

Publicación, configuración del archivo html......................................................... 152

Publicación, configuración del archivo swf .......................................................... 151

Publicación, pasos............................................................................................. 149

Publicación, publicación final ............................................................................. 155

R

Rectángulo, configuración esquinas ..................................................................... 15

Rectángulo, herramienta ..................................................................................... 15

Reflejo de objetos............................................................................................... 45

Rellenar de color áreas semicerradas ................................................................... 20

Requisitos del sistema...........................................................................................7

Diseño Flash de recursos web y multimedia para la enseñanza

194

ÍNDICE ALFABÉTICO

Rotar un objeto .................................................................................................. 41

Rotar un objeto 90 grados................................................................................... 42

Rotar un objeto mediante arrastre ....................................................................... 41

Rotar un objeto usando panel Tranformar ............................................................ 42

Rutas de archivos con fscommand y geturl......................................................... 166

S

Segmentación de formas..................................................................................... 45

Sesgar un objeto ................................................................................................ 43

Símbolo, crear un símbolo nuevo ......................................................................... 53

Símbolo, crear un símbolo vacío nuevo................................................................. 55

Símbolo, edición ................................................................................................. 59

Símbolo, qué es.................................................................................................. 52

Símbolo, tipos de comportamiento ....................................................................... 52

Símbolo, usando símbolos ................................................................................... 53

Sonido, añadirlo a botón ................................................................................... 113

Sonido, añadirlo a una película .......................................................................... 110

Sonido, bucle de reproducción........................................................................... 111

Sonido, controles de edición .............................................................................. 114

Sonido, de evento............................................................................................. 109

Sonido, de flujo ................................................................................................ 109

Sonido, detener o iniciar.................................................................................... 112

Sonido, editar envolvente.................................................................................. 114

Sonido, importación .......................................................................................... 109

Swish, ejemplo práctico de diseño ..................................................................... 146

T

Texto, configuración de propiedades.................................................................... 94

Texto, configuración del párrafo .......................................................................... 96

Texto, efecto sombra .......................................................................................... 98

Texto, herramienta y opciones............................................................................. 93

Texto, separación ............................................................................................... 97

Texto, uso de fuentes del dispositivo ................................................................... 97

Texto, uso en Flash............................................................................................. 93

Texto, vinculación a URL ..................................................................................... 98

Transformación libre, herramienta ...................................................................... 40

Diseño Flash de recursos web y multimedia para la enseñanza

195

Edición 2005

Flash para la enseñanza

SEGUIMIENTO

CON FLASH 8

MATERIALES PARA LA FORMACIÓN

A DISTANCIA DEL PROFESORADO

CNICE

Seguimiento con Flash 8

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

ÍNDICE

Introducción .............................................................................. 3

1. Requisitos del sistema ............................................................. 3

2. Instalación de la Biblioteca común curso..................................... 3

3. ¿Cómo abrir Flash?.................................................................. 3

4. Guardar una película ............................................................... 4

5. Visualización de paneles........................................................... 4

6. Rellenos con degradado ........................................................... 5

7. Preferencias de la herramienta pluma ........................................ 7

8. Bibliotecas comunes ................................................................ 7

9. Importar clips de vídeo como archivos incorporados..................... 8

10. Importar clips de vídeo QuickTime como archivos vinculados ....... 8

11. Propiedades de un cuadro de texto .......................................... 9

12. Efecto de sombra aplicado a un cuadro de texto ...................... 10

Página 2 de 10

Seguimiento con Flash 8

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

INTRODUCCIÓN

El curso " Flash para la enseñanza" (edición 2005) del CNICE está pensado para la versión MX 2004. Sin embargo es posible su seguimiento con la nueva versión Flash 8. Para los contenidos que se tratan en este curso de iniciación, los cambios que propone esta nueva entrega son mínimos. En este documento se recogen sólo las variaciones que afectan a los contenidos tratados en este curso indicando la referencia al apartado concreto del temario.

1. REQUISITOS DEL SISTEMA

(Referencia: 1.2 Requisitos del sistema)

Hay una versión de Flash 8 para la plataforma Windows y otra para Mac. Las necesidades de software y hardware para Windows son:

• Windows 2000 y XP

• Procesador Intel Pentium III 800 Mhz o superior.

• 256 Mb RAM (se recomienda 1 Gb)

• Pantalla 1024 x 768 píxeles color 16 bits.

• 710 Mb de espacio disponible en disco duro.

2. INSTALACIÓN DE LA BIBLIOTECA COMÚN CURSO

(Referencia: 1.5 Instalar materiales del Curso)

Biblioteca común: Curso. Es una biblioteca de símbolos que serán reutilizados desde el entorno de diseño Flash en las distintas prácticas planteadas. Se guardará por defecto en la carpeta

C:\Archivos de programa\Macromedia\Flash 8\es\Configuration\Libraries 3. CÓMO ABRIR FLASH

(Referencia: 1.6 Cómo abrir Flash)

Se puede utilizar uno de estos procedimientos:

• Doble clic sobre el icono de acceso directo de Macromedia Flash 8 situado en el escritorio.

• Clic en Inicio > Todos los programas > Macromedia > Macromedia Flash 8.

Página 3 de 10

Seguimiento con Flash 8

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

4. GUARDAR UNA PELÍCULA

(Referencia: 1.8 Guardar una película)

1. Archivo > Guardar como

2. En la casilla Guardar en selecciona la carpeta destino donde guardar la película Flash. Por ejemplo: Mis Documentos.

3. En la casilla Nombre teclea práctica como nombre del archivo creado.

Advierte que se guarda en un archivo de tipo *.FLA

4. En la lista Tipo se pueden elegir dos opciones:

• Documento de Flash 8 (*.fla). Opción por defecto. Este archivo *.FLA no se podrá abrir con la versión anterior: Flash MX 2004.

• Documento de Flash MX 2004 (*.fla). El formato *.FLA resultante es editable con Flash 8 y MX 2004. No se podrá abrir con versiones anteriores: MX, 5, etc.

5. Archivo > Cerrar

5. VISUALIZACIÓN DE PANELES

(Referencia: Todo el curso).

En Flash 8 la visualización de la mayoría de paneles se activa a partir de la opción Ventana en la barra de menús. Las opciones más usadas a lo largo del curso son:

• Inspector de Propiedades: Ventana > Propiedades > Propiedades.

• Biblioteca Común: Ventana > Bibliotecas comunes.

• Mezclador de Colores: Ventana > Mezclador de colores.

• Panel de Información: Ventana > Información.

• Panel Transformar: Ventana > Transformar.

• Panel Escenas: Ventana > Otros paneles > Escenas

Página 4 de 10

Seguimiento con Flash 8

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

6. RELLENOS CON DEGRADADO

(Referencia: 2.5.5 Crear un degradado personalizado)

Para cambiar el color de un puntero de degradado haz doble clic sobre él y en la paleta de colores que se muestra elige el nuevo color.

Modificación del color de un puntero de degradado

(Referencia: 2.5.6 Modificar un relleno con degradado)

1. Selecciona la herramienta Óvalo .

2. Clic en el control de Relleno y selecciona un degradado radial estándar de los que aparecen en la parte inferior de esta paleta. Por ejemplo: bola plateada.

3. Pincha, arrastra y suelta sobre el escenario para crear un bola con aspecto tridimensional.

4. Selecciona la herramienta Transformación de relleno situada en el cuadro de herramientas.

Herramienta Transformación de relleno

5. Haz clic en el área rellena con el degradado. Cuando se selecciona un relleno con degradado para editarlo, aparecen distintos selectores de edición.

Página 5 de 10

Seguimiento con Flash 8

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

Modificadores de degradado

6. Para modificar el degradado se puede utilizar uno de los siguientes procedimientos:

• Desplazar: arrastra el selector central con forma de círculo para desplazar el gradiente respecto a la figura.

• Punto Focal: desplaza este control con forma de triángulo invertido a lo largo del diámetro para definir la ubicación del punto más luminoso.

• Anchura: arrastra el control con forma cuadrada para aumentar o disminuir la altura y anchura del degradado.

• Girar. mueve el selector de forma circular para girar el degradado en relación con la figura.

• Radio: en degradados radiales aparece otro selector circular periférico en medio que permite modificar el radio del degradado.

Página 6 de 10

Seguimiento con Flash 8

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

7. PREFERENCIAS DE LA HERRAMIENTA PLUMA

(Referencia: 2.7.1 Preferencias de la herramienta Pluma)

1. Selecciona Edición > Preferencias y elige la categoría Dibujo.

2. Para la herramienta Pluma activa estas 3 opciones:

• Mostrar vista previa de la pluma.

• Mostrar puntos sólidos.

• Mostrar cursores de precisión.

3. Clic en Aceptar.

Configuración de las preferencias de la herramienta Pluma

8. BIBLIOTECAS COMUNES

(Referencia: 5.4 Trabajar con Bibliotecas Comunes)

Para crear una biblioteca común en Flash 8 es necesario guardar el archivo FLA en la carpeta: C:\Archivos de programa\Macromedia\Flash 8\es\Configuration\Libraries.

Tras esta operación será necesario cerrar y volver a abrir Flash para que esta nueva biblioteca se muestre disponible en el menú: Ventana > Bibliotecas Comunes >

…

Página 7 de 10

Seguimiento con Flash 8

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

9. IMPORTAR CLIPS DE VÍDEO COMO ARCHIVOS INCORPORADOS

(Referencia: 6.8 Importar clips de vídeo como archivos incorporados)

Vamos a importar un clip de vídeo almacenado en la carpeta Curso Flash/videos con el nombre de stuart_little.mov (formato QuickTime). Es imprescindible para realizar esta práctica tener instalado QuickTime en tu equipo. En la sección Recursos en la portada del CD del curso, puedes realizar la instalación de este conocido reproductor.

1. Selecciona Archivo > Importar > Importar a escenario o bien Archivo

> Importar > Importar vídeo …

2. Si has optado por la primera alternativa localiza el archivo stuart_little.mov. Clic en el botón Abrir. Si has elegido directamente la importación de vídeo pasarás directamente a la pantalla siguiente donde deberás localizar el archivo.

3. En el cuadro de diálogo Importar vídeo se muestra la pregunta: ¿Dónde se encuentra el archivo de vídeo?. La opción En el equipo está activada y la casilla Ruta de archivo apunta al archivo anteriormente seleccionado.

Clic en Siguiente>

4. ¿Cómo desea implementar el vídeo? En este caso selecciona Incorporar vídeo en SWF y reproducir en la línea de tiempo. Clic en Siguiente> 5. ¿Cómo desea incorporar el vídeo? Define estos parámetros:

• Tipo de símbolo: Vídeo incorporado.

• Pista de audio: Integrado.

• Colocar instancia en el escenario: Activado.

• Expandir línea de tiempo si es necesario: Activado

• Incorporar todo el vídeo: Seleccionado.

• Editar primero el vídeo: No Seleccionado.

Clic en Siguiente>

6. Codificación. En este caso se puede elegir uno de los perfiles de codificación de la lista. Por ejemplo: Flash 8 – Calidad media (400 kbps).

Esta es la opción que vamos a utilizar en este caso aunque se podría probar con otras posibilidades.

7. Clic en Siguiente y a continuación en Finalizar. Espera unos segundos mientras se realiza la importación. El vídeo se guardará en un clip de video en la Biblioteca del documento actual.

10. IMPORTAR CLIPS DE VÍDEO QUICKTIME COMO VINCULADOS

(Referencia: 6.9 Importar clips de vídeo QuickTime como archivos vinculados)

Si importas un clip de video QuickTime (QT), puedes optar por crear un vínculo con el video desde la película Flash en lugar de incorporarlo. Un clip de video QT

vinculado no pasa a formar parte del archivo Flash. En lugar de esto la película mantiene un puntero al archivo de origen.

Si se crea un enlace con un video QT, entonces la película Flash debe publicarse necesariamente en formato MOV para QuickTime. No es posible visualizar un video QT vinculado desde un formato de publicación de película para Flash Player (SWF).

Por esta razón no se puede visualizar el resultado final mediante Control > Probar película sino cuando el documento Flash haya sido publicado en formato MOV (Ver capítulo Publicación).

Página 8 de 10

Seguimiento con Flash 8

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

Para importar un video QT como archivo vinculado:

1. Selecciona Archivo > Importar > Importar a escenario o bien Archivo

> Importar > Importar vídeo …

2. Si has optado por la primera alternativa localiza el archivo stuart_little.mov. Clic en el botón Abrir. Si has elegido directamente la importación de vídeo pasarás directamente a la pantalla siguiente donde deberás localizar el archivo.

3. En el cuadro de diálogo Importar vídeo se muestra la pregunta: ¿Dónde se encuentra el archivo de vídeo?. La opción En el equipo está activada y la casilla Ruta de archivo apunta al archivo anteriormente seleccionado.

Clic en Siguiente>

4. ¿Cómo desea implementar el vídeo? En este caso selecciona Video QuickTime vinculado para publicarlo en QuickTime. Al activar esta opción Flash 8 te mostrará el mensaje : "Esta función no es compatible con Flash 8 …". Pulsa en el botón Configuración de publicación y en la solapa Flash modifica la versión de Flash de la película actual para definirla como 5

Pulsa en Aceptar.

5. Para terminar pulsa en el botón Finalizar.

11. PROPIEDADES DE UN CUADRO DE TEXTO

(Referencia: 8.3 Configurar las propiedades de un cuadro de texto)

En el Inspector de Propiedades de un cuadro de texto se puede elegir una opción de suavizado para el texto. Existen varias posibilidades:

Configuración de las propiedades de un cuadro de texto

• Utilizar fuentes del dispositivo. Indica que el archivo SWF no va contener las fuentes utilizadas y cuando el reproductor de Flash se encuentre este cuadro tratará de buscar la más parecida en el equipo local. Esto reduce ligeramente el peso del archivo SWF final. Si se especifica Times New Roman como fuente de dispositivo para que este texto se muestre es necesario que esta fuente esté instalada en el equipo en que se reproduce ese SWF. Por ello conviene elegir únicamente las familias de fuentes más comunes o mejor aún las fuentes de sistema: _sans, _serif y _typewriter.

• Mapa de bits (sin suavizado) desactiva la función de suavizado de texto.

El texto se muestra con bordes afilados y aumenta el tamaño del archivo SWF resultante, ya que se incorporan a él los contornos de fuente. El texto en mapa de bits es nítido en el tamaño de fuente en que se exporta, pero no cuando se redimensiona.

• Suavizado para animación crea animaciones más homogéneas. En parte, esto es posible porque Flash ignora la información de alineamiento y ajuste entre caracteres. La opción Suavizado para animación genera archivos SWF

más grandes, ya que se incorporan a ellos los contornos de fuente. Conviene utilizar esta opción con tipos de fuente de 10 o más puntos por razones de legibilidad.

Página 9 de 10

Seguimiento con Flash 8

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

• Suavizado para legibilidad utiliza un nuevo motor de suavizado que mejora la legibilidad de las fuentes, en especial en los tamaños pequeños.

La opción Suavizado para legibilidad genera archivos SWF más grandes, ya que se incorporan a ellos los contornos de fuente. Para utilizar Suavizado para legibilidad es necesario publicar para Flash Player 8. No conviene utilizar esta opción para textos animados porque ralentiza la animación.

12. EFECTO DE SOMBRA APLICADO A UN CUADRO DE TEXTO

(Referencia: 8.8 Efecto de sombra en un cuadro de texto)

Flash 8 permite aplicar efectos sobre objetos del escenario facilitando ciertos procesos de diseño. A estos efectos se les llama Filtros.

1. Selecciona un cuadro de texto sobre el escenario.

2. Clic en el solapa Filtros del Inspector de propiedades ubicado en la parte inferior de la pantalla.

3. Pulsa en el botón "+" Añadir efecto y elige Sombra.

4. En el panel se pueden configurar los distintos parámetros del efecto. Para modificar el color de la sombra despliega el cuadro Color y selecciona otro.

Configuración del efecto Sombra

5. Se pueden superponer los efectos. Para eliminar un efecto de la lista, selecciónalo y pulsa en el botón "-" Quitar filtro.

Página 10 de 10

Edición 2005

Flash para la enseñanza

SEGUIMIENTO CON

FLASH CS3 PRO

MATERIALES PARA LA FORMACIÓN

A DISTANCIA DEL PROFESORADO

CNICE

Seguimiento con Flash CS 3 Pro

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

ÍNDICE

Introducción .............................................................................. 3

1. Requisitos del sistema ............................................................. 3

2. Instalación de la Biblioteca común curso..................................... 3

3. ¿Cómo abrir Flash?.................................................................. 3

4. Guardar una película ............................................................... 4

5. Visualización de paneles........................................................... 5

6. Dibujar formas geométricas...................................................... 5

7. Dibujar una forma geométrica sin relleno ................................... 6

8. Modificar un relleno con degradado............................................ 7

9. Preferencias de la herramienta pluma ........................................ 8

10. Bibliotecas comunes .............................................................. 8

11. Importar clips de vídeo como archivos incorporados ................... 9

12. Importar clips de vídeo QuickTime como archivos vinculados ....... 9

13. Propiedades de un cuadro de texto ........................................ 10

14. Efecto de sombra aplicado a un cuadro de texto ...................... 11

Página 2 de 11

Seguimiento con Flash CS 3 Pro

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

INTRODUCCIÓN

El curso " Flash para la enseñanza" (edición 2005) del CNICE está pensado para la versión MX 2004. Sin embargo es posible su seguimiento con la versión CS 3

Profesional. Para los contenidos que se tratan en este curso de iniciación, los cambios que propone esta nueva entrega son mínimos. En este documento se recogen sólo las variaciones que afectan a los contenidos tratados en este curso indicando la referencia al apartado concreto del temario.

1. REQUISITOS DEL SISTEMA

(Referencia: 1.2 Requisitos del sistema)

Hay una versión de Flash CS3 Pro para la plataforma Windows y otra para Mac.

Las necesidades de software y hardware para Windows son:

• Windows XP con SP2 o Windows Vista.

• Procesador Intel Pentium 4, Intel Centrino, Intel Xeon o Intel Core Duo.

• 512 Mb RAM (se recomienda 1 Gb)

• Pantalla 1024 x 768 píxeles color 16 bits.

• 2,5 GB de espacio disponible en el disco duro

Nota:

Si no se dispone de un equipo de última generación se recomienda instalar la versión Flash MX 2004 o Flash 8.

2. INSTALACIÓN DE LA BIBLIOTECA COMÚN CURSO

(Referencia: 1.5 Instalar materiales del Curso)

Biblioteca común: Curso. Es una biblioteca de símbolos que serán reutilizados desde el entorno de diseño Flash en las distintas prácticas planteadas. En el caso de Flash CS3 Pro se guardará por defecto en la carpeta:

C:\Archivos de programa\Adobe\Adobe Flash CS3\es\Configuration\Libraries 3. CÓMO ABRIR FLASH

(Referencia: 1.6 Cómo abrir Flash)

Se puede utilizar uno de estos procedimientos:

• Doble clic sobre el icono de acceso directo de Flash CS3 Pro situado en el escritorio.

• Clic en Inicio > Todos los programas > Adobe Flash CS3 > Adobe Flash CS3 Profesional

Página 3 de 11

Seguimiento con Flash CS 3 Pro

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

4. GUARDAR UNA PELÍCULA

(Referencia: 1.8 Guardar una película)

1. Archivo > Guardar como

2. En la casilla Guardar en selecciona la carpeta destino donde guardar la película Flash. Por ejemplo: Mis Documentos.

3. En la casilla Nombre teclea práctica como nombre del archivo creado.

Advierte que se guarda en un archivo de tipo *.FLA

4. En la lista Tipo se pueden elegir dos opciones:

• Documento de Flash CS3 (*.fla). Opción por defecto. Este archivo

*.FLA no se podrá abrir con ninguna versión anterior: Flash 8, MX 2004, etc.

• Documento de Flash 8 (*.fla). El formato *.FLA resultante es editable con Flash CS3 Pro y 8. No se podrá abrir con Flash MX 2004.

5. Clic en el botón Guardar

Para abrir un nuevo documento:

1. Archivo > Nuevo

2. En el cuadro de diálogo Nuevo documento selecciona la opción: Archivo de Flash (ActionScript 2.0).

3. Clic en el botón Aceptar.

Página 4 de 11

Seguimiento con Flash CS 3 Pro

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

5. VISUALIZACIÓN DE PANELES

(Referencia: Todo el curso).

En Flash CS3 Pro la visualización de la mayoría de paneles se activa a partir de la opción Ventana en la barra de menús. Las opciones más usadas a lo largo del curso son:

• Inspector de Propiedades: Ventana > Propiedades > Propiedades

• Biblioteca Común: Ventana > Bibliotecas comunes

• Mezclador de Colores: Ventana > Color

• Panel de Alineación: Ventana > Alinear

• Panel de Información: Ventana > Información

• Panel Transformar: Ventana > Transformar

• Panel Escenas: Ventana > Otros paneles > Escena

6. DIBUJAR FORMAS GEOMÉTRICAS

(Referencia: 2.1 Dibujar formas geométricas)

Para dibujar un rectángulo de esquinas redondeadas:

1. Haz clic sobre la herramienta Rectángulo y mantén pulsado hasta que se muestre el panel asociado.

2. Selecciona la opción Herramienta Rectángulo simple.

3. Define los colores de trazo y relleno en el cuadro de herramientas.

4. Pulsa y arrastra sobre el escenario para dibujar el rectángulo.

5. A continuación selecciona la herramienta Flecha y haz clic sobre el rectángulo dibujado.

6. Para redondear sus esquinas existen dos métodos alternativos:

• Pinchar y arrastrar hacia dentro los selectores que aparecen en sus esquinas.

• Definir un valor de redondeo en el Inspector de Propiedades de este rectángulo

Página 5 de 11

Seguimiento con Flash CS 3 Pro

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

7. DIBUJAR UNA FORMA GEOMÉTRICA SIN RELLENO

(Referencia: 2.5.3 Herramienta Cubo de Pintura > Dibujar una forma geométrica sin relleno)

Para dibujar un rectángulo sin relleno:

1. En el cuadro de herramientas selecciona la herramienta Rectángulo.

2. Clic sobre el icono “cubo de pintura” correspondiente al control de color de relleno. Esta acción activa este control.

3. Pulsa en el botón Sin color que aparece inmediatamente debajo a la derecha. Muestra la figura de un rectángulo de fondo blanco con una diagonal roja.

4. Despliega la paleta de colores del trazo o borde para elegir, por ejemplo, el color negro.

5. Pincha y arrastra sobre el escenario para dibujar esta figura geométrica sin relleno.

Página 6 de 11

Seguimiento con Flash CS 3 Pro

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

8. MODIFICAR UN RELLENO CON DEGRADADO

(Referencia: 2.5.6 Modificar un relleno con degradado)

1. Selecciona la herramienta Óvalo .

2. Clic en el control de Relleno y selecciona un degradado radial estándar de los que aparecen en la parte inferior de esta paleta. Por ejemplo: bola plateada.

3. Pincha, arrastra y suelta sobre el escenario para crear un bola con aspecto tridimensional.

4. Selecciona la herramienta Transformación de degradado situada en el cuadro de herramientas. Para ello haz clic y mantén pulsado sobre el botón situado inmediatamente debajo de la herramienta Flecha (negra). Se despliega un panel donde podrás elegir Herramienta Transformación de degradado.

5. Haz clic en el área rellena con el degradado. Cuando se selecciona un relleno con degradado para editarlo, aparecen distintos selectores de edición.

Modificadores de degradado

6. Para modificar el degradado se puede utilizar uno de los siguientes procedimientos:

• Desplazar: arrastra el selector central con forma de círculo para desplazar el gradiente respecto a la figura.

• Punto Focal: desplaza este control con forma de triángulo invertido a lo largo del diámetro para definir la ubicación del punto más luminoso.

Página 7 de 11

Seguimiento con Flash CS 3 Pro

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

• Anchura: arrastra el control con forma cuadrada para aumentar o disminuir la altura y anchura del degradado.

• Girar. mueve el selector de forma circular para girar el degradado en relación con la figura.

• Radio: en degradados radiales aparece otro selector circular periférico en medio que permite modificar el radio del degradado.

9. PREFERENCIAS DE LA HERRAMIENTA PLUMA

(Referencia: 2.7.1 Preferencias de la herramienta Pluma)

1. Selecciona Edición > Preferencias y elige la categoría Dibujo.

2. Para la herramienta Pluma activa estas 3 opciones:

• Mostrar vista previa de la pluma.

• Mostrar puntos sólidos.

• Mostrar cursores de precisión.

3. Clic en Aceptar.

Configuración de las preferencias de la herramienta Pluma

10. BIBLIOTECAS COMUNES

(Referencia: 5.4 Trabajar con Bibliotecas Comunes)

Para crear una biblioteca común en Flash CS3 Pro es necesario guardar el archivo FLA en la carpeta:

C:\Archivos de programa\Adobe\Adobe Flash CS3\es\Configuration\Libraries Tras esta operación será necesario cerrar y volver a abrir Flash para que esta nueva biblioteca se muestre disponible en el menú: Ventana > Bibliotecas Comunes >

…

Página 8 de 11

Seguimiento con Flash CS 3 Pro

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

11. IMPORTAR CLIPS DE VÍDEO COMO ARCHIVOS INCORPORADOS

(Referencia: 6.8 Importar clips de vídeo como archivos incorporados)

Vamos a importar un clip de vídeo almacenado en la carpeta Curso Flash/videos con el nombre de stuart_little.mov (formato QuickTime). Es imprescindible para realizar esta práctica tener instalado QuickTime 7 en tu equipo. Puedes visitar la web de Apple para descargar la última versión de este reproductor gratuito: http://www.apple.com/es/quicktime/download/

1. Selecciona Archivo > Importar > Importar a escenario o bien Archivo

> Importar > Importar vídeo …

2. Si has optado por la primera alternativa localiza el archivo stuart_little.mov. Clic en el botón Abrir. Si has elegido directamente la importación de vídeo pasarás directamente al cuadro Seleccionar vídeo en el cual deberás localizar el archivo. Recuerda que está en la carpeta Curso Flash/videos.

3. Se muestra la pregunta: ¿Dónde se encuentra el archivo de vídeo?. La opción En el equipo está activada y la casilla Ruta de archivo apunta al archivo anteriormente seleccionado. Clic en el botón Siguiente> 4. ¿Cómo desea implementar el vídeo? En este caso selecciona Incorporar vídeo en SWF y reproducir en la línea de tiempo. Clic en Siguiente> 5. ¿Cómo desea incorporar el vídeo? Define estos parámetros:

• Tipo de símbolo: Vídeo incorporado.

• Pista de audio: Integrado.

• Colocar instancia en el escenario: Activado.

• Expandir línea de tiempo si es necesario: Activado

• Incorporar todo el vídeo: Seleccionado.

• Editar primero el vídeo: No Seleccionado.

Clic en el botón Siguiente>

6. Codificación. En este caso se puede elegir uno de los perfiles de codificación de la lista. Por ejemplo: Flash 8 – Calidad media (400 kbps).

Esta es la opción que vamos a utilizar en este caso aunque se podría probar con otras.

7. Clic en Siguiente y a continuación en Finalizar. Espera unos segundos mientras se realiza la importación. El vídeo se guardará en un clip de video en la Biblioteca del documento actual.

12. IMPORTAR CLIPS DE VÍDEO QUICKTIME COMO VINCULADOS

(Referencia: 6.9 Importar clips de vídeo QuickTime como archivos vinculados)

Si importas un clip de video QuickTime (QT), puedes optar por crear un vínculo con el video desde la película Flash en lugar de incorporarlo. Un clip de video QT

vinculado no pasa a formar parte del archivo Flash. En lugar de esto la película mantiene un puntero al archivo de origen.

Si se crea un enlace con un video QT, entonces la película Flash debe publicarse necesariamente en formato MOV para QuickTime. No es posible visualizar un video QT vinculado desde un formato de publicación de película para Flash Player (SWF).

Por esta razón no se puede visualizar el resultado final mediante Control > Probar película sino cuando el documento Flash haya sido publicado en formato MOV (Ver capítulo Publicación).

Página 9 de 11

Seguimiento con Flash CS 3 Pro

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

Para importar un video QT como archivo vinculado:

1. Selecciona Archivo > Importar > Importar a escenario o bien Archivo

> Importar > Importar vídeo …

2. Si has optado por la primera alternativa localiza el archivo stuart_little.mov. Clic en el botón Abrir. Si has elegido directamente la importación de vídeo pasarás directamente a la pantalla siguiente donde deberás localizar el archivo.

3. En el cuadro de diálogo Importar vídeo se muestra la pregunta: ¿Dónde se encuentra el archivo de vídeo?. La opción En el equipo está activada y la casilla Ruta de archivo apunta al archivo anteriormente seleccionado.

Clic en Siguiente>

4. ¿Cómo desea implementar el vídeo? En este caso selecciona Video QuickTime vinculado para publicarlo en QuickTime. Al activar esta opción Flash CS3 Pro te mostrará el mensaje : "Esta función no es compatible con Flash 9 …". Pulsa en el botón Configuración de publicación y en la solapa Flash modifica la versión de Flash de la película actual para definirla como 5 Pulsa en Aceptar.

5. Para terminar pulsa en el botón Finalizar.

13. PROPIEDADES DE UN CUADRO DE TEXTO

(Referencia: 8.3 Configurar las propiedades de un cuadro de texto)

En el Inspector de Propiedades de un cuadro de texto se puede elegir una opción de suavizado para el texto. Existen varias posibilidades:

Configuración de las propiedades de un cuadro de texto

• Utilizar fuentes del dispositivo. Indica que el archivo SWF no va contener las fuentes utilizadas y cuando el reproductor de Flash se encuentre este cuadro tratará de buscar la más parecida en el equipo local. Esto reduce ligeramente el peso del archivo SWF final. Si se especifica Times New Roman como fuente de dispositivo para que este texto se muestre es necesario que esta fuente esté instalada en el equipo en que se reproduce ese SWF. Por ello conviene elegir únicamente las familias de fuentes más comunes o mejor aún las fuentes de sistema: _sans, _serif y _typewriter.

• Mapa de bits (sin suavizado) desactiva la función de suavizado de texto.

El texto se muestra con bordes afilados y aumenta el tamaño del archivo SWF resultante, ya que se incorporan a él los contornos de fuente. El texto en mapa de bits es nítido en el tamaño de fuente en que se exporta, pero no cuando se redimensiona.

• Suavizado para animación crea animaciones más homogéneas. En parte, esto es posible porque Flash ignora la información de alineamiento y ajuste entre caracteres. La opción Suavizado para animación genera archivos SWF

más grandes, ya que se incorporan a ellos los contornos de fuente. Conviene Página 10 de 11

Seguimiento con Flash CS 3 Pro

Curso "Flash para la enseñanza" (edición 2005) Formación a distancia del profesorado – CNICE

utilizar esta opción con tipos de fuente de 10 o más puntos por razones de legibilidad.

• Suavizado para legibilidad utiliza un nuevo motor de suavizado que mejora la legibilidad de las fuentes, en especial en los tamaños pequeños.

La opción Suavizado para legibilidad genera archivos SWF más grandes, ya que se incorporan a ellos los contornos de fuente. Para utilizar Suavizado para legibilidad es necesario publicar para Flash Player 8 o superior. No conviene utilizar esta opción para textos animados porque ralentiza la animación.

14. EFECTO DE SOMBRA APLICADO A UN CUADRO DE TEXTO

(Referencia: 8.8 Efecto de sombra en un cuadro de texto)

Flash CS3 Pro permite aplicar efectos sobre objetos del escenario facilitando ciertos procesos de diseño. A estos efectos se les llama Filtros.

1. Clic sobre un cuadro de texto situado en el escenario para seleccionarlo.

2. Haz visible el panel Filtros mediante Ventana > Propiedades > Filtros 3. Clic en el solapa Filtros del Inspector de propiedades ubicado en la parte inferior de la pantalla.

4. Pulsa en el botón "+" Añadir efecto y elige Sombra.

5. En el panel se pueden configurar los distintos parámetros del efecto. Para modificar el color de la sombra despliega el cuadro Color y selecciona otro.

Configuración del efecto Sombra

6. Se pueden superponer los efectos. Para eliminar un efecto de la lista, selecciónalo y pulsa en el botón "-" Quitar filtro.

Página 11 de 11

Document Outline

Portada_flash

cap00

cap01

cap02

cap03

cap04

cap05

cap06

cap07

cap08

cap09

cap10

cap11

cap12

cap13

cap14

cap15

cap16

glosario

indice

cfc_flash8_v01

cfc_flashcs3pro_v01