begin process at 2012 05 26 06:17:23
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Menu & navigation

 > UN MENU QUI BOUGE GRACE AU TWEEN

UN MENU QUI BOUGE GRACE AU TWEEN


 Information sur la source

Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & navigation Classé sous :Tween, menu, onRollOver Niveau :Débutant Date de création :29/04/2009 Vu / téléchargé :9 011 / 1 934

Auteur : nomadman

Ecrire un message privé
Commentaire sur cette source (31)
Ajouter un commentaire et/ou une note

 Description

première source donc rien de bien compliqué mais comme j'ai galérer au départ pour le faire je suis sur que ca intéresse qqun

Source

  • stop();
  • import mx.transitions.Tween;
  • import mx.transitions.easing.*;
  • //déclaration des variables tween
  • var sup1:Tween;
  • var move1:Tween;
  • var sup2:Tween;
  • var move2:Tween;
  • //fonction qui définit la position du bouton par rapport au précedent et qui assigne les propriétes des boutons à leur masque
  • onEnterFrame = function () {
  • tbt1._x = bt1._x;
  • tbt2._x = bt2._x;
  • tbt3._x = bt3._x;
  • tbt4._x = bt4._x;
  • tbt1._y = bt1._y;
  • tbt2._y = bt2._y;
  • tbt3._y = bt3._y;
  • tbt4._y = bt4._y;
  • bt2._y = bt1._y+bt1._height;
  • bt3._y = bt2._y+bt2._height;
  • bt4._y = bt3._y+bt3._height;}
  • //on passe la valeur du bouton par bt et bto définit le bouton précédemment selectionné et tbt le texte
  • tbt1.onRollOver = function(){
  • tbt=tbt1;
  • bto=bt;
  • bt=bt1;
  • clic();};
  • tbt2.onRollOver = function(){
  • tbt=tbt2;
  • bto=bt;
  • bt=bt2;
  • clic();};
  • tbt3.onRollOver = function(){
  • tbt=tbt3;
  • bto=bt;
  • bt=bt3;
  • clic();};
  • tbt4.onRollOver = function(){
  • tbt=tbt4;
  • bto=bt;
  • bt=bt4;
  • clic();};
  • //function qui fait bouger les boutons
  • function clic ()
  • {
  • sup1 = new Tween(bto, "_yscale", Regular.easeOut, bto._yscale, 90, 1, true);
  • move1 = new Tween(bt, "_height", Back.easeOut, bt._height, tbt._height-4, 1, true);
  • sup2 = new Tween(bto, "_x", Regular.easeOut, bto._x, 68.2, 1, true);
  • move2 = new Tween(bt, "_x", Back.easeOut, bt._x, 212.4, 1, true);
  • }
  • der.onRollOut= function(){
  • move1.stop();
  • move2.stop();
  • sup1 = new Tween(bt, "_yscale", Regular.easeOut, bt._yscale, 90, 1, true);
  • sup2 = new Tween(bt, "_x", Regular.easeOut, bt._x, 68.2, 1, true);
  • }
stop();
import mx.transitions.Tween;
import mx.transitions.easing.*;
//déclaration des variables tween
var sup1:Tween;
var move1:Tween;
var sup2:Tween;
var move2:Tween;
//fonction qui définit la position du bouton par rapport au précedent et qui assigne les propriétes des boutons à leur masque
onEnterFrame = function () {
tbt1._x = bt1._x;
tbt2._x = bt2._x;
tbt3._x = bt3._x;
tbt4._x = bt4._x;	
tbt1._y = bt1._y;
tbt2._y = bt2._y;
tbt3._y = bt3._y;
tbt4._y = bt4._y;
bt2._y = bt1._y+bt1._height;
bt3._y = bt2._y+bt2._height;
bt4._y = bt3._y+bt3._height;}

//on passe la valeur du bouton par bt et bto définit le bouton précédemment selectionné et tbt le texte
tbt1.onRollOver = function(){
tbt=tbt1;
bto=bt;
bt=bt1;
clic();};


tbt2.onRollOver = function(){
tbt=tbt2;
bto=bt;
bt=bt2;
clic();};


tbt3.onRollOver = function(){
tbt=tbt3;
bto=bt;
bt=bt3;
clic();};


tbt4.onRollOver = function(){
tbt=tbt4;
bto=bt;
bt=bt4;
clic();};

//function qui fait bouger les boutons
function clic ()
{
	sup1 = new Tween(bto, "_yscale", Regular.easeOut, bto._yscale, 90, 1, true);
	move1 = new Tween(bt, "_height", Back.easeOut, bt._height, tbt._height-4, 1, true);
	sup2 = new Tween(bto, "_x", Regular.easeOut, bto._x, 68.2, 1, true);
	move2 = new Tween(bt, "_x", Back.easeOut, bt._x, 212.4, 1, true);
		
}

der.onRollOut= function(){
	move1.stop();
	move2.stop();
	sup1 = new Tween(bt, "_yscale", Regular.easeOut, bt._yscale, 90, 1, true);
	sup2 = new Tween(bt, "_x", Regular.easeOut, bt._x, 68.2, 1, true);
	}



 Conclusion

voila vos remarques et suggestions sont évidemment les bien venu

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip UNE INTERFACE UTILISATEUR E-COMMERCE EN AS2 VIA PHP

 Sources de la même categorie

Source avec Zip CLASS IMAGE ET IMAGEEVENT par top30
Source avec Zip Source avec une capture MENU DÉFILANT par m1le
Source avec Zip Source avec une capture MENU SIMPLE STYLE IPHONE par frazeks1989
Source avec Zip Source avec une capture MENUS DÉROULANT XML par Speedy321
Source avec Zip MENU RETATION par habibcode

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture CARROUSEL MENU FLASH AS3 2012 par captainpat
Source avec Zip UN CLIP TROP RÉACTIF par ossol
Source avec Zip MENU EN 3D par jiminy2
Source avec Zip TWEENING BOUTONS par claviskass
Source avec Zip MENU TROP GOURMAND EN RESSOURCES (TWEEN & DÉTECTION SOURIS) par slimflash

Commentaires et avis

Commentaire de pegase31 le 30/04/2009 01:34:55 administrateur CS

Intéressant, mais (oui, il y a toujours un "mais") pour être encore mieux, je te conseille de :

- placer tes menus dans un XML, car c'est pas très dynamique pour le moment
- Mettre des boucles "for" pour permettre de mettre plus de menus sans avoir à tout retaper à chaque fois
- diminuer le nombre de tweens (un seul devrais suffir pour toutes les propriétés), car tu risque d'avoir des interférences
- tout mettre en classes : une pour la barre de menus, et une pour chaque menu
- passer tout ça en as3 (mais ça reste optionnel)

Ensuite, question navigation, diminue le déplacement horizontal lors du passage de la souris, car on a l'impression que le menu se barre littéralement, et question ergonomie, ça ne fonctionne pas très bien.
Le mieux serait de faire un simple décalage à droite tout en laissant la couleur sur le bord gauche (un étirement), ça ferait plus "stable".

Sinon c'est sympa et pas trop mal ficelé pour un premier essai ;)

Peg'

Commentaire de nomadman le 30/04/2009 12:53:49

ok c noté
prochaine update prochainement
j'espère arriver à tout faire sauf le cs3 (pas le temps de m'y mettre)
je pense probablement faire une gestion par php mysql
tu en pense quoi


Commentaire de pegase31 le 30/04/2009 18:50:27 administrateur CS

Je n'ai pas parlé de "cs3" (qui la version 9 de flash), mais d'AS3 (qui est la version 3 du langage utilisé).

Pour le php, c'est toi qui choisis ton mode de fonctionnement, mais tu peux très bien envoyer un XML via le PHP, ce qui reviendrait exactement au même.

Après ce ne sont que des conseils pour améliorer tout ça.

Peg'

Commentaire de stefbuet le 30/04/2009 20:52:39

Salut,
                      
Source à part, quand je vois : "première source donc rien de bien compliqué" je ne suis pas d'accord. Une première source n'implique pas de poster un truc inutile, de mauvaise qualité, obsolète ou autre, c'est comme ça que l'on retrouve des sources pourries sur flashKod... (je ne parle pas de TA source, mais juste de cette phrase)
                        
Stef.

Commentaire de pegase31 le 30/04/2009 21:46:16 administrateur CS

Je plussoie avec Stefbuet ...

Peg'

Commentaire de HENRILUCIA le 04/05/2009 08:21:53

Bonjour,
J'aimerais bien installer votre programme mais mes connaissances sont très limitées. J'utilise KOMPOSER pour gérer mon site en HTML.
Sans vouloir trop prendre de votre temps, j'aurais aimé avoir le script et la procédure pour l'installer.
Cordialement
Henri

Commentaire de graph2009 le 04/05/2009 11:00:39

bien que débutante, j ai trouvé le resultat aerien mais j aurai préféré que ton code soit dans ton fichier natif. ça aurait été plus simple à decortiquer...

Commentaire de choupifou le 07/05/2009 10:17:25 9/10

Merci pour cette source. Je l'ai épluché avec grand intérêt !!!


CEPENDANT: j'aurais souhaité que le menu se déroule tout simplement et n'est pas d'effet "aérien" sur le côté. Pour cela j'ai modifié le ligne suivante de code:

move2 = new Tween(bt, "_x", Back.easeOut, bt._x, 20, 0, true);

l'effet me semble bon mais j'ai toujours un décalage qui se crée quand un menu revient à sa place initiale. Pas facile à expliquer mais pour imager mes propos: "un peu comme une machine a écrire quand on revient à la ligne".

J'ai tout essayé et ça fait un jour que je suis dessus !


Help ! ^^

Commentaire de nomadman le 08/05/2009 10:59:35

choupifou envoie moi ton code je verrai
si tu attend ce soir je vais uploader une big release avec gestion dynamique flash php et menu qui se déroule comme tu veux
Stefbuet tu as raison je ferai la modif dés la prochaine release
graph2009 mon code est sur mon fichier natif

Commentaire de nomadman le 08/05/2009 11:19:21

choupifou je crois qu'il faut que tu supprime les lignes où tu vois move2 ou sup2
si ca marche pas là tu m'envoie ton code

Commentaire de graph2009 le 08/05/2009 11:57:13

Le resultat est tres sympa mais j'aurai apprecié pouvoir le decortiquer pour ainsi y trouver detail par frame et AS en fonction.
Ce serait possible ?
car si tu dit rien de bien compliqué ; heuuu, en ce qui me concerne, mon niveau ne me permet d aller bien loin.
  

Commentaire de nomadman le 08/05/2009 12:09:33

à graph2009
mais le code est sur le fla directement sur la première image du scénario
je ne comprend pas ce qu'il te manque

Commentaire de graph2009 le 08/05/2009 12:15:00

merci pour ta rapidité ...
non en fait sur ton fichier natif, j ai tout ton scenario mais si je prends symbole par symbole, le code n'apparait nul part dans aucun de tes calques.

Commentaire de nomadman le 08/05/2009 12:44:24

graph2009
le code est uniquement sur la première image sur le premier calque du scénario principal il n'y en as pas d'autre et si tu essaie de faire un aperçu à partir du fla tu verras ca marche
c  tout

Commentaire de graph2009 le 08/05/2009 12:47:52

oui tout va bien autant pour moi...merci

Commentaire de choupifou le 11/05/2009 09:27:58

Merci nomadman !!

J'ai passé une bonne journée sans penser a supprimer ces lignes !


Les voix du seigneur Flash sont impénétrable parfois ^^

Commentaire de choupifou le 11/05/2009 10:07:10

Une dernière question  ou plutôt confirmation:

Le masque doit il faire la même taille que notre entête de partie de menu ??

Il y a des problème d'affichage sinon une fois la fonction effectuée !

Commentaire de nomadman le 13/05/2009 13:12:09

choupifou regarde la partie menu de ma dernière source
plus simple à utiliser car complétement dynamique
tu peux loader un fichier texte à la place du php mysql pour l'affichage des nom d'etiquette

Commentaire de graph2009 le 14/05/2009 18:02:59

Hello Nordman

dis moi une chose,
si je prends le dernier onglet(celui du bas donc), le contenu reste toujours déployé et donc j'aimerais qu automatiquement l'onglet se remette au dessous des autres ?

une autre question de debutante :
pourrais tu aussi me dire quoi et par quoi remplacé pour qu'au clic, il n'y ait pas de lien, mais juste lire le contenu

merci à toi ou merci aux autres

Commentaire de nomadman le 15/05/2009 10:29:36

graph 2009
1 c nomadman et non Nordman et merci
2 le rectangle der qui est sur le dernier calque permet lorsqu'on fait un roll out c'a dire que quand la souris sort du rectangle der  de remettre tous les boutons à leur état initial à toi de déterminer sa largeur
3 tu crée un clip au milieu de ta scéne tu le nomme contenu par exemple. sur chaque image clé de contenu tu crée une page de ton site et ensuite pour chaque bouton sur le calque de code tu rajoute  nomdubouton.onPress = function(){ contenu.gotoAndStop(image que tu cherche à atteindre)}
ex: tbt4.onPress = function(){contenu.gotoAndStop(4)}

Commentaire de graph2009 le 15/05/2009 10:46:41

merci pour tes reponses ; je vais m y attelé.
et désolé d avoir "estropié" ton pseudo.
bonne journee

Commentaire de graph2009 le 15/05/2009 11:26:04

je me permets de revenir dejà vers toi car malgré toute la logique de tes explications, je suis un peu largué.
j avais oublié de te dire que dans mon essai, j'ai mis une dimension largeur, differentes entre l'onglet et le contenu.
Cependant, en prenant ton propre fichier, je n 'ai pas reussi à faire le rapprochement entre les dimension de tes blocs et le code pour donc changer et adapter la "disparition" de chaque onglet.

Merci encore nomadman

Commentaire de nomadman le 15/05/2009 11:46:10

a priori si j'ai bien compris tu doit voir du coté de la fonction qui fait bouger les boutons
tu dois adapter les tween sur les propriétés qui t'intéresse
mais bon poste ton code et un shéma de ce que tu veux obtenir ( pour le schéma tu fait un imprim écran de flash )et je verrais

Commentaire de graph2009 le 15/05/2009 12:41:10

j aimerais bien pouvoir t envoyer ma capture d'ecrant mais c impossible ici
non?

Commentaire de nomadman le 15/05/2009 12:44:21

tu l'upload sur ton site ou autre et tu m'envoie le lien html

Commentaire de graph2009 le 15/05/2009 12:58:49

http://dl.free.fr/vzYzPH7Zj


voila voila ! à toute

Commentaire de pegase31 le 15/05/2009 13:16:09 administrateur CS

dites les gars, vous pourriez faire ça en PM, car ça n'apporte rien aux autres ...

Peg'

Commentaire de graph2009 le 15/05/2009 13:50:22

dslé pegase31
j en prends note..

Commentaire de nomadman le 17/05/2009 04:50:50

graph2009 pour adapter la largeur des menu il faut tout simplement etirer le mask sur la largeur soit en as soit manuellement à toi de voir
et peg dsl

Commentaire de graph2009 le 17/05/2009 14:02:01

mille merci, nomadman...

Commentaire de juliettelulu le 25/11/2009 10:17:52

Bonjour Nordman,

je trouve ton menu excellent !
mais je ne parviens pas à ajouter des liens sur chaque bouton et bouton des sous menu vers des fichiers externe. J'y arrive avec le premier bouton de chaque categorie :

on (release) {

loadMovie("monfichier.swf", 1);
}

mais impossible avec les sous-menus !
Peux-tu m'aider ?

merci d'avance

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Menu verticale, tween's problem [ par fanatikx ] Salut, J'ai crée pour mon site un menu vertical, au rollover des boutons je fais appel pour chacun à des tween (genre bouton blanc et au rollover, u Lien vers page HMTL ne fonctionne pas [ par lud087 ] Bonjour chères ami(e)s flasheurs ! Je fais un site web en html avec Dreamweaver avec un menu fait avec Flash. Dans le menu, le bouton est pourtant b Menu déroulant et diaporama [ par LinklOurs ] Bonjour à tous, J'ai un petit soucis dans la confection d'un site web en flash, sous AS2... Voilà : j'ai crée un menu déroulant fait d'images boutons, menu Flash "cloud" [ par uT2k4 ] Bonjour, J'aimerais avoir ce genre de menu sur un site : effectsco.../CloudMenu/XML/ (étant donné que je suis nouveau, je ne peux pas mettre d'url d Problème de menu [ par kiwi0011 ] Bonjour à tous, Désolé par avance si cette question a déjà été posée, ce qui ne me surprendrait pas, mais je n'ai pas trouvé de réponse. J'ai crée u Diaporama et tween - bug [ par francescho ] Bonjour à toutes et à tous, Voilà 2 jours que je me casse la tête pour faire un diaporama (horizontal donc) de plusieurs images successives... Ce dia Problème code AS3 [ par didj1 ] Bonjour petit souci avec ce code j'ai mis 9 boutons sur mon code et la pas de problème mais lorsque je veux en metre 10 sa fonctione plus le 10ème bou cdrom interactif+video en ext [ par Sofybad13 ] Bonjour, J'ai créé une interface animée pour un cdrom donc soit en .swf soit en .exe, avec 6 boutons (clip) comme menu, chacun renvoi à une video.m2v Bug d'affichage de menus AS2 [ par Irokwa ] Bonsoir, j'ai un problème que je n'arrive pas à résoudre, pourtant sur un code extrêmement simple. J'ai un sous-sous menu qui ne s'affiche pas du tou Menu d'une carte de ville [ par coch51 ] Bonjour, J'ai un petit souci : Je m'explique : J'ai une carte de ville, j'ai fais un menu des toutes les lettre de l'alphabet et un sous menu sous c


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,544 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales