-
AS3 scroller with inertia?
Hi, this has been frustrating me for a few days so any help would be great:
I've been trying to make a scroller, but the movieclip IS the scroller (if that makes sense?)
So I have a movieclip that's, say, 1920 wide, and the stage just resizes to the browser, and when you drag the movieclip it scrolls. I have this semi-working but it's quite buggy on resize, and i also want inertia on the movieclip when it moves - hope that makes sense. Pleeeasse could anyone get back to me?
Thanks in advance
-
Does the movieClip scroll relative to the mouse position? Is there a slider bar that, when you drag it, scrolls throught the frames of the movie clip, based on the mouse being down and the user dragging the slider bar?
Inertia is the tendacy of something to continue moving in the same direction. The object would have to have simulated Mass.
Do you have any code that you could upload, so we can see how you have it ''semi-wroking''?
-
Senior Member
post the FLA and ill take a look,
With inertia, I always use the combination of these three things:
A Final Value
A ENTER_FRAME 'stepper'
A Ease Out Algorithm
So, (again let me know if I misunderstood your question), You wish for the appearance that something (a scroll bar in this case) seems to bounce/glide toward its final position.
I would first make note if the position it is supposed to finally get to. Then using the rendering engines enter frame event, I would step a given amount closer toward to the final position. Then finally, that amount should be based on any Algo that you want... a simple ease out would be (distance toward final / 10), or another way of looking at it would be, it always gets 10% closer toward its target, (which when you are 1000px away, thats 100... then when you get closer, lets say you are 100px away, thats 10).
Well thats a start good luck,
-
Sorry, still pretty new to forums also pretty new to AS3 so to be honest I've just been trying to piece bits of code together in the hope it will work - here's what I have so far:
(The movieclip on stage is called "grab", and yes, I want it to glide to it's final position) - It seems to work (apart from the inertia not working)
sorry if it's messy:
Actionscript Code:
grab.addEventListener(MouseEvent.MOUSE_DOWN, startScroll); stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
var lastMouseX:Number = 0;
var dragging:Boolean;
function startScroll(e:MouseEvent):void { dragging=true; if (grab.x >= stage.stageWidth){ grab.startDrag(false, new Rectangle(0, 100, grab.width, 0)); } addEventListener(Event.ENTER_FRAME, updateMovement); }
function stopScroll(e:MouseEvent):void { dragging=false; grab.stopDrag(); removeEventListener(Event.ENTER_FRAME, updateMovement); }
function updateMovement(e:Event):void { var frac:Number = (mouseX + 105) /170; var range=960; if (range<0) { grab.x = mouseX+ (range * frac) * 0.2;
} }
-
right, realised that wasnt really helpful optimized the code so it all works except for the inertia:
Actionscript Code:
grab.addEventListener(MouseEvent.MOUSE_DOWN, startScroll); stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
var restriction = grab.width - stage.stageWidth; var lastMouseX:Number = 0; var dragging:Boolean;
function startScroll(e:MouseEvent):void { dragging=true;
grab.startDrag(false, new Rectangle(0, 100, -restriction, 0)); addEventListener(Event.ENTER_FRAME, updateMovement); }
function stopScroll(e:MouseEvent):void { dragging=false; grab.stopDrag(); removeEventListener(Event.ENTER_FRAME, updateMovement); }
function updateMovement(e:Event):void { var frac:Number = (grab.x + restriction) /grab.width;//where the scroll-handle is. (y-topY)/height var range=stage.stageWidth-grab.width;//how much the text needs to scroll. windowHeight - textheight if (range<0) { grab.x = grab.x + ((range * frac) - 20 - grab.x) * 0.03; //trace(textMc.y, range, frac); } }
if you comment out "updateMovement" it all works, but if someone could give me a hand with the inertia that would be great please
-
Code:
grab.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
var restriction:Number=stage.stageWidth-grab.width;
var dragging:Boolean;
function startScroll(e:MouseEvent):void {
dragging=true;
grab.removeEventListener(MouseEvent.MOUSE_DOWN, startScroll);
grab.addEventListener(Event.ENTER_FRAME, updateMovement);
}
function stopScroll(e:MouseEvent):void {
dragging=false;
grab.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
grab.removeEventListener(Event.ENTER_FRAME, updateMovement);
}
function updateMovement(e:Event):void {
grab.x += 0.25*((Math.max(Math.min(restriction,this.mouseX),0)) - grab.x);
}
-
wow, thanks ALOT
-
sorry one more thing, the code you wrote seems to make the "grab" movieclip scroll if it's smaller than the stage size, stopping at the edges of the stage.
what i was aiming for was for the clip to be bigger than the stage and stop scrolling left when the right edge hits the right edge of the stage, and left edge to stop at the left edge of the stage (if that makes sense?)
I've tried modding the code but unfortunately can't seem to get it to work as i don't fully understand how it's working
-
Code:
grab.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
var minpos:Number;
var maxpos:Number;
var dragging:Boolean;
var baseX:Number;
function startScroll(e:MouseEvent):void {
dragging=true;
baseX=grab.x+grab.mouseX;
minpos=stage.stageWidth-grab.width;
grab.removeEventListener(MouseEvent.MOUSE_DOWN, startScroll);
grab.addEventListener(Event.ENTER_FRAME, updateMovement);
}
function stopScroll(e:MouseEvent):void {
dragging=false;
grab.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
grab.removeEventListener(Event.ENTER_FRAME, updateMovement);
}
function updateMovement(e:Event):void {
grab.x += 0.25*(this.mouseX - baseX);
grab.x=Math.min(Math.max(minpos,grab.x),0);
}
-
sorry to keep bothering you (thanks for ALWAYS helping me by the way) but that's still not what im looking for it's more like the code you posted before, i've changed it a little bit:
Actionscript Code:
grab.addEventListener(MouseEvent.MOUSE_DOWN, startScroll); stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll); var restriction:Number=grab.width-stage.stageWidth; var dragging:Boolean;
function startScroll(e:MouseEvent):void { dragging=true; grab.removeEventListener(MouseEvent.MOUSE_DOWN, startScroll); grab.addEventListener(Event.ENTER_FRAME, updateMovement); } function stopScroll(e:MouseEvent):void { dragging=false; grab.addEventListener(MouseEvent.MOUSE_DOWN, startScroll); grab.removeEventListener(Event.ENTER_FRAME, updateMovement); } function updateMovement(e:Event):void { grab.x += 0.1*((Math.max(Math.min(stage.stageWidth,this.mouseX),0)) - grab.x); }
it works great but i want it to move from where it currently is to the next position, minus the grab.mouseX if that makes sense? so it doesn't keep tweening the x position of the "grab" right up to the mouseX?
this guy's got something similar (not copying by the way, was trying to do this before i even saw his site )
http://www.kiluka.ch/
Thanks again by the way
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|