ウェブサイトへの着せ替え機能の実装

質問

ウェブサイト上でよくある、Flashなどで動く着せ替え機能について質問させていただきます。
仕事上で着せ替え機能の採用が決まりまして、導入に際してどういったアプローチがあるのかお聞きしたく思います。

定番なのはFlashでの動作なのですが、当方HTMLやCSS・jQueryを少しかじった程度ですのでどうしても敷居が高く感じています。
これからの流行としてもFlashは過去のものとなる傾向があるようにも感じられ、できることならjQueryなどでどうにかならないかと思っています。

まだまだ勉強中のみですのでjQueryで動作可能かどうかすら判断がつかなく、困っています。
少し調べてみた印象では、
・メインとなる画像の配置
・jQueryで適当にサムネイル製作、透過PNGでパーツを表示
・パーツをクリック、absolute指定でメイン画像にオーバーレイ表示
・商材の関係上パーツによってメイン画像を動かさなければならないので、パーツをクリックしたタイミングでメイン画像もabsolute指定で位置変更
なのですが、これで正解なのでしょうか？

以前の投稿などを覗くと、簡単なものであればHTML/CSSで可能との回答もあり、上記の方法が間違っているようでしたら具体的なプログラミング方法もご教授いただきたいです。

参考URLのみでも構いません。よろしくお願い致します。

回答No.1

shockatz · ベストアンサー

えー、まず、用語の定義がおかしいです。

Flash技術に対比されるのは、HTML/CSSによるデザイン要素配置です。
で、それを制御するのがJavaScriptであり、簡単に使えるようにしたものがJavascriptのライブラリであるjQueryです。
そちらが「jQuery」とおっしゃっているのは、おそらくjQueryプラグインのことで、スライダーやイメージギャラリのように、初期設定まで全部jQueryでやってもらうものだと思います。

そういう意味では、貴社なりの表現が必要なカスタマイズ分野には、適合するjQueryプラグインはありません。
CSSを用い、透過処理のアルファ情報を含む32bit画像の重ねを、jQueryなどでインタラクティブに実現していきます。
やっていることは、FlashをActionScriptで制御していることに似ています。配置する画像データのメモリ制御や、動きのスムーズさなど、複雑なものになるとFlashを使った方が何倍もいいでしょうけど。。

Flash代替ということでは、いっそ、HTML5/SVGを使う方法はどうでしょうか。
長らくオーサリングツールがなく、また制御するJavascriptライブラリが未開発だったのですが、ようやくAdobeがいい感じの製品群を出してきました。

まだ実績がなく、自分も様子見の状態ですが、Edgeが使えるようになってきているようです。

Adobe Edge Animate
http://html.adobe.com/jp/edge/animate/

Edge AnimateのJavascriptライブラリCreateJSです
http://www.createjs.com/#!/CreateJS

SVGアニメーションはこれで決まりかな？　と思います。
まだ人身御供状態ですが、チャレンジする根性はありますか？

お礼

shockatzさま、早速のご回答、ありがとうございました。

インストール後、試用してみました。
結果から申しますと、まさに求めていたソフト。とりあえず３つほどパーツに着せ替えられるものができあがりました。
画像をしっかりと作り込み、エフェクトなど勉強すれば実践で使えそうです。
SVGがなんなのか、から調べ始めていますが、新しい知識が見に付いている実感あり仕事がおもしろくなってきました。
スマートフォンで動くのが特に良く、質問の際記載はしていませんでしたがFlashですとiPhoneでの動作ができない部分が懸念点でした。

用語の定義、申し訳ございません。雰囲気では分かっていましたが、自分の中での定義付けがしっかりしていませんでした。
そこを適切に汲み取り、訂正してくださった上に代替案のご提示、真にありがとうございます。
なんとなく使っていたjavascriptなどの定義も大変参考になりました。

仕事も先が見え、ほっしています。
OKWave、はじめて質問させていただきましたが、その力を思い知らされました。
以後また質問させていただくことがあるかと思いますが、その時はよろしくお願い致します。