Edge Animate-Animation in HTML (WIX+Dropbox)

Hello, my friends,
I really hope, someone can understand / help me with my problem
So, I created an animation for a landingpage on my website(built with wix.com).
My problem is, that wix.com has got no folder-organisation or upload-function
and my Edge animation has *.html, *jscript and *.jpeg/*.png files.
In a Wix.com-forum, I've found a response, that said, that I should use external storage-websites for my files.
I did so and put these files in my dropbox/public folder, copied the open links in the *.html file like this:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>Ani1</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8"
src="https://dl.dropboxusercontent.com/u/65147807/Wallpaper
%20Animation1_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8"
src="https://dl.dropboxusercontent.com/u/65147807/Wallpaper
%20Animation1_edgeActions.js"></script>
<script type="text/javascript" charset="utf-8"
src="https://dl.dropboxusercontent.com/u/65147807/Wallpaper
%20Animation1_edge.js"></script>
    <style>
        .edgeLoad-EDGE-88355712 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
    <div id="Stage" class="EDGE-88355712">
        <div id="Stage_webwall-surf3" class="edgeLoad-EDGE-88355712"
src="https://dl.dropboxusercontent.com/u/65147807/images/webwall-surf3.jpg">
</div>
        <div id="Stage_wavebreakin" class="edgeLoad-EDGE-88355712"
src="https://dl.dropboxusercontent.com/u/65147807/images/wavebreakin.png">
</div>
        <div id="Stage_branding" class="edgeLoad-EDGE-88355712"
src="https://dl.dropboxusercontent.com/u/65147807/images/branding.png">
</div>
        <div id="Stage_and" class="edgeLoad-EDGE-88355712"
src="https://dl.dropboxusercontent.com/u/65147807/images/and.png">
</div>
        <div id="Stage_interactive2" class="edgeLoad-EDGE-88355712"
src="https://dl.dropboxusercontent.com/u/65147807/images/interactive.png">
</div>
        <div id="Stage_design" class="edgeLoad-EDGE-88355712"
src="https://dl.dropboxusercontent.com/u/65147807/images/design.png">
</div>
    </div>
</body>
</html>
But, when I copy the code into my wix-page-html-app (for not-wix-user: a small field to insert html-code),
nothing happens...
Can anyone try to help me with this problem ?
I'm really better in graphic-solutions - I think, the coding hates me
Greetings, Dominik

First of all.
try not to use spacebar in the titles.
(title now is spacebar animation1)
second with the js files again. the links do not work.
link now is
https://dl.dropboxusercontent.com/u/65147807/Wallpaper%20Animation1_edgeActions.js
needs to be?
https://dl.dropboxusercontent.com/u/65147807/Wallpaper/%20Animation1_edgeActions.js
but that one doesnt work either
so what is happening now with the animation. the animation cant find the javascript files
- Rob

Similar Messages

  • Bug. Can't put two Edge Animate animations on same page

    Alrighty. Just thanked Adobe for fixing responsive scaling issue. Now there seems to be a new one. When I put two Edge Animate animations on the same page, they both disappear entirely from view! Both in live view (or what was fluid grid view) and when trying to preview in any browser. The responsive design is working great but if I put two animations on the same page they both just disappear! GONE!
    Maybe there is some code I can use to stop this from happening. I have done a number of tests over the last hour or so. My smile (from the responsive fix) is now a frown again. I can not continue to work like this. Please let me know if there is something I am doing wrong. I could have two animations in one page no worries before this release but the responsive design wasn't working properly. NOW the responsive design works but I can not have MORE THAN ONE ANIMATION on same page. Thanks for your time. Kind regards Julian.

    Hi Julian,
    First, in general, you can't create two instances of the same edge composition (this is not supported by EdgeRuntime), to be used in the same file.
    But if you want to use same composition multiple times, then follow the steps to create multiple copies to be treated as multiple instances:
        1. Open the composition whose multiple instance you want to use.
        2. Change the "Composition Class" to some other value
        3. Do a SaveAs and save it to create another copy of the same composition. // This copy can be treated as an instance.
        4. Repeat the steps 2 to 4, to create multiple copies of the same composition, and you will end up creating multiple instances.
    Second, you need to do small changes manually in the DreamWeaver html file.
        So, right now if you import two Edge Compositions in the html page, it will come as follow in the html <head/> section:
    Before Modification: Dropbox - problem.rar
    <!--Adobe Edge Runtime-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script>
      var custHtmlRoot="Untitled-1/Assets/";
      var script = document.createElement('script');
      script.type= "text/javascript";
    script.src = custHtmlRoot+"edge_includes/edge.5.0.0.min.js";
      var head = document.getElementsByTagName('head')[0], done=false;
      script.onload = script.onreadystatechange = function(){
      if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
      done=true;
      var opts ={
        scaleToFit: "width",
        centerStage: "none",
        minW: "0",
        maxW: "undefined",
        width: "550px",
        height: "400px"
      opts.htmlRoot =custHtmlRoot;
      AdobeEdge.loadComposition('Untitled-1', 'EDGE-1372833673', opts,
      {"dom":{}}, {"dom":{}});
      script.onload = script.onreadystatechange = null;
      head.removeChild(script);
      head.appendChild(script);
      </script>
    <style>
            .edgeLoad-EDGE-1372833673 { visibility:hidden; }
        </style>
    <!--Adobe Edge Runtime End-->
    <!--Adobe Edge Runtime-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script>
      var custHtmlRoot="Untitled-2/Assets/";
      var script = document.createElement('script');
      script.type= "text/javascript";
    script.src = custHtmlRoot+"edge_includes/edge.5.0.0.min.js";
      var head = document.getElementsByTagName('head')[0], done=false;
      script.onload = script.onreadystatechange = function(){
      if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
      done=true;
      var opts ={
        scaleToFit: "width",
        centerStage: "none",
        minW: "0",
        maxW: "undefined",
        width: "550px",
        height: "400px"
      opts.htmlRoot =custHtmlRoot;
      AdobeEdge.loadComposition('Untitled-2', 'EDGE-1372913196', opts,
      {"dom":{}}, {"dom":{}});
      script.onload = script.onreadystatechange = null;
      head.removeChild(script);
      head.appendChild(script);
      </script>
    <style>
            .edgeLoad-EDGE-1372913196 { visibility:hidden; }
        </style>
    <!--Adobe Edge Runtime End-->
    After Modification:Dropbox - resolved.rar
    <!--Adobe Edge Runtime-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script>
      var custHtmlRoot="Untitled-1/Assets/";
      var script = document.createElement('script');
      script.type= "text/javascript";
      script.src = custHtmlRoot+"edge_includes/edge.5.0.0.min.js";
      var head = document.getElementsByTagName('head')[0], done=false;
      script.onload = script.onreadystatechange = function(){
      if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
      done=true;
      var opts ={
      scaleToFit: "width",
      centerStage: "none",
      minW: "0",
      maxW: "undefined",
      width: "550px",
      height: "400px"
      opts.htmlRoot =custHtmlRoot;
      AdobeEdge.loadComposition('Untitled-1', 'EDGE-1372833673', opts,
      {"dom":{}}, {"dom":{}});
      script.onload = script.onreadystatechange = null;
      head.removeChild(script);
      //For 2nd Composition
      (function(){
      var custHtmlRoot = "Untitled-2/Assets/";
      var opts = {
      scaleToFit: "width",
      centerStage: "none",
      minW: "0",
      maxW: "undefined",
      width: "550px",
      height: "400px"
      opts.htmlRoot =custHtmlRoot;
      AdobeEdge.loadComposition('Untitled-2', 'EDGE-1372913196', opts, {"dom":{}}, {"dom":{}});
      head.appendChild(script);
      </script>
      <style>
            .edgeLoad-EDGE-1372833673 { visibility:hidden; }
            .edgeLoad-EDGE-1372913196 { visibility:hidden; }  /* Styles from both composition can be merged together, optional but good practice */
        </style>
    <!--Adobe Edge Runtime End-->
    Do let me know in case if it doesn't work.
    hope it helps,
    Vivekuma

  • How to run an Edge Animate animation on SharePoint 2007

    Hi,
    I have an Edge Animate animation that I can't figure out how to setup to run on SharePoint 2007.
    I have tried using a Content Editor Webpart but untill now without any luck.
    I hope someone in here will be able to help.
    Right now my code look like this;
    <html>
    <head>
        <style>
    .edgeframe {
        background: #FFF;
    margin-top: 0px;
        </style>
    </head>
    <body>
    <div class="edgeframe">
      <object id="EdgeID" type="text/html"   width="960" height="700" src="http://fls-teamsites/application/SPoudemo5/TSETdevelopment/Shared%20Documents/ten_commandm ents_its.html">
      </object>
    </div>
    </body>
    </html>
    I'm really hoping that someone will be able help me with this task.
    Br,
    Thomas

    Object tag takes "data" attribute instead of "src". Try changing it.
      <object id="EdgeID" type="text/html"   width="960" height="700" data="http://fls-teamsites/application/SPoudemo5/TSETdevelopment/Shared%20Documents/ten_commandm ents_its.html">

  • How do I maintain responsive scaling on an edge animate animation when I insert it into dreamweaver?

    How do I maintain responsive scaling on an edge animate animation when I insert it into dreamweaver? Please and thank you!

    example.com is a generic http:// address to illustrate the difference between what you gave, file:/// and an actual URL address.  There are no tutorials on that site.  Sorry for the confusion.
    #1 Have you procured your domain name and web hosting yet?  You'll need to do that to publish your pages online.
    #2 When you sign-up for web hosting, the company will send you FTP log-in credentials to your site's web server.    You will enter this info into your DW Site Definition.  Site > New Site >  See screenshots below:
    Under Servers:  Root Directory is whatever your hosting company tells you to use.  This varies by web host.  Some commonly used ones are public_html, www or htdocs.
    After your site definition is set-up, hit the TEST button to confirm it's working.  If it's not connecting, go to More Options.
    Go to the Files Panel (F8).  Use the UP Arrow  to PUT files to remote server.
    Use the DOWN Arrow to GET files from server to your local site folder.
    Post back when you have finished uploading your work to the remote server.
    Nancy O

  • Error with Edge Animate animations

    Muse 7 Get an Error when opening a page with an Edge Animate animation. This didn't happen with the earlier version of Muse. Error is "MuseJSAsset: Error calling selector function: TypeError: 'undefined' is not a function (evaluating 'Muse.Utils.initializeAnimations()" See screen shot.
    MacOSX Mavericks.
    ted

    Hi Ted,
    Can you send me your .muse file and .oam file to [email protected] with the subject attn: Dana and a link to this thread?
    Thanks,
    Dana

  • Is it possible to place an Adobe Edge Animate animation into an Interactive PDF?

    Hello all,
    At the moment, this seems to be the biggest InDesign mystery to me...
    Is it possible to place an Adobe Edge Animate animation into an Interactive PDF? 
    I have not been able to find anything on this.  Thanks for any insight you can provide.

    No.

  • How to pass javascript variables into an Edge Animate project from HTML

    I have just about got the basics nailed for Edge Animate now - coming from a Flash background it's been fairly straight forward, nice work so far (but more on that later)
    I have had to build a "promoted items" slider for the homepage on one of our sites....previously this would have been a flash animation but, hey ho .
    I originally built it as a jQuery extension/plugin but found it too time consuming to make minor alterations - that's where Edge came in and SEEMED to fill the job pretty well.
    Now for the moment i'll put on hold the whole issue about how we NEED to be able to work with dom-level elements directly on the page (eg, animating divs and images within a ul-li structure which is how these things usually work) and concentrate on the Edge specific issue...
    I've seen a few people asking this same question, but none of the answers either a) work at all for me , or b) are good enough for what I need to do.
    see previous solutions here http://support.muse.adobe.com/message/4658175 and here : http://forums.adobe.com/thread/1065343
    My project uses an internal array of data, and while in "preview" mode it works reasonably well.
    in the Stage creationComplete event i have Edge code like, for example :
       var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
       var headlinesArray = ["product 1", "product 2", "product 3"];
       var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
       var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
       //variables set to full internal scope, used immediately after this and called from sub-elements afterwards
       sym.getComposition().getStage().setVariable("imagesArrayData", imagesArray);
    this code obviously needs to be changed via the HTML page that is calling it.
    IDEALLY i would have these elements already on the page ( <div><h1>Product 1</h1><img src="....  etc ) and then jquery it to hell to make it look funky. This is how we NEED to be doing it in the future...that way our content is still searchable and findable by search bots etc. Edge will output a "static" version of the page, i tried that, but it won't work for dynamically built objects. There's no way i've found of building an array of Symbols based on the existing DOM structure like you can do in jQuery itself.
    however, in the meantime i'll settle for being able to set a javascript call up somewhere - like the old flashvars solution (which was horrible fudge, but worked as a way to get data into a project )
    i'd REALLY rather not use an internal jSon call .... it's adding uneccessary bandwidth and additional server processing when the data it needs has already been retrieved from the database when the HTML page is drawn - AND it means i need to make sure that the json producing web service gets ported accross to any other projects that use this same "slider"
    i've tried removing the internal declaration and changing my HTML to :
    <script>
    var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
       var headlinesArray = ["product 1", "product 2", "product 3"];
       var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
       var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
    </script>
    <!--Adobe Edge Runtime-->
         <script type="text/javascript" charset="utf-8" src="index_edgePreload.js"></script>
    etc
    but this hasn't worked.
    i'm going to attempt the solution using
    AdobeEdge.bootstrapCallback(function(compId) { ....
    as found on http://forums.adobe.com/thread/1065343
    but this doesnt explain how to set up Stage level variables, rather than targeting a specific Edge property
    Anyone got any ideas? Or do I just scrap the project?
    IMHO : Adobe need to be careful of falling into the same mindset that most of the anti-flash brigade have.
    Please remember that Flash is used for WAY more than just adverts.
    At the moment, Edge will work great as a way to put a simple animation onto the page with REALLY basic interactivity - suitable for a basic advert - but we need our HTML5 animations and scripts to be fully dynamic, data-driven, and portable, and preferably using existing DOM elements.
    One last thing, any chance of a feature to say "my page already uses jQuery, don't import Edge's own outdated version"
    Message was edited by: j1mp

    I have just about got the basics nailed for Edge Animate now - coming from a Flash background it's been fairly straight forward, nice work so far (but more on that later)
    I have had to build a "promoted items" slider for the homepage on one of our sites....previously this would have been a flash animation but, hey ho .
    I originally built it as a jQuery extension/plugin but found it too time consuming to make minor alterations - that's where Edge came in and SEEMED to fill the job pretty well.
    Now for the moment i'll put on hold the whole issue about how we NEED to be able to work with dom-level elements directly on the page (eg, animating divs and images within a ul-li structure which is how these things usually work) and concentrate on the Edge specific issue...
    I've seen a few people asking this same question, but none of the answers either a) work at all for me , or b) are good enough for what I need to do.
    see previous solutions here http://support.muse.adobe.com/message/4658175 and here : http://forums.adobe.com/thread/1065343
    My project uses an internal array of data, and while in "preview" mode it works reasonably well.
    in the Stage creationComplete event i have Edge code like, for example :
       var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
       var headlinesArray = ["product 1", "product 2", "product 3"];
       var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
       var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
       //variables set to full internal scope, used immediately after this and called from sub-elements afterwards
       sym.getComposition().getStage().setVariable("imagesArrayData", imagesArray);
    this code obviously needs to be changed via the HTML page that is calling it.
    IDEALLY i would have these elements already on the page ( <div><h1>Product 1</h1><img src="....  etc ) and then jquery it to hell to make it look funky. This is how we NEED to be doing it in the future...that way our content is still searchable and findable by search bots etc. Edge will output a "static" version of the page, i tried that, but it won't work for dynamically built objects. There's no way i've found of building an array of Symbols based on the existing DOM structure like you can do in jQuery itself.
    however, in the meantime i'll settle for being able to set a javascript call up somewhere - like the old flashvars solution (which was horrible fudge, but worked as a way to get data into a project )
    i'd REALLY rather not use an internal jSon call .... it's adding uneccessary bandwidth and additional server processing when the data it needs has already been retrieved from the database when the HTML page is drawn - AND it means i need to make sure that the json producing web service gets ported accross to any other projects that use this same "slider"
    i've tried removing the internal declaration and changing my HTML to :
    <script>
    var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
       var headlinesArray = ["product 1", "product 2", "product 3"];
       var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
       var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
    </script>
    <!--Adobe Edge Runtime-->
         <script type="text/javascript" charset="utf-8" src="index_edgePreload.js"></script>
    etc
    but this hasn't worked.
    i'm going to attempt the solution using
    AdobeEdge.bootstrapCallback(function(compId) { ....
    as found on http://forums.adobe.com/thread/1065343
    but this doesnt explain how to set up Stage level variables, rather than targeting a specific Edge property
    Anyone got any ideas? Or do I just scrap the project?
    IMHO : Adobe need to be careful of falling into the same mindset that most of the anti-flash brigade have.
    Please remember that Flash is used for WAY more than just adverts.
    At the moment, Edge will work great as a way to put a simple animation onto the page with REALLY basic interactivity - suitable for a basic advert - but we need our HTML5 animations and scripts to be fully dynamic, data-driven, and portable, and preferably using existing DOM elements.
    One last thing, any chance of a feature to say "my page already uses jQuery, don't import Edge's own outdated version"
    Message was edited by: j1mp

  • Embed Edge Animate animation into a Powerpoint presentation?

    Is there a way to embed the animation I created into a Powerpoint presentation. My client wants a rather detailed animation and I know I can do it in Edge Animate, but how can they use it in their presentation? Is there any workaround for this? All help is really appreciated.

    I don't think powerpoint supports html.
    But you can insert video in slides.
    So, better you create Edge Animate composition and preview in browser in fullscreen mode and use any screen capture software that will create a video out of it.
    Then insert this video in the slides to have the animation.
    hope it helps,
    Vivekuma

  • Edge Animate Animation Flickering in IE 11 only

    Im using Adobe Edge Animate CC 2014.0.1. I've created a basic keyframe 20 or so png animation with one sound effect in it. All on the main timeline. When published both locally and and on our staging server the animation flickers but only in IE 11. IE 10 is fine as well as Firefox, Chrome and Safari. There isn't any code added it's strictly a series of images on the the timeline spaced out for timing and one sound effect plays at a certain point. I've even removed the sound effect but that doesn't change the flickering. Any help would be greatly appreciated!

    nope. no fade. i make the images go from 0% opacity to 100% to hide the previous image and make the current image visible.

  • Problems with Edge Animate Animations

    Hello There
    I am Using CP8 with responsive projects. It appears that no matter what if an edge animate file is imported into a slide it lays on top of everything else and trying to put a caption or an image or anything else on top of it will not work (it shows behind it). also I have a custom pause play button on the slide and it does not work on any slide containing an edge animation. Anyone else found these problems and maybe a solution?

    This has always been the case for any animation in CP to be on top. Please
    file a feature request.  Same for communication between OAM and CP, none
    for the moment. You van have transparent background and pause/play button
    in OAM, could be a workaround.

  • Edge Animate animations appearing on top of everything in Captivate 8 project

    When I create an animation in Adobe Edge Animate, and then insert that animation into my Captivate 8 project, it appears on top of everything: TOC, glossary, interactions, etc. I've clearly reordered the objects in the timeline so that the OAM file will appear on the bottom, but still when I publish the project, the animation appears on top of everything. Why? Is this a known bug in Captivate 8? Maybe I'm not doing something right Animate, but this is extremely irritating. How can I fix this?

    Hi bs234906
    I am having the exact same issue so not sure if it something we're doing wrong or it is a bug? I think it may have something to do with the <div>'s inside of Edge but not sure? Would love to find out the answer.

  • Edge Animate - Animation durch scrolling steuern - Digital Publishing

    Hallo!
    Brauche dringend Hilfe..
    Bin gerade dabei ein Magazin mit DPS digital zu publizieren. Hab bei meiner Recherche viele Magazine entdeckt die einen Effekt haben,
    in der sich die Animation durch das scrollen mit dem Finger steuern lässt. D.h. der User kann interaktiv steuern.
    (Beispielsweise in folgenden Apps: Victoria Secret, Porsche Christopherus, BMW Magazin).
    Also eine Animation zu erstellen in Edge Animate ist nicht das Problem, nur welchen Code muss ich dann an welcher Stelle einfügen um diesen Effekt zu erzielen?
    Bitte um Hilfe!

    Mik, let me ask around and find out who built this. It may take a few days but I'll see what I can find out.
    Neil

  • Edge Animate animation (hide/show) not working

    Ever since I installed the new version of Edge Animate the (hide/show) function doesn't work. When I open projects created with the previous version everything works fine. What gives? Is this a bug?

    The project that is currently working as expected:
    Redirecting...
    The new Edge Animate 2014.1 project that does not work:
    Redirecting...

  • Edge animate animation does not start the first time I load the page. But does the second time.

    Hi all,
    I am having trouble with an edge animation on a web page. It doesn't load the first time the page is loaded, but loads fine the second time or any time after that. To test I am clearing my cache, then reloading the page. It seams to work in IE the first time but not Firefox or chrome.
    I have a temporary copy of the page here ... http://emiwip.com/monique-mathieu/landing-page-wip.html
    Can anyone tell me what is going on?
    Thanks.
    Dan

    I found the answer here ... Publishing no longer works in latest Edge
    It appears that you need to load the latest jQuery in the head of the pag. That fixes it.
    Dan

  • Trigger an Adobe Edge Animate animation when entering the screen

    Playing an animation when entering screen would be nice...

    Hello Carpe,
    You can insert an animation file in the start page of a site. More details about integrating Edge contents in Muse here:
    http://www.adobekb.com/inserting_edge_content.html
    http://www.youtube.com/watch?v=fps_oeMmywA
    Hope this helps.
    Cheers
    Parikshit

Maybe you are looking for