Adding a scrollbar in Adobe Animate

[Andee NG]

Hi all, I'm creating a batch of banner ads using Adobe Animate (Canvas), and one of the frames has too much content to fit. As such I'd like to be able to add a scrollbar on the side so that users can scroll down to view the rest of the content. Is this possible, and if so how?

[kglad]

createComponentF("textID", '<div style="height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">As you can see, once there\'s enough text in this box, the box will grow scroll bars... that\'s why we call it a scroll box! You could also place an image into the scroll box.</div>', "left: 10px; top: 10px; width: 300px; height: 195px; ");

function createComponentF(id, html,css) {

    var d = document.createElement("div");

d.display = "inline-block";

    d.id = "containerDIV_"+id;

d.innerHTML = html;

//canvas.parentNode.appendChild(d); // place on top

// the following places canvas on top and component below.  (make stage color transparent)

document.getElementById("animation_container").appendChild(d);

document.getElementById("animation_container").appendChild(canvas);

var component = document.getElementById(id);

component.style.cssText = css;

}

// Remove an element by ID name

removeDivF = function(id) {

    try {

        var elem = document.getElementById("containerDIV_"+id);

        elem.parentNode.removeChild(elem);

    }

    catch(e) {}

}

[JoãoCésar]

This will live outside the canvas.

I think the OP wants a CreateJS based scrollbar.

[Andee NG]

Yeah it has, and yep that's what I'm after -- i've seen one that works with a dynamic text box, but I need it to basically scoll a 300 x 150 image up and down a 300 x 50 window.

[kglad]

you could google what you want. i would charge to create that for you.

[JoãoCésar]

I have a scrollbar code, but I'll have to get it ready before sharing.

[Andee NG]

That would be a massive help, thanks! 🙂

[Andee NG]

Hi there, thanks for the speedy response! Please bear with me as I'm not super au fait with coding in general (I'm used to working in After Effects and Premiere, and it's been a while since I've had to use Flash/Animate!) -- where exactly do I put each of those pieces of code, does it live in the top layer of the timeline? I'm building it as a HTML Canvas if that's of any help

[kglad]

place the code in any layer (though it's good practice) to put code in its own layer in any frame where you want your text/image to appear.

[Andee NG]

Ah -- that's created a new frame that sits over the top of the main canvas/frame.  Is there something I'm overlooking?