笨笨翻图v1.0版|完全不用编程的flash图片翻转动画

笨笨翻图v1.0版===完全不用编程的flash图片翻转动画,欢迎向本人报告bug及改进,

以下引用了示例页http://contactu.cn/case/bbft/demo.htm

运行环境:

必须在支持ActionScript3的flash播放器方能运行。

主要功能:

1、菜鸟美工们制作这种几张图片的轮转动画时,再也不用进庞大而麻烦的flash了,直接使用我这套小工具即可。你只要使用记事本,去编辑我指定的xml文件即可!在后续版本中,我也会嵌入更多的内置效果,争取用起来就象swish那么效果丰富而简单!

2、支持jpg/gif/png/swf等主流图片及动画的外部载入。

3、特色:支持xml格式的flash motion文件,你可以用文本的方式,直接指定对象的运动模式,详见后文的介绍。

4、特色:支持外部swf文件做为mask遮罩,并且支持半透明遮罩,下面的第一个范例,就是一个“双向拉动并由全透明过度到不透明”的遮罩动画,菜鸟们只要会做最基本的动画,就可以把这个动画做为遮罩来使用。

5、一些常用参数的自定义。

示例:

参数详解:

注:以下代码为data.xml的内容,请务必将此文件放在与主文件相同的路径下。如想使用data.xml不同的文件名做为主文件名称,也可以使用<param name="FlashVars" value="defaultData=data2.xml" />进行传参调用。具体做法可参考我上面的demo.htm的做法。

XML/HTML代码
  1. <?xml version="1.0"?>  
  2. <data>  
  3.     <!--设置部分-------------------------------------->  
  4.     <settings>  
  5.         <the_frameRate>30</the_frameRate><!--帧频-->  
  6.         <image_url_base></image_url_base><!--共同的文件路径,也可以到images序列中去定义,如果这里写了,后面就不要重复写-->  
  7.         <first_image>0</first_image><!--起始播放序列号,序号0为第1张-->  
  8.         <is_loop>999</is_loop><!--只有当等于0时,才不循环播放-->  
  9.         <setting_motion_mode>2</setting_motion_mode><!--重要参数:动画切换模式:0为内置的一个默认效果,1为调用motion xml文件的自定义切换,2为调用外部swf的遮罩切换-->  
  10.         <setting_frame_to_next>80</setting_frame_to_next><!-- 在第几帧切换到下一张图........多句嘴,这个数字如果大于motion_xml的末帧数,则以其末帧数为准-->  
  11.            
  12.         <motion_xml url="motion_xml.xml"></motion_xml><!--切变XML文件名-->  
  13.         <motion_mask url="mask.swf"></motion_mask><!--切变遮罩文件名-->  
  14.            
  15.         <txt font_size="12" margin_to_image="5" txt_color="0x000000">false</txt><!--文字功能,此功能暂未开发-->  
  16.         <num_area x="200" y="500">false</num_area><!-- 数字按钮功能,暂未开发完成-->  
  17.            
  18.     </settings>  
  19.        
  20.     <!--图片数据---------------------------------------->  
  21.     <images>  
  22.     <!--对象可以使用jpg/gif/png等图片格式,也可以使用.swf文件!即实现几个swf动画的切变==如果此处定义的宽与高与实际不符,会按照较小的那个值,进行等比缩小,也就是说对象的“显示比例”是不能改变的====xx与yy即单张图片出现在主舞台的x与y坐标,其它参数地球银都看得明白==-->  
  23.         <the_item width="600" height="375" xx="0" yy="0" url="images/c1.jpg" txt=""></the_item>  
  24.         <the_item width="600" height=<綆경ᓩᅨ焔⌵㩄鸃⨽䃑违䷧錉ﻔ익ᯭ駕撴操ᣬ+ꔏ彥띨쒓ᗩ짙ೣ垼扔ribute-value">"375" xx="0" yy="0" url="images/c2.jpg" txt=""></the_item>  
  25.         <the_item width="600" height="375" xx="0" yy="0" url="images/c3.jpg" txt=""></the_item>  
  26.         <the_item width="600" height="375" xx="0" yy="0" url="images/c4.jpg" txt=""></the_item>  
  27.     </images>  
  28. </data>  

如何获得motion xml文件:

使用Flash cs3以上,随意建立一段动画,然后在动画时间轴上点击右键,选择“将运动复制为 ActionScript 3.0”即可,具体方法很自行到网上搜索。其实我本人更倾向于直接修改xml文件(不用进FLASH),比如下面就是我在demo中用到的motion_xml.xml,里面一共有4个Keyframe结点,对应4个关键帧,至于是什么意思,猜也猜得出来,这里就不详解了。(前面的source结点可忽略不看)。

XML/HTML代码
  1. <Motion duration="100" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">  
  2.     <source>  
  3.         <Source frameRate="30" x="239.45" y="116.5" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="元件 1">  
  4.             <dimensions>  
  5.                 <geom:Rectangle left="0" top="0" width="478.95" height="233"/>  
  6.             </dimensions>  
  7.             <transformationPoint>  
  8.                 <geom:Point x="0.49994780248460174" y="0.5"/>  
  9.             </transformationPoint>  
  10.         </Source>  
  11.     </source>  
  12.   
  13.     <Keyframe index="0" tweenSnap="true" y="100">  
  14.         <color>  
  15.             <Color alphaMultiplier="0.14"/>  
  16.             <!--<Color tintColor="0xFFFFFF" tintMultiplier="1"/>-->  
  17.         </color>  
  18.         <tweens>  
  19.             <SimpleEase ease="0"/>  
  20.         </tweens>  
  21.     </Keyframe>  
  22.   
  23.     <Keyframe index="20" tweenSnap="true" y="-20">  
  24.         <color>  
  25.             <Color/>  
  26.         </color>  
  27.         <tweens>  
  28.             <SimpleEase ease="0"/>  
  29.         </tweens>  
  30.     </Keyframe>  
  31.        
  32.     <Keyframe index="40" tweenSnap="true" y="0">  
  33.         <color>  
  34.             <Color/>  
  35.         </color>  
  36.         <tweens>  
  37.             <SimpleEase ease="0"/>  
  38.         </tweens>  
  39.     </Keyframe>  
  40.        
  41.     <Keyframe index="60" x="0"/>  
  42.        
  43. </Motion>  

总结与源代码:

我用了一个月左右的时间,在工作之余断断续续的完成了这个小项目。几乎用到了教程中所有的常用知识,希望有更多的朋友来进行完善。

源码打包在这里,有需要的请自行下载。

主文件fla没有任何的代码和舞台对象,直接调用文档类bbft_main。但主文件库中有少数几个对象,对理解全文结构影响不大,如果需要,可使用flash cs5打开。



[本日志由 admin 于 2011-06-21 10:21 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 笨笨翻图 flash图片轮转 flash小工具
相关日志:
评论: 0 | 引用: 0 | 查看次数: 5498
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭