Foros del Web - PAGINACION EN FLASH Segunda entrega.

Foros del Web (http://www.forosdelweb.com/)

- Flash y Actionscript (http://www.forosdelweb.com/f16/)

- - PAGINACION EN FLASH Segunda entrega. (http://www.forosdelweb.com/f16/paginacion-flash-segunda-entrega-581413/)

PAGINACION EN FLASH Segunda entrega.

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.

Re: PAGINACION EN FLASH Segunda entrega.

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