11 Replies Latest reply on Mar 6, 2013 10:11 AM by dancingDivaSalsa2

    How can I implement my Edge Animation into my webpage?

    dancingDivaSalsa2

      I have a website created in asp.

       

       

      this is the code I inserted having found an old thread here which detailed how to go about implementing it to a webpage, but unfortunately it doesn't work for me:

       

       

       

       

      I figure it is done differently if the website is created in .asp maybe?

       

      <%@ Page Title="SIGN Technologies - Welcome!" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

      CodeBehind="Default.aspx.cs" CodeFile="Default.aspx.cs" Inherits="SignTech._Default" %>

      <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

      <style type="text/css">

      .auto-style1 {

      font-size: large;

      }

      </style>

      </asp:Content>

      <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

       

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

       

      <!--Adobe Edge Runtime-->

      <script type="text/javascript" src="Images/edge_includes/jquery-1.6.2.min.js"></script>

      <script type="text/javascript" src="Images/edge_includes/jquery.easing.1.3.js"></script>

      <script type="text/javascript" src="Images/edge_includes/edge.0.1.3.min.js"></script>

      <script type="text/javascript" src="Images/edge_includes/edge.symbol.0.1.3.min.js"></script>

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

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

      <link rel="stylesheet" href="Styles/Site.css" />

      <!--Adobe Edge Runtime End-->

       

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

      </div>

       

      <img src="Images/Home.jpg" alt="Home" class="icon"/>

       

      <h2>

      Welcome!

      </h2>

       

       

      </asp:Content>

        • 1. Re: How can I implement my Edge Animation into my webpage?
          dancingDivaSalsa2 Level 1

          Can someone please be so kind to answer my question?

          • 2. Re: How can I implement my Edge Animation into my webpage?
            jbowden Adobe Employee

            If I knew ASP, I'd be happy to answer.   Alas, I do not. Have you tried asking at an ASP forum?

             

            I'd assume that you'd want to feed it the text from your own Edge Animate HTML file. You'll also want to have the edge_includes folder as well as all the Javascript files EA creates in the same directory the EA HTML file expects it to be in.

             

            Maybe an ASP-savvy user can chip in?

             

            hth,

            Joe

            • 3. Re: How can I implement my Edge Animation into my webpage?
              shadowfax007 Level 1

              dancingdiva - The ASP shouldn't have anything to do with it at all (unless there is a "symbol" issue between them but probably not.

              I use  the "Lasso" Development Language and have no problem running Edge animations in  Lasso pages.

               

              Here's a quick and dirty way to set up the edge animation in your page - it is very easy :-)

               

              This assumes the page is in your root directory - If not move the files to the correct directory.

               

              1. "Publish" your animation from Edge.

              2. Inside the "publish" folder there is a "web" folder.

              3. grab the contents from this folder and upload them to your root folder.

               

              Inside your webpage:

              4. from the html page edge created, copy the code between the tags seen below into the header of the page you want the animation to run. You will find this code in the header of the edge html page.

                            

              <!--Adobe Edge Runtime-->

              whatever is in here - usually between 2-5 lines of code

              <!--Adobe Edge Runtime End-->

               

               

              5. Now, look for the following code in your edge HTML file:

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

               

              6. Place this code wherever you want the animation to play.

              7.  There is no 7 :-)

               

              James

              • 4. Re: How can I implement my Edge Animation into my webpage?
                dancingDivaSalsa2 Level 1

                All those steps you have just mentioned I seem to have followed already, unfortunately it still does not appear, should I contact a technical support person at adobe?

                 

                 

                Ok I just done a test page in html, uploaded it to the server and now the animation appears, so its got to do with asp I would think.

                • 5. Re: How can I implement my Edge Animation into my webpage?
                  shadowfax007 Level 1

                  dancingdiva-

                   

                  In between these lines is where the first "edge codeblock" should go:

                   

                  </style>

                  </asp:Content>

                   

                  Do you really have all of your Edge files inside an images folder?

                  Example:

                  <!--Adobe Edge Runtime-->

                  <script type="text/javascript" src="Images/edge_includes/jquery-1.6.2.min.js"></script>

                   

                  Also, I 'm not sure why you have all of these in the edge runtime code - Edge calls all of these itself (Unless you have the actual edge files in another directory - if everything is in the same folder(and subfolders just like they are in hte "web" folder inside the publish folder) you shouldn't need all of this).

                   

                  Here's an example of one I have:

                   

                  <!--Adobe Edge Runtime-->

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

                      <style>

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

                      </style>

                  <!--Adobe Edge Runtime End-->

                   

                  I don't see this at all in your first codeblock - Look for the ".edgeLoad-EDGE-responsive" (yours will be different but should include the ".edgeLoad-EDGE-xxxxx" line.

                   

                  <!--Adobe Edge Runtime End-->

                   

                  Also, when you say it doesn't work, what do you mean?

                   

                  are you able to run hte HTML page edge created in the web folder?

                   

                  James

                  • 6. Re: How can I implement my Edge Animation into my webpage?
                    dancingDivaSalsa2 Level 1

                    <%@ Page Title="SIGN Technologies - Welcome!" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

                    CodeBehind="DefaultTest.aspx.cs" CodeFile="DefaultTest.aspx.cs" Inherits="SignTech._DefaultTest" %>

                    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

                    <style type="text/css">

                    .auto-style1 {

                    font-size: large;

                    }

                    </style>

                    </asp:Content>

                    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

                    <!--Adobe Edge Runtime-->

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

                    <style>

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

                    </style>

                    <!--Adobe Edge Runtime End-->

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

                    </div>

                    <img src="Images/Home.jpg" alt="Home" class="icon"/>

                    <h2>

                    Welcome!

                    </h2>

                      <img class="sabPic" src="Images/Sabby.jpg" alt="Welcome" class="pageimage" style="float:right"; border="4"/>

                    </asp:Content>

                     

                    This is my code, it won't work, but it works in an actual html file (as in I created a webpage in html and then inserted the code and the animation shows), this is what I'm confused with. I place the code exactly how you have shown to try something different, but when I do that the webpage doesn't load, so I assume where I have inserted the code is correct and maybe its because I'm missing a line, I don't know, maybe it is done differently in asp?

                    • 7. Re: How can I implement my Edge Animation into my webpage?
                      shadowfax007 Level 1

                      dancingDiva-

                       

                       

                       

                      Try downloading this file and see if it helps.  It is the same file you posted above -To be safe, copy your current file and replace it with one to see how it works.   Right now I just called it asp_test.asp - rename it to whatever your file is named.

                       

                      https://creative.adobe.com/share/c7552838-ca0e-48fc-87d5-cd1e24dfd52e

                       


                      Also, although not in ASP (These are done in Lasso), here are 3 files - One index.lasso files and 2 include files, just so you can get an idea.  I have this tested and have working with no problems using Lasso (I don't have ASP on my servers).

                       

                      https://creative.adobe.com/share/ed60747c-d1ef-476e-8f47-1a23905a71ab

                       

                       

                      changes I made to your file:

                       

                      The Edge code is still placed in the wrong area in your ASP file.

                       

                      In the file you just posted look at lines #9 - #10:

                      </style>

                      </asp:Content>

                       

                      After </style> and before </asp:Content> is where the first Adove Edge fileblock should be placed.  The other is fine.

                       

                      Let me know if this helps!

                       

                      James

                      • 8. Re: How can I implement my Edge Animation into my webpage?
                        dancingDivaSalsa2 Level 1

                        It works now, but only in google chrome, when I access it in IE it doesn't work, thats because I want internet explorer to be in compatiblity mode with IE8, which will not allow this animation to display.

                         

                        Thank you for your help.

                        • 9. Re: How can I implement my Edge Animation into my webpage?
                          shadowfax007 Level 1

                          I can't help you there, maybe someone else can chime in.  I haven't spent too much time getting the "Google Chrome Frame for ie8" to work.  So far, it doesn't seem to do anything for me at all but then again I havent looked into it enough.

                          I pretty much assume those with ie8 aren't going to be able to see the animations but I'd like to hear that I'm wrong :-)

                           

                          James

                          • 10. Re: How can I implement my Edge Animation into my webpage?
                            elainecc Adobe Employee

                            Hi, dancingDivaSalsa2-

                             

                            Are you trying to view it while it's posted live to a server, or somehow in a preview?  In my experience, Google Chrome Frame doesn't kick in until it's posted on a server that can do the redirect.  It won't work on a local preview, like dragging the html file onto a browser.

                             

                            Thanks,

                             

                            -Elaine

                            • 11. Re: How can I implement my Edge Animation into my webpage?
                              dancingDivaSalsa2 Level 1

                              Elaine the animation and asp file has been uploaded to the server.

                               

                              Shadowfax007, the reason why I need compatibility mode IE8 in IE is because the more recent versions of IE have a bug, which affects some imagery positioning (click on link below), however if I used the compatibility mode for IE8 this does not happen.

                              As a result of the animation not showing up in IE I have removed the code for this compatibility mode, so now I have to work out a way to stop what is happening here:

                               

                              http://www.sign-technologies.net/Portfolio.aspx?portfolioid=3 - view this in Internet Explorer, move the mouse around the screen and watch what happens.