logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Silhouette Studio New PixScan Feature

Photorealistic Digital Art for Digital Stamp

Review - 21-Day Drawing Challenge

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor