我们的作品 订阅所有【我们的作品】的日志

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

作者:admin 日期:2010-12-20
字体大小: 小 中 大

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

以下引用了示例页http://blog.258754.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 | 查看次数: 8693
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 支持Gravatar头像.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭