Comunidad de diseño web y desarrollo en internet online

Aprende a bailar salsa con ActionScript 3

Muchos no sabemos bailar salsa o se nos hace un mundo aprender a mover los pies y cuerpo al ritmo de la música. Es usual en algunos casos pero también hay grandes excepciones. Con este primer curso aprenderás a bailar salsa desde la perspectiva de un desarrollador, obteniendo un algoritmo capaz de cumplir un patrón del paso que realizaremos para luego usarlo con actionScript. En esta ocasión mostraremos el paso básico, el primer paso que debes aprender si quieres bailar salsa lineal. Debo aclarar que no soy un experto en el baile (ver vídeo para corroborar) pero la intención es divertirnos y aprender un poco de código.

No pude hacer este tip sin la necesidad de mostrarles lo que vamos a hacer, así que grabé un vídeo donde explico el paso básico, el patrón base, los subPatrones (C, B, A), para luego continuar con el algoritmo que nos ayude a implementarlo. Por su seguridad, aleje a los niños y personas con alteraciones cardíacas antes de ver el vídeo.








Listo! como habrán 'apreciado' en el vídeo, todo está explicado, es hora de pasarlo a actionScript. Para eso, crearemos un timer que me permita definir la velocidad de los pasos, o lo que llamé el Patrón "C". Para eso implementaré una clase que extienda de Timer y nos permita controlarlo sin depender de la clase principal:

Código :

package com.ini4.salsa.utils
{
   import com.ini4.salsa.events.SalsaEvents;
   
   import flash.events.TimerEvent;
   import flash.utils.Timer;
   
   public final class SalsaTimerControl extends Timer
   {
      
      private var $__delayS:Number;
      
      public function SalsaTimerControl(delay:Number, repeatCount:int=0)
      {
         super(delay, repeatCount);
         this.$__delayS = delay;
         this.addEventListener(TimerEvent.TIMER, onTimer, false, 0, true);
      }
      
      private function onTimer(e:TimerEvent = null):void{
         SalsaEvents.getInstance().step = true;
      }
      
      override public function start() : void{
         super.start();
      }
      
      
   }
}


La clase SalsaTimerControl, nos dará el control de la velocidad o ritmo que usaremos al bailar, la tengo implementada en una clase aparte para poder seguir con las siguientes lecciones o pasos en un futuro.

Ahora, lo que haremos es crear una clase SalsaEvents que nos permita poder disparar los eventos que requiramos, en este caso cuando el timer nos avise el cambio de paso, esta clase nos ayudará también en el resto del curso.

Código :

package com.ini4.salsa.events
{
   import flash.events.Event;
   import flash.events.EventDispatcher;
   
   public class SalsaEvents extends EventDispatcher
   {
      private static var $__instance:SalsaEvents;
      public static const SHOW_STEP:String = "showStep";
      private var $__step:Boolean;
      
      public function SalsaEvents(e:Enforce){      }
      
      public static function getInstance():SalsaEvents{
         if($__instance==null)$__instance = new SalsaEvents(new Enforce());
         return $__instance;
      }
      
      public function set step(b:Boolean):void{
         $__step = b;
         dispatchEvent(new Event(SalsaEvents.SHOW_STEP));
      }
   }
}
class Enforce{}


Cuando la clase SalsaTimerControl dispare un evento TimerEvent.TIMER, este avisará a la propiedad step el update y este, a su vez, disparará SalsaEvents.SHOW_STEP que será escuchado por nuestra clase principal del paso básico.

Al inicio, fue fácil hacer el paso porque me basé en if y usando un contador definía cuando lanzar el paso, muy simple pero efectivo, lo dejé en la clase para los que recién empiezan puedan tener una referencia simple.

Código :

//private static const PASS_TIME:Array = [1,2,3,5,6,7];
//private var cont:int = 0;
...

//if(cont==0)p1.play();
//   if(cont==1 || cont==5)p4.play();
//   if(cont==2 || cont==4)p3.play();
//if(cont==3)p6.play();


Muy bien, defino mis propiedades

Código :

private static const FOOT_RIGHT:String = "footRight";
private static const FOOT_LEFT:String = "footLEFT";
private var timer:SalsaTimerControl;


En mi constructor defino el listener que estará atento a los cambios del timer y el constructor de la clase timer

Código :

SalsaEvents.getInstance().addEventListener(SalsaEvents.SHOW_STEP, foo, false, 0, true);
timer = new SalsaTimerControl(500);
timer.start();


Y cuando el listener sea disparado, ejecutará este método

Código :

//PATRON B
var step:Boolean = (   ((timer.currentCount-1)%3)==0)?true:false;  
 
//PATRON C
var foot:Boolean = (   (((timer.currentCount-1)%2)==0)?true:false);

//PATRON B + PATRON C == PATRON A
//adelante atras
if(((step==true) && (foot== true))) p1.play();
else if(((step==true) && (foot== false))) p6.play();
//centro centro
else if(((step==false) && (foot== false))) p4.play();
else if(((step==false) && (foot== true))) p3.play();
else
   throw new Error("me falta un 3er pie");

campo.text =  (foot)?FOOT_LEFT:FOOT_RIGHT;   


Para el patrón B, lo que hago es obtener el módulo de 3 segun el currentCount esto nos define el pie adelante o atras

eldervaz :

adelante <aquí el módulo es 0
centro
centro
atrás <aquí el módulo es 0
centro
centro


Para el patrón C, es obtener true y false que son los pies moviéndose constantemente

eldervaz :


izquierda
derecha
izquierda
derecha


Y para obtener el patrón A, solo tienes que sumar ambos y comparar... tal como expliqué en el video

Código :

if(((step==true) && (foot== true))) p1.play(); //PIE IZQUIERDO
else if(((step==true) && (foot== false))) p6.play(); //PIE DERECHO
else if(((step==false) && (foot== false))) p4.play();//CENTRO
else if(((step==false) && (foot== true))) p3.play();//CENTRO
else
   throw new Error("me falta un 3er pie");


Y listo, el código completo está aquí

Código :

package com.ini4.salsa
{
   import com.ini4.salsa.events.SalsaEvents;
   import com.ini4.salsa.utils.SalsaTimerControl;
   
   import flash.display.Sprite;
   import flash.events.Event;
   
   public class ClassSalsa extends Sprite
   {   
      //private static const PASS_TIME:Array = [1,2,3,5,6,7];
      //private var cont:int = 0;
      private static const FOOT_RIGHT:String = "footRight";
      private static const FOOT_LEFT:String = "footLEFT";
      private var timer:SalsaTimerControl;
      
      public function ClassSalsa()
      {
         super();
         SalsaEvents.getInstance().addEventListener(SalsaEvents.SHOW_STEP, foo, false, 0, true);
         timer = new SalsaTimerControl(500);
         timer.start();
      }
      
      private function foo(e:Event):void{         
         //PATRON B
         var step:Boolean = (   ((timer.currentCount-1)%3)==0)?true:false;  
          
         //PATRON C
         var foot:Boolean = (   (((timer.currentCount-1)%2)==0)?true:false);

         //PATRON B + PATRON C == PATRON A
         //adelante atras
         if(((step==true) && (foot== true))) p1.play();
         else if(((step==true) && (foot== false))) p6.play();
         //centro centro
         else if(((step==false) && (foot== false))) p4.play();
         else if(((step==false) && (foot== true))) p3.play();
         else
            throw new Error("me falta un 3er pie");
         
         campo.text =  (foot)?FOOT_LEFT:FOOT_RIGHT;   
         
         //vesion anterior simple
         //if(cont==0)p1.play();
         //   if(cont==1 || cont==5)p4.play();
         //   if(cont==2 || cont==4)p3.play();
         //if(cont==3)p6.play();
         //cont++;
         //if(cont>PASS_TIME.length-1)cont = 0;
      }
   }
}


Entonces señores, bailar salsa no es más que una suma de cosas, pero al igual como todo, también tiene una lógica, un patrón y sobre todo... un algoritmo.

Nos vemos en la clase 2.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate