SlideShare una empresa de Scribd logo
1 de 26
Descargar para leer sin conexión
REGIONAL META                       Fecha: Abril 17 de 2012
                                    INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                              TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
         Sistema de Gestión                          SOFTWARE                          Página 1de 26
            de la Calidad


                                             EDICIÓN DE CAPAS

Cuando se trabaja con múltiples Capas es muy frecuente que puedas batallar para encontrar las formas que están
dispuestas en una u otra Capa, por ello se te aconseja que cambies de nombre a cada una de las Capas y así
puedas ubicar cada uno de las formas vectoriales con una mayor facilidad.

   En el ejemplo anterior se trabajo con 5 Capas, pero no sabes con exactitud en donde se encuentra cada una
   de las formas. La solución a este conflicto es hacer doble clic sobre el nombre de la Capa y después
   cambiárselo por uno que describa el contenido de la Capa. Por ejemplo en la Capa 1 del trabajo anterior esta
   dibujado la base de la carita feliz, sustituir el nombre de Capa 1 por el de fondo amarrillo. En la Capa 2
   esta dibujada la línea de la boca, sustituir el nombre de Capa 2 por el de boca. Cambiar el nombre de la
   Capa 3 por el de fondo de ojos, el de la Capa 4 por el de ojo izquierdo y cambiar el nombre de la Capa 5
   por de ojo derecho.




                  APLICACIÓN DE SÍMBOLOS E INCORPORACIÓN DE PANELES

Cuando se trabaja con animaciones un poco más elaboradas forzosamente tienes que incorporar los diferentes
símbolos de Flash (Clip de película , Botón y Gráfico) así como también diferentes paneles de herramientas
con los cuales te ayudaras para la realización de las animaciones, los paneles más utilizados son: Panel de
Propiedades del Documento (ctrl. + J), Panel de Biblioteca (ctrl. + L o F11), Panel de Mezclador de
Colores (shift + F9), Panel de Transformar (ctrl. + T). Estos símbolos y paneles ya fueron descritos con
anterioridad y ahora solamente te enfocaras en su aplicación.

Creación de símbolos de Tipo Clip de película

Cuando se diseña una animación en la que se involucre la participación de varias capas, es más recomendable
hacer las animaciones en diferentes símbolos y después solamente colocar cada uno de los símbolos en la
Escena para la visualización en aun archivo SWF.

       La animación que a continuación se te presenta esta realizada en un documento de Propiedades ctrl. + J,
       dimensiones del documento 250 * 250 píxeles, color de fondo #FFFFFF y velocidad de fotogramas 12
       fps.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 2de 26
     de la Calidad




En el siguiente ejemplo trabajaras con animaciones de interpolación de movimiento en clips de película.
En esta animación estarán involucrados parámetros tales como: movimiento girar, número de giros,
color alfa, color tinta.
Para crear un símbolo tienes tres opciones la primera es, seguir la siguiente ruta Insertar >> Nuevo
símbolo, la segunda es mediante el Panel de Biblioteca haciendo clic en el icono correspondiente y la
tercera es presionando en el teclado ctrl. + F8.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 3de 26
     de la Calidad


Cuando aparece el panel de Crear un nuevo símbolo, cambiar las propiedades, colocar un nombre que
describa la acción que se estará llevando acabo en el símbolo. Luego seleccionar el Tipo de símbolo con
el cual se va a trabajar. En este caso colocar como nombre cuadrado girando y seleccionar la opción
Clip de película.




Una vez que te encuentres ubicado en el símbolo, dibujar un cuadrado (R) de dimensiones 200.0
*200.0, colocar el cuadrado en coordenadas X: 0.0 y Y: 0.0, no usar colordeborde y colocar como
colorderelleno#00FF00. Así comenzaras a crear una animación de Interpolación de movimiento.




Luego seleccionar el frame número 20 e insertar un fotograma clave F6, una vez que el fotograma clave
haya sido insertado seleccionar un punto entre el fotograma número 1 y el fotograma número 19 y
hacer clic sobre este fotograma con el botón derecho del ratón, en el menú emergente seleccionar la
opción Interpolación de movimiento.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 4de 26
     de la Calidad




Seleccionar la forma vectorial del fotograma número 20 y hacer visible el Panel de Transformar ctrl.
+ T, seleccionar la casilla de Restringir, reajustar el porcentaje en alguna de las casillas Anchura o
Altura al 10.0 %. Así el tamaño del cuadrado se vera reducido.




Ahora seleccionar el cuadro reducido del fotograma número 20, en el Panel de Propiedades seleccionar
la opción de Color: Alfa y reducir el Porcentaje de 100% a 0%. Con esta modificación la animación
del cuadrado se disminuirá de tamaño y al mismo tiempo se estará desvaneciendo.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 5de 26
     de la Calidad




Hacer una variante más a la animación, seleccionar el cuadrado del fotograma número 1, y en el Panel
de Propiedades seleccionar la casilla de Giro: Horario.
REGIONAL META                       Fecha: Abril 17 de 2012
                                    INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                              TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
         Sistema de Gestión                          SOFTWARE                          Página 6de 26
            de la Calidad


                                    INTERPOLACIÓN DE MOVIMIENTO

Practicar otro ejemplo de animación que esté contenida en la misma película FLA. En esta animación queda
establecida una interpolación de movimiento de zoom, en la animación también se involucra el cambio de
coloralfa.

      Primero debes crear un nuevo símbolo ctrl. + F8, nombrar al símbolo óvalo girando y seleccionar la
      opción de Clip de película.




      En este símbolo hacer una animación de un Óvalo (O), de dimensiones 40.0 * 70.0píxeles de ancho y
      alto, colocarlo en coordenadas X: 0.0 y Y: 0.0, no usar color de borde y colocar como color de relleno
      #00FFFF.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 7de 26
     de la Calidad


Seleccionar el frame número 20 e insertar un fotograma clave F6, después seleccionar un punto entre el
fotograma número 1 y el fotograma número 19 y hacer clic sobre este fotograma con el botón derecho
del ratón, en el menú emergente seleccionar la opción Interpolación de movimiento.




Seleccionar la forma vectorial del fotograma número 1 y en el Panel de Transformar ctrl. + T,
seleccionar la casilla de Restringir, reajustar el porcentaje en alguna de las casillas Anchura o Altura
al 10.0 %.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 8de 26
     de la Calidad


Ahora seleccionar la forma vectorial del fotograma número 1, en el Panel de Propiedades seleccionar la
opción de Color: Alfa y reducir el Porcentaje de 100% a 0%.




Para hacer la variante de movimiento en esta animación, seleccionar el fotograma número 1, y en el
Panel de Propiedades seleccionar la casilla de Giro: AntiHorario y en la casilla de Número de
rotaciones escribir el número 4 veces.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 9de 26
     de la Calidad


Para conseguir que el óvalo cambie de su color original #00FFFF a otro cualquiera, simplemente
seleccionar el óvalo del fotograma número 20 y en el Panel de Propiedades seleccionar la opción
Color: Tinta luego seleccionar un color diferente.




Regresar a la Escena, hacer visible el Panel de la Biblioteca ctrl. + L y luego arrastrar desde esta el
símbolo cuadrado girando y colocarlo en coordenadas X: 25.0 y Y: 25.0.
REGIONAL META                       Fecha: Abril 17 de 2012
                                    INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                              TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
         Sistema de Gestión                          SOFTWARE                          Página 10de 26
            de la Calidad


       Ahora arrastrar el símbolo óvalo girando hacia la Escena y colocarlo en coordenadas X: 144.4 y Y:
       140.4. Cuando se hace una animación de interpolación de movimiento automáticamente se crean
       símbolos del Tipo Gráfico no borrar estos símbolos porque la animación se perderá irremediablemente.
       Presionar ctrl. + Enter y observar la animación que se ha creado.




                                       CREACIÓN DE SÍMBOLOS DE TIPO BOTÓN

Los símbolos del Tipo Botón son de mucha importancia en las animaciones Flash, con estos botones se puede
controlar las animaciones a lo largo de la Línea de tiempo, también puedes enlazar los botones a ubicaciones
web, o controlar una pagina web 100 % Flash. En este punto solamente te enfocare en conocer la Línea de
tiempo del símbolo Botón, así también se trabajara en el diseño básico de un botón de tres estados Reposo,
Sobre y Presionado.

       El símbolo de Tipo Botón se crea igual que el símbolo Clip de película y símbolo Tipo Gráfico, esto es
       siguiendo la ruta Insertar >> Nuevo símbolo o presionando en el teclado ctrl. + F8 o haciendo clic en
       el icono que corresponde para crear un nuevo símbolo en el Panel de Biblioteca.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 11de 26
     de la Calidad




Luego de haber seguido uno de estos métodos en el Panel de Crear un nuevo símbolo colocar un
Nombre que describa al símbolo, después simplemente seleccionar en la opción Tipo Botón. En este
caso nombrar al símbolo botón redondo y en la opción Tipo seleccionar Botón.




Al Aceptar el paso anterior te colocara en el símbolo de Tipo Botón. La Línea de tiempo de este
símbolo difiere en comparación a la del símbolo Clip de película y Gráfico.
La Línea de tiempo del símbolo Botón cuanta con cuatroframes, sin embargo, en esta ocasión
solamente se utilizan tres de los cuatro frames estos son; Reposo, Sobre y Presionado.
En el primer fotogramaReposo, indica que el botón permanecerá en una sola posición y solamente
tendrá la propiedad de ser botón en el archivo SWF.
El fotograma de Sobre indica que cuando se pasa el cursor sobre el botón este cambiara de posición o
color según haya sido diseñado.
Y el estado de Presionado te indica que cuando presiones el botón este cambiara también de color o de
posición. Estas tres acciones solo son visualizadas cuando el símbolo botón es puesto en la Escena y es
publicado en un archivo SWF.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 12de 26
     de la Calidad




A continuación se diseñara un botón con borde redondeado en el símbolo que ya creaste. Presionar la
herramienta rectángulo (R), luego seleccionar la herramienta de establecer Radio de esquina en el
Panel emergente de Configuración de rectángulo escribir 10 como Radio de esquina.




Una vez que se estableció el Radio de esquina, colocar las propiedades al rectángulo de color. Hacer
visible el Panel de Mezclador de colores shift + F9, anular el color de borde, seleccionar como color
de relleno un estilo degradado de Tipo Lineal, los colores a usar son #FFFFFF y #000000.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 13de 26
     de la Calidad


Dibujar un rectángulo de dimensiones 100.0 * 20.0 píxeles de ancho y alto y colocarlo en coordenadas
X: 0.0 y Y: 0.0.




Insertar un fotograma clave F6 en el segundo Estado de la línea de tiempo (Sobre), seleccionar la forma
vectorial de este fotograma y con el Panel de Mezclador de clores aun visible cambiar el Estilo de
relleno a Tipo Radial, los colores seguirán siendo #FFFFFF y #000000.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 14de 26
     de la Calidad




Insertar el tercer fotograma clave F6 en el fotograma Presionado, seleccionar la forma vectorial de este
fotograma y con ayuda del Panel de Mezclador cambiar nuevamente el Estilo de relleno a Tipo Lineal.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 15de 26
     de la Calidad




Insertar una segunda capa en la cual se colocara un Campo de texto estático (T) con la palabra botón
prueba, tipo de fuente Arial, tamaño de fuente 14 y color de fuente #FFFFFF, mover este texto a
CoordenadasX: 6.6 y Y: 0.2.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 16de 26
     de la Calidad




Regresar a la Escena y arrastrar desde el Panel de Bibliotecactrl. + L el símbolo botón redondo,
presionar ctrl. + Enter y ver como trabaja el botón de tres estados.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 17de 26
     de la Calidad


                          ANIMACIÓN CON IMANES IMPORTADAS

En este ejemplo se trabajara en la animación de una imagen con color Alfa para simular el
desvanecimiento de imagen.
La animación estará insertada en un documento con las siguientes Propiedades ctrl. J, dimensiones del
documento 300 * 300 píxeles de ancho y alto, color de fondo #FFFFFF y velocidad de fotogramas 15
fps




La animación no se trabajara con Interpolación de movimiento porque este tipo de interpolación
genera automáticamente dos símbolos de Tipo Gráfico y hace un poco pesado el archivo FLA, mejor se
trabajara con una animación de Movimiento en el Panel de Propiedades. Esta animación será descrita a
continuación. Primero crear un símbolo ctrl. + F8 llamarlo imagen seleccionar la opción de Tipo
Gráfico.




Ubicado en el símbolo presionar ctrl. + R en el menú emergente de Importar navegar hasta la carpeta de
la imagen. Cuando la imagen haya sido insertada en el símboloimagen clocarla en coordenadas X: 0.0
y Y: 0.0. Importar una imagen que tenga de dimensiones 300.0 * 300.0 píxeles de ancho y alto.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 18de 26
     de la Calidad




Ahora crear un nuevo símbolo ctrl. F8 y nombrarlo animación de imagen, en la opción Tipo
seleccionar la opción de Clip de película.




Una vez que te encuentres en el símbolo de Clip de película hacer visible el Panel de Biblioteca ctrl. +
L y arrastrar desde esta el símboloimagen hacia el Clip de película, color la imagen en coordenadas X:
0.0 y Y: 0.0.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 19de 26
     de la Calidad




Seleccionar el frame número 25 e insertar un fotograma clave F6. Seleccionar la imagen de este
fotograma y en el Panel de Propiedades seleccionar la opción Color Alfa y después reducir el
porcentaje de 100% a 0%.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 20de 26
     de la Calidad


Seleccionar un fotograma entre el número 1 y el número 24, en el Panel de Propiedades seleccionar la
opción Animar Movimiento, y de esta forma quedara insertada la animación.




Regresar a la Escena y arrastrar desde la Biblioteca ctrl. + L el símbolo animación de imagen, colocar
el símbolo en coordenadas X: 0.0 y Y: 0.0. Presionar ctrl. + Enter y visualizar el trabajo realizado.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 21de 26
     de la Calidad


Como veras la animación tiene un pequeño salto, para solucionar este problema regresar al símbolo
animación de imagen y colocar un fotograma clave F6 en el frame número 50, seleccionar la imanen de
este fotograma en el Panel de Propiedades seleccionar Color Ninguno.




Seleccionar un fotograma entre el número 25 y el número 49, en el Panel de Propiedades seleccionar la
opción Animar Movimiento, y de esta forma quedara insertada una animación más.
Volver a presionar ctrl. + Enter y notaras una significativa diferencia en la animación.
REGIONAL META                       Fecha: Abril 17 de 2012
                                    INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                              TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
         Sistema de Gestión                          SOFTWARE                          Página 22de 26
            de la Calidad


                ANIMACIÓN DE FORMAS VECTORIALES EN SÍMBOLOS (NO INTERPOLACIÓN
                                       DE MOVIMIENTO)

No siempre animar formas vectoriales con Interpolación de movimiento es la técnica más apropiada, la
primera de las razones es porque tienes que trabajar con dos símbolos de Tipo Gráfico por cada animación que
se realiza, y a estas animaciones solamente se puede trabajar con el cambio de color en cualquiera de sus
modalidades. Por otro lado cuando quieres hacer una animación en la que se involucre una deformación y al
mismo tiempo un cambio de color de una forma vectorial es imposible hacerla con una animación de
Interpolación de movimiento, para este tipo de animaciones se utiliza una Animación de Forma en el Panel
de Propiedades.

   A continuación se te guiara paso a paso hasta llegar a conseguir una animación en la se involucre el cambio
   de color, la deformación de la forma vectorial y después hacer que la forma vectorial se traslade de un lugar
   a otro.
   Crear un documento de Propiedades ctrl. + J, dimensiones 500 * 200 píxeles de ancho y alto, color de
   fondo #CCFFFF y velocidad de fotogramas 15 fps.




       Luego de que hayas colocado las propiedades del documento, crear un símbolo ctrl. + F8, nombrarlo
       animación de forma, en la opción de Tipo seleccionar Clip de película.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 23de 26
     de la Calidad


Ubicado en el símbolo dibujar un Óvalo (O) que no tenga borde y usar como color de relleno #000066
las dimensiones 98.0 * 198.0 píxeles de ancho y alto, colocar la forma dibujada en coordenadas X: 0.0
y Y: 0.0.




Insertar un fotograma clave F6 en el frame número 25. seleccionar el óvalo de este nuevo fotograma y
cambiar el color de relleno a #FF0000.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 24de 26
     de la Calidad


Seleccionar un fotograma entre el número 1 y el número 24. En el Panel de Propiedades seleccionar la
opción de Animar: Forma.




Regresar a la Escena y arrastrar desde el Panel de Biblioteca ctrl. + L el símbolo animación de forma,
después colocar el símbolo en coordenadas X: 0.0 y Y: 0.0. Presionar ctrl. + Enter y observar como
cambia de color gradualmente el óvalo.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 25de 26
     de la Calidad


Regresar al símbolo animación de forma asiendo doble clic sobre el icono que representa al símbolo en
el Panel de la Biblioteca.




Nuevamente ubicado en el símbolo animación de forma, seleccionar la forma vectorial del fotograma
número 25, tomar por uno de los extremos a la forma y deformarla un poco. Las coordenadas cambiaran
al deformar el óvalo, si deseas puedes colocar nuevamente la forma vectorial en coordenadas X: 0.0 y Y:
0.0. Presionar una vez más ctrl. + Enter y ahora se observara que el óvalo cambia de color y al mismo
tiempo este se va deformado en otra cosa.
REGIONAL META                       Fecha: Abril 17 de 2012
                             INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA          Versión: 5
                       TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
  Sistema de Gestión                          SOFTWARE                          Página 26de 26
     de la Calidad


Para concluir con este objetivo regresar otra vez al símbolo animación de forma luego seleccionar el la
forma vectorial del fotograma número 25 y cambiarla de coordenadas en el eje X, la nueva
coordenada será X: 500.0. Con esta coordenada te aseguraras que la animación se trasladara hasta a
fuera del Escenario.
Presionar ctrl. + Enter y ver como queda la animación final en la cual están incluidas tres tipos de
animaciones.

Más contenido relacionado

Similar a Act 5 flash 8

Similar a Act 5 flash 8 (20)

Act 4 flash 8
Act 4 flash 8Act 4 flash 8
Act 4 flash 8
 
Multimedia 2.1 1101
Multimedia 2.1   1101Multimedia 2.1   1101
Multimedia 2.1 1101
 
Multimedia 2 1101
Multimedia 2   1101Multimedia 2   1101
Multimedia 2 1101
 
Curso de civil 3 d nivel 1
Curso de civil 3 d nivel 1Curso de civil 3 d nivel 1
Curso de civil 3 d nivel 1
 
Multimedia 3 1101
Multimedia 3   1101Multimedia 3   1101
Multimedia 3 1101
 
Multimedia 1 1101
Multimedia 1   1101Multimedia 1   1101
Multimedia 1 1101
 
CLASE 6 TIC.docx
CLASE 6 TIC.docxCLASE 6 TIC.docx
CLASE 6 TIC.docx
 
Flash 1
Flash 1Flash 1
Flash 1
 
Interpolacion
InterpolacionInterpolacion
Interpolacion
 
Presentaciones
PresentacionesPresentaciones
Presentaciones
 
Adobe Illustrator
Adobe IllustratorAdobe Illustrator
Adobe Illustrator
 
Edgar campo flash
Edgar campo flashEdgar campo flash
Edgar campo flash
 
Guia de enseñanza taller (1)
Guia de enseñanza  taller (1)Guia de enseñanza  taller (1)
Guia de enseñanza taller (1)
 
Guia enseñanza
Guia enseñanza Guia enseñanza
Guia enseñanza
 
Guia de enseñanza taller power poitn
Guia de enseñanza  taller power poitnGuia de enseñanza  taller power poitn
Guia de enseñanza taller power poitn
 
Guia powert point talle 1
Guia  powert point  talle 1Guia  powert point  talle 1
Guia powert point talle 1
 
Guia enseñanza taller power point
Guia enseñanza taller  power pointGuia enseñanza taller  power point
Guia enseñanza taller power point
 
Guia de enseñanza taller
Guia de enseñanza  tallerGuia de enseñanza  taller
Guia de enseñanza taller
 
Guia de enseñanza taller
Guia de enseñanza  tallerGuia de enseñanza  taller
Guia de enseñanza taller
 
Guia de enseñanza taller
Guia de enseñanza  tallerGuia de enseñanza  taller
Guia de enseñanza taller
 

Más de Cristian Buitrago (15)

Trabajo Grupal, Con el Teatro Interactuo y me Recreo.
Trabajo Grupal, Con el Teatro Interactuo y me Recreo.Trabajo Grupal, Con el Teatro Interactuo y me Recreo.
Trabajo Grupal, Con el Teatro Interactuo y me Recreo.
 
Redes lan-y-wan
Redes lan-y-wanRedes lan-y-wan
Redes lan-y-wan
 
Wlmm
WlmmWlmm
Wlmm
 
Robotica basica
Robotica basicaRobotica basica
Robotica basica
 
Calificaciones 1101 segundo periodo
Calificaciones 1101 segundo periodoCalificaciones 1101 segundo periodo
Calificaciones 1101 segundo periodo
 
Calificaciones 1001 segundo periodo
Calificaciones 1001 segundo periodoCalificaciones 1001 segundo periodo
Calificaciones 1001 segundo periodo
 
Historia del-blog
Historia del-blogHistoria del-blog
Historia del-blog
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Unidad 1
Unidad 1Unidad 1
Unidad 1
 
Org y gestion
Org y gestionOrg y gestion
Org y gestion
 
Proyecto tecnologico
Proyecto tecnologicoProyecto tecnologico
Proyecto tecnologico
 
TIPOS DE DOMINIOS EN INTERNET
TIPOS DE DOMINIOS EN INTERNETTIPOS DE DOMINIOS EN INTERNET
TIPOS DE DOMINIOS EN INTERNET
 
Otros Tipos de Energia Renovable
Otros Tipos de Energia RenovableOtros Tipos de Energia Renovable
Otros Tipos de Energia Renovable
 
Tipos de paginas web
Tipos de paginas webTipos de paginas web
Tipos de paginas web
 
Multimedia 1.1 1101
Multimedia 1.1   1101Multimedia 1.1   1101
Multimedia 1.1 1101
 

Act 5 flash 8

  • 1. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 1de 26 de la Calidad EDICIÓN DE CAPAS Cuando se trabaja con múltiples Capas es muy frecuente que puedas batallar para encontrar las formas que están dispuestas en una u otra Capa, por ello se te aconseja que cambies de nombre a cada una de las Capas y así puedas ubicar cada uno de las formas vectoriales con una mayor facilidad. En el ejemplo anterior se trabajo con 5 Capas, pero no sabes con exactitud en donde se encuentra cada una de las formas. La solución a este conflicto es hacer doble clic sobre el nombre de la Capa y después cambiárselo por uno que describa el contenido de la Capa. Por ejemplo en la Capa 1 del trabajo anterior esta dibujado la base de la carita feliz, sustituir el nombre de Capa 1 por el de fondo amarrillo. En la Capa 2 esta dibujada la línea de la boca, sustituir el nombre de Capa 2 por el de boca. Cambiar el nombre de la Capa 3 por el de fondo de ojos, el de la Capa 4 por el de ojo izquierdo y cambiar el nombre de la Capa 5 por de ojo derecho. APLICACIÓN DE SÍMBOLOS E INCORPORACIÓN DE PANELES Cuando se trabaja con animaciones un poco más elaboradas forzosamente tienes que incorporar los diferentes símbolos de Flash (Clip de película , Botón y Gráfico) así como también diferentes paneles de herramientas con los cuales te ayudaras para la realización de las animaciones, los paneles más utilizados son: Panel de Propiedades del Documento (ctrl. + J), Panel de Biblioteca (ctrl. + L o F11), Panel de Mezclador de Colores (shift + F9), Panel de Transformar (ctrl. + T). Estos símbolos y paneles ya fueron descritos con anterioridad y ahora solamente te enfocaras en su aplicación. Creación de símbolos de Tipo Clip de película Cuando se diseña una animación en la que se involucre la participación de varias capas, es más recomendable hacer las animaciones en diferentes símbolos y después solamente colocar cada uno de los símbolos en la Escena para la visualización en aun archivo SWF. La animación que a continuación se te presenta esta realizada en un documento de Propiedades ctrl. + J, dimensiones del documento 250 * 250 píxeles, color de fondo #FFFFFF y velocidad de fotogramas 12 fps.
  • 2. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 2de 26 de la Calidad En el siguiente ejemplo trabajaras con animaciones de interpolación de movimiento en clips de película. En esta animación estarán involucrados parámetros tales como: movimiento girar, número de giros, color alfa, color tinta. Para crear un símbolo tienes tres opciones la primera es, seguir la siguiente ruta Insertar >> Nuevo símbolo, la segunda es mediante el Panel de Biblioteca haciendo clic en el icono correspondiente y la tercera es presionando en el teclado ctrl. + F8.
  • 3. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 3de 26 de la Calidad Cuando aparece el panel de Crear un nuevo símbolo, cambiar las propiedades, colocar un nombre que describa la acción que se estará llevando acabo en el símbolo. Luego seleccionar el Tipo de símbolo con el cual se va a trabajar. En este caso colocar como nombre cuadrado girando y seleccionar la opción Clip de película. Una vez que te encuentres ubicado en el símbolo, dibujar un cuadrado (R) de dimensiones 200.0 *200.0, colocar el cuadrado en coordenadas X: 0.0 y Y: 0.0, no usar colordeborde y colocar como colorderelleno#00FF00. Así comenzaras a crear una animación de Interpolación de movimiento. Luego seleccionar el frame número 20 e insertar un fotograma clave F6, una vez que el fotograma clave haya sido insertado seleccionar un punto entre el fotograma número 1 y el fotograma número 19 y hacer clic sobre este fotograma con el botón derecho del ratón, en el menú emergente seleccionar la opción Interpolación de movimiento.
  • 4. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 4de 26 de la Calidad Seleccionar la forma vectorial del fotograma número 20 y hacer visible el Panel de Transformar ctrl. + T, seleccionar la casilla de Restringir, reajustar el porcentaje en alguna de las casillas Anchura o Altura al 10.0 %. Así el tamaño del cuadrado se vera reducido. Ahora seleccionar el cuadro reducido del fotograma número 20, en el Panel de Propiedades seleccionar la opción de Color: Alfa y reducir el Porcentaje de 100% a 0%. Con esta modificación la animación del cuadrado se disminuirá de tamaño y al mismo tiempo se estará desvaneciendo.
  • 5. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 5de 26 de la Calidad Hacer una variante más a la animación, seleccionar el cuadrado del fotograma número 1, y en el Panel de Propiedades seleccionar la casilla de Giro: Horario.
  • 6. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 6de 26 de la Calidad INTERPOLACIÓN DE MOVIMIENTO Practicar otro ejemplo de animación que esté contenida en la misma película FLA. En esta animación queda establecida una interpolación de movimiento de zoom, en la animación también se involucra el cambio de coloralfa. Primero debes crear un nuevo símbolo ctrl. + F8, nombrar al símbolo óvalo girando y seleccionar la opción de Clip de película. En este símbolo hacer una animación de un Óvalo (O), de dimensiones 40.0 * 70.0píxeles de ancho y alto, colocarlo en coordenadas X: 0.0 y Y: 0.0, no usar color de borde y colocar como color de relleno #00FFFF.
  • 7. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 7de 26 de la Calidad Seleccionar el frame número 20 e insertar un fotograma clave F6, después seleccionar un punto entre el fotograma número 1 y el fotograma número 19 y hacer clic sobre este fotograma con el botón derecho del ratón, en el menú emergente seleccionar la opción Interpolación de movimiento. Seleccionar la forma vectorial del fotograma número 1 y en el Panel de Transformar ctrl. + T, seleccionar la casilla de Restringir, reajustar el porcentaje en alguna de las casillas Anchura o Altura al 10.0 %.
  • 8. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 8de 26 de la Calidad Ahora seleccionar la forma vectorial del fotograma número 1, en el Panel de Propiedades seleccionar la opción de Color: Alfa y reducir el Porcentaje de 100% a 0%. Para hacer la variante de movimiento en esta animación, seleccionar el fotograma número 1, y en el Panel de Propiedades seleccionar la casilla de Giro: AntiHorario y en la casilla de Número de rotaciones escribir el número 4 veces.
  • 9. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 9de 26 de la Calidad Para conseguir que el óvalo cambie de su color original #00FFFF a otro cualquiera, simplemente seleccionar el óvalo del fotograma número 20 y en el Panel de Propiedades seleccionar la opción Color: Tinta luego seleccionar un color diferente. Regresar a la Escena, hacer visible el Panel de la Biblioteca ctrl. + L y luego arrastrar desde esta el símbolo cuadrado girando y colocarlo en coordenadas X: 25.0 y Y: 25.0.
  • 10. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 10de 26 de la Calidad Ahora arrastrar el símbolo óvalo girando hacia la Escena y colocarlo en coordenadas X: 144.4 y Y: 140.4. Cuando se hace una animación de interpolación de movimiento automáticamente se crean símbolos del Tipo Gráfico no borrar estos símbolos porque la animación se perderá irremediablemente. Presionar ctrl. + Enter y observar la animación que se ha creado. CREACIÓN DE SÍMBOLOS DE TIPO BOTÓN Los símbolos del Tipo Botón son de mucha importancia en las animaciones Flash, con estos botones se puede controlar las animaciones a lo largo de la Línea de tiempo, también puedes enlazar los botones a ubicaciones web, o controlar una pagina web 100 % Flash. En este punto solamente te enfocare en conocer la Línea de tiempo del símbolo Botón, así también se trabajara en el diseño básico de un botón de tres estados Reposo, Sobre y Presionado. El símbolo de Tipo Botón se crea igual que el símbolo Clip de película y símbolo Tipo Gráfico, esto es siguiendo la ruta Insertar >> Nuevo símbolo o presionando en el teclado ctrl. + F8 o haciendo clic en el icono que corresponde para crear un nuevo símbolo en el Panel de Biblioteca.
  • 11. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 11de 26 de la Calidad Luego de haber seguido uno de estos métodos en el Panel de Crear un nuevo símbolo colocar un Nombre que describa al símbolo, después simplemente seleccionar en la opción Tipo Botón. En este caso nombrar al símbolo botón redondo y en la opción Tipo seleccionar Botón. Al Aceptar el paso anterior te colocara en el símbolo de Tipo Botón. La Línea de tiempo de este símbolo difiere en comparación a la del símbolo Clip de película y Gráfico. La Línea de tiempo del símbolo Botón cuanta con cuatroframes, sin embargo, en esta ocasión solamente se utilizan tres de los cuatro frames estos son; Reposo, Sobre y Presionado. En el primer fotogramaReposo, indica que el botón permanecerá en una sola posición y solamente tendrá la propiedad de ser botón en el archivo SWF. El fotograma de Sobre indica que cuando se pasa el cursor sobre el botón este cambiara de posición o color según haya sido diseñado. Y el estado de Presionado te indica que cuando presiones el botón este cambiara también de color o de posición. Estas tres acciones solo son visualizadas cuando el símbolo botón es puesto en la Escena y es publicado en un archivo SWF.
  • 12. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 12de 26 de la Calidad A continuación se diseñara un botón con borde redondeado en el símbolo que ya creaste. Presionar la herramienta rectángulo (R), luego seleccionar la herramienta de establecer Radio de esquina en el Panel emergente de Configuración de rectángulo escribir 10 como Radio de esquina. Una vez que se estableció el Radio de esquina, colocar las propiedades al rectángulo de color. Hacer visible el Panel de Mezclador de colores shift + F9, anular el color de borde, seleccionar como color de relleno un estilo degradado de Tipo Lineal, los colores a usar son #FFFFFF y #000000.
  • 13. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 13de 26 de la Calidad Dibujar un rectángulo de dimensiones 100.0 * 20.0 píxeles de ancho y alto y colocarlo en coordenadas X: 0.0 y Y: 0.0. Insertar un fotograma clave F6 en el segundo Estado de la línea de tiempo (Sobre), seleccionar la forma vectorial de este fotograma y con el Panel de Mezclador de clores aun visible cambiar el Estilo de relleno a Tipo Radial, los colores seguirán siendo #FFFFFF y #000000.
  • 14. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 14de 26 de la Calidad Insertar el tercer fotograma clave F6 en el fotograma Presionado, seleccionar la forma vectorial de este fotograma y con ayuda del Panel de Mezclador cambiar nuevamente el Estilo de relleno a Tipo Lineal.
  • 15. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 15de 26 de la Calidad Insertar una segunda capa en la cual se colocara un Campo de texto estático (T) con la palabra botón prueba, tipo de fuente Arial, tamaño de fuente 14 y color de fuente #FFFFFF, mover este texto a CoordenadasX: 6.6 y Y: 0.2.
  • 16. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 16de 26 de la Calidad Regresar a la Escena y arrastrar desde el Panel de Bibliotecactrl. + L el símbolo botón redondo, presionar ctrl. + Enter y ver como trabaja el botón de tres estados.
  • 17. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 17de 26 de la Calidad ANIMACIÓN CON IMANES IMPORTADAS En este ejemplo se trabajara en la animación de una imagen con color Alfa para simular el desvanecimiento de imagen. La animación estará insertada en un documento con las siguientes Propiedades ctrl. J, dimensiones del documento 300 * 300 píxeles de ancho y alto, color de fondo #FFFFFF y velocidad de fotogramas 15 fps La animación no se trabajara con Interpolación de movimiento porque este tipo de interpolación genera automáticamente dos símbolos de Tipo Gráfico y hace un poco pesado el archivo FLA, mejor se trabajara con una animación de Movimiento en el Panel de Propiedades. Esta animación será descrita a continuación. Primero crear un símbolo ctrl. + F8 llamarlo imagen seleccionar la opción de Tipo Gráfico. Ubicado en el símbolo presionar ctrl. + R en el menú emergente de Importar navegar hasta la carpeta de la imagen. Cuando la imagen haya sido insertada en el símboloimagen clocarla en coordenadas X: 0.0 y Y: 0.0. Importar una imagen que tenga de dimensiones 300.0 * 300.0 píxeles de ancho y alto.
  • 18. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 18de 26 de la Calidad Ahora crear un nuevo símbolo ctrl. F8 y nombrarlo animación de imagen, en la opción Tipo seleccionar la opción de Clip de película. Una vez que te encuentres en el símbolo de Clip de película hacer visible el Panel de Biblioteca ctrl. + L y arrastrar desde esta el símboloimagen hacia el Clip de película, color la imagen en coordenadas X: 0.0 y Y: 0.0.
  • 19. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 19de 26 de la Calidad Seleccionar el frame número 25 e insertar un fotograma clave F6. Seleccionar la imagen de este fotograma y en el Panel de Propiedades seleccionar la opción Color Alfa y después reducir el porcentaje de 100% a 0%.
  • 20. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 20de 26 de la Calidad Seleccionar un fotograma entre el número 1 y el número 24, en el Panel de Propiedades seleccionar la opción Animar Movimiento, y de esta forma quedara insertada la animación. Regresar a la Escena y arrastrar desde la Biblioteca ctrl. + L el símbolo animación de imagen, colocar el símbolo en coordenadas X: 0.0 y Y: 0.0. Presionar ctrl. + Enter y visualizar el trabajo realizado.
  • 21. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 21de 26 de la Calidad Como veras la animación tiene un pequeño salto, para solucionar este problema regresar al símbolo animación de imagen y colocar un fotograma clave F6 en el frame número 50, seleccionar la imanen de este fotograma en el Panel de Propiedades seleccionar Color Ninguno. Seleccionar un fotograma entre el número 25 y el número 49, en el Panel de Propiedades seleccionar la opción Animar Movimiento, y de esta forma quedara insertada una animación más. Volver a presionar ctrl. + Enter y notaras una significativa diferencia en la animación.
  • 22. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 22de 26 de la Calidad ANIMACIÓN DE FORMAS VECTORIALES EN SÍMBOLOS (NO INTERPOLACIÓN DE MOVIMIENTO) No siempre animar formas vectoriales con Interpolación de movimiento es la técnica más apropiada, la primera de las razones es porque tienes que trabajar con dos símbolos de Tipo Gráfico por cada animación que se realiza, y a estas animaciones solamente se puede trabajar con el cambio de color en cualquiera de sus modalidades. Por otro lado cuando quieres hacer una animación en la que se involucre una deformación y al mismo tiempo un cambio de color de una forma vectorial es imposible hacerla con una animación de Interpolación de movimiento, para este tipo de animaciones se utiliza una Animación de Forma en el Panel de Propiedades. A continuación se te guiara paso a paso hasta llegar a conseguir una animación en la se involucre el cambio de color, la deformación de la forma vectorial y después hacer que la forma vectorial se traslade de un lugar a otro. Crear un documento de Propiedades ctrl. + J, dimensiones 500 * 200 píxeles de ancho y alto, color de fondo #CCFFFF y velocidad de fotogramas 15 fps. Luego de que hayas colocado las propiedades del documento, crear un símbolo ctrl. + F8, nombrarlo animación de forma, en la opción de Tipo seleccionar Clip de película.
  • 23. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 23de 26 de la Calidad Ubicado en el símbolo dibujar un Óvalo (O) que no tenga borde y usar como color de relleno #000066 las dimensiones 98.0 * 198.0 píxeles de ancho y alto, colocar la forma dibujada en coordenadas X: 0.0 y Y: 0.0. Insertar un fotograma clave F6 en el frame número 25. seleccionar el óvalo de este nuevo fotograma y cambiar el color de relleno a #FF0000.
  • 24. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 24de 26 de la Calidad Seleccionar un fotograma entre el número 1 y el número 24. En el Panel de Propiedades seleccionar la opción de Animar: Forma. Regresar a la Escena y arrastrar desde el Panel de Biblioteca ctrl. + L el símbolo animación de forma, después colocar el símbolo en coordenadas X: 0.0 y Y: 0.0. Presionar ctrl. + Enter y observar como cambia de color gradualmente el óvalo.
  • 25. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 25de 26 de la Calidad Regresar al símbolo animación de forma asiendo doble clic sobre el icono que representa al símbolo en el Panel de la Biblioteca. Nuevamente ubicado en el símbolo animación de forma, seleccionar la forma vectorial del fotograma número 25, tomar por uno de los extremos a la forma y deformarla un poco. Las coordenadas cambiaran al deformar el óvalo, si deseas puedes colocar nuevamente la forma vectorial en coordenadas X: 0.0 y Y: 0.0. Presionar una vez más ctrl. + Enter y ahora se observara que el óvalo cambia de color y al mismo tiempo este se va deformado en otra cosa.
  • 26. REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5 TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE Sistema de Gestión SOFTWARE Página 26de 26 de la Calidad Para concluir con este objetivo regresar otra vez al símbolo animación de forma luego seleccionar el la forma vectorial del fotograma número 25 y cambiarla de coordenadas en el eje X, la nueva coordenada será X: 500.0. Con esta coordenada te aseguraras que la animación se trasladara hasta a fuera del Escenario. Presionar ctrl. + Enter y ver como queda la animación final en la cual están incluidas tres tipos de animaciones.