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

Autism Spectrum Disorders
Mental Health
Blogs / Social Networking
Kidney Disease
Today in History

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


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.


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

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
Pocket Wedding Invitation SVG Cut File

Planning a Wedding Suite Design

Draw a Spiral Christmas Tree in Illustrator

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor