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.

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
Open the mockup .psd file for that page and copy the second background layer.
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.
In the Kwik panel, click the Layers and Replacements icon in the Categories bar.
With the fadeToDark layer still selected, click the Layer Properties tool in the Toolset.
In the dialog box, check the box for Export image as jpg and save.

Now we can add the fade animation to this layer.
Click on the Animations icon in the Categories bar.
Click on the Linear Animation tool in the Toolset.
In the Linear Animation dialog box, keep the fadeToDark layer selected.
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.
Duration: Let's keep this set to 3 seconds and 0 Delay.
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%.
Loop: We will only play this animation once. Select the Times radio button and set the loop number to 1.
Starts: We want the animation to start immediately when the page starts.
Click Create.

Now we need to set the fadeToDark layer initially to 0% transparency.
With the fadeToDark layer still selected, click the Project and Pages icon in the Categories bar.
Click the Hide Layer, Group or Page tool in the Toolset.
In the Hide Element dialog box, keep the fadeToDark setting and click Create.
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.

|