Blurring problem on button and text after a rotation.

[UbiAssassin]

Hello again

 

I am re-building my website from scratch in Flash 10 AS3. I have been getting a lot of great help here and I really love the greensock tools! Brilliant stuff. My new issue is that to add more interactivity to my Navigation Buttons on the left panel of my website, I added a Y:-15 degree rotation on rollover and on rollout it goes back to 0 rotation. The problem is that the button and buttonLabel will blur slightly once the button has returned to its position. I was thinking that it was auto-applying a blur due to the rotation, but even trying to use the TweenLite.from BlurFilter to set it back to 0 blur does not fix the issue. I am probably completely missing the point of how this works and am doing it the wrong way. I am very new to this hehe.

 

The issue is happening in these two chunks of my code:

 

Here, I tell the button to rotate on a Mouse over event:

 

	private function soundOver(e:MouseEvent):void
	{
		navRollOver.gotoSoundTime(0, true);
		navRollOver.volume = .05;
		navRollOver.playSound();
		TweenLite.to(this, .5, {z: -15});
		TweenMax.to(this, .5, {rotationY: -15});
	}

 

Here I am trying to tell the button to go back to its normal position:

 

	private function onOut(e:MouseEvent):void
	{
		TweenLite.to(buttonOutline, 1, {removeTint: true, ease: Quad.easeOut});
		TweenLite.to(buttonIndicator, .1, {tint: 0xFF6600, ease: Quad.easeOut});
		TweenLite.to(buttonIndicator2, .1, {tint: 0x000000, ease: Quad.easeOut});
		TweenLite.to(this, .5, {z: 0});
		TweenMax.to(this, .5, {rotationY: 0});
	}

 

Here is the full code packet for my buttons:

 

package
{
import com.greensock.loading.LoaderMax;
import com.greensock.loading.MP3Loader;
import flash.display.*;
import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;

public class NavButtonScript extends MovieClip
{
	//========================================================
	//*** Variable declarations for Button Funtionality.***
	//
	//========================================================

	private var buttonField:TextField;
	private var buttonOutline:Shape;
	private var buttonIndicator:Shape;
	private var buttonIndicator2:Shape;

	//========================================================
	//*** Variable declarations for Music Control.***
	//
	//========================================================

	private var navRollOver:MP3Loader = new MP3Loader("http://www.levelforge.com/MP3/ayuigo-xrikazen-80.mp3", {autoPlay: false, volume: .15});
	private var navButtonClick:MP3Loader = new MP3Loader("http://www.levelforge.com/MP3/button-11.mp3", {autoPlay: false, volume: 1});
	private var buttonSfxQueue:LoaderMax = new LoaderMax();

	public function NavButtonScript()
	{

		//========================================================
		//*** Call the Button Movie from the stage.***
		//
		//========================================================

		trace(this);
		TweenMax.to(this, 1, {bevelFilter: {blurX: 5, blurY: 5, strength: 1, angle: 45, distance: 5}, ease: Quad.easeIn});

		//========================================================
		//*** Load the Button Sounds for Usage.***
		//
		//========================================================

		buttonSfxQueue.append(navRollOver);
		buttonSfxQueue.append(navButtonClick);
		buttonSfxQueue.load();

		//========================================================
		//*** Button Definitions and Creation on Stage.***
		//
		//========================================================

		buttonOutline = new Shape();
		buttonOutline.graphics.beginFill(0x00CBFF, 1);
		buttonOutline.graphics.drawRect(-2, -2, 119, 32);
		addChildAt(buttonOutline, 0);

		buttonIndicator = new Shape();
		buttonIndicator.graphics.beginFill(0xFF6600, 1);
		buttonIndicator.graphics.drawRect(92, 2, 17, 12);
		addChildAt(buttonIndicator, 1);

		buttonIndicator2 = new Shape();
		buttonIndicator2.graphics.beginFill(0x000000, 1);
		buttonIndicator2.graphics.drawRect(92, 12, 17, 12);
		addChildAt(buttonIndicator2, 1);

		buttonField = new TextField();
		buttonField.width = 200;
		buttonField.height = 30;
		buttonField.x = -52;
		buttonField.y = 3;
		var format:TextFormat = new TextFormat();
		format.align = "center";
		format.size = 12;
		format.font = "Verdana";
		format.color = "0x65ffff";
		buttonField.defaultTextFormat = format;
		addChild(buttonField);

		addEventListener(MouseEvent.ROLL_OVER, onOver);
		addEventListener(MouseEvent.ROLL_OUT, onOut);
		addEventListener(MouseEvent.MOUSE_DOWN, onClick);
		addEventListener(MouseEvent.MOUSE_UP, offClick);
		addEventListener(MouseEvent.MOUSE_OVER, soundOver);

		mouseChildren = false;
		buttonMode = true;
	}

	//========================================================
	//*** Functions for Button Reactions and Button Appearances for the Different Mouse Events.***
	//
	//========================================================

	public function setLabel(Label:String):void
	{
		buttonField.text = Label;
	}

	private function soundOver(e:MouseEvent):void
	{
		navRollOver.gotoSoundTime(0, true);
		navRollOver.volume = .05;
		navRollOver.playSound();
		TweenLite.to(this, .5, {z: -15});
		TweenMax.to(this, .5, {rotationY: -15});
	}

	private function onOver(e:MouseEvent):void
	{
		TweenLite.to(buttonOutline, .5, {tint: 0x00ff00, ease: Quad.easeIn});
		TweenLite.to(buttonIndicator, .1, {tint: 0x000000, ease: Quad.easeIn});
		TweenLite.to(buttonIndicator2, .1, {tint: 0xFF6600, ease: Quad.easeIn});
	}

	private function onOut(e:MouseEvent):void
	{
		TweenLite.to(buttonOutline, 1, {removeTint: true, ease: Quad.easeOut});
		TweenLite.to(buttonIndicator, .1, {tint: 0xFF6600, ease: Quad.easeOut});
		TweenLite.to(buttonIndicator2, .1, {tint: 0x000000, ease: Quad.easeOut});
		TweenLite.to(this, .5, {z: 0});
		TweenMax.to(this, .5, {rotationY: 0});
	}

	private function onClick(e:MouseEvent):void
	{
		navButtonClick.gotoSoundTime(0, true);
		navButtonClick.volume = .1;
		navButtonClick.playSound();
		TweenLite.to(buttonOutline, .1, {tint: 0xff0000, ease: Quad.easeIn});
		TweenLite.to(buttonIndicator, .1, {tint: 0x009900, ease: Quad.easeIn});
		TweenLite.to(buttonIndicator2, .1, {tint: 0x009900, ease: Quad.easeIn});
	}

	private function offClick(e:MouseEvent):void
	{
		TweenLite.to(buttonOutline, .1, {tint: 0x00CBFF, ease: Quad.easeOut});
		TweenLite.to(buttonIndicator, .1, {tint: 0xFF6600, ease: Quad.easeOut});
		TweenLite.to(buttonIndicator2, .1, {tint: 0x000000, ease: Quad.easeOut});
	}

}

}

 

Thanks ahead of time for any responses

 

Notice in the image that the Home Button is slightly blurred (after I moused-over once), the Contact Button is in the process of a rollover tween, and the rest of the buttons look as they should.

[mrEmpty]

Hello.

 

It looks like some anti-aliasing has been applied, and whilst I remember once reading about a similar problem I cannot remember what the solution was. I'm sure one of the more experienced members will point out something.

 

One thing, why are you using both TweenLite and TweenMax to tween properties of the same item? Not a bash, I'm just interested.

[UbiAssassin]

One thing, why are you using both TweenLite and TweenMax to tween properties of the same item? Not a bash, I'm just interested

 

Hehe, no worries. Honestly I am only about 4 days in to working with AS3 and greensock. My last site was built on a very small as2 shell and 98% timeline/visual work, so this is all very new to me. Any input that you have would be awesome and by no means considered a bash . I can use TweenMax for everything tweenlite can do I guess can't I? It would be smart for me to consolidate and just rip out the Tweenlite references

[mrEmpty]

Change rotationY to rotation and see what happens. On my quick test that was causing the issue.

[UbiAssassin]

Thanks. I tried that, but the rotation was not working as intended with that change, and it still blurred for me. Maybe it has something to do with the fact that most of the button functionality happens in the NavButtonScript.as, but it is then accessed in the LevelforgeMain.as and told to translate across the stage. Perhaps the fact that one .as file is accessing the other has something to do with it? I don't see why off the top of my head, but it is not a completely simple setup, so there is probably a lot more room for error. Thanks again for the TweenLite comment. I have since removed all of my TweenLite dependencies and replaced them with TweenMax. Much cleaner that way

[Carl]

once you apply a 3D rotation to an object it gets treated like a bitmap and is often a touch blurry or pixelated.

the trick is to remove the matrix3D transformations as discussed here:

 

http://www.snorkl.tv/2011/04/fun-and-qu ... ster-bomb/

 

watch the complete video and download the source files.

[UbiAssassin]

Excellent tutorial and suggestion. I really appreciate the help. Sadly in my case, the buttons show an obvious pop at the end as they are re-adjusted and the blur is removed. It is also very obvious that they are blurred when your mouse is over the button and it sits translated until you roll off. It does not bother me that much, but I wish we had a way to control and remove the blurring affect throughout the entire tween process. Thanks again, you helped me a lot. Thank you also for the tutorial link in your response. I want to do something very similar, with the exception of moving the plates into specific positions on my screen instead of random ones.