使用 XML / Flash 创建带字幕的幻灯片
4.27/5 (7投票s)
本文将指导您如何创建具有改进的可重用性和内容可更新性的 XML / Flash 幻灯片。它在 Flash .SWF 文件和图像源之间通过 XML 建立了信息桥梁。
目录
引言
为了提高访客体验质量，网站通常需要包含丰富的图形和动画等内容。正如俗话所说，“一图胜千言”，试想一下动画有多么庞大……
本文将指导您如何使用 XML 创建 Flash 幻灯片。通常，我们在 Flash 中创建幻灯片时，所有图像都会集成到影片本身中，这样做会降低影片文件（swf）的可重用性和影片内容的可更新性。在这里，我通过 XML 文件在图像源和 Flash 影片（swf）之间建立了一个信息桥梁。
每次播放 Flash 影片时，它都会从 XML 文件中查找信息。这提供了诸如 宽度、高度、幻灯片速度以及图像源及其标题（字幕）之类的参数。一旦 Flash 影片获得了所有需要集成到 Flash 中的信息，其效果将与不使用 XML 文件时相同。但是，使用 XML 文件可以轻松更新内容，并在其他地方（网站）重用 Flash 影片。此外，我使用了过渡类来增强图像之间滑动的效果。
创建外部资源
外部资源意味着准备幻灯片的所有图像、XML 信息文件和 FLA 项目。
首先，创建一个名为“Slideshow”的目录（文件夹）。然后在其内部创建另一个目录，并将其命名为“images”。将所有您想在幻灯片中显示的图像放入此文件夹（images）。为了获得令人印象深刻的效果，请确保所有图像的尺寸（宽度和高度）相等。
现在返回到您的“Slideshow”目录，在此创建一个 XML 文件。XML 文件的格式必须如下所示：
<slideshow width="475" height="390" speed="2">
<image url="images/gal1_img1.jpg" title="Product 1"/>
<image url="images/gal1_img2.jpg" title="Product 2"/>
<image url="images/gal1_img3.jpg" title="Product 3"/>
<image url="images/gal1_img4.jpg" title="Product 4"/>
<image url="images/gal1_img5.jpg" title="Product 5"/>
<image url="images/gal1_img6.jpg" title="Product 6"/>
<image url="images/gal1_img7.jpg" title="Product 7"/>
<image url="images/gal1_img8.jpg" title="Product 8"/>
<image url="images/gal1_img9.jpg" title="Product 9"/>
<image url="images/gal1_img10.jpg" title="Product 10"/>
</slideshow>
请注意，<slideshow> 具有三个属性：width、height 和 speed。根据您的需求设置值。请记住，对于宽度和高度，单位是像素（px），对于速度，单位是秒（sec）。现在，在 <slideshow> 节点内，放入任意数量的 <image> 节点。此（<image>）节点有两个属性：url 和 title。URL 属性的值应为每个图像文件的相对 URL，相对于您放置 .SWF 或 .FLA 文件的位置，而 TITLE 属性代表您想与幻灯片一起显示的文本。将您的 XML 文件命名为“slideshow.xml”。
最后，您需要在“Slideshow”目录中创建一个 .FLA 文件。创建一个新的 Flash 文档，将其尺寸设置为 500x500（像素），并将帧速率设置为 30（fps）。现在，为 layer1 的 frame1 编写以下代码：
import mx.transitions.Tween;
import mx.transitions.easing.*;
上面两行代码是为了使用 tween 类的各种方法，它们有助于我们增强滑动的效果。您将在 moveSlide() 函数中看到我使用了 Tween 并访问了 easeOut 属性。
现在我们所有的外部资源都已准备就绪，接下来将编写代码来处理 XML 信息、调用和集成图像，然后移动幻灯片。所有这些代码都必须编写在 layer1 的 frame1 的操作中。
处理 XML 文件
为了处理 XML 文件，我们需要在 frame1 的操作中（紧跟在我们的 import 语句下方）添加以下代码：
var myShowXML = new XML();
myShowXML.ignoreWhite = true;
myShowXML.load("slideshow.xml");
myShowXML.onLoad = function() {
_root.myWidth = myShowXML.firstChild.attributes.width;
_root.myHeight = myShowXML.firstChild.attributes.height;
_root.mySpeed = myShowXML.firstChild.attributes.speed;
_root.myImages = myShowXML.firstChild.childNodes;
_root.myImagesNo = myImages.length;
createContainer(); // Used to create an empty movie clip (movie container)
callImages(); // Used to extract and push all the images into an array
};
在这里，我们使用了一个 XML 类对象（myShowXML）。该对象将代表我们的信息文件，即 XML 文件。对于此对象，将 ‘ignoreWhite’ 属性设置为 true，这只是为了忽略 slideshow.xml 文件中 XML 节点之间的空白。Load 方法用于传递需要查找幻灯片信息的 XML 文件的路径。
在加载 XML 文件时（在 onLoad 事件中），我们将把所有信息收集到位于影片 _root 的变量中，_root 通常代表时间轴上当前正在执行的剪辑。我创建了 myWidth、myHeight 等变量，并为它们赋予了从 XML 文件中提取的值。现在调用了 createContainer() 函数，该函数负责创建一个空的影片剪辑（容器）。一旦创建了空的影片剪辑，将调用另一个名为 callImages() 的函数，该函数负责收集图像并将其放入一个数组中。在该函数内，将在指定时间（XML 文件中为速度属性指定的时间值）的常规间隔内调用 moveSlide()。
创建影片剪辑容器
代表我们 createContainer() 函数的代码如下所示：
function createContainer()
{
_root.createEmptyMovieClip("myContainer",_root.getNextHighestDepth());
myContainer.lineStyle(5,0x000000,100);
myContainer.lineTo(_root.myWidth,0);
myContainer.lineTo(_root.myWidth,_root.myHeight);
myContainer.lineTo(0,_root.myHeight);
myContainer.lineTo(0,0);
myContainer._x = (Stage.width-myContainer._width)/2;
myContainer._y = (Stage.height-myContainer._height)/2;
}
在上述代码的第一行，调用了一个创建空影片剪辑的方法。第一个参数“myContainer”代表容器的名称，第二个参数用于提取影片中图层和级别的最高深度。第二个参数 _root.getNextHighestDepth() 确保 Flash 在当前影片剪辑的同一级别和图层上的所有其他对象的前面渲染影片剪辑。
在接下来的几行中，我为容器设置了边框。首先，我使用语句 myContainer.lineStyle(5,0x000000,100); 为此边框设置了样式。在这里，第一个参数（在我的例子中为 5）代表边框的宽度，第二个参数（在我的例子中为 0x000000）代表边框颜色的十六进制代码，第三个参数（在我的例子中为 100）代表边框的不透明度（或 alpha）值。
一旦设置了边框样式，程序将开始从容器的左上角绘制它，然后绘制到容器的右上角，接着到容器的右下角，再到容器的左下角，最后回到容器的左上角。所有这些都已在样式语句之后的四个语句中完成。请注意，这里使用了从 XML 文件中提取的 myWidth 和 myHeight 变量值。
现在，我们在舞台上有一个空的容器，它位于文档的左上角。也就是说，如果我在 XML 文件中设置了 width=300 和 height=300，并且 FLA 文件中的文档 width 和 height 是 500 和 500。我的容器将位于左上角，文档上会有空白。因此，最后两个语句用于设置容器在舞台上的位置，在所有情况下，容器都将水平居中并垂直居中于文档。这是通过将容器左上角的坐标从 0, 0 更改为使用容器和舞台的 width 和 height 计算出的某个其他值来实现的。
从源文件夹调用图像
现在是时候从文件夹调用图像并使其生效了。
function callImages()
{
_root.myMCL = new MovieClipLoader();
_root.myPreloader = new Object();
_root.myClips_array = [];
_root.myMCL.addListener(_root.myPreloader);
_root.myPreloader.onLoadStart = function(target) {
_root.createTextField("myText_txt",_root.getNextHighestDepth(),0,0,100,20);
_root.myText_txt._x = (Stage.width-_root.myText_txt._width)/2;
_root.myText_txt._y = (Stage.height-_root.myText_txt._height)/2;
_root.myText_txt.autoSize = "center";
};
_root.myPreloader.onLoadProgress = function(target) {
_root.myText_txt.text = "Loading..
"+_root.myClips_array.length+"/"+_root.myImagesNo+" Completed";
};
_root.myPreloader.onLoadComplete = function(target) {
_root.myClips_array.push(target);
target._alpha = 0;
if (_root.myClips_array.length == _root.myImagesNo)
{
_root.myText_txt._y = myContainer._y + myContainer._height;
_root.target_mc = -1;
moveSlide();
setInterval(moveSlide,(_root.mySpeed*1000)+1000);
}
};
for (i=0; i<_root.myImagesNo; i++)
{
temp_url = _root.myImages[i].attributes.url;
temp_mc = myContainer.createEmptyMovieClip
(i, myContainer.getNextHighestDepth());
_root.myMCL.loadClip(temp_url,temp_mc);
}
}
在前面的几行中，我声明了一个 MovieClipLoader 对象，一个 Preloader 对象和一个名为 put clips 的数组。最初，MovieClipLoader 对象已用 Preloader 对象填充。
在 Preloader 对象的 onLoadStart 事件中，创建了一个空白的 TextField 并将其居中放置在影片容器中。在 Preloader 对象的 onLoadProgress 事件中，此文本字段被赋予了加载进度值。即，正在加载的此图像是总共多少张图像。在 Preloader 对象的 onLoadComplete 事件中，图像被推入数组，当前目标的 alpha 值被设置为零。现在，TextField 的垂直位置已更改，使其位于影片剪辑容器的底部，并且当前目标图像被设置为一个负值。最后，在此事件中，以从 XML 文件（速度值以秒为单位）中提取的时间的常规间隔调用了 moveSlide() 函数。
moveSlide() 函数负责对当前剪辑应用过渡效果，使其淡出，然后通过增加当前目标的 [值] 来对新图像应用淡入效果。它还负责将从 XML 文件中提取的对应值输入到字幕字段中。稍后将在本文中详细讨论 moveSlide() 函数。
现在回到 callImages() 函数的最后几行，这里有一个循环，它遍历 myImages 数组中的每个图像，并在我们的基础影片剪辑容器中为当前图像创建一个 MoveClip。然后将此剪辑加载到 MovieClipLoader 对象中。所有这些都必须为 Array 中的所有图像完成。简单来说，这个循环负责通过使用程序中长时间缓冲的内容来产生结果。
实现过渡效果
正如我在上面上下文多次写到的，moveSlide() 函数负责在我们的 Flash 幻灯片中设置过渡效果。下面是 moveSlide() 函数的代码：
function moveSlide()
{
current_mc = _root.myClips_array[_root.target_mc];
new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);
_root.target_mc++;
if (_root.target_mc>=_root.myImagesNo) {
_root.target_mc = 0;
}
_root.myText_txt.text = _root.myImages[target_mc].attributes.title;
next_mc = _root.myClips_array[_root.target_mc];
new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);
}
在上述函数的前两行中，从剪辑数组中提取了当前目标，现在它已使用 easeOut 效果变暗。现在，影片剪辑目标的值已增加，中间有一个条件来检查是否已完成一个周期，如果是，则将影片剪辑目标的值赋给零以循环播放幻灯片。在上述函数底部的三行中，提取了当前图像的标题值（字幕）并将其输入到文本字段中，然后将剪辑指定为下一个影片剪辑，并使用 easeOut 效果使其在文档上清晰显示。
最终，我们得到了一个可以工作的 XML / 幻灯片，它易于重用，并且内容可轻松更新。现在轮到您在测试您的 Flash 影片时感到兴奋了。
值得思考的点
实际的演示文件已附上。您看到下载文件时将很容易理解。请记住，要使此程序正常工作，您需要 Flash 版本 7.0 或更高版本。
最后思考
希望这些内容对您有所帮助。感谢您的阅读。祝您好运！
历史
- 2010年3月28日：初次发布