P. 1
Tutorial de Flash 8 Alumnos

Tutorial de Flash 8 Alumnos

|Views: 19.941|Likes:
Publicado porsolo597

More info:

Published by: solo597 on Oct 15, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

10/16/2013

pdf

text

original

Unidad 1. Introducción a Flash 8 (I) ¿Qué es FLASH?

Flash 8 es una potente herramienta creada por Macromedia que ha superado las mejores expectativas de sus creadores. Inicialmente Macromedia Flash fue creado con el objeto de realizar animaciones vistosas para la web, así como para crear GIFs animados. Los motivos que han convertido a Flash 8 en el programa elegido por la mayoría de los diseñadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash 8. Desde la web de Macromedia te puedes descargar una versión de evaluacion de Flash 8 válida para 30 días. Los logotipos de Flash son propiedad de Macromedia.

¿Por qué usar FLASH 8?

Las posibilidades de Flash son extraordinarias, cada nueva versión ha mejorado a la anterior, y el actual Flash 8 no ha sido menos. Aunque su uso más frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos más. Son tantos, que todos los diseñadores web deberían saber utilizar Flash. Flash ha conseguido hacer posible lo que más se echa en falta en Internet: Dinamismo, y con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no estático (en contraposición a la mayoría de las páginas, que están realizadas empleando el lenguaje HTML). Con Flash podremos crear de modo fácil y rápido animaciones de todo tipo. Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y horas creando lo que nos dicte nuestra imaginación, pero esto no es suficiente para ser el preferido por los diseñadores profesionales... ¿Entonces qué es? De Flash MX 2004 a Flash 8 Hay compañías que lanzan mejoras en sus productos por pura necesidad económica; Cuando sucede esto, los usuarios lo notamos rápidamente por las pocas mejoras ofrecidas por las nuevas versiones. No es este el caso de Flash 8, que continua con la costumbre de Macromedia de aplicar considerables mejoras a las nuevas versiones de sus productos ... Si pensabais que Flash MX 2004 era ya insuperable, no os perdais las mejoras que aporta Flash 8: Mejoras en cuanto a facilidad de manejo, mayor potencia gráfica y de integración con programas de edición de imágenes, facilidad para importar vídeo, posibilidad de emular tus películas dirigidas a dispositivos móviles y para los menos avanzados, se recupera el asistente de ActioScript que había desaparecido en la versión anterior... Analicemos estas ventajas y otras muchas con un poco más de detalle:

Diseños más atractivos: Flash 8 permite el uso de efectos visuales que nos facilitarán la creación de animaciones,

presentaciones y formularios más atractivos y profesionales, así mismo, pone a nuestra disposición mecanismos para hacer este trabajo más cómodo y rápido, tales como la existencia de filtros y modos de mezcla añadidos en esta versión. Optimización de fuentes: Incorpora también opciones de legibilidad para fuentes pequeñas, haciendo la lectura de nuestros textos más agradables y de alta legibilidad. Además de poder modificar la optimización, Flash permite también la selección de configuraciones preestablecidas para textos dinámicos y estáticos. Bibliotecas integradas: Ahora podemos buscar rápidamente cualquier objeto existente en nuestras películas, navegando por las bibliotecas de todos los archivos abiertos desde un único panel. Mayor potencia de animación: Flash 8 permite un mayor control de las interpolaciones habilitando un modo de edición desde el que se podrá modificar independientemente la velocidad en la que se apliquen los diferentes cambios de rotación, forma, color, movimiento, etc, de nuestras interpolaciones. Mayor potencia gráfica: Evita la repetición innecesaria de la representación de objetos vectoriales simplemente señalando un objeto como mapa de bits. Aunque el objeto se convierta al formato de mapa de bits, los datos vectoriales se mantienen tal cual, con el fin de que, en todo momento, el objeto pueda convertirse de nuevo al formato vectorial. Mejoras en la importación de vídeo: Para facilitar el resultado con formatos de vídeo, Flash 8 incluye un códec independiente de calidad superior capaz de competir con los mejores códecs de vídeo actuales con un tamaño de archivo mucho más pequeño. Además de una gran posibilidad de revestimientos para los controles de éste en nuestra película. Compatiblidad Metadatos: Incluye tus SWF en buscadores de internet con la nueva característica de definición de archivo con un título, una descripción y/o palabras clave para que los motores de búsqueda reflejen con más precisión el contenido representado por el archivo. Emulador para dispositivos móviles: Prueba tus películas destinadas a dispositivos móviles compatibles con

Flash Lite con el nuevo emulador que incorpora Flash 8. Podrás probar tus películas de un modo eficiente antes de publicarlas. Asistente de ActionScript: El Asistente de ActionScript ha vuelto. Fue eliminado en la versión anterior, pero se ha vuelto a recuperar, y de forma mejorada, en esta última. Ahora ActionScript al alcance de tu mano.

Las alternativas a Flash 8. Javascript Desde hace mucho tiempo, el lenguaje HTML ha mostrado carencias importantísimas en todos los aspectos. El HTML crea páginas web estáticas, páginas en las que todo el movimiento que podemos encontrar se debe a imágenes animadas (GIFS) o a vídeos insertados en ellas... Este lenguaje, revolucionario en su día, demostró pronto que era insuficiente en todos los campos. Pronto comenzaron a surgir alternativas: El Javascript nació con el objeto de crear acciones o programas cortos que se pudieran insertar en la web para darle vida. El Javascript, no es un lenguaje de programación propiamente dicho, pues sólo crea "acciones" que se ejecutarán posteriormente en el navegador que visualice la página, jamás podremos crear un programa en Javascript, sólo complementos para la web. Este lenguaje presenta varios inconvenientes, en primer lugar, su ejecución puede resultar peligrosa para la persona que accede a una web, por lo que muchas personas optan por desactivar el "Javascript" de sus navegadores. Si nuestra página web contiene mucho código Javascript, simplemente, no lo verán.

efectos en la barra de estado. CSS Aunque muchos no se hayan dado cuenta.. tan sólo las complementa. tipo de fuente. el HTML no permite crear justificados de textos o simplemente dejar un margen a la izquierda del documento. resulta prácticamente imposible asegurar que el texto vaya a aparecer tal y como yo quiero en el navegador de otra persona. todos los títulos que creemos y los identifiquemos como tales. tendrán ese tratamiento (color. ¿Por qué no usarlas dentro de Flash? . tamaño de la letra. pero no sirven para crear animaciones. ). como por ejemplo realizar comprobaciones en los formularios.En segundo lugar y como con casi todo. el Javascript no sirve para crear páginas web. y cuentan con la ventaja de que se han convertido en un estándar (aunque siempre habrá alguien incapaz de visualizar un contenido que use una hoja de estilo). Su potencia es mucha. sino que su problema es la falta de precisión.. a los títulos).. Gracias a las CSS hemos ganado en control sobre nuestras páginas web. eso sí) que no lo soportan y sería inútil intentar ejecutar un código Javascript si el navegador no lo reconoce. Para ver unos ejemplos de usos de Javascript y sus códigos. Además. Debemos destacar además.. Para esto se crearon las Hojas de Estilo en Cascada (CSS en inglés). que Flash puede trabajar conjuntamente con javascript y ejecutar códigos y funciones Javascript sin problemas.. visita nuestra Página Avanzada Las alternativas a Flash 8. por lo que su uso general suele estar enfocado a pequeñas "ayudas" en la interactividad de la web. existen navegadores (cada vez menos. o por ejemplo. por lo que Javascript se convierte en una ayuda para todos los usuarios de Flash 8.. Además de permitir administrar los textos e imágenes como queramos por nuestra página web. una vez creado el tratamiento que queremos dar a un tipo de texto (por ejemplo.). Así. De hecho. HTML tiene una potencia muy limitada en el tratamiento de textos. y tal vez en vistosidad y diseño. el principal problema del HTML a la hora de mostrar y distribuir textos por pantalla no suele ser su incapacidad para hacerlo (las posibilidades que permite suelen ser más que suficientes para cualquier usuario normal). son una forma magnífica de simplificar el código de la página web y de acelerar su creación. ya que como su nombre indica son "Hojas de Estilo".

Se llama DHTML (o HTML Dinámico) y como su nombre indica se creó para crear contenidos en movimiento en las páginas web. Hemos visto como se solucionan los principales problemas que tiene el HTML.Pues porque esto no estaba contemplado en las anteriores versiones de Flash. Otra ventaja de usar Flash. DHTML. Desde la versión 2004 (Flash 8) las hojas de estilo son perfectamente compatibles con Macromedia Flash. las CSS han dejado de ser una alternativa al uso de Flash y han pasado a quedar integradas dentro del mismo. ¿Su inconveniente? Hay demasiados navegadores que tiene problemas con él y su carga puede ser lenta o retardada.. La primera solución viene del propio HTML. simplemente porque pueden asociarse con textos empleados dentro de nuestra película sin más que asignar la hoja de estilo que queramos a la propiedad StyleSheet del objeto texto al que queramos aplicar la hoja de estilo. AJAX. Las alternativas a Flash 8. Su funcionalidad llega hasta mover objetos por la web. y sobre todo. pero aún falta por saber cómo se intenta eliminar esa "estaticidad" característica de las páginas HTML. . aunque es una buena solución para crear menús vistosos sin animaciones extraordinarias. Por tanto. se emplea para crear menús animados. Suelen tener esta apariencia: En realidad el DHTML no es más que una combinación de HTML y Javascript (de ahí que lo hayamos dejado para el final).. Seguro que habeis visto un montón sin daros cuenta.

El Eterno Debate Y ante todo esto ¿Qué nos ofrece Flash? Pues Flash es.DOM ( Document Object Model) para manipular la información presentada de forma dinámica e interactiva a través de JavaScript. Este PLUGIN es gratuito. Al igual que algunos navegadores no soportan javascript o no pueden ver contenidos DHTML (o incluso CSS). la herramienta más potente del mercado para crear contenido multimedia para la web pero presenta dos inconvenientes importantes.Asynchronous JavaScript and XML. con diferencia. o Ajax. Por suerte.El objeto XMLHttpRequest para intercambiar datos de forma asíncrona con el servidor web. cada vez más navegadores lo llevan incorporado y cada vez más gente sabe lo que es y no se asusta cuando se le ofrece.XHTML (o HTML y CSS para dar formato y estilos). es una nueva técnica de programación para crear interactividad en la web formada por la combinación de varias tecnologías ya conocidas: . Puedes descargarlo AQUÍ. El primero es la compatibilidad con FLASH. Un PLUGIN es un programita especial que permite a tu navegador identificar las películas FLASH y descargarlas y visualizarlas correctamente. . . . para poder ver FLASH se requiere un PLUGIN especial de la casa Macromedia. Así que cada vez más gente lo tiene.

No dejeis de aprender a manejar el programa con más futuro. y si además incorpora sonidos es fácil que la cifra se dispare. por ejemplo. Aquí teneis algunas páginas interesantes hechas con FLASH 2Advanced Studios NRG Ikea Resumiendo. Aún así. insertar o no contenido Flash en una página web puede ser cuestionable (a día de hoy). Evidentemente depende del contenido que tenga.El segundo problema es el tamaño que ocupan las películas y su tiempo de descarga. al igual que insertar DHTML. Además.. aunque depende de muchas cosas. Por ejemplo la creación de CDs interactivos (como los que incluyen las revistas de informática. la creación de banners publicitarios o lo que más está de moda ahora: la creación de dibujos animados usando Flash 8 (os sorprendería saber la cantidad de dibujos animados conocidos creados o animados mediante Flash). Con Flash se pueden hacer páginas web realmente Por otra parte. el tiempo que tarda en estar visible el contenido Flash es mayor y no todos los visitantes están dispuestos a esperar. una animación Flash ocupa mucho más. pues se emplea para optimizar planos. por ejemplo)... pero suelen superar los 100 KB con facilidad. pero el día en el que todo el mundo se conecte a internet a alta velocidad aún está lejos. no hemos de olvidar que Flash tiene muchísmas aplicaciones más (hecho que ha provocado que otras compañías traten de sacar a la venta "clónicos" del Flash). crear diseños de interiores y trabajar con imágenes vectoriales en general. se irán a otra página. las conexiones de banda ancha son cada asombrosas vez más numerosas. simplemente. (al menos en cuánto a diseño web) . Mientras que una página HTML puede ocupar unos 10 KB como media. Al ocupar más espacio. Flash tiene uso industrial.. lo que ellimina el problema del tiempo de descarga. así que el debate seguirá abierto mucho tiempo.

que baje y suba.Unidad 2. Puede parecer un trabajo de horas. Veamos cómo Flash nos lo pone fácil. esta sencillez en su utilización permite crear animaciones de un modo efectivo y rápido. Realizando la Animación . Mi primera Animación Flash Comenzando Una de las características principales de Flash 8 es su sencillez. es decir. Pongámonos en situación. pero nada más lejos de la realidad. supongamos que queremos crear una animación en la que una pelota realice un movimiento de "bote".

de modo que cuantos más instantes dibujemos. el tiempo que transcurre entre los instantes en los que la pelota está arriba y abajo) y por último se le indica a Flash que cree una animación de movimiento entre estos fotogramas. pues bastará con copiar el primero).En este apartado no pretendemos enseñar cómo crear una animación Flash (pues eso se verá más adelante). Ahora. A primera vista. con Flash bastará con crear 3 fotogramas: en el primero dibujaremos la pelota en el instante inicial (arriba del todo). en el segundo se dibujará la pelota en el momento de tocar el suelo y en el tercero la pelota volverá a estar arriba (en realidad este tercer fotograma no hará falta crearlo. lo lógico parece ser dibujar la pelota en cada instante del movimiento. Por tanto. se determina el tiempo que durará cada movimiento (es decir. Pues bien. el objetivo es que entendamos cómo crea Flash las animaciones y de que modo nos facilita el trabajo. vemos que el trabajo más largo (dibujar los objetos) ya está hecho. Fácil ¿verdad? . más real parecerá el movimiento.

Director. El Entorno de Trabajo (I)Principio del formulario Final del formulario La Interfaz de Flash 8 Flash 8 cuenta con un entorno o interfaz de trabajo de lo más manejable e intuitiva. Además...Unidad 3. tiene la ventaja de que es similar a la de otros programas de Macromedia (Dreamweaver.). todo esto hace más fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash 8 por primera vez: . Freehand.

Podeis descargar esta versión de forma gratuita desde AQUÍ .A lo largo de todo el curso trabajaremos con la versión de evaluación de Flash 8 en castellano.

Insertar: Te permite insertar objetos en la película. te permite moverte por los fotogramas y por las escenas. Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un . tanto objetos o dibujos como fotogramas. Ver: Además de los típicos Zooms. así como nuevos fotogramas... Más adelante se tratará en profundidad. abrirlos. vídeo. también permite personalizar algunas de las opciones más comunes del programa.. Texto: Sus contenidos afectan a la edición de texto. Es similar a la de cualquier otro programa de diseño web o gráfico. Edición: Es el clásico menú que te permite Cortar.. El resto de opciones permite modificar características de los elementos de la animación Suavizar. Modificar: La opción Transformar permite modificar los gráficos existentes en la película. o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. También incluye la posibilidad de crear una cuadrícula y unas guías. Veamos cuáles son: La Barra de Menús L a Barra de Menús tiene como propósito facilitar el acceso a las distintas utilidades del programa. imágenes e incluso otras películas Flash). acciones.. Veamos los principales Submenús a los que se puede acceder: Archivo: Permite crear nuevos archivos.).En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos el programa Flash.. aunque tiene algunas particularidades.. que sólo pretende mostrar las partes principales de la interfaz de Flash. También permite configurar la impresión de las páginas. guardarlos. Optimizar o de la propia película (Capa.. y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales (este tema se tratará más adelante). Pegar. Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos.. Copiar. imprimirlas. Esto se puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones. Flash recordará nuestras preferencias y abrirá el programa tal y como lo dejamos la última vez que lo utilizamos. capas. Todos se irán viendo a lo largo de este curso aunque no aparezcan en esta imagen.. Escena . escenas. En esta imagen faltan algunos menús.

además de las opciones clásicas acerca de cómo distribuir las ventanas.. la Velocidad de los Fotogramas (12. hasta el diccionario de Action Script.. en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre el Número de Fotograma actual (1 en la imagen). 1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos) 2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma.usuario pueda introducir en el entorno de edición) que hayamos almacenado en nuestra animación. Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Macromedia. cuánto dura o cuándo aparecerá en la película.0s en la imagen). desde el manual existente. obtener otros nuevos de la página de Macromedia o ejecutar los que ya tengamos.. Además. Control: Desde aquí se modifican las propiedades de reproducción de la película. Ventana: Este menú. Probar Película . Consta de 2 partes.. incluye accesos directos a TODOS los Paneles. Reproducir. Rebobinar. lecciones guiadas etc. pasando por tutoriales. Unidad 3.. El Entorno de Trabajo (II)Principio del formulario Final del formulario La Línea de Tiempo La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. .0 en la imagen) y el Tiempo de película transcurrido (0.

Todo esto se puede controlar desde la Línea de Tiempo. la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. una animación no es más que una sucesión de fotogramas. por tanto. La Línea de es Tiempo Fotogram as Principio del formulario Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. para insertar en ellos un nuevo contenido no existente en la película. Se identifican por tener un punto negro en el centro y cuando esté vacío se le diferencia por una línea negra vertical. Veamos qué tipos de fotogramas hay y cuáles son sus rasgos. la película Flash no será nada más que los fotogramas que aparecen en la Línea de tiempo uno detrás de otro.G Final del formulario Un fotograma representa el contenido de la película en un instante de tiempo. en el orden que establece la misma Línea de tiempo. Por tanto. Para saber más acerca de la Línea de Tiempo y de los distintos tipos de fotogramas que existen visita nuestra Página Avanzada Unidad 3.A nivel conceptual. Es decir. se crean. pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifíco. . Avanzad o.

En el ejemplo. pues estos últimos vienen delimitados por líneas verticales grises (no negras). Por defecto ocupan toda la película y Flash no los tendrá en cuenta al publicar la película. su misión es prolongar la duración de un fotograma clave o keyframe.Por ejemplo. los fotogramas del 6 al 11 (incluidos) son fotogramas vacíos. No debemos confundirlos con los fotogramas contenedor. su contenido no es nuevo. De modo que si queremos que un objeto aparezca en el fotograma 1 y después otra vez en el fotograma 10. pasan a ser Keyframes. 1 de cada 5 fotogramas contenedor es gris. El último fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrará una imagen en blanco. son fotogramas contenedor todos los fotogramas a partir del 12 (incluido). sino que representan un lugar dentro de la Línea de Tiempo en la que se puede insertar uno.5 son fotogramas normales. los fotogramas del 2 . Los fotogramas . Fotograma Vacío: Son fotogramas sin contenido. En la imagen. En la imagen anterior. Su color es blanco. no representan contenido nuevo y son de clor gris. Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave. el resto. (no dará por terminada la animación). en el ejemplo de la "pelota" que rebotaba en el suelo habría 3 Keyframes. Si se inserta algo en estos fotogramas. esto es. es el mismo que el del fotograma 1. Como vemos. blancos. Uno para cada posición distinta de la pelota. Fotograma Contenedor: No son fotogramas propiamente dichos.

con Acciones Fotogramas Animados: Pueden ser de 2 tipos: 1) Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto. Otro movimiento. Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado. Si la duración del frame es la suficiente. que pasa de la posición del Keyframe inicial al final. Del frame 1 se pasa al 6. la acción existente en el fotograma 1 afecta también al 2 y al 3 (por ser fotogramas normales). El fotograma 4 no tiene acciones y sí las tiene el 5. . pues estas acciones. Etiquetado. Para representar esta animación aparece una flecha entre estos Keyframes. Fot. de Anim de Mov. en principio "ocultas" (para verlas hay que acceder al Panel Acciones) pueden cambiar el comportamiento de la película. Fot. Fot.del 2 al 9 deberán ser fotogramas vacíos ya que así el objeto "desaparecerá" y volverá a aparecer. se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas. (Flash representará el movimiento entre ambas posiciones en la película final) y del 6 al 11. En la imagen. Estos fotogramas son especialmente importantes. Dicho nombre se establece desde el Panel "Frame". Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una acción asociada. Esta imagen representa el ejemplo de la pelota.

Anim de En esta última imagen aparecen casi todos los tipos de fotogramas. forma de cuadrado (por ejemplo) y en el 11. veamos a grandes rasgos qué son las capas. Los objetos que estén en una determinada capa comparten fotograma y por tanto. ¿los reconoces? Las Capas El concepto de Capa es fundamental para manejar Flash de forma eficiente. se le dedicará un tema completo. Para representar esta animación aparece una flecha entre estos Keyframes. Una Capa se puede definir como una película independiente de un único nivel. una capa contiene su propia Línea de Tiempo (con infinitos fotogramas). pero otras veces es . Aún así.2) Fotogramas de animación de Forma: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto. de Forma. En el frame 1 tendría la forma original. otra forma distinta. Es decir. en el frame 5. similar al de arriba representa el cambio de forma de la pelota. que pasa de la forma que tenía en el Keyframe inicial a la del final. Fot. Este ejemplo. pueden "mezclarse" entre sí. Dada la importancia de estas. Esto es interesante a menudo.

crearemos tantas capas como sea necesario. Las ventajas y desventajas de usar capas se verá en el Tema 8. Para ello.conveniente separar los objetos de modo que no interfieran entre sí. El Área de Trabajo . por ejemplo). da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los sonidos en una capa independiente llamada "Sonidos". El uso de múltiples capas además.

sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. ya que coinciden con las Propiedades del documento. El escenario tiene unas propiedades muy importantes.El Área de trabajo consta de numerosas partes. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px. Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora. Transformar en predeterminado: Este botón. Veloc. Para acceder a ellas. Fotogramas: O número de fotogramas por segundo que aparecerán en la película. Contenidos existentes o los elegidos como Predeterminados) Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película. Dimensiones: Determinan el tamaño de la película. propio de la nueva versión de Flash. veámoslas: La parte más importante es el Escenario. Unidades de Regla: Unidad que se empleará para medir las cantidades. permite almacenar las . hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento: Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de busqueda rellenando los campos de Título y Descripción.

Estas propiedades por supuesto podrán ser alteradas desde este panel cuando se desee. El Entorno de Trabajo (III) Principio del formulario Final del formulario Las Vistas o Zooms La Herramienta Lupa se emplea para acercar o alejar la vista de un objeto.propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Para saber más acerca de los Zooms visita nuestra Página Básica . Son muy útiles y ayudan a acelerar el trabajo cuando se emplean correctamente. Cada vez que hagamos clic en la Lupa duplicaremos el porcentaje indicado en el Panel Zooms. Panel Zooms: Son un conjunto de accesos directos a Submenús existentes en el Menú Ver. Para practicar estas operaciones te aconsejamos realizar Ejercicio Cambiar Propiedades de la Película Unidad 3. permitiendo abarcar más o menos zona del Entorno de Trabajo.

. Panel Escena: Modifica los atributos de las escenas que usemos. irá en el Panel "Acciones"). Panel Mezclador de Colores: Mediante este panel creamos los colores que más nos gusten. Muy útil para alineaciones exactas. Los componentes son objetos "inteligentes" con propiedades características y muchas utilidades (calendarios. scrolls etc. Panel Información: Muestra el tamaño y las coordenadas de los objetos seleccionados. todo lo que haga referencia a las acciones.. te lo explicamos en nuestro tema básico Panel Transformar: Ensancha. Todos ellos se estudiarán en profundidad a lo largo del curso. permitiéndonos modificarlas. Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Muy útil.Los Paneles Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo. vamos a nombrarlos y a resumir las funciones de la mayoría de ellos. Panel Alinear: Coloca los objetos del modo que le indiquemos. encoge... Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra película.) . gira . Si aún no sabes lo que son las Escenas. Panel Comportamientos: Permiten asignar a determinados objetos una serie de características (comportamientos) que después podrán almacenarse para aplicarse a otros objetos de forma rápida y eficaz. Aún así. los objetos seleccionados. (Incluidas nuestras creaciones). Panel Muestras de Color: Nos permite seleccionar un color de modo rápido y gráfico. Su misión es simplificar y facilitar el uso de los comandos.

Panel Propiedades: Sin duda. propiedades de los objetos (si hay interpolaciones etc. Nos muestra las propiedades del objeto seleccionado en ese instante. color de borde. no debeis perderlo de vista nunca. de fondo. tipografía. coordenadas.).. tipo de trazo. Ejercicio 2: Estructurar una Película ... Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles desde este panel. el panel más usado y más importante. tamaño de los caracteres.Panel Cadenas: Mediante este panel Flash 8 aporta soporte multi-idioma a nuestras películas.. Panel Explorador de Películas: Nos permite acceder a todo el contenido de nuestra película de forma fácil y rápida Para practicar estas operaciones te aconsejamos realizar Ejercicio Acceder a los Paneles Ejercicios Tema 3: El Entorno de Flash 8 Principio del formulario Final del formulario Ejercicio 1: Crear una Película a nuestro gusto Crea una película que tenga las siguientes propiedades: 1 Un tamaño de 300 x 100 px 2 Un color de fondo rojo 3 Una velocidad de los Fotogramas de 14 fps. Es fundamental. tamaño etc.

4 Llámalas E1_1. cada uno asociado a un fotograma clave distinto Ejercicio 4: Identificando Fotogramas 1 Dada la siguiente película Identifica todos los tipos de fotogramas existentes y a qué tipo pertenecen. E1_2 y E2_1. E2_2 Ejercicio 3: Creando Fotogramas 1 Crea en una película nueva 3 fotogramas clave 2 Crea 3 fotogramas normales. . 2 Abre el Panel Acciones. ¿Recuerdas para qué sirve cada uno? Ejercicio 5: Paneles 1 Abre el Panel Mezclador de Color.1 Abre una nueva película 2 Crea 2 Escenas y llámalas E1 y E2 3 Crea 2 capas en cada una.

¿Qué notas? Principio del formulario Final del formulario Ayuda Ejercicios Tema 3: El Entorno de Flash 8 Ejercicio 1: Crear una Pelicula a nuestro gusto El apartado 1 nos propone cambiar las dimensiones del Escenario: 1 Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento. 4 Cierra el Programa Flash 8 5 Vuelve a abrirlo. el puntero se convertirá en un "cuentagotas". 2 Pulsamos sobre la pestaña Unidades de Regla y seleccionamos Píxeles (px) 3 Introducimos las medidas pedidas (300 x 100) en Dimensiones. 3 Seleccionamos el color pedido.3 Abre el Panel Alinear. El apartado 3 nos propone aumentar la velocidad de reproducción de la película . El apartado 2 nos propone cambiar el color de fondo del Escenario: 1 Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento 2 Pulsamos sobre la pestaña Color de fondo.

2 En Veloc. pulsando el signo . 3 Les cambiamos los nombres a las 3 capas haciendo doble clic en sus nombres actuales (por defecto Capa 1 y Capa 2) . El resultado debe ser un rectángulo rojo con las medidas propuestas. Ejercicio 2: Estructurar una Película Vamos a crear la película pedida y a estructurarla tal y como piden 1 Abrimos una nueva Película desde el menú Archivo → Nuevo 2 Accedemos al Panel Escena desde Ventana → Otros Paneles → Escena 3 Creamos una nueva Escena pulsando sobre el signo 4 Les cambiamos los nombres haciendo doble clic en sus nombres actuales Ahora falta crear el número de capas pedido. Fotogramas escribe 14 fps.1 Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento. 1 Seleccionamos la Escena E1 en el Panel Escena 2 Creamos otra capa más.

pues en el 1 ya hay un Keyframe 3 Vamos al menú Insertar y seleccionamos Fotograma Clave 4 Hacemos clic sobre el fotograma 3 y seleccionamos Insertar → Línea de Tiempo → Fotograma Clave . El Panel Escena debería quedar así: Y así las Capas: Ejercicio 3: Creando Fotogramas Vamos a crear los fotogramas pedidos: 1 Abrimos una nueva película 2 Hacemos clic sobre el fotograma 2.Seleccionamos la Escena E2 en el Panel Escena y repetimos los pasos anteriores del 2 al 3.

Esto será lo que obtengamos: Fijémonos en que no están los puntos negros en los Fotogramas Clave ni los cuadrados blancos en lo fotogramas normales. 2 Ahora el fotograma 2 será un fotograma normal y el 3 y el 4 serán Fotogramas Clave. El tercero es un Fotogramas Clave normal. Seleccionamos el fotograma 3 y repetimos el proceso anterior. 2) Los fotogramas entre el 1 y el 7 y los fotogramas entre el 9 y el 13 (no incluidos) son fotogramas normales. Esto se debe a que no hay nada dibujado en dichos fotogramas. 3 Seleccionamos el fotograma 5 y lo volvemos a repetir. Faltan los fotogramas normales 1 Seleccionamos el fotograma 1 y hacemos clic en el menú Insertar → Línea de Tiempo y seleccionamos Fotograma. el 7 y el 9. Son el fotograma 1. (probablemente contendrán al mismo objeto pero cambiado de lugar).Ya tenemos los 3 Fotogramas Clave creados. Simplemente determinan la duración de los Keyframes a los que van . Probad a insertar algo en cada par inmediatamente obtendreis esto: Ejercicio 4: Identificando Fotogramas de fotogramas e Vamos a identificar los diferentes tipos de fotogramas: 1) Hay 3 Fotogramas Clave. Los 2 primeros representan una animación de Movimiento.

pero abriendo el panel Alinear. Se abrirá el Panel correspondiente. 4 Observamos que los Paneles siguen donde los dejamos. 2 Hacemos clic en Mezclador de Colores.asociados. Dibujar y Colorear (I) El Dibujo en Flash 8 . 4) Los fotogramas del 16 en adelante son fotogramas vacíos y no se verán en la película. 3) Los fotogramas del 13 al 15 (incluidos) y el fotograma 8 son Fotogramas Contenedor. Ejercicio 5: Paneles 1 Abrimos el Menú Ventana. Flash 8 adapta su entorno a nuestras preferencias Final del formulario Final del formulario Final del formulario Principio del formulario Final del formulario Unidad 4. Existen y en la película se verán como fotogramas en blanco (o con el color de fondo que hayamos seleccionado). Repetimos los pasos del 1 al 2. 3 Cerramos el programa y lo volvemos a abrir.

Flash no es un programa de diseño gráfico. Vamos a ver cómo emplear cada herramienta de dibujo para sacarle el máximo partido. pero su potencia en este ámbito es casi tan grande como la de éstos programas. La Barra de Herramientas. Llevar lo que ha producido tu imaginación al papel (en este caso al papel de Flash). Tras la fase de "Qué quiero crear y cómo va a ser" viene (normalmente) la fase de diseño gráfico. No conviene engañarnos.Cuando se diseña una página web o una animación el diseñador pasa por muchas fases. Herramientas Básicas. .

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cuáles son las más importantes y cómo se usan:

Herramienta Selección (flecha): . Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos. permite seleccionar los bordes de los objetos, los rellenos (con un sólo clic), los bordes (con doble clic), zonas a nuestra elección... Además, su uso adecuado puede ahorrarnos tiempo en el trabajo. Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Una vez creada la podemos modificar sin más que seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla. Herramienta Texto: tema siguiente. Herramienta Óvalo: sencilla. Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán en el

La herramienta Óvalo permite trazar círculos o elipses de manera rápida y

Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Crear Óvalo Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Dar color a un Óvalo Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo de objetos que crean.

Herramienta Lápiz: Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas. Herramienta Brocha: Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo. Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas. Herramienta Borrador: Su funcionamiento es análogo a la Herramienta Brocha. Pero su función es la de eliminar todo aquello que "dibuje". La Barra de Herramientas. Herramientas Avanzadas.

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

Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas imágenes: . Esto, es la Herramienta Varita Mágica, tan popular en otros programas de dibujo. Permite hacer selecciones según los colores de los objetos. El tercer dibujo que aparece es este: permite hacer selecciones poligonales.

Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando. Herramienta Subseleccionador: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta. Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.) Herramienta Cuentagotas: Su misión es "Capturar" colores para que posteriormente podamos utilizarlos. Para

ver cómo funciona, aconsejamos ver la siguiente animación: Unidad 4. Dibujar y Colorear (II) Principio del formulario Final del formulario

La Barra de Herramientas. Opciones

Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso. Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta correspondiente. La forma de acceder a este Submenú consiste en hacer clic en la línea o en el objeto que has dibujado. Entonces aparecerá (o se iluminará si ya estaba presente) un submenú como este: Ajustar a Objetos : Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se superponga, dando la sensación de estar "unidos". Suavizar: Enderezar: Convierte los trazos rectos en líneas menos rígidas. Realiza la labor inversa. Convierte los trazos redondeados en más rectilíneos.

El Panel Mezclador de Colores

El Panel Mezclador de Colores, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que más nos gusten.

realiza el Ejercicio Crear Color Transparente El Panel Muestras de Color . Degradado Lineal: Es un tipo especial de relleno.Para seleccionar un color determinado. (Si queremos modificar el color de un borde. Puede ir de arriba abajo o de un lado al otro Degradado Radial: Es igual que el anterior. de modo que un color se degrada hasta convertirse en otro. También se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la Herramienta Bote de Pintura).) Al hacerlo aparecerá un Panel con multitud de colores para que seleccionemos el que más nos gusta. pulsaremos sobre la pestaña que está junto a la Herramienta Lápiz y si queremos modificar un relleno. bastará con hacer clic en las pestañas que se encuentran junto a los iconos de las Herramientas de Lápiz y de Bote de Pintura. También permite introducir el código del color según el standard que establece el HTML. pero los degradados tiene forma circular. haremos clic en la pestaña que está junto a la Herramienta Bote de Pintura. Mapa de Bits: Permite colocar como relleno alguna imagen existente en la película (O ajena a ella si antes se "importa") Para aprender a crear un color transparente (semi-transparente). Se pueden crear diferentes tipos de Rellenos Sólido: Consiste en un relleno formado por un solo color.

rojo. Ejercicio 2: Saturno 1 Dibuja un óvalo 2 Convierte su color de relleno un degradado de verde oscuro a verde claro (por ejemplo). cuando creemos un color mediante el Panel Mezclador de Colores. podremos usar las muestras que teníamos la última vez que trabajamos con dicha película. los colores de la bandera olímpica (Azul. 2 Cámbiales los colores. Además. Por ejemplo. Principio del formulario Ejercicios Tema 4: Dibujando Final del formulario Ejercicio 1: Bandera Olímpica 1 Dibuja 5 aros. Cada película tiene su propio conjunto de muestras y cada vez que la abramos para editarla.El Panel Muestras de Color sirve para poder ver de un modo rápido y claro los colores de que disponemos. negro. tanto sólidos (un solo color) como degradados (lineales o radiales). amarillo y verde) 3 Únelos de modo que parezcan los aros olímpicos. 3 Crea el aro que le rodea. pasará a estar disponible en nuestro conjunto de muestras y podremos acceder a él rápidamente cada vez que trabajemos con nuestra película. podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un menú desplegable en la parte superior derecha del Panel Mezclador de Colores). 4 Úne los 2 objetos para que parezca el planeta Saturno . Una vez esté agregado el color.

mantenemos pulsada la tecla Shift. para que sean perfectamente circulares. 5 Ahora mueve cada aro hasta la posición deseada.Ayuda Ejercicios Tema 4: Dibujando en Flash 8 Ejercicio 1: Los Aros Olímpicos Principio del formulario Final del formulario Vamos a dibujar los aros olímpicos. (Igualmente podíamos haber seleccionado el color "ninguno" aparecido sin color de fondo) y posteriormente creado los óvalos que hubieran 4 Ahora seleccionamos los bordes de cada aro y le damos el color que queramos seleccionándolo en el Panel Mezclador de Colores. 1 Seleccionamos la Herramienta Óvalo. seleccionamos el relleno de cada óvalo y pulsamos la tecla Suprimir para eliminarlo. haz clic en el aro que quieras mover y arrástralo. Para mover un objeto. 3 Una vez estén dibujados. Ejercicio 2: Saturno . 2 Trazamos 5 óvalos. selecciona la Herramienta Selección.

por ejemplo creando otro óvalo con la forma adecuada. hacemos clic en él y pulsamos la tecla Suprimir. 9 Solapamos los 2 objetos dibujados. 5 Seleccionamos la opción Degradado Radial. (podemos añadir tantos colores como queramos y probar su efecto).Vamos a dibujar un planeta parecido a Saturno 1 Seleccionamos la Herramienta Óvalo. Final del formulario . 2 Creamos un óvalo 3 Eliminamos el borde. 7 Dibujamos el anillo de saturno. 8 Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. 4 Seleccionamos el Relleno del óvalo y abrimos el Panel Relleno. Por ejemplo. para ello. de modo que formen el dibujo que queramos. borramos parte del planeta como en la imagen. 6 Pulsamos en y seleccionamos los colores que deseemos.

texto dinámico y texto de entrada (para que el usuario introduzca sus datos. de modo que tratará cualquier texto como si de un objeto más se tratase. notaremos que todas las propiedades que antes se encontraban en los Paneles Carácter y Párrafo. por ejemplo). Flash distigue entre 3 tipos de texto.Unidad 5. Si tenemos experiencia usando Flash 5. de modo que si seleccionamos un texto. también todo aquello relativo a los textos. Flash fue concebido para crear animaciones gráficas. Esto nos permitirá posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. texto estático o normal. Trabajar con Textos (I) Principio del formulario Final del formulario Comenzando Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación. deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir. Para saber más acerca de Cómo escribir textos visita nuestra Página Avanzada El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra película.. se encuentran agrupadas ahora en el Panel Propiedades. Propiedades de los Textos Para poder escribir. también se puede crear texto que soporte formato HTML etc. Sin embargo. . listo para ser animado a nuestro gusto. y por tanto.. podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto.

Útil cuando la tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos al texto. Flash la asociará al texto que estés escribiendo en ese momento. Cambia la orientación del texto de horizontal a vertical.Panel Propiedades Veamos a fondo el Panel Propiedades: Fuente: Desde aquí. tanto de izquierda a derecha como Ajuste automático entre caracteres: se realice de modo automático. al igual que en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que más nos guste. el usuario vaya a una dirección web. nada más fácil que escribirla ahí. . Dirección del Texto: de derecha a izquierda. Altura: Determina el espaciado entre los caracteres. URL: Si queremos que al pulsar sobre nuestro texto. Posición: Activar esta casilla provoca que la separación entre caracteres Nos permite convertir nuestro texto en subíndices o en superídices (o dejarlo normal).

A la Izquierda: Todas las líneas empezarán tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido).Destino: Determina si la URL a la que el texto hace referencia se cargará en la misma ventana del navegador. .. Centrar: Las líneas se distribuyen a la derecha y a la izquierda del punto medio del Párrafo. Otras Propiedades: Dado que Flash trata los textos como objetos. altura y coordenadas. éstos también tienen anchura. pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo. Configuración: Son las clásicas opciones que permiten convertir el texto en Negrita (B). multilínea o multilínea sin ajuste). cambiar el color del texto y el tamaño. Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a todos ellos. esta opción nos permite determinar cómo queremos que aparezcan las líneas (línea única. A la derecha: Todas las líneas empezarán tan a la derecha como sea posible (dentro del recuadro de texto que hayamos definido). pues las tipografías son una parte muy importante y deben respetarse. Estos párrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. Tipo de Línea: Si el texto que vamos a incluir es dinámico (de lo contrario aparece sin activar). Podemos modificarlos a nuestro gusto. Cursiva (I). El Panel Propiedades nos proporciona las siguientes opciones para trabajar con párrafos (entre otras). en una nueva ..

y es en el Tipo de texto en lo que se diferencian. los sangrados de párrafo y el espacio interlineal. Principio del formulario Unidad 5. El tipo de texto se puede modificar desde el Panel Propiedades sin más que haciendo clic . El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho).Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus límites. Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores. Trabajar con Textos (II) Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. según el tipo que sean. Flash distingue entre diversos tipos de textos y les da un tratamiento especial.G es Final del formulario Tipos de Textos Como ya hemos comentado.

aunque esto conlleve un mayor tamaño de la película final. Texto Dinámico .. Así. la verá exactamente como queremos que la vea. copiarlos. si en ese mismo recuadro de texto pasa a poner "Con este Curso". es decir. pero si no las tiene. Seleccionable: Con esta opción activada el usuario podrá seleccionar los textos que aparezcan en la película (cortarlos.. Los textos estáticos sólo tienen 2 propiedades extras: Usar Fuentes del Dispositivo: Esta opción permite que la película Flash emplee las Fuentes que tenga instaladas el usuario que ve la película en su ordenador. forma o color. cambiar de color. Flash empleará la fuente que más se le parezca. por lo que suele ser conveniente mantener esta opción sin seleccionar.) y sin embargo ser estático. Sin embargo. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se parezca al que pretendíamos. Se insistirá en este punto en los ejercicios de evaluación.. es estático. que el texto puede estar animado (girar. este recuadro de texto NO es estático. un recuadro de texto en el que pone "Aprende Flash 8" durante toda la película.sobre la pestaña Tipo de texto: Texto Estático El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la animación. Es importante que no confundamos la palabra "estático" con que el texto no se mueva o malinterpretemos la frase "es el texto que no presenta cambios a lo largo de la animación". aunque dicho texto cambie de posición.. Lo que queremos decir es que no cambia el contenido del recuadro de texto. Si dicho usuario dispone de las fuentes que hemos utilizado en la película.) Actívala si lo crees conveniente.

Su uso es bastante más complejo que el del Texto Estático. Tienen multitud de propiedades. ya que cada recuadro de texto Dinámico puede ser una variable modificable mediante ActionScript. este tipo de texto se puede combinar con el Texto Dinámico. ya que lo deberá introducir el usuario. Un uso común que suelen tener es el de representar los textos introducidos mediante Textos de Entrada (ver siguiente punto). esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programación. accesibles desde el Panel Propiedades. En esta animación (avanzada) podeis ver cómo: Y este es el resultado final: . Texto de Entrada El Texto de Entrada tiene básicamente las mismas propiedades que el Texto Dinámico. se puede introducir texto HTML. Como hemos mencionado antes. junto con algunas propias de un tipo de texto orientado a la introducción de datos por parte de usuario. se puede añadir fácilmente un borde al texto o dar nombre a la variable que represente al texto Dinámico. se puede decidir el número de líneas que van a tener.El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido (además de estar animado). Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de texto SIN contenido. como por ejemplo el número máximo de líneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las contraseñas). lo que nos saca del objetivo de este curso.

Para aprender a cambiar el tipo de texto. Entre otros destacan el Swish. Los resultados son increíbles. con ellos podrás crear efectos de texto asombrosos en pocos minutos. crear animaciones con textos. el FlaX o el MiX-Fx. movimientos o combinaciones de estos) puede resultar un trabajo de muchísimas horas y mucha paciencia. rotaciones. que sobrepasen a las que Flash incorpora por defecto (colores. transparencias. brillos. pero puede resultar recomendable en estos casos usar algunos programas diseñados con este objetivo. te aconsejamos realizar Ejercicio Cambiar tipo de texto Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imágenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra página web). Podeis poner a prueba vuestros conocimientos realizando la: Final del formulario . aunque no podrás gozar del entorno de Flash 8 ni podrás emplear el resto de herramientas de que dispone. Aún así.

(Los textos estáticos desaparecen si no escribes nada y haces clic en cualquier lugar del escenario). Principio del formulario Final del formulario Crear un texto cualquiera y asignarle el Tipo que más nos interese. al hacer clic fuera del texto. cambia la línea que rodea al recuadro de texto. pasando a ser discontínua y no desapareciendo aunque no escribamos nada dentro.Ejercicio. 2 Veremos esta imagen Si deseamos crear texto Estático. Cambiar el Tipo de Texto Objetivo. ya que los textos Dinámicos y los de entrada no tienen porque tener "contenido" . Ejercicio paso a paso. de lo contrario. Unidad 5. Veremos que. 1 Hacemos clic en la Herramienta Texto y después en el escenario. deberemos seguir los siguientes pasos: 3 Hacemos clic en el Propiedades. 4 Una vez podamos ver el Panel seleccionamos la Pestaña en la que pondrá el tipo de texto y elegimos el tipo de texto que queramos. Esto es lógico. basta con escribir dentro. si es que teníamos minimizado este Panel.

Cada capa es. Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto. un nivel en el que podemos dibujar. insertar sonidos. equivalen a las Capas que utiliza Flash. textos. por tanto.. Y todos hemos visto cómo colocan una hoja semitransparente con dibujos sobre otras y la superposición de todas forman el dibujo final.Panel Propiedades Unidad 8. ¿Por qué no dibujan todo en una misma hoja? ¿Por qué trabajan con varios niveles y con varios dibujos si van a acabar todos juntos? Los motivos son muchos. y estos niveles que emplean los dibujantes. . con INDEPENDENCIA del resto de capas. Entendámoslas Principio del formulario Final del formulario Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. sus distintos fotogramas se reproducirán simultáneamente.. Capas (I) Las Capas.

Siguiendo con el ejemplo del portero. es que Flash nos obliga a colocar cada animación distinta en una capa. Pues bien. pero si la portería estuviera en la misma capa que el portero. si quisiéramos crear un movimiento que haga que el portero se desplace hacia un lado no hay ningún inconveniente. deberemos quitarlo de la capa en la que se produce dicha animación. entonces . En la otra los fotogramas del 1 al 5 contienen el dibujo de un portero (del 5 en adelante están vacíos). ya que no interfieren entre ellos para nada. Si queremos que un objeto NO forme parte de una animación. esta película nos mostrará inicialmente (durante el tiempo que duren los primeros 5 fotogramas) la portería con el portero. todos los objetos que se encuentren en dicha capa formarán parte de la animación. y podemos tratar estos objetos con total libertad.Clarifiquemos esto con un ejemplo: Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen el dibujo de una portería de fútbol. De lo contrario. De este modo la portería es independiente del portero. Otra razón para separar los objetos en capas. para después (durante los fotogramas del 5 al 10) mostrar la portería sin portero.

y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo. sirve para Insertar capas en la escena actual. Inserta capas normales (en el siguiente punto se verán los distintos tipos de capas). Insertar Capas : Como su nombre indica. como ya hemos hecho. Borrar Capa : Borra la capa seleccionada. basta con hacer doble clic en el nombre actual. con lo que resultaría imposible que sólo se moviera el portero.AMBOS objetos se moverían hacia dicho lado. o bloqueando el resto de capas de modo que sólo podamos seleccionar la capa que nos interese). Veamos para qué sirven los distintos botones y cómo usarlos. . nos permiten ordenar nuestra película de forma lógica. tienen otras utilidades. Añadir Capa Guía : Inserta una capa de tipo guía. Trabajar con Capas La vista standard de una capa es la que muestra la imagen. Las capas además. Cambiar Nombre: Para cambiar el nombre a una capa. Se tratan en profundidad el siguiente punto. La solución es separar los objetos en 2 capas.

como su nombre o su color.Propiedades de Capa: Si hacemos doble clic en el icono . veremos más adelante en el curso. También puedes bloquearla u ocultarla. Pero haremos especial hincapié en la opción Tipo cuyas opciones. Guía y Máscara. Podremos modificar todas las opciones que hemos comentado anteriormente y alguna más de menor importancia. Aquí puedes cambiar diferentes opciones sobre la capa. Capas (II) Principio del formulario Final del formulario . Unidad 8. podremos acceder a un panel con las propiedades de la capa en la que hayamos hecho clic.

Tras bloquear su capa podremos trabajar con la seguridad de no modificar dicho objeto. clic en el punto o icono "Cerrojo" situados en la capa actual bajo el icono "Bloquear Capas". ni siquiera podremos seleccionarlo.Trabajar con Capas. Veamos como se muestran estas opciones activadas y desactivadas. De este modo y ante un conjunto numeroso de objetos. Bloquear una capa es muy útil cuando tenemos varios objetos juntos y en capas distintas y queremos asegurarnos de que no modificamos "sin querer" alguno de ellos. podremos distinguirlos a todos de forma fácil y podremos ver en qué capa está cada uno de ellos. Para activar la vista de una capa en concreto (o para ocultarla) basta con hacer clic en la capa correspondiente en el punto (o en la cruz) que se encuentra bajo el icono "Mostrar / Ocultar capas" Bloquear Capas : Bloquea la edición de todas las capas. Mostrar/Ocultar capas como contornos : Este botón nos muestra/oculta los contenidos de todas las capas como si sólo estuviesen formados por bordes. . para después mostrar sólo la actual. También se puede activar o desactivar para cada capa de un modo similar a los anteriores botones. procederemos como en el punto anterior. Para bloquear o desbloquear una capa concreta. Es muy útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya que permite ocultar todas a la vez. de modo que editaremos con mayor facilidad el objeto que queramos. Opciones Avanzadas Mostrar / Ocultar Capas : Este botón permite ver u ocultar todas las capas de la película. de modo que no podremos modificarlas hasta desbloquearlas.

Pero nos habremos dado cuenta de que. Y en la columna "Mostrar capas como contornos" NO aparece relleno. Este punto significa que NO está activada esta opción. Como ya se ha comentado. coincidirá con el indicado en cada capa. todo esto no sirve de mucho. las distintas capas tienen muchas cosas en común unas con otras. el color de los contornos será diferente para cada capa. La capa se está mostrando en este modo y no podremos ver los rellenos hasta deseleccionar esta opción. lo que simboliza que los objetos se mostrarán completos y no sólo sus contornos. lo que indica que dicha capa no es visible en el escenario. Aparece un cerrojo bajo la columna "bloquear capas". podemos observar que en la columna "Mostrar Capas" aparece un punto negro.. El color del contorno. si trabajamos con distintas capas. lo que simboliza que la capa está bloqueada. lo mismo sucede con el botón "Bloquear capas". de modo que podamos distinguirlas mejor. Además. En la columna "Mostrar capas como contornos" aparece un cuadrado CON relleno. todas las capas de una misma escena comparten la misma línea de tiempos y por .. En la segunda imagen aparece una cruz situada bajo la columna "Mostrar Capas".En la primera imagen la capa actual no tiene ninguno de los botones activados. como hacer que formen grupos y muchas cosas más. Lo primero y principal es la Línea de tiempos. En este ejemplo podeis ver cómo queda un objeto en función de tener activada o no la opción contorno: Reorganizar las Capas Hemos dedicado un tema entero a cómo colocar objetos. sabemos ya cómo conseguir que un objeto aparezca delante de otro en una película.

Para mover un objeto de una capa a otra. deberemos seguir unos sencillos pasos. Si quisiéramos cambiar esta distribución. Los objetos que se mostrarán delante de todos los demás serán aquellos que se encuentren en la capa situada más arriba. Veremos como los objetos se colocan delante o detrás de los de la capa seleccionada según su capa se encuentre por encima o por debajo de la nuestra. . si nos fijamos en el ejemplo anterior: El portero aparece delante de la portería. Principio del formulario Ejercicio. los objetos de todos los fotogramas 1 de todas las capas se verán al mismo tiempo en la película superpuestos unos sobre otros. basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba o hacia abajo hasta la posición deseada. Unidad 8. basta con seleccionar el fotograma a mover y arrastrarlo hasta la capa donde queramos pegarlo. ¿y qué objeto está delante de los demás? Pues este criterio viene dado por la colocación de las Capas en la película. Aprende a hacerlo realizando el Ejercicio Cambiar Objetos de Capa Para mover un fotograma de una capa a otra. Es decir. como puede apreciarse en la imagen. Cambiar un objeto de Capa Final del formulario Objetivo. También se puede Copiar el fotograma y luego pegarlo en la capa de destino. porque la capa "Portero" está situada encima de la capa "Portería".tanto.

1 Partimos de una película con más de una Capa. .Mover un objeto situado en una capa a otra Ejercicio paso a paso.

3 Hacemos doble clic en el objeto a mover. 7 Hacemos clic con el botón derecho sobre el escenario de este fotograma de destino. 6 Seleccionamos el fotograma en el que queramos colocar el objeto (situado en una capa distinta a la actual. aunque esto es válido en ambos casos). para seleccionarlo en su totalidad (relleno y borde).2 Seleccionamos la Capa donde esté el objeto que queramos cambiar de capa. 5 Seleccionamos Cortar. El objeto desaparecerá. 4 Pulsamos el boton derecho del ratón. 8 Hacemos clic en Pegar para colocar el objeto en este fotograma o hacemos clic en Pegar in Situ para pegar el objeto en la misma posición en la que estaba al cortarlo . Se abrirá un menú como el de la imagen.

Capas (III) Tipos de Capas Principio del formulario Final del formulario Como habréis podido comprobar al ver las propiedades generales de una capa o al hacer clic con el botón derecho del ratón sobre el icono de una capa cualquiera.Unidad 8. colocar objetos. En esta imagen podemos ver el contenido de 2 capas. Su efecto hará que la pelota azul se desplace de un extremo de la línea al otro siguiendo esa . Es Importante recordar que el contenido de las Capas Guía no se verá en la película final. para que al realizar la animación de movimiento (esto lo veremos en un tema posterior) su contenido NO se vea en la película. La primera de ellas contiene la bola azul y la segunda contiene la línea curva. Son las más usadas y se emplean para todo. Debido a que su misión es representar la trayectoria de un objeto animado. existen varios tipos de capas.. Capas normales : Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos anteriores. La segunda capa la hemos definido como Capa Guía. Capas Guía : Son capas especiales de contenido específico.. sonidos. Se emplean en las animaciones de movimiento de objetos y su único fin es marcar la trayectoria que debe seguir dicho objeto. su contenido suele ser una línea (recta. ayudas. sino que sirva de recorrido para la bola azul. acciones. curva o con cualquier forma).

Bonito efecto ¿verdad? Capas Guiadas (Guided Layers) : Cuando definimos una capa como capa guía. la capa Guiada) . Las capas guía y las capas guiadas se relacionan entre sí de un modo evidente. el icono que representa a la capa guía cambia. Esto es. una capa que quedará afectada por la guía definida en la Capa guía. A cada capa guía le corresponden una serie de capas guiadas.ruta. indicándonos que está realizando correctamente su labor. Al asociar una capa guía con una capa guiada. Si no definimos una capa guiada. de lo contrario no seguirá la ruta marcada por la capa guía. En la imagen podemos ver un ejemplo de capa guía y capa guiada correctamente asociadas entre sí. la capa guía no tendrá ningún efecto y si bien NO se verá en la película (por ser una capa guía) tampoco provocará ningún efecto en las demás capas. evidentemente. (La capa llamada aulaClic es. la bola azul se deberá encontrar en una capa Guiada. es necesario definir después una capa guiada. En la imagen anterior.

Así se emplean las máscaras. Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y sólo dejan que se vea la parte de éstas que tapan los objetos situados en las capas máscara (son como filtros).. Al igual que las capas guía..El funcionamiento de las Capas Guía y sus utilidades lo veremos a fondo en el tema de las Animaciones de Movimiento Capas Máscara : Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las veremos enseguida). . pero sólo se verá lo que él "tape". Sus objetos sí que son visibles en la película final. Sí se verán los objetos de su correspondiente capa enmascarada a los que estén "tapando". Al igual que las capas guía y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto. los objetos existentes en este tipo de capas tampoco se ven en la película final. los rectángulos azules forman parte de la Capa Enmascarada y por tanto se verán en la película final (pero sólo lo que tape la capa máscara). Capas Enmascaradas : Estas capas funcionan conjuntamente con las Capas máscaras. El funcionamiento de estas capas es algo complejo (tampoco demasiado) y se analizará en cursos posteriores. En este ejemplo. Veamos el funcionamiento de estas capas con un ejemplo. pero sólo cuando algún objeto de la capa Máscara está sobre ellos. El óvalo rojo está situado en la capa Máscara y no se verá en la película.

Podeis poner a prueba vuestros conocimientos realizando la: Final del formulario .

. tendremos que trabajar con objetos. Es. Puede existir o no. un botón. bastará con seleccionar el borde y suprimirlo (ver siguiente punto). la parte interna del objeto. por ejemplo. Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lápiz.Principio del formulario Unidad 7. de modo que podamos trabajar con él. según nos convenga. Los objetos así considerados tienen 2 partes fundamentales: El Borde: Consiste en una delgada línea que separa el objeto del exterior del escenario. y por tanto. Trabaja r con Objetos (I) Búsqueda es pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. Línea o Pluma y si queremos que nuestro dibujo no tenga borde. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como el Pincel o . podremos considerar un objeto todo aquello que aparezca en nuestra película y sea visible. aunque en realidad sí que exista pero sea de color transparente.G Final del formulario Los Objetos. A grandes rasgos. por tanto. parecerá que dicho objeto no tiene relleno. el borde se crea siempre y su color será el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Iniciación Independientemente de si estamos trabajando en una animación. como ya se vió en el tema de Dibujar. ya que podemos crear un objeto cuyo color de relleno sea transparente. un dibujo creado por nosotros mismos etc. El Relleno: El relleno no es más que el propio objeto sin borde. Cuando creamos un objeto. Su existencia también es arbitraria. en un catálogo para un CDRom o en cualquier otra cosa.un objeto sería. cualquier imagen que creemos o importemos.. en una página web.

Objeto SIN seleccionar Objeto con el BORDE seleccionado Objeto con el RELLENO seleccionado Veamos cómo seleccionar las diferentes partes de un objeto: Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde que queramos seleccionar. .. cambiar de color. Seleccionar Para poder trabajar con objetos. girar.. Podremos observar que las partes de un objeto seleccionadas toman una apariencia con textura para indicar que están seleccionadas.el Cubo de Pintura.). es fundamental saber seleccionar la parte del objeto que queramos modificar (mover.

Estos tipos de objetos mostrarán un borde de color azul (por defecto) al estar seleccionados.. Trabajar con Objetos (II) Principio del formulario .Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno. consiste en hacer clic en el menú Edición → Seleccionar Todo. Además de la Herramienta Flecha. Haremos clic en una parte del escenario y arrastraremos el cursor hasta delimitar el área que contenga los objetos que queremos seleccionar. un texto. Seleccionar todos los bordes (o líneas) de un mismo color que estén en contacto: Hacer doble clic sobre una de las líneas que tenga el color que pretendamos seleccionar. las áreas seleccionadas no tienen porque ser rectángulares. Este modo de seleccionar objetos permite seleccionar muchos objetos rápidamente. o un grupo: Clic en el Símbolo. Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la Herramienta Selección (Flecha). Esto es útil para modificar de un modo rápido todos los elementos del fotograma. además de permitirnos seleccionar determinadas zonas de los objetos. pegarlas . Si quisiéramos incluir dicho objeto. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros) del objeto que sea. en el texto o en el grupo. Seleccionar Todo: La forma más natural de seleccionar todo. también podemos usar la Herramienta Lazo. Seleccionar un Símbolo. sólo quedará seleccionada la parte del objeto que esté dentro del área que hemos delimitado. se seleccionan automáticamente todos los objetos que estén en dicho fotograma. bastaría con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar. Unidad 7. Seleccionar a partir de la Línea de Tiempo: Si seleccionamos un determinado fotograma en la línea de tiempo. para cortarlas. Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT mientras seleccionamos los objetos que queramos. más útil aún si cabe. Al contrario que la Herramienta Flecha. Si esta área corta algún objeto..

Búsqueda GALT:#008000. los objetos toman como referencia al conjunto de objetos en el que se encuentran. Este Panel lo podemos encontrar en el Menú Ventana → Alinear. Panel Alineamiento Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas. Conozcamos un poco mejor el Panel Alinear y sus posibilidades: . Antes de ver las posibilidades. Esta opción nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario Si esta opción no está seleccionada. Lo más habitual es seleccionar En Escenario. para que los objetos se coloquen según los límites de la película. Para colocarlos de un modo preciso (por no decir exacto). veamos cómo colocarlos en el Escenario.. Así funciona: El Panel Alinear permite colocar los objetos tal y cómo le indiquemos. y se colocan en función de ellos.G es pub-1875034419 1 ISO-8859-1 ISO-8859-1 Final del formulario Colocando Objetos. en el centro del fotograma etc. debemos hacer hincapié en la opción En Escenario (En Escenar).. Flash pone a nuestra disposición el Panel Alinear.

Si está activo "En Escena" estirará los objetos hasta que coincidan con el ancho y el largo de la película.Alineamiento: Sitúa los objetos en una determinada posición del fotograma (si está seleccionado En Escena). Cada uno de los 2 cuadrados se situará en un extremo de la película (uno arriba y otro abajo). Por ejemplo. la referencia será el resto de objetos. Coincidir Tamaño: Hace coincidir los tamaños de los objetos. Panel Información . podeis ver la animación situada arriba al principio del capítulo. Para ver ejemplos de uso de estos comandos. Si "En Escena" hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma. bastaría pulsar el primer y el sexto botón consecutivamente. Si no está activo. Las distintas opciones afectan a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios predefinidos. al hacer clic en el primer botón de "Coincidir Tamaño". Espacio: Espacia los objetos de un modo uniforme. el cuadrado más estrecho pasará a tener la anchura del cuadrado más ancho. Distribuir: Sitúa los objetos en el escenario en función de unos ejes imaginarios que pasan por cada uno de ellos. si tenemos 2 cuadrados y pulsamos el primer botón de la izquierda. si tenemos 2 cuadrados distintos y la opción "En Escena" no está activada. Por ejemplo. de modo que la distribución de los mismos sea uniforme. Por ejemplo: Si quisieramos situar un objeto en la esquina inferior izquierda.

sino el del objeto por el que pase el cursor. el motivo es que indica el color que tiene el objeto por el que en ese momento pasamos el cursor del ratón. Las posibilidades de este Panel son limitadas. A este Panel se puede acceder desde el Menú Ventana → Información. Por tanto. Tened esto en cuenta para no cometer errores o perder tiempo innecesario. el Panel Información. An: hace referencia a la anchura y Al: a la altura. La X y la Y representan el eje de coordenadas (La X es el eje Horizontal y la Y el eje vertical). Verde (V). podemos tener seleccionado un objeto (haciendo clic en él) y ver en el Panel Información su tamaño y su posición. . también podemos hacerlo. Situación del objeto: Desde aquí controlamos la posición del objeto en el escenario.Además de controlar la posición de los objetos desde el Panel Alineamiento. Es útil por si queremos que suceda algo en la película al pasar el cursor justo por una posición determinada o para situar partes del objeto en lugares específicos. Este indicador puede ser engañoso. Medidas del Objeto: Aquí introduciremos un número que represente el tamaño de nuestro objeto en la medida seleccionada en las Propiedades del documento. pero al desplazar el ratón. de un modo más exacto (más matemático) desde otro panel. el valor del color cambiará y ya no indicará el color del objeto seleccionado. pero si buscamos exactitud en las medidas o no nos fiamos de las distribuciones de objetos que crea Flash. debemos acudir a él. Las medidas también van en función de las medidas elegidas para la película. Color Actual: Indica el color actual en función de la cantidad de Rojo (R). Posición del Cursor: Indica la posición del cursor. Azul (A) y efecto Alfa (Alfa) que contenga.

basta seleccionar los objetos que queremos que formen parte de un grupo y después hacer clic en el Menú Modificar → Agrupar. ya que para crear un grupo. Tras hacer esto observaremos que desaparecen las texturas que indicaban que los objetos estaban seleccionados y observamos que el grupo pasa a ser un "todo". Si bien no cualquier conjunto de objetos forman un grupo. Además. debemos indicarle a Flash que así lo queremos. Para ello. . definiéndolo como tal. aparece el rectángulo azul (por defecto) que rodea al grupo.Los Grupos Un Grupo no es más que un conjunto de objetos. ya que resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez los demás.

o podemos formar un grupo con los coches y aumentar el tamaño del grupo. tratar al conjunto de objetos como un todo y por tanto. Para ello. de modo que aumenten todos de tamaño a la vez y en la misma proporción. como es lógico. podemos aplicar efectos al conjunto. Flash nos permite modificar los elementos de un grupo sin tener que desagruparlo. supongamos que tenemos un dibujo que representa un conjunto de coches. seleccionamos el Grupo de elementos y hacemos clic en el Menú Edición → Editar Seleccionado. ahorrándonos la labor de hacerlo de objeto en objeto. Al crear un grupo. . los cambios realizados afectarán al grupo además de al elemento en cuestión.Crear grupos es muy útil. Por ejemplo.. Podemos aumentar el tamaño de los coches de uno en uno.. Principio del formulario Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 Ejercicios Tema 7: Objetos GALT:#008000. En cualquier momento podemos deshacer el grupo. De igual modo. hacer que gire. simplemente estamos dando unas propiedades comunes a un conjunto de objetos y. como ya hemos dicho. en ningún caso perdemos nuestro objeto. Además. Podremos editar los objetos que componen el grupo por separado teniendo en cuenta que. ya que nos permite. Tras dibujarlos todos.G es Final del formulario Ejercicio 1: Rellenos y Bordes 1 Crea dos rectángulos con el interior de color verde y el borde negro. corriendo el riesgo de aumentar unos más que otros y perdiendo las proporciones entre ellos. nos damos cuenta de que queremos aumentar el tamaño de los coches. podemos mover al grupo de posición. mediante el Menú Modificar → Desagrupar.

rectángulos. Ejercicio 4: Grupos 1 Agrupa los 4 objetos del ejercicio anterior en un único grupo. 3 Desagrúpalos. 2 Cambia su posición (colócalos. 3 En el otro.. 4 Selecciona 3 únicamente los bordes de 3 de ellos. 2 Coloca uno en cada esquina usando el Panel Alinear.). elimina el borde. Ejercicio 2: Selecciones 1 Dibuja 5 óvalos. 3 Selecciona 3 de ellos usando la Herramienta Selección (Flecha). por ejemplo. Ejercicio 3: Alinear Objetos ) 1 Dibuja 4 objetos (círculos.. . Dales el color de relleno y borde que quieras (elige un relleno que no sea transparente 2 Selecciona 3 de ellos usando la tecla SHIFT. en el centro de la película).2 En uno de ellos elimina el Relleno.

hacemos clic en la Herramienta Rectángulo y dibujamos 2 rectángulos.G Final del formulario Ejercicio 1: Rellenos y Bordes Se nos pide crear 2 rectángulos y eliminar el relleno de uno de ellos y el borde del otro. 2 Hacemos clic en el interior del primer rectángulo y pulsamos la tecla Suprimir (Supr). Los 2 rectángulos originales Rectángulo sin Relleno y Rectángulo sin Borde . Aquí te ayudamos.Si no tienes muy claro cómo realizarlo. 3 Hacemos doble clic en el borde del otro rectángulo y volvemos a pulsar la tecla Suprimir. Procedemos del siguiente modo: 1 Seleccionamos los colores en el Panel Muestras de Color o en el Panel Mezclador de Colores. Principio del formulario Ayuda Ejercicio s Tema 7: Objetos Búsqueda es pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.

3 Ahora pulsamos la tecla SHIFT y sin soltarla. como pide el segundo apartado. Ahora se nos pide seleccionar únicamente los bordes de 3 de ellos.Ejercicio 2: Selecciones El primer apartado nos pide crear 5 óvalos y seleccionar 3 de ellos con la tecla SHIFT. Nota: Si en vez de óvalos hubieran sido rectángulos. 3 Si quedara alguna parte del círculo fuera de la selección. basta con usar la tecla SHIFT para añadirlo a la selección actual. 1 Seleccionamos los colores que queramos en el Panel Muestras de Color o en el Panel Mezclador de colores. 1 Hacemos clic en el borde del primer óvalo (si hiciéramos 2 clics se seleccionarían todos los bordes del mismo color que estén en contacto con el borde sobre el que hacemos clic). 1 Hacemos clic en una zona del escenario que nos permita capturar 3 círculos. 2 Arrastramos el ratón hasta crear un área que envuelva completamente a 3 de los 5 círculos. hacemos doble clic en otros 2 círculos cualesquiera. Ahora hacemos lo mismo usando la Herramienta Selección (Flecha). hubiera hecho falta hacer 2 clics en el borde de cada . 2 Hacemos doble clic en el relleno del primer círculo (doble clic para seleccionar tanto el Relleno como el borde). hacemos clic en la Herramienta Óvalo y dibujamos 5 óvalos. 2 Mantenemos pulsada la tecla SHIFT y repetimos el proceso con 2 óvalos más.

Compruébalo tu mismo. Ejercicio 3: Alinear Objetos Se nos pide dibujar 4 objetos y colocarlos en las esquinas. 1 Dibujamos los 4 objetos pedidos. . para alinear el objeto en el extremos izquierdo de la 5 Hacemos clic en para situarlo en el borde superior de la película.rectángulo para que este quede totalmente seleccionado. está en la esquina superior izquierda. por ejemplo. . 6 Para alinear el segundo objeto en la esquina superior derecha hacemos clic en 7 Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en y y . 3 Hacemos clic en "En Escenario" para que las distribuciones de los objetos se hagan en función del tamaño del fotograma. Como el objeto está en el extremo superior izquierdo. 2 Abrimos el Panel Alinear. 4 rectángulos. 4 Seleccionamos el primer objeto y hacemos clic en película. desde el menú Ventana → Alinear.

Símbolos (I) Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. 2 Hacemos clic en el Menú Modificar → Desagrupar Final del formulario Principio del formulario Unidad 9. La primera parte del ejercicio nos pide Agrupar un conjunto de elementos (que ya tenemos). 1 Seleccionamos el Grupo haciendo clic en él.G es Final del formulario Qué son los símbolos .8 Para alinear el cuarto objeto en la esquina inferior derecha hacemos clic en Ejercicio 4: Grupos y . 1 Los seleccionamos todos del modo que prefiramos. 2 Hacemos clic en el Menú Modificar → Agrupar La segunda parte del ejercicio nos pide Desagrupar el conjunto de elementos que acabamos de agrupar.

Abrimos el panel de Propiedades del Símbolo. como veremos más adelante. son incluidos en una biblioteca en el momento en que son creados. accediendo al menú Insertar → Nuevo Símbolo o simplemente pulsando Ctrl + F8 o F8. lo que permite que sean utilizados en varias ocasiones. El procedimiento es el siguiente: Seleccionamos el objeto que queramos convertir en símbolo. Cómo crear un símbolo La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de los primeros pasos para crear una animación. . pero más adelante nos servirá para hacer referencia al objeto.Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash 8. Esto al principio y mientras tengamos poco símbolos no será muy importante. Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen. Introducimos el nombre del símbolo que vamos a crear. ya sea en la misma o en otra película. Estos objetos al ser transformados en símbolos.

Sus características y las diferencias entre ellos las veremos en temas posteriores. . Bastará con pulsar Aceptar para tener nuestro símbolo creado. Podemos elegir entre Clip de Película. Botón y Gráfico.Sólo nos queda seleccionar el tipo de símbolo o comportamiento en que queremos convertir nuestro objeto.

1 Pulsamos en la barra de herramientas y selecciona la Herramienta Óvalo. 5 En el campo Nombre introducimos el . 2 Dibujamos un óvalo en cualquier lugar del escritorio. Búsqueda es pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. 4 Abrimos el menú Insertar → Nuevo Símbolo. Se desplegará una ventana como la de la figura. Unidad 9. Crear Símbolo. Principio del formulario Ejercicio .. Crear un símbolo de gráfico que nos permitirá coger destreza en una acción que será básica en la creación de animaciones.G Final del formulario Objetivo. de la barra de menús. Ejercicio paso a paso.Para practicar estas operaciones te aconsejamos realizar Ejercicio Crear Símbolo. 3 Seleccionamos la figura creada..

Sin embargo. pero sí otras propiedades. Así. pero no transformar una estrella en un círculo).Principio del formulario Búsqueda pub-1875034419 1 Unidad 9.G es Final del formulario Modificar una Instancia Hemos visto anteriormente que podemos modificar una instancia de un símbolo sin modificar el símbolo original en cuestión. pero sí mediante el Panel de Propiedades. que permite la manipulación "externa" de la instancia. Panel Propiedades de Instancia . que como hemos visto resulta sumamente útil. no podemos modificar las instancias con las herramientas de dibujo de Flash 8. podremos hacer que la instancia tenga más brillo. Símbolos (II) ISO-8859-1 ISO-8859-1 GALT:#008000. al no tratarse de un gráfico vectorial (veremos que significa esto más adelante). esto es. este panel. no nos permite modificar la estructura básica de la instancia.

. Nombre de la Instancia seleccionada (Instancia de:). Este símbolo se encuentra en la biblioteca y cada cambio que sufra afecta a todas las instancias que de él se derivan. Tipo de Símbolo o Comportamiento de la instancia.Para acceder al panel de propiedades de instancia.. pues permite identificarla durante la película. el Panel Propiedades mostrará las propiedades del objeto en cuestión. Esta opción nos muestra el símbolo raíz del que proviene la instancia que estamos modificando. Por defecto se nos muestra el tipo al que pertenecía el símbolo original pero nosotros podemos cambiarlo para que cambie su comportamiento.) En el momento que seleccionemos un símbolo aparecerán una serie de propiedades y opciones que comentamos a continuación: Nombre del Símbolo y su icono correspondiente: El nombre de la instancia es muy importante. aunque pueda seguir manteniendo su estructura inicial (en la imagen es "Clip de Película"). Si seleccionamos un objeto Flash que no se trate de un símbolo. pero no las características propias de los símbolos (cambios de color. El icono asociado nos permite saber qué tipo de símbolo es de un vistazo rápido. debemos seleccionar en primer lugar la instancia que queramos modificar y posteriormente abrir el Panel Propiedades. . intercambios etc.

. . pero durante el desarrollo de un trabajo profesional rápidamente surge la necesidad de probar situaciones y los diseños gráficos definitivos no suelen estar disponibles hasta bien avanzado el proyecto. incluido el nombre de instancia.. efectos gráficos etc. En la imagen se puede observar el panel Intercambiar Símbolo.Intercambiar: Esta opción merece especial atención. Gracias a esta opción podemos trabajar tranquilamente con un "boceto" y sustituirlo de un modo efectivo (el nuevo símbolo hereda las propiedades del antiguo símbolo. Su función consiste en cambiar un símbolo cualquiera por otro que tengamos en nuestra Biblioteca.) cuando llegue el momento. pues es muy útil y nos ahorrará mucho trabajo cuando sea necesaria emplearla. Puede parecer simple. las acciones que le afectarán.

G Final del formulario Efectos sobre Instancias (II) . Hay varios tipos de efectos. Efectos sobre Instancias (I) Para acceder a los efectos aplicables sobre una instancia determinada. Símbolos (III) Búsqueda es pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. Si el símbolo se acaba de crear o si no tiene efecto asignado aparecerá en la pestaña Ninguno. desde aquí podremos acceder a todos los efectos que Flash nos proporciona.Este panel además. Principio del formulario Unidad 9. incorpora el botón Duplicar Símbolo cuya funcionalidad es la que nos podemos imaginar. Es muy útil cuando queremos hacer pruebas con un símbolo y no queremos perderlo. En el gráfico de la derecha se puede observar la pestaña Color: del Panel Propiedades. debemos acudir nuevamente al Panel Propiedades. Lo duplicamos y trabajamos tranquilamente con la copia. En el siguiente apartado comentamos los distintos efectos aplicables a una instancia.

esto es. Puedes mover la barra deslizante o introducir su valor directamente en la casilla. completamente oscuro (negro) y completamente brillante (blanco). Se puede modificar su valor desde -100% al 100%.A continuación mostraremos los tipos de efectos. . Para ello partiremos de la siguiente imagen original: Brillo.

pero puesto que. Esta opción permite cambiar el color de la instancia.Efecto Brillo del 50 % Tinta. El grosor o intensidad de esta "capa" la podemos modificar en porcentaje mediante la primera pestaña que aparece a la derecha. verde y azul). no podemos modificar la instancia internamente. como dijimos. . se cambiará el color de toda la instancia como si la estuviéramos tiñendo o poniendo una capa imaginaria de un color determinado. al variar el color en la pestaña Tinta o bien mediante los valores RGB (cantidad de rojo.

Representa el grado de visibilidad o transparencia que se tendrá de la instancia en cuestión.Efecto Tinta del 50 % con el color verde (0 255 0) Alfa. También se puede modificar mediante valor directo o con la barra deslizante y es muy útil para animaciones de aparición y desaparición de objetos. . el objeto que antes estaba tapado se podrá ver a través de la instancia. Si aplicamos un efecto alpha sobre una instancia que está encima de otro objeto.

. dando lugar a efectos de gran vistosidad.Efecto Alfa del 65 % sobre el pez naranja Avanzado. Aquí podemos aplicar todos los efectos anteriores al mismo tiempo de manera más precisa. con la ventaja de que aquí podemos ponerle un poco de cada uno.

Sobre el pez superior. Aquí puedes ver el modo de aplicar una transformación Alpha a una instancia. obteniendo el tinte rosa translucido que se observa Mientras modifiquemos los efectos sobre las instancias podremos ir viendo el resultado sobre el propio escenario.G es Final del formulario . Hemos aplicado un efecto Alfa del 65 % y hemos reducido al 45 % la cantidad de verde a la vez que hemos multiplicado la cantidad de azul por 111. Principio del formulario Ejercicio s Tema 9: Símbolos Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.

Ejercicio 4: Efectos sobre Instancias . 4 Vuelve a realizar el paso 2 y comprueba que el botón se inserta en su tamaño original. Ejercicio 2: Insertar Instancia 1 Crea una nueva película. 2 Inserta el Gráfico de un botón cualquiera de las Bibliotecas comunes de Flash 8. 2 Comprueba que se ha duplicado en la Biblioteca.Ejercicio 1: Crear Símbolo 1 Crea una película con 1 fotograma. duplica la instancia del botón que has cambiado de tamaño. 4 Comprueba que está disponible en la Biblioteca. 3 Modifica su tamaño. 3 Conviértelo a símbolo de tipo Clip. Ejercicio 3: Duplicar Instancia 1 Sobre el ejercicio anterior. 2 Dibuja un círculo perfecto.

Si no tienes muy claro cómo realizarlo. o bien pulsa F8. Ejercicios Tema 9: Símbolos Ejercicio 1: Crear Símbolo 1 Crea una película con 1 fotograma con Archivo → Nuevo. 2 Ve a Ventana → Bibliotecas Comunes → Botones y selecciona un botón cualquiera (para expandir las carpetas. 2 Para que el círculo no salga ovalado. 4 Accede a Ventana → Biblioteca y busca el nombre que le diste al crearlo. selecciona la herramienta óvalo y mientras lo dibujas. Aquí te ayudamos. Ejercicio 2: Insertar Instancia 1 Selecciona la opción Archivo → Nuevo. 2 Dale al botón que está tapando al otro un efecto Alfa del 40%. Arrastra el botón elegido . 3 Comprueba que ahora podemos ver los dos claramente.1 Teniendo el botón ampliado del ejercicio 2 en el escenario. mantén pulsada la tecla Shift.. 3 Accede a Insertar → Nuevo Símbolo.. haz clic con el botón derecho sobre una de ellas y selecciona "Expandir Carpeta"). inserta el duplicado que hemos creado de tal forma que se superpongan parcialmente.

y no el símbolo en sí. 2 Accede a Ventana → Biblioteca y busca el nombre que le diste al duplicarlo. 2 Abre el Panel Propiedades y selecciona en la pestaña Color Alfa e introduce en la casilla donde pone 100% un 40% 3 Como el de arriba tiene un efecto Alfa (Transparencia) permite que el botón situado bajo él se vea. Ejercicio 4: Efectos sobre Instancias 1 Ve a Ventana → Biblioteca para abrir la Biblioteca y busca el nombre del duplicado. Arrástralo al escenario. Dale un nombre al duplicado (también puedes duplicar una instancia desde el panel Intercambiar Símbolo). Unidad 10.hasta el escenario 3 Selecciona el símbolo. luego la herramienta botón. Ejercicio 3: Duplicar Instancia 1 Haz clic con el botón derecho sobre la instancia que quieras duplicar y selecciona "Duplicar Instancia". y arrastra alguno de los puntos que aparecerán alrededor del 4 Debes ver que has modificado sólo una instancia del símbolo. Final del formulario Principio del formulario .

Así pues. la animación se reproducirá siempre y cuando la película original también se esté reproduciendo. Esto hace que. normalmente utilizaremos los gráficos para imágenes estáticas o para cuando nos convenga que una animación se reproduzca sólo cuando determinado frame de la línea de tiempo de la película esté en marcha. debemos tener en cuenta que ésta estará ligada a la línea de tiempo de la película en la que se encuentre. Es decir.Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. no puedan contener sonidos. controles ni otros símbolos gráficos. En caso de que utilicemos un símbolo gráfico para realizar una animación. Tipos de Gráficos Los gráficos pueden ser: a) Estáticos: estos gráficos se mantienen sin cambios cuando pasa el tiempo. Estos gráficos son los típicos en los fondos y en los objetos que no . pese a tener su propia línea de tiempo. ya que para los casos que hemos comentado anteriormente en los que un gráfico no nos es útil. Flash nos ofrece otro tipo de símbolos como veremos en temas posteriores.G Gráficos (I) es Final del formulario ¿Qué es un gráfico? Los Gráficos son símbolos que nos permiten representar objetos estáticos y animaciones sencillas.

échale un vistazo a nuestro tema básico. 2) Aunque no se traten de mapas de bits. posición u otras propiedades a medida que va pasando el tiempo. el hecho de poner muchas animaciones puede llegar a "marear" un poco al visitante de nuestro sitio y desviar su atención de lo que realmente importa. según la forma en la que estén creados: Gráfico Vectorial o Mapa de Bits. para las mismas dimensiones y forma de creación. Para saber más acerca de estos dos tipos de gráfico. aunque las animaciones dan a nuestra web un aspecto más bonito y espectacular tienen dos inconvenientes: 1) Si se trata de un Mapa de Bits (ahora veremos que significa esto) la web puede llegar a tener un tamaño excesivamente grande. ESTO ES ESTÁTICO UN GRÁFICO ESTO ANIMACIÓN ES UNA . el tiempo de carga de este tipo de gráficos.desempeñan ninguna función especial. Su tamaño y por tanto. Puesto que para realizar la animación se deben usar varios gráficos más además del original o bien realizar determinadas acciones que modifiquen el estado inicial. de sus dimensiones y de la forma en la que estén creados *. su contenido. por ejemplo. aunque siempre dependerá de la resolución. será en general reducido. será mucho mayor que uno estático. cuyo tamaño no es excesivo. (*) Los tipos de gráfico anteriores pueden ser. Por esto. . el tamaño de esta clase de gráficos. a su vez de dos tipos. si son animaciones típicas de Flash. b) Animaciones: este tipo de gráfico varía su forma.

Creando un gráfico y comprobando sus propiedades Como explicar teóricamente las propiedades de un gráfico resulta un tanto confuso. Vamos a crear un gráfico en Flash y a comprobar las propiedades que hemos comentado en el primer apartado del tema. vamos a ver de manera práctica lo que queremos explicar. abre una nueva película Flash (Archivo → Nuevo). Para ello. .

En la imagen inferior. ). un óvalo en cualquier lugar del área de trabajo con la herramienta Óvalo de la barra de herramientas de dibujo y démosle un color de relleno que será lo que después animemos (Selecciona el fondo del óvalo y dale el color azul mediante la herramienta Relleno de color. la vamos a realizar de una forma que quizá no sería la más apropiada la mayoría de las veces. en el que seleccionaremos la opción Editar para modificar el gráfico y acceder a su línea de tiempos. pero nos servirá muy bien para este ejemplo. y no la de la película principal) . Dibujemos. Ya hemos creado nuestro objeto. Puesto que todavía no hemos visto a fondo las animaciones. Se desplegará un menú. por tanto estamos DENTRO del gráfico (y la línea de tiempos que vemos es la del gráfico. Comprueba que estás en la línea de tiempos del gráfico (justo encima del escenario existe una secuencia que nos indica en qué nivel nos encontramos. Para ello selecciona nuestro gráfico y pulsa el botón derecho del ratón.Gráfico Animado" y. ves al Menú Insertar → Convertir en Símbolo y conviértelo en un símbolo como ya habíamos visto y dándole el nombre "GráficoAnimado"y seleccionando el Comportamiento Gráfico: Ahora vamos a crear la animación del gráfico. vamos a convertirlo en un símbolo gráfico ¿lo recuerdas ? Selecciona el objeto. por ejemplo. se puede apreciar que nos encontramos en "Escena1 .Ahora tenemos que crear el objeto que queremos convertir en un símbolo Gráfico.

Crearemos a continuación nuevos fotogramas clave seleccionando uno a uno los frames número 2. Tu línea de tiempos debería tener este aspecto: Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial (Película principal) y podremos ver nuestro gráfico "desde fuera". Ahora ya tenemos completo nuestro gráfico animado. Haz lo mismo en los dos siguientes frames. Pulsa sobre el frame 2 y cámbiale el color de fondo al óvalo como hicimos antes. ¿Qué crees que sucederá si reproducimos la película? Comprobémoslo pulsando Control + Intro. . se visualizará la película. 3 y 4 y pulsando F6 cuando los seleccionemos.

sólo ha reproducido un frame. Basta con recordar lo que hemos comentado. mientras que la del gráfico tenía 4. También nos permite modificarlos en cierto modo. ¿Por qué? La respuesta está en las características de los gráficos que habíamos explicado: la línea de tiempos del gráfico está ligada a la de la película.¿Y bien? Nada. . Cierra la ventana del reproductor de Flash. JPG. Flash 8 permite importar mapas de bits de otros programas. cuando han sido guardados en formatos gráfico GIF. Podemos cambiarle el tamaño y convertirlo en un símbolo para aprovechar las opciones que nos ofrece Flash aunque. Para importar un archivo de Mapa de Bits al escenario haz clic en el menú Archivo → Importar → Importar a escenario. no le hemos dado tiempo al gráfico a desarrollar su animación. El óvalo sigue tal cual. no podremos modificarlo "internamente" pero podremos usarlo como un símbolo más. Ahora tenemos 5 fotogramas en la película principal. Fireworks o Photopaint. Si deseas que en tus películas hayan mapas de bits lo más seguro es que prefieras crearlos y hacerlos más espectaculares en otro programa más apropiado que Flash para el manejo de Bitmaps: Photoshop. ¿Cómo podemos solucionarlo? Muy sencillo. Nada en absoluto. En este caso la línea de tiempos de la película tenía un solo frame. TIFF y muchos más. por tanto. Ahora sí que se ve la animación. el primero. Pulsa de nuevo Control + Intro. Introducir un Mapa de Bits Los gráficos de tipo Mapa de Bits pueden crearse con muchos programas. teniendo en cuenta qué es un bitmap. selecciona el fotograma 5 de la película principal y pulsa F6. Guarda este archivo porque lo utilizaremos más adelante.

Aquí tienes una muestra de como hacerlo. Introducir un archivo vectorial .Se abrirá el cuadro de diálogo de Importar. Selecciónalo haciendo clic sobre él y pulsa el botón Abrir. La imagen se incluirá en el escenario y estará lista para trabajar con ella. allí deberás seleccionar el formato de imagen que quieres importar seleccionándolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo.

. Concretamente. y ya nuestro archivo vectorial. tenemos Este archivo sí lo podremos modificar internamente ya que Flash es capaz de hacer gráficos de este tipo. A continuación. con lo que la compatibilidad en este caso es total. Si queremos traer un archivo vectorial creado en otro programa.Al igual que los mapas de bits. Simplemente accedemos al menú Archivo → Importar → Importar a escenario. Por ejemplo FH11 del Freehand MX (11). el Freehand pertenece también a Macromedia. al igual que Flash. por ejemplo Freehand. Pulsamos Abrir. podemos hacerlo de manera muy sencilla. hay otros programas que trabajan con gráficos vectoriales como también hace Flash 8. seleccionamos el tipo de archivo correspondiente al gráfico vectorial que queramos importar.

Exportar un objeto Flash como mapa de bits La interfaz de dibujo de Flash.. Ahora ya podemos usar nuestro objeto Flash como un bitmap. debemos tener en cuenta. Así podría interesarnos utilizar Flash 8 para crear un dibujo y después utilizarlo en otros programas o para cualquier otro uso. Esto es perfectamente posible con Flash. como vimos en el tema básico. Seleccionamos el tipo de mapa de bits en que deseemos convertir nuestro objeto y pulsamos Guardar. . como los GIF. que la mayoría de mapas de bits no permiten animaciones.. Para realizarlo seleccionamos el objeto que vamos a exportar y accedemos al menú Archivo → Exportar → Exportar Imagen. por esto el objeto flash que exportemos no debería contener animación ya que ésta no se guardará. ya que nos permite exportar un objeto de flash como un bitmap. ya que el GIF no lo reconocerá en caso contrario y no veremos el efecto deseado. Pues bien. como vimos. Sin embargo. el GIF animado consiste en una secuencia de imágenes mostradas secuencialmente y es por esto que para exportar un objeto Flash 8 como GIF animado es necesario que todos los fotogramas de esta animación sean clave. Para entender mejor cómo te aconsejamos realizar el Ejercicio Exportar Bitmap. Eso sí. con Flash también podemos crear una animación y exportarla como un GIF animado. resulta muy cómoda en determinadas ocasiones para realizar dibujos. Exportar un objeto Flash como animación Como vimos en el tema básico hay tipos de archivo de mapa de bits que soportan animaciones. como hemos visto. Luego introducimos en el campo Nombre el nombre que queremos que tenga nuestro nuevo bitmap.

.Para exportar un símbolo y guardarlo como una imagen deberemos antes que nada seleccionarlo con la herramienta Selección. y se abrirá un cuadro de diálogo. .. Una vez seleccionado deberemos hacer clic en el menú Archivo → Exportar → Exportar imagen.

.En este cuadro de diálogo deberemos introducir el nombre del archivo que crearemos y seleccionar en el desplegable Tipo el formato de imagen con el que queremos guardarlo.

Podéis seguir los pasos de este clip (Nota: se utilizará como base el gráfico animado que creamos en el apartado de creación de gráficos. Podeis poner a prueba vuestros conocimientos realizando la: Final del formulario . ya que dicho gráfico está hecho fotograma a fotograma): A la derecha vemos el GIF Animado que resulta de exportar nuestro gráfico Flash.Una vez rellenados todos los campos y elegida la carpeta donde se guardará el archivo pulsa el botón Guardar y el archivo de imagen se creará y estrá listo si quieres incluirlo en una página web estática o modificarlo con cualquier programa de imagen.

en Flash no ocurre así. Sin embargo. Esta es independiente pero. debemos crear programas relativamente grandes. que es el caso que nos ocupa. Su interfaz está diseñada de manera especial para la creación de botones. es igual que cualquier botón de cualquier entorno informático. desencadenando al hacerlo una serie de acciones. Al igual que los otros símbolos de Flash 8. También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando se les está pulsando. lo que nos permite crear todos estos efectos de una manera muy sencilla. para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes orientados a la web. sin embargo.G es Final del formulario ¿Qué es un Botón? Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas Flash con aquel que la está visualizando. está formada únicamente por cuatro fotogramas. Esto es un inconveniente bastante grande ya que el uso de los botones es una práctica muy habitual en el diseño en Internet. en Flash. . sea web o cualquier otro. por ejemplo.Principio del formulario Unidad 12. Son elementos que se prestan a que el usuario los presione. los botones tienen su propia línea de tiempos. Botones (I) Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. Pues bien. Un botón. uno para cada estado posible del botón.

Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. lo que nos ayudará a entender mejor dicha estructura. Esto es importante sobre todo en botones compuestos sólo por texto como veremos más adelante. Aspecto por defecto del botón. Creación de un Botón En la creación de un botón podemos considerar dos fases. Aspecto del botón cuando situamos el puntero sobre él. Sobre. Zona activa. La unión de las posibilidades de todos los símbolos dota a los botones de gran espectacularidad. Los botones pueden contener a su vez otros símbolos. pero no es así. Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de espectacularidad y utilidad de estos símbolos. cuando el puntero del ratón no está situado sobre él. como clips o gráficos (también de tipo Bitmap).Reposo. En la primera vamos a convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo completarlo internamente. . Presionado. es decir.

seleccionaremos cada uno de los frames (sobre. lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Editar. Para determinar cómo debe reaccionar el botón en función de las acciones del ratón. le daremos el comportamiento Botón y asignaremos un nombre a nuestro nuevo símbolo. presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos. De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Cuando tengamos delante la línea de tiempos del botón (observa que tiene el aspecto que hemos mostrado anteriormente). Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo. reposo.Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash 8. Ahora lo completaremos internamente. Ahora ya podemos modificar el aspecto inicial del botón para cada posición del cursor y marcar el área de acción del botón (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso sólo es .

Si bien lo más habitual es ver botones rectangulares. en cuya superficie "se sentirá aludido" nuestro botón.importante la forma del objeto. cuya creación es inmediata como vimos en el punto anterior. Es interesante su uso para dar más vistosidad ya que algunos resultan más expresivos. como el botón con relieve sencillo o los botones en forma de . Hay varias formas de botón también muy extendidas. Formas en los Botones situada a la derecha de la Los botones son símbolos que pueden tener multitud de formas. también hay otros muchos tipos de botones que. es muy habitual verlos en multitud de páginas web. no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura. dibujos con diferentes motivos. etc. continuación mostramos. aquellos que están formados por texto únicamente. Aquí podemos ver una muestra de creación de un botón ovalado. cuadrados y circulares. debido a la relativa sencillez de creación de botones que sus herramientas de dibujo nos ofrece. Si una vez creado el botón queremos observar sus distintos estados y todavía no hemos terminado la película entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo accediendo a la Biblioteca de nuestra película y seleccionando el botón creado. Entre estos están los creados mediante formas poligonales. Como resultado obtenemos el botón que Este es un botón muy básico. y en esto Flash nos ayuda mucho. Para ver lo que comentábamos bastará con pulsar la tecla vista previa del símbolo. pese a ser menos utilizados. pero para empezar nos servirá con este. como veremos se pueden complicar mucho.

Unidad Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. a continuación tienes un ejercicio paso a paso que muestra una forma de conseguir el relieve en un botón rectangular. . 4 Con la herramienta texto escribimos el texto que queramos en el interior del rectángulo. Por ejemplo a gris. Ejercicio paso a paso.G 12.píldora. Crear un botón con efecto relieve de forma rectangular tipo formulario de manera rápida y sencilla. Ejercicio Botón en Relieve. 1 Dibujamos un rectángulo en el área de trabajo. Crear un Botón es con Relieve Final del formulario Objetivo. Principio del formulario Ejercicio . 3 Cambiamos el color de fondo del rectángulo. Puesto que existen muchas formas de conseguir estos efectos. 2 Seleccionamos el fondo.

9 Activamos la opción de menú Insertar → Nuevo Símbolo. Le damos el color blanco. 11 Hacemos doble clic sobre el botón para editarlo. . 13 Seleccionamos el fotograma Presionado. vamos a crear un sencillo efecto de relieve. 6 Modificamos el color de dichos bordes. ahora vamos a crear los diferentes estados. Ya va tomando relieve. 12 Mediante F6 creamos fotogramas clave en cada uno de los fotogramas correspondientes a los estados del botón. 14 Modifiquemos ahora el borde inferior y el derecho del botón aplicándole el color blanco. 15 Finalmente seleccionemos los bordes superior e izquierdo y démosle el color negro.. 7 Seleccionamos ahora el borde inferior y aplicamos un color gris oscuro.. Pulsa Aceptar. 10 Marcamos el comportamiento de botón y le damos un nombre.Ahora que ya tenemos el molde. 8 Seleccionamos el botón. 5 Seleccionamos los bordes izquierda y superior.

Respecto a los fotogramas Sobre y Zona activa. los dejaremos tal y como están puesto que no deseamos que haga nada mientras no pulsemos el botón y el área de acción es la que comprende nuestro rectángulo. El resultado obtenido es el siguiente. La importancia de la zona activa . Botones de texto. Podemos pinchar sobre él y comprobar el efecto.

Haz clic sobre el fotograma de Zona Activa. Aquí se muestran dos botones creados en Flash 8. en general. poseen un fotograma en el que indicamos la zona activa. la diferencia está en el momento en el que situamos el ratón en uno de los huecos que existe entre letra y letra o. Esto es debido al mal uso de la zona activa. Así definiremos toda el área del rectángulo como zona activa al ratón. como hemos visto. todos aquellos lugares que no pertenezcan al texto propiamente dicho. 2. ya que es común pensar que obviamente la zona activa que queremos que tenga nuestro botón es el área que comprenden los límites de dicho botón. En los ejemplos vistos hasta el momento esto parecía poco útil. Para solucionar este problema sigue los siguientes pasos: 1. En el texto de la izquierda el botón se activa sólo cuando situamos el puntero del ratón sobre la letra. si no hubiese ningún fotograma clave creado haz clic sobre él y pulsa la tecla F6 para crear uno. Veamos como esto no es siempre tan trivial. Aunque parezcan iguales. Comprobemos lo que sucede al pasar el ratón por encima de uno y de otro. 3. Una vez en el estado Zona Activa seleccionamos la herramienta Rectángulo y dibujamos un rectángulo sobre el texto tapándolo en su totalidad. ya que aquel que navegue por nuestras páginas simplemente querrá hacer uso del botón y no tener que intentar apuntar concretamente a unas letras que quizá sean muy estrechas. Haz doble clic sobre el botón para entrar en su modo de edición. Esto puede ser incómodo y puede llevar a confusión. .Los botones.

Aquí tienes un ejemplo de cómo hacerlo correctamente. Vuelve al modo de edición normal pulsando el enlace a Escena 1 sobre la Línea de tiempos.4. Incluir un clip en un botón .

También es común ver un clip de película actuando como un botón. . Tomando este ejemplo. podemos recurrir a la introducción de un Clip en el botón. Ahora abre la Biblioteca desde el menú Ventana → Biblioteca donde se encontrará el clip que habremos creado previamente. pero quizá no tengamos claro qué. primero. Incluir un Clip en un botón es muy sencillo. Esto caso se puede hacer por ejemplo poniendo el clip en el fotograma Reposo. Haz clic en el estado Sobre para modificarlo.La inclusión de clips de película en los botones puede dotar a éstos de más vistosidad. Es habitual colocar un clip en el fotograma Sobre para indicar algún tipo de información extra o una animación para ir más allá de un cambio de color. Por lo que nos dice el botón podemos intuir que empieza algo. Veamos por ejemplo el botón siguiente: Comprueba todos los estados del ratón. que explique un poco más acerca de lo que pasará si pulsamos. Si nosotros en determinado momento no queremos que esto ocurra en nuestras páginas web. sólo tendrás que. hacer doble clic sobre el botón para entrar en su modo de edición. Selecciónalo y arrástralo sobre el botón. Selecciona el texto y pulsa la tecla SUPRIMIR para eliminarlo.

Bitmaps y Botones . ahora cuando pases el ratón sobre el botón el clip de película empezará a reproducirse.Ya esta listo. Aquí puedes seguir el proceso que acabamos de comentar Y este es el resultado.

2) Aprovechar las propiedades de los Gráficos en Flash. deberíamos importar primero el Bitmap y después convertirlo a símbolo botón. sacado de la Red y lo hemos convertido en un botón gráfico aplicándole un efecto Alfa (Transparencia) al estado de reposo. Una vez hecho esto. obteniendo un efecto como el que se consigue con lenguajes como javascript (siempre considerando la mayor sencillez de Flash). En el fotograma Sobre hemos dejado el GIF original para que al pasar sobre el botón de la sensación de encenderse. variando los efectos de las instancias en Flash (Alfa. Para esto. Básicamente podemos hacer dos cosas: 1) Incluir en cada uno de los fotogramas del botón un bitmap distinto. ya que están muy extendidos como forma de expresión gráfica a lo largo y ancho de la Red. Brillo) podremos conseguir efectos bastante buenos. Posteriormente lo editaríamos y. todo lo que se puede hacer con un gráfico se puede hacer con un clip.Además de clips. vamos a centrarnos en los Bitmaps que Flash nos permite importar. después de insertar cada fotograma clave. pero no es así. He aquí una pequeña muestra en la que sólo hemos utilizado un Bitmap de tipo GIF. los botones también pueden contener símbolos de tipo Gráfico. lo que da la sensación de estar apagado (también podríamos haber aplicado brillo). . Puesto que. Tinta. convertiríamos su contenido a símbolo Gráfico. como ya hemos visto. Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer poco interesante hacer uso de ellos en la creación de botones. Finalmente le hemos aumentado la cantidad de rojo en el fotograma Presionado para que parezca estar incandescente.

lo que nos servirá para irnos desplazando por webs que contengan más de una página. Abre el panel Acciones haciendo clic en su pestaña o desde el menú Ventana → Acciones. 2. Con esto conseguiremos abrir una página cualquiera de internet (o una película Flash). En el marco de la izquierda haz clic sobre Funciones globales → Navegador/Red → getURL. Has añadido una acción a tu botón. o permitir al usuario descargarse archivos entre otras cosas. pues es a él al que irá asociada la acción. Rellena los campos URL con la página a la cual quieres vincular el botón y selecciona en que ventana quieres que se abra el link en el desplegable Ventana (_blank abrirá el link en una página nueva). Al seleccionar el comando getURL (que se encarga de crear un link a una página web) se mostrarán . 6. Selecciona el botón haciendo clic sobre él. 5. 4. Haz clic en el botón Asistente de script. sus respectivas opciones en la derecha del panel. Para añadir una acción a un botón es necesario el uso de ActionScript (en el tema 17 se tratará con mayor profundidad). 3.Acciones en los botones Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones. Cierra el panel de Acciones y el botón estará listo. los pasos a seguir serán los siguientes: 1. como a otros elementos de Flash 8 vamos a comentar dos de las más comunes: 1) Abrir una página web. Por lo tanto.

activando posteriormente la función Stop().. retroceda . seleccionarlo. la ponga en marcha.Aquí tienes una muestra de cómo hacerlo. . Por ejemplo.. avance. y abrir el panel de acciones. para detener una película en curso simplemente debemos hacer que nuestro botón en cuestión aparezca en el escenario de dicha película. Si estamos reproduciendo una película Flash y queremos permitir que el usuario la detenga. Y este es el resultado: 2) Controlar una película en curso.

seleccionando el evento Presionar.Tras hacer esto. Arriba mostramos cómo debería quedar el panel de acciones del botón. Ahora cada vez que presionemos este botón se detendrá la película en la que está incluido. De forma muy parecida actuaríamos para otras acciones de control. Incluir sonido en un botón . deberíamos cambiar como hicimos en la animación anterior el momento en el que se debe ejecutar la función.

Ahora debemos insertar el sonido. simplemente debemos editar nuestro botón y seleccionar el fotograma Presionado.G es Final del formulario Ejercicio 1: Crear un Botón en forma de Píldora 1 Abre un documento nuevo 2 En el primer fotograma dibuja un objeto con forma de píldora como el de la derecha y escribe "STOP" sobre él . Podemos hacer. el sonido en los botones es una parte fundamental. Por ejemplo podríamos importar uno desde nuestro disco duro o bien tomar alguno que ya tengamos en la biblioteca. Para ello.Si nuestras páginas van a tener sonido. El resultado podría ser algo así: Principio del formulario Ejercicio s Tema 12: Botones Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. por ejemplo que se activen sonidos al pulsar un botón.

3 Conviértelo a símbolo de tipo Botón 4 Crea distintas apariencias para distintos estados 5 Guárdalo como stop.fla Ejercicio 2: Ajustar el Área Activa 1 Crea una nueva película 2 Escribe el texto: "VámOnoS" respetando las mayúsculas y minúsculas como se muestran 3 Conviértelo a Botón 4 Haz que sólo funcione al pasar por la "O" central Ejercicio 3: Botón con Sonido 1 Partimos del Botón del ejercicio 1. Ábrelo 2 Haz que emita un sonido de la Biblioteca Común de Sonidos al pasar el ratón por encima de él 3 Haz que emita otro sonido de la Biblioteca Común de Sonidos distinto al pulsarlo Ejercicio 4: Detener una Película .

. Elimina las líneas y ensancha el rectángulo que había entre ellas hasta tocar los semicírculos. 2 En el primer fotograma inserta algún símbolo que se comporte como clip de película y que contenta una animación de más de 1 fotograma 3 Ahora inserta en el clip el botón del ejercicio 1 de manera que se vea a lo largo de toda su reproducción 4 Haz que se detenga el Clip al pulsar el Botón Si no tienes muy claro cómo realizarlo. Separa los dos semicírculos. Una vez hecho esto dibuja dos líneas paralelas en el centro del círculo. colocando los marcadores como se muestra a la derecha y aplícalo como relleno. Aquí te ayudamos Ejercicio 1: Crear un Botón en forma de Píldora 1 Hazlo con Archivo → Nuevo.1 Abre un nuevo documento. 2 Para dibujar la forma de píldora dibuja primero un círculo. Selecciona la herramienta Cubo de Pintura y elige un degradado de blanco a azul.

. o bien pulsando F8 4 Crea fotogramas clave en todos los fotogramas mediante F6 y modifícalos para crear el efecto 5 Archivo → Guardar Como. y llámalo stop.. .a) b) c) d) e) 3 Mediante Insertar → Nuevo Símbolo.. Ejercicio 2: Ajustar el Área Activa 1 Hazlo también con Archivo → Nuevo 2 Mediante la Herramienta Texto marcada en la barra de Herramientas con una A y escribe el texto: VámOnoS..

Ejercicio 4: Detener una Película 1 Hazlo con Archivo → Nuevo 2 Crea un clip de película animado o importa uno como se vió en el tema anterior. Ejercicio 3: Botón con Sonido 1 Mediante Archivo → Nuevo. importalo desde tu disco duro. sino dispones de ninguno.. 4 Mediante Modificar → Convertir en Símbolo.. crea una nueva capa.3 Haz clic en la Herramienta Selección y selecciona el texto que acabas de crear.... dibuja un óvalo de tal forma que tape por completo la "O" y tenga el mismo tamaño y forma. Luego borra el texto. 3 Hacemos doble clic sobre el clip insertado para editarlo. y en el primer fotograma de esta . Déjalo en el escritorio. sino dispones de ninguno. 3 Selecciona el fotograma Presionado. accede a Ventana → Biblioteca y arrastra uno de los sonidos al escenario de que dispongas al escenario.. o bien pulsando F8 5 Selecciona el fotograma Zona Activa. importalo desde tu disco duro. 2 Selecciona el fotograma Sobre accede a Ventana → Biblioteca y arrastra uno de los sonidos al escenario de que dispongas al escenario.

fla" para abrir la biblioteca del archivo. (si es que no estaban abiertos ya) y luego hacemos doble clic sobre la acción Stop. arrastramos el botón al escenario. 4 Hacemos clic con el botón derecho sobre el botón y elegimos la opción Acciones o bien directamente abrimos el Panel Acciones y seleccionamos el botón. Animacione s de Movimiento (I) Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. Una vez hecho.G es Final del formulario La animación en Flash . En la parte izquierda del Panel Acciones hacemos doble clic en Funciones Globales → Control de la línea de tiempo.capa insertaremos el botón. Para ello accedemos a Archivo → Importar → Abrir Biblioteca Externa y seleccionamos "stop. } Principio del formulario Unidad 13. Por último editamos nuestra área de trabajo para que el código quede así: on(release) { stop().

de una manera muy sencilla. como es el caso por ejemplo de los GIF animados o lenguajes de programación como Java. consiguiendo efectos que normalmente requieren muchos conocimientos y espacio de almacenamiento para ser creados. Con esto es con lo que conseguiremos los efectos más espectaculares a la par que útiles. sin necesidad de excesivos conocimientos y ocupando muy poco espacio en disco. sobretodo. también se pueden crear animaciones a modo de GIF animado. el mensaje. ni crear animaciones que distraigan al que visualice nuestros documentos de lo realmente importante. mucha práctica. Aunque Flash ofrece técnicas mejores. Es muy importante tener claro un concepto: no se debe crear animaciones en páginas que no lo necesitan. Para ello conviene visitar nuestro tema básico: Animaciones Fotograma a Fotograma. Flash ofrece unas facilidades muy grandes. Estas son las animaciones más básicas y conviene conocerlas. A continuación veremos distintos tipos de animaciones que el creador de películas Flash deberá tomar como guía inicial. En este tema y los sucesivos mostraremos las técnicas básicas de animación en Flash. No obstante. Interpolación de Movimiento (I) . La unión de estas técnicas será la que nos permita crear las más variadas y vistosas animaciones. para ir creando animaciones cada vez más complicadas se necesita. En el tema de la animación. Se les denomina animaciones Fotograma a Fotograma. Cabe destacar que podremos aplicar varias de estas animaciones colocándolas en distintas capas. de ahí la gran importancia de este tema.Flash 8 es un programa básicamente orientado a la animación.

"intuye" una trayectoria en línea recta y la representa (veremos que también se pueden realizar movimientos no rectilíneos). .Es la acción básica de las animaciones en Flash. es el desplazamiento de un símbolo de uno a otro punto del escenario. Es importante destacar que para que una Interpolación de movimiento se ejecute correctamente aquellos objetos que intervengan deberán haber sido previamente convertidos a símbolo. También se debe tener cuidado al realizar una Interpolación con dos símbolos que se encuentren en la misma capa. Esto indica que la animación cambiará la posición del símbolo del fotograma 1 hasta la posición del mismo símbolo en el fotograma 20. Cuando realicemos la interpolación correctamente observaremos un aspecto como este en la línea de tiempo. Una interpolación de movimiento. Cuantas más subetapas más sensación de "continuidad" (menos saltos bruscos) pero a la vez menos velocidad en el movimiento. Pasemos pues al tema en cuestión. lo que optimiza mucho el rendimiento de la película. El número de fotogramas que se usen en la interpolación de movimiento indicará las subetapas de que constará la animación. 2) Poner también en distintas capas objetos que vayan a ser animados con direcciones o formas distintas. El hecho de que sólo se necesiten dos fotogramas es debido a que Flash. únicamente con la posición inicial y final. ya que el motor de animación los agrupará como uno sólo y el resultado no será el esperado. siendo necesarios únicamente dos fotogramas. Permite desplazar un símbolo Flash de un lugar a otro del escenario. utilizando precisamente 20 fotogramas. Por esto es conveniente asegurarse de dos cosas: 1) Separar en distintas capas los objetos fijos y los que estarán animados. como hemos dicho.

Mantén en mente que cuando realices una interpolación de movimiento el fotograma inicial y final deberán ser diferentes.La velocidad en el movimiento de las películas la podemos cambiar también modificando su parámetro en la barra de tiempos. En la animación del tema 1 podrás ver como realizar una interpolación de movimiento. pero se deben poner siempre suficientes fotogramas para que se desarrolle la animación como queremos. La velocidad está expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la barra de tiempos. A mayor valor más velocidad. en caso contrario no se creará ningún tipo de animación. pero esto no cambiará lo que hemos comentado anteriormente. Observa en las siguientes imágenes dónde está situada la pelota en el primer fotograma de la animación y su posición final en el último fotograma: .

..Aquí puedes ver como realizar una interpolación de movimiento Si el objeto con el que queremos hacer la interpolación de movimiento no está convertido a símbolo nos encontraremos con algo así. .

. debido a lo que ya comentamos de la gran cantidad de símbolos que pueden aparecer y la confusión que crean muchos símbolos con nombres parecidos.. Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias consecutivas más. y la animación no funcionará. Para entender mejor este concepto recomendamos hacer el Ejercicio Encadenar Interpolaciones. la animación irá primero a esa posición y después a la posición final. ya que Flash lo convierte a símbolo automáticamente si no lo hacemos. sin convertir previamente el objeto a símbolo.. Interpolación de Movimiento (II) . Si movemos el símbolo en ese fotograma a otro lugar del escenario y reproducimos. una vez creada la interpolación. y sólo deberemos modificar este último fotograma para producir la animación. al crear un fotograma clave en otro lugar de la línea de tiempos se creará automáticamente la interpolación. Esto quizá no sea lo más conveniente en películas grandes. dándole el nombre "Animar" más un número. Para ello. También podemos realizar la interpolación de otra forma. Flash también nos permite crear animaciones con trayectorias rectilíneas en varias fases. Basta con hacer clic con el botón derecho sobre el fotograma que contiene nuestro objeto (en la línea de tiempos) y seleccionar Crear Interpolación de Movimiento. basta con pinchar en uno de los fotogramas intermedios y crear un nuevo fotograma clave. Después. con direcciones distintas.

pero esta vez cambiándole el tamaño. Por supuesto. Sin embargo. basta con modificar la instancia del símbolo en el último fotograma de la interpolación de movimiento. El ejemplo siguiente incorpora estas tres características de la Interpolación de Movimiento de Flash 8. . podemos aplicar ambos efectos a la vez. Esto es muy sencillo con Flash 8. podemos aprovechar este comando del programa para realizar animaciones en las que nuestro objeto aumente o disminuya de manera progresiva su tamaño.Acabamos de ver las interpolaciones de movimiento como un mecanismo para desplazar un símbolo Flash de un lado a otro del escenario. También podemos hacer el cambio de tamaño en varias fases o secuencias encadenadas como en las interpolaciones de movimiento comunes. de manera que el cambio de tamaño se producirá mientras el objeto se desplaza.

Unidad 13. Crear un movimiento multidireccional encadenando interpolaciones de movimiento. Encadenar Interpolacione s Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.G es Final del formulario Objetivo.Y la línea de tiempos que nos queda es algo tan sencillo como esto: Principio del formulario Ejercicio. .

En ese mismo fotograma (el 20) desplazamos el símbolo al extremo derecho del escenario.Ejercicio paso a paso. el clip seguiría una línea recta. 3 Situamos el Clip en el lado izquierdo del área de trabajo. 6 Vamos al fotograma número 20 y pulsamos F6. 1 Importamos un Clip de Película. 2 También podemos dibujarlo y convertir nuestro dibujo en un Clip de Película. 5 Seleccionamos la opción Crear Interpolación de Movimiento. Vamos a hacer que llegue a su origen haciendo zig-zag con un par de acciones muy sencillas. en ella hemos marcado únicamente la posición inicial y final del movimiento. 4 Hacemos clic con el botón derecho sobre el único fotograma existente en este momento. Ahora ya tenemos la interpolación base. 7 Observaremos que se crea la Animación de 20 fotogramas de duración. Si lo dejáramos así. aprovechando el hecho de tener la interpolación ya creada. .

el clip se desplaza ahora en línea recta pero en varias direcciones distintas. Animación de Textos . 10 Hacemos ahora clip con el botón derecho del ratón sobre el fotograma 10. 9 Desplacemos nuestro clip hacia arriba. 11 Desplacemos nuestro clip hacia abajo. Repite estos dos últimos pasos para los fotogramas 15 y 20 y prueba la película. Comprobemos que el clip de película ya no está en el origen si no que ya está "haciendo camino". Como podemos comprobar.Comprobemos que la línea de tiempos está de la siguiente forma: 8 Hacemos clic con el botón derecho del ratón sobre el fotograma 5.

se debe tener cuidado con la animación de los textos. un texto animado debería estar sólo en las presentaciones o bien formar parte de una animación corta y. En las presentaciones. con lo visto hasta ahora se pueden obtener efectos interesantes. No obstante. . ya que resulta bastante complicado leer un texto que se desplaza o cambia de tamaño.Es indudable que para comunicar algún mensaje. y es aquí donde el texto cobra gran importancia. Por este motivo. lo que es más importante no debería estar reproduciéndose infinitamente. Sin embargo. Una de las opciones más utilizadas es separar las letras de los textos y animarlas independientemente Aquí tienes un ejemplo de una presentación sencilla mediante texto utilizando esta técnica. se utilizan multitud de efectos que veremos más adelante. no basta con imágenes o iconos. en la mayoría de las ocasiones.

Animación de Líneas .Si no tienes claro cómo realizar una animación te recomendamos que realices el Ejercicio Animar Texto por Bloques.

y en cuanto a tamaño de archivo se refiere. Para crear esta animación deberás crear tantas capas como animaciones de líneas vayas a crear.Una buena animación no tiene que porqué estar compuesta sólo por textos o imágenes espectaculares. A la derecha podemos ver un ejemplo de este tipo de presentaciones. Esta técnica nos permite dar dinamismo a la animación o crear formas distintas a lo largo de su recorrido. Son especialmente útiles y vistosas en fondos oscuros y se suelen usar para formar rectángulos que se aprovechan para insertar imágenes. En ocasiones conviene darle a la película un aire más sencillo o añadir determinados efectos que la hagan vistosa sin necesidad de cargar mucho la película visualmente. Esto lo podemos conseguir simplemente animando líneas y haciendo que se muevan por el escenario. Una para el . en el ejemplo hemos creado 4 capas.

El funcionamiento de la animación es claro. También crearemos una capa que situaremos en la posición superior donde colocaremos las imágenes que formarán el mensaje de bienvenida. del fotograma 5 . otra para izquierda a derecha y finalmente una última para el movimiento de derecha a izquierda. las líneas situadas en un principio en la parte inferior al final de la animación se encontrarán en la parte superior. es decir. deberemos crear interpolaciones de movimiento para cada una de las capas de líneas que en su posición final emplazaremos en su lado contrario de la pantalla. otra para el movimiento de arriba a abajo. Realizaremos esto con las 4 capas de líneas. En la capa Imágenes crearemos animaciones que harán aparecer las imágenes que forman el mensaje de bienvenida de forma secuencial.movimiento de líneas de abajo a arriba. por ejemplo.

al 10 se mostrará una imagen. Interpolación mediante Guía de Movimiento . habiendo creado los fotogramas claves en cada uno de los fotogramas de inicio (5. Aquí mostramos la forma de crear una animación de este tipo. arrastraremos desde la Biblioteca (menú Ventana → Biblioteca) las imágenes para colocarlas en su lugar en el fotograma. del 11 al 16 otra y la última la mostraremos del fotograma 17 al 22. Consejo: Si quieres añadir un fondo deberás hacerlo en una nueva capa y colocar ésta debajo de todas las existentes. 11 y 17). De esta forma. Estas imágenes se mostrarán únicamente durante el tiempo que dure el fotograma para desaparecer más tarde dando paso a la otra imagen.

Puesto que esto supone una cierta limitación Flash 8 incluye la Guía de movimiento. seleccionarla (debemos asegurarnos de esto para evitar que la guía se asocie a otra capa). Lo primero que deberás hacer es crear una .Anteriormente hemos visto como las interpolaciones de movimiento desplazaban símbolos Flash en línea recta. Crear interpolaciones de movimiento guiadas es muy sencillo. y colocar el símbolo del último fotograma al final del trazado que realizaremos previamente en la capa de la guía. basta con crear una interpolación de movimiento en una capa. No es necesario colocarlos al principio del trazado ya que Flash lo hace automáticamente. para que dichos símbolos la sigan. Esta capa es invisible durante la reproducción y permite dibujar cualquier tipo de dibujo vectorial. durante el movimiento. Vemos como la capa a la que se asocia la guía aparece debajo y alineada a la derecha. Una guía de movimiento es una capa especial que marca una trayectoria para los símbolos de la capa a la que afecta. que nos permitirá crear un movimiento no forzosamente rectilíneo. Crear un movimiento mediante esta técnica es bastante sencillo.

si creaste el primer fotograma en la posición 5. Cuando lo hayas creado selecciona el último fotograma de la animación y coloca el símbolo en su punto final. . Añadir guía de movimiento. crea el nuevo en la posición 25. Selecciona todos los fotogramas que intervengan en la animación y haz clic derecho sobre uno de ellos en la Línea de tiempos. Recuerda que el símbolo debe estar siempre en contacto con la línea de guía tanto en el primer como último fotogramas. para ello: 1.animación de movimiento. Selecciona la opción Crear interpolación de movimiento. Crea un nuevo fotograma clave para marcar la duración de la animación. Se Ahora el procedimiento es fácil. 2. Una vez creada la interpolación y con la capa seleccionada pulsa el botón creará una nueva capa asociada a aquella donde tienes creada la animación. Crea un fotograma clave pulsando F6 e inserta en él el símbolo que quieres que realice el movimiento. así tendrás una animación que durará 20 fotogramas. por ejemplo. selecciona la herramienta Lápiz y dibuja en la capa guía el recorrido que debe seguir el símbolo. 3.

Unidad 13. Animar Texto por Bloques Principio del formulario Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. Podemos ver un efecto más vistoso que el que realizamos con la interpolación sencilla del principio del tema.G es Final del formulario . Podeis poner a prueba vuestros conocimientos realizando la: Ejercicio.Aquí se puede ver cómo realizarlo.

Objetivo. . Crear una animación sobre un texto separándolo en bloques de letras cuyo movimiento será tratado de manera independiente. Ejercicio paso a paso. dando al texto un efecto vistoso que pudiera servir como presentación de entrada a una web u otro tipo de película.

Con esto separamos cada letra ya que de no hacerlo Flash trataría todo el texto como un bloque y no podríamos dar el efecto a las letras. Veamos cómo conseguir esos efectos combinando las técnicas vistas hasta el momento. 6 Creamos 5 nuevas capas. Vamos a separar el texto en los siguientes bloques: "a". Nosotros hemos elegido "Ruach Let". para tener claro nuestro objetivo.Vamos a basarnos en el ejemplo que acabamos de ver. 5 Seleccionamos dichos bloques y los convertimos a símbolos. 2 Abrimos el Panel Propiedades (tras seleccionar el texto) y seleccionamos el tipo de letra. "u". ya que no los animaremos "internamente". 1 Escribimos el texto en cuestión. Podríamos cambiar los bloques si quisieramos dar otro efecto en concreto. una por cada bloque que hemos creado. 4 Accedemos al menú Modificar → Separar. . dándoles un nombre identificativo y el Comportamiento gráfico. en nuestro caso "aulaClic". "la" y "Clic". Luego podremos extrapolarlo a cualquier otro texto. 3 Seleccionamos el texto recién escrito. pero cualquiera es válida.

10 Situamos (arrastrando) el fotograma de cada capa a los siguientes frames: "A" : Fotograma 1. A continuación vamos pegando los fotogramas (botón derecho → Pegar Fotogramas) en todas las capas. 9 Seleccionamos cada capa y vamos borrando las partes del texto que no corresponden con la parte del texto que debe contener. lo convertiría todo a símbolo automáticamente. la siguiente "la" y así sucesivamente. Es recomendable bloquear el resto de capas cuando se haga esto para asegurarnos de que borramos las letras de esa capa (hay que tener en cuenta que al principio todas las capas contienen lo mismo y superpuesto). Esto es.Esto último es necesario ya que si no lo hiciéramos Flash aplicaría el movimiento a todo aquello que encontrara en dicha capa. 7 Nombramos cada una de las capas según el bloque de texto que vaya a contener. . ya que como hemos comentado anteriormente. la capa de más arriba se llamará "Clic". para que el objeto en movimiento se superponga a los que no lo están. 8 Hacemos clic con el botón derecho sobre el único fotograma que tenemos en la línea de tiempos y en el menú emergente seleccionamos Copiar Fotogramas. pero en orden inverso en el que vaya a producirse la animación.

"U" : Fotograma 6. "LA" : Fotograma 12. "Clic" : Fotograma 18.

11 Seleccionamos el fotograma que ocupa cinco posiciones después del fotograma de cada capa y pulsamos F6 cada vez. En la capa "Clic" selecciona el fotograma 30 y pulsa también F6. 12 Hacemos clic con el botón derecho en los fotogramas centrales que hay entre los fotogramas claves y seleccionamos cada vez Crear Interpolación de Movimiento.

13 Extendemos la imagen los últimos fotogramas de cada capa hasta que ocupen el fotograma 30 (Botón derecho → Insertar Fotrograma Clave). 14 Exceptuando la capa "Clic" seleccionamos el primer fotograma de cada interpolación y aumentamos el tamaño del bloque que contiene.

15 Movemos ahora fuera del escenario el bloque "Clic". 16 Aún en esta capa, hacemos clic con el botón derecho sobre el fotograma 24 y seleccionamos Insertar Fotograma Clave. 17 En este fotograma recién creado reducimos el ancho del bloque de texto y lo colocamos junto a la última "a". Y ya tenemos la animación creada. Como vemos hemos utilizado todo tipo de técnicas de interpolación, aunque todavía puede complicarse más como veremos más adelante.

Final del formulario Final del formulario

Unidad 14. Animació n por Forma (I)
es

Principio del formulario
Búsqueda
pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000;G

Final del formulario

Interpolación por Forma

Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash 8 nos ofrece la técnica de la Interpolación por Forma, que consiste simplemente en ir transformando el contorno de un objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto distinto. Realizar una interpolación por forma, es muy semejante a crear una interpolación de movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. Así como hacíamos en el tema anterior, sólo necesitamos dos fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto original, y en el último la apariencia final que queremos que tenga. Esta vez, es importante destacar que para que una Interpolación por Forma funcione como es debido aquellos objetos que intervengan deberán ser objetos vectoriales (no símbolos Flash). Debemos tener también dos aspectos en cuenta: 1) Separar en distintas capas los objetos fijos y los que estarán animados. 2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas, ya que Flash transformará todos los objetos vectoriales del primer fotograma en aquello que haya en el último fotograma de la

interpolación. Si realizamos la interpolación por forma correctamente la línea de tiempos tendrá este aspecto:

Las consideraciones sobre la velocidad y el número de fotogramas que vimos en las interpolaciones de movimiento se pueden aplicar también a la interpolación por forma y a cualquier animación hecha con Flash. Si hay algún fallo en los parámetros necesarios para que la interpolación se ejecute bien, como por ejemplo, que uno de los objetos en capa sea un símbolo, se mostrará algo así en la línea de tiempos:

Para crear una interpolación de forma deberás actuar de forma similar que para crear una de movimiento. Una

. ¿verdad? Podemos observar como realizar una interpolación por forma pulsando aquí. Allí deberás seleccionar la opción Forma en el desplegable Animar. Y ya habrás terminado. Fácil.vez tengas los fotogramas de inicio y fin de la animación deberás seleccionar todos los fotogramas que participen en ella y abrir el panel Propiedades.

También podemos realizar interpolaciones de forma en varias fases de manera análoga a como lo hacíamos en el tema anterior. De esta forma podemos hacer que un determinado objeto de convierta en otro antes de adoptar su forma definitiva. .A la derecha podemos ver el resultado del proceso anterior. Ahora. a la derecha podemos ver el ejemplo anterior pero haciendo que se transforme previamente en un triángulo antes de pasar a ser cuadrado.

Añadimos así una posibilidad más para realizar logotipos o presentaciones vistosas y transmitir información de manera espectacular. Para solucionar este problema. . que se basan en fuentes y son creados en función de los valores de la tabla ASCII y un tipo de letra asociado. deberemos transformar el texto previamente en un objeto vectorial.Lo hemos conseguido simplemente haciendo clic con el botón derecho sobre el fotograma 10 y creando un fotograma clave (Insertar Fotograma Clave). Transformar Textos Debido a la importancia de los textos. Este no es el caso de los textos. Luego sólo tenemos que borrar el objeto que aparece en el escenario y dibujar el triángulo. como si hubiéramos repasado con la herramienta lápiz el contorno de cada letra. es decir. es importante comentar las aplicaciones que tienen los cambios de forma sobre ellos. Recordemos que para realizar una interpolación de forma es necesario que el objeto sea de tipo vectorial.

aunque puede llevar a confusiones si no se hace adecuadamente.¿Posibilidades de esta técnica en textos? Muchísimas. Una de las posibilidades es "deletrear" una palabra de manera tan vistosa como vemos a la izquierda. Podemos comprobar como simplemente cambiando el color del objeto final. mantenemos su imagen el tiempo suficiente como habíamos indicado que era necesario. Por ejemplo debemos asegurarnos de dar suficientes fotogramas de margen para que se note la transición. . porque si no lo hacemos corremos el riesgo de que la animación parezca sólo un garabato revolviéndose. observamos transiciones de forma a texto. En este otro ejemplo se observa la transición de colores más claramente y. además. También es conveniente dar un tiempo para que cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la película. Observemos a su vez como cuando se forma cada letra. se produce una transición también en el color.

.

Deberemos. Consejo: Cuando vayas a aplicar el comando Separar sobre una palabra completa observa que primero lo que hace es separar la palabra en letras inidividuales. Para ello. Y la interpolación ya estará lista. entonces seleccionar el fotograma donde se encuentre el texto y seleccionarlo. Haremos clic en el menú Modificar → Separar para convertir el texto en un conjunto de puntos que creen una forma. y una vez tengamos la animación creada con una forma en el fotograma inicial y un texto en el final veremos que la interpolación aparece como incorrecta. Deberás ejecutar de nuevo el comando para que estas letras se separen y creen una forma. Consejos de Forma . Aquí mostramos como realizar una animación de este tipo.Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar de un modo especial dado que un objeto de texto no se considera como una forma.

es posible que Flash realice la transformación de los objetos de una forma que no es la que esperábamos y que no nos conviene para llevar a cabo nuestro propósito. En las interpolaciones de movimiento lo solucionábamos mediante la guía de movimiento. Al indicar esto. a veces no nos viene bien el tipo de acción que hace Flash por defecto. Aparecerá un círculo de color con una letra dentro en el centro de la figura. para estos casos Flash 8 nos ofrece una herramienta para solucionarlo: los consejos de forma. Pues bien. Automáticamente aparecerá un punto con la misma letra dentro en la figura final (este punto será el que se deba corresponder con el punto del objeto de origen) y deberemos colocarlo en el punto que deseemos del contorno.Como ocurría en el tema anterior. que es donde tiene efecto. Los consejos de forma son marcas que indican a Flash qué puntos de la imagen inicial son los que deben corresponderse con otros tantos puntos en la figura final. Su color será rojo mientras no sea colocado en el contorno del objeto (los extremos. En el caso de la interpolación por forma. Cuando están colocados sobre una curva (vector) que forma un contorno son amarillos para el objeto inicial y verdes para el final. estamos controlando las formas intermedias que se generarán. si es que no hay contorno). Dicho círculo debemos colocarlo en un punto del contorno de la figura inicial. . Para añadir un consejo de forma a una interpolación nos situaremos en el fotograma inicial y pulsaremos Control + Shift + H (o bien ir al menú Modificar → Forma → Añadir Consejo de Forma).

hasta la z. Ahora realicemos el seguimiento de otro ejemplo. "c". que es el límite (26 como máximo). Pulsa aquí para comprender mejor qué es un consejo o pista de forma y ver un ejemplo de la creación y usos de los consejos de forma. Si creamos más de uno serán marcados con las letras "b".. tenemos la siguiente animación (sin consejos de forma): Vamos a insertar un consejo de forma en el punto indicado en los gráficos situados un poco más abajo: Fijémonos en las posiciones inicial y final del Consejo de Forma y en el seguimiento del mismo.El primer consejo de forma está marcado con la letra "a". posteriormente comprobaremos que Flash realiza lo que le pedimos: . "d" ..

con lo que hemos conseguido forzar la transformación que nosotros queríamos.Punto Inicial Punto Final Seguimiento Como vemos el punto que hemos marcado en el objeto inicial se acaba correspondiendo con con el punto que marcamos en el final. .

G es Final del formulario Ejercicio 1: Babosa arrastrándose 1 Abre un documento nuevo 2 En el primer fotograma dibuja una especie de babosa como la de la . Principio del formulario Ejercicios Tema 14: Animación por Forma Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.El resultado del ejemplo anterior es este.

3 Haz que cambie de forma y vaya de un lado a otro del escenario. Ejercicio 3: Cambiar la Forma de un Texto 1 Escribe en distintas capas las letras de tu nombre.derecha.fla". . 4 Guárdalo como "babosa.fla" 2 Cambia el movimiento de forma para que a mitad del trayecto de la impresión de que se está acercando a nosotros. dando la sensación de que está reptando. Ejercicio 2: Cambio de Forma y Tamaño 1 Abre el archivo "babosa. 3 Cambia el color de la babosa cuando está más cerca de nosotros.

2 Crea una animación de forma que pase de una letra a la siguiente. 2 Crea una animación de forma de manera que al final. 3 Hazlo de manera que parezca que se apoya en la punta y se abate como la bisagra de una puerta. la flecha quede con el mismo aspecto pero apuntando en dirección contraria. Tiene que quedarte algo como lo de la derecha. . Ejercicio 4: Consejos de Forma 1 Dibuja una Flecha. Si no tienes muy claro cómo realizarlo. 3 Cambia los colores y el tamaño de cada letra. Aquí te ayudamos.

arrastra la babosa al otro lado del escenario y mediante la Herramienta de Subselección modifica su forma.Ejercicio 1: Babosa arrastrándose 1 Hazlo con Archivo → Nuevo. 3 Pulsa con el botón derecho sobre el primer fotograma y elige la opción Propiedades (o bien abre el panel propiedades y sitúate en el primer fotograma). 2 Selecciona el fotograma 10. En el desplegable Animar del Panel Propiedades selecciona la opción Forma. . 4 Guárdalo con Archivo → Guardar Como y llámalo babosa.fla. Ve ahora al fotograma 20 y pulsa F6. En ese mismo fotograma. 2 Utiliza la Herramienta Lápiz. Mueve el objeto hasta la parte inferior del escenario y aumenta su tamaño. La parte inferior siempre da sensación de proximidad. Ejercicio 2: Cambio de Forma y Tamaño 1 Abre el archivo con Archivo → Abrir.

2 Selecciona la letra creada y activa la opción Modificar → Separar. En el desplegable Animar del Panel Propiedades selecciona la opción Forma. Ejercicio 4: Consejos de Forma . Ve cinco fotogramas en adelante y pulsa F6. Pulsa con el botón derecho sobre el primer fotograma y elige la opción Propiedades (o bien abre el panel propiedades y sitúate en el primer fotograma). elige un nuevo color y pincha sobre el relleno anterior. Ejercicio 3: Cambiar la Forma de un Texto 1 Crea mediante F6 un fotograma clave en el introduce en el centro del escenario una letra de tu nombre. Repite el paso 2 hasta que hayas escrito todas las letras. 3 Hazlo mediante el Cubo de Pintura y la Herramienta Transformación libre (para Escalar). Borra la letra y escribe la siguiente.3 Selecciona la Herramienta Cubo de Pintura.

Final del formulario . Si ejecutáramos la animación ahora no conseguiríamos el efecto deseado. De manera que quede como la figura de arriba. Invierte la imagen del fotograma 20 para que adopte su posición final mediante Modificar → Transformar → Voltear Horizontalmente y colócalo de manera que su punta y la de la flecha original coincidan. En el desplegable Animar del Panel Propiedades selecciona la opción Forma. Ve al fotograma 20 y pulsa F6.1 Utiliza la Herramienta Lápiz. 2 Pulsa con el botón derecho sobre el fotograma que contiene la flecha y elige la opción Propiedades (o bien abre el panel propiedades y sitúate en el fotograma que contiene la flecha). Haz esto último para todas las esquinas. 3 En el fotograma 1. activa la opción Modificar → Forma → Añadir Pista de forma para añadir una nueva pista de forma. Colócalo en una de las esquinas de la flecha y ve al fotograma 20 para colocar la pista creada en la esquina que se corresponda con la anterior.

.G es Final del formulario Introducción Si no te parecen suficientes las interpolaciones de forma y de movimiento.Principio del formulario Unidad 15. y quieres realizar animaciones más complejas. puedes combinar las interpolaciones de movimiento con los efectos y transformaciones que se pueden realizar sobre los símbolos que las componen y aplicar efectos sobre las mismas interpolaciones. Una vez comprendidas todas las técnicas de este tema. Sólo tendremos que poner un poco de imaginación porque. estaremos en disposición de realizar todo tipo de animaciones en Flash. como hemos visto y veremos. el programa nos facilitará enormemente el trabajo. Efectos sobre Animaciones (I) Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.

cuando seleccionemos un Fotograma que presente animaciones de Movimiento. Aparecerá a lo largo de todos los fotogramas que la componen. En el campo <Etiqueta de fotograma> podemos darle un nombre a la interpolación que nos ayudará a identificarla en la barra de tiempos. . al activarla. nos centraremos en el Panel Propiedades.Efectos sobre la Interpolación de Movimiento Para describir todos los efectos que podemos aplicar sobre una interpolación de movimiento previamente creada. los atributos de la animación a modificar aparecerán en este Panel. Escalar: Esta casilla. permite un incremento/decremento progresivo del tamaño del objeto inicial cuando sus dimensiones son distintas a las del objeto que está en la posición final de la animación. sin necesidad de tocar ningún símbolo.

pero el cambio de tamaño se produce bruscamente en el último fotograma. Aceleración: Esta barra deslizante nos permite determinar la aceleración del primer tramo de la animación. ya que es lo más normal. Si el valor de aceleración es negativo el símbolo se moverá despacio primero e irá acelerando de manera progresiva. Para comprenderlo mejor recomendamos hacer el Ejercicio Acelerar Movimiento. De no ser así podríamos encontrarnos con una animación como la siguiente. Flash la activa por defecto. va cogiendo velocidad poco a poco (valor -100) y después va frenando y disminuyendo su velocidad hasta pararse.Todas las interpolaciones de movimiento que hemos hecho hasta ahora tenían esta opción activada aunque no lo hayamos indicado expresamente. Podemos elegir valores entre -100 y 100. Podemos por ejemplo dar la impresión de que un objeto. . Como esta. arranca. Si dicho valor es positivo provocará un efecto opuesto. Como vemos Flash hace el desplazamiento de posición. existen muchas otras aplicaciones. por ejemplo un coche.

Se nos presenta un submenú con cuatro opciones: Ninguna. Automática. Para que surta efecto debemos seleccionar el primer fotograma de la interpolación. cuando la imagen inicial y final está en la misma posición (en cuanto a rotación se refiere).Girar: Esta opción es muy interesante ya que nos da la posibilidad de aplicar una rotación al objeto mientras se produce el movimiento. Con esto le indicamos a Flash que no aplique rotación alguna sobre el símbolo en movimiento. . Marcando esta opción hacemos que se produzca la rotación en aquella dirección que necesite menos movimientos. es decir. el hecho de activar esta opción no tendrá ningún efecto. Si cuesta lo mismo hacerlo por un lado o y por el otro.

Tanto si la última imagen tiene rotación como si no. Para que hubiera tenido efecto deberíamos haber rotado la última imagen de la interpolación. Antihorario (antes CCMR). Permite realizar el número de rotaciones completas en la dirección contraria a la de las agujas del reloj. Aquí podemos ver cómo aplicar esta técnica. Este es el resultado que hemos obtenido. ya que el 6 ha pasado progresivamente de su posición anterior a la que ocupaba el 1 de la otra forma el 6 habría pasado por las posiciones anteriores del 5. . siendo la longitud del movimiento mucho mayor. 4. como podemos comprobar. que le indiquemos en la casilla de la derecha.Esta opción es la que está marcada por defecto y por eso no hemos visto hasta ahora un objeto rotar en nuestras interpolaciones. 2 y 1. ha recorrido el camino más corto. 3.

cuando la interpolación sobre la que actuamos es una interpolación por guía de movimiento. rotando para orientarse en la misma posición que adopta la línea. Veamos un ejemplo de rotación a derechas en una interpolación de movimiento. A la derecha vemos el resultado. Horario (antes CMR). Realiza lo mismo que la opción anterior pero en la dirección de las agujas del reloj (hacia la derecha). Flash hará que el símbolo tome la dirección de la guía. no es conveniente que los objetos se muevan solo en el escenario quedando el mismo símbolo inmóvil. Resultaba un poco extraño ver la animación porque los aviones no van marcha atrás y. esta se le añadiría. Con este comando solucionaremos esto. en esta ocasión y en muchas otras. Para entender mejor este concepto. en la que el avión hacía una especie de "looping". . como si levitara. y el resultado sería este.En caso de que tuviera rotación la imagen final. recordemos la última animación del tema 13. Final del formulario Orientar según trazado: Si activamos esta casilla.

Sincronizar (Sinc): Con esto evitamos que no se reproduzca el último bucle de un símbolo gráfico incluido en nuestra película con una animación en su línea de tiempos interna. De hecho si intentamos mover la instancia en un fotograma de la animación. . cuando los efectos muestran su verdadera potencia es cuando el símbolo forma parte de una animación. el centro de la instancia (identificado con una cruz) se ajustará forzosamente a la guía que hemos marcado en la correspondiente capa. No obstante. Flash la volverá a colocar sobre la guía de manera automática. Efectos sobre el Símbolo Interpolado Ya vimos en temas pasados cómo aplicar efectos sobre símbolos y vimos que se podía lograr efectos vistosos. Ajustar: Si activamos esta opción. cuando el número de fotogramas que ocupa en la línea principal no es múltiplo de los fotogramas que contiene la instancia.

Efecto Brillo El efecto de brillo. en la pestaña Color los posibles efectos a aplicar si seleccionamos una instancia de un símbolo cualquiera de nuestra película. Para entender bien lo que sigue. Para conseguir esto hemos creado una interpolación para cada luz. que nos mostrará. como su propio nombre indica. formada por tres fotogramas . nos viene muy bien para simular el hecho de que algún objeto se encienda o brille. Como se puede ver. tanto sobre el fotograma inicial o el final como en los intermedios. deberemos convertir a fotograma clave aquel que contenga la instancia y después aplicar el efecto.Para explicar y demostrar las posibilidades de estos efectos vamos a abrir el Panel Propiedades. es necesario controlar la aplicación de efectos sobre instancias. Podemos aplicar los efectos sobre cualquier símbolo de cualquier fotograma de la animación. Para ello hemos creado un semáforo de luces intermitentes de color ámbar. En el ejemplo que tenemos a la izquierda.. En este último caso. o por el contrario se apague o pierda brillo. hemos intentado simular este efecto. las luces se encienden y apagan progresivamente de manera alternada. Esto lo vimos en el Tema 9 y por eso omitiremos detalles sobre cómo aplicar efectos concretos sobre símbolos.

Y en la luz inferior al contrario: 0 para el primer fot. A la primera luz y a la última le hemos dado el mismo valor de brillo. El tercero lo hemos colocado justo en el medio de la secuencia de fotogramas. Efecto Tinta . Para la luz superior los valores de brillo fueron: 0 para el primer fot. -46 para el central y 0 para el del medio.claves. -46 para el central y 0 para el del medio. clave. Como los movimientos de las luces son distintos e independientes los hemos colocado en distintas capas. clave. y en la del medio le hemos dado un valor más alto o más bajo según fuera el símbolo de abajo o el de arriba.

El efecto de Tinta. por ejemplo haciendo que cambien progresivamente de color al pasarles el ratón por encima o simplemente efectos de cambio de color en presentaciones. Otro interesante uso de este efecto es simular la proyección de una luz de color sobre un objeto que se va acercando al foco. Veamos un ejemplo de esto. Vemos como al acercarse el avión a la luz roja del Sol. tiene un amplio marco de posibilidades de uso. Es muy usado en textos y en botones. Lo mismo hemos hecho en el centro del Sol pero con dos fases. El tintar colores supone un toque alegre y muy vistos en las presentaciones y si se usan varios efectos. . dota de un ritmo rápido a la animación. Hemos aplicado a la instancia del avión del último fotograma de su interpolación de movimiento un efecto de tinte rojo con una intensidad del 60%. éste lo ilumina con una luz roja. combinados adecuadamente. como una explosión de color que sorprenda al receptor de la película.

poniendo en el fotograma central un efecto de tinte granate del 25%. Efecto Transparencia (Alfa) . La corona solar es simplemente una interpolación de forma en cuatro fases.

hacer aparecer objetos de la nada y también hacer que se desvanezcan poco a poco.Este es probablemente el efecto más utilizado debido a la versatilidad del hecho de controlar el grado de visibilidad de los objetos. Podemos. . por ejemplo. lo más común. simular un foco apuntando a un escenario o.

G es Final del formulario Ejercicio 1: Efecto Rotación 1 Abre un documento nuevo.fla". 2 Dibuja una rueda y haz que se desplace de un lado al otro del escenario. Para ver como realizar una animación como la anterior pulsa aquí. . 3 Haz que ruede mientras hace el deplazamiento.Este ejemplo podría representar la entrada a cualquier web o portal de Internet. 4 Guárdalo como "rueda. de hecho es bastante típico. Principio del formulario Ejercicios Tema 15: Efectos sobre Animaciones Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.

Ejercicio 2: Efecto Aceleración 1 Abre el archivo "rueda. Ejercicio 3: Orientar según el Trazo 1 Abre el archivo "babosa.fla" que creamos en el tema anterior. 2 Dibuja una guía con forma de montañas para que sea recorrida por nuestra babosa. 3 Puesto que así parecerá que la babosa esté volando. Ejercicio 4: Efecto Alpha .fla" 2 Haz que vaya frenando en su movimiento hasta pararse. haz que se arrastre por el borde de la montaña.

G es . 3 Haz que el nombre vaya desapareciendo y que ANTES de que lo haga aparezca poco a poco el apellido por detrás suyo. 2 En una nueva capa escribe tu apellido. Ejercicios Tema 15: Efectos sobre Animaciones Principio del formulario Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. Si no tienes muy claro cómo realizarlo. Aquí te ayudamos .1 Escribe tu nombre.

2 Haz clic con el botón derecho sobre el primer fotograma y selecciona Crear Interpolación de Movimiento. En la ventana que aparece selecciona el valor Horario de la opción de Rotación para girar hacia la derecha y dar la sensación de avance. 3 Haz clic con el botón derecho sobre el Fotograma 1 y elige la opción del submenú Propiedades (si no está activada ya). Ejercicio 2: Efecto Aceleración . Introduce el valor 1 de número de vueltas.Final del formulario Ejercicio 1: Efecto Rotación 1 Hazlo con Archivo → Nuevo. Pulsa F6 en el fotograma 20 y pon la rueda en el otro extremo del escenario. 4 Archivo → Guardar Como.

3 Ahora haz clic con el botón derecho sobre el Fotograma 1 y elige la opción del submenú Propiedades (si no está activada ya). Dibuja con la Herramienta Lápiz un par de montículos. En la ventana de propiedades de Fotograma que aparece marca la casilla Orientar según trazado. Coloca como vimos en el tema 13 la instancia del primer y el último fotograma al principio y al final de la guía respectivamente.1 Archivo → Abrir. 2 Haz clic de nuevo con el botón derecho sobre el Fotograma 1 y elige la opción del submenú Propiedades (si no está activada ya). En la ventana que aparece selecciona el valor 100 de la opción de Aceleración (Fuera). Ejercicio 3: Orientar según el Trazo 1 Archivo → Abrir. 2 Crea una nueva capa Guía mediante el botón azul correspondiente situado bajo los nombres de las capas. .

Selecciona el objeto y conviértelo a símbolo. 3 Crea una interpolación de movimiento de 15 fotogramas para el nombre. 2 Créalo con el botón blanco situado al lado del icono de Crear Guía de Movimiento. Final del formulario Final del formulario Unidad 6. Haz clic ahora con el botón izquierdo sobre el texto (que ahora es un símbolo) y selecciona el último fotograma de la interpolación y elige del desplegable del panel Color la opción Alfa y en la casilla contigua pon el valor 0.G es . Mueve el fotograma que tiene el apellido hasta el fotograma 12 y haz lo mismo que en el caso anterior pero dándole el valor Alfa de 0 al primer fotograma en vez de al último. Trabajar con Sonidos (I) Principio del formulario Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.Ejercicio 4: Efecto Alfa 1 Utiliza la Herramienta Texto y escribe en el primer fotograma tu nombre.

efectos complejos (música de fondo) e incluso podemos hacer que la animación se desarrolle conjuntamente con una música (si bien esto último necesitaría que toda la película estuviera descargada previamente. De hecho. Hoy. poner sonido a las páginas web es un poco más fácil. Aún así. ¿qué aporta FLASH? Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav. eran sólo instrumentos musicales sin voz. . de ahí su pequeño tamaño (y calidad).mp3) en su página web. ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con nuestra película.wav o . gracias a las conexiones de banda ancha orientadas a contenido multimedia. su carga es tan lenta.aiff y . por desgracia.mp3) de forma fácil y muy efectiva. para evitar "atascos" durante el desarrollo de la . los únicos sonidos que oíamos en las páginas web eran los famosos "midis". siempre existía algún creador de páginas web que se aventuraba a poner algún sonido complejo (. que la mayoría de los visitantes se irían de la página sin llegar a escucharla. de escaso tamaño y de escasa calidad. Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón).Final del formulario Comenzando ¿Quién sería capaz de ver una película muda? ¿Y una animación espectacular sin sonido? Hasta hace poco.

no es más que decirle a Flash que añada un determinado archivo a nuestra película. Flash nos lo vuelve a poner fácil. lo añade a nuestra Biblioteca. A esto último se le llama "Importar" y se puede hacer con sonidos. no conseguirlo. e incluso con otras películas Flash. gráficos. o bien lo creamos nosotros (como llevamos haciendo hasta ahora) o bien lo conseguimos de cualquier otro modo y lo insertamos en nuestra película. Importar Sonidos Si alguna vez habeis intentado añadir un sonido a vuestra animación Flash probablemente os hayais llevado una gran decepción. . para que podamos usarlo cuando queramos. que es el Panel en el que están todos los objetos que participan en la película (este Panel se verá más adelante). Una vez esté importado. deberemos importarlo previamente. Así pues si queremos manejar un sonido en nuestra película. En realidad. Esto se debe a que no se tiene en cuenta que para poder emplear un objeto en nuestra película.animación). podremos usarlo con total libertad. Importar por tanto. En definitiva.

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

modificar y editar el sonido que acabamos de importar. Propiedades de los Sonidos En Flash 8. podrás encontrarlo en la Biblioteca (menú Ventana → Biblioteca). El sonido estará listo para usarlo donde quieras. el Panel Propiedades toma el siguiente aspecto: . Aquí tenemos todo lo necesario para insertar. al igual que en Flash 8 todo lo referente a los sonidos lo podemos editar desde el Panel Propiedades. Allí deberás seleccionar en Tipo de archivo Todos los formatos de sonido. Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu película. Para que aparezca la posibilidad de trabajar con sonidos. Si no hemos importado ningún sonido. tras hacer esto. Seleccionalo haciendo clic sobre él y haz pulsa el botón Aceptar. nos daremos cuenta de que no podemos seleccionar nada en dicho panel. basta insertarlo para que esto cambie.Se abrirá el cuadro de diálogo de Importar a biblioteca. deberemos hacer clic en algún fotograma de nuestra película.

que el volumen aumente progresivamente etc. aunque queda muy lejos de los verdaderos sonidos envolventes). deberemos tratar adecuadamente el sonido con algún programa creado específicamente para este propósito antes de importarlo.Veamos las partes que tiene este panel. estas son las opciones que tenemos: Evento: Sincroniza nuestro sonido con un evento determinado. Sonido: En esta pestaña nos aparecerán las canciones que tenemos importadas.. Efecto: Desde aquí podremos añadir algún efecto a nuestro sonido. como por ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la sensación de que el sonido te envuelve ya que lo oyes por un sitio y luego por otro. Si deseamos añadir complejos efectos sonoros.. deberemos seleccionar la canción que pretendamos añadir a nuestra película (en el siguiente punto veremos cómo insertarlo). Es la opción por defecto y provoca que el sonido . En el punto Editar Sonidos se tratará en más profundidad estos efectos. Sinc: Esta opción nos permite determinar en qué momento comenzará a actuar nuestro sonido.

lo hace "encima" del sonido actual. por ejemplo. si la carga de la película es lenta y las imágenes no fluyen adecuadamente. Flujo: Esta opción sincroniza el sonido con el o los objetos con los que esté asociado. es un efecto muy adecuado para algunas situaciones.se empiece a reproducir al pasar la película por el fotograma en el que está situado. aumentando considerablemente el tamaño de la película. Detener: Detiene el sonido seleccionado. ya que al estar sincronizados los sonidos con las imágenes. Insertar un Sonido . produce una reacción muy negativa en los que pueden estar viendo nuestra película). por tanto. o puede provocar que se forme "ruido" en nuestra película. En esta situación. el efecto de que un personaje hable durante una película. También se puede sincronizar el sonido con botones y los demás tipos de símbolos. pero si se detiene un sonido mientras se reproduce. Puede ser un efecto muy atractivo. es muy recomendable que el sonido y las imágenes estén sincronizadas. se diferencian en que si está seleccionado Inicio en vez de Evento y se reproduce otra vez el mismo sonido u otro distinto. • Inicio: Su funcionamiento es equivalente al de "Evento". También puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca en un bluce hasta llegar al siguiente fotograma clave. provocaríamos que las imágenes (y los fotogramas que las contengan) se dupliquen también. el sonido se detendrá para sincronizarse con ellas. Por otra parte. • • Repetir: Determina el número de veces que se reproducirá el sonido según lo que escribas en la caja de texto de la derecha. Este efecto puede dar la sensación de que la película se corta de un modo muy brusco (pensar en que se considera normal que una imagen tarde en cargarse. No recomendamos insertar sonidos con la opción Flujo y a la vez la de Repetir.

Para que un sonido se reproduzca al llegar a un fotograma. Depende de lo que busquemos. Una vez allí. Así representa Flash los sonidos insertados en Fotogramas De este modo insertamos un sonido. qué opciones podemos modificar y para qué sirve cada una.Ahora que ya sabemos importar un sonido.. pero ¿suena tal y cómo queremos que suene? .. cómo insertarlos en nuestra película. sino ¿para qué insertarlo entero?. Si quisiéramos que el sonido pare cuando entremos en otro fotograma. lo podemos hacer de 2 formas distintas. El sonido se . Otro modo más rápido aún consistiría en seleccionar dicho sonido en la Biblioteca y arrastrarlo al fotograma en el que queramos que se empiece a reproducir el sonido (al fotograma. Veamos lo más importante. Supongamos que queremos insertar un sonido en un fotograma determinado. ambas combinando las opciones que nos ofrece el Panel Propiedades. La primera de ellas es seleccionarlo en la Biblioteca y arrastrarlo directamente sobre el escenario. no a la línea de tiempo). de modo que cuando la película Flash llegue a este fotograma comience a reproducirse el sonido. abriremos el Panel Propiedades e importaremos el sonido que queramos del modo visto en el punto anterior. Por defecto Flash entiende que quieres reproducir el sonido en su totalidad. deberemos seleccionar el fotograma en el que queremos que empiece a reproducirse el sonido. de modo que Flash reproducirá el sonido todas las veces que le hayas indicado en Repetir y el sonido sonará aunque el fotograma en el que esté no sea el que se está ejecutando en ese instante.

Podemos seleccionar Stop para marcar un fotograma de modo que el sonido se detenga al llegar a él. . el sonido se reproducirá hasta llegar al primer fotograma que no lo contenga. Otra opción sería la de seleccionar el sonido (ya importado a nuestra biblioteca) desde el panel Propiedades del fotograma seleccionado: En la opción Sonido seleccionaríamos el audio que queremos añadir al fotograma.añadirá al fotograma en el que nos encontramos. Luego modificaríamos la opción Sinc. del siguiente modo: • • Si seleccionamos Flujo.

por lo que su potencia en este campo es limitada. Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente. verás como: Editar Sonidos Flash no fue creado como un editor de sonidos. los efectos que permite aplicar de un modo sencillo suelen ser suficientes para cualquier animación que queramos realizar. .En esta animación. Aún así. Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en el altavoz derecho para luego pasar al izquierdo. Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en el altavoz izquierdo para luego pasar al derecho. Disponemos de estos efectos: Canal Izquierdo: El sonido tan sólo se escuchará por el altavoz izquierdo. Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente. Canal Derecho: El sonido tan sólo se escuchará por el altavoz derecho.

el canal izquierdo se reproduce normalmente (pues el volumen está al máximo).Personalizado: Esta opción nos permite "editar" el sonido de un modo rápido y sencillo. Desde este editor podemos decidir qué volumen tendrá nuestro sonido y en qué altavoz. ¿Mp3 o Wav? . Entre las 2 partes hay una línea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto. La parte superior representa el canal izquierdo y la parte inferior el canal derecho. para poco a poco alcanzar el volumen normal (este efecto equivaldría a un Aumento Progresivo en el canal derecho). En el ejemplo. pero el canal derecho empieza en silencio. Esta es la apariencia del Panel Personalizar Sonido. Podemos crear los efectos anteriores ajustándolos a nuestro gusto y podemos crear efectos más complejos a nuestra medida. Las líneas grises representan el volumen del sonido y haciendo clic en ellas podemos configurar este volumen.

pero el sonido final es el mismo que el inicial).. Como ya sabemos. Esto es una aproximación. Lo normal es que el sonido que pretendamos insertar ya esté en uno de ellos. cuando queramos añadir un sonido a nuestra película.mp3 en lugar de . pero no debemos olvidar que existen multitud de programas que convierten un sonido con extensión . Ahora que ya sabemos esto.. nos falta saber si Flash comprime un archivo . Lo habitual es que los sonidos ocupen más de la mitad del espacio total y muchas veces no valdrá la pena insertarlos. si un sonido . Esta pregunta es más importante de lo que parece.. La pregunta surge en seguida ¿Cuál es mejor? .Como ya se ha comentado. Si no sabes las diferencias entre estos tipos de archivos. los sonidos . ya que este espacio es el que ocupará en nuestra película.mp3.wav más de lo que comprime el . deberemos decantarnos por uno de estos 2 formatos. ya que si decidimos que nuestra película tenga sonidos.mp3 ocupan un espacio mucho menor que los sonidos . puedes consultar nuestro tema básico . Por tanto. ya que Flash comprime todo aquello que insertamos en nuestras películas. por lo que parece recomendable insertar .wav y viceversa.wav o . por lo que no debe ser inconveniente el formato que tenga el sonido en un principio. ¿podrá Flash volver a comprimirlo? La respuesta es NO.wav. pero si el sonido resulta estar ya comprimido.wav ha sido comprimido y ahora tiene extensión . Una vez decididos a insertar el sonido.wav (10 veces menos o más).mp3 a uno .mp3. no podrá volver a comprimirlo (en realidad si que consigue comprimirlo. los sonidos que Flash 8 puede importar deben tener las extensiones . Flash comprime los sonidos que insertamos en nuestras películas.. ahora bien ¿Puede Flash comprimir un sonido ya comprimido? Es decir. la lógica nos dice que insertemos el sonido que ocupe un espacio menor en el disco duro. deberemos asumir una carga muy importante en cuanto a tamaño de la película y en consecuencia en cuanto a tiempo de descarga.

Música de Fondo Película con sonido (música) en formato . Calidad: Buena Película con sonido (voz) en formato . Tamaño Total: 9 KB. Calidad: Buena En el primer caso sería recomendable quedarse con la película más pequeña.mp3. Calidad: Buena Sonido "Voz" Película con sonido (música) en formato . la segunda película sería más apropiada. Tamaño Total: 145 KB.wav. Tamaño Total: 67KB.wav. ya que aunque tenga mayor tamaño. ya que ambos sonidos son buenos. comentar que Flash no puede importar sonidos en formato MIDI (. Por último. Calidad: Regular Película con sonido (voz) en . Aún así.mid). si estamos empeñados en que en nuestra animación el sonido sea un MIDI y no queremos o podemos conseguir un programa . Tamaño Total: 37 KB.mp3. la calidad del sonido merece la pena. En el segundo caso.

esto se tratará en el Tema 17 "Action Script". 4 Comprueba que está disponible en la Biblioteca.que convierta el sonido MIDI a WAV o MP3 existe una forma de hacerlo consistente en el uso combinado de Flash y Javascript.G es Final del formulario Ejercicio 1: Importar Sonidos 1 Crea una película con 1 fotograma. Principio del formulario Ejercicio s Tema 6: Sonidos Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. 3 Impórtalo a tu película. . Flash 8 permite cargar sonidos de un modo dinámico (sin que ocupen espacio). como se comentó en el Tema 1. Igualmente. 2 Localiza un sonido en tu disco duro.

2 Comprueba que funciona (que el sonido puede escucharse). inserta el sonido importado en el fotograma 1. .Ejercicio 2: Insertar Sonidos 1 Partiendo del ejercicio anterior. Ejercicio 4: Editar Sonidos 1 Modifica tu sonido (usando Flash) de modo que en un principio no se oiga y poco a poco vaya aumentando de volumen. Para ello. 2 Consigue que vuelva a escucharse en el fotograma 10. Ejercicio 3: Trabajar con Sonidos 1 Consigue que el sonido del ejercicio 2 deje de escucharse al llegar la película al fotograma 5. pulsa CTRL+ ENTER (Esta combinación de teclas te permite "probar" la película).

que se encuentra en el Menú Archivo. 2 Seleccionamos Importar → Importar a Biblioteca. Principio del formulario Ayuda Ejercicios Tema 6: Sonidos Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.2 Modifica tu sonido de modo que al final del mismo. 3 Se abrirá la clásica ventana de Windows para buscar un archivo. Buscamos uno archivo válido de sonido y pulsamos Abrir. Si no tienes muy claro cómo realizarlo.G es Final del formulario Ejercicio 1: Importar Sonidos 1 Creamos la película mediante Archivo → Nuevo (por defecto tendremos un único fotograma). . parezca que el sonido pasa de un altavoz al otro. Aquí te ayudamos.

Ejercicio 3: Trabajar con Sonidos 1 Alargamos el fotograma actual hasta el número 4 (insertando fotogramas normales desde el Menú Insertar → Línea de Tiempo → Fotograma). 2 Pulsamos CTRL + ENTER y el sonido deberá escucharse. . 2 Después seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el escenario (hasta el fotograma actual). revisaremos los pasos dados. Ejercicio 2: Insertar Sonidos 1 Seleccionamos el fotograma en el que queramos insertar el sonido.4 El sonido ya está insertado. pues algo no hemos hecho bien. 5 Si no se encuentra allí. Hacemos clic en el Panel Biblioteca (Ventana → Biblioteca) y comprobamos que se encuentra allí.

4 En la opción Sinc seleccionamos Flujo. 9 Debe quedar parecido al gráfico: Ejercicio 4: Editar Sonidos . En la posición 5 (desde el Menú Insertar → Línea de Tiempo → Fotograma Clave). 5 Acabamos de conseguir que el sonido sólo se reproduzca cuando esté en los fotogramas indicados. 8 Insertamos el sonido en el fotograma 10 del mismo modo que en el ejercicio 2. 6 Ahora prolongamos la duración del fotograma 5 hasta que ocupe 5 fotogramas más (insertando fotogramas normales). 7 Insertamos un nuevo Fotograma Clave en la posición 10. 3 Abrimos el Panel Propiedades y seleccionamos los fotogramas del 1 al 4.2 Insertamos un nuevo fotograma en la línea de tiempo.

Jugamos con los volúmenes de ambos canales hasta obtener el efecto deseado. Final del formulario . 3 Nos dirigimos al final del sonido y hacemos clic en el canal que queramos modificar (el izquierdo está en la parte superior y el derecho en la inferior). lo situamos en su parte más baja para quitarle el sonido y en su parte más alta para dárselo.1 Seleccionamos Aumento Progresivo dentro de la pestaña Efecto que se encuentra en el Panel Sonidos. Podemos ir probando cómo queda pulsando el PLAY que acompaña este Panel. Aparecerá un recuadro blanco. 2 Seleccionamos Personalizar dentro de la pestaña Efecto que se encuentra en el Panel Sonidos.

G es Final del formulario ¿Qué es un Clip de Película? Un Clip de Película o simplemente Clip. a su vez puede contener también películas insertadas en él.Final del formulario Principio del formulario Unidad 11. Sin embargo. los clips de película tienen su propia línea de tiempo. Clips de Película (I) Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. clip o botón. así como cualquier objeto creado con Flash. es una película en si misma. esta línea temporal no está ligada a la línea de tiempos del documento que lo contiene. . de tal forma que su ejecución es independiente. pero que está incluida dentro de otra película y. Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico. y a diferencia de los Gráficos (como veremos a continuación). ya que un clip es realmente una película. como cualquiera de las que podamos haber creado hasta el momento en este curso. Al igual que los otros tipos de símbolos de Flash.

normalmente se utilizan los clips para cualquier tipo de animación debido a su gran flexibilidad. lo podemos hacer con un Clip.Otra de las ventajas de los Clips la encontramos cuando realizamos películas de gran complejidad y tamaño. el cual puede estar compuesto por muchos frames. Comprobar las propiedades de un Clip . en la que intervienen un número muy elevado de fotogramas. y una barra de tiempos más clara y "limpia". ya que se pueden crear múltiples movimientos independientes entre sí y crear conexiones entre los diferentes Clips de un documento. Los Clips son una de las herramientas que dan mayor potencia a Flash 8. nosotros sólo veremos un fotograma por clip. además de poder realizar también todo aquello que nos permitía dicho símbolo. Por esto. debido a que en la vista general del documento. Todas aquellas cosas que no podíamos hacer con un símbolo de tipo Gráfico. lo que nos permitirá tener una mejor visión de cómo se desarrolla nuestra animación. dejando los gráficos sólo para imágenes estáticas. permitiéndonos crear películas de gran complejidad y multiplicar los efectos visuales.

tenemos dos películas.) y seleccionamos en Comportamiento "Clip de Película" Arrastramos al escenario (si no está ya allí) nuestro clip de película. vamos a ver como la línea de tiempo de un clip no está ligada a la línea de tiempo del documento que lo contiene y.Como hicimos con los gráficos. que supone una de las razones de la mayor utilización de los primeros en lo que se refiere a la creación de animaciones. a la vez. veremos la diferencia entre los clips y los símbolos Gráficos. Después importaremos una imagen cualquiera o bien crearemos una. siguiendo un proceso similar al que utilizamos con los símbolos de tipo Gráfico. insertado en nuestro nuevo documento Flash. cada una con su línea de tiempos. Ahora veamos que son independientes.. Observa la línea de tiempos de la película principal y comprueba que sólo tiene un fotograma. Es decir. Ahora tenemos nuestro Clip. Para ello abriremos una nueva película Flash (Archivo → Nuevo).. La convertimos en Símbolo (Insertar → Nuevo Símbolo. .

si bien vamos a crear una Animación de Movimiento (que se verá en el Tema 13).Editemos el Clip que insertamos en el documento (doble clic sobre el avión) y examinemos su línea de tiempos. Aparecerá un único movieclip. Podemos realizar algo similar a lo realizado con los gráficos. Nos quedará así : .

ya que a diferencia de los gráficos. En este caso sí que vemos la animación porque en el momento en que el reproductor ha pasado por el fotograma que contenía el clip.Como vemos. Si el pez fuera un gráfico ya hemos visto que si intentáramos reproducir la película no ocurriría nada. (Control + Intro). Crear un nuevo Clip Como hemos comentado. en este caso un clip. la duración del clip que hemos insertado es mucho mayor que la película nueva que lo contiene. en ocasiones se les asignan acciones especiales en las cuales. Por esto. se puede crear un símbolo Flash de la nada. en animaciones complejas. y lo continuará haciendo hasta que acabe su línea temporal propia. utilizaremos normalmente Clips para hacer animaciones. Veamos qué sucede siendo en este caso un Clip (esto también es válido si la animación se ha creado del modo visto con los gráficos). éste ha empezado a reproducirse y. puesto que su línea de tiempos es independiente. ha seguido reproduciéndose a pesar de que la línea de tiempos principal haya terminado. Para insertar un clip vacío haz clic en Insertar → Nuevo símbolo y se abrirá el cuadro de diálogo de Crear un . su finalidad suele ser el movimiento y. de forma que se quede en la biblioteca y podamos editarlo cuando nos convenga. Aunque no lo hayamos comentado antes. Esto puede ser interesante en los clips. bien conviene dejar el clip vacío. de la nada para después modificarlo. bien no es necesario crearlo en ese momento. es interesante aprender cómo crear un símbolo.

Allí deberás darle un Nombre para identificarlo más tarde en la Biblioteca y seleccionar la opción Clip de Película en el marco Tipo. Importar y Exportar Movie Clips de Biblioteca .nuevo símbolo. A partir de este momento tendremos un nuevo clip (vacío) al cual podremos acceder desde nuestra Biblioteca (menú Ventana → Biblioteca). podremos editarlo y trabajar con él. Observa cómo hacerlo Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips de película y veremos el potencial real de este tipo de símbolos. si hacemos clic derecho sobre él y seleccionamos Edición.

lo que. Esto es muy importante en muchos casos ya que habitualmente los clips son muy reutilizables. en el caso que nos ocupa. Hemos visto en el tema de Símbolos.Como para todos los símbolos los Clips se almacenan en la biblioteca del documento cuando son creados. puede resultar de gran utilidad. Para importar clips de película debemos abrir primero la biblioteca en la que está contenido. Obviamente la exportación mediante biblioteca se hace automáticamente ya que Flash deja los objetos creados en la biblioteca para que puedan ser reutilizados. dos tipos de bibliotecas: las que están asociadas a documentos u otras películas y las que nos proporciona Flash 8. Pues bien. no sólo podemos utilizar símbolos del mismo documento en el que estamos sino que podemos Importarlos de otros documentos de nuestro disco duro. Para importar un Clip de un archivo .

. seleccionar el Archivo Flash (. Es importante destacar que cuando insertemos un clip de una biblioteca.fla) del que queremos importar sus símbolos de biblioteca y pulsar Abrir.. botones y clips del documento en cuestión. Aparecerá la biblioteca con la lista de los símbolos correspondientes a los gráficos. A continuación mostramos un ejemplo en el que veremos cómo importar clips de esta forma además de comprobar las propiedades de los clips y sus líneas de tiempo independientes mediante la reproducción simultánea de dos películas.del disco duro debemos ir al menú Archivo → Importar → Abrir biblioteca externa. se insertarán a su vez todos los símbolos que contenga.. incluidos los clips. . creando un efecto bastante vistoso utilizando "aparentemente" un sólo frame.

revisa nuestro tema avanzado: Otros usos de los Movie Clips Principio del formulario Ejercicios Tema 11: Clips de Película Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.Ver ejemplo animado: Y el resultado del proceso anterior es el siguiente: Para ver cómo exportar e importar una película completa como un sólo movie clip y poder usar esto para el desarrollo en programas como Swish.G es Final del formulario .

Ejercicio 1: Crear un Clip a modo de Cuenta Atrás

1 Crea una película con sólo 1 fotograma. 2 Escribe un número cualquiera, por ejemplo un 3. 3 Conviértelo a símbolo de tipo Clip. 4 Crea una animación fotograma a fotograma en la que se vea una cuenta atrás hasta el cero. 5 Comprueba que pese a tener la película original un frame y el clip cinco, la animación se ve completamente. 6 Guárdalo como cuenta.fla

Ejercicio 2: Crear un clip vacío y editarlo después

1 Crea una nueva película. 2 Crea un nuevo símbolo de tipo Movie Clip vacío. 3 Sal a la línea de tiempos principal.

4 Vuelve a editar el símbolo.

Ejercicio 3: Exportar una película con protección

1 Partimos del Clip del ejercicio 1, ábrelo. 2 Exporta la película swf de forma que nadie la pueda importar después.

Si no tienes muy claro cómo realizarlo, Aquí te ayudamos . Ejercicios Tema 11: Clips Principio del formulario

Búsqueda

pub-1875034419

1

ISO-8859-1

ISO-8859-1

GALT:#008000;G

es

de Película Final del formulario

Ejercicio 1: Crear un Clip a modo de Cuenta Atrás

1 Crea una película con 1 fotograma con Archivo → Nuevo 2 Mediante la Herramienta Texto marcada en la barra de herramientas con una A escribe el 3. 3 Accede a Insertar → Nuevo Símbolo... o bien pulsa F8. 4 Pulsa F6 para crear tres fotogramas claves en los fotogramas 2, 3 y 4. Luego borra el 3 que aparecerá en ellos y escribe un 2, un 1 y un 0 en su lugar. 5 Puedes reproducir la película con Control + Enter. 6 Menú Archivo → Guardar Como...

Ejercicio 2: Crear un clip vacío y editarlo después

1 Archivo → Nuevo 2 Accede a Insertar → Nuevo Símbolo o bien pulsa Control + F8 3 Pulsa en el icono de la escena principal, en este caso será Escena 1, que está encima de la línea de tiempos. 4 Abre la Biblioteca del documento mediante Ventana → Biblioteca, pulsa con el botón derecho sobre el nombre del clip y selecciona la opción Editar del menú emergente

Ejercicio 3: Exportar una película con protección

1 Abre mediante Archivo → Nuevo 2 Exporta con Archivo → Exportar → Exportar Película, selecciona el tipo de archivo SWF y dale un nombre. En la ventana que aparece marca la opción Proteger frente a Importación, y en el campo Contraseña escribe la clave que quieras.

Final del formulario Final del formulario Principio del formulario

Unidad

La herramienta Pincel gasta más memoria que el resto de herramientas de dibujo. por lo que debemos evitar su uso excesivo. en la medida de lo posible. debemos tener en cuenta los siguientes aspectos: CONSIDERACIONES EN EL DIBUJO: Aunque los degradados queden muy vistosos. . donde el tamaño de descarga es de vital importancia. por lo que deberíamos elegir estas últimas en la medida de lo posible. sobretodo si la vamos a publicar en una página web. Dibujar las curvas con el menor número de nodos posible.. de puntos .G Final del formulario Consideraciones sobre el tamaño de las películas Antes de aventurarnos a publicar nuestra película para que otros la vean.16. Por tanto evitemos las líneas discontinuas. Hemos visto que la animación de líneas es bastante útil. Genera r y Publicar Películas (I) Búsqueda es pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000. Sin embargo el uso de líneas que no sean las definidas por defecto y que usamos en el capítulo que hemos comentado. hará que el tamaño de la descarga aumente. también requieren más memoria..

Evitar el uso de la interpolación por forma para animaciones de cambio de color. Ya hemos comentado el mayor tamaño de los mapas de bits.CONSIDERACIONES EN LA ORGANIZACIÓN: Agrupar los objetos que estén relacionados. que cuando abrimos el menú de tipos de letras. con el comando Modificar → Agrupar. Están colocadas ahí para resaltar que estas fuentes ocupan un mínimo de memoria. cuando manejábamos textos. cuando sea posible. "_serif" y "_typewriter". Esto no es una casualidad. CONSIDERACIONES EN LA ANIMACIÓN: Utilizar lo más que podamos las interpolaciones de movimiento y las guías para reducir el número de fotogramas clave y el tamaño de la película. por lo que se recomienda su uso. Independientemente de la optimización que hagamos. Si hemos creado un objeto que va a aparecer varias veces. CONSIDERACIONES EN LOS TEXTOS: Hemos podido observar. deberíamos convertirlo a símbolo. hará referencia a una única posición de memoria. lo que hace que debamos minimizar el número de apariciones de éstos en nuestra película. las tres primeras son siempre "_sans". Flash lo colocará en la biblioteca y cada vez que quiera mostrarlo. a veces no se puede evitar que el tamaño de la película aumente. . Es recomendable entonces hacer un preloader (precarga) cuando la película que queramos publicar sea de tamaño superior a unos 80KB. ya que como hemos visto.

los preloaders se hacen vistosos para que el observador no se aburra y deje de lado la opción de visitar nuestra web. mientras esta se está reproduciendo. aparecerá en nuestro directorio un archivo de texto donde se explica con detalle el tamaño de nuestra película. Se pueden complicar mucho más. y marcar la casilla Generar Informe de Tamaño. Si pulsamos el botón Publicar.Preloader. . Normalmente. Cargar la Película entera antes de reproducirla Un preloader se usa principalmente para evitar la carga parcial de la película. pero nosotros haremos uno sencillo que nos sirva para entender bien el concepto. Si queremos saber su tamaño podemos ir a Archivo → Configuración de publicación seleccionar la pestaña Flash. mucho más grande. y la manera de hacerlo. en ocasiones en las que la película es de un tamaño considerable. lo que. Suelen llevar alguna animación sencilla que se va reproduciendo mientras se está cargando simultáneamente la película principal. Partimos de que ya tenemos nuestra película terminada. hace que la película se vea entrecortada.

Sería algo como "Cuando el número de fotogramas cargados sea mayor o igual al número de fotogramas totales. Para ello abrimos el panel de Acciones.Ahora insertaremos una nueva escena (Insertar → Escena). En nuestro caso queremos ir al fotograma 1 de la escena "Pelicula". y en la ventana que aparece arrastramos la escena que acabamos de crear hasta que esté la primera. entonces comenzamos a reproducir la película" (aunque sea teóricamente imposible que el número de fotogramas cargados sea mayor que el de fotogramas totales. En la capa "Acción" diseñaremos el "corazón" del preloader. nunca está de más incluir esta condición por si acaso Flash contabiliza internamente los fotogramas de un modo diferente). hasta que se haya cargado la escena que contiene la película principal. siempre que no sea muy compleja. que repetirá el bucle que muestra la animación "cargando") cuando aún no se haya cargado la película por completo. Para asegurarnos de ello accedemos a Ventana → Otros Paneles → Escena. puedes aplicarle la animación que prefieras. Deberá ser la primera que se ejecute.. Vamos a seleccionar el último fotograma e introducimos la acción gotoAndPlay. que por defecto nos escribirá "gotoAndPlay()" y nos situará el cursor en el interior del paréntesis para que introduzcamos la escena y el fotograma al que se deberá ir al ejecutar dicha acción. Vamos a hacer que la animación de nuestra escena de carga se ejecute repetidas veces. En nuestro ejemplo le hemos llamado "Preloader" y hemos supuesto que la Escena con la película se llama "Pelicula" (lógicamente).. Ahora seleccionamos el penúltimo fotograma.". elegimos la acción _framesloaded (fotogramas cargados) y la acción _totalframes (fotogramas totales) e indicamos en el panel acciones lo que queremos hacer. mediante las acciones ActionScript 2 de Flash 8. que es el que impedirá que se llegue al último (o sea. 1). En la escena recién creada insertaremos otra capa. Por ejemplo. Para hacer esto. En la capa "Cargando" crearemos una animación sencilla. "Acción" y "Cargando". Podríamos escribir algo como lo que muestra la imagen: . de manera que nos queden dos capas a las que llamaremos. hagámosle honor al título y escribamos "Cargando . Deberá quedar algo similar a lo que muestra la imagen. con lo que escribiremos lo siguiente: gotoAndPlay("Pelicula".

En ese momento. iremos comprobando periódicamente si la película principal está cargada por completo. hacemos que aparezca en la pantalla el texto "cargando" y mientras se reproduce su animación. que contiene la acción que nos llevará a reproducir la película. dejaremos que la animación del preloader llegue a su último fotograma. Distribución como archivo swf en un reproductor autónomo .Con esto. con lo que los visitantes ya no huirán de nuestra web. Y esto es todo lo que hay que hacer para crear un preloader (aunque por supuesto se puede hacer más sofisticado). si no lo está seguiremos mostrando el texto "cargando" hasta que la comprobación que hacemos en el último fotograma nos indique que nuestra película se ha cargado.

Así.Para poder distribuir películas creadas en Flash que la gente pueda ver. debemos seleccionar aquí la versión deseada. Flash nos ofrece varias opciones y funcionalidades para la creación de un archivo SWF. al que podemos acceder mediante el menú Archivo → Configuración de Publicación (Pestaña Flash). Este comando es importante debido a la propiedad de Flash de ir reproduciendo la película conforme los objetos son cargados. Por el contrario. si seleccionamos De arriba a abajo se cargará primero el contenido de la capa superior (de la última capa que tengamos en el documento hasta la capa 1). Orden de Carga: Aquí indicamos el orden en que queremos que se cargue el documento. Si seleccionamos De abajo a arriba se cargará primero el contenido de la capa inferior (de la capa 1 hasta la última capa que tengamos en el documento). Veamos cuáles son estas opciones: Versión: Si queremos publicar nuestra película para que sea vista con versiones anteriores de Flash. en caso de que nos interese . son necesarias dos cosas: crear un archivo SWF y que el que la quiera visualizar tenga instalado el Reproductor de Flash. Estas opciones se pueden ver en el panel de Configuración de Publicación.

Si activamos esta señal. Depuración Permitida: Permite que se pueda depurar el archivo SWF. Comprimir película: Comprime la película al máximo posible. Establecer Flujo de Audio o Evento de Audio: Esta opción nos permite acceder al Panel "Configuración de Sonido" desde donde podemos configurar. Suplantar configuración de sonido: Con esto se suplantarán los niveles de compresión seleccionados para cada archivo de sonido de nuestro documento. pero también su calidad será menor. Genera r y Publicar es Películas (II) Final del formulario . Calidad JPEG: Si en el panel de propiedades del mapa de bits no hemos indicado una compresión concreta. sus características. También exige la introducción de una contraseña ya que se debe tener permiso del creador para Importar el archivo y depurarlo. Principio del formulario Unidad Búsqueda pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.G 16. También se consideran trazas los comentarios que insertemos en el código Action Script. A mayor compresión. Es recomendable cuando se publique la película de un modo definitivo. aquí podremos determinar su grado de compresión. la película creada no los incluirá.Omitir acciones de Trazado: Las acciones de traza se emplean para comprobar el correcto funcionamiento de la película durante la creación de esta (durante las pruebas). que determinará a su vez el espacio ocupado en memoria por este tipo de imágenes. menos espacio en memoria ocupará la imagen. para cada tipo de sonidos. ocupará menos tamaño y ahorraremos tiempo innecesario.

. Las opciones de este tipo de publicación están en Archivo → Configuración de Publicación. . ya que normalmente las películas de Flash están orientadas a la publicación vía Web. Para publicar una película Flash en Internet de manera que forme parte de una página web deberemos insertarla en un archivo típico de páginas web cuyo lenguaje de programación sea del estilo del HTML. Para ello debemos atender a las opciones de publicación HTML que nos ofrece Flash. (Pestaña HTML). y que nos ayudarán a que nuestra película se visualice como realmente queremos..Distribución para Páginas Web Esta es una parte importante.

hay que escribir una serie de códigos de programa algo complejos y laboriosos de hacer a mano. Mapa de Imágenes: Si hemos incluido una Image Map (imágenes completas que ejecutan distintas acciones según la coordenada que se pulse) debemos activar esta opción. los codigos también serán muchos y distintos. Pocket PC 2003: Especialmente diseñado para Pocket Internet Explorer en Pocket PC 2003. Estas son las plantillas más comunes: Sólo Flash: Esta es la opción predeterminada y utiliza el reproductor Flash 8. Para facilitarnos esta tarea Flash hace esto automáticamente pero. por esto Flash incluye Plantillas. puesto que cada web es distinta y nuestras necesidades van a ser muy distintas.Plantilla: Para incrustar una película Flash en un documento HTML. que crean este código automáticamente según el tipo de publicación que deseemos: En el botón Información que está a la derecha de la pestaña "Plantilla" se nos muestra información muy útil sobre cada tipo de plantilla. . Flash con FSCommand: Imprescindible cuando se usen FSCommands. QuickTime: Permite incluir una película QuickTime.

Baja Automática: El reproductor detecta si la máquina soporta en cada instante un ligero suavizado. incluidos los mapas de bits en cualquier caso. Si no cabe se cortan los extremos. Alineación HTML: Posición relativa de la película dentro de la página web HTML. También se recortan los bordes si no cabe. pero si hay alguna limitación. los mapas de bits se suavizan sólo si no hay animación. El tiempo de reproducción es el de máxima velocidad.Calidad: Aquí podemos modificar la calidad de visualización de la película. No suaviza los bitmaps. Da preferencia a la buena visualización. que depende del suavizado de la imagen y el tiempo de reproducción. El tiempo sigue siendo muy rápido. Transparente sin Ventanas: Es el opuesto al anterior. Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrás de la película no se vean (en páginas DHTML). Total preferencia de la apariencia frente a la velocidad. Izquierda: Alineación a la izquierda. lo aplica. . Permite que los objetos situados detrás se vean. Óptima: Se suaviza todo. Tenemos varias opciones: Predeterminada: Centra la película en la página. Alta: Usa siempre el suavizado. Media: Valores intermedios de velocidad y suavizado. Alta Automática: Pone al mismo nivel el tiempo y el suavizado. Modo de Ventana: Opciones para la reproducción dentro de las ventanas de Windows: Ventana: Se reproduce la película en la ventana de la web en la que está insertada. Las opciones son: Baja No hay suavizado. siempre dará preferencia a la velocidad. si lo soporta.

Mostrar Mensajes de advertencia: Permite que se muestren los posibles mensajes de error de código Action Script. Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la película ocupe el rectángulo completo. Alineación Vertical: Podemos escoger entre Centro. Alineación Flash: Se hace necesario alinear la película cuando esta no tiene las mismas dimensiones que el rectángulo definido. Superior o Inferior. podemos decirle a Flash cómo distribuir la película en el rectángulo que hemos decidido que la contenga: Predeterminada: Se ve toda la película guardando las proporciones originales. Inferior: Alineación en el borde inferior de la página. Las opciones son: Alineación Horizontal: Podemos escoger entre Centro. Superior: Alineación en el borde superior de la página. Izquierda o Derecha. Sin Borde: Recorta (en caso de que la película sea más grande que el rectángulo) todo lo que sobre con el fin de mantener las proporciones.Derecha: Alineación a la derecha. Final del formulario . Escala: Si hemos especificado el tamaño en píxeles o en tanto por ciento. Aquí podemos ver un ejemplo de publicación de una película Flash para la Web.

Principio del formulario Unidad 22. . Utilizaremos el siguiente ejemplo para documentar algunos de los pasos que deberemos realizar.G Final del formulario Introducción Con Flash cada vez es más fácil añadir vídeos a nuestras presentaciones o webs. A continuación explicaremos cómo hacerlo y cuales son las mejores alternativas. Víde o (I). En particular Flash 8 incorpora una serie de características que facilitan la tarea al máximo y permiten el uso de vídeos como si se tratase de cualquier otro objeto en pantalla. Búsqueda es pub-1875034419 1 ISO-8859-1 ISO-8859-1 GALT:#008000.

Se abrirá una pantalla como esta: . además de crear archivos de vídeo de buena calidad muy comprimidos. mov.Importando Vídeos Lo primero que deberemos hacer es transformar nuestro vídeo de formato avi. Este formato.flv que crearemos. wmv o dv al formato que utiliza Flash: flv. te permitirá introducir puntos de referencia desde donde controlaremos la interacción del entorno de la película con el vídeo. mpeg. Haz clic en Archivo → Importar → Importar vídeo para empezar a configurar el archivo .

.

que previamente habrá sido preparado para poder utilizarlo en Flash. En este caso deberás introducir la URL del archivo. La siguiente pantalla te permitirá seleccionar el modo en el que se implementará el vídeo: . También es posible marcar la opción Ya se ha implementado en un servidor Web. Haz clic en el botón Examinar y búscalo en tus carpetas.Aquí deberás seleccionar el archivo que quieres importar para utilizarlo en tu película. Flash Vídeo Streaming Service o Flash Communication Server. Cuando lo hayas encontrado pulsa el botón Aceptar y estarás listo para seguir pulsando el botón Siguiente.

.

a pesar de no ser la más aconsejada para conexiones de baja velocidad (sobre todo para archivos muy grandes) es la más utilizada por aquellos que no disponen de los recursos necesarios para contratar los servicios de un servidor de vídeo en formato Stream. La opción Descarga progresiva. Así que seleccionaremos la primera opción y pulsaremos Siguiente. .Puedes elegir entre varias opciones. Te adelantamos que para la implementación de vídeo para Streaming deberás disponer de un servidor (de pago) que transmita tu vídeo al usuario de una forma óptima. si seleccionas cualquiera de ellas verás su descripción en la derecha de la pantalla.

.

. Verás 3 pestañas. Antes que nada pulsa el botón Mostrar configuración avanzada. La primera te servirá para ajustar la compresión y calidad del vídeo. Desde aquí podremos configurar puntos en nuestra película. Puedes seleccionarla directamente en el desplegable de arriba del todo o cambiar alguna de las opciones que te aparecen en la pestaña Codificación.Ahora es cuando realmente configuraremos el archivo de salida. Nosotros haremos hincapié en la pestaña Puntos de referencia.

Creando puntos de Navegación podremos referenciarnos más tarde a ellos para saltar en la película. En el ejemplo hemos creado los siguientes puntos de referencia: . Sería algo así como crear capítulos sobre los que podremos navegar utilizando botones y ActionScript.Existen dos tipos de puntos de referencia diferentes: el de Navegación y el de Evento. Estos puntos nos permitirán pasar parámetros que podremos recuperar mediante ActionScript. El punto de Referencia de Evento nos permitirá crear interacciones con el resto de objetos en la película.

Desde la pestaña Recortar y Ajustar podrás modificar el tamaño del vídeo y su duración. Luego hemos añadido 4 puntos de Evento desde los que pasaremos un parámetro que hará que se muestre determinado fotograma de un clip que se encontrará en el Escenario. a los cuales acudiremos pulsando los botones para saltar entre los capítulos de la película. Puedes realizar el ejercicio paso a paso de Puntos de Referencia para ver cómo lo hacerlo. Cuando hayas terminado pulsa el botón Siguiente. .Como ves hay 3 de Navegación.

.

Indican si el vídeo debe reproducirse nada más abrir el archivo o esperar a una orden para empezar a reproducirse. Indica si el vídeo deberá volver a la posición inicial despés de haberse reproducido completamente. Allí encontrarás las siguientes opciones: • • • • • autoPlay: puede tomar los valores true o false. Cuando haya terminado lo añadirá directamente sobre el Escenario.Player 8. bufferTime: especifica el número de segundos que se almacenarán en la memoria antes de que se inicie la reproducción del vídeo. autoSize: puede tomar los valores true o false. autoRewind: puede tomar los valores true o false. Arrastra un componente FLVPlayBack al Escenario. elige uno o selecciona Ninguno para crear tú mismo los controles (como veremos a continuación) y pulsa el botón Siguiente. contentPath: indica la ruta del archivo que se deberá reproducir. Abre el Panel Componentes desde Ventana → Componentes y haz clic sobre FLV Playback .Desde aquí podrás seleccionar un estilo de controles predeterminado. o por el contrario deberá ser el vídeo el que se ajuste al tamaño del control. Desde el Panel Parámetros podrás configurarlo. sólo deberás insertar en el escenario un componente que incorpora Flash para la reproducción de éste. . Indica si el control deberá ajustarse al tamaño del vídeo. El Componente FLVPlayback Si ya tuvieses el archivo importado a flv no haría falta que realizases las acciones anteriores. El sistema te avisará de que el vídeo está debidamente configurado y pasará a importarlo.

skin: desde aquí puedes modificar la apariencia de los controles de la película y seleccionar uno entre los predefinidos. Este campo se utilizará para la transmisión de vídeo en vivo y sólo podrá utilizarse a través de un servidor de Streaming. sólo deberás arrastrarlos desde el Panel Componentes al Escenario y escribir unas pocas líneas en el Panel Acciones. • • . isLive: puede tomar los valores true o false. BufferingBar: muestra el progreso de descarga del vídeo.• • • • • • cuePoints: indica los puntos de referencia que están incluidos en la película. Una vez insertada la película mediante la adición de este componente o por importación deberemos darle un nombre de instancia para poder referirnos a él. • BackButton: retrocede el flujo del vídeo al punto de referencia inmediatamente anterior o en su defecto al inicio de éste. skinAutoHide: puede tomar los valores true o false. Indicará si los controles se pueden esconder para volver a aprecer cuando el cursor se sitúe sobre la película. totalTime: indica el tiempo total del vídeo. Indica el volumen máximo del vídeo. Para añadir estos componentes haz clic en el elemento FLV Playback Custom UI y arrastra el que tu quieras al Escenario. Una vez importada la película a formato flv no pueden ser modificados. ForwardButton: avanza el flujo del vídeo al punto de referencia inmediatamente posterior o en su defecto al final de éste. volume: de 0 a 100. veamos cuales son sus funciones. Uso de Componentes para la Reproducción Usar componentes para controlar la película es muy sencillo. Hazlo desde este mismo panel o desde el Panel Propiedades.

volume = 0. SeekBar: desde esta barra avanzar y retroceder manualmente por la línea de flujo de la película. PlayPauseButton: una mezcla de los dos anteriores.playButton = miBotonPlay. Actuaría de forma similar a la línea: miVideo. es capaz de pausar y reanudar la reproducción desde un mismo control.pauseButton = miBotonPausa. • • • • • • PauseButton: pausa la película en el momento en el que se pulse el botón.• MuteButton: establece el volumen de la película directamente a 0. StopButton: detiene la reproducción y posiciona el cabezal de reproducción al principio del vídeo. miVideo. . PlayButton: reaunda (o comienza) la reproducción a partir de donde se encuentre el cabezal de reproducción de vídeo. VolumeBar: permite el aumento o disminución del volumen del vídeo mediante una barra de volumen. Una vez añadidos los componentes necesarios al Escenario tendrás que darle un nombrede instancia y luego escribir lo siguiente (dependiendo de los controles que hayas arrastrado) en el Panel Acciones del fotograma 1: miVideo.playPauseButton = miBotonPausaPlay. miVideo.

stopButton = miBotonStop. miVideo. ¿verdad? Puedes modificar los componentes que añadas al Escenario haciendo doble clic sobre ellos y cambiando su forma.seekBar = miBarraDeslizadora.forwardButton = miBotonAdelante. miVideo. miVideo. miVideo.bufferinBar = miBarraProgreso.backButton = miBotonAtras. tamaño o color.miVideo. mVideo. El componente se asociará al vídeo y funcionará por sí solo. Fácil.volumeBar = miBarraVolumen.muteButton = miBotonSilencio. Crear Controles Propios . miVideo.

miVideo.play(). Un ejemplo de cómo crear un botón de Play/Pause sería asociando el código siguiente a un botón: on (release) { if (miVideo. Esta línea colocará la cabeza lectora en el segundo 5 y reproducirá a partir de ahí. miVideo. miVideo.seek(5). • seek(segundo:Number): permite el avance o retroceso de la película de vídeo.state == miVideo. • volume: define el volumen del vídeo. • stop(): detiene el vídeo y vuelve al inicio. • play(): reproduce el vídeo. Puedes introducir un valor entre 0 y 100. miVideo. miVideo.PAUSED) { .stop().volume = 50.pause().Crear controles propios no es muy complicado en Flash 8. Sólo tienes que crear los botones que consideres necesarios y utilizar las propiedades del componente FLVPlayback. • pause(): detiene el vídeo conservando su posición actual.

miVideo.REWINDING: el vídeo está en estdo de rebobinado.BUFFERING: el vídeo todavía se está almacenando en el buffer. miVideo.CONNECTION_ERROR: se ha producido un error de conexión y el vídeo no podrá visualizarse. .pause().miVideo.PLAYING: el vídeo se está reproduciendo.SEEKING: el vídeo está en estado de búsqueda. miVideo. miVideo. } } La propiedad state devuelve el estado en el que se encuentra nuestro vídeo en el momento. } else { miVideo.STOPPED: el vídeo se encuentra detenido. miVideo. puede tomar los siguientes valores: • • • • • • • • • miVideo.DISCONNECTED: el vídeo está en estado de desconexión. miVideo.PAUSED: el vídeo se encuentra pausado. miVideo. miVideo. Este estado se producirá hasta que se le asigne una ruta a la propiedad contentPath.play().LOADING: el vídeo está en estado de carga.

También puedes utilizar las funciones seekToNextNavCuePoint() y seekToPrevNavCuePoint() para avanzar y retroceder. podíamos crear puntos de referencia de Eventos para pasar parámetros a nuestra película desde la reproducción del vídeo. luego tendremos que decirle que reanude la reproducción. miVideo. } Este trozo de código utiliza la función seekToNavCuePoint para buscar el punto de referencia que se le indique. por los diferentes puntos de referencia de navegación creados.play(). El código asociado al botón sería el siguiente: on (release) { miVideo. Interacción de Vídeo y Elementos Externos Como vimos antes.seekToNextNavCuePoint(). . respectivamente.seekToPrevNavCuePoint(). carrera1 y carrera2.seekToNavCuePoint("inicio"). miVideo. En el ejemplo hemos creado 3 botones que deberán saltar a los tres puntos diferentes que hemos creado: inicio. miVideo.Ahora veremos como interactuar con los puntos de referencia que hayamos creado.

eventosVideo. De esta forma cuando se encuentre con un punto de referencia evaluará si tiene parámetros con la propiedad: puntoRef.info.name).parameters. Ejercicio 1: Mi Vídeo . el clip y el vídeo.Su uso no es muy complicado.cuePoint = function(puntoRef:Object):Void { if (puntoRef.length Si es así. eventosVideo). Cuando se van produciendo determinados eventos en el vídeo vamos moviendo el cabezal de reproducción de dicho clip y así creamos una vinculación entre ambos.length > 0) { mensaje. sacamos la información del parámetro llamándolo por su nombre y actuamos en consecuencia.info. Si escribieses lo siguiente te devolvería al Panel Salida el nombre del punto de referencia.addEventListener("cuePoint".gotoAndPlay(puntoRef.parameters. En el ejemplo hemos creado un clip de película que se llama mensaje.info.info. trace(puntoRef. deberemos crear un escuchador que esté pendiente de los puntos de referencia que se vayan reproduciendo en el vídeo de la siguiente forma: var eventosVideo:Object = new Object().parameters["fotograma"]). } } miVideo.

Deberás reproducir la siguiente película Flash:

Utiliza el archivo fuente video.fla que encontraras en la carpeta ejercicios/video del curso. Tu tarea consistirá en importar el video video.mov que encontrarás en la misma carpeta y crear 6 puntos de navegación, en los segundos 0, 10, 20, 30, 40 y 50.

Luego deberás añadirle funcionalidad a los botones mediante ActionScript. Si no tienes muy claro cómo realizarlo, Aquí te ayudamos. Ejercicio 1: Mi Vídeo
1. Abre el programa Flash 8. 2. Crea un nuevo documento haciendo clic en Archivo → Nuevo. 3. Selecciona Documento de Flash en el diálogo que se abrirá y pulsa Aceptar. 4. Se abrirá un documento en blanco. Lo guardaremos para darle un nombre y poder guardar nuestros progresos de

vez en cuando. Para ello haz clic en Archivo → Guardar. Dale un nombre, selecciona una carpeta y pulsa Guardar. Ahora podrás guardar el documento siempre que quieras pulsando Ctrl + G o haciendo clic en Archivo → Guardar.
5. Haz clic en Archivo → Importar → Importar Vídeo para comenzar la importación . 6. Pulsa el botón Examinar en la ventana que se abrirá y busca el archivo video.mov, haz clic en Abrir cuando lo

encuentres.
7. Pulsa Siguiente. 8. Vuelve a hacer clic en Siguiente. 9. Haz clic en Mostrar configuración Avanzada.

10. Pulsa el botón

para añadir un punto de referencia, llámalo 1 y dale el tipo Navegación .

11. Sitúa el cabezal de reproducción el el segundo 10 y pulsa el botón

, llama al punto de referencia 2 y dale el

tipo Navegación.

12. Sitúa el cabezal de reproducción el el segundo 20 y pulsa el botón

, llama al punto de referencia 3 y dale el

tipo Navegación.

13. Sitúa el cabezal de reproducción el el segundo 30 y pulsa el botón

, llama al punto de referencia 4 y dale el

tipo Navegación.

14. Sitúa el cabezal de reproducción el el segundo 40 y pulsa el botón

, llama al punto de referencia 5 y dale el

tipo Navegación.

15. Sitúa el cabezal de reproducción el el segundo 50 y pulsa el botón

, llama al punto de referencia 6 y dale el

tipo Navegación.

16. Pulsa Siguiente. 17. Selecciona Ninguno en el desplegable Aspecto y pulsa Siguiente. 18. Haz clic en Finalizar y el vídeo comenzará a importarse. 19. Una vez importado se añadirá al Escenario. Borrarlo, pues ya tenemos una instancia de FLVPlayback en el

Escenario. Para ello, selecciónalo y pulsa la tecla Suprimir. Parámetros.

20. Selecciona el componente FLVPlayback que había en el Escenario y accede a sus propiedades en el Panel

21. Busca la propiedad contentPath y haz clic sobre ella para introducir un valor. 22. Busca el archivo que se ha creado (video.flv) y selecciónalo.

Ya hemos asociado el video al componente. Observa que su nombre de instancia es miVideo Ahora pasaremos a darle funcionalidad a los botones.

23. Selecciona el botón de Retroceso Rápido y escribe lo siguiente en el Panel Acciones:

24.on (press) { 25. 26. miVideo.seekToPrevNavCuePoint(); miVideo.play(); }
27. Selecciona el botón de Stop y escribe lo siguiente en el Panel Acciones:

28.on (release) { 29. miVideo.stop(); }
30. Selecciona el botón de Reproducción y escribe lo siguiente en el Panel Acciones:

31.on (release) { 32. miVideo.play(); }
33. Selecciona el botón de Pausa y escribe lo siguiente en el Panel Acciones:

on (press) { 38. miVideo.seekToNextNavCuePoint(). miVideo. Selecciona el botón de Avance Rápido y escribe lo siguiente en el Panel Acciones: 37. } 36.volume < 100) { miVideo. Selecciona el botón de Volumen Menos y escribe lo siguiente en el Panel Acciones: 46. } 40. miVideo.play(). if (miVideo.on (release) { 35.volume = miVideo.on (release) { 47. 43.volume > 0) { .on (release) { 42.34. 39.pause(). Selecciona el botón de Volumen Más y escribe lo siguiente en el Panel Acciones: 41. } } 44.volume + 10. 45. if (miVideo.

volume = miVideo. Final del formulario .10. miVideo.48.volume .

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->