用PhotoShop和Flash联合打造马赛克导航按钮

作者佚名技术来源服务器技术浏览发布时间 2012-07-10

Photoshop是图像处理软件领域的佼佼者，Flash在矢量动画软件领域独领风骚，这两个软件强强联手将会产生怎样的效果？本文就将向您展示由PhotoShop和Flash共同打造的马赛克导航按钮。

如图1所示是马赛克导航按钮的动画示意图——当鼠标移到按钮上时，图片由马赛克状逐渐变清晰；当鼠标移出按钮时，图片逐渐变回模糊的马赛克状。按此在新窗口浏览图片

图1

其制作步骤如下：

1.启动PhotoShop，按快捷键“Ctrl+O”打开要处理的图片，如图2所示。

按此在新窗口浏览图片

图2

2.按快捷键“Ctrl+Shift+S”将图片另存为11.jpg。

3.选择“滤镜”→“像素化”→“马赛克”菜单命令，打开“马赛克”对话框，将单元格大小设置为3方形，如图3所示。单击“好”按钮应用马赛克效果。按此在新窗口浏览图片

图3

4.按快捷键“Ctrl+Shift+S”将图片另存为12.jpg。

5.选择“滤镜”→“像素化”→“马赛克”菜单命令，打开“马赛克”对话框，将单元格大小设置为4方形，单击“好”按钮应用马赛克效果。

6.按快捷键“Ctrl+Shift+S”将图片另存为13.jpg。

7.按照以上的方法继续为图片应用马赛克滤镜，每次都将马赛克的单元格大小增加1，然后另存图片，直到19.jpg。

8.制作好11.jpg~19.jpg这9张图片后，退出PhotoShop，启动Flash（这里用的是MX 2004版）。

9.按快捷键“Ctrl+F8”新建一个影片剪辑元件1，进入其编辑场景，选择“文件”→“导入”→“导入到舞台”菜单命令，在打开的“导入”对话框中选择11.jpg，单击“打开”按钮，出现如图4所示的对话框，询问是否要导入图像序列。按此在新窗口浏览图片

图4

10.单击“是”按钮导入图像序列，此时在时间轴中产生9个连续关键帧，每一帧都有一张导入的图片。选中这9个帧，单击鼠标右键，在弹出的快捷菜单中选择“翻转帧”命令，以将模糊的图片放置到前面，清晰的图片放置到后面。

11.选中第1帧，按“F9”键打开其动作面板，在其中添加如下语句：

stop();

12.回到主场景，将影片剪辑元件1拖放到舞台上。选中主时间轴的第1帧，按“F9”键打开其动作面板，在其中添加如下语句：

for (var i in _root) {

//为_root中的每个影片剪辑实例应用下面的脚本

_root[i].onRollOver = function() {

//定义鼠标经过实例的事件处理函数

this.onEnterFrame = function() {

if (this._currentframe

this.nextFrame();

}

//实例未播放到最后一帧时顺序播放，由模糊变清晰

};

};

_root[i].onRollOut = function() {

//定义鼠标移出实例的事件处理函数

this.onEnterFrame = function() {

if (this._currentframe>1) {

this.prevFrame();

}

//实例未播放到第1帧时逆序播放，由清晰变模糊

};

};

}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: 利用WebService和Flash做简单图片浏览器下一篇: 复杂做法·计算器做法

关于用PhotoShop和Flash联合打造马赛克导航按钮的所有评论

随机推荐