Cristalab

Cómo hacer una precarga en Actionscript 3

Por: Zguillez + 05.11.2006

Algún día tenía que llegar y aquí está: El tutorial del preload en Actionscript 3...
El ejemplo que les mostraré será de como añadir un preload al _root de la película principal.
Recuerda que tambien hay un preloader en Flash del normal, por si aún no te pasas a AS3.

Para este tutorial debes haber visto el tutorial basico de Actionscript 3.

Empezaremos creando una clase que llamaremos "PreloadBasico.as", que guardaremos dentro de la carpeta "preloads", que a su vez estará dentro de nuestra carpeta de clases AS3.

Una vez creado el archivo .as abriremos el panel de propiedades de publicación (CTRL+SHIFT+12), y en opciones de actionscript 3 le asignaremos la clase al documento.



En el .FLA montaremos una pelicula con dos fotogramas. El primer fotograma lo dejaremos vacío y solo colocaremos un stop(). En el segundo colocaremos todo el contenido.



Escribiremos la clase "PreloadBasico.as":

Código :

package preloads
{
   public class PreloadBasico extends MovieClip
   {
      public function PreloadBasico ()
      {
      }
   }
}

Como podemos ver, hemos de extender esta clase de la clase MovieClip.
Importamos las clases que utilizaremos:

Código :

import flash.display.Stage;
import flash.display.MovieClip;
import flash.display.Shape;
import flash.text.TextField;
import flash.events.*

Crearemos el preload. Necesitaremos crear un textField para el texto, un shape para la caja y otro shape para el color del relleno.

Código :

   public class PreloadBasico extends MovieClip
   {
      private var texto:TextField;
      private var marco:Shape;      
      private var barra:Shape;
      //----------------------------------------
      public function PreloadBasico ()
      {
         dibujaPreload();
         posicionaPreload();
      }
      //----------------------------------------
      public function dibujaPreload() {
         texto = new TextField();
         marco = new Shape();
         barra = new Shape();
         marco.graphics.lineStyle(1, 0x000000);
         marco.graphics.drawRoundRect(0, 20, 70, 5, 0);
          barra.graphics.beginFill(0x000000);
          barra.graphics.drawRect(0, 20, 70, 5);
          barra.graphics.endFill();   
         addChild(texto);
         addChild(marco);
         addChild(barra);
      }
      //----------------------------------------
      public function posicionaPreload() {
         texto.x = marco.x = barra.x = stage.stageWidth /2 - marco.width /2
         texto.y = stage.stageHeight /2 - texto.height /2
         marco.y = barra.y = texto.y + 5
      }
   }

La función dibujaPreload() es la que genera los clips y la función posicionaPreload() los coloca en el centro de la pelicula. Para este ejemplo hemos hecho un preload muy simple, únicamente un texto que nos mostrará el porcentaje cargado y una barrita que se va ampliando.



Aqui cada cuál puede editar estas funciones para conseguir el preload que gráficamente más le convenga.

Añadiremos los detectores de eventos y sus funciones:

Código :

   public function PreloadBasico ()
      {   
         dibujaPreload();
         posicionaPreload();
         this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
         this.loaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);      
         //----------------------------------------
         function onLoadProgress (event:ProgressEvent):void
         {
            var cargado:int = event.bytesLoaded;
            var total:int = event.bytesTotal;
            var porcentaje:int = cargado/total*100;
            texto.text = "Cargado: "+String(porcentaje)+"%";
            barra.width = porcentaje*marco.width/100;
         }
         //----------------------------------------
         function onLoadComplete (event:Event):void
         {
            removeChild(texto);
            removeChild(marco);
            removeChild(barra);
            nextFrame();
         }
      }

La función onLoadProgress() calcula el porcentajecargado y actualiza los clips del preload.
La función onLoadComplete() se ejecuta cuando la carga de la pelicula está completa, elimina los objetos del preload y manda la pelicula al segundo fotograma (donde está el contenido)

Código completo.

Ejemplo.

Etiquetas actionscript_3

Comentarios | Enviar un comentario
Aleluya, ya se hacia esperar este tip Muy Feliz es genial Zguillez
De seguro muchos lo incluirán del tirón en sus proyectos.... Cool
Por: MorphX
me empiezo a asustar con el action scrip 3...hasta ahora entendia los preloader, era lo unico que me sabia bien

(emote de diseñador a punto de ataque de pánico)
Por: daidalos_blog
El imprescindible, excelente aporte!
Por: Aoyama

daidalos_blog :

(emote de diseñador a punto de ataque de pánico)
¿Será alguno de estos?:
:zombie: :sueno: Ownzed! WTF!?

O quizas: Puñal Icon
Por: Freddie
Alguien ya vio los ad-word de esta página ?
<blockquote>Menopause Vagina Relief
Europe's leading menopause product change your menopause-not your life</blockquote>
Por: Hector_blog

Hector_blog :

Menopause Vagina Relief
Europe's leading menopause product change your menopause-not your life
Cooompletaamente relevantes. ¿Imaginas todo el "relief" que necesitarás despues de hacer un preload en AS3? Riendo
Por: Freddie
Riendo .

Genial forma de comenzar a usar el as3.

PD: Que pena que aún tengo que empezar a verlo U_U
Por: Lunatic_blog
Aunque suene raro, y aunque no conozco las propiedades y funciones y demás cosas nuevas de AS3, he podido entender al leer el código, tiene más lógica y sentido que el AS2...

U_U soy yo, o me estoy volviendo loco?

Riendo
Por: J O S
se ve mas facil...pero hay cosas con las que me lio, en especial con esto:

Código :


         addChild(texto);
         addChild(marco);
         addChild(barra);


y con esto:

Código :

   this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
         this.loaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);


y otra cosilla,

porque creas los objetos de texto, marco y barra al principio y las instancias en otra parte del codigo, es que ya no se puede hacer todo a la vez?

o es para mejorar la legibilidad del codigo solamente?

a ver si me lo aclarais

asias majetes^^
Por: noctam_blog
¿Ya te has leido el resto de tips de AS3?

noctam_blog :

se ve mas facil...pero hay cosas con las que me lio, en especial con esto: addChild(texto);

addchild sustituye a attachMovie
el-reemplazo-a-attachmovie-en-actionscript-3

noctam_blog :

y con esto: this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);

Esto es para detectar los eventos
actionscript-3.0-parte-2-botones-eventos-geturl-y-enlaces

noctam_blog :

porque creas los objetos de texto, marco y barra al principio y las instancias en otra parte del codigo

Porque es una clase
introduccion-basica-a-actionscript-3-clases-tipos-de-datos
Por: Zguillez
asuuusta nooo apenas voy por el AS1 y ya van por el tres, clases, y mas clases, ahhhh Aw Crap
Por: Karloz_blog
Muy bueno el tuto, una consulta, estoy buscando un preloader que me haga la precarga de mi pelicula el temas es que en esta llamo a otros swf que quiero que se carguen con este preloader, para utilizar un solo preloader inicial...

Muchas gracias !!! excelente foro ....
Por: darasta_blog

darasta_blog :

Muy bueno el tuto, una consulta, estoy buscando un preloader que me haga la precarga de mi pelicula el temas es que en esta llamo a otros swf que quiero que se carguen con este preloader, para utilizar un solo preloader inicial...

Muchas gracias !!! excelente foro ....

Aqui hay otro tuto para preload de archivos externos en AS3. Espero que te sirva
Por: Zguillez
WAAAAAAA y yo que empezaba a programar en AS2 de una manera que ya me gustava ahora todo se ve nublado y muy borroso pero a empezar que al parecer se va poder hacer cosas muy poderosas :)gracias por el minitute
Por: MostPEpe_blog
puedes poner el archivo del tutorial porfa
Por: gera_blog
Unas preguntillas porfavor.

alguien me puede desir donde esplican bien y detallado como en lasar la pelicula con la clase, es que me dise que no la encuentra y esta ay?
al prubar la precarga perfecto pero si le doy a actualisar en el navegador se queda al 100% y no pasa al ultimo fotograma.

Gracias
Por: Neftati_blog
Llorando

quiero ver el ejemplo Sr. Zguilleeeeeeeeeeezzzzzzzzz
Por: Loon

Neftati_blog :

alguien me puede desir donde esplican bien y detallado como en lasar la pelicula con la clase, es que me dise que no la encuentra y esta ay?
En Flash CS3, en la barra de propiedades encuentras un campo que dice "Document Class", ahi colocas el nombre de la clase que hereda de MovieClip o Sprite.
Por: Freddie

Neftati_blog :

Unas preguntillas porfavor.

alguien me puede desir donde esplican bien y detallado como en lasar la pelicula con la clase, es que me dise que no la encuentra y esta ay?
al prubar la precarga perfecto pero si le doy a actualisar en el navegador se queda al 100% y no pasa al ultimo fotograma.

Gracias


Personita de mi alma:
- decir con C.
- explican con X.
- Enlazar todo junto y con Z.
- La tilde en pelicula te la perdono.
- Dice con C.
- "... esta ahi" ... Ahi de señalar un lugar se escribe AHI y con tilde en la i, solo que mi teclado no anda.
- Actualizar con Z.
Por: Loon
Muy bueno el ejemplo. Estoy recien mirando FLASH, tengo muchos años de programacion Java y demas..., por lo cual me interesaria ver el ejemplo completo sino es mucha molestía. Trate de entrar a los links pero no encuentra la pagina, es mucho pedir que me los envies a las siguiente casilla de correo macusato@gmail.com
Por: Marcelo.._blog
Vaya, a mi no me va. Me sale este error:
TypeError: Error #1009: No se puede acceder a una propiedad o a un método de una referencia a un objeto nulo.
at preloads::PreloadBasico/posicionaPreload()
at preloads::PreloadBasico$iinit()

Con hacer esto es suficiente: var preload:PreloadBasico = new PreloadBasico();
Por: anónimo_blog
buenisimo, a mi me anda de lujo.. pero tengo un problemilla..
por ejempplo, tengo un "estado" al cual le asigne la clase "cestado", la cual extiende "PreloadBasico", tiene un frame "limpio" al comienzo con el "stop", y todo anda al lope, aurora bien, cuando lo uso de la siguiente forma, el objeto no me anda (si el preloader), es un cuadro donde se muestran varios estados (ej. un personaje), y no puedo acceder a "las cosas de adentro", es decir TextField's y otros chucos.. si le saco el frame al comienzo, anda perfecto, pero no el preloader.
ah.. va el ejemplo:

var miestado= new Loader();
miestado.load(new URLRequest(la_uri));
miestado.contentLoaderInfo.addEventListener(Event.COMPLETE, evento_estado_cargado);
addChild(miestado);

luego de lanzar `evento_estado_cargado`, se detiene la ejecucion y no hace mas nada.. Triste

se que es un post algo viejo, pero si alguien tiene alguna idea.. agradezco.. saludos y buen tip ! Guiño
Por: gonzalo_blog
Tarde o temprano tenia que suceder asi que a asimilar esta información y a ponerse a practicar miau
Por: flashreloco
Toda la gente se asusta con el AS3, pero la verdad es que veo que es AS2 obligandote a programar como dios manda.
Por: Pau_blog
¿Alguien me puede ayudr segui todas las instrucciones pero no veo mi precargador?
Por: Miguel Angel_blog
Seguí todas las instrucciones y cree una pelicula, un movieclip con dos fotogramas, en el primero puse un stop y en el segundo algunas imagenes para probarlo pero al correr la palícula se queda en el primer fotograma (por el stop) y las imagenes no las veo y por lo tanto el precargador tampoco.

Agradecería mucho si alguien me puede ayudar

Gracias por su atención.
Por: Miguel Angel_blog
¿Me faltara el import en el clip de película? La verdad no se que hacer.

Y las ligas del codigo completo y para descargar el fla no funcionan.

Ayuuundeeenmeeeeeeeeee.

Gracias.
Por: Miguel Angel_blog
Not Found

The requested URL /Preload/AS3/01/Preloader.htm was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Not Found

The requested URL /Preload/AS3/01/PreloadBasico.as.txt was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Por: marlonbtx2
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.