Snowman sample

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

You can download the tutorial files at

• https://www.kwiksher.com/tutorials/Kwik4/SnowMan.zip

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

page1

• snowman
• house
• tree
• text
• start

Snowman animation

• shake widget
  • degress 15
  • duration/speed 0.1
  • delay 0
  • Loop 3 times
  • waite request

create an action

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

• Name:action_sman
• play animation

the action name is “action_sman” is used later.

Snowflake - multiplier

• amount 20 copies
• time interval 0.5 sec
• rotation between 0 to 45 degree
• play forever
• Boundary X between 0 to 1024
• Boundary y between -500 to 0
• Enable physics Normal
• Wait request

action snow

• Name:action_snow
• play multiplier for snowFlake

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

• add audio: ohno

• read me file

• Loop times 1

• Play when page starts is disabled.

  

Sync Audio & Text

now you set sync the read me audio & text

sync aduio and text

• Aduio file: ohno

• Import From Audacity ohno.txt

• Text Hight light color is pink

• Show Play button

  

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.

• timecode snowman

  

• timecode snow

  

Audacity

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

• Open an audio file

• Drag the time with mouse to select the wave area.

• Tracks > Add lable at selection (Command + B on Mac, Ctr+B on Win)

• File > Export

• File > Export Lable

  

House

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

• add a dash symbole - before the layer name, the layer with - won’t be published

  

Tree

the tree image is reused for other tree layers.

• select tree2, tree3, tree4 layers together.

  

then click the layer properties from layer & replacements

• Render as tree in Export Properties is set

  

Path Animation with breadcrumbs

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

Path Animation

• Layer: hat

• Path: Path1

• Auto turn

• Duration 3 sec

• Loop times 1

• Starts: When page starts

• Breadcrumbs

  • Enable
  • From: Center
  • Shape: Circle
  • Width/Radius: 3 px, Height 10px

• Color rand (it means random color)

• Interval: 50

• Dispose after 1 sec

  

Add Page2 using page1

use page1.psd but not copying the components

• Use page1.psd is checked

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

• Group: gp_hat_snowmn
• X:605, Y:273
• Duration 3 sec
• Loop times 1
• Starts: When page starts

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.

• Layer: hat
• Group animation controls end position
• Duration 3 sec
• Loop times 3
• Reverse at endng
• Starts: When page starts
• Return to start after play

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.

• select mutlple layers to export only the selected images
• shift key to export the selected single layer

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

• When publishing only current page, start Simulator in the current page

Don’t check the following for the final app build

• Export sample icons. It will overwrite your icons.
• Export each image inside group(layer set). It will generate unused images.
• Show memory used in the Terminal. This is a debug mode to check memory leaks.

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.