If you want to reproduce this tutorial, feel free to download the PSD and audio files here.

Analyzing the project

First I created a project and designed page1 like this:

Checking the LAYERS panel you see:

• kwkcover is the background used in all pages
• kwkwitch is the little witch, named Candice
• butRead is the English button (reads “Read to Me”), and will be used to set the language of the project;
• butLeia is the same button but now for the Spanish selection (reads “Lea para Mi”);
• Candice is the title of the storybook;

For page2, I created:

Checking the LAYERS panel you see:

• kwkcover same background as first page;
• kwkwitch same witch from the first page (wearing black – will be used for the English version);
• witchSpa the same witch (wearing white – will be used for the Spanish version);
• butFly a light blue button that will appear only in the English page;
• butFlyover a light green button, used as over state in the English page;
• butVolar a light orange button that will appear only in the Spanish page;
• butVolarover a light yellow button, used as over state in the Spanish page;
• father is the English text line (reads “My father is nice!”, to be used when the reading is in English;
• padre is the Spanish text line (reads “Mi padre es bueno!”, to be used when the reading is in Spanish;

As you many know already, I like to export all images before starting the interactions. So, I exported all images and pages clicking the Publish button. After that, I disabled the Export Images option (via Settings panel, or clicking the second button from the left in the status bar), as it takes the exporting process longer and I have already all the images I wanted exported.

Setting the project languages

The next thing I needed to do now was to inform Kwik this is going to be a multilingual project. The way to do that is going to the Project and Pages toolset, then clicking the Multi-language project properties button:

Clicking the + (add) button, I entered the 2 languages ID and name (in our case en for English and sp for Spanish). Using the correct, 2 digits, locale ID for the language will automatically start your application using the default language from the device. If the device language id does not match with any id from your project, your app will start in the “default” language (the first one configured) – for more info here, check the feature documentation here;

Creating the language buttons

Still in page1, I selected the butRead and attached a button to it (via Interactions->Add Button). It opened the following window:

I selected the Set Language action, which opened the window:

I then picked the English as this is the English button and disabled the Reload page checkbox. Doing this, Kwik will set the language control to English, without reloading the current page.

After adding the Set Language action, I also entered a Set Read to Me interaction, which will enable the auto play for the audio (we are going to create it later) and move the user to the next page after the click.

I did the same for the Spanish button. This pretty much sets the first page.

In the next posting, I will show how to do the magic in page2.