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
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


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 Replacement Feature


In the last tutorial, we used Texture Packer for Kwik 2 to create a sprite sheet that we will use for our sprite sheet replacement layer.

Now we are ready to add the sprite sheet to the layer on the page. We have already created the layer when we worked through the movie clip replacement example. Because the movie clip and sprite sheet replacement features are very similar, we can easily replace the movie clip with the sprite sheet on that same layer.

Open your project in to Photoshop.

After removing the movie clip from the layer, we still have our little fly placeholder sitting on the layer. We can use this same placeholder object for the sprite sheet replacement feature.

  1. Select page8 from the list of pages in the Kwik panel. In the Page/Components section of the Kwik panel, you should see "@ page8" at the top of the section.

  2. Click on the Switch to Components View icon to see your list of components already added to this page.

  3. Click on the movie clip component in the list and click on the Trash Can icon to delete the movie clip.

  4. Select the Layers and Replacements icon from the Categories bar.

  5. You should still have the fly_pg8 later selected.

  6. Click on the Sprite Sheet Replacement tool to open the Sprite Sheet Replacement dialog box.

  7. Use the Browse button to locate the Sprite Sheet png file in the folder you designated in Texture Packer.

  8. Use the Browse button to locate the Sprite Sheet lua file in the folder you designated in Texture Packer.

  9. Kwik will automatically insert the Width and Height in pixels for the png.

  10. We only need to fill in the Sheet Width and Height if we are not using Texture Packer. Leave the defaults.

  11. Start Frame: Which one of the png images in the sequence would you like to start the animation. Put that number in the box.

  12. Frame Count: How many pngs are there in the animation sequence. Put that number in the box.

    We want this animation to loop as long as the page is viewed.

  13. Loop: Select the radio button for the Forever setting.

    This animation will look more realistic if the wings are moving very fast. So let's set the length of the sequence to .1 second.

  14. Length: Set the length to .1 second. (You may need to adjust this setting depending on your animaiton.)

    We don't want the animation to pause on frame 1 or reverse after the last frame. Leave these two boxes unchecked.

  15. Click Create.

Click on the Export Current Page Only icon and the Publish button to test your animation on page 8.

As with the movie clip, our fly stays in the same spot and moves its wings. He will stay in that spot until we add an animation to the fly_pg8 layer that will move our fly across the page.

Save the changes you've made to page8.psd.

Go to your LearnKwik folder and make a backup copy of the Template project folder. Rename the backup folder by adding the current date to the end. (TemplateMM-DD-YY).




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

|



Add Kwik+Sprite+Sheet+Replacement+Feature to Twitter Add Kwik+Sprite+Sheet+Replacement+Feature to Facebook Add Kwik+Sprite+Sheet+Replacement+Feature to MySpace Add Kwik+Sprite+Sheet+Replacement+Feature to Del.icio.us Digg Kwik+Sprite+Sheet+Replacement+Feature Add Kwik+Sprite+Sheet+Replacement+Feature to Yahoo My Web Add Kwik+Sprite+Sheet+Replacement+Feature to Google Bookmarks Add Kwik+Sprite+Sheet+Replacement+Feature to Stumbleupon Add Kwik+Sprite+Sheet+Replacement+Feature 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
Pixelmator 3 for the Mac

Pixelmator 3 Photoshop Alternative

Pixelmator 3 Review

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