ブランコ (鞦韆)

ブランコを正面から見るとこのような動きになります。

これは「遠近感」を表示するのに使う 「台形」フィルタ を利用することになります。

ブランコといった素材はこういったアニメに向いたものは殆どないでしょう。 ブランコに乗せるものは何も人間・人形でなくてもいいでしょう。
もしロープでなくチェーンを使うのでも、この程度のサイズであれば輪が 4 〜 5 個あればいいでしょう。 サイトナビに使うのであれば、チェーンからぶら下がっているパターンでもいいと思います。

step 01 動いていない、つまり「2」や「4」の状態の画像を作ります。

この画像は 80 * 60 です。

「1」 → 「2」、「2」 → 「3」、「3」 → 「4」、「4」 → 「1」と段階を追って、コマ画像を作ることになりますが、コマ数が多いと滑らかにはなるが、「重く」なるのでその辺を勘案しながらの作業と言うことになります。

私が見た海外サイトのものは 80 x 80 で 25 コマ構成で 29kb 余というものでした。 実際には下 27 ピクセルは働いていないので、80 x 53 と言ってもいいものです。 チェーンは丸い部分を 4 つで済ませていました。

「2」 → 「3」に向かって作ります。

step 02

2 枚目以降は「イメージのリサイズ」で横幅を変えずに高さだけを変えます。

5 ピクセル高さを縮めます。

step 03

フィルタを適用する前に「選択範囲」 → 「すべて」を選択します。

そして「フィルタ」 → 「変形」 → 「台形」を適用します。

「選択範囲」を設定しなければ、PictBear SE が落ちてしまうので注意。

これで「2」 → 「3」の部分が終わり、ブランコが後ろへ行ったことになります。

step 04 「3」 → 「4」は今できたのを逆の順序で並べます。 このとき最後のコマ画像は重複させる必要はありません。

step 05 今度は「4」 → 「1」ですが、リサイズは同じようにします。

台形フィルタでは「マイナス」にします。

プレビュー部分を省略していますが、裾が広がるのがわかるはずです。

繰り返して同様にします。 すると「4」 → 「1」が終わり、逆順に並べたものが、「1」 → 「2」になります。

これがでjきあがったすべての画像になります。 16 枚あるので 16 コマと言うことになります。

背景を透過しない場合も、「giam」に読み込んだときに「消去方法」は「何もしない」でなく「背景色でつぶす」にしなければなりません。

背景の透過

変形させること自体はたいした作業ではありません。 ところが変形させると、特に「補間機能」の弱い PictBear SE ではその対処が手間になるでしょう。

これはほかのソフトだと周辺部だけなのですが、PictBear SE ではこのように中央部でさえ、色の値が変わっていることを物語っています。

「ビュー」 → 「オプション」で「塗りつぶし」の範囲を小さくして、バケツツールで塗るのです。

範囲の値を「1」にすると、「連続した同じ色」の部分だけを塗ることになるのです。

こうすれば、ほかに似た色があっても、中に流れ込むといった心配がなくなるのです。

背景を塗りつぶしたとき、ついでに所々にオレンジや黄色のドットを入れてあります。
最前面や最後面では「30」にしてほかは「17」のウェイトですが、動きはガタガタと言うほどでないと思います。

こういったものでは「透過」しようがしまいが、ファイルサイズには影響しません。 ここでは「64色」保存のものを表示させていますが、16.7kb ほどで、これを 256 色保存すると、24.1kb ほどになります。

メニュー提供 : DHTML Menu By Milonic JavaScript