一、需求决定功能
下面是最终演示效果：
这里我之所以先把演示效果放到第一位，目的是为了让大家看过之后先有个印象，这样当我后面叙述到某些东西的时候，大家就不会那么陌生，不知所云了。
其实设计这个效果的初衷，是想实现一种类似Ajax的效果，像大家经常在视频网站中见到的那样，当你看完一部片子之后，可以实时对其进行评分、留言等等，所见即所得。这些flash当然也做得到，我们完全可以通flash+js来实现。但是我没有把它和js交互的部分放上来，这里我只讲解flash展现的效果部分。可是如果单纯把信息罗列出来，就和普通页面没什么分别了，没有把flash的特点发挥出来，所以我想要在效果上显出她的与众不同。这个程序里面所设计到的功能在题目当中已经给出，但其实还有很多，我们完全可以把这个小程序的功能做的很强大，不过这要看一个人的思维方式和创意了，而我就作为抛砖引玉吧。
这里面的元素可以完全用AS来写，我这里为了方便，所以偷了个小懒，有的元件是用图形画的。
二、设计思路
这个程序虽然不大，但是涉及到的知识点还是挺多的，那么在设计前期我们应该做些什么呢？Lee Brimelow说过一句话，你是第一个能够“看到”这个作品的人，因为在你设计之前，这个实体的最终形态已经呈现在你的脑海中了。从这一点上我们可以看出，编程其实是次要的，关键是前期的策划与设计，如果失误的话，会影响到整个程序进度，你可能会频繁的去修改甚至是重写代码。另一方面，我们的程序要能给用户带来良好的体验，不能只单单自己感觉好用就行，毕竟你是设计者。
对于此程序来说，我希望能够尽自己所能来给用户提供便利，所以首先一点，自动滚屏和手动滚屏是必须的，因为这是两种不同的需求。其次是投票窗口的设计，最初我想到的是像传统的制作方法一样，点击查看之后弹出一个窗口来显示投票结果，你可以关闭，也可以选择查看其他项目的投票结果来更新这个窗口。但是，我想到了一点，这样做缺乏对比性，因为一次只能显示一个窗口，能不能改善一下这种状况呢，其实也不难办到，我们可以把显示结果做成MINI型，就是很小巧的那种，让他们在不同的选项上可以自由弹出，互不干扰，这样用户可以自由选择查看投票结果。这样做，其实就是给用户提供了方便，我们要在细节上多下一些功夫。
不过这个程序目前有一点不太完善的地方，如果只有20多个图像展示区域，效果是可以接受的，但是如果太多了，稍微滑动滚动条，一下就会过去好几张图片，这样带来的用户体验就不是很好，他们可能会因此频繁的调整而失去耐心。解决的方法不是没有，我首先想到了两种。第一种，就是加入分页，我们可以设定一次最多显示20张，然后通过点击分页来进行切换，这样用户是可以接受的；第二种，就是加入快捷键，可以让用户通过键盘切换到不同的显示区，也可以通过方向键来调整滚动的距离。其实解决方案有很多种，我想大家也有自己不同的解决途径，这部分扩展程序我没有写，大家最好能够自由发挥。但是不管怎样，我们都要始终把握住一点
———— 尽最大可能给用户提供方便，以用户体验为中心！
三、双击剖析
对于一般的老手来说，“双击”的实现已经不再陌生，我在这里简单的提一下思路，给更多的学习者以参考，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| //双击判断事件;
if (!click) {
timer = getTimer()/1000;
click = true;
} else {
timer2 = getTimer()/1000;
_root.test2 = timer2-timer;
if (timer2-timer<0.25) {
if (the_scroll == true) {
delete scroll.bar.onEnterFrame;
the_scroll = false;
scroll.news.gotoAndStop(2);
} else {
the_scroll = true;
scroll.news.gotoAndStop(1);
Scroll();
}
} else {
timer = getTimer()/1000;
}
} |
双击的实现主要就是判断连续两次单击时间的间隔，在程序刚开始执行的时候，当鼠标第一次单击时，会进入第一个分支语句，目的就是给timer赋初值，这样，后面再次按下鼠标的时候，就可以用第二次的时间timer2减去timer来计算二者时间间隔，当小于我们设定的值时，则双击成立，再判断滚动是否暂停，否则将第二次单击的值作为timer保存起来，以便于侦听下一次的鼠标操作。
四、色彩变换与滚动的实现
其实这个效果非常的简单，你只需要记住两点就能搞定：
1、通过Transform类来收集颜色转换的相关数据；
2、用ColorTransform类对颜色进行处理。
这样当鼠标移入或者移出图像的时候，才能看到色彩转化的效果。其实当我讲到这里的时候，你已经完全可以编写出此效果，因为它的原理非常简单。不过毕竟教程是以“教”为主，这里我给出了具体实现的方法，不过我仍然希望在你看过之后，能够仔细思考一下这段代码，你会很惊奇的发现，原来很多类似的效果都是触类旁通的。
这里我只以鼠标移入为例，因为其他地方都是一样的，多说无益。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| //把亮度偏移加载到当前对象上
var trans:Transform = new Transform(this);
//偏移步长为15
var step:Number = 15;
//偏移量
var offset:Number = 0;
var GT:Number = null;
this.onEnterFrame = function() {
offset += step;
if (offset>=150||offset<0) {
step *= -1;
}
picColor(trans,offset);
};
// 亮度偏移
function picColor(t:Transform, v:Number) {
var bt:ColorTransform = new ColorTransform(1, 1, 1, 1, v, v, v, v);
t.colorTransform = bt;
} |
通过上面的if语句，判断色彩偏移量的状态，如果超过了预设范围之后，就使其步长值取相反数，这样它的值就会在这个区间内不停的变换。然后把每次变化的偏移量传给picColor，让它通过这个值来对色彩进行改变， new ColorTransform(1, 1, 1, 1, v, v, v, v)是指在初始化颜色不改变的情况下，调整红、绿、蓝、alpha四个颜色通道的偏移量，这里面我统一用一个变量v来代替，表明当这些数值同时改变的话，会产生暗淡或者高光的效果。
对于滚动效果，egoldy的教程已经讲的很详细了，一个是滚动公式的应用，另一个是鼠标中键onMouseWheel的应用。不过这里我想强调一点，就是对于细节的处理问题。如果当前状态为自动滚动的时候，滚动条也是随之移动的，此时如果按下鼠标拖拽滚动条，虽然图像也能随之移动，但此时如果不释放鼠标（即触发release事件），滚动条就会移动到鼠标外，而不是停留在鼠标的位置，这样用户在使用的时候，就会有一种“失灵”的感觉。其实这是个很小的问题，解决也很容易，只要移除onEnterFrame事件就可以了，但是从另外一个角度也说明了细节决定成败的道理。
五、整合
这部分整合的功能就是投票显示，主要就是通过xml来获取服务器端的数据，当然如果你对js比较熟悉的话，也可以通过js来实现。我把算法简化了很多，这里我把思路简单的介绍一下。假设我们把总共所有投票的人数进度条设为100%的话，那么“当前投票”和“投票约占百分比”的进度条长度其实是一样的，所以只要进度条随着百分比（当前投票数/总共投票数）的增加而增加就可以了。但是显示总共投票数的时候进度条有个问题，因为不管总共投票人数有多少，进度条都应该保持100%长度以显示总投票数，可是我想要在进度条增长的时候，后面的数字也随之变化，当人数太多的时候，进度条不断增长所需要的时间就会延长，这样效果就不是很好了。所以我的解决方法就是，让显示的总投票数从高位到地位数字依次变化。比如投票总数是5678，我设一个变量votenumtotal_i，让它从0开始累加，再设一个votenumtotal来记录投票总数，然后判断votenumtotal-votenumtotal_i的值，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| //显示总共投票数
if (votenumtotal_i<=view.votenumtotal){
this._parent.board.C_votenumtotal.text=votenumtotal_i;
if (view.votenumtotal-votenumtotal_i>10000){
thearea=4;
}else if (view.votenumtotal-votenumtotal_i>1000){
thearea=3;
}else if (view.votenumtotal-votenumtotal_i>100){
thearea=2;
}else if (view.votenumtotal-votenumtotal_i>10){
thearea=1;
}else if (view.votenumtotal-votenumtotal_i>0){
thearea=0;
}
switch (thearea){
case 0:votenumtotal_i+=1;break;
case 1:votenumtotal_i+=10;break;
case 2:votenumtotal_i+=100;break;
case 3:votenumtotal_i+=1000;break;
case 4:votenumtotal_i+=10000;break;
}
} |
当差值大于10000的时候votenumtotal_i每次加10000，大于1000的时候votenumtotal_i每次加1000以此类推，这样就可以实现从高位到地位数字不断变化的效果。唯一的缺点就是，数字变化的效果瞬间显示完毕，而不能随着进度条的增加而增加。当然，如果谁有更好的解决方法，欢迎提供思路。
六、总结
在编程的整个过程中，我个人的感觉是：最枯燥的事情就是写代码，最有趣的事情仍然是写代码。这句话看似很矛盾，其实则不然。俗话说的好，万事开头难，但是一个好的开始就是成功的一半，所以我们多花一些时间在前期的策划和准备上是很值得的。当你把一些事情都考虑好了之后，剩下的事情就水到渠成了，写起代码思路清晰，而且效率也高，等待着你的就是品尝胜利的果实。
人往往是很守旧的，一但某种思想形成一种习惯，就很难再去改变、再去接受新的东西，这会在某种程度上住一个人的潜力。改变一个人的习惯真的很难吗？根据美国科学家对人类的调查结果表明，两个星期完全可以给人重塑一个新的习惯。这能说明什么呢？其实主要原因还是来自于人类的本性——惰性。
一个有惰性的人我们通常叫做他懒人，但是有一句很经典的话：世界是由懒人创造的，由于懒的走路，所以有了汽车；由于懒得上楼，所以有了电梯……正是由于懒人的思想，才推动了社会的发展。很奇怪吗？可事实确实如此，看来懒人往往又是很勤奋的人。其实，这里的”懒人”都是聪明人的代名词，他们的想法能够帮助提高人们的生活效率，他们能够把生活中常见的现象和事物进行总结和归纳，然后产生新的事物，一些常人想都不敢想的事物。所以说，我们不要做真正意义上的懒人，只要你经常善于总结和思考，一样能够创造出更好的东西。
此次总结没有讲解技术方面的东西，而是思想上的总结。
写完程序之余，突然有此一念，因此随笔而写，作为总结以记之。
源文件下载
———————–PowerBoy
2007年12月20日 凌晨
