Ease-y Does It

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

  • Ease in, affects the speed of the animation as it begins
  • Ease out affects the speed of the animation as it ends
  • Ease in out affects the speed at both ends of the animation
  • No ease, of course, has no affect on the animation
  • Custom is a setting that is used when the rate of the animation is controlled by the motion path property

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.

Practice What You Have Learned

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.

 

One Flower

Create an InDesign document using Digital Publishing Intent, one page, 1024 px by 768 px. Set margins to your preferences.

The Illustration

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.

Animate the Leaves

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.

Flower and Stem Group

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:

Blossom

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.

Combine Animations

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.

Challenge

Try making a page having several flowers placed randomly. Have the flowers animate in a non-sequential order. Have fun.