Adding Edge animation to my website background

Hi
I am stuck with adding the animation I made on Adobe Edge to my website background. My website background has an image which size is set to cover, to it scales according to browser window and has also fixed position.
My goal is to get my animation instead of ths background image (animation is as simple as it can get). The best that I've managed was to get the animation on the page but it was not covering the browser windoe AND it pushed all the content that was supposed to be on it, away.
My website is this: www.tihemetsamoto.ee/uus2013
You can see that it the content is horizontally scrolling and the backgrond mage is fixed. That's what I like my animation to be, behind the content, fixed and cover the browser window on resize.
PLEASE help me, Im stuck and don't know what to do
The code from the animation html is here:
<!DOCTYPE html>
<html style="height:100%;">
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8"/>
          <title>Untitled</title>

    <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="animation_edgePreload.js"></script>
    <style>
        .edgeLoad-anime { visibility:hidden; }
    </style>

</head>
<body style="margin:0;padding:0;height:100%;">
          <div id="Stage" class="anime">
          </div>
</body>
</html>

Kristina-
There may be hope!
In this thread:
Hiding background animation elements that are beyond the edge stage?
The following link was posted:
http://sharkology.businesscatalyst.com/index.html
I don't know for sure what they are using for a background (If you expand the browser window on their site, you will see a shark "swimming" in the background) but you might want to ask.
I saw this in their code which made me a bit hopeful for you!
<body id="eid_1368298992414" class="EDGE-37128740">
Good Luck!
James

Similar Messages

How to integrate an Edge animation in a website by hand

I created an Edge animation and published it as an .oam file. But i need to work on the website on someone elses computer who does not have creative cloud or even Dreamweaver. I am working there in a text editor.
What are the requirements - what do I have to do - to integrate the .oam file into that site? All the references I've found bring in Dreamweaver to do it. I don't have access to Dreamweaver in that environment, only to a text editor to edit the html.
I actually was able to publish the project as a Web site and integrated it that way without the .oam file, but I would like to know how to use the .oam file because it might be simpler.

Hi, Ken-
The OAM file is actually a compressed file to be used for import into another product, like Dreamweaver or InDesign. We don't recommend you package in OAM; instead, simply ZIP up your files and hand-integrate the unpacked HTML as an iframe on your friend's machine.
Hope that helps!
-Elaine

Has anyone tried adding Edge Animations?

I'm getting an error after upload that the html part of the animation is missing.

When you look at your GoDaddy site in an FTP client, do you see the directory structure for the path to NewWindowShade.html shown below?

Scaling edge animation as background

Hi
I have integrated edge animate to my website. Added max-width for it in css and got the wished result that when I scale the browser window, the animation(background) resizes too.
One problem though is that animation(background) only resizes when I resize browser winodow from the left/right edge, but not when I resize browser from bottom. When I do that, it cuts off the background. Any idea/suggestion on how could I fix it?
The thing is that on narrower computer screens the background bottom is cut off, if I could fix it (with your help) that would solve this cutting off problem too
Here's the website: www.tihemetsamoto.ee
Cheers,
Kristina

Can you try it with the latest Edge Animate Patch and see if it works? More details about the patch here - Edge Animate 2014.1.1 is now live
Please share your Edge composition and Muse project with us if the issue still persists.
-Dharmendra

How To Create A Website Background Video In Adobe Edge ?

Hello,
I have video file in my computer SSD drive and i want it to play as background on my web page (page that i am creating).I did try to follow this video:
How To Create A Website Background Video In Adobe Edge Animate Using Edgehero - YouTube
but i cant follow 100% what he is doing.
Guide that i did try to follow is at this link: How To Create A Website Background Video In Adobe Edge Animate Using Edgehero - YouTube
Steps i do in Adobe Edge Animate CC
1.) Create New
2.) i click + sign under section Library >> Scripts >> Add JS File from URL...
URL that i am adding is: http://www.edgehero.com/edgehero.js/1.2/edgehero_1.2_min.js (URL is taken from site: Edgehero.js )
I add this link: http://www.edgehero.com/edgehero.js/1.2/edgehero_1.2_min.js to box that occures after i click on Add JS File from URL
3.) I go to Edgehero.js and from there i scrol down to section named as Media - Html5 video / Html5 audio
and i select from there this:
there is a code:
// this will set the video as background of the div/rectangle
backgroundvideo_1 ='movie.mp4';
// put new edgehero.js variables here
4.) I go to Adobe Edge Animate CC 2014 and right click on project and select Open Actions for "Stage"
and then i click on + sign and select creationComplete
This will open Stage window
there i will copy this code:
// this will set the video as background of the div/rectangle
backgroundvideo_1 ='movie.mp4';
// put new edgehero.js variables here
5.) Then i click on ++ sign under library >> Video
and i add video from my computer SSD drive.
Video is named as video3.mp4
Now i eddit the code in Stage window (See above)
code will look after editing like this:
Then i change under left side px to %
6.) Then i copy backgroundvideo_1 from Stage Code:
Then i select Rectangle Tool and mark the area (white box) and i click on small C icon
And the box that occures i type there backgroundvideo_1_mp4 autoplay
now when i use ctrl and enter i only get gray box that does not play video.
What am i doing wrong?

Here is the html file.
Note video file that i try to add is random training video from youtube, And file format is saved using this site:
How do I download and save a YouTube video to my computer?
this is only for testing as i am not gonna put that video on background to my web page. I am only trying to understand how to add video as background.
http://www.filedropper.com/test3_5
http://www.filedropper.com/test3_6
http://www.filedropper.com/test3edge
http://www.filedropper.com/test3edgeactions
http://www.filedropper.com/test3edgepreload
Goal is to create background video like u can see here:
Adobe Muse Tutorial - Responsive Design Hack! by MuseThemes.com - YouTube
Similar possibility is available also in Edge as i understand?

Why is IE 10 adding a white row under my Edge Animation?

Can anyone help me solve my coding issue with IE 10 on my client's website below:
http://www.procoresolutions.com/
IE is adding a white row under my Edge Animation on the home page that is protruding out on the right side as well. I also built another site for the same client which this is not an issue at http://www.donnellycommunications.com
Sites are similar, so I'm not sure why it's happening on one site and not the other.
If anyone can help, I'd sure appreciate it.

Link #1 code errors
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.procoresolutions.com%2F
Lin#2 code errors
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.donnellycommunications.com%2F
IE10 is much less forgiving of code errors than older ver of IE.
Nancy O.

How to sync two different Edge Animation's on a website?

Hello everybody,
I've made 2 animations on a Website and I want to synchronise these.
The 2 animations have to start simultaneously.
But the animation which loaded its content starts first and then the other.
The difference now is noticable and will be more on slower internet-connections.
How can I achive this in Edge Animate, or do I need Java-Script in my ".html"-file?
(Hope not because I can't script )
Thx

Hi Hemanth,
thank you for your reply.
I imported the animations on 2 different locations like this:
<div id="content">
              <div id="teaser">
                        <div id="samsung">
                          <object id="EdgeID" type="text/html" width="169" height="420" data-dw-widget="Edge" data="edgeanimate_assets/samsung/Assets/samsung.html">
                          </object>
                  </div>
                  <div id="text">
                  </div>
                  <div id="apple">
            <object id="EdgeID2" type="text/html" width="151" height="368" data-dw-widget="Edge" data="edgeanimate_assets/iphone/Assets/iphone.html">
            </object>
          </div>
              </div>
</div>
From here the post is edited, because I tried it without the <object> tag, used the "bootstrapCallback and included the 2 animations with all necessary files.
Unfortunately now my head-area explodes with java scripts.
I changed my file like this (head-area):
<script type="text/javascript" charset="utf-8" src="assets/iphone_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8" src="assets/samsung_edgePreload.js"></script>
<style>
          .edgeLoad-EDGE-109535821 { visibility:hidden; }
          .edgeLoad-EDGE-141942318 { visibility:hidden; }
          #Stage { visibility:hidden;}
</style>
<script>
var countComps = 0;
AdobeEdge.bootstrapCallback(function(compId) {
          countComps = countComps + 1;
                    if (countComps == 2) {
                              comp2 = AdobeEdge.getComposition(compId).getStage();
                              $("#Stage").css('visibility', 'visible');
                              comp1.play(0);
                              comp2.play(0);
                    else {
                    comp1 = AdobeEdge.getComposition(compId).getStage();
</script>
... and in the body:
<div id="content">
     <div id="teaser">
          <div id="samsung">
               <div id="Stage" class="EDGE-109535821"></div>
          </div>
         <div id="text"></div>
         <div id="apple">
                <div id="Stage" class="EDGE-141942318"></div>
         </div>
      </div>
</div>

Why do my Jquery functions stop working when adding an Edge animation to my page?

I've used Edge now for a few months on several projects and it's very useful for a designer like myself to create html5 animations as quick as Flash, but I'm noticing that everytime you add edge to a page, the jqeury it uses overwrites any others on the page and breaks other jquery based widgets. Why is this?
I've had a coder friend I work with have a look at the problem and his only solution was to put the edge animation inside an iframe, which is far from ideal.
Is there a way to use Edge and still use other jquery widgets on the page? (Basically I'm using a Nivo Slider jquery fading image box further down the page, which is breaking).
Thanks

martcol wrote:
> I really do not thing that I have done anything at all
to the
> page and can garantee no changes to the PHP script.
>
> It's hosted on some free space so there's no support
there. What might be the
> problem?
With free hosting, you get what you pay for - nothing. It's
possible
that the hosting company has changed the PHP configuration
and turned
off the display of errors. Most companies do so nowadays,
because the
display of errors is considered a security risk.
You can try adding this to the top of the PHP script:
<?php ini_set('display_errors', '1'); ?>
If that displays any error messages, post the details of the
error
message here, and someone should be able to help you.
However, without giving more details of the script and setup,
your
question is rather like saying "My car won't start. What's
wrong?" It
could be anything. To get decent help online, you need to
describe the
problem in more detail.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS4",
"PHP Solutions" & "PHP Object-Oriented Solutions"
http://foundationphp.com/

Can only websites using Dupral as a publishing tool publish Edge Animations?

I just heard this from a friend working with news media. I don´t know web stuff and publishing myself, but according to what he said Edge animations seems to be VERY limited when trying to get clients interested, since most can´t use the format since they don´t use Dupral. It ends up having to be screencasted, which lowers the quality from vector to more or less grainy video (huge difference) and renders interactivity useless.
This might be a game changer for me. If anything less than the majority of webmakers can´t publish Edge projects I can´t spend time learning this program.
Any takes on this would be greatly appreciated! Thanks!

Hi LARV
Edge Animate just publishes the usual HTML/JS/CSS stuff.No dependency with drupal.

Adding HTML5 animation from edge animation to captivate 8

I created a simple/small animation in Edge Animation, published it as .oam . In Captivate 8, Media, HTML5 Animation, selected the animation and it displayed on the slide. The problem is now, in the preview the animation doesn't play. I even published it on a web server and it doesnt show there either. Does anyone have any idea what is going on??

Just a suggestion: try to add a play button in Edge Animate, maybe the animation is so short that you don't have time to see it? What is its duration? I can insert OAM's in CP8.

Issue with multiple Edge animations in the same article. Please help!

We have 3 edge animations in our 3 page article, one in eache page. The first edge animation you view autoplays great, however when you swipe down or up the other animations just wont play. All of them set to autoplay 0.125 with transparent background. It seems that no matter which one you see first, it kills the other two. We tried importing HTML and DPS from Edge with the same results.
Thank you in advance!
al3nai

I just did a quick test and experienced mixed results. I placed a single edge animation on the first page of a horizontal article, then placed the same edge animation on three pages of the vertical orientation (dual-orientation folio). The edge animation shows up perfectly on the horizontal layout, but only displays on pages 1 and 3 of the vertical orientation. It does not load on page 2.
I also placed an additional Web Content Overlay on page two connecting to a website which loads fine. The edge animation shows the spinning/loading icon but nothing loads.
Sorry, not much help here just sharing similar bugs.

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?

Can I get an Edge animation to auto start without user interaction?

I have a looping Edge animation I placed in my DPS document. In the Folio Overlays I have Auto Play checked with a .125 second delay and transparent background. When I preview it though the animation only starts after I touch it. I looked at this thread and there was some talk about possibly adding code to the Edge animation? Is there another way? Thanks!
http://forums.adobe.com/message/4548871

Neil,
I have a similar problem in that when I have my iPad in landscape the animation works, but in portrait I have to "tap" before it starts although both have "Autoplay" checked in the Web Overlay. The animation works in Browser Preview.
In addition I have reported some other problems with regard to Edge in this thread http://forums.adobe.com/message/4608307#4608307, but haven't gotten any response. Do mind checking this out too?
Thanks

Fade-Out HTML Edge Animation screen, help?

Can anyone tell me how to Fade-Out an HTML Edge Animation page that links to another HTML page---an index page? I set the trigger on the Edge animation to: window.open("http://www.mypage.com", "_self");
Is there another trigger to add to this that can Fade-Out the entire HTML page so that it fades smoothly into the next HTML page?
Thanks,
Susan

Susan-
There is probably a "More Correct" way of doing this, but I have done it by adding a rectangle to fit the stage, set to the background color (or whatever color you want the stage to fade to), and changed the opacity from 0% to 100%.
James

Bootstrap, height of edge animation and others div content in the page- overlay issue

I’ve a problem with the position others div tags in a page with a edge animation in the top (in the below example, div “box-animation”… export it with “publish target: Web”).
The static content (in the below example, class “content-static”) is always overlay to the animation, instead to view it below div “box-animation”.
The first solution is to set an height for edge animation container (for example, #box-animation height: 500px) but its very complicate to manage it with responsive website.
So, how to view the static content in a div tag after an animation create with edge animate, to avoid overlay effect?
This my first animation with Edge Animate and I always thought that the animation would have been placed in the html order of the webpage...
Thanks
Example:
<body>
<div id=“box-animation”><div id="Stage" class=“animation1…”>[edge animation]</div></div>
<div class="container">
<div class="row">
    <div class="span12">
      <div class=“content-static”><p>Test content</p></div>
    </div>
</div>
</div>
</body>

Hi... put a trasparent gif image, with the same animations's width/height, in the first div after the edge code container.
If you want responsive layout, remember to remove width/height values.
<body>
<div id=“box-animation”><div id="Stage" class=“animation1…”>[edge animation]</div></div>
<div class="container">
<div class="row">
    <div class="span12"><img src="images/spacer.gif" alt=""/>
      <div class=“content-static”><p>Test content</p></div>
    </div>
</div>
</div>
</body>

Adding Edge animation to my website background

Similar Messages

Maybe you are looking for