Sugerencia rápida cree un SandClock minimalista utilizando ActionScript 3

Lea los sencillos pasos de este Consejo rápido para crear un SandClock minimalista con ActionScript..


Vista previa del resultado final

Echemos un vistazo al resultado final en el que trabajaremos:


Paso 1: Breve descripción

Usando Arrays y un MovieClip cuadrado previamente creado, crearemos un SandClock que será animado por un Timer..


Paso 2: Configura tu archivo flash

Inicie Flash y cree un nuevo documento de Flash, establezca el tamaño del escenario en 400x250px y la velocidad de fotogramas en 24 fps.


Paso 3: Interfaz

Esta es la interfaz que usaremos, los cuadrados de la imagen son en realidad un único clip de película cuadrado azul exportado para su uso con ActionScript, con un nombre de enlace de Cuadrado. Un simple botón llamado botón de inicio Se utilizará para construir y poner en marcha el reloj..


Paso 4: ActionScript

Cree una nueva clase de ActionScript (Cmd + N), guarde el archivo como Main.as y escribe las siguientes líneas. Lea los comentarios en el código para comprender completamente el comportamiento de la clase..

 paquete import flash.display.Sprite; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.MouseEvent; clase pública Main extiende Sprite private var clockArray: Array = [15,13,11,9,7,3,1]; // Almacena el número de cuadrados por línea private var top: Array = []; // mantendrá los cuadrados en la parte superior del contenedor var de sandclock private: Sprite = new Sprite (); // almacena todos los movieclips private var containerCopy: Sprite = new Sprite (); // duplicará la parte superior para hacer que el temporizador var inferior privado: Temporizador = nuevo Temporizador (1000); // un temporizador ejecutado cada segundo contador var privado: int = 0; // contará los segundos, utilizados para detener la función pública del temporizador Main (): void startButton.addEventListener (MouseEvent.MOUSE_UP, buildClock); // un oyente en el botón de inicio buildClock privada (e: MouseEvent): void startButton.removeEventListener (MouseEvent.MOUSE_UP, buildClock); // desactiva el botón startButton.enabled = false; var clockLength: int = clockArray.length; / * este doble para exploraciones a través de la longitud de la matriz del reloj Y el valor de cada elemento de la matriz, creando 7 líneas (longitud) de cuadrados con 15, 13, 11 (valor del elemento) y así sucesivamente * / para (var i: int = 0; yo < clockLength; i++)  for (var j:int = 0; j < clockArray[i]; j++)  var s:Square = new Square(); var sc:Square = new Square(); s.x = 70.5 + (s.width * j) + (1 * j) + (i * (s.width + 1)); s.y = 84.5 + (s.height + 1) * i; sc.x = s.x; sc.y = s.y; if (i >= 5) s.x = 70.5 + (s.width * j) + (1 * j) + (i * ((s.width) + 1)) + (s.width * 2 - 4); sc.x = s.x;  container.addChild (s); containerCopy.addChild (sc); // crea una copia para la parte inferior top.push (s); sc.alpha = 0.2; // hace que la parte inferior sea semi transparente addChild (contenedor); containerCopy.x = 225; // posiciona y rota la parte inferior containerCopy.y = 247; containerCopy.rotation = 180; addChild (containerCopy);  timer.addEventListener (TimerEvent.TIMER, startClock); // iniciar el timer timer.start ();  / * esta función se ejecuta cada segundo, cambia el alfa del cuadrado correspondiente para hacer el efecto de arena. cuando se termina, detiene el temporizador y llama a una función * / private function startClock (e: TimerEvent): void container.getChildAt (counter) .alpha = 0.2; containerCopy.getChildAt (counter) .alpha = 1; contador ++; // 60 segundos si (contador> = 59) timer.stop (); timer.removeEventListener (TimerEvent.TIMER, startClock); timeComplete ();  función privada timeComplete (): void // hacer algo aquí

Puede ajustar el temporizador y el mostrador Valor para aumentar o reducir la duración del reloj de arena..


Paso 5: Clase de documento

Recuerde agregar el nombre de la clase a la Clase campo en el Publicar sección de la Propiedades panel.


Conclusión

¿Por qué no utilizar este SandClock para darle un toque agradable a tu aplicación o juego??

Espero que te haya gustado este tutorial, gracias por leer.!