Reset position of draggerMc when you re-enter page

[Ulb 0 Likes (Newbie)]

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

}

 

 

[Carl 11,108 Likes (Superhero)]

That's a lot of code to visualize. Are you sure you are re-applying the MOUSE_DOWN event handlers? That's my only guess. 

[Ulb 0 Likes (Newbie)]

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

[Ulb 0 Likes (Newbie)]

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

[Carl 11,108 Likes (Superhero)]

I think I found the problem

 

in IntroPage.as backPage01() you do:

 

 

introPage01Mc.nextListeners() // creates a new bezier tween that is paused


//set position of draggerMc
introPage01Mc.draggerMc.x = 951.5;
introPage01Mc.draggerMc.y = 358;

since you are moving draggerMc to the right of the stage that is where the first value in the bezierTween is being recorded. You'll notice that when you drag to the left, it goes all the way back to that position that you recorded above. That is literally the starting point in the bezier tween.  

 

I think you need to find a way to make it so that the tween you make for each page is re-used and not re-created each time you re-vist a page. That way when you go back to page1, you can just set its tween's progress(1) (at the end) and you won't have to worry about hardcoding the position of the dragger and having that new position be part of the new Bezier tween.

 

Hope this helps

[Ulb 0 Likes (Newbie)]

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?

[Carl 11,108 Likes (Superhero)]

I think the way I suggested would be be much easier.

 

in introPage1.as use this:

 

 

public function nextListeners():void
{
draggerMc.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
draggerMc.addEventListener(MouseEvent.MOUSE_UP, upHandler);
draggerMc.buttonMode = true;
trace("******** NEW TWEEN ********");


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


// ***** NEW ****
 tween.progress(0.99);
// apparently you have some code that detects when the drag is completed to the right and it advances to the next slide. I had to set progress() less than 1 in order to avoid that transition from happening.
}

in introPage.as remove the hardcoded positioning of draggerMc

 

 

public function startPage1():void
{
trace("Page 1");


//Add Children
addChild(introPage01Mc);


//Applying co-ordinates;
introPage01Mc.x = 0;
introPage01Mc.y = 0;


introPage01Mc.nextListeners()


//introPage01Mc.draggerMc.x = 62.55;
//introPage01Mc.draggerMc.y = 358;


}

When you first visit page1 you will see that you can now scrub backwards.

 

This just illustrates how to drag from right to left as you requested in your other post.

You will have to experiment with some ways of switching the behavior around, but I wanted to show that the same tween can work both ways. 

 

attached are the files.

 

 

beziertest 2.zip

[Ulb 0 Likes (Newbie)]

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