1. 场景设置与动画制作：创建主场景和加载场景。
  2. Loading动画制作：在加载场景中制作一个动态的加载效果。
  3. ActionScript (AS3) 代码编写：编写核心逻辑来控制加载进度和场景跳转。

最终效果预览

  • 打开Flash，首先会看到一个小动画（Loading Bar）。
  • Loading Bar会随着资源加载进度而填充。
  • 当进度达到100%时，自动跳转到第二个场景（主动画）并开始播放。

第一步：场景设置与动画制作

我们需要至少两个场景：一个用于加载,一个用于主内容。

创建新文档

  • 打开 Adobe Animate CC (或更早版本的 Adobe Flash Professional)。
  • 创建一个新的 ActionScript 3.0 文档。（非常重要，AS2的语法和实现方式完全不同）

创建和命名场景

  • 在顶部菜单栏，选择 窗口 -> 其他面板 -> 场景，或者直接按 Shift + F2 打开场景面板。
  • 你会看到默认的 "场景 1"，这将是我们的主动画场景。
  • 点击场景面板下方的 添加场景 按钮（ 图标），创建第二个场景，它会被命名为 "场景 2"。
  • 在场景面板中，拖动 "场景 2" 到 "场景 1" 的上方。这一步至关重要！ 因为Flash会按照场景面板从上到下的顺序来加载和播放场景，我们把加载场景放在最上面,它就会最先被加载和执行。

为场景命名

  • 双击 "场景 1"，将其重命名为 MainScene（主场景）。
  • 双击 "场景 2"，将其重命名为 LoadingScene（加载场景）。

制作主场景动画

  • 点击场景面板中的 MainScene,进入主场景。
  • 你可以尽情创作你的主动画，可以是形状补间、传统补间、动画片段等。
  • 为了让教程更完整，我们可以在主场景的第一帧添加一些静态或动态的图形元素，并给第二帧添加一个 stop() 动作，让动画停留在第二帧,等待Loading完成后再从第一帧开始播放。

制作加载场景动画

  • 点击场景面板中的 LoadingScene,进入加载场景。
  • 创建加载条：使用矩形工具画一个细长的、无边框的矩形作为加载条的背景（比如灰色）。
  • 再画一个稍短一点的、不同颜色的矩形作为加载条的填充部分（比如蓝色）,这个矩形就是我们要用代码来控制宽度的部分。
  • 将加载条填充部分转换为影片剪辑：
    • 选中蓝色的加载条填充矩形。
    • 按 F8 键，将其转换为“影片剪辑”，给它起一个实例名，loadingBar_mc,在属性面板中设置。
    • 关键：为了方便定位，请将这个影片剪辑的注册点设置为其左侧中心点，你可以在转换影片剪辑的弹窗中调整，或者在转换后，使用“任意变形工具”将中心点拖拽到左侧边缘。
  • 创建加载文本（可选但推荐）：
    • 使用文本工具,创建一个动态文本框。
    • 在属性面板中，将其类型设置为“动态文本”，并给它一个实例名，percent_txt。
    • 这样我们就可以用代码来实时显示加载的百分比了。

第二步：准备资源并导出设置

为了让加载过程有意义,我们需要一些比较大的资源。

添加资源

  • 回到 MainScene。
  • 按 Ctrl + R (或 Cmd + R) 导入一张大图片或一个包含复杂动画的影片剪辑，这会增加文件大小,从而让我们能看到加载过程。
  • 你也可以导入一个声音文件到库中,让它作为背景音乐。

设置文档类（高级，但推荐）

  • 在顶部菜单栏，选择 文件 -> 发布设置。
  • 在 Flash 选项卡中，找到“ActionScript 版本”，点击“设置”按钮。
  • 在“类”的输入框中，输入一个类名，MainDocument，然后点击“确定”。
  • Flash会提示你创建一个ActionScript文件，点击“是”，这会自动创建一个与文档同名的AS文件（MainDocument.as），并把它和你的FLA文件放在同一目录下,这个文件将作为我们整个应用的入口点。

第三步：编写 ActionScript (AS3) 代码

这是整个教程的核心，我们将代码分为两部分：一部分写在主时间轴上,另一部分写在独立的AS文件中。

直接写在主时间轴上（简单，适合小项目）

  1. 在 LoadingScene 的第一帧添加代码：

    • 进入 LoadingScene，新建一个图层，命名为 "Actions"。
    • 在 "Actions" 图层的第一帧，按 F9 打开动作面板。
    • 粘贴以下代码：
    // 停止当前场景的播放，等待加载完成
stop();
// 创建一个LoaderInfo对象，它包含了加载进度的信息
// root.loaderInfo 指的是整个SWF文件的加载信息
var myLoader:LoaderInfo = this.root.loaderInfo;
// 监听加载过程中的进度事件
myLoader.addEventListener(ProgressEvent.PROGRESS, loading);
// 监听加载完成事件
myLoader.addEventListener(Event.COMPLETE, loaded);
// 加载进度函数
function loading(e:ProgressEvent):void {
    // 计算加载的百分比 (已加载字节数 / 总字节数)
    // * 100 得到百分比，然后四舍五入取整
    var percent:Number = Math.round((e.bytesLoaded / e.bytesTotal) * 100);
    // 在动态文本框中显示百分比
    percent_txt.text = percent + "%";
    // 根据百分比设置加载条的宽度
    // 假设你的加载条背景宽度是300像素
    // loadingBar_mc 的宽度 = 百分比 * 3 (因为 300 / 100 = 3)
    loadingBar_mc.width = percent * 3;
}
// 加载完成函数
function loaded(e:Event):void {
    // 移除事件监听器，防止内存泄漏
    myLoader.removeEventListener(ProgressEvent.PROGRESS, loading);
    myLoader.removeEventListener(Event.COMPLETE, loaded);
    // 跳转到主场景，并从第一帧开始播放
    // MovieClip(root) 指向主时间轴
    MovieClip(root).gotoAndPlay("MainScene", 1);
}

  2. 在 MainScene 的第一帧添加代码：

    • 进入 MainScene，新建一个 "Actions" 图层。
    • 在第一帧按 F9，添加以下代码，确保动画在开始时是暂停的,等待Loading场景跳转过来。
    // 停止主场景的播放，等待Loading场景跳转过来
stop();

使用文档类（更专业，推荐）

这种方法将代码与FLA文件分离,结构更清晰。

  1. 创建 MainDocument.as 文件

    • 如果你之前设置了文档类，Flash已经为你创建了这个文件,打开它。
    • 粘贴以下代码：
    package {
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    public class MainDocument extends MovieClip {
        public function MainDocument() {
            // 构造函数，当SWF文件被加载时自动执行
            // 检查当前场景是否是LoadingScene
            if (currentScene.name == "LoadingScene") {
                // 如果是，则开始加载逻辑
                startLoading();
            } else {
                // 如果不是（比如直接访问MainScene），则直接播放
                play();
            }
        }
        private function startLoading():void {
            // 停止LoadingScene的播放
            stop();
            var myLoader:LoaderInfo = this.root.loaderInfo;
            myLoader.addEventListener(ProgressEvent.PROGRESS, onProgress);
            myLoader.addEventListener(Event.COMPLETE, onComplete);
        }
        private function onProgress(e:ProgressEvent):void {
            // 获取LoadingScene中的元件
            // 我们需要通过 getChildByName 来访问
            var loadingScene:MovieClip = MovieClip(this.getChildAt(this.getChildIndex(this)));
            var loadingBar:MovieClip = MovieClip(loadingScene.getChildByName("loadingBar_mc"));
            var percentText:flash.text.TextField = flash.text.TextField(loadingScene.getChildByName("percent