Tutorial Adobe Flash CS3. Animación Llenar Con Agua Un Vaso. En esta ocasión te expondré un tutorial en el cual explico como hacer una animación, en esta animación se simula que se esta llenando de agua un vaso. Para hacer este trabajo basta con aplicar animaciones de Tipo Forma, aplicar en una capa la opción de Máscara. Para hacer más sencillo y fácil el tutorial todo el traba lo e realizad en la Escena con el fin de no tener que involucrar símbolos de Tipo Grafico y/o Clip de película. Esta animación No necesita una sola línea de Código ActionScript. Sin mas preámbulos y como la practica hace al maestro ¿COMENZAMOS? 
Good Luck!
1-. Comenzar por colocar las diferentes Propiedades ctrl. + J (tamaño del documento, color de fondo y velocidad de fotogramas).
a). Las dimensiones para este documento serán 550 * 400 píxeles de ancho y alto respectivamente.
b). Colocar como color de fondo #FFFFFF, sin embargo, puedes usar cualquier otro color de fondo.
c). En la casilla que indica la Velocidad de fotogramas colocar el número 12 fps.
2-. Como la te fue mencionado al principio el total de la animación será realizada en la Escena del documento Flash CS3. Lo primero que tienes que hacer es cambiar el nombre a la capa (vaso), esto con el fin de saber en donde esta ubicado cada uno d los elementos que con forman la animación.
a). Proceder a dibujar el recipiente (vaso) que servirá como contendedor de la supuesta agua, en esta ocasión simule dibujar un vaso con las herramientas de óvalo y línea. Sin embargo, tú te puedes ayudar de las diferentes herramientas de dibujo (pluma, lápiz o pincel).
b). El vaso dibujado tiene como propiedades, color de trazo #000000 y altura de trazo 3 (grosor de línea)
c). Las dimensiones que coloque al dibujo son de 100.0 * 133.0 pixeles de ancho y de alto. Colocar el dibujo en el centro de la Escena.
3-. Seleccionar el Fotograma número70 y en el Insertar un fotograma F5, tal y como se muestra en la imagen.
4-. Insertar una nueva capa por debajo de la capa vaso y cambiarle el nombre por el de chorro agua. En esta capa estará insertada la animación del chorro de agua.
a). Insertar un Fotograma clave F6 en el fotograma número 10. En este fotograma dibujar un rectángulo con la Herramienta rectángulo.
b). Las propiedades de este rectángulo son: color de relleno #99CCFF y el rectángulo carece de trazo de línea, las dimensiones son 8.0 * 15.0 píxeles de ancho y alto.
c). Colocar el rectángulo en la parte superior de la Escena, pero quedando al centro del vaso.
5-. Seleccionar el fotograma 22 de la capa chorro agua y en el insertar un Fotograma clave F6.
a). Como puedes observar se inserto nuevamente el rectángulo, cambiar las dimensiones de alto a 280.0 píxeles de alto. O si tu recipiente posee otras dimensiones hacer que el rectángulo alcance el fondo del vaso, tal y como se muestra en la imagen.
6-. Insertar una nueva capa por de bajo de la capa chorro agua, colocar a esta nueva capa el nombre de máscara.
a). Seleccionar el fotograma número 22 y en el insertar un Fotograma clave F6. Con la ayuda de la herramienta rectángulo dibujar un rectángulo que cubra la totalidad del vaso tanto a lo ancho como a lo alto.
b). El color de relleno de este rectángulo es #99CCFF, este rectángulo también carece de color de línea.
c). Colocar el rectángulo dibujado en la parte inferior del vaso, justo en donde empieza el dibujo del vaso tal y como se muestra en la imagen.
7-. Insertar un Fotograma clave F6 sobre el fotograma número 27.
a). Subir unos 10 o 20 pixeles el rectángulo de este fotograma, luego hacer una pequeña deformación en la parte superior del rectángulo.
8-. Insertar otro Fotograma clave F6 en el fotograma número 35.
a). Mover nuevamente hacia arriba de 10 a 15 píxeles el rectángulo, y modificar un poco la parte superior del rectángulo.
9-. Insertar un fotograma clave F6 en el fotograma número 45 de la capa máscara, y modificar nuevamente la parte superior del rectángulo.
10-. Insertar el último fotograma clave F6 en el fotograma número 48, y adaptar la parte superior de este rectángulo a la forma que pose el borde del vaso.
Descarga Archivo FLA CS3 De Este Tutorial
Visualizar Archivo SWF De Este Tutorial
Artículos relacionados:
[...] Parte uno [...]