BindTriggerAction's callback outside of Edge Animate context

Hi,
I'm currently working on an animation and I would like it's be controled in external JS files through the bindTriggerAction method and his callback function.
In Edge Animate context, the following code is actually working:
(function ($, Edge, compId) {
    var Composition = Edge.Composition, Symbol = Edge.Symbol; // alias pour les classes Edge couramment utilisées
    //Edge symbol: 'stage'
    (function (symbolName) {
        Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1000, function (sym, e) {
                console.log("test");//called
        //Edge binding end
    })("stage");
    //Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-9033193");
Next, I tried to export/adapt this code to run it outside of the Edge Animate context:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="test_001_edgePreload.js"></script>
    <style>.edgeLoad-EDGE-9033193 { visibility:hidden; } </style>
    <!--Adobe Edge Runtime End-->
</head>
<body>
<div id="Stage" class="EDGE-9033193">
</div>
<script type="text/javascript">
    AdobeEdge.bootstrapCallback(function (compId) {
        AdobeEdge.Symbol.bindTimelineAction(compId[0], "stage", "Default Timeline", "complete", function (sym, e) {
                console.log("complete...");//OK
        //my animation is 5000ms long   
        AdobeEdge.Symbol.bindTriggerAction(compId[0], "stage", "Default Timeline", 1000, function (sym, e) {
                console.log("test");//never called...
</script>
</body>
</html>
In my second test, you'll notice that the bindTimelineAction callback works but the method bindTriggerAction callback function is no longer called and I just can't figure why.
If someone has an idea, that's would be great !

I'm talking about very basic jquery code here.
In Animate, you could create a Trigger at the time (or event) you wish somecallbacks to respond to.
Inside this, you simply dispatch an event:
$.event.trigger({
     type: "myCustomEvt",
     message: "Hello World!"});
You can then listen to this event from the bootstrap callback
$(document).on("myCustomEvt", function(e) {
     console.log(e.message);
Message was edited by: david_deraedt

Similar Messages

  • Custom CSS Is Crashing Adobe Edge Animate

    Below is the HTML and CSS for a basic page, with one style. When I open it in Adobe Edge Animate and then create a shape, and set the class of that shape to "mystyle" it displays fine in the Edge Animate window (except the border style appears missing). However, as soon as I try to move the shape, Edge crashes - consistently every time. If I create a DIV on the page outside of Edge Animate first, and apply the CSS to it, then open the page in Edge, I can move the shape around - but I lose several style options in the Properties panel such as Filters and a couple others.
    I'm trying to get a better understanding of what would be the best workflow when trying to use Edge to animate existing web page layouts - creating the animations and DIVs entirely in Edge first then placing the animation into an existing layout, or creating a page layout in something like Dreamweaver (along with all my other custom CSS), then opening it in Edge to animate it. 
    I saw elsewhere where someone explained how to attach an external style sheet instead. This seems to work without crashing, however  I cannot see the rendered style on the stage itself, only when I preview the animation in a browser.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .mystyle {
              width: 248px;
              height: 200px;
              margin-right: 10px;
              margin-top: 10px;
              float: left;
              border: 1px solid #b6b6b6;
              -moz-border-radius: 20px;
              -webkit-border-radius: 20px;
              border-radius: 20px;
              -moz-background-clip: padding;
              -webkit-background-clip: padding-box;
              background-clip: padding-box;
              background-color: #ebebeb;
              -moz-box-shadow: 3px 4px 5px rgba(0,0,0,.1), inset 0 0 10px rgba(255,255,255,.75);
              -webkit-box-shadow: 3px 4px 5px rgba(0,0,0,.1), inset 0 0 10px rgba(255,255,255,.75);
              box-shadow: 3px 4px 5px rgba(0,0,0,.1), inset 0 0 10px rgba(255,255,255,.75);
              background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d 3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiI HByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0 ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwM mUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIi8+Cjx zdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZ XQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iNTElIiB zdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9I iNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDY iIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9I jEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
              background-image: -moz-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);
              background-image: -o-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);
              background-image: -webkit-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);
              background-image: linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);
              overflow: hidden;
    </style>
    </head>
    <body>
    </body>
    </html>

    You could use the styles inside Edge Animate directly in compositionReady. If you have an earlier version of edge for the gradient do:
    For example:
    sym.$('Stage').css({
      'background-image': '-moz-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)',
              'background-image': '-o-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)',
             ' background-image': '-webkit-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)',
              'background-image': 'linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)'
    You can add the other properties  between the {} with the same format:
      'propertyName':'value',
    Newer versions of Animate have gradient from color panel.

  • When Editing A Web Page In Edge Animate, How Can I Embed Edge Elements Into Pre-Existing DIV's?

    I created a basic layout with some boxes in Dreamweaver. I set the Overflow property on them to "Hidden". I then opened the page in Edge Animate. However I noticed that when I import stuff, such as an image, then try to drag it into one of the existing DIV's, it won't work. It stays on top of all the other DIV's. However if I create a box or some other sort of DIV directly in Edge Animate, I can drag the Image element into that, so it's enclosed within that DIV.
    I guess the workaround appears to be to embed the image into the DIV in Dreamweaver first, then open the page in Edge. However it would be nice to not have to keep jumping back and forth like that. Is there a way to do this in Edge Animate?
    Also, I noticed when I select one of the DIVs I made in Dreamweaver, many of the Properties such as Corners, Shadow, and Filters are missing. Can these only be used on DIV's created directly in Edge Animate?

    Hi, neohtom-
    What you're seeing is the difference between what we define as a static div (one that is defined outside of Animate) and a managed div (one that is defined inside of Animate).  Due to the fact that we expect other products to change a static div, we limit the amount of changes you can make to a static div.  Because we "manage" a div that is created inside of Animate, we allow a lot more changes to be made to a div.  Hope that answers your question!  I'd suggest creating divs within Animate if you want to eventually change them to have corners, etc.
    Cheers,
    -Elaine

  • Edge Animate loading jquery twice. External jquery plugin error.

    I recently created an interactive map (http://www.lakesofbellaterra.com/Interactive_Map_Demo/Testing/test1.html) using Edge Animate CC  2014.1.1 Release. I used the zoom.min.js plugin from jQuery Zoom to achieve the zooming image effect present when you click on one of the map section and reveal the "section modal". Further more the zoom.js plugin uses jquery 1.7.1. I am deploying this Edge Animate project in a Business Catalyst site using a content holder. Even though the zoom.js plugin works with Internet Explorer 7+ and Firefox I initially was not able to get the zoom.js plugin to work in either browser. After changing the <meta> in the <head> to <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1"> via suggestion from StackOverflow (internet explorer - What's the difference if <meta http-equiv="X-UA-Compatible" content="IE=edge"> exists or not? - Stac…)  I was able to get the zoom image function to work in Internet Explorer 9+. So now I just need to get this function working in the current version of Firefox 35.0.1.  As of now when I click on the zoom image nothing happens. The console in firebug reports the following JS related errors:
    Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1
    The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. LOBT-IxD-SectionMap_edge.js
    The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. jquery-1.7.1.min.js
    The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. jquery.easing.1.3.js
    The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. jquery.zoom-min.js
    The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. jquery.zoom-min.js
    Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.
    After some research I found a lead (WordPress › Support » how to prevent jquery loading twice?) That suggested that Edge Animate may be loading jquery twice, and that may be the source of the errors. I need to find out why this animation is not working in Firefox.
    Here is a list of things I have already tried that did not work:
    -Changing the utf charset to : <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    -Changing the version of jquery used from 1.7.1 to the latest release of 1.11.2
    -Changing the image source referenced in the zoom.js call from a .svg to a .png
    -Removing any scripts that may conflict with Edge Animate or zoom.min.js that are being called from within the Business Catalyst page template.
    -Running the project outside of Business Cataylst to see if the error persists (it does)
    Here a link to the Edge Animate project: Dropbox - LOBT Interactive Section Map
    As always any help is determining why Edge Animate projects with a zoom.js plugin do not work in Firefox 35.0.1 would be most appreciated.

    Hi jeremy
    Thanks for sharing the info. We'll look into this and get back.
    Thanks
    Manigandan

  • Inserting edge animate files correctly into Dreamweaver

    Hi there all,
    I am loving edge animate! i have made all sorts of web banners and slideshows!! This is my problem, I have a project i would like to add to a 2 column layout in the right colum but eveytime i insert the project where i believe it should go it appears on the otherside of my screen not in the area i placed it or the containing div..
    Can somebody please help me.. This is my code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--Adobe Edge Runtime-->
        <script type="text/javascript" charset="utf-8" src="publish/web/seal slider_edge.js"></script>
        <script type="text/javascript" charset="utf-8" src="publish/web/seal slider_edgeActions.js"></script>
        <script type="text/javascript" charset="utf-8" src="publish/web/seal slider_edgePreload.js"></script> 
        <style>
            .edgeLoad-EDGE-90061968 { visibility:hidden; }
        </style>
    <title>Seal Snorkeling</title>
    <style type="text/css">
    <!--
    body {
        font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        background-color: #42413C;
        margin: 0;
        padding: 0;
        color: #000;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl {
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;    
        padding-right: 15px;
        padding-left: 15px;
    a img {
        border: none;
    a:link {
        color: #42413C;
        text-decoration: underline;
    a:visited {
        color: #6E6C64;
        text-decoration: underline;
    a:hover, a:active, a:focus {
        text-decoration: none;
    .container {
        width: 960px;
        background-color: #FFF;
        margin: 0 auto;
    .header {
        background-color: #ADB96E;
    .sidebar1 {
        float: left;
        width: 480px;
        background-color: #fff;
        padding-bottom: 10px;
    .content {
        Float: right;
        width: 480px;
        background-color: #fff;
        padding: 10px 0;
        padding-bottom: 10px;
    .stage {
        Float: right;
        width: 480px;
        background-color: #fff;
        padding: 10px 0;
        padding-bottom: 10px;
    .content ul, .content ol {
        padding: 0 15px 15px 40px;
    .footer {
        padding: 10px 0;
        background-color: #CCC49F;
        position: relative;
        clear: both;
    .fltrt { 
        float: right;
        margin-left: 8px;
    .fltlft {
        float: left;
        margin-right: 8px;
    .clearfloat {
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    -->
    </style></head>
    <body>
    <div class="container">
      <div class="header">
    <div style="width: 100%">
    <video controls="width: 987px">
    <source src="seal.mov" type="video/mov" />
    <source src="seal.mp4" type="video/mp4" />
    </video>
    </div></div>
      <div class="sidebar1">
      <img src="logo.jpg" width="470" height="216" align: "right"alt="logo" longdesc="logo.jpg" />
      <p><strong>Seal Snorkeling </strong> in Cape Town is the ultimate wildlife experience for the adventurous.  Plunge into the cool Atlantic ocean and swim with hundreds of playful Cape Fur Seals.  Interact with them in their environment and on their terms.  This half day excursion is for everyone and will be the highlight of your holiday.</p>
      <p><strong>Meeting Times </strong> <br>9am - November to February.</br><br>10am - September to Ovtober $ March to April.</br><br>Please confirm when booking.</br><br>There are afternoon options if the morning is fully booked.</p>
        <p><strong>Meeting Location </strong> <br>We meet inside Hout Bay Harbout, outside the NSRI building.</br> See directions below</p>
        <p><strong>Trip Duration</strong> <br>3 hours.  This includes kitting up, briefing and traveling to and from the island.  On average, visitors spend an hour in the water.</p>
        <p><strong>What is provided?</strong> <br>We provide all equipment, a marine guide, boat ride, educational briefing, water, biscuits, hot chocolate and even a hot water shower to warm you up!</p>
    <img src="divers.jpg" width="470" height="530" align: "right"alt="logo" longdesc="logo.jpg" />
         <div id="content">
        </div>
    </div>
      <div class="content" id="test"><div id="stage" class="EDGE-6752322">
        </div></div>
      <div class="footer">
        <p></p>
    </div>
    </div>
    </body>
    </html>
    If anyone has some advice i would be very grateful, Thanks in advance!!
    Nick

    Hi there,
    Here is a pic of what im talking about, as you can see the edge file is now hovering over the entire project again..  didnt change a thing and now back to artifacts even after restarting please please please help

  • Edge Animate inside DPS Folios

    Hi,
    I just made an animation with Edge Animate CC, then inserted it into a Folio project via .OAM placement in the page.
    Everything works just OK, but one.
    When I keep touching an object inside my composition, like emulating what would be a "mousedown" or touchstart event continously, that object appears with a selection bounding box and the Safari context menu appears with the "Copy" option. Just like if I wanted select this in a regular image in the browser.
    How can I remove that stuff?  May I ask this to the Edge Animate forum as well?
    Thanks

    This is the "default" behaviour in html on an iOs device. The solution whould be to "prevent default"  (look for that in the Animate API ref)

  • Adding html into edge animate text box from external js file

    I have a text field in edge animate that I want to update with a score. The function that is used to click and update the score is in an enternal file so I'm trying to figure out how to get my edge animate div to be read by jquery in the external file. This is what I have so far in the external js but it isn't reading the edge animate text field properly:
    external .js file:
            AdobeEdge.coinCounter += 250; // this calls the variable coinCounter which was set in edgeActions.js and updates it from the original 0 value
                    alert(AdobeEdge.coinCounter); // this shows it works and updated correctly
           var comp = AdobeEdge.getComposition("EDGE-172492634");
           var stage = comp.getStage();
         stage.sym.$("gameText").html(AdobeEdge.coinCounter); // this is where things go wrong. I want this updated value to read back into the textbox called "gameText" that is in the edgeAnimate composition
          stage.sym.$("gameText").html("NewText"); // nothing reads to the "gameText" textbox; something must be wrong how I am referencing it outside of edgeActions in the external .js file
    Would someone mind helping me reference the textbox "gameText" correctly so I can input my new value? Thank you!!

    Thank you. The learning curve is taking me awhile. It works now:
        var checking = AdobeEdge.getComposition("EDGE-172492634").getStage().$("gameText").text();
        alert(checking); //yay!
    Thanks Joel!

  • Adding own javascript to edge animate

    I'm having a bit of trouble adding my own javascipt to an edge animate project. I created a website that has javascipt in it. I am trying to recreate it using edge animate because I was interested in using edge animate to take the site up a notch... basically I have a template of what I need the site to do with the existing javascipt I have, but I haven't gotten it to work integrated into edge animated yet.
    I imported all of the images I have from the existing website into edge animate and then relabled all of the instances on the stage to reflect what I have called them in the javascript. I've tried importing my javascript file into the "scripts" section and then just linking to the source in the main html page that edge generates but the javascript doesn't work. Then I've tried putting parts of the script into the CompositionReady panel and onto the button I want clicked directly in the elements.... this works ok, except I have to change the syntax a little (not too much of a pain except when I don't think the edge animate javascript has the same functions).....I'll post below and see if someone can help me get this working either by just linking to the file directly from the html or making the script campatable in edge syntax and posting it in the appropriate element panel. Here is the seperate script from the outside javascript... show I change the syntax and put it directly on the"checkbutton" button in the elements (if so, how?) or should I just link to the file (if so, how come when I put a simple link in the header that it doesn't work: <script type="text/javascript" charset="utf-8" src="js/myscript.js"></script>
    script from myscript.js:
    //sym.$("pic1a").hide(); //edge animate syntax when in animate panels.... does my external js sheet have to keep this syntax?
    var carArrayX = [140,140,330,460,650,765];
    var carArrayXcounter = 0;
    var carArrayY = [ 440,440,405,390,390,390];
    var carArrayYcounter = 0;
    $( '#blueCar' ).addClass( "hidden" );
    var counterBox = 0;
        $('#checkButton').click(function(){
         if (counterBox == 0)
             alert("Please choose an answer");
         else if (counterBox > 1)
             alert("Please choose only one answer");
         else if (counterBox == 1)
             $(this).css('background-image', 'url(button_down.png)');
             $("#pic2a").unbind("click");
             $("#pic2b").unbind("click");
             $("#pic2c").unbind("click");
             $("#pic2d").unbind("click");
             $("#pic2e").unbind("click");
             $("#pic2f").unbind("click");
               if($("#pic2a").hasClass("hidden")){
               $("#words_correct").removeClass("hidden");          
               $( '#pic3a' ).removeClass( "hidden" ); //correct answer
               $( '#pic1a' ).addClass( "hidden" );
               $( '#blueCar' ).removeClass( "hidden" );
               $('#blueCar').animate({
                left:carArrayX[carArrayXcounter] + "px",
                top:carArrayY[carArrayYcounter] + "px"
               carArrayXcounter ++;
               carArrayYcounter ++;
               var cookieXcounter = carArrayXcounter;
               var cookieYcounter = carArrayYcounter;
               //console.log(cookieXcounter);
               //console.log(cookieYcounter);
               $.cookie('mycookieX',cookieXcounter,{expires:7,path:'/'});
               $.cookie('mycookieY',cookieYcounter,{expires:7,path:'/'});
               console.log($.cookie('mycookieX'));
               $( '#pic1b' ).addClass( "hidden" );
               $( '#pic1c' ).addClass( "hidden" );
               $( '#pic1d' ).addClass( "hidden" );
              else if($("#pic2b").hasClass("hidden")){
               $("#words_wrong").removeClass("hidden");
               $( '#pic4b' ).removeClass("hidden");//incorrect answer
               $( '#pic1b' ).addClass( "hidden" );
               $( '#pic1a' ).addClass( "hidden" );
               $( '#pic1c' ).addClass( "hidden" );
               $( '#pic1d' ).addClass( "hidden" );;
              else if($("#pic2c").hasClass("hidden")){
               $("#words_wrong").removeClass("hidden");          
               $( '#pic4c' ).removeClass( "hidden" );//incorrect answer
               $( '#pic1c' ).addClass( "hidden" );
               $( '#pic1a' ).addClass( "hidden" );
               $( '#pic1b' ).addClass( "hidden" );
               $( '#pic1d' ).addClass( "hidden" );;
              else if($("#pic2d").hasClass("hidden")){
               $("#words_wrong").removeClass("hidden");        
               $( '#pic4d' ).removeClass( "hidden" );//incorrect answer
               $( '#pic1d' ).addClass( "hidden" );
               $( '#pic1a' ).addClass( "hidden" );
               $( '#pic1b' ).addClass( "hidden" );
               $( '#pic1c' ).addClass( "hidden" );;
        $('#pic2a').click(function(){
          $( '#pic1a' ).removeClass( "hidden" );
          $( '#pic2a' ).addClass( "hidden" );
          counterBox++;
        $('#pic2b').click(function(){
          $( '#pic1b' ).removeClass( "hidden" );
          $( '#pic2b' ).addClass( "hidden" );
          counterBox++;
        $('#pic2c').click(function(){
          $( '#pic1c' ).removeClass( "hidden" );
          $( '#pic2c' ).addClass( "hidden" );
          counterBox++;
        $('#pic2d').click(function(){
          $( '#pic1d' ).removeClass( "hidden" );
          $( '#pic2d' ).addClass( "hidden" );
          counterBox++;
        $('#pic2e').click(function(){
          $( '#pic1e' ).removeClass( "hidden" );
          $( '#pic2e' ).addClass( "hidden" );
          counterBox++;
        $('#pic2f').click(function(){
          $( '#pic1f' ).removeClass( "hidden" );
          $( '#pic2f' ).addClass( "hidden" );
          counterBox++;
        $('#pic1a').click(function(){
          $( '#pic2a' ).removeClass( "hidden" );
          $( '#pic1a' ).addClass( "hidden" );
          counterBox--;
        $('#pic1b').click(function(){
          $( '#pic2b' ).removeClass( "hidden" );
          $( '#pic1b' ).addClass( "hidden" );
          counterBox--;
        $('#pic1c').click(function(){
          $( '#pic2c' ).removeClass( "hidden" );
          $( '#pic1c' ).addClass( "hidden" );
          counterBox--;
        $('#pic1d').click(function(){
          $( '#pic2d' ).removeClass( "hidden" );
          $( '#pic1d' ).addClass( "hidden" );
          counterBox--;
        $('#pic1e').click(function(){
          $( '#pic2e' ).removeClass( "hidden" );
          $( '#pic1e' ).addClass( "hidden" ); 
          counterBox--;
        $('#pic1f').click(function(){
          $( '#pic2f' ).removeClass( "hidden" );
          $( '#pic1f' ).addClass( "hidden" );
          counterBox--;

    I also had the problem of wanting to use custom javascript that I could call from an Edge Animate Composition.
    The solution I found (from a post by hemanth kumar r https://forums.adobe.com/thread/1479495) was to make variables and functions properties of AdobeEdge.
    So in the external .js document a variable is declared and given a value:
    AdobeEdge.myVariableName = "The variable value";
    To use it in a symbol/element:
    alert(AdobeEdge.myVariableName);
    And a function is declared:
    AdobeEdge.myFunctionName(param){...function code...} //param optional
    To call these in a symbol/element:
    AdobeEdge.myFunctionName(param);
    To test this out I created a button on my stage that called a function in my custom .js file that simply called an alert. Once the function works you can expand it to do anything you want (I used it to go to a new html page).
    Peter Small

  • Edge Animate loads JS files twice

    HI,
    Does anyone know why Edge animate loads all the javascript files and JQuery and Edge Libraries twice. Is there a way to prevent or override this?
    When profiling my animation with Safari and Chrome, in the Network requiements you can see that these file are loaded twice, increasing the network requirements.
    It seems that the first time the format is not recognized given that the icon next to the files is for IMG. The second time it is loaded then it gets the icon for JS.
    Has anyone seen this?

    Sarah,
    Yes, this is the only way Yepnope 1.0.x works and 1.5.x still does such things. There are changes in this area in 1.5.x though. Yepnope exposed two direct methods to inject JS and CSS files. So yepnope({load: ...}) will preload files first and inject them after. Direct methods don't preload files. As far as Edge Animate doesn't use full power of yepnope, there is good chance that direct method will work good:
    yepnope.injectJs( scriptSource [, callback ] [, elemAttributes ] [, timeout ]);
    yepnope.injectCss( stylesheetSource [, callback ] [, elemAttributes ] [, timeout ]);
    Simplest testcase:
    <!DOCTYPE html>
    <html>
    <head>
              <script src="http://cdnjs.cloudflare.com/ajax/libs/yepnope/1.5.4/yepnope.min.js"></script>
              <script>
                        yepnope.injectCss('http://cdnjs.cloudflare.com/ajax/libs/1140/2.0/1140.css');
                        yepnope.injectJs('http://cdnjs.cloudflare.com/ajax/libs/Base64/0.1.3/base64.min.js')
              </script>
    </head>
    <body>
    </body>
    </html>

  • SEO and edge animate

    Hey there adobe forum
    I would like to know, how the best way of implementing edge animate to your html files for seo.
    as for now, I just publish on the adobe cdn and as static html.
    it looks like this as for now:
    <script src="edgefile.edgePreload"></script>
    <html>
    <body>
    <div id="stage1(we have around 4 compositions) class="edge_menu"></div>
    <body>
    <html>
    But? Should I put the whole html output from the static file adobe genereates in my html file?
    Hope this makes sense hehe.
    Mikkel Madsen

    HTML file:
    <!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>footer</title>
    <!--Adobe Edge Runtime-->
        <script type="text/javascript" charset="utf-8" src="footer_edgePreload.js"></script>
        <style>
            .edgeLoad-footer { visibility:hidden; }
        </style>
    <!--Adobe Edge Runtime End-->
    </head>
    <body style="margin:0;padding:0;">
              <div id="Stage" class="footer">
              </div>
    </body>
    </html>
    footer_edge.js
    * Adobe Edge: symbol definitions
    (function($, Edge, compId){
    //images folder
    var im='images/';
    var fonts = {};    fonts['doppio-one, sans-serif']='<script src=\"http://use.edgefonts.net/doppio-one:n4:all.js\"></script>';
        fonts['Oxygen, sans-serif']='<link href=\'http://fonts.googleapis.com/css?family=Oxygen\' rel=\'stylesheet\' type=\'text/css\'>';
    var opts = {};
    var resources = [
    var symbols = {
    "stage": {
        version: "3.0.0",
        minimumCompatibleVersion: "3.0.0",
        build: "3.0.0.322",
        baseState: "Base State",
        scaleToFit: "none",
        centerStage: "none",
        initialState: "Base State",
        gpuAccelerate: false,
        resizeInstances: false,
        content: {
                dom: [
                    id: 'Text2',
                    type: 'text',
                    rect: ['96px', '165px','326px','99px','auto', 'auto'],
                    text: "CRAFTHOUSE I/S",
                    align: "left",
                    font: ['doppio-one, sans-serif', 24, "rgba(0,0,0,1)", "400", "none", "normal"]
                    id: 'Text2Copy',
                    type: 'text',
                    rect: ['96px', '165px','326px','99px','auto', 'auto'],
                    text: "Kontakt",
                    align: "left",
                    font: ['doppio-one, sans-serif', 24, "rgba(0,0,0,1)", "400", "none", "normal"]
                    id: 'Text2Copy2',
                    type: 'text',
                    rect: ['96px', '165px','326px','99px','auto', 'auto'],
                    text: "Hold dig updateret her",
                    align: "left",
                    font: ['doppio-one, sans-serif', 24, "rgba(0,0,0,1)", "400", "none", "normal"]
                    id: 'Text3',
                    type: 'text',
                    rect: ['0px', '148px','196px','19px','auto', 'auto'],
                    text: "Udviklet af",
                    align: "left",
                    font: ['Oxygen, sans-serif', 12, "rgba(255,255,255,1.00)", "normal", "none", "normal"]
                    id: 'Text4',
                    type: 'text',
                    rect: ['1px', '214px','227px','19px','auto', 'auto'],
                    text: "Mjøsensgade 14, 1.sal tv",
                    align: "left",
                    font: ['Oxygen, sans-serif', 14, "rgba(255,255,255,1.00)", "normal", "none", "normal"]
                    id: 'Text4Copy',
                    type: 'text',
                    rect: ['1px', '250px','227px','19px','auto', 'auto'],
                    text: "2300 København S",
                    align: "left",
                    font: ['Oxygen, sans-serif', 14, "rgba(255,255,255,1.00)", "normal", "none", "normal"]
                    id: 'Text4Copy2',
                    type: 'text',
                    rect: ['1px', '286px','227px','19px','auto', 'auto'],
                    text: "Danmark",
                    align: "left",
                    font: ['Oxygen, sans-serif', 14, "rgba(255,255,255,1.00)", "normal", "none", "normal"]
                    id: 'Text4Copy9',
                    type: 'text',
                    rect: ['409px', '287px','227px','19px','auto', 'auto'],
                    text: "CVR-nr: 35128638 ",
                    align: "left",
                    font: ['Oxygen, sans-serif', 14, "rgba(255,255,255,1.00)", "normal", "none", "normal"]
                    id: 'homepage',
                    type: 'rect',
                    rect: ['1', '323','auto','auto','auto', 'auto'],
                    cursor: ['pointer']
                    id: 'Text4Copy7',
                    type: 'text',
                    rect: ['443px', '214px','109px','19px','auto', 'auto'],
                    text: "+45 60 24 75 98",
                    align: "left",
                    font: ['Oxygen, sans-serif', 14, "rgba(255,255,255,1.00)", "normal", "none", "normal"]
                    id: 'Text4Copy6',
                    type: 'text',
                    rect: ['443px', '249px','131px','19px','auto', 'auto'],
                    text: "[email protected]",
                    align: "left",
                    font: ['Oxygen, sans-serif', 14, "rgba(255,255,255,1.00)", "normal", "none", "normal"]
                    id: 'Text4Copy4',
                    type: 'text',
                    rect: ['409px', '323px','227px','19px','auto', 'auto'],
                    text: "© Crafthouse I/S 2013",
                    align: "left",
                    font: ['Oxygen, sans-serif', 14, "rgba(255,255,255,1.00)", "900", "none", "normal"]
                    id: 'phone_logo',
                    type: 'image',
                    rect: ['409px', '213px','20px','20px','auto', 'auto'],
                    fill: ["rgba(0,0,0,0)",im+"phone_logo.png",'0px','0px']
                    id: 'mail_ikon',
                    type: 'image',
                    rect: ['409px', '248px','20px','20px','auto', 'auto'],
                    fill: ["rgba(0,0,0,0)",im+"mail_ikon.png",'0px','0px']
                    id: 'logo',
                    type: 'rect',
                    rect: ['1', '35','auto','auto','auto', 'auto'],
                    cursor: ['pointer']
                    id: 'Rectangle3',
                    type: 'rect',
                    rect: ['1px', '241px','166px','1px','auto', 'auto'],
                    fill: ["rgba(102,102,102,1.00)"],
                    stroke: [0,"rgb(0, 0, 0)","none"]
                    id: 'Rectangle3Copy',
                    type: 'rect',
                    rect: ['1px', '277px','166px','1px','auto', 'auto'],
                    fill: ["rgba(102,102,102,1.00)"],
                    stroke: [0,"rgb(0, 0, 0)","none"]
                    id: 'Rectangle3Copy2',
                    type: 'rect',
                    rect: ['1px', '314px','166px','1px','auto', 'auto'],
                    fill: ["rgba(102,102,102,1.00)"],
                    stroke: [0,"rgb(0, 0, 0)","none"]
                    id: 'Rectangle3Copy5',
                    type: 'rect',
                    rect: ['409px', '241px','166px','1px','auto', 'auto'],
                    fill: ["rgba(102,102,102,1.00)"],
                    stroke: [0,"rgb(0, 0, 0)","none"]
                    id: 'Rectangle3Copy4',
                    type: 'rect',
                    rect: ['409px', '277px','166px','1px','auto', 'auto'],
                    fill: ["rgba(102,102,102,1.00)"],
                    stroke: [0,"rgb(0, 0, 0)","none"]
                    id: 'Rectangle3Copy3',
                    type: 'rect',
                    rect: ['409px', '314px','166px','1px','auto', 'auto'],
                    fill: ["rgba(102,102,102,1.00)"],
                    stroke: [0,"rgb(0, 0, 0)","none"]
                    id: 'Rectangle4',
                    type: 'rect',
                    rect: ['437px', '214px','1px','15px','auto', 'auto'],
                    fill: ["rgba(71,71,71,1.00)"],
                    stroke: [0,"rgb(0, 0, 0)","none"]
                    id: 'Rectangle4Copy',
                    type: 'rect',
                    rect: ['437px', '250px','1px','15px','auto', 'auto'],
                    fill: ["rgba(71,71,71,1.00)"],
                    stroke: [0,"rgb(0, 0, 0)","none"]
                    id: 'facebook_ikon_hover2',
                    type: 'image',
                    rect: ['785px', '212px','43px','43px','auto', 'auto'],
                    cursor: ['pointer'],
                    fill: ["rgba(0,0,0,0)",im+"facebook_ikon_hover.png",'0px','0px']
                    id: 'googleplus_ikon_hover',
                    type: 'image',
                    rect: ['851px', '212px','43px','43px','auto', 'auto'],
                    cursor: ['pointer'],
                    fill: ["rgba(0,0,0,0)",im+"googleplus_ikon_hover.png",'0px','0px']
                    id: 'footer_blog_icon',
                    type: 'image',
                    rect: ['917px', '212px','43px','43px','auto', 'auto'],
                    cursor: ['pointer'],
                    fill: ["rgba(0,0,0,0)",im+"footer_blog_icon.png",'0px','0px']
                symbolInstances: [
                    id: 'logo',
                    symbolName: 'logo',
                    autoPlay: {
                    id: 'homepage',
                    symbolName: 'homepage',
                    autoPlay: {
        states: {
            "Base State": {
                "${_Text4Copy6}": [
                    ["style", "top", '249px'],
                    ["style", "width", '131px'],
                    ["style", "height", '19px'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "font-family", 'Oxygen, sans-serif'],
                    ["style", "left", '443px'],
                    ["style", "font-size", '14px']
                "${_Text2Copy}": [
                    ["style", "top", '163px'],
                    ["style", "width", '186px'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "font-weight", '400'],
                    ["style", "height", '31px'],
                    ["style", "font-family", 'doppio-one, sans-serif'],
                    ["style", "left", '409px'],
                    ["style", "font-size", '16px']
                "${_googleplus_ikon_hover}": [
                    ["style", "top", '212px'],
                    ["style", "left", '851px'],
                    ["style", "cursor", 'pointer']
                "${_Rectangle3Copy2}": [
                    ["color", "background-color", 'rgba(102,102,102,1.00)'],
                    ["style", "top", '314px']
                "${_Text2}": [
                    ["style", "top", '163px'],
                    ["style", "font-size", '16px'],
                    ["style", "height", '31px'],
                    ["style", "font-family", 'doppio-one, sans-serif'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "font-weight", '400'],
                    ["style", "left", '0px'],
                    ["style", "width", '186px']
                "${_Text2Copy2}": [
                    ["style", "top", '163px'],
                    ["style", "font-size", '16px'],
                    ["style", "height", '29px'],
                    ["style", "font-family", 'doppio-one, sans-serif'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "font-weight", '400'],
                    ["style", "left", '785px'],
                    ["style", "width", '175px']
                "${_Rectangle4Copy}": [
                    ["style", "top", '250px'],
                    ["style", "height", '15px'],
                    ["color", "background-color", 'rgba(71,71,71,1.00)'],
                    ["style", "left", '437px'],
                    ["style", "width", '1px']
                "${_Text4Copy}": [
                    ["style", "top", '250px'],
                    ["style", "height", '19px'],
                    ["style", "font-family", 'Oxygen, sans-serif'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "font-size", '14px']
                "${_Rectangle3Copy4}": [
                    ["style", "top", '277px'],
                    ["style", "left", '409px'],
                    ["color", "background-color", 'rgba(102,102,102,1.00)']
                "${_Rectangle4}": [
                    ["color", "background-color", 'rgba(71,71,71,1.00)'],
                    ["style", "height", '15px'],
                    ["style", "top", '214px'],
                    ["style", "left", '437px'],
                    ["style", "width", '1px']
                "${_Text4}": [
                    ["style", "top", '214px'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "height", '19px'],
                    ["style", "font-family", 'Oxygen, sans-serif'],
                    ["style", "left", '1px'],
                    ["style", "font-size", '14px']
                "${_Text3}": [
                    ["style", "top", '148px'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "font-family", 'Oxygen, sans-serif'],
                    ["style", "left", '0px'],
                    ["style", "font-size", '12px']
                "${_logo}": [
                    ["style", "top", '47px'],
                    ["style", "left", '0px'],
                    ["style", "cursor", 'pointer'],
                    ["transform", "scaleX", '1.0144']
                "${_Text4Copy9}": [
                    ["style", "top", '287px'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "height", '19px'],
                    ["style", "font-family", 'Oxygen, sans-serif'],
                    ["style", "left", '409px'],
                    ["style", "font-size", '14px']
                "${_phone_logo}": [
                    ["style", "left", '409px'],
                    ["style", "top", '213px']
                "${_Rectangle3Copy3}": [
                    ["style", "top", '314px'],
                    ["style", "left", '409px'],
                    ["color", "background-color", 'rgba(102,102,102,1.00)']
                "${_facebook_ikon_hover2}": [
                    ["style", "top", '212px'],
                    ["style", "left", '785px'],
                    ["style", "cursor", 'pointer']
                "${_footer_blog_icon}": [
                    ["style", "top", '212px'],
                    ["style", "left", '917px'],
                    ["style", "cursor", 'pointer']
                "${_Rectangle3Copy5}": [
                    ["color", "background-color", 'rgba(102,102,102,1.00)'],
                    ["style", "left", '409px'],
                    ["style", "top", '241px']
                "${_Rectangle3}": [
                    ["color", "background-color", 'rgba(102,102,102,1.00)']
                "${_Rectangle3Copy}": [
                    ["color", "background-color", 'rgba(102,102,102,1.00)'],
                    ["style", "top", '277px']
                "${_Text4Copy4}": [
                    ["style", "top", '323px'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "font-family", 'Oxygen, sans-serif'],
                    ["style", "height", '19px'],
                    ["style", "font-weight", '900'],
                    ["style", "left", '409px'],
                    ["style", "font-size", '14px']
                "${_homepage}": [
                    ["style", "cursor", 'pointer']
                "${_Stage}": [
                    ["color", "background-color", 'rgba(255,255,255,0.00)'],
                    ["style", "width", '960px'],
                    ["style", "height", '400px'],
                    ["style", "overflow", 'hidden']
                "${_Text4Copy2}": [
                    ["style", "top", '286px'],
                    ["style", "height", '19px'],
                    ["style", "font-family", 'Oxygen, sans-serif'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "font-size", '14px']
                "${_Text4Copy7}": [
                    ["style", "top", '214px'],
                    ["style", "width", '109px'],
                    ["style", "height", '19px'],
                    ["color", "color", 'rgba(255,255,255,1.00)'],
                    ["style", "font-family", 'Oxygen, sans-serif'],
                    ["style", "left", '443px'],
                    ["style", "font-size", '14px']
                "${_mail_ikon}": [
                    ["style", "left", '409px'],
                    ["style", "top", '248px']
        timelines: {
            "Default Timeline": {
                fromState: "Base State",
                toState: "",
                duration: 0,
                autoPlay: true,
                timeline: [
                    { id: "eid11", tween: [ "style", "${_Text2Copy}", "height", '31px', { fromValue: '31px'}], position: 0, duration: 0 },
                    { id: "eid5", tween: [ "style", "${_Text2}", "height", '31px', { fromValue: '31px'}], position: 0, duration: 0 },
                    { id: "eid42", tween: [ "style", "${_logo}", "top", '47px', { fromValue: '47px'}], position: 0, duration: 0 },
                    { id: "eid6", tween: [ "style", "${_Text2}", "font-size", '16px', { fromValue: '16px'}], position: 0, duration: 0 },
                    { id: "eid50", tween: [ "transform", "${_logo}", "scaleX", '1.0144', { fromValue: '1.0144'}], position: 0, duration: 0 },
                    { id: "eid38", tween: [ "style", "${_Text2}", "top", '163px', { fromValue: '163px'}], position: 0, duration: 0 },
                    { id: "eid66", tween: [ "style", "${_Text2Copy2}", "width", '175px', { fromValue: '175px'}], position: 0, duration: 0 },
                    { id: "eid9", tween: [ "style", "${_Text2Copy}", "font-size", '16px', { fromValue: '16px'}], position: 0, duration: 0 },
                    { id: "eid72", tween: [ "style", "${_Text2Copy2}", "top", '163px', { fromValue: '163px'}], position: 0, duration: 0 },
                    { id: "eid51", tween: [ "style", "${_logo}", "left", '0px', { fromValue: '0px'}], position: 0, duration: 0 },
                    { id: "eid67", tween: [ "style", "${_Text2Copy2}", "left", '785px', { fromValue: '785px'}], position: 0, duration: 0 },
                    { id: "eid2", tween: [ "style", "${_Text2}", "left", '0px', { fromValue: '0px'}], position: 0, duration: 0 },
                    { id: "eid20", tween: [ "style", "${_Text2Copy2}", "font-size", '16px', { fromValue: '16px'}], position: 0, duration: 0 },
                    { id: "eid54", tween: [ "gradient", "${_Stage}", "background-image", [270,[['rgba(255,255,255,0.00)',0],['rgba(255,255,255,0.00)',100]]], { fromValue: [270,[['rgba(255,255,255,0.00)',0],['rgba(255,255,255,0.00)',100]]]}], position: 0, duration: 0 },
                    { id: "eid64", tween: [ "style", "${_Text2Copy}", "top", '163px', { fromValue: '163px'}], position: 0, duration: 0 },
                    { id: "eid13", tween: [ "style", "${_Text2Copy}", "width", '186px', { fromValue: '186px'}], position: 0, duration: 0 },
                    { id: "eid55", tween: [ "color", "${_Stage}", "background-color", 'rgba(255,255,255,0.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(255,255,255,0.00)'}], position: 0, duration: 0 },
                    { id: "eid22", tween: [ "color", "${_Text2Copy2}", "color", 'rgba(255,255,255,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(255,255,255,1.00)'}], position: 0, duration: 0 },
                    { id: "eid18", tween: [ "color", "${_Text2}", "color", 'rgba(255,255,255,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(255,255,255,1.00)'}], position: 0, duration: 0 },
                    { id: "eid62", tween: [ "style", "${_Text2Copy}", "left", '409px', { fromValue: '409px'}], position: 0, duration: 0 },
                    { id: "eid17", tween: [ "color", "${_Text2Copy}", "color", 'rgba(255,255,255,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(255,255,255,1.00)'}], position: 0, duration: 0 },
                    { id: "eid40", tween: [ "style", "${_Text2Copy2}", "height", '29px', { fromValue: '29px'}], position: 0, duration: 0 },
                    { id: "eid4", tween: [ "style", "${_Text2}", "width", '186px', { fromValue: '186px'}], position: 0, duration: 0 }            ]
    "logo": {
        version: "3.0.0",
        minimumCompatibleVersion: "3.0.0",
        build: "3.0.0.322",
        baseState: "Base State",
        scaleToFit: "none",
        centerStage: "none",
        initialState: "Base State",
        gpuAccelerate: false,
        resizeInstances: false,
        content: {
                dom: [
                        id: 'logo_footer',
                        type: 'image',
                        rect: ['0px', '0px', '200px', '80px', 'auto', 'auto'],
                        fill: ['rgba(0,0,0,0)', 'images/logo_footer.png', '0px', '0px']
                        id: 'logo_footer_hover',
                        type: 'image',
                        rect: ['0', '0', '200px', '80px', 'auto', 'auto'],
                        fill: ['rgba(0,0,0,0)', 'images/logo_footer_hover.png', '0px', '0px']
                        rect: ['0px', '1px', '200px', '80px', 'auto', 'auto'],
                        id: 'wrapper',
                        stroke: [0, 'rgb(0, 0, 0)', 'none'],
                        type: 'rect',
                        fill: ['rgba(192,192,192,1)']
                symbolInstances: [
        states: {
            "Base State": {
                "${_wrapper}": [
                    ["style", "opacity", '0']
                "${_logo_footer_hover}": [
                    ["style", "opacity", '0']
                "${_logo_footer}": [
                    ["style", "left", '0px'],
                    ["style", "top", '0px']
                "${symbolSelector}": [
                    ["style", "height", '80px'],
                    ["style", "width", '200px']
        timelines: {
            "Default Timeline": {
                fromState: "Base State",
                toState: "",
                duration: 500,
                autoPlay: false,
                timeline: [
                    { id: "eid16", tween: [ "style", "${_logo_footer_hover}", "opacity", '1', { fromValue: '0'}], position: 0, duration: 500 }            ]
    "homepage": {
        version: "3.0.0",
        minimumCompatibleVersion: "3.0.0",
        build: "3.0.0.322",
        baseState: "Base State",
        scaleToFit: "none",
        centerStage: "none",
        initialState: "Base State",
        gpuAccelerate: false,
        resizeInstances: false,
        content: {
                dom: [
                        rect: ['0px', '0px', '138px', '19px', 'auto', 'auto'],
                        font: ['Oxygen, sans-serif', 14, 'rgba(255,255,255,1.00)', '900', 'none', 'normal'],
                        id: 'Text4Copy3',
                        text: 'www.crafthouse.dk',
                        align: 'left',
                        type: 'text'
                symbolInstances: [
        states: {
            "Base State": {
                "${_Text4Copy3}": [
                    ["style", "top", '0px'],
                    ["style", "font-size", '14px'],
                    ["color", "color", 'rgba(255,255,255,1)'],
                    ["style", "font-weight", '900'],
                    ["style", "height", '19px'],
                    ["style", "font-family", 'Oxygen, sans-serif'],
                    ["style", "left", '0px'],
                    ["style", "width", '138px']
                "${symbolSelector}": [
                    ["style", "height", '19px'],
                    ["style", "width", '138px']
        timelines: {
            "Default Timeline": {
                fromState: "Base State",
                toState: "",
                duration: 500,
                autoPlay: false,
                timeline: [
                    { id: "eid45", tween: [ "color", "${_Text4Copy3}", "color", 'rgba(87,182,221,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(255,255,255,1)'}], position: 0, duration: 500 }            ]
    Edge.registerCompositionDefn(compId, symbols, fonts, resources, opts);
    * Adobe Edge DOM Ready Event Handler
    $(window).ready(function() {
         Edge.launchComposition(compId);
    })(jQuery, AdobeEdge, "footer");
    footer_EdgeActions.js
    * Adobe Edge Animate Composition Actions
    * Edit this file with caution, being careful to preserve
    * function signatures and comments starting with 'Edge' to maintain the
    * ability to interact with these actions from within Adobe Edge Animate
    (function($, Edge, compId){
    var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes
       //Edge symbol: 'stage'
       (function(symbolName) {
          Symbol.bindElementAction(compId, symbolName, "${_facebook_ikon_hover2}", "click", function(sym, e) {
             // Navigate to a new URL in the current window
             // (replace "_self" with appropriate target attribute for a new window)
             window.open("https://www.facebook.com/pages/Mysoleshop/553274264767573?fref=ts", "_blank");
          //Edge binding end
          Symbol.bindElementAction(compId, symbolName, "${_googleplus_ikon_hover}", "click", function(sym, e) {
             // Navigate to a new URL in the current window
             // (replace "_self" with appropriate target attribute for a new window)
             window.open("https://plus.google.com/117807343087553474293/posts", "_blank");
          //Edge binding end
          Symbol.bindElementAction(compId, symbolName, "${_homepage}", "click", function(sym, e) {
             // Navigate to a new URL in the current window
             // (replace "_self" with appropriate target attribute for a new window)
             window.open("http://www.crafthouse.dk", "_blank");
          //Edge binding end
          Symbol.bindElementAction(compId, symbolName, "${_footer_blog_icon}", "click", function(sym, e) {
             // Navigate to a new URL in the current window
             // (replace "_self" with appropriate target attribute for a new window)
             window.open("http://www.mysoleshopblog.dk", "_blank");
          //Edge binding end
       })("stage");
       //Edge symbol end:'stage'
       //=========================================================
       //Edge symbol: 'logo'
       (function(symbolName) {  
          Symbol.bindElementAction(compId, symbolName, "${_wrapper}", "click", function(sym, e) {
             // insert code for mouse click here
             // Navigate to a new URL in the current window
             // (replace "_self" with appropriate target attribute for a new window)
             window.open("http://www.mysoleshop.dk", "_top");
          //Edge binding end
          Symbol.bindElementAction(compId, symbolName, "${_wrapper}", "mouseover", function(sym, e) {
             // insert code to be run when the mouse hovers over the object
             sym.play();
          //Edge binding end
          Symbol.bindElementAction(compId, symbolName, "${_wrapper}", "mouseout", function(sym, e) {
             // insert code to be run when the mouse is moved off the object
             sym.playReverse();
          //Edge binding end
       })("logo");
       //Edge symbol end:'logo'
       //=========================================================
       //Edge symbol: 'homepage'
       (function(symbolName) {  
          Symbol.bindElementAction(compId, symbolName, "${_Text4Copy3}", "mouseover", function(sym, e) {
             sym.play();
          //Edge binding end
          Symbol.bindElementAction(compId, symbolName, "${_Text4Copy3}", "mouseout", function(sym, e) {
             sym.playReverse();
          //Edge binding end
       })("homepage");
       //Edge symbol end:'homepage'
    })(jQuery, AdobeEdge, "footer");
    edge_edgePreload.js
    * Adobe Edge Preloader
    * Do Not Edit this file
    window.AdobeEdge = window.AdobeEdge || {};
    // Include yepnope
    if(!AdobeEdge.yepnope) {
    /*yepnope1.5.x|WTFPL*/
    (function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1) },0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img "!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y [c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l. onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.in sertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h ()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p= [],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script" :u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f =0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e :e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url] ?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop() .split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(), e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}v ar h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i) ,i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);els e Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a )},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.ad dEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A, 0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs= function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.read yState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k. onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for( j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}})(this,document);Ado beEdge.yepnope = window.yepnope;
    // end yepnope
    (function(compId){
       var htFallbacks;
    var testEle=document.createElement("div");function isSupported(a){var d=testEle.style,b;for(i=0;i<a.length;i++)if(b=a[i],void 0!==d[b])return!0;return!1}function supportsRGBA(){testEle.cssText="background-color:rgba(150,255,150,.5)";return 0==(""+testEle.style.backgroundColor).indexOf("rgba")?!0:!1}
    var hasTransform=isSupported(["transformProperty","WebkitTransform","MozTransform","OTransfor m","msTransform"]),hasSVG=!!document.createElementNS&&!!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect,hasRGBA=supportsRGBA(),hasJSON=window.JSON&&window.JSON.parse&&wind ow.JSON.stringify,readyToPlay=!1;function safeColor(a){a=""+a;if(!hasRGBA&&0==a.indexOf("rgba")){var d=a.lastIndexOf(",");0<d&&(a="rgb("+a.substring(5,d)+")")}return a}
    AdobeEdge._preloaders=AdobeEdge._preloaders||[];AdobeEdge._preloaders.push(function(){file sToLoad&&(loadResources(filesToLoad),filesToLoad=void 0)});function doLoadResources(){for(var a=0;a<AdobeEdge._preloaders.length;a++)AdobeEdge._preloaders[a]()}AdobeEdge._readyplayers =AdobeEdge._readyplayers||[];AdobeEdge._readyplayers.push(function(){readyToPlay&&AdobeEdg e.okToLaunchComposition(compId)});
    function playWhenReady(){AdobeEdge._playWhenReady=!0;for(var a=0;a<AdobeEdge._readyplayers.length;a++)AdobeEdge._readyplayers[a]()}function edgeCallback(a,d,b){htFallbacks[a]&&(a=htFallbacks[a]);AdobeEdge.preload.got[a]=!0;a==Ado beEdge.preload.last&&(!AdobeEdge.bootstrapLoading||AdobeEdge._playWhenReady?AdobeEdge.okTo LaunchComposition(compId):readyToPlay=!0,AdobeEdge.preload.busy=!1,0<AdobeEdge.preload.q.l ength&&(a=AdobeEdge.preload.q.pop(),AdobeEdge.requestResources(a.files,a.callback)))}
    AdobeEdge.requestResources=AdobeEdge.requestResources||function(a,d){AdobeEdge.yepnope.err orTimeout=4E3;AdobeEdge.preload.busy=!0;AdobeEdge.preload.got=AdobeEdge.preload.got||{};va r b,k=a.length,f=[],c;for(b=0;b<k;b++){c=a[b];if("string"===typeof c)0===c.indexOf("//")&&0===window.location.href.indexOf("file://")&&(c="http:"+c),url=c,c ={load:url};else if(c.load&&0===c.load.indexOf("//")&&0===window.location.href.indexOf("file://")&&(c.load ="http:"+c.load),url=c.yep||c.load,c.callback){var g=c.callback;
    c.callback=function(a,b,c){g(a,b,c)&&d(a,b,c)}}c.callback||(c.callback=d);AdobeEdge.preloa d.got[url]||(f.push(c),AdobeEdge.preload.last=url)}f.length&&AdobeEdge.yepnope(f)};var filesToLoad,dlContent,preContent,doDelayLoad,signaledLoading,loadingEvt,requiresSVG,htLoo kup={},aLoader,aEffectors,plSTF,ctrPlS,minPlW,maxPlW,plHeight,plWidth;
    function loadResources(a,d){AdobeEdge.preload=AdobeEdge.preload||[];AdobeEdge.preload.q=AdobeEdge. preload.q||[];d||!isCapable()?filesToLoad=a:AdobeEdge.preload.busy?AdobeEdge.preload.q.pus h({files:a,callback:edgeCallback}):AdobeEdge.requestResources(a,edgeCallback)}function splitUnits(a){var d={};d.num=parseFloat(a);"string"==typeof a&&(d.units=a.match(/[a-zA-Z%]+$/));d.units&&"object"==typeof d.units&&(d.units=d.units[0]);return d}
    function defaultUnits(a){var d=a;"auto"!==a&&((a=splitUnits(a))&&a.units||(d+="px"));return d}function findNWC(a,d){if(-1!=String(a.className).indexOf(d))return a;for(var b=a.childNodes,k=0;k<b.length;k++){var f=findNWC(b[k],d);if(!1!=f)return f}return!1}function parent(a){return a.parentElement}function offset(a){a=a.getBoundingClientRect();return{left:a.left+window.pageXOffset,top:a.top+win dow.pageYOffset}}function width(a){return a.offsetWidth}function height(a){return a.offsetHeight}
    function isWrapped(a){return/center-wrapper/.test(parent(a).className)}function wrapForStageScaling(a){if(!isWrapped(a)){var d=document.createElement("div"),b=document.createElement("div");d.className="flow-wrapper ";b.className="center-wrapper";d.style.width="1px";d.appendChild(b);parent(a).insertBefore (d,a);b.appendChild(a)}}
    function bindPSS(a,d){if(!isWrapped(a)){var b=function(){var b=isWrapped(a),f=b?parent(parent(parent(a))):parent(a),c=width(f),g=height(f),h=width(a), n=height(a),m=window.innerHeight,e=1,l=a.style;(f="body"===f.nodeName.toLowerCase())&&(g=m );c=Math.round(c);g=Math.round(g);c/=h;g/=n;"both"===d?e=Math.min(c,g):"height"===d?e=g:"w idth"===d&&(e=c);void 0!==maxPlW&&(e=Math.min(e,parseInt(maxPlW,10)/h));void 0!==minPlW&&(e=Math.max(e,parseInt(minPlW,10)/h));g="scale("+e+")";l.transformOrigin="0 0";l.oTransformOrigin=
    "0 0";l.msTransformOrigin="0 0";l.webkitTransformOrigin="0 0";l.mozTransformOrigin="0 0";l.oTransformOrigin="0 0";l.transform=g;l.oTransform=g;l.msTransform=g;l.webkitTransform=g;l.mozTransform=g;l.oT ransform=g;if(!f||b)parent(a).style.height=Math.round(n*e)+"px",parent(a).style.width=Math .round(h*e)+"px";b&&(b=parent(parent(a)),b.style.height=Math.round(n*e+offset(a).top-offse t(b).top))};wrapForStageScaling(a);window.addEventListener("resize",function(){b()});b()}}
    function centerThePreloadStage(a,d){isWrapped(a)&&(a=parent(a));var b=a.style;/^both$|^horizontal$/.test(d)&&(b.position="absolute",b.marginLeft="auto",b.mar ginRight="auto",b.left="0",b.right="0");/^both$|^vertical$/.test(d)&&(b.position="absolute ",b.marginTop="auto",b.marginBottom="auto",b.top="0",b.bottom="0")}
    function simpleContent(a,d,b){var k=document.getElementsByTagName("body")[0],f=b||findNWC(k,compId),c,g,h;f?"absolute"!=f.s tyle.position&&"relative"!=f.style.position&&(f.style.position="relative"):f=k;plHeight&&( f.style.height=plHeight);plWidth&&(f.style.width=plWidth);/^height$|^width$|^both$/.test(p lSTF)&&d&&!b&&bindPSS(f,plSTF);/^vertical$|^horizontal$|^both$/.test(ctrPlS)&&d&&!b&&cente rThePreloadStage(f,ctrPlS);for(var n=0;n<a.length;n++){b=a[n];"image"===b.type?(k=document.createElement("img"),
    k.src=b.fill[1]):k=document.createElement("div");k.id=b.id;h=k.style;if("text"==b.type){if (c=b.font)c[0]&&""!==c[0]&&(h.fontFamily=c[0]),"object"!=typeof c[1]&&(c[1]=[c[1]]),c[1][1]||(c[1][1]="px"),c[1][0]&&""!==c[1][0]&&(h.fontSize=c[1][0]+c[ 1][1]),c[2]&&""!==c[2]&&(h.color=safeColor(c[2])),c[3]&&""!==c[3]&&(h.fontWeight=c[3]),c[4 ]&&""!==c[4]&&(h.textDecoration=b.font[4]),c[5]&&""!==c[5]&&(h.fontStyle=b.font[5]);b.alig n&&"auto"!=b.align&&(h.textAlign=b.align);b.position&&(h.position=b.position);
    (!b.rect[2]||0>=b.rect[2])&&(!b.rect[3]||0>=b.rect[3])&&(h.whiteSpace="nowrap");k.innerHTM L=b.text}d&&(k.className=d);h.position="absolute";c=b.rect[0];g=b.rect[1];if(b.transform&& b.transform[0]){var m=b.transform[0][0],e=splitUnits(m);if(e&&e.units&&(m=e.num,"%"==e.units&&b.rect[2])){var e=b.rect[2],l=splitUnits(b.rect[2]);l&&l.units&&(e=l.num,"%"==l.units&&(e=e/100*f.offsetW idth));m=m/100*e;0<f.offsetWidth&&(m=m/f.offsetWidth*100)}if(e=splitUnits(c))c=e.num;c+=m; e.units||(e.units="px");c+=e.units;
    if(1<b.transform[0].length){m=b.transform[0][1];(e=splitUnits(m))&&e.units&&(m=e.num,"%"== e.units&&b.rect[3]&&(e=b.rect[3],(l=splitUnits(b.rect[3]))&&l.units&&(e=l.num,"%"==l.units &&(e=e/100*f.offsetHeight)),m=m/100*e,0<f.offsetHeight&&(m=m/f.offsetHeight*100)));if(e=sp litUnits(g))g=e.num;g+=m;e.units||(e.units="px");g+=e.units}}h.left=defaultUnits(c);h.top= defaultUnits(g);h.width=defaultUnits(b.rect[2]);h.height=defaultUnits(b.rect[3]);b.linkURL &&(htLookup[k.id]=b,k.onclick=function(){var a=htLookup[this.id];
    a.linkTarget?window.open(a.linkURL,a.linkTarget):window.location.href=a.linkURL},h.cursor= "pointer");f.appendChild(k);if(b.c)for(h=0;h<b.c.length;h++)simpleContent(b.c[h],d,k)}}var fnCycle=function(a){a?fnCycle&&setTimeout(fnCycle,20):a={event:"loading",progress:0};load ingEvt&&loadingEvt(a)},aBootcompsLoaded=[];window.AdobeEdge.bootstrapListeners||(window.Ad obeEdge.bootstrapListeners=[]);
    window.AdobeEdge.bootstrapCallback=function(a){window.AdobeEdge.bootstrapListeners.push(a) ;if(0<aBootcompsLoaded.length)for(var d=0;d<aBootcompsLoaded.length;d++)a(aBootcompsLoaded[d])};window.AdobeEdge.preloadComplet e||(window.AdobeEdge.preloadComplete={});
    window.AdobeEdge.preloadComplete[compId]=function(a){AdobeEdge.$_(".edgePreload"+a).css("d isplay","none");fnCycle=null;loadingEvt&&loadingEvt({event:"done",progress:1,reason:"compl ete"});aBootcompsLoaded.push(a);for(var d=window.AdobeEdge.bootstrapListeners.length,b=0;b<d;b++)try{window.AdobeEdge.bootstrapLi steners[b](a)}catch(k){console.log("bootstrap error "+k)}};function isCapable(){return hasTransform?requiresSVG&&!hasSVG?!1:!0:!1}
    function onDocLoaded(a){window.AdobeEdge.loaded=!0;fnCycle({event:"begin"});isCapable()?(preConten t&&preContent.dom&&preContent.dom.length&&simpleContent(preContent.dom,"edgePreload"+compI d),filesToLoad&&!signaledLoading&&(loadResources(filesToLoad),filesToLoad=void 0)):dlContent&&dlContent.dom&&(loadingEvt&&loadingEvt({event:"done",progress:1,reason:"do wnlevel"}),simpleContent(dlContent.dom))};
    window.AdobeEdge = window.AdobeEdge || {};
    window.AdobeEdge.framework = 'jquery';
    if(document.addEventListener ){
       window.addEventListener("load", onDocLoaded, false);
    } else if ( document.attachEvent ) {
       window.attachEvent("onload", onDocLoaded );
       requiresSVG=false;
       doDelayLoad=false;
       htFallbacks={
       aLoader = [
          { load: "edge_includes/jquery-2.0.3.min.js"},
          { load: "edge_includes/edge.3.0.0.min.js"},
          { load: "footer_edge.js"},
          { load: "footer_edgeActions.js"}];
    if (AdobeEdge.bootstrapLoading) { signaledLoading = true; AdobeEdge.loadResources=doLoadResources; AdobeEdge.playWhenReady=playWhenReady; }
    loadResources(aLoader, doDelayLoad);
    var plSTF="none",ctrPlS="none",minPlW="0",maxPlW=undefined,plWidth="960px",plHeight="400px";
    preContent={
        dom: [
            id: 'loader-bar',
            type: 'image',
            tag: 'img',
            rect: ['370px', '191px','220px','19px','auto', 'auto'],
            fill: ["rgba(0,0,0,0)",'images/loader-bar.gif','0px','0px']
        }]};//simpleContent
    dlContent={dom: [ ]};//simpleContent
    })( "footer");

  • Scroll Page/Parallax Effect Edge Animate

    Hello. I have been working on Edge Animation which play according to the page scroll.
    I have used EdgeCommons.js to play the animation when scroll but when I add the animation to the static website .HTML page it's not working according to the page scroll.
    It's targeting edge stage but I want to play to with the browser scroll.
    (function ($, Edge, compId) {
      var Composition = Edge.Composition,
      Symbol = Edge.Symbol;
      //Edge symbol: 'stage'
      (function (symbolName) {
      Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function (sym, e) {
      yepnope({
      load: "http://cdn.edgecommons.org/an/1.1.2/js/min/EdgeCommons.js",
      callback: function () {
      EC.centerStage(sym);
      EC.Parallax.setup(sym);
      $('body')
      //Edge binding end
      })("stage");
      //Edge symbol end:'stage'
      //=========================================================
      //Edge symbol: 'Down-level'
      (function (symbolName) {})("Down-level");
      //Edge symbol end:'Down-level'
    })(jQuery, AdobeEdge, "steps_animation");
    in HTML file of the site that code is added

    Hi enartdesign,
    Welcome to Adobe forums.
    Check out this article on Adobe Inspire. http://www.adobe.com/inspire/2014/01/parallax-edge-animate.html
    Thanks,
    Preran

  • Edge Animate : Edge File website structure

    Can the Edge Animate generated code and associated images, js, fonts, etc.
    be contained in a separate folder outside the main directory.
    specifically,
    If I have a separate HTML file that I created and want to load in my Edge Animate project into it,
    I can easily do that if all the files are on the Main directory root that contains the HTML and CSS that point to the edge DIVs.
    however,
    This creates a ton of files on the root.
    Ideally I would like to have all my Eddge Animate projects in a separate folder,
    and my HTML pages pointing to the associated projects.
    something like the image attached
    I can never get this to work
    anyone able to figure this out?

    thanks for the speedy reply. I went and did some tests, and yes
    the new features in Publish settings do help out in tidying up the folder directories. (very much appreciated)
    and for the most part it works
    but I have found a few issues. (and there are probably more)
    on my main directory folder, I have a javascript file that is doing stuff inside my edge project.
    so in edge I reference that custom.js file. in the SCRIPTS panel. (nice feature)
    lets say in that .js file it is just doing an alert('hello');
    so when i publish and load the index.html , it loads the external edge file and does the alert.
    GREAT!
    if i go and change that alert in the js file on the main directory to alert('bob"),
    it will show the new alert
    GREAT
    now however, if I go back to my edge document and republish,
    it reverts back to alert('hello');
    because it seems to generate another js folder and js file and still has a reference to the js file that get duplicated in the "edge" folder
    2)
    font issue.
    i have several edge projects being loaded into this main index.html
    I am using a custom font
    because i am referencing the stylesheet in the main directory the font style does not show up on the stage IDE.
    however, when I play the index.html the font DOES show up as expected.
    it would be nice, when publishing to another folder,
    to be able to point to an external .css and have it show up while working

  • How do I use Edge Animate to make a clickable image which can be used in Author, and which will redirect you to a different page in your ebook?

    If anyone has experience with Edge Animate, I know that I can make an image clickable, and I can insert a url to define where it will go once clicked. But I want to make a widget to use in iBooks Author, that can take the reader to a certain page of the book. Is this possible?
    It all seems very complicated. Make one thing in Edge Animate, then somehow have that reference something in Author, which will finally work in an ebook. I have no clue where to begin.

    Sort of. I'm using this code inside an action for a button symbol. But it doesn't work perfectly. Trying to debug it.
    Let me know if you have any luck.
    //Check to see if pageCounter already exists
    if (typeof EC.pageCounter === 'undefined') {
      // it doesn't exist so initialize it to first page
        EC.pageCounter = 2;
    //check if the page is only 1 digit -- patch for single digit
    if (EC.pageCounter < 9) {
       // it is, so we need to pad a 0 on the front.
      EC.pageCounterString = "0" + EC.pageCounter;
      //e.g.  01 ...09,11,12,13....115,222352,,....
    else {
      EC.pageCounterString = EC.pageCounter;
    EC.loadComposition(EC.pageCounterString + "/publish/web/" + EC.pageCounterString + ".html", sym.$("container"));
    EC.pageCounter = EC.pageCounter + 1;
    //TODO for back  -1

  • How do I include 'Edge Web Fonts' into Edge Animate?

    How do I include 'Edge Web Fonts' (not Google Web Fonts) into Edge Animate?

    Have you tried to use google fonts? I have used them and they work for me.
    When you add your font for example:
    Copy paste:
    <link href='http://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'>
    and then for font family.
    'Finger Paint', cursive;
    then select addfont on the addfont screen

  • Adobe Edge Animate CC 2014.1

    Hello, do the animation in Adobe Edge Animate CC 2014.1
    and faced with a problem, animating picture animation works when you hover over the image and still have the text which also operates and has a different animation, and the problem is if I'm pokartinke mouse and spend the mouse over the text in the image on the animation picture as if jumps and starts with a new one, I want to know how to do so that would be mouse as I had not seen the text of this so I can keep the mouse on the image and animation are normally worked

    UPDATE
    i have ulpaded 2 animation ( one normal and one Responsive ) in 2 different server here the link
    www.eclipseadv.com/maliRP/maliRP.html
    Untitled
    via SAFARI or CHROME on MAC all OK
    but via IPAD ( SAFARI, CHROME and MERCURY) i didn't see the video, just the animation of the BUTTON  and the link if i click on it (not in Mercury), like in the content viewer.

Maybe you are looking for

  • Aix migration to windows

    I am a unix / solaris dba. My IT director wants to migrate to Windows based so they can hire more database operators familiar with windows. In my city there is a shortage of really good unix people. anyway , I was curious I think I am given more cont

  • Xorg Automatically Detects The Wrong 'Primary' Monitor

    Running KDE on an HP dv9910us with the nVidia binary drivers. lspci for the video card is: 00:12.0 VGA compatible controller: NVIDIA Corporation C67 [GeForce 7150M / nForce 630M] (rev a2) I have an external monitor that it will detect and configure a

  • Last Activity Date in Opportunity Report

    Hi Guys, Would like to knoe if there's a way to retrieve the Last Activity Date in a historical Opportunity report? Regards, Teena

  • Error console eating bottom half of my browser window & can't turn it off :(

    I can't see-this error started with firefox for mac v33 but I could drag the error console down to the size of a small status bar at the bottom of the browser window-now when I drag it down, it drags the rest of the window with it so all I can see is

  • Tables in Pages

    Hi everyone Sorry, I'm a real beginner - I'm sure this will be quite straight forward. I have created a simple table on a blank document at the left hand side of a landscape page. I want to copy and paste the table in the right hand side of the docum