I created grid of thumbnails and I want the background to “tint” dark when you hover over a thumbnail. I named my buttons btn1, btn2, etc and applied the following code to them… then i created a “tint” movieclip that is transparent black that appears when hovering.
The code works for the first button but then when i hover over the second button, the 1st button is in front of the tint.
So essentially, I’m trying to make my “tint” movieclip always second on the display list so it’s directly behind the button being hovered over. so the order would be:
1 - active thumb on hover
2 - tinted movie clip
3 - all the rest of the content on the stage.
Or is there an easier way to do this? Any help would be much appreciated!
function roll_over(event:MouseEvent):void {
rewind=false;
TweenLite.to(btn1, 1, {scaleX:1.2, scaleY:1.2, ease:Elastic.easeOut});
TweenMax.to(btn1, 1, {dropShadowFilter:{color:0x000000, alpha:0.5, blurX:10, blurY:10, distance:0}});
tint.visible=true;
TweenLite.to(mc1, 1, {autoAlpha:.5});
TweenLite.to(btn1_txt, 1, {autoAlpha:1});
addChild(btn1);
addChild(btn1_txt);
btn1.gotoAndPlay (“show”);
}
//tint background
var tint:MovieClip = new MovieClip();
tint.graphics.beginFill(0xFFFFFF);
tint.graphics.drawRect(0, 0, 1024, 498);
tint.graphics.endFill();
tint.x = 0;
tint.y = 0;
tint.visible = false;
addChild(mc1);
