Flash动画实战精选-图片浏览器

图片浏览器
24.1.1 实例说明
这个实例综合运用了图像动态导入，声音简单控制，Flash组件等技巧，实现了本地或网页图片浏览的功能。

通过学习这个实例的制作过程，读者可以掌握制作网页Flash浏览界面的基本技巧，稍加改动，就可以实现Flash界面对文字，图片（jpeg格式），音频（mp3），乃至SWF动画的浏览。

24.1.2 有关知识
载入变量、载入图片、设置属性、ListBox组件的应用、物件的拖拽、音乐控制、渐变的使用、图像的精确定位等。

24.1.3 制作过程
一、界面背景的制作
图片浏览器的整个界面做成一个MovieClip，主要是因为大部分内容与外界没有联系，单独成为一个整体。

这个界面自己实现了背景图片的切换功能，这里主要展示了矢量平面设计的一些技巧，另外用到了无需读入外部文档动态导入图片的方法。

如图24-1所示。

图24-1 界面背景的层次结构
步骤1：新建文件File>New，把文件尺寸设为700X400 pixels，背景设为#999999。

按Ctrl +F8，新建一个符号，并起名叫bk，Behavior设为Movieclip。

步骤2：bka层制作。

在这个叫bk的Movieclip中新建一个叫bka的层。

在这个层里画一个长方形，选定它，在属性面板中修改它的属性：W:700.0 H:400.0 X:0.0 Y:0.0，这样精确的定位，使它和这个场景窗口正好吻合。

如图24-2所示。

图24-2 设置界面的大小并精确定位
选中填充工具，在颜色样本面板（Color Swatches）中选择左下方的线性渐变，在颜色混合（Color Mixer）面板里调节初始颜色和终止颜色，调整好以后，在长方形内部按鼠标左键拉动鼠标填充即可得到想要的效果。

如图24-3所示。

图24-3 给界面填充线性渐变色
步骤3：line层和title层的制作。

这两层相对容易，新建名叫line和title的层。

做title层，这层很简单，用文本工具，使用适当的字体，在顶部适当位置写好即可。

在line层画一个长方形，把它的长度调为700.0，x位移为0.0。

然后在长方形右下角用线形工具切割一个梯形，删除多余的部分，如图24-4所示。

图24-4 线框的制作过程
步骤4：bk层文件夹的制作。

这个层文件夹的Load层是用于导入背景图片的MovieClip，以及一个遮罩
层。

点击时间轴面板的按钮，加入层文件夹bk。

在bk内加入层Mask和Load。

鼠标右键点击Mask 层在右键菜单里选择Mask，该层变为遮罩层。

把刚才在line层画的多边形的填充部分剪切粘帖到mask 层，调整位置使line层的线和Mask层的色块重合，如图24-5所示。

图24-5 制作遮罩
在load层画一个小的长方形，把它的X，Y坐标都设为0，然后按F8将它变成一个Movieclip,命名为bkload,在实例属性中给bkload在bk 中的实例起名叫square。

在后面的程序中，我们将利用loadMovie("url",target[, variables])语句把背景图片导入到square上面。

注意：loadMovie();第二个变量target必须是场景中的一个对象。

square就是这个对象。

背景图片导入之后替代square的原mc，并继承原mc的属性。

所以把suqare的坐标设为（0，0），图片导入后也就正好在（0，0）这个点上。

Mask层在上面使载入图片的多于部分被遮蔽，正好显示出和多边形吻合的形状。

步骤5：button层的制作。

这个层八个按钮制作方法相同。

以其中back按钮（符号名buback）为例。

结构如图24-6所示
图24-6 buback按钮结构示意图
layer1层使用了不同的透明度，这个效果需要在属性面板中修改alpha值实现。

由于按钮制作不是本节重点，细节从略。

把按钮排列到button层上，分别在属性面版中给实例起上相应的名字：
home,mail,close,music,bk,list,back,next。

至此，界面组件bk的制图工作全部完成。

提示：给实例取名很重要，没有这些名字下面的Action就无法控制它们。

步骤6： Action Script的编写。

新建action层，在第一帧上写程序，把action同一写在一个帧上便于调试。

需要说明的语句有以下几点：
声音文件bk.mp3是通过加到sound对象msound上来实现控制的，输出swf文件时它并没有被加到场景中，为了用Action控制这是必需的。

但Action是不会识别.mp3的，需要给bk.mp3做如下处理：在库中右键单击bk.mp3，在右键菜单中点选Linkage，在弹出的对话框中选择Export for ActionScript，并给它起名叫bksound，如图24-7所示。

图24-7 设置声音文件的链结属性
然后使用msound.attachSound("bksound")；才把声音分配给msound声音控制语句sound,start();有两个变量，第一个是播放该声音的起始位置，写0则从声音的第零秒开始播放，第二个变量是播放的次数。

以下是bk这个MovieClip中的Action程序。

square._alpha = 0;
whichPic = 1;
show = 0;
musicshow = 1;
msound = new Sound(this);
msound.attachSound("bksound");
msound.start(0,99); home.onPress = function() { getURL("");
};
mail.onPress = function() {
getURL("mailto:webmaster@");
// 初始化变量及属性
//square的属性alpha设为0后，导入图片也是全透明的
//把导入图片的编号纪录变量
whichpic预设为1
//背景显示标志位预设为0，即开始
不显示
//音乐播放标志位预设为1，开始播
放
//在该MovieClip中新建声音对象
msound
//把bksound这个声音文件分配给
};
close.onPress = function() {
fscommand("quit");
};
bk.onPress = function() {
if (show == 0) {
show = 1;
if (!fadeIn && !fadeOut) {
fadeOut = true;
whichPic = 1;
}
}
if (show == 1 && whichPic<=3 && !fadeIn && !fadeOut)
{
fadeOut = true;
whichpic++;
}
if (show == 1 && whichPic>3) {
show = 0;
whichPic = 1;
}
};
music.onPress = function() {
if (musicshow == 0) {
musicshow = 1;
msound.start(0,99);
}
else {
musicshow = 0;
msound.stop();
}
};
onEnterFrame = function () {
if (show == 1) { if (square._alpha>10 && fadeOut)
{ square._alpha -=
20;
}
if (square._alpha<10) { loadMovie("bk/"+whichPic+".jpg",
"square");
fadeOut = false;fadeIn = true;
msound
//msound 从第0秒开始播放
msound99遍
//按钮功能设置
//点击home键，即连接到网站
//点击mail键，即发邮件(只在浏览器中有效)//音乐切换
//点击close键，即关闭swf（只在
播放器中有效）
//点击bk键，根据标志位show的
变化决定。

//不显示show==0时,变show为1，
显示第一个图片
//可显示show==1时，如果图片没显示完就接着显示下一个，显示完
了则禁止显示
/
/点击music键，根据musicshow的
变化决定。

//原来不播放，则现在播放；原来
播放，则现在停止
//该MovieClip开始第一帧执行下
列语句
//如果允许显示背景
//如背景alpha大于10，要求淡出//背景alpha减少20。

//如背景alpha小于10
//导入图片
//淡入
//如淡入
//淡出处理
//释放图片
}
if (square._alpha<100 && fadeIn && !fadeOut) {
square._alpha +=
20;} //背景alpha加20
else {fadeIn = false;}
}
if (show == 0) { //
如不允许背景显示
if (square._alpha>10) {square._alpha-=
20;}
else{unloadMovie(square);}
}
};
程序填写好后，bk就具备了动态背景变化控制，和背景声音控制功能（其中list,back,next按钮尚未定义）。

把bk拖到主场景中，输出为SWF文件，在光盘图像浏览文件夹的bk子目录中放入预先准备好的700X400背景图片1.jpg、2.jpg、3.jpg。

运行SWF文件，点击按钮即可看到效果。

二、loadscreen的制作
loadscreen是用来载入浏览器所要浏览的图片的MovieClip。

它内部没有Action，由四个层组成，screen 层和shadow层共同组成透明且右阴影的载图屏幕；load层用于载入图片，mask层遮在上面使图片不至于超出显示范围。

它们的功能和电影片断bk里面的load，mask是一样的。

如图24-8所示。

图24-8 loadscreen结构示意图
步骤1：screen的制作。

实际上是一个300X300正方形加上四个圆点，请看源程序库中的screen。

具体做法从略。

值得注意的是它在Loadscreen中的实例是必须起名的，因为后面的Action要对它进行控制。

这里给它起名为screen。

步骤2：shadow的制作。

在库新建名为Shadow的图像（Graphic）符号。

画一个300X300填充颜色为#333333的正方形，连接它的对角线，在正方形内部画一个同心的290X290正方形，整个过程在一个层上完成，如图24-9所示，利用渐变在正方形内切割的四条狭长的梯形上建立#333333到#666666的渐变（渐变制作方法见界面背景的制作步骤2）。

最后删除多余的线（包括对角线），shadow就制好了。

图24-9 阴影的制作
步骤3：合成。

按照图24-8所示的结构把物件组合起来，其中mask是一个300X300的正方形，load是一个movieclip，它在这里的实例取名叫load使它可控制，另外它的坐标应该是(0,0)，这些和电影片断bk中的load是完全一样的。

值得注意的是screen和shadow都要设为半透明，这样load就会透过screen显现出来，这不是我们想看到的效果。

解决办法就是让movieclip load为空，即没有任何内容，这样它依然是个movieclip，依然可以用来载入电影，然而却不可见。

三、photolist的制作
photolist利用了Flash MX提供的用户界面组件（UI Component）之中的Flist组件。

Flash MX提供的每种组件都附有相应的方法，来实现组件各种高级功能，充分利用组件，会使我们的工作事半功倍。

Phtotolist外观与结构如图24-10所示。

图24-10 photolist结构示意图
其中close层按钮就是个普通按钮，实例名close；title层的按钮实例名photolist。

Screen层是在movieclip loadscreen使用过的，这里改变一下长宽，使之适合即可。

最关键的还是Flist组件的应用。

Flash MX共提供了七种组件，在本书第16章有详细的内容，另外，如果有一定英语基础，可查阅Flash附带帮助文件。

首先给场景加入UI组件。

从Component面板中拖拽listbox到正在编辑的photolist的list层，调整长宽达到满意。

选中这个实例，在属性)面板起名为list，点选面板右上方参数(Parameters)标签，这是Flash组件特有的面板，用于设置组件中的参数。

其中：
label: 一个字符串数组用于存放listbox中项目名称，
data: 存放相应项目相关联的数据，
select multiple : 一个布尔量决定list中的项目是否能多重选择，
change handler: 指向用户点击项目时你所要调用的函数。

可以双击参数面板的label或data选项跳出赋值对话框修改增删项目，对话框内表格前面的数字是项目的序号（用index表示），注意它是从0开始的。

不过我们并不打算用这种方法给list添加项目，我们将利用Action实现。

实例中涉及到的list方法如下，其中Flist是listbox实例的名称，根据需要变更：
FListBox.addItem(label [, data]) ：在list尾部添加一个项目。

FListBox.getSelectedItem()：返回list中最近选中过的项目的序号。

FListBox.setChangeHandler(functionName, [location])：制定一个函数，每当被选项目变换时调用它。

FListBox.getSelectedIndex()：返回list中选中项目的序号。

FListBox.setScrollPosition(index)：是指定序号的项目滚动到list顶部。

List大约支持31种方法，具体功能不再具体叙述。

四、loading的制作
这是一个很简单的MovieClip,用在下载影片和载入外部变量时作为等待的提示。

一共一层三帧，产生动画的效果。

如图24-11所示。

图24-11 简单的loading动画
五、Action Script的内容及场景的组织
至此我们已经完成了大部分的物件制作，现在可以进入最后的场景组织阶段了。

整个动画的结构如图24-12所示。

已经制作完成的loading,loadscreen,photolist以及bk依次排列在相应图层，分别给他们的实例命名为loadvar、loadscreen、photolist和bk。

按图24-12所示把物件安排好后，按以下步骤进行Action的编写。

图24-12 场景的组织结构示意图
步骤1：loading画面的制作。

前四帧做载入处理，因此只显示loading。

在第一帧的Action层写下：IfFrameLoaded (4) {gotoAndPlay(3);}，即如果整个动画的第4帧已经载入时，就跳到第三帧开始播放，而在第2帧写下gotoAndPlay(1)，如此就形成了最简单的载入动画，如果没能载入所有动画，将在1，2帧反复播放。

而在第3帧我们又利用Action实现对读取外部文本的等待。

在第3帧写下：
loadVariables("readme.txt",_root.loadvar);stop();
将外部同目录下的文本readme.txt读入到loadvar上面，然后使动画停在该帧。

然后点选loadvar写下：
onClipEvent (data) {
for (i=1; i<=total; i++) { if (i<10){a=eval("nam00" add i);
b=eval("url00" add i);}
else{a=eval("nam0" add i);
b=eval("url0" add i);} _root.photolist.list.addItem(a, b);
}
_root.photolist.list.addItem("Unload", 0);
//当数据读取结束
//从1到总图片数逐一执行
//每个项目的名字变量label为图片名称 nam跟三位数字
//每个项目的数据变量data为图片地址 url跟三位数字
//给list添加label为a data为b
的项目
//最后加入一个数据为空的项目用
_root.photolist.list.setChangeHandler("myHandler",
_root);
_root.gotoAndPlay(4);
}
来释放图片
//指定选项相关函数
//主时间轴跳到第4帧播放
大概的思想是一旦readme中的数据被loadvar全部读取，loadvar就按程序把数据一个项目一个项目的加载到photolist之中，做好后跳到第4帧。

步骤2：第四帧Action。

这里定义了loadscreen和photolist的鼠标拖拽以及photolist的相关函数myHandler：
fscommand("allowscale", "false");
loadscreen.onPress = function() {
startDrag(loadscreen);
};
loadscreen.onRelease = function() {
stopDrag();
};
photolist.drag.onPress = function() {
startDrag(photolist);
};
photolist.drag.onRelease = function() {
stopDrag();
};
photolist.close.onPress = function() {
setProperty(photolist, _visible, "0");
bk.listshow = 0;
};
function myHandler(component) {
a=photolist.list.getSelectedItem().data;
loadMovie(a, _root.loadscreen.load);
if (a<>0)
{setProperty(loadscreen.screen, _alpha, 0);} else{setProperty(loadscreen.screen, _alpha,
50);}
}
stop();
//禁止屏幕尺寸缩放
//当loadscreen被点击时开始拖拽它
//当loadscreen的点击被释放时，解除拖
拽
//当photolist的drag被点击时开始拖拽
photolist
//当photolist的drag的点击被释放时，
解除对photolist的托拽
//当photolist的close被点击时，
//使photolist不可见，既它的_visible
值为0
//置bk中标志位listshow为0，标志
phtolist不可见
//这是photolist.list中项目被选中时
所调用的函数
//先得到选中的项目中的数据（这个数据
是要载入的图像的地址）
//根据数据内容载入图像到loadscreen
上
//如果a不等于0，即有图片载入
//就把loadscreen前面板screen置透明
//不然，即没照片载入，则恢复screen
的透明度
//停止
步骤3：对bk的action的扩充。

细心的读者可能已经注意到，在制作bk时，我们没有对其中的按钮list,back,next功能进行定义，因为他们的功能是和后面的photolist相关的。

这三个按钮分别用来开关phtolist窗口，以及控制list中的项目。

我们再回到bk内部，在它的Action层上补充以下代码：
listshow = 1;
list.onPress = function() {
if (listshow == 1) {
setProperty(_root.photolist, _visible,
"0"); //图片表格窗口显示标志位预设为1，即开始显示//点击list键，根据listshow的变化决定。

//原来不显示，则现在显
listshow = 0; } else {
setProperty(_root.photolist, _visible,
true);
listshow = 1;
} };
back.onPress = function () { index = _root.photolist.list.getSelectedIndex() if (index == 0|| index==viod){index = _root.photolist.list.getLength();};
_root.photolist.list.setSelectedIndex(index-1);
_root.photolist.list.setScrollPosition(index-1);
}
next.onPress = function () {
index = _root.photolist.list.getSelectedIndex();
if (index ==
_root.photolist.list.getLength()-1||index==viod){index
= -1;};
_root.photolist.list.setSelectedIndex(index+1); _root.photolist.list.setScrollPosition(index+1);
}
示；原来显示，则现在隐
藏 //这里通过修改photolist 的可见性来开
关它
//如果是list 的第一个项目，则跳到最后一个项目
//回退一个项目 //把回退的项目置顶
//如果是list 的最后一个项目，则跳到第一个项目
//前移一个项目 //把前移的项目置顶
费了九牛二虎之力，我们终于完成了这个实例，接下来把想要展示的图片放到目录中，在和动画同目录的位置写一个readme.txt 文件，存入图片的名称和地址，导出swf 文件，即可看到效果。

可以把这个实例放到主页上，向浏览者展示的图片。

注意：readme 文件按照以下格式书写： total=12&
&nam001=modernsky01& &url001=image/01.jpg& &nam002=modernsky02& &url002=image/02.jpg& ………………..
total 是图片总数，nam***是图片名称，url***是图片地址。

与本实例有关的文件比较多，它们都可以在光盘中的“图像浏览”文件夹中找到。