1 Reply Latest reply on Jul 8, 2013 8:51 AM by resdesign

    Type in text on a page, use that text in an animation

    Matt Lee Andrews Level 1

      Hi

       

      I've been reading up and starting to play with Edge Animate CC, but I can't write any of the code myself. (I used to be a programmer so I can "read" it, but I haven't learnt any languages in years.) As well as my video job I am also the Director of a children's theatre company and I have an interesting idea which I hope Edge Animate can do...

       

      Our show is improvised from children's ideas, they help us write a book. We'd love to have an animation of a book on screen which has the title we've been given by the audience. We don't have time to add the title to an After Effects animation and render it out, but I did wonder if we could make the animation in Edge Animate and play it live in HTML5. Ideally we'd have a text box, our live tech would type the name into this, and then an animated webpage would appear which uses the text they've typed in.

       

      So how do we do this? Need to store input from a text field, hide the text field after (so our tech can turn on our live screen without showing it), then play an animation which includes the words stored from the input.

       

      I have no idea if this is possible or where to start! Does anyone know or want to experiment with the basics of it?

       

      Thanks

       

      Matt Andrews

        • 1. Re: Type in text on a page, use that text in an animation
          resdesign Adobe Community Professional & MVP

          Yes, I believe you could do this. You can store the value of the input text and then load it where you want in the composition.

           

          Below is how an input field works:

           

          var message = sym.$("message");

           

          inputMessage = $('<textarea />').attr({'type':'textarea','rows':'10', 'cols': '25','value':'', 'id':'message'});

          inputMessage .css ('font-size', 14);

          inputMessage .css ('background-color', '#0a81fb');

          inputMessage .css ('box-shadow', '#0a81fb');

          inputMessage .css ('width', 350);

          //inputMessage .css ('height', 200);

          inputMessage .appendTo(message);

           

          Below is how you get the value:

           

           

          var messageInfo = inputMessage.attr("value");

           

          Then you could put it in another text field somewhere:

           

          sym.$('anotherText').html(messageInfo);

           

           

          Or something similar.

          1 person found this helpful