logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Santos Cage Doll SVG Cut File - First Steps

SVG Cut File Design of Top Hat

Offset Path in Illustrator

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor