Kwik Movie Clip PNG Sequence - Digital Art and Design

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.

From the Menubar, click Select - All.
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.
Click File - New to start a new image. The dialog box will automatically have the height and width dimensions for our fly.
Paste the fly into the new image and save it with the name "fly_1".
Going back to the layered image of the fly, select one of the wing layers.
Click Edit - Free Transform and rotate the wing slightly upward.
Repeat this for the other wing.
Click Select - All again and then Edit - Copy Merged to copy the fly with its wings in the new position.
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.
Click Select - All and then Edit - Clear to remove the first image of the fly.
Paste the second image of the fly into the empty layer and save this duplicate file as "fly_2".
Going back to the original layered image, rotate both of the wings downward.
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.

|