lunes, 09 de noviembre de 2009
Ayúdanos a crecer, haz NeoTeo tu página de inicio RegistrarseIniciar sesión

Páginas:

Curso de Flash: Flash Básico (II)

Por: Constanza Villanueva  @  viernes, 04 de julio de 2008  Nota vista 27990 veces

Seguimos cubriendo las bases de Flash para principiantes. En el tutorial anterior vimos el entorno del programa, cómo crear símbolos (gráficos, botones y clip de película), cómo hacer transiciones simples y colocar acciones de reproducción y detención. En esta segunda parte del tutorial, indagaremos más en los diferentes tipos de animación y escenas.

¿te interesa?
82 -11
93 votos

Guía de Movimiento:
Las guías de movimiento sirven para que un símbolo realice un movimiento no lineal. Es decir, para que siga una ruta específica sin tener que marcar un nuevo keyframe para cada posición.

  1. Ve a la Escena "Ruta"
     
  2. Crea una nueva capa en la línea de tiempo.
     
  3. Crea un símbolo de gráfico y traza una forma dentro.
     
  4. Pincha sobre el primer fotograma de la segunda capa y arrastra el gráfico a la escena.
     
  5. Pon un Keyframe en el fotograma 30 (2da capa) y mueve el gráfico a la posición que tendrá al final del trayecto.
     
  6. Crea una interpolación de movimiento para el gráfico (clic derecho sobre los fotogramas intermedios "Interpolación de movimiento")
     
  7. Haz clic derecho sobre la segunda capa y elige la opción "Añadir guía de movimiento".
    Verás que aparecerá una nueva capa con el nombre "Guía: Capa 2"
     
  8. Pincha sobre el primer fotograma de la capa "Guía" y pincha en el Lápiz de la barra de herramientas.
     
  9. Ubica el lápiz en el centro de tu gráfico y realiza el trazo que gustes (en curva, zigzag, como prefieras).
    El trazado de la guía será invisible cuando exportes la película de flash
     
  10. Pincha sobre el fotograma 30 de la segunda capa (que tiene el gráfico) y arrastra el gráfico al extremo final del trazo.
    (Mientras muevas el gráfico, éste tendrá un círculo en medio, ese círculo central tiene que estar al final de la línea)
     
  11. Pon un keyframe en el fotograma 30 de la primera capa (los botones) y pon un Stop en ese keyframe.

 

Pon un gráfico en una capa nueva
Agrega un Keyframe en 30, mueve el gráfico, crea una interpolación y añade una guía de movimiento
Pincha el primer fotograma de la Capa "Guía" y traza un trayecto con el lapiz
Pincha el fotograma 30 y arrastra el gráfico hasta el final del trazo

Animaciones con máscaras:
Las máscaras sirven para cubrir o descubrir partes de una imagen, es decir, para enmascarar. Un ejemplo del uso de una máscara puede ser simular un efecto de spotlight (haz de luz) que va revelando partes de un fondo a medida que se mueve.

  1. Ve a la Escena "Máscara"
     
  2. Crea una nueva capa.
     
  3. Pincha en la herramienta de Texto ("A") en la barra de herramientas.
     
  4. Pincha en el primer fotograma de la Capa 2 y escribe un texto de más de cuatro palabras de extensión.
     
  5. Crea una nueva capa (capa 3). Pincha en el primer fotograma y arrastra el gráfico que creaste para la animación anterior. Ubica el gráfico sobre el texto, cubriendo las primeras letras.
     
  6. Pincha en el fotograma 30 de la Capa 3 y, sin soltar el botón del ratón, arrastra hacia abajo para seleccionar las tres capas. Pincha F6 para que se agregue un keyframe en cada capa.
     
  7. Pincha en el fotograma 30 de la Capa 3, mueve el gráfico hasta el final del texto escrito y crea una interpolación de movimiento.
     
  8. Haz clic derecho sobre la Capa 3 y elige la opción "Máscara".
    (El texto se volverá "invisible" y el gráfico se transformará en una "ventana" al gráfico)
     
  9. Pincha en el fotograma 30 de la primera capa (botones) y agrega un Stop en ese keyframe
     
Escribe un texto en una nueva capa
Pon un gráfico sobre el texto en una tercera capa
Pon un Keyframe en 30, mueve el gráfico al final de texto y crea una interpolación
Clic derecho sobre la capa del gráfico (Capa 3) y elige "Máscara"

Aceleración de las animaciones:
Hasta ahora, cuando hablamos de las interpolaciones no describimos las opciones que aparecen en el panel de Propiedades de la animación. Podemos hacer que el movimiento empiece lento y se vaya acelerando o viceversa o que el gráfico vaya rotando.

  1. Ve a la Escena "Aceleración"
     
  2. Crea 3 capas nuevas 
    (Si el gráfico creado anteriormente es un círculo como el nuestro, crea un símbolo gráfico adicional con un cuadro - para que la rotación sea perceptible)
     
  3. Arrastra un gráfico al primer fotograma de cada capa nueva (2, 3 y 4). Ubícalos separados, a la izquierda del escenario.
     
  4. Pon un keyframe en el fotograma 30 de todas las capas. Pincha en el fotograma 30 de las capas 2, 3 y 4 y ubica a los gráficos a la derecha. Crea una interpolación de movimiento en las tres capas.
     
  5. Pincha en el primer fotograma de la Capa 2. En el panel de Propiedades, en la opción "Aceleración:" (debajo de "Animar") mueve el indicador hacia arriba (debe quedar "100 fuera")
     
  6. Pincha en el primer fotograma de la Capa 3. En el panel de Propiedades, en la opción "Aceleración:" mueve el indicador hacia abajo (debe quedar "-100 dentro")
     
  7. Pincha en el primer fotograma de la Capa 4. En el panel de Propiedades, en la opción "Girar:" (debajo de "Aceleración") elige "horario" o "antihorario" y en el campo de al lado pon la cantidad de veces que debe girar.
    (Usa un gráfico con aristas para notar la rotación)
     
  8. Pincha en el fotograma 30 de la primera capa (botones) y agrega un Stop en ese keyframe.

 

Crea 3 capas nuevas y agrega un gráfico en cada una
Crea interpolaciones entre 1 y 30, pincha en 1 de la Capa 2 y sube la aceleración a 100 en Propiedades
Pincha en el fotograma 1 de la Capa 3 y baja la aceleración a -100 en Propiedades
Pincha en el fotograma 1 de la Capa 5 y, en Propiedades, elige "Horario" en la opción girar

Ahora que tenemos todas las escenas completas, podemos exportar nuestra película. Presionando Ctrl+Enter podemos previsualizar el resultado y se generará un fichero .swf (película activa) en el directorio donde hayamos guardado el .fla (fichero de edición de la película). Pero para configurar las opciones y exportar correctamente la película, debemos publicarla:

  1. Ve al menú superior y presiona Archivo > Configuración de Publicación
     
  2. En la primera solapa (Formatos) puede elegir si quieres publicarlo como un ejecutable (exe), como imagen o como película. La opción HTML genera un fichero html con el swf ya insertado en el código.
     
  3. En la segunda solapa (Flash) puedes elegir en qué versión de Flash exportar la película (las versiones se corresponden con los plugins de Flash). Puedes proteger tu swf con una clave y configurar la calidad del fichero. Dependiendo de las opciones elegidas en Formatos tendrás más o menos solapas de configuración.
     
  4. Pincha “Publicar” para generar los ficheros y luego Aceptar para conservar la configuración.

Nota: Dependiendo de lo que quieras hacer en tu documento Flash, te convendrá hacer las animaciones directamente en la escena (para pocos elementos/animaciones) o dentro de un Clip de Película (si vas a usar muchos elementos/animaciones).

Todos los tipos de animación pueden combinarse a gusto para lograr muchísimos resultados diferentes y se le pueden agregar diferentes acciones, dependiendo de lo que queramos lograr. En el próximo tutorial comenzaremos a indagar en acciones un poco más avanzadas, ActionScript y el uso de textos dinámicos.
 


Anterior
Escenas y animación de formas
Artículo Siguiente
Wawi: Controla Winamp de forma remota
Artículo Anterior
Nanocables para almacenamiento trinario
CopyRight
Prohibida su copia total con o sin fines comerciales. Copias parciales deben citar la fuente.

 

URL Trackback para esta noticia:
Votos: 3 de 3
victor26
victor26
victor26
04/07/2008
5:46:43
#1   Tengo entendido que este programa es unos de los mejores en el mercado. yo lo uso para ciertas animaciones basicas, pero estoy interesado en concluir un buen curso.

vic.
     Responder 
Votos: 0 de 0
Connie
Connie
Connie
09/07/2008
2:17:35
#1   Efectivamente es una herramienta muy útil y con un amplio espectro de aplicaciones. Una vez que cubramos las bases con el curso comenzaremos a indagar en funciones más específicas y el uso de ActionScript.
     Responder 
Votos: 0 de 0
Patricia Pilar
Patricia Pilar
Patricia Pilar
04/07/2008
6:59:27
#2   Muy buen manual. Muchas gracias
     Responder 
Votos: 1 de 1
Constanza Villanueva
Constanza Villanueva
Constanza Villanueva
09/07/2008
2:18:59
#1   Estate atenta a las próximas entregas Patricia, seguramente te serán de utilidad. Saludos!
     Responder 
Votos: 0 de 0
CINTHIA
CINTHIA
CINTHIA
12/09/2008
17:31:13
#3   Hola agradesco por todos estos tutoriales en verdad son buenisimos y espero sigan subiendo este tipo de documentos ya que son muy utiles mil gracias.
     Responder 
Votos: 0 de 0
any
any
any
18/10/2008
23:08:37
#4   esta inf. me sirvio de mucho tenkiu
     Responder 
Votos: 0 de 0
fernando
fernando
fernando
05/11/2008
18:00:19
#5   muy buno estos tutoriales felicitaciones

y
me puede decir ya cuando tengo todo el proyecto
como le realizo ejecutable...
osea para ya tener en un cd


porque tengo creado en partes
y no se como unirlas


gracias
     Responder 
Votos: 0 de 0
kenetmarck
kenetmarck
kenetmarck
02/07/2009
21:08:21
#6   Bueno ya estoy impaciente cuando sale el manual de flash con actionscript, y suerte para los que hacene stos manuales xq estan paja
     Responder 
Votos: 0 de 0
reeye152
reeye152
reeye152
11/09/2009
18:54:36
#8   hola men muy bueno tu tuto aunque no en la parte de los pasos 4 5 6 (los primeros)
no los entendiendo ademas yo no tengo esas opciones que ti enes tu en el planel de control ._. si me podrias ayudar tengo el macromedia flash mx 2004
     Responder 
 
 
Datos  Login Registrarse
Usuario
   
Email
Website
 
Nuevo comentario:


Tags HTML permitidos: br
 

Síguenos en TwitterAgréganos a tu RSS

 

 

Autores