Requisitos de la cabecera

Consideraciones generales

• Si el swf ocupa más de 60 o 70Kb considera usar un preloader.

• Intenta optimizar al maximo el tamaño de las imágenes. Usa JPGs para imágenes con muchos colores y degradados y GIFs o PNGs para imágenes con pocos colores o sin degradados.

• Si usas imágenes fijas de fondo hazlas lo más anchas posible. 536px es el área de cabecera que se verá a 800x600 y 1200px es el área de cabecera que se ve a 1400x1050.

• Es muy recomendable no ponerle música de fondo. Si usas efectos de sonido que sean por efecto del usuario.

• Los diseños de gamersmafia son flexibles, se adaptan al tamaño de la ventana del navegador por lo que las películas flash deberían ser flexibles también. Para más información mira el esqueleto de cabecera que describo más abajo.

Flash de ejemplo

Esto no es un tutorial sobre cómo usar flash. Este tutorial solo pretende ser una sencilla guía para aquellos que ya saben usar flash. Al final de la guía hay un par de enlaces a webs que enseñan cómo usar flash.

Descargar flash de ejemplo [17Kb] (Necesitas Adobe Flash Professional 8, CS3 o superior).

El flash de ejemplo consiste en una simple cabecera con el logo de gm que se posiciona en el lado derecho teniendo en cuenta el ancho de la ventana.

En la cabecera hay 4 layers, uno para el código, otro para el logo de gm, otro para la zona transparente en la que al pinchar te lleve a la portada y el último layer es para aplicar el color de fondo a la cabecera. Este último layer es necesario por el sistema que usamos de cargar un flash a partir de otro y a la vez tener desactivado el escalado;

Explicación del código de ejemplo del Flash

// Necesario para que el origen de coordenadas a la hora de posicionar todos los elementos sea la esquina superior izquierda
Stage.align = "LT";

// Necesario para que la cabecera se estire a lo ancho sin deformarse
Stage.scaleMode = "noScale";

// Mejora de rendimiento a la hora de películas con vectores (F1 en flash para más info)
this.cacheAsBitmap = true;

// Posicionamos el fondo transparente clickeable y el fondo blanco a la izquierda del todo
clicker._x = 0;
bgw._x = 0;

// Creamos un objeto que se encargue de llamar a la función que actualiza los anchos y las posiciones de los objetos que dependen del tamaño de la película
stageListener = new Object();
stageListener.onResize = function() {
  stretchHeader();
}


// Añadimos el objeto a la película de forma que se llame
Stage.addListener(stageListener);

// Definimos qué ocurre cada vez que se resizea la película
stretchHeader = function() {
  // La zona clickeable es toda la película menos los últimos 86px de la derecha de forma que no se pinche por error yendo a inicio cuando se quería cambiar de canal

  clicker._width = Stage.width – 86;
  bgw._width = Stage.width;
  mrgod._x = Stage.width - mrgod._width - 5;
}

stretchHeader();

Cualquier pregunta o sugerencia sobre la guía comentadlo y la iré actualizando. El límite de lo que pueden hacer las cabeceras lo ponéis vosotros, pueden ser interactivas, más estáticas como las que hemos ido poniendo estos meses, juegos, radios, etc

Webs para aprender flash

http://www.tutoriales-flash.com/ (en español)

http://www.adobe.com/support/documentation/es/flash/ (en español)

http://www.tutorialized.com/tutorials/Flash/1(en inglés)