[转] [Flash/Flex] (Adobe荐文)Flash动画学习指导：使用JSFL

资讯类型: 翻译

来源页面: http://www.adobe.com/devnet/flash/learning_guide/animation/part13.html

资讯原标题: Animation learning guide for Flash: Using JSFL

资讯原作者: Jen deHaan

我的评论: 
对这篇文你有啥看法，跟贴说说吧！欢迎口水和板砖，哈哈。欢迎大家和我们一同分享更多资讯。

要求
知识储备                  软件需求                                             范例
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里的动画学习手册部分。

 

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