![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ウェブサイト上でよくある、Flashなどで動く着せ替え機能について質問させていただきます。
仕事上で着せ替え機能の採用が決まりまして、導入に際してどういったアプローチがあるのかお聞きしたく思います。
定番なのはFlashでの動作なのですが、当方HTMLやCSS・jQueryを少しかじった程度ですのでどうしても敷居が高く感じています。
これからの流行としてもFlashは過去のものとなる傾向があるようにも感じられ、できることならjQueryなどでどうにかならないかと思っています。
まだまだ勉強中のみですのでjQueryで動作可能かどうかすら判断がつかなく、困っています。
少し調べてみた印象では、
・メインとなる画像の配置
・jQueryで適当にサムネイル製作、透過PNGでパーツを表示
・パーツをクリック、absolute指定でメイン画像にオーバーレイ表示
・商材の関係上パーツによってメイン画像を動かさなければならないので、パーツをクリックしたタイミングでメイン画像もabsolute指定で位置変更
なのですが、これで正解なのでしょうか?
以前の投稿などを覗くと、簡単なものであればHTML/CSSで可能との回答もあり、上記の方法が間違っているようでしたら具体的なプログラミング方法もご教授いただきたいです。
参考URLのみでも構いません。よろしくお願い致します。
No.1ベストアンサー
- 回答日時:
えー、まず、用語の定義がおかしいです。
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さま、早速のご回答、ありがとうございました。
インストール後、試用してみました。
結果から申しますと、まさに求めていたソフト。とりあえず3つほどパーツに着せ替えられるものができあがりました。
画像をしっかりと作り込み、エフェクトなど勉強すれば実践で使えそうです。
SVGがなんなのか、から調べ始めていますが、新しい知識が見に付いている実感あり仕事がおもしろくなってきました。
スマートフォンで動くのが特に良く、質問の際記載はしていませんでしたがFlashですとiPhoneでの動作ができない部分が懸念点でした。
用語の定義、申し訳ございません。雰囲気では分かっていましたが、自分の中での定義付けがしっかりしていませんでした。
そこを適切に汲み取り、訂正してくださった上に代替案のご提示、真にありがとうございます。
なんとなく使っていたjavascriptなどの定義も大変参考になりました。
仕事も先が見え、ほっしています。
OKWave、はじめて質問させていただきましたが、その力を思い知らされました。
以後また質問させていただくことがあるかと思いますが、その時はよろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- 防犯カメラ・監視カメラ・小型カメラ VHSを高画質な動画ファイルにしたいです。 3 2022/05/06 12:08
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
日本の白地図の画像に、都道府...
-
トリミングで表示した画像をク...
-
サムネイル画像と表示される画...
-
C#で画像を他の画像に貼り付け...
-
UWSC「画像が無い場合」
-
VBAのユーザーフォームのイメー...
-
ウェブサイトへの着せ替え機能...
-
uwcs のマクロで画像認識をして...
-
gif 画像上の ボタンに リン...
-
自分のfc2ブログの記事の本文内...
-
背景画像の繰り返しについて
-
画像の比較
-
画像を表示するには
-
イメージマップを使うと、一部...
-
uwscの画像認識に失敗します。
-
C#のForm内に複数画像を繰り返...
-
Excel ユーザーフォームで表示...
-
EXCEL VBA 複数のImageコントロ...
-
jqueryスライダーを2段でスライ...
-
NoxPlayerとUWSCのadbの座標に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【EXCEL VBA】ダブルクリックで...
-
背景画像の繰り返しについて
-
EXCEL VBA 複数のImageコントロ...
-
「using Windows」でエラーが出る
-
jqueryスライダーを2段でスライ...
-
画像のピクセルデータの取得
-
ImageMagickでgif画像の一部が...
-
Excel ユーザーフォームで表示...
-
uwcs のマクロで画像認識をして...
-
uwscの画像認識に失敗します。
-
vb.net 画像の透過について
-
VBA シート毎に画像挿入
-
UWSC 画像判定と条件分岐について
-
UWSC「画像が無い場合」
-
gif 画像上の ボタンに リン...
-
Pythonでgif画像が上手く作れない
-
VBAのユーザーフォームのイメー...
-
UWSC 画像認識で条件分岐
-
パネルに画像
-
【WPF】画像の切り替え
おすすめ情報