2 Replies Latest reply on Feb 16, 2014 4:57 PM by schnate124

    Edge animate java help...

    schnate124

      Hey all, 

       

      Firstly, I'm a designer, not a developer, so bear with the noobness of this post.

       

      I have a little animated banner and I'd like to be able to input some keyboard control of the logo as if it were a game sprite. The symbol is called "invader" and all I want is simple left/right arrow controll to move the symbol. Ultimately I'd like the translation to run a little loop on that symbols timeline too, but right now I'd settle for just getting it to move.

       

      I figured out how to add keyboard input, added to the stage:

       

      if (e.which == 37) {

                // do something

      }

       

       

      This works if that something is another EA snipet like get url or whatever. My problem is I have no idea what to do about the position var. Do I add some variables on the symbol or add them to the stage as well?

       

      All the tuts I can find are either too off topic or too complex for me to adapt. Anyone have time to give me a quick lesson? (it's not important so please don't waste too much time with it...)

       

      Cheers.

        • 1. Re: Edge animate java help...
          heathrowe Most Valuable Participant

          I am not sure what you meanu by the second portion 'translation to run a loop', but for the first portion something like the following in the compositionReady event handler will move the symbol

           

          ///////////// copy into compositionReday Event Handler///////////

           

          $(document).bind('keydown', function(e) {

              var mysymbol = sym.$("invader");

              if (e.keyCode == 37) {  // left arrow

                  mysymbol.css("left", "-=15");

              }

              if (e.keyCode == 38) {  // up arrow

                  mysymbol.css("top", "-=15");

              }

              if (e.keyCode == 39) {  // right arrow

                  mysymbol.css("left", "+=15");

              }

              if (e.keyCode == 40) {  //down arrow

                  mysymbol.css("top", "+=15");

              }

          }).bind('keyup', function() {

              sym.$("invader").stop();

          });

          /////////// End Copy ///////////////////////////////////

           

          The above uses a keyup and keydown event : on keydown move 15 depending on the arrow of choice; then stop() when the keyup is triggered.

           

          hth

          Darrell

          1 person found this helpful
          • 2. Re: Edge animate java help...
            schnate124 Level 1

            Thank you so much. I knew it was something simple, I'm just not Java savvy at all. Let me know if you have a blog or site to promote. I'll get you the credit you deserve.

             

            You can have a look here: http://www.archpig.com/temp.html (I removed the up/down)

             

            So, just for my own clarification, this tells the Keydown functions to bind to the symbol and the keys control the position via the symbols css?

             

            As far as the second part, 'translation to run a loop':

             

            By translation I just mean translating the position - so when the the symbol is in motion it runs the timeline from a label or something. Just two simple sprite states, like a basic sprite sheet walk motion or whatever... Just wanted the arms or legs to wiggle a bit when you move the symbol.

             

            Ultimately I'd love for the space bar the shoot and destroy the text underneath (it's build of 5px x 5px "pixles" just like the invader"  and then proceed to a victory animation. Just a cheezy little easter egg game for a header. I'm forever designing things that are way over my own head from a Java stand point.

             

            Cheers,

             

            -Nate