Kwik Movie Clip Replacement - Digital Art and Design

In the last tutorial, we created the three png images that we will use for our movie clip replacement layer.

Now we are ready to add the movie clip to a layer on the page. We will first add a new layer to the page for our fly animation. Then we will add a copy of the fly_1.png fly to this layer. This copy of the fly will act as a placeholder for the movie clip. When Kwik builds your app, it will replace the image of the fly with the movie clip.

Open your project in to Photoshop.

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.
Add a new layer above the bottom layer and name it fly_pg8.

This layer doesn't have a shared object and will not be exported as a jpg image. Therefore, we don't need to set any layer properties.
From the mockup file, copy the fly (which is a copy of the fly_1 png image).
Paste the fly on to the fly_pg8 layer to be the placeholder for the movie clip.
Select the Layers and Replacements icon from the Categories bar.
Click on the Movie Clip Replacement tool to open the Movie Clip Replacement dialog box.
Use the Browse button to locate the first of the movie clip pngs - fly_1.png.
Kwik will automatically insert the Width and Height in pixels for the png.
Nr. Images: We have three pngs in our movie clip sequence. Add the number 3 in this box.

We want this animation to loop as long as the page is viewed.
Loop: Select the radio button for the Forever setting.

We want the animation to start as soon as the page loads. So we will not pause the animation on frame 1.
Leave Pause at Frame 1 unchecked.
Click Create.

Click on the

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

At this point, our fly stays in the same spot and moves its wings. Next we will 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.

|