Share
In diesem Lernprogramm erfahren Sie, wie Sie mit dem SWFObject-Skript die automatische Umleitung von einer Flash-Website zu einer Nicht-Flash-Backup-Website einrichten, wenn diese auf einem iPad angezeigt wird.
Hier ist ein sehr einfaches Modell einer Flash-Website, die wir in diesem Tutorial verwenden werden. Wenn Sie versuchen, über das iPad auf diese Seite zuzugreifen, können Sie keine Inhalte sehen.
Und hier ist das Endergebnis, auf das wir hinarbeiten werden. Wenn Sie mit dem iPad darauf zugreifen, können Sie die animierte Seite sehen.
Wenn der Wind des Wandels weht, bauen manche Leute Wände, andere Windmühlen.
- Altes chinesisches Sprichwort
Ich denke, das iPad ist ein großartiges Gerät, auch wenn ich verstehen kann, warum die Einführung des Flashless-Tablets einige Leute verrückt gemacht hat. Ich gebe zu, es hat mich zunächst wahnsinnig gemacht: Kurz bevor das iPad in meinem Apple Store erschien, beendete ich eine Flash-Website, die ich als mein persönliches Meisterwerk betrachtete Flash-Animation Ich wurde zur Backup-Nicht-Flash-Site umgeleitet, die ich "nur für den Fall" eingerichtet habe. Ich gebe zu, dass ich einige Zeit brauchte, um mich an das iPad anzupassen, aber nach und nach habe ich gelernt zu glauben, dass es, wie alle Pionierarbeiten, aus der Komfortzone ausbrechen musste, und ich denke, ich bin cool damit.
Natürlich war es mir bei der Einstellung zu dieser philosophischen Haltung die Anzahl der Leute, die mich beauftragten, ähnliche Weiterleitungen für ihre vorhandenen Flash-Websites einzurichten. Sie konnten es sich nicht leisten, ihre ausgefallenen, gut konzipierten Flash-Sites durch einfachere, aber iPad-freundlichere zu ersetzen, weshalb die Option, eine automatische iPad-Umleitung zu einer einfacheren, reinen HTML-Site einzurichten, ansprechend war Sie.
(Man kann argumentieren, dass das iPad zwar nicht in der Lage ist, Flash-Animationen abzuspielen, ist jedoch offener für JavaScript, aber das ist leider nicht der Fall. Die meisten JavaScript-animierten Websites lassen sich auf dem iPad nicht gut spielen. Testen Sie eines dieser zehn JavaScript-Dateien animierte Websites auf Ihrem Computer und dann auf dem iPad, um zu sehen, was ich meine.
Wir müssen warten, bis HTML5 vollständig implementiert ist, um das neue Internet zu sehen, in dem Plugins von Drittanbietern wie Flash Player allmählich an Bedeutung verlieren. Inzwischen hat die Veröffentlichung des iPad-Tablets eine neue temporäre Nische in der Webentwicklung geschaffen: iPad-Proofing für vorhandene Flash-Websites. Es gibt Tausende von hervorragenden Flash-Websites, die von einem solchen Service profitieren könnten. Es ist eine großartige Arbeitsgelegenheit für Jungs wie Sie und mich.
Es gibt viele Möglichkeiten, eine Flash-Website mit dem iPad zu prüfen, einige besser als andere. Dieses Tutorial bietet nur eine mögliche einfache Lösung. Kommen wir zur Sache.
Dies kann eine vollständige Nicht-Flash-Website sein, die die HTML-Version aller Inhalte enthält, die von der Flash-Website kopiert wurden, oder nur eine einzige Webseite, die nur grundlegende Informationen und eine Nachricht an den Besucher enthält Website auf einem Gerät, auf dem keine Flash-Inhalte angezeigt werden können. Um auf alle Funktionen zuzugreifen, öffnen Sie unsere Website auf einem Computer, auf dem die neueste Version des Flash Players installiert ist. "
Für dieses Tutorial habe ich eine einfache JavaScript-animierte Webseite erstellt, die als Backup dient. Das iPad kann die Animation mäßig gut abspielen. Die Erstellung von iPad-freundlichen JavaScript-Animationen liegt außerhalb des Rahmens dieses Tutorials. Sie finden jedoch nützliche Informationen auf der Startseite der $ FX () - JavaScript-Animationsbibliothek (und Sie können auch den Quellcode von JavaScript kennenlernen.) -animierte Seite, die wir als Backup verwenden werden).
Hinweis: Damit die JavaScript-animierte Seite beim Hochladen auf Ihrem Server wiedergegeben werden kann, müssen Sie auch die fx.js Datei, die sich im Ordner Scripts unter den herunterladbaren Dateien für dieses Lernprogramm befindet.
Wir müssen herausfinden, mit welchem Code die SWF-Datei der ursprünglichen Flash-Website in ihre HTML-Seite eingebettet wurde. Wir können dies tun, indem Sie die Seite im Browser öffnen und die Option Quelle anzeigen auswählen. Alternativ können wir die Seite in einem beliebigen Texteditor oder einem speziellen HTML-Editor öffnen.
Das Codefragment, das eine SWF-Datei in die HTML-Seite einbettet, ist im Quellcode leicht zu erkennen. Aktivieren Sie die Suchfunktion und suchen Sie die Seite nach "swf". Dadurch wird der Name der in die HTML-Seite eingebetteten SWF-Datei angezeigt. Der Code, der den Namen der SWF-Datei umgibt, ist der Code, der sie in die HTML-Seite einbettet.
SWF-Dateien können auf verschiedene Arten in eine HTML-Seite eingebettet werden. Wenn Sie alle beschreiben, wird das Tutorial endlos. Wenn Sie also neugierig sind, können Sie es einfach in Google veröffentlichen. Ich werde nur einige der beliebtesten nennen.
Grundlegender HTML-Tag-basierter Code zum Einbetten einer SWF-Datei kann folgendermaßen aussehen:
Die Chance besteht, dass die Flash-Site vor einiger Zeit erstellt wurde: Aus dem Codebase-Attribut des object-Objekts können wir erkennen, dass die SWF-Datei von der 6. Version des Flash-Players abgespielt werden soll.
Der Code ist meistens selbsterklärend, es ist sehr klar, welcher Parameter was tut. Zu erwähnen ist, dass, wie Sie sehen können, die meisten Parameter aus irgendeinem mysteriösen Grund zweimal im Code angegeben sind. Dies ist leicht zu erklären: Der Code richtet sich an zwei verschiedene Internetbrowser.
Das Tag mit all seinen Attributen und Parametern für Internet Explorer. Das Tag richtet sich an den aktuell veralteten Netscape Navigator (dieser Browser ignoriert das Objekt-Tag). Daher die Wiederholung der gleichen Information.
Ich sollte auch dieses classid-Attribut der tag teilt Internet Explorer mit, dass das ActiveX-Plugin geladen werden soll, wenn es nicht installiert ist. pluginpage-Attribut des tag weist Netscape Navigator an, den Link zur Pluginseite anzuzeigen.
AC_RunActiveContent.js ist eine JavaScript-Datei, die vor wenigen Jahren noch weit verbreitet war. Einige Programmierer, die noch mit Flash CS3 Professional arbeiten, verwenden sie möglicherweise auch jetzt noch.
Der Code, der die SWF-Datei mit AC_RunActiveContent.js einbettet, kann folgendermaßen aussehen:
Es gibt auch eine Codezeile in der
Tag der Seite, die folgendermaßen aussehen kann:Der Zweck der Aufnahme der Datei AC_RunActiveContent.js war die 2006 von der Microsoft Corporation vorgenommene Änderung des Internet Explorer-Browsers. Als Folge dieser Änderung (bedingt durch bestimmte Rechtsangelegenheiten, die als "Eolas Patentproblem" bekannt sind und nicht direkt damit zusammenhängen technische Aspekte der Webprogrammierung), mussten Besucher, die Flash-Websites mit Internet Explorer geöffnet haben, auf die eingebetteten Inhalte klicken, bevor sie sie sehen oder damit interagieren können.
Die Datei AC_RunActiveContent.js war eine Problemumgehung, mit der Benutzer das lästige Klicken überspringen und den aktiven Inhalt sofort anzeigen konnten, indem die HTML-Tags in der JavaScript-Datei generiert wurden. Diese Datei befindet sich normalerweise im Ordner "Scripts" im selben Verzeichnis wie die HTML-Seite, in die die SWF-Datei eingebettet wurde. Um nicht zu sehr ins Detail zu gehen, wird die Datei AC_RunActiveContent.js über die Funktion AC_FL_RunContent aufgerufen und die Attribute und Werte werden paarweise an die Datei übergeben: 'width', '800', 'height', '500' und so weiter auf. Sie müssen keine Dateierweiterungen mit den Namen der SWF-Dateien angeben. Die JavaScript-Datei führt dies automatisch aus.
UFO (ein Akronym für unauffällige Flash-Objekte) ist eine JavaScript-Datei, die seit 2006 zum Erkennen von Versionen von Flash Player und zum Einbetten von SWF-Dateien in HTMl-Seiten verwendet wird. Es wurde von Bobby van der Sluis erstellt.
Der Code zum Einbetten einer SWF-Datei in eine HTML-Seite mit ufo.js kann folgendermaßen aussehen:
Der Verweis auf die JavaScript-Datei innerhalb der Tag kann so aussehen:
Die Argumente von ufo.js sind selbsterklärend. Die Datei war sehr beliebt, ist aber derzeit veraltet.
FlashReplace.js ist eine leichtgewichtige (2.1 kb) JavaScript-Datei, die von Robert Nyman erstellt wurde.
Der Code zum Einbetten einer SWF-Datei in eine HTML-Seite mit FlashReplace.js kann wie folgt aussehen:
Wie bei den Dateien AC_RunActiveContent.js und ufo.js finden Sie natürlich auch den Verweis auf die JavaScript-Datei im Etikett. Es kann so aussehen:
Wie Sie sehen können, ist FlashReplace.js sehr einfach. Das erste Argument ist der Name des HTML-Tags, dessen Inhalt durch die SWF-Datei ersetzt werden soll. Das zweite Argument ist der Name der SWF-Datei. Das dritte Argument ist die beliebige ID, die Sie dem Objekt zuweisen können, das Sie einbetten. Die letzten beiden Argumente sind die Breite und Höhe der SWF-Datei.
swfbject.js wurde von Geoff Stearns, Toby Boudreaux und Bobby van der Sluis erstellt. Es ist derzeit (2010) die beliebteste und am häufigsten verwendete JavaScript-Bibliothek zum Erkennen von Versionen von Flash Player und zum Einbetten von SWF-Dateien in HTML-Seiten.
Der Code zum Einbetten einer SWF-Datei in eine HTML-Seite mithilfe von SWFObject.js kann wie folgt aussehen:
Das gerade gelesene Codefragment ist ein sehr einfaches Beispiel dafür, wie swfobject.js implementiert werden kann. Der Code kann viel komplexer sein. Weitere Informationen finden Sie in diesem Tutorial zu swfbject.js und in der Entwicklerdokumentation.
Der Verweis auf die JavaScript-Datei innerhalb der Tag kann so aussehen:
Wenn die vorhandene Flash-Website SWFObject.js zum Einbetten der SWF-Datei verwendet, haben Sie Glück: Wir werden die Art der Einbettung SWFObject.js verwenden, um die Umleitung auf die Nicht-Flash-Webseite einzurichten. Wenn ein anderes Einbindungsszenario verwendet wird, müssen wir den alten Code von der HTML-Seite löschen und durch die SWFObject-Einbettung ersetzen. Wir werden SWFObject verwenden, um iPad-Besucher auf die Backup-Nicht-Flash-Website umzuleiten.
In diesem Lernprogramm verwenden wir eine Schulungsseite, auf der die SWF-Datei mit der Datei AC_RunActiveContent.js eingebettet ist. Wenn wir die FlashWebsite.html-Seite in einem Browser öffnen, wird die vertraute SWF-Datei in die Seite eingebettet.
Lassen Sie uns die Seite FlashWebsite.html in einem beliebigen Texteditor oder einem speziellen HTML-Editor öffnen.
Wir sollten die wichtigen Informationen zu unserer SWF-Datei wie den Namen (in unserem Beispiel FlashWebsite.swf), die Breite (800), die Höhe (580) und die Hintergrundfarbe (#FFFFFF) merken oder aufschreiben..
Jetzt ersetzen wir die Zeile, die auf die Datei AC_RunActiveContent.js in der Datei verweist
Etikett:mit dieser Zeile:
Wir haben jetzt den Verweis auf die SWFObject-Bibliothek erstellt.
Suchen wir einen Code, der so aussieht:
Wir werden diesen Code auswählen und löschen. Was wir jetzt haben, ist das Leere Unter diesem Tag fügen wir folgendes ein: Beachten Sie, dass das Argument in Klammern für den einzelnen hinzugefügten Parameter ( Hinweis: Das fünfte Argument in Klammern der SWFObject-Funktion "9" bezieht sich auf die Hauptversion des Flash-Players. Wenn es nicht besonders wichtig ist, ziehe ich es vor, die Browser etwas zu lockern und die spätere Version des Flash-Players nicht zu fordern. Daher habe ich sie hier auf 9 gesetzt, obwohl die aktuelle Version heute (2010) 10 ist. Speichern Sie die HTML-Seite und öffnen Sie sie in einem Browser. Es sollte so aussehen. Bisher scheint sich nichts geändert zu haben. Die Flash-Animation wird abgespielt, wenn sie mit der Datei AC_RunActiveContent.js eingebettet wird. Sie wird jetzt auf die gleiche Weise wiedergegeben, wenn sie in die Datei swfobject.js eingebettet wird. Wenn wir versuchen, diese Seite mit dem iPad zu öffnen, sehen wir immer noch keinen Inhalt. Fügen wir am Ende der Reihe von Argumenten zwei weitere Argumente innerhalb der Klammern des Hauptfunktionsaufrufs hinzu. Das erste Argument sollte leer sein, nur die Anführungszeichen: "" und das zweite Argument sollte der Pfad zu der Nicht-Flash-Sicherungswebseite sein, an die die iPad-Besucher weitergeleitet werden sollen: "./JavaScriptWebsite.html" Der vollständige Code mit den beiden neuen hinzugefügten Argumenten sollte folgendermaßen aussehen: Das erste leere Argument, das wir gerade hinzugefügt haben, wird aufgerufen Hinweis: "./JavaScriptWebsite.html" ist der lokale Pfad zur JavaScript-animierten Sicherungsseite, die wir in diesem Lernprogramm verwenden. Dieser Pfad ermöglicht es uns, die Umleitung sowohl lokal als auch auf dem Server zu testen. Wenn Sie mit Ihren eigenen Projekten arbeiten, können Sie den absoluten Pfad zu Ihrer Backup-HTML-Seite anstelle des lokalen Pfads oder einen lokalen Pfad zu einem Verzeichnis oder einer Subdomäne festlegen, in dem Sie die Backup-Seite hosten können. Bevor wir die Dateien auf den Server hochladen, sollten wir die Umleitung lokal testen. Dazu simulieren wir das iPad, indem wir das Versionsattribut des SWFObject auf eine nicht vorhandene Version des Flash Players setzen. Lassen Sie uns wild gehen und setzen Sie den Wert auf 1000 (diese Version des Flash-Players sollte etwa um 3.000 Uhr verfügbar sein, wenn bei Adobe alles gut läuft).. Der Code sollte so aussehen: Vergessen Sie nicht, die Datei zu speichern. Lassen Sie uns nun die FlashWebsite.html in einem Browser öffnen und einen Blick auf die Titelleiste der Webseite werfen. Anstelle von "Flash-Website" sollte "JavaScript-animierte Website" angegeben werden. Der letzte Teil der URL sollte JavaScriptWebsite.html anstelle von FlashWebsite.html sein. Glückwunsch, unsere Weiterleitung funktioniert: Die extrem fortschrittliche Animation, die Sie in Ihrem Ansichtsfenster sehen, erfolgt nicht mit Flash, sondern mit JavaScript. Es sollte so aussehen und sich so verhalten. Setzen wir den Versionswert auf "9" zurück. Der Code in der FlashWebsite.html sollte wieder so aussehen: Stellen Sie sicher, dass die Datei erneut gespeichert wird. Lassen Sie uns mit einer beliebigen FTP-Client-Software die folgenden Dateien in ein ausgewähltes Verzeichnis auf Ihrem Server hochladen: Laden Sie den Ordner Scripts, der die Dateien swfobject.js und fx.js enthält, in dasselbe Verzeichnis auf dem Server hoch (um Sie daran zu erinnern, ist swfobject.js die Datei, die sowohl das Einbetten von swf als auch die Umleitung ermöglicht, und die Datei fx.js Sie erstellen und spielen JavaScript-Animationen, die in der Backup-Webseite verwendet werden und für das Abspielen auf dem iPad geeignet sind.. Sie müssen die Datei AC_RunActiveContent.js, die sich ebenfalls im Ordner Scripts befindet, nicht auf Ihren Server hochladen, auch wenn diese Datei aus Versehen nicht die Leistung aller anderen hochgeladenen Dateien beeinträchtigt. Hier kommt der Moment der Wahrheit! Starten Sie Ihr iPad-Tablet und greifen Sie auf die auf Ihren Server hochgeladene FlashWebsite.html-Seite zu. Voilà! Anstelle der Flash-Seite sollte die JavaScript-animierte Modellseite angezeigt werden. Wir haben gerade eine Flash-Website mit dem iPad geprüft. Sie haben gerade eine Möglichkeit kennengelernt, um eine vorhandene Flash-Website mit dem iPad zu prüfen. Es gibt viele Möglichkeiten, dieses Ziel zu erreichen, und nicht alle erfordern eine automatische Weiterleitung. Ich möchte Sie alle bitten, Ihre Ideen zum Thema iPad-Proofing Flash-Website in den Kommentaren zu diesem Tutorial mitzuteilen. Danke fürs Lesen!
so.write ("container")) stimmt mit dem Namen der Leere überein
xiRedirectUrl, und es wird vom SWFObject-Skript verwendet, um Benutzer umzuleiten, die das ExpressInstall-Upgrade abgeschlossen haben. Wir verwenden die ExpressInstall hier nicht, also lassen wir das Argument leer. Das zweite Argument, genannt redirectUrl, wird von SWFObject verwendet, um Benutzer, die nicht über die erforderliche Version eines Flash-Players verfügen, automatisch umzuleiten. Dies ist genau die Funktion, die wir schon immer benötigt haben. Auf dem iPad-Tablet ist KEINE Version des Flash-Players installiert!
Schritt 4: Testen Sie die Umleitung lokal
Schritt 5: Laden Sie Dateien auf einen Server hoch
Schritt 6: Testen Sie die Umleitung mit dem iPad
Fazit
Accentsconagua