Objetos y Capas UNIDAD. Estructura de Contenidos: 1. Entorno de Adobe Flash. 2. Herramientas de Diseño. 3. Edición y Control de Estados.

Transcripción

1 Objetos y Capas UNIDAD 7 Estructura de Contenidos: 1. Entorno de Adobe Flash. 2. Herramientas de Diseño. 3. Edición y Control de Estados. 4. Interpolación de movimiento. 5. Control de capas. Tipos (Guía de movimiento, Máscara). 6. Elementos de Película: película, botón, gráfico. 7. Interpolación de formas. cis@ucv.edu.pe

2 Introducción Estimado participante: En esta oportunidad le damos la bienvenida a esta nueva unidad de aprendizaje, donde aprenderá los fundamentos necesarios para el uso de las herramientas interactivas en el diseño de páginas web, que le servirá en diferentes circunstancias de su vida profesional. Esta unidad está preparada para que puedas aprender los conocimientos básicos de los estados/ fotogramas, control de estados, interpolación de movimiento, interpolación de formas, que nos servirán para realizar animaciones y aplicaciones; lo cual te permitirá tener un mejor manejo y administración de las herramientas de Adobe Flash Professional CS5, para el desarrollo de banner publicitarios y que aportaran un valor agregado en tu futuro profesional. Te deseamos éxitos en el desarrollo de esta Unidad.! Importante: Si deseas investigar más sobre los beneficios que ofrece Adobe Flash, podrás encontrar material adicional en los enlaces web de las referencias. P á g i n a 2

3 OBJETOS Y CAPAS 1.-ENTORNO DE ADOBE FLASH Todos los productos Adobe tienen una interfaz similar e intuitiva. Ofrecen los formatos que trabajan en un panel general, ya en la interfaz ofrecen una barra de herramientas con controles ubicados generalmente en el extremo izquierdo. Las propiedades de los objetos se ubican generalmente en la parte inferior y los paneles de configuración en el extremo derecho. Sin embargo, estas ventanas son móviles y pueden alterarse en cualquier momento. Ej. 01. Cargar Adobe Flash y elegir el último formato Archivo de Flash: buscar entre los programas la suite de Adobe; clic en Adobe Flash Professional CS5; En Crear Nuevo, clic en Action Script 3.0; 02. Ajustar el tamaño del lienzo de 500x300 y configurar su color a Verde: menú Ventana, Propiedades; clic en el botón Editar en la zona de Tamaño; escribir 500 (anchura) y 300 (altura); Aceptar; clic en panel de colores en la zona de Escenario y elegir color Celeste. P á g i n a 3

4 P á g i n a 4

5 03. Ajustar el zoom al tamaño de la ventana disponible y visualizar el panel biblioteca: elegir de la lista de zoom el valor Ajustar a ventana ; menú Ventana, Biblioteca. P á g i n a 5

6 2.- HERRAMIENTAS DE DISEÑO Adobe Flash se encargar de generar productos animados e interactivos llamados películas. Para combinar los dibujos, fotos y textos, se dispone de muchas herramientas de diseño con propósitos diversos. Ej. Dibujar un paisaje donde se muestre una isla en altamar 01. Utilizar el lienzo creado anteriormente para dibujar el mar, el sol y una nube: Herr. Rectángulo, color azul y crear un rectángulo como se muestra; Herr. PoliStar, elegir color de relleno Amarillo, clic en botón Opciones, elegir el Estilo Estrella y definir el número de lados a 20; Aceptar; arrastrar y dibujar un estrella como se indica; Herr. Pincel, color de relleno blanco, máximo tamaño de grosor y arrastrar para dibujar una nube; P á g i n a 6

7 P á g i n a 7

8 02. Dibujar una isla y una palmera usando pluma: acercarse con un zoom al 200%; Herr. Pluma, color marrón de borde, clic y soltar hasta encerrar la forma de una isla; Herr. Cubo de P á g i n a 8

9 pintura, color marrón y clic dentro de la forma generada; repetir el uso de pluma y cubo de pintura para dibujar una palmera (si hay necesidad de reajustar la forma, utilice la Herr. Subselección y arrastrar nodos) P á g i n a 9

10 P á g i n a 10

11 3.- EDICIÓN Y CONTROL DE ESTADOS Los estados en Flash al igual que en Fireworks son los encargados de definir la animación con cambios en sus componentes. Flash ofrece una escala graduada llamada línea de tiempo donde controla los estados conocidos también como fotogramas. Los objetos son contenidos en los fotogramas claves reconocidos por el punto negro (si contiene algo) o blanco (si está vacío). Ej. Animar la escena con movimientos en sus componentes 01. Copiar el fotograma 9 veces: botón derecho en fotograma1 y elegir copiar fotograma; clic en posición 2; botón derecho y elegir pegar fotograma; repetir para las posiciones 3,4,5,6,7,8,9 y 10; P á g i n a 11

12 02. Realizar cambios en el tamaño del sol y posición de la nube: clic en fotograma2; Herr. Transformación Libre y reducir el tamaño del sol arrastrando los nodos; (repetir eso en cada fotograma par); clic en fotograma1; Herr. Selección y arrastrar la nube para cambiar su ubicación en el extremo derecho; (repetir en cada fotograma para simular un desplazamiento de derecha a izquierda. Pulsar CTRL+ENTER para vista previa en una ventana. P á g i n a 12

13 P á g i n a 13

14 03. Guardar y exportar como película SWF: menú Archivo, Guardar; asignar el nombre paisaje; menú Archivo, Exportar, Exportar película; asignar el nombre mar; Guardar. P á g i n a 14

15 P á g i n a 15

16 4.- INTERPOLACION DE MOVIMIENTO La interpolación de movimiento es un recurso que evitar realizar los cambios fotograma por fotograma cuando de cambio de posición o tamaño se trata. La interpolación solo es posible si se cuenta con dos fotogramas claves que contengan el mismo objeto. Se visualizar como una flecha que une los fotogramas involucrados. Ej. Crear un mensaje animado 01. Crear un nuevo lienzo de 600x400 y ajustar el zoom a 80%: cargar Adobe Flash; en Crear Nuevo clic en Action Script 3.0; clic en Editar de la zona de tamaño y definir 600 (anchura) y 400 (altura); ubicar la zona del zoom y escribir 80%. P á g i n a 16

17 02. Agregar un texto deseado y animar por ubicación usando interpolación de movimiento: Herr. Texto, texto clásico, fuente Arial, color Rojo, tamaño 30; clic en el lienzo y escribir UNIVERSIDAD CESAR VALLEJO; botón derecho en fotograma clave 1 y elegir copiar fotograma; botón derecho en la posición 30 y elegir pegar fotograma; botón derecho entre los fotogramas claves de la posición 1 y 30; elegir Crear interpolación Clásica; verifica que una línea une los fotogramas; clic en fotograma clave 1 y mover el texto fuera del lienzo por el extremo derecho; clic en fotograma clave 2 (o el de la posición 30) y mover el texto fuera del lienzo por el extremo izquierdo; pulsar CTRL+ENTER para vista previa en una ventana. P á g i n a 17

18 P á g i n a 18

19 P á g i n a 19

20 03. Agregar un nuevo texto en un fotograma clave vacía y animar por tamaño usando interpolación de movimiento: botón derecho en posición 31 y elegir Insertar fotograma clave en blanco; Herr. Texto y escribir UCV con los formatos deseados; botón derecho en fotograma clave 3 y elegir copiar fotograma; botón derecho en posición 60 y elegir pegar fotograma; botón derecho entre los fotogramas claves de las posiciones 31 y 60; elegir Crear interpolación clásica; verificar que la flecha une los dos fotogramas claves; clic en fotograma clave de posición 31 y mover el texto fuera del lienzo por el extremo izquierdo; Herr. Transformación libre y reducir su tamaño; clic en fotograma clave de posición 60 y mover el texto fuera del lienzo por el extremo derecho; Herr. Transformación libre y aumentar su tamaño. Pulsar ENTER para ver un barrido en diseño. Pulsar CTRL+Enter si desea verificar la animación en una ventana. P á g i n a 20

21 P á g i n a 21

22 P á g i n a 22

23 04. Agregar un nuevo texto y animar por colores usando interpolación de movimiento: botón derecho en posición 61 y elegir Insertar fotograma clave en blanco; Herr. Texto y escribir UNA GRAN UNIVERSIDAD con los formatos deseados; botón derecho en fotograma clave ubicado en posición 61 y elegir copiar fotograma; botón derecho en posición 90 y elegir pegar fotograma; botón derecho entre los fotogramas claves de las posiciones 61 y 90; elegir Crear interpolación clásica; verificar que la flecha une los dos fotogramas claves; clic en fotograma clave de posición 61, mover el texto fuera del lienzo por el extremo inferior y aplicar efecto de color como se indica; clic en fotograma clave de posición 90, mover el texto fuera del lienzo por el extremo superior y aplicar efecto de color como se indica. Pulsar CTRL+Enter si desea verificar la animación en una ventana. P á g i n a 23

24 05. Guardar y exportar la película como SWF: menú Archivo, Guardar; asignar el nombre publicidad y Guardar; menú Archivo, Exportar, Exportar película; asignar el nombre propaganda y Guardar. P á g i n a 24

25 5.- CONTROL DE CAPAS. TIPOS. Las capas son recursos importantes en el diseño web ya que facilita un plano que protege a los objetos que ya tiene un objetivo cumplido con respecto a otros que podrían dañarlos. Son como transparencias que se muestran superpuestas y que combinados adecuadamente se obtiene muy buenos resultados. Algunas capas tienen un trabajo especial como ocultar algunas zonas (Máscaras) o guiar objetos con una trayectoria (Guía de Movimiento). P á g i n a 25

26 Ej. Simular un sistema planetario solar 01. Crear un nuevo lienzo de 600x500 y adaptar una foto del espacio copiada desde internet: cargar Flash y en Crear Nuevo dar clic en Action Script 3.0; clic en botón Editar de la zona Tamaño y definir 600 (anchura) y 500 (altura); ubicar en internet una foto mediana del espacio; copiar a foto; volver al lienzo y ajustar el zoom al 70%; pegar la foto; ubicar y modificar las propiedades An=600, Al=500, X=0, Y=0; P á g i n a 26

27 02. Modificar el nombre de la capa1 por espacio y agregar otra capa llamada sol: doble clic en la capa 1 y escribir espacio ; botón derecho en capa espacio y clic en Insertar Capa; doble clic en Capa2 y escribir el nombre sol. P á g i n a 27

28 P á g i n a 28

29 03. Agregar la foto del sol depurando sus impurezas: ubicar en internet una foto del astro rey; copiar la foto; clic en fotograma clave en blanco de la capa sol; pegar la foto; agregar una capa llamada mk_solo; botón derecho sobre capa mk_solo y elegir Máscara; verificar que tiene un candado que hay que desactivar pulsando clic sobre el candado; clic en fotograma clave en blanco de la capa mk_sol y cubrir la zona que desea que se muestre usando forma óvalo. P á g i n a 29

30 04. Agregar una capa y dibujar una nave espacial que gire alrededor del sol: botón derecho en capa mk_sol y elegir Insertar capa; doble clic en esa capa y escribir como nombre nave; Herr. Pincel, Herr. Óvalo, Herr. Rectángulo y dibujar una nave espacial (utilizar Herr. Cubo de pintura para colorear); botón derecho en posición 30 de las otras capas y elegir Insertar fotograma (para aumentar la longitud de los fotogramas claves); clic en fotograma1 de la capa nave y mover el objeto fuera del lienzo por el extremo inferior; clic en fotograma2 de la capa nave y mover el objeto fuera del lienzo por el extremo superior. Pulsar CTRL+ENTER para ver en una ventana. P á g i n a 30

31 05. Crear una animación para que la nave se mueva de abajo hacia arriba: botón derecho en fotograma1 de la capa nave y elegir copiar fotograma; botón derecho en la posición 30 de la capa nave y elegir pegar fotogramas; botón derecho entre los fotogramas claves 1 y 2 de la capa nave y elegir Crear interpolación clásica; P á g i n a 31

32 P á g i n a 32

33 P á g i n a 33

34 6.- ELEMENTOS DE PELÍCULA: PELÍCULA, BOTÓN, GRÁFICO Los elementos o símbolos en flash se convierten en una poderosa herramienta cuando las películas se convierten en elementos a usar. Pueden ser: Gráficos, cuando no se requiere animar los objetos; Película, cuando se requiere animar los objetos; y Botón, cuando se desea controlar los objetos por medio de acciones por código. Ej. Agregar al trabajo anterior una Animación para que la tierra gire alrededor del sol 01. Crear 03 gráficos con 03 fotos de la tierra en distintas tomas: menú Insertar, Nuevo Símbolo; elegir tipo Gráfico y asignar el nombre tierra1 (verificar que se encuentra en un símbolo gráfico llamada tierra1); buscar en internet la foto pequeña de la tierra; copiar la foto; volver al entorno del gráfico tierra1; botón derecho y elegir Pegar; botón derecho en capa 1 y clic en Insertar capa; botón derecho en capa2 y elegir Máscara; clic en candados para habilitar la edición; para Herr. Óvalo y cubrir la tierra (necesario para no ver las impurezas de la foto); repetir todo el proceso para otros dos gráficos llamados tierra2 y tierra3 con fotos de la tierra en otras posiciones. P á g i n a 34

35 P á g i n a 35

36 P á g i n a 36

37 02. Crear una película que muestre a los 03 gráficos de la tierra en forma secuencial: menú Insertar, Nuevo Símbolo; elegir el tipo Clip de Película y asignar el nombre tierra_girando: Aceptar; menú Ventana, Biblioteca para visualizar los gráficos; arrastrar y soltar tierra1; P á g i n a 37

38 botón derecho en posición 2 y elegir Insertar fotograma clave en blanco; arrastrar y soltar tierra2; botón derecho en posición 3 y elegir Insertar fotograma clave en blanco; arrastrar y soltar tierra3; clic en fotograma clave 1; clic en el objeto y registrar sus dimensiones y posición; clic en fotograma clave 2; clic en el objeto y definir los mismos valores; repetir para el objeto del fotograma clave 3. Pulsar ENTER para verificar el barrido. P á g i n a 38

39 P á g i n a 39

40 P á g i n a 40

41 03. Crear un símbolo de película que mueva la tierra en una órbita: menú Insertar, Nuevo Símbolo; elegir el tipo Clip de Película y asignar el nombre tierra_orbita; Aceptar; arrastrar la película tierra_girando y soltar sobre el lienzo (en la capa1); botón derecho en capa1 y elegir Añadir Guía de Movimiento Clásica; clic en fotograma clave vacío de la capa Guía; Herr. Óvalo con borde, sin relleno y dibujar una órbita elíptica; botón derecho en fotograma clave de capa1 y elegir Copiar fotograma; botón derecho en posición 50 y elegir Pegar fotograma; botón derecho entre los fotogramas y elegir Crear Interpolación Clásica; botón derecho en posición 50 de la capa2 y elegir Insertar fotograma; Herr. Borrador, ajustar su tamaño al mínimo y cortar la órbita en su flexión izquierda; clic en fotograma clave 1 de la capa1 y ubicar el centro del objeto para que coincida con el inicio de la órbita cortada; clic en fotograma clave 2 de la capa1 y ubicar el centro del objeto para que coincida con el fin de la órbita cortada. Pulsar ENTER para verificar. P á g i n a 41

42 P á g i n a 42

43 P á g i n a 43

44 P á g i n a 44

45 04. Agregar la película tierra_orbita sobre la película actual: clic en el enlace Escena 1; botón derecho sobre capa nave y elegir Insertar Capa; doble clic sobre la nueva capa y escribir tierra; clic en fotograma clave vacío de la capa tierra; menú Ventana, Biblioteca y arrastrar la película tierra_orbita y soltar sobre el lienzo (ajustar el tamaño de la órbita si fuese necesario: doble clic en película tierra_orbita de la lista de la biblioteca). Pulsar CTRL+ENTER para ver en una ventana. P á g i n a 45

46 P á g i n a 46

47 05. Guardar como espacio y exportar como tierra_sol en formato SWF: menú Archivo, Guardar y asignar el nombre espacio; menú Archivo, Exportar, Exportar película y asignar el nombre tierra_sol. 7.- INTERPOLACIÓN DE FORMAS Es un recurso disponible para los dibujos. Consiste en transformar cada uno de los puntos trazados del dibujo en un fotograma clave en otro contenido de un fotograma clave distinto, cambiando totalmente de apariencia. Hay que recordar que si un vector desea participar se necesitará convertirlo a dibujo mediante el recursos Separar. Ej. Dejar caer tres esferas y que se conviertan en la palabra UCV P á g i n a 47

48 01. Crear un nuevo archivo de Flash, definir un lienzo de 600x400 y ajustar el zoom a 80%: cargar Adobe Flash; En Crear nuevo clic en Action Script 3.0; clic en botón Editar de la zona Tamaño y definir 600 (anchura) y 400 (altura); escribir en la lista zoom 80%. 02. Crear 3 capas con los nombres esfera1, esfera2, esfera3: botón derecho en capa1 y elegir Insertar Capa; botón derecho en capa2 y elegir Insertar Capa; doble clic en cada capa y modificar por los nombre esfera1, esfera2 y esfera3. P á g i n a 48

49 03. Interpolar para que las esferas bajen una por una: clic en fotograma clave en blanco de la capa Esfera1; Herr. Óvalo y dibujar un círculo con colores degradado radial; botón derecho en fotograma clave 1 de la capa Esfera1 y elegir copiar fotograma; botón derecho en posición 20 de la capa Esfera1 y elegir Pegar Fotograma; botón derecho entre ambos P á g i n a 49

50 fotogramas claves de la capa Esfera1 y elegir Crear Interpolación Clásica; clic en fotograma clave 1 de dicha capa y modificar la ubicación del círculo fuera del lienzo por la parte superior; clic en fotograma clave 2 de dicha capa y modificar la ubicación del círculo hasta el punto medio del lienzo; (repetir para las otras 2 esferas en sus capas respectivas) P á g i n a 50

51 P á g i n a 51

52 P á g i n a 52

53 P á g i n a 53

54 04. Interpolar para que las esferas se conviertan en las letras UCV: ubicarse en la posición 21 de cada capa y pulsar la tecla F6 (para evitar copiar y pegar) para copiar el fotograma clave anterior; ubicarse en la posición 40 de cada capa y elegir Insertar fotograma clave en blanco; clic en fotograma clave en blanco de la capa Esfera1 y escribir la letra U con los formatos deseados; clic en fotograma clave en blanco de la capa Esfera2 y escribir la letra C con los formatos deseados; clic en fotograma clave en blanco de la capa Esfera3 y escribir la letra V con los formatos deseados; clic en los fotogramas de la posición 21 y convertir sus objetos a dibujo pulsando botón derecho separar las veces necesarias; (repetir 2 veces para los fotogramas de la posición 40 por ser vectores); botón derecho entre los fotogramas de las posiciones 21 y 40 de cada capa y elegir Crear Interpolación de Forma. Verificar pulsando CTRL+ENTER. P á g i n a 54

55 P á g i n a 55

56 P á g i n a 56

57 P á g i n a 57

58 05. Guardar como esferas y exportar la película como UCV en formato SWF: menú Archivo, Guardar y asignar el nombre esferas; menú Archivo, Exportar, Exportar película y asignar el nombre UCV. P á g i n a 58

59 Glosario de Términos lienzo: espacio disponible para trabajar el diseño. zoom: proceso de acercarse o alejarse. fotograma: recurso de flash para almacenar los objetos. máscara: capa especial utilizada para cubrir zonas que no desea mostrar. película: formato más utilizado en la exportación de los productos Flash. Referencias: Interpolación de movimiento - YouTube 02 Mar min. - Subido por aulaclic P á g i n a 59

60 ACTIVIDAD DE APRENDIZAJE Crear una carpeta en la unidad D: llamada PRACTICA Cargar Adobe Flash y crear un lienzo de 600x500: menú Inicio, programa, Adobe Flash Professional; en Crear Nuevo clic en ActionScript 3.0; clic en botón Editar de la zona Tamaño y definir 600 (anchura) y 500 (altura); ajustar el zoom al 80%. P á g i n a 60

61 03. Simular la superficie de Marte en el espacio: Herr. Rectángulo color de relleno negro y arrastrar de esquina superior izquierda hasta esquina inferior derecha; Herr. Óvalo color rojizo y arrastrar en la parte inferior para dibujar una superficie; 04. Crear 2 símbolos gráficos para almacenar a Curiosity y el presidente Obama manejando: menú Insertar, Nuevo símbolo; elegir tipo Gráfico y asignar el nombre de Curiosity; ubicar en internet la foto del robot Curiosity; copiar la foto; volver al lienzo del símbolo y pegar; botón derecho en capa1 y elegir Insertar Capa; botón derecho en Capa2 y elegir Máscara; clic en los candados para permitir la edición; clic en fotograma clave en blanco de la capa2; Herr. Pincel y arrastrar sobre las zonas que desea ver; (repetir el proceso para el presidente Obama) P á g i n a 61

62 P á g i n a 62

63 P á g i n a 63

64 P á g i n a 64

65 05. Crear una película que una a los dos gráficos y anime con movimiento a Obama: menú Insertar, Nuevo símbolo; definir el tipo Clip de Película y asignar el nombre robot_obama; menú Ventana, Biblioteca; arrastrar el gráfico curiosity hacia el lienzo de la capa 1; agregar una capa2 y arrastrar Obama hacia el lienzo de la capa2; Herr. Transformación libre, girar el objeto de Obama y reducir su tamaño arrastrando sus nodos; clic en posición 2 de la capa2 y pulsar F6 dos veces para sacar copias; clic en posición 3 de la capa1 y pulsar F5 para insertar un fotograma que aumente la longitud de exposición del curiosity; clic en fotograma clave1 de la capa2 y girar a Obama hacia la izquierda; clic en fotograma clave3 de la capa2 y girar a Obama hacia la derecha (arrastrar fuera de las esquinas para girar); P á g i n a 65

66 P á g i n a 66

67 P á g i n a 67

68 P á g i n a 68

69 06. Volver al lienzo y simular la llegada del curiosity a Marte: clic en enlace Escena 1; botón derecho en capa1 y elegir Insertar Capa; clic en fotograma clave en blanco de la capa2 y arrastrar la película Robot_Obama; ajustar su tamaño; clic en posición 5 de la capa2 y pulsar F6 para copiar; (repetir en posiciones 10, 15, 20, 25, 30, 35, 40); botón derecho entre fotograma clave 1 y fotograma clave2 de la capa2 y elegir Crear Interpolación Clásica (repetir para cada intervalo formado entre 2 fotogramas claves); clic en posición 50 de la capa1 y pulsar F5 para aumentar el tiempo de exposición del fotograma clave; clic fotogramas claves de la capa2 y ubicar el objeto de tal manera que simule la llegada y movimientos necesarios (ver muestras). Pulsar CTRL+ENTER para visualizar en una ventana. P á g i n a 69

70 P á g i n a 70

71 P á g i n a 71

72 P á g i n a 72

73 P á g i n a 73

74 07. Guardar como conquista y exportar como marte en formato SWF: menú Archivo, Guardar y asignar el nombre conquista; menú Archivo, Exportar, Exportar Película y asignar el nombre marte. P á g i n a 74

75 P á g i n a 75