背景の設定

背景

指定されたコンテンツは読み込めません。piapro(ピアプロ)のイラスト閲覧ページのURLのみ指定できます。作者がTextAliveでの利用を禁止しています。

指定されたイラストは改変しないでくださいコラボのメンバー限定オリジナルライセンスが付与されているのでライセンスが明示されていないので貼り付けできません。

配信元
制作者

概要チュートリアル

このチュートリアルでは、動画ページの使い方の概要をご紹介します!

動画を再生する

ここをクリックすると動画を再生・一時停止できます。

歌詞タイミングを編集する

この「タイムライン」と呼ばれるエリアには歌詞の発声タイミングが表示されます。横軸は時間です。

フレーズ、単語、文字の段に表示されている四角形はそれぞれが1フレーズ、1単語、1文字の発声時間を表しており、ドラッグなどで編集できます。

下から二段目の「音量」はシークバーになっており、ここをクリックすることで再生位置を好きなところへ移動できます。

一番下の段はスクロールバーになっており、ここをドラッグすることで曲中の好きな範囲のタイミング情報を見ることができます。

文字ユニットを選択する

まずタイムラインで見た目や動きを編集したいフレーズ・単語・文字を選択します。

選択は、クリックか、ドラッグで行います。ドラッグでは複数の文字ユニットをまとめて選択でき、便利です。

一度選択した文字ユニットは、もう一度クリックするか、何もないところをクリックすることで選択解除できます。

文字の見た目を調整する

この「編集パネル」で選択した文字ユニットの見た目を変えることができます。

「テンプレート」には、文字の動きを決めるアルゴリズムのうち、現在選択している文字ユニットに適用できるものがリストアップされます。

作ったものを保存する

「保存」メニューをクリックすると、編集した歌詞のタイミングや動画を保存できます。

保存された歌詞のタイミングや動画は即座に誰からでもアクセスできるようになります。作った動画をみんなに見てもらいましょう!

おわり

これで動画ページの概要チュートリアルは終了です。TextAliveをお楽しみください。

なお、このチュートリアルは、画面右上の?メニューからいつでも見ることができます。

テンプレート実装チュートリアル

このチュートリアルでは、文字の動きを決めるアルゴリズムである「テンプレート」の実装方法をご紹介します!

ソースコードを編集する

テンプレートのソースコードはJavaScriptの関数(クラス)として記述されており、このエディタで書き換えることができます。

テンプレートのクラスは最低限s.name, this.type, this.animateプロパティを持つ必要があります。

テンプレートAPIの仕様は使い方(テンプレートAPI)を、エディタの詳しい使い方は使い方(コードエディタ)をご覧ください。

テンプレートを更新する

ソースコードを編集したら、「更新」ボタンをクリックします。そうすると、変更内容が動画に即座に反映されます。

「コミット」は「更新」に加え、変更内容をTextAliveサーバにアップロードします。これにより、修正内容を他の人が利用できるようになります。

テンプレートを変更・追加した場合、動画を他の人も同じように再生できるようにするためには「コミット」が必須であることに注意してください。

テンプレートを追加する

TextAliveには、テンプレートを新しく作成するための専用メニューはありません。

新しいテンプレートを作成するには、既存のテンプレートの関数名を書き換えて「更新」または「コミット」してください。これにより、新しいテンプレートが登録されます。

編集中の動画で既存のテンプレートを使っていた文字ユニットは、すべて新しいテンプレートを使うように変更されます。ただし、以前保存済みの古い動画は更新されません。

おわり!

これで動画ページの編集チュートリアルは終了です。TextAliveをお楽しみください。

なお、このチュートリアルは、画面右上の?メニューからいつでも見ることができます。

User-Generated Variables

This demo shows a novel interaction design named User-Generated Variables, which enables proposing new features of the video templates.

Lyrics text on Timeline

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.

Templates for Animation

TextAlive provides templates that define animation algorithms.

The user can select a favorite template and customize its parameter to author the video.

Template customization

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.

User-Generated Variables

This demo shows a novel interaction design named User-Generated Variables, which enables proposing new features of the video templates.