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

Kidney Disease
Today in History
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Kwik Sprite Sheet Animation

The Kwik PhotoshopR 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.

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

  2. Select the arm copy layer and move the arm slightly to the left.

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

  4. 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).

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

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

  7. For our tutorial, let's rename Layer 1 to "background" and fill it with any color.

  8. 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".

  9. Select the Fred layer and click the Add Animation icon from the Kwik panel.

  10. Name the animation "FredWave" and set the Type of Sprite Sheet.

  11. Use the Browse button to select the spriteSheet.png file.

  12. Add the frame Width and Height which as we noted before are 338 and 300.

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

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


Add Kwik+Sprite+Sheet+Animation to Twitter Add Kwik+Sprite+Sheet+Animation to Facebook Add Kwik+Sprite+Sheet+Animation to MySpace Add Kwik+Sprite+Sheet+Animation to Del.icio.us Digg Kwik+Sprite+Sheet+Animation Add Kwik+Sprite+Sheet+Animation to Yahoo My Web Add Kwik+Sprite+Sheet+Animation to Google Bookmarks Add Kwik+Sprite+Sheet+Animation to Stumbleupon Add Kwik+Sprite+Sheet+Animation 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
Moodboards for Web Designers lynda.com

Fixed Layout eBook Options

Calendar Wizard for InDesign

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