Comment faire un effet d'alpha pendant le chargement d'un clip externe [Résolu]

[nicolas2603]

Bonjour, sur ma scène j'ai différentes images qui se chargent et se redimenssionnent pour apparaitre en vignette. J'ai fait ce code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
this._parent._parent.createEmptyMovieClip("container", this.getNextHighestDepth());
var mclListener = new Object();
mclListener.onLoadInit = function(target_mc) 
{
	//target_mc._width = 50;
	//target_mc._height = 50;
    //target_mc._x = 292;
	//target_mc._y = 170;
}
mclListener.onLoadProgress = function(target, bytesLoaded, bytesTotal) 
{
	--> ICI la fonction ALPHA
        // celle ci ne fonctionne pas
        target_mc._alpha ++ = 5;
}
var mcl = new MovieClipLoader();
mcl.addListener(mclListener);
mcl.loadClip("images/Thumbs1.swf", this._parent._parent.container);

Je voudrais faire en sorte qu'à l'état initial, traget_mc._alpha =0, et qu'au fur et à mesure du chargement il passe à 100. J'en ai essayé une mais ça ne fonctionne pas, quelqu'un aurait une idée ? merci d'avance.

[jean philippe]

salut
avant de jouer sur les propriétés de clip, il faut vérifier que l'image est totalement chargée
pour ce faire il faut mettre le code de l'alpha dans le onLoadInit()

[nicolas2603]

D'accord, j'ai déclaré l'alpha en disant :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
this._parent._parent.createEmptyMovieClip("container", this.getNextHighestDepth());
var mclListener = new Object();
mclListener.onLoadInit = function(target_mc) 
{
	//target_mc._width = 50;
	//target_mc._height = 50;
    //target_mc._x = 292;
	//target_mc._y = 170;
	target_mc._alpha = 0;
}
mclListener.onLoadProgress = function(target, bytesLoaded, bytesTotal) 
{
	target_mc._alpha ++ = 5;
}
var mcl = new MovieClipLoader();
mcl.addListener(mclListener);
mcl.loadClip("images/Thumbs1.swf", this._parent._parent.container);

Mais maintenant il y a une erreur "La partie gauche de l’opérateur d’affectation doit être une variable ou une propriété" sur la ligne target_mc._alpha ++ = 5; !!

[David Buff]

Y'a plusieurs problèmes dans ce que tu as écrit.

Pour ton erreur:

Code :

target_mc._alpha ++ = 5;

Cette ligne n'a pas de sens... ++ c'est un incrément, c'est à dire que tu ajoutes 1, et += est une addition, tu ajoutes une valeur. Les deux lignes suivantes sont valides, mais pas la tienne:

Code :

1
2
target_mc._alpha += 5;
target_mc._alpha ++;

Ensuite, tu additionnes 5 à chaque fois que la méthode onLoadProgress est déclanchée, c'est à dire à chaque frame tant que ton image n'est pas chargée. En fait, tu n'as aucune idée du temps de chargement, et ce temps varie selon l'image, la machine et l'état du réseau. Si ton image se charge trop vite, ton alpha sera par exemple à 35 en fin de chargement (pas complètement à 100), et si elle se charge trop lentement, tu vas te retrouver avec un alpha genre à 345, ce qui n'est pas non plus ce que tu cherches.
Si tu veux être à 0 en début de chargement et à 100 en fin, il faut que tu codes un truc du genre:

Code :

target_mc._alpha = 100*bytesLoaded/bytesTotal;

Enfin, tu fais une erreur de conception. Un chargement progressif ne veut pas dire qu'on voit de plus en plus l'image. En effet, si tu veux mettre ton image à 25%, il faut bien que tu connaisses l'image en entier...
En fait, ton image ne peut pas être affichée par Flash tant que toutes les données n'on pas été chargées... ce qui va se passer avec un code comme tu l'écris, c'est que ton clip va être transparent avec un alpha qui augmente, mais rien dans le clip, tu ne verras donc rien, et au moment où l'image sera complètement chargée, elle s'affichera, et ton alpha sera justement à ce moment là à 100. Tu va donc ne rien voir durant le chargement, et ton image va apparaître d'un seul coup à 100%.

En gros, ce que tu veux faire n'est pas possible. La seule chose que tu puisses faire, c'est que rien ne soit affiché pendant le chargement, et qu'à la fin du chargement tu fasses apparaître l'image avec un fondu de 0 à 100% d'alpha en quelques secondes. Mais tu auras donc bien un temps au début où rien ne sera affiché.
Libre à toi alors, pendant ce temps, de faire une anim quelconque d'attente, mais qui n'utilise pas l'image en cours de chargement.

[nicolas2603]

Ok j'ai compris ce que tu veux dire. Par exemple je pourrais faire une feinte et afficher une miniature de l'image qui va se charger, miniature qui apparait lorsque le chargement commence, passe de alpha 0 à alpa à 100, puis disparait lorsque l'image est completement chargée, c'est ça ? du genre

Code :

1
2
3
4
mclListener.onLoadProgress = function(target, bytesLoaded, bytesTotal) 
{
this.Anim1._alpha = 100*(bytesLoaded/bytesTotal);
}

que je mets cette animation ?

[David Buff]

Oui, ça peut être une solution. Soit ta miniature est dans la bibliohèque de ton FLA, soit il va falloir aussi la charger. Mais si elle est petite, son chargement sera rapide.

Essaye un code, et si ça marche pô, renvoie-le

Bonne chance !

[nicolas2603]

Alors j'ai pas perdu de temps. Voici où j'en suis. J'ai une scène qui va charger différentes images, lesquelles vont donc se redimmensionner en vignette dans un premier temps, puis s'agrandir par tween en cliquant dessus. Pendant le chargement, j'ai une vrai vignette de l'image (chargée dans la bibliothèque) qui doit passer de alpha 0 à alpha 100 en fonction du chargement de l'image. Mes vignettes s'apellent Thumb1, Thumb2 ... et les images à charger image01, image02 ... Dans le code qui suit, tout fonctionne, mes images se chargent, mais les vignettes, qui sont définies à alpha 0 au chargement de la page, reste à 0 et ne se modifient pas ... quelqu'un voit mon erreur ?

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
 
var index = 1;
var total = 6;
 
function load() {
	tmp = this.createEmptyMovieClip("conteneur"+index, this.getNextHighestDepth());
	listener = new Object();
	listener.onLoadInit = initialisation;
	listener.onloadProgress = chargement;
	mcl = new MovieClipLoader();
	mcl.addListener(listener);
	mcl.loadClip("images/image0"+index+".jpg", tmp);
	placement();
}
 
function initialisation() {
	if (index<total) {
		index++;
		load();
	}
}
 
function chargement(target, bytesLoaded, bytesTotal) {
	this["Thumb"+index]._alpha = 100*(bytesLoaded/bytesTotal);
}
 
function placement() {
	conteneur1._x = 0;
	conteneur1._y = 0;
	conteneur2._x = 100;
	conteneur2._y = 100;
	conteneur3._x = 200;
	conteneur3._y = 200;
	//conteneur x ._x = ...;
	//conteneur x ._y = ...;
}
 
load()

Un grand merci d'avance.

[David Buff]

harf... c'est pas très académique comme code... je regarde

[David Buff]

Humm... trop de trucs à dire, il est tard. J'ai commencé à te faire une grosse explication, je termine demain matin.

[nicolas2603]

pas trés académique ... tu m'étonnes, je galère grave, en plus je me rends compte que je peux pas (ou j'arrive pas) à redimmensionner mes conteneurs autrement que par _xscale, alors que ce qui m'intéresse c'est _width ...

[David Buff]

Bon... alors, tant de choses à dire:

D'abord un conseil. Tu codes mi-chemin AS1/AS2. En plus on va vers l'AS3 qui exige que les données soient typées. Je te conseille donc de prendre l'habitude de systématiquement déclarer tes variables avec var et le type:

Code :

1
2
var index:Number = 1;
var total:Number = 6;

Pareil pour tes variables locales, par exemple:

Code :

var mcl:MovieClipLoader = new MovieClipLoader();

Comme ça c'est plus clair, tu risques moins de faire d'erreur, et tu seras pas perdu quand tu passeras à l'AS3. C'est une bonne habitude à prendre.

Ensuite, il faut éviter ce genre d'énumération:

Code :

1
2
3
4
5
6
7
conteneur1._x = 0;
conteneur1._y = 0;
conteneur2._x = 100;
conteneur2._y = 100;
conteneur3._x = 200;
conteneur3._y = 200;
...

Si tu en avais 200, tu serais bien emmerdé pour saisir tous les numéros. Donc la solution, c'est quand tu crées ton clip, tu le nommes avec un nom + un séparateur + son index, ici on prendra le séparateur "_" (ça peut être n'importe quel caractère):

Code :

1
2
3
function load() {
   var tmp:MovieClip = this.createEmptyMovieClip("compteur_"+index, this.getNextHigestDepth());
}

L'intérêt de faire ça, c'est qu'après tu peux retrouver l'index à partir du nom du clip. Pour ça tu split le nom avec le séparateur que tu as mis:

Code :

name.split("_")

tu prends la partie droite du nom, c'est à dire le deuxième élément du tableau:

Code :

name.split("_")[1]

et tu caste pour obtenir une valeur numérique:

Code :

var subIndex:Number = Number(target.name.split("_")[1]);

Par exemple, dans ta fonction chargement, tu identifies le clip thumb à paramétrer en alpha à partir de la variable index. Ce n'est pas une bonne pratique, imagine que tu aies deux chargements simultanés, tu ne sauras plus auquel fait référence index et tu seras perdu.
Une solution bien meilleure est d'utiliser l'argument target qui est passé à ta fonction, et de récupérer l'index dans le nom:

Code :

1
2
3
4
function chargement(target, bytesLoaded, bytesTotal) {
   var subIndex:Number = Number(target.name.split("_")[1]);
   this["thumb"+subIndex]._alpha = 100*(bytesLoaded/bytesTotal);
}

Tu peux raccourcir sans caster puisqu'il s'agit dans les deux cas de noms en String:

Code :

1
2
3
function chargement(target, bytesLoaded, bytesTotal) {
   this["thumb"+target.name.split("_")[1]]._alpha = 100*(bytesLoaded/bytesTotal);
}

Note que j'ai enlevé la majuscule à thumb. Par convention, un nom qui commence par une majuscule, c'est une classe, pas un objet.

Pour la suite, si tu regardes bien, tu appelles placement() à chaque lancement d'un chargement. Et placement repositionne tous les clips. C'est pas terrible, ça fait beaucoup de boulot pour rien. Alors le mieux, dans ton cas, est de passer en argument à placement() le clip, et la valeur index, comme ça tu ne repositionnes que le clip concerné:

Code :

1
2
3
4
function placement(aClip:MovieClip, aIndex:Number) {
   aClip._x = aIndex*100;
   aClip._y = aIndex*100;
}

Note que je caste aussi le type des arguments de la méthode. Note aussi que je fais précéder le nom de l'argument par la lettre a (pour argument). C'est une convention assez courante, ici, tu vois très bien qu'on aurait eu un problème d'identification entre index, variable globale, et index, argument de fonction que du coup on va appeler aIndex pour pas confondre les deux. Ca aussi, c'est une bonne habitude de nommage.
Ainsi placement(), ne place effectivement que le clip qu'il est nécessaire de classer et pas 10 ou 100 ou 200 clips à chaque fois.

Si au final tes positions ne sont pas des proportions de l'index (ce qui risque fort d'arriver), tu pourrais enregistrer ces positions dans des tableaux (au même niveau que index et total):

Code :

1
2
var posX:Array = [0, 100, 200, 300]; // etc...
var posY:Array = [0, 100, 200, 300]; // etc...

Comme si tu en as plein, tu vas t'emmerder à les compter pour bien positionner le bon y avec le bon x, et tu risques de mélanger un x avec pas le bon y (ça m'est arrivé), il est plus propre et préférable de faire un seul tableau d'objets, ayant chacun une propriété x et une y:

Code :

1
2
3
4
5
6
7
var position:Array = [
   {x:0, y:0},
   {x:50, y:70},
   {x:100, y:100},
   {x:80, y:200},
   {x:300, y:300} // etc...
];

Du coup... t'as pas forcément besoin de la méthode placement, tu peux intégrer le positionnement dans load(). Un truc dans le genre:

Code :

1
2
3
4
5
6
function load() {
   var tmp:MovieClip = this.createEmptyMovieClip("conteneur_"+index, this.getNextHighestDepth());
   tmp._x = position[index].x;
   tmp._y = position[index].y;
   ...
}

Tu comptes index à partir de 1. Normalement, en code, tu comptes à partir de 0 parce que si tu compte 1, 2, 3, 4, 5 et tu t'arrêtes parce que 5<6 (ton total défini) tu vois que tu as 1, 2, 3, 4, 5 c'est à dire 5 images, mais ton total note 6...
On compte donc à partir de 0 pour que ça concorde. Si total=6, et que 5<6, tu as les images 0, 1, 2, 3, 4, 5 ce qui fait bien 6 images.
Enfin, j'ajoute que quand on débute, on a tendance à mettre des variables globales partout. Ce qui est pas une bonne pratique, car tu finis par te retrouver avec douze mille variables ingérables.
Total risque de te servir plus loin dans le programme (gestion des vignettes), mais pas index qui n'est là que pour charger. On va donc éviter index. Et puis on va appeler total, totalImage, parce que des total, tu risques d'en avoir d'autres genre totalScore... donnes des noms plus exaustifs.

On va donc passer l'index à charger en argument à load(). Et dans initialisation(), si un nouveau chargement doit être lancé, on le fera en identifiant l'index du dernier élément chargé à partir de son nom:

Code :

1
2
3
4
5
6
function initialisation(aTarget:MovieClip) {
	var currentIndex:Number = Number(aTarget._name.split("_")[1]);
	if (currentIndex+1<totalImage) {
		load(currentIndex+1)
	}
}

Enfin, on arrive au bout, tu as intelligemment noté tes image image01.jpg, et 02 et 03 pour aller jusqu'à 10, 20 etc... Leur classement alphabétique et donc alors le même que leur classement numérique. Par contre, il faut bien ajouter un 0 si index<10, mais pas si index>10...
Un code possible est celui-ci:

Code :

("00").substr(0, 2-aIndex.toString().length)

si tu veux compter jusqu'à 10000:

Code :

("0000").substr(0, 4-aIndex.toString().length)

(avec un 4)

Pour terminer, pour une raison que j'ignore, j'ai constaté que le rootage vers les thumb avec this ne marche pas dans certains cas... il faut mettre le chemin à partir de _root. Je ne comprends pas pourquoi. Donc, comme mes thumb sont posé sur la scène, j'ai changé dans le code tous les this par des _root. Mais si pour toi ils sont pas sur la scène, note _root.nomContainer.nomSousContainer[thumb_"...

Je fais un autre thread pour conclure, parce que ça devient long...

[David Buff]

J'ai créé 4 images nommées Image_00.jpg, Image_01.jpg etc...
J'ai positionné 4 vignettes sur la scène nommées thumb_1, thumb_2 etc...

Le code est:

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
var totalImage:Number = 4;
var positionImage:Array = [
	{x:0, y:0},
	{x:200, y:0},
	{x:0, y:200},
	{x:200, y:200}
];
 
function load(aIndex:Number) {
	var tmp:MovieClip = this.createEmptyMovieClip("conteneur_"+aIndex, _root.getNextHighestDepth());
	tmp._x = positionImage[aIndex].x+100;
	tmp._y = positionImage[aIndex].y;
 
	var listener:Object = new Object();
	listener.onLoadInit = initialisation;
	listener.onloadProgress = chargement;
 
	var mcl:MovieClipLoader = new MovieClipLoader();
	mcl.addListener(listener);
	var fileName:String = "images/image_"+("00").substr(0, 2-aIndex.toString().length)+aIndex+".jpg";
	mcl.loadClip(fileName, tmp);
}
 
function initialisation(aTarget:MovieClip) {
	var currentIndex:Number = Number(aTarget._name.split("_")[1]);
	_root["thumb_"+currentIndex]._alpha = 100;
	if (currentIndex+1<totalImage) {
		load(currentIndex+1)
	}
}
 
function chargement(aTarget, aBytesLoaded, aBytesTotal) {
	_root["thumb_"+aTarget.name.split("_")[1]]._alpha = 100*(aBytesLoaded/aBytesTotal);
}
 
load(0);
stop();

HAAaaarff... j'espère que t'as tenu le coup jusque là. J'espère aussi que j'ai été à peu près clair

Allez, raconte moi ce que ça a donné

[David Buff]

Ha ben oui... ça me tracassait... erreur de newBe, c'est de la POO de base...

onLoadInit() et onLoadProgress() sont des méthodes de MovieClipLoader. Quand on code initialisation() et chargement() dans _root, ce sont bien des méthode de _root. Mais quand ensuite on les attribue à onLoadInit() et onLoadProgress() avec:

Code :

1
2
listener.onLoadInit = initialisation;
listener.onloadProgress = chargement;

Elles deviennent des méthodes de MovieClipLoader.

Donc, this à l'intérieur de initialisation() et de chargement() fait référence au MovieClipLoader, pas à _root. C'est pour ça que ça marchait pas, et que ton attribution d'alpha ne fonctionnait pas, car les thumb sont des objets de _root, pas de MovieClipLoader.

En conclusion, this dans load() fait bien référence à _root, mais this dans initialisation() et chargement() fait référence à MovieClipLoader. Il faut donc dans ces deux cas noter le chemin des thumb, c'est à dire dans ce cas _root.

Il faut vraiment se méfier de this, et toujours se demander à quoi il fait référence. En fait, l'orientation objet de l'AS3 et la structuration en classes évite beaucoup ce genre d'erreur, classique en AS2.

[David Buff]

Ha oui, j'ai oublié _xscale et _width... corrige déjà ton code, et puis renvoie le pour voir où ça continue à pas marcher.

Et puis ce week-end, je suis pô là... faudra être patient... sauf si quelqu'un d'autre te répond !

[nicolas2603]

Whaaa la lecture que j'ai !! Bon, je vais me regarder ça tranquillement ce week end pour essayer d'appliquer tout ce que tu m'as dit. On verra bien si lundi ça va mieux ...

[nicolas2603]

Salut, alors je suis de retour ... avec un code que j'arrive toujours pas à faire fonctionner. J'ai bien potasser tout ce que tu m'as dis, j'ai pas tout compris, alors j'ai essayer d'adapter ton code d'exemple à mon cas. Tout se déroule sans problème apparemment, le truc, c'est qu'au final, je n'ai que la dernière image qui se charge. Aprés avoir fait plein de tests et de traces, je pense que ça vient de mes chemins d'accès. Car les vignettes thumb1 ... se trouvent dans un clip Texte, qui lui même se trouve dans un clip Scroller, dans la scène. J'ai essayé avec _parent._parent., avec _root, mais rien n'y fais. Alors j'ai essayé le mettre mes clips thumbs directement à la racine de la scène et là ça fonctionne. C'est donc bien une question de chemin. Par contre, mes vignettes qui sont définies avec un alpha = 0 au chargement, reste telles quelles. Voici mon code :

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
61
62
63
64
65
66
67
68
var totalImage:Number = 36;
var positionImage:Array = [
	{x:240, y:10}, // P01
	{x:310, y:10},
	{x:380, y:10},
	{x:240, y:80},
	{x:310, y:80},
	{x:240, y:200.8}, // P02
	{x:240, y:297.3}, // P03
	{x:310, y:297.3},
	{x:380, y:297.3},
	{x:240, y:367.3},
	{x:310, y:367.3},
	{x:380, y:367.3},
	{x:240, y:487.8}, // P04
	{x:310, y:487.8},
	{x:380, y:487.8},
	{x:240, y:557.8},
	{x:310, y:557.8},
	{x:240, y:665.5}, // P05
	{x:310, y:665.5},
	{x:380, y:665.5},
	{x:240, y:762.8}, // P06
	{x:310, y:762.8},
	{x:380, y:762.8},
	{x:240, y:832.8},
	{x:310, y:832.8},
	{x:380, y:832.8},
	{x:240, y:931.1}, // P07
	{x:310, y:931.1},
	{x:380, y:931.1},
	{x:240, y:1068.4}, // P08
	{x:310, y:1068.4},
	{x:380, y:1068.4},
	{x:240, y:1203}, // P09
	{x:310, y:1203},
	{x:380, y:1203}
];
 
function load(aIndex:Number) {
	var tmp:MovieClip = this.createEmptyMovieClip("conteneur_"+aIndex, _root.getNextHighestDepth());
	tmp._x = positionImage[aIndex].x;
	tmp._y = positionImage[aIndex].y;
 
	var listener:Object = new Object();
	listener.onLoadInit = initialisation;
	listener.onLoadProgress = chargement;
 
	var mcl:MovieClipLoader = new MovieClipLoader();
	mcl.addListener(listener);
	var fileName:String = "images/img_"+("00").substr(0, 2-aIndex.toString().length)+aIndex+".jpg";
	mcl.loadClip(fileName, tmp);
}
 
function initialisation(aTarget:MovieClip) {
	var currentIndex:Number = Number(aTarget._name.split("_")[1]);
	this["_parent._parent.thumb_"+currentIndex]._alpha = 0;
	if (currentIndex+1<totalImage) {
		load(currentIndex+1)
	}
}
 
function chargement(aTarget, aBytesLoaded, aBytesTotal) {
	this["_parent._parent.thumb_"+aTarget.name.split("_")[1]]._alpha = 100*(aBytesLoaded/aBytesTotal);
}
 
load(0);
//stop();

J'espère que le week end a été reposant ...

[David Buff]

Bon week end, merci

Cette ligne n'a pas de sens:

Code :

this["_parent._parent.thumb_"+aTarget.name.split("_")[1]]._alpha = 100*(aBytesLoaded/aBytesTotal);

this est la référence à l'objet courant, en l'occurrence, le MovieClip loader auquel a été attaché la fonction chargement(). _parent, est une référence au parent de this. Ce que tu mets entre crochet, c'est le nom du clip, pas son chemin.
Cette ligne a du sens:

Code :

this._parent._parent["thumb_"+aTarget.name.split("_")[1]]._alpha = 100*(aBytesLoaded/aBytesTotal);

Là, tu demandes le clip de nom ["thumb_"+...] dans l'objet parent du parent de this.

Mais c'est moins casse-gueule de coder le chemin à partir de _root. Code donc un truc du genre:

Code :

_root.clipClipScroller.cheminClipTexte["thumb_"+....]._alpha = ...

Tu as la même erreur dans initialisation().

Par contre, je vois pas pourquoi seulement ta première image serait chargée... tu as fait un trace de currentIndex dans initialisation()? et un tracec dans load() pour voir combien d'appels étaient effectués, et avec quel index?

[nicolas2603]

Ouaip, j'ai bien fait un trace à chaque étape et j'ai les 36 boucles avec l'index qui part de 0 jusqu'à 35. C'est pour ça que je pige pas ... Et j'avais testé également pour "this._parent._parent", mais ça change rien !!

[nicolas2603]

OK ! j'ai changé le _root de

Code :

var tmp:MovieClip = this.createEmptyMovieClip("conteneur_"+aIndex, _root.getNextHighestDepth());

par "this" et du coup ça marche, en tout cas ça me charge toutes mes images, positionnées là où il faut. Par contre, mes vignettes dans "chargement" restent à alpha = 0 ... fichu chemin d'accés

EDIT : quand je fais un trace dans initialisation et chargement il me dit "UNDEFINED" donc c'est bien un problème de reconnaissance de clip.

Par contre pour ce qui est du redimmensionnement des images chargée, ça ne peut fonctionner qu'avec _xscale et pas avec _width ?

[nicolas2603]

OK c'est bon j'ai réussi à finaliser le code et faire exactement ce que je voulais. Encore merci beaucoup pour l'aide et la patience ...