Kwik Sprite Sheet Animation - Digital Art and Design

The Kwik Photoshop^R plugin can be used to create interactive mobile apps. One way to create an animation in Kwik is the sprite sheet. Kwik comes with its own sprite sheet script which we will use for this tutorial.

For the finished animation that we will create from the sprite sheet, I will use my Fred the Frog character. In the original file, Fred is on the top layer and his left arm and hand are on the bottom layer. We will animate his left arm to wave.

The kwik sprite sheet script creates a sprite sheet from the layers in the Layers panel. Each layer is a different frame for our animation. Therefore, each layer will have Fred in the same position but with his arm moved left or right slightly.

Let's build the layers for the animation.

Select both the fred and arm layer in the Layers panel and click Duplicate Layers from the panel's menu. In the dialog box, click OK. You will now have two new layers named fred copy and arm copy.
Select the arm copy layer and move the arm slightly to the left.
Select both the fred copy and the arm copy layers and click Merge Layers from the panel's menu. The two layers will be merged into one called fred copy. Rename the fred copy layer to "frame1".

Go back to the original fred and arm layers and repeat these steps two times, each time moving the arm slightly. When you are done you will have the original layers and three layers above them named frame1 through frame3. You can now delete the original fred and arm layers, leaving only frame1 through frame3.
Save this image as a Photoshop .psd file and name it "frog". Note that the image file has a width of 338 and and height of 300 (Image - Image Size).
From the three layers we will generate a sprite sheet. Click File - Scripts - Sprite Sheet Exporter. Photoshop will convert your original image that had one frog into an image with three frogs, each created from a layer. Note that the image file now has a width of 1024 and a height of 300 to accommodate the other frogs.

You will get a message telling you where the new image was saved. The image will be saved as spriteSheet.png.

Now let's add this sprite sheet to our iPad project.
To start a new empty iPad project, open the Kwik panel and click the New Project icon. Name the project "test" and set the Type to Book, Device to iPad and Orientation to landscape. Remove the check from the box next to Use frog.psd file. Click Create. You will get a new image window named page1.psd with one layer in the Layers panel.
For our tutorial, let's rename Layer 1 to "background" and fill it with any color.
With both the page1.psd file and the frog.psd file open in Photoshop, select the frame1 layer in the frog file's Layers panel and drag the frame1 layer from the frog file's Layers panel into the page1 window. You will than have a new layer (already named frame1 in the frog file) in the page1 Layers panel. Position Fred wherever you wish. Rename this frame1 layer to "Fred".
Select the Fred layer and click the Add Animation icon from the Kwik panel.
Name the animation "FredWave" and set the Type of Sprite Sheet.
Use the Browse button to select the spriteSheet.png file.
Add the frame Width and Height which as we noted before are 338 and 300.
Set the Start Frame to 1 and the Frame Count to 3 because we have three frames in our sprite sheet. Keep the Loop set to forever.
Keep the other default settings and click Create.

Let's test the animation by clicking the Preview button in the Kwik panel.

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

|