如何制作Dock

心de轨迹

小弟第一次写教程，有什么错误或是不足希望大家指出

  Dock就是快捷方式的集合。所以想学做Dock就要先学会做快捷方式。
常用的快捷方式有3种---Image，Button，String。Image是使用图标作为外观，
Button也一样，不过不是单独的一个图标，而是像TLB覆盖图的图标，由3个图标构成，
分别为正常效果(第1图)，鼠标悬停效果(第3图)和鼠标按下效果(第2图)。
String则是以文字为外观的。接下来我们举个例子来具体认识一下各个快捷方式。



Button使用的图标


1.Image
[M1]           [M1]只是个名称 任意
Meter=Image    表示该Meter为Image
ImageName=1.png    1.png为使用的图标名称
X=10     快捷方式的横坐标  缺省为0
Y=10     快捷方式的纵坐标  缺省为0
W=60     图标的宽度  缺省为图标原始宽度
H=60     图标的高度  缺省为图标原始高度
LeftMouseUpAction=!Execute ["C:\"]   点击图标后运行的命令   
ImageRotate=xxx                            图片倾斜度

  表示运行命令的代码除了LeftMouseUpAction之外，
有LeftMouseDownAction，RightMouseDownAction，RightMouseUpAction
，LeftMouseDoubleClickAction，RightMouseDoubleClickAction，MouseOverAction，MouseLeaveAction等等。
还有测量值到达、超过、低于设定值时自动执行命令的代码。比如IfEqualAction等等。这些以后再向大家讲解。
有一点需要大家注意的是，在上面的这个快捷方式里绝对不能使用MouseDownAction系列的代码。
因为这样会造成皮肤无法拖动，请一定要注意。


2.Button
[M2]
Meter=Button    表示该Meter为Button
ButtonImage=1.png    相当于Image里的ImageName
X=10                和Image一样 不过需要注意的是用W和H无法限制图标的大小
Y=10
LeftMouseUpAction=!Execute ["C:\"]   点击执行命令

  在这里和大家探讨下Button和Image的区别。Button的图标做起来有点麻烦，从这个角度来说，
Button不如Image方便。但有弊也有利。首先，如果你要做出一个鼠标悬停放大的效果的话，用Image需要编写2条代码，
使用MouseOverAction和MouseLeaveAction进行相互切换。而使用Button的话只需要1段代码即可实现。
而且，Button的MouseOverAction反应速度非常快，而Image相对而言就要慢很多了。


3.String
[M1]
Meter=String   表示该Meter为String
X=120
Y=5
StringAlign=Left    对齐方式 Left为左对齐 Right为右对齐 Center为居中
FontSize=9         字体大小
FontFace=微软雅黑  字体
StringStyle=BOLD   Bold为粗体 Italic为斜体  BoldTalic为粗斜体 缺省为Normal
FontColor=255,255,255   文字颜色
StringEffect=SHADOW   使用文字阴影
FontEffectColor=0,0,0,200  阴影颜色  不使用阴影可将这两条代码删除
Text=xxx     显示的文字
AntiAlias=1              反锯齿(平滑字体)
LeftMouseUpAction=!Execute ["C:\"]   点击执行命令
Angle=xxx               字体倾斜度

楼下继续
  

心de轨迹

  以上向大家说明了3种简单的快捷方式制作。在一个皮肤配置文件中添加多个快捷方式就成了一个Dock。
虽然说起来简单，但在实际操作的时候还有一些需要注意的地方。

  首先是是各个图标间的距离。在编写Dock的时候经常要用到一个字母---R。比如：
[M1]
Meter=Image
ImageName=1.png
X=10
Y=10
[M2]
Meter=Image
ImageName=2.png
X=80r
Y=r
  此处注意2点。第一，上面的快捷方式名称为M1了，其他的快捷方式就不能再命名为M1了。
否则RM会不识别下面的M1.第二，M2的坐标为80r，r。这个R是用来绑定前一个代码的坐标的。M1的坐标为10，10，所以M2的坐标为80+10=90，0+10=10.用这个方法写坐标的好处在于如果想要整体移动坐标时，只需要更改第一个坐标就可以了。


  其次，就是存放变量了。想象一下，如果要更改快捷方式的路径的话，要一条条的找，很麻烦。
如果设置变量，再将路径指向变量就方便多了。比如：
[Variables]
S1=C:\
S2=D:\

[M1]
Meter=Image
ImageName=1.png
X=10
Y=10
LeftMouseUpAction=!Execute ["#S1#"]
[M2]
Meter=Image
ImageName=2.png
X=80r
Y=r
LeftMouseUpAction=!Execute ["#S2#"]

  这样的话M1就指向S1的路径，即C盘，M2指向S2的路径，即D盘。有再多路径也可以轻松的更改。
只要在[Variables]标题下的代码以yy=xxx的格式编写，都可以在下面的代码中用#yy#的格式调用。


楼下继续

心de轨迹

第三，一排图标，没有名称，难免会弄错，所以给Dock的各个快捷方式加个名称是必要的。
当然，用String格式编写的皮肤除外。添加文字一般有3种方法。


  一种是直接添加文本在图标旁边。比如：
[M1]
Meter=Image
ImageName=1.png
X=10
Y=10
LeftMouseUpAction=!Execute ["#S1#"]

[Text1]
Meter=String   
X=r
Y=40r
StringAlign=Left   
FontSize=9         
FontFace=微软雅黑  
FontColor=255,255,255   
Text=Computer   
AntiAlias=1   

  这样在原来图标的下面就会出现Computer的字样。
如果你觉得这样不好看，那可以设置为鼠标悬停显示，鼠标离开隐藏。方法如下：
[M1]
Meter=Image
ImageName=1.png
X=10
Y=10
MouseOverAction=!Execute [!RainmeterShowMeter Text1]   鼠标悬停显示文本
MouseLeaveAction=!Execute [!RainmeterHideMeter Text1]   鼠标离开隐藏文本
LeftMouseUpAction=!Execute ["#S1#"]

[Text1]
Meter=String   
X=r
Y=40r
StringAlign=Left   
FontSize=9         
FontFace=微软雅黑  
FontColor=255,255,255   
Text=Computer   
AntiAlias=1
Hidden=1       默认隐藏


  这个代码很重要，活用这个代码就可以制作出RD的文件夹展开效果。
(貌似人称阿拉丁效果，记不清楚了，我太out了)不过只用RM做还是很麻烦的，建议使用StandaLoneStack2
制作会省去很多时间。

  如果觉得这个麻烦，那就试试第三种办法。
[M1]
Meter=Image
ImageName=1.png
X=10
Y=10
LeftMouseUpAction=!Execute ["#S1#"]
ToolTipText=Computer

  这样把鼠标放到图标上，就会出现一个类似提示框的东西，上面写着Computer。不过实在是不好看，嫌麻烦又不太在意外观的朋友可以试试。

  第四，想给Dock加背景的朋友要注意，由于写在后面的代码会显示在前端，所以背景代码一定要写在快捷方式之前，否则背景图片会挡住图标，对使用造成影响。




楼下继续

心de轨迹

最后再扩展一下，用RM也能做出RD的热点效果。即鼠标移动到某个区域显示Dock，离开区域隐藏Dock。方法如下:
[BB]
Meter=Button   Image也可以 但是为了提高反应速度将其设置为Button
SolidColor=255,255,255,255
X=0
Y=0
W=200
H=40

MouseOverAction=!Execute[!RainmeterShowMeter M1][!RainmeterShowMeter M2][!RainmeterShowMeter M3]

MouseLeaveAction=!Execute [!RainmeterHideMeter M1][!RainmeterHideMeter M2][!RainmeterHideMeter M3]

[M1]
Meter=Image
ImageName=1.png
X=10
Y=10
LeftMouseUpAction=!Execute ["#S1#"]
Hidden=1

[M2]
Meter=Image
ImageName=2.png
X=60r
Y=r
LeftMouseUpAction=!Execute ["#S2#"]
Hidden=1

[M3]
Meter=Image
ImageName=3.png
X=60r
Y=r
LeftMouseUpAction=!Execute ["#S3#"]
Hidden=1
  然后把它保存，启动皮肤。你会看到一块白色的横条，把它移动到合适的位置，再次编辑皮肤。
将[BB]标题下的代码SolidColor=255,255,255,255中的最后一个255改为1，即SolidColor=255,255,255,1 保存，刷新。
这样一来，白色的横条就消失了。再次将鼠标移动到原来白条的区域，Dock就会显示出来。


  Dock的制作就介绍到这里 希望对大家有帮助。  Word文档 教程.zip (59.85 KB, 下载次数: 2683)

2011-7-8 19:09 上传

点击文件名下载附件

  顺便分享一个运用上述代码制作的皮肤Dcok
  
   RD.zip (204.39 KB, 下载次数: 1900)

2011-7-8 18:46 上传

点击文件名下载附件

zsj1192486623

很详细，学习了。{:soso__14259898408240719727_1:}

xuao

这个  先收藏   有机会试试。

Elizabeth

先收藏，学习一下

bbq

技术团队果然NB，

000liqing000

轨迹兄果然发教程了！！！太强大了！！
另外，轨迹兄说一下文字角度的代码吧，我没细看，貌似没有...

残线的殇

技术团队，仰望的存在啊……