Fil d'ariane : DaWeed.info » javascript » Faciliter l’intégration des sites fullflash

6 sept 2007

Faciliter l’intégration des sites fullflash

Article publié dans la catégorie javascript | lu 9568 fois |

SWFintegrator(v1.0) est une classe javascript qui permet de faciliter l'intégration d'un site fullflash au sein d'une page Html.   Cette classe corrige les problèmes couramment rencontrés lors de l'intégration d'un site fullflash:  
  • scrollbar
  • résolution d'écran trop petite
  • positionnement du flash.
  • redimensionnement de la fenêtre
  télécharger SWFintégrator  

principe:

Le principe est de générer, en fonction de la résolution de l'écran, des comportements CSS et javascript pour une < div > qui contient notre fichier swf, et pour la scrollbar.   Pour les sites en plein écran, cela permet de ne pas avoir la scrollbar quand ce n'est pas nécessaire mais également de fixer une taille minimum au flash.   Pour les sites centrés, la gestion des scrollbars permet de n'avoir de scrollbars que quand cela est nécessaire. Si la résolution est trop petite, cela évite d'avoir un site qui sorte de l'écran.   !! pour que SWFIntegrator fonctionne, il faut retirer le doctype de la page, sinon la hauteur du flash ne convient pas.

démos

Pour les démos la taille minimum à été fixée a 800 /600. Redimensionnez vos navigateurs au dessus et en dessous pour voir les différences de comportements avec et sans swfintegrator      

utilisation

 
PLAIN TEXT
JAVASCRIPT:
  1. var my_SWFintegrator = new SWFintegrator(iMinWidth,iMinHeight,sCssType,sFlashContenaire);

  la classe reçoit 4 paramètres:
  • iMinWidth : largeur minimum en px
  • iMinHeight : hauteur minimum en px
  • sCssType : "fullscreen" ou "center"
  • sFlashContenaire : nom de la div contenant le swf. par défaut il est a "flashcontent", valeur dans le swfObject

intégration:

Cette classe a été initialement développée pour fonctionner avec le swfObject, mais elle peut s'intégrer facilement dans d'autres configurations. Pour cela il suffit de contenir le flash dans une balise < div > et de renseigner l'ID lors de la création du swfintegrator.     pour l'intégrer avec le swfObject:
PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript" src="swfobject.js"></script>
  2. <script type="text/javascript" src="swfintegrator.js"></script>
  3. <script type="text/javascript">           // on appelle le swfintegrator     var mySWFIntegrator = new SWFintegrator(800,600,\\\\\\\'center\\\\\\\');
  4.  
  5. //on appelle le swfObject     var so = new SWFobject ("giveSize.swf", "swfminimal", "800", "600", "8", "#FFFFFF");     so.write("flashcontent");   </script>

    Pour l'intégrer dans une page html:
PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript" src="swfobject.js"></script>
  2. <script type="text/javascript" src="swfintegrator.js"></script>
  3.  
  4. <script>             function swfIntegrator(){     // on crer un objet SWFintegrator et     // on cible la div d\\\\\\\'id "monFlash" qui contient le swf.   var myPASMF=new SWFintegrator(800,600,"fullscreen","monFlash");         }   </script>
  5. <!-- on lance la fonction au chargement de la page-->
  6. <p id="monFlash"><!-- ici le code avec le flash swf --></p>

    Pour l'intégrer avec la methode AC_RunActiveContent, il faut rajouter une div qui contiendra le swf, et passer son Id en parametre de notre objet :
PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript" src="swfintegrator.js"></script>
  2. <script src="AC_RunActiveContent.js" language="javascript"></script>
  3.  
  4. <!-- on met le AC_RunActiveContent dans une balise -->
  5. <p id="contenaire_du_flash"><script language="javascript">              //appel de la fonction SWFintegrator, avec en parametre l\\\\\\\'id de la div        var myPASMF=new SWFintegrator(800,600,"fullscreen","contenaire_du_flash");</p>
  6.         //suite de la methodeAC_FL_RunContent        if (AC_FL_RunContent == 0) {             alert("Cette page nécessite le fichier AC_RunActiveContent.js.");       } else {       AC_FL_RunContent(                 .....       ); //end AC code      }     </script>
  7.  
  8. <noscript></noscript>

    télécharger SWFintégrator (la mise a jour - v1.1 )     !!! Le script a été mis a jour. les modifications de la dernière mise a jour sont disponibles ici !!!

Commentaires

1

Le 9 septembre 2007 à 19:41, par daweed

Si vous avez des remarques ou si vous souhaitez signaler des buggs, n’hesitez pas a laisser vos commentaires.

J’ai essayé de faire quelquechose de simple et facile a intégrer, si vous pensez au d’autres fonctionnalités…

2

Le 9 septembre 2007 à 19:59, par Lutincapuche

c’est chouette ! Ca marche bien à un mini détail prêt : je ne sais pas d’où ca vient, puisque ca ne le fait pas sur ton exemple, mais j’ai testé en mettant le flash en fullscreen. Et lorsque la taille de la fenêtre est plus grand que la taille minimum, la hauteur de mon flash est réduite à environ 20%… J’ai dû rajouté un position:absolute; sur la div contenant mon flash. J’ai vu que tu la renseignais dans ton js, mais quand je l’écris en css direct, ca résoud le bug… un peu curieux, mais si ca arrive à d’autres, voila la solution provisoire.

Sinon c’est cool :)

3

Le 10 septembre 2007 à 9:40, par onekon7

bien frais tout ça !

tu te rappelles comme on s’etait galéré pour le projet à faire fonctionner un truc similaire :)

4

Le 10 septembre 2007 à 9:48, par daweed

ouais, j’en ai encore qques souvenirs !!!

bon apres on voulais pouvoir gérer la scroll directement avec le swf ( agrandir la taille du swf au cours de la nav, et que la scroll suive )

Et puis bah ca c’est la prochaine fonctionnalité que je dois rajouter des que j’ai un peu de temps.Pour l’instant le resize se fait juste au load et au resize, encore qques lignes de code et ca devrait le faire.

5

Le 11 septembre 2007 à 8:56, par LutinCapucheBlog

[…] de révolutionnaire, mais très pratique : la classe javascript swfIntegrator développée par Daweed. Cette classe gère les problèmes couramment rencontrés lors de l’intégration d’un site […]

6

Le 13 septembre 2007 à 18:28, par Lipki

Je n’arrive pas a comprendre l’intérêt de ce script, je ne vois tous bonnement aucune différence.

7

Le 14 septembre 2007 à 9:19, par daweed

Lipki::

Dans le cas d’un site en fullscreen. tu as une mise en page elastique. imagine que tu as un logo callé en haut a gauche et un element en haut a droite.
Sur une petite résolution les elements a gauche et a droite vont se chevaucher et c’est tres laid. de plus en fonction des navigateurs en mode fullscreen, tu as une vilaine scrollbar sur la droite.

Avec le script tu définit une taille minimum et le fullscreen sera bloqué a une taille.

Pour un site qui est centré. Si tu utilise la technique css des marges negatives, a petite résolution ton site “sort” de l’écran.. et pareil avec la scrollbar qui est presente alors qu’elle ne sert pas.

Voila l’idée.
La classe ecrit a la volée le bon css,( il y a a chaque fois une nouvelle feuille de style qui est ecris si tu passe au dessous ou en dessus de la taille limite) , et affiche ou non la scroll via le javascript.

L’idée a la base de cette classe etait de permettre a un flasheur de ne pas avoir a se poser la question de l’intégration.

8

Le 6 novembre 2007 à 13:25, par Akeson_Chihiro

Retirer le doctype… Les gens des webstandards vont pas sourir.
SWfObject utilisait le fameux tip :

html, body, #foo { width:100%; height:100%; margin:0; padding:0; border:0; }

Et pour l’avoir utiliser a de nombreuses reprises ca passe bien sur les navigateurs.

9

Le 6 novembre 2007 à 15:07, par daweed

Il y a un bug a l’usage: le fait de mettre un doctype a la page genere plusieurs soucis ( scrollbarre visible alors qu’elle ne devrait pas, taille du flash … )

ca sera corrigé a la prochaine version.

10

Le 19 novembre 2007 à 16:38, par LutinCapuche

Yop
Ca serait super pratique si en plus tu mettais une option pour donener une taille maxi. En effet des fois on a des grandes images en bg, et ca permettrait de ne pas trop les étirer et de centrer le swf dans la page par exemple.
Merci d’avance :)

11

Le 29 novembre 2007 à 19:59, par Louis

Merci infiniement !!!!
C’est parfait dans IE Firefox et Opéra.

T’es vraiment génial !!