您好,欢迎来到我要学flash网!登录注册

图像列表(色彩变换+双击+滚动+投票展示)

来源:我要学flash网 | 作者:admin | 发表时间:2011-06-30 | 点击:  次

一、需求决定功能

下面是最终演示效果:

这里我之所以先把演示效果放到第一位,目的是为了让大家看过之后先有个印象,这样当我后面叙述到某些东西的时候,大家就不会那么陌生,不知所云了。

其实设计这个效果的初衷,是想实现一种类似Ajax的效果,像大家经常在视频网站中见到的那样,当你看完一部片子之后,可以实时对其进行评分、留言等等,所见即所得。这些flash当然也做得到,我们完全可以通flash+js来实现。但是我没有把它和js交互的部分放上来,这里我只讲解flash展现的效果部分。可是如果单纯把信息罗列出来,就和普通页面没什么分别了,没有把flash的特点发挥出来,所以我想要在效果上显出她的与众不同。这个程序里面所设计到的功能在题目当中已经给出,但其实还有很多,我们完全可以把这个小程序的功能做的很强大,不过这要看一个人的思维方式和创意了,而我就作为抛砖引玉吧。

这里面的元素可以完全用AS来写,我这里为了方便,所以偷了个小懒,有的元件是用图形画的。

二、设计思路

这个程序虽然不大,但是涉及到的知识点还是挺多的,那么在设计前期我们应该做些什么呢?Lee Brimelow说过一句话,你是第一个能够“看到”这个作品的人,因为在你设计之前,这个实体的最终形态已经呈现在你的脑海中了。从这一点上我们可以看出,编程其实是次要的,关键是前期的策划与设计,如果失误的话,会影响到整个程序进度,你可能会频繁的去修改甚至是重写代码。另一方面,我们的程序要能给用户带来良好的体验,不能只单单自己感觉好用就行,毕竟你是设计者。

对于此程序来说,我希望能够尽自己所能来给用户提供便利,所以首先一点,自动滚屏和手动滚屏是必须的,因为这是两种不同的需求。其次是投票窗口的设计,最初我想到的是像传统的制作方法一样,点击查看之后弹出一个窗口来显示投票结果,你可以关闭,也可以选择查看其他项目的投票结果来更新这个窗口。但是,我想到了一点,这样做缺乏对比性,因为一次只能显示一个窗口,能不能改善一下这种状况呢,其实也不难办到,我们可以把显示结果做成MINI型,就是很小巧的那种,让他们在不同的选项上可以自由弹出,互不干扰,这样用户可以自由选择查看投票结果。这样做,其实就是给用户提供了方便,我们要在细节上多下一些功夫。

不过这个程序目前有一点不太完善的地方,如果只有20多个图像展示区域,效果是可以接受的,但是如果太多了,稍微滑动滚动条,一下就会过去好几张图片,这样带来的用户体验就不是很好,他们可能会因此频繁的调整而失去耐心。解决的方法不是没有,我首先想到了两种。第一种,就是加入分页,我们可以设定一次最多显示20张,然后通过点击分页来进行切换,这样用户是可以接受的;第二种,就是加入快捷键,可以让用户通过键盘切换到不同的显示区,也可以通过方向键来调整滚动的距离。其实解决方案有很多种,我想大家也有自己不同的解决途径,这部分扩展程序我没有写,大家最好能够自由发挥。但是不管怎样,我们都要始终把握住一点
———— 尽最大可能给用户提供方便,以用户体验为中心!

三、双击剖析

对于一般的老手来说,“双击”的实现已经不再陌生,我在这里简单的提一下思路,给更多的学习者以参考,代码如下:

 

  1. //双击判断事件;  
  2. if (!click) {  
  3.     timer = getTimer()/1000;  
  4.     click = true;  
  5. else {  
  6.     timer2 = getTimer()/1000;  
  7.     _root.test2 = timer2-timer;  
  8.     if (timer2-timer<0.25) {  
  9.         if (the_scroll == true) {  
  10.             delete scroll.bar.onEnterFrame;  
  11.             the_scroll = false;  
  12.             scroll.news.gotoAndStop(2);  
  13.         } else {  
  14.             the_scroll = true;  
  15.             scroll.news.gotoAndStop(1);  
  16.             Scroll();  
  17.         }  
  18.     } else {  
  19.         timer = getTimer()/1000;  
  20.     }  

双击的实现主要就是判断连续两次单击时间的间隔,在程序刚开始执行的时候,当鼠标第一次单击时,会进入第一个分支语句,目的就是给timer赋初值,这样,后面再次按下鼠标的时候,就可以用第二次的时间timer2减去timer来计算二者时间间隔,当小于我们设定的值时,则双击成立,再判断滚动是否暂停,否则将第二次单击的值作为timer保存起来,以便于侦听下一次的鼠标操作。

四、色彩变换与滚动的实现

其实这个效果非常的简单,你只需要记住两点就能搞定:

1、通过Transform类来收集颜色转换的相关数据;
2、用ColorTransform类对颜色进行处理。

这样当鼠标移入或者移出图像的时候,才能看到色彩转化的效果。其实当我讲到这里的时候,你已经完全可以编写出此效果,因为它的原理非常简单。不过毕竟教程是以“教”为主,这里我给出了具体实现的方法,不过我仍然希望在你看过之后,能够仔细思考一下这段代码,你会很惊奇的发现,原来很多类似的效果都是触类旁通的。
这里我只以鼠标移入为例,因为其他地方都是一样的,多说无益。

 

  1. //把亮度偏移加载到当前对象上  
  2. var trans:Transform = new Transform(this);  
  3. //偏移步长为15  
  4. var step:Number = 15;  
  5. //偏移量  
  6. var offset:Number = 0;  
  7. var GT:Number = null;  
  8. this.onEnterFrame = function() {  
  9.     offset += step;  
  10.     if (offset>=150||offset<0) {  
  11.         step *= -1;  
  12.     }  
  13.     picColor(trans,offset);  
  14. };  
  15.    
  16. // 亮度偏移  
  17. function picColor(t:Transform, v:Number) {  
  18.     var bt:ColorTransform = new ColorTransform(1, 1, 1, 1, v, v, v, v);  
  19.     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. if (votenumtotal_i<=view.votenumtotal){  
  3.     this._parent.board.C_votenumtotal.text=votenumtotal_i;  
  4.     if (view.votenumtotal-votenumtotal_i>10000){  
  5.         thearea=4;  
  6.     }else if (view.votenumtotal-votenumtotal_i>1000){  
  7.         thearea=3;  
  8.     }else if (view.votenumtotal-votenumtotal_i>100){  
  9.         thearea=2;  
  10.     }else if (view.votenumtotal-votenumtotal_i>10){  
  11.         thearea=1;  
  12.     }else if (view.votenumtotal-votenumtotal_i>0){  
  13.         thearea=0;  
  14.     }  
  15.     switch (thearea){  
  16.         case 0:votenumtotal_i+=1;break;  
  17.         case 1:votenumtotal_i+=10;break;  
  18.         case 2:votenumtotal_i+=100;break;  
  19.         case 3:votenumtotal_i+=1000;break;  
  20.         case 4:votenumtotal_i+=10000;break;  
  21.     }  

当差值大于10000的时候votenumtotal_i每次加10000,大于1000的时候votenumtotal_i每次加1000以此类推,这样就可以实现从高位到地位数字不断变化的效果。唯一的缺点就是,数字变化的效果瞬间显示完毕,而不能随着进度条的增加而增加。当然,如果谁有更好的解决方法,欢迎提供思路。

六、总结

在编程的整个过程中,我个人的感觉是:最枯燥的事情就是写代码,最有趣的事情仍然是写代码。这句话看似很矛盾,其实则不然。俗话说的好,万事开头难,但是一个好的开始就是成功的一半,所以我们多花一些时间在前期的策划和准备上是很值得的。当你把一些事情都考虑好了之后,剩下的事情就水到渠成了,写起代码思路清晰,而且效率也高,等待着你的就是品尝胜利的果实。

人往往是很守旧的,一但某种思想形成一种习惯,就很难再去改变、再去接受新的东西,这会在某种程度上住一个人的潜力。改变一个人的习惯真的很难吗?根据美国科学家对人类的调查结果表明,两个星期完全可以给人重塑一个新的习惯。这能说明什么呢?其实主要原因还是来自于人类的本性——惰性。

一个有惰性的人我们通常叫做他懒人,但是有一句很经典的话:世界是由懒人创造的,由于懒的走路,所以有了汽车;由于懒得上楼,所以有了电梯……正是由于懒人的思想,才推动了社会的发展。很奇怪吗?可事实确实如此,看来懒人往往又是很勤奋的人。其实,这里的”懒人”都是聪明人的代名词,他们的想法能够帮助提高人们的生活效率,他们能够把生活中常见的现象和事物进行总结和归纳,然后产生新的事物,一些常人想都不敢想的事物。所以说,我们不要做真正意义上的懒人,只要你经常善于总结和思考,一样能够创造出更好的东西。
此次总结没有讲解技术方面的东西,而是思想上的总结。

写完程序之余,突然有此一念,因此随笔而写,作为总结以记之。

源文件下载

                               ———————–PowerBoy
                                     2007年12月20日 凌晨

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    本文引用地址:
      最新评论: 共有位网友发表了评论
      发表评论:
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名: 密码: 验证码: