10 Replies Latest reply on Oct 1, 2012 1:53 PM by elainecc

    How do I move a symbol from code?

    $(sean)

      I'm actually trying to centre and scale a symbol, while maintaining aspect ratio, such that the width fills the stage, but that only seems to be possible for background images (width:100%, height:auto).

       

      I created a symbol (with about 6 divs (rectangles and text) in it) on the stage and names it 'content'. The stage is 100% wide and 100% high. On window.resize, I set content scale thus -

       

      var stageWidth = $(window).width();

      var contentWidth = sym.getSymbol("content").getSymbolElement().width();

      var m = stageWidth / contentWidth;

      sym.getSymbol("content").getSymbolElement().css("-webkit-transform", "scale(" + m + ", " + m + ")");

       

      It scales fine, but it scales about a weird point making the symbol appear to move as the window resizes. I want it to remain at the left hand side (filling the viewport). I couldn't work out how to make it do that in the interface, so I started to attack it with code

       

      console.log("before: " + sym.getSymbol("content").getSymbolElement().position().left);

      sym.getSymbol("content").getSymbolElement().css("position", "relative");

      sym.getSymbol("content").getSymbolElement().css("top", "0px");//actually needs to be -(half of (content height - stage height))

      sym.getSymbol("content").getSymbolElement().css("left", "0px");

      console.log("after: " + sym.getSymbol("content").getSymbolElement().position().left);

       

      But that isn't having any effect at all (other than filling my javascript console). How can I move this thing to the correct position?

        • 1. Re: How do I move a symbol from code?
          TimJaramillo Level 4

          Hi Sean,

           

          Try something like this. Play with the "width" value:

           

          sym.$("content").css({

             width : '870px',

             margin : '0 auto',

             position: 'relative'

          });

           

          Let me know how it goes!
          Tim

          • 2. Re: How do I move a symbol from code?
            $(sean) Level 1

            That changes the width (correctly, if I change '870px' to m + 'px'), but it doesn't help me with the position. Also, it's not scaling the content, it's only clipping it.

            • 3. Re: How do I move a symbol from code?
              $(sean) Level 1

              Guys,

               

              http://files.dubitlimited.com/sean/edge/symbols_start.html

               

              Maybe this will help. It only updates on resize (ie, not just after created) so pull it out into a new window and make it narrow (portrait phone narrow). You should see it resizing its content correctly, but also moving it for some reason.

              • 4. Re: How do I move a symbol from code?
                TimJaramillo Level 4

                Hey Sean, the code I gave you is indeed just for centering, (this is mostly accomplished by the 'auto' margin prop).

                 

                In terms of setting things up, I'm not sure how much you're doing in Edge properties panel, and how much you're doing through code, but if the tools inside of Edge are not working for your use case, you can leverage the javascript "window.innerWidth" and "window.innerHeight" props to scale through code.

                 

                // set vars

                sym.windowWidth = window.innerWidth;

                sym.windowHeight = window.innerHeight;

                 

                // scale object to fill browser

                sym.$("my_symbol").width( sym.windowWidth);

                sym.$("my_symbol").height( sym.windowHeight);

                 

                // position object at top left corner

                sym.$("my_symbol").css('left', 0);

                sym.$("my_symbol").css('top', 0);

                 

                Let us know how it goes.

                • 5. Re: How do I move a symbol from code?
                  $(sean) Level 1

                  Thanks Tim, but changing the width and the height of my_symbol just doesn't reproduce what I'm trying to acheive, or the problems I'm having as a result of that. I need to scale the symbol, not resize it.

                   

                  I just tried you code anyway. my_symbol does stay top left, but actually it stays left if I use your code without the bottom two lines. You need

                   

                  sym.getSymbol("content").getSymbolElement().css("-webkit-transform", "scale(" + m + ", " + m + ")");

                   

                  to cause the wierd positioning issue.

                   

                  Here's a result you might find interesting. I tried this code -

                   

                   

                  var stageWidth = $(window).width();

                  var contentWidth = sym.getSymbol("content").getSymbolElement().width();

                  var m = stageWidth / contentWidth;

                  sym.getSymbol("content").getSymbolElement().css("-webkit-transform", "scale(" + m + ", " + m + ")");

                   

                  sym.$("content").css('left', 0);

                  sym.$("content").css('top', 0);

                   

                  console.log("left: " + sym.getSymbol("content").getSymbolElement().position().left);

                   

                  Then I resized the browser a bit and got this trace

                   

                  left: 45

                  left: 45

                  left: 37

                  left: 37

                  left: 27

                  left: 27

                  left: 20

                  left: 20

                  left: 8

                  left: 8

                  left: 4

                  left: 4

                  left: -2

                  left: -2

                  left: -8

                  left: -8

                  left: -9

                  left: -9

                   

                  So it looks like content's left isn't getting set to 0 at all. Oh dear. -ve numbers are from browser widths greater than 720, which is the width of 'content' before I've filddled with it.

                   

                  I can't even work which point it's scaling about! If I could make that the middle left then I wouldn't have a problem.

                  • 6. Re: How do I move a symbol from code?
                    elainecc Adobe Employee

                    Hi, Sean-

                     

                    Try setting the transform-origin to 0% 0% and then apply your scale.  By default, the transform-origin is set to 50% 50%, which means scale will grow from the center of the object.

                     

                    -Elaine

                    • 7. Re: How do I move a symbol from code?
                      $(sean) Level 1

                      No luck Elaine. My code looks like this -

                       

                      var stageWidth = $(window).width();

                      var contentWidth = sym.getSymbol("content").getSymbolElement().width();

                      var m = stageWidth / contentWidth;

                      sym.getSymbol("content").getSymbolElement().css("transform-origin", "0% 0%");

                      sym.getSymbol("content").getSymbolElement().css("-webkit-transform", "scale(" + m + ", " + m + ")");

                       

                      And the results are exactly the same as my link above.

                      • 8. Re: How do I move a symbol from code?
                        elainecc Adobe Employee

                        Hi, Sean-

                         

                        It's actually -webkit-transform-origin, -moz-transform-origin, -o-transform-origin, -ms-transform-origin.  If you're not creating your symbol dynamically, you can set it in Animate by changing the property in the property panel.

                         

                        Thanks,

                         

                        -Elaine

                        • 9. Re: How do I move a symbol from code?
                          $(sean) Level 1

                          Solutionised. Thanks.

                          • 10. Re: How do I move a symbol from code?
                            elainecc Adobe Employee

                            Awesome - glad it worked!

                             

                            -Elaine