Share
Dans ce tutoriel, vous apprendrez à utiliser le script SWFObject pour configurer la redirection automatique d'un site Web Flash vers un site Web de sauvegarde autre que Flash lorsqu'il est visualisé sur un iPad..
Voici une maquette très simple d'un site Web Flash que nous allons utiliser dans ce tutoriel. Si vous essayez d'accéder à cette page avec iPad, vous ne pourrez voir aucun contenu..
Et voici le résultat final sur lequel nous allons travailler. si vous y accédez avec iPad, vous pourrez voir la page animée.
Lorsque le vent du changement souffle, certaines personnes construisent des murs, d'autres des éoliennes.
- Ancien proverbe chinois
Je pense que l'iPad est un appareil formidable, même si je peux comprendre pourquoi l'introduction de la tablette Flashless a rendu beaucoup de gens fous. J'admets que cela m'a rendu fou au début: juste avant qu'iPad ne soit apparu dans mon Apple Store local, j'ai terminé un site Web Flash. Je considérais mon chef-d'œuvre personnel, et j'ai été pris de court en essayant de l'ouvrir avec iPad, au lieu de mon ultra-cool Animation Flash J'ai été redirigé vers le site de sauvegarde non Flash que j'ai configuré "au cas où". J'avoue que cela m'a pris du temps pour adapter mon esprit à l'iPad, mais j'ai progressivement appris à croire que, comme toutes les œuvres pionnières, il fallait sortir de la zone de confort et je suppose que je suis cool avec ça..
Bien sûr, ce qui m'a aidé à adopter cette attitude philosophique, c'est le nombre de personnes qui m'ont embauché pour configurer des redirections similaires pour leurs sites Web Flash existants. Ils n’en avaient pas les moyens ou ne voulaient pas remplacer leurs sites Flash sophistiqués et bien conçus par des sites plus simples mais plus conviviaux pour iPad. L’option de configuration de la redirection automatique d’iPad vers un site HTML pur et simple a donc séduit. leur.
(On pourrait soutenir que, même s'il ne peut pas lire d'animations Flash, l'iPad est plus ouvert à JavaScript, mais ce n'est malheureusement pas le cas. La majorité des sites animés avec JavaScript ne fonctionnent pas bien sur iPad. Testez l'une de ces dix JavaScript. sites Web animés sur votre ordinateur, puis sur iPad pour voir ce que je veux dire.
Nous devrons attendre que HTML5 soit complètement implémenté pour voir le nouvel Internet où des plugins tiers tels que Flash Player perdent progressivement de leur importance. Entre-temps, la sortie de la tablette iPad a créé un nouveau créneau temporaire dans le développement Web: la protection des sites Web Flash existants vers l’iPad. Il existe des milliers d'excellents sites Web Flash susceptibles de bénéficier d'un tel service. c'est une excellente opportunité de travail pour des gars comme vous et moi.
Il existe différentes manières de sécuriser un site Web Flash sur iPad, certaines étant meilleures que d'autres. Ce tutoriel offre une solution simple possible. Alors passons aux affaires.
Il peut s’agir d’un site Web complet non Flash contenant la version HTML de tout le contenu copié à partir du site Flash, ou d’une simple page Web contenant uniquement des informations de base et un message au visiteur. site Web sur un appareil ne permettant pas l'affichage de contenu Flash. Pour accéder à toutes les fonctionnalités, ouvrez notre site Web à l'aide d'un ordinateur sur lequel la dernière version de Flash Player est installée. "
Pour ce tutoriel, j'ai préparé une simple page Web animée par JavaScript qui doit servir de sauvegarde. L'iPad est capable de jouer l'animation moyennement bien. La création d'animations JavaScript conviviales pour l'iPad dépasse le cadre de ce didacticiel, mais vous pouvez trouver des informations utiles à ce sujet sur la page d'accueil de la bibliothèque d'animations JavaScript de $ FX () (et vous êtes également invité à explorer le code source de JavaScript. -animée page que nous allons utiliser comme notre sauvegarde).
Remarque: pour autoriser la lecture de la page animée en JavaScript lors du téléchargement sur votre serveur, vous devez également télécharger le fichier. fx.js fichier situé dans le dossier Scripts parmi les fichiers téléchargeables de ce tutoriel.
Nous devons savoir quel code a été utilisé pour incorporer le fichier SWF du site Web Flash original dans sa page HTML. Nous pouvons le faire en ouvrant la page dans le navigateur et en sélectionnant l'option Afficher la source. Alternativement, nous pouvons ouvrir la page dans n’importe quel éditeur de texte ou éditeur HTML spécialisé..
Le fragment de code qui intègre un fichier SWF dans la page HTML est facile à reconnaître dans le code source. Activez la fonction Rechercher et recherchez "swf" dans la page. Cela révélera le nom du fichier swf incorporé dans la page html. Le code entourant le nom du fichier swf est le code qui l’intègre dans la page html.
Les fichiers SWF peuvent être incorporés dans une page HTML de différentes manières. En les décrivant tous, ce tutoriel serait sans fin. Si vous êtes curieux, vous pouvez simplement le rechercher sur Google. Je ne mentionnerai que certains des plus populaires.
Le code de base HTML basé sur les balises pour incorporer un fichier SWF peut ressembler à ceci:
Il y a de fortes chances que le site Flash ait été créé il y a longtemps: à partir de l'attribut codebase de la balise object, nous pouvons voir que le fichier SWF doit être lu par la sixième version du lecteur Flash..
Le code est la plupart du temps explicite, il est très clair quel paramètre fait quoi. Une chose à mentionner est que, comme vous pouvez le constater, pour une raison apparemment mystérieuse, la plupart des paramètres sont indiqués deux fois dans le code. C'est facile à expliquer: le code cible deux navigateurs Internet différents séparément..
le balise avec tous ses attributs et paramètres cible Internet Explorer. le La balise cible le navigateur Netscape actuellement obsolète (ce navigateur a ignoré la balise object). Par conséquent, la répétition de la même information.
Je devrais aussi mentionner cet attribut classid du balise indique à Internet Explorer qu'il devrait charger le plug-in ActiveX s'il n'est pas installé; attribut pluginpage du balise indique à Netscape Navigator d'afficher le lien vers la page du plugin.
AC_RunActiveContent.js est un fichier JavaScript qui était encore largement utilisé il y a seulement quelques années. Certains programmeurs travaillant encore avec Flash CS3 Professional peuvent toujours l'utiliser, même maintenant..
Le code incorporant le fichier swf à l'aide de AC_RunActiveContent.js peut ressembler à ceci:
Il y a aussi une ligne de code dans le
balise de la page qui peut ressembler à ceci:L’inclusion du fichier AC_RunActiveContent.js avait pour objet le changement de navigateur de Microsoft Corporation en 2006. En conséquence de ce changement (provoqué par certaines questions juridiques connues sous le nom de "problème de brevet Eolas" et non directement liées à aspects techniques de la programmation Web), les visiteurs qui ouvraient des sites Web Flash avec Internet Explorer devaient cliquer sur le contenu incorporé avant de pouvoir le voir ou d’interagir avec lui..
Le fichier AC_RunActiveContent.js était une solution de contournement qui permettait aux utilisateurs d'éviter ce clic gênant et d'afficher immédiatement le contenu actif, en générant les balises HTML dans le fichier JavaScript. Ce fichier se trouve généralement dans le dossier Scripts du même répertoire que la page HTML où le fichier swf a été incorporé. Pour ne pas trop entrer dans les détails, le fichier AC_RunActiveContent.js est appelé via la fonction AC_FL_RunContent, et les attributs et les valeurs sont transmis au fichier par paires: "largeur", "800", "hauteur", "500", etc. sur. Vous n'avez pas besoin d'inclure les extensions de fichier avec les noms des fichiers swf, le fichier JavaScript le fait automatiquement.
UFO (un acronyme qui signifie Unobtrusive Flash Objects) est un fichier JavaScript utilisé depuis 2006 pour détecter les versions de Flash Player et incorporer des fichiers swf dans des pages HTMl. Il a été créé par Bobby van der Sluis.
Le code pour incorporer un fichier SWF dans une page HTML avec ufo.js peut ressembler à ceci:
La référence au fichier JavaScript dans le La balise peut ressembler à ceci:
Les arguments de ufo.js sont explicites. Le fichier était très populaire, mais est actuellement obsolète.
FlashReplace.js est un fichier JavaScript léger (2.1 ko) créé par Robert Nyman..
Le code d'intégration d'un fichier SWF dans une page HTML à l'aide de FlashReplace.js peut ressembler à ceci:
Bien évidemment, comme pour les fichiers AC_RunActiveContent.js et ufo.js, vous trouverez également la référence au fichier JavaScript dans les fichiers. étiquette. Cela peut ressembler à ceci:
Comme vous pouvez le constater, FlashReplace.js est très simple. Le premier argument est le nom de la balise HTML dont le contenu doit être remplacé par le fichier swf; le deuxième argument est le nom du fichier swf, le troisième argument est l'identifiant arbitraire que vous pouvez affecter à l'objet que vous intégrez, et les deux derniers arguments correspondent à la largeur et à la hauteur du fichier SWF..
swfbject.js a été créé par Geoff Stearns, Toby Boudreaux et Bobby van der Sluis. C’est actuellement (2010) la bibliothèque JavaScript la plus répandue et la plus utilisée pour la détection des versions de Flash Player et l’incorporation de fichiers swf dans des pages HTML..
Le code pour incorporer un fichier SWF dans une page HTML à l'aide de SWFObject.js peut ressembler à ceci:
Le fragment de code que vous venez de lire est un exemple très basique de la façon dont le fichier swfobject.js peut être implémenté. Le code peut être beaucoup plus complexe. Pour plus d'informations, consultez ce didacticiel swfbject.js et consultez la documentation destinée aux développeurs..
La référence au fichier JavaScript dans le La balise peut ressembler à ceci:
Si le site Web Flash existant utilise SWFObject.js pour incorporer un fichier swf, vous avez de la chance: nous allons utiliser le type d’incorporation SWFObject.js pour configurer la redirection vers la page Web non Flash. Si un autre type de scénario d’incorporation est utilisé, nous devrons effacer l’ancien code de la page HTML et le remplacer par l’incorporation de SWFObject. Nous allons utiliser SWFObject pour rediriger les visiteurs de l'iPad vers le site Web de sauvegarde autre que Flash..
Pour les besoins de ce didacticiel, nous allons utiliser une page de formation dans laquelle le fichier SWF est incorporé à l'aide du fichier AC_RunActiveContent.js. Si nous ouvrons la page FlashWebsite.html dans un navigateur, nous verrons le fichier SWF familier intégré à la page..
Ouvrons la page intitulée FlashWebsite.html dans n’importe quel éditeur de texte ou éditeur HTML spécialisé..
Nous devons nous rappeler ou écrire les informations importantes concernant notre fichier SWF, telles que son nom (FlashWebsite.swf dans notre exemple), largeur (800), hauteur (580) et couleur de fond (#FFFFFF)..
Maintenant, remplaçons la ligne qui référence le fichier AC_RunActiveContent.js dans
étiquette:avec cette ligne:
Nous avons maintenant créé la référence à la bibliothèque SWFObject.
Localisons un code qui ressemble à ceci:
Nous allons sélectionner ce morceau de code et l'effacer. Ce que nous avons maintenant est le vide Sous cette balise, collons ce qui suit: Notez que l’argument entre parenthèses pour le paramètre unique ajouté ( Remarque: le cinquième argument entre parenthèses de la fonction SWFObject, "9", fait référence à la version principale du lecteur Flash. Lorsque cela n’a pas d’importance particulière, je préfère laisser un peu de mou aux navigateurs et ne pas exiger la version la plus récente du lecteur Flash. C’est pourquoi je le règle ici à 9, même si la version actuelle (2010) est la 10.. Sauvegardons la page HTML et ouvrons-la dans un navigateur. ça devrait ressembler à ça. Jusqu'à présent, rien ne semble avoir changé. L'animation Flash est lue lorsqu'elle est incorporée à l'aide du fichier AC_RunActiveContent.js. De la même manière, elle est lue de la même manière, avec le fichier swfobject.js. Si nous essayions d'ouvrir cette page avec iPad, nous ne verrions toujours aucun contenu.. Ajoutons deux autres arguments à la fin de la série d’arguments entre les parenthèses de l’appel de la fonction principale. Le premier argument doit être vide, mais uniquement les guillemets: "" et le second argument doit être le chemin d'accès à la page Web de sauvegarde non Flash vers laquelle nous voulons rediriger les visiteurs de l'iPad: "./JavaScriptWebsite.html" Le bit complet de code avec les deux nouveaux arguments ajoutés devrait ressembler à ceci: Le premier argument vide que nous venons d'ajouter est appelé Remarque: "./JavaScriptWebsite.html" est le chemin d'accès local à la page de sauvegarde animée par JavaScript que nous utilisons dans ce tutoriel. Ce chemin nous permettra de tester la redirection localement ainsi que sur le serveur. En travaillant avec vos propres projets, vous pouvez définir le chemin absolu de votre page HTML de sauvegarde au lieu du chemin local, ou un chemin local de tout répertoire ou sous-domaine dans lequel vous pouvez choisir d'héberger la page de sauvegarde.. Avant de télécharger les fichiers sur le serveur, nous devons tester la redirection localement. Pour pouvoir le faire, nous allons simuler l'iPad en définissant l'attribut version de l'objet SWFO sur une version non existante du lecteur Flash. Sauvons-le et fixons-le à 1000 (cette version du lecteur Flash devrait être disponible aux alentours de 3000 DA si les choses se passent bien chez Adobe). Le code devrait ressembler à ceci: N'oubliez pas de sauvegarder le fichier. Maintenant ouvrons le fichier FlashWebsite.html dans un navigateur et examinons la barre de titre de la page Web. Au lieu de dire "Site Web Flash", vous devez indiquer "Site Web animé par JavaScript", et la dernière partie de l'URL doit être JavaScriptWebsite.html au lieu de FlashWebsite.html. Félicitations, notre redirection fonctionne: l’animation ultra-avancée que vous voyez dans votre fenêtre s’effectue non pas avec Flash, mais avec JavaScript. Il devrait ressembler et se comporter comme ça. Réinitialisons la valeur de la version à "9". Le code dans FlashWebsite.html devrait à nouveau ressembler à ceci: Assurez-vous de sauvegarder le fichier à nouveau. En utilisant n’importe quel logiciel client FTP, téléchargeons les fichiers suivants dans un répertoire sélectionné de votre serveur: Téléchargez le dossier Scripts contenant les fichiers swfobject.js et fx.js dans le même répertoire sur le serveur (rappelons-le, swfobject.js est le fichier qui permet l’intégration swf ainsi que la redirection, et le fichier fx.js est celui qui permet vous devez créer et lire l'animation JavaScript utilisée dans la page Web de sauvegarde et pouvant être lue sur iPad). Vous n'êtes pas obligé de télécharger le fichier AC_RunActiveContent.js situé également dans le dossier Scripts sur votre serveur, même si cela avait été fait accidentellement, ce fichier n'interférerait en aucune manière avec les performances de tous les autres fichiers que vous avez téléchargés.. Voici le moment de vérité! Lancez votre tablette iPad et accédez à la page FlashWebsite.html téléchargée sur votre serveur. Voilà! Vous devriez voir la page de maquette animée par JavaScript au lieu de la page Flash. Nous venons de protéger un site Web Flash pour iPad. Vous venez d'apprendre l'une des manières possibles de sécuriser un site Web Flash existant sur iPad. Cet objectif peut être atteint de nombreuses façons et toutes ne comportent pas une redirection automatique. J'aimerais vous demander à tous de partager vos idées sur le sujet du site Web Flash à l'épreuve de l'iPad dans les commentaires de ce tutoriel. Merci pour la lecture!
so.write ("conteneur")) correspond au nom du vide
xiRedirectUrl, et il est utilisé par le script SWFObject pour rediriger les utilisateurs ayant terminé la mise à niveau de ExpressInstall. Nous n'utilisons pas ExpressInstall ici, nous allons donc laisser l'argument vide. Le deuxième argument, appelé redirectUrl, est utilisé par SWFObject pour rediriger automatiquement les utilisateurs qui ne disposent pas de la version requise de Flash Player - ce qui est exactement la fonction dont nous avions besoin depuis le début. Aucune tablette de Flash Player n'est installée sur la tablette iPad, elle est donc admissible!
Étape 4: tester la redirection localement
Étape 5: télécharger des fichiers sur un serveur
Étape 6: Testez la redirection avec iPad
Conclusion
Accentsconagua