ここのところ毎日スーパーで買い物しているのですが、お菓子と菓子パンコーナーは避けています。見ると絶対に買いたくなってしまうので。私にとっては危険区域です。
木曜日, 3月 28, 2024
水曜日, 3月 27, 2024
IllustratorとInDesignのマスク設定の差異
IllustratorとInDesignのマスク設定を時々混乱するので整理しました。
Illustratorの場合は画像の上にマスクしたい図形を配置します。図形の塗りや線はどんな設定でも問題ありません。
次に画像と図形の両方を選択してから［オブジェクト］＞［クリッピングマスク］＞［作成］で、上に配置した図形でマスクが行われます。
InDesignも同様にクリッピングマスク機能があると便利なのですが、残念なことにクリッピングマスク機能はありません。そこで、Illustratorと同様の前準備（※）をします。
※画像の上にマスクしたい図形を配置
次に画像をcontrol X（command X）でメモリーに読み込み・・・
図形を選択したから［編集］＞［選択範囲内へペースト］で、元の位置を保ったまま選択した図形内にペーストされます。チョットPowerPoint的ですね。
TCDW7989
関係ない方向にどんどん吸い込まれるように
資料を調べていると、関係ない方向にどんどん吸い込まれるように調べるべき方向がズレていくのは学生の頃からのお約束。脱線逆走は日常茶飯事〜ですね（^o^）
火曜日, 3月 26, 2024
How to use Trangram 02
基本設定と操作の流れ
サイトに入ったら左上の［setting］をクリックし、続けて［artboard］をクリックし・・・
作成したいアートボードのサイズを設定し、必要に応じてアートボードの色も設定します。
次に左上の［setting］をクリックし表示サイズを設定し右端のアイコンをクリックしてセンターに表示指定をします。
最後に画面下の［timeline setting］をクリックしてアニメの再生タイムやフレームレートを設定します。ここでは4秒としました。
ここから、スタート位置にシークバーがあることを確認して矩形を作成。
シークバーを1秒の位置に移動し矩形を移動後に45°回転し色も変更します。shiftキーを併用して矩形のコーナー部分にカーソルを近づけるとカーソルが回転に変わります。
シークバーを2秒の位置に移動し矩形を移動後に45°回転し色も変更します。
シークバーを3秒の位置に移動し矩形を移動後に45°回転し色も変更します。
シークバーを4秒の位置に移動し矩形を移動後に45°回転し色も変更します。ここでは最初の位置の移動し、色もスタート時と同じにしました。
完成したら左上の［menu］＞［Export］からgif形式で書き出します。それ以外の形式ではアニメーションデータは生成されません。また、書き出し後に再度［menu］からTG形式で書き出します。TRはネイティブファイル形式なので後日［Import］して編集の続きを行うことが出来ます。
※なお、この書き込み時点ではWebpで書き出して再生されました。しかし、2024/05/23の段階では、Webpで書き出したモノはムービーとはならず制止画になり、Webp形式でのムービー書き出しはWebm（VP9）を指定します。ただし、ブラウザーでは表示で来ますが、このBlogに配置できませんでした。
TCDW7988
40年も経っているから探さない方が良いかも
春の長雨〜寒い〜出かけるときの服に困る〜の、ネバーエンディング・ストーリーですね。幼心の君はどこにいるのかな〜。いや、40年も経っているから探さない方が良いかも〜（^o^）汗
月曜日, 3月 25, 2024
Let's start JavaScript 26
背景画像をミラー反転切り替え
背景画像をミラー反転切り替えてみました。意外と難しく、チョット思い描いたイメージにはなりませんでした。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Fade In, Fade Out, and Flip Background</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
position: relative;
background-color: black;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
animation: fadeInOutAndFlip 8s infinite;
}
/*.backgroundクラスに対し、
fadeInOutAndFlip名のアニメーションを適用。
これにより、背景画像がフェードインし、
その後フェードアウトし、最後に左右反転して再表示。*/
@keyframes fadeInOutAndFlip {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
transform: scaleX(-1);
}
}
</style>
</head>
<body>
<div class="background"
style="background-image: url('pic/background.jpg')"></div>
</body>
</html>
<!-- index.html -->
下は処理結果のイメージです。
しっかり表示させてから切り替わった方がいい感じですね。チョット研究してみます。
TCDW7987
ババナシェイク（隠し味にリンゴ）になっています
ウェアのサイズが合っていない間抜けなエイリアン。そう言えば、毎朝ババナを1ポン食べていたのですが、唐突に2月中旬からババナシェイク（隠し味にリンゴ）になっています。いつまで続くのか謎です。
日曜日, 3月 24, 2024
綿棒ケースでフルサイズレンズ用簡易フード
APS-Cサイズのカメラにフルサイズのレンズを付けると焦点距離が長くなるので純正のフードでは物足りなくなります。そので簡易フードを作成してみました。
用意するのは綿棒の空きケース。底を抜いて内側に黒い紙などを貼り付けるだけです。
説明用にセッティングしたのは・・・
SONY α NEX-6
NIKKOR 55mm F1.2
作成した簡易フードを装着した状態。マスキングテープや輪ゴムなどで固定すると良いかもしれません。
TCDW7986
一番外出しない時期なのに処理しなくてはならないコトが多く
いよいよ3月も末に突入してきました。1年で一番外出しない時期なのに処理しなくてはならないコトが多くてPCにかじりついています。体に良くないですよね〜。
土曜日, 3月 23, 2024
How to use Trangram 01
簡易マニュアル
新たに、フリーで使いやすい機種依存しないオンライン版のGIFアニメーションツールTrangramを発見したので、プチ連載してみることにしました。
Trangram
https://www.trangram.com/
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のダイレクト選択ツール。
※なお、この書き込み時点ではWebpで書き出して再生されました。しかし、2024/05/23の段階では、Webpで書き出したモノはムービーとはならず制止画になり、Webp形式でのムービー書き出しはWebm（VP9）を指定します。ただし、ブラウザーでは表示で来ますが、このBlogに配置できませんでした。
登録:
投稿 (Atom)
