Animate CC HTML Canvas：如何从外部HTML脚本调用根时间轴函数？

嘿，我来帮你搞定这个问题！要从外部HTML脚本调用Flash/Animate根时间轴里的myFunction，关键是先拿到SWF的引用，再确保函数能被外部访问，具体步骤如下：

1. 给嵌入的SWF添加唯一ID #

首先在HTML里嵌入SWF时，给<object>或<embed>标签加个id，方便后续获取SWF对象：

<!-- 示例嵌入代码，根据你的实际尺寸和SWF路径调整 -->
<object id="myAnimationSwf" width="600" height="400">
  <param name="movie" value="your-animation.swf">
  <embed id="myAnimationSwfEmbed" src="your-animation.swf" width="600" height="400">
</object>

加两个id是为了兼容不同浏览器对SWF嵌入的解析差异。

2. 编写外部JS代码调用函数 #

在外部JS文件（或HTML的<script>标签里），先获取SWF对象，再调用目标函数，记得要等SWF加载完成后再执行：

// 获取SWF对象的兼容方法
function getTargetSwf() {
  let swf = document.getElementById('myAnimationSwf');
  // 如果object标签没拿到，试试embed标签
  if (!swf || typeof swf.myFunction === 'undefined') {
    swf = document.getElementById('myAnimationSwfEmbed');
  }
  return swf;
}

// 等页面和SWF都加载完成后调用函数
window.addEventListener('load', function() {
  const targetSwf = getTargetSwf();
  if (targetSwf && typeof targetSwf.myFunction === 'function') {
    // 调用根时间轴的myFunction
    targetSwf.myFunction();
  } else {
    console.error('无法访问SWF中的函数，请检查：1. SWF是否加载完成；2. 函数是否在根时间轴定义；3. 浏览器安全设置');
  }
});

3. 关键注意事项 #

• AS3项目需额外暴露函数：如果你的动画是用AS3编写的，根时间轴的函数默认不能被外部JS访问，需要用ExternalInterface主动暴露：

  import flash.external.ExternalInterface;
  
  function myFunction():void {
    this.mc.gotoAndStop(1);
  }
  
  // 把函数暴露给外部JS，名字要和JS里调用的一致
  ExternalInterface.addCallback("myFunction", myFunction);
  

• 加载时机很重要：一定要等SWF完全加载完成再调用，否则会出现“函数未定义”的错误。
• 本地测试的安全问题：如果是本地打开HTML文件测试，部分浏览器可能因为安全限制阻止JS访问SWF，这时候需要给SWF添加本地信任（在Flash播放器设置里配置）。

内容的提问来源于stack exchange，提问作者Alessandro Zago