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

Similar Messages

How do you put edge animation in Magento?

How do you put edge animation in Magento please?

Provide the name of the program you are using so a Moderator may move this message to the correct program forum
This Cloud forum is not about help with program problems... a program would be Photoshop or Lighroom or Muse or ???

How to fix the Edge Animation on the middle of the other html file?

Hi,
i`ve got a little quesion and i really don`t know how i get this.
Okay.. i have the edge animation.html and wanna put this in an other html. When i make this, it works. But how do i only put the animation in the middle of the other html. So the top of the other html isn`t covered from the edge animation html?
--- i know how to make the site-color transparent but not the whole animation. (the functions on the back of the other html doesnt work any more)---
Hope you know what i mean.
Best regards.
(EXAMPLE: http://airserver.net46.net/adobe%20edge/ )

Thanks for the replies everyone. I was hoping that someone from Verizon would actually chime in with some token of an attempt to keep me on Verizon. I understand that I can Edge up to another phone but all of the other 8.1 phones are actually less than my Edge payment. I'm not sure how that would work. Plus, if Verizon is choosing not to support the Icon at less than a year in, how will they support those phones in a few months when Windows 10 ships?
Can someone from Verizon support please let me know what is being done to take care of Icon owners?
If it is just a lost cause, please tell me. I'd respect you more as a company and consider doing business in the future if you provided some level of transparency and mutual respect. If the answer is "early 2015" as the other poster joked, that is inexcusable as Denim has been out for almost 6 months and other carriers have had no problems getting the update out.

How to "Hack" my Edge Animation for IE8 / IE7?

I know: Adobe Edge Animate is made for mdoern Browsers. But I'm doing a One-Pager complete in Edge Animation (a worldwide known limonade...). So about 10% uses Internet Explorer 8, less IE 7.
I konw: there ist the option in publish settings to give lte IE9 users a shout to install the Chrome Frame Plugin. But seriously: that's not a solution (no one installs a plugin just to see a site. most users CANT install because of the rights at work).
So I have to make my final Edge Animate onepager also work in IE 8. For this I found I can change this file:
myProject_edgePreload.js
then there is a function:
function isCapable(){
          if(hasTransform){
                    if(requiresSVG&&!hasSVG)return!1;
                              return!0
                    }return!1
If I change it (ugly, I know) to this, Internet Explorer loads the animation (instead of the Stage for older Browsers):
function isCapable(){
          return 1;
          if(hasTransform){
                    if(requiresSVG&&!hasSVG)return!1;
                              return!0
                    }return!1
But then as a next step I tried to include PIE.js and modernizr.js to get the animation nearly work in IE 8. a) I tried it to iclude the scripts with a conditional IE tag in the head of the HTML-file. Dont worked. Then b) I tried it to load it via yepnope like this:
yepnope({
    nope : ['iefix/PIE.js']
          , complete: fireup
function fireup(){
                       if (window.PIE) {
        $('.ie').each(function() {
            PIE.attach(this);
But this also not worked.
Dear stuff guys: I know, this is not the right way in your plans for Edge Animate. But I REALLY would love to have a version running in IE 8 instead of a dull placeholder. Can anyone help me, please?

Hi, dworni-
You managed to catch us as our development team was out on holiday.
Unfortunately, IE8 does not support some of the CSS that we rely on to make Edge Animate projects play in IE8, so trying to work around it so that you can play them may not give you the result you want. The compromise we made to get Animate to its current feature set while still supporting IE8 was, as you pointed out in your original post, using the Chrome Frame.
That being said, you might want to try hacking in your JS files in your project's compositionReady instead of in the header of the project to see if that works at all. As you're probably well aware, you're in unchartered and completely unsupported territory here... (thar be dragons )
Good luck!
-Elaine

How to use 1 edge animation in multiple pages without duplicate files?

Hi,
I want to display an animation on multiple pages that are all located in there own respective folders. I want to be able to move then animation files into it's own dedicated folder e.g. /includes/edge folder where I can still use this animation in other pages not locate in this folder.
How can this be done?
Thanks

For you use case,
You can have your animate files in a folder and load them in different pages using a iframe

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

How to integrate Edge Animation into a Joomla-CMS page?

I tried to integrate an Edge animation into a Joomla site, but there appears just a white page...

Hi,
I guess I have two answer on two levels. The wordpress plugin (EdgeSuite) allows you to place compositions inline or use iframes, so it is not really plugin vs. iframes.
EdgeSuite brings various benefits (if you ask me):
First of all, it comes down to just uploading stuff, place it, done. No ftp upload, filehandling or whatsoever.
More over that the plugin enables sharing of core edge libraries. E.g. if you place two compositions on a page without modifying them, all the edge libraries (edge.js, jquery, yep, easings...) will be loaded twice as they sit in different directories. Same with viewing compositions on different pages, each composition loads its own set of libraries. 10 different compositions results in 10x loading of all libs. Edge Suite on the other hand alters the path for the resources and places them in one directory. Libs are only loaded once, for the whole page.
If you have a simple website cluttering your webspace at root level might be an option. If you are using a CMS and have 10 compositions that is just awful. EdgeSuite places all composition files in a clean file structure within subfolders, no cluttering.
That's just from the top of my head.
The iframe topic is a bit more difficult. Personally I think iframes are mostly bad practice. It's like in the early days of the web with table layouts and framesets. There are cases where iframes make total sense and are the best way to go and that's why EdgeSuite can also render iframes. But I personally only want to "see" an iframe when there is no other option. If you can do it inline, do it inline. Bad SEO, loading times, semantic fragmentation... security aspects, sandboxing on the other hand are just a couple of the most common arguments. Most of the arguments don't directly apply to the context of Edge Animate, but still... decide for yourself
Hope that answers your question to some degree.

How do I insert my Edge Animation into Wordpress as an animated/interactive graphic

How do I insert my Edge Animation into Wordpress as an animated/interactive graphic?

Hi ColleenSyron,
Can you check out this video: http://tv.adobe.com/watch/create-like-crazy-with-adobe-edge/episode-5-spice-up-your-wordpr ess-site-with-edge-animate/
Thanks,
Preran

I have created a 468x60 animated banner in Edge Animate. How do I save the animated image to my desktop? (not in html code)

I have created a 468x60 animated banner in Edge Animate. How do I save the animated image to my desktop? (not in html code)

Hi,
This feature is not available in Adobe Edge animate. You can not export as image from Edge animate.
Publish options available in edge describe here
Edge Animate Help | Publish your content
Regards,
Devendra

How can I allow a user to control my Edge Animation using only the scrollbar?

I have seen a few examples of an Edge Animation being conrolled by the scrollbar, and I am wondering how I could achieve the same effect.
Example:
http://dominikruckli.ch/scrolltest/scrolltest.html
I have searched the corners of the internet and have found 2 or 3 different tutorials, but none of them have proven successful.
In basic terms, I am creating an animation that involves a character getting from Point A to Point B, from the beginning of my timeline to the end.
Rather than exporting my animation so that it plays automatically, by itself, I would like for a user to scroll vertically, and the playing of the animation moves in conjunction with the scroll bar.
As the user scrolls from top to bottom on the scrollbar, the character in my animation moves from Point A to Point B.
Also, if the user stops scrolling... the character will stop moving as well.
In addition, I would like the surrounding area, outside of my stage, to remain hidden. I do not want to allow the user the ability to scroll around and see off of my designated stage area. I only want the scroll bar to act as a playhead for the animation.
Any help will be greatly appreciated.
Thank you
Note:
If you have special CSS (or other form of Code), please provide specific instructions on how to insert this code, where it should be located, what part(s) of the code should be altered, and any additional instructions on how to apply any form of coding. (Screenshots would be amazing)

Never mind. I figured it out myself. I changed the myComp.play("scenefour"); to myComp.getStage().play("scenefour"); and it worked fine.

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>

How do I import my edge animation in indesign so that it can play within a PDF file

how do I import my edge animation in indesign so that it can play within a PDF file??
Plz help.

Hi there,
Have you tried reading this tutorial on exporting Edge Animate files to be used in InDesign?
http://www.adobe.com/devnet/digitalpublishingsuite/articles/enhancing-your-dps-folios-with -edge-animations.edu.html
Edge Animate files can be played in DPS folios. PDFs are not capable of playing Edge Animate files at this time. I did find a work around to get SWF files to play in PDF documents:
http://indesignsecrets.com/how-to-get-animations-to-work-in-pdf-working-title.php
I hope this helps!

How to force a responsive Edge animation to re-evaluate its container size?

I have an Edge animation stage embedded in a relatively complex page, inside a container div whose width is set by media queries and which may or may not be faded out by $.fadeOut. I've figured out how to trigger playback, but the stage doesn't seem to be updating its estimate of the container's width regularly. Specifically, the stage will scale itself to its min-width (disappearing if there is no min-width) and get stuck there in a specific case when the container's container has been hidden then shown again. And even when the stage is visible and on screen, if I make the browser thinner then wider, it seems to scale itself down but never back up. These weird problems would both be explained if the stage wasn't consistently re-evaluating how large its container was.
In that case - is there a way to force the stage to re-evaluate its container size using Javascript? Wasn't able to find anything in the documentation about this.
Thanks!

Hi, Chi-
Funny you should mention this... I actually just posted a blog post about something very similar.
https://blogs.adobe.com/edge/2013/09/05/floral-matchmaker-tutorial-3-hiding-and-showing-th e-game-board/
You can put your responsive div in an iframe set to a certain % of your main page.
-Elaine

How to make Edge Animation works in HLTM5 Offline? I cache all files, but Edge didn't play.

How to make Edge Animation works in HLTM5 Offline? I cache all files, but Edge didn't play.
Some createJS animation start without any problem.
Thanks!
Astors

Thank you for your answer.
I do use cdn off for publish setting.
The Web site that I am working on is a very complicated site. Edge
animations are in a subdirectory of Apache server.
When server is offline, I get all files from Appcache without problem,
excepted *_EdgePreload.js.
I Google hundreds time, cannot find answer on why this file is always get
online.
Finally, I find out myself, Adobe Edge don’t like relative file path for
*_EdgePreload.js.
Change to root absolute path fixed the problem:
Astors

How do I place a text frame/ botton over Edge Animation in DPS

As I said in the title, how do I do that?
Thank you!

You can make MSO from your text (same for button).
Select text frame and create MSO. You will get MSO with 2 states, each state contains the thext frame. Select this MSO and set AUTO PLAY in Overlay Creator/Slideshow window. Then arrange the MSO on top of Edge animation.
Please let know if it works.

How to integrate an Edge animation in a website by hand

Similar Messages

Maybe you are looking for