I couldn't figure out when the ticks were not moving things, but there were several other things that were wrong. So I fixed the other wrong things and changed the way that the code is working. Here's the FLA:
http://colin.scienceninja.com/beforeafter3.zip
I deleted the three copies of this.stop() in other layers, and just added it to the one script, which I'll show below.
The tweens in the timeline don't want to have any easing in them. The user is moving the mouse, and will do their own easing.
I trimmed some frames at the end, which I think were there so that the tween reached the end, which it wasn't, because it had easing in it.
The main thing I changed was to use mouse down, press move, and press. For those to work on touch screens you have to enable Touch. Doing that does have a drawback in that you can't really test local files, other than from Animate. It should work fine on a server.
Here is the code in the first frame of the 'action' layer. Several parts are hard coded numbers, there's probably a better way to too that:
this.stop();
if (!(window.init==true)) {
createjs.Touch.enable(stage, false, true);
this.cover.addEventListener("mousedown",startpan.bind(this));
window.min = 0;
window.max = 190
window.movescale = 336 / (window.max-window.min);
window.init = true;
}
function startpan(){
this.cover.addEventListener("pressmove",movepan.bind(this));
this.cover.addEventListener("pressup",stoppan.bind(this));
}
function movepan(e) {
var mp = Math.round((e.stageX / stage.scaleX)/window.movescale);
var f = Math.max(window.min,Math.min(window.max,mp));
this.gotoAndStop(f);
}
function stoppan(e) {
this.cover.removeEventListener("pressmove",movepan);
this.cover.removeEventListener("pressup",stoppan);
}
It may be bad practices, but I'm finding that using window variables is very handy. To avoid having multiple mousedown listeners I use 'window.init' to check if I have set things up already.
'cover' is your border, but changed into a movieclip, just for me to add the listeners to it. In the end it wasn't needed, but I left it there anyway.
'window.min' and 'window.max' are the frame numbers for the first and last frames of the reveal pan.
You want the movement of the mouse across the stage to end up controlling the min to max frame range. I store that scaling in the 'window.movescale' variable. '336' is the width of your stage.
'startpan' and 'stoppan' just set up and remove the listeners that are needed. Everything clever happens in 'move pan'!
The 'e' in movepan includes the current stageX position of the mouse, or touch. But, the real position it is gets affected by the stage scaleX, so I divide the claimed mouse position by the stage scaleX, and that gives me where the mouse really is. You should find that you can do any changes in the publish settings to make the stage fill the browser window, and still it should work.
The /window.movescale part will take the true mouseX and will make it go to the right frame in the range.
The Math.max, Math.min part is to make sure you don't go to a frame outside of the range. If the rest of the arithmetic is correct, that shouldn't be needed, but I found that it was possible to a frame past the end. Changing 'var mp = Math.round(' to 'var mp = Math.floor(' does take care of that, but I would rather use the max/min line for peace of mind.
Let me know if any of that made sense!
1 Correct answer
7
Replies
AdChoices