Tutoriales Practicas Flash CS5

3-3-2013

ADOBE FLASH CS5 Materiales y Prácticas de las clases.

Desarrollado por Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 Semana 1 de 6

INTRODUCCIÓN Y MANEJO DE CONCEPTOS BÁSICOS 1. ¿Qué es Flash? Es una potente herramienta desarrollada por Adobe, que fue creado con el objeto de realizar y permitir generar animaciones y diseños di seños vistosos para la web y gráficos interactivos. 2. ¿Por qué usar Flash? Las posibilidades de Flash son extraordinarias con cada versión se han mejorado y simplificado las herramientas, y cada vez es posible lograr mejores efectos con menos trabajo. Consiguió hacer posible lo que más se echa en falta en Internet, Dinamismo debido que permite crear aplicaciones interactivas que al usuario se le hacen algo más atractivo, no estático. Además de tener lenguajes de programación como el Action Script. 3. Ventajas y Desventajas de Flash. 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, pero siempre habrá usuarios que prefieran salir de nuestra página si tienen que instalar "algo raro".  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). Página 1 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5  



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 CS5 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. ¿Qué es una animación? La animación es un proceso utilizado para dar la sensación de movimiento a imágenes o dibujos o a otro tipo de objetos inanimados (figuras de plastilina, por plastilina, por ejemplo). Se considera normalmente una ilusión óptica. óptica. Existen numerosas técnicas para realizar animación que van más allá de los familiares dibujos animados. Los animados. Los cuadros se pueden generar dibujando, pintando o fotografiando los minúsculos cambios hechos repetidamente a un modelo de la realidad o a un modelo tridimensional virtual; también virtual; también es posible animar objetos de la realidad y actores. 4. ¿Qué es un escenario? El escenario es el lugar l ugar donde se compone o diagrama el contenido de cada uno de los fotogramas que constituyen la película. Dicho contenido se crea ya sea al incluir objetos sobre él con las Herramientas (Tools) o importando imágenes o vídeo. 5. ¿Qué es la línea del tiempo? El time Line organiza y controla el contenido de una película a través del tiempo, en capas y fotogramas. 6. ¿Qué es un fotograma? 

Página 2 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 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. 7. Tipos de Fotograma. a) Fotograma Clave (KeyFrame): Son fotogramas con un contenido específico, 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. b) Fotograma Normal (Normal Frame): Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de color gris. El último fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. c) 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. d) Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco. 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. e) 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. f otogramas. f) 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 Acciones) pueden cambiar el comportamiento de la película. Página 3 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 g) Fotogramas Animados: Pueden ser de 2 tipos: 1) Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posición del Keyframe inicial al final. Para representar esta animación aparece una flecha entre estos Keyframes. 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. 8. ¿Que son las capas? Es un nivel en el que podemos dibujar, insertar sonidos, textos, etc. Con independencia del resto de las capas. Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempo y por tanto, sus distintos fotogramas se reproducirán simultáneamente.

9. ¿Qué son los símbolos? Los símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash, estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones (Instancias), ya sea en la misma o en otra película. 10. ¿Qué es un clip de película? Clip o Movie Clip es una película en sí misma, como cualquiera de las que podamos haber creado. Se refiere clips cuando las incluimos en otra película, formando un símbolo, por tanto cualquier clip siempre podrá estar compuesto por otros clips insertados en él, que a su vez estén formados por otros. 11. ¿Qué es el Action Script? Es el lenguaje de programación de la plataforma de Adobe Flash. Originalmente desarrollado como una forma para que los desarrolladores programen de forma Página 4 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 más interactiva. Permite mucha más eficiencia en las aplicaciones de la plataforma Flash para construir animaciones de todo tipo, desde simples a complejas, ricas en datos e interfaces interactivas. Interface del programa Flash CS5 Flash CS5 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 CS5 por primera vez:

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) 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.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 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. 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: o

o

o o

o

Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de búsqueda 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)

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


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 o

o

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.

PRIMERA PRÁCTICA. Aquí aprenderemos a movernos en la interfaz así como aprender a utilizar las herramientas básicas de la aplicación. 1. Creamos un nuevo documento ActionScript 3.0. 2. Con la herramienta de Ovalo, generamos un circulo perfecto presionando SHIFT, en la parte superior izquierda de nuestro escenario en el fotograma 1. 3. Luego nos vamos al fotograma 10 y presionamos F6 para crear un fotograma clave, que permitirá indicar un nuevo movimiento. 4. Tomamos la herramienta de selección y hacemos doble clic sobre nuestra pelota para que se seleccione el fondo y el borde y lo trasladamos a la parte inferior izquierda. 5. Y repetimos este proceso saltando cada vez 10 fotogramas hasta hacer que la pelota rebote en todo nuestro escenario. 6. Luego en las partes grises de cada fotograma procedemos a hacer clic derecho e indicar la Interpolación de movimiento o clásica para que se mueva la pelota. 7. Lo repetimos en cada uno de los puntos claves. INTERPOLACION DE FORMA 1. Creamos un documento nuevo de flash ActionScript 3.0 2. Sobre nuestra escena trazaremos un círculo de color rojo en la parte superior izquierda. 3. Sobre nuestra línea del tiempo le indicare el tiempo a través de los fotogramas, me voy al fotograma 60 y le presiono F6 sobre la capa 1. 4. Cambio a la herramienta PolyStar, en el panel de propiedades hago clic en el botón de opciones y le marco Estilo estrella y le cambiamos el color de rellleno. 5. Me situó en la parte superior derecha y trazamos la estrella. 6. Selecciono el círculo y lo elimino con SUPR. 7. Me posiciono entre los fotogramas 2 al 59 le doy clic derecho/crear interpolación de forma, presiono CTRL + ENTER para ver lo que hicimos. 8. Para hacer otros efectos más llamativos, sobre los objetos puede eliminarle partes y a la hora de animarlo flash hará otras interacciones, debido que se deformo el objeto. INTERPOLACIÓN DE FORMA CON TEXTO. 1. Creamos un nuevo documento ActionScript 3.0 o sobre el mismo de la interpolación de forma. 2. Generamos en la parte inferior en fotograma 1, una estrella.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 3. Luego nos vamos al fotograma 60 y presionamos F6, si trabajamos en el archivo anterior hay que ver que estemos en una nueva capa. 4. En el fotograma 60, tomamos la herramienta de texto y escribimos algo, podemos personalizar el texto. 5. Seleccionamos el texto y le damos clic derecho/separar para que divida el texto y lo repetimos una vez más, el primero dividirá las palabras por letras y segundo lo convertirá a un especie de dibujo. 6. Luego sobre los fotogramas en gris hacemos clic derecho/crear interpolación de forma. 7. Y finalizamos presionando CTRL + ENTER para ver nuestra animación.

VECTORIZACIÓN DE UNA FOTOGRAFIA EN FLASH

Necesitaremos una fotografía del actor/actriz favorita. 1. 2. 3. 4.

Crearemos un nuevo documento de flash action script 3.0 Luego nos vamos a menú archivo/Importar/Importar a biblioteca. En la ventana ubicaremos la fotografía con la cual trabajaremos. Nuestra imagen se ira a la biblioteca y si no aparece nuestro panel lo activamos con CTRL + L. 5. Ubicamos la fotografía en la biblioteca y la arrastramos hasta nuestra escena, seguramente nuestra escena es más grande que la foto por la cual la modificaremos. 6. Para eso necesitaremos ver las medidas de nuestra foto, por lo cual haremos clic en el panel de propiedades y ver su tamaño tanto a la anchura como altura. 7. Hacemos clic en nuestro fondo (Escenario) y en el botón editar ajustamos las dimensiones de la escena y lo aplicamos. 8. Ya teniendo al mismo tamaño de escena y foto nada más la movemos y las encimamos. 9. Seleccionamos nuestra foto y nos vamos al menú Modificar/Mapa de bits/Trazar mapa de bits. 10. Configuraremos nuestra herramienta, a. Umbral de color: ira entre un valor del 1 al 500, a mayor cantidad que coloquemos tendremos menos colores en nuestra composición. b. Área mínima: Acepta valores entre el 1 y el 1,000. Indica el grupo de pixeles que tomara por cada color. A mayor cantidad que coloquemos encontraremos un menor detalle en nuestra imagen. A menor cantidad tendrá un mejor detalle y se parecerá más a la original. c. Ajustar a curva: Permite seleccionar una opción establecida, y permite indicar la suavidad de los contornos de la figura. d. Umbral de esquina: Si los bordes se mantienen afilados. Página 8 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 11. Y todo radica como queramos detallar nuestra figura, y de esta manera tendremos vectorizado nuestro dibujo. Con ello podremos seleccionar partes del dibujo y proceder a modificarlos, como pintarlos. 12. Para exportar la imagen nos vamos a Archivo/Exportar/Exportar Imagen y le colocamos un nombre y en tipo, elegimos el formato de la imagen que deseemos.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 LOGOTIPO SONY CON HERRAMIENTA CUADRICULA 1. Creamos un nuevo documento de flash action script 3.0 2. Presionamos CTRL + F8 para convertir a símbolo, y lo nombramos Logo Sony de tipo Gráfico y aceptar. 3. Nos vamos al menú ver/Cuadricula/Mostrar cuadricula o CTRL + { 4. Como la cuadricula es muy pequeña podemos configurarla nos regresamos al menú ver/Cuadricula/Editar cuadricula o CTRL + ALT + G. Y en la ventana le cambiamos el tamaño a 30 tanto en ancho como alto y aceptar. 5. Seleccionamos la herramienta de Ovalo, y le quitamos el contorno y le asignamos un color rojo. Y generaremos un círculo. 6. Podemos transformar nuestros objetos, para que ocupen un área específica, para eso seleccionamos nuestro circulo y nos vamos al panel de propiedades y en los tamaños le marcamos 10 ancho y alto. 7. Moveremos el punto y lo posicionaremos exactamente en unas de las intersecciones. Y para que se ancle en ese punto, nos vamos a menú Ver /Ajuste/Ajustar a cuadricula, nos servirá para que al moverlo solo se mueva entre las intersecciones. 8. A ese círculo lo tomamos y lo copiamos y pegamos 6 veces más CTRL + C y CTRL + SHIT + V. 9. Luego marcamos el círculo 2, y en las propiedades le aumentamos el tamaño a 13 ancho y alto, luego marcamos circulo 3 y le aumentamos a 16, luego al cuarto y le colocamos 19, así sucesivamente hasta el último círculo. 10. Seleccionamos todos nuestros circulo y presionamos CTRL + K para abrir el panel de alineación y le marcamos alinear verticalmente respecto al centro, verificaremos que cada circulo quede al centro de la intersección. 11. Seleccionamos la fila de circulo y copiamos CTRL + C y pegamos CTRL + V y los vamos moviendo, repetimos el proceso 5 veces más pare tener 7 filas. 12. Nada más nos falta eliminar algunos puntos, en la 1ra fila borramos el ultimo círculo, en el 2do borramos los últimos 2, 3ra fila el ultimo, 7ma borramos el ultimo. 13. Luego desactivamos nuestra cuadricula en menú ver/cuadricula/desactivar cuadricula. 14. Podemos quitar el ajuste llendo a menú ver/Ajuste/Ajustar a cuadricula para poder moverlo situarlo en algún otro lugar o hasta escalarlo.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ANIMACIÓN TEXTO BASICA 1. Creamos un nuevo documento ActionScript 3.0 2. Tomamos la herramienta de texto y en nuestra escena escribimos nuestro nombre, y personalizamos nuestro texto. 3. Seleccionamos nuestro texto y nos vamos al menú Modificar/Separar o CTRL + B para separar nuestro texto por letras. 4. Seleccionamos la primera letra y presionamos CTRL + F8 para convertirlo a símbolo, como tipo clip de película, y repetimos el proceso con las demás letras. 5. Seleccionamos todas las letras es decir todo el texto y le damos clic derecho/distribuir en capas, lo que hace es colocar cada símbolo en una nueva capa, nos sobrar la primera así que la podemos eliminar. 6. Seleccionamos todos los fotogramas 30 de cada capa y clic derecho/insertar fotograma, Ahora seleccionamos todos los fotogramas 15 clic derecho/insertar fotograma clave. 7. Movemos nuestra línea y nos colocamos en el fotograma 1, luego de ello procederemos a distribuir las letras fuera de nuestra escena, una arriba abajo, etc. 8. Nos posicionamos sobre los fotogramas gris de la 1ra sección y le damos clic derecho/ crear interpolación de movimiento. Presionamos CTRL + ENTER. ANIMACION DE TEXTO REBOTANDO 1. Crear un nuevo documento de flash ActionScript 3.0 2. Activamos la herramienta de texto y escribimos BIENVENIDO o nuestro nombre. 3. Seleccionamos el texto y luego presionamos CTRL + F8 y lo guardamos como Texto, y tipo clip de película y aceptar, renombramos la capa como texto. 4. Nos vamos al fotograma 5 e insertamos fotograma clave, luego regresamos al 1er fotograma y con la herramienta escala lo hacemos más grande hasta sacarlo de la escena. 5. Seleccionamos nuestro texto y en las propiedades iremos a filtros/desenfoque y le colocamos X=25, Y=1. 6. Nos posicionamos sobre los fotogramas de en medio en la parte gris clic derecho, crear interpolación movimiento. 7. En el fotograma 10, clic derecho/insertar fotograma clave, nos regresamos al 5 y lo hacemos más pequeño nuestro texto, e insertamos un fotograma clave en el 20 y hacemos ligeramente más grande el texto 8. En la parte gris del nuevo área, clic derecho/interpolación de movimiento.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 INTERPOLACION DE TEXTO Y FORMA 1. Crear un nuevo documento de Flash ActionScript 3.0 2. Necesitaremos los paneles visibles de la línea del tiempo y el de propiedades, si no fueran visibles lo encontramos en Menú Ventana/Línea del tiempo, propiedades. 3. En la línea del tiempo en nuestra primera capa, tomaremos nuestra herramienta de texto, y procedemos a escribir en la parte superior central nuestro nombre, si quisiéramos hacer más grande el texto, tendremos que seleccionarlo y en el panel de propiedades aparece la opción de tamaño. 4. Luego tomamos la herramienta de selección y marcamos nuestro texto, presionamos CTRL + C y luego CTRL + V para copiar y pegar. 5. Luego para cambiar el texto del duplicado haremos doble clic y procedemos a cambiarlo por nuestros apellidos, podemos separarlos en líneas. 6. Seleccionamos el cuadro de nuestro nombre y nos vamos al menú Modificar/ Separar o CTRL + B, esto hará que el texto se separe por letras, si queremos que lo separe totalmente hay que repetir el procedimiento. 7. Repetimos la separación del texto con el cuadro de nuestros apellidos. 8. Luego en la línea del tiempo nos vamos al fotograma 30 y presionamos F6. 9. Regresamos al fotograma 1 y con la herramienta de selección marcamos nuestros apellidos y lo borramos con SUPR. 10. Retornamos al fotograma 30 y haremos al contrario, borraremos nuestro nombre. 11. Luego nos posicionamos en cualquier fotograma que este entre el 1 y 30, por ejemplo en 15, y le damos clic derecho/Interpolación de forma. 12. Para ver cómo va quedando nuestro trabajo le damos CTRL + ENTER, veremos cómo nuestro nombre sufre la modificación para cambiar a los apellidos. 13. Para completar nuestro diseño, nos vamos al fotograma 60 y presionamos F6. 14. Seleccionamos el texto de nuestros apellidos y le damos SUPR. 15. Regresamos al fotograma 1, seleccionamos nuestro nombre y lo copiamos CTRL +C. 16. Volvemos al fotograma 60 y lo pegaremos en el mismo lugar, para eso nos vamos al menú edición/Pegar in situ o CTRL + SHIFT + V. 17. Nos posicionamos en unos de los fotogramas entre 30 y el 60, ejemplo 45 y le damos clic derecho/Crear interpolación de forma. 18. Si queremos que dure más los tiempo para alcanzar ver bien nuestro texto tendremos que irnos al fotograma 1 y presionar F6. 19. Posiciono de nuevo en el fotograma 1 y presiono 5 veces la tecla F5, esta parte no deberá tener interpolación, por lo cual le damos clic derecho/quitar interpolación. 20. Y repetimos este proceso en el fotograma 30, para hacer que nuestros apellidos duren más.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ATOMO GUIA DE MOVIMIENTO 1. Creamos un documento de ActionScript 3.0 2. Presionamos CTRL + F8 para crear un Símbolo, lo nombramos electrón y como tipo Clip de película. 3. Tomamos la herramienta Ovalo, seleccionamos un color que tenga degradado radial y generamos un Circulo a lado derecho de la escena. 4. A la capa que está dentro de símbolo electrón, lo renombramos por electrón y luego le damos clic derecho/Añadir guía de movimiento. Y seleccionamos la capa de la guía de movimiento. 5. Luego activamos el Herramienta del Ovalo con contorno negro pero sin relleno y generamos una elipse que alcance nuestro electrón. 6. Luego activamos la herramienta borrador y procederemos a borrar un pedazo de la línea guía. 7. Seleccionamos la capa del electrón y nos vamos al fotograma 80 y presionamos F6, en ambas capas.

8. En la capa del electrón en la sección gris, le damos clic derecho/Crear interpolación de movimiento o interpolación clásica si la anterior no está habilitada. 9. Seleccionamos el fotograma 1 y posicionamos nuestro dibujo del electrón sobre la línea de la elipse en la parte superior, luego marcamos el 80 y lo posicionamos al final de la elipse. 10. Seleccionamos la guía del elipse y le damos CTRL + C y creamos una nueva capa, y la posicionamos debajo de la electrón, es decir en la 3ra posición. 11. Y pegaremos nuestra trayectoria con CTRL + SHIFT + V y oculto la 2 capas anteriores. 12. Y hacemos Zoom sobre el espacio hueco de la trayectoria y para unirla tendremos que hacerlo con la herramienta Línea. Y con la de selección le haremos una pequeña curva.

13. Regresamos el zoom a mostrar todo y habilitamos las capas ocultas y regreso al escenario 1. 14. En la biblioteca arrastraremos nuestro símbolo del Electrón a la escena, si quedara más grande con la escala la reducimos. 15. Para destacar más nuestro diseño, podemos crear una nueva capa y copiar y pegar nuestro símbolo en la nueva capa y girar y colocarlo en diagonal y repetir el proceso. 16. Creamos una nueva capa y en centro de nuestras elipses generamos círculo y lo coloreamos.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ANIMACION SIMULANDO ESCRITURA 1. Generamos nuestro archivo de flash actionscrip 3.0 2. Tomamos la herramienta de Texto y escribimos nuestro nombre, lo posicionamos al centro de la escena. 3. Le cambiamos el nombre de la capa por Texto, y creamos una nueva renombrada mascara. 4. Activamos la herramienta de Pincel y seleccionamos un color llamativo, y seleccionamos la capa mascara. 5. Sobre el texto pintaremos por pedazos la letras de nuestro nombre, y presionaremos F6 para crear un fotograma clave, entre más pequeño sean los pedazos pintados se verá mejor la animación. 6. Repetiremos este procedimiento hasta cubrir todas las letras de nuestro nombre. 7. Sobre la capa de Máscara, le damos clic derecho/mascara.

CREACIÓN DE UN DADO Y ANIMACION En esta práctica aprenderemos a realizar un dado en Illustrator con efectos 3D y luego pasarlo a Flash para darle la respectiva animación. 1. Crearemos un nuevo documento en Illustrator de 500x500 pxi. 2. Luego generaremos un cuadro con la herramienta rectángulo y SHIFT. 3. Luego tomamos las herramientas de elipse y generamos un circulo, dentro del generaremos otros y lo pintamos de blanco. 4. Luego duplicamos los objetos con ALT, y procedemos a duplicar solo el círculo pequeño para representar los dos puntos, y repetimos el proceso hasta formar los 6 lados con sus respectivos valores. 5. Teniendo los círculos con sus valores los convertiremos a símbolos arrastrándolos sobre el trébol que aparece a lado derecho, uno por uno. Y luego los eliminamos. 6. Seleccionamos el cuadro y nos vamos a Efecto/3D/Extrusión y Biselado y la aplicamos una profundidad que nos agrade que formara el dado. Luego lo rotaremos hasta que sea visible tres lados de él. 7. Siempre teniéndolo seleccionado el cuadro con el efecto nos vamos a la opción de la derecha llamada Apariencia y deberemos de encontrar el efecto de extrusión y biselado y le hacemos clic para ver la configuración que le aplicamos. 8. Estando en esa ventana nos vamos a botón Mapear Ilustración y arrastramos la ventana para hacer visible nuestro diseño y ver las secciones que tenemos de él. 9. Y en cada una de las caras procederemos a colocar los valores de los lados del dado para finalizar y guardarlo. Página 14 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5

10. Ahora entramos a flash y creamos un nuevo documento ActionScrip 3.0 11. Tomaremos la herramienta de Línea y le marcamos un color rojo para ella, y hacemos una que inicie fuera de la escena termine dentro. 12. Luego con la herramienta de selección en ciertos pedazos de la línea generaremos curvaturas para indicar el rebote del dado y lo diseñamos a nuestro gusto. Le cambiamos el nombre a la capa por guía para llevar un mejor control.

13. Más o menos a la altura del fotograma 80 le damos clic derecho insertar fotograma. 14. Procedemos a insertar nuestro dado en Archivo Importar, y creamos una nueva capa llamada dado. 15. Y colocamos el dado iniciando nuestra línea guía, en la sección que quedo fuera de la escena. 16. Hay que convertir en guía la línea que generaros y eso lo hacemos haciendo clic derecho sobre la capa Guía/Guía. 17. La capa del dado lo arrastramos y lo dejamos debajo de la capa de la guía es decir quedara dentro de ella y bloqueamos la capa guía. 18. Nos trasladamos al fotograma 8 e insertamos un fotograma clave, y arrastramos el dado hasta la nueva posición que queramos según lo marcado en nuestra línea guía. 19. Procedemos a irnos a otro fotograma, cada vez dejando más libre debido que conforme avanza deberá hacer cada vez más lento, y lo estaremos haciendo por secciones según el trazado de nuestra línea guía, hasta llegar al final de ella. 20. Seleccionamos los fotogramas de relleno, para poder aplicar clic derecho/Interpolación clásica. 21. Seleccionamos nuestro dado en medio de una interpolación y nos vamos a las propiedades y en rotar indicarle un valor y numero de repeticiones. 22. Este último paso lo repetimos de nuevo en las otras secciones y cada vez le podemos reducir el número de vueltas para que se haga más lento. 23. Y podemos configurar las velocidades del dado por cada sección de nuestra línea guía.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ANIMACION DE PACMAN DEBORANDO TEXTO 1. Creamos un documento de ActionScript 3.0. 2. Ya estando en nuestro escenario presionamos F8 para crear un símbolo, y le colocaremos de nombre Pac-Man, con tipo de Clip de Película y aceptar. 3. Agarramos nuestra herramienta de ovalo y en el panel de propiedades asignarle un contorno negro y relleno de color amarillo, y trazamos nuestro circulo presionando la tecla SHIFT. 4. Activamos la herramienta Línea y generamos dos líneas que formen una V acostada para poder generar la boca de PacMan, tendremos que hacer que las líneas queden fuera del diseño. 5. Con la herramienta de selección marcamos las partes que quedaron fuera y dentro de la V y las borramos con SUPR. 6. Activamos de nuevo la herramienta Ovalo para trazar el ojo del PacMan y le asignamos un color de relleno a negro y trazamos el circulo. 7. Ahora haremos la animación de la boca, para eso nos posicionamos en el fotograma 1 y presionamos F6, para tener una copia. Y nos posicionamos en ella que debe estar en fotograma 2. 8. Con la herramienta de selección nos posicionamos donde inicia la boca en la parte superior, deberemos de notar que nuestro cursos le aparece un especie de escuadra, si no aparece habrá que hacer clic fuera de los objetos. Y procedemos a moverlo hacia abajo, y en la boca en la parte inferior será hacia arriba. 9. Luego presionamos la tecla F6 para tener una nueva copia y repetimos el proceso, para indicar que se ira cerrando la boca, hasta lograr en diferentes copiar cerrarla completamente. 10. Ahora haremos lo inverso para hacer que la animación abre y cierre la boca, por lo cual seleccionamos el penúltimo fotograma hecho y le damos clic derecho/Copiar fotograma, luego nos vamos al último fotograma vació y le damos clic derecho pegar fotograma. 11. Repetiremos este paso hasta lograr tener la sensación de abrir y cerrar la boca del personaje le podemos dar un ENTER para ver cómo va quedando. 12. Luego hacemos clic en Escena 1 para retornar a ella, y en panel de Objetos de biblioteca tendremos nuestro pacman, lo cual le hacemos clic y lo arrastramos a la escena, si queremos reproducir la escena la damos CTRL + ENTER. 13. Seleccionamos nuestro pacman y lo colocamos afuera de nuestra escena. 14. Luego en la línea del tiempo nos vamos al fotograma 100 y presionamos F5, lo que está esta función es copiar nuestro dibujo en todos los fotogramas indicados. 15. En el espacio que queda como gris en los fotogramas, le damos clic derecho crear interpolación de movimiento. Página 16 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 16. Seleccionamos el fotograma 100 y tomaremos nuestro pacman y lo moveremos al lado contrario de la hoja hasta salirse de ella. Con el enter veremos reproducirse el movimiento de nuestro objeto, CTRL + ENTER la escena completa. 17. Renombramos la capa que tenemos en nuestra escena 1 por el nombre de pacman. 18. Le damos clic derecho/Insertar una nueva capa y la nombramos texto. 19. Para que nuestro dibujo quede encima del texto tendremos que arrastrar la capa de texto debajo de PacMan. 20. Seleccionamos la capa de texto y habilitamos la herramienta, en nuestra escena procedemos a escribir un texto que quede en la misma zona donde aparece el pacman. 21. Sobre la capa de texto le doy clic derecho/Insertar capa y la llamo rectángulo, deberá quedar la capa pacman, rectángulo, texto. 22. Habilitamos la herramienta de rectangulo, y en sus propiedades le quitamos el borde, y el relleno le colocamos blanco, ya que tiene que ser del mismo color que el fondo, para parecer que va comiendo las letras. 23. Generamos el rectangulo que cubra todas las letras que previamiente hicimos. 24. Seleccionamos el rectangulo y lo sacamos de nuestra escena. 25. Regresamos al fotograma 1 y ajustamos el rectangulo a la misma altura que la boca del pacman. 26. Al rectangulo, le procederemso a crear una interpolación igual que la del pacman, por lo cual nos posicionamos sobre cual fotograma gris de la capa de rectangulo y le damos clic derecho/Crear interpolacion de movimiento. De seguro aparecera una ventana indicando que deberemos de convertir a simbolo nuestro rectangulo, por lo cual dejamos que Flash lo convierta solo pulsando en ACEPTAR.

27. Los colocamos en fotograma 100 pero de la capa de rectángulo y movemos el rectángulo hasta que cubra nuestro nombre o frase. 28. Y le damos CTRL + ENTER para ver como ya quedo nuestra escena.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 CREAR Y ANIMAR UN EMOTICON 1. Tenemos que generar nuestro documento ActionScript 3.0 2. Activamos la herramienta de rectángulo tomamos la elipse para poder generar en el centro de nuestro documento la circunferencia que formara el cuerpo del emoticón. 3. Procedemos a cambiar el color de relleno de la figura y el contorno nada, en la paleta de colores. 4. Seleccionamos la circunferencia realizada y procederemos a convertirlo a símbolo, para que más adelante nos simplifique las tareas, para eso hay que ir al menú Modificar/Convertir a símbolo o F8, le colocamos nombre Base y OK. 5. Para poder modificar, tenemos que hacerle doble clic sobre el circulo y notaremos un cambio en el. 6. Ya están el activamos la herramienta 14 Bote de tinta, para luego ir a la paleta de colores e indicar el color del contorno, luego hacer clic sobre nuestro circulo. 7. Luego salimos de la Escena con doble clic afuera o sobre el botón escena, y procedemos a cambiar el nombre de la capa por BASE y la bloqueamos. 8. Creamos una nueva capa y la renombramos BOCA. 9. Activamos la herramienta de elipse y procedemos asignarle un color, sin borde, y generamos uno casi del tamaño del anterior. 10. Luego activamos nuestra herramienta 1 de selección y generamos un rectángulo de selección que marque poco más de la mitad superior del círculo nuevo y lo borramos con SUPR. 11. Siempre con la herramienta de selección al centro de parte superior de la figura que se formó, hacemos un clic y arrastramos hacia abajo para generar una pequeña curvatura para destacar la sonrisa. 12. Seleccionamos la boca y presionamos F8 y lo convertimos en símbolo. 13. Hacemos doble clic sobre la boca ya que generaremos los dientes, para eso creamos una nueva capa dentro de la boca, y esa hasta la podemos bloquear. 14. Activamos la herramienta de Rectángulo, y le asignamos un color blanco, luego con la herramienta de selección formamos los dientes distorsionando la figura. 15. Luego en la esquinas inferiores creamos la contraparte de los dientes, siempre con selección, solo que casi en las esquinas, presionamos la tecla ALT y arrastramos hacia abajo, y repetimos el proceso en lado derecho, con ALT nos permite generar puntos que luego se pueden curvear, y esto nos permitirá hacer el diseño de los dientes que deseemos. 16. Luego procedemos a salirnos de la escena y insertamos una nueva capa llamada OJOS.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 17. Siempre con la herramienta elipse insertamos uno y generaremos los ojos de nuestro SMILE, utilizaremos la herramienta de selección para ir transformándolo y la herramienta 3 para ir rotándolo hasta lograr un diseño que nos agrade. 18. Seleccionamos y presionamos F8 y lo convertimos a símbolo llamado OJOS. 19. Luego copiamos el OJO con CTRL + C y CTRL + V y nos vamos a menú modificar/Transformar/Voltear horizontalmente y lo ajustamos. 20. Doble clic sobre la Base, seleccionamos el circulo y lo copiamos CTRL + C y pegarlo en el mismo lugar CTRL + SHIFT + V, y le cambiamos por color crema o blanco. 21. Volvemos a copiar el circulo, pero no dejamos de seleccionarlo y presionamos CTRL + SHITF + V nuevamente. Y le cambiamos a un color puede ser rojo, con las flechas dejaremos un ligero espacio en la parte de arriba. 22. Hacemos un clic fuera para quitar la selección previa, volvemos a hacer clic dentro del círculo rojo y SUPR, para que la parte anterior tome su forma. 23. Seleccionamos todo nuestro diseño y procedemos a presionar F8 y lo guardamos como emoticón. 24. Procedemos a borrar todas las capas excepto la llamada emoticón donde aparece completo nuestro diseño convertido a un símbolo. Le hacemos doble clic sobre el y nos aparecerán de nuevo los objetos divididos. 25. Así como tenemos todo seleccionado le damos clic derecho/distribuir a capas, para que aparezcan de nuevo cada una de ellas con su respectivo nombre. 26. Luego sobre los dientes hacemos doble clic, y notaremos que estamos dentro de la escena 1/emoticón/boca/dientes, y procedemos a crear fotogramas hasta el número 60, seleccionamos todos los niveles que nos aparezcan y luego clic derecho/insertar fotogramas. 27. Sobre la línea del tiempo de los dientes, en el fotograma 30 clic derecho/insertar fotograma clave y lo repetimos en el fotograma 60. 28. Y con la herramienta de selección le podemos indicar que haga un movimiento ligero de ellos distorsionando la figura a una forma que deseemos. 29. Seleccionamos varios fotogramas antes del 30 y después de él y le damos clic derecho/crear interpolación de forma. 30. Creamos una nueva capa y llamada brillo. 31. Tomamos la herramienta de rectángulo y generamos uno y le colocamos un degrado lineal con un color blanco con una transparencia, se le puede colocar un color gris. 32. Convertimos ese recuadro a símbolo con F8. 33. Activamos la herramienta 3 y giramos nuestro rectángulo en diagonal y lo acomodamos en la parte superior de la Smile. 34. Para que no inicie desde el fotograma 1 podemos hacerle clic y arrastrarlo y colocarlo más o menos en el 25, y luego sobre 55 insertamos uno Página 19 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 clave y luego movemos el rectángulo en diagonal hacia abajo para generar ese efecto de movimiento, haciendo clic derecho/interpolación de movimiento clásico. 35. Opcional, en el panel de propiedades cambiar la velocidad de la animación a 100% (ease). 36. Para que quede bien nuestro movimiento, la capa de brillo lo arrastraremos sobre la capa mascara y luego doble clic fuera de los dibujos para salirnos de los objetos. 37. Entramos a la capa de la boca y dentro de ella generamos una nueva capa llamada brillo. 38. Dentro de esa capa tomamos la herramienta de polígono que se encuentra dentro del rectángulo, y en las propiedades opciones, nos aparecerá un estilo de estrella y generamos una de 4 puntas, y le colocamos el color blanco. 39. Y lo convertimos a simbolo a la estrella presionando F8 y accedemos a el con doble clic. 40. Nos movemos en la linea de tiempo al fotograma 10 y presionamos F6 que es insertar fotograma clave. Y en el 15 de nuevo, pero haremos que la estrella crezca, lo hacemos con la herramienta 3.

41. En el fotograma 25 hacemos lo inverso, es decir reducirle el tamaño a la estrella, y en las propiedades, busco estilo y le marco alpha, y le coloco valor cero. 42. Entre estos fotogramas le doy un clic derecho/interpolación clásica. 43. Seleccionamos los fotogramas de en medio que quedan antes del fotograma del punto y en las propiedades donde dice rotar, le damos CW que es en forma de reloj. 44. Nos salimos de los objetos haciendo doble clic fuera de ellos y luego marcamos en todas las líneas de tiempo en el numero 15 los fotogramas y presionamos F6 y lo repetimos en el 30. 45. Luego activamos la herramienta 3 y en el fotograma 15 procedemos a aplastarlo en todas las direcciones a todos los objetos del smile. 46. Seleccionamos los fotogramas del 5 al 25 y clic derecho/interpolación clásica. 47. Y podremos seguir haciendo los efectos que deseamos sobre la carita.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ANIMACIÓN HELICOPTERO 1. Crear un documento Flash ActionScript 3.0 2. Luego presionar CTRL + F8 para crear un símbolo, Helicóptero como tipo Clip de película y aceptar. 3. Tomamos la herramienta Rectángulo, y en la parte de las propiedades en las opciones del rectángulo le indicaremos 20 en cada dirección para que se redondee sus esquinas, y trazamos uno en la parte central de nuestra área de trabajo. 4. Luego sobre el recuadro le hacemos doble clic para seleccionar contorno y relleno y en las propiedades en el deslizador Trazo le colocamos 3 pxi, y en el relleno le colocamos el degradado radial rojo. 5. Con la herramienta de selección en la parte izquierda de nuestro recuadro haremos una curvatura para generar la cabina. 6. Repetiremos este proceso en cada una de las parte del recuadro para que ya vaya agarrando la forma. 7. Insertaremos un rectángulo sin redondear, por ello en las propiedades que le aumentamos a 3 le colocaremos 0, y generaremos uno del lado derecho de la figura para formar la cola. 8. Con la herramienta de selección en el recuadro de la cola haremos que las puntas de atrás se una es decir haciéndolo más delgado. 9. Insertamos una nueva capa, haciendo clic derecho sobre la que tenemos, nueva capa, y nos posicionamos en ella. 10. Agarramos la herramienta de rectángulo y le cambiamos el color de relleno por el degrado lineal gris sobre el primer recuadro para formar el espejo de la cabina. 11. Le daremos forma al cristal con la herramienta de selección en todos sus lados generaremos una pequeña curvatura. 12. En la parte trasera del Helicóptero formaremos una especie de i, a través de puros rectángulos. 13. Con la herramienta de rectángulo con un color lineal gris formaremos los soportes de nuestro helicóptero, formando con T. 14. Para darle más forma a nuestro soporte, en la parte frontal le generaremos un especie de pico alargado, arriba una ligera curva, y al final, un pico poco pronunciado. Página 21 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 15. Seleccionamos todo, y lo copiamos con CTRL + C y pegamos encima con CTRL+ SHIFT + V y lo arrastramos debajo del Helicoptero. 16. Como quedara inverso, tenemos que seleccionarlo e irnos al Menú Modificar / Transformar / Voltear Horizontalmente. Y los pegamos al helicóptero. 17. Ahora formaremos la hélice del Helicóptero por lo cual tendremos que generar un nuevo símbolo presionando CTRL + F8, lo nombramos hélice, tipo clip de película. 18. Marcamos la herramienta de rectángulo con un color degrado lineal gris, generamos un rectángulo vertical sobre el punto medio de nuestra área de trabajo. 19. Luego con la herramienta de selección en la parte baja del recuadro procederemos a reducirle las esquinas, es decir juntarlas, y en la parte superior redondearlo a través de una curvatura. 20. Seleccionamos todo el objeto lo copiamos y lo pegamos, lo marcamos al nuevo y le damos clic derecho transformar/voltear verlticalmente. 21. Seleccionamos ahora ambas helices copiamos CTRL + C y lo pegamos encima con CTRL + SHIFT + V, y con la herramienta de rotación giramos la copia para formar una especie de cruz con las helices.

22. Sobre la hélice tomaremos el círculo y generaremos dos uno dentro del otro para formar el eje que los mantendrá, ira en el centro. 23. Ahora haremos unas copias para indicarle que tendra movimiento, lo haremos seleccionando todas las helices, o haciendo clic sobre el fotograma de nuestra línea del tiempo, y presionamos F6 para duplicar el fotograma. 24. Seleccionamos el nuevo fotograma y nos vamos al menú modificar/transformar/escalar y girar, y en la seccion de girar le marcamos 22.5 grados. 25. Sobre el fotograma 2, presionamos F6 para tener otra copia, la seleccionamos y presionamos CTRL + ALT + S, y de nuevo girar 22.5 grados. 26. Sobre el fotograma 3, presionamos F6 para tener otra copia, la seleccionamos y presionamos CTRL + ALT + S, y de nuevo girar 22.5 grados y lo probamos con ENTER.

27. Nos vamos a la biblioteca CTRL + L y ubicamos el símbolo del Helicóptero, y lo colocamos en nuestro diseño, y luego creamos una nueva capa, que deberá quedar encima de las dos anteriores, y en esa insertamos el símbolo hélice. 28. Luego sobre la misma capa copiamos y pegamos la hélice, la escalamos para hacerla más pequeña y la rotamos para formar una X, y lo colocamos en la cola.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 29. Nos salimos de los simbolos para regresar a nuestro escenario 1, y arrastramos nuestro simbolo del Helicopero. Y lo probamos con CTRL + ENTER. Veremos que ya tenemos la animación con el movimiento del helicoptero, pero para hacer más vistoso nuestro diseño le indicaremos que se mueva de punto a otro.

30. Estando en la escena 1, seleccionamos nuestro Helicóptero y procedemos a escalarlo para que podamos hacerlo más pequeño, y lo posicionamos a lado derecho fuera de la escena de preferencia en la parte superior. 31. Nos vamos al fotograma 200, y presionamos F5, en la zona gris de la capa, en otro fotograma que no sea el 200, le damos clic derecho/crear interpolación de movimiento, notaremos que se transformara a un color azul. 32. Regresamos al fotograma 200, y movemos el helicóptero hasta la nueva posición que será al lado izquierdo. 33. Ahora deformaremos la línea de la trayectoria con la herramienta de selección y lo manejaremos a través de los puntos. Puedo hacer una curvatura. 34. Luego para darle más realismo al movimiento del helicóptero iremos, tomando la línea del tiempo y avanzando e ir girando el helicóptero con la herramienta rotación la numero tres, que la hélice vea hacia la línea guía. Repitiendo el proceso sobre todo la trayectoria. 35. Creamos una nueva capa haciendo clic derecho sobre la que tenemos, nueva capa y la arrastramos debajo de la anterior. 36. Sobre la nueva capa colocaremos una fotografía de alguna ciudad vista desde arriba. 37. Podemos agregarle un sonido de un helicóptero, pare eso lo encontraría en la red y lo guardo en mi máquina, y nos vamos a menú archivo/importar/biblioteca y ubico el sonido.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 BINOCULARES CON RAYOS X CON MASCARAS INTERACTIVAS Vamos a necesitar una fotografía de un muro, y la de una modelo. 1. Crear un nuevo documento de flash actionscript 2.0 debido que programaremos algunos comandos que están diseñados para esa versión. 2. Nos vamos a menú Archivo/Importar/Biblioteca seleccionaremos la dos imágenes. 3. En la línea del tiempo seleccionamos la capa 1 y le colocamos MURO. 4. Insertamos la imagen del muro a la escena, si fuera más grande o pequeño tendremos que ajustar la escena a la imagen del muro, por lo cual en las propiedades veremos el tamaño de la imagen, luego seleccionamos el fondo y en el botón editar cambiamos las proporciones por las mismas de la foto del muro que elegimos. 5. Clic derecho sobre la capa que tenemos, e insertamos una nueva y la nombramos modelo. 6. Nos vamos a la biblioteca e insertamos la foto de la modelo a la escena. 7. Clic derecho e insertamos una nueva capa y la nombramos binoculares. 8. Presionamos CTRL + F8 para crear un símbolo, y lo nombramos binoculares, de tipo gráfico y le damos aceptar. 9. Activamos la herramienta de Ovalo y generamos un circulo de relleno negro, seleccionamos la figura y copiamos CTRL + C y pegamos CTRL + V y lo situamos a la derecha del anterior encimado. 10. Si quedara un contorno blanco sobre el objeto que copiamos, seleccionamos con doble clic sobre el contorno y SUPR para eliminarlo y nos regresamos al escenario.

11. De nuevo presionamos CTRL + F8 y lo llamamos binoculares2 de tipo clip de película para poder programas con ActionScript. 12. En la biblioteca encuentro el dibujo binoculares y lo arrastro sobre mi área de trabajo que debe de estar dentro de binoculares2 y nos regresamos al escenario 1. 13. Sobre la capa binoculares, y en la biblioteca hallare el objeto de BINOCULARES2 y lo arrastro a mi escena. 14. Seleccionamos los binoculares y nos vamos a menú ventana/acciones o F9, nos abrirá una nueva ventana donde se escribirá los comandos. 15. Escribimos el siguiente código, los comando se colocaran en Azul y los parámetros en Verde: 1 onClipEvent (load) { 2 Mouse.hide(); 3 startDrag 4 (“”,true); 5 } 16. Para salirnos de la opción le damos en línea de tiempo y seleccionamos la capa binoculares y le damos clic derecho/Máscara. Y le damos CTRL + Enter. Página 24 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ANIMACIÓN PLANETA TIERRA (X) 1. Crear un nuevo documento de ActionScrip 3.0. y agregar a la biblioteca la imagen de un mapamundi con la función de Menú Archivo/Importar a biblioteca. 2. En la biblioteca ubicamos nuestro mapamundi y le hacemos doble clic sobre su icono para que nos abra dentro de él. Seleccionamos todo el mapamundi y lo copiamos con CTRL + C y lo pegamos con CTRL + SHIFT + V. 3. Luego a esa copia del símbolo, con las flecha de dirección la muevo hacia la derecha. 4. Luego en la biblioteca sobre la figura lo duplicamos haciendo clic derecho/Duplicar y lo llamamos mapamundi 2 con tipo de gráfico. 5. Lo abrimos haciendo doble clic sobre su icono, seleccionamos la fotografía y le cambiamos de color. 6. Presionamos CTRL + F8 y lo nombramos mapamundi animado 1, de tipo clip de película. 7. Teniendo el área de trabajo, de la biblioteca tomamos el mapamundi 1 y lo arrastramos sobre nuestra escena dejándolo del lado derecho pegado a la cruz de en medio. 8. A la capa uno la renombramos por Mapamundi A1, y ahí mismo nos desplazamos hasta el fotograma 100 y presionamos F5 para rellenarlos, luego clic derecho sobre la parte gris y le damos interpolación de movimiento. 9. Nos ubicamos de nuevo en el fotograma 100 y del lado derecho del mapa hacemos clic sostenido y lo jalamos hacia la izquierda de tal forma que la mitad de mapa quedara como un reflejo, nos basaremos en nuestra cruz de en medio de la escena, al finalizar le damos enter para que agarre los cambios. 10. Luego en la biblioteca, le damos clic derecho sobre mapamundi 1 animado y lo duplicamos, llamándole mapamundi animado 2, tipo clip de película. 11. Hacemos doble clic sobre mapamundi animado 2 de la biblioteca, y luego clic derecho sobre él, y le damos Intercambiar símbolo, nos aparecerá una nueva ventana donde le indicaremos por cual intercambiar, ahí diremos Mapamundi 2, lo que estamos haciendo es animar 2 objetos a la vez. 12. Luego presionamos CTRL + F8 y le llamamos Esfera, de tipo Grafico. Ya creado en centro de la escena insertamos un circulo, presionado SHIFT + ALT para generar uno perfecto a partir de un punto. 13. Tomamos la herramienta de selección y marcamos el color de relleno y nos vamos al panel de color, y lo cambiamos por uno radial, en lo marcadores le Página 25 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 asignamos colores azules. En el 1er indicador al alfa le asignamos 20% y al 2do 70% y luego hacemos clic afuera. 14. Renombramos la capa 1 por Esfera y le damos clic derecho e insertamos uno más llamada Brillo. Y trazamos una elipse en la parte superior de la anterior en la capa brillo. Y le borramos el contorno o lo hacemos sin el. En el color le asignamos un Lineal, y tomamos la herramienta 3, transformación de degradado y lo giramos para que quede horizontal. Luego en lo indicadores del degradado en 1ro le asignamos un blanco con un alfa 0% y lo repetimos solo que sera con alfa de 75% 15. Presionamos CTRL + F8 y lo llamamos Planeta Animado, tipo de clip de película. Y renombramos la capa a mapamundi animado 1, y luego en la biblioteca ubicamos y arrastramos a la escena el Mapamundi animado 1. 16. Clic derecho sobre la capa e insertamos una nueva y la renombramos por mapamundi animado 2, y en la biblioteca tomamos y arrastramos el mapamundi animado 2 sobre encimando la mitad de el con el anterior, se pueden utilizar la flechas de navegación. 17. Luego seleccionando el ultimo simbolo que insertamos, nos vamos a menú Modificar/Tranfrormar/Voltear horizontalmente. 18. Insertamos una nueva capa y la llamamos Esfera, en el nos vamos a la biblioteca y arrastramos al centro de nuestra escena, el clip de Esfera. 19. Tomaremos la regla horizontal generando dos que marquen el limite de los dibujos de la tierra, para luego con la herramienta tranformacion libre, escalarlo al tamaño de las mismas presionando SHIFT. 20. Sobre la capa esfera le damos clic derecho insertar capa y la llamamos esfera dos, seleccionamos la esfera y lo copiamos CTRL + C y lo pegamos en la capa esfera 2, con CTRL + SHIFT + V. 21. Sobre la capa Esfera 1, le damos clic derecho/mascara y la capa de mapamundi animado 2 lo arrastramos dentro de la máscara, y nos regresamos a la escena 1. 22. A la capa uno, lo renombramos por escena final, y arrastramos nuestro objeto de la biblioteca llamado Planeta animado. ANIMACION TEXTO STAR WARS. 1. Creamos un documento de action script 3.0 2. Creamos un texto, que contenga todas las palabras que deseemos que aparezcan desvaneciéndose, podemos asignarle las propiedades del texto. 3. Seleccionamos el cuadro de texto y lo convertimos a símbolo con CTRL + F8, tipo clip de película. 4. Darle clic derecho sobre el texto y le damos interpolación de movimiento, y nos vamos al fotograma 80 y presionamos F5. 5. Luego regresamos al 1er fotograma, activamos la herramienta número 4 rotaciones de tres dimensiones, y le hacemos clic sobre la línea roja que mueve la posición X, hasta hacer que el texto se acueste. 6. Nos vamos al fotograma 80 y activamos la otra herramienta número 4 que es rotación de transición, y lo movemos en la coordenada de la Y la verde, y la movemos hacia arriba. Página 26 de 42 Ing. Manuel Núñez


BRILLO ANIMADO EN TEXTO. 1. Iniciamos creando un nuevo documento de flash action Scrip 3.0 2. Activamos la herramienta de Texto y procedemos a escribir nuestro nombre en la parte central, podemos asignarle las propiedades al texto que deseemos. 3. Luego seleccionamos el texto y nos vamos al menú modificar/Separar o clic derecho/separar, dos veces. 4. Agregamos una nueva capa y en la capa nueva insertamos un rectángulo de forma vertical que sea mal alto que nuestro texto y lo convertimos a símbolo presionando CTRL + F8, de tipo clip de película. 5. Accedemos al símbolo haciendo doble clic sobre él, y lo seleccionamos para cambiarle el color de relleno del rectángulo, colocándole un degradado lineal, y en su 1er deslizador le colocamos un gris con valor alfa de 70% y en 2do color negro con alfa de 80%, alfa significa transparencia. 6. Nos salimos del símbolo para regresar a la escena principal, y arrastramos el rectángulo cerca del texto y lo giramos con la herramienta transformación libre. 7. En la capa del rectángulo que es la dos, nos vamos al fotograma 20 y presionamos F6, y en la capa de debajo presionamos F5 para mantener el texto. 8. En el fotograma 20 de la capa de rectángulo, presionamos SHIFT y arrastramos el recuadro del lado izquierdo al lado derecho y soltamos, con la tecla shift permite mantener la figura en su misma dirección, orientación. 9. Sobre los fotogramas grises de la segunda capa, creamos una interpolación clásica. 10. Creamos una nueva capa, en la cual duplicaremos nuestro resultado de la primera que es el texto, para eso hacemos clic sobre el fotograma uno de la capa texto original, presionamos ALT, veremos que el cursor cambia indicando un símbolo más, arrastramos y soltamos sobre el fotograma uno de la capa nueva. 11. Sobre la capa 3 le damos clic derecho/mascara y CTRL + ENTER para ver el resultado final.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ANIMACIÓN LOADING. 1. Crear un nuevo documento de flash ActionScript 2.0 2. Seleccionamos la herramienta de Ovalo con un trazado de 42, y sin Relleno e insertamos uno en la parte central del escenario abarcando toda la parte central. 3. Cambiamos el nombre de la capa 1 por flecha y luego seleccionamos nuestro objeto. 4. Nos vamos al menú Modificar/Forma/Convertir líneas en rellenos, lo que permitirá es quitar partes de nuestra figura sin problemas. 5. Para eso del lado derecho de nuestra figura seleccionaremos una parte de el para luego proceder a eliminar con SUPR, de tal forma que nos quede una C. 6. Activamos la herramienta de Rectangulo, Sin borde y relleno de color Negro y insertamos uno en la parte de arriba de espacio de la letra C. 7. Con la herramienta de selección marcamos el rectangulo y generaremos un triangulo con el. 8. Seleccionamos todos los objetos de nuestro escenario y luego le damos clic derecho convertir a simbolo, con el nombre de Flecha y de tipo Clip de Película. 9. Despues de convertirlo a simbolo, aparecera en nuestra biblioteca, pero a nosotros nos permitira crear la animacion dentro de el, para ello hacemos doble clic sobre la figura.

10. Estando dentro del símbolo, nos vamos al fotograma 20 y presionamos F6. 11. Luego de ellos en los fotogramas grises haremos clic derecho interpolación clásica, para que luego marquemos la línea de la interpolación y en las opciones de propiedades, en Girar cambiar por anti horario o el que se desee (CC o CCW). 12. Para ver lo que estamos realizando presionamos CTRL + ENTER, y luego de ello regresamos a la escena 1 y creamos una nueva capa llamada Cargando. 13. En la nueva capa que insertamos un texto debajo de la figura que diga Cargando, podremos personalizar el texto como deseemos. 14. Luego nos vamos al fotograma 5 de la capa cargando y presionamos F6, y luego activamos de nuevo la herramienta de texto y hacemos clic sobre cargando y al final de él le aumentaremos un punto (.), luego nos vamos al fotograma 10 y repetimos el proceso al igual que en el 15. Es decir tendremos “Cargando…”

15. Luego en fotograma 25 de la flecha presionamos F5 para que se mantenga a lo largo de la animación del texto y CTRL + ENTER. 16. Luego en la capa de cargando nos vamos al fotograma 20 Y 25 y presionamos F6 para luego entre los fotogramas grises generar una interpolación de movimiento entre los fotogramas 15 y 20. 17. Nos posicionamos en fotograma 20 de la capa cargando, seleccionamos el texto y luego en las propiedad color, le asignamos valor ALFA, y le reduciremos la cantidad a 20%. 18. Luego repetiremos este último proceso pero entre los fotogramas 20 y 25, pero el color ALFA lo aumentaremos al 100%. Página 28 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ANIMACION JUEGO TETRIS. 1. Creamos un nuevo documento de flash con ActionScript 2.0 2. Luego de ellos cambiaremos el tamaño del escenario, para ello en el panel de propiedades, ubicamos el tamaño del escenario, lo editamos y le colocamos 200 px anchura y 400 altura, y lo aplicamos. 3. Presionamos CTRL + { para activar la cuadricula, y luego en el menú ver/ajustes/ajustar a cuadricula y editamos la cuadricula asignando tamaño 15 px. 4. Luego de ello en nuestro escenario generaremos una L acostada para generar nuestras opciones del juego, lo haremos con la herramienta de rectángulo. 5. Después de generarlo lo seleccionamos todo y presionamos clic derecho/convertir a símbolo, con el nombre de L con clip de película como tipo. 6. Alado de la L generaremos un cuadrado con otro color de relleno para la figura, lo seleccionamos y CTRL + F8 y lo convertimos a símbolo, nombre cuadro tipo clip. 7. Luego a lado del cuadro insertamos la línea de fila con otro color no utilizado anteriormente, y lo convertimos a símbolo con nombre línea, tipo clip de película. 8. En la parte de arriba de nuestro diseño formaremos una Z, con otro color y luego lo convertimos a símbolo con nombre Z, clip de película. 9. Luego seleccionamos la Z y lo eliminamos y creamos una nueva capa, en esa capa en la parte de arriba fuera del escenario la colocamos. 10. En ambas capas nos vamos al fotograma 45 y presionamos F5, luego marcamos la capa 2 y la renombramos por Z, en ella presionamos F6 para tener una copia de él. 11. En el fotograma 2, que es la copia de la Z, procederemos a bajarlo dentro del escenario poco a poco, y repetiremos este proceso hasta que la Z vaya acercándose a las demás figuras. Cuando lleguemos al centro del escenario procederemos a mover la figura ligeramente hacia la derecha para que se puede adaptar al espacio vacío que dejamos al final del escenario. Si llegara a quedar muy rápido entre los fotogramas claves insertar 1 o 2 veces F5. 12. Luego de ellos nos vamos al fotograma 70 y presionamos F6 y entre el último fotograma clave y este insertamos una interpolación movimiento, para que baje rápidamente hasta su lugar al final del escenario junto a las demás figuras. 13. En los fotogramas 70 presionamos F6 para duplicar el ultimo fotograma clave, saltamos 5 fotogramas y presionamos F6 de nuevo y en esa seleccionamos nuestras figuras y lo bajamos a todos, para desaparecer la línea que se a completo, dejando solamente las partes de la línea no completa. 14. Luego de ello podemos repetir todos los pasos anteriores con otro ficha, tendríamos que generar una nueva capa y en ella colocarlo, animarlo, ya a nuestra creatividad generamos nuestra animación.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ANIMACIÓN DÍA/NOCHE. 1. Empezaremos creando nuestra área de trabajo con ActionScript 3.0 2. Primero crearemos nuestro fondo de día y con la herramienta de rectángulo generaremos uno del tamaño del escenario con un color azul, que forma el cielo. 3. Para darle más realce a la misma figura le colocaremos un degradado lineal de blanco a azul. Luego en la herramienta tres tenemos la que se llama transformación de degradado, la activamos y se generaran unos puntos de control, los cuales los tomare y los mandare al centro del diseño, para que luego pueda rotarlo y quedar la parte blanca en la parte superior, para darle el aspecto de nubes. 4. Lo seleccionamos y presionamos CTRL + F8 y llamamos el simbolo cielo día, tipo clip de pelicula.

5. Insertamos una nueva capa y la renombramos Sol, y activamos la herramienta de ovalo con relleno amarillo sin bordes. Y generamos un círculo en la parte superior derecha de la escena. 6. Seleccionamos y convertimos a símbolo, tipo clip de película llamado Sol. 7. Siempre así seleccionado el sol nos vamos en las propiedades/filtros y podemos utilizar el de Iluminado, o desenfoque, este último se recomienda colocando aproximadamente un 20 a 30 pxi. 8. Creamos una nueva capa y en ella seleccionamos un color verde y generamos un rectángulo en la parte derecha de la escena, para luego transformarlo y hacer una montaña con esa figura. 9. Crearemos dos capas más, seleccionamos el fondo azul y ocultamos las capas del sol y la de fondo, luego pegamos en una de las nuevas capas con CTRL + SHIFT + V, para que mantenga su fijación al mismo sitio. 10. La capa de la montaña la moveremos hasta la ultima capa, es decir de arriba hacia abajo la primera capa, para que se mantenga en todo el diseño. 11. Luego duplicaremos el simbolo del fondo azul y le colocaremos cielo_noche.

12. Le damos doble clic para entrar al símbolo y en la paleta de colores de degradados le asignamos a los recuadros colores azules oscuros para que dé la sensación que anocheció. 13. Luego activamos la herramienta Ovalo y le quitamos el contorno y elegimos un color gris para insertar un círculo que hará función de la luna. 14. Seleccionamos y copiamos el círculo y le cambiamos el color por cualquiera, únicamente para diferenciarlo, y lo colocamos encima del anterior acomodándolo de tal forma que deje ver la forma de la luna que quisiéramos tener. Página 30 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 15. Luego de tenerlo como se desea seleccionamos la figura y la procedemos a eliminar, lo que hará que se quite las partes sobrepuestas. 16. Seleccionamos la luna y la arrastramos a nuestra biblioteca, para convertirla a símbolo. 17. En las propiedades le asignaremos un Filtro de desenfoque de X=12, Y=5. 18. Entramos a la capa de fondo de noche, y dentro del símbolo crearemos una nueva capa, en esa capa tomaremos el pincel con un color blanco y haremos diferentes puntos entorno al recuadro, dando la sensación de generar las estrellas. Se puede utilizar la herramienta de Zoom debido que al acercase al dibujo el pincel automáticamente se reduce su tamaño y utilizar la barra espaciadora o la herramienta mano para moverse en el área de trabajo. Al final habrá que salirse del símbolo. 19. Nos vamos y seleccionamos todos los fotogramas 70 de cada una de las capas y presionamos F5 para insertar fotogramas. Nos regresamos a la capa 1. 20. Seleccionamos la capa de la luna, el fondo de noche y los arrastramos hasta el fotograma 35, debido a que primero aparecerá el día. 21. En la capa del sol, en el fotograma 20 insertamos uno clave, y también será en el 25 y 30. 22. En el fotograma clave 25 del sol, aplastaremos el objeto con nuestra herramienta de transformación libre, y ligeramente lo bajamos con las flechas de dirección. 23. En el fotograma clave 30 del sol, lo moveremos hasta fuera de nuestra escena, llevándolo hacia arriba de su posición. 24. Seleccionamos parte de los fotogramas grises de todas esas secciones del sol y le damos interpolación de movimiento. 25. En la capa de fondo día, en los fotogramas 25 y 30 insertamos uno clave, y nos posicionamos en el 30. 26. Tendremos que tener marcado el recuadro de fondo y en las propiedades marcar el color Alfa de 0%. 27. En los fotogramas grises insertamos una interpolación de movimiento. 28. Para darle mayor realidad a la escena, le aplicaremos la animación inversa de lo que se le hizo al sol, y se lo aplicaremos a la luna, es decir empieza de afuera se aplasta y queda normal en su posición. 29. Reproducimos la escena con CTRL + ENTER y al final la guardamos como animación día-noche y exportamos a película SWF.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ANIMACIÓN LUNA 1. Generamos un nuevo documento vació de actionscript 3.0 2. Luego en nuestra escena tomamos la herramienta de ovalo, y tendremos que asignar un contorno negro con un relleno azul. Insertamos un círculo tamaño mediano en la parte central del escenario. 3. Hacemos doble clic con la herramienta de selección sobre el círculo, y lo arrastramos a la biblioteca para convertirlo a símbolo, nombre tierra tipo clip de película. 4. Renombramos la capa que tenemos por Tierra y creamos una nueva capa y la renombramos por Luna. 5. En la capa luna tomamos la herramienta de ovalo y le marcaremos un contorno negro y relleno gris, y a lado derecho del azul, insertamos un circulo pequeño.

6. Doble clic sobre el circulo gris y lo convertimos a símbolo. 7. Crearemos una nueva capa que quedara en la tercera posición, es decir hasta más arriba, y la renombramos por trayectoria. 8. En la capa trayectoria tomamos la herramienta de ovalo, con borde negro sin relleno, e insertamos una elipse horizontal grande, podemos luego con la herramienta transformación libre girarla o aplastarla según lo que se desee. 9. Seleccionaremos nuestra luna y la colocaremos sobre la trayectoria enfrente de la tierra. 10. Luego en las capas sobre la llamada trayectoria, le daremos clic derecho/guía. Notaremos que solo cambia el indicador de la capa, pero para que funcione, tendremos que tomar la capa luna y arrastrarla dentro de la capa guía. 11. En la línea del tiempo nos vamos y seleccionamos todos los fotogramas 80, e insertamos un fotograma, clic derecho o con F5, esto es para generar el espacio para animar.

12. Sobre la capa de la luna, nos vamos al fotograma 20, y presionamos F6, y movemos la luna a lado derecho de la trayectoria. 13. En los fotogramas grises de la capa luna, insertaremos una interpolación clásica, ahora viene el detalle de la practica, ahora tendremos que ver la manera de que la luna siga su trayectoria pero que pase por detrás de la tierra, para ello hay que hacer lo siguiente. 14. Insertamos una nueva capa, y quedara debajo de la tierra, es decir la ultima posición de arriba hacia abajo, y la renombramos luna2. 15. En la capa luna2 nos vamos al fotograma 20 e insertamos uno clave, seleccionamos el simbolo de la luna, y la copiamos, luego nos vamos a la capa luna2 y pegamos CTRL + SHIFT + V que es para pegar en el mismo lugar. Página 32 de 42 Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 16. En la capa de luna en el fotograma 21, le daremos clic derecho e insertamos un fotograma vacío para que deje de animarse. 17. Creamos una nueva capa que quede entre la tierra y la luna2, la renombramos y le colocamos trayectoria2. 18. Seleccionamos la capa trayectoria, para marcar la elipse completa y lo copiamos, y nos regresamos a la capa trayectoria 2 en primer fotograma y lo pegamos con CTRL + SHIFT + V.

19. Luego clic derecho sobre la capa trayectoria2, y lo convertimos a guía, para después arrastrar dentro de ella la capa luna2. 20. En la capa luna2, en el fotograma 40, tomamos la luna y la posicionamos detrás de la tierra, al centro de la guía de elipse. En esos fotogramas grises insertamos una interpolación clásica. 21. Bloqueamos la capa tierra para evitar seleccionarlo accidentalmente. Y nos vamos en la capa luna2, en el fotograma 60 y presionamos F6. 22. Tomamos la luna y la movemos a lado izquierdo de nuestra trayectoria para luego darle una interpolación clásica a los fotogramas contenedores. 23. Luego en fotograma 61 de la capa luna2, insertamos un fotograma vacío para que se detenga. 24. Seleccionamos la luna en la última posición, y la copiamos. Y nos vamos al fotograma 60 de la capa luna, y presionamos F6, Para luego pegar la luna con CTRL + SHIFT + V. 25. Seleccionamos la capa luna en el 1er fotograma y lo copiamos, nos vamos al fotograma 80 y presionamos F6, y luego lo pegamos con CTRL + SHIFT + V. 26. Crearemos la interpolación clásica en la última sección gris de la capa luna. 27. Ya finalizamos para verlo presionamos CTRL + ENTER y lo guardamos.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ACTION SCRIPT DE RELOJ 1. Crear un nuevo documento de action script 3.0 2. Luego renombramos nuestra capa por estructura y formaremos con la herramienta ovalo un círculo del tamaño de la escena con los colores que prefiramos. 3. Bloqueamos la capa estructura y creamos una nueva capa llamada marcadores, que contendrá los indicadores de posición de las horas, que haremos con la herramienta rectángulo con la configuración que se prefiera, marcando los indicadores de las horas, es decir las 12,3,6,9 etc. 4. Luego bloqueamos la capa marcadores y creamos una nueva capa llamada números. 5. Activamos la herramienta de texto con la configuración que deseemos. Y procedemos a insertar los números que marcaran la hora. 6. Bloqueamos la capa números, y creamos una nueva llamada manecillas. 7. En la capa manecillas generaremos un recuadro negro sin borde que lo haremos lo más delgado posible, ya que será la manecilla de los segundos. 8. Seleccionamos la manecilla y la arrastramos a la biblioteca y lo convertiremos a símbolo, con el nombre de manecilla_segundo, con el ajuste de centro parte superior, es donde aparecen los cuadritos en la ventana de símbolo, como tipo clip de película. 9. Cuando ya lo hayamos convertido a símbolo, lo seleccionamos y las propiedades en parte del recuadro instancia, le colocaremos manecilla_segundo. Esto lo que permitirá es mandarlo a llamar luego en el código action script. 10. Seleccionamos la manecilla y lo colocaremos al centro de nuestro diseño pero yendo hacia la parte de abajo. 11. Seleccionamos la manecilla y la copiamos con CTRL + C y la pegamos con CTRL + SHIFT + V, y procedemos a convertirlo a símbolo haciéndole clic derecho sobre él, convertir a símbolo, tendrá las misma propiedades que el anterior solo que llamado manecilla minutos. 12. Luego en las propiedades le cambiaremos el grosor y el tamaño del recuadro a uno deseado, y a la instancia se llamara manecilla_minutos. 13. Seleccionamos de nuevo la manecilla cualquiera de las dos, y procedemos a copiarlo y pegarlo en el mismo sitio, para luego convertirlo a símbolo con el nombre de manecilla hora. 14. Luego cambiaremos sus propiedades con el nombre a la instancia manecilla_hora, así como su tamaño y grosor del recuadro a uno deseado. 15. Luego crearemos una nueva capa, a la cual llamaremos Actions (Acciones) que es la cual llevara el código action script. 16. Sobre esa capa nos vamos a llamar el panel de acciones que aparece con el símbolo

, o en el menú ventana/acciones o con el atajo F9. Página 34 de 42

Ing. Manuel Núñez

PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 17. Estando ya en panel de acciones, visualizaremos una recuadro que trae la parte de inserción del código y empezaremos desde la línea 1 hacia abajo escribiendo lo siguiente:

Var = indicador de variable Timer = indicador de tiempo addEventListener = a llamar un evento

.start = para indicar inicio del método. Fuction = indica inicio de función Event = indica inicio de evento Getseconds getminutes gethours = mandan a llamar los datos respectivos .rotation = permite hacer girar el objeto indicado 18. Luego para ver si no tenemos ningún error en la sintaxis activaremos la palomita azul que aparece en la ventana, si hubiera errores al compilarlo hay que depurarlo, si no hay problemas nos salimos de la ventana. 19. Y con esto finalizamos la práctica, para ver el resultado final presionamos CTRL + ENTER.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 ACTION SCRIPT CAPTURAR ROBOT. 1. Necesitaremos la plantilla de Robot, que se les proporcionara por el profesor, dicho archivo de flash contendrá una animación de un robot. 2. Abriremos el archivo y renombraremos la capa por robot y seleccionamos el diseño y en las propiedades le colocaremos una instancia llamada robot. 3. Creamos una nueva capa y nos vamos al panel de acciones con F9.

    

Tenemos que llamar importaciones para que funcione la animación entonces codificamos las primeras tres líneas. Robot es igual al nombre de la instancia de nuestro dibujo. Fuction mover () permite jalar la función de rebotar en un ciclo. Void permite indicar que la función no retornara nada. Tween permitirá mover nuestro robot en la escena.



X y Y son los indicadores de movimiento de los ejes.  Elastic permite mover el objeto  Ease.out complemento del elactic para el movimiento  Robot.x y robot.y permite tomar la posición del dibujo. 

Math.floor permite indicar la nueva posición de la figura



Math.floor.random permite ubicar al objeto en una posición al azar.



Stage.width y StageHeight permite tomar el tamaño del escenario. 1, true es para indicarle en tiempo en segundo que se tomara en mover al objeto.



4. Ya codificando la acción lo procederemos a guardar en archivo guardar como versión flash cs5. Y probamos la escena con CTRL + ENTER o lo exportamos. Página 36 de 42 Ing. Manuel Núñez



PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 GALERIA DE IMÁGENES SENCILLAS (BOTONES ACTION SCRIPT) 1. Generamos un nuevo documento de flash con Action Scri pt 3.0 2. Modificaremos el tamaño del escenario, para ello hacemos clic en él, y en el panel de propiedades hallaremos la opción tamaño, y en sus propiedades le asignamos un valor de 1024x768 pxi, y también le asignaremos un color preferido al escenario. 3. Necesitaremos 4 imágenes diferentes de paisajes de Playa del Carmen y las importamos a biblioteca, en menú archivo/importar/importar a biblioteca. 4. Luego de ello crearemos una nueva capa donde se almacenara las imágenes, la renombramos y llamamos imagen, y en ella a través del panel de bibliotecas tomamos las imágenes importadas y las arrastramos al escenario, escalando las imágenes y distribuyéndolas en el escenario. 5. Activamos la herramienta texto y con la configuración que deseemos, con o sin filtros insertamo s en un espacio vacío “GALERIA”. 6. Seleccionamos todas nuestras imágenes con la herramienta selección, para luego darle clic derecho/distribuir en capas, para que se coloque en cada una nueva. 7. Seleccionamos nuestra 1ra imagen y le damos clic derecho/convertir a símbolo, le colocaremos de nombre botón 1, de tipo botón. 8. Repetiremos este último paso con las demás imágenes para tenerlas en botones. 9. Luego de ello hacemos doble clic sobre una de las fotos para que flash nos muestre los estados del botón, que son reposo, sobre, presión, zona. 10. Notaremos que la vista ya fue cambiada, y en cada uno de los recuadros insertaremos fotogramas claves con F6. 11. Luego sobre el estado Sobre, nos vamos al menú modificar/convertir a símbolo, esto es para generar una animación del estado, lo podremos llamar sobre, tipo clip de película. 12. Y en la línea del tiempo del símbolo sobre, nos vamos al fotograma 15 y insertamos un fotograma clave, y en los fotogramas grises de la damos una interpolación clásica. 13. Y en fotograma 15 lo colocamos en un espacio vacío de nuestro escenario, que puede ser el centro de él, y con la herramienta de transformación libre hacerlo ligeramente más grande. 14. Luego de ello siempre en el fotograma 15 presionamos F9 para llamar el panel de acciones, para indicarle a la animación que se detenga, para ello escribiremos en el panel: stop(); 15. Nos salimos del estado y volvemos a hacerle doble clic sobre la imagen para seleccionar el estado sobre. 16. En estado sobre debajo de donde se colocara la imagen, tomaremos nuestra herramienta de texto y colocaremos el nombre del lugar de la fotografía.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 17. Repetiremos este procedimiento sobre las demás foto para que vaya quedando nuestra galería interactiva.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 CAMBIAR CURSOR CON ACTION SCRIPT 1. Generamos un documento de flash action script 3.0 2. Tomamos la herramienta de rectángulo y generamos uno con el color que prefiramos pero sin bordes. 3. Luego activamos la herramienta selección, y en las esquinas de la figura formamos jugamos con ellas hasta formar un triángulo. 4. Tomamos de nuevo la herramienta rectángulo, y colocamos uno de forma vertical que formara la base del cursor. 5. Luego seleccionamos los dos objetos y con la herramienta de transformación libre escalamos la figura para tenerla pequeña y aparente más al cursor de la computadora. 6. Teniéndolo seleccionado nos vamos al menú modificar/convertir a símbolo, lo llamamos cursor de tipo clip de película. 7. En nombre con el que creamos el símbolo, a action script no le interesa, el importante para el lenguaje es el que se le coloque en las propiedades de la figura en el apartado instancia, y lo nombramos como cursor_mc (mc = movie clip). 8. Insertamos una nueva capa que almacenara el código, lo renombramos por actions, y nos vamos al panel del lenguaje con F9. 9. En el panel de codificación escribiremos lo siguiente:

Este código lo que hace es ocultar el puntero, para que luego la flecha que generamos sigue al cursor del mouse. 10. Luego le damos unos saltos a las líneas de código, y en la numero 8 escribimos: Cursor_mc.addEventListener(MouseEvent.MOUSE_MOVE,cursor_cambia); 11. Luego de ello probamos nuestra escena con CTRL + ENTER y notaremos que el cursor de la computadora desaparece y automáticamente nuestro nuevo cursor seguirá la posición del mouse. 12. Para que se vea más realista podemos girar el cursor y darle los detalles que consideremos.


PRACTICAS Y DESARROLLO CLASES DE FLASH CS5 CREACION DE BOTONES Y ACTION SCRIPT 1. Crearemos un nuevo documento de flash de Action Script 3.0 2. En nuestra primera capa crearemos una estructura que formara nuestro botón, para ello tomaremos la herramienta de Ovalo, con un color de relleno y borde de su preferencia y lo insertamos en nuestra escena. 3. Luego de ellos lo seleccionamos haciendo doble clic sobre él. 4. Teniéndolo seleccionado le damos clic derecho/convertir a símbolo, con el nombre botón google, de tipo botón. 5. Habrá que entrar dentro del botón para ello doble clic sobre él, y notaremos que dentro del símbolo, aparecerá en los encabezados las secciones del mismo que son 4. 6. Habrá que configurar cada uno de los estados del botón, para ello hay que presionar F6 en cada casilla y configurar tomando en cuenta lo siguiente: a. Reposo (Up): Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él. b. Sobre (Over): Aspecto del botón cuando situamos el puntero sobre él. c. Presionado (Down): Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado. d. Zona activa (Hit): Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. 7. Luego de ello para indicarle una acción al botón, hay que hacerlo en el action script para ello activamos el panel de acciones, y configuremos lo siguiente:

abrir: permite generar el hipervínculo a la página indicada. navigateToURL: designa el lugar al cual se enviara al hacerle clic. binicio: es nombre de la instancia, aquí se colocara el nombre del botón.

8. Hay que recordar que al botón hay que indicarle una Instancia, ya que esa es la que se llama en el código de action script, eso se asigna en las propiedades del objeto después de convertirlo a símbolo. 9. Reproducimos la escena para ver como quedo nuestra configuración, y hacerle clic sobre el botón se activara el navegador para abrir la página indicada. Página 41 de 42 Ing. Manuel Núñez

Tutoriales Practicas Flash CS5

Recommend Documents