• 准备工作
  • 创建按钮
  • 创建菜单内容
  • 编写 ActionScript 3.0 (AS3) 代码
  • 测试与优化

教程目标

创建一个主按钮，当鼠标悬停在上面时，会平滑地向下展开一个子菜单列表，当鼠标移开主按钮区域时,子菜单会平滑地收起。

第一步：准备工作

  1. 打开 Adobe Animate: 启动 Adobe Animate CC。
  2. 新建文档: 选择 文件 -> 新建，然后创建一个新的 ActionScript 3.0 文档，AS3 是目前最稳定和功能强大的版本。
  3. 设置舞台: 在属性面板中，你可以设置舞台的大小，800 x 600 像素，背景色设为你喜欢的颜色（比如浅灰色 #CCCCCC）。

第二步：创建主按钮

我们将使用 Animate 的“按钮”元件来创建主按钮。

  1. 插入新建元件: 按 Ctrl + F8 (Windows) 或 Cmd + F8 (Mac)，打开“创建新元件”对话框。

    • 名称: 命名为 MainButton。
    • 类型: 选择 “按钮”。
    • 点击 “确定”。

  2. 设计按钮的四个状态:

    • 弹起: 这是按钮的默认外观，我们可以绘制一个矩形作为按钮背景,并添加文字。

      • 选择 “矩形工具”，在舞台上画一个矩形，填充色设为深蓝色 (#2E5266)。
      • 选择 “文本工具”，在矩形上输入文字，产品中心”,字体颜色设为白色。
      • 选中矩形和文字，按 Ctrl + K (Windows) 或 Cmd + K (Mac) 打开“对齐”面板，选择“相对于舞台”，然后点击“水平居中”和“垂直居中”,让内容完美居中。

    • 指针经过: 这是鼠标悬停在按钮上时的状态,我们可以改变颜色或添加效果来提供视觉反馈。

      • 在时间轴上点击 “指针经过” 帧，然后按 F6 插入一个关键帧。
      • 选中舞台上的矩形，在属性面板中将其填充色改为更亮的蓝色 (#3A6B85)。

    • 按下: 这是鼠标点击按钮时的状态,我们可以让颜色更深。

      • 在时间轴上点击 “按下” 帧，按 F6 插入关键帧。
      • 选中矩形，将其填充色改为更深的蓝色 (#1E3A4F)。

    • 点击: 这个帧用于定义鼠标点击的有效区域，默认情况下，它会继承“弹起”帧的内容,我们不需要修改它。

  3. 返回场景: 点击时间轴左上角的 “场景 1”,回到主时间轴。

  4. 将按钮放入舞台: 从“库”面板（按 Ctrl + L 或 Cmd + L 打开）中，将 MainButton 元件拖拽到舞台的合适位置（比如左上角）。

第三步：创建下拉菜单内容

下拉菜单本身也是一个 MovieClip 元件,因为它需要包含动画。

  1. 插入新建元件: 再次按 Ctrl + F8。

    • 名称: 命名为 DropdownContent。
    • 类型: 选择 “影片剪辑”。
    • 点击 “确定”。

  2. 设计菜单项:

    • 在 DropdownContent 元件的编辑界面,我们创建几个垂直排列的按钮作为菜单项。
    • 第一项: 在第 1 帧上，用矩形工具画一个比主按钮稍宽的矩形（150 x 40 像素），填充色设为与主按钮“弹起”时相同的深蓝色，用文本工具在里面输入“子菜单 1”。
    • 后续项: 选中第一个矩形和文字，按 Ctrl + D (Windows) 或 Cmd + D (Mac) 复制一份，将复制品向下移动，并修改文字为“子菜单 2”，重复此操作，创建“子菜单 3”等。
    • 对齐: 选中所有菜单项，使用“对齐”面板让它们顶端对齐并均匀分布。

  3. 设置初始状态:

    • 我们希望菜单一开始是隐藏的，在第 1 帧上，选中整个菜单项组，在属性面板中将其 Y 坐标 设置为 0，这样,菜单会从主按钮的底部开始。
    • 为了方便代码控制，我们给这个影片剪辑一个 实例名称，在舞台上选中它，然后在属性面板的 “实例名称” 输入框中填入：dropdown_mc。

  4. 创建动画帧:

    • 在时间轴上，点击第 10 帧，按 F6 插入一个关键帧。
    • 选中第 10 帧上的 dropdown_mc，在属性面板中将其 Y 坐标 设置为它完全展开后的位置，如果你的每个菜单项高 40px，有 3 项，那么总高度是 120px，Y 坐标就应该是 -120。
    • 在第 1 帧和第 10 帧之间，右键点击，选择 “创建传统补间动画”，你会看到一条箭头连接这两帧,表示动画已创建。

  5. 创建收起动画:

    • 点击第 20 帧，按 F6 插入一个关键帧。
    • 选中第 20 帧上的 dropdown_mc，将其 Y 坐标 重新改回 0。
    • 在第 10 帧和第 20 帧之间，再次右键点击，选择 “创建传统补间动画”。

  6. 添加停止动作:

    • 为了让菜单停留在收起和展开的状态,我们需要在动画的关键帧上添加代码。
    • 新建一个图层，命名为 Actions。
    • 在 Actions 图层的第 1 帧、第 10 帧和第 20 帧上，分别按 F9 打开“动作”面板，输入代码：stop();。
    • 你的时间轴现在应该看起来像这样：
      • 第 1 帧: stop(); (菜单收起)
      • 第 10 帧: stop(); (菜单展开)
      • 第 20 帧: stop(); (菜单收起)

  7. 返回场景: 点击“场景 1”,回到主时间轴。

第四步：编写 ActionScript 3.0 (AS3) 代码

这是最关键的一步,我们将通过代码来控制菜单的显示和隐藏。

  1. 给主按钮命名: 在舞台上，选中我们之前拖入的 MainButton 实例，在属性面板中，给它一个 实例名称，main_btn。

  2. 给下拉菜单命名: 从“库”面板中，将 DropdownContent 元件也拖拽到舞台的同一个位置（确保它在 main_btn 的下方），选中这个实例，在属性面板中给它一个 实例名称，dropdown_container。

  3. 打开动作面板: 在主时间轴上，新建一个图层，命名为 Actions，选中这个图层的第 1 帧，按 F9 打开“动作”面板。

  4. 编写代码: 在动作面板中,输入以下代码：

    // 定义两个变量，用于跟踪菜单的当前状态和动画方向
var isOpen:Boolean = false; // 假设菜单初始是关闭的
var isExpanding:Boolean = false; // 是否正在展开中
// --- 事件监听器 ---
// 当鼠标移到主按钮上时
main_btn.addEventListener(MouseEvent.ROLL_OVER, showMenu);
// 当鼠标从主按钮上移开时
main_btn.addEventListener(MouseEvent.ROLL_OUT, hideMenu);
// --- 函数定义 ---
// 显示菜单的函数
function showMenu(e:MouseEvent):void {
    // 如果菜单已经打开，或者正在展开，则不再执行
    if (isOpen || isExpanding) {
        return;
    }
    isExpanding = true; // 标记为正在展开
    dropdown_container.gotoAndPlay(1); // 从第1帧开始播放（展开动画）
}
// 隐藏菜单的函数
function hideMenu(e:MouseEvent):void {
    // 如果菜单已经关闭，或者正在收起，则不再执行
    if (!isOpen || isExpanding) {
        return;
    }
    isExpanding = true; // 标记为正在收起
    dropdown_container.gotoAndPlay(11); // 从第11帧开始播放（收起动画）
}
// 监听下拉菜单动画的完成事件
dropdown_container.addEventListener(Event.ENTER_FRAME, checkAnimation);
// 检查动画是否完成的函数
function checkAnimation(e:Event):void {
    // 检查播放头是否在第10帧（展开完成）或第20帧（收起完成）
    if (dropdown_container.currentFrame == 10 || dropdown_container.currentFrame == 20) {
        isExpanding = false; // 动画结束，取消标记
        // 根据当前帧更新isOpen状态
        if (dropdown_container.currentFrame == 10) {
            isOpen = true;
        } else {
            isOpen = false;
        }
    }
}

代码解释:

  • isOpen: 一个布尔值，用来追踪菜单是打开 (true) 还是关闭 (false)。
  • isExpanding: 一个布尔值，用来防止动画在播放过程中被重复触发,避免菜单抖动。
  • main_btn.addEventListener(...): 给主按钮添加事件监听器。ROLL_OVER 是鼠标悬停，ROLL_OUT 是鼠标移开。
  • dropdown_container.gotoAndPlay(1): 告诉下拉菜单影片剪辑从第 1 帧开始播放,也就是执行展开动画。
  • dropdown_container.gotoAndPlay(11): 告诉它从第 11 帧开始播放,也就是执行收起动画。
  • Event.ENTER_FRAME: 这是一个持续不断的事件，每帧都会触发,我们用它来检查动画播放到了哪一帧。
  • checkAnimation 函数: 在 ENTER_FRAME 事件中，我们检查播放头是否到达了动画的终点（第10帧或第20帧），如果是，我们就更新 isOpen 的状态，并将 isExpanding 设为 false,允许下一次触发。

第五步：测试与优化

  1. 测试影片: 按 Ctrl + Enter (Windows) 或 Cmd + Enter (Mac) 来测试你的动画。

    • 将鼠标移到“产品中心”按钮上,你应该能看到菜单平滑地展开。
    • 将鼠标从按钮上移开,菜单应该平滑地收起。
    • 反复测试几次，确保动画流畅,没有卡顿或错误。

  2. 可选优化:

    • 给菜单项添加链接: 你可以为每个子菜单项也创建按钮，并给它们添加 MouseEvent.CLICK 事件监听器,来实现跳转到不同页面的功能。
    • 添加音效: 可以在按钮的“指针经过”和“按下”帧上添加音效,增强用户体验。
    • 美化设计: 使用更漂亮的字体、颜色和阴影效果,让菜单看起来更专业。

恭喜你！你已经成功使用 Adobe Animate 创建了一个功能完善、带有平滑动画的下拉菜单。