Flash按钮特效教程如何快速学会？

Flash按钮特效教程：从入门到精通

按钮是交互式动画的灵魂,一个酷炫的按钮特效能让你的网站或作品增色不少，本教程将教你如何创建不同复杂度的按钮特效。

第一部分：基础知识

在开始制作特效之前,我们必须先理解Flash中按钮的核心机制：时间轴。

Flash按钮不是一张静态图片,而是一个拥有4帧特殊状态的小型时间轴。

1. 弹起: 鼠标没有接触按钮时的默认状态。
2. 指针经过: 鼠标指针悬停在按钮上时的状态。
3. 按下: 鼠标在按钮上按下时的状态。
4. 点击: 这是一个可选的帧，用于定义按钮的响应区域（热区），如果这一帧为空，则按钮的形状本身就是热区，如果这一帧有图形，那么只有在这个图形区域内点击才会触发按钮事件，通常我们让它保持为空。

核心思想： 我们要做的特效，就是为这四个帧中的每一帧，制作不同的视觉内容，当用户的鼠标与按钮交互时，Flash会自动切换到对应的状态帧，从而显示我们预设的动画效果。

第二部分：基础特效 - 颜色与缩放变化

这是最简单也最常用的特效,适合初学者。

目标： 制作一个鼠标悬停时会放大并改变颜色，点击时会有下压效果的按钮。

步骤：

1. 创建新元件

   • 按 Ctrl + F8 (Windows) 或 Cmd + F8 (Mac) 打开“创建新元件”对话框。
   • 名称输入“MyButton”，类型选择“按钮”，然后点击“确定”。

2. 设计“弹起”状态

   
   （图片来源网络，侵删）
   • 进入按钮的时间轴,你会看到四个空白的关键帧。
   • 在 弹起 帧上，使用矩形工具画一个圆角矩形，填充你喜欢的颜色，然后使用文本工具在矩形上写上“Click Me”。

3. 设计“指针经过”状态

   • 在时间轴上,右键点击 指针经过 帧，选择“插入关键帧”，这会复制“弹起”帧的所有内容。
   • 选中舞台上的图形和文字。
   • 打开 属性 面板（Ctrl + F3），找到 色彩效果 -> 样式，选择“色调”，然后选择一个新的颜色（比如蓝色），这样按钮就会变成蓝色调。
   • 同样在属性面板中,找到 变换 -> 缩放，将宽度和高度都设置为 110%，这样按钮会稍微放大。

4. 设计“按下”状态

   • 在时间轴上,右键点击 按下 帧，选择“插入关键帧”。
   • 选中舞台上的图形和文字。
   • 在属性面板的 变换 -> 缩放 中，将宽度和高度都设置为 95%，你也可以稍微改变一下位置（比如向下移动2像素），模拟被按下的感觉。
   • （可选）在 属性 面板的 滤镜 中，添加一个“投影”或“发光”滤镜，增加按下时的视觉反馈。

5. 测试按钮

   • 回到主场景（场景1）。
   • 从“库”（Ctrl + L）面板中，将你刚刚创建的 MyButton 元件拖到舞台上。
   • 按 Ctrl + Enter (Windows) 或 Cmd + Return (Mac) 测试影片，现在你应该能看到基础的按钮交互效果了！

第三部分：进阶特效 - 动画效果

静态变化不够炫酷？我们来加入动画！

目标： 制作一个鼠标悬停时，图标会旋转并放大的按钮。

步骤：

1. 创建按钮元件

   • 和之前一样,创建一个新的“按钮”元件，命名为 AnimatedButton。

2. 在“弹起”帧放置图形

   • 在 弹起 帧，画一个简单的图形（比如一个星星）或导入一张图标。

3. 为“指针经过”帧创建动画

   • 右键点击 指针经过 帧，选择“插入关键帧”。
   • 我们想让星星在悬停时旋转并放大,我们不能直接在按钮帧上做补间动画，因为按钮帧只显示一帧。
   • 解决方案： 将图形转换为一个影片剪辑。
     • 选中舞台上的星星图形。
     • 按 F8，将其转换为一个新的“影片剪辑”元件，命名为 StarIcon。
   • 选中舞台上的 StarIcon 实例。
   • 在时间轴上,点击 指针经过 帧，然后在属性面板中，为它添加一个补间动画。
     • 在属性面板的 动画预览 部分，勾选“旋转”，选择“顺时针”，圈数设为1。
     • 在 变换 中，设置 缩放 的结束值为150%。
   • 这样,当鼠标悬停时，Flash会播放这个旋转和放大的动画。

4. 设计“按下”状态

   • 在 按下 帧，插入关键帧。
   • 选中 StarIcon 实例，在属性面板中，将它的 缩放 设置回100%，并添加一个“发光”滤镜，颜色为黄色。

5. 测试按钮

   • 回到主场景,拖入 AnimatedButton 并测试，现在你拥有一个带有流畅动画的按钮了！

第四部分：高级特效 - 代码控制与动态效果

这是最专业、最灵活的方法，需要一点ActionScript 3.0 (AS3) 的知识，我们将使用代码来控制动画，实现更复杂的效果，比如发光、拖尾等。

目标： 制作一个鼠标悬停时，按钮周围会产生动态光晕效果的按钮。

原理：

• 按钮本身只做最基础的四个状态。
• 在主时间轴上,我们监听按钮的鼠标事件。
• 当事件发生时,我们用代码动态创建图形（如圆形），并让这些图形执行一个淡出和放大的动画。

步骤：

1. 准备按钮元件

   • 创建一个新的按钮元件 GlowButton。
   • 在 弹起 帧画一个圆形。
   • 在 指针经过 帧，插入关键帧，并将圆形的颜色变亮。
   • 注意： “按下”和“点击”帧可以保持为空或简单设置。

2. 编写主场景代码

   • 回到主场景,从库中拖入 GlowButton 实例到舞台上。
   • 选中这个按钮实例,在属性面板中给它一个实例名称，glowBtn。
   • 新建一个图层,命名为“Actions”，在第一帧按 F9 打开“动作”面板，输入以下代码：

   // 导入需要的类
   import flash.display.MovieClip;
   import flash.events.MouseEvent;
   // 设置按钮的鼠标指针样式为手型
   glowBtn.buttonMode = true;
   // 监听鼠标悬停事件
   glowBtn.addEventListener(MouseEvent.ROLL_OVER, onRollOver);
   // 监听鼠标离开事件
   glowBtn.addEventListener(MouseEvent.ROLL_OUT, onRollOut);
   // 鼠标悬停时的处理函数
   function onRollOver(e:MouseEvent):void {
       // 创建一个定时器，每隔50毫秒就创建一个光晕
       var glowTimer:Timer = new Timer(50);
       glowTimer.addEventListener(TimerEvent.TIMER, createGlow);
       glowTimer.start();
       // 将定时器保存在按钮实例上，以便之后可以移除
       e.currentTarget.glowTimer = glowTimer;
   }
   // 鼠标离开时的处理函数
   function onRollOut(e:MouseEvent):void {
       // 移除定时器，停止创建光晕
       e.currentTarget.glowTimer.stop();
       e.currentTarget.glowTimer.removeEventListener(TimerEvent.TIMER, createGlow);
   }
   // 创建光晕效果的函数
   function createGlow(e:TimerEvent):void {
       // 获取触发事件的按钮
       var btn:MovieClip = e.currentTarget.currentTarget as MovieClip;
       // 创建一个新的圆形影片剪辑作为光晕
       var glow:MovieClip = new MovieClip();
       // 绘制光晕
       glow.graphics.beginFill(0x00FFFF, 0.5); // 青色，半透明
       glow.graphics.drawCircle(0, 0, btn.width / 2 + 10); // 以按钮中心为圆心，半径比按钮稍大
       glow.graphics.endFill();
       // 设置光晕的初始位置与按钮中心对齐
       glow.x = btn.x + btn.width / 2;
       glow.y = btn.y + btn.height / 2;
       // 将光晕添加到舞台
       addChild(glow);
       // 为光晕添加一个淡出和放大的补间动画
       // 使用Tween库，需要先导入
       import fl.transitions.Tween;
       import fl.transitions.TweenEvent;
       import fl.transitions.easing.Strong;
       var alphaTween:Tween = new Tween(glow, "alpha", Strong.easeOut, 0.5, 0, 1, true);
       var scaleTween:Tween = new Tween(glow, "scaleX", Strong.easeOut, 1, 3, 1, true);
       var scaleTweenY:Tween = new Tween(glow, "scaleY", Strong.easeOut, 1, 3, 1, true);
       // 动画结束后，移除光晕
       alphaTween.addEventListener(TweenEvent.MOTION_FINISH, function():void {
           removeChild(glow);
       });
   }

3. 测试影片

   • 按 Ctrl + Enter 测试，当你的鼠标悬停在按钮上时，会看到一圈圈动态的光晕效果向外扩散并消失。

第五部分：实用技巧与总结

• 善用滤镜： 投影、发光、模糊、斜角等滤镜是制作特效的利器，它们能让你的按钮立刻变得立体和现代。
• 声音效果： 在“指针经过”或“按下”帧，可以添加一个声音效果，Beep”或“Whoosh”，能极大地提升用户体验，只需在帧的属性面板中导入并设置声音即可。
• 使用预设： Animate/Flash自带了很多按钮模板，可以在“窗口” -> “公用库” -> “按钮”中找到，可以直接修改使用。
• 性能考虑： 对于复杂的按钮，特别是使用代码动态生成效果时，要注意性能，过多的动画和粒子效果可能会导致动画卡顿。
• 一致性： 在一个项目中，尽量保持所有按钮的风格和交互逻辑一致，这会让你的作品看起来更专业。

希望这份详细的教程能帮助你掌握Flash按钮特效的制作！从简单的颜色变化到复杂的代码控制，多加练习，你就能创造出属于自己的独特按钮效果。