Search code examples
javascripthtmlanimationadobe-edge

Adobe Edge Animate CC file structure hierarchy - how to have assets and images load form different folder locations (2014.1.1 release)

This is more of a solution I have found for myself rather than a question. Following on the help of this question: Edge Animate files not working in CMS.

(the above has a good solution but it is for an older Edge Animate and the tile might not help users looking for this specific fix)

I was looking for a way to restructure my Edge Animate files for hosting server in a way that it does not mess around with the server structure.

For example: Having all the animation files and assets in a animations folder.

root/:

  • images/
  • includes/
  • animations/
  • styles/
  • index.html
  • and_so_on.html

Rather than just dumping all the assets in the root as you would have to by default if you don't or can't use the .oam file.

Solution

  • So here is what I did:

    • You make a animations folder on your server or testing folder (this can have a sub-directory like animation1, animation2 and so on).
    • Paste your images folder in animations folder (from either the Edge animate project folder or the publish folder).
    • Paste your edge_includes folder.
    • Paste your "animation"_edge.js file.
    • Paste your "animation".html file (this is not needed but I worked from this file when pasting the Adobe Edge Runtime code in head section of the html in root).
    • Paste your stylesheet.css.
    • Also don't forget to add any font files if you where using custom fonts.

    Step 1 You will need to copy some code from the head of the "animation".html in animations folder and paste it in the head of the "product".html page (in root folder) where you wish the animation to display.

    • Copy the code in head <!--Adobe Edge Runtime--> . . . <!--Adobe Edge Runtime End--> of the "animation".html and paste it in the head of the html you would like it to appear: products.html

    • Copy the <div id="Stage" class="EDGE-1234123"> .... </div>from the "animation".html and paste the div in the "products".html where you would like it to appear.

    • Change in The Adobe Edge Runtime code located in head <script type="text/javascript" charset="utf-8" src="edge_includes/edge.5.0.1.min.js"></script> to
      <script type="text/javascript" charset="utf-8" src="animations/animation1/edge_includes/edge.5.0.1.min.js"></script>

    • Change AdobeEdge.loadComposition('animation', 'EDGE-4297215',.. to
      AdobeEdge.loadComposition('animations/animation1/animation', 'EDGE-4297215',..

    • Change ["rgba(0,0,0,0)",'images/animation.png','0px','0px'] to
      ["rgba(0,0,0,0)",'animations/animation1/images/animation.png','0px','0px'] (this is for the poster image)

    Step 2 in the "animation"_edge.js file:

    • Change var im='images/', to
      var im='animations/animation1/images/',

    • Change '<link rel=\"stylesheet\" href=\"stylesheet.css\" type=\"text/css\" media=\"screen\" title=\"\" charset=\"utf-8\" />' to
      '<link rel=\"stylesheet\" href=\"animations/animation1/stylesheet.css\" type=\"text/css\" media=\"screen\" title=\"\" charset=\"utf-8\" />'

    These are the steps I have followeed and they have worked for me, was not sure how else to post this please feel free to comment, correct ;D as