Create an Animation of edge capable of evolving with fluid width/height within a Web site

Hello world

I could be missing something really simple here, and frankly I would happily have egg on my face if somebody can tell me the solution.

I am inserting an adobe Edge Composition in a Web site of fluid HTML5 with basic content (using Dreamweaver), right...?

Everything seems to work fine until reduce you the site... like the scales of the page toward the bottom of the scale of composition of edge too, which is great! Except that the composition of edge leaves an empty space below its original height! So my question is, how do I get the height to do not leave a blank in his height when he evolves down? Here's what I've tried so far... 

  1. Check the width/height of the composition animate edge has the value % including the element of the scene and all it's components
  2. Tried to adjust the height to 'auto' for the CAO of the object inside dreamweaver - this does not seem to be very 'auto' at all and just gives a default height which is not enough to see everything anyway.
  3. Changed parameters min/max
  4. Tried scaling javascript method of http://sarahjustine.com/2013/04/08/create-scale-to-fit-projects-with-Adobe-edge-animate/ Works fine, but also leaves white space under the file when placed in a website with content and updated on the scale
  5. Height adjustment of the border object in DW using CSS, it is close, but it is more sensitive to certain resolutions, I'm after a quite fluid solution.

Surely I'm missing just something simple? Someone at - it an example of this working properly inside a web page with the content of Basic for example? As most of the examples edge doesn't go beyond the tests just the animated project of edge by itself in a browser, in which case this seems to work perfectly too.  I need of them being placed in a website, for example the image sliders made with edge, which can evolve within a Web site base fluid.

This should be a post on the Dreamweaver Forum, but I have to start somewhere, thanks in advance for your time.

Thank you

Jeff

Hey guys,.

So what you see is a browser associated CSS problem. application of a transformation recalculates the size of the item (#Stage), which is why the elements listed under don't reflow.

When the tutorial in writing is one of the first things I spotted (and THE MORE boring to understand) but the code included in the example files in the tutorial that recalculates the container parent of the scene is placed in. If your code should look like this to make it work properly:

(the are just there for reference.)

If you download the example on the page tutorial files I have also included the demo HTML files with embedded in the page Animate composition. Take a look at this code, and it should give some additional information.  Basically, you just wrap the scene in another div and you should be fine.

HTH,

Sarah

Tags: Edge Animate

Similar Questions

  • Can I create a PDF to fill and then export it for customer use on my web site?

    Can I create a PDF to fill and then export it for customer use on my web site?  I need clients to be able to fill the (registration) form on my site then send it by e-mail.

    Just a warning: not all PDF readers may be able to do what you need.

    Carefully test with browsers that use their own Reader PDF (Firefox, Chrome) and other platforms such as Android or iOS.

  • Animation of edge doesn't scale to the width and height div parent

    We have an existing site that was built in 2007, but has been designed to fit perfectly with sensitive css, there were a few hiccups, but this was by far the biggest problem that I have encountered. I'm working on replacing a flash animation with animation that onboard animate cc 2014, I did, and everything went fine until I asked to play well with my existing Web page.

    I was playing with my files for a few days now, and I was wondering if anyone else has this problem. (I've been placing the code manually in html format, and not as a .oam) It seems that my animation of the edge, on the appropriate settings available, insists on the evolution of the size of the port view rather than the size of the parent div I put it in. I came with a difficulty of brute that changes javascript code so that the animation looks at 90% of the display window, but as soon as you resize the window, it goes back to 100%. Which is annoying because I need to be at 90% with a 5% margin/padding on each side (that's what the content div is set to of anyway, so when the edge host is set to 100% width, only go to 100% width of the content div that it is in) and even more embarrassing as that does not even begin to solve my problems with the desktop version of the site. As much as I love the sarcastic musings of my friend in HIM during the afternoon, I think we're both willing to entirely renounce this aspect of the project.

    When I tried to import a media file .oam that he just doesn't appear at all, no code, no javascrip, nothing shows the parent div and empty the stage in development tools (I check the code for troubleshooting purposes through google chrome).

    I'm really at the point where I hope I did something terribly wrong and I'll be able to save this new way to add in the animation. That would be the best case scenario at this point.

    Help, please!

    Here's how I solved the problem

    Configure the animation as w 100% and 100 hour

    You will need to exit mode suitable for it, also uncheck the option to stage at the centre.

    Then, I put a container around my scene in the html code. I call it class = "stagewrap".

    I then added javascript so that stagewrap would retain a certain aspect ratio but the scale to 100% width.

    That's what looked like my html

    My CSS looked like this:

    {.stagewrap}

    margin-top: 20px;

    Width: 100%;

    position: relative;

    overflow: hidden;

    margin-bottom: 30px;

    float: left;

    font size: 2.5vw;

    }

    Some of these styles will have to modify according to your needs or according to your needs.

    x is going to be your ration, which matches your width divided by your height, you can just divide the number of pixels, the units cancel out and that the ratio works for any other unit.

    There is the width to which your animation is 100% resolution without the scale upwards or downwards. It is a VERY important number to keep your overall percentages correctly.

    And z is probably 1, unless you want your text is larger or smaller, you can play with it yourself.

    "In my code, I wanted to also set it so that after a certain width of the window, the animation went to a static size so I did that."

    function setRatio() {}

    If ($(window) () .width)<= s)="">

    SW.height (sw.width () * thisRatio);

    }

    else {}

    SW.height (sh);

    }

    }

    s = the width of the window to which you want the size to go static LESS 1px

    SH = static height that you want the picture to stay in, this number automatically sets the width through the report.

    As insurance, you css for the size of the window, you want the static image to organize at all, the size of the .stagewrap in px

    I hope this helps!

  • How to create animated Scrolling Parallax and keep all pages with fluid width?

    Hi all

    I had a problem. When I draw the menu of a website, I am trying to add breakpoints so that menu will respond correctly to any modification of the width, and at the same time I am adding parallax scrolling effect to the background image.

    The problem is that when I turn on a fluid width, I can't enable scrolling:

    "to activate the effect of scrolling, your page must use fixed width".

    Any ideas how to fix this?

    See you soon!

    Scroll effects are not currently available in delicate design.

  • Animation inside the movie clip symbols in the part "header" of the web site

    Question: should I do a header animation of the website. seconds, it happens and is stopped with action script command stop(); but I need an elenment inside the flash header continue to animate like here: http://ves-lab.ru/ a scalable logo in the upper left corner of the header. If somewhere the answer has already been written - someone write a link to this source. Thank you.

    Make this entity that continues to animate a separate with its own animation movieClip.

  • Page with animation of edge will not publish/export in Colombia-British

    Hi there-

    I hope someone can help me. I've created an Animation of edge for my homepage, published, placed as a file OAM in the muse page and published the Business Catalyst site. The page that displays a "page not found" error I had work yesterday, but had to make some changes and today it does not work - and I don't think that I have done anything differently. I also noticed that, for some reason, this page shows the "Export Page" Toggle Outlining as being disabled. Any idea what is the problem?

    Check the file if its properly linked on the page, also try to preview and check.

    Index of a site will have export page page is disabled.

    Thank you

    Sanjit

  • How to integrate an Edge animation to a Web site by hand

    I've created an animation of edge and published it as a file .oam.  But I need to work on the Web site on someone elses computer who doesn't have a creative cloud or even Dreamweaver.   I work in a text editor.

    What are the requirements - what should I do - to integrate the .oam file in this site?    All the references I've found bring Dreamweaver to do.   I have not access to Dreamweaver in this environment, to a text editor to edit HTML.

    I've done has been able to publish the project as a Web site and integrated like this 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 use for the import in another product, such as Dreamweaver or InDesign.  We do not recommend that you pack in OAM; Instead, ZIP your files and hand - integrate HTML unzipped as an iframe on your friend's computer.

    Hope that helps!

    -Elaine

  • Animation of edge eccentric download via Adobe Muse...

    I am a subscriber of Muse...

    I created an animation of edge and use it as a banner on my site. It seems to work fine in all browsers except IE9. After loads of art and animation plays and other HTML content on the page load, the content of edge disappears.

    If someone could take a look and tell me what they think, WHAT COULD BE GREAT. If I need to move the discussion on another forum for certain types of comments, let me know. Thanks again.

    www.derekhoyledesign.com

    Thanks... again.

    Hello

    It seems that by publishing the animation of Edge you t = was "Use Google Chrome Frame for IE 6, 7 and 8" option checked in the settings of publication.

    They can either uncheck that republish and then update/Re-insert the animation. Or you can add the following code in the metadata of all the pages that contain the animations of edge:

    To add these you must right click on the page, and click Page Properties > metadata and add this code to the HTML format "for".option.

    There is difference in how different browsers reder this code animation of edge through Muse. These two workaround solutions should solve the problem.

    I hope this helps.

    Kind regards

    Sachin

  • I created an animated banner 468 x 60 in edge animate. How to save the image hosted on my desk? (not in HTML)

    I created an animated banner 468 x 60 in edge animate. How to save the image hosted on my desk? (not in HTML)

    Hello

    This feature is not available in Adobe Edge animate. You cannot export as image of the animate edge.

    Publish here describe the options available on board

    M lively help | Publish your content

    Kind regards

    Devendra

  • How to make the link in the animation of edge?

    Hello

    I'm generating a link with php.

    I need the link to be introduced in my animations.

    I cannot hardcode the link into the animation through edge animate because the link is constantly evolving.

    Anyone have any ideas?

    Or if you know a way to encapsulate a tag embed html with an anchor tag, that would work too.

    Thank you

    Nexx

    Hi, first of all, if you use php to generate the dynamic link, then you will need wrap your project animated dashboard inside another php document, you can do this with the code below:

    <>

    include ("dynamicLink.php"); PHP file where your dynamic link is generated

    include ("edgeAnimateProject.html"); HTML EdgeAnimate file

    ?>

    This wrapper will then pull in your php file that generates the dynamic link. Inside of this php file you can activate the dynamic link php variable in a javascript variable by using the following code.

    http://www.Adobe.com ";? >

    If this dynamic link should then be used on a button you would then add the following code to a click action in your project EA code window:

    Window.Open (dynamicLink, "_blank");

  • Is it possible to import an After Effects animation in Edge animate for use of Muse?

    Is it possible to import an After Effects animation in Edge animate?  If this is not the case, how you can cut paths in edge animate?

    If you need transparency, then png sequence is the way to go. If she didn't need transparency then jpg sequences are are a good choice. To really keep the file size down, you can also watch the GIF animations. Usually, I shoot jpg or png sequence in Photoshop and use the timeline to create the animated gif. If you want the full video experience then output a mp4 of EI and drop in animate it but disable controls if it's just an animation sequence. for the movement to animate: mp4, webm, and animated GIFs are the choices.

    If you don't need to run a sequence of jpg or png of AE then use the tool of the region of interest in the model to cut the surplus. The output sequence, then drop a symbol to animate images.

    If you have a Lynda.com account I did a How To around creating a Preloader to animate from After Effects. Watch the Web request for video online course for beginners: create a Preloader

  • Incorporating animations of edge in Joomla: &lt; body &gt; tags?

    I'm working on the incorporation of the edge entertainment in Joomla, (without the use of iframes) should not be so difficult, at least in theory.

    I have successfully incorporated the code of edge in a Joomla! article and a check of the resulting web page shows all Javascript files load and do not generate errors. When I load the page, the animation works! So my workflow is correct, what is the dipping.

    A small problem. Edge, by default, writes a pair of < body > tags around the animation, which creates havoc on the web page, as it is, of course, an existing set of < body > tags and adding a second series up the entire page in the structural chaos.

    Can anyone suggest the best way to remove this part of the JS the edge of the output files? I'm not enough of a JS coder to see the obvious solution here.

    Once this small problem, it's resolved, I'll post the entire procedure for the coating of the animations of edge in Joomla articles, something I just summarized in a previous post.

    TIA!

    Thanks for your note, Elaine. I have used these tools to browser for years.

    I solved the problem! I usually test enough before I post a quesiton like this, but I missed a typo in of code stupid enough that I had done.

    I can tell you now that there is absolutely NO problem incorporating animations of edge in a 3.x for Joomla article. The small amount of "circumvention" required is simple enough, but certainly not as easy as a Flash SWF file in such an article.

    I have some experiences more to do with animations of edge in layers and then I'l pst the workflow here.

  • Animation of edge becoming over time lag

    I started to create an animation that uses nested symbols and loops on the timeline.

    The animation loads and plays very well on most devices. He starts to work perfectly smooth, but afterwards, it becomes very laggy and unusable.

    This may take 30 seconds to 5 minutes for that to happen according to the device or the computer, but the animation cannot be left open mainly on tablets or older computers.

    Please click on the green bottom left square to move forward in the animation. After a while, you'll notice lag.

    http://harbottlemedia.com/edge/sea/

    I tried to close all the loops by adding a trigger of sym.stop. () a Sym.play(1000) (000) or a sym.playReverse () and make sure there is nothing running forever that wil eat up memory, but it seems the memory is used up when even. At least, it looks like this sort of problem.

    I have also created a test animation with past much less and it finally becomes lag too.

    Please click on the small green square in the upper right to move to the next image

    http://www.harbottlemedia.com/seademo2/V6/

    Is there something I should know the symbols in a loop?

    For any help or suggestion would be appreciated.

    Thank you

    Johnny

    I think I found the issue here.

    In my project, I had a certain brief symbols in loop (from 1 to 3 seconds) that have been controlled and reset by a trigger of Sym.play(1000) (0); or sym.playReverse (;) at the end of the loop.

    I assume that more short loops woud be easier to load than most long!

    The project would begin end but would quickly become lag. It would be by unusable shot after 8 minutes on older machines and eventually stop completely. The elements more that I added to the project as quickly, he crawls.

    I changed all my curls to be approximately 2 minutes long in the repeating animation timelines over and over again instead of a backward loop initially so quickly.

    Now my animation worked a 6 year old laptop powered trough for 40 minutes without any lag.

    I have not checked on an iPad yet but hopefully with loading dynamically and to remove the symbols as needed (http://forums.adobe.com/message/6001189#6001189) now must run ok.

    I hope this helps someone! I took me a week to understand!

  • Cannot get the buttons to start the animation of edge

    Hi all.

    I have a simple animation I want to deposit in the form of an article from indesign that I use for an ipad app. The problem is the buttons. I can't make it work at all with the animation.

    I need essentially a button so that the animation will start and also to show a cross (close) button and then once the close button is clicked, reverse the animation back out of the page.  I tried all sorts of ways via the animation Panel and Panel of buttons but can not even animation to come and even less to show hidden until the outbreak of the close button.  All the other buttons in the other articles are very well during the video release, url etc but no animation... I'm obviously something very wrong?

    Really appreciate any help with this as its hold on my life :-)

    Thank you very much

    GAV

    You mentioned the Animation Panel, which is a red flag. Native animations are not supported in DPS. Create your animation using another tool, such as Adobe Edge.

  • Animation of edge trigger on the loading of the page

    I use several Animations of edge in a DPS document I created.  When I opened the book, all of the animation start playing at the same time.

    Is there a way to trigger the animation starts when the user turns the page on animation?

    The value of the retard.125 seconds.

Maybe you are looking for

  • New app in the Canada?

    TThe new app to the Canada is not yet available? Or is it already? How to do it? Thank you.. I read the info on the change of region, it appeared, but it is not updated. iPad IOS 9.3 last air2

  • cost of shipping &amp; import

    I want to order an iphone 16 GB in Greece/Crete MC. Anyone know the cost of delivery and import taxes?

  • Change the iCloud email address

    Hello world I recently got the new iPhone 6s and have been in one of these modes because it up tidy. Basically, I want to change the name of my @icloud / address @me associated with my iTunes account. I don't want to change my iTunes just the iCloud

  • Questions card mother ThinkStation D20

    Hi I was wondering the card mother D20 does support Geforce SLI? Ordinary GPU not of Quadros? Also I was wondering what is the shape of the motherboard? Is it E - ATX or ATX?

  • Why is-"Logitech Download Wizard" in Windows (7) update? And Uneeded products offered for the download...

    Fucking hell, if MS let's all suppliers who has download products assign and distribute their own download manager for their own products, the operating system will become an another big mess!  I love the Logictech products but I see absolutely no re