3 Replies Latest reply on Jul 17, 2017 11:23 AM by ClayUUID

    Display a movieclip over an input text-field/dynamic content

    hagenh47357608

      Hello,

       

      i have the following problem:

      I created input text-fields via

       

      var time_base_txt = document.createElement("INPUT");

      time_base_txt.setAttribute("type", "text");

      time_base_txt.setAttribute("id", "time_base");

      time_base_txt.setAttribute("size", "5");

      time_base_txt.style.left = "148px";

      time_base_txt.style.top = "145px";

      time_base_txt.style.textAlign = "right";

      time_base_txt.style.position = "absolute";

      document.body.appendChild(time_base_txt);

       

      Now i have a button that opens an instruction which is a movieclip in animate. When i open (instruction.visible) the instruction, I see the input text-fields on top of the instruction (which i can move & close). I also create dynamic content which i add via stage.addChild onto the canvas. This content is also in front of my instruction movieclip.

       

      My Question is now: How can i bring the instruction on top of the input text-fields and my dynamic content?

       

      I tried to do it like this, but i think there has to be a better working/more beautiful solution.

       

      zIndexManager(time_base_txt);

       

      function zIndexManager(field){

          if(drag_instr.x < field.offsetWidth + parseInt(field.style.left) && drag_instr.y < field.offsetHeight + parseInt(field.style.top)){

              field.style.zIndex = "-1";

          } else {

              field.style.zIndex = "1";

          }

      }

        • 1. Re: Display a movieclip over an input text-field/dynamic content
          ClayUUID Adobe Community Professional

          hagenh47357608  wrote

           

          My Question is now: How can i bring the instruction on top of the input text-fields and my dynamic content?

          You don't. Movieclps exist on the canvas element. Any DOM elements you create float above the canvas element. For something on the canvas to appear on top of an element floating above the canvas is a physical impossibility. If you absolutely must have something appear on top of your input textfield, it'll have to be another DOM element.

           

          Incidentally, you should be adding your elements to the dom overlay container that Animate creates, not the document root. That way they're guaranteed to move and scale with the canvas.

           

          And there's no need for a half-dozen lines of code to style your input textfield. That's what the cssText property is for.

          time_base_txt.style.cssText = "left:148px; top:145px; text-align:right; position:absolute";

          • 2. Re: Display a movieclip over an input text-field/dynamic content
            hagenh47357608 Level 1

            Okay, makes sense. Is there a way to load a movieclip into a DOM element?

             

            Also thanks for the other 2 tips. But how do i add my elements to the dom overlay container?

            On this link it looks like animate creates a div with the id "dom_overlay_container". But there is no div like this in my html document.

            • 3. Re: Display a movieclip over an input text-field/dynamic content
              ClayUUID Adobe Community Professional

              Errr... no, you can't "load" a movieclip into a DOM element. The CreateJS API is built entirely around painting its display list to a single canvas element.

               

              You just do document.getElementById("dom_overlay_container").createElement() instead of document.createElement().

               

              If there is no "dom_overlay_container" in your HTML document, then something is wrong, because Animate creates that by default when it publishes.