Share
In deze tutorial leert u hoe u SWFObject-script kunt gebruiken om automatische omleiding in te stellen van een Flash-website naar een niet-Flash-back-upwebsite wanneer deze wordt bekeken op een iPad.
Hier is een heel eenvoudige mock-up van een Flash-website die we in deze zelfstudie zullen gebruiken. Als u via de iPad toegang probeert te krijgen tot die pagina, kunt u geen inhoud zien.
En hier is het eindresultaat waar we naartoe zullen werken. als je het opent met iPad, kun je de geanimeerde pagina bekijken.
Wanneer de wind van verandering waait, bouwen sommige mensen muren, andere bouwen windmolens.
- Oud Chinees gezegde
Ik vind iPad een geweldig apparaat, hoewel ik begrijp waarom de introductie van de Flashless-tablet nogal wat mensen gek maakte. Ik geef toe dat ik er aanvankelijk gek van was: vlak voordat iPad in mijn lokale Apple-winkel verscheen, heb ik een Flash-website voltooid. Ik overwoog mijn persoonlijk meesterwerk en ik was verbaasd toen ik probeerde om het met een iPad te openen in plaats van mijn ultra-coole Flash-animatie Ik werd omgeleid naar de back-up niet-Flash-site die ik heb ingesteld "voor het geval dat". Ik moet bekennen dat het me enige tijd kostte om mijn gedachten aan iPad aan te passen, maar geleidelijk aan heb ik geleerd om te geloven dat het, net als alle baanbrekende werken, uit de comfortzone moest breken, en ik denk dat ik daar cool mee ben.
Wat mij natuurlijk heeft geholpen om tot die filosofische houding te komen, was het aantal mensen dat me inhuurt om soortgelijke omleidingen voor hun bestaande Flash-websites op te zetten. Ze konden het zich niet veroorloven of wilden hun fraaie, goed ontworpen Flash-sites niet vervangen door eenvoudigere, maar meer iPad-vriendelijke Flash-sites, dus de optie om automatische iPad-omleiding in te stellen naar een eenvoudigere, pure HTML-site, deed een beroep op hen.
(Je zou kunnen beweren dat, zelfs als je Flash-animaties niet kunt spelen, de iPad meer openstaat voor JavaScript, maar dat is helaas niet het geval. De meeste JavaScript-geanimeerde sites spelen niet goed op de iPad. Test een van deze tien JavaScript geanimeerde websites op uw computer en vervolgens op de iPad om te zien wat ik bedoel.
We zullen moeten wachten tot HTML5 volledig is geïmplementeerd om het nieuwe internet te zien waar externe plug-ins zoals Flash Player geleidelijk aan zijn belang verliezen. In de tussentijd heeft de release van de iPad-tablet een nieuwe tijdelijke niche gecreëerd in webontwikkeling: iPad-proofing van bestaande Flash-websites. Er zijn duizenden uitstekende Flash-websites die kunnen profiteren van dergelijke service; het is een geweldige werkkans voor mannen zoals jij en ik.
Er zijn veel verschillende manieren om een Flash-website te beveiligen tegen een iPad, sommige beter dan andere. Deze zelfstudie biedt slechts één mogelijke eenvoudige oplossing. Dus laten we het doen.
Het kan een complete niet-Flash-website zijn die de HTML-versie bevat van alle inhoud die is gekopieerd van de Flash-site, of slechts één webpagina met alleen basisinformatie en een bericht voor de bezoeker, iets in de trant van "u bekijkt onze website op een apparaat dat niet toestaat dat Flash-inhoud wordt weergegeven. Om toegang te krijgen tot alle functies, opent u onze website met behulp van een computer waarop de nieuwste versie van de Flash-speler is geïnstalleerd. "
Voor deze zelfstudie heb ik een eenvoudige met JavaScript geanimeerde webpagina voorbereid die als back-up dient. iPad is in staat om de animatie redelijk goed te spelen. Het maken van iPad-vriendelijke JavaScript-animaties valt buiten het bestek van deze tutorial, maar u kunt hier wel wat nuttige informatie over vinden op de homepage van de JavaScript-animatiebibliotheek $ FX () (en u bent ook van harte welkom om de broncode van JavaScript te bekijken) -geanimeerde pagina die we zullen gebruiken als onze back-up).
Notitie: om de JavaScript-geanimeerde pagina te laten spelen wanneer deze op uw server wordt geüpload, moet u ook de fx.js bestand in de map Scripts tussen de downloadbare bestanden voor deze zelfstudie.
We moeten weten welke code is gebruikt om het SWF-bestand van de oorspronkelijke Flash-website in te sluiten in de HTML-pagina. We kunnen dit doen door de pagina in de browser te openen en de optie Bron weergeven te selecteren. Als alternatief kunnen we de pagina openen in elke teksteditor of gespecialiseerde HTML-editor.
Het codefragment waarin een SWF-bestand is ingesloten in de HTML-pagina, is eenvoudig te herkennen binnen de broncode. Activeer de Find-functie en zoek de pagina op "swf". Hierdoor wordt de naam onthuld van het swf-bestand dat is ingesloten in de html-pagina. De code die de naam van het SWF-bestand omgeeft, is de code die deze insluit op de HTML-pagina.
SWF-bestanden kunnen op verschillende manieren in een HTML-pagina worden ingesloten. Als je ze allemaal beschrijft, zou deze tutorial eindeloos zijn, dus als je nieuwsgierig bent, kun je Google gewoon googelen. Ik zal slechts enkele van de meest populaire noemen.
Eenvoudige HTML-taggebaseerde code voor het insluiten van een SWF-bestand ziet er ongeveer zo uit:
De kans is groot dat de Flash-site een tijdje geleden is gemaakt: vanuit het codebase-attribuut van de objecttag kunnen we zien dat de SWF wordt afgespeeld door de 6e versie van de Flash-speler.
De code spreekt meestal vanzelf, het is heel duidelijk wat de parameter doet. Een ding om op te noemen is dat, zoals je kunt zien, om een schijnbaar mysterieuze reden de meeste parameters tweemaal in de code worden aangegeven. Dit is eenvoudig uit te leggen: de code richt zich op twee verschillende internetbrowsers afzonderlijk.
De tag met al zijn attributen en parameters is gericht op Internet Explorer. De tag is gericht op de momenteel verouderde Netscape Navigator (die browser heeft de objecttag genegeerd). Vandaar de herhaling van dezelfde informatie.
Ik zou ook dat classid attribuut van de tag vertelt Internet Explorer dat het de ActiveX-plug-in moet laden als het niet is geïnstalleerd; pluginpage attribuut van de tag vertelt Netscape Navigator om de link naar de plugin-pagina weer te geven.
AC_RunActiveContent.js is een JavaScript-bestand dat nog maar een paar jaar geleden nog op grote schaal werd gebruikt. Sommige programmeurs die nog steeds met Flash CS3 Professional werken, kunnen het nog steeds gebruiken.
De code die het swf-bestand insluit met AC_RunActiveContent.js ziet er ongeveer zo uit:
Er is ook een regel code binnen de
tag van de pagina die er als volgt uitziet:Het doel van de opname van het AC_RunActiveContent.js-bestand was de wijziging die Microsoft Corporation in 2006 aan de Internet Explorer-browser heeft aangebracht. Als gevolg van deze wijziging (veroorzaakt door bepaalde juridische zaken die bekend staan als "Eolas patent problem" en niet direct gerelateerd aan technische aspecten van webprogrammering), moesten de bezoekers die Flash-websites opende met Internet Explorer op de ingesloten inhoud klikken voordat ze deze konden zien of ermee konden communiceren.
AC_RunActiveContent.js-bestand was een tijdelijke oplossing waarmee gebruikers die lastige klik konden overslaan en de actieve inhoud meteen konden weergeven, door middel van het genereren van de html-tags in het JavaScript-bestand. Dat bestand bevindt zich meestal in de map Scripts in dezelfde map als de HTML-pagina waar het swf-bestand was ingesloten. Om niet te veel in details te treden, wordt het AC_RunActiveContent.js-bestand aangeroepen via de AC_FL_RunContent-functie, en de attributen en waarden worden paarsgewijs aan het bestand doorgegeven: 'width', '800', 'height', '500' en dus op. U hoeft geen bestandsextensies op te nemen met de namen van swf-bestanden, het JavaScript-bestand doet dat automatisch.
UFO (een acroniem dat staat voor Unobtrusive Flash Objects) is een JavaScript-bestand dat sinds 2006 wordt gebruikt voor het detecteren van versies van Flash Player en het insluiten van swf-bestanden in HTMl-pagina's. Het is gemaakt door Bobby van der Sluis.
De code voor het insluiten van een SWF-bestand in een HTML-pagina met ufo.js ziet er ongeveer zo uit:
De verwijzing naar het JavaScript-bestand in de tag kan er zo uitzien:
De argumenten van de ufo.js spreken voor zich. Het bestand was erg populair, maar is momenteel verouderd.
FlashReplace.js is een lichtgewicht (2,1 kb) JavaScript-bestand gemaakt door Robert Nyman.
De code voor het insluiten van een SWF-bestand in een HTML-pagina met FlashReplace.js ziet er ongeveer zo uit:
Natuurlijk, zoals het geval is met AC_RunActiveContent.js en ufo.js bestanden, vindt u ook de verwijzing naar het JavaScript-bestand in de label. Het ziet er misschien als volgt uit:
Zoals je kunt zien, is FlashReplace.js erg gemakkelijk. Het eerste argument is de naam van de HTML-tag waarvan de inhoud moet worden vervangen door het SWF-bestand; het tweede argument is de naam van het swf-bestand, het derde argument is de willekeurige id die u kunt toewijzen aan het object dat u insluit en de laatste twee argumenten zijn de breedte en hoogte van het SWF-bestand.
swfbject.js is gemaakt door Geoff Stearns, Toby Boudreaux en Bobby van der Sluis. Het is momenteel (2010) de meest populaire en meest gebruikte JavaScript-bibliotheek voor het detecteren van versies van Flash Player en het insluiten van swf-bestanden in HTML-pagina's.
De code voor het insluiten van een SWF-bestand in een HTML-pagina met SWFObject.js ziet er ongeveer zo uit:
Het codefragment dat u zojuist hebt gelezen, is een zeer eenvoudig voorbeeld van hoe het swfobject.js kan worden geïmplementeerd. De code kan veel complexer zijn. Raadpleeg voor meer informatie deze tutorial swfbject.js en raadpleeg de documentatie van de ontwikkelaar.
De verwijzing naar het JavaScript-bestand in de tag kan er zo uitzien:
Als de bestaande Flash-website SWFObject.js gebruikt om swf-bestanden in te sluiten, hebt u geluk: we gaan het insluiten van SWFObject.js gebruiken om omleiding naar de niet-Flash-webpagina in te stellen. Als een ander type insluitingsscenario wordt gebruikt, moeten we de oude code van de HTML-pagina verwijderen en deze vervangen door de insluiting van SWFObject. We gaan SWFObject gebruiken om iPad-bezoekers om te leiden naar de back-up niet-Flash-website.
Voor deze tutorial gebruiken we een trainingspagina waarop het SWF-bestand is ingesloten met het bestand AC_RunActiveContent.js. Als we de FlashWebsite.html-pagina in een browser openen, zien we het vertrouwde SWF-bestand dat is ingesloten in de pagina.
Laten we de pagina met de naam FlashWebsite.html openen in een teksteditor of een gespecialiseerde HTML-editor.
We moeten de belangrijke informatie over ons SWF-bestand onthouden of noteren, zoals de naam (FlashWebsite.swf in ons voorbeeld), breedte (800), hoogte (580) en achtergrondkleur (#FFFFFF).
Laten we nu de regel vervangen die verwijst naar het AC_RunActiveContent.js-bestand in de
label:met deze regel:
We hebben nu de verwijzing naar de SWFObject-bibliotheek gemaakt.
Laten we een code vinden die er zo uitziet:
We zullen dat stukje code selecteren en het wissen. Wat we nu hebben is het lege Onder die tag kunnen we het volgende plakken: Houd er rekening mee dat het argument tussen haakjes voor de enkele toegevoegde parameter ( Notitie: het vijfde argument tussen haakjes van de SWFObject-functie, "9", verwijst naar de hoofdversie van de Flash-speler. Wanneer het niet van bijzonder belang is, geef ik er de voorkeur aan om browsers wat speling te geven en om de nieuwste versie van de Flash-speler niet te vragen, dus ik heb het hier ingesteld op 9, ook al is de huidige versie van vandaag (2010) 10. Laten we de HTML-pagina opslaan en openen in een browser. Het zou er zo uit moeten zien. Tot nu toe lijkt niets te zijn veranderd. De Flash-animatie wordt afgespeeld wanneer deze is ingesloten met het bestand AC_RunActiveContent.js en wordt nu op dezelfde manier afgespeeld, omdat deze is ingesloten met het bestand swfobject.js. Als we die pagina met de iPad proberen te openen, zien we nog steeds geen inhoud. Laten we nog twee argumenten toevoegen aan het einde van de reeks argumenten tussen de haakjes van de aanroep van de hoofdfunctie. Het eerste argument zou leeg moeten zijn, alleen de aanhalingstekens: "", en het tweede argument zou het pad naar de niet-Flash-webpagina moeten zijn waar we de iPad-bezoekers naartoe willen omleiden: "./JavaScriptWebsite.html" Het complete stukje code met de twee nieuwe toegevoegde argumenten zou er als volgt uit moeten zien: Het eerste, lege argument dat we zojuist hebben toegevoegd, wordt genoemd Notitie: "./JavaScriptWebsite.html" is het lokale pad naar de JavaScript-geanimeerde back-uppagina die we gebruiken in deze zelfstudie. Dat pad stelt ons in staat de omleiding zowel lokaal als op de server te testen. Wanneer u met uw eigen projecten werkt, kunt u het absolute pad naar uw back-up html-pagina instellen in plaats van het lokale pad, of een lokaal pad naar elke map of subdomein waar u de back-uppagina wilt hosten.. Voordat we de bestanden uploaden naar de server, moeten we omleiding lokaal testen. Om dit te kunnen doen, simuleren we de iPad door het versiekenmerk van het SWFO-object in te stellen op een niet-bestaande versie van de Flash-speler. Laten we wild gaan en het instellen op een 1000 (die versie van de Flash-speler zou ergens rond 3000 na Christus beschikbaar moeten zijn als het goed gaat met Adobe). De code zou er als volgt uit moeten zien: Vergeet niet om het bestand op te slaan. Laten we nu FlashWebsite.html openen in een browser en de titelbalk van de webpagina bekijken. In plaats van 'Flash Website' te zeggen, zou het 'JavaScript-geanimeerde website' moeten zijn en het laatste deel van de URL moet JavaScriptWebsite.html zijn in plaats van FlashWebsite.html. Gefeliciteerd, onze omleiding werkt: de ultra-geavanceerde animatie die u in uw viewport ziet, gebeurt niet met Flash maar met JavaScript. Het moet er zo uitzien en zich gedragen. Laten we de versiewaarde terugzetten naar "9". De code in FlashWebsite.html zou er weer als volgt moeten uitzien: Zorg ervoor dat u het bestand opnieuw opslaat. Gebruik een FTP-clientsoftware om de volgende bestanden naar een geselecteerde map op uw server te uploaden: Upload de map Scripts met de bestanden swfobject.js en fx.js naar dezelfde directory op de server (om u eraan te herinneren, swfobject.js is het bestand dat swf-insluiting en omleiding mogelijk maakt, en fx.js is het bestand waarmee u kunt JavaScript-animatie maken en afspelen die wordt gebruikt in de back-upwebpagina die geschikt is om op de iPad te worden afgespeeld). U hoeft de AC_RunActiveContent.js die zich ook in de map Scripts op uw server bevindt, niet te uploaden, ook al heeft u dat per ongeluk gedaan, dan heeft dat bestand geen invloed op de prestaties van alle andere bestanden die u hebt geüpload. Hier komt het, het moment van de waarheid! Start uw iPad-tablet op en open de FlashWebsite.html-pagina die naar uw server is geüpload. Voila! Je zou de JavaScript-geanimeerde mockup-pagina moeten zien in plaats van de Flash-pagina. We hebben zojuist een Flash-website gemaakt met een iPad. U hebt zojuist een van de mogelijke manieren geleerd om een bestaande Flash-website met een iPad te beveiligen. Er zijn veel manieren waarop dat doel kan worden bereikt, en niet allemaal met automatische omleiding. Ik zou u allen willen vragen om uw ideeën over het onderwerp van de iPad-proofing Flash-website te delen in de opmerkingen bij deze tutorial. Bedankt voor het lezen!
so.write ( "container")) komt overeen met de naam van de lege
xiRedirectUrl, en het wordt gebruikt door het SWFObject-script om gebruikers om te leiden die de ExpressInstall-upgrade hebben voltooid. We gebruiken de ExpressInstall hier niet, dus laten we het argument leeg. Het tweede argument, genaamd redirectUrl, wordt door SWFObject gebruikt om automatisch de gebruikers om te leiden die niet over de vereiste versie van een Flash-speler beschikken, wat precies de functie is die we altijd al nodig hadden. iPad tablet heeft NIET ELKE versie van Flash Player geïnstalleerd, dus het komt in aanmerking!
Stap 4: Test de omleiding lokaal
Stap 5: upload bestanden naar een server
Stap 6: Test de omleiding met iPad
Conclusie
Accentsconagua