Flash图片轮播教程怎么用？-建站教程-锦华智联科技

准备工作

软件: Adobe Animate (旧版名为 Adobe Flash Professional)，本教程适用于 CS6 及更早版本，但核心逻辑在 Animate 中同样适用。
图片: 准备好你想要轮播的几张图片（pic1.jpg, pic2.jpg...），建议尺寸统一，800x400 像素。
新建文档:
- 打开 Animate，创建一个 ActionScript 2.0 的新文档。
- 设置舞台大小,900x450 像素。
- 将背景色设置为与你的网页风格协调的颜色。

第一步：创建轮播容器

轮播的图片需要一个“舞台”来放置，这个舞台就是容器。

（图片来源网络，侵删）

在舞台上绘制一个矩形，这个矩形的大小就是你希望显示的单张图片的大小（800x400）。
选中这个矩形,按 F8 将其转换为 “影片剪辑” (Movie Clip)。
在“转换为元件”的对话框中，命名为 main_container，注册点（Registration Point）选择中心。
双击进入 main_container 的编辑模式，你会看到里面的矩形。
非常重要：选中内部的矩形，按 Delete 键将其删除。main_container 是一个空的、中心点对齐的透明影片剪辑。
返回主场景（场景1），将 main_container 实例放置在舞台的合适位置（(50, 25)）。

第二步：加载主图片

我们使用 ActionScript 来动态加载图片，这样更灵活。

在主场景中,选中 main_container 这个实例。
打开 “动作” (Action) 面板（快捷键 F9）。

输入以下代码：

（图片来源网络，侵删）

// 定义一个数组，用来存放所有图片的路径
var picArray:Array = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg"];
// 创建一个空的 MovieClip，用来装载显示当前的大图
this.createEmptyMovieClip("image_loader", this.getNextHighestDepth());
// 将这个装载器放在 main_container 里面，并居中
image_loader._x = -main_container._width / 2;
image_loader._y = -main_container._height / 2;
// 加载第一张图片
loadPic(0);
// 加载图片的函数
function loadPic(index:Number) {
    // 清除之前可能加载的图片
    image_loader.unloadMovie();
    // 创建一个 MovieClipLoader 对象来监听加载过程
    var my_mcl:MovieClipLoader = new MovieClipLoader();
    var my_obj:Object = new Object();
    // 监听加载开始事件
    my_obj.onLoadStart = function() {
        trace("开始加载...");
    };
    // 监听加载完成事件
    my_obj.onLoadComplete = function() {
        trace("加载完成！");
        // 图片加载完成后，将其居中显示在 main_container 中
        image_loader._x = -image_loader._width / 2;
        image_loader._y = -image_loader._height / 2;
    };
    // 监听加载错误事件
    my_obj.onLoadError = function() {
        trace("加载出错！");
    };
    // 监听器附加到 MovieClipLoader 对象
    my_mcl.addListener(my_obj);
    // 开始加载指定索引的图片
    my_mcl.loadClip(picArray[index], image_loader);
}

代码解释:

我们创建了一个 picArray 数组来存储图片路径，方便修改。
createEmptyMovieClip 动态创建了一个空的影片剪辑 image_loader，所有图片都会被加载到这里。
loadPic(index) 是一个核心函数，它接收一个索引值，来加载数组中对应的图片。
MovieClipLoader 是一个强大的类，可以监听图片加载的进度和状态，让我们能知道图片何时加载完成，并在加载完成后调整其位置使其居中。

现在测试影片（Ctrl+Enter），你应该能看到第一张图片被加载并显示在 main_container 中了。

第三步：创建缩略图导航栏

缩略图是用户手动切换图片的入口。

创建缩略图按钮:
（图片来源网络，侵删）
- 在舞台上 main_container 的下方，绘制一个小的矩形作为缩略图的背景。
- 按 F8 将其转换为 “按钮” (Button)，命名为 thumb_btn。
- 双击进入 thumb_btn 的编辑模式，在 “点击” (Hit) 帧按 F6 插入关键帧，并绘制一个比视觉上稍大的矩形，作为鼠标点击的有效区域，这样可以方便点击。
- 返回主场景。
复制并排列缩略图:
- 选中 thumb_btn，按 Ctrl+D 多次复制，复制出 picArray.length 个（例如5个）。
- 将它们水平对齐,并留有适当的间距。
给缩略图添加实例名:
- 选中第一个缩略图按钮,在 “属性” (Properties) 面板中，将其 “实例名称” (Instance Name) 设置为 thumb_btn0。
- 选中第二个,设置为 thumb_btn1，以此类推，直到 thumb_btn4。

为缩略图添加点击事件:

选中舞台上所有的缩略图按钮,按 F9 打开动作面板。
输入以下代码（这段代码会同时作用于所有选中的按钮）：

// on(release) 是 AS2.0 中按钮的标准事件，表示鼠标释放时触发
on(release) {
    // this._name 获取按钮的实例名，"thumb_btn0"
    // .substring(9, 10) 从第9个字符开始提取1个字符，得到 "0"
    var index:Number = this._name.substring(9, 10);
    // 调用之前写好的 loadPic 函数，加载对应的图片
    _root.loadPic(index);
}

代码解释:

on(release) 是 AS2.0 的标准按钮事件。
this._name 可以获取按钮自身的实例名。
通过字符串提取函数 substring，我们从 thumb_btn0 这样的名字中智能地提取出索引号 0。
_root.loadPic(index) 调用主时间轴上的 loadPic 函数，实现点击切换。

现在测试影片,点击缩略图应该可以成功切换大图了！

第四步：添加自动播放功能

让轮播图在没有用户操作时自动切换。

定义变量:

在主场景的第1帧,动作面板的开头添加以下变量：

var currentIndex:Number = 0; // 当前显示图片的索引
var autoPlaySpeed:Number = 3000; // 自动播放的速度，单位是毫秒 (3000ms = 3秒)

创建自动播放函数:

在 loadPic 函数后面，添加一个新的函数 startAutoPlay()：

function startAutoPlay() {
    // 清除之前的定时器，防止重复创建
    clearInterval(autoPlayInterval);
    // 创建一个定时器，每隔 autoPlaySpeed 毫秒执行一次 playNext 函数
    autoPlayInterval = setInterval(playNext, autoPlaySpeed);
}
function playNext() {
    // 计算下一张图片的索引
    currentIndex++;
    if (currentIndex >= picArray.length) {
        currentIndex = 0; // 如果是最后一张，则回到第一张
    }
    // 调用加载函数
    loadPic(currentIndex);
}

启动和停止自动播放:

在 loadPic 函数的末尾（onLoadComplete 里面），添加启动自动播放的代码。
为了在用户手动点击时停止自动播放,我们需要在缩略图的点击事件中加入一个 stopAutoPlay() 的调用。

修改 loadPic 函数末尾:

// ... (在 onLoadComplete 里面)
trace("加载完成！");
image_loader._x = -image_loader._width / 2;
image_loader._y = -image_loader._height / 2;
// 加载完成后，更新当前索引，并启动自动播放
currentIndex = index;
startAutoPlay();

添加 stopAutoPlay 函数:

function stopAutoPlay() {
    clearInterval(autoPlayInterval);
}

修改缩略图点击事件:

on(release) {
    // 在用户点击时，先停止自动播放
    _root.stopAutoPlay();
    var index:Number = this._name.substring(9, 10);
    _root.loadPic(index);
}

现在测试影片,轮播图应该会每3秒自动切换一张图片，当你点击缩略图后，它会暂停自动播放，并在你切换完图片后重新开始自动播放。

第五步：添加平滑过渡效果

让图片切换不那么生硬,可以添加一个淡入淡出或滑动的效果，这里我们使用最简单的 “淡入淡出” 效果。

修改 loadPic 函数:

我们将使用 _alpha 透明度属性和 onEnterFrame 事件来实现平滑过渡。

// ... (在 loadPic 函数内部，替换掉 my_mcl.loadClip 这一行)
// 在加载新图片之前，让旧图片开始淡出
image_loader.onEnterFrame = function() {
    this._alpha -= 10; // 每帧减少10%的透明度
    if (this._alpha <= 0) {
        this._alpha = 0;
        delete this.onEnterFrame; // 淡出完成后，删除 onEnterFrame 事件
        // 在旧图片完全消失后，再加载新图片
        my_mcl.loadClip(picArray[index], image_loader);
    }
};

修改 onLoadComplete 事件:

新图片加载完成后,让它从完全透明开始，然后慢慢淡入。

// ... (修改 my_obj.onLoadComplete)
my_obj.onLoadComplete = function() {
    trace("加载完成！");
    image_loader._x = -image_loader._width / 2;
    image_loader._y = -image_loader._height / 2;
    // 图片加载完成后，让它从0开始淡入
    image_loader._alpha = 0;
    image_loader.onEnterFrame = function() {
        this._alpha += 10; // 每帧增加10%的透明度
        if (this._alpha >= 100) {
            this._alpha = 100;
            delete this.onEnterFrame; // 淡入完成后，删除事件
        }
    };
    currentIndex = index;
    startAutoPlay();
};

最终效果: 当你切换图片时，当前图片会先淡出，然后新图片加载完成后会淡入，整个过程非常平滑。

总结与扩展

恭喜！你已经成功创建了一个功能完整的 Flash 图片轮播组件。

你已掌握的核心点:

动态加载外部图片 (MovieClipLoader)
使用数组管理数据 (Array)
按钮事件处理 (on(release))
时间轴控制 (setInterval, clearInterval)
影片剪辑属性控制 (_alpha, _x, _y)
onEnterFrame 实现动画

可以扩展的功能:

左右箭头: 添加两个按钮，一个用于上一张，一个用于下一张，逻辑和缩略图类似，但索引计算是 currentIndex-- 和 currentIndex++。
数字页码: 在轮播图下方添加 1, 2, 3... 的数字按钮，点击直接跳转到对应图片。
加载进度条: 在图片加载过程中，显示一个进度条，提升用户体验。
XML 配置: 将图片路径存储在一个外部的 XML 文件中，这样修改图片时就不需要再打开 .fla 源文件了，只需修改 XML 即可。

希望这份详细的教程对你有帮助！虽然 Flash/Animate 已不再是网页开发的主流，但学习它的逻辑对于理解动画和交互编程的原理非常有价值。