replacer dynamiquement un mc dans le centre d'une fenetre de navigateur

**dallaspepper** · 21/09/2006, 23h31

voilà, je suis en train de développer mon portfolio en flash et j'aimerais bien arriver à créer un script permettant de replacer l'animation principale dans le centre de la fenetre de mon navigateur quel que soit la dimension de celle-ce et ce, avec un effet de easing.
quelqu'un aurait-il une idée?

j'envoie ces liens comme exemples pour illustrer :

http://www.nkunited.de
http://www.mannymedia.com/v2wallpapers
http://www.un.titled.co.uk
http://www.vectorform.com

merci pour le coup de main...

**aorgerit** · 22/09/2006, 00h19

Bonjour,

liens 12 et 4, je n'airien à l'écran. super comme démo.

lien 3 , j'ai quelque chose mais...

c'est quoi easing ?

sinon si tu veux placer ton swf au centre de la page les balises HTML sont utiles a cet effet.

Bien à toi.

**oops!** · 22/09/2006, 01h35

A mon avi le easing est le déplacement progressif à interpolation décélératrice (enfin il se peut que je me trompe), en fait tu pourrais nous expliquer si tu le sais comment déterminer le centre de la partie visible de l'animation ??? (tout le pb est de faire savoir à l'animation la taille X et Y de la fenêtre du navigateur, et après centrer le mc en utilisant ResolutionX et ResolutionY de system.capabilities) moi aussi j'ai le même problème.
Merci de nous aider

**jean philippe** · 22/09/2006, 07h26

salut
une fois ton portfolio fini, tu publies le swf et la page html (Fichier >Paramètres de Publication > HTML > Dimensions) en pourcentage 100%.
Ensuite dans ton code as :
[CODE]Stage.scaleMode = "noScale";
Stage.align="TL"[CODE]
aligne la scène en haut à gauche et conserve l'échelle du document
ensuite :

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
Stage.scaleMode = "noScale";
Stage.align = "TL";
///////////
import mx.transitions.Tween;
/////////
cadre._x = Stage.width/2;
cadre._y = Stage.height/2;
var ecout:Object = new Object();
ecout.onResize = function() {
	cadre._x = Stage.width/2;
	cadre._y = Stage.height/2;
	bouge();
};
Stage.addListener(ecout);
bouge = function () {
	var myTween:Tween = new Tween(cadre, "_x", mx.transitions.easing.Elastic.easeOut, 0, Stage.width/2, 1, true);
	var myTween2:Tween = new Tween(cadre, "_y", mx.transitions.easing.Elastic.easeOut, 0, Stage.height/2, 1, true);
};

je te joins le fla

**dallaspepper** · 22/09/2006, 19h03

merci du coup de main.

Je viens de faire le test, ça marche quand j'esporte en swf mais une fois la page html créée, ça ne fonctionne plus...

J'envoie le fichier pour illustration

PS : l'effet de easing, c'est bien un mouvement d'accélération/décélaration qui permet de faire glisser un élément à des coordonnées déterminées (cf les liens).

**jean philippe** · 22/09/2006, 20h13

salut
tu as publié à 100%?
je te repasse les fichiers avec le html qui fonctionne

**jean philippe** · 22/09/2006, 20h21

pour plus d'effet tu mets ecrire :

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
Stage.scaleMode = "noScale";
Stage.align = "TL";
///////////
import mx.transitions.Tween;
/////////
cadre._x = Stage.width/2;
cadre._y = Stage.height/2;
var ecout:Object = new Object();
ecout.onResize = function() {
	cadre._x = Stage.width/2;
	cadre._y = Stage.height/2;
	bouge();
};
Stage.addListener(ecout);
bouge = function () {
	var myTween:Tween = new Tween(cadre, "_x", mx.transitions.easing.Elastic.easeOut, (Stage.width+cadre._width), Stage.width/2, 1, true);
	var myTween2:Tween = new Tween(cadre, "_y", mx.transitions.easing.Elastic.easeOut, (Stage.height+cadre._height), Stage.height/2, 1, true);
};

**dallaspepper** · 22/09/2006, 22h01

ouais, c'est nickel. C'est à peu près l'effet voulu. Merci beaucoup !!!
Juste une dernière chose, t'aurais une idée pour que le mc se recale sans repartir du même point d'origine à chaque fois et comment donner une effet de décélération et pas d'élasticité?
Je sais, je t'en demande plus que de raison mais tu es le seul à avoir solutionner le truc jusqu'à présent

**jean philippe** · 23/09/2006, 07h08

pour changer les points de départ , c'est ici :

Code :

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

1
2
3
4
 
	var myTween:Tween = new Tween(cadre, "_x", mx.transitions.easing.Regular.easeOut, 1500, Stage.width/2, 1, true);
	var myTween2:Tween = new Tween(cadre, "_y", mx.transitions.easing.Regular.easeOut, 0, Stage.height/2, 1, true);
};

tu changes 1500 et 0 par ce que tu souhaites.

Pour les effets c'est ici :

es six classes de calcul d'accélération sont décrites dans le tableau suivant :

Classe d'accélération
Description
Back
Etend l'animation au-delà de la plage de transition à l'une ou aux deux extrémités pour créer un effet de retrait.
Bounce
Ajoute un effet de rebond à la plage de transition, à l'une ou aux deux extrémités. Le nombre de rebonds est en rapport avec la durée : plus la durée est longue, plus le nombre de rebonds produits est important.
Elastic
Ajoute un effet élastique qui sort de la plage de transition à l'une ou aux deux extrémités. Le taux d'élasticité n'est pas affecté par la durée.
Regular
Ajoute un mouvement plus lent à l'une ou aux deux extrémités. Cette fonction vous permet d'ajouter un effet d'accélération, de ralentissement, ou les deux.
Strong
Ajoute un mouvement plus lent à l'une ou aux deux extrémités. Cet effet est similaire à la classe d'accélération Regular, mais il est plus prononcé.
None
Ajoute un mouvement régulier du début à la fin, sans effet, ralentissement ni accélération. Cette transition est également appelée une transition linéaire.
Chacune de ces six classes de calcul d'accélération a trois méthodes d'accélération qui indiquent à quelle partie de l'animation l'effet d'accélération doit être appliqué. Par ailleurs, la classe d'accélération None possède une quatrième méthode d'accélération : easeNone. Les méthodes d'accélération sont décrites dans le tableau ci-dessous.

Méthode
Description
easeIn
Produit un effet d'accélération au début de la transition.
easeOut
Produit un effet d'accélération à la fin de la transition.
easeInOut
Produit un effet d'accélération au début et à la fin de la transition.
easeNone
Indique qu'aucun calcul d'accélération ne doit être utilisé. Fournie uniquement dans la classe d'accélération None.

**jean philippe** · 23/09/2006, 08h14

et voici en pièce jointe, la version finale à laquelle j'ai rajouté un _alpha sur le clip

Il me semble que ça correspond plus à ta demande

**dallaspepper** · 23/09/2006, 11h15

oui, c'est ça. t'es un véritable KILLER, merci !!!

PS : des fois, c'est un peu frustrant quand on veut mettre en scène des idées en graphisme/webdesign et qu'on est bloqué par la progra. heureusement, ce forum est génial !!!

**jean philippe** · 23/09/2006, 11h30

Envoyé par dallaspepper

PS : des fois, c'est un peu frustrant quand on veut mettre en scène des idées en graphisme/webdesign et qu'on est bloqué par la progra. heureusement, ce forum est génial !!!

je connais ça ouep ! étant moi même graphiste

ps : n'oublies pas de mettre "Résolu" dans le post

**Garra** · 05/10/2006, 15h09

Bonjour

J'ai suivi votre exemple et ça marche super!

Mais en regardant le site www.vectorform.com cité supra, que je trouve très très très réussit et beau, j'aimerais savoir comment fait-on pour que le rectangle vertical prenne toujours la hauteur du navigateur. J'imagine que le _height est geré dynamiquement mais comment obtenir la taille du navigateur?

Voilà c'est ça ma question

**jean philippe** · 05/10/2006, 16h23

la réponse est dans ce thread

lis bien

**Garra** · 05/10/2006, 19h12

Salut

En fait je me suis mal exprimée. Dans www.vectorform.com il y a une petite bande avec N couleurs, en bas de la page, qui se replace contre le bord de l'écran du navigateur. Peut-être je me trompe mais il me semble que ce n'est pas le Stage qui va me donner cette coordonnées,
Non?

Merci et désolée mais je ne trouve pas dans le post