kadazuro.com
 TutorialesPreloader de Porcentaje:
 
por: kadazuro
imprimir este documento
 


El preloader de porcentaje ayuda al usuario a conocer qué cantidad de la página ya ha sido cargada.en éste tutorial se sugieren tanto nombres escecíficos para su fácil comprension , como trabajar en diferentes layers para una mejor visibilidad, lo cual quedará a criterio del flashero.

Paso 1. en un layer haz un TextField ( + ), cuando esté hecho, seleccionarlo, darle click con el botón derecho del mouse , click en propiedades, en la caja de diálogo en este caso le pondremos como nombre contador ; asegúrate de seleccionar únicamente Disable Editing, Disable Selection y Do not include font outlines. (ver figura 1 )

figura1.Caja de diálogo de Text Field:

Paso 2.haz un nuevo layer para las labels , luego en este layer los siguientes keyframes :

frame 1: label loop
frame 3. label inicio.

Paso 3. nuevo layer, nombre acciones con las siguientes keyframes y acciones.

frame1:

If (_framesloaded >= _totalframes)
Go to and Play ("inicio")
Else
Set Variable: "porcentaje" = Int((_framesloaded/ _totalframes) * 100)
Set Variable: "contador" = porcentaje & "% "
End If

frame 2:

Go to and Play ("loop")

en el frame 3 se encuentra el label inicio, este label no tiene que ser necesariamente en el frame3; puede ser otra escena,otro frame lo que quiero decir este es donde inicia tu movie, así como le puedes poner un botón de listo haga click para continuar, o simplemente empezar a correr.

explicación de cuadro uno:

If (_framesloaded >= _totalframes){si la cantidad de frames cargados es mayor o igual al total de cuadros de la movie..}

Go to and Play ("inicio"){vaya al label inicio y corra(play)}

Else { si no sucede, de lo contrario }

Set Variable: "porcentaje" = Int((_framesloaded/ _totalframes) * 100){hacemos una variable llamada porcentaje y le asignamos el valor redondeado del porcentaje ( explicación de la fórmula Int: redondea, devuelve un número entero, famesloaded/totalframes por 100 nos devuelve el porcentaje}


ejemplo:

variar los montos para framesloaded y total frames para ver el porcentaje

 

Set Variable: "contador" = porcentaje & "% "{al valor que tiene porcentaje arrímele el símbolo % y se lo pone a contador} si se quiere que salga el mensaje % cargado hay dos opciones principales

1."contador" = porcentaje & "% cargado"
2."contador" = porcentaje { y se le pone el texto a la par (texto normal i.e. sólo )}

Bonus: ya que tenemos el porcentaje cargado, podemos jugar con este valor asignándoselo a un movie clip ( valores alfa ,posiciones x , y, xscale,yscale etc) en éste caso haremos una barra de estado:

has un movie clip nuevo ( insert + new simbol, o Ctrl+F8; le pones nombre y movieclip como behavior), presionas ok para aceptar y en el editor de símbolos ( en la timeline del símbolo que acabamos de crear) dibuja un rectángulo
nota:centrar el objeto ( a mano o con el inspector de objetos )en la posición x=0,y=0 o por lo menos y=0 para que a la hora de asignarle datos crezca de izquierda a derecha y no hacia los lados.( figuar 2)

Figura2.muestra de como alinear la barra de estado en el editor

y para asignarle valor sólo coloca una instacia del movieclip en el escenario ponle nombre a la instancia(barra en este caso ) y agrega esta líne en el código del primer cuadro :

If (_framesloaded >= _totalframes)
Go to and Play ("inicio")
Else
Set Variable: "porcentaje" = Int((_framesloaded/ _totalframes) * 100)
Set Variable: "contador" = porcentaje & "% "
Set Property ("/barra", X Scale) = porcentaje
End If

ahí tienes tu indicador de porcentaje y barra de estado.

explicación del cuadro dos:

Al hacer la pregunta ¿Es la cantidad de frames cargados >= al total de frames ? pueden haber dos respuestas: si y no; si la respuesta es SI contina la movie en el label inicio, si la respuesta es NO, asigna los valores arriba indicados y sigue al frame dos. Como nos intereza que le sigan preguntado al frame uno si ya se cargaron los frames, en este frame(2) le ponemos el Go to and Play ("loop") para que se devuelva al frame loop y pregunte hasta que responda SI, formando así un loop saliéndose del mismo hasta que se haya cargado la movie.ver figura 3

figura3. La lógica del loop

 
regresar
Preloader: precargador
layer: capa
TextField: campo de texto ( como en el de los formularios )
labels: Etiquetas
KeyFrame: cuadro clave, fotograma clave
frame: cuadro, fotograma.
movie: película
timeline: línea de tiempo
loop: cilco, bucle
 

Historial:

  • agosto 31,2000: se agrega explicación para el cuadro 2 y la lógica del loop.
  • marzo 29,2000, se publica este documento.