面板散记(附录2)–一些图标动态效果制作

下面我们先来做一个Moto菜单激活动画实例，由实例看创建动画的基本步骤及其相关选项。
一、打开一张已经做好的菜单图片。

二、添加帧。去掉除图层1 副本外的所有眼睛。然后选中图层1 副本，用橡皮擦工具，把最下面那一道蓝杠擦掉。

三、继续添加帧3。Ctrl+J复制图层1 副本为图层1 副本2,隐藏图层1 副本。将图层1副本2的最下的蓝杠擦除。

四、还是继续添加帧4。Ctrl+J复制图层1 副本 2为图层1 副本3,隐藏图层2 副本。将图层1副本3的最下的蓝杠擦除。

五、 连续点击三次“复制当前帧”，添加帧5、6、7。并分别点击相应帧，为它们分配显示相应的图层。（帧5,显示图层1副本2，帧6显示图层1副本，帧7,显 示图层1）（像这步将前面的动作倒过来的效果，其实有更快捷的方法，那就是全选帧，然后反向帧。下面的实例里有说明）。

六、 按住Shift键点第一帧和最后一帧，将所有帧选中。点延时时间值处的三角下拉箭头，在弹出来的菜单中，没有我们所需要的时间，点其他，在弹出的对话框中 填入0.07。点循环选项的选区框（图中绿框）处，选择一个需要循环的次数，因为菜单激活动画不需要循环很多次，在这里我们选择“一次”。

七、点播放按钮预览一下，满意后，优化输出，点击双联，再点优化，对照着双联两边的图像，选一种或自己设定一种文件体积既小图像又不失真的优化选项。（或者点四联处。最第三联和第四联是系统自动为你优化的，挑个你看着好的）

Ctrl+Alt+S存储优化结果为Gif动画。

（关于优化）
在针对 Web和其他联机介质准备图像时，您通常需要在图像显示质量和图像文件大小之间加以折衷。最简便的方法就是在IR的预置的优化选项里选择一种。Photoshop 和 ImageReady 提供了许多控制选项，用于压缩图像的文件大小同时优化其联机显示质量。
更多相关知识，请点击IR帮助，输入“优化”进行搜索，太多了，不再引用。帮助文档是个好东东，要多多利用。）
快速生成动画的方法：过渡

面板散记(附录1)—-关于图标

附录—-面板的灵魂：图标
如果说一个面板的框架是它动人的身材，那图标就是它的灵魂。一套好的图标，可令 面板发出它耀眼的光芒。这里说说面板图标的处理。要制作一套图标，实在是一个大大的工程，基本上是属于一个不可能的任务。幸好网上各位大大做了很多操作系 统上用图标，我们可以借用来修改一下，让它成为我们面板的灵魂。
图标我们搜索一下，应该能找到很多.］
以下把我收藏的一堆站点给大家，我上网太慢，就不一一帮大家验证了：
图酷：http://www.tucoo.com/icon/index.htm
一个N多图标的网站，大多数是PNG格式的，正好可以做背景透明图标用。
http://www.wincustomize.com/index.asp
http://browse.deviantart.com/
http://interfacelift.com/icons-win/ Q!Q
http://www.kde-look.org/index.php?xcontentmode=22
http://www.itom.co.nr/
http://www.pixelgirlpresents.com/icons.php?cat=pc
http://www.cablenet.ne.jp/~moon-y/icons/icons.html
http://mmicons.deviantart.net/Index.htm
http://www.iconfactory.com/
http://www.tss2000.nl/site_pages/style_icons.php?CV=1
http://www.rokey.net/index.htm
http://www.osx-e.com/index.php
http://www.neowin.net/
特色图标站 http://photo.qqrm.com/down/sucai/sucai02-4.htm
太平洋电脑网图标区 http://dlc.pconline.com.cn/third … eid=4&kindid=18
硅谷动力，欢乐下载 http://happy.enet.com.cn/individual/desktop.shtml
Bombia Design：http://www.bombiadesign.com/new_icons.html
Pixelhouse ：http://www.pixelhuset.se/pixelhuset.html
the sponged.net ：http://www.sponged.net/
railheaddesign ：http://www.railheaddesign.com/
fear utopia ：http://www.fearutopia.com/downloads/fpmacextras.html
mubicon ：http://www.underbed.net/mubicons/pages/top.html
rimshotdesign ：http://rimshotdesign.com/
*aquastory ：http://www.kenichiyoshida.jp/
resexcellence ：http://www.resexcellence.com/
widget icons ：http://widgetwidget.com/
yellowicon  ：http://www.yellowicon.com/
矢量中国 ：http://www.vectorchina.com/
HYBRIDWOEK ：http://www.hybridworks.jp/
OK资源站 ：http://xokcn.com/
http://www.themexp.org/listings.php?type=icon&view=date
http://www.iconbulk.com/
Ico是Windows的图标，ICL是windows的图标库.集合着一堆图标在里面。
要处理这些图标，我们需要用到一个软件：Axialis IconWorkshop 6。这个最新版的图标编辑软件，支持了Vista的图标格式。它可以帮我们将ICO或ICL中的图标转PNG或GIF等格式。
这个东东网上很多，XX版的也有。大家自己去搜吧，这里就不上传了。

面板散记(四)—-面板的改造

四、想用就用，用得漂亮：面板的转换
1、九宫十二宫互转：
1.1　标准宫格面板
这里所谓的标准宫格就是原版Moto这样的宫格，且它们用的图标都不会超过47X47大小。用Skiman的Stand脚本一般都可以搞定，要转成9宫 的可用“3X3菜单”，转为12宫就用“3X4菜单”。转换后可能图标位置并不是很适合，到S4M里再调一下就可以了。调的时候可以用面板预览软件看看一 位置是否正确。想要了解Skiman脚本改的过程或要改成非标准宫格的，请参看下边的手工改造法。
简而言之，增减宫格的过程就是：
a.       增减框架结构中的42主项的显示静态图标的宫格数；
b.       看需要增减43主项的动态图标宫格数，（如果是动态图标是同一个位置的，只要有一项就够了，不必增减）；
c.       调整42、43主项下各分项的宫格位置和尺寸，将其排列至适合的位置；
d.       增减61、62、63、64的四向导航数值分项，并修改为相应该的数值。

1.2　非标准宫格面板：
1.2.1     九宫转十二宫一例
这里将一个原始九宫的Tehcno面板改成的十二宫，以了解如何将这种样式的面板如何转换。这类面板的特点是：静止图标排列在一处，动态图标在另一处的同一个位置。
a.点42主项（静止宫格），再点添加元素三次添加三个宫格，成为十二个宫格。因为这个面板的动态宫格是同一位置的，所以不必添加43主项的分项。

b.然后将12个静止的宫格位置调整到相应的地方。

c.基本调整过后，保存一下。用面板预览软件查看一下调整过的宫格位置是否正确，如果不正确，再返回S4M调整，直到满意。（调整后如需再查看，在预览软件中要再次打开。）

d.然后分别将61、62、63、64的导航数值项分别添加三项，并修改其数值。如果不知道如何填写这个数值，可以再用S4M打开一个正常的十二宫的面板，将它的这四项数值抄写过来。

填完数值后。保存收工。
1.2.2　一个全屏的十二宫Flash面板转换为九宫。
这类型的面板的特点是：主菜单动态图标全屏，静态图标已集成于动态动态图标中，或不可见。修改这类型的宫格的方法，就是只删除框架结构主项42的宫格数，不必去调整它们的尺寸和位置，因为它们是不可见的。然后再修改一下宫格的四向导航数值就可以了。
有一个要注意的问题就是，如果删除掉的主菜单项目恰好又是九宫中的子菜单项目，那你需要把相应的动态图标删除，让它调用Moto图标，或找相似的图标来进行替换。
MS这里已不需要例子？
再说吧。。
这类型的面板如果要九宫转为十二宫，就有点麻烦，主要是增加主菜单项目后，没有相应的动态图标，需要自己再去仿着原来动态图标做。
这个将在下面PS改造法中讲到。。。

面板散记(三)—-面板分解

三、知此知彼，百战不殆：Skinner4Moto与面板之二——面板分解

特 别说明：为了能快速找到参数位置，以下的参数位置说明中的号码，都指的是编号，而不是行号，且都是Moto面板为标准的参考编号，因为面板不同可能会引起 编号错位，特别是98颜色成员的索引颜色编号，所以具体修改时，请以后面S4M后面板注解为准或以-41 70开始做相应加减。
★桌面：

通过桌面元素框可修改大多数参数。
⊙DRM图形包位置：尝试修改其位置，不知是否参数位置不对还是何原因，没成功。
⊙墙纸：参数位置：桌面元素——墙纸
修改：点选择图片按钮选择你需要的墙纸，如果不在面板文件夹中，软件会自动将它复制到面板文件夹中；如果与机型屏幕的大小不符，会提示是否改变大小操作。点“是”后，图片会伸缩为机型屏幕大小；如点“否”，则将原样复制到面板文件夹。
下面的在手机图片目录还是在面板目录随你选一项吧，用Skiman装的时候还是一样复制到图片目录下的；最下在的框中可以输入一个自定路径，以符合特殊 的需要。如：在卡装面板的时候，常会因为路径不对无法加载墙纸，就可以在这里输入：／b／skins/XXX.JPG这样的路径解决这个问题。其实这个例 子也不完全对，因为在保存之后软件会将／b改成／C，还是要用记事本打开Ski文件找到这个路径，把／C改成／B来搞定。暂时想不到别的例子了，先这样说 吧。
⊙运营商标识：关联IT隐藏后歌名。
参数位置：桌面元素——运营商标识。
常用修改：
①隐藏：将字色透明度设为255。如有轮廓，也应将轮廓色透明设为255。或用Skiman里的运营商隐藏脚本修改。
②移动：将显示边框打上勾，点下“左”前面的数值框，滚动鼠标滚动左右移动；点一下“顶部”前的数值框，滚动鼠标滚动上下移动。爱移哪移哪去。当左 边界数值大于220，顶边界数值大于176之后。嘿嘿，它不见了。（相对于176×220的屏幕而言）这也是另一种隐藏方法。不过不推荐。因为这样会使 IT隐藏后歌名看不到。
⊙日期文本：关联充电指示，Gprs文字，声音播放器隐藏后歌名。
参数位置：桌面元素——日期文本。
常用修改：
①加宽框架：常有些国外来的面板，因为用的日期格式为xx/xx/xx，当然我们改成为XX年XX月XX日的格式之后，出现显示不完整现像，这里就要通过加宽日期文本框来解决。实验得出最小值为88像素。
②移动：参照运营商。更多的人喜欢将它放在左下角，这时候你也可以用Skiman里的“日期－左下角”脚本。
⊙数字时钟：MS没什么好说的。爱移哪就移哪就对了，要放右下角，Skiman也有脚本。
其实对于文字项目，也没什么好美化的。也就是改改字色，加点透明，以便使字色和背景更加融合，免得太突兀；加个下划线（MS没人喜欢这样做）；加个轮 廓，一层二层，让它有个描边的效果。或加了轮廓之后将主字色全透明，让他变成空心字。然后将它调整到适当的地方就行了。如下图

而文字的Bug，基本上都是透明惹的祸。
体现在这几方面：
a、模糊，这是由于设定它的透明度引起的，体现在浏览多媒体信息或Wap浏览器的标题和软件按钮文字上；
b、重叠，是由于文字所在项的背景设定了透明度引起的，常出现在短信文字输入或某些选项拨动摇杆进行选择时出现；解决这两种Bug，只要将相关透明度改回0就可以了；
c、显示不全，由于字体框的宽度不够引起，加宽框架就行了，或者是被某些项目的框架给遮挡了，把这个框架移开就可以了；
d、文字残迹，由于文字框架的高度不够引起，一般很多文字框的高度都是18或19像素，当给文字加了一层二层的轮廓之后，文字就超出的框架范围了， 当我们改变项目，文字一改变后，就会留下残迹，这时候把框架加高到22像素这样就OK了，还有一种就是文字框架与背景图片错位了，文字悬空于透明区域等， 改变项目文字后，也会引起字体重叠。
⊙模拟时钟：
参数位置：桌面元素——模拟时钟
顶上的stundenzeiger是时针，从上到下分别是时针颜色及透明度、时针阴影色及透明度、时针的长度；
中间的minutenzeiger是分针，从上到下分别是分针颜色及透明度、分针阴影色及透明度、分针的长度；
顶下是模拟时钟的背景图（钟面）的显示框架及位置，长度和宽度一般设为7.gif的大小，且为正方形。
注意点：因为时针和分针的轴心默认为框架垂直和水平的中心点并且是随着框架的移动而移动的，所以如果有特殊要求而使用非正方形框架的钟面图的话，请确保钟面图的轴心处于中心点位置！
⊙导航键：
参数位置：这――

常见Bug：导 航失效，摇动导航键时，进不去相关的项目。这是由于所连接项目的Gif图标动画不足两帧引起的。用动画编辑软件Ulead GIF Animator5或photoshop自带的ImageReady将图标改成两帧即可。下图就是UGA5的，打开图标后，点一下“相同帧”，加成两帧后 保存即可。IR上的也差不多，不过IR上那个按钮应该叫做“复制选中的帧”，但IR上连续的帧如果是一模一样的话，保存的时候压缩成还只是一帧，这个我还 不知道如何解决，通常我只好把另一帧稍为做下变形来搞定。推荐还是用UGA5来做吧，假如你并不想把它做成复杂动画的话。

另类用法：做IT隐藏后界面。因为IT隐藏后，就是利用这四个图标的框架显示图标的，所以把IT显示的几个图标做成播放器界面后，将其分配到相应诉框架里，并调整框架大小和位置后，实现IT隐藏后界面的完美显示。
（要详细说明吗？）
⊙软件按钮及按钮文字：
参数位置：看下图（编号）。

一般软件按钮图片的位置左边界与右边界都是紧密衔接的，如Moto面板的数据是左：0-77；中：78-97；右：98-175。一但这几个数据发生了 断裂，软件按钮条就会出现隙缝，要解决这个问题可以先看看这几张Gif图是不是有透明像素，图片和框架的大小是不是一样，分析一下边界衔接情况。然后试着 向左调调或向右调调一下。
如七友的这个Mac面板的软件按钮条（借用一下做例子，请勿见怪）：

使用中发现在菜单按钮和右软件按钮之间有一条隙缝，用S4M打开后发现菜单按钮的左右边界为78-98,右按钮左右边界为98-175,两个按钮在98 像素处重叠。试着把右按钮的左边界调到99,却发现隙缝更明显了。于是怀疑图片和框架的大小不对，查看之后发现菜单按钮图片的大小是20X20,而框架的 大小却是21X21，是属于图片未填满框架而留下的隙缝，于是把框架的大小改为20X20后解决。
另一个很郁闷的情况是这几个软件按 钮的透明度，它跟颜色的透明度值是根本就不是一回事，说它是颠倒的吧，那么应该是0是不透明，1是全透明，透明取值为1-255。可是实际却是1有时能全 透，有时半透，而16的倍数，如16、32、48、160等数值却是全透明的，而且取值2比4透明，4比8透明，8比12透明，那就是越小越透明？而16 是一个坎？再取值为24试了试,发现它跟取值为8时候的透明是一样的，那只能先这样定了：0为不透明，16为全透明，中间值1-15,值越小越透明！
要快捷修改这些透明度，也可以用Skiman里的“完美透明”脚本。