4 Replies Latest reply on Jun 4, 2014 7:17 AM by todd_rohrer

    Issues adding Edge Animate file to HTML document

    todd_rohrer Level 1

      Hello!

       

      I am new to Edge Animate, and somewhat new to HTML/CSS/JavaScript.  I am using a trial version of Edge Animate to see if my company would benefit from its use.  I also downloaded the trial of Dreamweaver CC, since I am currently on Dreamweaver CS6.

       

      I got my animation to function perfectly in Edge, but I am experiencing issues when adding it to my web page.  I added the OAM file per Adobe's instructions into my layout.  My issues are as follows:

       

      • Nothing loads on Chrome.  I changed my background for the insertion point to a different color, and that is all that displays.  No poster image, no whitespace, nothing.  It's like it doesn't exist.
      • On IE10, that div area is filled with the "Internet Explorer could not load" page.
      • On Firefox, the animation loads and plays, but none of my click events or hover elements register.

       

      I didn't see anything in the import instructions that said anything about adding information into the <head> element.  Was I supposed to add something there?

       

      (also, this is my first time posting, so if i'm not adding the code correctly, I apologize)

       

      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Cool New Thaaang</title>

      <!-- Fonts -->
      <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Marvel' rel='stylesheet' type='text/css'>

      <!-- Scripts -->

      <script src="_script/jquery-2.1.1.min.js"></script>
      <script src="_script/actions.js" type="text/javascript"></script>

       


      <!-- Styles -->

      <style>
      body {
      background: #073f3e; /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(94,123,117,1) 51%, rgba(7,63,62,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,rgba(94,123,117,1)), color-stop(100%,rgba(7,63,62,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  rgba(94,123,117,1) 51%,rgba(7,63,62,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  rgba(94,123,117,1) 51%,rgba(7,63,62,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  rgba(94,123,117,1) 51%,rgba(7,63,62,1) 100%); /* IE10+ */
      background: linear-gradient(to bottom,  rgba(94,123,117,1) 51%,rgba(7,63,62,1) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e7b75', endColorstr='#073f3e',GradientType=0 ); /* IE6-9 */
      font-family: Marvel, Tahoma, Geneva, sans-serif;
      font-size: 1em;
      color: #232C23;
      }
      #ribbon{
      margin: 0 auto;
      background-color: #fff;
      height: 50px;
      position: relative;
      width: 500px;
      text-align: center;
      line-height: 50px;
      box-shadow: 1px 1px 2px rgba(0,0,0,.3);
      }
      #ribbon:before, #ribbon:after{
      content: ' ';
      height: 0;
      position: absolute;
      width: 0;
      top: 5px;
      border: 25px solid #E5E5E5;
      z-index: -5;
      }

      #ribbon:before {
      left: -42px;
      border-left-color: transparent;
      }
      #ribbon:after {
      left: 492px;
      border-right-color: transparent;
      }

      #mainBody{
      margin: 0 auto;
      width: 850px;
      background-color: #F8F8F8;
      background: -moz-linear-gradient(top,  rgba(248,248,248,1) 74%, rgba(248,248,248,1) 74%, rgba(239,239,239,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(74%,rgba(248,248,248,1)), color-stop(74%,rgba(248,248,248,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 74%,rgba(248,248,248,1) 74%,rgba(239,239,239,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  rgba(248,248,248,1) 74%,rgba(248,248,248,1) 74%,rgba(239,239,239,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  rgba(248,248,248,1) 74%,rgba(248,248,248,1) 74%,rgba(239,239,239,1) 100%); /* IE10+ */
      background: linear-gradient(to bottom,  rgba(248,248,248,1) 74%,rgba(248,248,248,1) 74%,rgba(239,239,239,1) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
      position: relative;
      margin-top: 10px;
      border: 4px solid #83A084;
      z-index: -1;
      box-shadow: 1px 1px 2px rgba(0,0,0,.3);
      }

      #mainContent{

      }
      article{
      padding: 20px 50px 25px;
      float: left;
      width: 400px;
      }
      aside{
      width: 300px;
      margin: 50px 25px 25px;
      float: right;
      background: #f4f4f4;
      height: 600px;
      background-image:url(_images/Poster2.png);
      background-repeat:no-repeat;
      }
      footer{
      clear:both;
      }

      h1 {
      font-family: Lobster, Tahoma, Geneva, sans-serif;
        color: #333;
      }

      h2, h3, h4, h5{
      padding-top: 0.7em;
      line-height: 0.5em;
      color: #333;
      }
      p{
      font-weight: 500;
      }
      hr {
      color:#83A084;
      }

      button{
      background-color: #83a084;
      border: 3px solid #5e7875;
      display: inline-block;
      padding: 10px;
      border-radius: 5px;
      font-family: Lobster, Tahoma, Geneva, sans-serif;
      color: #f8f8f8;
      text-shadow: 1px 1px 2px rgba(0,0,0,.3);
      /* [disabled]position: relative; */

      cursor: pointer;
      }

      .teddyFred{
      display: none;
      padding: 20px 150px 30px;
      }


      </style>


      </head>

      <body>


      <div id="ribbon"> <h1>Welcome to a fresh new site! </h2></div>
      <div id="mainBody">
      <div id="mainContent">
      <article>
      <h2>Main Section Header!<hr color="#83A084" noshade></h2>

      <p>Descriptive Text!</p>

      <h3>Subheader</h3>
      <p>More Descriptive Text</p>

      <h3>Subheader</h3>
      <p>Even more descriptive text.</p>
      </p>


      <div class="teddybear">
      <button class="teddybutton">Show that Teddy Bear!</button>
      <div class="teddyFred"><img src="_images/TeddyBearFred.png" height="300"></div>
      </div>


      <div><br /> Text Area
        </div>

      <h2>Second Section header! <hr color="#83A084" noshade></h2>
      <p>Look at all this extra space!  But what can we do with it?</p>

      <p>For now, let's add some filler text.</p>

      <p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p></article>


      <aside id="adspace"><div id="Stage" class="EDGE-11111111">
        <object id="EdgeID" type="text/html" width="320" height="620" data-dw-widget="Edge" data="../../../../../../X:/edgeanimate_assets/myOtherAnimateProject/Assets/myOtherAnimate Project.html">
        </object></div>
      </aside>


      <footer> That's all, folks!</footer></div>
      </div>


      </body>
      </html>

        • 1. Re: Issues adding Edge Animate file to HTML document
          hemanthR Adobe Employee

          Can you embed content using the below steps and see if your content plays:

           

          1. Publish from Edge Animate. (This creates the necessary files to run the animation. Also, the code referenced in Step 2 and 3 below will be included in the .html file that Animate creates inside the publish/web folder, which you can just copy/paste.)

          2. Add a <div> to the page that has the ID of Stage and the correct class name for your stage (i.e. the "Composition ID" for your project in Animate).
            For example: 
            <div id="Stage" class="EDGE-1655086"></div>

          3. Include the Preload .js file and the default style in your page's header, within Edge Runtime HTML comments.
            For example: 
            <!--Adobe Edge Runtime-->
            <script type="text/javascript" charset="utf-8" src="test-1655086_edgePreload.js"></script>
            <style>
            .edgeLoad-EDGE-1655086 { display:none; }
            </style>
            <!--Adobe Edge Runtime End-->

          4. Make sure to upload all of the include files to your server in the appropriate relative locations. This includes the _edge.js files, _edgeActions.js file, _edgePreload.js file, the edge_includes folder and its contents, any other files/folders created inside the "publish/web" folder when you publish from Edge Animate (e.g. "images" folder, etc.).

           

          With OAM method ,do you see any errors in browser console in chrome when content does not play?

          1 person found this helpful
          • 2. Re: Issues adding Edge Animate file to HTML document
            todd_rohrer Level 1

            No errors in Chrome with the .oam, just the empty <aside> area.

            Adding the <div> and Script/Styles at the head worked perfectly in IE, but, though it was visible on Firefox and Chrome, it still wasn't interactive.

             

            Any ideas on why that may be?  Could it just be my browser settings, or do those browsers render click events and timeline control differently?

            • 3. Re: Issues adding Edge Animate file to HTML document
              hemanthR Adobe Employee

              Can you share your files?

              I will try to figure it out.

              • 4. Re: Issues adding Edge Animate file to HTML document
                todd_rohrer Level 1

                Please see the attached dropbox link:

                 

                https://www.dropbox.com/s/ufsax9komjcbraf/Todd%27s%20Test%20Site.zip

                 

                I am hoping all of the src links still work after the archive.