;#;
[[misc_doc#Miscellaneous Tupi Resources|Back to Previous Page]]
;#;
=====Lip-Sync Tutorial=====
====Introduction====
In this tutorial, we will make a basic lip-sync exercise following a complete workflow using two free software projects: **Papagayo** and **Tupi**. Papagayo is developed by a company called **[[http://lostmarble.com/|Lost Marble]]**, and Tupi is developed by **[[http://maefloresta.com|MaeFloresta]]**.

First at all, we need to download and install both programs:
    * Download and install Papagayo from http://lostmarble.com/papagayo/

{{ wiki:papagayo_ui.png }}

    * Download and install Tupi following [[install_tupi|these instructions]].

{{ wiki:tupi_lipsync_ui.png }}

====Part 1: Working with Papagayo====

Now, to start making our example we will need:
    * A sound file. In this case, a **WAV** file with the sentence we want to create the lip-sync, in this case: **"Maybe next time, huh?"** {{wiki:maybe-next-time-huh.wav}}
    * A {{wiki:mouth.zip|set of files (mouth.zip)}} with the mouth shapes of the phonemes for all the possible representations of a mouth when the character we are animating is speaking. By default, Papagayo has a {{wiki:papagayo_mouths.zip|group of different mouths (papagayo_mouths.zip)}} that you can use, just as a guide of the shapes you will need for your own mouth design.\\
It is important that you pay attention to the file names, because they matter for Papagayo, so, when you create your own mouths, remember to use exactly the same file names as in this example: **AI, E, etc, FV, L, MBP, O, rest, U, WQ**.

{{ wiki:papagayo_mouths.png }}

What we are doing here is to use one of the Papagayo predefined mouth sets, just to make easier this explanation.

**Note:** Any kind of image format is supported by Tupi, so you can create your mouth sets as **PNG**, **JPG** or even **SVG** files if you want to. 

Ok, that's it. Now, let's play with Papagayo a little, to create our lip-sync example:

    * The first thing we have to do here, is to load the sound file from the **File** menu -> **Open** option, in this case the **WAV** file mentioned previously. 
{{ wiki:papagayo_open1.png }}

    * Once we loaded it, you will see that Papagayo creates a visual representation of the voice you are working with. This representation will be useful to adjust the timing of the words in the sentence further.
{{ wiki:papagayo_open2.png }}

    * The next step is to fill the **Spoken text** field with the words that form the sentence in the sound file. In our case, the words: **"Maybe next time, huh?"**.

{{ wiki:papagayo_text.png }}

    * Now, if we click on the play button in the toolbar, look what happens. The preview player in the right side of the interface, allows us to watch, how the lip-sync for the sentence is going to look like. As it was said before, you will be able to adjust the words or even the whole sentence in the timeline, if you consider that there are timing issues when you play the lip-sync.

{{ wiki:papagayo_play.png }}

    * Ok, now we have to save the Papagayo project from the **File** menu, using the option **Save**. 

{{ wiki:papagayo_save1.png }}

    * So, we are going to use the extension **PGO**, which is the default Papagayo extension for lip-sync projects. Let's call the file **next_time**.

{{ wiki:papagayo_save2.png }}
-----
====Part 2: Working with Tupi====

Now, we have the three elements that we need to import the Papagayo exercise into Tupi:
   - The lip-sync file (**PGO** file)
   - The sound file (**WAV** file)
   - The set of mouth shapes (directory with the mouth image files)

So, let's open Tupi and create a new project.

{{ wiki:tupi_lipsync_newproject.png }}

Now, we have to go to the **Miscellaneous Tools** button, and click on the option **Papagayo lip-sync Files**. 

{{ wiki:tupi_lipsync_misc_tools.png }}

{{ wiki:tupi_lipsync_papagayo_files.png }}

In the right side of the interface, you will see the Papagayo panel to show up. So, click on the **+** button to import our example.

{{ wiki:tupi_lipsync_papagayo_panel.png }}

{{ wiki:tupi_lipsync_papagayo_add.png }}

You will see a small dialog to appear:

{{ wiki:tupi_lipsync_papagayo_form.png }} 

    * In the first field we just need to pick the **PGO** file.
    * In the second field, we need to pick a directory, where the mouth images are stored.
    * In the third file, we just need to pick the **WAV** file.

When we are done, we just click on the **OK** button. And that's it, now our Papagayo project is part of our Tupi animation project.

{{ wiki:tupi_lipsync_papagayo_imported.png }}

If we want to edit the position of the mouth, we can do it by clicking on the **Edit** button (Pencil icon), from the Papagayo panel.

{{ wiki:tupi_lipsync_papagayo_edit.png }}

A green node will show up on the canvas over the mouth, we can drag it and locate it wherever we want.

{{ wiki:tupi_lipsync_node.png }}

Now, we will add an eyes image into my animation to make it a little more fun. So first, we activate the **Static Background** mode: 

{{ wiki:tupi_lipsync_static_bg1.png }}

{{ wiki:tupi_lipsync_static_bg2.png }}

Then, we go to the **Library** panel and import the image from there:

{{ wiki:tupi_lipsync_library.png }}

{{ wiki:tupi_lipsync_import_image.png }}

{{ wiki:tupi_lipsync_load_image.png }}

{{ wiki:tupi_lipsync_eyes.png }}

Finally, we go back to the **Frames Mode** to play our lip-sync animation!

{{ wiki:tupi_lipsync_frames_mode.png }}

{{ wiki:tupi_lipsync_done.png }}

Well, that's it. Now you know how to do lip-sync exercises using Papagayo and Tupi.
-----
;#;
[[misc_doc#Miscellaneous Tupi Resources|Back to Previous Page]]
;#;