Home / how to / Creating a multi-language project with Kwik – Part 1

Creating a multi-language project with Kwik – Part 1

Multi-language ability is one of the top requests from (mostly) international Kwik users.  As the development goes on for version 1.8, I would like to provide this tutorial, enabling the interested ones to get ready for this new useful resource (design once, have it in multiple languages with a few clicks). Remember this is not a final version yet so, minor changes may appear before the beta-testing and final version launch.

At the end of this tutorial, you will be able to have a project like this:

Analyzing the project

First I created a regular Book project and designed page1 like this:

Screen shot 2011-12-11 at 11.21.32 AM

Checking the LAYERS panel you see:

  • kwkcover is the background used in all pages (originally it was name cover, and then I applied the Tools->Shared Assetcommand to allow it being saved only once but used in several pages)
  • kwkwitch is the little witch (I applied the same Tools->Shared Assettechnique here, as I will use her again in the next page)
  • 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:

Screen shot 2011-12-11 at 12.33.31 PM

Checking the LAYERS panel you see:

  • kwkcoversame background as first page;
  • kwkwitchsame witch from the first page (wearing black);
  • witchSpathe same witch (wearing white);
  • butBuy a light blue button that will appear only in the English page;
  • butCompre a light orange button that will appear only 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;

I exported all images and pages clicking the Preview button (the button with a tablet image, left side of the project name). After that, I disabled the Export Images option (via Settings panel, or clicking the second button from the left in the status bar, right side of “Version 1.7.2”), as it takes the exporting process longer and I have already all the images I wanted exported.

Setting you multi-language project

The next thing I needed to do now was to inform Kwik this is going to be a multi-language project. The way to do that is going to the Project menu, selecting the new button Multi-language settings:

Screen shot 2011-12-11 at 11.49.19 AM

Clicking the new button, I got this window:

Screen shot 2011-12-11 at 11.49.38 AM

I then clicked the + (add) button, and entered the language name and its identification code:

Screen shot 2011-12-11 at 11.50.01 AM

I did the same for the Spanish language. You will need to do this for EVERY language you plan to cover in your project.

Creating the language buttons

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

Screen shot 2011-12-11 at 12.37.58 PM

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

Screen shot 2011-12-11 at 12.02.31 PM

I then picked the English as this is the English button, right?

After adding the Set Language action, I also entered a GoToPage, sending it to the next page after the click.

I did the same for the Spanish button. This pretty much sets the first page. This is the result of this first page:

In the next posting, I will show how to make the magic in page2. Meanwhile, send your comments here!

* You have seen the Multi-layer and Languages settings at the end of the button window. I will cover it later. For now, they are not going to be used.

UPDATE: Since version 1.8 the Set Language feature changes the language and refreshes the current page (never triggering the GO TO PAGE used in this demo). In order to change pages in this demo, you will need to swipe pages with your finger or create another button to do it.

The reason of this change was due several requests that usually users pick a language, it refreshes the interface allowing them to understand the options in their own language, then then click a Read to Me or I Read button.

9 comments

  • Looks great! Can’t wait to see how it ends 😀 I really could use it.

    Just one question, will it be possible to change the language in real time at any moment of the book. I mean, if I am in page 6 of a book in english and I want to suddendly switch to spanish, will it be possible?

    Congratulations and keep up the good work!

  • is it possible to default the language to the device language setting and switch to app default if that language is not supported. e.g. a Norwegian device will switch to Norways if language is available and otherwise will default to english?

    • Marc,

      You could do it manually but not thru Kwik (at least in this version). I will add this suggestion in the future feature list.
      Thanks for the suggestion,
      Alex

  • Pictures are missing in this tutorial as well. I think it may be a problem with your permalinks being re-freshed. I would love to be able to follow this tutorial.

    • Thanks for this. The images were missed during the site update. I will work on that as soon as possible.

  • Pingback:Creating a multi-language project with Kwik – Part 2 | Kwiksher
  • Hi, thanks for your time making this tool, just a small typo. In spanish in not “Leia para Mi” is “Lea para mi” or “Léame”.
    Now I’m testing the version 2 of kwik and is working fine.

Leave a Reply

Your email address will not be published. Required fields are marked *

Privacy Preference Center

Strictly Necessary

these coolies are for WP-SpamShield, gdpr-wp, woocommerce, paypal

PHPSESSID, SJECT16, JCS_INENREF, JCS_INENTIM, gdpr, woocommerce_cart_hash, woocommerce_items_in_cart, woocommerce_recently_viewed, wordpress_, wordpress_logged_in_, wordpress_sec_, wordpress_test_cookie, wp_woocommerce_session_, AKDC, akavpau_ppsd

Functionality

WordPress cookie created when auto-saving a post in the editor.

wp-saving-post, wp-settings-, wp-settings-time-

Performance

google analytic

__utma,__utmb,__utmc,__utmz,_ga,_gid,_gat

Advertising