Snowman sample

In Snowman sample, you will learn the following things. They are common techniques of Kwik

You can download the tutorial files at

.psd is 768 x 1024. Please use iPad mini to create a new Kwik project.

page1


Snowman animation

create an action

this action will be kicked to start from the audio sync with text at the timing of ‘snowman’ word.

the action name is “action_sman” is used later.


Snowflake - multiplier

action snow


Read Me Audio

read to me is created to myText layer. You find ohono.mp3 and ohno.txt files in the sample. ohono txt contains the timecodes that are created with Audacity. see Audacity section below.

  1. add audio ohono.mp3 as read to me audio
  2. sync audio&text to myText layer

Let's add ohno.mp3


Sync Audio & Text

now you set sync the read me audio & text

sync aduio and text

the small speaker icon at the head of the read me sentence will be displayed and user can click to play the read to me.

By clicking the first cell of snowman and snow in the timecodes table, you can set the action to the word. When the audio is playing, the timeline reaches the word, it fires the action.


Audacity

To create the timecode file, use Lavel function in Audacity. You can download Audacity from here https://sourceforge.net/projects/audacity/


House

The house layer is under construction so we like to ignore while publish images with Kwik.


Tree

the tree image is reused for other tree layers.

then click the layer properties from layer & replacements


Path Animation with breadcrumbs

Path1 is created from the left to the right. The hat will fly along the path

Path Animation


Add Page2 using page1

use page1.psd but not copying the components


Layer_1 background

the background layer is common and also don't need to be PNG transparency. So let's render as jpg and share Layer_1 between page1 and page2.

Goto page1 and select Layer_1 and then open layer properties.

Do as same as for Layer_1 of page2 too. Now Kwik does not duplicate Layer_1.jpg and the image file is created just under build4/assets/images folder to be shared


Animation with group

you can put hat and snowman into a group. Select hat and snowman layer together and click Create Groups

You can click + icon to add a layer to the group.

Setting Linear animation to the group, the hat and the snowman moves together.

Linear Animation to gp_hat_snowmn

Linear Animation to hat

you add scale, transparency or rotation to the hat additionally but you won't move the hat away by linear animation shifting the x and y position. You can avoid the x and y translation by checking Group control end position.

small hat slanted a little

big hat slanted a bit more and the group position is transalted onto the ground


Publish

You can control how kwik exports images by selecting multiple layers or holding down the key when selecting a single layer.

From setting window, you can control which page to open with corona simulator

Don't check the following for the final app build

Note

Alert if images are odd width/height is no longer used, you find Use bilinear interpolation to the increase image resolution. Images with ddd width/height are automatically resized and then Kwik generates the images for smaller devices. See the screen shot below.