Skip to main content
Participant
February 25, 2020
Question

HTML5 Canvas "scrolling" on a touch screen?

  • February 25, 2020
  • 1 reply
  • 1621 views

I'm pretty new to working in the HTML5 Canvas - bear with me!

I've been asked to develop a timeline in AA that will be displayed on a touch screen. The user should be able to "scroll" through the horizontal timeline by dragging their finger. When they tap on any given year on that timeline, an element with more info pops up.

 

The leap from "click" to "tap" was easy enough - but I'm having some difficulty getting the scroll/swipe to behave the way I need it to. Can anyone point me in the right direction of how to program the scrolling feature? 

This topic has been closed for replies.

1 reply

Community Expert
February 25, 2020

Can we see your code?

Participant
February 28, 2020

Sure - Although I haven't even tried to code it the way described above, I don't even know where to start with touch screen capability.
For now, I followed a tutorial to get the timeline to scroll according to your cursor location. Works for a proof of concept, but not what I need ultimately.

 

createjs.Touch.enable(stage);
stage.enableMouseOver(1);

stage.on("stagemousemove", function(evt) {

       _xmouse = evt.stageX; //stage global coordinate

       _ymouse = evt.stageY; //stage global coordinate

      _screenX = evt.stageX / stage.scaleX; // html coordinate

       _screenY = evt.stageY / stage.scaleY; // html coordiante

    });

var root = this;
var midpoint = this.stage.canvas.width / 2;
var state = 0;
var timeRestX = this.timeline1.x;

function onMouseMove(e) {
		var newX = 0;
		if (e.stageX < midpoint) {
			newX = (midpoint - e.stageX) / 20;
		} else if (e.stageX > midpoint) {
			newX = (e.stageX - midpoint) * 28;
			newX *= -1;
		}
		createjs.Tween.get(root.timeline1, {override: true}).to({x: timeRestX + newX}, 1000, createjs.Ease.quintOut);
		createjs.Tween.get(root.timeline1, {override: true}).to({x: timeRestX + (newX / 2)}, 1000, createjs.Ease.quintOut);
};

function init() {
    stage.addEventListener("stagemousemove", onMouseMove);
}
 


root.timeline1.TL96.on('click', function(){
root.movieClip_1.visible = true;
root.darken1.visible = true;
});

root.timeline1.TL96b.on('click', function(){
root.movieClip_1.visible = true;
root.darken1.visible = true;
});

root.movieClip_1.on('click', function(){
root.movieClip_1.visible = false;
	root.darken1.visible = false;
});

init();