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

[HaunGo]

The sort of sticky proximity buttons on the very beginning intro of the site, after the preloading:

 

http://ten.propaganda3.com/

 

Any thoughts?

 

-HaunGo

[HaunGo]

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 
										})
		}

	}





}
}

[rindra]

pretty cool effect, thanks for sharing!

[learner_7n]

HI,

 

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

 

Thanks for any help.