-
Continuous Side Scrolling Gallery
Hi peeps,
I'm trying to create the look at the following website:
http://www.johnwrightphoto.com/
Once it's loaded click the screen and at the bottom left go to portfolios. Click on one of them and you'll see a slow continuous side scrolling gallery. I've got everything working apart from when I mouse off it continues at the speed at which I left it. I would like it to slow to a default speed and continue scrolling as in the example I've given.
I should mention I followed tutorial here:
http://tutorials.flashmymind.com/200...#comment-32816
It's been a while since I dabbled with Flash and especially AS3! Here is the code I'm using so far. What do I need to add to achieve what I'm after?
Code:
import gs.*;
var centerX:Number = stage.stageWidth / 2;
var galleryWidth:Number = images.width;
var speed:Number = 0;
addEventListener(Event.ENTER_FRAME, move);
function move(e:Event):void {
speed = -(0.01 * (mouseX - centerX));
images.x+=speed;
if (images.x>0) {
images.x= (-galleryWidth/2);
}
if (images.x<(-galleryWidth/2)) {
images.x=0;
}
}
Any help would be much appreciated, thanks!
-
Any ideas here please guys?
I'm thinking it's probably another "if statement" within my move function?
Or is it a Mouse Event?
Basically just want the horizontal scrolling images to start at a slow speed from right to left when loaded. I've got it so when I mouse over the left or right it scrolls on a loop at a faster speed. Then I just want it so when I mouse off the scrolling image bar it goes back to it's original slow speed going from right to left.
Thanks!
-
Code:
var speedval:Number=0.01;
images.addEventListener(MouseEvent.MOUSE_OVER, goFast);
images.addEventListener(MouseEvent.MOUSE_OUT, goSlow);
function goFast(e:Event):void {
speedval=0.1;
}
function goSlow(e:Event):void {
speedval=0.01;
}
function move(e:Event):void {
speed = -(speedval * (mouseX - centerX));
// rest of code is the same...
-
Ah thanks a lot dawsonk! Works like a charm!
I thought it was probably a new MouseEvent but I'm so new to this AS3 and AS in general that I don't know what to add.
If you don't mind, what would I add to that new code so that when reverting to its previous speed it isn't so abrupt? I could be wrong in saying this but I think I might be talking about an inertia effect?
-
Code:
import fl.transitions.Tween;
import fl.transitions.easing.*;
var centerX:Number=stage.stageWidth/2;
var galleryWidth:Number=images.width;
var speed:Number=0;
images.addEventListener(Event.ENTER_FRAME, move);
var obj:Object = new Object();
obj.easeval=0.01;
var myTween:Tween=new Tween(obj,"easeval",Strong.easeOut,obj.easeval,0.01,10,true);
images.addEventListener(MouseEvent.MOUSE_OVER, goFast);
images.addEventListener(MouseEvent.MOUSE_OUT, goSlow);
function goFast(e:Event):void {
myTween.continueTo(0.1, 10)
}
function goSlow(e:Event):void {
myTween.continueTo(0.01, 10)
}
function move(e:Event):void {
speed = -(obj.easeval * (mouseX - centerX));
images.x+=speed;
if (images.x>0) {
images.x= (0-galleryWidth/2);
}
if (images.x<(0-galleryWidth/2)) {
images.x=0;
}
}
-
Awesome, works perfectly!
I just changed a few of the values for speed and the easing and it's working exactly how I wanted it.
Thanks so much!
-
Any idea how I can make this work with any resolution?
I made this http://www.dominicchapman.co.uk/infinitescroll.html but firstly, it scrolls way too fast and secondly, unless the users resolution is below 1024px in width, when scrolling left a glitch occurs when the sea gull photo comes onto the screen..
Any fixes? Thanks.
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
|