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

Folklore and Mythology
Women's Fashion
Holiday/Seasonal Cooking
Hiking & Backpacking
New Age
Weight Loss

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Kwik Movie Clip Replacement

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.

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

  3. From the mockup file, copy the fly (which is a copy of the fly_1 png image).

  4. Paste the fly on to the fly_pg8 layer to be the placeholder for the movie clip.

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

  6. Click on the Movie Clip Replacement tool to open the Movie Clip Replacement dialog box.

  7. Use the Browse button to locate the first of the movie clip pngs - fly_1.png.

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

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

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

  11. Leave Pause at Frame 1 unchecked.

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


Add Kwik+Movie+Clip+Replacement to Twitter Add Kwik+Movie+Clip+Replacement to Facebook Add Kwik+Movie+Clip+Replacement to MySpace Add Kwik+Movie+Clip+Replacement to Del.icio.us Digg Kwik+Movie+Clip+Replacement Add Kwik+Movie+Clip+Replacement to Yahoo My Web Add Kwik+Movie+Clip+Replacement to Google Bookmarks Add Kwik+Movie+Clip+Replacement to Stumbleupon Add Kwik+Movie+Clip+Replacement 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
Tangled Heart with Illustrator

Saving SVG Files in Illustrator for Silhouette

Piecing the Mygrafico Logo Text for Animation

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