g
Printer Friendly Version

editor  
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.

fly_1.png
fly_2.png
fly_3.png




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

|



Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

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.



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


BellaOnline Editor