土曜日, 3月 23, 2024

How to use Trangram 01 
簡易マニュアル

新たに、フリーで使いやすい機種依存しないオンライン版のGIFアニメーションツールTrangramを発見したので、プチ連載してみることにしました。

Trangram
https://www.trangram.com/

この連載は以下で確認できます。

サイトに入った直後の画面です。

[TUTORIALS]をクリックすると・・・
YouTubeのチュートリアルページに移動します。

[FEATURES]をクリックすると・・・
特徴紹介のページに移動します。

About Trangram
Trangramは、モーショングラフィックを作成、アニメーション化、共有するための無料のワンストッププラットフォームです。 Trangramのパワフルで使いやすいツールを使えば、コードを書くことなく簡単に魅力的なモーショングラフィックを作成することができます。 

Features
以下の機能デモは、Trangramエディタを使って作成されています。

Round the corner/角を丸める
コーナーツールは、図形の角を丸くしたり、シャープにしたりできます。 丸め、逆丸め、面取り、三角形から多角形、半円など、あらゆる種類の図形に対応します。
Combine shapes/図形の組み合わせ
ブーリアン演算は、すでにあるシェイプを結合、減算、交差、除外して新しいシェイプを作成できます。Combine shapes]はIllustratorのパスファインダーのような機能です。
It's morphing time/モーフィングタイム
正方形を円にしたり、星をハートにしたり、どんな形でも簡単にモーフィングアニメーション化できます。
Let stroke dance/ストロークを踊らせる
トリムパスは、線や図形を描くためのデジタル消しゴムのようなものです。アニメーションの中で線やシェイプの一部を徐々に消したり見せたりして、舞台の幕が開いたり閉じたりするように、滑らかに現れたり消えたりするように見せることができます。ドローイングやデザインエレメントを使ったすてきなアニメーションを作成できるクールなツールです。
Follow me/フォローして
モーションパスは、アニメーションするオブジェクトのガイドトラック的なものです。道路を走る車のように、特定の経路をたどりながら、ある場所から別の場所へスムーズに移動できるようにします。アニメーションの中のオブジェクトを、コントロールされた美しい方法で、行きたいところへ行かせるのに便利なツールです。
Parenting/ペアレンティング
ペアレンティングとは、あるオブジェクトを別のオブジェクトにコントロールさせる方法です。2つのオブジェクトをリンクさせることで、1つのオブジェクトを動かしたり変更したりすると、もう1つのオブジェクトもそれに追従したり、協調して反応したりします。アニメーションやビジュアルエフェクトを作成する際に、異なる要素がスムーズに連動する必要がある場合にとても便利です。
Endless loops/エンドレス・ループ
ループは、シンプルなループ、前後のパターン、連続したシーケンスなど、アニメーションの繰り返しをコントロールするのに役立ちます。

Cycle/サイクル: 終わったら最初から繰り返します。動いているオブジェクトの場合、元の位置に戻って再び動きを開始し、連続的なサイクルを作成します。

Ping Pong/ピンポン: ボールが2つの壁の間でバウンドするように、アニメーションは前方に再生され、反転し、繰り返されます。

Continue/続続: アニメーションで現在のサイクルを終了させ、中断したところから続けることで、永遠に続くようなスムーズで中断のないアニメーションのループを作ります。
Move at the right speed/適切なスピードで動く
タイミング機能は、アニメーションの動きのペースやスタイルをコントロールします。なめらかに動くか、急に速くなるか、ゆるやかに減速して止まるかを決めます。イーズイン、イーズアウト、イーズインアウト、ステップ機能など、多くのオプションがあります。
Look through a hole/穴から覗く
クリップマスクはステンシルのようなもので、画像やオブジェクトの特定の部分を表示し、それ以外の部分を隠すことができます。写真の上に切り抜きを置いて、切り抜きの中にあるものだけを見せるのに似ています。クリップマスクは、写真の特定の部分に焦点を当てたり、オブジェクトや画像の一部を見せたり隠したりしてアーティスティックな効果を作り出したりするのに便利です。
コレラについては検証後に後日手順をアップします。

[OPEN ENTER]をクリックすると・・・
編集画面に入ります。

MENU メニュー
New 新規作成
Save 保存
Import 読み込み
Export 書き出し

SETTING 設定
Artboard 作業エリア
Preferences 環境設定

ツール類はこんな感じです。 パスモード切替(※)でツール表示が3つほど追加されます。

※上図の左側の状態なら選択はIllustratorの選択ツール。右側の状態なら選択はIllustratorのダイレクト選択ツール。