Help with two pretty simple pieces ( I think)

[jameslavis]

Hey guys, been out of the coding loop for quite a bit. Doing a quick proof of concept and have two simple code pieces to put together. Here's what I"m trying to accomplish.

1) mimic a simple parallax webpage, drag up and down to view content

2) have the ability within each content "band" to go left and right if necessary

so here's what I've done:

- built a large parent movieclip called ONEPAYLAYOUT in the code.

- have sub/child movieclips called bands.

- found code to allow me to scroll up and down

1) so with the code from a tutorial, it does what I need for the scrolling but for some reason, right when you launch it jumps down to band 2. I have no clue why. Band 1 is perfectly aligned with the stage, so it should launch and just stay put. So I don't know if anyone can see in the code below why it does some auto adjustment. My code is below, hope someone can see the issue.

2) a future direction helper. If I put a button in somehting like band 2 to have a trigger for band 2 to go to it's second keyframe, a different picture. I know that with the event listener on the main parent movieclip it does not work or pick up the click of a child/nested movieclilp. I know this has to have been done a million times because I see it all over the web and in apps. Any ideas?

import flash.events.MouseEvent;

import flash.geom.Point;

import flash.events.Event;

import flash.geom.Rectangle;

var destination:Point=new Point();

var dragging:Boolean=false;

var speed:Number=5;

var offset:Point=new Point(); // our offset

ONEPAGELAYOUT.addEventListener(MouseEvent.MOUSE_DOWN,startdrag);

stage.addEventListener(MouseEvent.MOUSE_UP,stopdrag);

ONEPAGELAYOUT.addEventListener(Event.ENTER_FRAME,followmouse);

var bounds:Rectangle=new Rectangle(0,719.95,stage.stageWidth,stage.stageHeight);

function followmouse(e:Event):void{

   if(dragging){

      destination.y=mouseY;

   }

   ONEPAGELAYOUT.y-=(ONEPAGELAYOUT.y-(destination.y-offset.y))/speed;

   if(ONEPAGELAYOUT.y>bounds.top){

      ONEPAGELAYOUT.y=bounds.top;

   }

   if(ONEPAGELAYOUT.y<-ONEPAGELAYOUT.height+bounds.bottom){

      ONEPAGELAYOUT.y=-ONEPAGELAYOUT.height+bounds.bottom;

   }

}

function startdrag(e:MouseEvent):void{

   offset.y=ONEPAGELAYOUT.mouseY*ONEPAGELAYOUT.scaleY;

   dragging=true;

}

function stopdrag(e:MouseEvent):void{

   dragging=false;

}

[kglad]

the code in followmouse is always executing (because of your enterframe listener) and that shouldn't be happening.  you should only start that loop when a position change is needed and, after complete, you should remove that listener.

[jameslavis]

Hey Kglad, thanks for the reply. When I removed the event listener and then the full follow mouse function, the abiity to drag disappeared. It did line up the movieclip right, but I lost the function. Any idea as to why, both the start and stop drags are there, and an event listener...

[kglad]

try:

import flash.events.MouseEvent;

import flash.geom.Point;

import flash.events.Event;

import flash.geom.Rectangle;

var destination:Point=new Point();

var speed:Number=5;

var offset:Point=new Point(); // our offset

ONEPAGELAYOUT.addEventListener(MouseEvent.MOUSE_DOWN,startdrag);

stage.addEventListener(MouseEvent.MOUSE_UP,stopdrag);

var bounds:Rectangle=new Rectangle(0,719.95,stage.stageWidth,stage.stageHeight);

function followmouse(e:Event):void{

      destination.y=mouseY;

   ONEPAGELAYOUT.y-=(ONEPAGELAYOUT.y-(destination.y-offset.y))/speed;

   if(ONEPAGELAYOUT.y>bounds.top){

      ONEPAGELAYOUT.y=bounds.top;

   }

   if(ONEPAGELAYOUT.y<-ONEPAGELAYOUT.height+bounds.bottom){

      ONEPAGELAYOUT.y=-ONEPAGELAYOUT.height+bounds.bottom;

   }

}

function startdrag(e:MouseEvent):void{

   offset.y=ONEPAGELAYOUT.mouseY*ONEPAGELAYOUT.scaleY;

ONEPAGELAYOUT.addEventListener(Event.ENTER_FRAME,followmouse);

}

function stopdrag(e:MouseEvent):void{

ONEPAGELAYOUT.removeEventListener(Event.ENTER_FRAME,followmouse);

}

[jameslavis]

Hey Kglad, it makes it draggable but loses the easing.  think this may be just some wacky code. Looking into throwprops by greensock as I really just need a vertical scroller with drag and easing. that's it. nothing special

[kglad · Accepted solution]

then use:

import flash.events.MouseEvent;

import flash.geom.Point;

import flash.events.Event;

import flash.geom.Rectangle;

var destination:Point=new Point();

var speed:Number=5;

var offset:Point=new Point(); // our offset

ONEPAGELAYOUT.addEventListener(MouseEvent.MOUSE_DOWN,startdrag);

stage.addEventListener(MouseEvent.MOUSE_UP,stopdrag);

var bounds:Rectangle=new Rectangle(0,719.95,stage.stageWidth,stage.stageHeight);

function followmouse(e:Event):void{

      destination.y=mouseY;

   ONEPAGELAYOUT.y-=(ONEPAGELAYOUT.y-(destination.y-offset.y))/speed;

   if(ONEPAGELAYOUT.y>bounds.top){

      ONEPAGELAYOUT.y=bounds.top;

   }

   if(ONEPAGELAYOUT.y<-ONEPAGELAYOUT.height+bounds.bottom){

      ONEPAGELAYOUT.y=-ONEPAGELAYOUT.height+bounds.bottom;

   }

if(Math.ABS(ONEPAGELAYOUT.y-destination.y)<1){

ONEPAGELAYOUT.removeEventListener(Event.ENTER_FRAME,followmouse);

ONEPAGELAYOUT.y=destination.y;

}

}

function startdrag(e:MouseEvent):void{

   offset.y=ONEPAGELAYOUT.mouseY*ONEPAGELAYOUT.scaleY;

ONEPAGELAYOUT.addEventListener(Event.ENTER_FRAME,followmouse);

}

function stopdrag(e:MouseEvent):void{

}

[jameslavis]

Hey K,

Ok so this makes no sense but it was something to do with the large Movieclip. So I put all my pages lined up, created sub mcs out of them. Then grouped them into a parent mc. Something in this process flash didn't like. So I grabbed an old file that I did something similar, exactly the same layout and creation process. It worked with that parent movieclip. I gutted out all the child mcs, put my new ones in and the behavior is gone. wtf.