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

Clairvoyance: 08:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

Fade-in Effect for Kwik 2 Storybook App


The Linear animation can be used to create many effects in your book apps. In our sample project, the story calls for the sky to suddenly turn dark because of a storm. We can use the Linear animation and the Hide Layer feature to create this effect on the background of the scene.

We will use two background graphics that are identical except for the color of the sky. As with all the pages in the app, the initial background graphic is on the bottom layer in the Layers panel and has a blue sky. The background that will fade-in will have a darker sky. Because the second background will be on a layer directly above the initial background layer, we get the illusion that the sky has turned darker as the second layer gradually becomes opaque (100% alpha).

As you can see from the .psd mockup file, this will require us to have two graphics on this page that are both the full size of the screen. As we have mentioned before, large graphics can use a lot of memory which can be problematic. However, it will help to export both these layers as jpg images, keeping the file size to a minimum.

We will be using the Kwik Linear Animation feature, as we did with the page turn animation. But this time, we will not be moving anything on the layer. We will be changing the opacity of the layer from 0% to 100%. Creating this fade-in effect is a two step process.

First, we need to create the linear animation that will fade-in the second background graphic until it is fully visible (100% alpha). In order for the layer to slowly become visible over 3 seconds, we need to tell Kwik to make the layer invisible at the start of the animation. Therefore, our second step is to use the Hide Layer feature to initially hide that layer.

Open your project in to Photoshop.

  1. In our sample project, page11 will contain the fade animation. Select page11 in the Page/Components section of the Kwik panel. You should see "@ page11" at the top of the section

  2. Open the mockup .psd file for that page and copy the second background layer.

  3. Go back to the page11.psd file and select the bottom layer. From the Photoshop Menubar, click Edit - Paste to add a new layer above the bottom layer containing the second background from the mockup file. Name the new layer "fadeToDark".

    We need to tell Kwik to export this layer as a jpg.

  4. In the Kwik panel, click the Layers and Replacements icon in the Categories bar.

  5. With the fadeToDark layer still selected, click the Layer Properties tool in the Toolset.

  6. In the dialog box, check the box for Export image as jpg and save.

    Now we can add the fade animation to this layer.

  7. Click on the Animations icon in the Categories bar.

  8. Click on the Linear Animation tool in the Toolset.

  9. In the Linear Animation dialog box, keep the fadeToDark layer selected.

  10. Although we are using the Linear animation for this effect, we won't be changing the X and Y positions for this layer. Keep the current settings.

  11. Duration: Let's keep this set to 3 seconds and 0 Delay.

  12. We want to tell Kwik to fade-in the layer up to 100% Alpha. Because the layer will be set to a 0% alpha at the start, Kwik will know to increase the percentage of opacity to 100% over the 3 second duration. Keep the Alpha setting at 100%.

  13. Loop: We will only play this animation once. Select the Times radio button and set the loop number to 1.

  14. Starts: We want the animation to start immediately when the page starts.

  15. Click Create.

    Now we need to set the fadeToDark layer initially to 0% transparency.

  16. With the fadeToDark layer still selected, click the Project and Pages icon in the Categories bar.

  17. Click the Hide Layer, Group or Page tool in the Toolset.

  18. In the Hide Element dialog box, keep the fadeToDark setting and click Create.

  19. From the Photoshop Menubar, click File - Save to save your changes to the page11 .psd file.
We have only made changes to one page of the app. So we only need to export that page again. Click the Export Current Page Only icon in the Status bar. Then click Publish.

With your app open in the simulator, use the Pages button to open the navigation bar and select the page11 thumbnail. As the page loads, you should see the sky turn dark.

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 Fade%2Din+Effect+for+Kwik+2+Storybook+App to Twitter Add Fade%2Din+Effect+for+Kwik+2+Storybook+App to Facebook Add Fade%2Din+Effect+for+Kwik+2+Storybook+App to MySpace Add Fade%2Din+Effect+for+Kwik+2+Storybook+App to Del.icio.us Digg Fade%2Din+Effect+for+Kwik+2+Storybook+App Add Fade%2Din+Effect+for+Kwik+2+Storybook+App to Yahoo My Web Add Fade%2Din+Effect+for+Kwik+2+Storybook+App to Google Bookmarks Add Fade%2Din+Effect+for+Kwik+2+Storybook+App to Stumbleupon Add Fade%2Din+Effect+for+Kwik+2+Storybook+App 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