Your prescription for increased productivity and profitability
In this blog a new property for a page item’s animation settings is being added to our automation toolbox. This property, ease type, alters the speed at which an animation occurs. The values that can be set for this property are no ease, ease in, ease out, ease in out, and custom
The concept of using ease can best be understood by observing its effect. Start by creating a document in InDesign using Digital Publishing Intent, one page, 1024 px by 768 px. Near the right side of the page, create a colorful circle about 1 inch in diameter.
Page item with animation added
Open a new script in AppleScript Editor. Copy and paste the following into its edit window.
tell application "Adobe InDesign CC 2014" set docRef to document 1 set spreadRef to spread 1 of docRef set dTime to 2 --duration set doEase to ease out set scaleX to {{0, 100}, {47, 100}} set scaleY to {{0, 100}, {47, 100}} set tOffsets to {0.5, 0.5} --transform offset is center set mPath to {{0, {{0.0, 0.0}, {0.0, 0.0}, {0.0, 0.0}}}, {47, {{800.0, 0.0}, {800.0, 0}, {800.0, 0.0}}}} set opacArray to {{0, 0}, {6, 75}, {9, 90}, {11, 100}, {47, 100}} --opacity set objRef to page item 1 of spread 1 of docRef set name of objRef to "Circle" my growPath(objRef, dTime, tOffsets, opacArray, mPath, scaleX, scaleY, doEase) end tell
--GrowPath Handler on growPath(objRef, dTime, tOffsets, opacArray, mPath, scaleX, scaleY, doEase) tell application "Adobe InDesign CC 2014" tell animation settings of objRef set design option to to current location set duration to dTime set motion path to mPath set hidden after to false set initially hidden to true set opacity array to opacArray set plays loop to false set scale x array to scaleX set scale y array to scaleY set transform offsets to tOffsets set ease type to doEase --ease in, ease in out end tell end tell end growPath
The growPath handler uses the to current location design option as part of the parameters to determine the object’s animation. Depending on the nature of your projects, you may find this handler to be one that you use quite often.
Run the script and preview the result in InDesign’s EPUB Interactivity Preview panel (Option+Shift+Return). Notice how the animation slows down as it comes close to the end.
Change the value of the doEase variable in the script above to ease in. Run the script and preview the animation. Repeat the process changing the value of the doEase variable to no ease, then change the value to ease in out.
Now that you have been introduced to the basics of writing a script to create an animation for an InDesign fixed layout ePub, it’s time to start putting your skills into practice. For this we will create a script to have a single flower grow from “nothing” to a full-blown blossom. This will all happen when the reader clicks on the page in the EPub. Ready? Let’s dig in.
Create an InDesign document using Digital Publishing Intent, one page, 1024 px by 768 px. Set margins to your preferences.
This project will take advantage of layers in the InDesign document to identify the objects to be animated. Create a layer named “Flowers.” On this layer, to keep the document small, draw a simple flower using the pen tool in InDesign. Group the blossom elements if needed. Next add a stem. The stem is just a long, narrow rectangle that begins about mid center of the flower. Group the blossom and the stem. Create a layer named “Leaves.” On this layer create the leaves. For this, draw a single leaf, copy it, paste and flip it horizontally. Group the leaf elements.
Flower Before Being Animated
Create a layer at the top for an element to hide the stem of the flower as it animates on the page. Use a rectangle filled with white, or get creative and have the flower grow out of a flower pot.
Layer structure after creating the flower elements.
To name and apply animation to the leaves, copy and paste the following into a new script in Script Editor.
tell application "Adobe InDesign CC 2014" set docRef to document 1 set spreadRef to spread 1 of docRef set dTime to 2 --duration set doEase to no ease --for Leaves set tOffsets to {0.5, 1.0} --transform offset center bottom set scaleX to {{0, 100}, {47, 200}} set scaleY to {{0, 100}, {47, 200}} set opacArray to {{0, 0}, {47, 100}} tell docRef set leafElement to group 1 of layer "Leaves" set name of leafElement to "Leaf1" my growAnimate(leafElement, dTime, tOffsets, opacArray, scaleX, scaleY, doEase) end tell end tell --======== --HANDLERS --======== on growAnimate(objRef, dTime, tOffsets, opacArray, scaleX, scaleY, doEase) tell application "Adobe InDesign CC 2014" tell animation settings of objRef set duration to dTime set design option to from current appearance set hidden after to false set initially hidden to true set opacity array to opacArray set plays loop to false set scale x array to scaleX set scale y array to scaleY set transform offsets to tOffsets set ease type to doEase end tell end tell end growAnimate
Notice that this animation applies to a page item that is already on the page, but not visible when the page is first opened. The script will have the leaves grow from their present size to 200% within a period of 2 seconds (duration). At the same time, the leaves will fade in from 0 to 100%. The growAnimate handler uses the from current appearance design option.
Run the script with the document open. Preview the animation in InDesign’s EPUB Interactivity Panel. Unless a previous script was run that sets the timing list for the current spread to on page click, the animation should begin when you push the Run button. Otherwise you will need to click on the page to start the animation.
Because we want the flower blossom and the stem to animate together, make sure the blossom and stem are grouped. The animation will use the growAnimate handler introduced above. Only a few parameters need to be changed for the growAnimate handler, but it does require a list of lists of lists to indicate the motion path animation property. Add the following to the bottom of the tell docRef block in the top portion of the script above.
--for Blossom and Stem group set groupRef to group 1 of layer "Flowers" set name of groupRef to "Group1" set flowerElement to group 1 of group "Group1" --note this will change depending on the page item used set name of flowerElement to "Flower1" set stemElement to rectangle 1 of group "Group1" set name of stemElement to "Stem1" set scaleX to {{0, 100}, {47, 110}} set scaleY to {{0, 100}, {47, 100}} set tOffsets to {0.5, 0.5} --transform offset center set mPath to {{0, {{0.0, 0.0}, {0.0, 0.0}, {0.0, 0.0}}}, {47, {{1.0, -233.0}, {1.0, -233.0}, {1.0, -233.0}}}} my growPath(groupRef, dTime, tOffsets, opacArray, mPath, scaleX, scaleY, doEase)
Important: If the blossom portion of the flower is not a group, you will need to change its reference in the code above.
Be sure to add the growPath handler at the bottom of your script. Run the script to test. When you preview the animation, the flower and stem should “grow” upward, but the flower does not change size.
If the script does not work, make sure the flower blossom and stem are grouped. Open the Layers panel and verify that the structure looks similar to the screen capture below:
The blossom should not only grow upward with the stem, it should scale up in size as the flower “grows”. To animate the blossom, add the following code to the bottom of the tell docRef block in the top portion of your script.
--for Blossom set scaleX to {{0, 15}, {47, 100}} set scaleY to {{0, 15}, {47, 100}} set tOffsets to {0.5, 0.5} --center set objRef to page item "Flower1" of group "Group1" my growAnimate(objRef, dTime, tOffsets, opacArray, scaleX, scaleY, doEase)
Notice that most of the animation settings properties are established at the top of the script. Only a few of the properties needed to be redefined as we added objects to the script. Compile, and run the script. Preview the animation in InDesign’s EPUB Interactivity Panel. The parts of the flower should animate one after the other, starting with the leaves as they were created last.
So far so good. But the blossom of the flower does not start to grow until the stem has reached full height. To fix this, you will need to add code to the script to cause the animations to occur together, with just a slight delay between. This will involve working with timing groups. Add the following handler to the script:
on createTimingGroups(spreadRef) tell application "Adobe InDesign CC 2014" set spreadRef to spread 1 of document 1 tell timing settings of spreadRef delete timing lists set tList to make timing list with properties {trigger event:on page click} end tell tell tList set g1 to make timing group with properties {dynamic target:group "Group1" of spreadRef, delay seconds:0.0} tell g1 make timing target with properties {dynamic target:page item "Leaf1" of spreadRef, delay seconds:0.0} make timing target with properties {dynamic target:group "Flower1" of group "Group1" of spreadRef, delay seconds:0.5} end tell end tell end tell end createTimingGroups
To call the createTimingGroups handler, add the following just before the last end tell statement in the top portion of your script:
my createTimingGroups(spreadRef)
Run the script and preview the animation. Be sure to click the Clear preview button before pushing the Run preview button. The animation will not start until you click on the page since the script now sets the trigger event to on page click. If the preview looks like it will be what you want, export the document to EPUB (Fixed Layout). (Refer to our blog of March 23, 2015 for details on exporting to EPUB.) Once you see how the animation really works on the iPad, you may want to experiment with some of the animation settings.
Try making a page having several flowers placed randomly. Have the flowers animate in a non-sequential order. Have fun.