HTML5 Canvas "scrolling" on a touch screen?

[valeriet68739780]

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? 

[Nicktendo28]

Can we see your code?

[valeriet68739780]

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();