Now we can create the Path Animation. The difference between a linear and path animation is the line. In both animations the object moves along a designated line. As we discovered with the page flip animation, a linear animation moves the object along a straight line. In this path animation, we will draw a path along a curved line for the object to follow. Our first step is to draw the path with the Photoshop Pen tool.

1. With the layer containing the object (the fly movie clip) selected, click on the fly with the Pen tool. We will place the second point for the path about 3 fly-lenghts above the top of the page. Click on that second point and drag your mouse up and to the right to make a curved line.
   
   
2. In the Paths panel (grouped with the Layers panel), rename the work path to "flypath1".
   
   Now we can tell Kwik to use this path for our Path Animation.
   
   
3. With the fly_pg8 layer still selected, click on the Animations icon in the Categories bar.
   
   
4. Click on the Path Animation icon to open the dialog box.
   
   
5. Name this animation "fly1Ani".
   
   
6. This animation will be for layer fly_pg8.
   
   
7. Path: Choose the flypath1 path from the drop-down list.
   
   As the fly moves along the curve, we want him to rotate slightly so that his head continues to point in the direction of the path.
   
   
8. Check the box for Auto Turn and set the amount for the Rotation Angle to just -10 degrees.
   
   
9. Flies move fast. Let's set the Duration to 1 or .5 second.
   
   
10. We want the fly to stay off the page after the animation. Check the box for Pause When Completed and set the Loop to 1 Time. Leave the Reverse at ending uncheck.
    
    
11. Let's add a little realism by making the fly hesitate when it is click and then fly off. We can do this by setting the Easing to inOutExpo.
    
    
12. Set the Anchor Point to TopCenter so that his body rotates more than his head.
    
    
13. We don't want the fly to move until the button is clicked. Set the Wait Request.
    
    
14. Leave the box for Return to Start Position unchecked.
    
    
15. Click Create.
    
    

Now we can add the button. Still on the fly_pg8 layer.

1. Click the Interactions icon from the Categories bar.
   
   
2. Click the Add Button icon to open the dialog box.
   
   
3. Name the button "fly1btn".
   
   
4. We want the layer fly_pg8 for both the Default and Over button states.
   
   
5. From the Interactions section, expand the Animation section.
   
   
6. Choose Play Animation. Select fly1Ani from the drop-down list.
   
   
7. Expand the Audio section.
   
   Choose Stop Audio and select the first audio from the drop-down list.
   
   Still in the Audio section, choose Play Audio and select the second audio file from the drop-down list.
   
   
8. Click Create.
   
   

Now we can test our interactive sequence. When the page loads, the fly should be flapping its wings on the page with the background fly sound playing continuously. When we click on the page, we should hear a louder fly sound and he moves off the page.

Save the changes to page8.

Click on the Export Current Page Only icon and the Publish button to test your animation.

Go to your LearnKwik folder and make a backup copy of the Template project folder. Rename the backup folder by adding the current date to the end. (TemplateMM-DD-YY).

← Back

These tutorials are for the older version of Kwik 2 and may not be much help when using Kwik 3 and above. If you are having trouble, please use the Kwik forum.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Kwik product, the Kwik logo and Kwiksher are properties of Kwiksher.com - Copyright 2011. Screen shots used by permission.