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

Similar Messages

  • Why can't anyone else see my Edge Animate html files in their browsers?

    I create this awesome file with bells and whistles and looks and runs great on mY computer and in mY browsers but when I send a client(s) the HTML file to view in their browser it NEVER works! Do I need to send them all the files? The image folder...the JS files and the HTML? I think I did that once and it still diodn't work...I understand that the browsers all dont play nice and that m os need to be updated on the client end but is there a good way to save the Animate file so that my clients can use the file to place in a website. I am creating small web ads.
    Thanks for all your help!
    Maria

    Do you have a website? If yes, you can load all your files at the root level and then you can send the link to your clients.
    It would go like this:
    http://www.yourWebsiteName.com/yourEdgeFolderName
    (I would name the edge files index rather than something else because most web server prefer that.)
    You could also create an html file with all your samples and iframes to load them. Then you need to put each edge folder at the root of your website.

  • Can Edge Animate Create Full Websites?

    Can Edge Animate creat full websites like Flash? Or is it only for content like headers, etc? Could I make a site like this? ---> http://www.ideator.ca/#
    Lastly, how well does it work with SEO tools?

    Nancy O. wrote:
    Edge animation is a combination of HTML5, JavaScript and CSS3.  Search engine spiders don't use JavaScript or CSS.  All they "see" is the markup inside HTML tags: <h1>, <h2>, <h3>, <p>, <li>, etc... 
    Does this answer your question?
    Nancy O.
    Hi Nancy,
    Thanks for the response.  I understand that the spiders only see html code, but when the final render is in the browser AE has added a whole series of div tags.  This can be seen when using the F12 mode in Chrome.
    John Hall wrote:
    There are some folks experimenting with SEO using the publishing settings:
    Hi John,
    Since posting my question above I have seen these, but thanks for posting them.  The problem I have is after publishing using the static HTML option I still do not have the additional markup code, despite using h and p tags for all the text in AE.  Any idea what might be going on there?
    Saying all that I really thought spides saw the end result that the browser presents rather than just the raw html/php/etc... files.  One reason I thought this is I have used PHP includes to add html into files and the 'included' code was picked up correctly in a search.  Anyone have any thoughts or experience on this here?

  • Embed edge animate onto webydo website

    Hi,
    Just wanted to know the best way to embed a edge animate onto a webydo designed website.  A step by step overview would be great.
    Cheers,
    Shaun

    Is the new HTML page in the same directory and level as the HTML file created by Edge? The path to edge files may be off.

  • How do i add Edge animate .oam files to Fixed Layouts Epubs in Indesign cc 2014?

    How do i add Edge animate .oam files to Fixed Layouts Epubs in Indesign?

    Hi,
    There is a bug on iOS7 which does not let edge animate work correctly here. This issue will happen on iPad and not on Mac OS.
    There is a similar thread that explains in detail this issue you are facing:
    https://forums.adobe.com/thread/1513879
    Regards,
    Pooja

  • Edge Animate JS files

    Is it possible to place edge animate js files in one folder when same html file is in different folder.

    Hi Chandrasekhar,
    There are 3 files that are automatically generated by Edge. One in inside "edge_includes" folder, and other two(_edge.js & _edgeAction.js) are kept along with .html file.
    My last comment assumes that you will place the two(_edge.js & _edgeAction.js) files in jsFolder. But this will end up using two folders for edge created js files, one being "edge_includes" and other "jsFolder".
    But if you want to put all in one folder, then put the two files(_edge.js & _edgeAction.js) in the folder "edge_include" so that all 3 edge files are in one folder, and then simply follow my last comment and replace "jsFolder" with "edge_include".
    hth,
    Vivekuma

  • Elements do not show up in edge file but they do in HTML file; no errors occured

    I am a senior in college working on building a website for a fictional company for a year-long thesis graphic design project. In my class last semester, I learned how to use Edge Animate and created an 11 page website without any trouble. I had always kept the files saved to my flash drive, and kept a backup on my personal laptop as well as on my external hard drive. There was also a backup of the files on a disc that I turned into my professor in mid-December. All of these files worked fine at the time.
    In early January, I wanted to make changes to the website so I installed a trial version of Edge Animate on my laptop. When I opened any of the edge files from any of the backups, the stage was blank and the animations did not show up on the timeline. The elements of the website still show up in the Library but they are no longer arranged on the stage. When I got back to school at the end of January, I tried opening the files on the school computers and had the same problem. I asked my professor to try the file that was saved to the disc and he encountered the same issues on his computer. All of these computers are either iMacs or Macbook Pros.
    I have not recieved any error messages and did not do anything to corrupt the files or save over them. I am able to open the html files in a browser with no issues; all animations and images work fine. The only change I can think of is that Edge may have been updated over break and when I installed the trial version I installed a newer version, and for some reason the new version of the program could not properly load my project that I started on a older version in October or November of 2013.
    I am happy to upload the files but I am unsure how to do that. Please let me know if there is a way to resolve this issue, or will I have to start over?
    Thank you!

    Try to clear your preference and restart your Animate.See if that fixes your problem
    http://helpx.adobe.com/edge-animate/kb/restore-preferences-edge-animate.html
    If  that does not work see if there is a lloopback address lookup.
    Check out the correct answer in this post to fix that http://forums.adobe.com/message/6116991
    Let us know if this fixed your issue

  • PRELOAD ALL EDGE FILES AT ONCE?

    Hello,
    I have one edge project with single edge files. My aim is to have a html5 based website, in which it is possible to link between the files. It would be nice, if the whole project will be loaded at once instead to have the preloader after every single link.
    Thanks a lot!

    Are you talking about this - Bootstrapping Animate Compositions « Adobe Edge Animate Team Blog
    You can check the link. It might be useful.
    Regards,
    Sudeshna

  • Need help with integrating a dreamweaver file and an edge file

    Alright so I have been trying to do this for far to long so I am asking for some help this is for a web design class.
    I am trying to either import a edge composition to a dreamweaver file or use the publish file from the edge file to make a completed website by adding a css navigation bar from an external css file. I want to have the css menu to the left of the logo. I have tried this numerous times but either the menu doesn't show up and is either behind the edge stage or its not there at all. When I tried it from a fresh html page and imported it from an oam file the images from the stage never showed up and I am unsure how to fix that.
                                                                ^right there.
    Here are the files
    Dropbox - Archive.zip
    Thanks for the help.

    I found the z-index for the edge animate code and it was set to 0 and i set the menu div to 40 but nothing happened and it didn't show up. This where i set the menu to a higher value and I'm not sure if this is correct, I also tried it in the css file but that also didn't work.
                <div id='cssmenu' style="z-index:40;">
      <ul>
       <li><a href='index.html'>Sell Cards</a>
          <ul>
             <li><a href='#'>Pricing Guide</a></li>
             <li><a href='buyList.html'>Buy List</a></li>
          </ul>
       </li>
       <li><a href='#'>Sealed Product</a>
          <ul>
             <li><a href='Promotional Items'>List of Sets</a></li>
             <li><a href='#'>Promotional Items</a></li>
          </ul>
       </li>
       <li><a href='#'>Other Games</a></li>
       <li><a href='supplies.html'>Gaming Supplies</a></li>
    </ul>
    </div>

  • How do I put text into an Edge File that clients can edit easily afterwards

    Hi
    Can anyone explain how I can put text into an edge file (styled with google fonts) and make it so that clients can access the text and update the text as they require?
    Previous suggestion was dynamically loading a .txt file - any instructions would be most appreciated.
    Thanks.

    Hi Resdesign!
    Your code is very useful to learn how to use Json in Adobe Edge Animate!
    But I have a question: why you use ( i ) as argument of the function UpdateInfo and when you recall it you use ( index )?
    $.getJSON('slides.json', function(data){
              //for(var i=0; i<data.length; i++){
    function updateInfo(i){
                        sym.$("photo").css({"background-image": "url('"+data[i].image+"')"});
                        sym.$("pillar").html(data[i].pillar);
                        sym.$("what").html(data[i].what);
                        // position
              index = -1;
              sym.$("btn").click(function(){
              index++;
                        if (index>=5){
                                  index = 0;
              updateInfo(index);
    Many thanks for your attention!
    Davide

  • How do I import Edge files into my Wordpress site

    New to edge.  Need to know how to incorporate the finished edge file into my WordPress site.  Specifically I want to create an animated banner.

    Couple of options you can try.
    Wordpress plugin - WordPress › Edge Suite « WordPress Plugins
    Manual method - http://threecell.com/blog/seo/adding-edge-animate-to-your-wordpress-site/
    Darrell

  • EDGE file will not run correctly in DPS! Any ideas on what I might do?

    I have built an EDGE file to the size of a full page iPad layout (1024 X 768), with a few elements that animate. I have set it up correctly, and, published to "Animate Deployment Package. However, when it plays in DPS, there is a hesitation (or delay), then, a white - stop in the action - then the animation plays fine. I have not coded in delays or stops.
    I am not a coder.
    I have done a number of tests with a variety of "Poster" images, but, I still get the play "Hesitation" (of delay).
    Can you let me know what I'm not doing correctly?
    Thank you!

    I think I know what your talking about.
    Try these steps.  First in Indesign set your animation to auto play and set a delay for 0.125.  I have been talking with Adobe and they are going to set a guideline to always have a 0.125 delay for animations created with Edge.  Second, make sure you check "Transparent Background" and "Scale Content to Fit".  The good thing here is that it's full screen and set at the 1024.
    Make sure you also set a poster image in Edge so you don't get the blank image before it starts playing on the iPad.  One other thing.  Becasue the animations are basically controlled by Safari on the iPad you may see a delay longer than the 1/8 of second you set.  I attribute this to the iPad having to load it up on demand before it plays.
    Hope this helps.
    Ryan.

  • Where do I place Edge files when publishing Muse to BC?

    The only thing I've been able to find on this is from older versions of Edge and Muse.
    What I've read suggests that we have to put all the edge.html and edge.js files at the root level with the other html pages. That leaves the Edge Includes in their own separate folder.
    I HAVE NOT BEEN ABLE TO GET THIS TO WORK.
    I may be able to double-click the edge.HTML file to play in a browser, but when I try to play it after publishing from Muse – no luck.
    I also wonder what happens when I want to put Edge animations on multiple pages within a Muse website. It seems with the root level would become crowded with so many Edge files. And how do all those “Edge includes” folders get renamed?
    I would love to see tighter integration between Edge and Muse. But for now, I would be very happy just to be able to play my Edge animations in published Muse sites. As much as I'd like to use it, I can't use Edge if I can't get the animations to play in Muse.
    Thanks for any help...

    Hello,
    You probably did not find this article at the right time but there is one KB article explaining how to insert the Edge content into a Muse website.
    Basically what you have to do is, after you publish the Edge project, to take the exported folder, or just the files, (but I'm totally into taking taking the whole folder) and upload them to your FTP where the Muse site is published. After that just use the "Object > Insert HTML..." option from Muse and paste the <iframe> code from the KB and customize the path to the folder where the files are located and the width & height for the iframe.
    KB can be accessed here: http://www.adobekb.com/inserting_edge_content.html
    An example can be found here.
    - Edge project uploaded to FTP.
    - Content of the project folder.
    - HTML code
    I hope this will answer your question.
    Cheers,
    Cristian

  • How can I include local fonts in my finished edge reflow website?

    How can I include local fonts in my finished edge reflow website?
    The website has to run without internet connection and the use of webfonts. I have already tried to to include fonts manually but this wasn't working.

    I would like this too, as it would save a lot of time using icons in the form of icon fonts.

  • Best way to publish Edge files into html page?

    Ok,
    So im looking for the best way to add my edge files into my html page.
    I want to make it easy to integrate edge with dreamweaver html files, e.g if I change anything in my edge project and publish it I dont need to transfer the html over to my page again.
    I thought the best way to do this was put all the edge files into there own folder within my sites_files folder and then use iframe. However when I did this, I can not figure out how to use CSS to style the iframe.
    this is what I have tried    
    <iframe id="test" src="mackbyte1_files/animation/power-out-setup/power-out-preview.html" frameborder="0" height="400px" width="940px" scrolling="no" >Your browser does not support this animation. Get a real browses made for the 21st century! We recommend Chrome or Firefox...</iframe>
    I have tried using a ID for the iframe which didnt work.
    Without the iframe my animation is centred in the screen from the CSS with edge html e.g
    .edgeLoad-power-out-preview {
              visibility:hidden;
                        #Stage {
              height: 400px;
              width: 940px;
              margin-left: auto;
              margin-right: auto;
              border-radius: 7px;
              background-color: #CCC;
    I have given up and just manully copy/paste the html into the page I want it in. this works fine however, as stated if i make changes to my animation i have to amend the html which is a little annyoying.
    Is there a fix?
    Thanks in advanced

    joel_pau wrote:
    Hi,
    Can you copy and paste your html code from "mackbyte1_files/animation/power-out-setup/power-out-preview.html" ?
    hey mate,
    this is it
    <!DOCTYPE html>
    <html>
    <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8"/>
              <title>p-o-preview</title>
    <!--Adobe Edge Runtime-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="power-out-setup_edgePreload.js"></script>
        <style>
            .edgeLoad-power-out-preview { visibility:hidden; }
                        #Stage {
              height: 400px;
              width: 940px;
              margin-left: auto;
              margin-right: auto;
              border-radius: 7px;
              margin-top: 20px;
        </style>
    <!--Adobe Edge Runtime End-->
    </head>
    <body style="margin:0;padding:0;">
              <div id="Stage" class="power-out-preview">
            <div id="Stage_pw-point" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_usb-hub-pluged2" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_usb-hub-unpluged2" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_usb-for-hub" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_usb-hub-pluged-unlit" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_usb-cable" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_imac" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_usb_icon-power-out" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_Lightning" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_imac-off" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_shutdown-page" class="edgeLoad-power-out-preview"></div>
            <div id="Stage_shutdown-page-30" style="display:none;"></div>
            <div id="Stage_imac-black-off" style="display:none;"></div>
            <div id="Stage_RoundRect" style="display:none;"></div>
            <div id="Stage_play-btn" style="display:none;"></div>
        </div>
    </body>
    </html>

Maybe you are looking for