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();





