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