Skip to main content
Andee NG
Andee NG
Known Participant
August 16, 2024
Question

Adding a scrollbar in Adobe Animate

  • August 16, 2024
  • 2 replies
  • 1155 views

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?

    This topic has been closed for replies.

    2 replies

    Andee NG
    Andee NGAuthor
    Known Participant
    August 16, 2024

    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
    kglad
    Adobe Expert
    August 16, 2024

    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
    Andee NGAuthor
    Known Participant
    August 16, 2024

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

    kglad
    kglad
    Adobe Expert
    August 16, 2024
    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ésar17023019
    JoãoCésar17023019
    Inspiring
    August 16, 2024

    This will live outside the canvas.

     

    I think the OP wants a CreateJS based scrollbar.

    Andee NG
    Andee NGAuthor
    Known Participant
    August 16, 2024

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices