【心与心的碰撞】用心同一空间视觉效果

尊重作者尊重原创请勿使用复制粘贴式转载

又是很久没有发表文章！嗨！真是佩服那些辛勤劳作，频繁发表IT文章的朋友！说实话，发表IT文章真的是蛮累人的一件事。

上个月，做了一个【爱在彼岸】的主题装扮，有访客要求说说里面几个效果的制作，当时就想解释的，可又不是三言两语能够说清的，一拖两拖，就拖到了如今。可能是在祖国的大好河山逛了一圈赋予了我新的力量的原因吧，今天就来说说这个主题某些要点的制作方法。

首先我们来看看这个主题的整体效果：

附：模板1:http://yulz.blog.enorth.com.cn...
W：723PX H:841PX
模板2：http://yulz.blog.enorth.com.cn...
W:723PX H:900PX
模板3：http://yulz.blog.enorth.com.cn...
W:723PX H:703PX
装扮所需物品：

有兴趣的朋友可以继续往下看了。

photoshop部分要点解析：

既然是要点，那么，那些怎么溶图，怎么加文字，这里就不说了。这里主要针对访客提出的一个问题进行说明。

附带先说下，模板的背景图怎么制作。先在商城试用背景，在背景上点右键【背景另存为】，这样，可以将一整张背景图存下来。有的朋友是使用背景图后在首页去除所有模块，然后进行截图，这个也可行，只是，有点麻烦。存下来的背景图用PS打开，修改画布大小，向右收缩60PX，向下收缩176PX（这是指4.0空间），然后向左收缩至欲做模板的宽度。

模板顶部心形边框的做法：
选择自定义形状工具里的心形工具，按住Shift键在画布里拉动工具，画出一个心形的路径。

打开路径面板，点下方的【将路径作为选区载入】按钮，建立一个心形选区。

回到图层面板，新建一图层，用绿色填充选区，颜色比背景绿色稍深即可。不要取消选区，点【选择】--【存储选区】，将这个选区存成【大心】

【选择】---【修改】---【收缩】，收缩5像素，【羽化】10像素，按Delete删除，得到下图：

同样方法作出小心。再载入小心的选区，把大心与小心重叠部分删除。

所有效果都做完后，载入大心以及小心选区，在背景图里删除该部分。

PS：预先存储选区，可以方便操作，有时候，我们的边框做到最后不是密闭的，在开始时先把密闭的选区存储下来，可以方便操作。
为了视觉上的同一，本模板其他的模块边框都做成了心形，而且，每个心形又各不相同。
flash部分跟随鼠标逐步开阖模块遮罩的制作：
效果预览：http://yulz.blog.enorth.com.cn...
做好模板，存成png格式图片（尽量不要存为gif格式的，gif格式的图片所占空间很小，但同时图片质量非常差，尤其是一些颜色丰富的图片，做出来看着都是斑点。）再做一张在模块上面做遮罩的图片。
打开flash，把这两张图片导入到库。分别新建两个图形元件，把这两张图片拉入，经过分离处理，选择魔棒工具，在模板图的心形扣空处双击，点右键，按Delete删除。

新建一影片剪辑元件，建两个图层，分别命名【模板】【图片遮盖】，把两个图形元件拉到对应的图层。

在【图片遮盖】上面新建一层，命名【遮罩】，选择矩形工具，笔触颜色无，填充颜色随意，在工作区画出一长条状矩形，宽度和图片遮盖相等，高度随意。

选中这个矩形形状，点右键---【复制】，再在空白处点右键---【粘贴到当前位置】

将这个复制的形状下移至与第一个矩形形状相接的位置。把填充颜色随意修改成和前一矩形不相同的颜色。（如果不修改颜色的话，会出现吃色现象，等下删除时就麻烦了。）

按照上面步骤，多次复制粘贴移动，使矩形形状把【图片遮盖】全部遮住。

接着在【遮罩】图层点右键，选择【遮罩层】，这样这些矩形形状就全部不可见，而【图片遮盖】又可见了。同时，【图片遮盖】层会向里缩进。【遮罩层】的意思就是：遮罩项目像是个窗口，透过它可以看到位于它下面的链接层区域。

选择【图片遮盖】层，在第5帧插入关键帧，将此帧的图片遮盖元件的Alpha改成0%，在起始帧和第5帧之间创建补间动画。第6帧插入空白关键帧。复制第5帧在第7帧粘贴帧，复制第1帧在第11帧插入关键帧并粘贴帧，然后创建补间。其余图层，在第11帧插入帧。

选择【模板】层，在第6帧按2次【F6】插入2个关键帧。（如下图）选择【模板】层的第6帧，在属性里将其属性改成【按钮】，按F9打开动作面板，输入：
on(rollOver){
nextFrame();
play();
}
在属性里修改一个元件的属性，可以使这个元件暂时具有其他属性的功能，这样做，比新建一个按钮元件要节省空间。

暂时将【遮罩】解锁，复制一个矩形形状。在【遮罩】上新建一【按钮】层，在第一帧插入一帧，将刚刚复制的形状粘贴进去。转换成按钮元件。移动到第一个矩形形状的位置，Alpha改成0%。打开动作面板，输入：
on(rollOver){
nextFrame();
play();
}

在最上面新建一层，在第1、第6帧插入关键帧，输入：
stop();
好，这样一个影片剪辑就做好了。
在库面板，右键点击该影片剪辑，选择【直接复制】，把名称改成【2】，依序而作，共复制出11个影片剪辑。

双击影片剪辑【1】，将遮罩层解锁，删除除第一个矩形形状以外的其他的形状。如图：

双击影片剪辑【2】，将遮罩层解锁，删除除第2个矩形形状以外的其他形状。同时将按钮层的按钮下移至和第2个矩形形状重叠。

依次做好11个影片剪辑。回到场景，建11个图层，把11个影片剪辑依次拖入，实行与舞台左对齐、上对齐。

好了！这个模板就做好了。应该还不是很难吧？记得以前看过一个教程，效果和这个类似，但是解说的是要把那个图片遮盖用ps分割成10多个小块，然后，在做flash时，建一个影片剪辑，拖一个图片入内，然后要记住该图片的坐标。这样做有点麻烦啊。
用这个遮罩层的制作方法，可以作出各种形状的跟随鼠标逐步开阖模块遮罩的效果来。