3 Replies Latest reply on Jan 16, 2013 4:56 AM by Chris Gannon

    Adaptive layout (orientation)

    mrblix Level 1

      Hi guys,

       

      I've been scouring the web for a tidy solution for this but without a thorough knowledge of javascript I'm a bit stuck.

       

      Based on the EdgeCommons adaptiveLayouts (https://github.com/simonwidjaja/EdgeCommons) I'd like to apply this theory to swapping out layouts for portrait and landscape on tablet devices. Closest thing I've found is http://chrisgannon.wordpress.com/2012/09/03/detecting-and-responding-to-orientation-change -in-adobe-edge-animate/ - an adaptation of EdgeCommons. Problem with this is it's specific to iPad and seems to use pixel widths to swap layouts rather than orientation. This is not usable for other devices and pixel densities. It's also bloated with other libraries (and it's beyond my knowledge to strip out the bits I don't need!)

       

      In summary what I'm trying to create is this:

       

      • A single dedicated .js file which I can add to Edge Includes every time I need it. -e.g. orientationswitcher.js

      • Works out orientation of device.
      • Depending on orientation (portrait, or landscape), the js inserts the relevant Edge symbol - layoutPort or layoutLand - into a container div.

      • A short snippet of code to paste into my Stage actions in Edge to call upon the script.

       

      It seems so simple but still beyond my knowledge. Is anyone able to give me some pointers for this? My current 'solution' involves 2 Edge projects, and some very messy code using iframes and CSS!

       

      Thank you so much,

      Rory

        • 1. Re: Adaptive layout (orientation)
          mrblix Level 1

          OK, an update. With a bit of tinkering and a lot of learning along the way, I've simply added this to 'resize' and 'orientationChange' events for my Stage:

           

          if(window.innerHeight > window.innerWidth){

              sym.$("port").show();

                     sym.$("land").hide();

          }

           

          if(window.innerHeight < window.innerWidth){

              sym.$("land").show();

                     sym.$("port").hide();

          }

           

          This seems to work when a device is rotated or a window is resized, which is fantastic, but I can't work out how to run this when the animation first loads. I've tried adding the same to compositionReady but the page is always blank until I rotate or resize.

           

          Feels like I'm close to a (relatively) tidy solution, but not quite there - any of you kind folk care to offer some advice?

           

          Thanks

          Rory

          • 2. Re: Adaptive layout (orientation)
            sftrane

            I was having a similar issue with it not detecting which layout to display on the initial load. I ended up adding a trigger at 0 on the timeline, with resize code in it, and it works great.

            • 3. Re: Adaptive layout (orientation)
              Chris Gannon Level 1

              You can simply call a custom updateLayout(); function when your project initialises:

               

              function updateLayout (){

               

                   //sets the stage's width and height to be the window width and height

                   sym.$("#Stage").width($(window).width());

                   sym.$("#Stage").height($(window).height());

               

                   switch (window.orientation){

               

                        //Portrait

                        case 0:

                        case 180:

                             //do portrait stuff here

                        break;

                        default:

                             //do landscape stuff here

                   };

              }

               

              And remember there's a built in window.orientationchange event in Edge Animate that can call this function whenever the orientation changes. Look in the left hand Stage > Event panel for it

              1 person found this helpful