0 Replies Latest reply on Aug 26, 2015 4:17 AM by Reuben - Distant Future

    Multiple Scale-to-fit animations on single webpage

    Reuben - Distant Future

      Let me begin by saying I am new to coding/scripting, and I've spent the last week going on a crash course through rabbit-hole internet searches on forums to get to where I am now. This is the first time I've been the one actually asking the question on a forum.

       

      I am trying to get two Edge animations to play on a single webpage. This is not the problem.

      I've read numerous posts explaining that all you have to do is change the Stage names to not be the same as each other i.e.

      <div id="StageOne" class="EDGE-345866935">

      <div id="StageTwo" class="EDGE-352533096">

       

      That works so far as getting them both to appear and play. However, they need to fit in containing elements on the page, and scale responsively.

      So I've been using Sarah Hunts (now out-dated) script to make them scale proportionally to the window size:

      Create Scale-to-Fit Projects with Adobe Edge Animate | sarahjustine.com

       

      I realise that this is now a shipping feature that comes with CC, and all you have to do it tick the "Responsive Scaling" box on the Stage Properties, however this does not work with my project, as it instead makes them take over the entire screen rather than just rescale within their container. Whereas the old script from Sarah Hunts tutorial DOES work.

       

      Now, at last, here is the problem. The Sarah Hunt script only works if the Stage ID is called "Stage". If I change them to StageOne & StageTwo (so they both play), then the Scale-to-Fit script ceases to work. So the most I have been able to do so far is, leave one of the Stage ID's as the default "Stage" name, and change the second one to "StageTwo". This allows them both to appear and play, and makes one of the animations scale-to-fit, but not the other. I'm sure I just need to rename some instances of the word "Stage" in the second animations script to "StageTwo", but as I don't really know what I'm doing with code/script, I'm not sure which to change.

       

      Can anyone guide me?

       

      Images for clarification below:

       

       

      So this is a photoshopped version of the end-goal. This is what I wan't it to look like. (Webpage contents is under construction, I'm simply trying to get the Edge stuff to work).

      HowItShouldLook.jpg

       

      This is the closest I have managed to get. Notice that the animation on the left DOES fit in the containing element, but the one on the right does not.

      They both have the Scale-to-Fit script. Left has the default stage ID name "Stage", right has been renamed to "StageTwo", otherwise it wont appear at all.

      06.jpg