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”键打开其动作面板,在其中添加如下语句:
12.回到主场景,将影片剪辑元件1拖放到舞台上。选中主时间轴的第1帧,按“F9”键打开其动作面板,在其中添加如下语句:
//为_root中的每个影片剪辑实例应用下面的脚本 _root[i].onRollOver = function() { //定义鼠标经过实例的事件处理函数 this.onEnterFrame = function() { if (this._currentframe<this._totalframes) { this.nextFrame(); } //实例未播放到最后一帧时顺序播放,由模糊变清楚 }; }; _root[i].onRollOut = function() { //定义鼠标移出实例的事件处理函数 this.onEnterFrame = function() { if (this._currentframe>1) { this.prevFrame(); } //实例未播放到第1帧时逆序播放,由清楚变模糊 }; };
13.按快捷键“Ctrl+Enter”测试影片,即可看到图1所示的效果。
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |