g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Kwik 2 Path Animation for a Movie Clip or Sprite

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

Join us in the Flash forum. | Join us in the Digital Art and Design forum.


Add Kwik+2+Path+Animation+for+a+Movie+Clip+or+Sprite to Twitter Add Kwik+2+Path+Animation+for+a+Movie+Clip+or+Sprite to Facebook Add Kwik+2+Path+Animation+for+a+Movie+Clip+or+Sprite to MySpace Add Kwik+2+Path+Animation+for+a+Movie+Clip+or+Sprite to Del.icio.us Digg Kwik+2+Path+Animation+for+a+Movie+Clip+or+Sprite Add Kwik+2+Path+Animation+for+a+Movie+Clip+or+Sprite to Yahoo My Web Add Kwik+2+Path+Animation+for+a+Movie+Clip+or+Sprite to Google Bookmarks Add Kwik+2+Path+Animation+for+a+Movie+Clip+or+Sprite to Stumbleupon Add Kwik+2+Path+Animation+for+a+Movie+Clip+or+Sprite to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
How to Create Patterns in Illustrator

Multiple Artboard Template in Photoshop CC

Design & Bind Your Creative Portfolio - Skillshare

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor