Bonjour, je vient demander de l'aide car ca fait bientôt deux jours que je m'arrache les cheveux à essayer de créer un menu du même style que "l'ImageMenu" de "Phatfusion" utilisant "Mootools" que l'on peut voir ici , j'ai tenter plusieurs technique d'animation mais aucune n'est satisfaisante, ma première technique à consisté à créer les interpolations de mouvement de mes images (onglets) et d'assigner des étiquettes d'images aux endroits clés et ensuite j'ai coder en AS2 car je suis un peu perdu en AS3, mais le résultat n'est pas à la hauteur de mes attentes !!!
ma deuxième technique à été simplement d'utiliser presque uniquement l'AS2 en utilisant "onEnterFrame" et les positions, mais je galère un peu beaucoup pour gérer mon code, je rappel que je suis débutant !!!
Voici un petit exemple de mon code :

Action Script

var mtx1 = 70
var mtx2 = 80
var mtx3 = 90
var mtx4 = 100
var mtx5 = 110

_root.menu1.onEnterFrame = function()
{
     this.sMove(5.000000E-001, mtx1);
};
_root.menu2.onEnterFrame = function()
{
     this.sMove(5.000000E-001, mtx2);
};
_root.menu3.onEnterFrame = function()
{
     this.sMove(5.000000E-001, mtx3);
};
_root.menu4.onEnterFrame = function()
{
     this.sMove(5.000000E-001, mtx4);
};
_root.menu5.onEnterFrame = function()
{
     this.sMove(5.000000E-001, mtx5);
};
_root.menu1.hit.onRollOver = function ()
{
    _root.mtx1 = 90;
    _root.mtx2 = 90;
    _root.mtx3 = 100;
    _root.mtx4 = 110;
    _root.mtx5 = 120;
    _root.menu1.gotoAndPlay(2);
    _root.menu2.gotoAndStop(1);
    _root.menu3.gotoAndStop(1);
    _root.menu4.gotoAndStop(1);
    _root.menu5.gotoAndStop(1);
};
_root.menu2.hit.onRollOver = function ()
{
    _root.mtx1 = 70;
    _root.mtx2 = 100;
    _root.mtx3 = 100;
    _root.mtx4 = 110;
    _root.mtx5 = 120;
    _root.menu1.gotoAndPlay(2);
    _root.menu2.gotoAndStop(1);
    _root.menu3.gotoAndStop(1);
    _root.menu4.gotoAndStop(1);
    _root.menu5.gotoAndStop(1);
};

...etc . j'espère que vous comprendrez le principe de mon code qui est très simple et logique mais ca c'est en théorie car en pratique je m'arrache les cheveux , je n'arrive pas à obtenir ce que je souhaite !!!

Pourriez vous m'aider svp !!!

Salut,


Ben non, j'ai pas compris
Alors comme chacun a sa logique, je viens de gratter quelque chose selon ma logique :

Action Script

/*
fonctions rollOver et Out sur les 5 clips
Chaque clip porte un nom
et est constitué d'un masque
sur un clip baptisé "limage"
*/
leclip1.onRollOver = function() {
	agrandit(this);
};
leclip1.onRollOut = function() {
	reduit(this);
};
leclip2.onRollOver = function() {
	agrandit(this);
};
leclip2.onRollOut = function() {
	reduit(this);
};
leclip3.onRollOver = function() {
	agrandit(this);
};
leclip3.onRollOut = function() {
	reduit(this);
};
leclip4.onRollOver = function() {
	agrandit(this);
};
leclip4.onRollOut = function() {
	reduit(this);
};
leclip5.onRollOver = function() {
	agrandit(this);
};
leclip5.onRollOut = function() {
	reduit(this);
};
function agrandit(unclip:Object) {
	unclip.onEnterFrame = function() {
		if (unclip._xscale<400) {
			unclip._xscale += 10;
			// réduit proportionnellement l'image dans le clip
			unclip.limage._xscale = 100/(unclip._xscale/100);
			recale();
		} else {
			delete unclip.onEnterFrame;
		}
	};
}
function reduit(unclip:Object) {
	unclip.onEnterFrame = function() {
		if (unclip._xscale>100) {
			unclip._xscale -= 10;
			// agrandit proportionnellement l'image dans le clip
			unclip.limage._xscale = 100/(unclip._xscale/100);
			recale();
		} else {
			delete unclip.onEnterFrame;
		}
	};
}
// aligne les clips les uns à coté des autres
function recale() {
	leclip2._x = leclip1._x+4+(50*leclip1._xscale/100);
	leclip3._x = leclip2._x+4+(50*leclip2._xscale/100);
	leclip4._x = leclip3._x+4+(50*leclip3._xscale/100);
	leclip5._x = leclip4._x+4+(50*leclip4._xscale/100);
}

Les clips sont constitués d'un calque de masque et un calque masqué qui contient un clip "limage".
C'est embryonnaire au niveau fonctionnalités, mais ça peut faire un début.

PH

waouhhh, très bien comme logique , le résultat est très très proche de mes attentes et beaucoup mieux que ma logique sur mon code AS2 !!! ca biensur reste la première étape de mon menu, après je voudrais y inclure un petit effet d'élasticité, mais chaque chose en ce temps !!!

Au cas ou tu ne comprenne pas trop ma logique , je sais mon cerveau est parfois très vicieux, j'avais juste oublier de préciser que le code était à l'avance pensé pour pouvoir accueillir des sub menu ...etc

Donc puisque des exemples sont plus concret que des mots, je te mets le .swf du dernier résultat que je viens d'obtenir !!!
Oui je sais faut que je recalcule mes positionnement lol !!!

ps: le poids de ton swf final est un peu plus lourd que le mien !!!

Je comprend un peu la logique de ton code, en plus ca as l'air d'être plus simple que mon raisonnement mais pourquoi le fichier final pèse 60 Ko de plus que le mien en sachant que j'y ai inclus pas mal de vecto !!!?

Salut,

Parce qu'il y a dedans une image bitmap de 59,9999 ko ?

PH

oki oki !!!

au fait tu en pense quoi de mon résultat à moi ?

je m'arrache les cheveux avec ton code, je suis debutant j'essai de bien comprendre mais j'ai un peu de mal même avec le livre officiel d'adobe sur flash 8 !!!

regarde ce que j'obtient après moult et moult tentative !!!

Re (en vitesse),

Mon code utilise les _xscale, c-à-d les déformations d'échelle horizontale. Ca ne marchera pas tel quel pour tes cartouches asymétriques...

Le reste, c'est à voir...

PH

ok je vais donc tenter de reprendre ton code en tentant de combiner les _xscale et les _yscale , mais vu que le _yscale n'existe pas avec je pense que je dois le coder du genre "exemple: _xscale= _yscale = scale*100;" ou un truc dans le genre, mais bon j'ai dit que j'allais tenter et vu que je suis débutant c'est pas gagner d'avance , mais comme on dit qui tente rien n'as rien !!!

en tous les cas un grand merci pour ton aide, et merci d'avoir pris un peu de ton temps pour me montrer le chemin !!!

Salut,

_yscale existe... C'est _scale tout court qui n'existe pas (je parle pour l'AS2).

Ce que je voulais dire, c'est qu'une déformation (voir anamorphose) passe très bien sur un rectangle qui masque une image (cas de l'exemple qui t'a inspiré et que j'ai suivi). Par contre, ce que tu fais (cartouches asymétriques avec des coins arrondis) supporte moins bien les anamorphoses : un quart de rond pour faire un coin se transformera en quart d'ovale, ce qui est moins esthétique.
Mais on pourrait imaginer un autre système de déformation que le simple _xscale : faire le masque en trois partie dont une centrale utilisée comme une "coulisse". Ou alors directement dessiner en lineTo-curveTo les masques...
Ce ne sont pas les pistes qui manquent.
La première étape sera d'affiner ton cahier des charges : entre ton premier exemple et ce que tu as fait, il y a de grosses différences. Il faut tout préciser pour ensuite développer les solutions adéquates.


PH

ok merci pour tes explications, donc j'ai essayer, tenter de coder plusieurs facon de faire en essayant souvent de me basé sur des codes choper à droite à gauche mais je n'arrive à rien, grrr !!!

En fait je trouve que mon premier .swf est assez proche de ce que je souhaiterais, mais je vais plus détaillé mes besoins, en fait comme sur mon exemple il me fraudais 7 onglets, sur le 7eme onglets il faut pouvoir laissé une place tout le temps visible de environ 150 à 200 pixels pour que je puisse par la suite y placer une petite anim, photo ou logo, esthétiquement parlant, ce qui est le principal problème comme tu as pu t'en rendre compte, le 1er onglet doit être en largeur le plus petit puis chaque onglets jusqu'au 7eme est un peu plus grand que le précédent !!!
maintenant passons a l'anim détaillé de ce que je souhaiterais, le passage de la souris sur chaques onglet laisse apparaitre un texte qui explique un peu ou mène le lien lorsque l'on cliqueras sur ce même onglet (un peu comme j'ai fait sur mon premier .swf mais que l'on voit uniquement sur l'onglet numéro 1), si possible il faudrait que la zone cliquable qui occupe tout l'onglet sélectionné (pour l'instant c'est la que je cale), puis il faudrait que j'anim le mouvement de tous ces onglets avec un genre d'effet d'élasticité genre ease:Bounce.easeOut.easeIn me plairai assez mais j'en suis pas encore la !!! et le tout lorsque la souris sort du champ avec un onRollOut, tout les onglets retrouve leurs position initiale , c'est pour ca que j'étais partie plutot sur une petite fonction basé sur les positions plutot que sur le _scale, j'avais même envisagé de faire carrément une boucle vu que tous les onglets ont la même forme, c'est juste leurs couleurs qui change !!! j'avias fait un petit debut qui donnais à peu de choses près ceci :

Action Script

for (i=0; i<=6; i++) {
	// on est à l'interieur de la boucle...
	// "onglet" cible chaque bouton, de ong0 à ong6 :
	onglet = this["ong"+i];
	// idem pour les clips anim :
	onglet.clip = this["anim"+i];
	// on affecte l'id unique à chaque onglets, pour pouvoir différencier leurs actions :
	onglet.id = i;
	// ouverture de l'onglet :
	onglet.onRollOver = function() {
		this.clip.gotoAndPlay(2);
	};
	onglet.onRollOut = onglet.onReleaseOutside=function () {
		// lance la fermeture de l'onglet en fonction de l'emplacement de la tête de lecture :
		this.clip.gotoAndPlay(this.clip._currentframe+7);
	};
	onglet.onRelease = function() {
		// on peut donc ici utiliser le "id" de chaque onglet pour définir ses actions :
		affiche.text = "onglet "+this.id+" cliqué !";
	};
}

j'ai laisser tombé cette piste mais je pense l'approfondir , qu'en pense tu ?


Sinon dit moi ce que tu en pense , donne moi des indication mais en restant simple car je précise encore que je suis débutant et que même si j'arrive à coder quelques fonction et même des boucles c'est grâce aux deux livre qui me guide et m'aide beaucoup !!!

et si tu veut prendre du temps pour me faire un petit exemple de ta vision des choses, que je puisse l'étudier après ca serait bien sympa !!!

Petit up car j'arrive à rien !!!

Ptit up, j'y suis pas encore parvenu !!

De l'aide svp !!!

Bonsoir,

Je sais que c'est de l'AS3, mais avais-tu vu le .fla et la classe que j'avais postés ?

http://flash.mediabox.fr/index.php?showtopic=90793

ben non, j'avais po vu, mais quand ? car je n'ai pas vu de réponse de toi dans ce topic !!!

Mais si c'est de l'AS3 je vais pas m'en sortir car deja le 2 c'est galère pour moi le débutant alors le 3 j'ai essayer et pour l'instant j'en suis pas encore la !!!

mais merci quand même je vais étudié ca dans la nuit, mais je te promets rien!!!

par contre j'ai vite regarder ton swf et l'effet à l'air d'être le même que celui de PHN, alors que justement j'avais un ti problème avec des images carré, moi ce sont des image en arrondi d'ou le problème, sinon ca serait régler depuis belle lurette !!!

Je comprends.

Pour te faire une première idée, tu n'es pas obligé de rentrer dans le code, tu changes juste les photos que j'ai mises dans le .fla.

Après, avec un détourage de cochon (fais en quinze secondes), ça donne un truc dans le genre :

ah ouais en effet, pas trop mal !!! C'est GENIAL c'est l'effet que je voulais !!!

Par contre le detourage, hummm, j'en mangerais pas de ton cochon !!! mdr lol

GRAND GRAND merci à toi, je reviens demain vous montrer le resultat !!!

Si tout va bien , biensur

PS: au fait si tu veux m'aider aussi la dessus ca serait ben cool !!!

http://flash.mediabox.fr/index.php?showtopic=91287