本文へスキップ

Kwik App Design Book: 16 Multilingual


Created Thursday 01 January 2015

The multi lingual tutorial is updated for kwik3 and now four languages to be handled.
Please download the following zip. It contains the following files and the final build lua and image files for your reference.

http://www.kwiksher.com/tutorials/Multi/Multi_Lingual_Sample.zip

To follow this tutorial, please find the following files in the zip.
photoshop files

  • page1.psd
  • page2.psd

readme audio files

  • en_narration.mp3
  • ja_narration.mp3
  • pt_narration.mp3
  • sp_narration.mp3

timecodes(Audacity label) files

  • en_labels.txt
  • ja_labels.txt
  • pt_labels.txt
  • sp_labels.txt

ref. How to use Audacity is here http://kwiksher.com/user-guide/sync-audio-and-text-replacement/

1 Open page1.psd in photoshop


2 Select New project


New Project window. Set the following values to Project info

Name:Multi_Lingual
Device:iPad Mini
Orientation:Landscape
Use page1.psd checked

3 Open Page2.psd and add it to the kwik project


Project and Pages > Add new page

Add page windows, enter title page2 and Use page2.psd checked. Click OK

Switch to Pages view and you see page1 and page2
ii

page1 layers

  • langTxt device's language settting will be displayed
  • Candice Title text
  • butRead_sp Spanish button
  • butRead_pt Portugal button
  • butRead_ja Japanese button
  • butRead_en English button
  • kwkwitch With image
  • kwkcover backgroound image

page2 layers

  • father_ja Japanese text
  • father_pt Portugal text
  • father_sp Spanish text
  • father English text
  • butFlyOver_jp Roll over image for Japanese button
  • butFly_ja Japanese button
  • butFlyOver_pt Roll over image for Portugal button
  • butFly_pt Portugal button
  • butFlyOver_sp Roll over image for Spanish button
  • butFly_sp Spanish button
  • butFlyOver   Roll over image for English button
  • butFly English button
  • witch  English witch
  • witch_sp  Spanish witch
  • witch_ja  Japanese witch
  • witch_pt  Portugal witch
  • kwkcover  background image

4 Publish

Publish images firstly before working interactions and readme settings.
Export images icons enabled in orange color and Publish

When publishd, you may click Compress PNG files

Check it with Corona Simulator. OPEN and select document's folder Kwik > Multi_Lingual > build to find the main.lua


Swipe to navigate the pages
ii

Then diisale Export image. The icon color should be in gray. It is faster for kwik to publish lua codes for buttons, readme, anmations and so on without re-creating image files.

※If you add or modify a layer's image. You can publish with the layer only to re-create the image file. Hold shift key and click Publish as Export image disabled. This is the trick to publish one layer or selected layers only. Disable Export image but Publish with Shift key pressed.

5 Add Languages

Add languages to Project properties

Select Languages tab in Project Properties window

Click + icon next Languages and set Language Name and ID.

Name:English
ID(2 chars):en
Disable Read right to left

Repeat to add Spanish, Japanese and Portugal

Save the Project properties

P.S.
ID(2 char) should be the ones defined in iOS and android. For example, Japanese ID is ja not jp. Another problem is about iOS's pt-BR. It is the language code for portgual in Brazil. You may have to be aware pt and pt-BR exsist. In the last section of this tutorial, I explains how to handle pt and pt-BR together.

6 Read to me button in page1

Select butRead_en layer in Page1. Let's set it as a button.

Interaction > Add button

In Add Button window, set Name as but_en and select Interactions: Set Language

In Set Language window, choose English and disable Reaload Page. page1 is the title page and the button will open the page2. Thus it is unnessary to reload page1.

Next add Interactions:Read to me. This enables Read to me.

In Set Read to Me window, Enable Read to Me and Go to NEXT page automatically, both of them are checked

Now you can save the button setting. Click Create.

Make Japanese, Spanish and Portgual buttons as well.

7 readme audio files - Page2

the file name of each readme audio files must start with ID(2 chars) otherwise it fails.

  • en_narration.mp3
  • ja_narration.mp3
  • pt_narration.mp3
  • sp_narration.mp3

In page2, let's register those readme audio files.

Project and Pages > Add audio

In Add Audio window, select en_narration.mp3 with Browse button

read Me file is checked
Play when page starts is checked
Loop is 1 time
Language is English

Save the setting

Add Japanese, Spanish and Portugal readme audio files as well. Don't forget to set the language with it.

8 Sync Audio and Text replacement

For Spanish,

  • sp_labels.txt
  • sp_narration.mp3

For English,

  • en_labels.txt
  • en_narration.mp3

For Japanese,

  • jp_labels.txt
  • jp_narration.mp3

For Portugal,

  • pt_labels.txt
  • pt_narration.mp3

Sync audio and text to English father layer. Select father layer firstly.

Click Layers and Replacements > Sync audio and text replacement and Sync Audio and text window appears.

Use page read Me audio file checked and make sure en_naration is selected
Import from Audacity, select en_labls.txt

en_labels.txt is loaded the timecodes.

Text Highlit color is set as Yello.

Click Create to save the setting.

Do the same Sunc Audio and Text replacement for father_ja, father_sp and father_pt layers. Set each Audio(xx_naration) and Audacity labes(xx_labels.txt) and the text highlit color as yellow.

9 Set Language to a layer

In page1, user clicks one of Read to me button and one language is selected. In page2, the text and read me audio is displayed for the selected language. The non-selected language layers should not be displayed.

Select father layer and set language as English to it.

In Set Language window,

Language group:  NEW the new group will hold father, father_ja, fahter_sp and father_pt
Language: English

Select father_sp layer and Set Language as Spanish and the language group is father that has been created above.

Select father_pt layer and Set Language as Portugal and the language group is father

Select fathe r_ja layer and Set Language as Japanese and the language group is father

Each father_xx is belonged to father group and one of the layer in the father group will be choosen to user choice.

10 Animation set with language

witch, witch_sp, with_ja and witch_pt will animate with user's selected language. The animation setting to the witch of English is applied to the other three witches. You don't have to create 4 animations. Just one animation is reused.

Animation > Linear animation to witch layer

Linear Animation window and the name is set as linear_witch

Name:linear_witch
x: -20
y:-100
Alpha: 1%
Loop: 1 time
Starts: Wait reguest

This animation will be used with each Language.

11 Animation with Language

By seting language and a language group to a layer, the layer behaves as same as the language group does. Firstly set English to the witch layer and create a new language group.

Set Language window

Language group: NEW witch, witch_sp, witch_ja, witch_pt will be the member of the group
Language : English

Set Langugae for witch_sp layer is Languge group is witch and Language is Spanish

Set Langugae for witch_pt layer is Languge group is witch and Language is Portugal

Set Langugae for witch_ja layer is Languge group is witch and Language is Japanese

Now the animation setting of witch is ready to be applied to witch_sp, witch_pt and witch_ja according to the selected language.

12 Button to start witch animation

Finally configure the button to start the animation according to the selected language. The button setting contains Set Language option inside the setting window. Assign the language to each button and set the linear animation.

Firstly select butFly layer and click Interaction > Add button

In Add Button Window, Name is but_Fly and Over state is butFlyOver is seleted

Name: but_Fly
Over state:butFlyOve
Interactions:Play Animation with linear with
Language group: NEW , butFly_pt, butFly_sp, butFly_ja will join the group
Language: English

Secondly create a button for butFly_sp. Select butFly_sp layer and click Add button

Name: but_sp
Over state: butFlyOver_sp
Interactions:Play Animation is set with linear_witch. the same linear_witch of English is used
Languge group: butFly
Language: Spanish

the but_sp has to be belonged to the language group of butFly.

Here is the button setting for butFly_pt layer for Portugal

Name: but_pt
Over state: butFlyOver_pt
Interactions:Play Animation is set with linear_witch. the same linear_witch of English is used
Languge group: butFly
Language: Portugal

Here is the button setting for butFly_ja layer for Japanese

Name: but_ja
Over state: butFlyOver_ja
Interactions:Play Animation is set with linear_witch. the same linear_witch of English is used
Languge group: butFly
Language: Japanese

pt-BR

There is one issue in iOS about portugal codes. iOS returns either pt or pt-BR. pt-BR is for Brasil. To handle both pt and pt-BR, please use fix_pt.lua. It is in Multi_Lingual_Samplei.zip.

Project and Pages > Add Main lua External Code

In Add Code to Main.lua Page window, click + icon

Browse button to select fix_pt.lua

Create the external code and save the setting.

OS language Code

To check what language code returned from a device, create a variable from Project and Pages.

Add Varible window, Name the variable as userLang and set the value as composer.lang. The content is Formula/Boolean is selected.

Name:userLang
Value:composer.lang
Content: Formula/Boolean

In page1, langTxt layer is replaced with Dynamic text replacement.

Set the associated variable to userLang

Publish and Device build

Publish and check the behaviors in Corona Simulator

Build the app for device. The language setting in iPhone/iPad/Android will be displayed in langTxt layer. The folloing screen shot displays 'ja'