1. [+ Tu HOSTING con dominio GRATIS +] Haz clic aquí para contratarlo desde 3,95€ al mes. ¡Soporte WordPress! ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

[TUTORIAL]Preloader Basico en ActionScript 3.0

Tema en 'Tutoriales Desarrollo Web' iniciado por kitsch, 11 Dic 2008.

  1. kitsch

    kitsch Nuevo usuario

    Bueno, este tuto es bastante sencillo y veo que aquí en el foro nadie ha posteado ninguno parecido; así que me escribí este de rápido. Otra nota, este tuto está pensado para diseñadores, ya que veo (y por las consultas diarias que me hacen vía msn) que el ActionScript 3 les está constando bastante trabajo, aun para las cosas más simples; por lo que tratare de hacer los próximos tutos también pensados para ellos.

    Bueno, comenzamos con lo que nos interesa, el tutorial.

    1.- Primero creamos un MovieClip con la animación que deseemos aparezca mientras se carga el resto de nuestra película. Yo me dibuje un circulito que va cambiando de color.


    2.- Creamos un cuadro texto dinámico, y le asignamos el nombre de instancia de: “porcentaje_txt”, y otros dos más pequeños con los nombres de intancia: total_txt y cargado_txt respectivamente.
    3.- Abrimos nuestro editor de ActionScript (F9) y comenzamos escribiendo la siguiente línea:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->import flash.events.*;
    import flash.display.*;<!--c2--></div><!--ec2-->
    Como antes decía, es sumamente importante siempre importar las clases que vamos a necesitar, por lo general y para todo se necesita la clase Events y como en ejemplo llamamos un objeto de Display, pues tambien importaremos la clase.

    5.- Después declaramos dos eventos:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, cargando);
    this.loaderInfo.addEventListener(Event.COMPLETE,cargado);<!--c2--></div><!--ec2-->
    El objeto loaderInfo proporciona información acerca de un SWF o un archivo de imagen; y a él se le pueden agregar eventos controlados, tal como lo hicimos en este caso con ProgressEvent y la constante <b>PROGRESS</b> así como el evento <b>Event.COMPLETE.</b>

    6.- Creamos la variable carga y le asignamos la propiedad <b>ProgressEvent</b>
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var carga:progressEvent; <!--c2--></div><!--ec2-->
    7.- Ahora crearemos las dos funciones que controlaran que se ejecutara cuando se cumplas los eventos de loaderInfo asignados líneas arriba (cargado y cargando).
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->function cargando(carga):void {
    &nbsp;&nbsp;&nbsp;&nbsp;var total:Number=carga.target.bytesTotal;
    &nbsp;&nbsp;&nbsp;&nbsp;var cargado:Number=carga.target.bytesLoaded;
    &nbsp;&nbsp;&nbsp;&nbsp;var porcentaje:Number=cargado/total*100;
    &nbsp;&nbsp;&nbsp;&nbsp;this.porcentaje_txt.text=(Math.round(porcentaje)+"%");
    &nbsp;&nbsp;&nbsp;&nbsp;this.cargado_txt.text=(Math.round(cargado/1000)+" kb");
    &nbsp;&nbsp;&nbsp;&nbsp;this.total_txt.text=(Math.round(total/1000)+" kb");
    }<!--c2--></div><!--ec2-->
    Como siempre en ActionScript 3.0 declaramos la función, asignamos el nombre correspondiente y como parámetros de esta tenemos la variable carga; misma que tiene un valor de ProgressEvent. Posteriormente declararemos otras 3 variables privadas: total, cargado y porcentaje; todas con propiedad numérica con los siguientes valores:

    total = totalBytes (peso total de la película)
    cargado= bytesLoaded (cargando hasta el momento)
    porcentaje = cargado/total*100 (sacamos el porcentaje obteniendo lo cargado sobre el total multiplicado por 100)

    Posteriormente agregamos los textos correspondientes con la función text; además redondeamos los valores a enteros con la función Math; con lo que concluimos la función.

    8.- Declaramos la función cargado y agregamos las funciones o acciones que necesitemos una vez que se haya terminado de cargar la película, en este caso, me basto con un nextFrame.
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->function cargado(Event):void {
    &nbsp;&nbsp;&nbsp;&nbsp;nextFrame();
    } <!--c2--></div><!--ec2-->
    En fin, como decía este es un tutorial bastante sencillo, y como en mi anterior tutorial es más bien una adaptación del popular método de AS2 al nuevo lenguaje. En fin, espero sea útil ;)

    Anexo el FLA Original.
     

    Adjuntos:

  2.  
  3. elQuique

    elQuique Usuario activo

    Excelente aporte para introducirnos en AS3
     
  4. Mielito

    Mielito Nuevo usuario

    Hola… Kistch.

    Soy diseñador y estoy empezando a trastear el flash CS4.

    Intento crear mi pagina web y como pesa mucho quería poner una precarga.
    Despues de ver 1001 tutoriales con diferentes maneras de poner los códigos lo he probado con 2 diferentes.
    Funcionar… funciona, pero tarda la vida (tiene mucha info)

    Aquí va mi pregunta. ¿Se puede hacer una precarga parcial con AS3?¿y como claro?
    He visto precargas con AS1 ó AS2 que si se puede cargar un numero de frames, digamos 300, y que arranque.
    Hasta el momento todos los códigos que he visto son de bytesTotales…

    gracias y un saludo.
     
  5. videos

    videos Nuevo usuario

    Magnifico tutorial, gracias por compartirlo.



    adtriboo.com/es/videos-corporativos videos corporativos
     
    Última edición por un moderador: 17 Feb 2016


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta · Sobre Devandhost · Anna Telecom