このチュートリアルでは、動画ページの使い方の概要をご紹介します！
ここをクリックすると動画を再生・一時停止できます。
この「タイムライン」と呼ばれるエリアには歌詞の発声タイミングが表示されます。横軸は時間です。
フレーズ、単語、文字の段に表示されている四角形はそれぞれが1フレーズ、1単語、1文字の発声時間を表しており、ドラッグなどで編集できます。
下から二段目の「音量」はシークバーになっており、ここをクリックすることで再生位置を好きなところへ移動できます。
一番下の段はスクロールバーになっており、ここをドラッグすることで曲中の好きな範囲のタイミング情報を見ることができます。
まずタイムラインで見た目や動きを編集したいフレーズ・単語・文字を選択します。
選択は、クリックか、ドラッグで行います。ドラッグでは複数の文字ユニットをまとめて選択でき、便利です。
一度選択した文字ユニットは、もう一度クリックするか、何もないところをクリックすることで選択解除できます。
この「編集パネル」で選択した文字ユニットの見た目を変えることができます。
「テンプレート」には、文字の動きを決めるアルゴリズムのうち、現在選択している文字ユニットに適用できるものがリストアップされます。
「保存」メニューをクリックすると、編集した歌詞のタイミングや動画を保存できます。
保存された歌詞のタイミングや動画は即座に誰からでもアクセスできるようになります。作った動画をみんなに見てもらいましょう！
これで動画ページの概要チュートリアルは終了です。TextAliveをお楽しみください。
なお、このチュートリアルは、画面右上の？メニューからいつでも見ることができます。
このチュートリアルでは、文字の動きを決めるアルゴリズムである「テンプレート」の実装方法をご紹介します！
テンプレートのソースコードはJavaScriptの関数(クラス)として記述されており、このエディタで書き換えることができます。
テンプレートのクラスは最低限s.name, this.type, this.animateプロパティを持つ必要があります。
テンプレートAPIの仕様は使い方（テンプレートAPI）を、エディタの詳しい使い方は使い方（コードエディタ）をご覧ください。
ソースコードを編集したら、「更新」ボタンをクリックします。そうすると、変更内容が動画に即座に反映されます。
「コミット」は「更新」に加え、変更内容をTextAliveサーバにアップロードします。これにより、修正内容を他の人が利用できるようになります。
テンプレートを変更・追加した場合、動画を他の人も同じように再生できるようにするためには「コミット」が必須であることに注意してください。
TextAliveには、テンプレートを新しく作成するための専用メニューはありません。
新しいテンプレートを作成するには、既存のテンプレートの関数名を書き換えて「更新」または「コミット」してください。これにより、新しいテンプレートが登録されます。
編集中の動画で既存のテンプレートを使っていた文字ユニットは、すべて新しいテンプレートを使うように変更されます。ただし、以前保存済みの古い動画は更新されません。
これで動画ページの編集チュートリアルは終了です。TextAliveをお楽しみください。
なお、このチュートリアルは、画面右上の？メニューからいつでも見ることができます。
This demo shows a novel interaction design named User-Generated Variables, which enables proposing new features of the video templates.
The Timeline interface shows lyrics text. Each phrase, word, and character can be assigned animation templates.
For now, let's use the first phrase as an example.
TextAlive provides templates that define animation algorithms.
The user can select a favorite template and customize its parameter to author the video.
By manipulating the parameter values, the user can look for desirable visual effect.
Please play with some parameters and think of what is missing in the current template implementation.
If you want to propose something, click the "Propose " button below.
This demo shows a novel interaction design named User-Generated Variables, which enables proposing new features of the video templates.