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.
-
-
En la primera parte del tutorial te mostramos cómo crear una interpolación de movimiento para animar un símbolo. Las interpolaciones comunes pueden utilizarse para desplazamiento, color, brillo, visibilidad y escala. Pero también podemos interpolar una forma, crear una ruta de movimiento, trabajar con máscaras y modificar la aceleración. Para hablar un poco de las "Escenas" en flash, aprovecharemos la ocasión para mostrar estas cuatro opciones de animación en diferentes escenas. Eso es lo que veremos a continuación.
Creando Escenas:
- Abre un nuevo documento en Flash.
- Asegúrate de tener el panel de "Escena" a la derecha. (Si no lo ves, ve al menú superior, "Ventana" > Otros Paneles > Escena o presiona Shift+F2)
- Pincha en el signo + en el panel de Escena. Verás que aparecerá una nueva línea en el panel (Escena 2). Sigue agregando escenas hasta que tengas 5.
- Haz doble clic sobre cada escena (en el panel de Escena) para cambiarles el nombre. Nosotros usaremos los siguientes: Inicio, Forma, Ruta, Máscara y Aceleración (para 1, 2, 3, 4 y 5 respectivamente)
Nota: Las escenas pueden cambiarse desde el panel de Escena o desde el icono de claqueta en la parte superior derecha de la línea de tiempo.
-
Agrega 4 escenas al documento flash
-
Renombra las escenas para que te sea más fácil manejarlas
Si no configuramos ningún tipo de acción, la película Flash (una vez exportada) pasará automáticamente a la escena siguiente una vez que cubra los fotogramas activos de cada una. Para establecer una navegación interactiva, tendremos que poner la acción "Stop" en el fotograma final de cada escena. Luego, para operar la navegación, podemos crear un solo botón de "siguiente" para pasar a otra escena o podemos crear un menú de navegación con 5 botones. Ten en cuenta que estos botones tendrán que repetirse en todas las escenas, por lo que es conveniente configurarlos por completo desde el comienzo y luego, simplemente, copiarlos y pegarlos en cada escena. Sabemos que tenemos cinco escenas, así que vamos a crear cinco botones para la navegación (Crea un botón con el texto en una capa separada y luego duplícalo cuatro veces y sólo tendrás que cambiar la capa de texto de cada botón)
Estableciendo la navegación entre Escenas:
- Ubica los 5 botones en la Escena 1 (Inicio)
- Agrega un Stop en el primer fotograma para que la película no salga del Inicio sin presionar un botón. (Pincha sobre el primer fotograma, ve al panel de Acciones (F9), clic en Stop o Esc-st)
- Pincha en un área libre del escenario para deseleccionar los elementos y pincha sobre el primer botón (Inicio)
- Agrega una acción de "GotoandPlay" (En el panel de Acciones (F9) selecciona Funciones globales > Control de línea de Tiempo > goto ó presiona las teclas esc-go)
- Pincha sobre "GotoandPlay" en el código y en la parte superior (si no ves campos arriba, presiona donde dice "Asistente de script"), donde dice Escena: elige "Inicio"
- Repite los pasos 4 y 5 con el resto de los botones, eligiendo la escena que le corresponde a cada botón (El código de cada botón debe decir "GotoandPlay("Escena correspondiente", 1);" en la línea 2)
-
Pon un Stop en el primer fotograma de la Escena 1
-
En cada botón, pon un "GotoAndPlay" a la escena que le corresponda
Ahora que ya tenemos todos los botones configurados, tenemos que ponerlos en cada una de las escenas.
- Pincha sobre el fotograma 1 y presiona las teclas Ctrl+Alt+C (copia el contenido del fotograma con acción y todo)
- Ve a otra escena, pincha en el fotograma 1 y presiona las teclas Ctrl+Alt+V. Se pegarán los botones (con sus acciones) en el mismo lugar que en la primera escena. Borra la acción sobre el fotograma (Pincha sobre el keyframe, luego sobre el Stop en el panel de Acciones y presiona Supr)
- Repite el paso 2 en cada escena restante
Ya tenemos las escenas, los botones y la navegación establecida. Empecemos con las animaciones
Interpolación de Formas:
Las interpolaciones de forma se hacen de una manera un poco diferente al resto de las animaciones. En primer lugar, sólo funcionan con formas vectoriales. Esto quiere decir que no funcionará con símbolos. Al contrario de las interpolaciones comunes (que conviene realizarlas con símbolos para evitar objetos duplicados y errores), una animación de forma tiene que hacerse con un dibujo no convertido en símbolo. En segundo lugar, la animación no se realiza con el botón derecho del ratón sobre los fotogramas y la opción "Interpolación de movimiento" sino desde el panel de propiedades. Veámoslo paso a paso.- Ve a la Escena "Forma"
- Crea una nueva capa en la línea de tiempo y traza una forma en el primer fotograma (de la 2da capa) con la herramienta que prefieras de la barra. Nosotros usaremos el óvalo.
- Pon un keyframe (F6) en el fotograma 15 y otro en el fotograma 30 de la segunda capa. (Utilizaremos 3 keyframes para transformar tres formas diferentes).
- Pincha sobre el fotograma 15 (2da capa) y traza una forma diferente (reemplaza la forma anterior). Nosotros usaremos un cuadro.
- Pincha sobre el fotograma 30 (2da capa) y traza una tercera forma (reemplaza la forma anterior). Nosotros usaremos un triángulo.
(Siendo formas vectoriales, toda forma que traces en Flash tendrá nodos. Si quieres hacer una forma diferente a las predeterminadas en la barra de herramientas, sólo tienes que elegir la flecha blanca y editar los nodos)
- Ahora que ya tenemos nuestras tres formas (una en cada keyframe) sólo nos queda realizar la interpolación;
- Pincha en cualquier fotograma entre 1 y 15 (2da capa).
- En la parte inferior de la pantalla, en el panel de Propiedades, verás la opción "Animar" con un menú desplegable. Pincha en la flecha y elige la opción "Forma".
Verás que los fotogramas se pintarán de verde con una flecha, eso indica que hay una interpolación de forma (las de movimiento son lila).
- Pincha en cualquier fotograma entre 15 y 30 (2da capa) y repite los pasos en 8.
- Pon un keyframe en el fotograma 30 de la primera capa (para tener los botones en todo momento) y pon un Stop en ese keyframe.
-
Traza un círculo en una 2da capa (no lo conviertas a símbolo)
-
Agrega un keyframe en el fotograma 15 y traza un cuadro
-
Agrega un keyframe en el fotograma 30 y traza un triángulo
-
Pincha entre dos keyframes y ve a: Animar > Forma en el panel de Propiedades
Así queda una interpolación de forma
Si quieres ir viendo como va quedando, presiona las teclas Ctrl+Enter y pincha el botón "Forma" en el swf que se abre.
- Abre un nuevo documento en Flash.
-
¿Y tú, qué opinas?
-
#1
-
#2
-
#3
-
#4
-
#5
-
#6
-
#7
-
#8juan7 jueves, 02 de julio de 2009, 21:08
Bueno ya estoy impaciente cuando sale el manual de flash con actionscript, y suerte para los que hacene stos manuales xq estan paja
-
#9
-
#10
-
Cargando...
-
nuevo comentario
Nombre Campo obligatorio
Email Escriba una dirección de correo electrónico con el formato sunombre@ejemplo.com.
Campo obligatorio
-
