MovieClipLoader(). Parte II

0 - - 24/01/2005 00:00:00

Ver ejemplo en funcionamiento

Para la realización de este tutorial utilizamos bastantes conocimientos previos de posts anteriores. Si tienes alguna duda sobre alguna función utiliza el buscador del blog y accede a otros tutoriales que te puedan resolver las dudas.

Una vez aclarado esto, comenzamos con los pasos:

1- Creamos un clip de película vacío en el que insertaremos las siguientes cuatro capas: "Fondo", "Boton", "Acciones", "Etiqueta".
2.- En la capa Fondo creamos un rectángulo 30px x 30 px y una caja de texto dinámico con el nombre de instancia "porcentaje_txt".
3.- La capa Boton de momento la dejamos en blanco.
4.- En la capa acciones insertamos un stop(), y en la capa etiquetas, nombramos el fotograma como "cargando"
5.- Creamos en las cuatro capas un fotograma clave. En la capa fondo cambiamos el color del rectángulo pues esto nos indicará cuando ha cambiado y se ha convertido en botón.
6.- En la capa Botón insertamos un botn invisible de las mismas dimensiones que el rectángulo con el nombre de instancia "Mostrar_btn".
7.- En la capa acciones insertamos el siguiente código:

Mostrar_btn.onRelease = function(){
     //Decidimos el clip de pelicula que mostramos
     //y creamos una función de fade in
     _root.imgSelected._alpha=0
     _root.imgSelected = imgToShow;
     _root.imgSelected.onEnterFrame = function(){
     if (_root.imgSelected._alpha<100){
          _root.imgSelected._alpha=_root.imgSelected._alpha+5;
          }
     }
}

8.- Una vez hecho esto lo que debemos hacer es seleccionar el clip de película en la biblioteca, hacer click con el botón derecho y en "Vinculación", seleccionar "Exportar para actionscript" con el nombre "imgBtn".
9.- En la escena principal insertamos el siguiente Actionscript:

//El numero de imagenes que vamos a cargar
var imgNum = 5;
//Inicializamos una variable con la primera imagen que vamos a cargar
var t = 1;
//La imagen que está siendo mostrada
var imgSelected = null;
//Iniciamos una instancia del objeto MovieClipLoader()
var imgLoader = new MovieClipLoader();

//Pasamos a los métodos de MovieClipLoader()
imgLoader.onLoadProgress = function (targetMC, loadedBytes, totalBytes){
      //Establecemos el porcentaje de carga que se lleva cargado
      _root["imgBtn"+t].porcentaje_txt.text = Math.round((loadedBytes/totalBytes) * 100)+ "%";
}

imgLoader.onLoadComplete = function (targetMC){
      //Cambiamos el estado del boton
      _root["imgBtn"+t].gotoAndStop("cargado");
      //Cambiamos el valor de la variable para saber que imagen cargar
      _root["imgBtn"+t].imgToShow = _root["img"+t];
      //Ponemos como etiqueta al boton el numero de imagen
      _root["imgBtn"+t].porcentaje_txt.text = t;
      //Si la imagen es la primera la cargamos
      if(t == 1){
            //Establecemos el _alpha del clip de película a 0
            _root["img"+t]._alpha = 0;
            //Definimos cual es la imagen seleccionada
            imgSelected = _root["img"+t];
            //Creamos una función para un efecto de "fade in" en las imagenes
            imgSelected.onEnterFrame = function(){
            if (imgSelected._alpha<100){
                  imgSelected._alpha=imgSelected._alpha+5;
                  }
            }
      }
      //Incrementamos t en 1
      t++;
      //Comenzamos el proceso otra vez
      loadImg();
}

//Definimos la función LoadImg
loadImg = function(){
      //Creamos los movieclips de película
      //y utilizamos la función attachmovie para posicionar los botones
      //en el escenario
      if(t <= imgNum){
            this.attachMovie("imgBtn", "imgBtn"+t, this.getNextHighestDepth());
            this["imgBtn"+t]._x = 20;
            this["imgBtn"+t]._y = 20 + ((t - 1) * 40);
            this.createEmptyMovieClip("img" + t, this.getNextHighestDepth());
            this["img"+t]._x = 60;
            this["img"+t]._y = 20;
            this["img"+t]._alpha = 0;
            imgLoader.loadClip("imagenes/"+t+".jpg", _root["img"+t]);
      }
}

//Llamamos a la función LoadImg()
loadImg();
stop();

Descargar Ejemplo: descargar

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha