详解一个简单FLASH相册的制作源码教程

Flash AS教程_详解一个简单FLASH相册的制作今天要教大家做一个具有简单交互功能但又不用写太多脚本的FLASH相册，看题目就知道我这个教程将会写的很详细，让刚接触动画的网友也可以按照我的步骤完成此相册的制作，同时在制作过程中用到的一些绘图和优化技巧以及工作思路相信对一些非菜鸟级的动画爱好者也会有一定的借鉴作用。

相册实现功能

这个相册有一个单色的图片背景，画面中间有一个像“十字架”准心的图形，这个准心中间安排有相册相片的小图，小图两边有两个按钮，点击可以“上一张”、“下一张”切换图片，切换图片的过程中，中间的小图片会从不同的方向滑进矩形框内。点击中间小图可以看到大图，看大图片的时候，也可以看到过渡效果，大图高度和宽度不会超出文档范围，在看大图的状态点击图像区域又可以关闭大图，图片左上方是一个显示当前图片数和总图片数的导航指示，准心右边有简单的对应图片说明，切换图片时，文字说明和导航指示都会跟着改变，同时按钮有音效。而且还有几幅图片具有密码保护功能（第3、5幅），要输入密码才能看到，密码为：blueidea。


相册截图

构思动画

在做一个动画之前做好全局构思是很有必要的，有了构思就好比有了行动的目标，你的行动才能快速展开。打个比方说你今天要外出，之前你一定会想好自己要去那里，不然当你走出家门的时候你会在门口犹豫自己要去那里，这样会浪费你的时间。做动画也一样，如果你一开始在你的脑海中完整的描述过你的动画要实现什么功能，你的行动将会很有目的性，你的构思将指导你如何去找你想要的素材，如何实现动画效果，甚至可能要用到什么脚本自己都一开始心中有数了。而现在要做的这个动画的构思就是前面说到的动画实现的功能了，在此不多说了。

收集和处理素材

根据结果要实现的功能先找齐素材，正真开始做动画的时候就会很快了，就像你要砌房子，之前你如果准备好了砖等材料，你在砌砖的过程中就可以一直做下去，不用中途又要去找材料，做动画也一样，如果你一开始没有找齐素材，在做的过程中一次又一次中断工作去找素材肯定会浪费你的时间，况且在当今高率节奏的社会，你没有效率你就没有竞争力。

当我们要用FLASH做一个作品的时候，当我们要为将要做的动画收集整理素材的时候，首先要清楚FLASH最终输出文档尺寸是多少？用于网络还是本地浏览的？然后根据这些限定条件收集和优化素材，在处理图片素材时，往往有这样一个原则：导入FLASH中的图片尺寸最大值不要超出图片在动画中可能出现的最大尺寸。举个例来说，如果你要做一列位图按钮，这些按钮不大，你就不要导入大图片再把它缩小再用。而今天要做的这个相册有小图和大图，它们共享共一张图片的，所以你的导入的图片不能以小图为准，这样你做放大的图片时图片被拉伸也不好，也不要太大，图片大图显示有多大就用多大。这个相册大小定为760×430像素。图片素材我们一共选用11张图片，一张作为背景图，先用Photoshop处理成单色图片，并在白色背景的前提下用蒙板加线性渐变工具处理成下面那样：

（如果图片本身已是单色的，这个过渡效果可以直接在FLASH中加一层由白色到透明渐变的矩形叠加合成），再将其余的10张图片，如果长宽超出760×430像素，按比例缩小到一边刚好等于FLASH文档的长或者宽，处理这一步的目的是把大于FLASH文档的图片处理小，以减小FLASH输出文件的大小，同时也不能太小，因为点小图显于出来的大图最好不是经过拉伸的，以保证清晰度。如果做好了这一步，图片导入FLASH后，操作起来也会方便，等一下待讲到那一步的时候我会提示。

用FLASH软件开始制作
1．【建立文档】大小760×430像素，背景颜色“白色”，其它保持默认。

2．【导入所有素材到库中】10张图片和1个按钮声效，并建立文件夹方便素材管理，如下图：

3．【图片背景制作】回到主场景，双击“图层1”名字重命名“图层1”为“背景”，拖动库中的bj.jpg图片到主场景，用箭头工具选中该图片并调出FLASH元件对齐窗口（窗口→对齐），使图片左、顶，或者左、下对齐，结果因为图片高度我已在Photoshop软件中处理成与文档高度相同，整个图片就刚好排在文档的左边了。（也可以直接在属性栏输入位置坐标为(0，0)，实现背景图片的对齐）。此时时间轴如下：

4．【背景其它修饰图形绘制】新建一图层，命名为“背景图形”，此时先锁定“背景”层，以防止误操作，回到“背景图形”层，选择工具箱中的“圆形”工具，线条颜色为“深蓝色”，填充色为“无色”，如下图：

在场景中央按住SHIFT键绘制一个正圆形，选中此圆按右键选择转换为元件，在出现的对话框中输入名称为“背景图形”，类型为“图形”，确定后回到场景双击刚才转换为元件的圆形进入元件“背景图形”编辑窗口，然后在这个影片剪辑内重命名第一层为“圆圈”，再新建一层，命名为“线条”，根据开始我提供的结果图绘制一条横线和一条竖线，并让它们的相交点对齐到一开始绘制圆圈的中心点，（在完成这一步后如果觉得线条粗细不合适，或者颜色不满意，可以通过场景下方的属性栏进行修改），如下图：

再新建一层，命名为“文字”，选择工具箱中的“文字”工具在场景左边写上“My Photo”字样，再绘制两个小圆形放在圆圈与垂直线上下相交点中间，最后再建立一新层，命名为“扇形”，选择圆形工具从准心中间按住SHIFT+ALT键向外拖动鼠标绘制一个大一点的圆形，并给它填充半透明颜色(目的是可以透过它看到下一层的内容，方便对位，况且等一下要把它转为遮罩，而透明度不影响动画遮罩效果的)，接下来借箭头工具用框选的方法删去大圆的左半圆，再配以套索工具再删去剩下半圆的一角，最后结果如下：

接下来再选中半透明绿色扇形右键选择转换为元件，名字为“扇形”，类型为“图形”，按确定钮后双击扇形进入“扇形”元件编辑窗口，新建一图层命名为“线条组”，并在这层绘制很多水平的线条，最后用对齐工具调整这些线条的对齐和间距到合适，如下图：

最后调整两层顺序，在“图层1”的名称上点右键，在出现的菜单中选择“遮罩层”，再复制“图层1”中的扇形到一个新建的命名为“外线框”的层中，选择工具箱中的“墨水瓶”工具，调整线形颜色与“线条组”的线条颜色一致，给这个扇形加上外边框，最后完成扇形绘制，如下图：

5．【小图浏览影片制作】点击“场景1”回到主场景，新建一个图层命名为“相册”，用矩形工具，以准心为中心点，按住SHIFT+ALT键向外绘制一个略小于圆圈的正方形，最后再作稍微调整为居中的长矩形（因为我准备的素材都是宽度大于高度的图片），选中矩形框按右键选择转换为元件，名称为“小相册”，类型为“影片”，点确定钮后双击它进入“小相册”元件编辑窗口，重命名“图层1”为“线框”，在第10帧插入帧（因为有10张相片，每帧安排一张相片），新建一层命名为“图片”，把第一幅图片（1p.jpg）拖动到场景中，并调整图片大小为略小于“线框”，居中对齐，与“线框”保留一定空隙，用同样方法在第2~10帧中安排不同的相片，此是时间轴结构如下：

再新建一层“按钮”层，选择矩形工具，再选择下面一种默认放射填充效果，

在场景中按住SHIFT键绘出一个正方形，再选择变形工具，移动鼠标到正方形四个角的任意一个角上按住SHIFT键让其旋转45度角，再用箭头工具以框选的方法选中一边删掉，结果变成下面形状：

再按右键将其转换为元件，命名“按钮”，类型为“按钮”，双击它进入“按钮”元件编辑窗口，在“指针经过”下插入关键帧，在“点击”插入帧，回到“指针经过”帧，改变一下这一帧中图形的颜色，再新建一层，在指针经过帧插入“空白关键帧”，在属性下把按钮声音引入，设置如下图：

最终完成的“按钮”时间轴如下：

回到“小相册”元件编辑窗口，选中刚才做的按钮按CTRL+D重制一个，并在“修改”菜单的“变形”选项下选择“水平翻转”，做出“上一张”图片的按钮，最后调整一下它们的位置，选中“上一张”按钮加入如下脚本：

on (release) {
prevFrame();
}
“下一张”按钮的脚本为：
on (release) {
nextFrame();
}
再新建一层命名为“说明”，用“文本工具”在右侧加上图片说明。用同样的方法在时间轴的第2~10帧插入关键帧，再在每一帧上根据图片内容改变文本框的内容。
再新建一层命名为“页码”，再用做“说明”的方法完成页码的制作，最后新建一层脚本层，命名为“AS”，在第一帧加入如下脚本：
stop();
至此“小相册”影片做完，此时时间轴结构如下图：


6．【大图浏览影片制作】回到主场景，新建一个图层，命名为“放大相片”，拖动相片文件夹下第一幅图像（1p.jpg）到场景中，并让它相对场景水平和垂直居中，选择右键把它转换为元件，名称是“大相册”，类型为“影片”，双击它进入“大相册”编辑窗口，重命名图层1为“相片”，然后把剩余的9张图片 分别加入第2~10帧中，并对齐好!

再新建一层，命名为“关闭”，在这一层我们主要安排透明按钮，目的是让图片放大后直接单击图片区域关闭大图片。在这一图层的第一帧绘制一个与该帧图片等大小的矩形块，选中该矩形块转换为“按钮”元件，命名为“关闭”，然后再双击进入“关闭”按钮元件的编辑窗口，直接把第一帧的内容拖到最后一帧，时间轴结构如下，这样就完成了“透明”按钮制作。

回到“大相册”元件编辑窗口，在“关闭”层连续插入关键帧，接下来选中不同的帧调整透明按钮与对应图片大小相对应。

再新建一层“AS”层，在时间轴第一帧加上如下脚本：
stop();
回到主场景，选中场景中的“大相册”影片剪辑，在属性下的给它指定一个实例名用于后面脚本调用，实例名为：big，如下图：


最终完成的“大相册”影片剪辑的时间轴如下：

一开始介绍动画功能时有介绍到点小图片可以查看大图片，显示大图片时再点大图片又可以关闭大图片，这些鼠标操作最好用按钮来实现，那么小图片要有按钮响应，实现这种方法有多种，一种是直接选中不中帧中的小图片把它们直接转换为按钮元件，这种方法不好，会产生很多按钮出来，还是用回在制作“大图片”影片剪辑时做的“透明按钮”吧，让一个按钮元件被小图、大图所共享使用，可以减小FLASH的体积，接下来给小图加上透明按钮（大图片上面已做过了），

在库中直接双击“小相册”影片元件，进入“小相册”元件的编辑窗口，在“按钮”层上加一层命名为“透明按钮”，拖动库中的“关闭”按钮（刚才做的大相册关团透明按钮）到场景中，调整它的大小与线框差不多大小，再给这个按钮加上下面的代码："
on (release) {
setProperty("_root.big"， _visible， "1");
_root.big.gotoAndStop(1);
}
接着按F6往2~9帧加入关键帧，在选择不同帧中的按钮再次打开它们的脚本对话框，修改代码_root.big.gotoAndStop(1);后面的数字为对应的“帧编号”即可，最后完成“小相册”影片剪辑制作。

再进入“大相册”元件编辑窗口，给“关闭”层的透明按钮都加上如下代码：
on (release) {
setProperty(""， _visible， "0");
}
在主场景再增加一层“AS”层，在第一帧时间轴上加上下面代码，初始化大图不显示；
setProperty("_root.body.big"， _visible， "0");
此时主场景时间轴结构如下：


7．【让小图片动起来】
上面完成的相册在按“上一张”、“下一张”按钮时中间的小图片没有什么动画效果，只是在按下按钮的一瞬间切换片内容而以，现在本人要让它们动起来，就是在按下按钮后让小图片从不同的方向滑进小方框里。10张图片，我准备至少8个向滑进，如下为方向示意图：

现在直接点击库中的“小相册”影片元件，进入“小相册”元件编辑窗口，选中“图片”层第一帧（为了方便操作，之前可以关闭一些不必要层的可见性和锁定可能误操作的层），把场景中的小图片转换为“影片”元件，命名为“pic1”，再双击进入“pic1”元件编辑窗口，选中第一帧，在属性面板下“补间”属性设为“动画”，接着在第12帧插入关键帧。现在要做动画，让图片由左往右，选中第一帧，按住SHIFT键，把图片水平向左边移出下层方框少许，在属性栏“缓动”输入100，让图片减速进入框内而不是匀速进入，再在第12帧加入下面脚本：
stop();
此时时间轴结构如下：


用同样的方法，再做出影片剪辑pic2~pic10，只是不同帧图片进入的方向不同。
现在回到“小相册”元件编辑窗口，在“图片”层上方再建一层，命名为“picMask”，在这一层绘一个和方框差不多大小的矩形，最后将其变为“遮罩层”。

8．【给大图加个过渡效果】
在库中双击“大相册”元件进入它的编辑窗口，在“相片”层上方新建一层“过渡”层，选择工具箱中的矩形工具，并选择任何一种颜色，将其填充色设置为半透明(该矩形等一下用于做遮罩，颜色、透明度不影响遮罩效果，我们这里设置为半透明主要是为了方便操作)。再将这一矩形转换为“影片”元件，命名为“我的过渡1”，双击进入它的编辑窗口，在图形正中绘制一横线和竖线，它们的相交点于图片正中心，然后选择四个不同方向矩形块，按键盘上的方向键让它们偏离一定位置，最后把刚才画的线条删掉，这样在一个层就分出了四块不相连的矩形块来了，再全选中，右键选择“分散到图层”，在第一帧调整各层矩形位置，让它们整体看来又像连在一起的一个完整矩形块，在第25帧全部插入关键帧，再选择不同层每一帧，在属性“补间”设为“形状”，接着再调整各层第一帧矩形块到图片四个角以外，如下图：

新建一层“AS”层，在第25帧插入关键帧，为其加入如下脚本：
stop();
回到“大相册”元件编辑窗口，设置“过渡”层为“遮罩层”，并为“过渡”影片剪辑命名一实例名为“mask”，再进入“小相册”元件编辑窗口，选中“透明按钮”层中的按钮，重新打开脚本编辑窗口，为其加多一句脚本：_root.big.mask.play();，如下图：


至此完成一张图片过渡效果的制作，再用同样的方法，举一反三做出其它图片过渡效果，这里我就不一一做了，效果看演示。（过渡影片的制作只要掌握好FLASH遮罩影片制作方法就可以做出各式各样的过渡效果来）

9.【为部分图片加密码功能】
如果想让一部分图片需要密码才能访问，那我这里就用一个最简单的方法做出一个密码保护功能，其实现原理很简单：就是让别人连小图片都看不到，看不到小图片，也点不了小图片的按钮，那大图也就看不了，我就在小图片上方加一个影片遮住，这个影片有密码输入框，还有一个按钮，点下按钮时判断输入密码是否与脚本中定义的密码相符，相符让当前影片隐藏掉，否则另一动态文本框会显示“密码不正确”字样。

进入“小相册”元件编辑窗口，在“AS”层下新建一层“加密”层，然后在这一帧绘一个白色的，比线框略小的矩形，用文本工具输入标题“请输入密码”字样，还有一个“输入文本”类型文本框实例名为“pw”（密码输入框），另一个“动态文本”文本框实例名为“err”（错误信息提示框），还有一个从“公用库”中调用的一个按钮，并实例命名为“ok_btn”，如下图。

再选中这一帧中的所有元件，将它们转换为元件，命名为“加密”。双击进入“加密”影片元件编辑窗口，再新建一层“AS”层，在第一帧输入以下代码：
ok_btn.onPress = function() {
var rs_pw = pw.text;
if (rs_pw == "blueidea" and rs_pw<>"undefined") {
setProperty("", _visible, "0");
} else {
err.text = "密码不正确!";
}
};
下面这一步很重要，在“图层1”下面新建一层“btn”层，拉动库中的“关闭”透明按钮到场景中，调整其大小与线框等大。最后在想要加密码的图片所在帧的“加密”层添加这个“加密”影片剪辑即可。至此，整个FLASH相册做完。

好了，现在该按下CTRL+ENTER键，欣赏一下自己的作品了！