Highlighted

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

Explorer ,
Nov 23, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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

}

Views

512

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Nov 23, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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

}

Views

513

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 23, 2017 0
Adobe Community Professional ,
Nov 23, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 0
Explorer ,
Nov 23, 2017

Copy link to clipboard

Copied

Sorry i miss the line,

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 0
Explorer ,
Nov 23, 2017

Copy link to clipboard

Copied

and to be precise in my question the scroll must me through mouse wheel and only for this myMovieClip object.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 0
Adobe Community Professional ,
Nov 23, 2017

Copy link to clipboard

Copied

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

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 0
Explorer ,
Nov 24, 2017

Copy link to clipboard

Copied

Thanks Kglad, for your valuable assistance.

This code worked. I just added a line to  position myMovieClip.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2017 0
Adobe Community Professional ,
Nov 24, 2017

Copy link to clipboard

Copied

you're welcome.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2017 0
Community Beginner ,
Jul 20, 2020

Copy link to clipboard

Copied

instead of "document.getElementById('canvas')" can I use hit area instance name to scroll once i will rollver the hit area and use the mouse wheel?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 20, 2020 0
Adobe Community Professional ,
Jul 20, 2020

Copy link to clipboard

Copied

experiment and try it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 20, 2020 0
Community Beginner ,
Jul 22, 2020

Copy link to clipboard

Copied

I did it but I know its not correct. I have 10 frame inside my movieclip and I am calling them using mousewheel in below example but I want to call only frames inside movieclip by using mousewheel and don't want to scroll entire page once I will mouseover on the hit area and scroll. any advice?

 

var f = this;
f.s.stop();
stage.enableMouseOver();
f.g.addEventListener("mouseover",h);
f.g.addEventListener("mouseout",j);
function h(){
document.getElementById('canvas').addEventListener('mousewheel',k);
}
function k(e)
{

if (e.wheelDelta < 0) {
if (f.s.currentFrame == 9) {
f.s.gotoAndStop(9);
} else {
f.s.gotoAndStop(f.s.currentFrame + 1);
}
}
if (e.wheelDelta >= 0) {
f.s.gotoAndStop(f.s.currentFrame - 1);
}
};

function j(){
document.getElementById('canvas').removeEventListener('mousewheel',k);
}

Captureqq.JPG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2020 0
Adobe Community Professional ,
Jul 23, 2020

Copy link to clipboard

Copied

what is it that doesn't work the way you want?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2020 0
Community Beginner ,
Jul 23, 2020

Copy link to clipboard

Copied

on web page there are lots of data already so this web page has default page scroll bar and now there will be a 800x600 window where I wanted to place an interactivity which can allow user to scroll for that perticular window to see more graphical content but in order to do that I need to restrict web page scroll bar function or disable at that time when my mouse hover on the 800x600 window.(hit area)

 

currently I am not able to restrist the main scroll bar as shown in above or not find the proper way to doing this, my symbol is inside 800x600 window and it moves with the page scroll bar at the same time.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2020 0
kglad LATEST
Adobe Community Professional ,
Jul 24, 2020

Copy link to clipboard

Copied

i would need to download your files to understand the problem.  maybe someone else can help you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2020 0