Flash动画学习指南十三:使用JSFL

转自:http://bbs.9ria.com/thread-72749-1-1.html


要求
知识储备                  软件需求                                             范例
flash的基础知识       Flash Professional CS5 (下载测试版)       motion.jsfl 

用户等级
初级


多样的JavaScript APIs已经加入进Flash Professional CS5了,可以让你应用到以下的工作范畴:
    * 创建和移除时间轴动画对象
    * 获取和设置时间轴动画XML
    * 使用那些之前版本并不支持的针对时间轴动画对象的JSFL命令和属性。
正因为有了这些改变,创建操作动画对象、动画数据或是不同文档间的动画重用等的命令或工具变得更容易。针对新的动画对象的新增API列表如下,这些对象是Frame对象的一部分(有一些是Timeline对象的一部分):
    * convertMotionObjectTo2D()  更多
    * convertMotionObjectTo3D()  更多
    * createMotionObject()  更多
    * getMotionObjectXML()  更多
    * hasMotionPath()  更多
    * is3DMotionObject()  更多
    * isMotionObject()  更多
    * removeMotionObject()  更多
    * selectMotionPath(select)  更多
    * setMotionObjectDuration(duration, stretch)  更多
    * setMotionObjectXML(xml, endAtCurrentLocation)  更多
    * tweenInstanceName()  更多

使用动画对象的API
下面就是一个简单的范例,创建了一个新的文档,层,矩形和该层上的动画对象。在新的JSFL文档里添加下面的代码并运行脚本(你也可以在针对这篇文章的源文件里得到这段代码):
  1. //Create a new document, FPS set to 24. fl.createDocument("timeline"); fl.getDocumentDOM().frameRate = 24; var doc = fl.getDocumentDOM(); var my_tl = doc.getTimeline(); //used for creating a rectangle: left, right, top, bottom. var l = 0; var r = 10; var t = 0 var b = 10; //Function to draw the rectangle this.drawRect = function() { document.addNewRectangle({left:l, top:t, right:r, bottom:b}, 0); document.setSelectionRect({left:l, top:t, right:r, bottom:b}); //offset next square by following for multiple examples l+=30; r+=30; }; //Get the current frame this.getCurrentFrame = function(){ var layer = my_tl.layers[my_tl.currentLayer]; var frame = layer.frames[my_tl.currentFrame]; return frame; } // Add layer my_tl.addNewLayer("Create a tween"); //Create and select the rectangle drawRect(); //Get the frame for this layer var theFrame = getCurrentFrame(); //Create a motion object if(theFrame && !theFrame.isMotionObject()){ my_tl.createMotionObject(); }
复制代码
如果是要了解如何设置动画XML数据,可以在上面的代码后添加这段代码,然后再次运行脚本:
  1. //Add another layer my_tl.addNewLayer("Set Motion XML"); //Create and select the rectangle drawRect(); //Get frame for this layer var theFrame = getCurrentFrame(); //Create a motion object from selection if(theFrame && !theFrame.isMotionObject()){ my_tl.createMotionObject(); } //Set motionXML to "bounce-smoosh" preset motion XML var motionXML = ('<AnimationCore TimeScale="24000" Version="1" duration="75000"><TimeMap strength="0" type="Quadratic"/> <TimeMap strength="4" type="BounceIn"/><metadata><names> <name langID="en_US" value="bounce-smoosh"/></names> <Settings orientToPath="0" xformPtXOffsetPct="0.5" xformPtYOffsetPct="0.995652" xformPtZOffsetPixels="0"/> </metadata><PropertyContainer id="headContainer"><PropertyContainer id="Basic_Motion"><Property enabled="1" id="Motion_X" ignoreTimeMap="0" readonly="0" visible="1"><Keyframe anchor="0,0" next="0,0" previous="0,0" roving="0" timevalue="0"/><Keyframe anchor="0,0" next="0,0" previous="0,0" roving="0" timevalue="74000"/> </Property><Property TimeMapIndex="1" enabled="1" id="Motion_Y" ignoreTimeMap="0" readonly="0" visible="1"><Keyframe anchor="0,0" next="0,0" previous="0,0" roving="0" timevalue="0"/><Keyframe anchor="0,273" next="0,273" previous="0,273" roving="0" timevalue="74000"/></Property><Property enabled="1" id="Rotation_Z" ignoreTimeMap="0" readonly="0" visible="1"><Keyframe anchor="0,0" next="0,0" previous="0,0" roving="0" timevalue="0"/></Property> </PropertyContainer><PropertyContainer id="Transformation"> <Property enabled="1" id="Skew_X" ignoreTimeMap="0" readonly="0" visible="1"><Keyframe anchor="0,0" next="0,0" previous="0,0" roving="0" timevalue="0"/></Property><Property enabled="1" id="Skew_Y" ignoreTimeMap="0" readonly="0" visible="1"><Keyframe anchor="0,0" next="0,0" previous="0,0" roving="0" timevalue="0"/></Property> <Property enabled="1" id="Scale_X" ignoreTimeMap="0" readonly="0" visible="1"><Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="0"/><Keyframe anchor="0,100.21" next="0,100.21" previous="0,100.21" roving="0" timevalue="35000"/><Keyframe anchor="0,191.254" next="2000,191.254" previous="-2000,191.254" roving="0" timevalue="37000"/><Keyframe anchor="0,100.21" next="0,100.21" previous="0,100.21" roving="0" timevalue="39000"/><Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="54000"/><Keyframe anchor="0,171.056" next="2000,171.056" previous="-2000,171.056" roving="0" timevalue="56000"/><Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="58000"/><Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="66000"/><Keyframe anchor="0,150" next="1000,149.97" previous="-1000,149.735" roving="0" timevalue="67000"/> <Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="68000"/></Property><Property enabled="1" id="Scale_Y" ignoreTimeMap="0" readonly="0" visible="1"><Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="0"/><Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="35000"/> <Keyframe anchor="0,60" next="2000,60" previous="-2000,60" roving="0" timevalue="37000"/><Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="39000"/><Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="54000"/><Keyframe anchor="0,75.2218" next="2000,75.2727" previous="-2000,75.1418" roving="0" timevalue="56000"/> <Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="58000"/><Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="66000"/><Keyframe anchor="0,80" next="1000,80" previous="-1000,80" roving="0" timevalue="67000"/><Keyframe anchor="0,100" next="0,100" previous="0,100" roving="0" timevalue="68000"/></Property> </PropertyContainer><PropertyContainer id="Colors"/><PropertyContainer id="Filters"/></PropertyContainer></AnimationCore>'); //set motion XML, set applyTweenToCurrentPosition to false if(theFrame.isMotionObject()){ theFrame.setMotionObjectXML(motionXML.toString(), false); };
复制代码
你可能已经发现第三方开发者已经开始利用这些API,来制作面板和其他工具,来使得创建动画更为容易并成为你工作中的有力臂助。

从这里起步

阅读其他有关flash里的动画学习手册部分。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值