ANIMATING USING TIMING LISTS, GROUPS, AND DELAYS

In this blog series we are working with a script provided by Adobe as part of their Samples Scripts: AnimationEncyclopedia.applescript.

To see how this script works, first make sure that the measurement unit for InDesign’s script preferences is set to auto value.

AppleScript

tell application "Adobe InDesign CC 2017"
	set myTest to measurement unit of script preferences
end tell --should return auto value
myTest

ExtendScript

var myTest = app.scriptPreferences.measurementUnit;
myTest; //should return AUTO_VALUE

TEST SCRIPT

Now that you are sure that script preferences will not cause an Out of Range error, try running the AnimationEncyclopedia script. (There is a version in both the AppleScript and Javascript Folders inside the Script panel’s Samples directory.)

With InDesign running, double click on the script. The script creates a document and populates five pages with samples of animations. For the purpose of this blog post, we will concentrate on pages 4 and 5.

PAGE 4

Page four created by script…Page 4

With page 4 frontmost, open InDesign’s Animation panel (Window > Interactive > Animation)

Option click the button to the far left of this panel. This will open the SWF Preview window to demonstrate the animations. Notice that the three colored rectangles on this page all start at the left of the page, but the second rectangle animates from a fixed position to the right to its original position while changing in size (appearance). The third rectangle animates from a fixed position to the left and then animates to its original position. Let’s look at the code to see how this is accomplished. (We will be looking at the code for AppleScript.)

Scroll down to where you see the comment for –Page 4

Two motion presets are established “move-right-grow” and “fly-in-left” using the variables myMoveRightGrowPreset and myFlyInLeftPreset.

Two properties are set for each of the rectangles:

RectangleMotion PresetDesign Option
Rectangle 1myMoveRightGrowPresetfrom current appearance
Rectangle 2myMoveRightGrowPresettocurrent appearance
Rectangle 3myFlyInLeftPresetto current location

The animation is triggered by default which uses on page load, with each item on the page animating in order of creation.

Try It

Just for fun, let’s create our own test document with named objects to make it easy to experiment with animation settings.

set docPath to path to desktop from user domain as string
   set testDocName to "myTestDoc"
   tell application "Adobe InDesign CC 2017"
      set moveGrowPreset to Motion Preset "move-right-grow"
      set flyInPreset to Motion Preset "fly-in-left"
      set measurement unit of script preferences to points
      if not (exists document testDocName) then
         set docRef to my makeDocument(testDocName, docPath)
      else
         set docRef to document testDocName
      end if
      set spreadRef to spread 1 of docRef
      set fillClr to swatch 5 of docRef
      set rect1 to my makeRectangle(spreadRef, "Rect1", {72, 172, 100, 72}, fillClr)
      set rect2 to my makeRectangle(spreadRef, "Rect2", {172, 172, 200, 72}, fillClr)
      set rect3 to my makeRectangle(spreadRef, "Rect3", {272, 172, 300, 72}, fillClr)
      --animation settings
      tell animation settings of rect1
         set preset to moveGrowPreset
         set design option to from current appearance
      end tell
      tell animation settings of rect2
         set preset to moveGrowPreset
         set design option to to current appearance
      end tell
      tell animation settings of rect3
         set preset to flyInPreset
         set design option to to current location
      end tell
   end tell

   on makeRectangle(parentObj, rectName, rectBounds, rectFill)
      tell application "Adobe InDesign CC 2017"
         tell parentObj
            set rectRef to make rectangle with properties {name:rectName, geometric bounds:rectBounds, fill color:rectFill}
         end tell
         return rectRef
      end tell
   end makeRectangle

   on makeDocument(docName, docPath)
      set savePath to (docPath & docName)
      tell application "Adobe InDesign CC 2017"
         set docRef to make document
         tell document preferences of docRef
            set pages per document to 1
            set page width to 800
            set page height to 600
            set create primary text frame to false
            set intent to web intent
            set page orientation to landscape
         end tell
         save docRef to savePath without force save
         return docRef
      end tell
   end makeDocument

Run the script. When the page is built, open InDesign’s Animation panel and activate the animation by clicking the button at the bottom far left. (This opens the EPUB Interactivity Preview panel.) The preview of the animation begins immediately as timing settings are defaulted to on page load. Notice that when the page loads, the rectangles are placed as needed using the animation settings (default values for the presets). You may want to save the script at this point.

Experiment

Now that you have a handy script for testing, physically remove the rectangles from the page and change values in the script to place the rectangles at varying locations, at different sizes, etc., and maybe even the animation settings so you can get a good idea of how these presets work.

PAGE 5

Page 5 created by script…Page 5

The animation demonstrations created by the AnimationEncyclopedia script for its page six involves working with timing groups and delays. Timing groups allow timing settings to be applied to objects within a timing group. Timing settings change the order of when animations for objects are triggered. Timing lists are set up for a page to determine the page items that will display when the page is loaded and/or when the page is clicked.

As you saw above, the timing list for a spread, by default, is set for on page load and animations for objects trigger immediately one after the other in the order the object is created. Let’s recreate the animation for page 5 in our myTestDoc document created above. Modify the script as follows. (You may wish to make a new script by copying the script above to a new Script Editor document.)

All of the animation settings for this page will use the motion preset “twirl”, so add the following right after the tell application statement at the top of the script.

   set motionPreset to "twirl"

Then for rect1, change its animation settings

   tell animation settings of rect1 
      set preset to motionPreset
   end tell

Do the same for the other two rectangles.

Now add a call to a handler just before the last end tell in the main code:

   set triggerEvent to {trigger event: on page load}
   my doTimingSettings(spreadRef, triggerEvent, rect1, rect2, rect3)

Now add the following subroutine (handler) to the script (before the makeRectangle handler).

   on doTimingSettings(spreadRef, tEvent, rect1, rect2, rect3)
      tell application "Adobe InDesign CC 2017"
         set spreadTimingSettings to timing settings of spreadRef
	 tell spreadTimingSettings
	    delete timing list 1
	    set pageLoadTimingList to make timing list with properties tEvent
	    tell pageLoadTimingList
		set listTimingGroup to make timing group with properties {dynamic target:rect1, delay seconds:0}
		tell listTimingGroup
		   make timing target with properties {dynamic target:rect2, delay seconds:0}
		   make timing target with properties {dynamic target:rect3, delay seconds:0}
		end tell --timing group
	    end tell --timing list
	 end tell --timingSettings
      end tell
   end doTimingSettings

TIMING SETTINGS

Since on page load is set by default (in timing list 1 for the page), we will delete this timing list.

   delete timing list 1

As part of the arguments passed to the doTimingSettings handler, we pass the trigger event for the spread in a variable (triggerEvent):

   set triggerEvent to {trigger event:on page load}

With this in place, the page timing settings can be set to either on page load, or on page click depending on the property passed.

Test It

EPUB Preview Panel…EPUB Interactivity Preview panel

Remove the rectangles from your myTestDoc page, and run the script as modified above. The three rectangles should all animate together.

Try changing the value of the variable triggerEvent to on page click

  set triggerEvent to {trigger event: on page click}

Remove the rectangles and run the script again. Now, the rectangles should not animate until you actually click on the page (in the EPUB interactivity preview panel).

TESTING DELAYS

Change the delay seconds values for all three rectangles remove the rectangles on the test document page and test. You may want to try a different delay value for each: 1, 0.5, and 2.

   tell spreadTimingSettings
      delete timing list 1
      set pageLoadTimingList to make timing list with properties tEvent
      tell pageLoadTimingList
         set listTimingGroup to make timing group with properties {dynamic target:rect1, delay seconds:1}
	 tell listTimingGroup
	    make timing target with properties {dynamic target:rect2, delay seconds:0.5}
	    make timing target with properties {dynamic target:rect3, delay seconds:2}
	 end tell --timing group
      end tell --timing list
   end tell --timingSettings

With the trigger event set to on page click, the animation will not begin until the page is clicked. Then, depending on the value for delay seconds, the objects will animate in the order they were added to the timing list. Try changing the timing list for the last rectangle to 0. (It will animate with rectangle 2).

ADDING A LOOP

Whether the animation for the items in a timing list group is repeated depends on the value for the timing group’s plays loop property. Alternatively, you can set the plays property to an integer to indicate the number of times the group’s animation will play.

Try adding the following statement just before the end tell for the timing group.

   set plays loop to true

When you test, the animation for the objects will continue until you click the Clear Preview button.

Now test using the following:

   set plays to 2

Continue to experiment by changing the values for triggerEvent (on page load or on page click) as well as the delay seconds values for the individual rectangles. And, don’t forget to play with the plays loop and plays properties. Have fun!

ONWARD AND UPWARD

The fun really begins when you start adding multiple animations to individual objects and then adding these individual objects to groups. We will look at this in the next installation of this series. SEE YOU THEN!