htmlanimationionic-frameworkcreatejs

How to add an HTML5 animation generated with Adobe Animate CC to a Ionic 2 project page?

I have made an animation with Adobe Animate CC as HTML 5 canvas item. I can publish the animation in several ways:

In both cases, i'm not sure how to include the published result in a Ionic page and I think I'm missing something.

So, how do I include a Adobe Animate CC animation in a Ionic 2 Framework page?

UPDATE: 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 (the one contained in 

<script> some js here </script>

immediately after the import of the library createjs) and put it in a mylibrary.js file in /assets/js/mylibrary.js. This way, I was able to import it 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 exixts. So I tried to include the library, first taking the include from the Animate 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

import createjs from '../../assets/js/createjs'

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.

Solution

  • Just for people passing by, not an elegant solution, but at least one.

    You can save in Adobe Animate your animation as video ('mov' file) and optimize its size and format with Adobe Media Converter or whatever other program you like. I've converted it in mp4 in this case.

    NB: When you publish the video, if there is an audio track, it will be included in the video only if beginning at the second frame of the animation. It is a little tricky to discover, so worthy to be said.

    As soon as you have an 'mp4' file, add it to your app assets, and you could include it to a Ionic page in the classical html way. In my case, it was a video to play fullscreen so here it is my code:

    <ion-content padding>
  <div id="videocontainer">
    <video fullscreen="fullscreen" autoplay="true" (ended)="onVideoEnded()">
      <source src="assets/video/your_video_name.mp4" type="video/mp4">
    </video>
  </div>
</ion-content>