Voici un exemple qui montre comment integrer une animation flash en fond d’ecran d’un site en html. L’idee d’origine est de simuler un swf en background de notre page, a l’aide du CSS et de JAVASCRIPT.

L’intérêt ? :

• Augmenter l’attrait graphique d’un site tout en gardant l’accessibilité du HTML.

• Rajouter des possibilités d’interactions dans un site HTML grâce à FLASH.

- démo d’un background fixed
- démo d’un background fullscreen

Présentation

Ce script permet de mettre en fond d’un site HTML une DIV contenant un swf. Cette DIV réagit alors comme un background.

Le background en FLASH peut être soit “fixed” ( au scroll de la page, le SWF reste en position fixe.) soit “fullscreen”, auquel cas le SWF prendra toute la hauteur de la page.

Sur le principe, une fonction javascript va rajouter des classes css aux différents éléments de la page et implémenter des comportements javascript. La feuille de style va implémenter les styles CSS en fonction des cas.

Mise en application:

1- Attacher la feuille de style.

<link rel="stylesheet" href="CSS.css" type="text/css" media="screen" />

2- Attacher le script js

<script src="flash_bg.js" type="text/javascript"><!--mce:0--></script>

3- Appeler la fonction

Au chargement de la page on appelle la fonction:

setCpt(id_Flash,id_Site,'fixed');

Cette fonction reçoit 3 paramètres:
- id_Flash: l’id de la div contenant le swf
- id_Site: l’id de la div contenant le site
- le type de fond: soit “fixed” soit “fullscreen”

4- Paramètres du fichier flash
ici les paramètres classiques d’un site flash en fullscreen:

Stage.align = "TL";
Stage.scaleMode = "noScale";

!! Le SWF doit etre en wmode transparent, pour ne pas recouvrir le contenu html !!

5- Copier le dossier img
(ce dossier contient un pixel transparent en gif. Cette image est utilisée pour l’un des hacks IE,et permet de ne pas avoir le fond qui saute au scrolling sous IE6.)

évolutions:

Cette fonction très sommaire a pour but de présenter le principe d’intégration d’un fond en flash dans un site HTML.

Je n’ai pas trouvé d’autres fonctionnalités suffisamment génériques à intégrer,( la plupart des fonctionnalités annexes intéressantes requiert quelques lignes d’ActionScript, et ce n’est pas le sujet ici. )

On peut très bien imaginer intégrer toute une série de fonctionnalités de communication flash / js ( par ex: faire continuer un tween flash par un tween mootools, interaction entre le scrolling js et flash …)

En utilisant des librairies de type mootools ou Aflax, on peut encore augmenter les possibilités de développement.

limites:

Expérience personelle: Au début j’ai commencé à bosser sur l’idée d’un site HTML avec un diaporama en flash en fullscreen, à la suite d’une idée à un client.

L’idée était assez interessante, et je n’avais pas trop de souvenir de sites reprenant ce principe, alors que techniquement ca paraissait assez accessible.

Après avoir testé différentes solutions, j’ai fais quelques trucs rigolo, mais j’ai décidé de ne pas intégrer de fond de site en FLASH sur le site en production de mon client

.

Je trouve que globalement les résultats obtenus ne sont pas vraiment satisfaisant, et que cela pose quelques les contraintes ergonomiques.

• En mode “fixed”, certains navigateurs ne récupèrent pas le scroll molette si la souris est en dehors de la div du site.

• Durant le scrolling de la page, toujours en fonction des navigateurs, il se peut que le flash se mette à ramer.

• Le script modifie le comportement css de 4 éléments du DOM:
  le body, le html, la div contenant le swf et la div contenant le site. Le développement de ce script est basé sur une structure css assez classique: l’ensemble du site est contenu dans une div contenaire.Sur certaines mises en page les modifications effectuées par le script auront pour effet de casser la mise en page ( notamment pour les mises en page où le contenaire du site n’est pas en absolute ou relative )
  Il faudra alors modifier quelque peut la fonction setCpt pour l’adapter aux diffèrents cas de figure.

• Perte des évènements souris à cause du Z-index de la div HTML qui couvre le swf.

• Et puis, ca fait ramer ma machine, et ca c’est pas glop.

Compatibilité

Le script a été testé sous:

Firefox
Internet explorer 6
Internet explorer 7
Safari
Opéra

fichiers sources

Télécharger les fichiers