Foros del web, para los que viven de bits

Hola mis estimados colegas, Aquí pondre lo nuevo que le hice a la paginación, les comento en que ha cambiado:

a) El codigo ya es menor ya que se ha incluido for para que ahorrar tiempo y escritura.

b) Se agrego que se pueda ver una imagen en un MoviClip

Empecemos a explicar::::::

PRIMERA PARTE
************************************************


Creación del diseño de los registros en flash

Paginaremos de 5 en 5 como la entrega pasada y necesitamos hacer 5 campos de nombre, 5 de ubicacion, 5 de img y crear 1 MoviClip y ese pegarlo 5 veces y ponerle el nombre de la siguiente manera.

nombre1, nombre2, nombre3, nombre4, nombre5
ubicacion1, ubicacion2, ubicacion3, ubicacion4, ubicacion5
img1, img2, img3, img4, img5

y en los 5 MoviClip en el nombre de instancia le ponemos
contenedor1, contenedor2, contenedor3, contenedor4, contenedor5

Y haremos 2 botones “Siguiente” y “Anterior”


Y dos campos mas Dynamic Text uno con el nombre pagina y otro con el nombre pag_total


Y Salvamos nuestro proyecto yo le pondré paginacion_img.fla


Creación del ASP

Ahora abramos un “bloc de notas” y pongamos el siguiente código


Esto será para ASP:


Y yo lo guardare con el nombre de paises.asp

<%
Response.Expires = 0
response.Write("&nombre1=Anguila&nombre2=Antigua&n ombre3=Antillas Holandesas&nombre4=Aruba&nombre5=Bahamas")
response.Write("&nombre6=Aland&nombre7=Albania&nom bre8=Alemania&nombre9=Andorra&nombre10=Armenia")
response.Write("&nombre11=Angola&nombre12=Argelia& nombre13=Benin&nombre14=Botswana&nombre15=Burkina Faso")
response.Write("&nombre16=Afganistan&nombre17=Arab ia Saudi&nombre18=Armenia&nombre19=Azerbaiyan&&nombre 20=Bahrein")
response.Write("&nombre21=Australia&nombre22=Fiji" )

response.Write("&ubicacion1=Norte America&ubicacion2=Norte America&ubicacion3=Norte America&ubicacion4=Norte America&ubicacion5=Norte America")
response.Write("&ubicacion6=Europa&ubicacion7=Euro pa&ubicacion8=Europa&ubicacion9=Europa&ubicacion10 =Europa")
response.Write("&ubicacion11=Africa&ubicacion12=Af rica&ubicacion13=Africa&ubicacion14=Africa&ubicaci on15=Africa")
response.Write("&ubicacion16=Asia&ubicacion17=Asia &ubicacion18=Asia&ubicacion19=Asia&ubicacion20=Asi a")
response.Write("&ubicacion21=Oceania&ubicacion22=O ceania")

response.Write("&img1=1.jpg&img2=2.jpg&img3=3.jpg& img4=4.jpg&img5=5.jpg")
response.Write("&img6=6.jpg&img7=7.jpg&img8=8.jpg& img9=9.jpg&img10=10.jpg")
response.Write("&img11=11.jpg&img12=12.jpg&img13=1 3.jpg&img14=14.jpg&img15=15.jpg")
response.Write("&img16=16.jpg&img17=17.jpg&img18=1 8.jpg &img19=19.jpg&img20=20.jpg")
response.Write("&img21=21.jpg&img22=22.jpg")

response.Write("&registros=22")
%>



Desarrollo del código en ActionScript


Bueno ahora retomamos nuestro flash para ingresar el código para ingresar los registros de 5 en 5.


Nota: En color verde pondré el código que ustedes ingresaran al flash y en rojo solo haré las observaciones importantes


Seleccionamos el primer KeyFrame y nos vamos a las actions o acciones.

Ahora en principio pondremos un stop(); para que no, nos provoqué algún contratiempo.


Ahora empezaremos a poner el código para mandar a llamar nuestro archivo ASP


var esto:MovieClip = this; //creamos una variable que apunte al contenedor:
var SendData:LoadVars = new LoadVars(); //Cargo la variable new
SendData.load("paises.asp"); //Llamo el archivo (asp o php) en este caso sera asp
//Funccion para primera muestra de registros
SendData.onLoad = function (success){
if (success) {
//Muestro los primeros registros recordemos que mostraremos de 5 en 5.
for(i=1; i<=5; i++) {
esto["nombre"+i] = this["nombre"+i]; //Aquí muestro los nombres
esto["ubicacion"+i] = this["ubicacion"+i]; //Aquí muestro las ubicaciones
esto["img"+i] = this["img"+i]; //Aquí muestro el nombre de las imagenes*/
loadMovie(this["img"+i], esto["contenedor"+i]); //Aquí muestro las imagenes*/
}
registros = this.registros; //Cargo también el número de registros
/*Para sacar el número de paginas obtenidas divido los registros obtenidos entre el número de registros
que muestra la paginación que en este caso son 5*/
var registro2:Number = registros / 5;
/*Obtenemos con otra variable el resultado para mostrarlo en nuestro Dynamic Text y como podría ser que en
esta operación el número obtenido no sea redondo con la funcion Math.ceil la redondeo*/
pag_total.text = Math.ceil(registro2);
}
}


Hasta aquí obtendremos ya los primeros 5 registros y las paginas obtenidas, compilemos nuestro fla y hagamos una prueba:

Nota: Estos archivos hay que correrlos en un servidor, yo le instale el IIS a mi Windows XP si no contamos con esto no podremos ver el resultado.

Nota: En el Dynamic Text con el nombre pagina hay que ponerle por default un 1 por que sabemos que siempre empezara de la página 1.

SEGUNDA PARTE
************************************************** **


Ya obteniendo este resultado prosigamos con el código de que llevaran los botones siguiente y anterior.

Seleccionamos el botón Anterior y en las actions ponemos lo siguiente:

on (press)
{
menos()
}

Ahora seleccionemos el botón Siguiente y pongamos el siguiente codigo:

on (press)
{
mas()
}


Ahora Pasemos de nuevo al primer keyframe y coloquemos esto al ultimo delcodigo que hemos puesto

//asigno 5 variables para los registros y estas variables nos ayudaran mucho en la paginación
for(i=1; i<=5; i++) {
this["num"+i] = i; }


Y ahora colocaremos la function mas()

function mas()
{
if (pagina.text < pag_total.text) //si el número de paginas no ha sido rebasada ejecutamos lo siguiente
{
var pag_act:Number = Number(pagina.text); //La variable pag_act toma el valor en ese momento de pagina.text
var nu:Number = pag_act * 5; //creamos la variable nu que será el resultado de la variable pag_act * 5
pagina.text = pag_act + 1; //Le damos un nuevo valor a pagina.text sumandole 1
//Mostramos los siguientes 5 registros
for(i=1; i<=5; i++) {
this["nombre"+i] = SendData["nombre"+(this["num"+i] + nu)].toString(); //Mostramos los siguientes nombres
this["ubicacion"+i] = SendData["ubicacion"+(this["num"+i] + nu)].toString(); //Mostramos las siguientes ubicaciones
this["img"+i] = SendData["img"+(this["num"+i] + nu)].toString(); //Mostramos las siguientes imagenes
loadMovie(SendData["img"+(this["num"+i] + nu)].toString(), esto["contenedor"+i]); //Mostramos las siguientes imagenes
}
/*Si algún campo es nulo que no tenga información le decimos que lo deje en blanco
y asi evitamos un mensaje de error del flash*/
for(i=1; i<=5; i++) {
if (this["nombre"+i] == undefined)
{ this["nombre"+i] = ""; }
if (this["ubicacion"+i] == undefined)
{ this["ubicacion"+i] = ""; }
if (this["img"+i] == undefined)
{ this["img"+i] = ""; }
}
}
}


Expliquemos ahora que hace esta funcion si recuerdan en la entrega pasada con los botones siguiente y anterior mandabamos primero a llamar una function botones() para asignarle a unas variables numeros para que nos ayudaran a pasar o retroceder entre los registros pues ahora se ha adaptado todo en la misma function para ya no escribir tanto codigo.

y se ha echo lo mismo con la function menos() que ahora mostraremos.


function menos()
{
if (pagina.text > 1) //si la pagina actual es mayor que 1 ejecutamos lo siguiente
{
var pag_act:Number = Number(pagina.text); //La variable pag_act toma el valor en ese momento de pagina.text
var nu2:Number = (pag_act * 5) - 10; //creamos la variable nu2 que será el resultado de pag_actual * 5 - 10 esto nos ayudara a descontarle 5 registros a nuestra paginación
pagina.text = pag_act - 1; //Le damos un nuevo valor a pagina.text descontandole 1
//Aquí mostramos los 5 registros anteriores
for(i=1; i<=5; i++) {
this["nombre"+i] = SendData["nombre"+(this["num"+i] + nu2)].toString(); //Mostramos los anteriores nombres
this["ubicacion"+i] = SendData["ubicacion"+(this["num"+i] + nu2)].toString(); //Mostramos las anteriores ubicaciones
this["img"+i] = SendData["img"+(this["num"+i] + nu2)].toString(); //Mostramos las anteriores imagenes
loadMovie(SendData["img"+(this["num"+i] + nu2)].toString(), esto["contenedor"+i]); //Mostramos las anteriores imagenes
}
}
}


y listo ya con esto podran paginar mas facil y con la posibilidad de poder mostrar una imagen.


Aquí les dejo el ejemplo funcionando:::
http://www.rwa.com.mx/imgforo/paginacion_img.html

Y aquí para que lo puedan descargar:::
http://www.rwa.com.mx/imgforo/paginacion_img.zip



Saludos...

Gracias, me sirve de muchoo.. pero como puedo hacer para programar el clip "contenedor" de tal manera que cuando se clickee se abra la imagen, mejor dicho donde puede programar un getURl para descargar cada imagen. se puede?
Saludos!