I have made an animation with Adobe Animate CC as HTML 5 canvas item. I can publish the animation as html, that is compound of: 1 file html, 1 file js (and one external library included, named createjs), several directory with included file. Including it in a Ionic page means unpacking the html/js and distribute code in the ionic pages/files. I’m trying but it is a bit complex.
Here is what i tried…
I tried to unpack the html. Tried publishing the animation as HTML5 animation, with the publish setting “Included javascript in HTML”. This way all the necessary js is put inside the html file that the publish procedure outputs. Then I took that js that is the animation code (the one contained in
< script > some js here < /script >
immediately after the classical import of the library createjs) and put it in a mylibrary.js file in /assets/js/mylibrary.js. I’ve put in the ‘js’ directory all the included directory and files necessary to the script. This way, I was able to import the script in the ts file of one ionic page like
import mylibrary from ‘…/…/assets/js/mylibrary’
and then try to initialize the animation like
ionViewDidLoad(){
mylibrary.init()
}
In the original file the init() function was called on body like
< body onload=“init()” >
Unfortunately it doesn’t work. The error thrown is
cjs.Bitmap is not a constructor
that is not really important as error, if not to state that clearly the library createjs is not imported in the right way for it cannot associate its cjs variable of mylibrary.js that contains a function like
(function (lib, img, cjs, ss, an) {
… (all code here)
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{}, AdobeAn = AdobeAn||{});
to createjs variable of the library. I mean, commenting the cjs.Bitmap line, it starts complaining about the subsequent cjs.Rectangle that does not exists. So I tried to include the library, first taking the include from the Animate CC generated html
< script src=“libs/createjs-2015.11.26.min.js” >< /script >
and put it in my main ‘index.html’ app file (copying in asset/js the directory lib containing the file). Did not work. Tried with the live version of the library
< script src=“https://code.createjs.com/createjs-2015.11.26.min.js” >< /script >
Did not work. Tried even to add all the other (unecessary library linked to createjs like easejs etc https://code.createjs.com/). Did not work. Then I tried adding the library in the ts file adding before the import of mylibrary.js
import createjs from ‘…/…/assets/js/createjs’
import mylibrary from ‘…/…/assets/js/mylibrary’
Did not work. Even tried to npm install createjs, createjs-module and createjs-easeljs and import them.
import easeljs from ‘createjs-easeljs’;
import createjs-module from ‘createjs-module’;
import createjs from ‘createjs’;
Guess what? Did not work. Any time I said “did not work” the problem was ever the same error “cjs.Bitmap is not a constructor”. Presently I couldn’t find a way to import an animation generate via Adobe Animate CC into Ionic.