bases para optimizar aplicaciones flash.

MaLkAvIaN_NeT · #1 (**permalink**) 01/09/2007, 21:09

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

roceth · #2 (**permalink**) 03/09/2007, 04:53

Buen trabajo.

Teines razón, antes, cuando las memorias se contaban en Kb, se tomaban muchas molestias en reducir peso. Ahora se ha perdido esta sana costumbre.

Un saludo

MaLkAvIaN_NeT · #3 (**permalink**) 03/09/2007, 13:36

,, 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

con esto concluimos de que utilizando código action script en abundancia pudiendo utilizar las formas, hacemos mas pesada la aplicación, claro hay veces que necesitamos usar programación para hacer las cosas interactivas

Rizzo · #4 (**permalink**) 03/09/2007, 14:04

Cita:

con esto concluimos de que utilizando código action script en abundancia pudiendo utilizar las formas, hacemos mas pesada la aplicación

eso depende, si vas a hacer un triangulo como adorno o lo que sea para eso esta la herramienta pluma o polystar. pero si vas a hacer una aplicacion por ejemplo en la que se deban generar muchos triangulos no vamos a estar dibujando uno por uno.

por ejemplo:

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);
}

ahi hay 1000 triangulos con:

Código PHP:

  /*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*/

en mi conclusion usar formas con pluma ,polystar o codigo es relativo a lo que vas a hacer, en este caso hacer un triangulo ganaria un diseñador en bytes pero al hacer 1000 triangulos ganaria un codificador en bytes.

MaLkAvIaN_NeT · #5 (**permalink**) 03/09/2007, 14:29

,,Bueno si Rizzo tienes mucha razon, mi conclución fue de que mientras mas codigo hay mas aumenta el tamaño, obviamente si utilizamos bucles, clases, reutlización de código este disminuye y por tanto tamaño del archivo en bytes.

por eso al final dije que a veces si es necesario usar la programación si o si en casos como dibujar 100 triangulos

en caso de que no tengamos por ejemplo una sola forma geométrica, que sean distintas en propiedades y semejanzas, personalizadas si tendríamos que programarlas una a una

claro que por alli reutilizariamos una variable u otra cosa.

gracias por el comentario