7 Replies Latest reply on May 16, 2013 9:23 AM by esdesdesd

    How to insert Edge animate in current web html page

    ARPAdmin

      Just downloaded Edge Animate and trying to include animation.html in current website.html page using Adobe Edge Code preview but am not sure how to go about it not being a hard core programmer.... am i being too ambitious?

        • 1. Re: How to insert Edge animate in current web html page
          shadowfax007 Level 1

          ARPAAdmin-

           

          Welcome!

           

          There's nothing wrong with being overly ambitious unless you give up :-)

           

          Look in your animation.html page.

           

          There are 2 "references" to your Edge project.

           

          1. The first reference is in the "<header> part of the page.  It is wrapped inside the following comment tags:

          <!--Adobe Edge Runtime-->

          ...

          <!--Adobe Edge Runtime End-->

           

          Put this inside the page you are trying to add the animation to, making sure it is inside the <header></header> tags in your page.

           

          2. The second reference is inside the <body> tags and is wrapped inside a <div></div> tag.  It will look something like this:

          <div id="Stage" class="EDGE-54038405"></div>

           

          Copy this tag and add into your webpage where you want the animation to play.

           

          That's it!

           

          James

          • 2. Re: How to insert Edge animate in current web html page
            ARPAdmin Level 1

            Thanks James - Yes I have tried your solution but not working.... I am using Mac iWeb to design... publish then edit Welcome.html page to add this code. I have also placed this code directly in the www published directory and set the path to point to the .js files referenced... still no luck? will try again.... thanks.

            • 3. Re: How to insert Edge animate in current web html page
              shadowfax007 Level 1

              ARPAAdmin-

               

              In the "published" folder there is the web folder.  Do you mean you added that folder with everything in it, or are you saying you added all the files in the Edge "web" folder to your root folder?

               

              Here's how your root folder should look:

              /

              css folder

              Images folder

              edge_includes folder

              animation_edge.js

              animation_edge.edgeActions.js

              animation_edgePreload.js

              animation_edge.an

              animation_edge.html

              welcome.html

              ...     anything else you have in there

               

              Make sure this is correct, the you should be able to see the animation.html page in your browser.

              Once you have this working, then make sure your welcome.html page has the code placed right and it should work :-)

               

              If not, please post both the animation.html & welcome.html page and I'll take  look.

               

              James

              • 4. Re: How to insert Edge animate in current web html page
                ARPAdmin Level 1

                Thanks here is the code :

                 

                Animation code : in subdiretory off Root directory : AdobeEdge/Bannerad.html

                 

                <!DOCTYPE html>

                <html>

                <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                          <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8"/>

                          <title>Untitled</title>

                <!--Adobe Edge Runtime-->

                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

                    <script type="text/javascript" charset="utf-8" src="Bannerad_edgePreload.js"></script>

                    <style>

                        .edgeLoad-EDGE-160548878 { visibility:hidden; }

                    </style>

                <!--Adobe Edge Runtime End-->

                 

                 

                </head>

                <body style="margin:0;padding:0;">

                          <div id="Stage" class="EDGE-160548878">

                          </div>

                </body>

                </html>

                 

                And segement of Accomodation.html page in root directory :

                 

                <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

                  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                   

                    <meta name="Generator" content="iWeb 2.0.4" />

                    <meta name="iWeb-Build" content="local-build-20130308" />

                    <meta name="viewport" content="width=700" />

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                          <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8"/>

                          <title>Untitled</title>

                 

                    <title>Accomodation</title>

                    <link rel="stylesheet" type="text/css" media="screen,print" href="Accomodation_files/Accomodation.css" />

                    <!--[if IE]><link rel='stylesheet' type='text/css' media='screen,print' href='Accomodation_files/AccomodationIE.css'/><![endif]--><style type="text/css">

                /*<![CDATA[*/

                          @import "Scripts/Widgets/HTMLRegion/Paste.css";

                /*]]>*/

                </style>

                    <!--Adobe Edge Runtime-->

                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

                    <script type="text/javascript" charset="utf-8" src="AdobeEdge/Bannerad_edgePreload.js"></script>

                    <style>

                        .edgeLoad-EDGE-160548878 { visibility:hidden; }

                    </style>

                <!--Adobe Edge Runtime End--> 

                    <script type="text/javascript" src="Scripts/iWebSite.js"></script>

                    <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>

                    <script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>

                    <script type="text/javascript" src="Scripts/iWebImage.js"></script>

                    <script type="text/javascript" src="Scripts/Widgets/HTMLRegion/Paste.js"></script>

                    <script type="text/javascript" src="Accomodation_files/Accomodation.js"></script>

                  </head>

                  <body style="background: #000000; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">

                    <div style="text-align: center; ">

                      <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word;  background: #fffde8; text-align: left; width: 700px; " id="body_content">

                        <div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">

                          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>

                          <div id="id1" style="height: 258px; left: 17px; position: absolute; top: 13px; width: 665px; z-index: 1; " class="style_SkipStroke">

                            <div class="text-content graphic_shape_layout_style_default_External_665_258" style="padding: 0px; ">

                              <div class="graphic_shape_layout_style_default"></div>

                            </div> <p style="margin:0;padding:0;">

                                     <div id="Stage" class="EDGE-160548878">

                                         </div>

                ....................  etc.

                 

                thanks.

                • 5. Re: How to insert Edge animate in current web html page
                  shadowfax007 Level 1

                  ARPAAdmin-

                   

                  It sounds like your directory structure is off.  If you call Bannerad.html in a browser, does it work?

                   

                  You say that the Bannerad.html page is inside a folder called AdobeEdge but the page you are tyring to copy the Edge code into (BTW - It looks like the code is correct in your Accommodation.html page) is in the root folder.  This won't work without some special tweaks to the Edge files.  I'd suggest putting the Edge folders/files directly into your root directory first and get that to work.

                  Let us know how that works.  Also, let us know if you can play the animation in the Bannerad.html page from a browser :-)

                   

                  James

                  • 6. Re: How to insert Edge animate in current web html page
                    ARPAdmin Level 1

                    Thanks. Yes Bannerad animation works in browser using Adobe code and Google chrome

                     

                    Have placed code in root and still no action - cannot see the animation - not sure code Apple iWeb 8 is compatible?

                     

                    Probably a simple solution me thinks?

                    • 7. Re: How to insert Edge animate in current web html page
                      esdesdesd

                      Hi, I was wondering if anyone could help me.  I have embedded Edge Animate into a web page with:

                      <div id="Stage" class="EDGE-1655086"></div>

                       

                      The problem is that I want to be able to swap that out with another Edge Animate on click - but when published, they both have the same div contents (<div id="Stage" class="EDGE-1655086"></div>).

                       

                      Any idea how to change out the animate files on the fly to play a different movie?

                       

                      Thank you!