Skip to main content
Inspiring
December 31, 2022
Answered

what is the search term I am looking for to adapt easelJS to JS that will work in animate?

  • December 31, 2022
  • 1 reply
  • 1401 views

Guys so I am not just here asking stupid questions all the time can you please point me toward the reference or give me the search terms I need to look up how to convert an easelJS file like the asteroids examples - or just some general Javascript from a tutorial- into something that will work from the animate cc timeline or can be used in a class file as a separate code.js.

I understand it can be done but cannot find the correct "easelJS to animate JS" dictionary...  is there such a thing?

Yes I am following your advice, yes I am looking at tutorials and reading the docs, I just seem to be making such painfully slow progress.  

If you can send me toward the right references this would really help

Thanks

 

    This topic has been closed for replies.
    Correct answer kglad

    asteroids looks like it's no longer supported.  at least, that github link fails.

     

    i checked the drag and drop game and that has dependencies* not in the game js.

     

    *

    <link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
    <link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
    <script src="../_assets/js/examples.js"></script>

    <script src="../lib/easeljs-NEXT.js"></script>

     

    eg, here is example.js

     

    /**
    * Very minimal shared code for examples.
    */

    (function() {
    if (document.body) { setupEmbed(); }
    else { document.addEventListener("DOMContentLoaded", setupEmbed); }

    function setupEmbed() {
    if (window.top != window) {
    document.body.className += " embedded";
    }
    }

    var o = window.examples = {};
    o.showDistractor = function(id) {
    var div = id ? document.getElementById(id) : document.querySelector("div canvas").parentNode;
    div.className += " loading";
    };

    o.hideDistractor = function() {
    var div = document.querySelector(".loading");
    div.className = div.className.replace(/\bloading\b/);
    };
    })();


    bottomline about the createjs demos: they are not designed for use by inexperienced coders.  they are designed to show what can be done.

    1 reply

    kglad
    Community Expert
    Community Expert
    December 31, 2022

    you can add another (in addition to createjs) javascript library (eg, anime.js), if that's what you want.

     

    and you can use plain old javascript in your animate canvas project.

    Inspiring
    December 31, 2022

    Hey thanks kglad - I found this

    https://community.adobe.com/t5/animate-discussions/html5-canvas-animate-cc-how-to-add-external-scripts-and-load-json-files/td-p/9438800

    it gives a step by step but then says its only for AS3 - I can follow the steps until I get to the last step where it says in the publish setting you click on the wrench button - but in adobe animate cc HTML5 canvas there is no wrench button in the publish settings?

    Can you please point towards the documentation- I am searching and searching but cant seem to find anything.

    I am super grateful for your efforts so thanks - hopefully I will get there

    Inspiring
    January 1, 2023

    ok so I realise now that the code that was available for you to "edit" here on the easelJS demos page is not the whole thing- there are other scripts here- some that relate to the asteroids example and some that dont.

    I think I have learnt something here- 

    I added the scrips that seemed to be needed and fixed a few errors - now I will go back and look at the "gameCanvas"


    Ok I think I might give up on this and find and easier test or make something from scratch at this point- my mistake was to think that the code they were giving you was all the code that was driving the project - this (and me being stupid) was the reason why I couldnt get it to run?