Your prescription for increased productivity and profitability
Up to this point the only interactivity that has been introduced as part of this blog series is on page click. This, as you remember, will be set as part of the properties for a timing list of the spread. Interestingly, a spread can have more than one timing list. This is where it really gets interesting. Your script can create a timing list that triggers when the page loads, and a second timing list that triggers when the page is clicked.
Individual page items can also have a timing list that sets a trigger event to start an animation when the object is clicked, released, rolled over, rolled off or as part of a multistate object. The subject of timing lists in page items will be left to a later discussion.
Follow along to see how this type of behavior can be controlled with a script.
Structure for document layers
Our sample page
To animate the page item, the script will use a new handler that animates the movement of an object based on time frames. The animation will be a back and forth movement to be repeated for the number of times designated by the variable numTimes. When the page loads, the object will be hidden. It will become visible and animate when the page is clicked. The values for the handler’s arguments are initialized at the top of the script. Notice how the list of lists of lists for the motion path property (mPath variable) is set up. Each point within the motion path consists of a list of lists. The first item of each path point is the time frame measured in 1/24ths of a second, the second item is a list of lists describing the anchor, left direction, and right direction for the path point.
Note: Because time frames start the count at zero (0), calculate time frames by multiplying by 24 and subtracting one (1).
(*Values for doMotionPath handler arguments*) set mPath to {{0, {{0.0, 0.0}, {0.0, 0.0}, {0.0, 0.0}}}, {23, {{100.0, 0.0}, {100.0, 0.0}, {100.0, 0.0}}}, {47, {{-100.0, 0.0}, {-100.0, 0.0}, {-100.0, 0.0}}}} set dTime to 2 --duration set numTimes to 3 set tOffsets to {0.5, 0.5} --transform offsets set initHidden to true --initially hidden set hideAfter to false --hidden after
The doMotionPath handler applies the arguments passed to the animation settings for the object referenced by the objRef variable.
(*doMotionPath handler sets animation settings for object passed. Arguments includes motion path.*) on doMotionPath(objRef, dTime, mPath, numTimes, tOffsets, initHidden, hideAfter) tell application "Adobe InDesign CC 2014" tell animation settings of objRef set design option to from current appearance set duration to dTime set motion path to mPath set plays to numTimes set transform offsets to tOffsets set plays loop to false set ease type to no ease set initially hidden to initHidden set hidden after to hideAfter end tell end tell end doMotionPath
The background will consist of a colored rectangle with a text frame which will fade in gradually when the page is loaded. To animate the elements, an opacity array is set for the animation settings for each item. This can be done in a repeat with loop.
You can test the animation for the objects using the following:
After setting the values for the arguments at the top of the script, add the following to your script.
tell application "Adobe InDesign CC 2014" --set variables to reference objects to be animated set docRef to document 1 set spreadRef to spread 1 of docRef set bkgObject to rectangle 1 of layer "Background" of docRef set objRef to polygon 1 of layer "Layer 1" of docRef set textRef to text frame 1 of layer "Text" of docRef --set animation settings for objects repeat with eachItem in {bkgObject, textRef} tell animation settings of eachItem set opacity array to {{0, 0}, {23, 100}} end tell end repeat my doMotionPath(objRef, dTime, mPath, numTimes, tOffsets, initHidden, hideAfter) end tell
Make sure to add the doMotionPath handler to the bottom of the script.
What happens when you test the animation in InDesign’s EPUB Interactivity Preview panel (control+shift+return) depends on the settings currently in force for the spread’s timing lists.
You can verify the timing lists for the spread using the following test script.
tell application "Adobe InDesign CC 2014" set docRef to document 1 set spreadRef to spread 1 of docRef tell timing settings of spreadRef set testIt to timing lists end tell end tell
To see the properties for a timing list, change the code inside the timing settings tell block in the above to read as follows:
set testIt to timing lists if length of testIt > 0 then get properties of timing list 1 end if
As you may remember, the first thing you do before adding timing lists is to remove the existing ones.
Next, you create the timing lists you need. For the purpose of this sample script, two timing lists will be set up: one to trigger when the page is loaded; the second to trigger when the page is clicked.
After creating the timing lists, you then create timing groups to act as containers for the page items to be animated when the timing list is triggered.
Add the following just before the last end tell statement in the Test Animation script above.
--set timing lists for timing settings of the spread tell timing settings of spreadRef delete timing lists set pageLoadTimingList to make timing list with properties {trigger event:on page load} set pageClickTimingList to make timing list with properties {trigger event:on page click} end tell --set dynamic targets to act when event is triggered tell pageLoadTimingList set pageLoadGroup to make timing group with properties {dynamic target:bkgObject, delay seconds:0} end tell tell pageClickTimingList set pageClickGroup to make timing group with properties {dynamic target:objRef, delay seconds:0} end tell --add text as dynamic target to page load group tell pageLoadGroup make timing target with properties {dynamic target:textRef, delay seconds:0.5} end tell
Run your script and preview the animation. Make sure you click on the page after the background appears.
For each point within the motion path, your script can assign other animations to the object. For instance, when the object moves right (at time frame 23) you could have the object rotate 45 degrees. Then at frame 47, have it rotate back to zero (0).
set rArray to {(0, 0}, {23, 90}, {47,0}}
You could also have the object scale up or down using scale y array and/or scale x array properties
set scaleX to {{0,100}, {23, 150.0}, {47,100}} set scaleX to {{0,100}, {23, 150.0}, {47,100}}
To add these animations to the script, another handler can be used: doPointAnimation
This handler will take five arguments:
Add the handler to the bottom of your script:
(*Performs one or more animations at points within an object's timeline*) on doPointAnimation(objRef, rArray, scaleX, scaleY, oArray, numTimes) tell application "Adobe InDesign CC 2014" tell animation settings of objRef set plays to numTimes set rotation array to rArray set scale x array to scaleX set scale y array to scaleY set opacity array to oArray end tell end tell end doPointAnimation
Add values for the handler’s arguments at the top of your script:
set rArray to {{0, 0}, {23, 90}, {47, 0}} set scaleX to {{0, 0}, {23, 150}, {47, 100}} set scaleY to {{0, 0}, {23, 150}, {47, 100}} set oArray to {{0, 100}, {23, 100}, {47, 100}}
In the top portion of the script, add a call to the doPointAnimation handler just after calling doMotionPath:
my doPointAnimation(objRef, rArray, scaleX, scaleY, oArray, numTimes)
Test your script.
At this point you should be quite comfortable working with simple animations. Stretch your comfort zone a little by experimenting with this script. Change the values for the mPath list to have the object move around the page. Add more animation at the various time frames (0, 23 and 47). Experiment by adding more page items to the page. Change values for the delay seconds parameter for one or two items in a timing group. Return to other animation scripts you have written to add on page load and/or on page click triggers to the animation. The more you work with this, the easier it gets.
Create a new document with a page item group to look like the pendulum on a clock. Have the pendulum swing back and forth using some of the code from the script above. Hint: The main movement will be a rotation with the transform offsets for the element set for center top {0.5, 0.0}.