6 Replies Latest reply on Jul 22, 2013 2:51 AM by terryd1

    How do you add Edge Animate to HTML Module using DotNetNuke (DNN)?

    MoisesGarcia

      First off I'm new to the whole web design/coding/html/css/jquery/etc., and the program Edge Animate is amazing!

       

      I have a site up using DNN and wanted to put what I created on Animate onto one of the pages. I added an HTML module and that's where I'm stuck.

      I do not know where to get the complete code so it works, and I do not know where to upload the Animate files. When it comes to creating the thing, I can manage (by reading ALOT), but when it comes to implamenting I am just stumped.

       

      Any idea?

      If you need more specific info just give the word, and I'll try my best.

       

      Thanks,

        Moses G.

        • 1. Re: How do you add Edge Animate to HTML Module using DotNetNuke (DNN)?
          hyadav Adobe Employee

          There are four basic steps needed to embed an Edge Animate composition into an existing page:

           

          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.)

           

           

          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>

           

           

          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-->

           

           

          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.).

           

           

          Here is a very simple example that will hopefully help to clarify:

          http://thetraininggrounds.com/An-test/Insert-An-into-existing-page.html

           

          As a reference, these are all of the files involved in the example:

          An-test/Insert-An-into-existing-page.html (the existing HTML page)

          An-test/ball-bouncing-banner_edge.js

          An-test/ball-bouncing-banner_edgeActions.js

          An-test/ball-bouncing-banner_edgePreload.js

          An-test/edge_includes/edge.1.0.0.min.js

          An-test/edge_includes/jquery.easing.1.3.js

          An-test/edge_includes/jquery-1.7.1.min.js

          An-test/edge_includes/json2_min.js

           

          Thanks

          Harshit yadav

          1 person found this helpful
          • 2. Re: How do you add Edge Animate to HTML Module using DotNetNuke (DNN)?
            terryd1 Level 1

            "Make sure to upload all of the include files to your server in the appropriate relative locations." as Harshit writes, I found that, as a complete beginner a huge stumbling block and spend many a day experimenting with this, watching videos and scouring the interweb for some snippets of information to try and piece together a solution to a problem which I suspect comes as second nature to the many experts that populate this forum and this, for all the other beginners struggling with this problem (or is it just me?) is what I've gleaned.

             

            I found that the complete folders containing "images" and "edge_includes" must go into where the HTML page that has the Edge animation embeded is lodged on the server along with the single js files "name_of_animation"_edge.js and "name_of_animation"_edgeActions.js and "name_of_animation"_edgePreload.js.

             

            I use NetObjects as my web designer so if the web page with the embedded animation was the Index or Home or Main page then Netobjects would uploaded it to the root directory on the server so I would put all those Edge files into the root directory manually using FileZilla and if the page that contained the animation was anything else Netobjects would put it in a folder called "HTML" on the server so I'd put the files into there. I have experimented with putting the whole "publish" folder on the server and changing the src= line to point inside the folder but that didn't seem to work. Maybe someone knows how to do that.

             

            Incidently in NetObjects I embed the animation in a page by putting a text box on the page and click on the text properties html box and paste the code into there that way I can centre the text box and put it where I want on the page.

             

            I hope that is of some little help, I'm sure there is a more elegant solution but this works for me.

             

            Cheers

             

            Terry

            1 person found this helpful
            • 3. Re: How do you add Edge Animate to HTML Module using DotNetNuke (DNN)?
              Simon Clements

              I am trying to get my Edge Animate working on DNN version 06.02.05 but I can't seem to get it working.

              I have created a new page in DNN and added the html module where I placed the following code in the page Editor -

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

              (the above code was copied from the html file published by Edge)

               

              I placed the following code in the Metatags section via the Page Management for the new page -

              <!--Adobe Edge Runtime-->
                  <script type="text/javascript" charset="utf-8" src="test_edgePreload.js"></script>
                  <style>
                      .edgeLoad-EDGE-60112982 { visibility:hidden; }
                  </style>
              <!--Adobe Edge Runtime End-->

              (the above code was copied from the html file published by Edge)

               

              I have tried uploading the test_edge.js, test_edgeActions.js and test_edgePreload.js to many different directories and changed the src location but it doesn't work. I'm assuming I dont need to upload the html file as well but I have also tried that as well.

              I would appreciate it if you could tell me the exact location where I should put the js files and the exact src path to use.

              Thank you.

              • 4. Re: How do you add Edge Animate to HTML Module using DotNetNuke (DNN)?
                terryd1 Level 1

                Hi Simon

                 

                I'm unfamiliar with DNN but I suspect the editors work in a similar fashion. I'm a beginner with this js malarkey but all I can suggest that you insert the code in a text box html then publish that page, then using FileZilla log on to your server and see where DNN has put your page then manually put complete folders containing "images" and "edge_includes" along with the single js files "name_of_animation"_edge.js and "name_of_animation"_edgeActions.js and "name_of_animation"_edgePreload.js. Have a look at the source on my junk page  http://www.terenced1.webspace.virginmedia.com/html/untitled47.html it may give you a clue of what is going on.

                 

                Good Luck

                 

                Terry

                • 5. Re: How do you add Edge Animate to HTML Module using DotNetNuke (DNN)?
                  Simon Clements Level 1

                  Hi Terry,

                   

                  Thank you for your help.

                   

                  After hours of trying different things, I finally got it to work!!

                   

                  I'm sure this will be useful to others trying to add Adobe Edge (or even just .js external files) to the DNN html module -

                  1/ follow the steps explained by Harshit yadav/Terry above.

                  2/ use the following path in the page header /js/xxxxx_edgePreload.js

                  3/ open the xxxx_edgePreload.js and change the -

                  {load:"xxxx_edge.js"},{load:"xxxx_edgeActions.js"} to

                  {load:"/js/xxxx_edge.js"},{load:"/js/xxxx_edgeActions.js"}

                  4/ upload all the files to /httpdocs/js directory on your server.

                  That should do it!!

                   

                  Thanks

                  Simon

                  • 6. Re: How do you add Edge Animate to HTML Module using DotNetNuke (DNN)?
                    terryd1 Level 1

                    Hi Simon

                     

                    That's great every little bit of information helps.

                     

                    How did you put the animation on to your page? Have you the address of a page of yours with the animation installed that we can view?

                     

                    Terry