Flash Preloader

24 / marzo / 2007

Flash Preloader

En esta ocasión crearemos un preloader de manera muy sencilla y que puede ser aplicado con facilidad a cualquiera de tus peliculas.

El primer paso es saber donde y como colocaremos nuestro contenido, en este pequeño ejemplo, les muestro una forma de realizarlo.

1. En esta imagen se muestra que tenemos 3 layers, de los cuales utilizaremos uno exclusivamente para el ActionScript, otro para nuestro Preloader y por último uno para nuestro contenido.

Flash Preloader 1
2. Ya que los hemos definido ,procederemos a crear el código que se encargara de evaluar la carga de nuestra pelicula.

Flash Preloader 2

Actionscript:
  1. // con onEnterFrame evaluamos el estado continuo de la pelicula
  2. this.onEnterFrame = function() {
  3. // los bytes cargados hasta el momento
  4. cargados = this.getBytesLoaded();
  5. // los bytes totales de la pelicula
  6. totales = this.getBytesTotal();
  7. // hacemos una operacion para obtener un porcentaje de 1 a 100
  8. porcentaje = int((cargados*100)/totales);
  9.  
  10. // enviamos el movie precargaMc al frame correspondiente
  11. // este movie lo crearemos en un paso siguiente
  12. precargaMc.gotoAndStop(porcentaje);
  13. // asignamos un valor al campo de texto precargaTx dentro de precargaMc
  14. // este campo lo crearemos en un paso siguiente
  15. <p align="center">precargaMc.precargaTx.text = porcentaje+"%";</p>
  16. // un condicional que nos avisara si la carga se ha completado
  17. if (porcentaje>= 100) {// borramos nuestro ciclo onEnterFrame
  18. delete this.onEnterFrame;
  19. // enviamos al lugar donde se encuentra nuestro contenido
  20. gotoAndStop(2);
  21. }
  22. };
  23.  
  24. // detenemos pa pelicula para que no corra
  25. stop();

 

3. Ya que hemos definido nuestro codigo, en el layer de precarga procederemos a crear una animacion dentro de un movieClip con una duración de 100 frames,

Flash Preloader 3

4. Ya que hemos creado el un Movie Clip al cual le asignaremos el nombre de instancia de precargaMc como lo vimos en nuestro código, este constara de 4 layers, el primero igualmente sera de acciones en el que unicamente pondremos lo siguiente en el primer frame.

Actionscript:
  1. stop();

 

Flash Preloader 4

5. En esta ocasión mi animacion corresponde a una mascara, asi como tambien he incluido un campo de texto dínamico que nos mostrara el porcentaje completado, este campo debe de localizarse en otro layer dentro de la animación y abarcara los 100 frames que dura nuestra animación, a este campo le asiganremos el nombre de precargaTx

Flash Preloader 6

6. Por último colocaremos nuestro contenido en el layer de contenido, en el siguiente frame, esto puede cambiar segun el tipo de contenido que escojan, asi como su codigo puede modificarse ya que no nesesariamente debe correr al frame numero 2.

Flash Preloader 5

Finalmente obtendrán un resultado con caracteristicas similares, espero les ayude, esto es una breve entrada a Flash, sin embargo, pronto empezare a expliar mas detalladamente cada uno de las funciones y metodos de este.


Download

+

7 comentarios para Flash Preloader

  1. Chicoblog 24 mar 2007

    Excelente tutorial =)
    esta bueno ^^
    Y el codigo de poner flash no te sirvio, esta mal puesto =O
    Saludos ;)

  2. Chicoblog 24 mar 2007

    Y la musica para que hablar, me encanto =)

  3. Desde hace tiempo que visito este blog y te agradezco una vez más los contenidos que dia a dia publicas, gracias… aunque nunca comente siempre estoy aqui escuchando… ;)

  4. 00/07 12 abr 2007

    Changos, mi Flash no abre ese archivo .fla, espero no sea mucha molestia si me pasan una versión para MX 2004 professional.

  5. muy bueno solo que mi problema ahora es como lo subo para poderlo poner en mi pagina y que abra primero el loader y no mi pagina de inicio

  6. jeje en realidad… es muy bueno y la musica… esta genial ^_^… exelente precarga… me facina por la mascara…. enserio muchas gracias

    saludos!

  7. Mi estimado, como se llamada la cancion que suena en tu web? muy buena. Gracias por el tuto tb. Espero tu respuesta. Gracias!

ShowTracksTrackbacks/Pings

  1. Teimagino dice: 1

    [...] Flash Preloader | Infected-FX [...]

Agrega tu opinión Invitado, tu puedes registrarte o ingresar a tu cuenta .

No será publicado

Get your own Gravatar
Sign up for free