|
User Details |
message
|
|
Ritte
post date:
2010-11-14 15:34:38
|
|
I using the “Scroll Area AS3” and I want to make navigation (for touch-screen) just like an smart phone (Android or IPhone): When you drag the position more than half the way of the screen it’s snaps to the next object and if you have enough speed it’s also snaps to the next.rnDo you have a sample-code for that?rnrnOtherwise I wonder if there is an event for MouseUp for the “Scroll Area AS3”? rnCan I get the speed of the scroll when i release the button?rnrnRegardsrn/O
|
|
|
Andrei Rinciog [Extend Studio]
post date:
2010-11-15 04:10:30
|
Hello,
I will have to look a little deeper into this. I will come back with an answer later today. This might be a good idea for a tutorial as well.
Regards,
Andrei Rinciog
|
|
|
Ritte
post date:
2010-11-15 04:53:35
|
|
Yes, that would be great!!!
|
|
|
Andrei Rinciog [Extend Studio]
post date:
2010-11-15 08:53:28
|
Hello,
Here's some code that will give you the scroll behavior you want:
var okToMove : Boolean;
var mouseIsUp : Boolean;
var defaultWidth : Number = 400;
function mouseUpHandler(e:MouseEvent) : void {
mouseIsUp = true;
}
function mouseDownHandler(e:MouseEvent) : void {
mouseIsUp = false;
okToMove = true;
}
function hscrollHandler(e:Event) : void {
if(mouseIsUp && okToMove) {
okToMove = false;
var x : Number = - scrollarea.xPos;
var scrollTo : Number = 0;
scrollTo = defaultWidth * Math.round(x / defaultWidth);
scrollarea.scrollTo("Horizontal",scrollTo);
}
}
this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
scrollarea.addEventListener("onHScrollStop", hscrollHandler);
I've used the "xPos" public property of the Scroll Area to get the current position of the content. I get the current position each time the mouse switches to "Up" state. Using it, I calculate where the scroll area needs to move after the mouse is released.
This seems to work the way you want. Tell me if you have questions.
Regards,
Andrei Rinciog
|
|
|
Ritte
post date:
2010-11-15 09:37:25
|
Great!
I have 2 questions:
- When I move the area and stop the mouse pointer, the area still moves.
Is that the “continuous scroll”-effect? How can I turn that off?
I want the area to follow the mouse pointer exactly.
- Now the scrollTo-function starts on the “onHScrollStop”-event. I have to wait for the area to stop moving.
I want the scrollTo-function to start when I release the mouse-button.
Can I interrupt the movement and trigger the scrollTo-function while the area is still moving?
|
|
|
Andrei Rinciog [Extend Studio]
post date:
2010-11-15 10:19:04
|
Hello,
I think you are referring to the "smooth scrolling". But you shouldn't disable it. I modified the script I posted above and following your suggestions now the action is more fluid.
Here's the new code (much simpler and straigh forward now):
import flash.events.MouseEvent;
var defaultWidth : Number = 400;
function mouseUpHandler(e:MouseEvent) : void {
scrollarea.stopScrolling();
var x : Number = - scrollarea.xPos;
var scrollTo : Number = 0;
scrollTo = defaultWidth * Math.round(x / defaultWidth);
scrollarea.scrollTo("Horizontal",scrollTo);
}
this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
Probably you should make a switch and set the page to switch when you move about 1/4 of the current page. The way it is right now it seems to return to its position too often.
Regards,
Andrei Rinciog
|
|
|
Ritte
post date:
2010-11-15 15:02:50
|
Yes, that’s better! Thanks!
It is not the “smoth scrolling”. It is when you drag the page and stop the movement and the mouse button is still down, the page keep on scrolling.
It is ok the way it is but I wonder if there´s a way to disabled it?
|
|
|
Andrei Rinciog [Extend Studio]
post date:
2010-11-16 04:10:34
|
Hello,
I'm afraid you can't remove that easily. We could try a timer maybe that disables the scrolling after some time after the mouse was clicked. But I don't think it will have the right behavior.
Regards,
Andrei Rinciog
|
|
|
Ritte
post date:
2010-11-16 11:25:52
|
Ok.
Can I disable the scrolling when the mouse pointer stops moving?
Events for “mouse stops moving” and “mouse starts moving”, do they exist?
Then maybe I can combine those events with Mouse_up/Mouse_down events?
|
|
|
Andrei Rinciog [Extend Studio]
post date:
2010-11-17 04:07:19
|
Hello,
There aren't events for "mouse stops moving" or "mouse starts moving". Only thing that you might use from the MouseEvents class is the "MOUSE_MOVE" class. This event is dispatched every time the mouse moves. However, you might not be able to find out when the mouse stops moving. You simply won't receive a "MOUSE_MOVE" event.
The only way I think it can be done is by using a timer that checks if a MOUSE_MOVE event is dispatched once every 500 miliseconds or something like that. If it no event is received in the last 500 miliseconds probably the mouse has stopped.
Do you want to try something like that? Need help with it?
Regards,
Andrei Rinciog
|
|
|
Ritte
post date:
2010-11-17 07:19:16
|
Yes, that would be great!
Another thing: When I drag the mouse, with the mouse button down and the movie clip is scrolling. If I move the mouse outside the movie clip and release the button, the movie clip stops scrolling but it doesn´t “snap” to the snap-position.
|
|
|
Andrei Rinciog [Extend Studio]
post date:
2010-11-22 07:52:27
|
Hello again,
Sorry it took a little longer.
I've modified the script so now it knows when the mouse gets outside. To do this I had to put the scrollarea and its target inside a container movieclip. I gave the instance name "container" to the new movieclip.
Also, I created the script for the timer that checks if the mouse has been moved in the last 0.5 seconds. If it moved in the previous 0.5 seconds but has not moved in the last 0.5 seconds, it will call the function to change the page.
Here's the script:
import flash.events.MouseEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;
var checkMoveTimer : Timer = new Timer(500);
var defaultWidth : Number = 400;
var mouseMoved : Number = -1; // -1 means the mouse hasn't moved for more than 0.5 seconds
// 0 means that the mouse has just stopped moving
// 1 means the mouse has just moved
checkMoveTimer.addEventListener(TimerEvent.TIMER, timerFunction);
checkMoveTimer.start();
function timerFunction(e:TimerEvent) : void {
if(mouseMoved == 1) {
mouseMoved = 0;
} else {
if(mouseMoved == 0) {
container.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP));
scrollThePage();
}
mouseMoved = -1;
}
}
function mouseUpHandler(e:MouseEvent) : void {
scrollThePage();
}
function mouseMoveHandler(e:MouseEvent) : void {
mouseMoved = 1;
}
function mouseOutHandler(e:MouseEvent) : void {
scrollThePage();
}
container.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
container.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
container.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
function scrollThePage() : void {
container.scrollarea.stopScrolling();
var x : Number = - container.scrollarea.xPos;
var scrollTo : Number = 0;
scrollTo = defaultWidth * Math.round(x / defaultWidth);
container.scrollarea.scrollTo("Horizontal",scrollTo);
}
Tell me if you have any questions or want to change something.
Regards,
Andrei Rinciog
|
|
|
post date:
2011-05-30 01:03:53
|
will you be making a tutorial of this with sample files soon ?
i tried this but can't make it work. and it was what i was looking for.
|
|
|
post date:
2011-05-30 01:07:05
|
|
also, will this work with the touchscroll ?
|
|
|
Andrei Rinciog [Extend Studio]
post date:
2011-05-31 08:30:12
|
Hello,
Theoretically the touchevent should be transmitted to the Flash movie as a mouse event. So it should work with touchscreen as well.
If you want you can send me a zip archive with the code and the FLA by email and I can take a look at why it's not functioning.
Regards,
Andrei Rinciog
|
|
|
Andrei Rinciog [Extend Studio]
post date:
2011-05-31 08:30:34
|
|
You can send the zip archive by email to support at extendstudio.com
|
|
