ラベル Trangram の投稿を表示しています。 すべての投稿を表示
ラベル Trangram の投稿を表示しています。 すべての投稿を表示

水曜日, 5月 29, 2024

How to use Trangram 15 
ペアレンティングでボブルヘッド風動作

質問がありましたので・・・
ペアレンティングでボブルヘッド風の動作を演出してみました。

Trangram

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

まずパーツを整理して作成します。名称をしっかり設定しないとワケワカメになるので要注意です。パーツの構造は・・・

flower(花)
right_leaf(右_葉)
left_leaf(左_葉)
>face(顔)
>right_eye(右目)
black(黒)
white(白)
>left_eye(左目)
black(黒)
white(白)
mouth(口)
petal2(花びら2)
petal1(花びら1)
calyx(萼)
stalk1(茎1)
stalk2(茎2)
stalk3(茎3)
stalk4(茎4)

ペアレンティング設定で中心点を今回は下に作成しました。上図で言うと顔を一番上になるからです。

ここでペアレンティング設定を行います。
ペアレンティング設定については以下を確認してください。


次ぎにパーツ全体を選択してから1秒、2秒、3秒、4秒の位置にコピーします。alt(option)キーを併用してドラッグすればコピーを作成出来ます。

コピーを完了した状態です。

ここで1秒に位置で花と茎を選択しcontrol(commnad)キーを併用して回転させます。

同様にして3秒に位置で花と茎を選択し、control(commnad)キーを併用して回転させます。これで設定は完了です。
 
※なお、この書き込み時点ではWebpで書き出して再生されました。しかし、2024/05/23の段階では、Webpで書き出したモノはムービーとはならず制止画になり、Webp形式でのムービー書き出しはWebm(VP9)を指定します。ただし、ブラウザーでは表示で来ますが、このBlogに配置できませんでした。そのため、上のムービーはGif書き出ししたモノを配置しています。

月曜日, 5月 27, 2024

How to use Trangram 14 
パス操作の基本と作り込み

質問がありましたので・・・
前回の背景イメージの作成を整理しました。パスツールでの処理なのでIllustratorなど他のツールでも同様の処理です。

Trangram

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

作業は上図の←部分をクリックして[Layer Mode]と[Path Mode]を切り替えながら行います。まず四角形を作図します。作図は[Layer Mode]と[Path Mode]のどちらでもOKです。

続けて[Layer Mode]としてから作成した四角形をalt(option)キーを併用してドラッグすることでコピーを作成します。コピーした四角形に色を適宜変更しておきます。

次ぎに垂直方向のサイズ調整します。



更に上図ように位置調整を行います。ここで[Path Mode]に切り替え上から2つ目のツール(Vector Tool)を選択し、パス上の任意の位置をクリックしてポイントを追加します。



ここで[Path Mode]に切り替え上から2つ目のツール(Vector Tool)を選択し、追加したポイントををalt(option)キーを併用してドラッグするとハンドルが引き延ばされるので、塩のママ右下に引っ張ると上図のように形状が変化します。

次ぎにalt(option)キーを併用してドラッグすることでコピーを作成し、サイズと色を適宜変更しておきます。



後は形状のハンドルを動かして形状を変更・・・



ポイント移動やハンドル調整で2つの形状の関係を適宜調整します。

最後に線幅を0に変更すれば結果として無しとなるので完成です。

土曜日, 5月 25, 2024

How to use Trangram 13 
グループ化と追加パーツの関係

今回はグループ化と追加パーツの関係を整理しました。

Trangram

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

始めにBlue_ballを作成後グループ化して、画面の右端下に配置します。以下はBlue_ballの構造です。

>Blue_ballをグループ化)
left_hand
>faceをグループ化)
 left_eye
 right_eye
 mouth
body
right_hand

続けて1秒(右上)、2秒(左下)、3秒の位置に複製を作成し、3秒の位置で左端上に消える状態とします。

次ぎに、2秒の位置の右端上にOrange_ballを作成します。構造はBlue_ballと同様です。画面上で目視出来る位置で作成してから位置を右端上に移動させます。以下はOrange_ballの構造です。

>Orange_ballをグループ化)
left_hand
>faceをグループ化)
 left_eye
 right_eye
 mouth
body
right_hand

続けて3秒(右下)、4秒(左上)、5秒の位置に複製を作成し、5秒の位置で左端下に消える状態とします。

配置を確定したら微修正に入ります。

背景を一番下に作成し・・・

Blue_ballの1秒、2秒、Orange_ballの3秒、4秒位置で動きを付けます。ちなみに。2秒地点でパーツを動かすと3行地点の形状も同じになる点に注意、3秒地点で更に動きを与える感じですね。

最初と最後を隠すのはエンドレス表示対策です。

完成イメージです。

※なお、この書き込み時点ではWebpで書き出して再生されました。しかし、2024/05/23の段階では、Webpで書き出したモノはムービーとはならず制止画になり、Webp形式でのムービー書き出しはWebm(VP9)を指定します。ただし、ブラウザーでは表示で来ますが、このBlogに配置できませんでした。そのため、上のムービーはGif書き出ししたモノを配置しています。

水曜日, 5月 22, 2024

How to use Trangram 12 
ペン操作とグループ化

順番が少しズレてしまいましたが、Drawツールとしてのペンツール操作とグループ化について整理してみました。

Trangram

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

赤丸で括ったアイコンをクリックして、デフォルトの[Layer Mode]から[Path Mode]へ切り替えることでAdobe Illustratorのようなペン操作ができます。

[Vector Tool]を選択し、任意のポイントを摘まめば・・・

そのまま移動することが出来ます、このあたりの流れは完全にIllustratorと同じです。

線上のポイントの無い部分をクリックすると、その位置にポイントが追加されます。ポイントをControl(Commnad)キーを併用してクリックすると、ポイントは消去されます。

ポイントをAlt(Option)キーを併用してクリックすると、ハンドルが消去されます。


ハンドルが無くなってしまっても、そのポイントをAlt(Option)キーを併用して引っ張るとハンドルが逆方向にも同じ長さだけ追加されます。一度ハンドルを追加したら、穂別に長さを調整することが出来ます。

名をキャラクターのように複数のパーツドエ構成されているデータの場合は全体を選択してからグループ化を行うことで後処理が楽になります。

上はグループ化した状態です。グループ化しても、パーツ毎に動作の調整は可能です。

※なお、この書き込み時点ではWebpで書き出して再生されました。しかし、2024/05/23の段階では、Webpで書き出したモノはムービーとはならず制止画になり、Webp形式でのムービー書き出しはWebm(VP9)を指定します。ただし、ブラウザーでは表示で来ますが、このBlogに配置できませんでした。

木曜日, 5月 09, 2024

How to use Trangram 11 
カウントダウン・カウントアップ

スタート地点とエンド地点に数値を指定しただけで、カウントダウン・カウントアップのアニメーションを作成することが出来ます。

Trangram

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

まず下準備として背景画面の色を赤に変更してみました。

「Count」と「001」を別のトラックに作成し、右端のパレットにてサイズや書体を変更します。

次に数値のスタート地点を再確認し・・・

エンド地点にて増える数値に変更します。コレでスタート地点の001空スタートし、今回のエンド位置5秒後の100までのアニメーションが完成です。

ちなみに数値の位置をLeftやRightに変更しても数値変更時のブレは直りませんでした。

※なお、この書き込み時点ではWebpで書き出して再生されました。しかし、2024/05/23の段階では、Webpで書き出したモノはムービーとはならず制止画になり、Webp形式でのムービー書き出しはWebm(VP9)を指定します。ただし、ブラウザーでは表示で来ますが、このBlogに配置できませんでした。

土曜日, 5月 04, 2024

How to use Trangram 10 
Easing設定でアニメの動作調整(2)

Easing設定でアニメの動作調整の違いを整理しました。今回は第2回です。


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

上から・・・
Ease Out - Expo
Ease Out - Quint
Ease Out - Quart
Ease Out - Cubic

上から・・・
Ease Out - Bounce
Ease Out - Elastic
Ease Out - Back
Ease Out - Circ

上から・・・
Ease In Out - Quart
Ease In Out - Cubic
Ease In Out - Quad
Ease In Out - Sine

上から・・・
Ease In Out - Back
Ease In Out - Circ
Ease In Out - Expo
Ease In Out - Quint

上から・・・
Step - 10
Step - 7
Ease In Out - Bounce
Ease In Out - Elastic

※なお、この書き込み時点ではWebpで書き出して再生されました。しかし、2024/05/23の段階では、Webpで書き出したモノはムービーとはならず制止画になり、Webp形式でのムービー書き出しはWebm(VP9)を指定します。ただし、ブラウザーでは表示で来ますが、このBlogに配置できませんでした。