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
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

Kwik Movie Clip PNG Sequence


As we have seen in previous tutorials, Kwik has many pre-configured animations. However, most storybook authors will want to use custom animations as well. One option is to use the Kwik Movie Clip Replacement feature.

So what is a movie clip. In Kwik, a movie clip is a series of images that when played in sequence create an animation. This type of animation is best used when only a few images make up the animation. For example, on one of the pages of our storybook app, a fly moves across the stage. The fly animation has only three png images. Each image has the wings in a different position. When played in sequence it appears that the fly is flying.

Let's take a quick look at how these png images where created. We start with one image of the fly. Using the Selection tool, we can select one of the wings, cut it from the image and paste it on its own layer in the same position that it was originally on the fly's body. Next, we repeat this for the other wing. We now have the fly's body and each wing on its own layer and we can move the wings independently from the fly's body.

Our first png for the animation sequence will have the wings in the original position.

  1. From the Menubar, click Select - All.

  2. Click Edit - Copy Merged to copy all layers in the image and merge them into one single layer which we will paste into a new image window.

  3. Click File - New to start a new image. The dialog box will automatically have the height and width dimensions for our fly.

  4. Paste the fly into the new image and save it with the name "fly_1".

  5. Going back to the layered image of the fly, select one of the wing layers.

  6. Click Edit - Free Transform and rotate the wing slightly upward.

  7. Repeat this for the other wing.

  8. Click Select - All again and then Edit - Copy Merged to copy the fly with its wings in the new position.

  9. Going back to the fly_1 image, click Image - Duplicate to make a copy of the image file.

    Now we need to remove the first fly and replace it with our second fly.

  10. Click Select - All and then Edit - Clear to remove the first image of the fly.

  11. Paste the second image of the fly into the empty layer and save this duplicate file as "fly_2".

  12. Going back to the original layered image, rotate both of the wings downward.

  13. Repeat the steps above to copy this third image into a new file named "fly_3".

Did you notice that we use the same naming convention for each png file. All files in the movie clip sequence need to have the same name with the exception of the number. Also there must be a _ between the file name and the number. Kwik will look for a sequence of images with this naming method and use them for the movie clip. In our example, we have three images.

fly_1.png
fly_2.png
fly_3.png




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

|



Add Kwik+Movie+Clip+PNG+Sequence to Twitter Add Kwik+Movie+Clip+PNG+Sequence to Facebook Add Kwik+Movie+Clip+PNG+Sequence to MySpace Add Kwik+Movie+Clip+PNG+Sequence to Del.icio.us Digg Kwik+Movie+Clip+PNG+Sequence Add Kwik+Movie+Clip+PNG+Sequence to Yahoo My Web Add Kwik+Movie+Clip+PNG+Sequence to Google Bookmarks Add Kwik+Movie+Clip+PNG+Sequence to Stumbleupon Add Kwik+Movie+Clip+PNG+Sequence 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 © 2013 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
Chalk Text Effect In Illustrator CS6

Sketch with Your Silhouette SSDE

Simple Drawing Tools in Silhouette Studio Designer

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 © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor