others

CU3ER:超酷的幻灯片效果

昨天有一位朋友在谈到了图片幻灯片效果的时候说ediyang.com那个幻灯片太“平庸”了,的确我从来都没考虑过这个问题。呵呵,碰巧我今天看到一个相当不错的Flash幻灯片效果CU3ER,在这里介绍给大家:

1.真的很酷?

首先我建议大家看看官网这个惊艳的DEMO:

http://www.progressivered.com/cu3er/

可以看到一个图片幻灯片该有的功能它CU3ER它都有了,而且更漂亮更酷。

cu3er 1 CU3ER:超酷的幻灯片效果

2.我也要试试

CU3ER的使用十分简单,保证3分钟内你就可以学会了。

下载

http://www.progressivered.com/cu3er/download/猛击那个红色的大按钮,下载源文件。

配置

配置上最核心的就是config.xml这个文件了,接下来介绍一下大致标签的含义:

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>

    <slides>
        <slide>
            <url>images/slide_1.jpg</url>
        </slide>

        <slide>
            <url>images/slide_2.jpg</url>
        </slide>

        <slide>
            <url>images/slide_3.jpg</url>
        </slide>
    </slides>

</cu3er>

很简明的,每一张图片都是包含在<slide>标签之中的,你可以把图片地址修改为你要的图片。

修改好图片之后,就是“前进,后退“按钮以及自动播放的问题了,这些配置全部包含在<settings>标签以内的,我们简单的看看先:

<settings>

    	<prev_button>
			<defaults round_corners="5,5,5,5"/>
			<tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
			<tweenOut tint="0x000000" />
		</prev_button>

    	<prev_symbol>
			<tweenOver tint="0x000000" />
		</prev_symbol>

    	<next_button>
			<defaults round_corners="5,5,5,5"/>
			<tweenOver tint="0xFFFFFF"  scaleX="1.1" scaleY="1.1"/>
			<tweenOut tint="0x000000" />
		</next_button>

    	<next_symbol>
			<tweenOver tint="0x000000" />
		</next_symbol>	

	</settings>

<prev_button>代表后退按钮, <prev_symbol>代表后退按钮的“箭头”。前进按钮与箭头同上。 <tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>是指当鼠标移上(mouseover)前进后退按钮时,按钮样式变大1.1倍,并变为ffffff这个颜色。 假如你想要幻灯片自动播放,需要在里加入以下代码:

<auto_play>
	<defaults symbol="circular" time="3" />
	<tweenIn x="500" y="50" width="35" height="35" tint="0xFFFFFF" />
</auto_play>

即可。

详细的说明文档请参见官网document

No related posts.

43 Comments:

  1. yichi says:

    酷!用这个做个portfolio玩玩

  2. eddie says:

    呵呵 我都有这个打算了

  3. Jutoy says:

    最近正好在寻找这类的代码~哈~

  4. keke says:

    效果相当惊艳!

  5. AlvinJ says:

    很炫的效果!不过不知道怎么在里面添加链接

  6. 看完了,不错

  7. feipa says:

    过来支持一下

  8. 99sousuo says:

    好文章

  9. eric says:

    怎么没有图片链接。。。一点不好。

  10. bolo says:

    哈哈,这个太帅了

  11. popolk says:

    是的,很酷,但是把开头的那个logo去掉呢?

  12. popolk says:

    怎么怎么把开头的logo去掉或者换掉呢?

  13. owlsir says:

    开头有个LOGO.

    是人家CU3ER的LOGO。那个是要在SWF文件里修改。但是SWF反弹编译的时候转出来函数啥的都丢了。
    不知道有啥办法。或者高手会修改的。

    • eddie says:

      的确。
      估计是作者的保护措施。
      不过一闪而过。不是太显眼。

  14. 想知道 says:

    已阅,不错!

  15. 耐克板鞋 says:

    比我那里热闹啊

  16. 留个脚印

  17. 8bu says:

    感觉速度快了好多啊···O(∩_∩)O哈哈~换IDC了》?

  18. xxoo says:

    很喜欢博主的皮肤啊··好漂亮哦O(∩_∩)O哈哈~

  19. gaoav says:

    已阅–不错

  20. 念嘬 says:

    写的不错。
    也欢迎访问我的图片Blog: http://www.nianzuo.com

  21. stan says:

    看到头公公。

  22. Sb says:

    莫名其妙就来到了这里,留个言O(∩_∩)O哈哈~

  23. [...] 这是在Eddie Yang的博客上看到的。因为从官方下载的源文件没有自动播放、幻灯图片链接等功能,所以我在这里就说一些常用的功能。 [...]

  24. besta says:

    有高手帮看看怎么给图片加上链接…

  25. solo says:

    弱弱的问一句 这个可以用在wordpress里做插件吗?

    • eddie says:

      可以用在wordpress的,你只要将代码加入主题的相关文件就可以了。

  26. solo says:

    能讲的详细些吗?试了很久还是不行。。

  27. 二维码 says:

    我的二维码博客开通了,哈哈,高兴之余来逛逛博主的博客,学习点建设博客的技能。哈哈。

  28. kissss says:

    确实很不错啊~

  29. superboer says:

    效果不错,很多人都很喜欢,不过没有fla文件,反编译的代码总是出错,就算应用谁愿留有带有其他站logo的效果呢?

  30. 宁怡 says:

    请问博主,文章中写代码的方框是怎么实现的啊?还有哪个图片的方框是怎么实现的啊?

    • eddie says:

      hi,你说的是文章中的边框样式吗?
      在css里写 img{border:2px dotted #c8c8c8;}这个就是图片的样式
      代码那个是border:1px solid #c8c8c8;

  31. D.PENG says:

    大哥好像下不了啊,要收费的。

  32. 新手 says:

    效果确实是不错的哦,我很喜欢。。。http://bbs.chinabyte.com/thread-440888-1-1.html 我缺一个ideal。。。。。

  33. edieyang says:

    这个flash在ie8会放大10%,官网不搞了

Leave a Reply

Back To top