Molti lettori di JuliusDesign mi chiedono spesso come adattare un sito Flash a tutte le risoluzioni del monitor.

Che dimensioni devo usare? Devo inserire qualcosa nel CSS o in ActionScript?

Le idee sono molto confuse, vediamo di chiarire alcuni concetti base

Prima di tutto ricordiamoci di pubblicare il nostro filmato flash al 100%

In seguito non dimentichiamo che con Firefox c’è un piccolo bug, ovvero il nostro sito pubblicato al 100% sia in larghezza che in altezza verrebbe tagliato in quanto FF vuole avere anche un valore in altezza

Quindi andiamo a inserire uno Stile interno alla pagina in questo modo

<style type="text/css">
* {
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>

Abbiamo impostato margine e padding a 0, l’altezza al 100% e indicato al browser di eliminare lo scroll bar di destra, quest’ultima prassi è opzionale.

In seguito in flash ricordiamo sempre di inserire

Stage.align = "TL"; // imposto l'allineamento in alto a sinistra
Stage.scaleMode="noscale"; //Non scalo i contenuti

Vi consiglio di inserire un’immagine formato 1600×1200, ovviamente ottimizzate al meglio con un editor di immagini esterno e se non bastasse, impostate al 50% la qualità dalla libreria in Flash

Questo esempio potrebbe ricordare un articolo scritto riguardante StageResize, ma voglio farvi notare bene l’immagine di sfondo.

Infatti noterete che in questo esempio l’immagine viene proporzionata in larghezza e mai distorta.

Provate a ridimensionare più volte la pagina di esempio vedrete il ridimensionamento corretto dell’immagine senza farla sgranare

Scarica il sorgente
Guarda il Tutorial

Grazie a Marco per la segnalazione

, , , , , , , , ,

731 visite

Scritto da Giuliano Ambrosio

Giuliano Ambrosio è un Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web.
Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.

  • Twitter
  • Facebook
  • StumbleUpon
  • del.icio.us
  • FriendFeed
  • Technorati
  • Digg
  • Turn this article into a PDF!
  • E-mail this story to a friend!