Piecemaker : Flash + XML + 3D 图片轮播特效

[ 作者:笑傲江湖 发布于:2012年-3月-10日 19:54 星期六  分类:百 宝 箱 ]

  这个Piecemaker的图片轮播特效还是很酷的,开发者是提供免费开源使用的。不过,因为是老外开发的吗,所以Flash中的翻转说明文字,默认情况下只支持英文,也就是XML文件中Text标签内的文字。Google了一把,需要修改Flash源文件中的AS代码,改了之后就可以了,但是不好定义中文字体和样式,默认就是宋体,Piecemaker调用的CSS样式表文件,也形同虚设,实验了一阵子,起码可以设置字体为微软雅黑了,总算是比宋体好看一点。当然,有雅黑的显示雅黑,没有的还是宋体。   XML里需要动点手脚,如下:
    <Image Source="contents/piecemaker_1.png" Title="非诚勿扰">
      <Text><font color="#FF0000" face="微软雅黑" size="+6">海阔天空</font><font color="#FFFFFF" face="微软雅黑" size="+1"> Windows 7 乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐乌鲁木齐。</font></Text>
      <Hyperlink URL="http://blog.dvxj.com" Target="_blank" />
	</Image>
  Text标签内,原先说明文字标题部分用的是h1标签,说明文字是P标签,单独给h1和P定义样式无效,没法,俺就把h1和P标签都换成font标签了,font标签内定义的字体、字号、颜色都有效,功夫不负有心人啊。如果想给标题部分加粗,那就在加上b标签,说明文字部分同理。XML文件里Settings和Transitions设置部分基本不用动,俺稍微调整了一下介绍、暂停、详细按钮显示的位置,当然这三个按钮原本是英文的,俺弄成中文了。Transitions设置部分增加了一些切换效果,具体有哪些切换效果,参看这里:http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html。本文附件下载里的压缩包,是俺修改好的全套东东,下载以后,换换你需要的图片和说明文字就可以用了。

  Piecemaker 官方网站:http://www.modularweb.net/#/en/piecemaker

piecemaker_with_chinese_support_by_xajh.rar
302.24KB

标签: Flash 特效 Piecemaker 3D 图片轮播

评论91 引用0 浏览8076

信息列表:

楼主

Huey1919
2016-10-25 22:28
求源码学习!谢谢
笑傲江湖
2016-10-26 09:49
@Huey1919:博文附件里就是源码了啊。

楼主

zzr
2015-01-20 23:16
很好,可以发下修改过的源码学习下吗?sdwhzzr@aliyun.com,谢谢!
笑傲江湖
2015-01-20 23:23
@zzr:已发送,注意查收。

楼主

大脸猫爱吃鱼
2015-01-10 10:07
忘了说邮箱了  703363917@qq.com  求flash源文件 感谢楼主了
笑傲江湖
2015-01-10 21:54
@大脸猫爱吃鱼:已发送,注意查收。

楼主

大脸猫爱吃鱼
2015-01-10 10:05
楼主您好 能把flash源文件发给我吗 感激不尽

楼主

zyz9
2014-12-31 23:48
Flash CS2 打不开,提示意外的格式,不知楼主是用哪个版本的?
笑傲江湖
2015-01-02 11:15
@zyz9:好象就是用Flash CS2 打开的,时间太久,记不太清楚了。抱歉,只能你自己试试看了。

楼主

zyz9
2014-12-28 23:42
楼主你好,网上看了半天感觉你这个效果最好,本人想研究一下,可以把flash源文件发给我吗,我的邮箱是:287648688@qq.com,十分感谢!
笑傲江湖
2014-12-29 10:49
@zyz9:邮件已发,注意查收。
zyz9
2014-12-29 22:45
@笑傲江湖:邮件收到,万分感谢!我用FLASH CS5.5编译提示错误是什么原因,用AS2.0和3.0都有错误,本人菜鸟初学,不好意思
笑傲江湖
2014-12-30 11:34
@zyz9:用老版本的Flash程序打开试试看,Flash CS2或者更低的版本。

楼主

annoncecommerce
2014-10-24 23:00
我下载的文件没有 .fla这样的文件啊。请问你有吗
笑傲江湖
2014-10-25 15:38
@annoncecommerce:有FLA文件,请你留下有效邮件地址。

楼主

XJH
2014-08-18 15:30
我的邮箱地址是:2201893049@qq.com
笑傲江湖
2014-08-18 16:03
@XJH:已发送,注意查收。

楼主

XJH
2014-08-18 15:28
楼主,能发我一份吗?

楼主

相忘于江湖
2014-06-26 15:35
楼主,这个是用Javascript做的吗?
笑傲江湖
2014-06-26 15:38
@相忘于江湖:这个是Flash的哦。
相忘于江湖
2014-06-26 15:43
@笑傲江湖:压缩包里不是有一个.js文件吗
笑傲江湖
2014-06-26 17:28
@相忘于江湖:js文件只是加载Flash文件时,用来控制一些动画参数用的。

楼主

谢谢楼主
2014-06-16 16:51
楼主可否把修改的方法说一下,我这面修改之后导出时提示错误啊
笑傲江湖
2014-06-16 17:02
@谢谢楼主:您要修改什么呢?
谢谢楼主
2014-06-17 16:58
@笑傲江湖:修改支持中文的,谢谢楼主1994151586@qq.com
笑傲江湖
2014-06-17 17:11
@谢谢楼主:你是要改XML配置文件呢?还是要修改Flash源文件?
谢谢楼主
2014-06-18 09:18
@笑傲江湖:目前我的不支持中文,怎么修改让他支持中文呢,希望楼主能出个教程
笑傲江湖
2014-06-18 10:21
@谢谢楼主:我提供下载的压缩包就是修改好的,支持中文的。你说的不支持中文是什么地方不支持,能说详细一点吗?
谢谢楼主
2014-06-18 14:26
@笑傲江湖:你好,我也看了你做的效果,很好,不过我是想学习一下如何修改让他支持中文,我自己也找了一个修改的方法,不过修改之后导出swf时提示错入,我想问问楼主是怎么修改的修改的那些地方
笑傲江湖
2014-06-18 16:01
@谢谢楼主:安装Adobe Flash Professional CS5,打开fla文件,右边面板资源库里,找到info,link,play,stop这四个Movieclip,双击,把里面的内容换成你想要的文字。改完后,保存,然后输出swf文件即可。
谢谢楼主
2014-06-19 09:11
@笑傲江湖:非常感谢你耐心的解答,不过还有就是xml中的说明如何支持中文呢,
笑傲江湖
2014-06-19 10:22
@谢谢楼主:博文里不就是在说XML里面如何支持中文吗。
谢谢楼主
2014-06-19 16:46
@笑傲江湖:非常感谢楼主的解答,

楼主

混沌初开
2014-06-14 01:07
请教博主,开场第一这样图片动画怎么去掉
笑傲江湖
2014-06-14 09:58
@混沌初开:下载的压缩包里,contents目录里,有5张图片,替换成你自己的需要展示的图片即可。
混沌初开
2014-06-14 10:26
@笑傲江湖:我说的不是这个。。。我是说打开网站或者栏目见切换时,第一张图片有个进入的效果,怎样能像图片banner一样没有效果播放,打开直接看到图片
笑傲江湖
2014-06-14 10:48
@混沌初开:这个还真没法搞定,这是Flash里面自带的设置好的效果,具体要研究Flash里面的代码了。
混沌初开
2014-06-14 14:46
@笑傲江湖:看了下XML里的代码,试着改了几个时间,也不行。。。还是感谢博主分享

楼主

混度初开
2014-04-07 12:08
楼楼,把flash源文件发给我好吗,970532851@qq.com ,谢谢。。。。
笑傲江湖
2014-04-07 13:24
@混度初开:已发,注意查收。
混沌初开
2014-04-07 13:52
@笑傲江湖:万分感谢,不过想问问,您这个是什么版本的,我用cs3,提示意外的格式。。。不知该用什么版本才好
笑傲江湖
2014-04-07 17:30
@混沌初开:cs5
面向对象
2014-05-10 19:13
@混度初开:楼主你好,可以把flash源文件发给我吗,314248785@qq.com,谢谢
笑傲江湖
2014-05-10 19:44
@面向对象:不是给你发过了吗?这个邮箱又发了一遍。注意查收。

楼主

richievoe
2014-03-03 19:50
我对这个非常很有兴趣,可以发源码我看下吗?richievoe@163.com,谢谢!
笑傲江湖
2014-03-04 17:51
@richievoe:已发,请注意查收邮件。
richievoe
2014-03-04 19:36
@笑傲江湖:十分感谢!!是你修改过的么?我要你修改过的。麻烦你了。
笑傲江湖
2014-03-05 11:37
@richievoe:修改过的也发了,注意查收。
richievoe
2014-03-05 15:15
@笑傲江湖:已收到,楼主,太感谢你了!!!

楼主

nico1969
2014-02-11 16:39
樓主好:

請問可以提供您的Flash源文件給我嗎?
我的信箱是 nicochen1969@gmail.com
非常感謝您!!
笑傲江湖
2014-02-11 20:41
@nico1969:已发,注意查收。
nico1969
2014-02-13 09:51
@笑傲江湖:收到了! 非常感謝您!

楼主

Torres9
2013-11-19 21:15
那三个按钮的名字怎样改??
笑傲江湖
2013-11-19 22:56
@Torres9:需要编辑Flash源文件。
Torres9
2013-11-19 23:31
@笑傲江湖:flash源文件怎样编辑?哪个是flash源文件?
笑傲江湖
2013-11-20 00:07
@Torres9:Flash源文件是fla格式的,需要用Flash编辑软件打开编辑,现在是Adobe 的Flash CS5,源文件压缩包中未包含。
Torres9
2013-11-20 16:33
@笑傲江湖:能把flash源文件传给我吗?
笑傲江湖
2013-11-20 16:42
@Torres9:可以,留下邮箱地址。
Torres9
2013-11-20 17:04
@笑傲江湖:dlch1569@gmail.com
十分感谢你
笑傲江湖
2013-11-20 17:30
@Torres9:邮件已发,注意查收。
Torres9
2013-11-20 18:22
@笑傲江湖:收到了。若我想改按钮上的字 该怎样改 可以教一教我吗
笑傲江湖
2013-11-20 18:58
@Torres9:安装Adobe Flash Professional CS5,打开fla文件,右边面板资源库里,找到info,link,play,stop这四个Movieclip,双击,把里面的内容换成你想要的文字。改完后,保存,然后输出swf文件即可。
Torres9
2013-11-20 19:21
@笑傲江湖:还是不改了 這对我来说太困难了
Men'S
2013-11-20 20:35
@笑傲江湖:能替我把按钮的文字转成繁体中文吗?万分感谢
笑傲江湖
2013-11-21 10:47
@Men'S:已经把改好的SWF文件发邮件了,注意查收。文件未测试,你试试看可否正常工作。
Torres9
2013-11-21 20:24
@笑傲江湖:楼主你真的太好了 万分感谢

楼主

oleou
2012-12-08 12:05
图片下面的几个按钮 怎么取消呢 ?
笑傲江湖
2012-12-08 16:40
@oleou:为何要取消啊?
oleou
2012-12-10 10:47
@笑傲江湖:额..  那就不取消了。。。还有个问题就是 当我的图片切换的时候 ,因为空间速度比较忙 有个黑色的过度背景。 这个能不延迟加载  ..?  谢谢  !
笑傲江湖
2012-12-10 11:24
@oleou:不明白你说的那个黑色过度背景色是什么意思。如果按照俺这里压缩包里的文件使用,Flash是透明的,有背景色的话,就是你网页的背景色吧。
oleou
2012-12-10 15:07
@笑傲江湖:就是能不能控制 让图片多停留下  再切换下一张。
笑傲江湖
2012-12-10 17:14
@oleou:可以啊,XML文件打开,查找Transition Pieces="9" Time="1.2",这个Time后面的数字就是需要停留的时间,单位是秒。
oleou
2012-12-10 17:24
@笑傲江湖:这个时间是切换的时候变慢了。我是想着 能不能让图片完整的停个几秒钟,这几秒钟过后在切换。切换的速度还是快一点比较好
笑傲江湖
2012-12-10 17:56
@oleou:搞错了,不好意思,XML文件里搜索Autoplay="2",我改成2秒了,你自己修改一下即可。刚才那个切换时间也看着自己修改回去吧。
oleou
2012-12-11 11:22
@笑傲江湖:呵呵 十分感谢 。 还有个问题 就是 切换能不能 横着切换
笑傲江湖
2012-12-11 11:34
@oleou:这个好像不行,切换效果是做在Flash里面的,XML文件没法设置的。

楼主

lee
2012-07-17 10:44
牛B,感谢楼主!

楼主

chuchur
2012-07-16 15:07
为什么在IE里不行。IE9一下都不行。第一次运行没问题。刷型下就跑边了。 。
笑傲江湖
2012-07-16 15:13
@chuchur:IE8肯定没问题,正常,刚刚测试。不知道你说的跑边了是什么意思。

楼主

xiaozhu
2012-03-28 15:59
楼主,我看你的piecemaker的效果做的很不错,感谢你的无私分享,冒昧的向你请教一下怎么可以修改那三个按钮的位置啊?我把那个flash调宽之后,那三个按钮没有跟着跑...还望指点一下啊。我的QQ530756450.。。
笑傲江湖
2012-03-28 17:34
@xiaozhu:宽度调整了之后,要想按钮也调整位置,需要在xml文件里从新给定新的参数的。piecemaker.xml文件打开,查找ControlsX和ControlsY,修改到你想要的位置即可。
xiaozhu
2012-04-22 15:21
@笑傲江湖:这个piecemaker调用怎么这么困难啊,我如何才能让index页面和css文件,xml文件不在同级目录下调用啊,,我改动调用路径之后好像一直出现问题
笑傲江湖
2012-04-22 19:29
@xiaozhu:不在同级目录下没关系吧,使用绝对路径试试看。不知道你说的出现问题事什么问题。
xiaozhu
2012-04-23 10:50
@笑傲江湖:我想把它用在服务器上,但是好像不支持绝对路径,不知道问题出在哪儿?我看你的是用的iframe,但是iframe对网站是有一定程度的影响的,而且我准备是用在首页,影响就更加明显了,所以我准备用其他的方式调用,但是结果总是不能够满意啊。。调不出来数据,不知道为啥?
笑傲江湖
2012-04-23 11:12
@xiaozhu:我用iframe那是为了在博客文章里引用展示而已,没有别的意思。等我测试一下看绝对路径是否有问题。
笑傲江湖
2012-04-23 11:23
@xiaozhu:http://blog.dvxj.com/demo.html,看这个地址,绝对路径没有问题。html文件里改成绝对路径,XML文件里面的图片文件地址也用绝对路径即可。你可以看看这个demo.html的源文件和XML文件的源文件。
xiaozhu
2012-09-17 21:37
@笑傲江湖:博主,我又来了,还有个问题求教于你,这个flash怎么给图片加上链接你知道么?就是点击图片的时候自动跳转而不用点击详细的时候才跳转?有办法么?
笑傲江湖
2012-09-17 21:46
@xiaozhu:这个还真没有研究过,得打开Flash的源文件,如果是ActionScript的代码的话,俺还看不懂。
xiaozhu
2012-09-17 22:01
@笑傲江湖:哦,那个xml不是你自己写的么?那个里边不可以加上链接么?
笑傲江湖
2012-09-17 22:04
@xiaozhu:不是我写的啊,这个东东也是人家发布出来的,我仅仅是测试了可以在XML里设置中文字体,然后把Flash上的按钮文字改成中文的。XML里设置不了的,必须要先动Flash源文件,然后才能加链接。
xiaozhu
2012-09-17 22:09
@笑傲江湖:哦,可能我异象天开了,呵呵,你早点休息咯
说点什么:

正文内容:

 




图片博文