loading external css file in adobe edge animate

Question

To load an external js-file you can use yepnope like schown here.

But when I define a .css file like this in the stage-composition-ready-window:

 yepnope({nope:['mystyle.css']});

The correct loading code is integrated in the generated source but css is not working.

Can someone please help me?

Answer 1

Does the solution to call an external source file using jQuery itself not do what you need?

$("<link rel='stylesheet' type='text/css' href='mystyle.css'>").appendTo("#Stage");

Answer 2

Is there a special reason why are you using the "nope" property of your argument? I'm the creator of the extension library "Edge Commons" for Edge Animate and we are using CSS files in Animate all the time. Here is the official documentation, on how to load the lib and the dependent CSS file: http://www.edgedocks.com/edgecommons#anchor_edgecommons_22

Our default yepnope call looks something like this:

// compositionReady
yepnope({
  load: "path/style.css",
  complete: function() {
    // Do something when loading is complete
  }
});

Hope that helps.

BTW: You don't need the preceding "sym" in "sym.$()". The latter is a special modified jQuery selector function from Animate, to get children (elements) from a specific symbol. It's only needed to resolve the real id in the DOM (which looks something like "Stage_mySymbol_Rectangle" instead of "Rectangle"). But you can still use the regular $() function to use the global jQuery version...

Answer 3

You need to use above line with 'sym.' prefix:

sym.$("<link rel='stylesheet' type='text/css' href='mystyle.css'>").appendTo("#Stage");