Edge Animate and RWD (Responsive Web Design) – The Easy Way

I have posted a new video tutorial on how to take your Edge Animate file and make it responsive (RWD).  Here are the files for you to download.

  1. The first thing that you need to do after creating your Edge Animate file is to add the link to css in the compositionReady part of the code.  The easiest place to put the css file is in the same file as your .an file.

    $(“<link rel=’stylesheet’ type=’text/css’ href=’css.css’>”).appendTo(“#Stage”);

  2. After you have finished this, you will need to set-up your css for the media queries.  You will have to change the values and add more queries to fit your exact page and animation.

    @media (min-width: 300px) {
    .scale { transform: scale(.2);
    -ms-transform: scale(.2);
    -webkit-transform: scale(.2); }
    @media (min-width: 500px) {
    .scale { transform: scale(.5);
    -ms-transform: scale(.5);
    -webkit-transform: scale(.5); }
    @media (min-width: 980px) {.scale { transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1); }

  3. Once this is complete, add another div around your stage in the html file.  You will need to open the html file in an editor and not in Edge Animate.  Your code should look like the code below.  You can see that my class from the css matches the class of the div around the stage that was created by Edge Animate.

    <div class=”scale”>
    <div id=”Stage” class=”EDGE-9558695″></div>

  4. You should be finished and you can go back into Edge Animate and preview your file in your browser.

Get a Trackback link

No Comments Yet

You can be the first to comment!

Leave a comment