Kwik Sprite Sheet Replacement Feature - Digital Art and Design

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.

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.
Click on the Switch to Components View icon to see your list of components already added to this page.
Click on the movie clip component in the list and click on the Trash Can icon to delete the movie clip.
Select the Layers and Replacements icon from the Categories bar.
You should still have the fly_pg8 later selected.
Click on the Sprite Sheet Replacement tool to open the Sprite Sheet Replacement dialog box.
Use the Browse button to locate the Sprite Sheet png file in the folder you designated in Texture Packer.
Use the Browse button to locate the Sprite Sheet lua file in the folder you designated in Texture Packer.
Kwik will automatically insert the Width and Height in pixels for the png.
We only need to fill in the Sheet Width and Height if we are not using Texture Packer. Leave the defaults.
Start Frame: Which one of the png images in the sequence would you like to start the animation. Put that number in the box.
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.
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.
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.
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.

|