Récuperer la position de la souris.. partout !

Version imprimable

10/06/2008, 00h09
Fredovsky

Récuperer la position de la souris.. partout !

Bonjour,

Je travaille sur un site web, dont le logo (situé en haut a gauche) sera composé d'yeux. Je voudrais que ceux-ci regardent sans cesse la souris.

J'ai compris le fonctionnement global de la méthode (j'aime les vecteurs....:mrgreen:)...

Le problème est que lorsque la souris sort du flash (en gros 95% du temps... pour naviguer sur le site), et bien les yeux ne suivent plus la souris (pas de récupération de la position de celle-ci...).

Une solution à me proposer (ne comptez pas sur "tout mettre en flash" :aie:) ?

Merci bien !
10/06/2008, 00h18
IP-Fix

Tu détecte les mouvement de souris via javascript et tu papote avec flash en lui disant ou se trouve la souris ^^

:)
10/06/2008, 00h25
Fredovsky

Fiou ouf ! Je pensais que ça allait être impossible ^^

Bon merci pour cette info, je vais voir dans cette direction...
10/06/2008, 01h26
Fredovsky

Mouarf !

Pas facile pour un débutant de faire faire communiquer flash et javascript !

Quelqu'un aurait un exemple à me proposer pour savoir comment partir ?

Voila le code simple pour t'aider :D

partie javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
var Mouse_X;
	var Mouse_Y;
 
	function WhereMouse( e ){
		var DocRef; 
 
		if( e){                
			Mouse_X = e.pageX;
			Mouse_Y = e.pageY;
	  	}
	  	else{                  
			Mouse_X = event.clientX;
			Mouse_Y = event.clientY;
 
			if( document.documentElement && document.documentElement.clientWidth)
				DocRef = document.documentElement; 
			else
		  		DocRef = document.body;           
 
			Mouse_X += DocRef.scrollLeft;
			Mouse_Y += DocRef.scrollTop;
		}
 
		declencheFonctionActionScript();
	}
 
	document.onmousemove = WhereMouse;
 
	function recupAnimation ( id ){
		if (navigator.appName.indexOf("Microsoft") != -1) 
			return window[id];
		else
			return document[id];
	}
 
	function declencheFonctionActionScript ( ){
		recupAnimation("monApplication").aliasFonction(Mouse_X,Mouse_Y);
	}

partie html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="script/mouse_see.js"></script>
</head>
 
<body>
<object width="550" height="400">
	<param name="movie" value="test_external.swf" />
	<param name="quality" value="high" />
	<param name="allowScriptAccess" value="always" />
	<embed src="test_external.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="400" allowscriptaccess="always"  id="monApplication" name="monApplication" ></embed>
</object>
</body>
</html>

partie flash

Code:

1
2
3
4
5
6
7
8
9
var tf:TextField = new TextField();
addChild(tf);
 
ExternalInterface.addCallback ( 'aliasFonction', maFunction );
 
function maFunction ( x:int,y:int ):void
{
	tf.text = 'x = '+x+', y = '+y;
}

J'attire ton attention sur dans la partie html

Code:

allowscriptaccess="always" id="monApplication" name="monApplication"

ainsi que

Code:

<param name="allowScriptAccess" value="always" />

Indispensable pour les probleme de sécurité flash ainsi que pour le javascript (l'id et le name) :)

et voila le boulot ! :king:

10/06/2008, 12h10
Fredovsky

Un grand merci !
Je bricole ca tout de suite ! :king:
10/06/2008, 12h37
Fredovsky

Bon alors voilà où j'en suis :

J'ai fait mon flash (test_external.swf), avec dans les actions le code que tu m'as filé.
Quand je fais "Publish", il me dit qu'il y a une erreur de compilation (il trouve pas les variables x et y), ce qui me semble normal puisque celles-ci viennent du fichier .js (mais ais-je raison... ?)

J'ai mon fichier js avec ton code dans le répertoire script.

J'ai fait un html avec le code, sans rien toucher (ni l'id ni le name pour le moment).

Et quand je lance le tout.... Rien ne se passe dans mon flash ! :(

J'ai regardé de plus près les sources que tu m'as filé, j'ai a peu près compris le fonctionnement, mais je vois pas d'où ça peut venir !

(Merci pour le temps que tu as consacré :roll:)
10/06/2008, 13h13
IP-Fix
Ton erreur viens de la compilation du flash , tu compile bien en action script 3 ?

Sinon les variables x et y ne sont visible que dans la fonction maFunction :
Code:

1 2 3 4 5 6 7 8 function maFunction ( x:int,y:int ):void { //Il y a une variable x ici qui existe (passé en parametre) tf.text = 'x = '+x+', y = '+y; } //Il n'y a pas de variable x ici ...
C'est ça que tu comprend pas ?

Parce que chez moi j'ai tout testé et sa passé nickel avec le code source ci dessus :aie:

PS : J'ai testé dans un fichier flash compilé en as3 avec ce code sur la premiere image du premier calque. J'aurais pu utilisé une class document pour etre plus propre mais là c'était juste pour tester...

Si tu veux plus d'aide il faut mettre des sources , sinon je peux pas t'aider.
10/06/2008, 13h20
Fredovsky

En effet je n'étais pas en Action Script 3 mais 2, d'où le problème de compilation !

On approche du but !

Maintenant quand je lance la page web, il me dit qu'il y a une erreur de securite Flash (tentative de communication entre le js et le swf).

Et ce malgrès la ligne :
allowscriptaccess="always"
<param name="allowScriptAccess" value="always" />

8O

Message d'erreur :

SecurityError: Error #2060: Violation de la sécurité Sandbox : l’appelant ExternalInterface test_external.swf ne peut pas accéder à pos.html.
at flash.external::ExternalInterface$/flash.external:ExternalInterface::_initJS()
at flash.external::ExternalInterface$/addCallback()
at test_external_fla::MainTimeline/test_external_fla::frame1()
10/06/2008, 13h26
IP-Fix

verifie que t'a le dernier flash player , car la a part ça je vois pas ... :aie::oops:
10/06/2008, 13h29
Fredovsky

Bon je vais m'arranger !!

Ca marche pas en local mais ça fonctionne impeccablement quand je passe par le serveur !!! (je verrai avec les cross domain...)

Merci beaucoup pour ton aide j'aurais pas pu y arriver sinon :king:

A bientot ! :yaisse2:

C'EST GENIAL :mouarf:
10/06/2008, 20h05
Fredovsky

Bon ça avance bien, très bien même !

Tout fonctionne ou presque.... :aie:

Le script utilisé plus haut permet de récupérer la position de la souris partout sur la page web (a partir du coin supérieur gauche) SAUF sur le fichier flash lui même.

J'ai donc rajouté un onmousemove sur mon flash bref çà fonctionne désormais aussi sur le flash.

Sauf que lorsqu'on est hors du flash les coordonnées sont données par rapport au coin supérieur gauche de la page web, et a l'intérieur du flash, par rapport au coin supérieur gauhe du flash en question.

Or celui-ci est centré sur ma page web, donc a chaque fois que je passe de la page web au flash, ca change de repère absolu et donc ca fait une discontinuité dans les coordonnées.

Je vois pas trop s'il y a une solution à ce problème, étant donné que le flash (étant centré) a sa position absolue qui va changer en fonction de la resolution de chacun, et de la largeur de leur navigteur....

:roll:

Il y a possibilité de connaitre la position du flash dans la page web à tout instant ?
10/06/2008, 20h09
IP-Fix

simple , tu passe en loadVar la position du flash au debut ( variable que tu modifie a chaque evenement resize de la page via une autre fonction javascript/flash )

et tu fais un truc dans le flash sur le onMouseOver :

x = flashposition+Mouse_X; ou un truc du genre :aie:

Mais si c'est juste les yeux qui doivent suivre , je vois pas trop l'interet de devoir etre dans le meme repert , tu fais deux fonction (une pour quand le truc est a l'exterieur) et une quand c'est a l'interieur) et hop hop hop :P

Bref , j'espere t'avoir aidé. :D

J'ai en effet fait 2 fonctions, une pour l'extérieur et une autre pour l'intérieur (c'est uniquement pour les yeux).

Illustratrion du problème ici :

http://www.booktin.fr/test/yeux.html

Voici le code dans mon flash :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
import flash.display.*;
import flash.events.MouseEvent;
import Math;
//var tf:TextField = new TextField();
//addChild(tf);
var rayon:int = 10;
 
ExternalInterface.addCallback ( 'aliasFonction', suivreSourisExterieur );
/*function maFunction ( x:int,y:int ):void
{
	tf.text = 'x = '+x+', y = '+y;
}*/
function suivreSourisExterieur( x:int,y:int):void
{
	var d1x = x - this.oeil_mc1.x;
	var d1y = y - this.oeil_mc1.y;
	var d2x = x - this.oeil_mc2.x;
	var d2y = y - this.oeil_mc2.y;
	var angle1 = Math.atan2(d1y, d1x);
	var angle2 = Math.atan2(d2y, d2x);
	this.oeil_mc1.pupille_mc.x = rayon*Math.cos(angle1);
	this.oeil_mc1.pupille_mc.y = rayon*Math.sin(angle1);
	this.oeil_mc2.pupille_mc.x = rayon*Math.cos(angle2);
	this.oeil_mc2.pupille_mc.y = rayon*Math.sin(angle2);
 
}
 
function suivreSourisInterieur(pEvt:MouseEvent):void {
	var d1x = this.mouseX - this.oeil_mc1.x;
	var d1y = this.mouseY - this.oeil_mc1.y;
	var d2x = this.mouseX - this.oeil_mc2.x;
	var d2y = this.mouseY - this.oeil_mc2.y;
	var angle1 = Math.atan2(d1y, d1x);
	var angle2 = Math.atan2(d2y, d2x);
	//si la souris se trouve dans l'oeil 1
	if(((d1x)*(d1x) + (d1y)*(d1y)) < (rayon*rayon))
	{
		this.oeil_mc1.pupille_mc.x = this.mouseX - this.oeil_mc1.x;
		this.oeil_mc1.pupille_mc.y = this.mouseY - this.oeil_mc1.y;
	}else{
	//sinon si la souris se trouve dans l'oeil 2
	if(((d2x)*(d2x) + (d2y)*(d2y)) < (rayon*rayon))
	{
		this.oeil_mc2.pupille_mc.x = this.mouseX - this.oeil_mc2.x;
		this.oeil_mc2.pupille_mc.y = this.mouseY - this.oeil_mc2.y;
	}
 
 
	//sinon (si elle est ailleurs dans le flash)
	else
	{
	this.oeil_mc1.pupille_mc.x = rayon*Math.cos(angle1);
	this.oeil_mc1.pupille_mc.y = rayon*Math.sin(angle1);
	this.oeil_mc2.pupille_mc.x = rayon*Math.cos(angle2);
	this.oeil_mc2.pupille_mc.y = rayon*Math.sin(angle2);
	}
	}
} 
this.addEventListener(MouseEvent.MOUSE_MOVE,suivreSourisInterieur);

Dans l'exemple fais trainer la souris en haut a gauche tu verra tout de suite le problème.

Ah oui et puis je viens de remarque que ca ne fonctionne pas avec IE, pourtant le script en tient normalement compte ?!

Il faudrait que j'ajoute (lorsqu'on est a l'exterieur du du flash) les coordonnées de celui-ci.

11/06/2008, 02h16
Fredovsky

Bon voila mon résultat après ce soir :

Je récupère la position du flash au chargement de la page, je la transmet au flash et ça fonctionne parfaitement ! :yaisse2:

Les HIC :

Quand on redimensionne, j'arrive pas a utiliser la fonction window.onresize=...

Ça bug (rechargement intempestif) ou ça fait n'importe quoi (ça récupère pas les bonnes coordonnées...)

Et enfin, le script qui permet de récupérer la position de la souris partout sur la page n'a pas l'air de fonctionner avec IE...

:roll:
11/06/2008, 11h32
Fredovsky

Bon décidément j'arrive un peu a avancer seul :mrgreen:

Voila où j'en suis désormais :

http://www.booktin.fr/test/yeux2.html

La fenetre d'alerte affiche les coordonnées du flash sur Y.

Impeccable lors du chargement, elle passe a 91 lorsqu'on redimensionne ?
Pourquoi 91 c'est incomprehensible !

Toujours pas de fonctionnement sous IE...
11/06/2008, 11h50
IP-Fix

Je sais pas pour ie il dit qu'il y a une erreur a la ligne 83 et 50 et quelques ...

Mais je developpe très peu en javascript sans framework pour eviter ce genre de chose , je te conseil le module swiff de mootools 1.2 qui s'occupe de l'integration d'un flash et de l'interaction avec ce dernier.

Au moins t'es sur que sa marchera avec tout les navigateurs rescents.

Page de mootools pour telecharger que swiff (et les autre dont il depend) :
http://mootools.net/core
Page de la documentation de swiff :
http://docs.mootools.net/Utilities/Swiff

Les exemple de la page me semble assez clair... Puis si t'a besoin de contenu riche en javascript mootools1.2 est une très bonne idée :) ! Comme dit sur leur page de nombreux gros site , a commencer par le w3c, l'utilise.

Sinon ton animation marchais sous firefox très bien , beau logo ;)
11/06/2008, 11h57
Fredovsky

Merci bien, et merci pour toute ton aide je vais voir du coté de mootools.

A bientot :king: