Flash Cs6 Parte1

1

F

L

A

S

ÍNDICE

H

C

S

6

DETALLADO

“Porque de Tal manera Amo Dios al Mundo que ha dado a su Hijo Unigénito para que Todo Aquel que en El Crea No se Pierda Mas Tenga Vida Eterna”. Jn. 3:16

INTRODUCCIÓN UNIDAD 1. INTRODUCCIÓN A FLASH PROFESSIONAL CS6 1.1. ¿Qué es Flash? 1.2. ¿Por qué usar Flash CS6? 1.3. Novedades de Flash CS6 1.4. Flash, ventajas y desventajas 1.5. Mi primera animación Flash

UNIDAD 2. EL ENTORNO DE FLASH CS6 2.1. La interfaz de Flash Pro CS6 2.2. La barra de Menús 2.3. La Línea de tiempo 2.4. Las capas 2.5. El Escenario 2.5.1. La Línea de Tiempo - Fotogramas 2.6. Las Vistas o Zooms 2.7. Los Paneles - Utilizar el Zoom - Escenas

UNIDAD 3. DIBUJAR Y COLOREAR 3.1. El dibujo en Flash CS6 3.2. La barra de Herramientas. Herramientas básicas 3.3. La barra de Herramientas. Herramientas avanzadas 3.4. La barra de Herramientas. Opciones 3.5. El panel Color 3.6. El panel Muestras

UNIDAD 4. TEXTOS 4.1. El texto en Flash 4.2. Insertar texto 4.2.1. Escribir texto 4.3. Propiedades de los textos 4.3.1. Texto clásico 4.4. Propiedades de los contenedores de texto falta a partir de aquí 4.5. Flujo de texto entre contenedores 4.6. Incorporar fuentes 4.7. Introducir texto. Ing. CIP HerberthAranda Rojas

[email protected]

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por nosotros”. Rm, 5:8

2


UNIDAD 5. SONIDOS EN FLASH 5.1. El sonido en Flash 5.2. Importar sonidos 5.3. Propiedades de los sonidos 5.4. Insertar sonido en línea de tiempo 5.5. Sonidos en botones 5.6. Editar Sonidos 5.7. ¿Mp3 o Wav? - Sonidos MP3 y WAV

UNIDAD 6. TRABAJAR CON OBJETOS 6.1. Los objetos en Flash ¿Qué son? 6.2. Seleccionar 6.3. Colocando objetos. Panel Alinear 6.4. Panel Información 6.5. Los grupos

UNIDAD 7. LAS CAPAS 7.1. ¿Qué es una capa? 7.2. Trabajar con capas 7.3. Trabajar con capas. Opciones avanzadas 7.4. Reorganizar las capas 7.5. Tipos de capas

UNIDAD 8. SÍMBOLOS 8.1. Qué son los símbolos 8.2. Cómo crear un símbolo 8.3. Las Bibliotecas 8.4. Diferencia entre símbolo e instancia 8.5. Modificar una instancia 8.6. Panel propiedades de instancia 8.7. Efectos sobre instancias

UNIDAD 9. GRÁFICOS 9.1. ¿Qué es un gráfico? 9.2. Tipos de gráficos - Gráficos vectoriales y mapas de bits 9.3. Creando un gráfico y comprobando sus propiedades 9.4. Introducir un Mapa de bits 9.5. Introducir un archivo vectorial - Compatibilidad de archivos 9.6. Exportar un objeto Flash como mapa de bits 9.7. Publicar como un mapa de bits 9.8. Crear un GIF animado con Flash

Ing. CIP HerberthAranda Rojas

[email protected]


3

UNIDAD 10. CLIPS DE PELÍCULA


10.1. ¿Qué es un clip de película? 10.2. Comprobar las propiedades de un Clip 10.3. Crear un nuevo Clip 10.4. Importar y exportar MovieClips de la Biblioteca - Otros usos de los Movie Clips

UNIDAD 11. BOTONES 11.1. ¿Qué es un botón? 11.2. Creación de un botón 11.3. Formas en los botones 11.4. Incluir un clip en un botón 11.5. Bitmaps y botones 11.6. Acciones en los botones 11.7. Incluir sonido en un botón

UNIDAD 12. ANIMACIONES DE MOVIMIENTO 12.1. La animación en Flash 12.2. Interpolación de movimiento - Animaciones fotograma a fotograma 12.3. El editor de movimiento 12.4. Interpolación clásica 12.5. Diferencias entre interpolación de movimiento e interpolación clásica 12.6. Cambio de forma en una interpolación 12.7. Animación de textos 12.8. Animación de líneas 12.9. Guía de movimiento clásica

UNIDAD 13. ANIMACIÓN POR FORMA 13.1. Interpolación por forma 13.2. Transformar textos 13.3. Consejos de forma

UNIDAD 14. EFECTOS SOBRE ANIMACIONES 14.1. Introducción 14.2. Efectos sobre la interpolación 14.3. Efectos sobre el símbolo interpolado 14.4. Efecto brillo 14.5. Efecto tinta 14.6. Efecto transparencia (Alfa)


[email protected]


4

UNIDAD 15. GENERAR Y PUBLICAR PELÍCULAS SWF


15.1. Consideraciones sobre el tamaño de las películas 15.2. Preloader. Cargar la Película entera antes de reproducirla 15.3. Distribución como archivo swf en un reproductor autónomo 15.4. Distribución para páginas web

UNIDAD 16. INTRODUCCIÓN A ACTIONSCRIPT 3.0 16.1. ¿Qué es el ActionScript? - Conceptos inciales programación 16.2. El panel Acciones 16.3. El panel Fragmentos de código 16.4. Los operadores y expresiones 16.5. Los objetos 16.6. Las acciones - métodos comunes - Estructuras de control 16.7. Propiedades de los objetos de visualización

UNIDAD 17. EJEMPLOS DE ACTIONSCRIPT 3.0 17.1. Ejemplos de uso del código ActionScript 17.2. Código ActionScript para botones 17.3. Código ActionScript para Clips de película 17.4. Sonidos con ActionScript 3 17.5. El objeto MATH 17.6. Creación de un cargador o preloader

UNIDAD 18. NAVEGACIÓN - ACTIONSCRIPT 18.1. Introducción 18.2. Los Botones - ActionScript 3. Eventos de ratón 18.3. Controladores de la línea de tiempo 18.4. Las escenas 18.5. Los MovieClips - ActionScript 3 - Eventos de hijo a padre 18.6. Las variables - ActionScript 3. Arrays - ActionScript 3 - Crear una clase para variables globales 18.7. Las funciones 18.8. Contenedores y listas de visualización 18.9. Cargando archivos 18.10. Cargando información

UNIDAD 19. FORMULARIOS - ACTIONSCRIPT 19.1. Los elementos de formulario 19.2. Botones de formulario 19.3. Validar datos 19.4. Envío de formularios Ing. CIP HerberthAranda Rojas

[email protected]


5 19.5. Otras propiedades de los formularios 19.6. Recuperando información XML 19.7. HTML y CSS en cajas de texto


UNIDAD 20. LOS FILTROS 20.1. Introducción 20.2. El filtro Sombra 20.3. El filtro Desenfoque 20.4. El filtro Iluminado 20.5. El filtro Bisel 20.6. El filtro Iluminado degradado 20.7. El filtro Bisel degradado 20.8. El filtro Ajustar color 20.9. Acceder a los filtros de un elemento

UNIDAD 21. VÍDEO 21.1. Introducción 21.2. Importando vídeos 21.3. Puntos de referencia 21.4. El componente FLVPlayback 21.5. Uso de componentes para la reproducción 21.6. Crear controles propios 21.7. Navegar con los puntos de referencia 21.8. Trabajar con eventos de vídeo

UNIDAD 22. JUEGOS INTERACTIVOS 22.1. Introducción 22.2. Manejando elementos 22.3. Interacción con el ratón 22.4. Interacción del teclado 22.5. Interacción entre elementos 22.6. Funciones avanzadas - Propiedades del formato de texto

UNIDAD 23. ANIMACIONES AVANZADAS 23.1. Movimiento de objetos mediante ActionScript 23.2. Función setInterval y el evento ENTER_FRAME 23.3. Movimiento de objetos mediante guía 23.4. Animaciones de rostros 23.5. Animaciones geométricas en 3D 23.6. Cinemática inversa - Animaciones con movimientos complejos 23.7. Rotoscopia 23.8. API de dibujo. Creando dibujos con ActionScript


[email protected]


6

VIDEOTUTORIALES.


ÍNDICE DE VIDEOTUTORIALES 1. Mi primera animación Ver en YouTube 2. Tipos de vistas o zoom Ver en YouTube 3. La herramienta Cuentagotas Ver en YouTube 3. Crear un degradado Ver en YouTube 4. Ligaduras de texto Ver en YouTube 5. Importar sonidos Ver en YouTube 5. Utilizar sonidos Ver en YouTube 6. Seleccionar elementos Ver en YouTube 6. Alinear objetos Ver en YouTube 6. El panel de Propiedades Ver en YouTube 6. Agrupar objetos Ver en YouTube 7. Crear y eliminar capas Ver en YouTube 7. Trabajar con capas Ver en YouTube 7. Reorganizar capas Ver en YouTube 8. Crear un símbolo Ver en YouTube 8. Bibliotecas comunes Ver en YouTube 8. Efecto Alfa Ver en YouTube 9. Importar una imagen Ver en YouTube 9. Exportar una imagen Ver en YouTube 10. Crear un clip vacío Ver en YouTube 10. Importar símbolos de otras bibliotecas Ver en YouTube 11. Crear y editar un botón Ver en YouTube 11. Incluir un Clip en un botón Ver en YouTube 11. Añdir código AS3 a un botón Ver en YouTube 12. Interpolación de movimiento Ver en YouTube 12. El Editor de movimiento Ver en YouTube 12. Interpolación clásica Ver en YouTube 12. Editor de movimiento avanzado Ver en YouTube 12. Animación de lineas Ver en YouTube 12. Guía de movimiento clásica Ver en YouTube 12. Copia de animaciones con AS3 Ver en YouTube 13. Interpolación por Forma Ver en YouTube 13. Transformación de textos Ver en YouTube 13. Aplicar consejos de forma Ver en YouTube 14. Rotación automática Ver en YouTube 14. Rotación completa Ver en YouTube 14. Creando una animación con efecto Alfa Ver en YouTube 15. Publicar una película SWF Ver en YouTube 16. Panel Acciones Ver en YouTube 16. Cambiar propiedades mediante ActionScript Ver en YouTube 18. Navegación Ver en YouTube 18. Cargar un archivo SWF Ver en YouTube 18. Cargar texto e imágenes Ver en YouTube 18. El periódico digital Ver en YouTube 19. Crear un formulario Ver en YouTube 20. Los filtros Ver en YouTube 21. Reproducir e interactuar con vídeos Ver en YouTube 22. Un juego Ver en YouTube 23. Simular animación en 3D Ver en YouTube 23. Cinemática inversa (IK) Ver en YouTube Ing. CIP HerberthAranda Rojas

[email protected]


7


INTRODUCCIÓN

Es este día y mes especial “Mayo” porque falleció mi papito Tolentino Hilario Aranda Vílchez (66), quiero expresar primeramente mi gratitud al Padre y Dios eterno, por darme la dicha y el regalo de tener un padre ejemplar modelo en todas las áreas de su vida, es triste y doloroso perder a un ser querido, pero sé que él está con nuestro Señor Jesucristo y disfrutando de su Gloria. Gracias Señor Dios por tus supremas bendiciones, por el tiempo que nos permitiste disfrutar al lado de mi papito, y por todo lo que seguirás haciendo en nuestras vidas, tus bendiciones siempre nos das cada día. Quiero darles los ánimos y reconfortarlos a los que también perdieron a sus seres queridos en algún momento, que encuentren en el Señor Jesús la PAZ que el solo EL sabe darnos, empiezo así, el desarrollo de este manual. Espero que sea de su grata preferencia y de mejora en el aprendizaje del curso, aun si no conoces el curso. Dios Te Bendiga y Guarde Amigo(a). DEDICATORIA:

PAPITO: GRACIAS POR AMOR Y POR SER UN PADRE EJEMPLAR, SIEMPRE ESTARÁS CON NOSOTROS. DOY GRACIAS A DIOS POR TODO LO QUE NOS PERMITIO DISFRUTAR A TU LADO, SEGUIREMOS TU EJEMPLO DE HUMILDAD, AMOR, NOBLEZA, JUSTICIA Y TRABAJO. Salmo 4:8. “En paz… dormiré; porque sólo tú, Jehová, me haces estar confiado”.

…Su Amigo: Herberth Aranda Rojas

Huancayo, Martes 29 de Mayo del 2012. 9:25 am.


[email protected]


8

UNIDAD 1.


INTRODUCCIÓN A FLASH PROFESSIONAL CS6

1.1. ¿QUÉ ES FLASH?

Flash Professional CS6 es una potente herramienta desarrollada por Adobe que ha superado las mejores expectativas de sus creadores. Flash fue creado con el objeto de realizar animaciones y diseños vistosos para la web, y gráficos interactivos. Los motivos que han convertido a Flash en el programa elegido por la mayoría de los diseñadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash Pro CS6. Desde la web de Adobe te puedes descargar una versión de evaluación de Flash Professional CS6 válida para 30 días. Esta versión estará disponible hasta que salga la siguiente. Los logotipos de Flash son propiedad de Adobe, así como las marcas registradas Flash y Adobe. aulaClic no tiene ninguna relación con Adobe.


[email protected]


9

1.2. ¿POR QUÉ USAR FLASH CS6?


Las posibilidades de Flash son extraordinarias, con cada nueva versión se han mejorado y simplificado las herramientas, y cada vez es posible lograr mejores efectos con menos trabajo. Aunque su uso más frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos más. Son tantos, que todos los diseñadores web deberían saber utilizar Flash. Durante mucho tiempo, Flash consiguió hacer posible lo que más se echa en falta en Internet: Dinamismo, y con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no estático. Con Flash podremos crear de modo fácil y rápido desde animaciones simples para lograr algunos efectos visuales, hasta aplicaciones complejas, como juegos . Además sus desarrolladores están apostando muy fuerte por ActionScript, el lenguaje de programación Flash. A cada versión se mejora y ofrece un abanico de posibilidades cada vez mayor, por lo que además de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma para aplicaciones web de un modo real. Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y horas creando lo que nos dicte nuestra imaginación, pero esto no es suficiente para ser el preferido por los diseñadores profesionales... ¿Entonces qué es?

1.3. NOVEDADES DE FLASH CS6

Adobe suele integrar todos sus productos en una suite única en la que prima, sobre todo, la compatibilidad entre ellos. Así la compañía se desmarca del resto ofreciendo un paquete de aplicaciones muy completas como hemos ido viendo año tras año, que son capaces de interactuar entre ellas y nos ofrecen la posibilidad de reutilizar proyectos creados con un programa en otro. De hecho, podemos usar herramientas más potentes de dibujo, como Illustrator, para crear nuestros gráficos, y después animarlos con Flash. Vamos a ver las opciones más destacadas que encontramos en esta última versión: Motor de texto - Text Layout Framework. Ing. CIP HerberthAranda Rojas

[email protected]


10 Flash CS6 ha cambiado profundamente el motor de texto que emplea. En nuevo motor TLF, incluye bastantes mejoras, entre las que podemos destacar las siguientes:  




Nuevos estilos de carácter y párrafo. Se pueden aplicar efectos y atributos sobre el texto sin convertirlo a un clip de película. El texto pude fluir entre varios contenedores asociados.

El panel Fragmentos de código. Este panel nos permite insertar rápidamente el código ActionScript 3 de las acciones más comunes. Además, podemos emplearlo para almacenar nuestro propio código, y así poder reutilizarlo cómodamente.

Empaquetado de aplicaciones para iPhone. Flash CS6 nos permite convertir nuestras aplicaciones i juegos creados con el programa, en aplicaciones compatibles con iPhone.

Mejoras del vídeo. Los puntos de referencia nos permiten navegar por el vídeo o reaccionar a eventos. Ahora, podemos añadirlos directamente desde el inspector de Propiedades o mediante ActionScript, sin necesidad de recodificar el vídeo.


[email protected]



11

Además, se ha mejorado el componente reproductor de vídeo, que nos permite verlo en tiempo real, y nos ofrece una mayor colección de estilos.

Mejora de la herramienta huesos. Se han añadido propiedades de "muelle" a la herramienta de cinemática inversa (IK). Con esto, se consiguen resultados mucho más ágiles y realistas.

1.4. FLASH, VENTAJAS Y DESVENTAJAS El principal uso de Flash se da en el mundo de la web. Desde la creación de pequeños botones o banners publicitarios, hasta webs totalmente basadas en esta tecnología, Internet está repleta de animaciones Flash. Como todo, Flash presenta tanto ventajas como inconvenientes: 





El tiempo de carga. Mientras que una página HTML puede ocuparnos 10-20 KB como media, una animación Flash ocupa mucho más. Evidentemente depende del contenido que tenga, pero suelen superar los100 KB con facilidad, y si además incorpora sonidos es fácil que la cifra se dispare. Al ocupar más espacio, el tiempo que tardan estar visible el contenido Flash es mayor y no todos los visitantes están dispuestos a esperar... simplemente, se irán a otra página. Los buscadores. Son capaces de indexar el contenido de nuestra página, el texto, pero no el contenido del Flash, ya que no lo pueden leer, lo que afectará negativamente al posicionamiento de la página. Y hoy en día es crucial para una web encontrarse bien posicionada. No obstante, los buscadores trabajan para solucionar este problema, pero de momento al mejor forma de solucionarlo es crear un diseño paralelo sin Flash, lo que aumenta el trabajo. Flash requiere de plugins para poder visualizarse, y el hecho de no tenerlos instalados, o de que un navegador tenga los scripts deshabilitados por seguridad, impedirán la visualización del Flash. Este plugin lo suelen incorporar la mayoría de navegadores, es gratuito y se puede instalar desde aquí de forma muy intuitiva, pero siempre habrá usuarios que prefieran salir de nuestra página si tienen que instalar "algo raro".


[email protected]


12 








Compatibilidad con distintos dispositivos. Cada vez es más frecuente acceder a la web con teléfonos móviles, SmartPhones y Tablets, y algunos de ellos no soportan Flash (como los Android anteriores a la versión 2.2). Flash es una tecnología propietaria de Adobe, por lo que su futuro depende de lo que esta compañía quiera hacer con él. Otro aspecto a tener en cuenta es la usabilidad de las páginas Flash, a veces se cae en la tentación de dar demasiada importancia al diseño y olvidarse de que la página debe ser fácil de usar, aunque es más un error de diseño que del propio Flash. Tendencia a su desuso en la web. Con la llegada de HTML5, se solventan muchas de las carencias de las páginas tradicionales que nos obligaban a usar Flash. Por lo que su uso deja de tener tanto sentido. De hecho, Flash CS6 incluye una herramienta para exportar contenidos Flash a HTML5.

Por supuesto su fuerte uso en la web se debe a que también aporta ventajas: 

  



La web se vuelve muy vistosa y atractiva, además de añadirle más interactividad. El aspecto visual es muy importante para la web, ya que al visitante, sobre todo al principio, "le entra por los ojos". Con un poco de práctica, el desarrollo con Flash se vuelve rápido. Flash permite comportamientos que de otra forma no podríamos lograr. Compatibilidad con navegadores. Uno de los principales problemas en el diseño web es que el resultado no tiene por qué verse igual en todos los navegadores. Con Flash, nos aseguramos de que lo que hemos creado es exactamente lo que se verá. Por tanto, se hace necesario cuando lo que se necesita es que el usuario pueda interactuar completamente con el contenido.

Resumiendo, insertar o no contenido Flash en una página web puede ser cuestionable, aunque depende de muchas cosas. Aún así, no hemos de olvidar que Flash tiene muchísimas aplicaciones más (hecho que ha provocado que otras compañías traten de sacar a la venta "clónicos" del Flash). Por ejemplo, se puede usar Flash para la creación de DVDs interactivos (como los que incluyen las revistas de informática, entre otras), la creación de banners publicitarios o lo que más está de moda ahora: la creación de dibujos animados (os sorprendería saber la cantidad de dibujos animados conocidos creados o animados mediante Flash). Además, Flash tiene uso industrial, pues se emplea para optimizar planos, crear diseños de interiores y trabajar con imágenes vectoriales en general. No dejéis de aprender a manejar el programa con más futuro... (al menos en cuanto a diseño web) Aquí tenéis algunas páginas interesantes hechas con FLASH NRG y fwa, o con entradas muy llamativas http://www.derbauer.de/, Nuestro consejo es emplear Flash únicamente en lo imprescindible en nuestra web dejando el contenido principal de la web y los elementos de navegación como HTML, que la web pueda funcionar si un usuario no puede ver los elementos en Flash y no se pierda nada realmente importante, a no ser que se trate de una web en la que su valor sea justamente su contenido interactivo o visual en Flash.


[email protected]



13

1.5. MI PRIMERA ANIMACIÓN FLASH Una de las características principales de Flash es su sencillez, esta sencillez en su utilización permite crear animaciones de un modo efectivo y rápido. Pongámonos en situación, supongamos que queremos crear una animación en la que una pelota realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un trabajo de horas, pero nada más lejos de la realidad. Veamos cómo Flash nos lo pone fácil. En este apartado no pretendemos enseñar cómo crear una animación Flash (pues eso se verá más adelante), el objetivo es que entendamos cómo crea Flash las animaciones y de que modo nos facilita el trabajo. A primera vista, lo lógico parece ser dibujar la pelota en cada instante del movimiento, de modo que cuantos más instantes dibujemos, más real parecerá el movimiento. Pues bien, con Flash bastará con crear 3 fotogramas: en el primero dibujaremos la pelota en el instante inicial (arriba del todo), en el segundo se dibujará la pelota en el momento de tocar el suelo y en el tercero la pelota volverá a estar arriba (en realidad este tercer fotograma no hará falta crearlo, pues bastará con copiar el primero). Por tanto, vemos que el trabajo más largo (dibujar los objetos) ya está hecho.


[email protected]



14

Ahora, se determina el tiempo que durará cada movimiento (es decir, el tiempo que transcurre entre los instantes en los que la pelota está arriba y abajo) y por último se le indica a Flash que cree una animación de movimiento entre estos fotogramas. Fácil ¿verdad? En esta versión de Flash aún se ha facilitado más la realización de animaciones de movimiento como veremos en el tema correspondiente.

Observa cómo ha quedado: Puedes poner a prueba vuestros conocimientos realizando la tarea práctica:


[email protected]


15


UNIDAD 2. EL ENTORNO DE FLASH CS6 2.1. LA INTERFAZ DE FLASH PRO CS6 Flash CS6 cuenta con un entorno o interfaz de trabajo de lo más manejable e intuitiva. Además, tiene la ventaja de que es casi idéntica a la de otros programas de Adobe (Photoshop, Dreamweaver, Illustrator...), todo esto hace más fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS6 por primera vez:

A lo largo de todo el curso trabajaremos con la versión de evaluación de Flash CS6 en castellano. Puedes descargar esta versión de forma gratuita desde la web de Adobe. Estará disponible hasta que se lance la siguiente versión. En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos el programa Flash. Flash recordará nuestras preferencias y abrirá el programa tal y como lo dejamos la última vez que lo utilizamos. En esta imagen faltan algunos menús. Todos se irán viendo a lo largo de este curso aunque no aparezcan en esta imagen, que sólo pretende mostrar las partes principales de la interfaz de Flash. Ing. CIP HerberthAranda Rojas

[email protected]


16


2.2. LA BARRA DE MENÚS

La Barra de Menús tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseño web o gráfico, aunque tiene algunas particularidades. Veamos los principales Submenús a los que se puede acceder: Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo, imágenes e incluso otras películas Flash), o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. También permite configurar la impresión de las páginas, imprimirlas... Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; también permite personalizar algunas de las opciones más comunes del programa. Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones. Insertar: Permite insertar objetos en la película, así como nuevos fotogramas, capas, acciones, escenas... Modificar: La opción Transformar permite modificar los gráficos existentes en la película, y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales (este tema se tratará más adelante). El resto de opciones permite modificar características de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa, Escena ...). Texto: Sus contenidos afectan a la edición de texto. Más adelante se tratará en profundidad. Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edición) que hayamos almacenado en nuestra animación, obtener otros nuevos de la página de Macromedia o ejecutar los que ya tengamos. Control: Desde aquí se modifican las propiedades de reproducción de la película. Reproducir, Rebobinar, Probar Película.... Depurar: Aquí encontraremos las opciones de depuración de la película que te ayudarñan a encontrar errores de progrmación en ActionScrit, entre ellos se encuentran Entrar, Pasar, Salir, Continuar... Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas, incluye accesos directos a todos los paneles y también la posibilidad de crear tus propios Espacios de Trabajo, guardarlos, cargarlos, etc. Ing. CIP HerberthAranda Rojas

[email protected]


17 Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Adobe, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc...


Veamos un ejemplo práctico del uso de menús, realiza el Ejercicio utilizar la cuadrícula

EJERCICIO: UTILIZAR LA CUADRÍCULA Objetivo Crear una cuadrícula que quedará visible al fondo del fotograma (posteriormente no saldrá en la película) y que nos servirá como guía para poder dibujar objetos de forma exacta y precisa.

Ejercicio paso a paso. 1. 2. 3. 4.

Pulsa en el menú Archivo. Selecciona la opción Nuevo. Elige ActionScript 3.0. Aparecerá una nueva película. Si deseas crear la cuadrícula sobre una película ya empezada, sáltate los 2 primeros pasos. 5. Selecciona la opción Cuadrícula del menú Ver. 6. Se desplegará un submenú como el de la figura. 7. Selecciona la opción Mostrar Cuadrícula para hacerlo visible.

8. Selecciona la opción Editar Cuadrícula para ajustar los parámetros de la cuadrícula a tu gusto (tamaño, color de fondo...) 9. Selecciona la opción Ajuste → Ajustar a Cuadrícula del menú Ver para que los objetos que crees se acomoden a las líneas de la cuadrícula, consiguiendo alinearlos de un modo fácil.

2.3. LA LÍNEA DE TIEMPO La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes.

1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos)


[email protected]


18 2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo aparecerá en la película.


Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre el Número de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (24.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la imagen). A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. Es decir, la película Flash no será nada más que los fotogramas que aparecen en la Línea de tiempo uno detrás de otro, en el orden que establece la misma Línea de tiempo. Para saber más acerca de la Línea de Tiempo y de los distintos tipos de fotogramas que existen visita nuestra Página Avanzada Línea de Tiempo .

Unidad 2. Avanzado: La Línea de Tiempo - Fotogramas Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto, una animación no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qué tipos de fotogramas hay y cuáles son sus rasgos.

Fot. Clave

Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifico, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la película. Se identifican por tener un punto negro en el centro y cuando esté vacío se le diferencia por una línea negra vertical. Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habría 3 Keyframes. Uno para cada posición distinta de la pelota.

Fot. Normal

Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de color gris.


[email protected]


19 El último fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris.


En el ejemplo, los fotogramas del 2 - 4 son fotogramas normales, su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misión es prolongar la duración de un fotograma clave o keyframe. Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar dentro de la Línea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la película y Flash no los tendrá en cuenta al publicar la película. En la imagen anterior, son fotogramas contenedor todos los fotogramas a partir del 11 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos.

Fot. vacío

Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco. En la imagen, los fotogramas del 6 al 10 (incluidos) son fotogramas vacíos. No debemos confundirlos con los fotogramas contenedor, pues estos últimos vienen delimitados por líneas verticales grises (no negras). Si se inserta algo en estos fotogramas, pasan a ser Keyframes. Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrará una imagen en blanco. (no dará por terminada la animación). De modo que si queremos que un objeto aparezca en el fotograma 1 y después otra vez en el fotograma 10. Los fotogramas del 2 al 9 deberán ser fotogramas vacíos ya que así el objeto "desaparecerá" y volverá a aparecer.

Fot. Etiquetado.

Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el Panel Propiedades. Si la duración del frame es la suficiente, se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas.

Fot.con Acciones

Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una acción asociada. Estos fotogramas son especialmente importantes, pues estas acciones, en principio "ocultas" (para verlas hay que acceder al Panel Ing. CIP HerberthAranda Rojas

[email protected]


20 Acciones) pueden cambiar el comportamiento de la película. En la imagen, la acción existente en el fotograma 1 afecta también al 2 y al 3 (por ser fotogramas normales). El fotograma 4 no tiene acciones y sí las tiene el 5.


Fotogramas Animados: Pueden ser de 2 tipos:

Fot. de Anim de Mov.

1) Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posición del Keyframe inicial al final. Para representar esta animación aparece una flecha entre estos Keyframes. Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa al 6, (Flash representará el movimiento entre ambas posiciones en la película final) y del 6 al 11. Otro movimiento.

Fot. de Anim de Forma.

2) Fotogramas de animación de Forma: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto, que pasa de la forma que tenía en el Keyframe inicial a la del final. Para representar esta animación aparece una flecha entre estos Keyframes. Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el frame 1 tendría la forma original, en el frame 5, forma de cuadrado (por ejemplo) y en el 11, otra forma distinta. En esta última imagen aparecen casi todos los tipos de fotogramas, ¿los reconoces?


[email protected]


21

2.4. LAS CAPAS


El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas, se le dedicará un tema completo. Aún así, veamos a grandes rasgos qué son las capas. Una Capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas). Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los el código ActionScript en una capa independiente llamada "acciones", por ejemplo). Las ventajas y desventajas de usar capas se verá en la unidad referente a Capas.

2.5. EL ESCENARIO A continuación veremos las diferentes partes que conforman el Área de trabajo empezaremos con la más importante: el Escenario. Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento: Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de busqueda rellenando los campos de Título y Descripción. Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px. Unidades de Regla: Unidad que se empleará para medir las cantidades. Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados)


[email protected]



22

Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película. Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película. Para cambiar este número, arrastra con el cursor hacia la derecha o izquierda. 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. Para practicar estas operaciones te aconsejamos realizar el ejercicio paso a paso Cambiar las dimensiones de la película

Unidad 2. Ejercicio: Cambiar las dimensiones de la película

Objetivo. Practicar cómo se pueden cambiar algunos atributos fundamentales de las películas.


Haz clic con el botón derecho sobre el fondo de la película. Selecciona Propiedades del Documento. En Unidades de Reglas selecciona Centímetros. A continuación selecciona Dimensiones y escribe en las casillas Anchura 22,46 y en Altura 16,84. 5. Pulsa en Aceptar y observa cómo cambia el tamaño. Estas medidas equivalen aproximadamente a las estándar 640 x 480 px.


[email protected]



23

2.6. LAS VISTAS O ZOOMS La Herramienta Zoom se emplea para acercar o alejar la vista de un objeto, permitiendo abarcar más o menos zona del Entorno de Trabajo. Cada vez que hagamos clic en con el Zoom duplicaremos el porcentaje indicado en el desplegable Zooms.

Panel Zooms: Son un conjunto de accesos directos a Submenús existentes en el Menú Ver. Son muy útiles y ayudan a acelerar el trabajo cuando se emplean correctamente. Para saber más acerca de los Zooms página Básica

.

Unidad 2. Básico: Utilizar el Zoom

El efecto Zoom consiste en acercar o alejar la "mirada" de un determinado lugar. En realidad, lo que se hace es aumentar o reducir el tamaño de un objeto, de modo que parece que nos hayamos acercado o alejado de él. Es muy útil para poder ver con más detalle ciertos puntos de la animación (gráficos principalmente) y para poder retocar algunas partes que no son visibles desde lejos. Ing. CIP HerberthAranda Rojas

[email protected]


24 Igualmente, resulta útil ver la animación desde lejos para tener una visión global de ella. Veamos cómo trabaja Flash con los Zooms.


Panel Zoom

Se puede acceder a todas las funciones de los Zooms desde el Menú Ver. En cualquier caso, Flash incluye un submenú de acceso rápido para dichos comandos. Veamos en qué consisten: Mostrar Fotograma: Muestra el contenido del Fotograma actual en su totalidad. Es decir, amplia el tamaño del fotograma hasta ocupar todo 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 película, adaptando el tamaño del fotograma al espacio necesario para que quepan. Si todos los objetos están en la parte izquierda de un fotograma, la parte derecha no se verá. Como podemos ver, ambas selecciones son útiles, pero tienen sus desventajas. Para darnos libertad total, Flash nos permite elegir el tamaño del Escenario. 25%, 50%...: Muestra el fotograma con el tamaño que indiquemos en % teniendo en cuenta que el 100% es el tamaño de referencia. Es decir, el 100% es el tamaño original de la película (ocupa lo que se verá al publicar la película), todo lo demás depende de cuánto sea el 100 %. Es decir, si el 100% son 640 x 480 px. El 50% será justo la mitad de esta cantidad y el 200% será el doble de 640 x 480 px.

2.7. LOS PANELES Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo, todo lo que haga referencia a las acciones, irá en el Panel Acciones). Su misión es simplificar y facilitar el uso de los comandos. Estos paneles o ventanas se encuentran organizados en el lateral derecho del área de trabajo. Pudiéndose expandir o minimizar con un clic de ratón. Si no están visibles en el lateral derecho, puedes visualizarlos desplegando el menú Ventana y haciendo clic sobre el nombre del panel que quieras mostrar.


[email protected]


25 Para mejorar la experiencia del usuario, Flash permite cargar y guardar tus propias disposiciones de paneles, para que si en algún momento el entorno se vuelve un poco caótico puedas recuperar tu configuración elegida desde el menú Ventana.


Para ello deberás acceder a la opción Ventana → Espacio de trabajo → Nuevo espacio de trabajo y asignar un nombre a nuestro nuevo espacio.

Ahora sólo bastará darle un nombre a la disposición y será accesible desde el mismo elemento de menú Espacio de trabajo en cualquier momento. Todos los paneles se estudiarán en profundidad a lo largo del curso. Aún así, vamos a nombrarlos y a resumir las funciones de la mayoría de ellos.      

Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy útil. Panel Color: Mediante este panel creamos los colores que más nos gusten. Panel Muestras: Nos permite seleccionar un color de modo rápido y gráfico. (Incluidas nuestras creaciones). Panel Información: Muestra el tamaño y las coordenadas de los objetos seleccionados, permitiéndonos modificarlas. Muy útil para alineaciones exactas. Panel Escena: Modifica los atributos de las escenas que usemos. Si aún no sabes lo que son las Escenas, te lo explicamos en nuestro tema básico escenas .

Ejercicio Básico: Escenas Escenas Una Escena no es más que una porción de la Línea de Tiempo, con todo lo que ésta incluya (capas, fotogramas...). Su finalidad principal es la de organizar la película, de modo que las partes de la película que no tengan relación entre sí o no estén una a continuación de la otra (seguida en la línea de tiempo). De este modo, separando una película en 3 escenas, conseguimos tener 3 líneas de tiempo, 3 conjuntos de capas y 3 conjuntos de fotogramas, que veremos y editaremos como si de 3 películas diferentes se tratara. Ing. CIP HerberthAranda Rojas

[email protected]


26 No debemos olvidar que aunque en apariencia sean películas distintas, la Línea de Tiempo es la misma y que al acabar la primera escena se reproducirá la segunda y así sucesivamente...


Las Escenas se pueden añadir, eliminar, editar... desde el Menú Escena al que se accede desde Ventanas → Escena.

  



  



Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados. Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra película. Panel Comportamientos: Permiten asignar a determinados objetos una serie de características (comportamientos) que después podrán almacenarse para aplicarse a otros objetos de forma rápida y eficaz. Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades características y muchas utilidades (calendarios, scrolls etc...) Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras películas. Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles desde este panel. Panel Propiedades: Sin duda, el panel más usado y más importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamaño de los caracteres, tipografía, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamaño etc... Es fundamental, no debeis perderlo de vista nunca. Panel Explorador de Películas: Nos permite acceder a todo el contenido de nuestra película de forma fácil y rápida

Para practicar estas operaciones te aconsejamos realizar Ejercicio Acceder a los Paneles

Ejercicio: Accediendo a paneles Objetivo Abrir los Panel de Muestras y seleccionar una muestra de color.

Ejercicio paso a paso


[email protected]



27

Ejercicios Propuesto Unidad 2: El entorno de Flash CS6 Ejercicio 1: Crear una película a nuestro gusto Crea una película que tenga las siguientes propiedades: 1. Un tamaño de 300 x 100 px 2. Un color de fondo rojo 3. Un Velocidad de los Fotogramas de 14 fps


[email protected]


28

Ejercicio 2: Estructurar una película


1. 2. 3. 4.

Abre una nueva película Crea 2 Escenas y llámalas Escena 1 y Escena 2 Crea 2 capas en cada una. Llámalas E1_1, E1_2 y E2_1, E2_2

Ejercicio 3: Creando fotogramas 1. Crea en una película nueva 3 fotogramas clave 2. Crea 3 fotogramas normales, cada uno asociado a un fotograma clave distinto

Ejercicio 4: Identificando fotogramas 1. Dada la siguiente película

Identifica todos los tipos de fotogramas existentes y a qué tipo pertenecen. ¿Recuerdas para qué sirve cada uno?

Ejercicio 5: Paneles 1. 2. 3. 4. 5.

Abre el Panel Color. Abre el Panel Acciones. Abre el Panel Alinear. Cierra el Programa Flash CS6 Vuelve a abrirlo. ¿Qué notas?

Si no tienes muy claro las operaciones a realizar, Aquí te ayudamos.

Ayuda ejercicios unidad 2: El entorno de Flash CS6 Ejercicio 1: Crear una Pelicula a nuestro gusto El apartado 1 nos propone cambiar las dimensiones del Escenario: 1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento. 2. Pulsamos sobre la pestaña Unidades de Regla y seleccionamos Píxeles (px) 3. Introducimos las medidas pedidas (300 x 100) en Dimensiones.


[email protected]


29 El apartado 2 nos propone cambiar el color de fondo del Escenario:


1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento 2. Pulsamos sobre la pestaña Color de fondo, el puntero se convertirá en un "cuentagotas". 3. Seleccionamos el color pedido. El apartado 3 nos propone aumentar la velocidad de reproducción de la película 1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento. 2. En Veloc. Fotogramas escribe 14 fps. El resultado debe ser un rectángulo rojo con las medidas propuestas.

Ejercicio 2: Estructurar una Película Vamos a crear la película pedida y a estructurarla tal y como piden 1. 2. 3. 4.

Abrimos una nueva Película desde el menú Archivo → Nuevo Accedemos al Panel Escena desde Ventana → Otros Paneles → Escena Creamos una nueva Escena pulsando sobre el signo . Les cambiamos los nombres haciendo doble clic en sus nombres actuales

Ahora falta crear el número de capas pedido. 1. Seleccionamos la Escena E1 en el Panel Escena 2. Creamos otra capa más, pulsando el signo en la línea de tiempo. 3. Les cambiamos los nombres a las 3 capas haciendo doble clic en sus nombres actuales (por defecto Capa 1 y Capa 2) Seleccionamos la Escena E2 en el Panel Escena y repetimos los pasos anteriores del 2 al 3. El Panel Escena debería quedar así:

Y así las Capas:


[email protected]



30

Ejercicio 3: Creando Fotogramas Vamos a crear los fotogramas pedidos: 1. 2. 3. 4.

Abrimos una nueva película Hacemos clic sobre el fotograma 2, pues en el 1 ya hay un Keyframe Vamos al menú Insertar y seleccionamos Fotograma Clave Hacemos clic sobre el fotograma 3 y seleccionamos Insertar → Línea de Tiempo → Fotograma Clave

Ya tenemos los 3 Fotogramas Clave creados. Faltan los fotogramas normales 1. Seleccionamos el fotograma 1 y hacemos clic en el menú Insertar → Línea de Tiempo y seleccionamos Fotograma. 2. Ahora el fotograma 2 será un fotograma normal y el 3 y el 4 serán Fotogramas Clave. Seleccionamos el fotograma 3 y repetimos el proceso anterior. 3. Seleccionamos el fotograma 5 y lo volvemos a repetir. Esto será lo que obtengamos:

Fijémonos en que no están los puntos negros en los Fotogramas Clave ni los cuadrados blancos en lo fotogramas normales. Esto se debe a que no hay nada dibujado en dichos fotogramas. Si probamos a insertar algo en cada par de fotogramas, inmediatamente obtendremos esto:


[email protected]


31

Ejercicio 4: Identificando Fotogramas


Vamos a identificar los diferentes tipos de fotogramas:

1. Hay 3 Fotogramas Clave. Son el fotograma 1, el 7 y el 9. Los 2 primeros representan una animación de Movimiento. (probablemente contendrán al mismo objeto pero cambiado de lugar). El tercero es un Fotogramas Clave normal. 2. Los fotogramas entre el 1 y el 7 y los fotogramas entre el 9 y el 13 (no incluidos) son fotogramas normales. Simplemente determinan la duración de los Keyframes a los que van asociados. 3. Los fotogramas del 13 al 15 (incluidos) y el fotograma 8 son Fotogramas Contenedor. Existen y en la película se verán como fotogramas en blanco (o con el color de fondo que hayamos seleccionado). 4. Los fotogramas del 16 en adelante son fotogramas vacíos y no se verán en la película.

Ejercicio 5: Paneles 1. 2. 3. 4. 5.

Abrimos el Menú Ventana. Hacemos clic en Color. Se abrirá el Panel correspondiente. Repetimos los pasos del 1 al 2, pero abriendo el panel Alinear. Cerramos el programa y lo volvemos a abrir. Observamos que los Paneles siguen donde los dejamos. Flash adapta su entorno a nuestras preferencias.


[email protected]


32


UNIDAD 3 DIBUJAR Y COLOREAR

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

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



Herramienta Selección (flecha): . Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con doble clic), los rellenos (con un sólo clic), zonas a nuestra elección... Su uso adecuado puede ahorrarnos tiempo en el trabajo.  Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán en el tema siguiente. 

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


[email protected]


33






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



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



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



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



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

Unidad 3. Ejercicio: Crear un óvalo Objetivo. Crear una óvalo con las medidas y la forma que queramos

Ejercicio paso a paso. 1. Pulsa sobre la Herramienta Óvalo que se encuentra en la Barra de Herramientas. Puede que en vez del óvalo encuentres otra herramienta de su grupo, como el Rectángulo. Si es así, mantén el cursor pulsado durante unos segundos sobre ella para que se despliegue el menú. 2. Sitúa el cursor del ratón en el Escenario (dentro del fotograma actual). 3. Haz clic y arrastra el ratón hacia el lugar que desees. Observarás que el movimiento de tu ratón provoca la creación de un óvalo (figura 1). Cuando el Ing. CIP HerberthAranda Rojas

[email protected]


34


óvalo tenga la forma deseada, suelta el ratón. El resultado será similar al de la figura 2.

Figura 1

Figura 2

4. Guarda el archivo como trabajo.fla. Lo volveremos a utilizar más adelante. Truco: Si quieres crear un círculo perfecto, mantén pulsada la tecla SHIFT mientras das forma al óvalo. (Sucede igual con la Herramienta Rectángulo)

3.3. LA BARRA DE HERRAMIENTAS. HERRAMIENTAS AVANZADAS Herramienta Lazo: Su función es complementaria a la de la herramienta Selección, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano). Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones: . Esto es la herramienta Varita Mágica, tan popular en otros programas de dibujo. Permite hacer selecciones según los colores de los objetos. El tercer dibujo que aparece es este:

para seleccionar Poligono.

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


[email protected]


35 Herramienta Cuentagotas:

Su misión es "capturar" colores para que posteriormente


podamos utilizarlos. Para ver cómo funciona, consulta este videotutorial:

3.4. LA BARRA DE HERRAMIENTAS. OPCIONES Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso. Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta correspondiente sino que además debemos hacer clic en la línea o en el objeto que has dibujado. Entonces aparecerá (o se iluminará si ya estaba presente) un submenú como este: Ajustar a Objetos : Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se superpongan, dando la sensación de estar "unidos". Suavizar: Enderezar: rectilíneos.

Convierte los trazos rectos en líneas menos rígidas. Realiza la labor inversa. Convierte los trazos redondeados en más

3.5. EL PANEL COLOR El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que más nos gusten. 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 y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre el color que está junto al lápiz y si queremos modificar un relleno, haremos clic en el color que está junto al bote de pintura . Al hacerlo aparecerá un panel con multitud de colores para que seleccionemos el que más nos gusta. También permite introducir el código del color según el estándar.


[email protected]



36

En vez de este selector rápido, podemos usar el panel Color, que encontraremos entre los paneles.

Así mismo se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la herramienta Bote de Pintura). Se pueden crear diferentes tipos de relleno:    

Sólido: Consiste en un relleno formado por un solo color. 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 al otro Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular. Relleno de mapa de Bits: Permite colocar como relleno alguna imagen existente en la película (O ajena a ella si antes se "importa") Para aprender a crear un color transparente (semi-transparente), realiza el ejercicio paso a paso Crear transparencias.


[email protected]


37

Unidad 3. Ejercicio: Crear transparencias Objetivo


Crear un objeto cuyo color sea parcialmente transparente, de modo que se vean los objetos de detrás.

Ejercicio paso a paso. En este ejercicio utilizamos un archivo que encontrarás en la carpeta de ejecicios del curso. Si aún no tienes estos archivos, puedes descargarlos gratuitamente desde aulaClic registrándote como usuario. 1. Abre el archivo transparencia.fla que encontrarás en la carpeta de ejercicios. 2. Selecciona el relleno del Rectángulo. 3. Haz clic sobre el color de relleno en la Barra de herramientas. Se mostrará el panel para cambiar el color. 4. En la parte superior del panel encontrarás el control de transparencia Alfa. Haz clic sobre él y arrastra hacia la izquierda hasta que el valor baje a 45% (por ejemplo).

Rectángulo Azul

Ahora con Transparencia

El efecto alfa trabaja de forma que si situamos cualquier objeto o imagen detrás de él, podemos ver como un efecto de transparencia que mostrará parte de lo que se encuentre detrás de nuestro relleno.


[email protected]


38


3.6. EL PANEL MUESTRAS

El Panel Muestras sirve para poder ver de un modo rápido y claro los colores de que disponemos, tanto sólidos (un solo color) como degradados (lineales o radiales). Además, cuando creemos un color mediante el Panel Color, podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un menú desplegable en la parte superior derecha del panel Color). Una vez esté agregado el color, pasará a estar disponible en nuestro conjunto de muestras y podremos acceder a él rápidamente cada vez que trabajemos con nuestra película. Cada película tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que teníamos la última vez que trabajamos con dicha película. Para practicar el manejo de este panel, te aconsejamos realizar el ejercicio paso a paso Colorear un óvalo

Unidad 3. Ejercicio: Colorear un óvalo Objetivo Dar color a un elemento simple. Tanto a su interior como a su exterior

Ejercicio paso a paso 1. Abre el archivo que creamos en el primer ejercicio de la unidad, trabajo.fla. 2. Hacemos clic en el interior del óvalo o en su borde. Dependerá de la zona cuyo color queramos modificar. Obtendremos algo similar a la figura 1 o a la 2.

Seleccionamos el Interior del Óvalo


Seleccionamos el Borde del Óvalo

[email protected]


39


3. Una vez hecho esto, nos fijamos en el Panel de Muestras, que se encuentra en el lateral derecho del área de herramientas y seleccionamos el color que nos guste. Para modificar el color del interior del óvalo también podemos seleccionar un color directamente haciendo clic sobre el Panel de Colores existente en el Panel de herramientas junto a la imagen del "Bote de Pintura". O si deseamos modificar el borde, sobre el Panel existente junto al "Lápiz".

Ejercicios práctico unidad 3: Dibujar y colorear Ejercicio 1: Bandera Olímpica 1. Dibuja 5 aros. 2. Cámbiale los colores. Por ejemplo, los colores de la bandera olímpica (azul, negro, rojo, amarillo y verde) 3. Únelos de modo que parezcan los aros olímpicos.

Ejercicio 2: Saturno 1. Dibuja un óvalo 2. Convierte su color de relleno un degradado de verde oscuro a verde claro (por ejemplo). 3. Crea el aro que le rodea. 4. Une los 2 objetos para que parezca el planeta Saturno

Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.

Ayuda ejercicios unidad 3: Dibujar y colorear Ejercicio 1: Los Aros Olímpicos Vamos a dibujar los aros olímpicos. Como siempre, partiremos de un nuevo documento Action Script 3.0, a través del menú Archivo → Nuevo. 1. Seleccionamos la Herramienta Óvalo. Ing. CIP HerberthAranda Rojas

[email protected]


40


2. Trazamos un óvalo, y para que sea perfectamente circular, mantenemos pulsada la tecla Shift. 3. Ahora, podemos intentar crear los otro cuatro aros iguales, o seleccionarlos con la herramienta Selección, copiarlos desde el menú Edición → Copiar y pegarlos desde el mismo menú. 4. Una vez estén dibujados, seleccionamos el relleno de cada óvalo y pulsamos la tecla Suprimir para eliminarlo. (Igualmente podíamos haber seleccionado el color "ninguno" y posteriormente creado los óvalos que hubieran aparecido sin color de fondo) 5. Ahora seleccionamos los bordes de cada aro y le damos el color que queramos seleccionándolo en el Panel Color. 6. Ahora mueve cada aro hasta la posición deseada. Para mover un objeto, selecciona la Herramienta Selección, haz clic en el aro que quieras mover y arrástralo. Para movimientos precisos, puedes utilizar las teclas con flechas.

Ejercicio 2: Saturno Vamos a dibujar un planeta parecido a Saturno

1. 2. 3. 4. 5.

Seleccionamos la Herramienta Óvalo. Creamos un óvalo circular, que hará de planeta. Eliminamos el borde, para ello, hacemos clic en él y pulsamos la tecla Suprimir. Seleccionamos el relleno del óvalo y abrimos la opción Relleno. Seleccionamos la opción Degradado Radial.

6. Pulsamos en y seleccionamos los colores que deseemos, (podemos añadir tantos colores como queramos y probar su efecto). 7. Dibujamos el anillo del planeta, por ejemplo creando otro óvalo con la forma adecuada. No lo dibujes sobre el planeta. 8. Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Por ejemplo, borramos parte del planeta seleccionándola de forma rectangular y pulsando la tecla Suprimir tal y como vimos en el paso 3. 9. Separa los dos hemisferios del planeta. 10. Pon el anillo sobre el hemisferio inferior, y después, arrastra sobre el anillo la otra parte del planeta.


[email protected]


41

UNIDAD 4 TEXTOS “Porque de Tal manera Amo Dios al Mundo que ha dado a su Hijo Unigénito para que Todo Aquel que en El Crea No se Pierda Mas Tenga Vida Eterna”. Jn. 3:16

4.1. El texto en Flash Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación, y por tanto, también todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones gráficas, de modo que tratará cualquier texto como si de un objeto más se tratase, listo para ser animado a nuestro gusto. Esto nos permitirá posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3 tipos de texto, texto estático o normal, texto dinámico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), también se puede crear texto que soporte formato HTML etc... Actualmente Flash utiliza dos motores para trabajar con texto: el motor clásico, heredado de las anteriores versiones, y el llamado Text Layout Framework (TLF), el nuevo motor incluido en Flash CS6. Este último, es el utilizado por defecto en Flash. Por defecto, salvo que indiquemos otra cosa, en nuestros ejemplos emplearemos el motor de texto TLF.

4.2. Insertar Texto

En la barra de Herramientas encontramos la herramienta Texto permitirá escribir texto en nuestros proyectos.

, que es la que nos

Los caracteres del texto no está introducidos directamente en el documento, si no que están confinados en un contenedor de texto. En Flash podemos introducir dos tipos de contenedores: Texto de puntos. El tamaño del contenedor depende del texto introducido, creciendo y decreciendo con él. Texto de área. Podemos definir su tamaño, independientemente del texto que contenga.


[email protected]



42

Para insertar un Texto de puntos, basta con hacer clic con la herramienta Texto y comenzar a escribir. En cambio, si queremos introducir un Texto de área, tenemos que hacer clic y arrastrar para definir el tamaño del área. En cualquier caso, siempre podemos convertir un Texto de puntos en área simplemente cambiando su tamaño, estirando de los controles de transformación que se muestran alrededor. Para saber más acerca de Cómo escribir textos visita nuestra página avanzada Escribir Texto.

Escribir Texto Avanzado Tras hacer clic con la Herramienta Texto en cualquier parte del fotograma actual, nos aparecerá algo así: El recuadro que vemos es el recuadro que contendrá al texto. En la película final no se verá, pero nos servirá para localizar más fácilmente el texto y para moverlo o cambiar su tamaño. Finalmente, el círculo que hay arriba a la derecha significa que el recuadro del texto se expandirá según vayamos escribiendo y también el texto. Esto es, todo lo que escribamos, estará en la misma línea. Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que lo contiene. Para cambiar de línea, sería necesario pulsar la tecla Enter (Intro).

Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante común, acercaremos el cursor del ratón al borde del recuadro de texto, según donde lo acerquemos, se transformará en un símbolo o en otro. Si lo acercamos al borde del recuadro, se le añadirá debajo de la flecha una flecha pequeña de 4 direcciones como la que muestra la figura y que nos indica que podemos mover el texto:


[email protected]


43


Si lo acercamos al círculo que está en el margen superior derecho, el cursor se convierte en un flecha de "ensanchamiento", como la que muestra la figura:

Con el cursor convertido en flecha de "ensanchamiento", podemos estirar los límites del recuadro de texto, y además, el círculo que aparecía en el margen superior derecho, se convierte en un cuadrado. Este cuadrado significa que los límites del recuadro de texto han quedado fijados, y que al insertar más texto, se producirá un salto de línea en lugar de ensanchar el recuadro de texto. Este sería su comportamiento al introducir texto:

Si quisiéramos, (una vez definido el recuadro de texto) volver al modo anterior, basta con hacer doble clic sobre el cuadrado que está en el margen superior derecho del recuadro de texto. Tras hacerlo, se convertirá en un círculo y su comportamiento será el descrito al principio de esta página.

4.3. Propiedades de los Textos El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra película, de modo que si seleccionamos un texto, podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto. Podemos ver que el panel muestra una gran cantidad de opciones, agrupadas en categorías.


[email protected]


44


Observarás que las imágenes anteriores muestran distintas opciones para el texto. Esto se debe a que la de la izquierda tiene seleccionada el motor Texto TLF, que nos permite muchas más opciones. La de la derecha tiene establecido el motor Texto clásico, y aparecen menos opciones, las que veníamos encontrando en la anterior versión del programa. Si quieres saber cómo utilizar el texto clásico, puede seguir este avanzado Clásico.

Texto

Texto clásico Avanzado El motor de texto clásico En Flash CS6, Adobe ha implementado un nuevo motor de renderizado de texto más completo y funcional. No obstante, existen algunas funciones que sólo están disponibles si se usa el motor de texto clásico, es por ello que Flash nos permite seguir utilizándolo. Flash distingue entre diversos tipos de textos clásicos y les da un tratamiento especial, según el tipo que sean. Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores, y es en el Tipo de texto en lo que se diferencian. El tipo de texto se puede modificar desde el Panel Propiedades sin más que haciendo clic sobre la pestaña Tipo de texto:

.

Texto estático El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la animación. Es importante que no confundamos la palabra "estático" con que el texto no se mueva o malinterpretemos la frase es el texto que no presenta cambios a lo largo de la animación. Lo que queremos decir es que no cambia el contenido del recuadro de texto, es decir, que el texto puede estar animado (girar, cambiar de color...) y sin embargo ser estático. Así, un recuadro de texto en el que pone "Aprende Flash CS6" durante toda la película, es estático, aunque dicho texto cambie de posición, forma o color. Sin embargo, si en ese mismo recuadro de texto pasa a poner "Con este Curso", este recuadro de texto NO es estático. Se insistirá en este punto en los ejercicios de evaluación.

Texto dinámico El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido (además de estar animado). Su uso es bastante más complejo que el del Texto Estático, ya que cada recuadro de texto Dinámico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se Ing. CIP HerberthAranda Rojas

[email protected]


45 pueden modificar mediante programación, lo que nos saca del objetivo de este curso. Un uso común que suelen tener es el de representar los textos introducidos mediante Textos de Entrada (ver siguiente punto).


Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede decidir el número de líneas que van a tener, se puede introducir texto HTML, se puede añadir fácilmente un borde al texto o dar nombre a la variable que represente al texto Dinámico. Una opción interesante es el botón , que nos permite indicar qué caracteres incluir en el archivo SWF. Aquí debemos de indicar los caracteres que esperamos que muestre el texto dinámico. Al editar nuestra película, distinguiremos los textos dinámicos por aparecer enmarcados en una línea discontinua.

Introducción de texto El Texto de Entrada o Introducción de texto tiene básicamente las mismas propiedades que el Texto Dinámico, junto con algunas propias de un tipo de texto orientado a la introducción de datos por parte de usuario, como por ejemplo el número máximo de líneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las contraseñas). Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de texto SIN contenido, ya que lo deberá introducir el usuario. Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto Dinámico.

Aquí puedes ver un ejemplo de introducción de texto

Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imágenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra página web). Aún así, crear animaciones con textos, que sobrepasen a las que Flash incorpora Ing. CIP HerberthAranda Rojas

[email protected]


46


por defecto (colores, transparencias, brillos, rotaciones, movimientos o combinaciones de estos) puede resultar un trabajo de muchísimas horas y mucha paciencia. Los resultados son increíbles, pero puede resultar recomendable en estos casos usar algunos programas diseñados con este objetivo. Entre otros destacan el Swish, el FlaX o el MiX-Fx, con ellos podrás crear efectos de texto asombrosos en pocos minutos, aunque no podrás gozar del entorno de Flash CS6 ni podrás emplear el resto de herramientas de que dispone. Nota: El motor de texto TLF requiere publicar los archivos como ActionScript 3 y FlashPlayer 10 o posterior. Si necesitas publicar archivos para versiones anteriores, deberás de emplear el motor clásico. Veamos las principales opciones del panel Propiedades, comunes a ambos motores. Otras más específicas las veremos más adelante, cuando vayamos a emplearlas: Podemos elegir cómo se comporta el texto: Si es Seleccionable, y el usuario lo podrá seleccionar y copiar en el portapapeles, Sólo lectura, lo que impedirá que lo pueda seleccionar, o si lo puede cambiar (Editable), por ejemplo, para introducir datos.

Además, podemos establecer la orientación del texto, en Horizontal (por defecto) o Vertical. Posición y Tamaño: Dado que Flash trata los textos como objetos, éstos también tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografías son una parte muy importante y deben respetarse.

En el panel encontramos las coordenadas horizontal (X) y vertical (Y) del la esquina superior del elemento de texto, coincidiendo las coordenadas 0 0 con la esquina superior izquierda de la escena. También se muestran los valores del ancho (AN) y alto (AL) del texto. Carácter. En esta sección encontramos las opciones típicas del texto: Familia: Desde aquí, al igual que en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que mejor se ajuste a nuestro diseño. Ing. CIP HerberthAranda Rojas

[email protected]


47


Estilo: Nos permiten la combinación de los dos estilos de texto habituales: texto normal (Regular), en cursiva (Italic), negrita (Bold) o negrita cursiva (Bold Italic).

Tamaño: El tamaño de la tipografía empelada. Interlineado: Nos permite controlar la separación entre las líneas de texto dentro de un mismo párrafo. Color: Como al resto de elementos, podemos dar color al texto. Espaciado: Determina el espaciado adicional entre caracteres. Útil cuando la tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.

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

Suavizado: Las opciones de suavizado resultan importantes a la hora de mostrar nuestro texto. Encontramos estas opciones: o

o

o

Utilizar fuentes de dispositivo: Se emplean las fuentes instaladas en el equipo, lo que hace más liviano el archivo SWF al no tener que incluirlas. Aunque nos exponemos a que la fuente no esté instalada, por lo que se empleará otra. Sólo deberíamos de utilizar esta opción para las familias de fuentes más comunes. Suavizado para legibilidad, favorece la legibilidad del texto. En este caso, deberíamos de incorporar la fuente, como veremos más adelante. No debemos de emplearla en textos animados. Suavizado para animación, es la mejor opción cuando pretendemos animar texto, ya que se obtienen animaciones más fluidas ignorando algunos aspectos del texto, como alineaciones. En este caso, deberíamos de incorporar la fuente.


[email protected]


48


Giro y otros estilos: Al final de este grupo de opciones encontramos las opciones para rotar el texto seleccionado, y aplicarle estilos de subrayado, tachado, superíndice y subíndice.

Carácter avanzado: Vínculo: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una dirección web, nada más fácil que escribirla ahí. Flash la asociará al texto que estés escribiendo en ese momento. Destino: Determina si la URL a la que el texto hace referencia se cargará en la misma ventana del navegador, en una nueva ...

Además, en esta sección podemos especificar cómo se comporta el texto Por ejemplo, que se muestre en mayúsculas, los saltos, etc...

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 nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con párrafos (entre otras). A la Izquierda: Todas las líneas empezarán tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido). Centrar: párrafo.

Las líneas se distribuyen a la derecha y a la izquierda del punto medio del


[email protected]


49 A la derecha: Todas las líneas empezarán tan a la derecha como sea posible dentro del recuadro de texto que hayamos definido).


Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus límites. Las diferentes opciones se refieren a la última línea del texto, que suele ser más corta que el resto. El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho), los sangrados de párrafo y el espacio interlineal.

Para practicar estas propiedades te aconsejamos realizar Ejercicio Propiedades del texto.

Ejercicio: Propiedades del texto Objetivo. Crear un texto cualquiera y asignarle las propiedades que más nos interesen.

Ejercicio paso a paso. 1. Abre el archivo trabajo.fla, creado en la unidad anterior. 2. Creamos una nueva capa (ya veremos más adelante para que sirven) haciendo clic en el botón en la línea de tiempo. 3. 3 Hacemos clic en la Herramienta Texto y después en el escenario.

4. Veremos esta imagen

. Escribe dentro el texto Esto es un texto de prueba.

5. Hacemos clic en el Propiedades, si es que teníamos minimizado este Panel. 6. Haz que el texto se encuentre centrado haciendo clic en 7. Cambia la fuente del texto a Verdana seleccionándola en el desplegable Familia. . 8. Cambia el espaciado entre caracteres del texto a 2 escribiéndolo en la opción Espaciado. 9. Por último cambia el tamaño del texto a 30 y ponlo en Negrita utilizando los controles de Tamaño y Estilo. Ing. CIP HerberthAranda Rojas

[email protected]


50

4.4. Propiedades de los contenedores de texto


En el panel de propiedades, podemos encontrar algunas opciones que afectan a los contenedores de texto, en la categoría de opciones Contenedor y flujo.

La propiedad Comportamiento se refiere a como se amplía un contenedor de Texto al introducir texto. Caracteres máx.: Nos permite limitar el número máximo de caracteres que se pueden introducir en la caja de texto. Alineación: nos permite establecer la alineación horizontal del texto en el contenedor. Sus valores pueden ser Superior, Centrar, Inferior o Justificar.

Columnas nos permite dividir fácilmente un texto de área en el número de columnas indicado. En este caso, también podremos regular el espacio entre ellas (medianil).

. El relleno (padding) permite crear una separación entre los bordes del contenedor y el texto. Además, podemos asignar un color de relleno y borde al contenedor.


[email protected]


51

4.5. Flujo de texto entre contenedores


Al escribir, podemos crear textos de áreas con un texto fijo, y colocarlo en un lugar del documento. Pero pensemos en un tríptico, por ejemplo. En este caso lo ideal sería tener un texto de área centrado en cada página, y que cuando el texto no nos cabe en uno, pase al siguiente. Esto lo conseguimos enlazando los distintos textos de área. Los textos de área tienen un cuadradito en su comienzo, llamado puerto de entrada, y otro al final, llamado puerto de salida.

Cuando todo el texto cabe en el elemento de texto, el puerto de salida aparece en blanco. Pero cuando el texto desborda al elemento, el puerto de salida muestra el símbolo . Cuando dos elementos de texto aparecen enlazados, el que va primero muestra una flecha hacia afuera en el puerto de salida, que está unido al puerto de entrada del siguiente elemento, que muestra una flecha hacia adentro.

Para crear un elemento de texto enlazado, partimos de un objeto de texto ya creado, y hacemos clic con la herramienta Selección en uno de sus puertos, en el de entrada si queremos que el nuevo objeto vaya delante, o en el de salida si el nuevo objeto irá a continuación. El cursor cambiará a cursor de , dándonos dos opciones: Hacer clic en el en otro área de texto para enlazarlo. Trazar un nuevo elemento de texto, igual que con la herramienta Texto. Si esto lo hacemos en un puerto ya enlazado, el nuevo elemento de texto se colocará entre los elementos que estaban enlazados. Para romper un enlace, podemos hacer doble clic sobre un puerto enlazado, lo que mueve todo el texto al puerto de origen. Para practicar lo que hemos visto, te aconsejamos realizar el ejercicio paso a paso Crear un flujo de texto. Ing. CIP HerberthAranda Rojas

[email protected]


52

Ejercicio: Crear un flujo de texto Objetivo. Crear un texto que fluya por varios contenedores.



Abre el archivo trabajo.fla, utilizado en ele ejercicio anterior. Selecciona el elemento texto que creamos en el ejercicio anterior. Haz clic en una de sus esquinas para cambiar su tamaño. Escribe más texto hasta que el puerto de salida muestre una cruz roja (puedes copiar texto de esta página y pegarlo).

5. Haz clic sobre el puerto de salida, verás que el cursor cambia a . 6. Ahora, traza un rectángulo sobre la escena. Verás que se crea un nuevo área de texto que se rellena con el texto sobrante de la primera área. 7. Escribe nuevo texto al principio del primer área, y comprueba que va pasando de la primera a la segunda.

4.6. Incorporar Fuentes Al crear un archivo de flash con texto, si en Suavizado no hemos elegido fuentes de dispositivo, tenemos que tener presente que si hemos elegido una fuente que no está disponible en el sistema que se reproduce la película, se sustituirá por otra fuente disponible. Esto es un problema, ya que puede alterar bastante nuestro diseño. Para evitar esto, podemos incluir las fuentes que hemos empleado en nuestro proyecto. Esto garantiza que el texto se vea tal y como lo creamos, independientemente de las fuentes del sistema. Para incorporar una fuente en la película usamos el botón Incorporar que aparece en el panel de Propiedades. Se abrirá el siguiente cuadro de diálogo:


[email protected]


53

En el desplegable Familia seleccionamos la fuente que deseamos utilizar. Seleccionamos los estilos que vamos a utilizar (Negrita, Cursiva y Tamaño).


El nombre que le demos se mostrará en la Biblioteca y estará lista para utilizarse. Cuando creemos un campo de texto, seleccionamos nuestra fuente, que aparecerá señalada con un asterisco (*).

De esta forma nos aseguramos que nuestro proyecto se verá tal cual lo creamos.

4.7. Introducir Texto Aunque el uso más común y principal de los contenedores de texto es mostrarlo, también podemos emplearlos como un cuadro de entada de texto. Para hacerlo, basta con seleccionar Texto editable en las propiedades del elemento.

En el siguiente ejemplo, tenemos tres cuadros de texto: el de arriba es editable, el del medio solo seleccionable y el de abajo solo se puede leer. Y también hemos hecho que el contenido de todos cambie según lo que se escriba en el primero.


[email protected]


54


Para recoger información de los usuarios, normalmente emplearemos componentes de formulario, que son controles específicos para esta función. Pero a esto le dedicaremos un tema completo más adelante. Pero ¿cómo recogemos la información introducida en el cuadro de texto? Aunque aún no lo hemos explicado, el texto es un objeto. Y como tal, tiene una propiedad que nos permite leer su contenido mediante ActionScript. Cuando comencemos a trabajar con ActionScript veremos que esto, es una tarea muy sencilla.

Ejercicios Práctico: Textos Ejercicio 1: Crear textos 1. Crea una película con 1 fotograma. 2. Crea un objeto de texto para lectura que diga: Bienvenido a mi página web. 3. Utiliza la fuente Verdana a un tamaño de 45. Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.

Ayuda ejercicios unidad 4: Textos Ejercicio 1: Crear textos 1. Creamos la película mediante Archivo → Nuevo, eligiendo ActionScript 3 (por defecto tendremos un único fotograma). 2. Selecciona la herramienta Texto del Panel de Herramientas. 3. Haz clic sobre el escenario. 4. Veremos esta imagen

. Escribe dentro el texto Bienvenido a mi página web.

5. Centra el texto haciendo clic en en el Panel de Propiedades. 6. Cambia la fuente del texto a Verdana seleccionándola en el desplegable Familia.

7. Haz clic sobre el control de Tamaño y arrástralo hacia la derecha hasta que llegue a 45. 8. En el desplegable Suavizado, elige Legibilidad.


[email protected]


Flash Cs6 Parte1

Recommend Documents