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.
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
}
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
Copy link to clipboard
Copied
Sorry i miss the line,
this.myMovieClip.addEventListener("mousedown", startDrag);
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.
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
}
Copy link to clipboard
Copied
Thanks Kglad, for your valuable assistance.
This code worked. I just added a line to position myMovieClip.
Copy link to clipboard
Copied
you're welcome.
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?
Copy link to clipboard
Copied
experiment and try it.
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);
}
Copy link to clipboard
Copied
what is it that doesn't work the way you want?
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.
Copy link to clipboard
Copied
i would need to download your files to understand the problem. maybe someone else can help you.