Share
În acest tutorial veți învăța cum să utilizați scriptul SWFObject pentru a configura redirecționarea automată de pe un site web Flash într-un site Web de rezervă non-Flash atunci când este afișat pe un iPad.
Iată o machetă foarte simplă a unui site web Flash pe care îl vom folosi în acest tutorial. Dacă încercați să accesați pagina utilizând iPad, nu veți putea vedea niciun conținut.
Iată rezultatul final la care vom lucra. dacă îl accesați cu iPad, veți putea vedea pagina animată.
Când vântul schimbării suflă, unii construiesc ziduri, alții construiesc morile de vânt.
- Vechiul proverb chinezesc
Cred că iPad este un dispozitiv excelent, chiar dacă înțeleg de ce introducerea comprimatului Flashless a făcut destul de puțini oameni nebuni. Recunosc ca ma facut suparat la inceput: chiar inainte ca iPad sa apara in magazinul meu local Apple am terminat un site Flash pe care l-am considerat capodopera personala si am fost surprins cand, incercand sa il deschid cu iPad, in loc de ultra-cool Flash animație Am fost redirecționat către site-ul de backup non-Flash pe care l-am creat "doar pentru caz". Mă mărturisesc că mi-a trecut ceva timp să-mi adaptez mintea la iPad, dar treptat am învățat să cred că, ca toate lucrările de pionierat, a trebuit să izbucnească din zona de confort și cred că sunt cool cu asta.
Desigur, ceea ce ma ajutat să ajung la acea atitudine filosofică a fost numărul de persoane care m-au angajat să pun în aplicare redirecționări similare pentru site-urile Flash existente. Ei nici nu și-au putut permite sau nu au vrut să-și înlocuiască site-urile flash Flash, bine concepute, cu cele mai simple, dar mai prietenoase cu iPad-urile, astfel încât opțiunea de a seta redirecționarea iPad automată către un site HTML mai simplu, lor.
(Se poate argumenta că, chiar dacă nu puteți să jucați animații Flash, iPad este mai deschis spre JavaScript, dar, din păcate, nu este cazul. Majoritatea site-urilor animate cu JavaScript nu se joacă bine pe iPad. site-uri animate pe computer și apoi pe iPad pentru a vedea ce vreau să spun.
Va trebui să așteptăm până când HTML5 este implementat pe deplin pentru a vedea noul Internet în care plugin-urile terților, precum Flash Player, își pierd treptat importanța. Între timp, lansarea tabletei iPad a creat o nouă nișă temporară în dezvoltarea web-site-urilor: iPad-proofing site-urile Flash existente. Există mii de site-uri Flash excelente care ar putea beneficia de astfel de servicii; este o oportunitate excelentă de lucru pentru băieți ca tine și cu mine.
Pot exista multe moduri diferite de a proteja un site web Flash, unele mai bune decât altele. Acest tutorial oferă doar o singură soluție posibilă. Deci, să mergem la afaceri.
Ar putea fi un site complet non-Flash care să conțină versiunea HTML a întregului conținut copiat de pe site-ul Flash sau doar o singură pagină web care conține numai informații de bază și un mesaj către vizitator, ceva de genul "vă vedeți pe un dispozitiv care nu permite afișarea conținutului Flash. Pentru a accesa toate funcțiile, deschideți site-ul nostru web folosind un computer cu cea mai recentă versiune a playerului Flash instalat. "
Pentru acest tutorial, am pregătit o pagină Web animată cu JavaScript simplu pentru a servi ca rezervă. iPad este capabil să joace animația moderat de bine. Crearea animațiilor JavaScript prietenoase cu iPad este dincolo de scopul acestui tutorial, dar puteți găsi câteva informații utile despre acesta pe pagina de pornire a bibliotecii de animație JavaScript ($ FX) (și sunteți, de asemenea, bineveniți să explorați codul sursă al JavaScript - pagina animinată utilizată ca rezervă de rezervă).
Notă: pentru a permite ca pagina animată cu JavaScript să fie redată când este încărcată pe serverul dvs., va trebui să încărcați și fx.js fișier situat în folderul Scripturi printre fișierele descărcabile pentru acest tutorial.
Trebuie să aflăm ce cod a fost folosit pentru a încorpora fișierul SWF al site-ului Web original Flash în pagina HTML. Putem face acest lucru prin deschiderea paginii în browser și selectarea opțiunii Vizualizare sursă. Alternativ, putem deschide pagina în orice editor de text sau editor HTML specializat.
Fragmentul de cod care încorporează un fișier SWF în pagina HTML este ușor de recunoscut în cadrul codului sursă. Activați funcția de căutare și căutați pagina pentru "swf". Făcând acest lucru va dezvălui numele fișierului swf încorporat în pagina html. Codul care înconjoară numele fișierului swf este codul care îl încorporează în pagina html.
Fișierele SWF pot fi încorporate într-o pagină HTML într-un număr de moduri diferite. Descriindu-le pe toate ar face acest tutorial nesfarsit, asa ca daca esti curios, poti sa-l folosesti doar pe Google. Voi menționa doar unele dintre cele mai populare.
Codul HTML bazat pe tag-ul de bază pentru încorporarea unui fișier SWF poate să arate astfel:
Există șanse ca site-ul Flash să se fi transformat într-un timp în urmă: din atributul codebase al etichetei obiect se poate vedea că SWF va fi redat de cea de-a șasea versiune a playerului Flash.
Codul este în cea mai mare parte explicativ, este foarte clar ce parametru face ce. Un lucru de menționat este faptul că, după cum puteți vedea, pentru un motiv aparent misterios, majoritatea parametrilor sunt indicați în cod de două ori. Acest lucru este ușor de explicat: codul vizează separat două browsere de internet diferite.
cu toate atributele și parametrii vizați Internet Explorer. tag-ul viză Netscape Navigator depreciat în prezent (browserul respectiv a ignorat eticheta obiectului). Prin urmare, repetarea acelorași informații.
Ar trebui să menționez, de asemenea, atributul clasic al tag-ul spune Internet Explorer că ar trebui să încarce plugin-ul ActiveX dacă nu este instalat; pluginpagepage al atributului tag-ul spune Netscape Navigator pentru a afișa link-ul la pagina plugin.
AC_RunActiveContent.js este un fișier JavaScript care a fost încă utilizat pe scară largă abia acum câțiva ani. Unii programatori care lucrează în continuare cu Flash CS3 Professional pot să-l folosească chiar și acum.
Codul care încorporează fișierul swf folosind AC_RunActiveContent.js poate să arate astfel:
Există, de asemenea, o linie de cod în
tag-ul paginii care ar putea arăta astfel:Scopul includerii fișierului AC_RunActiveContent.js a fost modificarea făcută de Microsoft Corporation în browserul Internet Explorer în 2006. Ca urmare a acestei schimbări (provocată de anumite chestiuni legale cunoscute ca "problema de brevet Eolas" și care nu are legătură directă cu aspectele tehnice ale programării web), vizitatorii care au deschis site-urile web Flash folosind Internet Explorer trebuiau să facă clic pe conținutul încorporat înainte de a putea vedea sau interacționa cu acesta.
Fișierul AC_RunActiveContent.js a fost o soluție care le-a permis utilizatorilor să ignore acest clic deranjant și să afișeze conținutul activ imediat, prin generarea de etichete html din fișierul JavaScript. Acest fișier este de obicei localizat în directorul Scripts din același director ca și pagina HTML unde a fost încorporat fișierul swf. Pentru a nu intra în prea multe detalii, fișierul AC_RunActiveContent.js este apelat prin intermediul funcției AC_FL_RunContent și atributele și valorile sunt transmise fișierului în perechi: "lățime", "800", "înălțime", "500" și așa mai departe pe. Nu este nevoie să includeți extensii de fișiere cu numele fișierelor swf, fișierul JavaScript face acest lucru în mod automat.
UFO (un acronim care înseamnă Unobtrusive Flash Objects) este un fișier JavaScript folosit din 2006 pentru detectarea versiunilor Flash Player și încorporarea fișierelor swf în paginile HTMl. A fost creat de Bobby van der Sluis.
Codul pentru încorporarea unui fișier SWF într-o pagină HTML cu ufo.js poate arăta astfel:
Referința la fișierul JavaScript din eticheta poate să arate astfel:
Argumentele ufo.js sunt auto-explicative. Fișierul a fost foarte popular, dar în prezent este depreciat.
FlashReplace.js este un fișier JavaScript ușor (2.1 kb) creat de Robert Nyman.
Codul pentru încorporarea unui fișier SWF într-o pagină HTML utilizând FlashReplace.js poate să arate astfel:
Evident, ca în cazul fișierelor AC_RunActiveContent.js și ufo.js, veți găsi, de asemenea, referința la fișierul JavaScript în cadrul etichetă. Poate arata astfel:
După cum puteți vedea, FlashReplace.js este foarte ușor. Primul argument este numele etichetei HTML al cărui conținut urmează să fie înlocuit cu fișierul swf; al doilea argument este numele fișierului swf, al treilea argument este idul arbitrar pe care îl puteți atribui obiectului pe care îl încorporați și ultimele două argumente sunt lățimea și înălțimea fișierului SWF.
swfbject.js a fost creat de Geoff Stearns, Toby Boudreaux și Bobby van der Sluis. În prezent (2010) este cea mai populară și mai folosită bibliotecă JavaScript pentru detectarea versiunilor de Flash player și încorporarea fișierelor swf în pagini HTML.
Codul pentru încorporarea unui fișier SWF într-o pagină HTML utilizând SWFObject.js poate să arate astfel:
Fragmentul de cod pe care tocmai l-ați citit este un exemplu foarte bun al modului în care swfobject.js poate fi implementat. Codul poate fi mult mai complex. Pentru mai multe informații, consultați acest tutorial swfbject.js și consultați documentația dezvoltatorilor.
Referința la fișierul JavaScript din eticheta poate să arate astfel:
Dacă site-ul Flash existent utilizează SWFObject.js pentru a încorpora fișierul swf, aveți noroc: vom utiliza tipul de încorporare SWFObject.js pentru a configura redirecționarea către pagina web non-Flash. Dacă se folosește alt tip de scenariu de încorporare, va trebui să ștergem codul vechi din pagina HTML și să îl înlocuim cu încorporarea SWFObject. Vom folosi SWFObject pentru a redirecționa vizitatorii iPad pe site-ul de back-up non-Flash.
În scopul acestui tutorial, vom folosi o pagină de antrenament care are fișierul SWF încorporat utilizând fișierul AC_RunActiveContent.js. Dacă deschidem pagina FlashWebsite.html într-un browser, vom vedea fișierul SWF familiar încorporat în pagină.
Să deschidem pagina numită FlashWebsite.html în orice editor de text sau orice editor HTML specializat.
Trebuie să ne amintim sau să notăm informațiile importante despre fișierul nostru SWF, cum ar fi numele acestuia (FlashWebsite.swf în exemplul nostru), lățimea (800), înălțimea (580) și culoarea de fundal (#FFFFFF).
Acum, să înlocuim linia care face trimitere la fișierul AC_RunActiveContent.js în
etichetă:cu această linie:
Am creat acum referința la biblioteca SWFObject.
Să găsim un cod care arată astfel:
Vom selecta acel cod de cod și îl vom șterge. Ceea ce avem acum este gol Sub această etichetă, să lipim următoarele: Rețineți că argumentul din paranteze pentru parametrul adăugat unic ( Notă: al cincilea argument din parantezele funcției SWFObject, "9", se referă la versiunea majoră a playerului Flash. Când nu are o importanță deosebită, prefer să dau browserelor ceva slăbit și să nu cer ultima versiune a playerului Flash, așa că l-am setat aici la 9, chiar dacă versiunea curentă (2010) este de 10. Să salvăm pagina HTML și să o deschidem într-un browser. Ar trebui să arate așa. Până acum, nimic nu pare să se fi schimbat. Animația Flash a fost redată când a fost încorporată utilizând fișierul AC_RunActiveContent.js și se joacă în același mod acum, fiind încorporat în fișierul swfobject.js. Dacă am încercat să deschidem acea pagină cu iPad, nu vom mai vedea niciun conținut. Să adăugăm încă două argumente la sfârșitul seriei de argumente în parantezele apelului principal al funcției. Primul argument ar trebui să fie gol, doar ghilimelele: "", iar al doilea argument ar trebui să fie calea spre pagina web non-Flash de rezervă pe care dorim să redirecționăm vizitatorii iPad la: "./JavaScriptWebsite.html" Bitul complet al codului cu cele două noi argumente adăugate ar trebui să arate astfel: Primul argument gol, pe care tocmai l-am adăugat, este numit Notă: "./JavaScriptWebsite.html" este calea locală spre pagina de rezervă animată cu JavaScript pe care o folosim în acest tutorial. Această cale ne va permite să testați redirecționarea la nivel local și pe server. Lucrând cu proiectele proprii, puteți seta calea absolută pe pagina html de rezervă în locul căii locale sau o cale locală către orice director sau subdomeniu unde puteți alege să găzduiți pagina de rezervă. Înainte de a încărca fișierele pe server, trebuie să testați redirecționarea locală. Pentru a putea face acest lucru, vom simula iPad-ul setând atributul de versiune al SWFObject la o versiune non-existentă a playerului Flash. Să mergem sălbatic și setați-l la 1000 (acea versiune a playerului Flash ar trebui să fie disponibilă în jurul valorii de 3000 AD dacă lucrurile merg bine la Adobe). Codul ar trebui să arate astfel: Nu uitați să salvați fișierul. Acum, să deschidem FlashWebsite.html într-un browser și să aruncăm o privire la bara de titlu a paginii web. În loc să spui "Site-ul Flash", ar trebui să spui "Site-ul animat JavaScript", iar ultima parte a URL-ului ar trebui să fie JavaScriptWebsite.html în loc de FlashWebsite.html. Felicitări, redirecționarea noastră funcționează: animația ultra-avansată pe care o vedeți în portul de vizualizare nu se face cu Flash, ci cu JavaScript. Ar trebui să arate și să se comporte așa. Să restabilim valoarea versiunii înapoi la "9". Codul FlashWebsite.html ar trebui să arate din nou astfel: Asigurați-vă că ați salvat din nou fișierul. Folosind orice software client FTP, să încărcăm următoarele fișiere într-un director selectat pe server: Încărcați folderul Scripturi care conține fișierele swfobject.js și fx.js în același director pe server (pentru a vă reaminti, swfobject.js este fișierul care permite încorporarea swf și redirecționarea, iar fișierul fx.js este cel care permite pentru a crea și a juca animație JavaScript folosită în pagina web de rezervă, care este potrivită pentru a fi jucată pe iPad). Nu trebuie să încărcați fișierul AC_RunActiveContent.js, de asemenea, localizat în folderul Scripturi pe serverul dvs., chiar dacă în caz contrar ați făcut acest lucru, acel fișier nu ar interfera în niciun fel cu performanța tuturor celorlalte fișiere pe care le-ați încărcat. Aici vine, momentul adevărului! Activați comprimatul iPad și accesați pagina FlashWebsite.html încărcată pe serverul dvs. Voilà! Ar trebui să vedeți pagina machetei animate cu JavaScript în locul paginii Flash. Avem doar un iPad-proofed un site Flash. Tocmai ați învățat una dintre modalitățile posibile de a proteja iPad un site Web Flash existent. Există multe modalități prin care acest obiectiv poate fi atins și nu toate implică redirecționare automată. Aș dori să vă întreb pe toți să vă împărtășiți ideile despre subiectul site-ului Flash pentru protejarea iPad-ului în comentariile acestui tutorial. Mulțumesc că ați citit!
so.write ( "container")) se potrivește cu numele golului
xiRedirectUrl, și este folosit de scriptul SWFObject pentru a redirecționa utilizatorii care finalizează upgrade-ul ExpressInstall. Nu folosim ExpressInstall aici, deci lăsăm argumentul gol. Al doilea argument, numit redirectUrl, este folosit de SWFObject pentru a redirecționa automat utilizatorii care nu au instalat versiunea necesară a unui player Flash - ceea ce este exact funcția de care aveam nevoie de-a lungul timpului. Tableta iPad nu are instalată nici o versiune a playerului Flash, așa că se califică!
Pasul 4: Testați redirecționarea locală
Pasul 5: Încărcați fișierele pe un server
Pasul 6: Testați redirecționarea cu iPad
Concluzie
Accentsconagua