Crear una Botonera Dinámica en ActionScript 2.0

Mediante este tip voy a explicar cómo crear una botonera dinámica como esta:

Para empezar vamos a crear un clip en nuestra biblioteca que sera nuestro botón modelo, también creamos un campo de texto dinamico instanciado como "t"



Luego, cuando ya tenemos nuestro botón en la biblioteca, hacemos click con el boton derecho, y en la parte de vinculación le damos un nombre y aplicamos la opción de vinculación para Actionscript y exportar en el primer fotograma.



Ahora vamos con el código.

Primero creamos un MovieClip vacio q contendrá los botones.

Código :

this.createEmptyMovieClip("botonera",this.getNextHighestDepth());

Luego declaramos un Array que contendrá la cantidad de botones a crear y sus nombres.

Código :

var labels:Array = Array("home","about","services","contact");

Ahora con width() escribimos dentro del clip vacio para evitar problemas de rutas.

Código :

with(botonera){
}

Primero posicionamos la botonera:

Código :

with(botonera){
   this._x = 50;
}

Luego creamos un for seteado por la longitud del Array.

Código :

with(botonera){
  this._x = 50;
  for(i=1;i <= labels.length; i++){
  }   
}

Ahora declaramos una vaiable de tipo MovieClip que funcionara de modelo a nuestros botones y le damos por valor cada boton attachado.

Código :

with(botonera){
  this._x = 50;
  for(i=1;i <= labels.length; i++){
    var modelButton:MovieClip = this.attachMovie("boton", "boton"+i , this.getNextHighestDepth ());
  }   
}

Posicionamos los botones.

Código :

with(botonera){
  this._x = 50;
  for(i=1;i <= labels.length; i++){
    var modelButton:MovieClip = this.attachMovie("boton", "boton"+i , this.getNextHighestDepth ());
    modelButton._x = 0;
    modelButton._y = ((i*0)+this._height) +5; //multiplicamos por 0, para q la distancia sea constante
  }   
}

Le ponemos título a cada botón, dados por los elementos del Array.

Código :

with(botonera){
  this._x = 50;
  for(i=1;i <= labels.length; i++){
    var modelButton:MovieClip = this.attachMovie("boton", "boton"+i , this.getNextHighestDepth ());
    modelButton._x = 0;
    modelButton._y = ((i*0)+this._height) +5; //multiplicamos por 0, para q la distancia sea constante
    modelButton.t.text = labels[i-1];
  }   
}

Ahora eventos de rollOver y rollOut.

Código :

with(botonera){
  this._x = 50;
  for(i=1;i <= labels.length; i++){
    var modelButton:MovieClip = this.attachMovie("boton", "boton"+i , this.getNextHighestDepth ());
    modelButton._x = 0;
    modelButton._y = ((i*0)+this._height) +5; //multiplicamos por 0, para q la distancia sea constante
    modelButton.t.text = labels[i-1];
    modelButton.onEnterFrame = function (){         
         //ecuacion para la trancicion de alpha
         //donde: a = transparencia
         //       v = velocidad de trancicion
         this._alpha += (this.a - this._alpha) /this.v;
                  
         //si el cursor esta sobre el boton...         
         if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
            //...cambia su transparencia al 50%
            this.a = 50;
            this.v = 5;
            
            //sino, vuelve o se mantiene al 100%
            } else{
               this.a = 100;
               this.v = 10;
            }
         }
       }
  }   
}

Finalmente para eventos de click usamos onMouseDown()

Código :

modelButton.onMouseDown = function (){
      if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
      if(this._name == "boton1"){
          trace("welcome home")//acciones
      }
      if(this._name == "boton2"){
         trace("about us")//acciones
      }
      if(this._name == "boton3"){
         trace("our services")//acciones
      }
      if(this._name == "boton4"){
         trace("contact us")//acciones
      }
   } 
}

Cada botón nos muestra un mensaje distinto en el output.



Cómo ven para añadir otro botón solo deben agragar un elemento más al Array

Aquí pueden descargar el .fla

Espero les sirva

¿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.