Menu flottant

Soyez le premier à donner votre avis sur cette source.

Vue 24 196 fois - Téléchargée 4 688 fois

Télécharger le projet
Commenter

Description

MENU FLOTTANT

Il s'agit d'un menu horizontal qui suit les impulsions de la souris et possédant une inertie.

Il m' a été inspiré par Wolfood qui possédait un menu de ce type sur son site. Celui-ci est une version très simple, mais qui montre bien comment donner un effet d'inertie avec un code on ne peut plus élémentaire.

J'accompagne les sources d'un fichier PDF qui vous donne tout le pas à pas pour reconstruire intégralement l'exemple.

Source / Exemple : 


Substance essentielle du code pour l'inertie:

//L’occurrence de la barre se nomme b,
//L’occurrence du curseur se nomme c.

var position;

setInterval(regle, 100);

function regle(){
	//_xmouse renvoie la position horizontale de la souris.
	//En fonction, on bouge le curseur et la barre à l'opposé.
	if(_xmouse < 150 && _xmouse > -180){
	position = _xmouse;
	setProperty(c,_x,position);
	//La position étant réactualisée tous les 1/10, l'écart décroit.
	//Comme on le multiplie par un nombre inférieur à 1, il tend vers 0 petit à petit.
	setProperty(b,_x,(getProperty(b,_x)-position)*0.5);
	}
}
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler
kipetrovitchy
Messages postés
85
Date d'inscription
jeudi 30 janvier 2003
Statut
Membre
Dernière intervention
20 avril 2005
 -
Je me suis permis de convertir ton menu en flash5, simplement il faut éditer en place le MC "barrenavig", séparer le code sur un second calque, puis décomposer en 3 images-clefs. Le calque sur lequel est le MC, quant à lui, comporte une image-clef suivie de 2 images.
-------1ere frame------
var position;
-------2eme frame------
//j'ai viré les commentaires et simplifié ton code
if(_xmouse < 150 && _xmouse > -150){
position = _xmouse;
setProperty(c,_x,position);
setProperty(b,_x,(getProperty(b,_x)-position/2)*0.5);
}
play ();
-------3eme frame------
prevFrame ();

et voilou.

Le seul truc qui n'est pas au niveau du reste, ce sont les boutons, tu devrais utiliser la property _alpha d'un rectangle bleu ciel (incrémenter avec une boucle quelconque), au lieu d'une transition de forme qui complique la timeline et est gourmande en ressources processeur.

Après cela je pense que Wolfhood ne pourra plus prétendre avoir le menu le plus simple, encore bravo à toi.
Signaler
cs_wolfood
Messages postés
344
Date d'inscription
lundi 14 avril 2003
Statut
Membre
Dernière intervention
22 mai 2004
 -
mon menu est beaucoup plus simple que ça, je vais le poster
Signaler
cs_yous
Messages postés
136
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
13 avril 2009
 -
Exact ça fonctionne très bien avec:
onEnterFrame = function() {
regle();
};
Y'a plus qu'à régler le facteur d'inertie en fonction des préférences.
Si tu me dis que cette méthode ne pose aucun soucis de fluidité, je la garde donc et merci pour ta persévérance !
Signaler
cs_righton
Messages postés
311
Date d'inscription
samedi 24 mai 2003
Statut
Membre
Dernière intervention
27 septembre 2014
 -
ben je sais pas exactement mais ça vient de l'utilisation de setInterval. J'ai essayé avec
onEnterFrame = function() {
regle();
};
et là c'est nikel à 12ips, y'a même ton effet d'inertie
Signaler
cs_yous
Messages postés
136
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
13 avril 2009
 -
D'après ce que tu me dis, ça saccade non pas à cause des limitations matérielles, mais a priori parce que ta machine est très puissante.
Logiquement si tu augmentes le nombre d'images/seconde, tu augemntes le nombre de calculs.
Afficher les 8 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_yous)