Ottimizzare una pagina per smartphone o tablet (rigorosamente Android) con un elemento in Flash tramite CSS3 e HTML5 è possibile? Ebbene si. In questo esempio, che potrebbe sembrare un “esercizio di stile”, vedremo come tramite media queries, css3 e html5 potremo formattare un elemento di Flash all'interno di una pagina.

Riproponendo un vecchio articolo sull'ottimizzazione delle pagine HTML5 per smartphone, tablet e quant'altro, cominciamo questo tutorial creando un elemento (ad esempio un menu  – giusto “per provare ”, i SEO mi perdonino!) in Flash. Questo file Flash deve essere in grado anzitutto di riconoscere automaticamente quando viene ridimensionato.

Immaginiamo di avere una pulsantiera di 3 bottoni (che avranno nome istanza  ad esempio “menu1”, “menu2”, “menu3”) inizialmente posizionati orizzontalmente (versione browser/tablet). Fig1

Quindi scriviamo il codice sul fotogramma chiave:

import flash.events.Event;<br />    <br />    stage.align=StageAlign.TOP_LEFT;<br />    stage.scaleMode=StageScaleMode.NO_SCALE;<br />    <br />    var menu:Array=new Array();<br />    menu=[menu1, menu2, menu3];<br />    <br />    checkStage();<br />    stage.addEventListener(Event.RESIZE, resizeMe);

function resizeMe(evt:Event)<br />    {   <br />        checkStage();<br />    }<br />    function checkStage()<br />    {<br />        if(stage.stageWidth<201)<br />        {<br />            inblock();<br />        }else{<br />            inlinea();<br />        }<br />    }<br />    function inblock()<br />    {<br />        for(var i:int=0; i<menu.length; i++)<br />        {<br />            menu[i].x=20;<br />            menu[i].y=40+(menu[i].height+10)*i;<br />        }<br />    }<br />    <br />    function inlinea()<br />    {<br />        for(var i:int=0; i<menu.length; i++)<br />        {<br />            menu[i].x=20+(menu[i].width+10)*i;<br />            menu[i].y=40;<br />        }<br />    }

In tutto questo codice chi veramente determina la riuscita del tutorial è l'evento “Resize” che permette a Flash di capire se lo stage è stato scalato o meno. Ovviamente all'interno della condizione del metodo “checkStage()” controllo che le dimensioni siano o meno minori di 201 pixel. In caso positivo il menu sarà verticale altrimenti orizzontale.

Spostiamoci ora nella pagina HTML. L'unica cosa che devo effettivamente ricordare (salvo ovviamente utilizzare le “media queries” ) è qualla di impostare il file Flash a dimnesioni 100% sia per la larghezza che per l'altezza. Così facendo infatti il CSS impostarà – in funzione che la pagina venga visualizzata da browser, smartphone o tablet – l'elemento nelle corrette dimensioni. Il file Flash – che occuperà tutto lo spazio disponibile dell'elemento – si adatterà di conseguenza.

Di seguito allego due screenshot esemplificativi di come dovrebbero venire.

Nota: il miglior browser che permette la visualizzazione "tipo" smarthphone è Opera 11. Consigliamo quindi l'uso di questo browser per il test.

Versione BROWSER/TABLET

Versione SMARTPHONE

Di seguito allego il link al file di esempio.

The following two tabs change content below.