Leandono's Blog

La gente de la comunidad de Opera realizó un excelente cuadro comparativo con las 150 extensiones populares de Firefox y su pertinente Widget en Opera 9 (u opción).

Me sorprendió encontrar por ejemplo, que la extensión VideoDownloader de Firefox, posea un hermano Widget para Opera o la barra Web Developer tenga también su mellizo en Opera.

Si, porque no todo pasa por Firefox .

Comentarios | Leer más...

En el blog de Santiago Martin , podemos encontrar la traducción de un excelente artículo llamado "Pautas para integrar Photoshop y Flash " el cual narra los métodos de importación de archivos PSD (Photoshop) a Flash. El artículo además nos cuenta algunos tips y puntos a tener en cuenta al realizar esta conversión.

Por ultimo, también le comenté que en la próxima versión de Flash , existirá una opción directa para importar PSDs al escenario (se ve que la compra de Adobe ya está dando sus frutos), en The Flash Blog muestran algunos screenshots sobre esta opción.

Comentarios | Leer más...

La idea es comentar algunos consejos para optimizar el peso de los archivos SWF de Flash . Tal vez ustedes se pregunten...

¿Mejorar el peso para qué?

Simple. No todas las personas que entren a nuestro sitio tendrán una conexión de banda ancha y no hay nada más feo que entrar a una web hecha en Flash y ver al preloader sumar byte por byte...

Hoy en día son pocos los sitios en Flash que cargan todo el contenido de una sola vez. Habitualmente lo que se hace es dividir el sitio en varias películas e ir cargándolas a medida que el usuario lo requiere. El tamaño de cada película va a depender de la complejidad del sitio.

Lo ideal seria tener una presentación liviana e ir cargando las películas externas con un peso no mayor a 40 KB aunque como bien dije todo va a depender de la complejo que sea la web.

Asi que empecemos a hablar un poco sobre el tema...

• Por lo general cuando estamos desarrollando un trabajo en Flash solemos repetir elementos en el escenario (Botones, MovieClips, Gráficos, etc). ¿Para qué dibujar lo mismo varias veces cuando podemos tener mismos símbolos con diferentes propiedades? La utilización de instancias de símbolos ayuda a bajar el tamaño final. Por ejemplo si necesitamos dos círculos de diferentes tamaños y colores, no vamos a crear dos círculos diferentes, sino creamos uno, lo convertimos en símbolo y lo copiamos en el escenario. Luego con los paneles modificamos el color y tamaño de cada uno;

• El entorno de autor de Flash fue pensado como el escritorio de un dibujante/animador. Sin embargo si necesitamos realizar alguna animación en movimiento no es recomendable realizarla fotograma por fotograma sino utilizar Interpolaciones de Movimiento debido a que Flash realiza varios cálculos complejos para crear la animación y optimizar el archivo final en peso;

• Con los mapas de bits podemos crear texturas que con vectores no podemos. Sin embargo utilizarlos incrementa varios KB al archivo final. No quiero decir que nunca hay que utilizarlos, son necesarios en muchas ocasiones, por ejemplo como fondos estáticos. Si los vamos a utilizar tratar de comprimirlos lo mejor posible sin perder mucha calidad. Para eso podemos utilizar la opción Exportar para web en Photoshop o utilizar programas como el PIXresizer;

• Al utilizar cualquier componente incrementaremos 30 KB el archivo final . Para evitar esto podemos buscar alternativas o construir nosotros mismos al elemento suplente;

• Una de las ventajas de Flash es la posibilidad de mostrar textos estáticos con cualquier tipografía. En contrapartida si utilizamos fuentes muy complejas (ejemplo: Cocaine sans) ó fuentes incrustadas (en caso de utilizar textos dinámicos o de entrada) incrementaremos el peso del archivo final. Si tan solo deseamos mostrar un texto podemos utilizar fuentes pixeladas que son mucho más livianas o usar fuentes standards como Arial, Verdana, etc;

• Sigo con el tema de las fuentes, si utilizamos fuentes incrustadas, solo incorporar los caracteres necesarios;

• Al incorporar música al sitio, probar con distintos bitrate hasta encontrar un sonido entendible, no distorsionado y no muy desproporcionado en peso;

• Optimizar el código y no repetirlo. Utilizar funciones genéricas que puedan ser reutilizadas. Habituarse a usar un código centralizado y no desparramado por diferentes elementos. Utilizar más o menos comentarios dentro del código no afecta al archivo final ya que Flash no los incorpora al exportar el swf;

Comentarios | Leer más...

¿Cuántas veces ha pasado que el maldito preloader no cargaba ó al presionar el botón no sucede lo que queríamos? Problemas típicos en Flash que por lo general tienen un mismo motivo: Una mala comunicación entre MovieClips.

Cuando nosotros creamos un MovieClip dentro de otro estamos generando un esquema jerárquico. Esta "anidación" creada da lugar a relaciones de parentesco entre Movieclips. Es asi que si tenemos tres Movieclips, uno dentro de otro, tendremos una relación de parentesco Abuelo>Padre>Hijo, como muestra la imágen de arriba.

Pueden ver que arriba de Abuelo tenemos a _root, este representa el "piso" en donde se encuentran alojados todos los MovieClips y elementos de la película. Sin _root no hay película.

En Flash existen dos tipos de comunicación: Absoluta y Relativa. Además poseemos 4 términos de referenciación: this (hace referencia al elemento en si), _parent (hace referencia al elemento padre), _root (hace referencia al piso de la película) y _level (hace referencia al nivel en donde está situado el elemento a hacer referencia).

La diferencia entre comunicación Absoluta y Relativa es que en la primera siempre se debe partir de _root.

Veamos algunos ejemplos. Tenemos esta jerarquía:

1. Queremos ir de abuelo a hijo_1 y ejecutar stop():

Modo Absoluto: _root.abuelo.padre.hijo_1.stop();

Modo Relativo: padre.hijo_1.stop();

2. Queremos ir de  hijo_1 a hijo_2:

Modo Absoluto: _root.abuelo.padre.hijo_2.stop();

Modo Relativo: _parent.hijo_2.stop();

3. Queremos ir de abuelo a padre:

Modo Absoluto: _root.abuelo.padre.stop();

Modo Relativo: padre.stop();

4. Queremos ir de padre a padre (ir al mismo simbolo):

Modo Absoluto:  _root.abuelo.padre.stop();

Modo Relativo: this.stop();

5. Queremos ir de hijo_1 a abuelo:

Modo Absoluto: _root.abuelo.stop();

Modo Relativo: _parent._parent.stop();

Finalmente hay que tener en cuenta en dar nombre de instancia a todos los elementos enlazados o sino no podremos enlazar nada :D

Comentarios (3) | Leer más...