Skip to main content
Inspiring
March 2, 2015
Answered

Help with two pretty simple pieces ( I think)

  • March 2, 2015
  • 2 replies
  • 403 views

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;

}

This topic has been closed for replies.
Correct answer kglad

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{

}

2 replies

kglad
Community Expert
Community Expert
March 2, 2015

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

}

Inspiring
March 2, 2015

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
Community Expert
Community Expert
March 2, 2015

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.

Inspiring
March 2, 2015

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