Jump to content
Search Community

Darken All Clips Other Than The One Rolled Over

DeltaFrog test
Moderator Tag

Recommended Posts

Ok I have three movie clips with rollovers and I want to make the movie clips that I am not putting the mouse over darken. The movie clip rolled over would stay its normal exposure while the others would darken. When the mouse is not over any clip they all return to the normal exposure. I feel like this below should work but I cant get it to act right (sometimes they don't darken and sometimes they do) maybe I am not using the Overwrite manager correctly. I also am sure there is a better structure to accomplish this simple task. Any ideas would be awesome. thanks :mrgreen:

 

square1.hitter.onRollOver = function() {

TweenMax.to(square2.container,1,{colorTransform:{exposure:.5}});

TweenMax.to(square3.container,1,{colorTransform:{exposure:.5}});

};

 

square2.hitter.onRollOver = function() {

TweenMax.to(square1.container,1,{colorTransform:{exposure:.5}});

TweenMax.to(square3.container,1,{colorTransform:{exposure:.5}});

};

 

square3.hitter.onRollOver = function() {

TweenMax.to(square1.container,1,{colorTransform:{exposure:.5}});

TweenMax.to(square2.container,1,{colorTransform:{exposure:.5}});

};

 

 

 

square1.hitter.onRollOut = function() {

TweenMax.to(square2.container,1,{colorTransform:{exposure:1}});

TweenMax.to(square3.container,1,{colorTransform:{exposure:1}});

};

 

square2.hitter.onRollOut = function() {

TweenMax.to(square1.container,1,{colorTransform:{exposure:1}});

TweenMax.to(square3.container,1,{colorTransform:{exposure:1}});

};

 

square3.hitter.onRollOut = function() {

TweenMax.to(square1.container,1,{colorTransform:{exposure:1}});

TweenMax.to(square2.container,1,{colorTransform:{exposure:1}});

};

Link to comment
Share on other sites

Looks fine to me. I just whipped together a test - I cannot get it to malfunction no matter how fast I rollOver/rollOut. Can you reproduce the problem in this file? I wonder if there's something else going on in your code.

 

(by the way, this uses the latest v11 release which is at http://blog.greensock.com/v11beta/ but you can use the v10 one if you prefer - both worked great for me)

Link to comment
Share on other sites

Awesome, just awesome man. I can't wait til my shockingly green membership runs out so I can purchase it again. I changed to the v11 release and its working now. My gut says it was directly related to that but I did tweek a few other things. Thank you so much. Maybe I'll start a new thread and see if there is a way to optimize this so I could easily add additional clips.

 

 

import com.greensock.*;

import com.greensock.easing.*;

 

 

square1.onRollOver = function() {

TweenMax.to(square2.container,.5,{colorTransform:{exposure:.5}});

TweenMax.to(square3.container,.5,{colorTransform:{exposure:.5}});

};

 

square2.onRollOver = function() {

TweenMax.to(square1.container,.5,{colorTransform:{exposure:.5}});

TweenMax.to(square3.container,.5,{colorTransform:{exposure:.5}});

};

 

square3.onRollOver = function() {

TweenMax.to(square1.container,.5,{colorTransform:{exposure:.5}});

TweenMax.to(square2.container,.5,{colorTransform:{exposure:.5}});

};

 

 

 

square1.onRollOut = function() {

TweenMax.to(square2.container,.5,{colorTransform:{exposure:1}});

TweenMax.to(square3.container,.5,{colorTransform:{exposure:1}});

};

 

square2.onRollOut = function() {

TweenMax.to(square1.container,.5,{colorTransform:{exposure:1}});

TweenMax.to(square3.container,.5,{colorTransform:{exposure:1}});

};

 

square3.onRollOut = function() {

TweenMax.to(square1.container,.5,{colorTransform:{exposure:1}});

TweenMax.to(square2.container,.5,{colorTransform:{exposure:1}});

};

Link to comment
Share on other sites

Sure, I've attached a revised example that makes it much easier to add MovieClips.

 

import com.greensock.*;
import com.greensock.easing.*;

var mcs:Array = [mc1, mc2, mc3]; //just put your MovieClips in this Array
var i:Number, curMC:MovieClip;
for (i = 0; i 	curMC = mcs[i];
curMC.others = getOthers(curMC);
curMC.onRollOver = rollOverHandler;
curMC.onRollOut = rollOutHandler;
}

//returns an Array of all the MovieClips in the "mcs" Array EXCEPT the on passed in as a parameter.
function getOthers(mc:MovieClip):Array {
var others:Array = [];
for (var i:Number = 0; i 		if (mcs[i] != mc) {
		others.push(mcs[i]);
	}
}
return others;
}


function rollOverHandler():Void {
TweenMax.allTo(this.others, 1, {colorTransform:{exposure:0.5}});
}

function rollOutHandler():Void {
TweenMax.allTo(this.others, 1, {colorTransform:{exposure:1}});
}

 

Oh, and thanks so much for your "Shockingly Green" support!

Link to comment
Share on other sites

  • 4 weeks later...

Hey I'm trying to do this rollover thing in AS3 but have a snag. how would I finish this? Thanks in advance.

 

import com.greensock.*;

import com.greensock.easing.*;

 

function activateRolloverFunc() {

var mcs:Array=[homePage_mc.k1_mc,homePage_mc.k2_mc,homePage_mc.k3_mc,homePage_mc.k4_mc,homePage_mc.k5_mc];//just put your MovieClips in this Array

var i:Number,j:Number,curMC:MovieClip;

for (i=0; i

curMC=mcs;

curMC.others=getOthers(curMC);

curMC.addEventListener(MouseEvent.MOUSE_OVER, rollOverHandler);

curMC.addEventListener(MouseEvent.MOUSE_OUT, rollOutHandler);

}

//returns an Array of all the MovieClips in the "mcs" Array EXCEPT the on passed in as a parameter.

function getOthers(mc:MovieClip):Array {

//builds array

var others:Array=[];

 

for (var i:Number = 0; i

if (mcs!=mc) {

others.push(mcs);

}

}

return others;

}

function rollOverHandler() {

TweenMax.allTo(this.others,1,{colorTransform:{exposure:0.6}});

TweenMax.allTo(this.others, 1, {colorTransform:{exposure:0}});

}

 

function rollOutHandler() {

TweenMax.allTo(this.others,.5,{colorTransform:{exposure:1}});

}

}

activateRolloverFunc();

 

 

Looks like the "this.others" is the problem, it does not trace in the roll handlers. Just starting working with AS3 so thanks for the help!

it generates this error:

 

TypeError: Error #1009: Cannot access a property or method of a null object reference.

at com.greensock::TweenMax$/allTo()

at MethodInfo-238()

Link to comment
Share on other sites

There are several problems. First, you're used to scope shifting in AS2 (meaning what "this" refers to). In AS3, scope doesn't shift. So your code was assuming "this.others" would change based on which object was rolled over/out. It won't.

 

You need to make your event handlers accept an event parameter. Then you can use the event.target property to determine which object is related to the event that called the function (which object was rolled over/out).

Link to comment
Share on other sites

  • 4 months later...

I just got around to doing this in as3 so I figured I'd post it for a complete tread. Better late then never right? :D

 

 

import com.greensock.*;

import com.greensock.easing.*;

 

var mcs:Array=[mc,mc,mc];//just put your MovieClips in this Array

var i:Number,curMC:MovieClip;

for (i = 0; i < mcs.length; i++) {

curMC=mcs;

curMC.others=getOthers(curMC);

curMC.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);

curMC.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

 

}

 

//returns an Array of all the MovieClips in the "mcs" Array EXCEPT the on passed in as a parameter.

function getOthers(mc:MovieClip):Array {

var others:Array=[];

for (var i:Number = 0; i < mcs.length; i++) {

if (mcs!=mc) {

others.push(mcs);

}

}

return others;

}

 

 

function rollOverHandler(event:MouseEvent):void {

TweenMax.allTo(event.target.others, 1, {colorTransform:{exposure:0.5}});

}

 

function rollOutHandler(event:MouseEvent):void {

TweenMax.allTo(event.target.others, 1, {colorTransform:{exposure:1}});

}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...