Question

我使用Adobe Animate CC制作了一个动画作为HTML 5画布项目。我可以用几种方式发布动画：

作为html：1个文件html，1个文件js，包含文件的几个目录。页面是全包的（头部，正文，包括库），并在Ionic页面中包含它意味着解压缩html（对吗？）。我尝试但似乎有点复杂。
作为电影.mov，但在文件大小方面有点贵

在这两种情况下，我都不确定如何将公布的结果包含在离子页面中，我想我错过了一些东西。

那么，如何在Ionic 2 Framework页面中包含Adobe Animate CC动画？

更新：我试图解压缩html。尝试将动画发布为HTML5动画，使用发布设置＆＃34;包含HTML和＃34;中的javascript。这样，所有必需的js都放在发布过程输出的html文件中。然后我拿了那个js（

中包含的那个）

<script> some js here </script>

在导入库createjs之后立即将其放入/assets/js/mylibrary.js中的mylibrary.js文件中。这样，我就可以在一个离子页面的ts文件中导入它，如

import mylibrary from '../../assets/js/mylibrary'

然后尝试初始化动画，如

  ionViewDidLoad(){
     mylibrary.init()
  }

在原始文件中，init（）函数在body上调用，如

<body onload="init()">

不幸的是它不起作用。引发的错误是

cjs.Bitmap is not a constructor

这不是真正重要的错误，如果不明确说明库createjs没有以正确的方式导入，因为它无法关联包含像

这样的函数的mylibrary.js的cjs变量

(function (lib, img, **cjs**, ss, an) {
… (all code here)
})(lib = lib||{}, images = images||{}, **createjs = createjs||{}**, ss = ss||{}, AdobeAn = AdobeAn||{});

创建库的变量。我的意思是，在评论cjs.Bitmap行时，它开始抱怨没有exixts的后续cjs.Rectangle。所以我尝试包含该库，首先从Animate生成的html中获取包含

<script src="libs/createjs-2015.11.26.min.js"></script>

并将其放入我的主要＆＃39; index.html＆＃39; app文件（在asset / js中复制包含该文件的目录lib）。不工作。尝试使用库的实时版本

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

没用。甚至尝试添加所有其他的（不必要的库链接到createjs，如easejs等https://code.createjs.com/）。不工作。然后我尝试在导入mylibrary

之前添加ts文件中的库

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

没用。甚至尝试过npm安装createjs，createjs-module和createjs-easeljs并导入它们。

import easeljs from 'createjs-easeljs';
import createjs-module from 'createjs-module';
import createjs from 'createjs';

猜猜是什么？不工作。任何时候我说＆＃34;没有工作＆＃34;问题是同样的错误＆＃34; cjs.Bitmap不是构造函数＆＃34;。目前，我无法找到通过Adobe Animate CC将动画生成导入Ionic的方法。

Answer 1

仅适合经过的人，不是优雅的解决方案，而是至少一个。

您可以将Adobe动画保存为动画视频（＆＃39; mov＆＃39;文件）并使用Adobe Media Converter或您喜欢的任何其他程序优化其大小和格式。在这种情况下，我已经用mp4转换了它。

注意：发布视频时，如果有音轨，只有从动画的第二帧开始，它才会包含在视频中。发现它有点棘手，值得一提。

只要你有一个＆＃39; mp4＆＃39;文件，将其添加到您的应用资产，然后您可以以经典的html方式将其包含在Ionic页面中。就我而言，这是一个全屏播放的视频，所以这是我的代码：

<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>

如何将使用Adobe Animate CC生成的HTML5动画添加到Ionic 2项目页面？

1 个答案: