TweenMax Drop Shadow Hiccup

programming flash
1

So, the good news is that I’ve got this about 90% solved.

Anyway, I’m trying to use TweenMax to have a drop shadow fade up on a Mouse Event (on a roll out). Everything works fine except for the shadow color. I’ve got it set to black (0x000000), but it’s making a shadow that’s the same color as the menubar sprite it’s trying to shadow.

In other words: I’ve got a bright blue menu button, and it’s giving it a bright blue shadow, despite the fact that I’ve got the color value set to 000000.

Basically, I’ve got some code to put together the parts of the menubar (size, shape, text, shadow, etc.)



	menuBar = new Sprite();
	menuBar.graphics.beginFill(menuColor);
	menuBar.graphics.drawRoundRect(0, 0, 260, barHeight, 15, 15);
	menuBar.graphics.endFill();
	addChild(menuBar);

	menuFormat = new TextFormat();
	menuFormat.font = "Verdana";
	menuFormat.size = 11;
	menuFormat.color = 0x222222; 

	menuTxt = new TextField();
	menuTxt.type = TextFieldType.DYNAMIC;
	menuTxt.autoSize = TextFieldAutoSize.LEFT;
	menuTxt.x = menuBar.width - 255;
	menuTxt.y = 0;
	menuTxt.mouseEnabled = false;
	menuTxt.htmlText = titleText;
	menuTxt.setTextFormat(menuFormat);
	addChild(menuTxt);//add the menus title text

	//position the menu using vars
	this.x = menuPosX;
	this.y = menuPosY;

	//drop shadow 
	myShadow.color = 0x000000;
	myShadow.blurX = 5;
	myShadow.blurY = 0; 
	myShadow.angle = 35; 
	myShadow.alpha = .35;
	myShadow.distance = 2; 
	var filtersArray:Array = new Array(myShadow);
	menuBar.filters = filtersArray;

That all works just fine. The problem comes when I have the rollover event. The menubar and font change color, then change back on rollout exactly as they should. But the drop shadow doesn’t want to play nice.

So for that I have:



		private function mouseOutHandler(event:MouseEvent):void {
			TweenLite.to(this.menuBar, speed, {tint:menuColor});
			TweenLite.to(this.menuTxt, speed, {tint:menuFormat.color});
			TweenMax.to(this.menuBar, .25, {dropShadowFilter:{color:0x000000, alpha:.35, blurX:5, blurY:0, angle:35, distance:2}});
		}

At first I thought I wasn’t getting a drop shadow at all. So I checked the Green Sock website and double checked the syntax against the Green Sock documentation. It looks correct.

I played with the values and when I upped the alpha (to 1) and the distance (to 15), it became clear that there was indeed a drop shadow being generated on rollout, but it’s the same color as the menubar (or the color assigned to the menubar by the variable “menuColor”).

So any reason that the shadow is picking up that value instead of using the black (0x000000) that’s right there in the line for the Drop Shadow?

Thanks for any help.