Share
I den här handledningen lär du dig att använda SWFObject-skript för att ställa in automatisk omdirigering från en Flash-webbplats till en icke-Flash-säkerhetskopieringswebbplats när den ses på en iPad.
Här är en väldigt enkel mock-up av en Flash-webbplats som vi ska använda i den här handledningen. Om du försöker komma åt den sidan med iPad kan du inte se något innehåll.
Och här är det slutliga resultatet vi ska arbeta mot. Om du kommer åt det med iPad kan du se den animerade sidan.
När förändringsvinden blåser, bygger vissa människor väggar, andra bygger väderkvarnar.
- Forntida kinesiska ordspråk
Jag tror att iPad är en bra enhet, även om jag kan förstå varför introduktionen av Flashless-tabletten gjorde en hel del arg. Jag erkänner att jag gjorde mig arg först, strax före iPad visade sig i min lokala Apple Store, avslutade jag en Flash-webbplats som jag ansåg mitt personliga mästerverk, och jag blev överraskad när jag försökte öppna den med iPad istället för min ultralätta Flash-animering Jag omdirigerades till webbplatsen för säkerhetskopiering utan Flash som jag satt upp "just in case". Jag bekänner att det tog mig dags att anpassa mig till iPad, men efterhand har jag lärt mig att tro att det, liksom alla banbrytande verk, måste bryta ut från komfortzonen och jag antar att jag är cool med det.
Självfallet som hjälpte mig att komma fram till den filosofiska attityden var antalet personer som anställde mig för att skapa liknande omdirigeringar för sina befintliga Flash-webbplatser. De hade antingen inte råd med eller ville inte byta ut sina snygga, väldesignade Flash-webbplatser med enklare men mer iPadvänliga sådana, så möjligheten att ställa in automatisk iPad-omdirigering till en enklare, ren HTML-webbplats appellerade till dem.
(Man kan hävda att iPad inte ens kan spela Flash-animeringar, men iPad är öppet mot JavaScript, men det är tyvärr inte. Majoriteten av JavaScript-animerade webbplatser spelar inte bra på iPad. Testa någon av dessa tio JavaScript animerade webbplatser på din dator och sedan på iPad för att se vad jag menar.
Vi måste vänta tills HTML5 är fullt implementerat för att se det nya Internet där tredjeparts plugins som Flash Player gradvis förlorar sin betydelse. Under tiden har lanseringen av iPad-tabellen skapat en ny tillfällig nisch i webbutveckling: iPad-proofing av befintliga Flash-webbplatser. Det finns tusentals utmärkta Flash-webbplatser där ute som kan dra nytta av en sådan tjänst. Det är ett bra jobbmöjlighet för killar som du och jag.
Det kan finnas många olika sätt att iPad-bevisa en Flash-webbplats, något bättre än andra. Denna handledning erbjuder bara en möjlig enkel lösning. Så låt oss gå ner till affärer.
Det kan vara en komplett webbplats utan Flash som innehåller HTML-versionen av allt innehåll som kopierats från Flash-webbplatsen, eller bara en enda webbsida med endast grundläggande information och ett meddelande till besökaren, något i linje med "du tittar på vår hemsida på en enhet som inte tillåter att Flash-innehåll visas. För att komma åt alla funktioner, öppna vår hemsida med en dator med den senaste versionen av Flash-spelaren installerad. "
För denna handledning utarbetade jag en enkel JavaScript-animerad webbsida för att fungera som backup. iPad kan spela animationen måttligt bra. Att skapa iPadvänliga JavaScript-animeringar ligger utanför handledningen, men du kan hitta lite användbar information om det på hemsidan för $ FX () JavaScript-animeringsbiblioteket (och du är också välkommen att utforska JavaScript-koden för JavaScript -animerad sida vi ska använda som vår säkerhetskopia).
Notera: För att tillåta JavaScript-animerad sida att spela när den laddas upp på din server måste du också ladda upp fx.js fil som finns i skriptmappen bland de nedladdningsbara filerna för den här handledningen.
Vi behöver ta reda på vilken kod som användes för att integrera SWF-filen på den ursprungliga Flash-webbplatsen i dess HTML-sida. Vi kan göra det genom att öppna sidan i webbläsaren och välja alternativet Visa källa. Alternativt kan vi öppna sidan i någon textredigerare eller specialiserad HTML-editor.
Kodet med kod som inbäddar en SWF-fil på HTML-sidan är lätt att känna igen inom källkoden. Aktivera Sök-funktionen och sök på sidan för "swf". Om du gör det kommer du att avslöja namnet på swf-filen som är inbäddad på html-sidan. Koden som omger namnet på swf-filen är koden som tjänar den på html-sidan.
SWF-filer kan integreras i en HTML-sida på ett antal olika sätt. Beskriv dem alla skulle göra denna handledning oändliga, så om du är nyfiken kan du bara Google det. Jag nämner bara några av de mest populära.
Grundläggande HTML-taggbaserad kod för inbäddning av en SWF-fil kan se ut så här:
Chansen är att Flash-webbplatsen tagits en stund tillbaka: från kodbordsattributet på objektetiketten kan vi se att SWF ska spelas av den 6: e versionen av Flash-spelaren.
Koden är oftast självförklarande, det är väldigt tydligt vilken parameter gör vad. En sak att nämna är att som du kan se, för några till synes mystiska skäl är de flesta parametrarna angivna i koden två gånger. Det här är lätt att förklara: Koden riktar sig mot två olika webbläsare separat.
De tagg med alla dess attribut och parametrar riktar sig till Internet Explorer. De taggen riktar sig till den för närvarande avvecklade Netscape Navigator (den webbläsaren ignorerade objektetiketten). Därför upprepningen av samma information.
Jag bör också nämna att klassificerade attribut hos tagg berättar Internet Explorer att det ska ladda ActiveX-plugin om det inte är installerat pluginpage attribut av tagg berättar Netscape Navigator att visa länken till plugin-sidan.
AC_RunActiveContent.js är en JavaScript-fil som fortfarande används allmänt för några år sedan. Vissa programmerare som fortfarande arbetar med Flash CS3 Professional kan fortfarande använda den även nu.
Koden som bäddar in swf-filen med AC_RunActiveContent.js kan se ut så här:
Det finns också en rad kod inom
tagg på sidan som kan se ut så här:Syftet med att inkludera filen AC_RunActiveContent.js var ändringen av Microsoft Corporation till Internet Explorer-webbläsaren 2006. Som ett resultat av den förändringen (orsakad av vissa juridiska frågor som kallas "Eolas patentproblem" och inte direkt relaterat till tekniska aspekter av webbprogrammering), besökare som öppnade Flash-webbplatser med Internet Explorer, måste klicka på det inbäddade innehållet innan de kan se eller interagera med det.
AC_RunActiveContent.js-filen var en lösning som gjorde det möjligt för användarna att hoppa över det irriterande klicket och visa det aktiva innehållet direkt, genom att generera html-taggarna i JavaScript-filen. Den filen finns normalt i mappen Skript i samma katalog som HTML-sidan där swf-filen var inbäddad. För att inte gå in på för mycket detaljer kallas filen AC_RunActiveContent.js via AC_FL_RunContent-funktionen, och attributen och värdena skickas till filen i par: "bredd", "800", "höjd", "500" och så på. Du behöver inte inkludera filtillägg med namnen på swf-filer, JavaScript-filen gör det automatiskt.
UFO (en akronym som står för diskreta Flash Objects) är en JavaScript-fil som används sedan 2006 för att upptäcka versioner av Flash Player och inbäddning av swf-filer i HTMl-sidor. Det skapades av Bobby van der Sluis.
Koden för inbäddning av en SWF-fil till en HTML-sida med ufo.js kan se ut så här:
Hänvisningen till JavaScript-filen inom taggen kan se ut så här:
Ufo.js argument är självförklarande. Filen var väldigt populär, men är för närvarande avskriven.
FlashReplace.js är en lättvikts (2,1 kb) JavaScript-fil skapad av Robert Nyman.
Koden för inbäddning av en SWF-fil i en HTML-sida med FlashReplace.js kan se ut så här:
Självfallet, som det är fallet med AC_RunActiveContent.js och ufo.js-filer, kommer du också att hitta hänvisningen till JavaScript-filen inom märka. Det kan se ut så här:
Som du kan se är FlashReplace.js väldigt enkelt. Det första argumentet är namnet på HTML-taggen, vars innehåll ska ersättas med swf-filen. Det andra argumentet är namnet på swf-filen, det tredje argumentet är det godtyckliga id som du kan tilldela det objekt du lägger in, och de två sista argumenten är bredden och höjden på SWF-filen.
swfbject.js skapades av Geoff Stearns, Toby Boudreaux och Bobby van der Sluis. Det är för närvarande (2010) det mest populära och mest använda JavaScript-biblioteket för att upptäcka versioner av Flash-spelare och inbäddning av swf-filer i HTML-sidor.
Koden för inbäddning av en SWF-fil på en HTML-sida med SWFObject.js kan se ut så här:
Koden som du just läste är ett mycket grundläggande exempel på hur swfobject.js kan implementeras. Koden kan vara mycket mer komplex. För mer information, kolla in denna swfbject.js handledning och konsultera utvecklarens dokumentation.
Hänvisningen till JavaScript-filen inom taggen kan se ut så här:
Om den befintliga Flash-webbplatsen använder SWFObject.js för att bädda in swf-filen, har du tur: vi ska använda SWFObject.js-typen av inbäddning för att ställa in omdirigering till icke-Flash-webbsidan. Om någon annan typ av inbäddningsscenario används, måste vi radera den gamla koden från HTML-sidan och ersätta den med inbäddningen SWFObject. Vi ska använda SWFObject för att omdirigera iPad-besökare till webbplatsen för säkerhetskopiering utan Flash.
I denna handledning ska vi använda en träningssida som har SWF-filen inbäddad med filen AC_RunActiveContent.js. Om vi öppnar FlashWebsite.html-sidan i en webbläsare ser vi den välbekanta SWF-filen inbäddad på sidan.
Låt oss öppna sidan FlashWebsite.html i en textredigerare eller någon specialiserad HTML-editor.
Vi bör komma ihåg eller skriva ner den viktiga informationen om vår SWF-fil, till exempel dess namn (FlashWebsite.swf i vårt exempel), bredd (800), höjd (580) och bakgrundsfärg (#FFFFFF).
Låt oss nu ersätta raden som refererar till filen AC_RunActiveContent.js i
märka:med den här raden:
Vi har nu skapat referensen till SWFObject-biblioteket.
Låt oss hitta en kod som ser ut så här:
Vi väljer den biten kod och raderar den. Det vi har nu är det tomma Under den här taggen ska vi klistra in följande: Observera att argumentet inom parentes för parametern med en enda tillägg ( Notera: det femte argumentet i parenteserna i SWFObject-funktionen, "9", refererar till huvudversionen av Flash-spelaren. När det inte är särskilt viktigt föredrar jag att ge webbläsare lite slöseri och inte kräver den senaste versionen av Flash-spelaren, så jag ställer den här till 9, trots att den nuvarande versionen idag (2010) är 10. Låt oss spara HTML-sidan och öppna den i en webbläsare. Det ska se ut så här. Hittills verkar ingenting ha förändrats. Flash-animationen spelas när den är inbäddad med hjälp av filen AC_RunActiveContent.js, och den spelas på ungefär samma sätt nu, som är inbäddad med swfobject.js-filen. Om vi försökte öppna den sidan med iPad så skulle vi fortfarande inte se något innehåll. Låt oss lägga till ytterligare två argument i slutet av serien av argument inom parenteserna i huvudfunktionssamtalet. Det första argumentet ska vara tomt, bara citattecken: "" och det andra argumentet bör vara sökvägen till den säkerhetskopia utan Flash-webbsida som vi vill omdirigera iPad-besökare till: "./JavaScriptWebsite.html" Den fullständiga koden med de två nya argumenten som läggs till ska se ut så här: Det första, tomma argumentet vi just har laddat upp kallas Notera: "./JavaScriptWebsite.html" är den lokala sökvägen till JavaScript-animerad säkerhetskopieringssida som vi använder i denna handledning. Den banan tillåter oss att testa omriktningen lokalt såväl som på servern. Arbeta med egna projekt kan du ställa in den absoluta sökvägen till din säkerhetskopia HTML-sida istället för den lokala sökvägen eller en lokal sökväg till någon katalog eller underdomän där du kan välja att vara värd för säkerhetskopieringssidan. Innan du laddar upp filerna till servern bör vi testa omdirigering lokalt. För att kunna göra det simulerar vi iPad genom att ange SWFObjects versionsattribut till en icke-existerande version av Flash-spelaren. Låt oss gå vild och ställa in det till en 1000 (den versionen av Flash-spelaren ska vara tillgänglig någon gång runt 3000 A.D om det går bra med Adobe). Koden ska se så här ut: Glöm inte att spara filen. Låt oss nu öppna FlashWebsite.html i en webbläsare och ta en titt på titellinjen på webbsidan. I stället för att säga "Flash Website", ska den säga "JavaScript-animerad webbplats", och den sista delen av webbadressen ska vara JavaScriptWebsite.html istället för FlashWebsite.html. Grattis, vår omdirigering fungerar: den ultra avancerade animationen du ser i ditt visningsport är gjort inte med Flash men med JavaScript. Det borde se ut och verka så här. Låt oss återställa versionsvärdet tillbaka till "9". Koden i FlashWebsite.html ska åter se ut så här: Se till att spara filen igen. Med hjälp av någon FTP-klientprogramvara, laddar vi upp följande filer till en vald katalog på din server: Ladda upp skriptmappen som innehåller swfobject.js och fx.js-filer till samma katalog på servern (för att påminna dig, swfobject.js är filen som möjliggör inbäddning av swf och omdirigering och fx.js-filen är den som tillåter du skapar och spelar JavaScript-animering som används på webbsidan för säkerhetskopiering som är lämplig för att spelas på iPad). Du behöver inte ladda upp AC_RunActiveContent.js som finns i mappen Scripts till din server, även om du av misstag gjort det, skulle den filen inte på något sätt störa prestanda för alla andra filer du har laddat upp. Här kommer det, sanningens ögonblick! Slå på din iPad-surfplatta och få åtkomst till FlashWebsite.html-sidan som är uppladdad till din server. Voilà! Du ska se JavaScript-Animated mockup-sidan i stället för Flash-sidan. Vi har just iPad-proofed en Flash-webbplats. Du har just lärt dig ett av möjliga sätt att iPad-bevisa en befintlig Flash-webbplats. Det finns många sätt där det målet kan uppnås, och inte alla involverar automatisk omdirigering. Jag skulle vilja fråga er alla att dela med dig av dina idéer om ämnet iPad-proofing Flash-webbplats i kommentarerna till denna handledning. Tack för att du läste!
so.write ( "container")) matchar namnet på det tomma
xiRedirectUrl, och det används av SWFObject-skriptet för att omdirigera användare som slutför ExpressInstall-uppgraderingen. Vi använder inte ExpressInstall här, så vi lämnar argumentet tomt. Det andra argumentet, kallat redirectUrl, används av SWFObject för att automatiskt omdirigera de användare som inte har den nödvändiga versionen av en Flash-spelare installerad - vilket är exakt den funktion som vi behövde hela tiden. iPad-tablett har inte någon version av Flash-spelare installerad, så det kvalificerar!
Steg 4: Testa omriktningen lokalt
Steg 5: Ladda upp filer till en server
Steg 6: Testa omdirigeringen med iPad
Slutsats
Accentsconagua