• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Explorer ,
Nov 23, 2017 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.

Views

1.6K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 23, 2017 Nov 23, 2017

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

}

Votes

Translate

Translate
Community Expert ,
Nov 23, 2017 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

Votes

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
community guidelines
Explorer ,
Nov 23, 2017 Nov 23, 2017

Copy link to clipboard

Copied

Sorry i miss the line,

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

Votes

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
community guidelines
Explorer ,
Nov 23, 2017 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.

Votes

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
community guidelines
Community Expert ,
Nov 23, 2017 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

}

Votes

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
community guidelines
Explorer ,
Nov 24, 2017 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.

Votes

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
community guidelines
Community Expert ,
Nov 24, 2017 Nov 24, 2017

Copy link to clipboard

Copied

you're welcome.

Votes

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
community guidelines
Community Beginner ,
Jul 20, 2020 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?

Votes

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
community guidelines
Community Expert ,
Jul 20, 2020 Jul 20, 2020

Copy link to clipboard

Copied

experiment and try it.

Votes

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
community guidelines
Community Beginner ,
Jul 22, 2020 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

Votes

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
community guidelines
Community Expert ,
Jul 23, 2020 Jul 23, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Beginner ,
Jul 23, 2020 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.

Votes

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
community guidelines
Community Expert ,
Jul 24, 2020 Jul 24, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines