本文へスキップ

Kwik App Design Book: 20 Recording


Created Saturday 10 January 2015

The following zip contains the psd files and the build folder for your reference
http://www.kwiksher.com/tutorials/Multi/Recording_Sample.zip

Page1.psd

Page2.psd

Open Page1.psd and Page2.psd. Create a new Kwik project with iPad Mini. I name it Recording
Use page1.psd is checked

Then add page2 with Add new Page

the title is page2
Use page2.psd checked

Publish images firstly before you do buttons/interacions etc

Corona Simulator to check the images published

Now begin to work with page1. Select Record layer and make a button to record your voice.

In Add Button window, Name:but_record and select Record Audio

In Record and Play Audio window, input Duration 5 secounds and Create Record action

Click Create button at the bottom to close the window.

Next select Play layer to make a button to play back the recorded voice.

In Add Button window, Name: but_play and select External Code.

In Recroding_sample zip, you find myvoice.lua and choose it and create an external code

External code is added. Click create button at the bottm to close the window.

Select Cnt layer to to make a countdown while recording voice.

In Countdown Replacement window, add time to 5 sec as same as the time interval for recording and set Starts:Wait request

Click Create button at the bottom to close the window

"Cnt" Countdown is created

Then add ths "Cnt" countdown to the but_record. Select "Cnt" to add actions for the button.

When page1 opens, let's play the voice recorded. Project and Pages > Actions to add a new action.

In Add Action window, Name as act_play and select External code to add myvoice.lua.

When the page starts, a timer to play the action above

In Add Timer window, set Duration 0 second and Loop count is 1

Timer is created.

Page2.psd

Create the same interactions as same as page1 and additinaly when user press the record button, do a linear animation to appear the countdown and when recording is finished, display off the countdown.

Create act_play, but_play, but_recrod, Cnt and timer_start as same as page1.

Add a linear animation to Cnt layer

In Linear Animation window, Name as linear_appear. Loop count is 1 and set Starts as Wait request

Make another Linear aniamtion for Cnt layer. Name as linear_disappear with set Alpha 0%. Select Starts as Wait request.

Then add the linear_appear to the but_record button. Select Play Animation to add linear_appear.

To display off the countdown when countdown is finished, firstly create an action and this action is called when countdown is completed. Project and Pages > Action

In Add Action window, select Play Animation to add linear_disappear.

Now you can add act_disappear to the Countdown repleacement window of "Cnt"

Lastly, you can make the opacity 0% to "Cnt" layer when the page2 is displayed

Publish without exporting images.Witout exporing images,it is a trick to set "Cnt" layer's opacity to 0% in lua code only.