GOMISTATION

馬之翁塞

カテゴリ:雑記 > 技術面の雑記


マウスオーバーで画像が変わるってあるじゃないですか。
ちょっとこれやってみたいなと思い、試行錯誤中。


【素材元画像】
49]
53]


 
やり方分かりました。オッケーオッケー。
ちなみに、このCGはモーフィングです(メタモルフォーゼのデジタル表現)。
要するに、こういうことですかね。

<img onmouseout="this.src='A0102'" onmouseover="this.src='B0102'" src="A0102">
マウスオーバーした時に画像URLをそのままコピペするか、アップロードサーバーのファイル名から場所指定してやるかだけの話ですね。Aは初期状態、Bはオーバーマウスした状態。

こんなことに躓いてるのはぼくだけだと思う!
けど、これ面白いし便利ですね。
他にも画像系の属性があったら、また雑記で更新します。  


■『彼氏彼女の事情』 13話 増尾爆発
 20140801054546


いやーやっとこさ出来ました。
やっぱ、パソコンは苦手ですね。

くどうさんと大匙屋さん、本当にありがとうございました。「ファイルマネージャってなんだよ…FTPとかわけわかんねーぞ…ファイル名に全角入れたらダメなのか…やべえやべえ何にも分かんねえ」という感じで右も左も分からぬ中、この上なく丁寧に教えてくれたお二方、ありがとうございます。特に僕の初歩的な質問にも答えてくれたくどうさん、本当にお疲れ様でした。助かりました。


以下、参考にさせて頂いたサイト様
JavaScriptスライダー ニャル子さん 
「プリキュア」EDダンスから見る技術、演出の変遷と3DCGアニメの可能性 6/5


■比較する映像
「サクラ大戦3」OP

■比較する5つの画像サイズ
・1920×1080(元画像)
・960×540(元の1/2)
・480×270(元の1/4)
・240×135(元の1/8)
・120×68(元の1/16)

■gifクオリティの条件
・全コマ数 50
・ウェイト1~49:7(1/100s) 50:60(1/100s)
・256色
・インターレース
・無条件ディザ
・出来るだけパレットを統一


★1920×1080:48.6MB
20140731103840


★960×540:12.7MB
20140731103839


★480×270:3.54MB
20140731103838


★240×135:1.03MB
20140731103837


★120×68:0.32MB(317KB)
20140731103836 


僕から見ると、1920から480までは差が感じられませんでした。
240になって初めて画像の劣化に気づき、120では流石に粗すぎるなあという印象です。

結論としては、元画像の1/4までのリサイズなら、別に劣化にも気付かないんじゃないのかなと思います。(※そんなに細部までこだわらない人は、1/8でも大丈夫だと思う!imgタグでサイズ調整すんのが少し面倒くさいけど)まあ今回、動画からgifアニメを作るWebアプリ Giraf を作りましたという記事で出ていたGirafを使ってみまして、上のと同じ長さでのデータ量が12MB前後と比較的重く、だけどそういや普段あまりgifのデータ量に気を使ったこと無いなと思い、比較検証してみました。

動画を自動gif化してくれるのは便利ですが、コマ送りをして気付くことも多々あるので、当面はコマ送りでgifを作り続けると思います。何よりプレビュー画面とかが無いのが厳しい。Webアプリだから、そういうの入れちゃうと重くなっちゃうんだろうけど。

後は色数を落として、やってみるとかでもデータ量の変化はあると思いますが、比較はめんどいので今はやりません。(※画像サイズを変更せずに色数だけを順番に落としていくとか、画像サイズを変更して色数も落とすとか…)また機会とやる気があればやるかもしれません、期待はしないでね。

↑このページのトップヘ

©GOMISTATION 2012-2017 All rights reversed