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
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


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