Share
In questo tutorial imparerai come utilizzare lo script SWFObject per configurare il reindirizzamento automatico da un sito Web Flash a un sito Web di backup non Flash quando viene visualizzato su un iPad.
Ecco un semplice mock-up di un sito Web Flash che utilizzeremo in questo tutorial. Se provi ad accedere a quella pagina usando iPad, non sarai in grado di vedere alcun contenuto.
Ed ecco il risultato finale su cui lavoreremo. se accedi con iPad sarai in grado di vedere la pagina animata.
Quando soffia il vento del cambiamento, alcune persone costruiscono muri, altri costruiscono mulini a vento.
- Antico proverbio cinese
Penso che l'iPad sia un ottimo dispositivo, anche se capisco perché l'introduzione del tablet Flashless abbia fatto impazzire alcune persone. Ammetto che all'inizio mi ha fatto impazzire: poco prima che iPad comparisse nel mio negozio Apple locale, ho finito un sito web Flash che consideravo il mio capolavoro personale, e sono rimasto sorpreso quando, provando ad aprirlo con iPad, invece del mio ultra-cool Animazione Flash Sono stato reindirizzato al sito di backup non Flash che ho impostato "just in case". Confesso che mi ci è voluto un po 'di tempo per adattare la mia mente ad iPad, ma gradualmente ho imparato a credere che, come tutti i lavori pionieristici, ha dovuto uscire dalla zona di comfort, e immagino di essere figo con quello.
Naturalmente ciò che mi ha aiutato ad arrivare a questo atteggiamento filosofico è stato il numero di persone che mi hanno assunto per impostare reindirizzamenti simili ai loro siti Web Flash esistenti. Non potevano permettersi o non volevano sostituire i loro siti Flash di fantasia e ben progettati con quelli più semplici ma più compatibili con l'iPad, quindi l'opzione di impostare il reindirizzamento automatico dell'iPad su un sito HTML semplice e semplice faceva appello a loro.
(Si potrebbe obiettare che, anche non essendo in grado di riprodurre animazioni Flash, iPad è più aperto verso JavaScript, ma sfortunatamente non è così: la maggior parte dei siti animati da JavaScript non funziona bene su iPad. Prova uno di questi dieci JavaScript siti web animati sul tuo computer e poi su iPad per vedere cosa intendo.
Dovremo attendere fino a quando HTML5 non sarà completamente implementato per vedere la nuova Internet in cui i plug-in di terze parti come Flash Player perdono gradualmente la sua importanza. Nel frattempo, il rilascio del tablet iPad ha creato una nuova nicchia temporanea nello sviluppo di siti Web: iPad che impermeabilizza i siti Web Flash esistenti. Esistono migliaia di eccellenti siti Web Flash che potrebbero beneficiare di tale servizio; è un'ottima opportunità di lavoro per ragazzi come te e me.
Ci possono essere molti modi diversi per iPad-proof un sito Web Flash, alcuni migliori di altri. Questo tutorial offre solo una possibile soluzione semplice. Quindi mettiamoci al lavoro.
Potrebbe essere un sito Web non Flash completo contenente la versione HTML di tutto il contenuto copiato dal sito Flash o solo una singola pagina Web con solo informazioni di base e un messaggio per il visitatore, qualcosa del tipo "stai visualizzando il nostro sito Web su un dispositivo che non consente la visualizzazione di contenuti Flash. Per accedere a tutte le funzionalità, si prega di aprire il nostro sito Web utilizzando un computer con installata l'ultima versione del Flash Player. "
Per questo tutorial, ho preparato una semplice pagina web animata da JavaScript per fungere da backup. iPad è in grado di riprodurre l'animazione abbastanza bene. Creare animazioni JavaScript compatibili con iPad va oltre lo scopo di questo tutorial, ma puoi trovare alcune informazioni utili su di esso nella home page della libreria di animazione JavaScript $ FX () e sei anche libero di esplorare il codice sorgente di JavaScript -pagina animata che utilizzeremo come nostro backup).
Nota: per consentire la riproduzione della pagina animata JavaScript quando caricata sul tuo server, dovrai anche caricare il file fx.js file che si trova nella cartella Scripts tra i file scaricabili per questo tutorial.
Abbiamo bisogno di scoprire quale codice è stato utilizzato per incorporare il file SWF del sito Web Flash originale nella sua pagina HTML. Possiamo farlo aprendo la pagina nel browser e selezionando l'opzione Visualizza sorgente. In alternativa, possiamo aprire la pagina in qualsiasi editor di testo o editor HTML specializzato.
Lo snippet di codice che incorpora un file SWF nella pagina HTML è facile da riconoscere nel codice sorgente. Attiva la funzione Trova e cerca la pagina per "swf". Così facendo si rivelerà il nome del file swf incorporato nella pagina html. Il codice che circonda il nome del file swf è il codice che lo incorpora nella pagina html.
I file SWF possono essere incorporati in una pagina HTML in diversi modi. Descrivendoli tutti renderebbe questo tutorial infinito, quindi se sei curioso puoi farlo su Google. Menzionerò solo alcuni dei più popolari.
Il codice di base basato su tag HTML per incorporare un file SWF può avere il seguente aspetto:
Le probabilità sono che il sito Flash sia stato creato qualche tempo fa: dall'attributo codebase del tag dell'oggetto possiamo vedere che il SWF deve essere riprodotto dalla sesta versione del Flash player.
Il codice è per lo più autoesplicativo, è molto chiaro quale parametro fa cosa. Una cosa da ricordare è che, come puoi vedere, per qualche motivo apparentemente misterioso la maggior parte dei parametri sono indicati nel codice due volte. Questo è facile da spiegare: il codice si rivolge separatamente a due diversi browser Internet.
Il tag con tutti i suoi attributi e parametri target Internet Explorer. Il il tag target il Netscape Navigator attualmente deprecato (il browser ha ignorato il tag dell'oggetto). Quindi, la ripetizione della stessa informazione.
Dovrei anche menzionare l'attributo classid di tag dice a Internet Explorer che dovrebbe caricare il plugin ActiveX se non è installato; attributo pluginpage del tag dice a Netscape Navigator di mostrare il link alla pagina del plugin.
AC_RunActiveContent.js è un file JavaScript che era ancora ampiamente utilizzato solo pochi anni fa. Alcuni programmatori che stanno ancora lavorando con Flash CS3 Professional potrebbero ancora usarlo anche ora.
Il codice che incorpora il file swf utilizzando AC_RunActiveContent.js può avere il seguente aspetto:
C'è anche una linea di codice all'interno del
tag della pagina che può assomigliare a questo:Lo scopo dell'inserimento del file AC_RunActiveContent.js era la modifica apportata da Microsoft Corporation al browser Internet Explorer nel 2006. Come risultato di tale modifica (determinata da alcuni aspetti legali noti come "problema dei brevetti Eolas" e non direttamente correlata a aspetti tecnici della programmazione web), i visitatori che hanno aperto siti Web Flash utilizzando Internet Explorer hanno dovuto fare clic sul contenuto incorporato prima di poter vedere o interagire con esso.
Il file AC_RunActiveContent.js era una soluzione che permetteva agli utenti di saltare quel fastidioso clic e di visualizzare subito il contenuto attivo, generando i tag html all'interno del file JavaScript. Questo file si trova in genere nella cartella Scripts nella stessa directory della pagina HTML in cui è stato incorporato il file swf. Per non entrare troppo nel dettaglio, il file AC_RunActiveContent.js viene chiamato tramite la funzione AC_FL_RunContent e gli attributi e i valori vengono passati al file in coppie: 'width', '800', 'height', '500' e così via sopra. Non è necessario includere estensioni di file con i nomi dei file swf, il file JavaScript lo fa automaticamente.
UFO (acronimo che rappresenta Unbtrusive Flash Objects) è un file JavaScript utilizzato dal 2006 per rilevare versioni di Flash Player e incorporare file swf in pagine HTMl. È stato creato da Bobby van der Sluis.
Il codice per incorporare un file SWF in una pagina HTML con ufo.js potrebbe essere simile al seguente:
Il riferimento al file JavaScript all'interno di il tag potrebbe assomigliare a questo:
Gli argomenti di ufo.js sono auto-esplicativi. Il file era molto popolare, ma è attualmente deprecato.
FlashReplace.js è un file JavaScript leggero (2,1 kb) creato da Robert Nyman.
Il codice per incorporare un file SWF in una pagina HTML utilizzando FlashReplace.js può avere il seguente aspetto:
Ovviamente, come nel caso dei file AC_RunActiveContent.js e ufo.js, troverai anche il riferimento al file JavaScript all'interno del etichetta. Potrebbe assomigliare a questo:
Come puoi vedere, FlashReplace.js è davvero facile. Il primo argomento è il nome del tag HTML il cui contenuto deve essere sostituito con il file swf; il secondo argomento è il nome del file swf, il terzo argomento è l'id arbitrario che puoi assegnare all'oggetto che stai incorporando e gli ultimi due argomenti sono la larghezza e l'altezza del file SWF.
swfbject.js è stato creato da Geoff Stearns, Toby Boudreaux e Bobby van der Sluis. È attualmente (2010) la libreria JavaScript più popolare e ampiamente utilizzata per rilevare versioni di Flash Player e incorporare file swf in pagine HTML.
Il codice per incorporare un file SWF in una pagina HTML utilizzando SWFObject.js può avere il seguente aspetto:
Lo snippet di codice che hai appena letto è un esempio molto semplice di come swfobject.js può essere implementato. Il codice potrebbe essere molto più complesso. Per ulteriori informazioni, consulta questo tutorial di swfbject.js e consulta la documentazione per gli sviluppatori.
Il riferimento al file JavaScript all'interno di il tag potrebbe assomigliare a questo:
Se il sito Web Flash esistente utilizza SWFObject.js per incorporare il file swf, sei fortunato: utilizzeremo il tipo di incorporamento di SWFObject.js per impostare il reindirizzamento alla pagina Web non Flash. Se viene utilizzato qualsiasi altro tipo di scenario di incorporamento, dovremo cancellare il vecchio codice dalla pagina HTML e sostituirlo con l'incorporamento di SWFObject. Useremo SWFObject per reindirizzare i visitatori di iPad al sito Web di backup non Flash.
Per gli scopi di questo tutorial, utilizzeremo una pagina di formazione in cui è incorporato il file SWF utilizzando il file AC_RunActiveContent.js. Se apriamo la pagina FlashWebsite.html in un browser, vedremo il familiare file SWF incorporato nella pagina.
Apriamo la pagina chiamata FlashWebsite.html in qualsiasi editor di testo o editor HTML specializzato.
Dovremmo ricordare o scrivere le informazioni importanti sul nostro file SWF, come il suo nome (FlashWebsite.swf nel nostro esempio), larghezza (800), altezza (580) e colore di sfondo (#FFFFFF).
Ora sostituiamo la riga che fa riferimento al file AC_RunActiveContent.js nel file
etichetta:con questa linea:
Ora abbiamo creato il riferimento alla libreria SWFObject.
Cerchiamo di individuare un codice simile a questo:
Selezioneremo quel bit di codice e lo cancelleremo. Quello che abbiamo ora è il vuoto Sotto questo tag, incolliamo quanto segue: Si noti che l'argomento tra parentesi per il singolo parametro aggiunto ( Nota: il quinto argomento tra parentesi della funzione SWFObject, "9", si riferisce alla versione principale del player Flash. Quando non è di particolare importanza, preferisco dare un po 'di spazio ai browser e non richiedere la versione più recente del player Flash, quindi l'ho impostato qui a 9, anche se la versione attuale (2010) è 10. Salviamo la pagina HTML e apriamola in un browser. Dovrebbe sembrare come questo. Finora, nulla sembra essere cambiato. L'animazione Flash viene riprodotta quando è incorporata utilizzando il file AC_RunActiveContent.js e viene riprodotta allo stesso modo ora, essendo incorporata nel file swfobject.js. Se provassimo ad aprire quella pagina con iPad, non vedremmo alcun contenuto. Aggiungiamo altri due argomenti alla fine della serie di argomenti tra parentesi della chiamata della funzione principale. Il primo argomento dovrebbe essere vuoto, solo le virgolette: "", e il secondo argomento dovrebbe essere il percorso della pagina web di backup non Flash che vogliamo reindirizzare ai visitatori di iPad: "./JavaScriptWebsite.html" Il bit completo di codice con i due nuovi argomenti aggiunti dovrebbe apparire come questo: Viene chiamato il primo argomento vuoto che abbiamo appena aggiunto Nota: "./JavaScriptWebsite.html" è il percorso locale della pagina di backup animata da JavaScript che utilizziamo in questo tutorial. Quel percorso ci permetterà di testare il reindirizzamento localmente e sul server. Lavorando con i propri progetti, è possibile impostare il percorso assoluto per la pagina HTML di backup anziché il percorso locale o un percorso locale per qualsiasi directory o sottodominio in cui è possibile scegliere di ospitare la pagina di backup. Prima di caricare i file sul server, dovremmo testare il reindirizzamento localmente. Per poterlo fare, simuleremo l'iPad impostando l'attributo version di SWFObject su una versione non esistente del player Flash. Andiamo in modo selvaggio e impostiamolo su 1000 (quella versione del player Flash dovrebbe essere disponibile a circa 3000 A.D. se le cose vanno bene ad Adobe). Il codice dovrebbe assomigliare a questo: Non dimenticare di salvare il file. Ora apriamo FlashWebsite.html in un browser e diamo un'occhiata alla barra del titolo della pagina web. Invece di dire "Sito Web Flash", dovrebbe dire "Sito web animato da JavaScript" e l'ultima parte dell'URL dovrebbe essere JavaScriptWebsite.html anziché FlashWebsite.html. Congratulazioni, il nostro reindirizzamento funziona: l'animazione ultra avanzata che vedi nella tua vista non viene eseguita con Flash ma con JavaScript. Dovrebbe apparire e comportarsi in questo modo. Riportiamo il valore della versione su "9". Il codice nel FlashWebsite.html dovrebbe apparire di nuovo così: Assicurati di salvare nuovamente il file. Usando qualsiasi software client FTP, carichiamo i seguenti file in una directory selezionata sul tuo server: Carica la cartella Script contenente i file swfobject.js e fx.js nella stessa directory sul server (per ricordarti, swfobject.js è il file che abilita l'incorporamento swf e il reindirizzamento, e il file fx.js è quello che consente per creare e riprodurre l'animazione JavaScript utilizzata nella pagina di backup che è adatta per essere riprodotta su iPad). Non devi caricare AC_RunActiveContent.js anche nella cartella Script sul tuo server, anche se, se lo hai fatto per sbaglio, quel file non interferirebbe in alcun modo con le prestazioni di tutti gli altri file che hai caricato. Ecco che arriva, il momento della verità! Accendi il tuo tablet iPad e accedi alla pagina FlashWebsite.html caricata sul tuo server. Ecco! Dovresti vedere la pagina di mockup animata da JavaScript invece della pagina di Flash. Abbiamo solo un sito Web Flash a prova di iPad. Hai appena appreso uno dei possibili modi per provare a prova di iPad un sito Web Flash esistente. Esistono molti modi in cui tale obiettivo può essere raggiunto e non tutti implicano il reindirizzamento automatico. Vorrei chiedere a tutti voi di condividere le vostre idee sull'argomento del sito Web Flash per l'impermeabilità di iPad nei commenti a questo tutorial. Grazie per aver letto!
so.write ( "contenitore")) corrisponde al nome del vuoto
xiRedirectUrl, ed è usato dallo script SWFObject per reindirizzare gli utenti che completano l'aggiornamento di ExpressInstall. Qui non stiamo usando ExpressInstall, quindi lasciamo l'argomento vuoto. Il secondo argomento, chiamato redirectUrl, viene utilizzato da SWFObject per reindirizzare automaticamente gli utenti che non hanno installato la versione richiesta di un lettore Flash, che è esattamente la funzione di cui avevamo sempre bisogno. Il tablet iPad non ha una QUALSIASI versione di Flash Player installata, quindi si qualifica!
Passaggio 4: testare il reindirizzamento locale
Passaggio 5: caricamento dei file su un server
Passaggio 6: verifica il reindirizzamento con iPad
Conclusione
Accentsconagua