Discussion :

[wwave]

Bonjour,

Je développe sous Flash MX 2004 (Flash Player 7) et je voudrais appliquer un masque sur une image JPG. J'y arrive sur un quadrilatère que je créé.

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
createEmptyMovieClip("rectangleBleuMC",5);
with(rectangleBleuMC) {
	// épaisseur 2 pixels ; couleur : 0x0000ff ; opacité : 100% 
	// trait noir de 5 pixels : lineStyle(5)
	lineStyle(2, 0x0000ff, 100);
	// rempli l'objet qui va être dessiné ; couleur : 0x0000ff ; opacité : 20%
	beginFill(0x0000ff,20);
	moveTo(xb1, yb1);
	lineTo(xb2, yb2);
	lineTo(xb3, yb3);
	lineTo(xb4,yb4);
	lineTo(xb1, yb1);
	endFill();
};
 
createEmptyMovieClip("imageMasqueMC",6);
imageMasqueMC._x = 180;
imageMasqueMC._y = 90;
imageMasqueMC.loadMovie(imageMasqueUrl);
imageMasqueMC.setMask(rectangleBleuMC);

Le rectangle qui me sert de masque et l'image se superpose correctement mais l'image n'est pas "découpée"... J'ai lu que peut être c'est impossible et qu'il faudrait vectoriser l'image mais à priori avec Flash Player 7 les classes et méthodes permettant de la faire n'existent pas.

Pourriez vous soit me donner une solution soit me donner un article/site web qui dise que ce n'est pas possible (j'en avais trouvé un mais je ne le retrouve plus).

Merci de votre aide !

WwAvE

[ekameleon]

Hello

C'est simple.. faut que tu attendes que l'image soit chargée pour appliquer le mask, sinon tu appliques un mask sur un clip vide... ou qui va le devenir vu que loadMovie détruit le clip pendant le chargement... et le reconstitue avec le nouveau visuel à la fin du chargement...

Sinon pour charger une image ou un swf... utilise MovieClipLoader

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
createEmptyMovieClip("mask",5);
mask.lineStyle(2, 0x0000ff, 100);
mask.beginFill(0x0000ff,20);
mask.moveTo(xb1, yb1);
mask.lineTo(xb2, yb2);
mask.lineTo(xb3, yb3);
mask.lineTo(xb4,yb4);
mask.lineTo(xb1, yb1);
mask.endFill();
 
createEmptyMovieClip("container",6);
container._x = 180;
container._y = 90;
 
// notifié à la fin du chargement
this.onLoadInit = function (target) {
     container.setMask(mask);
}
var loader = new MovieClipLoader ;
loader.addListener(this) ;
loader.loadClip (imageMasqueUrl, container) ;

Ouvre l'aide de flash .. le dictionnaire actionscript et cherche la classe MovieClipLoader

EKA+

[wwave]

J'ai testé et celà ne fonctionne pas et me génère une erreur à l'appel de la fonction setMask() :

*** Violation de la sécurité Sandbox***
SecurityDomain 'http://chemin vers mon image JPEG' a tenté d'accéder au contexte incompatible 'file://chemin vers mon swf'

Sais tu pourquoi j'ai cette erreur ?

[ekameleon]

tu dois être en local... teste en ligne pour voir
EKA+

[wwave]

J'ai testé en ligne mais de toute façon ça n'applique pas le masque sur mon image...

[ekameleon]

étrange... revois ton code sinon isole ton problème dans un fla à part et montre mon ce que tu fais en direct que je puisse tester et te corriger efficacement
EKA+

[ekameleon]

PS : pense que tu peux utiliser le paramètre target dans le onLoadInit (target) pour cibler le clip dans lequel tu as chargé l'image... cela peut servir en cas de doute sur le ciblage du clip container.

EKA+

[wwave]

voilà la totalité de mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
var imagenw = "http://www2.demis.nl/wms/wms.asp?wms=WorldMap&version=1.1.1&service=wms&request=GetMap&layers=Countries&styles=&srs=EPSG:4326&bbox=-180,0,0,90&width=360&height=180&transparent=true&format=image/jpg";
var imagene = "http://www2.demis.nl/wms/wms.asp?wms=WorldMap&version=1.1.1&service=wms&request=GetMap&layers=Countries&styles=&srs=EPSG:4326&bbox=0,0,180,90&width=360&height=180&transparent=true&format=image/jpg";
var imagesw = "http://www2.demis.nl/wms/wms.asp?wms=WorldMap&version=1.1.1&service=wms&request=GetMap&layers=Countries&styles=&srs=EPSG:4326&bbox=-180,-90,0,0&width=360&height=180&transparent=true&format=image/jpg";
var imagese = "http://www2.demis.nl/wms/wms.asp?wms=WorldMap&version=1.1.1&service=wms&request=GetMap&layers=Countries&styles=&srs=EPSG:4326&bbox=0,-90,180,0&width=360&height=180&transparent=true&format=image/jpg";
 
createEmptyMovieClip("map",0);
map._width = 720;
map._height = 360;
 
createEmptyMovieClip("mapnw",1);
mapnw._x = 0;
mapnw._y = 0;
mapnw.loadMovie(imagenw);
 
createEmptyMovieClip("mapne",2);
mapne._x = 360;
mapne._y = 0;
mapne.loadMovie(imagene);
 
createEmptyMovieClip("mapsw",3);
mapsw._x = 0;
mapsw._y = 180;
mapsw.loadMovie(imagesw);
 
createEmptyMovieClip("mapse",4);
mapse._x = 360;
mapse._y = 180;
mapse.loadMovie(imagese);
 
// RECTANLGLE BLEU
xb1 = 300;
yb1 = 100;
xb2 = 450;
yb2 = 120;
xb3 = 470;
yb3 = 200;
xb4 = 250;
yb4 = 180;
 
createEmptyMovieClip("rectangleBleuMC",5);
with(rectangleBleuMC) {
	// épaisseur 2 pixels ; couleur : 0x0000ff ; opacité : 100% 
	// trait noir de 5 pixels : lineStyle(5)
	lineStyle(2, 0x0000ff, 100);
	// rempli l'objet qui va être dessiné ; couleur : 0x0000ff ; opacité : 20%
	beginFill(0x0000ff,20);
	moveTo(xb1, yb1);
	lineTo(xb2, yb2);
	lineTo(xb3, yb3);
	lineTo(xb4,yb4);
	lineTo(xb1, yb1);
	endFill();
};
 
 
 
monMenu = new ContextMenu();
monMenu.hideBuiltInItems();
masque = function() {
 
};
rectangleBleuOption1 = new ContextMenuItem("rectangle bleu",masque);
monMenu.customItems.push(rectangleBleuOption1);
rectangleBleuMC.menu = monMenu;
 
var imageMasqueUrl = "http://www2.demis.nl/wms/wms.asp?wms=WorldMap&version=1.1.1&service=wms&request=GetMap&layers=Bathymetry&styles=&srs=EPSG:4326&bbox=-90,-45,90,45&width=360&height=180&transparent=true&format=image/jpg";
createEmptyMovieClip("imageMasqueMC",6);
imageMasqueMC._x = 180;
imageMasqueMC._y = 90;
 
// notifié à la fin du chargement d'un clip par la 
// méthode MovieClipLoader.loadClip (url, clip)
this.onLoadInit = function (target) {
	trace("masque1");
    imageMasqueMC.setMask(rectangleBleuMC);
	trace("masque2");
}
 
var loader = new MovieClipLoader ;
loader.addListener(this) ;
loader.loadClip (imageMasqueUrl, imageMasqueMC) ;

Si tu peux essayer de "debugger" ! Merci de ton aide !

[ekameleon]

L'utilisation des urls absolues en local.. flash8 il aime pas cela malheureusement.

Sinon en fait cela semble marcher mieux sur le onLoadComplete

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
xb1 = 300;
yb1 = 100;
xb2 = 450;
yb2 = 120;
xb3 = 470;
yb3 = 200;
xb4 = 250;
yb4 = 180;
 
createEmptyMovieClip("mask",7);
with(mask) {
   lineStyle(2, 0x0000ff, 100);
   beginFill(0x0000ff,20);
   moveTo(xb1, yb1);
   lineTo(xb2, yb2);
   lineTo(xb3, yb3);
   lineTo(xb4,yb4);
   lineTo(xb1, yb1);
   endFill();
}
 
var url = "http://www2.demis.nl/wms/wms.asp?wms=WorldMap&version=1.1.1&service=wms&request=GetMap&layers=Bathymetry&styles=&srs=EPSG:4326&bbox=-90,-45,90,45&width=360&height=180&transparent=true&format=image/jpg";
createEmptyMovieClip("container",6);
container._x = 180;
container._y = 90 ;
 
this.onLoadComplete = function (target) {
	target.setMask(mask);
}
 
 
var loader = new MovieClipLoader ;
loader.addListener(this) ;
loader.loadClip (url, container) ;

EKA+

[wwave]

Génial ! Merci beaucoup !