Actionscript 3.0: optimizaciones (II)

Continuación del artículo de optimizaciones en Actionscript 3.0

Sumar / Concatenar cadenas de texto (Strings)

Método: concat()

  1.  
  2. var t:Number = getTimer();
  3. var txt1:String = "Esto es";
  4. var txt2:String = "una prueba de rendimiento";
  5. var txt3:String = "de concatenacion de cadenas"
  6. var txt:String;
  7. for(var i:uint = 0;i < 1000000; i++){
  8. txt = txt1.concat(" ", txt2, " ",txt3);
  9. }
  10. trace(getTimer() - t);
  11.  

Resultado: 2034 ms




Método: operador +

  1.  
  2. var t:Number = getTimer();
  3. var txt1:String = "Esto es";
  4. var txt2:String = "una prueba de rendimiento";
  5. var txt3:String = "de concatenacion de cadenas"
  6. var txt:String;
  7. for(var i:uint = 0;i < 1000000; i++){
  8. txt = txt1 + " " + txt2 + " " + txt3;
  9. }
  10. trace(getTimer() - t);
  11.  

Resultado: 894 ms



Conclusión: sumar Strings con + es 2 veces más rápido que utilizar el método concat() de la clase String().

Calcular mínimo / máximo de 2 números

Método: Math.min() / Math.max()

  1.  
  2. var t:Number = getTimer();
  3. var n1:Number = 234;
  4. var n2:Number = 675
  5. var n:Number;
  6. for(var i:uint = 0;i < 1000000; i++){
  7. n = Math.min(n1,n2);
  8. }
  9. trace(getTimer() - t);
  10.  

Resultado: 149 ms




Método: condicionales

  1.  
  2. var t:Number = getTimer();
  3. var n1:Number = 234;
  4. var n2:Number = 675
  5. var n:Number;
  6. for(var i:uint = 0;i < 1000000; i++){
  7. n = (n1>n2)?n2:n1;
  8. }
  9. trace(getTimer() - t);
  10.  

Resultado: 25 ms



Conclusión: una vez más, hacerlo "a mano" es más rápido.

Multiplicación vs División

Método: división

  1.  
  2. var t:Number = getTimer();
  3. for(var i:uint = 0;i < 10000000; i++){
  4. var n:Number = i / 2;
  5. }
  6. trace(getTimer() - t);
  7.  

Resultado: 226 ms




Método: multiplicación

  1.  
  2. var t:Number = getTimer();
  3. for(var i:uint = 0;i < 10000000; i++){
  4. var n:Number = i * .5;
  5. }
  6. trace(getTimer() - t);
  7.  

Resultado: 225 ms



Conclusión: esta era una de las "leyendas urbanas" que siempre habia oido pero nunca habia testeado. Por lo que he estado investigando, hasta alguna versión de FP9, era más rápido multiplicar que dividir un número, pero en las nuevas versiones de Flash Player ya no es así.

mas

Actionscript 3.0: optimizaciones (I)

Etiquetas: Math.floor Math.abs

Este artículo recoge algunos test de rendimiento para diversas operaciones en Actionscript 3.0. Este es un tema que me interesa bastante, asi que espero hacer mas test e ir ampliando información en el futuro.

Los test se han realizado en un Core2 6420 2,13Ghz, con 3GB de RAM y Windows Vista Home Premium de 32 bits. La versión de Flash Player es la 10,0,2,54.

 

Recorrer elementos de un Array (de 1 millón de elementos)

  1.  
  2. var t:Number = getTimer();
  3. var temp:int;
  4. for(var i:Number = 0; i < matriz.length; i++){
  5. temp = matriz[i];
  6. }
  7. trace(getTimer() - t);
  8.  

Resultado: 130 ms

 

Si sustituimos el tipo de i de Number a uint:

  1.  
  2. var t:Number = getTimer();
  3. var temp:int;
  4. for(var i:uint = 0; i < matriz.length; i++){
  5. temp = matriz[i];
  6. }
  7. trace(getTimer() - t);
  8.  

Resultado: 95 ms

 

Si almacenamos matriz.length en una variable:

  1.  
  2. var t:Number = getTimer();
  3. var temp:int;
  4. var l:uint = matriz.length;
  5. for(var i:uint = 0; i < l; i++){
  6. temp = matriz[i];
  7. }
  8. trace(getTimer() - t);
  9.  

Resultado: 23 ms

 

En definitiva, solo con poner uint (entero positivo) como tipo de i, y con almacenar la longitud de la matriz en una variable, hacemos que el bucle se ejecute 5,6 veces más rápido.

 

Redondear números (Math.floor)

  1.  
  2. var t:Number = getTimer();
  3. var temp:Number;
  4. for(var i:uint = 0;i < 1000000; i++){
  5. temp = Math.floor(1.7);
  6. }
  7. trace(getTimer() - t);
  8.  

Resultado: 163 ms

 

  1.  
  2. var t:Number = getTimer();
  3. var temp:Number;
  4. for(var i:uint = 0;i < 1000000; i++){
  5. temp = uint(1.7);
  6. }
  7. trace(getTimer() - t);
  8.  

Resultado: 29 ms

 

  1.  
  2. var t:Number = getTimer();
  3. var temp:Number;
  4. for(var i:uint = 0;i < 1000000; i++){
  5. temp = int(1.7);
  6. }
  7. trace(getTimer() - t);
  8.  

Resultado: 18 ms

 

Este test me ha sorprendido mucho. Convertir el número a int(entero), es 9 veces más rápido que utilizar Math.floor(). Teniendo en cuenta que el resultado es el mismo, y que encima int tiene menos letras que Math.floor, no veo motivos para no desterrar a Math.floor().

 

Obtener el valor absoluto de un número (Math.abs)

  1.  
  2. var t:Number = getTimer();
  3. var temp:Number;
  4. var n:Number = -53.44;
  5. for(var i:uint = 0;i < 1000000; i++){
  6. temp = Math.abs(n);
  7. }
  8. trace(getTimer() - t);
  9.  

Resultado: 145 ms

  1.  
  2. var t:Number = getTimer();
  3. var temp:Number;
  4. var n:Number = -53.44;
  5. for(var i:uint = 0;i < 1000000; i++){
  6. temp = n < 0 ? n * -1 : n;
  7. }
  8. trace(getTimer() - t);
  9.  

Resultado: 26 ms

Es decir, obtener el valor absoluto "a mano", 5,5 veces más rápido que utilizar Math.abs()

mas

AS3Dmod: utilización básica con Papervision

Etiquetas: Bend ModifierStack Phase LibraryPv3d viewport3D BasicRenderEngine Plane

AS3Dmod: utilización básica con Papervision

AS3Dmod es una libreria de modificadores para objetos 3D. Actualmente AS3Dmod dispone de 7 modificadores (doblar, deformar...) que funcionan con Papervision3D, Away3D, Sandy3D y Alternativa3D. Aunque hay muy poca documentación (sobre todo en castellano), es bastante fácil de utilizar. Los pasos para poder utilizarla son los siguientes:

-Descargar AS3Dmod:

Logo de AS3Dmod

-Saber utilizar alguno de los 4 motores 3D compatibles. Puedes ver tutoriales de Papervision3D y Away3D en esta misma página.

-Una vez tenemos nuestra escena 3D en alguno de los motores, creamos una instancia de ModifierStack. El "modifier stack" es un link entre el objeto que queremos modificar y los modificadores:

  1. mstack = new ModifierStack(new LibraryPv3d(), plano);

Podemos ver como se pasan como parámetro un objeto indicando la librería que vamos a utilizar (en este caso Papervision), y el objeto que vamos a modificar (un plano).

-Ahora necesitamos crear un modificador, y añadirlo a mstack. Para el ejemplo he utilizado "Bend", que recibe como parámetros la fuerza y el lugar donde se aplica:

  1.  
  2. bend = new Bend(0, 1);

  1. mstack.addModifier(bend);

-Por último, cada vez que se haga un cambio en el modificardor, debemos aplicarlo (algo asi como ordenar que se renderice):

  1. mstack.apply();

Para este ejemplo he utilizado una clase de AS3Dmod que se llama Phase. Esta clase sirve para crear una animación tipo seno. Es decir, nosotros incrementamos su valor, y ella controla de que siempre esté entre -1 y 1. Es decir, si incrementamos su valor en 0.5 en cada fotograma, cuando llegue a 1 volverá sobre sus pasos hasta valer -1, y viceversa.

Este es el código completo comentado:

mas

Dibujar en un cristal con vaho en Actionscript 3.0

Etiquetas: addEventListener MOUSE_MOVE drawCircle beginFill endFill

Dibujar en un cristal con vaho en Actionscript 3.0

Este ejemplo muestra como hacer el efecto de "pintar sobre el vaho" en un cristal. Esta es la manera más sencilla que en encontrado de hacerlo, desde el punto de vista de alguien con pocos conocimientos de programación. Para hacer este efecto necesitamos:

-Imagen del cristal con vaho:

Ventana con vaho

-Imagen de cristal sin vaho:

Imagen de cristal sin vaho

-Nociones de AS3 (Sobre todo de la API de dibujo)

Los pasos a seguir serían los siguientes:

-Importar las dos imágenes a Flash, y poner cada una en una capa (la imagen sin vaho por encima de la con vaho), en la posición (0,0)

-Crear un clip vacio y llamarlo "Mascara_mc". Ponerlo en (0,0)

-Hacer que "Mascara_mc" sea la mascara para la imagen sin vaho. Aquí tenemos un pequeño "problema", y es que al estar vacio, no nos va a aplicar bien la máscara. Por ello, antes de ponerlo como máscara, nos metemos dentro de "Mascara_mc" y dibujamos un pequeño cuadrado.

La linea de tiempo nos quedaría asi:

Linea de tiempo en Flash

-Por último, tenemos que programar la escena, para que cuando hagamos click, se dibuje dentro de "Mascara_mc" y se vaya destapando la imagen con vaho.

El código en Actionscript 3.0, y el resultado, son los siguientes:

mas

Papervision: creado grupo de Google en castellano

Papervision: creado grupo de Google en castellano

Hace un par de semanas se creo un grupo en Google de Papervision en castellano.

Podéis apuntaros aqui:

-Acceder al grupo ESPapervision

mas

Adobe Flash Catalyst

Flash Catalyst

Adobe Flash Catalyst es una nueva herramienta de Adobe, que permite crear contenidos interactivos sin programar. Por lo que he visto, es como el "hermano diseñador" de FLEX. Catalyst permite crear interfaces por medio de componentes, que pueden configurarse mediante menús de ayuda. Por ejemplo, podemos crear un menú que cargue distintas secciones con distintas transiciones, y poner a los botones efectos over sin escribir ninguna linea de código.

Flash Catalyst

Además, Adobe Flash Catalyst está integrado con el paquete de CS4, y permite importar archivos de Illustrator, Photoshop y Fireworks, respetando las capas y los objetos. Como en Flex, todo lo que hacemos en vista de diseño, se refleja en un mxml que después se podrá compartir con Gumbo (Flex 4), para añadir comportamientos más avanzados.

De momento no está disponible para comprar, pero se espera una beta pública en los próximos meses.

mas

Eliminar dobles saltos en textos cargados en XML

Etiquetas: charCodeAt charAt

Cuando cargamos un XML cuyos textos contienen saltos de linea, Flash duplica los saltos. Es decir, que si en el XML hemos puesto dos lineas separadas por un salto, en Flash aparecerán separadas por dos. Para solucionarlo, podemos aplicar una función al texto antes de mostrarlo en el campo de texto.

La función que podemos aplicar es la siguiente:

mas

Away3D: Manejo de eventos de ratón para Away 2.2

Etiquetas: View3D addOnMouseDown MouseEvent3D object Plane

Away3D: Manejo de eventos de ratón para Away 2.2

Para interactuar con el ratón en objetos 3d en Away3D 2.2, tenemos que seguir 2 pasos:

-Añadir el evento al objeto, utilizando la función addOnMouseDown (en este caso para detectar que hemos presionado en el objeto). A addOnMouseDown le pasamos como parámetro la función en la que se recoje el evento:

  1. p.addOnMouseDown(planoElegido);

-Recoger el objeto pulsado en la función, por medio del parámetro object:

  1. current = e.object;

El código completo:

mas

Estadísticas de Google Analytics para esedeerre.com en 2008.

Gracias a Google analytics, podemos conocer las estadísticas de navegación de los usuarios que visitan nuestras páginas, y asi poder optimizar los diseños y contenidos a los perfiles que más nos interesen. Hay que tener en cuenta que los perfiles de usuario variarán según la temática de la página. No tiene el mismo perfil el usuario de una página de programación, que el de una página de cocina (aunque habrá usuarios que ven páginas de programación y cocina). Estas son las estadísticas de www.esedeerre.com en 2008:

Usuario únicos: 19255

Versiones de Flash:

Podemos ver como solamente el 1,81% de los usuarios no tiene Flash Player instalado, y casi el 97% de los usuarios tiene instalado Flash Player 9 o superior. Las versiones de Flash Player 10 alcanzan el 18% de media en el año (un 58% durante el mes de Diciembre), por lo que podemos pensar que el año que viene los usuarios con FP10 superaran el 90%.

Estadisticas Flash Player

Navegadores:

El pastel se lo reparten Firefox (53,54%) e Internet Explorer (36,54%). Muy por detrás, Safari (3,81%), Opera (3,55%) y Chrome (2,09%).

estadísticas navegadores

Sistema operativo:

Mayoria de Windows (88,59%). Macintosh alcanza un 9,90%, y las distribuciones de Linux un 1,33%.

estadísticas sistema operativo

Resoluciones de pantalla:

Lo más importante de este apartado es el descenso del 800x600 (solamente un 1,57%). Siguen siendo mayoria los monitores 4:3, con un 25,71% de 1024x768, y un 22,14% de 1280x1024. Además, durante el mes de Diciembre los porcentajes se mantienen, lo que parece indicar un cierto estancamiento en la extensión de los panorámicos. Veremos si en Enero, con los Reyes Magos, los panorámicos desbancan o por lo menos se acercan a los 4:3.

estadisticas resoluciones

mas

Galeria esférica en Actionscript 3.0 y Away3D

Galeria esférica en Actionscript 3.0 y Away3D

Esta es la tercera versión de la galeria esférica. He estado intentando aplicar suavizado en PPV, pero por mucho que reduzco materiales mi procesador muere. Como llevo tiempo viendo demos de Away con materiales suavizados y bastante bien de rendimiento, me he bajado las clases y he migrado el código, aplicando suavizado. El resultado es este:

ESPECIFICACIONES

Lenguaje: Actionscript 3.0 y XML. Away3D.

Compatibilidad: Flash Player 9 o superior

Imágenes: Para esta demo he conectado la galería con la cuenta de Flickr de Lola

Peso: 107KB

mas

Páginas: [1] [2] [3] [4] 5 [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16]