Flash图片放大效果怎么做？-建站教程-锦华智联科技

结合时间轴动画和 ActionScript 3.0。

（图片来源网络，侵删）

教程目标

当鼠标光标移动到图片上时，图片会平滑地放大；当鼠标移出图片时,图片会平滑地恢复原始大小。

准备工作

软件: 安装 Adobe Animate (或 Adobe Flash Professional CS6 及更早版本)。
素材: 准备一张你想要制作放大效果的图片。

详细步骤

第 1 步：创建新文档并导入图片

打开 Adobe Animate，创建一个新的 ActionScript 3.0 文档。
导入图片:
- 点击菜单栏的 文件 -> 导入 -> 导入到舞台。
- 选择你的图片文件，点击“打开”。
- 图片会出现在舞台上，按住 Shift 键拖动图片的角落，可以等比例缩放图片,使其适应舞台大小。

第 2 步：将图片转换为影片剪辑

为了能对图片进行动画编程和控制，我们需要将它转换为一个“影片剪辑”。

选中舞台上的图片。
在菜单栏中选择 修改 -> 转换为元件。
在弹出的窗口中：
- 名称: 给你的元件起个名字，ImageMC (MC 是 Movie Clip 的缩写)。
- 类型: 务必选择 “影片剪辑”。
- 注册点: 通常选择中心点，这样放大效果会从图片中心向外扩散，看起来更自然,点击舞台中央的十字图标即可。
点击“确定”。

你的图片已经变成了一个可以独立编辑的“影片剪辑”元件。

第 3 步：创建放大和缩小的动画（关键帧动画）

这是实现平滑动画效果的核心步骤，我们将在影片剪辑的时间轴上创建两个关键帧：一个代表原始大小,一个代表放大后的大小。

（图片来源网络，侵删）

双击舞台上的 ImageMC 元件,进入它的编辑模式。
你会看到一个新的时间轴，只有一层，名为“图层 1”。
在时间轴上，选择第 1 帧，按 F5 键，将这一帧的帧数延长到第 30 帧，这样，我们的动画将有 30 帧的长度,可以根据需要调整。
在时间轴上，点击第 15 帧，然后按 F6 键，插入一个关键帧。
现在选中第 15 帧 的图片，在属性面板中，找到“位置和大小”选项。
- 将宽度和高度的值设置为原始大小的 2 倍（或你喜欢的任何放大倍数），如果原始宽度是 400px，就设置为 480px。
- 为了保证图片居中放大，你需要将图片向左和向上移动，移动的数值是放大后增加尺寸的一半，宽度增加了 80px (480-400)，高度也增加了 80px，那么就将图片的 X 坐标向左移动 40px，Y 坐标向上移动 40px。
选中第 1 帧 到第 15 帧 之间的任意一帧，在属性面板中找到 “补间” 选项，将其设置为 “动画”，这时，时间轴上会出现一条绿色的箭头，表示创建了一个补间动画,图片会从第1帧平滑地放大到第15帧。
让图片再平滑地缩小回去，选中第 30 帧，按 F6 插入一个关键帧。
选中第 30 帧 的图片，在属性面板中，将其宽度和高度重新设置回原始值,并将位置也调回原始位置。
选中第 15 帧 到第 30 帧 之间的任意一帧，再次将 “补间” 设置为 “动画”。

如果你按 Enter 键（或 Ctrl+Enter 测试影片），你会看到图片在影片剪辑内部循环播放放大再缩小的动画，但我们希望它只在鼠标经过时播放,所以下一步需要用代码来控制。

第 4 步：编写 ActionScript 3.0 代码来控制动画

我们需要回到主场景，为 ImageMC 元件添加鼠标事件监听器。

点击时间轴左上角的 “场景 1” 按钮,回到主场景。
选中舞台上的 ImageMC 实例。
打开 “动作” 面板（快捷键 F9）。
在代码编辑区输入以下 ActionScript 3.0 代码：

// 导入 Tween 类，用于制作平滑的动画效果
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
// 创建两个 Tween 对象，用于控制 scaleX 和 scaleY
var scaleXTween:Tween;
var scaleYTween:Tween;
// 鼠标滑过事件
image_mc.addEventListener(MouseEvent.MOUSE_OVER, onMouseOverHandler);
// 鼠标滑出事件
image_mc.addEventListener(MouseEvent.MOUSE_OUT, onMouseOutHandler);
// 鼠标滑过时的处理函数
function onMouseOverHandler(e:MouseEvent):void {
    // 当鼠标滑过时，播放影片剪辑的动画
    e.currentTarget.gotoAndPlay(1);
}
// 鼠标滑出时的处理函数
function onMouseOutHandler(e:MouseEvent):void {
    // 当鼠标滑出时，跳转到最后一帧并停止，这样图片就会停留在放大后的状态
    // 注意：如果你想让它恢复原始大小，则需要更复杂的代码，比如使用 Tween 类反向动画
    // 这里我们使用一个更简单的方法：让它播放缩小动画的后半部分
    e.currentTarget.gotoAndPlay(15);
}

代码解释:

import ...: 导入 Animate 自带的 Tween 类，它可以让我们用代码制作更平滑的动画,而不仅仅依赖时间轴。
addEventListener: 为 image_mc（这里我们假设你给实例命名为 image_mc，如果不是，请修改为你的实例名）添加事件监听器。image_mc 是你舞台上 ImageMC 元件的实例名称。
MouseEvent.MOUSE_OVER: 鼠标滑过事件。
MouseEvent.MOUSE_OUT: 鼠标滑出事件。
e.currentTarget.gotoAndPlay(1): 当鼠标滑过时，触发该影片剪辑从第 1 帧开始播放,即播放放大动画。
e.currentTarget.gotoAndPlay(15): 当鼠标滑出时，触发该影片剪辑从第 15 帧开始播放，即播放缩小动画，直到第 30 帧。

重要提示: 请确保你给 ImageMC 实例命名了实例名称，在选中舞台上的元件后，在属性面板最上面的文本框中输入名称，image_mc，代码中的 image_mc 必须和这个名称完全一致。

第 5 步：测试影片

按 Ctrl + Enter (Windows) 或 Cmd + Enter (Mac) 来测试你的影片。
将鼠标移动到图片上,你会看到图片平滑地放大。
将鼠标移出图片,图片会平滑地恢复原始大小。

进阶方法：纯代码实现（无需时间轴动画）

如果你想完全用代码来实现这个效果，而不需要在时间轴上做动画，可以使用 Tween 类，这种方法更灵活,代码更简洁。

步骤 1 和 2 同上（创建文档、导入图片、转换为影片剪辑并命名实例）。

步骤 3: 删除你在影片剪辑内部创建的所有动画帧，让它只保留第 1 帧的原始状态,然后回到主场景。

步骤 4: 在主场景选中 image_mc，打开动作面板,输入以下代码：

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
// 定义放大和缩小的缓动效果，这里使用 "easeOut" 让动画更自然
const EASING:Function = Strong.easeOut;
// 定义原始大小和放大大小
const originalScale:Number = 1;
const largeScale:Number = 1.2;
// 创建两个 Tween 对象，用于控制 scaleX 和 scaleY
// 初始时，它们不执行任何操作
var scaleXTween:Tween;
var scaleYTween:Tween;
// 鼠标滑过事件
image_mc.addEventListener(MouseEvent.MOUSE_OVER, onMouseOverHandler);
// 鼠标滑出事件
image_mc.addEventListener(MouseEvent.MOUSE_OUT, onMouseOutHandler);
// 鼠标滑过时的处理函数
function onMouseOverHandler(e:MouseEvent):void {
    // 如果已经存在 Tween，先将其停止
    if (scaleXTween) scaleXTween.stop();
    if (scaleYTween) scaleYTween.stop();
    // 创建新的 Tween，从当前缩放值放大到 largeScale，持续时间为 0.5 秒
    scaleXTween = new Tween(e.currentTarget, "scaleX", EASING, e.currentTarget.scaleX, largeScale, 0.5, true);
    scaleYTween = new Tween(e.currentTarget, "scaleY", EASING, e.currentTarget.scaleY, largeScale, 0.5, true);
}
// 鼠标滑出时的处理函数
function onMouseOutHandler(e:MouseEvent):void {
    // 如果已经存在 Tween，先将其停止
    if (scaleXTween) scaleXTween.stop();
    if (scaleYTween) scaleYTween.stop();
    // 创建新的 Tween，从当前缩放值缩小回 originalScale，持续时间为 0.5 秒
    scaleXTween = new Tween(e.currentTarget, "scaleX", EASING, e.currentTarget.scaleX, originalScale, 0.5, true);
    scaleYTween = new Tween(e.currentTarget, "scaleY", EASING, e.currentTarget.scaleY, originalScale, 0.5, true);
}

纯代码方法的优点:

代码集中,易于维护。
动画参数（如时间、大小、缓动效果）可以轻松在代码中修改,无需进入时间轴。
动画更流畅，因为 Tween 类专门为此优化。

你可以根据自己的喜好和项目需求选择其中一种方法，对于初学者，第一种方法（时间轴+AS3）更容易理解；对于追求灵活性和代码整洁的开发者，第二种方法（纯代码）是更好的选择。