Jump to content
GreenSock

HaunGo

Any thoughts on how to make buttons like on this site?:

Recommended Posts

Cool.. I got something working.

 

I uploaded the demo for the community to play with.

 

and here's the code:

I'd like to do without the enterframe loop though.... maybe onMouseMove ? hrmm

 

 

package  
{

import flash.display.*;
import flash.events.*;

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

public class btnPicBgMove extends MovieClip {

	var _isOver:Boolean = false;
	var _isOverProxBtn:Boolean = false;

	public function btnPicBgMove() 
	{
		//trace('btnPicBgMove()')

		btn.bg
		btn.img.mask = btn.masker;

		btn.buttonMode = true;
		btn.useHandCursor = true;
		btn.mouseChildren = false;

		proxBtn.buttonMode = true;
		proxBtn.useHandCursor = true;
		proxBtn.mouseChildren = false;


		btn.addEventListener(MouseEvent.ROLL_OVER, btnOVER);						
		btn.addEventListener(MouseEvent.ROLL_OUT,  btnOUT);						

		proxBtn.addEventListener(MouseEvent.ROLL_OVER, btnOVER)
		proxBtn.addEventListener(MouseEvent.ROLL_OUT, btnOUT)

		addEventListener(Event.ENTER_FRAME, loop);	
	}



	private function btnOVER(e:Event)
	{	//trace('btnBGMover()');
		if (e.target == btn){
			TweenLite.to(btn.img, .3, {scaleX:1, scaleY:1, alpha:1});
			_isOver = true;
		}
		if (e.target == proxBtn){
			_isOverProxBtn = true
		}
	}

	private function btnOUT(e:Event)
	{	//trace('btnBGMover()');

		if (e.target == btn){
			_isOver = false;
			TweenLite.to(btn.img, .3, {scaleX:.8, scaleY:.8, alpha:.7, x:0, y:0});
		}
		if (e.target == proxBtn){
			_isOverProxBtn = false
			TweenLite.to(proxBtn.btn, .3, {x:20, y:10});
		}
	}



	private function loop(e:Event)
	{	//trace('loop()');

		if(_isOver)
		{
			var xDist:Number = btn.mouseX/btn.bg.width;
			var yDist:Number = btn.mouseY/btn.bg.height;

			TweenLite.to(btn.img, .1, {
										   x:-xDist * (btn.img.width - btn.bg.width)
										 , y:-yDist * (btn.img.height - btn.bg.height)
										 , ease:Linear.easeNone 
										 , overwrite:false
										})
		}

		if(_isOverProxBtn)
		{
			var xDist2:Number = proxBtn.mouseX / proxBtn.prox.width;
			var yDist2:Number = proxBtn.mouseY / proxBtn.prox.height;

			TweenLite.to(proxBtn.btn, .1, {
										   x:xDist2 * ( proxBtn.prox.width - proxBtn.btn.width  )
										 , y:yDist2 * ( proxBtn.prox.height - proxBtn.btn.height)
										 , ease:Linear.easeNone 
										})
		}

	}





}
}



Link to comment
Share on other sites

pretty cool effect, thanks for sharing!

Link to comment
Share on other sites

HI,

 

It is quite nice. But how to do waving text effect as in that website.

 

Thanks for any help.

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.
×