Abbiamo più volte parlato del progetto “Smokescreen”, che consente di convertire automaticamente contenuti in Flash per renderli compatibili su iPhone OS. Oggi, grazie al nostro utente Piersoft, vi spieghiamo come fare per creare un sito web in maniera alternativa…
Ecco quello che ci scrive Piersoft:
Ciao a tutti, come promesso metto a fattor comune un semplice metodo per realizzare un sito (semplice) in Macromedia Flash (8 o 10) compatibile con iPad/iPhone/iPod… insomma con iPhoneOS.
Il progetto originale è stato già trattato da iPhoneitalia, e si chiama Smokescreen. Io l’ho modificato e reso “universale” nel senso che il codice della pagina web riconosce il browser ed esegue il Flash in maniera classica piuttosto che eseguire un javascript che converte il flash in html5.
Ci sono alcune limitazioni. Il progetto è ancora alle prime armi. I files swf devono essere semplici e fatti da Flash e non altri programmi, altrimenti verrebbero rallentati i frames come fattomi notare da Nikon, webdesigner flash. Per i filmati nulla da fare (ancora).
L’idea è quella di sviluppare un plugin da mettere nel Safari Mobile per convertire i siti lato client, ma la vedo dura. Per ora riesce bene la conversione lato server. Attenzione! Non è un re-tool. Si sarebbe potuto fare in maniera più semplice, ma si tratta di un convertitore realtime che alla fine impatta solo su alcune righe di codice nel sito. I file swf rimangono invariati, quindi il webdesigner, se vuole modificare qualcosa, deve lavorare sulle animazioni flash e non deve toccare nulla della struttura del sito..
Quindi vi faccio vedere il codice che dovete inserire nella pagine web (vi allego le cartelle con i js, una con un demo flash e il files index.html che contiene il codice e che dovete copiare nella root del vs sito):
<!DOCTYPE html>
<html>
<title>:: Flash con iPhoneOS by Piersoft :: progetto smokescreen.us</title>
<head>
<meta name=”viewport” content=”width=device-width, user-scalable=yes”>
<script type=”text/javascript” src=”js/smokescreen.0.1.3-min.js”></script>
<script type=”text/javascript” src=”js/swfobject.js”></script>
<script language=”JavaScript”>
function urlParam(name, _default) {
name = name.replace(/[\[]/,”\\\[“).replace(/[\]]/,”\\\]”)
var regexS = “[\\?&]” + name + “=([^&#]*)”
var regex = new RegExp(regexS)
var results = regex.exec(window.location.href)
if (results == null) {
return _default
}
else {
return results[1]
}
}
function embed(container, withSmokescreen) {
var size = urlParam(‘size’, 1)
var url = ‘flash/home.swf’
var width = 450 * size
var height = 250 * size
var params = {}
if (withSmokescreen) {
if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1) || (navigator.userAgent.indexOf(‘iPad’) != -1)) {
var name = ‘home’
var element = document.getElementById(container)
new Smokescreen(url, element, width, height, name, params)
}
}
else {
swfobject.embedSWF(url, container, width, height, ‘9.0.0’, null, params)
}
}
</script>
</head>
Nulla di fantascientifico. c’è una funzione che prende il file nella cartella flash/home.swf e pone un if: se il navigator (cioè il browser) è un iPhone/iPad/iPod allora esegue lo script smokescreen.0.1.3-min.js che si trova nella cartella js della root. altrimenti esegue un Flash normalmente.
Poi dentro al body dobbiamo richiamare dove vogliamo la funzione. Ecco la parte di codice:
<body>
<div id=”fljs”>
</div>
<script>
embed(‘fljs’, true)
</script>
</div>
<div>
<div id=”flash-container” width=”450″ height=”500″>
</div>
<script>
embed(‘flash-container’, false)
</script>
</body>
Qui si dice che viene richiamato sia il flash che lo smokescreen a seconda se sono compatibili o no (se vogliamo è la condizione di sopra del browser).
Sappiate che browser moderni come Firefox leggono lo smokescreen! Per cui se avessi lasciato lo smokescreen senza alcuna condizione, il sito girerebbe in flash ma se vi collegate con explorer avrete errore… in pratica questa modifica, paradossalmente, mi serve per rendere il sito compatibile con IE (viene eseguito il flash tradizionale) dato che è html5 convertito (e quindi compatibile con gli altri moderni browser compreso Safari Mobile.
Spero di essere stato chiaro. Un sito interamente fatto in flash e “visitabile” è www.tappetoin.com.
Se volete potete mettere un vostro file flash nella cartella flash, cambiate il nome nella riga dove c’è var url = ‘flash/home.swf’, cambiate le dimensioni in var width = 450 * size var height = 250 * size e se volete in var params = {} potete trasformarlo in var params = {clickTag: ‘http://www.vostrosito.com’} dove ovviamente vostrosito.com è un link esterno…
Buon divertimento/lavoro a tutti.