Animation Learning Guide for Flash: Using JavaScript APIs
Created
15 August 2011
Requirements
Prerequisite knowledge
A basic knowledge of the Flash Professional workspace.
User level
Intermediate
Required products
- Flash Professional (Download trial)
Sample files
- motion.jsfl (6 KB)
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.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
More Like This
- Animation Learning Guide for Flash: Preset and custom eases
- Animation Learning Guide for Flash: Motion Editor
- Animation Learning Guide for Flash: Motion presets
- Animation Learning Guide for Flash: Shape tweens
- Animation Learning Guide for Flash: Using ActionScript 3
- Animation Learning Guide for Flash: Motion tween manipulations
- Animation Learning Guide for Flash: Frame rates
- Animation Learning Guide for Flash: Overview
- Animation Learning Guide for Flash: Frame-by-frame animation
- Animation Learning Guide for Flash: Timelines and keyframes
