皆さん、こんにちは。
無料でキャラクター作成、今回は、オンマウス（マウスオーバー）で動くGIFにチャレンジします。
GIF画像は、動画では無く、画像として扱えるので使い易いですが、自動で始まってしまう為、ページ全体が少しざわざわします。瞬きの様な少なめの動作で有れば問題無いと思いますが、大きい動作の物だと、一寸、どうかなと感じました。
ループを1回の設定にする事も考えましたが、折角来てくれた方が、見落としてしまったり、もう1回みたいよね！となった時に、ページを移動して、再度、来てもらうのではなく、さっともう1回見れたらなぁと思います。
もう一つ、このやり方の面白い所は、動画が動き始めると言う事では無くて、マウスオーバーすると、今有る画像とGIF画像を入れ替える作業をすると言う事です。
じっくり読みこんで頂ける方も、いらっしゃるかと思いますが、さっと読んでいる方にもご案内が出来る１枚目を作ってみたいと思います。
マウスオーバーでGIFで検索した所、いくつか出てきたのですが、その中で、今回参考にさせて頂いたのが、ぼっちんさんの此方の記事です。ありがとうございます。
いくつかやり方は、有ったのですが、何故こちらのサイトを参考にしようかと思ったかと言うと、やり方自体は、皆さん、少しづつ、違う様でしたが、感じ的には、手間は同じ位と感じました。
此方の記事の中には、プラグインで無い圧縮サイトの案内も有りましたので、載せておきます。
圧縮サイト（此処ではGIF画像も圧縮出来ました）Compressor.io
これが、凄く良かったのです！前回、作ったGIF画像は、最終、1,4M程有りました。検索したいくつかのサイトで圧縮してみたのですが、4％圧縮出来ましたとか出て、えっ4％と思っておりました。
此処でやって見ると、728Kになりました！おー、凄い！これなら、有難いですね。
では、GIF画像を作りながら、最終、マウスオーバーで動く様にしてみます。
アニメも好きで見ていますが、綺麗な絵だと見ていても楽しいですね。折角、新しいソフトも使い始めたので、美しいアニメの様に出来ないかと、やって見たのすが、中々、簡単にはいきませんでした（当たり前ですね！）
今回は、新しく使い始めた動画編集ソフトを使いながら、良い感じに仕上げていきます。
2枚の画像を使ってみました。最初は、ポージングデスクトップで形を作って行きます。4人まとめて、ポーズを付ける事が出来るので（最大は5人まで）、関連性が判り易いです。カラーの方を見ると4人の状態できちんと影もは反映している事が分かります。
表情や光の感じは、再調整が必要ですが、右上の①エクスポートから、②シーンで4人まとめて保存が出来ます。最初のポーズ付けは4人分ですから、少々時間が掛かるかもですが、③左上のポーズ選択から、別窓が開きますので、既存ポーズやみんなのポーズ（投稿サイト）にお気に入りが有りましたら、流用する事も出来ますので、助けになります。
これでおおよそ画像が完成しましたので、VideoProc Vloggerで動画にしてみます。無料のソフトですが使い易いと感じます。ソフト自体は無料ですので、アップグレードの購入広告は無いのですが、その他の案内は有ります。これは、仕方が無い感じです。
ソフトが立ち上がったら、①メディア部分に原稿をドラッグします。順番通りに連番が付いていれば良いですが、まとめてダウンロードした場合、そのファイルをダブルクリックすると画面が切り替わり個別表示されます。又、右クリックすると、小窓が出てグループ解除が可能です。
基本の再生時間は、左上のタイトルマークから、設定、編集と進みますと出来ますので、やって見て下さい。
大まかな作りとしては、最初のご案内モノクロ画像にマウスを置くと、ふわっとモノクロ画像から、華やかなカラー画面に切り替わり、最後はフェードアウトします。マウスカーソルを外すと、カラー画像が出る様にしています。
画像が動くという感じよりかは、見に来て頂いた読者に方に、一寸、遊んでもらおうと言った感じで作ってみました。
文字が並んだページで、少し違った要素を表現出来ていたら幸いです。
最初は、出来た２枚目の画像とGIF画像をメディアライブラリーに登録します。
此処までは、大体、いつも通りだったのですが、カスタムHTMLの埋め込みと、センター表示に苦労しました。
よくメモ帳にコピーと書かれていますが、私はゲームもやるのでメモ帳にコピーします。文字が、一番端から始まるので、良く端の文字をコピー出来てなかったり、書き換える部分が少し間違っていて動かないとかホント有る有るです。
何とか出来たのですが、どうしても画像が左寄せになってしまうい、これが気になって何とかならないか探しましたが、中々見つからず、これは、ぼっちんさんに聞くしかないと、メッセージを送りますと丁寧な回答を、頂きました。
<div style=”text-align:center;” >
<img src=”GIFアニメーションの1枚目の画像のURL” alt=”GIFアニメーションの様子の説明文” width=”横幅” height=”縦幅” onmouseover=”this.src=’GIFアニメーションのURL'” onmouseout=”this.src=’GIFアニメーションの1枚目の画像のURL'”>
</div>
赤文字の部分が、さらに追加したコードです。
私は、alt属性の記述をさぼっていますので（すみません）青下線の部分は削除致しました。
赤文字の部分で、従来のコードを挟めば、良かったんですね！
そして、出来上がりがこちらです。
ループを1回にして、マウスカーソルを外したら、最後のカラー画像で止まるようにしました。これで、落ち着いて文章も読んで頂けたらと思います。
これで何とか、自分のやりたかった方向に出来ました。参考にさせて頂いたぼっちんさんに感謝致します。ありがとうございます。
そしてご覧頂い皆さん、ありがとうございました。
おつかれさまでした。
コメント