Flash庆元旦教程怎么做？-建站教程-锦华智联科技

这份教程将引导你从一个零基础的小白，一步步制作出一份会动、会说话的元旦祝福动画，我们将使用 Adobe Animate (Flash的继任者，但核心操作基本一致) 或旧版 Flash Professional 来完成。

（图片来源网络，侵删）

教程主题：制作一份“新年快乐”弹窗贺卡

最终效果预览： 屏幕中央出现一个红色的灯笼，灯笼下方有“新年快乐”四个字，点击灯笼后，灯笼会“砰”地一下消失，然后从屏幕两侧飞出两个小礼花，最后显示“Happy New Year!”的祝福语。

第一部分：准备工作

软件准备：
- 首选：Adobe Animate CC，这是目前官方推荐的Flash创作工具，可以免费试用，如果你是新手,建议使用这个。
- 备选：Adobe Flash Professional (旧版)，如果你有这个版本,操作也是完全一样的。
新建文档：
- 打开软件，点击 文件 -> 新建。
- 在弹出的窗口中，选择 ActionScript 3.0（这是目前最主流的版本）。
- 设置舞台大小，550 像素（宽） x 400 像素（高）。
- 背景色可以选择你喜欢的颜色，比如深蓝色 (#1A237E) 代表夜空。
- 点击 确定。

第二部分：绘制场景元素

步骤1：绘制灯笼

灯笼是我们动画的主角。

（图片来源网络，侵删）

新建图层： 在时间轴窗口，点击左下角的 新建图层 按钮，命名为 灯笼,这有助于我们管理不同的元素。
绘制形状：
- 选择 灯笼 图层。
- 在左侧工具栏选择 椭圆工具。
- 在属性面板中，设置填充颜色为红色 (#FF0000),边框为黑色。
- 按住 Shift 键,在舞台上画一个正圆。
添加细节：
- 选择 线条工具,画一条黄色的横线穿过灯笼中间。
- 再用 椭圆工具 画两个小黄色圆圈作为灯笼的上下挂饰。
- 用 文本工具 在灯笼下方输入文字“新年快乐”,并设置好字体和颜色。

现在你的舞台应该看起来像这样：

第三部分：制作动画

步骤2：让灯笼“呼吸”

为了让灯笼活起来,我们让它有一个轻微的上下浮动效果。

创建补间动画：
- 确保你还在 灯笼 图层。
- 在时间轴上，在第 20 帧处 右键点击，选择 插入关键帧，这一步是告诉Flash：在第20帧,灯笼的位置和状态要和第1帧保持一致。
- 选中第 10 帧，右键点击，选择 插入关键帧,这是动画的中间点。
改变位置：
- 选中第 10 帧舞台上的灯笼，用 选择工具 将它 稍微向上移动一点点。
创建补间：
- 在第 1 帧到第 10 帧之间 右键点击，选择 创建传统补间动画。
- 同样，在第 10 帧到第 20 帧之间也创建一个传统补间动画。

按 Ctrl + Enter (或 Cmd + Enter) 测试一下！你应该能看到灯笼在原地轻微地上下浮动。

第四部分：添加交互（点击事件）

这是最关键的一步，让贺卡“活”起来。

（图片来源网络，侵删）

步骤3：为灯笼添加点击事件

转换为元件：
- 在舞台上选中整个灯笼（包括文字）。
- 按 F8 键，或者右键选择 转换为元件。
- 给它命名，Lantern，类型选择 按钮，然后点击 确定。
- 注意： 现在灯笼变成了一个按钮,它的时间轴和主舞台是独立的。

编写代码：

选中舞台上的这个 Lantern 按钮。
在窗口下方找到 动作 面板（如果没看到，按 F9 打开）。
在代码编辑区输入以下代码：

// 为按钮添加一个点击事件监听器
// 当鼠标点击时，执行后面大括号 {} 里的代码
this.addEventListener(MouseEvent.CLICK, onLanternClick);
// 定义一个函数，名字叫 onLanternClick
function onLanternClick(event:MouseEvent):void {
    // 这行代码让灯笼本身不可见（即隐藏）
    // 'this' 在这里指代当前被点击的按钮对象
    this.visible = false;
    // 调用一个我们稍后会创建的函数，用来播放礼花动画
    playFireworks();
}

步骤4：创建礼花动画

新建图层和影片剪辑：
- 在 灯笼 图层上方，新建一个图层，命名为 礼花。
- 在 礼花 图层上，我们准备画礼花，画一个你喜欢的礼花图案,比如一个黄色的星星。
- 画好后，选中它，按 F8 转换为元件，这次类型选择 影片剪辑，命名为 Firework。

为礼花编写动画代码：

在库中（窗口 -> 库），双击打开 Firework 影片剪辑。
在 Firework 的时间轴上，新建一个图层，命名为 AS。
选中 AS 图层的第 1 帧，打开 动作 面板（F9）,输入以下代码：

// 让礼花一开始就位于舞台之外
this.x = -100; // 放在屏幕左边外面
this.y = Math.random() * 400; // Y坐标随机，在屏幕高度内
// 设置一个速度变量
var speed:Number = 10;
// 创建一个进入动画的函数
function flyIn():void {
    // 使用事件监听器，每帧都执行 move 函数
    this.addEventListener(Event.ENTER_FRAME, move);
}
// 定义移动函数
function move(event:Event):void {
    // 每次调用，X坐标都增加 speed 的值
    this.x += speed;
    // 如果礼花飞出了屏幕右边，就移除事件监听器，停止移动
    if (this.x > 650) { // 650 比舞台宽度550要大，确保完全飞出
        this.removeEventListener(Event.ENTER_FRAME, move);
    }
}
// 调用函数，开始飞入动画
flyIn();

回到主舞台，创建礼花实例：
- 关闭 Firework 影片剪辑的编辑窗口,回到主舞台。
- 确保 礼花 图层是当前图层。
- 从 库 中，把 Firework 影片剪辑 拖两次 到舞台上,你会看到舞台上有两个一模一样的礼花。
- 非常重要： 选中其中一个礼花，在属性面板里，把它的 实例名称 改为 firework1。
- 再选中另一个礼花，把它的实例名称改为 firework2，实例名称就像每个礼花的“身份证号”,代码通过它来区分和控制。

步骤5：完成 `playFireworks()` 函数

现在回到主舞台的 灯笼 图层，我们之前调用了 playFireworks() 函数，但这个函数还不存在,我们来创建它。

在主舞台，新建一个图层，命名为 代码,把它放在所有图层的最顶层。
选中 代码 图层的第 1 帧，打开 动作 面板。

在面板中输入以下代码：

// 定义 playFireworks 函数
function playFireworks():void {
    // 控制 firework1 实例
    // 先把它放回屏幕左边外面
    firework1.x = -100;
    firework1.y = Math.random() * 400;
    // 重新触发它的飞入动画
    firework1.fireIn(); // 注意：这里调用的函数名要和Firework元件里定义的一致
    // 控制 firework2 实例
    // 这次我们从右边飞入
    firework2.x = 650; // 放在屏幕右边外面
    firework2.y = Math.random() * 400;
    // 需要稍微修改一下Firework元件里的代码，让它能从右边飞入
    // （为了简化，我们先假设它能飞入）
    firework2.speed = -10; // 速度为负，就是向左飞
    firework2.fireIn(); // 重新触发动画
}

注意： 上面的代码有个小问题，为了让礼花能从左边或右边飞入，我们需要修改一下 Firework 元件里的代码，打开 Firework 元件，修改 move 函数如下：

// 在 Firework 元件的 AS 图层第1帧
function move(event:Event):void {
    this.x += speed; // speed 可以是正数（向右）或负数（向左）
    // 判断是否飞出屏幕（无论是左边还是右边）
    if (this.x > 650 || this.x < -100) {
        this.removeEventListener(Event.ENTER_FRAME, move);
    }
}

第五部分：添加最终祝福语

新建图层： 新建一个图层，命名为 祝福语,放在最顶层。
输入文字： 在舞台下方，用 文本工具 输入 "Happy New Year!"。
设置属性： 设置好字体、大小和颜色，为了让它出现得晚一点，在第 40 帧处 插入空白关键帧,然后把文字移到舞台中央。
制作淡入效果： 在第 40 帧创建一个关键帧，在第 50 帧再创建一个关键帧，选中第 40 帧的文字，在属性面板里找到 颜色 -> Alpha，把它设为 0%（完全透明），然后在第 40 帧和第 50 帧之间创建 传统补间动画。

第六部分：测试与导出

测试动画： 按 Ctrl + Enter (或 Cmd + Enter)。
- 你应该能看到灯笼在呼吸。
- 点击灯笼，它会消失,然后两个礼花从两侧飞入。
- "Happy New Year!" 会淡入显示。
- 如果一切正常,恭喜你！
导出动画：
- 按 Ctrl + Enter 测试时，Flash会自动在同一个文件夹下生成一个 .swf 文件，这就是你的最终动画文件,可以直接用网页浏览器打开。
- 如果你想把它放到网页里，可以选择 文件 -> 发布设置，勾选 HTML 和 Flash (.swf)，然后点击 发布，这样就会生成一个 .html 文件和一个 .swf 文件,把这两个文件一起上传到服务器就可以用浏览器访问了。

总结与扩展

恭喜你！你已经完成了你的第一个Flash交互式元旦贺卡！

你可以尝试扩展它：

添加音效： 在点击灯笼时，播放一个“砰”的声音，使用 Sound 类和 Channel 类。
制作更多礼花： 创建不同形状和颜色的礼花影片剪辑,随机调用它们。
添加背景动画： 让背景的星星也闪烁起来。
制作倒计时： 在贺卡上添加一个新年倒计时功能。

这个教程涵盖了Flash动画制作的三大核心：绘制、动画、交互，希望它能帮助你开启Flash创作的大门！祝你新年快乐！

Flash庆元旦教程怎么做？

教程主题： 制作一份“新年快乐”弹窗贺卡

第一部分：准备工作

第二部分：绘制场景元素

步骤1：绘制灯笼

第三部分：制作动画

步骤2：让灯笼“呼吸”

第四部分：添加交互（点击事件）

步骤3：为灯笼添加点击事件

步骤4：创建礼花动画

步骤5：完成 playFireworks() 函数

第五部分：添加最终祝福语

第六部分：测试与导出

总结与扩展

教程主题：制作一份“新年快乐”弹窗贺卡

步骤5：完成 `playFireworks()` 函数