Controlling Animations

Adobe Acrobat 3D

Updated: 3/26/2008 I 1.5

This tutorial shows how to use the provided script to easily control the playing of an animation in a 3D Scene. See Page 12 for an example of a finished product. With the script supplied in this tutorial, all aspects of an animation can be controlled with the javascript code. You can use Buttons, Events, or Mouse interactions to trigger the javascript code that controls the animation.
Play Selection
Rewind Selection Play and Advance
Play All

Stop
Rewind All

Animation Sections
Remove Float Bowl Screws Remove Float Bowl Remove Float Remove Top Cover Screws Remove Top Cover

Adobe Acrobat 3D Javascript Tutorial

Animation Control

Updated: 3/26/2008 I 1.5

How to create the example... 1. Obtain a 3D model with an embedded animation or create

one by following the Keyframe Animation tutorial. You can create animations using the Adobe 3D Toolkit that comes with Acrobat 3D. You can also create a very simple explode animation in the next step. If you already have a 3D model in your PDF, jump to Step 3.

2. Drag a 3D model file directly into Acrobat 3D to create a

3D Annotation object in a blank PDF.
Make sure you select Export Animation on the Enhance tab of the 3D Conversion dialog that comes up. Alternatively, to create a simple explode animation, select Create Exploding Parts Animation.

3. Embedd the provided javascript file in the 3D Annotation.

A javascript file called AnimationController.js.txt is provided as an attachment to this document.
Save the file on your hard drive and rename it by removing the .txt at the end. Double click the created 3D Annotation to bring up the properties dialog. Click the Edit Content button and then click the Browse button next to the Default Script textboxt to select the script file.

4. Choose the Advanced Editing - Select Object Tool.

Select the 3D Annotation and resize it so there is some blank space on the left side for buttons. Note: this will distort the preview image. Go back to the Edit Content dialog (Step 3) and select the Retrieve Poster from default View option and click OK.

Adobe Acrobat 3D Javascript Tutorial

Animation Control

Updated: 3/26/2008 I 1.5

5. Select the Button tool from the menu: Tools -> Forms
-> Button Tool. Add a button to the left of the 3D Annotation. Access its properties dialog by doubleclicking it or by Properties in its right-click menu. Under the Options tab, change the label to Play Selection.

6. Under the Actions tab, add a Run a Javascript action.

Copy the following javascript into the editor.
PlaySelected();

7. Now create another button labeled Stop and paste the

following javascript in the same manner.
Stop();

Adobe Acrobat 3D Javascript Tutorial

Animation Control

Updated: 3/26/2008 I 1.5

8. Create several more buttons with the following labels and

javascript actions. Play All Play Next Rewind All Rewind Last
PlayAll(); PlayNext(); PlayAll(true); PlaySelected(true);

9. Select the Menu Advanced -> Document Processing ->

Document Javascripts. Type AnimationControl or any similar name (its not important) in the Script Name text box and click Add. Delete the empty function that is created by default and paste the code on the following page into the script editor.

Adobe Acrobat 3D Javascript Tutorial

Animation Control

Updated: 3/26/2008 I 1.5

9.

Use the Select Text tool to copy this code. Note: This is also attached to this document as DocumentJavascripts.js.txt
(continued)
var AnimationSections = [[0,2],[2,5],[5,9]]; var SectionCount = AnimationSections.length; function Context() { return getAnnots3D(0)[0].context3D; } function Stop() { Context().MyAnimation.pause(); } function GetSelectedSectionIndex() { return getField("AnimationSections").currentValueIndices; } function SetSelectedSectionIndex(value) { value = Math.min(SectionCount-1, value); getField("AnimationSections").currentValueIndices = value; } function SetPlayRange(playall) { if(playall) { Context().MyAnimation.setPlayRange(AnimationSections[0][0], AnimationSections[SectionCount-1][1]); } else { var section = AnimationSections[GetSelectedSectionIndex()]; Context().MyAnimation.setPlayRange(section[0], section[1]); } } function PlaySelected(DontPlay) { SetPlayRange(); Context().MyAnimation.reset(); if(!DontPlay) Context().MyAnimation.play(); } function PlayAll(DontPlay) { SetPlayRange(true); SetSelectedSectionIndex(0); Context().MyAnimation.reset(); if(!DontPlay) Context().MyAnimation.play(); } function PlayNext(DontPlay) { SetPlayRange(); Context().MyAnimation.reset(); if(!DontPlay) Context().MyAnimation.play(); SetSelectedSectionIndex(GetSelectedSectionIndex() + 1); }

Adobe Acrobat 3D Javascript Tutorial

Animation Control

Updated: 3/26/2008 I 1.5

10.

Take a minute to observe the animation in your chosen 3D Model. Open the 3D Model in the 3D Toolkit and use the animation control at the bottom of the screen to start/stop/seek the animation. Decide how you might want to break it down into individual steps or sections. Scan the animation back and forth and write down the start and end time of each section you have decided on.

In the provided model, we use the following sections in the disassembly animation: Remove Float Bowl Screws - start:0 end:1 Remove Float Bowl - start:1 end:2 Remove Float - start:2 end:3 Remove Top Cover screws - start:3 end:4 Remove Top Cover - start:4 end:5

11.

Select the Document Javascripts menu from Step 9. Select the script you created and click Edit. Modify the AnimationSections variable declaration at the top; replace the [[0,1],[1,2],[2,3]] part with a similar list using the start and end times you decided on in the previous step. The values will end up making a list like this [[0,1],[1,2],[2,3],[3,4],[4,5]]. The line: "return getAnnots3D(0)[0].context3D;" might need to be changed if your 3D Annotation isn't on the first page of your PDF. Just change the first zero to the page number that your 3D annotation is on (page 1 = 0, page 2 = 1, page 3 = 2, ...)

Adobe Acrobat 3D Javascript Tutorial

Animation Control

Updated: 3/26/2008 I 1.5

12.

Select the Tools -> Forms - > ListBox Tool menu and create a listbox somewhere near your buttons. The Properties dialog should open as soon as its created. Navigate to the Options tab and add an item for each section of the animation you decided on in step 10. Note: Make sure they are in chronological order. Navigate to the General tab and change the Name to AnimationSections.

13.

Your PDF should now resemble Page 2 of this document (with the exception of the section titles and 3D Model) and should function in the same manner. Try experimenting with more buttons using other functions that the script contains. The rest of this document is a reference for the "Animation Controller.js" javascript.

Adobe Acrobat 3D Javascript Tutorial

Animation Control

Updated: 3/26/2008 I 1.5

How to use the rest of the script...

AnimationController.play()
Begins playing animation from the current position in the current direction.

AnimationController.pause() Freeze the animation at the current position. Calling play() afterward will resume the animation right where it left off. AnimationController.reset() Stops the animation and resets the position to the beginning or the end (depending on the last call to setPlayForward()). AnimationController.setPlayForward(forward) Sets the play direction but doesnt start playback. forward = true: Play the animation in the normal forward direction (default) forward = false: Play the animation in the opposite direction AnimationController.setLoop(loop) Sets the looping mode but doesnt start playback. loop = true: Play the animation in looped mode loop = false: Play the animation once and then stop (default) AnimationController.setPingPong(ping) Turns pingpong on or off but doesnt start playback. Note: When ping = true, this will override the setPlayForward() function. Note: This can be used with setLoop() Play the animation forward once, and then backward once ping = true: ping = false: Play the animation once in the direction specified with setPlayForward()

Adobe Acrobat 3D Javascript Tutorial

Animation Control

Updated: 3/26/2008 I 1.5

How to use the rest of the script...

AnimationController.setPlaySpeed(speed) Sets the speed of the animation playback relative to the default speed but doesnt start playback. Note: To play an animation in reverse, use setPlayForward(false) instead of setPlaySpeed(-1) speed < 1: Animation is played slower than its default speed speed = 1: Animation is played at its default speed (default) speed > 1: Animation is played faster than its default speed AnimationController.setSmoothness(smooth) Sets how smoothly the animation will transition from being stopped (at the beginning) to full speed (middle) to stopped again (at the end). Note: any value 0 and above is valid, but anything above 10 is fairly similar No smoothing (linear speed) smooth = 0: Partial smoothing(half linear, half cosine wave) (default) smooth = 1: smooth = 10: Full smoothing (animation speed follows cosine wave) AnimationController.setPlayRange(starttime, endtime) Sets the section of the animation to play. If your animation is 10 seconds long but you only want to play the last 4 seconds, call setPlayRange(6, 10). Note: These numbers always represent time in the original animations reference frame. i.e. You dont have to change the playRange after changing playForward or playSpeed. Endtime should always be greater than Starttime, even if playForward is set to false. starttime: Determines the where the animation will start playing endtime: Determines the where the animation will stop playing

Note: There are get functions for most of the above parameters, i.e. getPlaySpeed(), getSmoothness(), getPingPong(), ...

Adobe Acrobat 3D Javascript Tutorial

Animation Control

Updated: 3/26/2008 I 1.5

How to control multiple Animations...

You can create multiple AnimationController objects and control multiple animations with this code. Simply create one AnimationController object for each animation present in the scene. Just modify the last line of the provided script. To access the animations by name, change the last lines to this:
var MyFirstAnimation = new AnimationController(scene.animations.getByName(First Animations Name)); var MySecondAnimation = new AnimationController(scene.animations.getByName(Second Animations Name));

Materials and/or Tutorial prepared by Daniel Beardsley (4/22/2006) Copyright 2006 Adobe Systems Inc no full or partial reproduction of this document is permitted without prior written permission of Adobe Systems

Adobe Acrobat 3D Javascript Tutorial

Animation Control

Owners Manual M250 Gas-powered Push Mower

Section 4. Carburetor Disassembly

You will need the following tools:
1. #2 phillips screw driver 2. Solvent and a soft brush 3. A rag for wiping up possible residual gasoline WARNING: * Gasoline is flammable, dispose of it properly * Always wear gloves when working with gasoline or other solvents Click on the Step number using the hand tool 1 Carburetor Disassembly 1.1 1.2 Remove the Carburetor from the mower (Refer to Section 3.) Clean the outside of the Carburetor with a solvent and a soft brush

2 Removing the Bowl 2.1 2.2 Remove the screws holding on the bottom of the carburetor (the bowl) Remove the bowl and be careful not to get any debris inside the carburetor. Note: (residual gasoline may still be inside the carburetor and will probably spill at this point) Gently pull out the floats and the pivot bar they are attached to.

2.3

3 Removing the Mixing Cover 3.1 Remove the screws that hold the top part of the carburetor on (The Mixing Cover). Remove the mixing cover itself by sliding it vertically until the assembly is clear of the carburetor. Note: Assembly is the reverse of disassembly.

3.2