próximo »

[malkavian_net]

A mi como visitante de páginas,, nunca me gusta encontrar sitios web que tienen intros flash swf que demoren en cargar, o ya dentro de páginas animaciones, publicidad, banners pesados. Y esto me paso a mi, asi que trate de hacer un estudio práctico y empírico de las animaciones flash en cuanto a su desempeño, buscando la manera de hacer los swf menos pesados y mas rápidos, utilizando los componentes adecuados y optimizados

A continuación un estudio de los componentes de Flash en cuanto al desempeño y tamaño, hay que tomar en cuenta que a menor tamaño del SWF mayor desempeño


Cuanto pesa un fotograma SWF vacío(lienzo 1020*760)action script 3.0:

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1             34             34    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                               0             0                     0

se utiliza action script 3.0, usada en adobe flash cs3, si comparamos el tamaño de la pelicula utilizando action script 3.0 o action script 1.0 el tamaño es el mismo.

Peso de formas
Ahora vemos el tamaño de un sfw que tiene una forma trazada con un objeto rectángulo, con fondo de color degradé y:

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1            149            149    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                             113             0                     0

Vemos que a diferencia de una película vacía la forma ocupa 113 bytes mas
Si a la forma rectángulo le ponemos color sólido la forma pesa 87, esto varía obviamente del tamaño de la forma.

El tamaño de los objetos aumenta el tamaño mas no el tamaño del lienzo si ponemos un lienzo de menor tamaño al de 1020 * 760 a 800 * 600 entonces el tamaño la pelicula es la misma.

Peso de los vectores
si trazamos un vector con la herramienta pluma obtenemos el siguiente resultado:

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1            305            305    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                            269             0                     0

el peso del vector es mayor al de la forma.

Peso de un texto dinámico

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1           2965           2965    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                               0            97                     0

Nombre de fuente                 Bytes        Caracteres   
-----------------------------    ---------    --------------
Times New Roman                2843   

Me lleve con la sopresa de que el escribir tres frases, ponerle color y aumentarle un poco tamaño, el swf crece como 20 veces el peso de una forma.

Texto estático

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1           1300           1300    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                               0            66                     0

Nombre de fuente                 Bytes        Caracteres   
-----------------------------    ---------    --------------
Times New Roman                1188    Jaeirv

El texto estático es mas liviano que el peso del texto dinámico de 2843 a 1300           

El peso de un Movie Clip

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1            124            124    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                               0             0                     0

Símbolo                       Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
mv_demo                               59             0                     0

Un objeto movie clip es mas liviano que una forma.

PESO DE MAPA BITS
Generalemente el mal uso y optimización de los mapa bits antes de importar a una película son la causa de swf pesadas, un formato sugerido es los jpg, el formato comprimido, sin embargo el tamaño importa mucho, pongamos el ejemplo de que tengo una imagen de 400 * 300 jpg, la importo a flash y la achico a 200*100, esto es erroneo pues la película almacena el tamaño original de la imágen que es de 400*300 que es mucho mas pesada que la que fuera una verdadera imagen de 200*100, la solución a esto sería editar la imagen antes de usar, reducirla en tamaño, quizas la resolución pero no llegando a distorcionarla.

a continución escogí una imagen pequeña de 5,89 KB y al importarla:

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1           5851           5851    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                               0             0                     0

Mapa de bits                     Comprimido    Compresión
-----------------------------    ----------  --------  ----------
c00830106[1]                    5755      129200   JPEG importado=102 

FINALEMente utilizo botones, movieclips y codigo action script 3.0

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1           3917           3917    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                               0             0                     0

Símbolo                       Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
mv_down                                0             0                     0
btn_left                              44           283                     0
mv_carro                              21             0                     0
btn_move                              23            96                     0

Nombre de fuente                 Bytes        Caracteres   
-----------------------------    ---------    --------------
Times New Roman                2834   

ActionScript Bytes    Ubicación
------------------    ---------
               442    Clases de ActionScript 3.0

Para terminar,,,, este estudio lo hice para hacer una aplicación grande en flash , por eso es que me importa mucho el desempeño, quizas estos ejemplos que pongo son insignificantes, pero al tener una aplicación grande entran a taller muchos de estos y podemos elegir que componentes usar. Este etudio lo hice para mi aplicación pero lo quize compartir

saludos

[-[.:: NauJFracT ::.]-]

Oye. Pero que buen post. Muy interesante. Es tuyo?

[malkavian_net]

Oye. Pero que buen post. Muy interesante. Es tuyo?

claro que es mío,, si no hubiese puesto la fuente 

[malkavian_net]

,, Bien continuando con esto
si quiero utilizar animaciones, cuales serían las mas óptimas y rápidas. 

utilizaremos un ejemplo:

hacer un triángulo con borde y relleno.

Con action script:

primero el código:

Código:

var forma:Shape=new Shape();          //creamos forma
forma.graphics.lineStyle(2,0x000000); //elegimos borde 2 color negro
forma.graphics.beginFill(0xFF0000);   //le aplicamos relleno rojo

forma.graphics.moveTo(300,250);       //movemos el inicio de la forma a esta posicion
/*ahora dibujamos la forma*/
var lenght:uint=500;
linea.graphics.lineTo(lenght,lenght/2);
linea.graphics.lineTo(lenght - 100,100);
linea.graphics.lineTo(lenght - 200,lenght/2);
this.addChild(linea);                 //agregamos la forma al fotograma

ahora vamos a ver el desempeño de esta forma:

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1            507            507    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                               0             0                     0

ActionScript Bytes    Ubicación
------------------    ---------
               482    Clases de ActionScript 3.0

lo mismo uniendo lineas y rellanandolas:

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1            108            108    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                              68             0                     0

utilizando la herramienta polistar

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1            109            109    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                              67             0                     0

utilizando pluma y dandole relleno

Código:

Fotograma #    Fotograma Bytes    Total Bytes    Escena
-----------    ---------------    -----------    -----------------
      1            102            102    Escena 1 (Fotograma de exportación para clases de AS 3.0)

Escena                        Forma Bytes    Texto Bytes    ActionScript Bytes
--------------------------    -----------    -----------    ------------------
Escena 1                              60             0                     0

[malkavian_net]

  a lo anterior me falto dar la conclusión de que utilizando código action script en abundancia pudiendo utilizar las formas, hacemos mas pesada la aplicación, claro que hay veces que necesitamos usar programación para hacer las cosas interactivas

[malkavian_net]

lo del peso del action scrip es relativo ya que si por ejemplo necesitaramos 300 triangulos, no vamos a hacer uno por uno (gracias por la aclaración de Rizzo )

asi tenemos

Código:

for (var i:int; i<1000; i++) {
var forma:Shape=new Shape();//creamos forma
forma.graphics.lineStyle(2,0x000000);//elegimos borde 2 color negro
forma.graphics.beginFill(0xFF0000);//le aplicamos relleno rojo

forma.graphics.moveTo(300,250);//movemos el inicio de la forma a esta posicion
/*ahora dibujamos la forma*/
var lenght:uint=500;
forma.graphics.lineTo(lenght,lenght/2);
forma.graphics.lineTo(lenght - 100,100);
forma.graphics.lineTo(lenght - 200,lenght/2);


forma.y=Math.random()*800;
forma.x=0;
this.addChild(forma);
}

en el código anterior hay 1000 triángulos con

Código:

/*Frame #    Frame Bytes    Total Bytes    Scene
-------    -----------    -----------    ----------------
      1            591            591    Scene 1 (AS 3.0 Classes Export Frame)

Scene                        Shape Bytes    Text Bytes    ActionScript Bytes
-------------------------    -----------    ----------    ------------------
Scene 1                                0             0                     0

ActionScript Bytes    Location
------------------    --------
               566    ActionScript 3.0 Classes*/ 

esto como dije es relativo pues el peso de la escena depende de la cantidad de código que tengamos, y si utilizamos bucles,reutilización de código sería conveniente, pero hay casos en que no es posible utilizar el mismo código en varias partes de la película; asi que tenemos que optar por dibujar las formas