Paramétrer la Tween en fonction de l'indice d'un clip [Résolu]

[nicolas2603]

Bonjour, pour mon projet j'ouvre une page sur laquelle sont insérées des vignettes invisible (alpha=0). Lorsque la page s'ouvre, les images correspondantes à mes vignettes se chargent en arrière plan et les vignettes passent de alpha=0 à alpha=100, tandis que les images prennent la taille et les coordonnées des vignettes, et sont en alpha=0. Le but est que, lorsque je clique sur la vignette (en fait sur l'image en alpha=0 car j'ai déjà un onrelease pour les vignettes), l'image passe en alpha=100 et par tween vient s'agrandir au milieu de la page. Etant donnée que j'ai 35 images et que ce serait completement idiot de taper 35 fois le meme code, lors du chargement de mon image je lui assigne un indice. Mais je n'arrive pas à faire en sorte que l'action de tween se lance lorsque je clic sur cet indice. Voici mon code si quelqu'un voit où je fais l'erreur ... Merci d'avance.

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 mx.transitions.Tween;
import mx.transitions.easing.*;
var agrandi:Boolean = false;
 
var totalImage:Number = 35;
var positionImage:Array = [
	{x:241, y:11},
	...
	{x:381, y:1204}
];
 
function load(aIndex:Number) {
	var tmp:MovieClip = this.createEmptyMovieClip("conteneur_"+aIndex, this.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]);
	if (currentIndex<totalImage-1) {
		load(currentIndex+1)
	}
	aTarget._alpha = 0;
	aTarget._width = aTarget._height = 48;
	var clip = _level0.Scroller.Scrolling_Page["conteneur_"+currentIndex];
	clip.indice = currentIndex; //<-- l'indice pour l'image qui va se charger
}
 
function chargement(aTarget, aBytesLoaded, aBytesTotal) {
	var currentIndex:Number = Number(aTarget._name.split("_")[1]);
	_root.Scroller.Scrolling_Page["thumb_"+currentIndex]._alpha = 100*(aBytesLoaded/aBytesTotal);
 
}
 
load(0);
 
clip.onRelease = function() {
	if (agrandi) {
	var dezoom:Tween = new Tween( clip, "_width", Elastic.easeOut, 435, 50, 50, false );
	var dezoom:Tween = new Tween( clip, "_height", Elastic.easeOut, 608, 50, 50, false );
	var dezoom:Tween = new Tween( clip, "_x", Elastic.easeOut, 0, 0, 50, false );
	var dezoom:Tween = new Tween( clip, "_y", Elastic.easeOut, 0, 0, 50, false );
	} else {
	clip._alpha = 100;
	var zoom:Tween = new Tween( clip, "_width", Elastic.easeOut, 48, 435, 50, false );
	var zoom:Tween = new Tween( clip, "_height", Elastic.easeOut, 48, 608, 50, false );
	var zoom:Tween = new Tween( clip, "_x", Elastic.easeOut, 0, 0, 50, false );
	var zoom:Tween = new Tween( clip, "_y", Elastic.easeOut, 0, 0, 50, false );
	}
agrandi= !agrandi
}

[samuel_L]

je ne suis pas sûr mais je crois que ta fonction clip.onRelease ne s'exécute pas dans _root, mais dans ton clip. donc le "new Tween(clip,...)" se réfère à "clip.clip", qui n'existe pas.
essaie de mettre new Tween(this,... pour voir.

perso j'utilise les tweenings du kit FUSE de MosesSupposes :
http://www.mosessupposes.com/Fuse/

[nicolas2603]

salut, en fait j'ai trouvé la solution : je n'ai rien changé à ma fonction tween, mais je l'ai déplacé dans la fonction initialisation, comme ça le paramètre clip est effectivement pris en compte, et ça marche nickel ... Pour ce qui est des tweenings du kit FUSE, je te remercie pour le lien, je vais y jeter un oeil.

Mais peux-tu me dire quelles sont les différences de cette version ? Merci.
++

[samuel_L]

essentiellement,
1) le kit gère les bitmapfilters (blurTo, etc)

2) il permet de générer bcp plus facilement des séquences de tweens
ex :
je veux faire partir mon clip à droite en 1s.,
puis en bas en 0.5s,
puis le flouter en 1s,
puis alpha à zéro en 1s.

si tu utilises les tweenings classiques, tu devras utiliser une série de fonctions callbacks pour dire "quand j'ai fini un tween, je fais ca".
ou, au mieux lancer tes tweens avec un delta de démarrage (il faut alors bien caler ton scénario)
avec le moteur de fuse, tu déclares simplement tes différentes étapes , et ensuite tu lui dis "go"


exemple de réalisation (en chantier) :
www.c-koya.com
jettes un oeil aux photos qui défilent en arriere plan en "filigranne" (je sais jamais comment ça s'écrit lol) ces photos sont chargées dynamiquement, et puis je tweene leur position et leur floutage...

en plus la syntaxe fuse est compatible avec les "anciennes" syntaxes (une ligne à ajouter)

j'ai pas testé en AS3, par contre, ça doit c**iller

[nicolas2603]

ouais je crois que c'est justement ce genre de possibilités que je cherche pour mon prochain projet !! Bon, téléchargé. Par contre, existe-t-il un tuto ou un site qui regroupe les possibilités et exemples de FUSE en français ?
(au passage, sympa le site et les titres !!)

[samuel_L]

http://www.gotoandlearn.com/
choisis "animating with fuse"
tout est tres bien expliqué en vidéos... en anglais

[petitemimi]

bonjour je voulais faire la même chose je souhaiterais que mes images transformées en clip s'agrandissent comme dans l'exemple mais je n'ai pas tout compris

samuel_L expliquais que tout était expliqué sur http://www.gotoandlearn.com/

mais rien à faire cela ne marche pas avec moi après 1h00 d'essai

pourriez vous m'aider svp Merci à vous

[nicolas2603]

Bonjour,

Alors pour ma part je suis finalement resté sur le modèle des Tweens classiques. J'ai mes images qui sont stockées dans un dossier, et je crée dynamiquement un clip vide dans une boucle qui va me charger mes images, et que je vais pouvoir afficher avec ma Tween. Voilà comment je m'y suis pris, ce code étant sur la scène principale :

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
import mx.transitions.Tween;
import mx.transitions.easing.*;
 
var totalImage:Number = 37;
 
function load(aIndex:Number) {
	var tmp:MovieClip =this.createEmptyMovieClip("conteneur_"+aIndex, aIndex);
 
	var listener:Object = new Object();
	listener.onLoadInit = initialisation;
 
	var mcl:MovieClipLoader = new MovieClipLoader();
	mcl.addListener(listener);
	var fileName:String = "ref/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]);
	if (currentIndex+1<totalImage) {
		load(currentIndex+1)
	}
	aTarget._width = aTarget._height = 50;
	var clip = this["conteneur_"+currentIndex];
	var thumbs = this["thumb_"+currentIndex];
	clip.indice = currentIndex;
	thumbs.indice = currentIndex;
 
	thumbs.onRollOver = function() {
	var rotation:Tween = new Tween( this, "_rotation", Elastic.easeOut, 0, 15, 22, false );
	}
 
	thumbs.onRollOut = function() {
	var rotation:Tween = new Tween( this, "_rotation", Elastic.easeOut, 15, 0, 22, false );
	}
 
	thumbs.onRelease = function() {
	thumbs._alpha = 0;
	clip._alpha = 100;
	clip.swapDepths(1000);
	X = this["thumb_"+currentIndex]._x;
	Y = this["thumb_"+currentIndex]._y;
	var zoom:Tween = new Tween( clip, "_width", Elastic.easeOut, 48, 650, 40, false );
	var zoom:Tween = new Tween( clip, "_height", Elastic.easeOut, 48, 650, 40, false );
	var zoom:Tween = new Tween( clip, "_x", Elastic.easeOut, X+1, 60, 40, false );
	var zoom:Tween = new Tween( clip, "_y", Elastic.easeOut, Y+1, 20, 40, false );
	}
 
	clip.onRelease = function() {
	var dezoom:Tween = new Tween( clip, "_width", Elastic.easeOut, 650, 48, 40, false );
	var dezoom:Tween = new Tween( clip, "_height", Elastic.easeOut, 650, 48, 40, false );
	var dezoom:Tween = new Tween( clip, "_x", Elastic.easeOut, 60, X+1, 40, false );
	var dezoom:Tween = new Tween( clip, "_y", Elastic.easeOut, 20, Y+1, 40, false );
		dezoom.onMotionFinished = function() { 
			clip._alpha = 0;
			thumbs._alpha = 100;
		}
	}
}
 
load(0);

Voilà, si il y a quelque chose que tu ne comprends pas dis le moi.++