Table of contents

Created

16 August 2011

Requirements

Prerequisite knowledge

A basic knowledge of the Flash Professional workspace.

User level

Intermediate

Various JavaScript APIs were added and modified in Adobe Flash Professional CS5 that enable you to do work in the following areas:

  • Create and remove motion objects
  • Get and set motion XML
  • Use existing Flash JavaScript (JSFL) commands and properties that previously did not support motion objects.

Because of these changes, it's easier to create commands or tools involving motion objects and motion data, and reuse animation across a document. The following APIs were added for new motion objects, which are part of the Frame object (a couple are part of the Timeline object):

  • convertMotionObjectTo2D() (more)
  • convertMotionObjectTo3D() (more)
  • getMotionObjectXML() (more)
  • hasMotionPath() (more)
  • is3DMotionObject() (more)
  • isMotionObject() (more)
  • selectMotionPath(select) (more)
  • setMotionObjectDuration(duration, stretch) (more)
  • setMotionObjectXML(xml, endAtCurrentLocation) (more)
  • tweenInstanceName (more)

Using APIs with motion objects

Other APIs in the Frame object have been updated to work with motion objects. See the section titled JavaScript API objects in the Flash Professional online help to learn more about how they are used.

The following simple example creates a new document, layer, rectangle, and motion object on that layer. Add the following code to a new JSFL document and then run the script (you'll find this code sample in the source files for this article):

//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(); }

For an example of how to set motion XML, add this code following the code in the above script, and run the script again:

//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); };

You might also see third-party developers beginning to make panels and other tools that use these APIs to make working with motion easier or more powerful for you to work with.

Where to go from here

For more information about creating JSFL files, saving JSFL files, and running scripts, read Working with the JavaScript API in the Flash Professional online help.