kadazuro.com
 TutorialesPreloader/Precarga v.FL5
 
por: kadazuro
|ver demostración |bajar el zip |
imprimir este documento
 
páginas: [0] [1] [2] [3

El anterior tutorial de preloader de porcentaje funciona bien incluso en flash5, pero tiene las desventajas como la inexactidud del porcentaje ya que lo calcula en base a los frames cargados y no basándose en los bytes, por ejemplo en una movie de 200 frames si el fame 5 pesaba un 50% del peso del archivo total, el preloader marcaba un 2.5% ya que el frame 5 sería el 2.5% del total de frames, sin tomar en cuenta que se quedaría en ese porcentaje hasta que ese frame fuera cargado.
Por dicha eso es cosa del pasado con la llegada de nuevas funciones como los son getBytesLoaded y getBytesTotal, con estos dos podemos calcular los bytes cargados y por tanto también los kilobytes, un porcentaje más real, la tasa de transferencia y hasta el tiempo restante para que se termine de cargar nuestra movie.

El tutorial se divide en dos partes, la creación de el movieclip usado como preloader, y la segunda parte se divide a su vez en cuatro más, estas explican cómo hacer que el preloader nos muestre:

  • bytes cargados
  • kilobytes cargados
  • porcentaje real
  • tiempo restante y tasa de conexión.

cada sección con su respectivo ejemplo el cual se verá presionado un link como este:

ver ejemplo

Acerca el zip.
En el zip se encuentran los 4 ejemplos de preloaders, flas y swf.

Parte1.

Paso1.
Primero ocupamos hacer la barra que nos indique qué porcentaje de la movie llevamos cargado, eso es simplemente un rectángulo. nuevo simbolo ( Insert>new symbol ó Ctrl+F8 ), como comportamiento movieclip y como nombre el que quieras ( "barra" en el ejemplo) fig1.

figura 1, creación del movieclip "barra"

Seguido dibujas un rectángulo, recuarda alinearlo con respecto al la esquina superior izquierda en x=0. fig2, la forma en que vamos a utilizar esta barra es jugando con los valores del porcentaje cargado y asinándoselos como escala x, asi si la barra está alineada con el punto x está en cero, esta crecerá de izquierda a derecha, si alineas la barra en el centro, esta crecerá hacia los lados.

figura2. forma de alinear el rectágulo que forma al movieclip barra.
Paso2.
Una vez hecho esto hacemos un nuevo símbolo, movieclip como comportamiento y como nombre "preloader", en preloader estará la barra y un campo de texto dinámico que es en donde escribiremos el porcentaje o el mensaje informativo que querramos que se vea mientras la movie carga.
Haz click en el botón de texto, click en el escenario y arrastas hasta que consideres sea suficiente para mostrar tu mensaje, abres el panel de opciones de texto (window>panels>text options o en el botón de la barra de acceso rápido en la esquina inferior derecha ( el botón con una "A")), en la cejilla de Text Options seleccionas texto dinámico (Dynamic text), una sóla línea ( single line ), y quitas todos los checks; como nombre de variable yo usaré output. fig3.

 

figura3. el campo de texto dinámico "output" dentro del movieclip preloader.

En la pestaña párrafo seleccionas el de texto centrado, y en la de carácter el que quieras desplegar.
Si quieres usar un tipo de fuente que de seguro sólo tu tienes lo más conveniente es que te devuelvas a la pestaña Text Options y en la parte de embed fonts selecciónes números y digites el texto que vas a ocupar para que flash te exporte los outlines de las letras.
Si gustas a este campo de texto lo puedes alinear con respecto a su centro.

Paso3.
Abre la librería si no está abierta ( Ctrl+L ) y pones una instancia del movieclip barra en el escenario que estamos trabajando ( el escenario del movieclip preloader ), como nombre de instancia le puedes poner barra y lo alíneas con respecto al centro del escenario del movieclip preloader, esto lo tendrá que hacer a mano o mejor aún utilizando el inspector de objeto, si la barra mide 150píxeles, entonces la alíneas en x=-75 por ejemplo. fig 4

figura4, movieclip preloader, con instancia de mc barra y caja de texto "output" alineados

Una vez terminado el movieclip preloader pones una instancia en un layer/capa del escenario principal, (llamemos a este layer preloader)y pasas a la parte 2.

Parte2
En esta parte usaremos dos eventos de movieclip, el evento "load" para cargar variables y el evento "enterFrame" para hacer cálculos. Viendo esto se diría que no ocupamos poner acciones en el escenario principal,... pues si y no, puede hacer varias cosas, entre estas: puedes poner un stop en el frame 1 del layer acciones para que la movie quede en stop mientras el preloader hace el trabajo sucio, pero si lo haces así recurda a la hora de publicar quitar el check en display menú ya que algún travieso le puede dar botón derecho>play y hará que tu movie arranque estándo o no cargada.

Para efectos prácticos la movie puede empezar en el frame2 usaremos el label "inicio" para que te sea más fácil usar en otros proyectos [ osea sólo copias el preloader, la acción del stop en el frame1, y la etiqueta "incio" y ya tienes preloader listo]. * en los ejemplos verá que pongo la etiqueta inicio en el frame 5 pero es con fines educativos para una mejor visualización.

Ahora si, selecciona el botón derecho, acciones/Actions y le pones alguna de estas opciones dependiendo de lo que quieras mostrar.

Siguiente>>

 

 
regresar
 

Historial:

  • mayo12,2001 se publica este documento