Manual de Flash

Universidad Politécnica de San Luís Potosí

MANUAL DE FLASH

TABLA DE CONTENIDO

TEMA 1: ¿Qué es Flash?_________________________________________________6

TEMA 2: La interfaz de Flash MX__________________________________________7

La Barra de Menús_____________________________________________________________9

La Línea de Tiempo, Capas y los Fotogramas______________________________________10

El Área de Trabajo____________________________________________________________13

Las Vistas____________________________________________________________________14

Paneles_______________________________________________________________________14

Barra de Herramientas_________________________________________________________20Sección de Herramientas_______________________________________________________________21Sección de Ver_______________________________________________________________________22Sección de Colores___________________________________________________________________23Sección de Opciones__________________________________________________________________23

Cuadrícula, guías y reglas_______________________________________________________25Cuadrícula__________________________________________________________________________26Guías______________________________________________________________________________26Reglas_____________________________________________________________________________26

Partes de un Objeto____________________________________________________________27Formas de Selección de Objetos_________________________________________________________27

Tipos de Archivos______________________________________________________________28Guardar un archivo FLA_______________________________________________________________28Otros Tipos de Archivos_______________________________________________________________29

¡Alerta 1! Certified Associate____________________________________________________30

Ejercicios_____________________________________________________________________30

TEMA 3: Gráficos y Textos_______________________________________________32

¿Qué es un gráfico?____________________________________________________________32

Gráficos Vectoriales____________________________________________________________32Modificación de gráficos vectoriales______________________________________________________32Mostrar los puntos anclaje de un vector___________________________________________________33

Imágenes de Mapa de Bits_______________________________________________________33Importar imágenes de Mapa de Bits______________________________________________________34

Texto________________________________________________________________________36Tipos de texto_______________________________________________________________________36Propiedades de los Textos______________________________________________________________36


Ejercicios_____________________________________________________________________38

TEMA 4: Fotogramas y fotogramas clave___________________________________40

Tipos de Fotograma____________________________________________________________40

Trabajo con fotogramas en la línea de tiempo______________________________________40Insertar fotogramas en la línea de tiempo__________________________________________________41Seleccionar fotogramas en la Línea de tiempo______________________________________________42Eliminar o modificar un fotograma o fotograma clave________________________________________42


TEMA 5: Símbolos, Instancias y la Biblioteca________________________________43

Símbolos e Instancias___________________________________________________________43Ventajas en el uso de Símbolos__________________________________________________________44Tipos de Símbolos____________________________________________________________________44

La Biblioteca__________________________________________________________________44

Crear Símbolo Gráfico_________________________________________________________45

Crear Símbolo Botón___________________________________________________________46

Crear Símbolo Clip de Película__________________________________________________49

Edición de Símbolos____________________________________________________________51Cómo editar un símbolo en el modo edición de símbolos______________________________________51Cómo editar un símbolo en contexto______________________________________________________52


TEMA 6: Interpolaciones de Movimiento y Forma____________________________54

Interpolación de Movimiento____________________________________________________54Crear una Interpelación de Movimiento con un Símbolo Gráfico_______________________________54

Interpolación de Forma_________________________________________________________58Crear una Interpelación de Forma utilizando Texto__________________________________________58Crear una Interpelación de Forma utilizando Imágenes_______________________________________60Crear una Interpelación de Forma utilizando Objetos Dibujados________________________________62


TEMA 7: Máscaras y Guía de Movimiento__________________________________64

Máscaras_____________________________________________________________________64Cómo crear una Máscara_______________________________________________________________65

Guía de Movimiento___________________________________________________________69Cómo crear una Guía de Movimiento_____________________________________________________69

TEMA 8: Escenas______________________________________________________72

Agregar, modificar o eliminar escenas____________________________________________73Crear una animación con varias escenas___________________________________________________73

TEMA 9: Como iniciar ActionScript_______________________________________78

El Modo Asistente de Script_____________________________________________________80Usar ActionScript para detener una Película________________________________________________80Usar ActionScript para ir a otro Fotograma________________________________________________83

Otros controladores o acciones básicas para brindar interactividad____________________87

TEMA 10: Audio y Video________________________________________________87

Audio________________________________________________________________________87Importar Sonidos a la Biblioteca_________________________________________________________88Agregar Sonido al Documento__________________________________________________________89

Video________________________________________________________________________91Incorporar Video_____________________________________________________________________91

Exportar una película__________________________________________________________92

TEMA 11: Publicación de Películas________________________________________94

Configurar de publicación del Formato SWF_______________________________________96


TEMA 12: Planeación de un proyecto multimedia____________________________99

Planeación de un Proyecto Interactivo____________________________________________99Identificar la Audiencia Objetivo________________________________________________________99Conocer el Tipo de Audiencia___________________________________________________________99Identificar las necesidades de la Audiencia Objetivo________________________________________100Determinar el contenido relevante_______________________________________________________100Proveer Contenido Accesible__________________________________________________________101

¡Alerta 7! Certified Associate___________________________________________________111

TEMA 13: Restricciones de uso del material Web____________________________111

Uso razonable________________________________________________________________111

Obra Derivada_______________________________________________________________112

Derechos de autor____________________________________________________________113

Citar una fuente de información________________________________________________114


TEMA 14: Conceptualización de un proyecto multimedia_____________________115

Conceptos Principales_________________________________________________________115Flujo Multimedia (Streaming Media)____________________________________________________115Sonidos en Flash____________________________________________________________________115Paleta de colores WebSafe____________________________________________________________115Bordes dentados en objetos (Aliasing)___________________________________________________116Alisado de bordes (Antialiasing)________________________________________________________116Espacio en Blanco___________________________________________________________________116Tinte______________________________________________________________________________117Color (Chroma)_____________________________________________________________________117

La accesibilidad en los Proyectos________________________________________________117

La accesibilidad en Flash______________________________________________________118


TEMA 15: Planeación y diseño de proyectos________________________________119

Principios del Diseño__________________________________________________________119Balance___________________________________________________________________________119Balance Simétrico y Asimétrico________________________________________________________120Movimiento________________________________________________________________________121Énfasis____________________________________________________________________________121Unidad____________________________________________________________________________122Proporción_________________________________________________________________________122

Planeación y Diseño de Proyectos________________________________________________123

Guión Grafico________________________________________________________________125

Consideraciones y Limitaciones Técnicas en un Proyecto____________________________125

Pruebas Técnicas_____________________________________________________________125

¡Alerta 10! Certified Associate__________________________________________________126

Bibliografía___________________________________________________________127

Universidad Politécnica de San Luís Potosí

Manual para el Curso de Flash

TEMA 1: ¿Qué es Flash?

Adobe Flash es una es una aplicación en forma de estudio de animación que trabaja sobre fotogramas, los cuales se utilizan para crear animaciones simples hasta muy complejas que interactúan en la Web, como por ejemplo una página para comprar discos en línea. Las aplicaciones de Flash pueden ser muy variadas e enriquecerse añadiendo imágenes, sonido y vídeo. Flash incluye muchas funciones para realizar de forma rápida y eficiente animaciones, entre dichas funciones destacan: la posibilidad de arrastrar y soltar componentes de la interfaz grafica de usuario, comportamientos incorporados que añaden código ActionScript al documento y varios efectos especiales que pueden añadirse a los objetos. Estos comportamientos que pueden añadirse a los objetos en ActionScript son basados en el código JavaScript. ActionScript, desde su versión 2.0, pasó de ser de un lenguaje de programación estructurada a programación orientada a objetos, que trata de ver el entorno de programación como el mundo real, donde cada objeto tiene propiedades como el color, la forma y la ubicación, y métodos u acciones como por ejemplo borrar un texto, parar la línea de tiempo, cargar variables, cambiar de color, etc.

Los archivos con los que se trabaja en Flash tienen extensión FLA, estos archivos son utilizados en Flash para realizar cualquier modificación a la animación. Una vez que la animación se ha concluido, el archivo se publica generalmente creando un archivo con extensión SWF. Estos archivos pueden aparecer en una página Web para ser vista en un navegador, o pueden ser reproducidos independientemente por un reproductor Flash (Flash Player). Los archivos de Flash aparecen muy a menudo como animaciones en páginas Web y sitios Web multimedia.

Las animaciones producidas con Flash MX, pueden ser lineales o no lineales:

Las animaciones Lineales: Son todas aquellas en las cuales la reproducción se realiza de forma continua de principio a fin.

Las películas No Lineales: Brinda la posibilidad al usuario de interactuar con el contenido, por medio de objetos como botones, menús y barras de navegación.

Escena 1

Escena 2

Escena 3

http://es.wikipedia.org/wiki/Animaci%C3%B3n

http://es.wikipedia.org/wiki/Navegador_web

TEMA 2: La interfaz de Flash

Una vez que se haya iniciado el programa de Flash se presenta la interfaz de inicio, como se muestra en la figura. Para inicializar con un nuevo documento en blanco de Flash se puede realizar de dos maneras. La primera es dando clic en Documento de Flash de la sección Crear Nuevo de la interfaz de inicio, la cual se encuentra encerrada en un rectángulo de color verde como se muestra en la figura.

1 2 3

Escena1Escena

2Escena3

Escena Inicial

Otra forma de crear un documento en blanco de Flash es a través de la barra de menús, con el menú archivo y utilizando el comando nuevo. Al ejecutar esta acción se presenta un cuadro de dialogo, tal y como se muestra en la figura. El cuadro de dialogo consta de dos fichas, seleccionar la ficha General y dar clic en Documento de Flash.

La interfaz de trabajo de Flash es de lo más manejable e intuitiva, ya que tiene la ventaja de que es similar a la de otros programas de Macromedia, como por ejemplo Dreamweaver, todo esto hace más fácil aprender Flash y más rápido su manejo y dominio.

Los elementos que se presentan cuando se abre un nuevo documento de Flash son los siguientes:

Escenario

Línea de TiempoCapa

s

Barra de Herramientas

Paneles

Barra de Menús

Área de Trabajo

Inspector de Propiedades

Zoom

La Barra de Menús

La barra de menús tiene como propósito facilitar el acceso a las distintas utilidades del programa.

Los principales menús a los que se puede acceder son:

Archivo: Permite crear nuevos documentos de Flash, abrirlos y guardarlos. Entre las cosas principales que se puede encontrar en este menú es la utilidad Importar, que es la posibilidad de insertar en la animación actual casi todo tipo de archivos, como por ejemplo archivos de sonido, vídeo, imágenes e incluso otras animaciones de Flash. Otra cosa importante que podemos encontrar en este menú es la Configuración de Publicación, donde se pueden modificar las características de la publicación, es decir, generar la extensión del archivo en el que va quedar la animación. También en este menú se puede encontrar la forma de configurar la impresión de las páginas e imprimirlas.

Edición: Es el menú que te permite Cortar, Copiar, Pegar, tanto objetos o dibujos como fotogramas. Una de las cosas importantes dentro de este menú es que también permite personalizar algunas de las opciones más comunes del programa.

Ver: Además de permitir alejar o acercar el escenario en el que se esta trabajando con el comando Zoom, también permite moverse entre fotogramas y por las diferentes escenas de la animación. Incluye la posibilidad de visualizar la cuadrícula y unas guías para mejor precisión dentro del escenario a la hora de colocar un objeto, dibujo o imagen. Esto se puede lograr seleccionando el submenú Cuadrícula y Guías, donde también se pueden configurar sus opciones.

Insertar: Dentro del menú insertar se pueden encontrar la opciones para colocar objetos en la película o animación, así como nuevos fotogramas, capas, acciones y escenas.

Modificar: Una de las cosas importantes que se puede encontrar dentro de este menú es la opción Transformar, que permite modificar los gráficos existentes en la animación o dentro del escenario. La opción Trazar Mapa de Bits convierte los gráficos en imágenes vectoriales, las cuales se verán más adelante dentro de este manual. El resto de opciones permite modificar características de los elementos de la animación como Suavizar y Optimizar la animación.

Texto: De manera general dentro del menú texto, se puede encontrar en su contenido los comandos que afectan directamente a la edición de texto.

Comandos: El menú Comandos permite la administración de los comandos, que son el conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edición de la animación. La administración consiste en reutilizar o ejecutar comandos que ya han sido utilizados en nuestra animación u obtener otros nuevos comandos de la página de Macromedia.

Control: En general, desde este menú se pueden modificar las propiedades de reproducción de la película o animación, como por ejemplo Reproducir Película, Rebobinar Película o Probar Película.

Ventana: Este menú se utiliza para las opciones acerca de cómo se van a distribuir las ventanas dentro de nuestro entorno de trabajo. Además que dentro de este menú se incluyen accesos directos para todos los Paneles de Flash.

Ayuda: Desde este menú se puede acceder a toda la ayuda que ofrece Macromedia, desde el manual existente dentro de su página principal, hasta un diccionario completo de ActionScript, pasando por tutoriales y lecciones guiadas.

La Línea de Tiempo, Capas y los FotogramasLos componentes principales se la línea de tiempo son:

Las capas

Los fotogramas

La cabeza lectora

La línea de tiempo es el elemento donde se controlan las imágenes y sonidos de la animación. La línea de tiempo de divide en fotogramas, los cuales representan incrementos en la línea de tiempo. El orden en que aparecen los fotogramas en la línea de tiempo determina el orden cuando se reproduce un documento de Flash.

Cabeza Lectora

FotogramasCapas

La línea de tiempo representa una forma de ver los fotogramas de una manera simplificada y consta de dos partes principales. La primera son los fotogramas, los cuales se encuentran delimitados por líneas verticales formando rectángulos. Y la segunda por los números de fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura y cuándo aparecerá en la película. Además, en la parte inferior hay herramientas para trabajar como el Papel cebolla e información sobre el Número de Fotograma actual, la Velocidad de los Fotogramas que de manera predeterminada se en 12.0 fotogramas por segundo y el Tiempo de película transcurrido.

El fotograma actual, la velocidad del fotograma y el tiempo transcurrido se muestran en la parte inferior de la línea de tiempo. La cabeza lectora, representada por un rectángulo y una larga línea ambos en color rojo, indican el fotograma actual que se esta visualizando. Se puede hacer clic en algún fotograma para mover la cabeza lectora a ese fotograma o se puede arrastrar la cabeza lectora hacia adelante o hacia atrás sobre la línea de tiempo para ver rápidamente la animación completa o cualquier parte de ésta.

Una de las herramientas importantes que se puede encontrar en la línea de tiempo, es la herramienta Papel cebolla está situada en la parte inferior del panel de línea de tiempo:

Al seleccionar la herramienta Papel cebolla, la aplicación añade marcadores de Papel cebolla al indicador de la cabeza lectora de la línea de tiempo. Se pueden arrastrar los marcadores para ampliar el número de fotogramas a visualizar antes y después del fotograma actual.

Flash ofrece dos tipos de papel cebolla:

Marcadores

Papel cebolla normal: El fotograma actual se muestra a todo color mientras los fotogramas anteriores y posteriores se atenúan progresivamente. Con esto se consigue dar la sensación de que hay una serie de dibujos creados en papel semitransparente apilados unos sobre otros.

Modo de contornos de papel cebolla: El fotograma actual se muestra a todo

color, mientras que los fotogramas anteriores y posteriores se muestran como contornos. Esto es más fácil de ver cuando se trabaja con varios fotogramas clave situados antes y después del fotograma actual.

Las capas en la línea de tiempo proporcionan una forma de organizar los elementos de una animación. Representan diferentes niveles de la animación apiladas unas sobre otras, cada una de las cuales tiene un contenido diferente que aparece en el escenario. El orden va de arriba hacia abajo, de tal forma que los objetos que aparecen adelante se encuentran en la capa superior, mientras que los objetos que aparecen atrás se encuentran en la capa inferior. Para cambiar el orden de las capas, se puede lograr arrastrando la capa a la nueva posición. Se pueden dibujar y editar objetos en una capa sin afectar a los objetos de otra. Los controles de la capa se muestran en el lado

Ocultar Capa

Bloquear Capa

Contornos

Insertar Capa Guía de Movimiento

Insertar Carpeta de Capas

Eliminar Capa

Nombre de la Capa

izquierdo de la línea de tiempo, donde cada capa tienen la las opciones de ocultarse o mostrarse, bloquearse para impedir modificaciones o mostrar su contenido como contornos. El nombre de la capa se puede modificar haciendo doble clic en el nombre de la capa y escribiendo el nombre que se desee, éste se escribe de acuerdo con el contenido de la capa para tener un mayor control y organización en la animación.

Otros elementos necesarios para manipular las capas de una animación son la forma de insertar y eliminar una capa. Agregar una guía de movimiento para la capa, para hacer que un objeto de una animación siga una trayectoria definida, como por ejemplo con una pluma. Además de que se pueden crear carpetas de capas para organizar las capas y reducir el desorden de la línea de tiempo. Todos estos elementos se muestran en la figura anterior.

El Área de TrabajoEl Área de trabajo consta de numerosas partes, la parte más importante es el Escenario, sobre el escenario se dibujarán y se colocaran los diferentes elementos de la película que se estén realizando. El escenario cuenta con algunas propiedades muy importantes, que son las Propiedades del documento. Para acceder a estas propiedades, se debe hacer clic con el botón derecho del ratón sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento en el menú contextual, donde se abrirá el siguiente cuadro de dialogo:

El cuadro de dialogo muestra las siguientes propiedades del documento de Flash:

Dimensiones: Definen la anchura y la altura de la animación, es decir el tamaño en píxeles. El tamaño mínimo de una animación es de 1 x 1 píxeles y su tamaño máximo de 2880 x 2880 píxeles.

Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado, es decir, con el tamaño por defecto de la impresora, con los contenidos existentes o los tamaños elegidos como Predeterminados.

Color de Fondo: El color seleccionado será el color de fondo de toda la película.

Velocidad de Fotogramas: Con esta opción se define el número de fotogramas por segundo para la animación.

Unidades de Regla: Unidad que se empleará para medir las cantidades, la opción predeterminada son los píxeles.

Transformar en predeterminado: Este botón, permite almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Estas propiedades por supuesto podrán ser alteradas desde este panel cuando se desee.

Las VistasEl efecto Zoom consiste en aumentar o reducir el tamaño de un objeto, de modo que parece que se haya acercado o alejado de él. Es muy útil para poder ver con más detalle ciertos puntos de la animación, como por ejemplo los gráficos y para poder retocar algunas partes que no son visibles desde lejos. Igualmente, resulta útil ver la animación desde lejos y tener una visión global de ella.

Se puede acceder a todas las funciones del Zoom desde el Menú Ver. Además, Flash incluye un submenú de acceso rápido para dichos comandos, que contiene las siguientes opciones, como se muestra en la figura:

Mostrar Fotograma: Muestra el contenido del Fotograma actual en su totalidad. Es decir, amplia el tamaño del fotograma hasta ocupar toda el Área de Trabajo. Si hay objetos fuera del Área de Trabajo, no se verán.

Mostrar Todo: Muestra en el Área de Trabajo todos los objetos que haya en la animación, adaptando el tamaño del fotograma al espacio necesario para que se muestren todos. Si todos los objetos están en la parte izquierda de un fotograma, la parte derecha no se verá.

25%, 50%, 100%, 200% ...: Muestra el fotograma con el tamaño que se indique en % teniendo en cuenta que el 100% es el tamaño de referencia. Es decir, el 100% es el tamaño original de la animación. Si el valor asignado es menor al 100% se tiene una reducción de la información. Y si el valor es mayor a 100% se tendrá un aumento en la información.

PanelesLos paneles son conjuntos de comandos agrupados según su función, por ejemplo, todo lo que haga referencia a las acciones de una animación, se verá reflejado en el Panel de Acciones. Su misión es simplificar y facilitar el uso de los comandos. Las principales características de los paneles de Flash son las siguientes:

Panel Información: Menú Ventana > Paneles de diseño > Información Este panel se encuentra dentro de la categoría de los paneles de diseño. El panel muestra el tamaño y las coordenadas de los objetos seleccionados, permitiendo modificarlas. Se puede utilizar para alinear de manera más exacta, los objetos dentro del escenario.

Panel Transformar: Menú Ventana > Paneles de diseño > Transformar Panel de la categoría de diseño. Este panel se utiliza para agrandar o disminuir los objetos seleccionados dentro del área de trabajo. Indicando a través de un porcentaje, se

puede elegir si se va a modificar solo el alto, solo el ancho o ambos. Además, de que se puede girar el objeto de forma más exacta.

Panel Alinear: Menú Ventana > Paneles de diseño > Alinear Es un panel de la categoría de diseño que se utiliza para alinear un grupo de elementos dentro del escenario. También puede distribuir equivalentemente un grupo de objetos o forzar a que dichos objetos sean del mismo tamaño o ajustar el espaciado.

Panel Mezclador de Colores: Menú Ventana > Paneles de diseño > Mezclador de Colores Este panel también forma parte de la categoría de diseño y como su nombre lo indica, se utiliza para fabricar los colores que más se adecuen a un objeto para la animación. Para seleccionar un color determinado, bastará con hacer clic en las pestañas que se encuentran junto a los iconos de las Herramientas de Lápiz (borde) y de Bote de Pintura (relleno). Al hacerlo aparecerá un Panel con una multitud de colores para que seleccionar el que más se adecue para el objeto seleccionado.

Los cuadros “R”, “V” y “A”, permiten seleccionar el nivel de Rojo, Verde y Azul respectivamente. Este nivel está entre 0 y 255. El valor de Alfa representa lo transparente que se quiere que sea el color. Siendo 100% el valor que hace el color completamente opaco y 0% el valor que lo hace completamente transparente.

En el siguiente cuadro se puede elegir el color:

El siguiente cuadro de se utiliza para cambiar el brillo:

También se encuentran tres pequeños botones:

Poner como dos colores el blanco y el negro.

Para quitar el color.

Para intercambiar el color que se tiene de relleno, con el que se tiene de bordes.

Además se pueden crear diferentes tipos de rellenos:

Sólido: Consiste en un relleno formado por un solo color. Un ejemplo de relleno sólido es el siguiente:

Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado a otro. Para ello, se debe hacer clic en uno de los cuadros pequeños para elegir un color inicial y un color final para el siguiente cuadro pequeño.

Se pueden añadir más colores intermedios poniendo el cursor del ratón sobre la barra de degradado, de tal forma que aparezca un símbolo de “+” al lado de la flecha, entonces hacer clic con el botón izquierdo del ratón, y aparecerá otro cuadro al que se le puede asignar otro color. Así se pueden añadir todos los que se quiera.

Para eliminar alguno de los colores asignados, se debe de seleccionar el cuadro y arrastrarlo fuera del panel. Un ejemplo de degradado lineal es el siguiente:

Degradado Radial: Es igual que el anterior, pero los degradado se realiza de forma circular. Un ejemplo del degradado radial es el siguiente:

Mapa de Bits: Permite colocar como relleno de alguna imagen existente en el objeto seleccionado. Un ejemplo es el siguiente:

Panel Muestras de Color: Menú Ventana > Paneles de diseño > Muestras de Color Este es otro panel que se encuentra dentro de la categoría paneles de diseño y se utiliza para poder ver de un modo rápido y claro los colores que se tienen, tanto sólidos y degradados (lineales o radiales). Además, de un color creado mediante el Panel Mezclador de Colores, que se puede agregar al conjunto de muestras mediante Agregar Muestra, un menú desplegable que se encuentra en la parte superior derecha del Panel Mezclador de Colores.

Panel Componentes: Menú Ventana > Paneles de desarrollo > Componentes Este panel forma parte de la categoría de paneles de desarrollo y permite acceder a componentes ya construidos y listos para ser usados en una aplicación, por lo general, que utilicen una Interfaz Grafica de Usuario (GUI) en Flash. Los componentes son objetos "inteligentes" con propiedades, características y muchas utilidades. Algunos ejemplos de estos componentes son los botones, casillas de verificación, barras de estado, barras de desplazamiento, cuadros y áreas de texto.

Panel Biblioteca: Menú Ventana > Biblioteca El panel Biblioteca es donde se guardan y organizan los símbolos creados en Flash, además de archivos importados tales como gráficos de imágenes de mapa de bits, archivos de sonido y clips de vídeo. En el panel Biblioteca puede organizar en carpetas los elementos de biblioteca, ver con qué frecuencia se utilizan en un documento y ordenarlos por tipo.

Panel Escena: Menú Ventana > Paneles de diseño > Escena Una escena no es más que una porción de la Línea de Tiempo, con todos los elementos que incluye como las capas y los fotogramas. Su finalidad principal es la de organizar la animación, de modo que las partes de la película que no tengan relación entre sí no estén una a continuación de la otra. El Panel Escena se utiliza para modificar los atributos de las escenas que se utilizan para la animación, además, de las operaciones como duplicar, insertar y eliminar escena.

Panel Acciones: Menú Ventana > Paneles de desarrollo > Acciones Este panel se encuentra en la categoría de paneles de desarrollo y permite crear y editar acciones para un objeto o fotograma en ActionScript. El panel Acciones se activa cuando se selecciona una instancia de un fotograma, botón o clip de película. El título del panel Acciones cambia a Acciones - Botón, Acciones - Clip de película o Acciones - Fotograma, según el elemento que esté seleccionado.

Panel Inspector de Propiedades: Menú Ventana > Propiedades Es el panel más usado y más importante. El inspector de propiedades simplifica la creación de documentos facilitando el acceso a los atributos más utilizados del elemento seleccionado, ya sea en el escenario o en la línea de tiempo. Puede modificar los atributos del objeto o documento en el inspector de propiedades sin acceder a los menús o paneles que contienen estas funciones. El inspector de propiedades muestra información y la configuración del elemento que está seleccionado, que puede ser un documento, un texto, un símbolo, una forma, un mapa de bits, un vídeo, un grupo, un fotograma o una herramienta. Cuando hay dos o más tipos de objetos seleccionados, el inspector de propiedades muestra el número total de objetos seleccionados.

Barra de HerramientasLas utilidades de la Barra de Herramientas es que permiten dibujar, pintar, seleccionar y modificar objetos, gráficos y texto, así como cambiar la visualización del escenario. La barra de herramientas se encuentra dividida en cuatro secciones como se muestra en la figura:

1. La sección de Herramientas que contiene las herramientas de dibujo, pintura y selección.

2. La sección de Ver contiene herramientas para ampliar y reducir, así como para realizar recorridos en la ventana de la aplicación.

3. La sección de Colores contiene modificadores de colores de trazo y relleno.

4. La sección de Opciones muestra los modificadores de la herramienta actualmente seleccionada. Los modificadores afectan las operaciones de pintura o edición de herramienta.

Sección de Herramientas

Herramienta Selección: Es la herramienta más utilizada de todas, ya que permite seleccionar objetos o sus bordes para manipularlos según sea necesario.

Además, el adecuado uso de esta herramienta ahorra tiempo en el desarrollo de un proyecto.

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

seleccionados.

Herramienta Transformación Libre: Sirve para ajustar el tamaño de los objetos que se encuentran dentro del escenario. Además esta herramienta se puede utilizar para girar los objetos.

Herramienta Transformación de Relleno: Se utiliza para definir las propiedades de relleno de un objeto. La cual transforma un relleno de degradado o de mapa de bits ajustando el tamaño, dirección o centro de relleno.

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 en un punto del área de trabajo y se arrastra hasta donde se quiere que llegue la línea recta.

Herramienta Lazo: Su función es complementaria a la Herramienta Selección, ya permite seleccionar cualquier cosa, sin importar la forma, ya que la Herramienta Selección sólo se puede utilizar para seleccionar objetos o zonas

rectangulares o cuadradas.

Herramienta Pluma: Permite crear polígonos de un modo sencillo. Su empleo consiste en hacer clic en los lugares donde se quiere definir como vértices del polígono, lo que asegura una gran precisión. Para crear curvas, hay que señalar

los puntos que la delimitan y posteriormente trazar las tangentes a ellas.

Herramienta Óvalo: Esta herramienta permite trazar círculos o elipses de manera rápida y sencilla.

Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en que el tipo de objetos que crean son cuadrados o rectángulos compuestos de relleno y borde, solo relleno o solo borde.

Herramienta PolyStar: Esta herramienta permite crear formas de polígono o estrella, estableciendo el número de puntos para ambas formas.

Herramienta Lápiz: Permite dibujar líneas con la forma que se decida, modificando la forma de estas según sea conveniente.

Herramienta Brocha: Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Además, se puede

modificar su grosor y forma de trazo.

Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos que se crean necesarios.

Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que se han 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 desde el Panel Mezclador de Colores o bien desde el subpanel Colores que se encuentra en la Barra de Herramientas.

Herramienta Cuentagotas: Su misión es capturar muestras de colores para que puedan ser utilizados posteriormente. Estas muestras de color se pueden tomar desde cualquier parte de la pantalla.

Herramienta Borrador: Su funcionamiento es análogo a la Herramienta Brocha. Permite borrar elementos o parte de los mismos en el escenario.

Sección de Ver

Herramienta Mano: Se utiliza para desplazar el escenario para cambiar la visualización sin tener que cambiar el grado de aumento.

Herramienta Lupa: Se emplea para acercar o alejar la vista de un objeto, permitiendo abarcar más o menos la zona del Entorno de Trabajo. Cada vez que hagamos clic en la Lupa se duplicará el porcentaje indicado en el Panel Zooms.

Sección de Colores

Herramientas de Colores: Sección en la cual se encuentran las diferentes herramientas para aplicar los colores a un objeto según sea conveniente. Se encuentran las opciones del color del borde del objeto indicado por el lápiz y el color del relleno del objeto indicado por el bote de pintura. Además de las opciones para indicar color a blanco y negro, omitir el borde o el relleno e invertir los colores de relleno y borde.

Sección de Opciones

En esta sección de la barra de herramientas aparecen las opciones de algunos de algunas de las herramientas mencionadas anteriormente:

Herramienta Varita Mágica: Esta herramienta se aparece en esta sección al seleccionar la Herramienta Lazo y permite hacer selecciones según los colores de los objetos, como por ejemplo separar una imagen de mapa de bits.

Propiedades de la Varita Mágica: Las propiedades de la varita mágica aparecen también al seleccionar la Herramienta Lazo. Entre las propiedades de la

varita se puede encontrar el umbral, que es un valor de color comprendido entre 1 y 200 para definir la diferencia de valor de color entre píxeles adyacentes para que se incluyan en la selección. Un número mayor incluye un rango más amplio de colores. El valor 0 sólo permite la selección de píxeles exactamente iguales al primero. El Suavizado, define el grado de suavizado de los elementos seleccionados.

Herramienta Modo Polígono: Esta herramienta también aparece en esta sección al seleccionar la Herramienta Lazo y permite hacer selecciones poligonales, es decir, trazar líneas rectas alrededor de los objetos para

seleccionarlos.

Ajustar a Objetos: Esta herramienta a aparece en la sección de opciones con al seleccionar las herramientas de selección, línea, óvalo, rectángulo,

transformación libre y transformación de relleno y se utiliza para obligar a los objetos a encajar unos con otros, es decir, para que en caso de ser posible, sus bordes se superpongan, dando la sensación de estar unidos.

Herramienta Suavizar: Esta herramienta aparece en la sección de opciones de la barra de herramientas al elegir la herramienta selección. Se utiliza para convertir los trazos rectos en

líneas menos rígidas.

Herramienta Enderezar: Esta herramienta al igual que la anterior, aparece en la sección de opciones de la barra de herramientas al elegir la herramienta selección. Esta herramienta

realiza la labor inversa de la herramienta suavizar. Convierte los trazos redondeados en más rectilíneos.

Herramienta Radio de Rectángulo Redondeado: Esta herramienta aparece en la sección de opciones de la barra de herramientas al elegir la herramienta rectángulo. Esta

herramienta se utiliza para crear cuadrados o rectángulos con las esquinas redondeadas.

Herramienta Rotar y Sesgar: Esta herramienta se activa dentro de la sección de opciones de la barra de herramientas, al seleccionar la herramienta de

transformación libre. Esta herramienta permite girar y torcer el objeto seleccionado, conservando sus dimensiones.

Herramienta Escalar: Esta herramienta se muestra en la sección de opciones de la barra de herramientas al seleccionar la herramienta de transformación libre y permite aumentar o disminuir el tamaño del objeto seleccionado.

Herramienta Distorsionar: Herramienta de la sección de opciones de la barra de herramientas que solo se puede utilizar si se encuentra seleccionada la

herramienta de transformación libre. Esta herramienta permite deformar el objeto seleccionado.

Herramienta Envoltura: Al igual que las tres herramientas anteriores la herramienta envoltura pertenece a una de las opciones de la herramienta de

transformación libre, la cual permite deformar y distorsionar objetos. Una envoltura es un recuadro de delimitación que contiene uno o más objetos. Los cambios realizados en la forma de la envoltura afectan a la forma de los objetos contenidos dentro de la envoltura.

Herramienta Grifo: La herramienta grifo es una de las opciones de la herramienta borrador. Esta herramienta permite eliminar segmentos de trazos o

áreas rellenas.

La herramienta Lápiz también ofrece diversos modos de calidad de línea:

Enderezar: Esta opción se utiliza cuando se desea dibujar líneas muy rectas a mano alzada. Las líneas se "ajustarán" a la recta después de terminar de dibujar el trazo.

Suavizar: Si utiliza esta opción, las líneas se suavizan automáticamente conservando la forma básica que se desea crear.

Tinta: Esta opción deja sin modificar la calidad de la línea. Se trata de una opción magnífica para dibujos a mano alzada o de estilo libre.

La herramienta Pincel ofrece diversas subopciones que ayudan a dibujar determinados efectos:

Pintar Normal: Pinta sobre las líneas y rellenos de la misma capa.

Rellenos de Pintura: Pinta dentro de un color de relleno y fuera de una forma (en el escenario).

Pintar detrás: Pinta detrás de los rellenos y trazos existentes.

Pintar Selección: Permite pintar dentro de un relleno seleccionado solamente.

Pintar Dentro: Impide salirse de las líneas después de empezar a pintar dentro de un relleno.

Cuadrícula, guías y reglasFlash incluye reglas y guías que ayudan a dibujar y diseñar objetos de manera precisa. Es posible colocar guías en un documento y ajustar objetos a las mismas o activar la cuadrícula y ajustar objetos en ésta. En la figura la cuadricula se muestra de color gris y las guías de color verde.

Cuadrícula

Reglas

Guías

CuadrículaCuando aparece la cuadrícula en un documento, se muestra como un conjunto de líneas detrás de la ilustración en todas las escenas. Se pueden ajustar los objetos a la cuadrícula, así como modificar el tamaño de la cuadrícula y el color de las líneas que la componen. Para mostrar u ocultar la cuadrícula de dibujo en el escenario se debe seleccionar Menú Ver > Cuadrícula > Mostrar cuadrícula. Para activar y desactivar el ajuste de los objetos a las líneas de la cuadrícula se debe seleccionar el Menú Ver > Cuadrícula > Ajustar a cuadrícula. Para establecer preferencias para la cuadrícula, como por ejemplo el ancho y alto de cada uno de los cuadros y el color de la cuadrícula de debe seleccionar Menú Ver > Cuadrícula > Editar cuadrícula.

GuíasSi las reglas son visibles, se pueden arrastrar las guías horizontales y verticales de las reglas al escenario. Las guías se pueden mover, bloquear, ocultar y quitar. También se pueden ajustar los objetos a las guías, cambiar el color de las guías y la tolerancia al ajuste, que es la distancia máxima que deben estar los objetos para ajustarlos a una guía. Se pueden quitar todas las guías desde el modo de edición actual: modo de edición de documentos o modo de edición de símbolos. Si se quitan las guías del modo de edición de documentos, desaparecen todas las guías del documento. Si se quitan las guías del modo de edición de símbolos, desaparecen todas las guías de todos los símbolos. Para mostrar o u ocultar las guías se debe seleccionar Menú Ver > Guías > Mostrar guías, si la cuadrícula está visible y la opción Ajustar a cuadrícula está activada, al crear guías, éstas se ajustarán a la cuadrícula. Para activar o desactivar el ajuste a las guías se debe seleccionar Menú Ver > Ajuste > Ajustar a guías, el ajuste a las guías tiene prioridad sobre el ajuste a la cuadrícula, en caso de que haya guías entre las líneas de la cuadrícula. Para mover una guía se utiliza la herramienta de selección de la barra de herramientas. Para quitar una guía desbloqueada lo único que se tiene que hacer es utilizando la herramienta selección de la barra de herramientas, arrastrar la guía a la regla horizontal o vertical. Para bloquear las guías se debe seleccionar Menú Ver > Guías > Bloquear guías. Una forma de borrar todas las guías del documento es seleccionando Menú Ver > Guías > Borrar guías, si se está utilizando el modo Editar documento, desaparecerán todas las guías del documento, si se está utilizando el modo Editar símbolos, desaparecerán sólo las guías que se utilicen en los símbolos.

ReglasSi se muestran las reglas, éstas aparecen en la parte superior y a la izquierda del documento. Se puede cambiar la unidad de medida que se utiliza en las reglas; la unidad predeterminada son los píxeles. Al mover un elemento en el escenario con las reglas visibles, aparecerán unas líneas en las reglas indicando las dimensiones del elemento. Para mostrar u ocultar las reglas, se selecciona Menú Ver > Reglas. Y para especificar la unidad de medida de las reglas para un documento se selecciona Menú Modificar > Documento y en el cuadro de dialogo Propiedades del Documento seleccionar una opción del menú emergente Unidad de Regla el cual se encuentra situado en la esquina superior derecha, como se muestra en la siguiente figura:

Partes de un ObjetoLas partes fundamentales de un objeto son:

El Borde: Es una línea que separa el objeto del exterior del escenario. Como ya se menciono anteriormente puede existir o no según se requiera. Cuado se crea un objeto, el borde se crea siempre y su color será indicado en el Color de Trazo dentro del Mezclador de Colores. Una de las opciones para eliminar el borde al crear el objeto es seleccionándolo y suprimirlo.

El Relleno: Es la parte interna del objeto. Su existencia también es arbitraria, ya que se puede crear un objeto cuyo color de relleno sea transparente.

Borde

Relleno

Formas de Selección de ObjetosPara poder trabajar con objetos, es fundamental saber seleccionar la parte del objeto que se requiere modificar. Se puede observar en las ilustraciones que las partes de un objeto seleccionadas toman una apariencia con textura para indicar que están seleccionadas.

A continuación se detallan las diversas formas de selección:

Seleccionar un relleno o un borde: Hacer clic en el Relleno o en el Borde que se va a seleccionar.

Seleccionar relleno y el borde de un objeto: Hacer doble clic en el Relleno del objeto.

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 se pretende seleccionar.

Seleccionar un símbolo, texto o grupo: Hacer clic en el símbolo, texto o grupo. Estos tipos de objetos mostrarán un borde de color azul por defecto al estar seleccionados.

Seleccionar varios elementos: Mantener presionada la tecla SHIFT mientras que se seleccionan los objetos que se requieren.

Tipos de ArchivosExiste un listado con diferentes tipos de archivos que se pueden generar en Flash, los cuales varían en características y funciones. El principal tipo de archivo es el que tiene la extensión FLA, que es el editadle y guarda tres tipos básicos de información que conforman el documento, los cuales son:

Los objetos multimedia: Son los distintos objetos gráficos, texto, sonido y video que conforman el contenido del documento en Flash.

La línea de tiempo: Es la parte de Flash en la que se indica cuándo deben aparecer los objetos multimedia específicos en el escenario.

El código ActionScript: Es el código de programación que se añade a los documentos de Flash para que respondan a las interacciones de los usuarios y controlen mejor el comportamiento de los documentos de Flash.

Guardar un archivo FLAEl procedimiento para guardar un archivo con extensión FLA es el siguiente:

1. Hacer clic en Menú > Archivo

2. Seleccionar la opción de Guardar como… Al realizar esta acción se abre el siguiente cuadro de dialogo:

3. En el cuadro de dialogo seleccionar la carpeta donde se va almacenar el archivo.

4. En el campo de Nombre, escribir el título del archivo.

5. En el campo Tipo esta predeterminada la opción de Documento de Flash MX 2004 (*.fla).

6. Hacer clic en el botón Guardar.

Otros Tipos de ArchivosOtros tipos de archivos que se pueden generar en Flash son los siguientes:

SWF: Son las versiones comprimidas de los archivos con extensión FLA. Son los archivos que se muestran en la página Web.

AS: Son los archivos ActionScript. Se pueden utilizar si se prefiere guardar parte o todo el código ActionScript fuera de los archivos FLA.

SWC: Contienen los componentes reutilizables de Flash. Cada archivo con extensión SWC incluye un clip de película compilado, código ActionScript y cualquier otro activo que requiera el componente.

ASC: Se utiliza para almacenar ActionScript que se ejecutará en un equipo con Flash Communication Server. Estos archivos ofrecen la capacidad de implementar la lógica del servidor que funciona en combinación con ActionScript en un archivo SWF.

JSFL: Son archivos JavaScript que se pueden utilizar para añadir nuevas funciones a la herramienta de edición de Flash.

FLP: Son utilizados en Flash Profesional, estos son archivos de proyectos. Se pueden utilizar para administrar varios archivos de documento en un solo proyecto. Los proyectos de Flash permiten agrupar varios archivos relacionados para crear aplicaciones complejas.

¡Alerta 1! Certified Associate La barra de titulo, la barra de menús, la

ventana del documento, el área de paneles, el inspector de propiedades son elementos de la interfaz de Flash.

Desde el inspector de propiedades se pueden aplicar configuraciones al elemento seleccionado.

Saber que la barra de herramientas esta dividida en cuatro secciones y que herramientas se encuentran en cada sección.

Ejercicios1. Realizar el dibujo con las siguientes características:

Tamaño del escenario de 900 x 500 píxeles.

Definir una cuadrícula de 50 x 50 píxeles.

Utilizar solamente la herramienta línea.

Utilizar los mismos colores que muestra la imagen.

Generar el archivo con extensión FLA, con el nombre ejercicio1.

2. Realizar el siguiente dibujo utilizando la herramienta Rectángulo con sus opciones de la barra de herramientas. De ser necesario utilice la herramienta Línea. Guardar el archivo con el nombre ejercicio2.

3. Realizar el siguiente imagen utilizando la pluma, cuadricula, óvalos y líneas. Guardar el archivo con el nombre ejercicio3.

4. Realizar la siguiente imagen utilizando el mayor número de herramientas posibles. Utilizar los mismos colores con los que se muestra la imagen. Guardar el archivo con el nombre ejecicio4.

TEMA 3: Gráficos y Textos

¿Qué es un gráfico?Los gráficos son símbolos que permiten representar objetos estáticos y animaciones sencillas. Con Flash se pueden crear y animar gráficos vectoriales compactos. Además de importar y modificar gráficos que nos son vectoriales creados en otras aplicaciones como los programas de Ilustrator, Fireworks o Photoshop.

Los gráficos pueden ser:

a) Estáticos: Los gráficos estáticos se mantienen sin cambios cuando pasa el tiempo. Estos gráficos por lo general se encuentran en los fondos y en los objetos que no desempeñan ninguna función especial. Su tamaño y por tanto, el tiempo de carga

de este tipo de gráficos, dependerá de la resolución, sus dimensiones y de la forma en la que estén creados.

b) Animaciones: Este tipo de gráfico varía su forma, posición u otras propiedades a medida que va pasando el tiempo. Como por ejemplo acciones que modifiquen el estado inicial y el tamaño. La forma de creación de este tipo de gráficos, será mucho mayor que uno estático.

Los tipos de gráfico anteriores pueden ser, a su vez de dos tipos, según la forma en la que estén creados: Gráfico Vectorial o Mapa de Bits.

Gráficos VectorialesEstos gráficos representan imágenes por medio de líneas y curvas denominadas vectores. Además incluyen propiedades de color y posición. Al editar un grafico vectorial se modifican las propiedades de las líneas y curvas que definen su forma, por lo tanto no se depende de la resolución. Por lo anterior, pueden visualizarse en dispositivos de salida de distintas resoluciones sin que se vea alterada su calidad.

Modificación de gráficos vectorialesEs posible modificar las líneas y contornos de las formas vectoriales arrastrándolos con la herramienta de Selección. También se puede utilizar se puede utilizar la herramienta de Subselección para mostrar los puntos o nodos de las líneas u los contornos de las formas, así como modificar las líneas y los contornos ajustados a los puntos. En la figura siguiente se muestran las partes de un gráfico vectorial:

Mostrar los puntos anclaje de un vectorEl proceso para mostrar los puntos de anclaje de un vector es siguiente:

1. Seleccionar la herramienta Subselección.

2. Hacer clic en la línea o el contorno de la forma.

3. Los puntos de anclaje son mostrados en el objeto seleccionado.

Para modificar una línea o el contorno de un vector se puede arrastrar cualquier punto de la línea mediante la herramienta Selección. El puntero cambia para indicar el tipo de

Manejador

Nodo

modificación que se puede realizar en el contorno o el relleno. Flash ajusta la curva del segmento de línea para acomodarla a la posición del punto desplazado.

Los procesos que se pueden realizar para modificar un gráfico vectorial son los siguientes:

Cuando es un extremo del objeto gráfico, se puede alargar o acortar la línea.

Cuando se trata de un ángulo, los segmentos que lo forman se mantienen rectos al alargarse o acortarse.

Imágenes de Mapa de BitsLas imágenes de mapa de bits están compuestas por puntos de color, denominados píxeles organizados en una cuadrícula. Los píxeles son las unidades más pequeñas que forman una imagen, no son apreciables a simple vista en una imagen de calidad, pero sí con una ampliación. Al editar una imagen de mapa de bits, se modifican los píxeles y no las líneas o curvas. Las imágenes de mapa de bits dependen de la resolución ya que los datos que las definen se encuentran fijados en una cuadrícula que tiene un tamaño determinado. La modificación de una imagen de mapa de bits puede alterar su calidad. Entre los tipos de archivo de mapa de bits más comunes se encuentran el JPG, PCX, PNG, TIFF, GIF y el BMP.

Cambiar un extremo con la Herramienta Selección

Ajustar una curva con la Herramienta Selección

Importar imágenes de Mapa de BitsFlash permite importar gráficos de mapa de bits al escenario o a la biblioteca creados en otros programas, cuando han sido guardados en formatos gráficos como los que se mencionaron anteriormente. También permite modifícalos en algunos aspectos como el tamaño y la proporción, aunque no internamente a diferencia de los vectores.

Los pasos para importar un archivo de mapa de bits es el siguiente:

1. Hacer clic en Menú > Archivo.

2. Seleccionar la opción Importar. Se puede observar que Importar cuenta con tres opciones:

a. La opción Importar al escenario… se utiliza para cuando se requiere que la imagen aparezca inmediatamente en el escenario. Es importante saber que esta opción agrega de manera automática la imagen a la biblioteca de símbolos.

b. La opción Importar a biblioteca… esta opción agrega la imagen a la biblioteca de símbolos para que sea utilizada posteriormente.

c. La opción Abrir biblioteca externa… permite compartir imágenes de otros archivos de Flash.

3. Al seleccionar Importar al escenario… se abre el siguiente cuadro de dialogo.

4. Seleccionar el archivo de imagen que se desea importar.

5. Dar clic en Abrir.

6. Automáticamente aparecerá la imagen en el escenario pero también se agregará a la biblioteca de símbolos.

La siguiente imagen muestra de forma clara la diferencia entre una imagen de mapa de bits y una vectorial. Se puede apreciar que si la imagen original se trata de un mapa de bits al ser agrandada se distorsiona. Y si la imagen original se trata de un grafico vectorial no se distorsiona al ser agrandada.

TextoFlash es utilizado para crear animaciones gráficas, de modo que trata a cualquier texto como si fuera un objeto que se coloca en el escenario y se encuentra listo para ser animado. Al animar textos permite crear espectaculares animaciones con muy poco esfuerzo.

Tipos de textoFlash distingue entre diversos tipos de textos y les da un tratamiento especial, según el tipo del que se trate. El tipo de texto se puede modificar desde el Inspector de Propiedades y se puede elegir entre los siguientes tres tipos:

Texto estático: Resulta útil para añadir texto decorativo en el escenario o cualquier otro texto que no requiera modificaciones y cargas desde una fuente externa.

Texto dinámico: Se usa para cargar texto desde un archivo, una base de datos o para modificar el texto cuando el archivo SWF se reproduzca utilizando el reproductor Flash Player.

Texto de entrada: Se utiliza cuando se requiere que el usuario escriba texto en un campo de texto. Puede utilizar texto y enviarlo a una base de datos o hacer que manipule algún elemento de archivo SWF.

Propiedades de los TextosPara poder escribir, se debe hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que desea comenzar a escribir.

El Inspector Propiedades contiene las principales propiedades de todos los objetos que se emplean durante el desarrollo de una animación, de modo que si se selecciona un texto, se podrán visualizar las diferentes opciones que se tienen para el texto. El Inspector de Propiedades toma la siguiente forma al seleccionar un texto:

Fuente: Desde aquí, al igual que en los editores de texto más comunes se puede seleccionar el tipo de letra o fuente más apropiado para la animación.

Altura: Determina el espaciado entre los caracteres. Útil cuando la tipografía que se emplea muestra las letras muy juntas o para dar efectos concretos al texto.

Ajuste automático entre caracteres: Al activar esta casilla provoca que la separación entre caracteres se realice de modo automático.

Posición: Permite convertir el texto en subíndices, superíndices o dejarlo normal.

URL: Si se quiere que el texto se convierta en un hipervínculo a una dirección Web, lo único que se tiene que hacer es escribir la dirección en el siguiente campo.

Tipo de Línea: Esta opción solo se puede utilizar si el texto que se va incluir es dinámico, de lo contrario aparece sin activar. Esta opción permite determinar cómo se quiere que aparezcan las líneas, como línea única, multilínea o multilínea sin ajuste.

Configuración: Son las clásicas opciones que permiten convertir el texto en Negrita, Cursiva, modificar el color del texto y el tamaño.

Otras Propiedades: Dado que Flash trata los textos como objetos, éstos también tienen anchura, altura y coordenadas.

Tipo de Texto: Esta opción permite seleccionar entre los diferentes tipos de texto mencionados anteriormente, ya sea texto estático, dinámico o de entrada.

Un párrafo no es más que un conjunto de caracteres con propiedades comunes a todos ellos. Estos párrafos admiten ciertas opciones que permiten trabajar con bloques de texto. El Inspector de Propiedades proporciona las siguientes opciones para trabajar con párrafos:

Alinear a la Izquierda: Todas las líneas empezarán a la izquierda dentro del recuadro de texto que se haya definido.

Alinear al Centro: Las líneas se distribuyen a la derecha y a la izquierda del punto medio del párrafo.

Alinear a la Derecha: Todas las líneas empezarán a la derecha dentro del recuadro de texto que se haya definido.

Justificar: El texto se distribuye tanto a la derecha como a la izquierda dentro del recuadro de texto que se haya definido.

¡Alerta 2! Certified Associate Las imágenes más recomendables para

usar en el diseño Web son las que poseen la extensión JPG y GIFS.

Las propiedades del texto como la fuente, color, tamaño, etc. Se pueden modificar desde el inspector de propiedades.

Las propiedades del color de fondo y del texto pueden afectar la lectura del documento impreso.

Recordar la diferencia entre una imagen mapa de bits y una imagen vectorial y sus características principales.

Saber que al importar una imagen al escenario se agrega automáticamente a la Biblioteca.

Es importante saber los diferentes tipos de texto que se utilizan en Flash y las diferentes características de cada uno.

EjerciciosRealizar el siguiente ejercicio que en donde se aplican los conocimientos relacionados con imágenes y texto:

1. Abrir un archivo nuevo de Flash.

2. Importar al escenario una imagen. Se sugiere buscar una imagen en Internet de algún tema de interés.

3. Con la herramienta Selección, colocarla en el centro del escenario. Se puede hacer uso de la cuadricula y guías.

4. De ser necesario, hacer uso de las herramientas Transformación Libre o Subselección para modificar las características de la imagen y ubicarla en espacio seleccionado.

5. Seleccionar un color apropiado para el fondo del escenario, que concuerde con los colores de la imagen.

6. Seleccionar la herramienta Texto y con ella hacer clic en cualquier parte del escenario para escribir un titulo.

7. Hacer uso del Inspector de Propiedades para modificar el titulo de acuerdo al diseño en cuanto a:

a. Color b. Fuentec. Formatod. Tamaño e. Alineación

8. Verificar que el tipo de texto sea Estático.

9. Nuevamente seleccionar la herramienta Texto y hacer clic en cualquier espacio libre del escenario. Escribir un subtitulo relacionado con el tema de elección.

10. Arrastrar el texto a la ubicación.

11. En el Inspector de Propiedades cambiar el tamaño de letra, que sea jerárquicamente menor al tamaño de letra del titulo, sin que se pierda la legibilidad.

La siguiente imagen muestra un ejemplo del diseño del ejercicio anterior:

TEMA 4: Fotogramas y fotogramas clave

Como ya se menciono anteriormente los fotogramas definen los incrementos en la línea de tiempo y que el orden en que aparecen los fotogramas en la línea de tiempo

determina el orden en que aparecen cuando se reproduce un documento de Flash. Se pueden organizar los fotogramas clave de la línea de tiempo para editar la secuencia de los eventos de una animación.

Tipos de FotogramaLos Fotogramas Clave: Son fotogramas especiales con los que definen un cambio en una animación, ya sea cambiando las propiedades de un objeto como lo puede ser el tamaño, la forma o la ubicación.

Los Fotogramas Clave Vacíos: Son fotogramas clave en los cuales se borra todo el contenido anterior al fotograma.

Un fotograma clave se indica en la línea de tiempo con un círculo negro sólido. El fotograma donde termina el intervalo de un fotograma clave tiene un pequeño rectángulo blanco. Un fotograma clave vació se indica con un círculo sin relleno. En la siguiente imagen de la línea de tiempo se pueden apreciar estos elementos:

Trabajo con fotogramas en la línea de tiempo

En la línea de tiempo, se trabaja con fotogramas y fotogramas clave, colocándolos en el orden en el que desea que aparezcan los objetos de los fotogramas. Puede cambiar la longitud de una animación interpolada arrastrando un fotograma clave en la línea de tiempo.

Se pueden realizar las siguientes modificaciones tanto en los fotogramas como en los fotogramas clave:

Insertar, seleccionar, eliminar y mover fotogramas y fotogramas clave.

Arrastrar fotogramas y fotogramas clave a una nueva posición en la misma capa o en otra capa.

Copiar y pegar fotogramas y fotogramas clave.

Convertir fotogramas clave en fotogramas.

Fotograma clave

FotogramaFinal del intervalo del fotograma calve

Fotograma clave vacío

Arrastrar un elemento desde el panel Biblioteca hasta el escenario y añadir el elemento al fotograma clave actual.

Flash ofrece dos métodos para seleccionar fotogramas en la línea de tiempo. Con la selección basada en los fotogramas que es la forma predeterminada, que es seleccionado los fotogramas individuales en la línea de tiempo. En la selección basada en el tamaño, al hacer clic en cualquier fotograma de una secuencia, se selecciona toda la secuencia de fotogramas, desde un fotograma clave hasta el siguiente.

Insertar fotogramas en la línea de tiempo

Para insertar cualquier tipo de fotograma en la línea de tiempo se puede seguir algunos los siguientes métodos:

Seleccionar Menú Insertar > Línea de tiempo > Fotograma.

Para crear un fotograma clave nuevo, se selecciona Menú Insertar > Línea de tiempo > Fotograma clave, o haga clic con el botón derecho del ratón en el fotograma donde se desea colocar un fotograma clave y elija Insertar fotograma clave en el menú contextual.

Para crear un nuevo fotograma clave vacío, se selecciona Menú Insertar > Línea de tiempo > Fotograma clave vacío, o haga clic con el botón derecho del ratón en el fotograma donde desee colocar el fotograma clave y elija Insertar fotograma clave vacío en el menú contextual.

Las siguientes imágenes muestran los métodos para insertar fotogramas, fotogramas clave y fotogramas clave vacíos:

Seleccionar fotogramas en la Línea de tiempoPara seleccionar uno o varios fotogramas de la línea de tiempo se pueden utilizar los siguientes métodos:

Para seleccionar un fotograma, haga clic en el fotograma. Si ha activado la selección basada en el tamaño en Preferencias, al hacer clic en el fotograma se seleccionará la secuencia de fotogramas que hay entre dos fotogramas clave.

Para seleccionar varios fotogramas continuos, mantenga presionada la tecla Mayús y haga clic en los fotogramas.

Para seleccionar varios fotogramas no continuos, con la tecla Control presionada haga clic en los fotogramas.

Para seleccionar todos los fotogramas seleccione Menú Edición > Línea de tiempo > Seleccionar todos los fotogramas.

Eliminar o modificar un fotograma o fotograma clave Para eliminar o modificar un fotograma o fotograma clave se pueden utilizar los siguientes métodos:

Para eliminar un fotograma, un fotograma clave o una secuencia de fotogramas, seleccione el fotograma, el fotograma clave o la secuencia y seleccione Menú Edición > Línea de tiempo > Quitar fotogramas, o haga clic con el botón derecho del ratón en el fotograma, el fotograma clave o la secuencia de fotogramas y seleccione Quitar fotogramas en el menú contextual. Los fotogramas de alrededor permanecen intactos.

Para mover un fotograma clave o secuencia de fotogramas y su contenido, arrastre el fotograma clave o secuencia hasta la ubicación deseada.

Para alargar la duración de un fotograma clave, arrastre con la tecla Alt presionada el fotograma clave hasta el fotograma final de la nueva duración de la secuencia.

Para copiar un fotograma clave o una secuencia de fotogramas, con la tecla Alt presionada, haga clic y arrastre el fotograma clave a la nueva ubicación.

Para copiar y pegar un fotograma o una secuencia de fotogramas, seleccione el fotograma o secuencia y seleccione Menú Edición > Línea de tiempo > Copiar fotogramas. Seleccione el fotograma o la secuencia que desea sustituir y seleccione Menú Edición > Línea de tiempo > Pegar fotogramas.

Para convertir un fotograma clave en un fotograma, seleccione el fotograma clave y elegir Menú Edición > Línea de tiempo > Borrar fotogramas, haga clic con el botón derecho del ratón en el fotograma y seleccione Borrar fotograma clave en el menú contextual. El fotograma clave eliminado y todos los

fotogramas hasta el fotograma clave siguiente se sustituirán con el contenido del fotograma que preceda al fotograma clave eliminado.

Para cambiar la longitud de una secuencia interpolada, arrastre el fotograma clave inicial o final a la derecha o la izquierda.

Para añadir un elemento de la biblioteca al fotograma clave actual, arrastre el elemento desde el panel Biblioteca hasta el escenario.

¡Alerta 3! Certified Associate Conocer los difentes tipos de fotogramas y

que caracteristicas tiene cada uno.

Saber como insertar, eliminar o modificar los diferentes tipos de fotogramas.

TEMA 5: Símbolos, Instancias y la Biblioteca

Los símbolos provienen de objetos que han sido creados utilizando herramientas que proporciona Flash o bien importando algún grafico. Estos objetos al ser transformados en símbolos, son incluidos en la biblioteca al momento de ser creados, lo que permite que sean utilizados en varias ocasiones, ya sea en el mismo o en otro documento o proyecto.

Símbolos e InstanciasUn símbolo es un grafico, un botón, o clip de película que se crea una vez y se puede utilizar cualquier numero de veces en la película. Como ya se mencionó cualquier símbolo que se crea es colocado automáticamente en la zona de almacenamiento llamada Biblioteca de símbolos o del documento actual.

Una instancia es una copia de un símbolo que se encuentra en el escenario. Una instancia puede ser de diferente de su símbolo en tamaño, color y función. Para crear una instancia de un símbolo, se arrastra el símbolo de la biblioteca al escenario. Una

vez que de haya creado una instancia se pueden utilizar las opciones de color del Inspector de Propiedades para cambiar sus valores de brillo, tinte, alfa o color.

La edición de un símbolo actualiza automáticamente todas sus instancias, pero la aplicación de efectos a una instancia de un símbolo actualiza sólo a esa, la última.

Ventajas en el uso de SímbolosEl uso de los símbolos tiene una serie de ventajas. Los símbolos añaden interactividad a los documentos. Ahorran espacio y reducen el tiempo de descarga de una animación terminada, ya que Flash no tiene que guardar información duplicada para cada instancia. Por ejemplo, si se crea un símbolo de una rueda animada, se puede utilizar varias instancias del símbolo para crear las ruedas de un tren. El resultado es un archivo más pequeño del que hubiera resultado si se hubiera creado rueda por rueda por separado. Los símbolos también ayudan a mantener coherencia en todo el documento de Flash. Por ejemplo, si se tienen botones en todo el documento, el uso de símbolos asegura que todos los botones se vean igual. Cuando se utilizan símbolos para crearlos, se pueden editar fácilmente todas las instancias de botones en un documento de una sola vez. También se pueden utilizar los símbolos para compartir el contenido entre distintos documentos.

Tipos de SímbolosFlash tiene tres tipos de símbolos, cada símbolo tiene una línea de tiempo y escenario únicos, con capas. Cuando se crea un símbolo, se elige el tipo de símbolo, dependiendo de la aplicación dentro de la animación. Los tipos de símbolos que se utilizan en Flash son los siguientes:

Símbolos Gráficos: Se utilizan para imágenes estáticas y para piezas reutilizables de animación que están vinculadas en la línea de tiempo principal y que además operan en sincronización con la línea de tiempo principal. Los

controles y sonidos interactivos no funcionarán en una secuencia de animación contenida en un símbolo grafico.

Símbolos de Botón: Se utilizan para crear botones interactivos que responden a los clics del ratón, imágenes de sustitución y otras acciones de los visitantes del sitio. Se deben definir los gráficos asociados con los varios estados del

botón y luego asignar acciones a una instancia de botón.

Símbolos de Clip de Película: Se utilizan para crear piezas reutilizables de animación. Un clip de película tiene su propia línea de tiempo, que es independiente de la línea de tiempo principal. Los clips de película contienen

controles interactivos, sonidos y hasta otras instancias de clip de película.

La BibliotecaComo se ha mencionado la biblioteca es un contenedor de cada película Flash que organiza los símbolos, sonidos, gráficos de mapas de bits, video y otros elementos. La biblioteca esta adjunta al documento en que se esta trabajando. Para abrir el panel biblioteca, seleccione Menú Ventana > Biblioteca. Si se comparte el documento con otra persona y ésta lo abre en su equipo, vera la misma biblioteca de objetos. También puede abrir las bibliotecas de otros documentos seleccionando Menú Archivo > Importar > Abrir Biblioteca Externa… A medida que los documentos se vuelvan más complejos resultara útil usar carpetas para ordenar los símbolos y grupos relacionados dentro de la biblioteca.

Los símbolos contenidos en la biblioteca están identificados por su nombre y por un icono que representa el tipo de símbolo. En la siguiente imagen se muestra la biblioteca con los tres diferentes tipos de símbolo y con su icono que lo identifica:

Símbolos Gráficos

Símbolos de Botón

Símbolos de Clip de Película

Para utilizar un símbolo de una biblioteca bastara con hacer clic en el nombre de dicho símbolo dentro de la biblioteca y arrastrarlo a cualquier lugar del área de trabajo

Crear Símbolo GráficoPara crear un símbolo gráfico se deben seguir los siguientes pasos:

1. Dibujar una forma en el escenario o importar una imagen.

2. Si el objeto es un objeto dibujado, utilice la herramienta selección y haga doble clic en el objeto para seleccionarlo. Si el objeto es una imagen importada utilice la herramienta selección y solo haga clic en el objeto para seleccionarlo.

3. En la barra menú seleccione Modificar > Convertir en Símbolo… y se abre el siguiente cuadro de dialogo.

4. Escribe el nombre para el símbolo en el cuadro de texto Nombre, seleccione la opción grafico y haga clic en Aceptar.

Crear Símbolo BotónAl igual que otros símbolos de Flash, los botones tienen su propia línea de tiempo. Esta es independiente y esta formada por cuatro fotogramas, uno para cada estado del botón:

Reposo: Aspecto por defecto del botón, es decir cuando el apuntador del ratón no esta situado sobre él.

Sobre: Apariencia del botón cuando se posiciona el cursor sobre él.

Presionado: Aspecto que se desea que posea el botón mientras esté presionado.

Zona activa: Aquí se indica el área en el que será sensible el botón.

El proceso para crear símbolo del tipo Botón es el siguiente:

1. Sin tener seleccionado nada en el escenario hacer clic en el Menú Insertar > Nuevo Símbolo… Aparecerá el siguiente cuadro de dialogo.

2. Escribir el nombre para el Símbolo y seleccionar el tipo Botón.

3. Hacer clic en Aceptar.

4. Flash cambia al modo de edición de símbolos.

5. Se muestran los cuatro estados para el botón: Reposo, Sobre, Presionado y Zona activa.

6. El primer fotograma Reposo, es un fotograma clave vacío.

7. Para crear la imagen del botón del estado Reposo se pueden realizar una de las siguientes opciones:

a. Utilizar alguna de las herramientas de dibujo para trazar un objeto como un círculo o un cuadrado.

b. Importar un gráfico con Menú Archivo > Importar.

c. Colocar una instancia de otro símbolo en el escenario, en un botón puede utilizarse un símbolo clip de película o de gráfico, pero no puede utilizarse otro botón.

8. Dar clic en el segundo fotograma Sobre.

9. Hacer clic derecho y elegir Insertar Fotograma Clave.

10. Flash inserta un fotograma clave que duplica el contenido del fotograma Sobre.

11. Modificar la imagen del Botón para el estado Sobre, si es requerido se puede cambiar el color, la forma o sustituir por otro objeto.

12. Repetir del paso 9 al 11 para los fotogramas Presionado y Zona activa.

13. El fotograma Zona Activa no se muestra visible en el escenario pero define el área del botón que responde cuando se hace clic. Se recomienda que el fotograma de Zona activa sea un área sólida y lo suficientemente grande para abarcar todos los elementos de los fotogramas Reposo, Sobre y Presionado. Si no se especifica un fotograma Zona activa se utilizara automáticamente la imagen del estado Reposo como fotograma Zona activa.

14. Al terminar de editar el botón hacer clic en Menú Edición > Editar documento.

15. Arrastrar el botón recién creado desde el panel de biblioteca al escenario para crear una instancia del símbolo en el documento.

16. Por ultimo ejecutar Menú Control > Probar película. Se pueden observar los cambios de los diferentes estados que se definieron para el botón.

Crear Símbolo Clip de PelículaComo ya se ha mencionado un Clip de Película o simplemente Clip, es una película en si misma, pero que está incluida dentro de otra película y, a su vez puede contener también películas insertadas en él. Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su propia línea de tiempo. Sin embargo, y a diferencia de los Gráficos, 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. Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o botón, así como cualquier objeto creado con Flash, ya que un clip es realmente una película.

El proceso para crear símbolo del tipo Clip de Película es el siguiente:

1. Sin tener seleccionado nada en el escenario hacer clic en el Menú Insertar > Nuevo Símbolo… Aparecerá el siguiente cuadro de dialogo.

2. Escribir el nombre para el Símbolo y seleccionar el tipo Clip de película.


4. Flash cambia al modo de edición de símbolos.

5. Utilizando las herramientas necesarias realizar el siguiente dibujo en el primer fotograma de la línea de tiempo del símbolo clip de película.

6. Seleccionar el segundo fotograma de la línea de tiempo en insertar un fotograma clave.

7. Al insertar el nuevo fotograma clave, el dibujo realizado aparecerá nuevamente en el nuevo fotograma. Borrar las alas del dibujo anterior y volverlas a dibujar paro esta vez en una nueva posición. Puede utilizar la herramienta Papel Cebolla para visualizar el fotograma anterior y así ubicar las alas en su nueva posición. Como se muestra en la siguiente figura:

8. Al terminar de editar el botón hacer clic en Menú Edición > Editar documento.

9. Arrastrar el botón recién creado desde el panel de biblioteca al escenario para crear una instancia del símbolo en el documento.

10. Por ultimo ejecutar Menú Control > Probar película. Se pueden observar como la instancia del símbolo mueve las alas. Esta animación es independiente de la línea de tiempo principal.

Edición de SímbolosCuando se crea un símbolo, Flash actualiza todas las instancias del mismo en el documento. Flash tiene diferentes métodos para editar símbolos:

Los símbolos se editan usualmente en el modo Edición de símbolos en la biblioteca. En este modo se permite modificar el símbolo en cuanto forma, tamaño, color etc.

Se puede editar el símbolo en función de los otros objetos en el escenario, mediante la opción Menú Edición > Editar en contexto. Otros objetos aparecen atenuados para diferenciar del símbolo que se está editando. El nombre del símbolo que se esta editando se muestra en la barra de edición sitiada en la parte superior del escenario, a la derecha del nombre del la escena.

Se puede editar un símbolo en otra ventana, mediante la opción Menú Edición > Editar en nueva ventana. La edición de un símbolo en una ventana independiente permite ver a la vez el símbolo y la línea de tiempo principal. El nombre del símbolo que se está editando se muestra en la barra de edición situada en la parte superior del escenario.

Cómo editar un símbolo en el modo edición de símbolosPara editar un símbolo, desde el modo de edición de edición de símbolos, se deben realizar los siguientes pasos:

1. Hacer doble clic en el icono del símbolo el Panel de la Biblioteca.

+

2. Se presenta el modo de edición del símbolo. Se puede observar en la barra de Edición el nombre del símbolo que se esta editando.

3. Utilizar la herramienta de Transformación Libre para modificar la forma y cambiar el color de la figura.

4. Salir del modo Edición haciendo clic en el botón Atrás situado a la izquierda de la barra de Edición, en la parte superior del escenario. Otra forma es haciendo clic en el icono de la escena para volver a la escena con la que se esta trabajando.

Cómo editar un símbolo en contextoPara editar un símbolo en contexto se debe realizar el siguiente proceso:

1. Seleccionar una instancia del símbolo en el escenario.

2. Hacer clic derecho sobre el símbolo y seleccionar en el menú contextual Editar en contexto, otra forma es hacer doble clic sobre el símbolo. Se puede observar en la figura que los otros objetos aparecen atenuados para diferenciar del símbolo que se está editando.

3. Editar el símbolo como se desee.

4. Salir del modo Edición haciendo clic en el botón Atrás situado a la izquierda de la barra de Edición, en la parte superior del escenario. Otra forma es haciendo clic en el icono de la escena para volver a la escena con la que se esta trabajando.

¡Alerta 4! Certified Associate Saber las caracteristicas los diferentes tipos

de simbolos en Flash: Simbolo Grafico, Simbolo Boton y Simbolo Clip de Pelicula.

Saber la diferencia de los difentes estados del Simbolo Boton: Reposo, Sobre, Presionado y Zona Activa.

Saber las tres formas de editar un simbolo en Flash: Modo Edición, Editar en Contexto y Editar en Nueva Ventana.

Saber que la biblioteca es un contenedor de cada animación en Flash que organiza los símbolos, sonidos, gráficos de mapas de bits, video y otros elementos.

TEMA 6: Interpolaciones de Movimiento y Forma

Flash ofrece varios métodos para crear una secuencia de animación, entre ellos animación interpolada y animación fotograma por fotograma. La animación fotograma por fotograma incluye una serie de fotogramas clave con una imagen diferente en cada fotograma. Aunque esto puede ser útil para animaciones complejas, Flash es capaz de crear animaciones automáticamente interpolando imágenes. La palabra interpolación proviene de una técnica de animación en la que un artista dibuja el punto inicial en un movimiento y el punto donde termina el movimiento. Después, el artista tiene que dibujar todas las etapas intermedias para poder apreciar el movimiento. Para interpolar un elemento en el escenario de Flash, se deben establecer los fotogramas inicial y final para el elemento, crear una interpolación entre estos fotogramas y dejar que flash rellene automáticamente los fotogramas intermedios. Hay dos tipos de interpolaciones en Flash: Interpolaciones de Movimiento e Interpolaciones de Forma.

Interpolación de MovimientoEs la técnica básica de las animaciones en Flash. Permite desplazar un símbolo de un lugar a otro en el escenario o modificarlo en tamaño, siendo necesarios únicamente dos fotogramas, lo que puede optimizar el rendimiento de la película.

Se puede utilizar una interpolación de movimiento cualquiera de los siguientes elementos:

Una instancia de un símbolo grafico, botón, o clip de película.

Un objeto agrupado, es decir una colección de formas dibujadas que se han agrupado.

Un bloque de texto.

Cuando se utiliza la interpolación de movimiento para animar la instancia de un símbolo, se pueden cambiar las siguientes propiedades:

Color de tinta

Alfa que es el efecto de transparencia

Posición

Tamaño

Crear una Interpelación de Movimiento con un Símbolo GráficoPara crear una interpolación de movimiento con un símbolo gráfico se siguen los siguientes pasos:

1. Dibujar una forma en el escenario.

2. Seleccione la herramienta Selección y hacer doble clic en objeto para seleccionarlo todo.

3. Seleccione Menú Modificar > Convertir en símbolo… Se abre el cuadro de dialogo Convertir en símbolo.

4. Asignar el nombre para el símbolo en el cuadro de texto Nombre, seleccionar la opción Gráfico y hacer clic en Aceptar. No se pueden aplicar interpolaciones de movimiento a las formas. Para aplicar interpolación de movimiento, primero se debe de convertir la forma en un símbolo.

5. Seleccionar el fotograma 10 en la línea de tiempo.

6. Seleccionar Menú Insertar > Línea de tiempo > Fotograma clave. Esto hará que la interpolación de movimiento dure 10 fotogramas. Se puede observar que cuando se inserta un fotograma clave, Flash rellena el área entre el ultimo fotograma en la capa actual y en el nuevo fotograma clave con el mismo contenido. Los fotogramas del 1 al 10 contienen el mismo símbolo que se creo.

7. Asegurar de que el fotograma 10 se encuentre seleccionado. Este es el fotograma final para la interpolación de movimiento. Seleccione la instancia del símbolo en el fotograma 10 y realizar uno o más de los siguientes cambios en el inspector de propiedades:

Cambio de Color: En el Inspector de Propiedades del símbolo grafico, seleccionar Tinta en la lista desplegable Color. Seleccionar 100 % para Valor y cambiar el color en el cuadro de Color.

Efecto de desaparición: En el Inspector de propiedades del símbolo grafico, seleccionar Alfa de la lista desplegable Color. Reducir el porcentaje del Valor de alfa para obtener una mayor transparencia. Por ejemplo un valor alfa de 0% hace que el objeto desaparezca.

Posición: Usar la herramienta selección para mover el objeto a otra posición del escenario. También se pueden modificar los valores de X, Y en el Inspector de Propiedades.

Tamaño: Seleccionar el objeto y a continuación elegir la herramienta de Transformación Libre. Y Arrastrar los controladores del objeto para aumentar o disminuir el tamaño del objeto o girar el objeto.

8. Seleccionar cualquier fotograma clave intermedio dentro del los 10.

9. En el Inspector de Propiedades del fotograma, seleccionar Movimiento de la lista desplegable Animar. En la línea de tiempo, la interpolación esta representada por una flecha sólida sobre un fondo azul que va desde el fotograma clave inicial al fotograma clave final.

10. En el Inspector de Propiedades del fotograma, ajustar una o más de las propiedades de interpolación de movimiento:

Aceleración: Controla la velocidad con la que el objeto empieza o termina la interpolación de movimiento. Por ejemplo, un número alto para Velocidad hace que un objeto comience a interpolarse rápidamente, pero termine de hacerlo lentamente.

Girar: Gira el objeto en sentido de las manecillas del reloj o en contra de las manecillas de reloj un numero designado de veces.

Escalar: Mantiene iguales las proporciones del objeto cuando el objeto cambia el tamaño de éste.

Orientar según trazado: Añade una capa guía, el objeto se vincula al trazado dibujado en la capa guía.

Sincronizar símbolos (Sinc): Inicia y detiene la interpolación de todos los objetos en el escenario al mismo tiempo.

Ajustar: Mantiene alineado el objeto interpolado con una cuadricula visible para controlar el espaciado.

11. Seleccionar Menú Control > Probar película.

Interpolación de FormaEn Flash, una forma es un objeto basado en vectores o en una serie de objetos, como lo puede ser cualquier cosa que se dibuje con las herramientas de dibujo. Para que una forma pueda ser animada con una interpolación de forma, ésta no puede ser un objeto agrupado, un mapa de bits o un símbolo. Se puede aplicar interpolación de forma al texto, pero primero tendrá que convertir el texto en una forma separándolo.

Se puede utilizar una interpolación de forma para:

Interpolar la forma de un objeto, es decir, transformar una forma en otra.

Interpolar el color de un objeto incluyendo un color con transparencia.

Interpolar la posición de un objeto en el escenario, de manera similar a una interpolación de movimiento, pero entre formas en lugar de símbolos.

Interpolar texto que ha sido separado.

Interpolar un mapa de bits que ha sido separado para convertirlo en una forma.

No se puede utilizar interpolación de forma para:

Interpolar objetos agrupados.

Interpolar símbolos.

Interpolar texto que no ha sido separado.

Interpolar mapas de bits que no han sido separados.

Las interpolaciones de forma pueden usar mucho más memoria que las interpolaciones de movimiento. Es recomendable utilizar formas simples en las interpolaciones de forma.

En una interpolación de forma se puede cambiar las siguientes propiedades:

Color de tinta.

Alfa efecto de desaparición o transparencia.

Forma.

Crear una Interpelación de Forma utilizando TextoPara crear una interpolación de forma utilizando texto se siguen los siguientes pasos:

1. Seleccionar la Herramienta texto y escribir una palabra o frase en el escenario.

2. Seleccionar el texto con ayuda de la Herramienta selección y seleccionar Menú Modificar > Separar. Ésta acción separa las palabras en letras independientes. Con las letras aun seleccionadas, seleccionar nuevamente Menú Modificar > Separar, para convertir las letras en formas.

Letras separadas al aplicar una ves separar Formas al aplicar dos veces separar

3. Seleccionar el fotograma 10 en la Línea de Tiempo.

4. Seleccionar Menú Insertar > Línea de Tiempo > Fotograma clave. Esto hará que la interpolación dure 10 fotogramas.

5. Asegurarse de que el fotograma 10 este todavía seleccionado y realizar el siguiente cambio en la forma original del texto: eliminar el objeto en fotograma clave 10, escribir un texto diferente en una nueva posición dentro del escenario. Seleccionar Menú Modificar > Separar hasta que el bloque de texto sea una forma como se indica en el Inspector de propiedades.


7. En el Inspector de Propiedades del fotograma, seleccionar Forma de la lista desplegable Animar. En la línea de tiempo, la interpolación esta representada por una flecha sólida sobre un fondo verde que va desde el fotograma clave inicial al fotograma clave final.

8. En el Inspector de Propiedades del fotograma, ajustar una o más de las propiedades de interpolación de forma:

Aceleración: Controla la velocidad con la que el objeto empieza o termina la interpolación de forma. Por ejemplo un número alto para la velocidad hará que

un objeto comience a interpolarse rápidamente, pero termine de hacerlo lentamente.

Mezcla (Distributivo): Crea una animación en la que las formas intermedias son más suaves y más irregulares.

Mezcla (Angular): Crea una animación que conserva las esquinas y las líneas rectas en las formas intermedias.

9. Seleccionar Menú Control > Probar película para probar la película.

Crear una Interpelación de Forma utilizando ImágenesPara crear una interpolación de forma utilizando imágenes se siguen los siguientes pasos:

1. Seleccionar la Menú Archivo > Importar > Importar al escenario para agregar una imagen al escenario. Si la imagen es un mapa de bits se debe separar. Si la imagen es un dibujo vectorial agrupado se debe desagrupar completamente. Para separar un mapa de bits seleccionar Menú Modificar > Separar. Para desagrupar una imagen seleccionar Menú Modificar > Desagrupar. En el caso de que la imagen no se trate de un mapa de bits y se encuentre en otro formato se deberá seleccionar la imagen y aplicar el comando Menú Modificar > Mapa de bits > Trazar Mapa de bits…

2. Seleccionar el fotograma 10 en la Línea de Tiempo.


4. Asegurarse de que el fotograma 10 este todavía seleccionado. Para transformar la imagen original en una nueva imagen elimine el objeto en el fotograma 10 y seleccionar Menú archivo > Importar > Importar a escenario para traer otra imagen externa. Seleccionar Menú Modificar > Separar para convertir el objeto en una forma si es necesario. O bien si la imagen no corresponde a un mapa de bits será necesario ejecutar el comando Menú Modificar > Mapa de bits > Trazar mapa de bits…



7. En el Inspector de Propiedades del fotograma, ajustar una o más de las propiedades de interpolación de forma.


Crear una Interpelación de Forma utilizando Objetos DibujadosPara crear una interpolación de forma utilizando objetos dibujados se siguen los siguientes pasos:

1. Seleccionar una herramienta de forma como la de rectángulo u óvalo y dibujar el objeto en el escenario.

2. Seleccionar el fotograma 10 de la Línea de Tiempo.


4. Asegurarse de que el fotograma 10 este todavía seleccionado. Para realizar el efecto animación de cambio de forma amorfa, hacer clic en el escenario con la herramienta Selección para quitar la selección del objeto. Y arrastrar el borde para cambiar la forma del objeto.



7. En el Inspector de Propiedades del fotograma, ajustar una o más de las propiedades de interpolación de forma.


¡Alerta 5! Certified Associate Saber las caracteristicas de los diferentes

tipos de interpolacion: Movimiento y Forma.

Cuando se puede aplicar interpolación de movimiento o de forma.

A que tipo de objetos se le puede aplicar interpolación de movimento o de forma.

TEMA 7: Máscaras y Guía de Movimiento

MáscarasUna máscara en Flash es un tipo especial de capa que permite descubrir partes selectas de otra capa. Es decir un hueco que funciona como una ventana a través de la cual se puede ver el contenido de las capas situadas por debajo.

Un elemento máscara puede ser una forma rellena, un bloque de texto, una instancia de un símbolo grafico. Para crear efectos dinámicos, se puede animar una capa máscara.

En lugar de tener un trazo o un relleno, el elemento de máscara actúa como una ventana que muestra el área de las capas vinculadas situadas por debajo. El resto de la capa de máscara oculta todos los elementos excepto los que se muestran a través del elemento máscara. Una capa máscara sólo puede contener un elemento de máscara.

Cómo crear una MáscaraLos pasos del proceso para la creación de máscaras se detallan a continuación:

1. En un documento en blanco seleccionar la herramienta Texto y escribir cualquier texto sobre el escenario.

2. Crear una nueva capa y asignarle el nombre máscara. Colocar esta capa directamente encima de la capa que contiene el texto del punto anterior.

3. Utilizar la herramienta Óvalo o Rectángulo, para definir el área de la capa máscara que se desea transparente. Hacer que el área de la máscara que va ser transparente sea de un color sólido y perceptible. Esto ayudará a ver donde esta el área transparente. Convertir la forma en un símbolo Gráfico, seleccionándola toda, dar clic derecho sobre la forma seleccionada y en el menú contextual seleccionar Convertir en símbolo…

4. Hacer clic derecho en la capa máscara y seleccionar Máscara en el menú contextual. Las dos capas cambian para indicar que la capa inferior se encuentra enmascarada. El nombre de la capa de enmascaramiento tiene una

sangría en este caso Capa 1 y esta debajo de la capa de enmascaramiento en este caso Máscara y su icono cambia a un icono de capa de máscara.

5. Para animar la máscara, agregar un fotograma clave en el fotograma 10 y agregar otro fotograma clave en el fotograma que se encuentra debajo.

6. Con el fotograma 10 de la máscara seleccionado, desbloquear la capa máscara y mover el objeto de máscara.

7. En la capa Máscara, seleccionar un fotograma entre el 1 y el 10. Y en el Inspector de Propiedades del fotograma, seleccionar Movimiento de la lista desplegable Animar.

8. Agregar un fotograma clave en el fotograma 20 y agregar otro fotograma clave en el fotograma que se encuentra debajo. Mover el objeto de máscara a una nueva posición.

9. En la capa Máscara, seleccionar un fotograma entre el 11 y el 20. Y en el Inspector de Propiedades del fotograma, seleccionar Movimiento de la lista desplegable Animar.

10. Agregar un fotograma clave en el fotograma 30 y agregar otro fotograma clave en el fotograma que se encuentra debajo. Mover el objeto de máscara a una nueva posición.

11. En la capa Máscara, seleccionar un fotograma entre el 20 y el 30. Y en el Inspector de Propiedades del fotograma, seleccionar Movimiento de la lista desplegable Animar. Así se aprecia la línea de tiempo:

12. Por ultimo Seleccionar Menú Control > Probar película para probar la película. Se puede observar como se va descubriendo el texto conforme pasa la máscara sobre él.

Guía de MovimientoSe pueden utilizar guías de movimiento para crear interpolaciones de movimiento que son más complejas que las que puede crear con fotogramas clave. Utilizando una guía de movimiento, se puede mover el objeto a lo largo de una trayectoria que se puede crear con las herramientas de dibujo de Flash. Se puede crear una guía de movimiento para una forma, texto o símbolo.

Cómo crear una Guía de MovimientoLos pasos del proceso para la creación de una guía de movimiento se detallan a continuación:

1. En un documento en blanco crear un símbolo Gráfico con las herramientas de dibujo Óvalo o Rectángulo. También se puede utilizar el símbolo clip de película con el mosco realizado anteriormente.

2. Seleccionar Menú Insertar > Línea de tiempo > Guía de movimiento. Flash crea una capa especial llamada Guía.

3. Hacer clic en el primer fotograma de la capa guía.

4. En el escenario, utilizar una de las herramientas de dibujo de Flash, como Lápiz, Pluma, Óvalo o Rectángulo, para dibujar una ruta que guié el movimiento del objeto de animación.

5. En ambas capas insertar un fotograma clave en el fotograma 20.

6. En la capa del objeto, seleccionar cualquier fotograma entre los fotogramas 1 y 20 y en el Inspector de Propiedades del fotograma, seleccionar Movimiento de la lista desplegable Animar.

7. Hacer clic en el primer fotograma de la capa del objeto.

8. Arrastrar el objeto al inicio de la guía. Éste deberá ajustarse cuando se acerque.

9. Hacer clic en el último fotograma de la capa del objeto, es decir el fotograma 20.

10. Arrastrar el objeto al final de la guía. Éste deberá ajustarse cuando se acerque.

11. Por ultimo Seleccionar Menú Control > Probar película para probar la película. Se puede observar como la instancia del símbolo clip de película recorre la trayectoria definida por el lápiz trazada en la capa guía de movimiento.

TEMA 8: Escenas

Una manera apropiada y eficaz de organizar un proyecto de Flash es por medio de escenas. Flash permite el uso de escenas para separa diferentes temas o contenidos en una sola película. Se utilizan sobre todo en animaciones, donde el contexto puede cambiar de una parte a otra.

De este modo se pueden usar escenas para representar u organizar diferentes secciones en la película, por ejemplo, crear una escena de introducción, otra para la película o tema principal y una tercera para el cierre, haciendo más cómoda la edición.

A pesar de que las escenas se trabajan con líneas de tiempo diferentes, al crear el archivo SWF éstas se alinean en orden reproduciéndose una detrás de otra. Es por eso que cuando se trata de un proyecto que demandará interacción por parte del usuario, se requerirá establecer una serie de controles que permita al usuario desplazarse entre una escena y otra.

Agregar, modificar o eliminar escenasPara agregar, modificar o eliminar escenas se debe realizar el siguiente proceso:

1. Desplegar el Panel de Escenas, haciendo la siguiente secuencia Menú Ventana > Paneles de diseño > Escena.

2. Aparecerá el panel Escena.

3. En la esquina inferior derecha se encuentran los botones para trabajar con las escenas.

Crear una animación con varias escenasPara crear una sencilla animación utilizando dos escenas y aplicando máscaras se siguen los siguientes pasos:

1. Agregar texto en el escenario con la Herramienta Texto. Agregar una nueva capa asignarle el nombre Máscara 1.

Duplicar escena Agreg

ar escena

script

Eliminar escena

script

2. Utilizar la herramienta Óvalo para definir el área de la capa Máscara 1 que se desea transparente.

3. Hacer clic derecho en la capa máscara y seleccionar Máscara en el menú contextual.

4. Agregar un fotograma clave en el fotograma 20 de la línea de tiempo y agregar otro fotograma clave en el fotograma que se encuentra debajo.

5. Con el fotograma 20 seleccionado de la máscara, desbloquear la capa máscara y con la Herramienta Transformación Libre agrandar la forma de manera que cubra todo el escenario.

6. En la capa Máscara, seleccionar un fotograma entre el 1 y el 20. En el Inspector de Propiedades del fotograma, seleccionar Forma de la lista desplegable Animar.

7. Agregar un fotograma clave en el fotograma 40 y agregar otro fotograma clave en el fotograma que se encuentra debajo.

8. Con el fotograma 40 seleccionado de la máscara, con la Herramienta Transformación Libre reducir la forma lo más pequeño que se pueda.

9. Agregar una escena, utilizando el Panel escena.

10. Seleccionar Escena 2, del Panel Escena.

11. En la segunda escena, agregar texto en el escenario con la Herramienta Texto. Agregar una nueva capa asignarle el nombre Máscara 2. En la barra de Edición de puede observar el nombre de la escena que se esta editando.

12. Utilizar la herramienta Óvalo para definir el área de la capa Máscara 2 que se desea transparente.

13. Hacer clic derecho en la capa máscara y seleccionar Máscara en el menú contextual.

14. Agregar un fotograma clave en el fotograma 20 y agregar otro fotograma clave en el fotograma que se encuentra debajo.

15. Con el fotograma 20 seleccionado de la máscara, desbloquear la capa máscara y con la Herramienta Transformación Libre agrandar la forma de manera que cubra todo el escenario.

16. En la capa Máscara, seleccionar un fotograma entre el 1 y el 20. En el Inspector de Propiedades del fotograma, seleccionar Forma de la lista desplegable Animar.

17. Por ultimo Seleccionar Menú Control > Probar película para probar la película. Se puede observar como las dos escenas que se realizaron aparecen al probar la película.

TEMA 9: Como iniciar ActionScript

Se puede utilizar ActionScript para añadir interactividad compleja, control de reproducción y visualización de datos en la aplicación. Por ejemplo, se podría animar una imagen de una persona caminando. Mediante la adición de ActionScript, se podría

hacer que la persona animada siga el apuntador del ratón por la pantalla, deteniéndose cada vez que choca con un mueble animado.

Como ya se menciono, ActionScript es un lenguaje de programación orientado a objetos. La programación orientada a objetos es una manera de organizar el código de un programa, utilizando código para definir objetos y luego enviando mensajes entre los objetos.

Para implementar ActionScript en una animación se puede utilizar el modo Asistente de script. Sin embargo los siguientes conceptos pueden ayudar a la implementación de código en la animación:

Clase: El código que define un objeto. Este código costa de propiedades, métodos y eventos. Se puede pensar en los planos de una casa: no se puede vivir en los planos de la casa pero son necesarios para poder construir la casa. Las clases se utilizan para construir objetos.

Objeto: Es una instancia de una clase. Cuando se crea una instancia de un objeto, se debe declarar la clase de la cual ha sido creada y establecer las propiedades. Se pueden crear tantos objetos como se desee a partir de una sola clase, por ejemplo si tiene una clase bicicleta, se pueden crear muchos objetos de bicicleta, cada uno con sus propiedades, es decir, una bicicleta podría ser de color rojo mientras que otra podría ser verde.

Propiedad: Uno de los pedazos de datos agrupados en un objetos. Una propiedad ayuda a definir un objeto: proporciona las características de un objeto. Un objeto canción puede tener propiedades llamadas melodías y titulo. Las propiedades de un objeto se establecen cuando se crea el objeto, pero se pueden cambiar más adelante según sea necesario. Una propiedad es una variable que pertenece al objeto.

Variable: Un nombre que representa un valor en la memoria de la computadora. El nombre de una variable representa un marcador de posición para el valor. Esto permite escribir código incluso si no se sabe todos los posibles valores que un usuario podría proporcionar. Si se crea una variable nombre, se le puede decir al programa que muestre el nombre del visitante sin saber de antemano el nombre de éste.

Método: Es una acción que el objeto puede realizar. Por ejemplo, la clase caballo podría tener un método llamado galope(). Cuando el método galope() es llamado, éste muestra una animación del caballo galopando de un punto otro.

Función: Es un bloque de código que realiza tareas especificas y puede ser reutilizado en un programa. Por ejemplo, se puede crear una función revisarcorreo() para verificar que el texto escrito por un usuario es una dirección de correo electrónico valida. Cada vez que el usuario proporciona una dirección de correo, se puede llamar a revisarcorreo() para asegurarse de que el visitante ha proporcionado texto que puede utilizarse como una dirección de correo electrónico. Si alguna vez se desea actualizar la función, solo se tiene que hacer una vez y no se tendrá que hacer en cada lugar donde deben validarse las direcciones de correo electrónico.

Evento: Algo que sucede en una película de Flash de lo que ActionScript se entera y puede responder. Muchos eventos están relacionados con la interacción del usuario;

por ejemplo, un usuario haciendo clic en un botón presionado una tecla. La técnica para especificar ciertas acciones que deben realizarse a determinados eventos se conoce como gestión de eventos.

Los símbolos en Flash son objetos. Por ejemplo, se han trabajado con símbolos clip de película que se han colocado como una copia del mismo en el escenario. Este símbolo de clip de película es también un objeto en ActionScript; es una instancia de la clase MovieClip.

Se pueden modificar las características de cualquier clip de película. Cuando se selecciona, el inspector de propiedades muestra algunas características que se pueden cambiar, como las coordenadas X y Y, o su ancho. También se pueden hacer ajustes de color como cambiar el valor alfa de la transparencia. Otras herramientas de Flash permiten hacer más cambios, como la herramienta de Transformación Libre para girar el símbolo. Todas las otras herramientas que permiten modificar el símbolo clip de película en el entorno de edición de Flash son también cosas que se pueden realizar en ActionScript.

El Modo Asistente de ScriptSe puede añadir ActionScript en el entorno de edición mediante el panel de Acciones. El panel de Acciones proporciona el modo Asistente script para simplificar el proceso de codificación.

En el modo Asistente script, se puede añadir ActionScript en un documento de Flash sin tener que escribir el código. Se pueden seleccionar acciones de la caja de herramientas Acciones y establecer las opciones para cada acción en el área de

Ventana de script

Caja de herramientas Acciones

Navegador de scripts

parámetros. Se debe saber algo sobre qué funciones utilizar para realizar tareas específicas.

Usar ActionScript para detener una PelículaSe ha podido observar que cuando se prueba una película o animación con Menú Control > Probar película, al finalizar ésta vuelve a comenzar. Para detener una animación con ActionScript para que no vuelva a comenzar se pueden realizar los siguientes pasos:

1. Inicie Flash con el documento realizado del mosco que contiene una guía de movimiento. Lo que se quiere realizar con este documento es que el símbolo clip de película realice la acción de seguir la trayectoria solo una vez sin que se repita.

2. Seleccionar Menú > Ventana > Paneles de desarrollo > Acciones, para visualizar el Panel Acciones. Las clases están organizadas en paquetes. Se desea añadir la acción stop() a la línea de tiempo.

3. Seleccionar el último fotograma de la capa donde se encuentra el clip del Película del mosco. Es decir donde ya terminó de recorrer la trayectoria.

4. En la Caja de Herramientas Acciones, en el lado izquierdo del panel Acciones, ubicar el paquete de Funciones globales.

5. Dar clic y mostrar las clases que contiene.

6. Ubicar la clase Control de Línea de Tiempo y hacer clic para expandirlo. Para ubicar los métodos disponibles para la Línea de Tiempo.

7. Ubicar el método stop() y realizar uno de los siguientes procedimientos.

Hacer clic sobre el método stop().

Arrastra el método stop() hasta la Ventana de script.

8. El código para aplicar el método stop() aparece en la Ventana de script.

9. El último fotograma cambia agregándose una a indicando que se ha insertado código de ActionScript.

10.Por ultimo Seleccionar Menú Control > Probar película para probar la película. Se puede observar que la película ya no se vuelve a repetir y se detiene en el último fotograma de la animación.

Usar ActionScript para ir a otro FotogramaSe puede usar ActionScript para controlar el flujo de una animación. La siguiente activada muestra como poder ir de un fotograma a otro utilizando ActionScript, para esta actividad se utilizará el símbolo clip de película del mosco que se realizó anteriormente:

1. Crear un símbolo botón de reproducir o play y otro de detener o stop.

2. Arrastrar el símbolo botón de reproducir Play al escenario.

3. Insertar un fotograma clave vacío en el fotograma 2 de esa capa e insertar el botón de detener Stop.

4. Crear una capa nueva, en esa capa seleccionar el fotograma 2 e insertar un fotograma clave.

5. Con el fotograma 2 seleccionado de la segunda capa, arrastrar el clip de Película del mosco al escenario. El primer fotograma de la segunda capa debe ser un fotograma clave vacío.

6. Seleccionar en el primer fotograma de la capa 1 y abrir el panel de Acciones.

7. En la Caja de Herramientas Acciones, en el lado izquierdo del panel Acciones, ubicar el paquete de Funciones globales.

8. Ubicar la clase Control de Línea de Tiempo y hacer clic para expandirlo. Al expandirlo ubicar los métodos disponibles para la Línea de Tiempo.

9. Ubicar el método stop() y asignarlo al fotograma seleccionado. Para la que la animación permanezca en ese fotograma cuando sea reproducido.

10. Seleccionar el segundo fotograma de la capa 1 y asignarle el método stop() al igual que al fotograma 1 de esa misma capa.

11. Hacer clic en cualquier parte del escenario para quitar la selección del fotograma y dar clic sobre el botón de Play del primer fotograma de la capa 1 para seleccionarlo.

12. Con el botón Play seleccionado, en la Ventana Script escribir el siguiente código:

on (press) { //Significa este código entre llaves se realiza en estado Presionado del botón.

gotoAndPlay(2); //Saltar y reproducir al fotograma indicado entre paréntesis.}

13. Seleccionar ahora el botón Stop, en la Ventana Script escribir el siguiente código:

on (press) { //Significa este código entre llaves se realiza en estado Presionado del botón.

gotoAndPlay(1); //Saltar y reproducir al fotograma indicado entre paréntesis.}

14. Por ultimo Seleccionar Menú Control > Probar película para probar la película. Se puede observar que los botones se utilizan para interactuar entre un fotograma y otro.

Otros controladores o acciones básicas para brindar interactividad

Existen algunos otros métodos para proporcionar interactividad con el proyecto multimedia, estos métodos son de la clase Control de la Línea de Tiempo:

gotoAndStop(fotograma): Sitúa la cabeza lectora en el fotograma indicado y detiene la reproducción.

play(): Hace que la reproducción continúe en el fotograma que se encuentra la cabeza lectora.

prevFrame(): Permite que la cabeza lectora retroceda al fotograma anterior.

nextFrame(): Indica a la cabeza lectora avance al fotograma siguiente al que se encuentre.

Se puede observar que todas estas acciones se encuentran dentro del panel reacciones y su uso general es semiautomático utilizando el Asistente de Script, como se realizó en el primer ejemplo. Sin embargo, se requiere criterio y lógica por parte del desarrollador para entender el comportamiento de las acciones. Decidir qué acción es apropiada en determinado punto y que variables se modificarán.

El Asistente script es un gran apoyo, sin embargo, también se puede trabajar en la modalidad de experto, sin asistente para aquellos que dominan el código y requieren emplear una programación avanzada y personalizada.

TEMA 10: Audio y Video

AudioSe puede importar sonido en la línea de tiempo y crear un contenido multimedia con un control muy preciso.

Se puede utilizar el sonido para muchos fines. Algunos ejemplos incluyen bandas sonoras, narración y efectos de sonido que complementan objetos como botones de sustitución. Los siguientes formatos de archivo de sonido se pueden importar en Flash:

WAV (Sólo Windows )

AIFF (Sólo Mac OS )

MP3 ( Windows y Mac OS)

Si se tiene QuickTime 4 o posterior, se podrán importar los siguientes formatos de archivo de sonido:

AIFF ( Windows y Mac OS)

Sound Designer II (Sólo Mac OS )

Sound Only QuickTime Movies ( Windows y Mac OS)

System 7 Sounds (Sólo Mac OS )

Sun AU ( Windows y Mac OS)

WAV ( Windows y Mac OS)

Flash almacena los sonidos en la biblioteca, en el mismo lugar que los mapas de bits y los símbolos. Los archivos de sonido deben estar vinculados a fotogramas clave. Solo

es necesaria una copia del archivo de sonido para poder utilizarlo en el documento varias veces.

Importar Sonidos a la BibliotecaPara importar un sonido a la biblioteca se deben seguir los siguientes pasos:

1. Seleccionar el Menú Archivo > Importar > Importar a biblioteca…

2. En el cuadro de diálogo Importar a biblioteca, localizar el archivo de sonido.

3. Dar clic en Abrir.

Agregar Sonido al DocumentoPara agregar un sonido de la biblioteca a un documento, se deberá asignar a una capa y definir las opciones de los controladores de sonido en el inspector de propiedades. Se recomienda colocar cada sonido en una capa distinta.

Para añadir un sonido al documento seguir los siguientes pasos:

1. Importar el sonido a la biblioteca.

2. Añadir una capa para el sonido.

3. Con la nueva capa para sonido seleccionada, arrastrar el sonido desde el Panel de Biblioteca hasta el escenario. Es posible colocar múltiples sonidos a una capa o incluso en capas que contengan otros objetos. Sin embargo se recomienda que cada

sonido se coloque en una capa separada. De esta manera cada capa actúa como un canal de sonidos por separado. Los sonidos pueden ser escuchados en su conjunto cuando se lleve a cabo la reproducción del archivo SWF.

4. En la Línea de Tiempo seleccionar el primer fotograma que contiene el archivo de sonido.

5. Elegir el archivo de sonido en la lista desplegable de Sonido (en el inspector de propiedades).

6. Seleccionar una opción de efecto en la lista desplegable de Efecto.

Ninguno: No aplica ningún efecto al archivo de sonido. Elimina efectos aplicados con anterioridad.

Canal Izquierdo / Canal Derecho: Para reproducir el sonido en el canal derecho o izquierdo.

Desvanecimiento de Izquierda a Derecha / Desvanecimiento de Derecha a Izquierda: Mueve el sonido de un canal a otro.

Aumento progresivo: Incrementa gradualmente el volumen de un sonido.

Desvanecimiento: Reduce gradualmente el volumen e un sonido.

Personalizar: Permite crear puntos de entrada, salida y de sonido mediante Editar envolvente.

7. Seleccionar una opción de sincronización en la lista desplegable Sinc.

Evento: Sincroniza el sonido con un evento. Un sonido de evento no comienza a sonar hasta que aparece el fotograma clave inicial y se reproduce por completo.

Inicio: Es similar a Evento, pero si el sonido ya se esta reproduciendo, no se reproduce una nueva instancia del mismo.

Detener: Detiene el sonido especificando.

Flujo: Sincroniza el sonido para reproducirlo en un sitio Web.

8. introducir un valor en Repetir para especificar el número de veces que el sonido debe reproducirse o seleccionar Reproducir Indefinidamente para que se repita continuamente.

VideoUn poderoso y dinámico recurso multimedia es la incorporación de videos a los proyectos y sitios Web. Flash posee ventajas tecnológicas y creativas que dan libertad a los diseñadores o desarrolladores para crear contenido atractivo y eficaz en las que se fusionan video con datos, gráficos, sonido y control interactivo dinámico. Flash permite colocar video en una página Web que puede ser visto prácticamente por todos los usuarios utilizando las diferentes conexiones a Internet.

Incorporar VideoFlash permite incorporar archivos de video en un archivo FLA. Cuando se importa video se sitúa en la Línea de Tiempo. Aquí pueden visualizarse todos los fotogramas del video en los fotogramas de la propia Línea de Tiempo. Los archivos de video incorporados forman parte del documento de Flash.

En Flash pueden ser incorporados los siguientes formatos de video:

Video QuickTime (MOV)

Audio Video Interleaved (AVI)

Motion Picture Experts Group (MPEG)

Cuando se importa un video como archivo incorporado, es posible editar antes de importarlo. Es posible aplicar una configuración de compresión personalizada que incluya el ancho de banda o la calidad del video. Las opciones de edición y codificación se eligen en el Asistente de importación de video.

El proceso a seguir para incorporar un archivo al documento es el siguiente a través del asistente:

1. Ir a Menú Archivo > Importar > Importar video.

2. Seleccionar el clip de video que deseas importar.

3. Seleccionar la casilla de verificación Incorporar vídeo en SWF y reproducir en la Línea del Tiempo.

4. Seleccionar el tipo de símbolo con el que se incorpora el vídeo al archivo SWF.

Incorporar a la Línea de tiempo: El video está destinado a la reproducción lineal en la Línea de Tiempo.

Incorporación como clip de película: Cuando se trabaja con video incorporado, se sugiere colocar video dentro de una instancia de clip de película de está manera se tiene control sobre el documento. La línea de tiempo de video se reproduce independientemente de la línea de tiempo principal.

Incorporación como símbolo gráfico: No se puede interactuar con él.

5. Elegir un perfil de codificación de vídeo.

6. Dar clic en Siguiente.

7. Hacer clic en Finalizar para cerrar y terminar el procedimiento de importación.

8. El asistente codifica el video en formato FLV (video Flash) y lo incorpora al archivo SWF. El video se mostrara en el escenario o en la biblioteca, dependiendo de las opciones de importación seleccionada.

9. El video es incorporado en el escenario, la línea de tiempo y en el panel de la biblioteca.

Exportar una películaFlash da la posibilidad de exportar como video la película que se ha creado para posteriormente pueda ser visualizada en DVD o en un reproductor de video como lo son Windows Media Player o QuickTime.

1. Hacer clic en el Menú Archivo > Exportar > Exportar película… Aparecerá el siguiente cuadro de dialogo.

2. En el cuadro de dialogo Exportar Película hacer clic en tipo en donde se desplegara una lista con todos los formatos de los cuales se deberá elegir la opción Windows AVI u otro formato de video.

3. En el cuadro de dialogo Exportar película hacer clic en el campo Nombre y escribir el nombre.

4. Hacer clic en Guardar.

5. Se abrirá el cuadro de dialogo Exportar a Windows AVI en el cual se pueden modificar las dimensiones formato de video y formato de sonido.

6. En dimensiones se pueden establecer las medidas personalizadas para el ancho y lo alto.

7. Activar la opción mantener proporción si se desea que la película mantenga una proporción de acuerdo a la original, sin importar que se modifiquen los datos de anchura y altura.

8. Hacer clic en Formato de video para establecer una de las cuatro opciones de video.

9. Hacer clic en la lista desplegable de Formato de sonido de la cual se puede elegir el formato que mejor se adapte a las características y objetivos de uso del video; tamaño, calidad, velocidad de descarga o bien, deshabilitar el sonido.


11. En el cuadro de dialogo Compresión de video seleccionar el compresor a utilizar y la calidad de compresión, o elegir cuadros completos sin comprimir. El buen uso de un compresor adecuado determinara en gran parte el tamaño del archivo publicado.


TEMA 11: Publicación de Películas

Para la presentación de las películas en Flash la publicación y la reproducción se puede llevar a cabo por archivos FLA, SWF, documento HTML o archivos alternativos como lo son GIF, JPEG, PNG o QuickTime. El formato a elegir dependerá directamente del lugar en donde se expondrá o reproducirá, las características del Sistema Operativo, al tamaño, resolución y calidad de la imagen.

Para publicar un documento en Flash se deben seleccionar primero los formatos de archivo de publicación y luego la configuración de los formatos de archivo por medio

del cuadro de dialogo Configuración de publicación. Después publicar el documento de Flash mediante el comando Publicar. La publicación que se elija se guardara con el documento.

1. La publicación y la configuración de los formatos del archivo se encuentra en el Menú Archivo > Configuración de publicación… Se muestra el siguiente cuadro de dialogo:

En el cuadro de diálogo se presentan los formatos de archivos a crear:

Archivo SWF de Flash Formatos alternativos para imágenes aparecerán si no esta disponible Flash

Player (GIF, JPEG, PNG y QuickTime) Documento HTML da soporte necesario para visualizar contenido SWF en

un navegador y controlar la configuración del mismo. Archivos HTML:

Archivo de detección De contenido Alternativo

Archivo de proyectores autónomos para Windows y Macintosh como el EXE y HQX respectivamente.

2. Seleccionar el tipo de formato para cada tipo de archivo que se desea crear. Los archivos SWF y HTML están seleccionados de manera predeterminada.

8. En los cuadros de texto Archivo de cada formato seleccionado se puede ya sea dejar el nombre del archivo determinado o bien cambiar su nombre con la extensión apropiada.

9. Así mismo con la carpeta se podrá elegir la ubicación para publicar el archivo. De manera automática el archivo se publica en la misma ubicación que el archivo FLA.

10. Para la generación de los archivos publicados hacer clic en Publicar.

11. Para guardar la configuración con el archivo FLA y cerrar el cuadro de dialogo sin publicar hacer clic en Aceptar.

Configurar de publicación del Formato SWF

Al publicar un documento en Flash, se pueden establecer las opciones de compresión de imágenes y sonido, el cual esta directamente relacionado con el tamaño y peso de los archivos publicados.

Para cambiar la configuración de publicación se deberán seguir los siguientes pasos:

1. Ir a Menú Archivo > Configuración de publicación...

2. Seleccionar la pestaña Flash.

3. Seleccionar una versión el reproductor de las opciones de lista desplegable Versión.

4. Seleccionar un Orden de Carga para especificar el modo en el que Flash cargara las capas de un archivo SWF.

5. Ajustar el deslizador de calidad JPEG o introducir un valor para controlar la compresión de mapa de bits. Una imagen de baja calidad produce archivos de menor tamaño, una de alta calidad produce archivos de tamaño mayor,

El tamaño de la imagen esta directamente relacionado con la

calidad que la imagen tenga, por lo que se recomienda probar con distintas configuraciones para lograr un equilibrio entre tamaño y calidad.

6. Hacer clic en Establecer para establecer la frecuencia de muestreo y la compresión de todo flujo de sonido.

7. Elegir la opción para Compresión, Velocidad y Calidad, en el cuadro de texto Configuración de Sonido.

8. Al terminar dar clic en Aceptar.

9. Al terminar la configuración de publicación dar clic en Publicar.

¡Alerta 6! Certified Associate Saber todos los tipos de archivos en los que

se puede publicar una animación realizada en Flash.

TEMA 12: Planeación de un proyecto multimedia

La planeación es una actividad que involucra a los clientes, los recursos, los tiempos, los usuarios y el establecimiento de una buena comunicación y de buenas técnicas. La planeación es vital para que el proyecto sea bien administrado.

Planeación de un Proyecto InteractivoLos pasos que son importantes para la planeación de un proyecto que se basa en la creación de contenido interactivo son:

1. Identificar la audiencia objetivo

2. Conocer el tipo de audiencia

3. Identificar las necesidades de la audiencia objetivo

4. Determinar el contenido relevante

5. Proveer contenido accesible

Identificar la Audiencia Objetivo

Uno de los primeros pasos para presentar la documentación es que tome en cuenta principalmente las necesidades de los usuarios. Definir claramente al público al que se pretende dirigir los documentos. Se debe identificar a los miembros de la audiencia Objetivo, sus necesidades y su entorno. Hacer una lista de los documentos necesarios y vincularlos a los recursos de la información que requieren.

Conocer el Tipo de Audiencia

El conocimiento, antecedentes, intereses y necesidades de los usuarios variaran desde principiantes indecisos que necesitan una introducción cuidadosamente estructurada hasta los usuarios avanzados quienes pueden molestarse por cualquier cosa que les parece condescendiente o que retrase su acceso a la información. Un proyecto interactivo bien diseñado debe poder acomodarse a una gama de habilidades e intereses de los usuarios.

Identificar las necesidades de la Audiencia Objetivo

La mayoría de los negocios recurren a la tecnología de multimedia interactiva para dar un plus al negocio. Por ejemplo la creación de un sitio Web incluyendo presentaciones dinámicas para describir mejor a la empresa. Es crear un proyecto interactivo con el objetivo de responder a las necesidades de los clientes potenciales, los existentes y los inversionistas que también se encuentran en los diferentes puntos de audiencia.

La mejor manera de comprender las necesidades de la audiencia objetivo es entender cómo y qué están buscando. Esta comprensión puede ser descubierta investigando fuentes de información internas y externas. Externamente, las encuestas a usuarios, los datos sobre las palabras claves del proyecto. Las encuestas permiten identificar las necesidades de información de los diversos usuarios.

Determinar el contenido relevante

El contenido es el alma de un proyecto multimedia. Este esta compuestos de todos los elementos gráficos y textuales que se encuentran en el proyecto, bajo una estructura eficaz para comunicar el mensaje. Hoy en día el contenido multimedia es la mejor herramienta para atraer la atención de clientes potenciales y construir relaciones son los mismos.

Tipos de contenido:

La redacción de contenidos se puede clasificar en varias categorías y tipos. Cada tipo tiene un propósito y grupo Objetivo.

Contenido de mercadotecnia: contenido que promueve el producto usualmente en línea. Es el más indicado para sitios de comercio electrónico.

Artículos de investigación: contenido que se usa para proveer conocimiento avanzado sobre un asunto en particular.

Contenido de apoyo: contenido que utiliza una persona para entender un tema desde cero.

Contenido basado en la industria: es el enfocado a industrias particulares, como por ejemplo el turismo, hotelera y telecomunicaciones.

Contenido que ayuda al posicionamiento en buscadores: es el contenido rico en palabras claves para ayudar a la optimización de un sitio Web, con una o

más palabras claves y a la vez el contenido interactivo que se encuentre dentro de él.

Proveer Contenido Accesible

Estas directrices explican como hacer el contenido Web accesible para las personas con discapacidades. Las directrices están dirigidas a todos los desarrolladores de contenidos Web, así como a desarrolladores de herramientas de autoría.

El objetivo principal de estas directrices es promover la accesibilidad sin embargo el seguirlas hará que el contenido Web sea más accesible para todos los usuarios, sin importar que agentes de usuarios estén utilizando, por ejemplo explorador de escritorio, explorador de voz, teléfono móvil, computadora. Las limitaciones bajo las que se pueden estar trabajando son entornos ruidosos, habitaciones demasiado o poco iluminados, en un entorno de manos libres.

Directriz 1

Proveer Alternativas Equivalentes al Contenido Auditivo y Visual

Personas que no pueden utilizar imágenes, sonidos, películas, applets se les incluye información equivalente al contenido visual o auditivo. Esta directriz enfatiza la importancia de proveer equivalentes de texto del contenido, imágenes, audio pregrabado y video.

El texto se puede enviar fácilmente a los sintetizadores de audio y a las pantallas de braille; así como presentarse visualmente en pantallas de computadora y en papel. El lenguaje sintetizado es esencial para las personas invidentes y para muchas personas con dificultades para aprender y a menudo acompañan a las discapacidades cognitivas a los problemas de aprendizaje y a la sordera. El braille es esencial para las personas sordas e invidentes así como para muchas personas cuya única discapacidad sensorial es la ceguera. El texto mostrado visualmente beneficia a los usuarios que son sordos así como a la mayoría de los usuarios.

El proveer equivalentes sin texto por ejemplo imágenes, video y audio pregrabado al texto, es también beneficioso para algunos usuarios, especialmente para las personas que no leen y aquellas que tienen dificultad para leer.

Directriz 2

Asegura que el Texto y los Gráficos Sean Entendibles al Ser Vistos sin Color

Si solo se usa color para transmitir la información, las personas que no pueden distinguir entre ciertos colores y los usuarios con dispositivos que tienen pantallas sin color o pantallas no visuales no recibirán la información. Cuando los colores de primer plano y de fondo están demasiado cercanos en tonalidad, no pueden proveer el suficiente contraste cuando son vistos usando pantallas monocromáticas o personas con diversos tipos de deficiencias en percepción del color.

La página de Campus Mirrus utiliza un asterisco de color para identificar los campos requeridos al generar una cuenta de usuario. El color hace que los campos sean fáciles de identificar por los usuarios que tienen acceso al color y el asterisco puede ser identificado y entendido por todos los demás usuarios.

Directriz 3

Usar Etiquetado y Hojas de Estilo de Manera Apropiada

El uso del etiquetado de manera incorrecta es decir sin estar de acuerdo con las especificaciones obstaculiza la accesibilidad. El mal uso del etiquetado para un efecto de presentación por ejemplo el uso de una tabla para la distribución o un encabezado para cambiar el tamaño de la fuente les dificulta a los usuarios que usan software especializado. Además el uso del etiquetado de presentación en lugar de un etiquetado estructural dificulta desarrollar una página entendible a otros dispositivos.

Los desarrolladores de contenidos pueden tener la tentación de usar adecuadamente o erróneamente productos que logran un efecto de formato deseado en navegadores de versiones antiguas. Estas prácticas causan problemas de accesibilidad y se deben considerar si el efecto del formato es tan importante que justifica hacer el documento inaccesible para algunos usuarios.

El sitio Yahoo posee una adecuada distribución de información y etiquetados pero existe contenido y efectos que pueden causar problemas en versiones de navegadores Web antiguos.

Directriz 4

Aclarar el Uso de Lenguaje Natural

Los desarrolladores de contenidos etiquetan los cambios en lenguaje natural en un documento, los sintetizadores de habla y los dispositivos de braille pueden combinarse automáticamente al nuevo lenguaje, haciendo el documento más accesible a los usuarios multilingües. Los desarrolladores de contenido deben de identificar el lenguaje natural predominante del contenido de un documento a través del etiquetado o usando encabezados HTTP y proporcionar extensiones de abreviaturas y de siglas.

Por ejemplo el sitio Euphorbia se encuentra disponible en cuatro idiomas y con una animación flash como encabezado. El etiquetado de lenguaje natural permite que los motores de búsqueda y dispositivos de braille encuentren las palabras claves e identifique documentos en un lenguaje deseado.

Además posee un sistema de maracas y hojas de estilo en lugar de imágenes esto promueve la accesibilidad por dos razones principales:

El texto puede ser ampliado o transformado en voz o al sistema braille.

Los sistemas de búsqueda pueden dar información textual.

Directriz 5

Crear Tablas que se Trasformen Armónicamente

Las tablas se deben de utilizar para etiquetar la información verdaderamente tabular. Los desarrolladores de contenidos deben evitar usarlas para distribuir las páginas. Las tablas para cualquier uso también representan problemas esenciales para los usuarios de lectores de pantalla.

Algunos agentes de usuario permiten a los usuarios navegar por las celdas de una tabla, acceder a los encabezados y a otra información en las celdas. A menos de que estén etiquetadas correctamente.

Por ejemplo el sitio Web SantAndreu presenta demasiado uso de tablas para ubicar el contenido, además es ilegible y presentara problemas para los lectores de pantalla.

Directriz 6

Asegurar que las Páginas que Contienen Tecnologías Nuevas se Transformen Armónicamente

Aunque se anima a los desarrolladores de contenidos a utilizar las nuevas tecnologías que solucionan los problemas provocados por las tecnologías existentes, estos deben hacer que las páginas y su contenido trabajen con navegadores de versiones anteriores y con las personas que eligieron desactivar ciertas características.

Por ejemplo la página de Cinepolis es accesible a los usuarios a consultar la cartelera sin importar si el navegador cuenta con nuevas tecnologías o estás hayan sido desactivadas.

Directriz 7

Asegurar el Control de Usuario de los Cambios de Contenido Sujetos a Vencimiento

Algunas personas con discapacidades cognitivas o visuales no pueden leer el texto en movimiento o no pueden hacerlo suficientemente rápido. El movimiento puede causar tal distracción que puede llegar a ser ilegible para personas con discapacidades cognitivas. Los lectores de pantalla no pueden leer texto en movimiento. Las personas con discapacidades físicas podrían no poder moverse con suficiente rapidez o precisión para poder interactuar con los objetos en movimiento.

Por ejemplo la página Estación de Autobuses en la parte inferior se presenta demasiado texto en movimiento y en un párrafo demasiado largo para transmitir un mensaje a los visitantes.

Directriz 8

Asegurar la Accesibilidad Directa en la Interfaz de Usuario Incorporada

Cuando un objeto incorporado tiene su propia interfaz, la interfaz debe ser accesible. Si no se puede hacer que la interfaz del objeto incorporado sea accesible, se debe proveer una solución alterna para la accesibilidad.

Muchas interfaces de usuario incorporadas particularmente, las animaciones Flash son diseñadas de tal manera que funcionen solamente si un usuario utiliza un ratón. Una prueba fácil es intentar navegar o utilizar un contenido sin uso del ratón.

Por ejemplo el sitio Web de Mundo Nick posee bastante contenido Flash y no se puede navegar utilizando el teclado.

Directriz 9

Diseñar para un Acceso Independiente de los Dispositivos

Un acceso independiente de los dispositivos significa que el usuario puede interactuar con el agente de usuario o el documento con un dispositivo de entrada o de salida de su preferencia como lo puede ser el ratón, teclado, voz u otro.

Para ello se debe tomar en cuenta lo siguiente:

1. Proporcionar textos equivalentes para las áreas activas para los mapas de imagen controlados por el usuario.

2. Definir atajos de teclado para enlaces o controles de formularios importantes.

3. Asegurar un orden lógico de tabulación de los enlaces y controles de formularios.

Para satisfacer la independencia de un dispositivo, se recomienda utilizar mapas de imagen del tipo cliente, ya que no requieren de un dispositivo de entrada específico. Además, los mapas del tipo cliente pueden utilizar el atributo ALT para informar al usuario del propósito de cada región activa.

Un buen sito navegable y con buena presentación es el de Coca-Cola.

Directriz 10

Usar Soluciones Provisionales

En el aspecto visual una de las principales recomendaciones provisionales consiste en separar los enlaces o vínculos. Esto ayuda a las personas con algunas deficiencias visuales o cognitivas a identificar más claramente las opciones que se presentan.

El uso de tablas para maquetar páginas donde el texto es presentado en columnas paralelas representa un problema para algunos navegadores y lectores de pantalla, ya que no interpretan correctamente el código HTML o no permiten navegar las celdas individualmente.

Estas aplicaciones antiguas exploran las páginas a lo ancho, leyendo oraciones de una misma fila de la tabla, pero de distintas columnas, como una sola oración.

Un ejemplo es el sitio Proteger, en la sección de registro existen demasiados cuadros de edición, lo cual causaría problemas de navegación y edición con navegadores de versiones antiguas.

Directriz 11

Usar Tecnologías y Directrices del W3C

Las directrices actuales recomiendan las tecnologías del W3C (World Wide Web Consortium), por varias razones:

Las tecnologías del W3C incluyen características de accesibilidad integradas.

Las especificaciones del W3C se someten a una revisión temprana para asegurar que el tema de accesibilidad sea tomado en cuenta durante la fase de diseño.

Las especificaciones del W3C son desarrolladas en un proceso abierto de consenso en la industria.

El sitio Web Quinti a pesar de ser un sitio personal, cumple con varios requerimientos de W3C como el estilo CSS (Hoja de Estilo en Cascada), accesible y multilenguaje.

Directriz 12

Proveer Información de Contexto y Orientación

Agrupar elementos y proveer información contextual sobre las relaciones entre los elementos puede ser útil para todos los usuarios. Esto ayuda a los usuarios a entender mejor el contenido y los elementos complejos.

Por ejemplo el sitio Web Wikipedia presenta una serie de menús al costado izquierdo y el contenido relacionado a cada opción al centro de la página.

Directriz 13

Proveer Mecanismos Claros de Navegación

Los mecanismos de navegación claros y constantes son importantes para las personas con discapacidades cognitivas y cegueras y benefician a todos los usuarios.

Directriz 14

Asegurar que los Documentos sean Claros y Simples

La distribución constante de contenido, los gráficos y un lenguaje fácil de entender beneficia a todos los usuarios. Estos elementos ayudan a las personas con discapacidades cognitivas o a quienes tienen problemas para leer. Asegurar que las imágenes posean equivalentes de texto para ayudar a usuarios que no puedan o hayan no elegido ver los gráficos.

Utilizar un leguaje claro y simple fomenta la comunicación eficaz. El acceso a la información escrita puede ser difícil para las personas que tienen discapacidades cognitivas o de aprendizaje. El usar un lenguaje claro y simple también beneficia a las personas cuyo idioma nativo es diferente del suyo incluyendo a aquellas personas que se comunican principalmente usando lenguaje de señas.

Por ejemplo el sitio Web para discapacitados Discapnet presenta información accesible para todas las personas, además cuenta con una buena distribución de contenido y navegación por medio de teclado.

¡Alerta 7! Certified Associate El nivel de educación de los visitantes y el

rango de edades son características de la audiencia objetivo y estas se deben tomar en cuenta para diseñar el contenido.

Seber cuales son los cinco puntos que se tiene que tomar en cuenta para la planeación de un proyecto intectivo.

Saber cuales son las directrices para proveer un contenido accesible para todo tipo de usuarios.

.

TEMA 13: Restricciones de uso del material Web

Uso razonable

Uno de los derechos otorgados al propietario de los derechos de autor es el de reproducir o autorizar a otros la reproducción de la obra en copias o grabaciones. Este derecho está sujeto a ciertas limitaciones encontradas en las secciones de la 107 a la 118 de la ley de derechos de Autor (Código de EEUU). Entre las secciones se encuentra

una lista de los varios propósitos para los cuales la reproducción de una obra en particular se puede considerar razonable como la critica, los comentarios, la divulgación de noticias, la enseñanza y la divulgación. También precisa cuatro factores que se tomarán en cuenta para determinar si un uso en particular es razonable o no lo es, los factores son los siguientes:

1. El propósito y el carácter del uso, incluyendo si tal uso es de naturaleza comercial o para propósitos educativos no lucrativos.

2. La naturaleza de la obra protegida con derechos de autor.

3. La cantidad y contenido sustancial de la porción usada en relación al la obra protegida con derechos de autor en su totalidad.

4. El efecto del uso sobre el mercado potencial de la obra protegida con derechos de autor o sobre su valor.

La distinción entre uso razonable y violación puede ser confusa y no fácilmente definible. No existe un número específico de palabras, líneas o notas que se puedan tomar con seguridad sin consentimiento. El reconocer la fuente del material protegido con derechos no substituye el obtener el consentimiento del autor.

Obra Derivada

Una obra derivada es una obra basada es una o más obras preexistentes, tales como: una traducción, arreglo musical, adaptación teatral, la versión de una película, una grabación de sonido, la reproducción de arte, la condensación o cualquier otra forma en la cual una obra pueda ser modificada, transformada o adaptada. Una obra que consiste de revisiones, anotaciones, elaboraciones u otras modificaciones editoriales, es una obra derivada.

En la imagen se puede mostrar que una obra derivada puede ser un extracto que se toma de un sitio Web para realizar una presentación con diapositivas.

Derechos de autor

Elementos que se toman en cuenta para saber se esta protegida una obra con derechos de autor:

Disposiciones Generales

Siempre que una obra protegida bajo este titulo sea publicada en EU o cualquier otra parte por la autoridad del dueño de los derechos de autor, se puede colocar una aviso de derechos de autor, en la manera prevista por esta sección, en las copias distribuidas públicamente desde las cuales la obra se puede percibir visualmente, ya sea directamente o con la ayuda de una máquina o dispositivo

Forma de aviso

Si un aviso aparece en las copias, este debe consistir de los siguientes tres elementos:

1. El símbolo © o la frase Derechos de Reservados.

2. El año de la primera publicación de la obra: En caso de compilaciones o de obras derivadas que incorporen material previamente publicado, será suficiente con colocar la fecha del año de la primera publicación de la compilación o de la obra derivada.

3. El nombre del dueño de los derechos de autor en la obra: Una abreviatura por la cual el nombre pueda ser reconocido o una designación alternativa del dueño generalmente conocida.

Posición del aviso

El aviso será pegado en las copias de tal manera que dé un aviso razonable de la afirmación de los derechos de autor. El registro del derecho de autor deberá prescribir por regulación, como ejemplos, métodos específicos para pegar y posicionar el aviso sobre varios tipos de obras que satisfagan este requisito, pero estas especificaciones no serán consideradas exhaustivas.

Paso probatorio del aviso

Si un aviso de los derechos de autor aparece en la copia o copias publicadas en las cuales un demandado en un juicio de violación de los derechos de autor tuvo acceso, entonces no se dará ningún paso a la interposición de tal demandado de una defensa basada en una infracción inocente para la mitigación de daños reales o estatuarios.

Citar una fuente de informaciónUna cita es forma de decir a los lectores que cierto material es su trabajo vino de otra fuente. También provee a sus lectores la información necesaria para encontrar de nuevo esa fuente, incluyendo:

Información sobre el autor.

El titulo del trabajo.

El nombre y el lugar de la empresa que público su copia de la fuente.

La fecha en que su copia fue publicada.

Los números de página del material que se tomó prestado.

¡Alerta 8! Certified Associate

El contenido Web como: imágenes, marcas, logotipos, material intelectual, etc. posee en su mayoría derechos de autor ya que son registrados y se identifican con los símbolos de marca registrada.

Se puede utilizar material protegido siempre y cuando se adquiera el permiso de escritura para el material, cuando se indica

que el material tiene derechos de autor o cuando este posee licencia de libre autorización.

Es importante saber cuales son los tres elementos de la forma de aviso que involucran los derechos de autor.

TEMA 14: Conceptualización de un proyecto multimedia

En esta sección se definen algunos conceptos relacionados con proyectos multimedia, para tener una mayor visión en el desarrollo de proyectos. Entre los conceptos básicos que se deben conocer son los siguientes:

Conceptos Principales

Flujo Multimedia (Streaming Media)

Es el término que se refiere a la acción de ver y oír un archivo directamente en una pagina Web (en línea), sin necesidad de descargarlo antes a la computadora. Flash ha desarrollado una tecnología para generar flujos de bajo nivel de transferencia de datos para el usuario final. Incluso con conexiones vía módem.

Con una arquitectura de flujo (streaming) de medios, QuickTime tiene capacidades enormes para producir multimedia interactiva, inclusive animaciones de Flash. Una animación Flash colocada al principio de una película puede calmar la frustración de requisitos de “almacenar” (buffering), proporcionando muestra instantánea para la audiencia cuando se hace clic en el hipervínculo de la película.

Sonidos en FlashLas diferentes características de los sonidos en Flash son las siguientes:

Flujo de Sonido:

Un flujo de sonido se sincroniza con la línea de tiempo y comenzará a reproducirse en cuanto se haya descargado la información suficiente para los primeros fotogramas.

Evento de sonido:

Un evento de sonido debe descargarse por completo para que empiece a reproducirse y continúa haciéndolo hasta que se detiene de forma explícita.

Paleta de colores WebSafe

Cada archivo de flash contiene su propia paleta de colores, almacenada en el documento de Flash. La paleta predeterminada de colores es la paleta de 216 colores WebSafe, esto quiere decir que cualquier color incluido en esta paleta podrá ser interpretado y desplegado por cualquier explorador Web en todas o en casi todas sus versiones.

Bordes dentados en objetos (Aliasing)

Es el efecto que causa que las señales continuas distintas se tornen indistinguibles cuando se les muestrea digitalmente. Cuando esto sucede, la señal original no puede ser reconstruida de forma univoca a partir de la señal digital.

El aliasing es un motivo de preocupación en lo que concierne a la conversión analógica digital de señales de audio y video. El muestreo incorrecto de señales análogas puede provocar señales de alta frecuencia que presenten aliasing con respecto a señales de baja frecuencia. El aliasing es también una preocupación en el área de gráficos por computadora, donde puede dar origen a patrones con bordes dentados.

Alisado de bordes (Antialiasing)

Son los procesos que permiten minimizar el aliasing cuando se desea representar una señal de alta resolución en un sustrato de más baja resolución. En la mayoría de los casos, el antialiasing consiste en remover la frecuencia, demasiado elevada para poder ser representada.

En la siguiente imagen se presenta el efecto que produce el antialiasing, donde al óvalo que se le aplico presenta bordes más finos que al que no se le aplicó el antialiasing.

Espacio en Blanco

Se refiere a un espacio vació que se mantiene alrededor de objetos agrupados para visualmente separarlos. Es importante mantener algún porcentaje de espacio en blanco en el diseño de una interfaz grafica, porque los espacios en blanco pueden guiar a los ojos del usuario para que entienda la información agrupada. En algunas ocasiones la interfaz gráfica puede verse mejor si dos secciones con contenido son separadas con espacio en blanco que con una línea gruesa.

Tinte

Se refiere a la pureza o la intensidad del color. La información del color, independientemente de lo intenso, de la luminosidad o brillo. Sin la señal del color (Chroma) la imagen sería en blanco y negro.

Color (Chroma)

El color de un elemento de imagen (píxel), compuesto de saturación y valores de tinte, pero separados del valor de la luminosidad. Cromática es la mezcla de tinte y saturación o la combinación de tres colores primarios como lo son: rojo, verde y azul.

La accesibilidad en los ProyectosDado que la tecnología se ha convertido en una herramienta básica para el desempeño laboral y académico de la sociedad actual, un medio fundamental para la comunicación e información que no debe quedar lejos del alcance de ninguna persona, todos somos usuarios potenciales sin factores como el idioma, cultura o una discapacidad física debieran ser obstáculos marginadores de estos medios.

Se enlistan una serie de pautas y puntos de control de la accesibilidad implicados, entre los cuales se pueden mencionar:

Utilizar las tecnologías del W3C y seguir las directrices de accesibilidad. Cuando no sea posible utilizar una tecnología W3C, proporcionar una versión alternativa del contenido que sea accesible:

1. Utilizar las tecnologías del W3C cuando estén disponibles y sean apropiadas para la tarea y utilizar las últimas versiones en cuanto sean soportadas.

2. Evitar utilizar elementos obsoletos de las tecnologías del W3C.

3. Proporcionar información de manera que los usuarios puedan recibir los documentos según sus preferencias.

Asegurar que las paginas o proyectos sean accesibles, incluso cuando las tecnologías más recientes no son soportadas o se deshabilitan.

Proporcionar un texto equivalente para todo elemento no textual. Esto incluye: imágenes y representaciones graficas del texto.

La accesibilidad en FlashFlash es una herramienta estándar en su género, cuenta con opciones para brindar accesibilidad en los contenidos que se crean para diferentes tipos de usuarios, incluyendo personas discapacitadas:

Las opciones que ofrece la aplicación son:

Textos equivalentes: Para los gráficos llamados clips de película los cuales deberán ser nombrados para identificarlos

Orden de lectura de los elementos

Subtítulos del contenido sonoro (Hi-Caption SE)

Definición de atajos de teclado para controles

Las condiciones para que funcionen las opciones se accesibilidad en Flash:

El usuario debe utilizar un navegador Internet Explorer y los lectores de pantalla JAWS o Window-Eyes.

El usuario debe instalar Flash Player 7 o posteriores.

En el caso de textos equivalentes, deberán ser guardados y nombrados como clips de película para ser soportados.

Activar las opciones Permitir acceso a la película y Hacer que los objetos secundarios sean accesibles en el Panel de accesibilidad.

Causas de problemas comunes con los lectores de pantalla:

Símbolos sin nombre pueden causar conflicto.

Repetición de Símbolos.

Sonido que interfiere con la descripción de los lectores

Recomendaciones para elaborar un archivo SWF accesible:

Proporcionar un titulo y una descripción del documento.

Proporcionar un titulo y una descripción para instancias de documentos.

Cambio de texto estático por dinámico.

Control del orden en el que los usuarios navegan con la tecla TAB.

Control de orden de lectura con ActionScript.


Tener muy en claro los conceptos de Flujo Multimedia, los dos tipos de sonido: Flujo de Sonido y Evento de Sonido, Aliasing, Espacio en Blanco, Tinte y Color o Chroma.

Cuales son los puntos importantes en la accesibilidad de proyectos.

Opciones que ofrece Flash para la accesibilidad.

TEMA 15: Planeación y diseño de proyectos

Principios del DiseñoEs la manera en que se organizan las partes de una obra de arte. Estos principios sirven de guía para el diseñador gráfico al momento de disponer los objetos que componen un esquema. Una composición grafica eficiente es aquella que alcanza los objetivos del diseñador a partir de la aplicación de dichos principios.

Los principios de diseño más importantes son:

1. Balance

2. Movimiento

3. Énfasis

4. Unidad

5. Proporción

BalanceSe refiere a la forma en que los objetos están dispuestos en una superficie de acuerdo con el peso que recibimos visualmente. Es importante que los elementos que

conforman una producción artística estén balanceados, para que la misma produzca placer en el receptor. Se deberá generar una sensación de equivalencia visual entre las partes que conforman una imagen, tanto en el tamaño, el color, la forma, etc. La falta de balance lleva a que una composición se vea extraña y sea difícil de entender.

Balance Simétrico y AsimétricoCuando se habla de que una imagen está simétricamente balanceada lo que se quiere decir es que los elementos que aparecen a cada lado del eje que divide su centro son idénticos. Otra forma de denominarlo es balance en espejo, ya que los objetos en cada mitad de figura se encuentran reflejados como si estuvieran frente a una superficie espejada.

El balance asimétrico es aquel en el cual las dos mitades de la imagen no son idénticas, sino lo que está en balance es el peso total de la composición.

MovimientoPrincipio que utilizan los diseñadores para que su diseño dé la sensación de dinamismo. Para lograrlo, los artistas utilizan los elementos del diseño y los combinan para crear un ritmo determinado en la imagen a través de la inclusión en la misma de figuras que aparentan estar en movimiento.

Las líneas y las formas superpuestas y las figuras inestables, aumentan la sensación de movimiento. Otra técnica es el uso de líneas diagonales y la graduación del tamaño y la dirección de las partes que componen una imagen.

ÉnfasisSe utiliza para dirigir la atención del público hacia un punto focal en la imagen. Este principio permite al diseñador enfatizar un objeto que adquiere importancia primordial en una composición y a su vez, atraer la vista hacia ese punto en particular.

El énfasis recae sobre la información más importante, generalmente el objeto que se encuentra en el medio. Algunos elementos que el artista utiliza y combina para enfatizar son: el tamaño, el color y la forma.

UnidadRelacionado con la forma en que el ojo percibe el objeto. Es la tendencia a organizar los objetos de una imagen en grupos de objetos de una imagen en grupos de acuerdo con sus similitudes y a percibir las figuras en su totalidad más que en sus partes individuales.

Unidad se refiere a los distintos elementos que constituyen un diseño debe estar ligado de manera tal que sea percibido como un todo para así facilitar la comprensión del mensaje que quiere transmitir. La repetición de colores y formas es una forma fácil de lograr una unidad en el diseño.

ProporciónRefiere a un objeto en relación con otro o a la relación de las partes de ese objeto. Se usa para expresar una sensación particular en su diseño y la distorsiona o la exagera dependiendo del efecto que quiere provocar en el público.

Planeación y Diseño de ProyectosLa etapa de planeación y diseño se puede descomponer de manera resumida, en las siguientes fases:

1. Identificar el o los objetos a alcanzar.

Antes de iniciar un proyecto se deberá medir su alcance y contenido permitiendo que tome forma.

2. Ponderar todos los factores para obtener un plan equilibrado.

Responder las siguientes preguntas:

¿Cuál es el propósito de lo que se quiere hacer?

¿Cuál es el mensaje?

¿Cómo se puede organizar el proyecto?

¿Qué elementos multimedia se necesitan?

¿De que equipo se dispone para desarrollar el proyecto?

¿Es eficiente el equipo?

¿Cuánto espacio de almacenamiento se cuenta?

¿Qué equipo esta disponible para usuarios finales?

¿Cuáles son las capacidades y habilidades con respecto al software y hardware?

¿De cuanto tiempo se dispone?

¿Cómo se distribuirá el proyecto final?

3. Generar la idea (Lluvia de ideas)

Permitirá el pensamiento libre y cierre con pensamiento convergente.

4. Integrar al equipo

Maestro rediseñador: Es el motor del proyecto multimedia, sus funciones pueden ser gerente de proyecto, diseñador de contenidos, diseñador de capacitación y escritor.

Asesor pedagógico: Sus funciones son de diseñador de capacitación y programador.

Ingeniero en sistemas: Sus funciones son de programador multimedia y especialista en audio y video.

Diseñador grafico: Es el diseñador de interfaz, ilustrador, animador, especialista en video, programador de multimedios.

5. Creación de un guión

Puntos a considerar antes de delimitar los contenidos del proyecto:

Idea general

Audiencia (no perder de vista quienes son los usuarios) lluvia de ideas (cual es la mejor manera de abordar el tema).

Metas y objetivos (el ultimo mensaje del proyecto y los pasos específicos que los usuarios deben tomar para alcanzar esas metas).

Tratamiento (formal, informal, cuál será la apariencia visual del proyecto).

Uso de metáforas puede hacer la interacción más cómoda y relevante para el usuario.

Esquema de contenidos (lo que contendrá el proyecto hasta donde queremos llegar).

6. Diseño de estructura

Se deberá comenzar en la fase de planeación. Un mapa de navegación bosqueja las conexiones o vínculos de las diferentes áreas del contenido y ayuda a organizar el

contenido y los mensajes. Proporciona una tabla de contenido, así como una gráfica de flujo lógico de la interfaz interactiva.

Las estructuras de organización fundamentales son utilizadas en los proyectos de multimedia, a menudo en combinación (mapas de navegación).

Lineal: el usuario navega secuencialmente en un cuadro o fragmento de la información a otro.

Jerarquía: el usuario navega a través de las ramas de la estructura de árbol que se forma, dada la lógica natural del contenido.

No lineal: el usuario navega libremente a través del contenido del proyecto, sin limitarse a líneas predeterminadas.

Compuesta: los usuarios pueden navegar libremente, pero también está limitado por presentaciones lineales de película o de información crítica y de datos que se organizan con más lógica y en una forma jerárquica.

7. Incluir un procedimiento de evaluación.

Guión GraficoEs un boceto de cómo organizar un proyecto y hacer una lista de los contenidos. Un guión gráfico ayuda a:

Definir los parámetros de la producción dependiendo de los recursos y el tiempo disponible.

Organizar y centrar el proyecto.

Hacer una idea de que metodo utilizar para cada parte del proyecto.

Consideraciones y Limitaciones Técnicas en un ProyectoConsiderando la variedad de equipos tecnológicos, velocidades de conexión a Internet, existe una serie de factores a verificar para la creación de elementos multimedia que intervienen directamente en la velocidad de presentación o descarga de los elementos. Entre los factores e pueden mencionar:

Incorporación de audio y/o video: el uso de compresores para estos elementos disminuyen el peso y esto modifica la velocidad de descarga.

Imágenes: el tratamiento de las imágenes es vital para la relación calidad/peso. Los formatos recomendables para verse en pantalla y de menor peso como JPG y GIF.

El color es un factor determinante, el hecho de que una imagen sea blanco y negro es considerablemente menos pesada que una imagen a color. Antes de incorporar imágenes a un proyecto, se debe llevar a cabo el proceso de Optimización de imágenes, que consiste en dejar las imágenes “a punto” para sus diferentes destinos.

Pruebas TécnicasEl aspecto tomado en cuenta en esta fase es la funcionalidad del proyecto, esta limitado a la funcionalidad técnica por lo que la satisfacción del cliente no forma parte de esta etapa.

Los elementos a probar en esta etapa son:

Funcionamiento del producto.

Botones operables (solucionar botones que no respondan).

Tiempo de carga.

Compatibilidad de navegadores y reproductores.


Desarrollar pruebas de “funcionalidad” implica evaluar elementos tales como: observación, método del comportamiento de grabación, personas, computadora, retroalimentación, múltiples navegadores.

Saber las características más importantes de los principios de diseño: Balance, Movimiento, Énfasis, Unidad y Proporción.

Saber cuales son las siete etapas de planificación y diseño de proyectos.

Bibliografía

Diseño Digital, Adobe Systems, ETC Education Technology Consulting

Web Designers, Macromedia 8.0, ETC Education Technology Consulting

Macromedia Flash MX – Programe y Desarrolle Proyectos con Flash MX, Kali Romiglia, ANAYA.

http://www.adobe.com/es/

http://www.aulaclic.es/

http://campus.mirrus.net/

http://mx.yahoo.com/

http://euphorbia.es/

http://www.sant-andreu.com/index/index.html

http://www.cinepolis.com.mx/

http://www.estaciondeautobuses.com/

http://www.mundonick.com/

http://www.cocacola.com.mx/

http://www.proteger.org.ar/

http://www.quinti.net/

http://es.wikipedia.org/

http://www.discapnet.es/

http://www.discapnet.es/

http://es.wikipedia.org/

http://www.quinti.net/

http://www.proteger.org.ar/

http://www.cocacola.com.mx/

http://www.mundonick.com/

http://www.estaciondeautobuses.com/

http://www.cinepolis.com.mx/

http://www.sant-andreu.com/index/index.html

http://euphorbia.es/

http://mx.yahoo.com/

http://campus.mirrus.net/

http://www.aulaclic.es/

http://www.adobe.com/es/

Manual de Flash

Documents

Transcript of Manual de Flash