5 Replies Latest reply on Feb 3, 2014 4:45 AM by Bobby Bol

    Centering Multiple Objects on Stage

    Bobby Bol Level 1

      Hi all,

       

      So I'm trying to create a full webpage, just in Edge Animate.

      In this project, I'm having a number of different elements, some are symbols with animations inside, some are pictures, some just shapes and text. I want these seperate elements to all center on the main stage.

      I'm using the following code to center an object:

       

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

       

         margin : '0 auto',

       

         position: 'relative'

       

      });

       

       

      This works beautifully. But when I try to center more objects on stage using the same code over and over again, things go awry. So what I have in compositionReady is:

       

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

       

         margin : '0 auto',

       

         position: 'relative'

       

      });

       

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

       

         margin : '0 auto',

       

         position: 'relative'

       

      });

       

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

       

         margin : '0 auto',

       

         position: 'relative'

       

      });

       

      etc...

      When I keep repeating the code, each time changing the Object name, the first Object centers but the rest doesn't.

       

      So far I did this work-around where I make 'empty' symbols - one symbol for each object I want centered. I make this symbol 100% width and then place the object inside it, using the same code written above in the creationComplete section.

       

      I'm simply wondering if there's a better way to do this, i.e. slightly better practice.

       

      Thanks in advance!

        • 1. Re: Centering Multiple Objects on Stage
          heathrowe Most Valuable Participant

          Before delving into you code case, are you using ver 3 that just came out last week?

          It now has a Center Stage option built-in.

           

          Darrell

          • 2. Re: Centering Multiple Objects on Stage
            Bobby Bol Level 1

            Yeah I've just updated to ver 3 today - in fact that's the main reason I'm here asking questions.

             

            Since updating and subsequently opening the files I was working on in ver 2, there's a lot of things (in my project) that don't function properly anymore. I expect to be asking more questions on several other subjects soon.

             

            In any case: the Center Stage option doesn't help me very much. Yes it centers your stage. But what I want is for some elements to scale 100% browser width, and other elements to center on the stage. Can't have both with just the Center Stage option.

             

            Thanks,

            Bob

            • 3. Re: Centering Multiple Objects on Stage
              jbowden Adobe Employee

              Hey Bobby,

               

              Check out Responsive Scaling, right under the Center Stage checkbox...using both, I think you'd get what you want.

               

               

              Bobby Bol wrote:

               

              Since updating and subsequently opening the files I was working on in ver 2, there's a lot of things (in my project) that don't function properly anymore.

               

               

              What kind of problems are you seeing?

               

              Thanks,

              Joe

              1 person found this helpful
              • 4. Re: Centering Multiple Objects on Stage
                Bobby Bol Level 1

                Hi Joe,

                 

                Thanks for the response. I've been playing around with center stage and responsive scaling, but that doesn't really get me all that far.

                 

                What I need is for all the different elements on the background to have a fixed height and 100% width. So all the background elements just fill the browser window from left to right.

                 

                Then I want the content to sit in the horizontal center. Basically a centered 960px content box.

                 

                Since the content is split up in several different elements, I need to use the center css code a number of times, referring to different elements.

                 

                But if I just copy-past the code and change the name to refer to different elements, the code works on the first element but not the others.

                 

                Thanks,

                Bob

                • 5. Re: Centering Multiple Objects on Stage
                  Bobby Bol Level 1

                  What kind of problems are you seeing?

                   

                  Thanks,

                  Joe

                   

                  I'll try to list them briefly below (the main problems seem to occur with Symbols I've created, and the content inside of them):

                   

                  Percentage width for Symbols

                  I had a number of Symbols in my project with a width of 100%. Going from ver2 to ver3, these Symbols had changed their behavior. Some now had scroll as an overflow function, some had the pictures inside of them deleted, and some had different settings for their scaling/resizing properties.

                   

                  I've noticed that in Edge ver3, the settings for setting a Symbols width to percentage have changed. If you create a Symbol, you can't set it's width to 100% anymore. You have to go inside the Symbol, change its instance to Resize, and then you can work with it as before.

                   

                  As all my old ver2 Symbols were stuck on instance: Scale, I suspect the problems lies somewhere over there.

                   

                  Timeline Playback

                  I had some codes running for parallax scrolling.

                  1. To basically tie the main Stage timeline to the scollbar.

                  2. To play specific animations upon reaching a specific vertical pixel value.

                   

                  This worked fine in ver2, but in ver3 the codes started interfering. Or rather, when scolling, Code1 started to play the (nested) animations that were supposed to only play when a certain pixel value was reached.

                  I had already turned off Autoplay everywhere, and put stop(); commands in all the right places, but all the sudden Code1 was interfering with Code2.

                   

                  Now what I found is that there's another function controlling the timeline, i.e. Playback. I had to change this to stop at: 00:00:000 at the very first frame in order to stop the animations from playing automatically.

                   

                  --

                   

                  All in all I had a lot of problems going from ver2 to ver3, which all appeared different in nature, but after doing a bit of troubleshooting it boiled down to the two topics mentioned above.

                   

                  What I'm after now is a bit of 'best practice', for example on timeline controls. I like it best to control it with code, but there's also Autoplay and Playback functions which seem a bit double-up to me, and apparently causing a little interference when you're trying to do very specific things.

                   

                  The main, on topic question is also a question of 'best practice' I guess.

                   

                  In any case, thanks so much for responding already, and hope I clarified what my problems were going from ver2 to ver3.

                  Bob