Tutorial Adobe Flash CS3. Animación Llenar Con Aguan Un Vaso Con Botones De Cerrar Y Abrir El Grifo. En esta ocasión te expondré una tercera parte del tutorial animación llenar con agua un vaso, esta idea surgió de Karen González Madrid ella me autorizo a que hiciera y publicara este tutorial. Aquí explico como hacer un símbolo con la aplicación de botón y posteriormente colocarle unas cuantas líneas de código ActionScript 2.0 y de esta forma hacer que la animación se detenga e inicie a nuestra voluntad. 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. Sin mas preámbulos y como la practica hace al maestro ¿COMENZAMOS? 
Good Luck!
Como ya te mencione al principio este tutorial parte de un trabajo ya realizado, aquí las partes del tutorial anterior.
1)-. Para hacer este nuevo tutorial, comenzar por crear un nuevo símbolo (ctrl. + F8).
a)-. Colocarle como nombre al símbolo (botón estandar).
b)-. En la opción tipo seleccionar (Botón).
2)-. Ubicado en el símbolo (botón estandar), hacer un pequeño diseño de un botón de tres estados. En esta ocasión te mostrare como hacer un botón rectangular con bordes redondeados.
a)-. Hacer clic en el icono de la herramienta rectángulo.
b)-. Luego en el menú desplegado seleccionar la opción (Herramienta Rectángulo simple).
3)-. Seleccionada la herramienta. Proceder a colocarle las propiedades al rectángulo a dibujar.
a)-. El rectángulo debe de estar sin color de borde y colocar como color de relleno el color azul con efecto de relleno radial.
b)-. Las dimensiones del rectángulo son de 200.0 * 30.0 píxeles de ancho y de alto.
c)-. Colocar la forma vectorial dibujada en coordenadas X: 0.0 Y: 0.0.
d)-. Para terminar con las propiedades del rectángulo colocar el número 10 en la casilla de (Radio de la esquina del rectángulo).
4)-. Insertar en la posición sobre de la línea de tiempo un fotograma clave (F6).
a)-. A este rectángulo cambiarle el color de relleno por el color rojo con efecto radal.
b)-. Posteriormente colocar el número 0 en la casilla de (Radio de la esquina del rectángulo).
5)-. Insertar un tercer fotograma clave (F6) en la posición (Presionado).
a)-. Cambiar el color de relleno al rectángulo por el de verde con efecto radial.
b)-. Luego colocar nuevamente el número 10 en la casilla de (Radio de la esquina del rectángulo).
Con esto queda establecido un pequeño diseño de un botón de tres estados con bordes redondeados
6)-. Ahora comenzar a colocar las líneas de código ActionScript 2.0, primero regresar a la Escena en donde esta la animación, si no has hecho la animación aquí puedes (descargar el archivo fla) del trabajo anterior.
a)-. Colocado en la Escena seleccionar la capa de nombre (vaso), y hacer clic sobre el fotograma # 1.
b)-. Luego abrir el panel de (Acciones – fotograma) y escribir.
stop();
7)-. Ubicado en la misma capa (vaso), abrir el panel la Biblioteca (ctrl. + L).
a)-. Arrastrar desde la biblioteca el símbolo (botón estandar), hacia la Escena.
b)-. Colocar este símbolo en coordenadas X: 23.0 Y: 340.0.
8)-. En este paso seleccionar la forma vectorial no el fotograma.
a)-. Abrir el panel (Acciones- botón) y escribir.
on (release) {
play();
}
9)-. Arrastrar nuevamente desde la biblioteca (ctrl. + L) el símbolo (botón estandar).
a)-. Colocar el símbolo en coordenadas X: 330.0 Y: 340.0.
10)-. Seleccionar este nuevo símbolo no el fotograma.
a)-. En el panel de (Acciones – botón) escribir el código.
on (release) {
stop();
}
11)-. Para concluir con estas pequeñas modificaciones solo falta insertar dos textos en el rectángulo de la izquierda escribir un (PLAY) y en el rectángulo de la derecha escribir (STOP).
Con este paso se da por concluido el trabajo. Well done!
Nota: si se llega a presentar un error en la animación es debido a que no tienes configurado la versión de ActionScript 2.0. Para solucionar este pequeño inconveniente.
a)-. Hacer visible el panel de (Configuración de publicación Ctrl. + J).
b)-. Luego dar clic en a casilla de (Versión de ActionScript).
c)-. Después simplemente seleccionar la opción de (ActionSctipt 2.0) y aceptar los cambios de la configuración.
P.D. presionar ctrl. + Enter para visualizar el trabajo. Como te puedes dar cuanta la animación no comienza avanzar hasta que das clic en el botón de PLAY y puedes parar la animación si das clic en el botón de STOP. Se agradecen de antemano los comentarios que en este tutorial se puedan exponer y así todos aprender. Gracias por visitar esta Web y hasta pronto
Descarga Archivo FLA De Este Tutorial
Visualizar Archivo SWF De Este Tutorial
Artículos relacionados:
