Skip to main content
Known Participant
November 23, 2017
Answered

Scroll-able movieClip on the stage in HTML5 with Adobe Animate

  • November 23, 2017
  • 12 replies
  • 2175 views

Hey guys,

I would like to add vertical scroll functionality to MovieClip object on the stage in HTML5 mode with Adobe Animate.

The stage dimentions are 1366x768 px.

The myMovieClip dimentions are 600x1280 px (Higher than stage!!!)

I was try this code below but unsuccesful.

var stage = new createjs.Stage("canvas");

this.createjs.Ticker.addEventListener("tick", tick)

var offset = new createjs.Point();

function startDrag(event) {

    offset.x = stage.mouseX - exportRoot.myMovieClip.x;

    offset.y = stage.mouseY - exportRoot.myMovieClip.y;

    event.addEventListener("mousemove", doDrag);

}

function doDrag(event) {

    exportRoot.myMovieClip.x = event.stageX - offset.x;

    exportRoot.myMovieClip.y = event.stageY - offset.y;

}

function tick(event) {

    stage.update();

}

So, how can i add a scroll  to movieClip on the stage?

Thanks.

This topic is closed to new replies. Start a new post to keep the conversation going.
Correct answer kglad

if you want to use mousewheel, use:

document.getElementById('canvas').addEventListener('mousewheel',doDrag.bind(this)); document.getElementById('canvas').addEventListener('DOMMouseScroll',doDrag.bind(this));

function doDrag(e){

// scroll based on e.wheelDelta||e.detail and a possible hittest if you want to restrict when mousewheel scrolls your mc

}

12 replies

kglad
Community Expert
Community Expert
November 23, 2017

the first problems i see is nothing is calling startDrag or doDrag.  generally a mousedown would tigger startDrag and startDrag would initiate a ticker that calls doDrag (and initialize some params) and a pressup would stop the ticker

Known Participant
November 23, 2017

Sorry i miss the line,

this.myMovieClip.addEventListener("mousedown", startDrag);