18041 sujets

Questions générales et questions de débutants

[Résolu] Du flash en background de l'HTML

Salut,

J'ai parcouru quelques sites où on peut constater un arrière plan en flash (qui permet beaucoup de choses du coup, ou plutot d'autres choses que du Jquery) sans pour autant que le reste du site soit en flash, mais plutôt en XHTML.

Exemple : http://www.batmanlive.com/home.php

Comment intégrer du flash sans qu'il vienne se mettre au premier plan et empêcher de cliquer sur de l'HTML ? simplement en le mettant dans une div derrière d'autres div ?

Merci ! Smiley cligne
Modifié par zepokpok (14 Jun 2011 - 16:34)
et c'est suffisant pour que la souris ne détecte pas le flash et que le curseur se comporte comme sur une page html classique ?
Sur quelle page tu vois du Flash en background ? J'ai vu ça nul part sur ce site. Le seul truc qui est en Flash c'est le lecteur de vidéo.
Modifié par jb_gfx (10 Jun 2011 - 22:59)
jb_gfx a écrit :
Sur quelle page tu vois du Flash en background ? J'ai vu ça nul part sur ce site. Le seul truc qui est en Flash c'est le lecteur de vidéo.


La page a changée entre temps ...il y avait un ballon et des éclairs à droite ... le flash était encadré par 2 div
Yop !

Sinon tu peux tout à fait faire ce genre de choses avec les balises HTML5 <canvas> et <svg>.

Personnellement je procède comme suit :

<div id="Background">
</div>
<div id="Page">
<div id="Header">
</div>
<div id="Corps">
</div>
</div>

Avec Background en position absolute et de taille 100%.
Ensuite JavaScript vient nourrir la div Background. Libre à toi de faire une simple animation ou un arrière plan interactif.
Tu peux faire des choses amusantes, par exemple en jouant sur le parallaxe.

Sur FireFox (> 3.6), canvas + JavaScript est plutôt réactif, et tu peux afficher un bon nombre de choses à l’écran. Lors de mes derniers tests, IE9 et Chrome galéraient un peu plus (animations saccadées).

De plus avec canvas, il est possible d'utiliser OpenGL ES pour faire un background animé en 3D, ou utilisant la puissance des shaders. SVG permet de faire des choses sympas en utilisant les filtres.
l'ennui c'est que sur les navigateurs un peu plus âgés (sans parler d'IE6 pour lequel je n'assure plus aucun support), il n'y a rien qui passe non ?

Merci pour la combine en tout cas, peux tu être plus explicite concernant le javascript, quel type de code inseres tu ?

Cette page contient encore un peu de flash en arrière plan mais c'est moins intéressant que le premier lien, car le le flash est "cliquable", visible sans afficher le code source en fait.
Salut zepokpok,

Évidement, pour les vieux navigateurs, c'est tout mort. Mais le problème est le même avec flash, si le pugin n'est pas présent.
Mais rien ne t’empêche de proposer un background alternatif pour cette tranche de la populace.
Ne serait ce qu'une image fixe, accompagnée d'un message indiquant à l'utilisateur que son navigateur est trop ancien pour profiter au max de ton site.



Alors, concernant le JavaScript, c'est à toi de voir. Ça va dépendre de ce que tu veux.
Tu peux par exemple créer ta div de background pour les navigateurs anciens (une image d'arrière plan dans la thématique de ton design + le joli petit message sus-cité). A la fin de chargement de ta page (<body onload="fonctionjavascript();">), ton code JS viens nourrir / remplacer / modifier le contenu de ton background.
Ça te permet de gérer directement le cas ou JavaScript n'est pas activé.

Si JS est activé, le codé récupère la div associée au background (avec un getElementById).
Mais il est également possible de faire comme ceci :


window.onload = function() 
{
	Canvas  = document.createElement("canvas");
	
	Canvas.width = window.innerWidth;
	Canvas.height = window.innerHeight;
	Canvas.id = "MonCanvas";

	document.childNodes[1].appendChild(Canvas);
	
	if (!Canvas || !Canvas.getContext)
	{
		ErrorCanvas("Impossible d'obtenir un canvas.");
		return;
	}
	
	Context = Canvas.getContext('2d');
	
	if (!Context)
	{
		ErrorCanvas("Impossible d'obtenir le context du canvas.");
		return;
	}

        setInterval("Draw()", 50);
}


Au chargement de ta page, un canvas de la taille de la fenêtre est ajouté comme premier élément de body. Ensuite, la fonction "Draw();" sera appelée toutes les 50 millisecondes. L'avantage est que tu n'as pas à te soucier du code HTML, des que le script est inclu, ton background animé est ajouté.
Ok c'est noté, merci beaucoup pour cette réponse aussi claire que précise, je vais tester ça à l'occasion Smiley cligne

Merci encore !
Sujet clos
Aller à