Ulb

Ok so I have been playing with your code and mine and I to get it to scrub properly you have to set the x and y position of the to the same position as when it starts on the left but then use the twee.progress(0.99) as well

Thanks for your help Carl

If i wanted this code to work where the button i am dragging from the right of the screen to the left, how would the code change?

Everything i do still makes the button move from the left side of the screen

The idea i was playing with was to create another set of bezier tween points and when you go back using that line to create the reversing.

Hence making a new set of up / down / update handlers which work in the reverse direction.

Do you think that is the best way to do it?

OK fixed the button issue, but wondering there is a way to fix the bezier tween when i go from slide 2 to slide 1.

Atttached is the working files and when i go from slide 2 to slide 1 the button tweens weirdly

beziertest.zip

I think i am, i am trying to upload the file but the uploader gives me a 404 error.

I assume it could be my work stopping me, will try when i get home

Hi All,

I hoping someone can explain what I am doing wrong.

I am using OOP and using a bezier tween to guide my button across a path, once it reaches the end it activates the next page in the module i am building.

This works fine, but if i re-enter the module the button is at the end of the motion path and I cannot move it or anything.

I am hoping to use this method as the navigation method for the pages of the module so users can slide the button right side of the page to move to the next page or to the left side to go back.

Any help would be great

Below is a module example for the introduction of this:

package classes.Pages
{
	import flash.display.MovieClip;
	import classes.*;
	import com.greensock.*;
	import com.greensock.easing.*;
	import com.greensock.plugins.*;
	import flash.events.*;
	import flash.ui.Mouse;
	import flash.media.SoundChannel;

	public class IntroPage extends MovieClip
	{
		//Common Variables
		private var introPage01Mc:IntroPage01MC = new IntroPage01MC();
		private var introPage02Mc:IntroPage02MC = new IntroPage02MC();
		
		public function IntroPage()
		{
			initCommonElements();
		}
		public function initCommonElements():void
		{
			//Initiate first page
			startPage1();
		}

		//Page 1
		public function startPage1():void
		{
			trace("Page 1");
			
			//Add Children
			addChild(introPage01Mc);

			//Applying co-ordinates;
			introPage01Mc.x = 0;
			introPage01Mc.y = 0;
		}
		
		public function nextPage2():void
		{
			TweenLite.to(introPage01Mc, 1, {ease:Sine.easeOut, x: -1000});
				
			trace("Page 2");
			//Add Children
			addChild(introPage02Mc);

			//Applying co-ordinates;
			introPage02Mc.x = 920;
			introPage02Mc.y = 0;
			
			TweenLite.to(introPage02Mc, 1, {ease:Sine.easeOut, x: 0});
		}

		public function closeModule():void
		{
			TweenLite.to(introPage02Mc, 1, {ease:Sine.easeOut, x: -1000});

			MovieClip(root).fadeOutMovieClip();
			MovieClip(root).initMenuSystem();
			MovieClip(root).removemodulePage("moduleitem1");
		}
	}

}

This is for page 1 of the module

package classes.Pageactivities
{
	import flash.display.MovieClip;
	import classes.*;
	import com.greensock.*;
	import com.greensock.easing.*;
	import com.greensock.plugins.*;
	import flash.events.Event;
	import flash.events.MouseEvent;
	TweenPlugin.activate([bezierPlugin]);

	public class IntroPage01 extends MovieClip
	{
		//Common Variables
		public var startMouseX;
		//declare tween
		public var tween:TweenMax;
		
		public function IntroPage01()
		{
			// constructor code
			draggerMc.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
			draggerMc.addEventListener(MouseEvent.MOUSE_UP, upHandler);
			draggerMc.buttonMode = true;
			
			//move tween instantiation into constructor method
			tween = TweenMax.to(draggerMc, 4, {bezier:{values:[
			  {x:d1.x,y:d1.y},
			  {x:d2.x,y:d2.y},
			  {x:d3.x,y:d3.y},
			  {x:d4.x,y:d4.y},
			  {x:d5.x,y:d5.y},
			  
			  ],
			  type:"thru",
			  curviness:0
			  },
			  ease:Linear.easeNone,
			  paused:true
			  });			
		}
		
		public function downHandler(e:MouseEvent):void
		{
			//an offset value that later lets us translate the mouse position to a progress() value
			
			startMouseX = mouseX - (draggerMc.x - (draggerMc.width/2));
			stage.addEventListener(MouseEvent.MOUSE_MOVE, update);
			stage.addEventListener(MouseEvent.MOUSE_UP, upHandler);
		}
		public function upHandler(e:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, update);
			stage.removeEventListener(MouseEvent.MOUSE_UP, upHandler);
		}
		public function update(e:Event):void
		{
			//took some guesswork but it seems to do the trick
			
			tween.progress(Math.max((mouseX-startMouseX)/(d5.x-startMouseX), 0));
			hitTester()
		}
		
		private function hitTester():void
		{
			//If we hit test object
			//Intersection 1
			if (draggerMc.hitTestObject(toSlide2))
			{
				draggerMc.removeEventListener(MouseEvent.MOUSE_DOWN, downHandler);
				stage.removeEventListener(MouseEvent.MOUSE_MOVE, update);
				draggerMc.removeEventListener(MouseEvent.MOUSE_UP, upHandler);
				
				MovieClip(parent).nextPage2()
			}
		}
	}

}

Page 2

package classes.Pageactivities
{
	import flash.display.MovieClip;
	import classes.*;
	import com.greensock.*;
	import com.greensock.easing.*;
	import com.greensock.plugins.*;
	import flash.events.Event;
	import flash.events.MouseEvent;
	TweenPlugin.activate([bezierPlugin]);

	public class IntroPage02 extends MovieClip
	{
		//Common Variables
		public var startMouseX;
		//declare tween
		public var tween:TweenMax;
		
		public function IntroPage02()
		{
			// constructor code
			//move tween instantiation into constructor method
			tween = TweenMax.to(draggerMc, 4, {bezier:{values:[
			  {x:d1.x,y:d1.y},
			  {x:d2.x,y:d2.y},
			  {x:d3.x,y:d3.y},
			  {x:d4.x,y:d4.y},
			  {x:d5.x,y:d5.y},
			  
			  ],
			  type:"thru",
			  curviness:0
			  },
			  ease:Linear.easeNone,
			  paused:true
			  });
			  
			draggerMc.buttonMode = true;
			draggerMc.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
			draggerMc.addEventListener(MouseEvent.MOUSE_UP, upHandler);
			
		}
		public function downHandler(e:MouseEvent):void
		{
			//an offset value that later lets us translate the mouse position to a progress() value
			
			startMouseX = mouseX - (draggerMc.x - (draggerMc.width/2));
			stage.addEventListener(MouseEvent.MOUSE_MOVE, update);
			stage.addEventListener(MouseEvent.MOUSE_UP, upHandler);
		}
		public function upHandler(e:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, update);
			stage.removeEventListener(MouseEvent.MOUSE_UP, upHandler);
		}
		public function update(e:Event):void
		{
			//took some guesswork but it seems to do the trick
			
			tween.progress(Math.max((mouseX-startMouseX)/(d5.x-startMouseX), 0));
			hitTester()
		}
		
		private function hitTester():void
		{
			//If we hit test object
			//Intersection 1
			if (draggerMc.hitTestObject(toFinish))
			{
				draggerMc.removeEventListener(MouseEvent.MOUSE_DOWN, downHandler);
				stage.removeEventListener(MouseEvent.MOUSE_MOVE, update);
				draggerMc.removeEventListener(MouseEvent.MOUSE_UP, upHandler);
				
				TweenLite.delayedCall(1, delayCall);
				function delayCall():void
				{
					MovieClip(parent).closeModule()
					
				}
			}
		}
	}

}

Thanks Carl, you rock, totally worked

Hi Carl,

I dont know what i'm doing wrong with this so I've attached my files and maybe you can help?

Thanks

motion guide.zip

Are you using GSAP v11 or v12? progress only became a function in v12 ( tween.progress(0); ); in v11 it is just a property ( tween.progress = 0; ).

I thought i was but alas i wasn't.

Now when it compiles i get a Error #1009: Cannot access a property or method of a null object reference. referring to the coordinates for the Bezier

Thanks Carl, I've copied the code and tried to get it working but get an error 1061: Call to a possibly undefined method progress through a reference with static type com.greensock:TweenMax. The error is referring to the update function. I am using the code in a class file because I am trying to code using OOP more and more but i can't see why its having the issue. Below is the code from my file, am i doing something wrong? 

package  
{
	import flash.display.MovieClip;
	import com.greensock.*;
	import com.greensock.easing.*;
	import com.greensock.plugins.*;
	import flash.events.Event;
	import flash.events.MouseEvent;

	TweenPlugin.activate([bezierPlugin]);
	
	public class motionguide extends MovieClip 
	{
		public var startMouseX;
		//create bezier tween based on position of dots on the stage
		public var tween:TweenMax = TweenMax.to(draggerMc, 4, {bezier:{values:[
			   {x:d1.x,y:d1.y},
			   {x:d2.x,y:d2.y},
			   {x:d3.x,y:d3.y},
			   {x:d4.x,y:d4.y},
			   {x:d5.x,y:d5.y},
			   ],
			   type:"thru",
			   curviness:0
			   },
			   ease:Linear.easeNone,
			   paused:true
			   });
			   
		public function motionguide() 
		{
			// constructor code
			draggerMc.buttonMode = true;   
			draggerMc.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
			draggerMc.addEventListener(MouseEvent.MOUSE_UP, upHandler);
		}
		
		public function downHandler(e:MouseEvent):void 
		{
		//an offset value that later lets us translate the mouse position to a progress() value
		startMouseX = mouseX - (draggerMc.x - (draggerMc.width/2));
		stage.addEventListener(MouseEvent.MOUSE_MOVE, update);
		stage.addEventListener(MouseEvent.MOUSE_UP, upHandler);
		}
		
		
		public function upHandler(e:MouseEvent):void 
		{
		stage.removeEventListener(MouseEvent.MOUSE_MOVE, update);
		stage.removeEventListener(MouseEvent.MOUSE_UP, upHandler);
		}
		
		
		public function update(e:Event):void 
		{
		//took some guesswork but it seems to do the trick
		tween.progress(Math.max((mouseX-startMouseX)/(d5.x-startMouseX), 0));
		}
	}
	
}

Hi All,

I want to create a button that is dragged using the "startdrag" across a motionpath tween but the line isnt straight. Is there a way. I have attached an example of what the line will look like.

Any help would be great