par Bonjour à tous aujourd'hui j'ai décidé de vous préparer un tutoriel sur la création d'un menu vertical, ce menu se munira d'un icône suiveur qui changera de couleur à chaque passage du bouton survolé, comme des paroles ne valent pas un exemple voici à quoi vous arriverez à la fin de ce tutoriel:
Il est aussi possible d'adapter ce menu à l'horizontal:
Voici le code de ce tutoriel:
Le tutoriel:
La source de ce projet:
.
Il est aussi possible d'adapter ce menu à l'horizontal:
Voici le code de ce tutoriel:
- Code:
import gs.TweenMax;
import gs.easing.Sine;
/*
.:EasingList:.
Back Cubic Linear Quint
Bounce Elastic Quad Sine
Circ Expo Quart
*/
var tableauBt:Array = new Array(accueil,forum,galerie,folio,faq,contact);
var couleur:ColorTransform = new ColorTransform();
const ecart:int = 10;
const lien1:URLRequest = new URLRequest("http://artkabis.fr");
const lien2:URLRequest = new URLRequest("http://artkabis.fr");
const lien3:URLRequest = new URLRequest("http://artkabis.fr");
const lien4:URLRequest = new URLRequest("http://artkabis.fr");
const lien5:URLRequest = new URLRequest("http://artkabis.fr");
const lien6:URLRequest = new URLRequest("http://artkabis.fr");
for (var i:int = 0; i < tableauBt.length; i++){
tableauBt[i].addEventListener(MouseEvent.MOUSE_OVER,over);
tableauBt[i].addEventListener(MouseEvent.MOUSE_UP,navig);
}
bg_bt.x = accueil.x;
bg_bt.y = accueil.y;
bg_bt.width = accueil.width + ecart;
bg_bt.height = accueil.height + ecart;
couleur.color = Math.random()* 0xFFFFFF;
TweenMax.to(bg_bt, .1, {tint: couleur.color});
function over(e:MouseEvent):void{
couleur.color = Math.random()* 0xFFFFFF;
var bt:MovieClip = (MovieClip) (e.target);
var btWidth:Number = bt.width + ecart;
var btHeight:Number = bt.height + ecart;
TweenMax.to(bg_bt, .6,{x:bt.x, y:bt.y,width:btWidth, height:btHeight,
tint:couleur.color, ease:Sine.easeOut});
}
function navig (e:MouseEvent):void{
if(e.target.name == "accueil")navigateToURL( lien1,"_blank");
if(e.target.name == "forum")navigateToURL( lien2,"_blank");
if(e.target.name == "galerie")navigateToURL( lien3,"_blank");
if(e.target.name == "folio")navigateToURL( lien4,"_blank");
if(e.target.name == "faq")navigateToURL( lien5,"_blank");
if(e.target.name == "contact")navigateToURL( lien6,"_blank");
}
Le tutoriel:
La source de ce projet:
.
Dernière édition par artkabis le Lun 25 Mai - 23:08, édité 5 fois
)
