Détecter et corriger : Plugin Flash player
Le but d’une animation flash c’est d’être à un moment ou à un autre publié sur une page Web, en passant dans le menu fichier > publier, flash génère un fichier HTML, un fichier javascript et un fichier SWF servant tous trois à afficher l’animation sur le Web.
- Le fichier JavaScript contient des fonctions servant à l’affichage de l’animation sur tous les navigateurs
- Le fichier HTML contient le code HTML basique d’une page ainsi que le script d’insertion du SW F
- Le SWF correspond à l’animation flash ( au fichier .fla ) compilée
Cependant flash ne considére pas les utilisateurs qui ne possèdent pas son plugin ; du coup, si vous ne le possédez pas il affichera … absolument rien, voir un cadre avec une belle croix rouge, bonjour le bug, inadmissible.
Non allons donc développer un script nous permettant d’afficher un message de téléchargement du plugin si l’utilisateur ne le possède pas, ou possède un plugin trop ancien. En fait nous n’allons pas le développer puisque le site officiel d’Adobe propose ce script mais.... nous allons le personnaliser 
Notre tutorial se compose de quatre parties :
- Création du message Flash sous Photoshop
- Récupération et création des fichiers
- Application et personnalisation de notre script
- Test de notre script
Création du message Flash sous Photoshop
- Fichier Photoshop source
- Fichier source photoshop utilisé dans ce tutorial
ETAPE 1
J’ouvre Photoshop et je crée un nouveau document dans lequel j’importe mon icône png flash player (télécharger le fichier psd ci-dessous pour récupérer l’icône).
ETAPE 2
Avec l’outil des formes personnalisées je crée un rectangle arrondi sous l’icône, je diminue ensuite son opacité de façon importante.
ETAPE 3
Avec l’outil texte j’ajoute un texte invitant l’utilisateur à télécharger le fichier player Flash, ce message s’affichera lorsque l’utilisateur ne peut consulter l’animation par défaut de plugin.
Récupération et création des fichiers
Premièrement vous devez récupérer le script sur le site officiel de Adobe : http://www.adobe.com/products/flashplayer/download/detection_kit/ Ou alors j’ai créé une sauvegarde téléchargeable juste ci-dessous :
- Detection tool kit Flash Player
Dans l’archive, un seul dossier nous intéresse c’est : Client-Side Detection
Ce dossier contient donc le fichier html, un fichier SWF correspondant à un message flash (nous nous allons le substituer avec notre message créé sous Photoshop) et un fichier JS.
Dans un premier temps, je vais ajouter à ce dossier mon animation qui est sensée s’afficher dans ma page. Dans mon exemple j’ajoute donc l’animation : animation.swf.
Application et personnalisation de notre script
J’ouvre le fichier HTMl ClientSideDetection dans un éditeur HTML et je supprime la partie qui se trouve dans le body, je la remplace par le code ci-dessous.
<center>
<script language="JavaScript" type="text/javascript">
<!--
// Version check based upon the values entered above in "Globals"
var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
// Check to see if the version meets the requirements for playback
if (hasReqestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "animation",
"width", "550",
"height", "400",
"align", "middle",
"id", "detectionExample",
"quality", "high",
"bgcolor", "#FFFFFF",
"name", "detectionExample",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
'codebase', 'http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab',
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = ''
+ '<div align=center><a href="install_flash_player_active_x.msi" title="Pour consulter cette page correctement vous devez installer le Player Flash"><img src="tuto_341_3.jpg" border="0" class="flashplayerbutton"></a></div>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
Cette page nécessite Flash Player et JavaScript pour s'exécuter correctement.
<a href="install_flash_player_active_x.msi">Télécharger le player flash en cliquant ici.</a>
</noscript>
</center>
Je pense qu’il n’y a pas besoin d’explications, tout est assez simple, vous devez juste modifier la largeur et la hauteur de votre document, ainsi que son nom dans le src.
En bas vous trouverez le code affiché lorsque :
- l’utilisateur ne posséde pas le player flash
- l’utilisateur ne posséde pas le player flash et a désactivé JavaScript
Test de notre script
Pour tester que tout est bon j’ouvre mon fichier HTML dans mon navigateur, normalement mon animation s’affiche, en allant dans les options > onglet programme : je désactive le plugin flash, je reviens sur ma page et appuie sur F5 comme par magie, mon message apparaît me demandant de télécharger le player flash !
Alors elle est pas belle la vie ?
Un code à appliquer à chaque fois que vous afficherai un fichier swf dans une page HTML.
Vous pouvez tester ce script en ligne en vous rendant sur cette page :
Merci à tous d’avoir lu ce tutorial Et bonne chance pour la découverte de ce code !
INSCRIVEZ VOUS AU FLUX RSS WONKASTUDIO
|
