ここであっているのでしょうか？

前あるHPでイラストが置いてあり、そのイラストに別のイラストでいろいろと飾り付けをする事が出来る様に作っている人がいました。それはどうやったら出来るのですか？

No.5 ベストアンサー 回答者： BlurFiltan 回答日時： 2005/11/04 21:45

＃２の BlurFiltan です。

>> natatinさんの載せているHPの感じだったので多分JavaScriptだと思います(大汗)
>> また質問してあれなんですが、どうしたら出来るか分りますか？

と書かれていますが，
＃３の方の書かれているページは，その方法を詳しく説明されたページなのですよ…
このサンプルは，他の方にも同様に作ってもらえるように，詳しく説明されたもので，
そのサンプルくらい丁寧に，解説することは不可能です。

とりあえず＃３の方の書かれているページ，
http://park1.wakwak.com/~lambchop/kisekae.html
をまず，クリックしますよね。
そして，表示されるページで，

■きせかえ遊びのページへＧＯ！
（別ウィンドウが開きます。）

というのをクリックすると，別窓で着せ替え人形が動かせるページが表示されますよね。
そのページの着せ替える画像がない部分を右クリックしてください。
つまり，*　*　*　*　みたいに書いてある背景の部分です。

その画像がない部分を右クリック→「ソースの表示」 でおそらくメモ帳が開きますから，その「ソース」を見てください。
それが，ページを表示させるとともに，動くようにしているしくみです。
ちゃんと，どのファイルを変えれば何が変わるかまでわかりやすく書いてくれています。

簡単にするには，まずその「ソース」を「○○.html」という名前で，自分のPCに保存します。
そしてそのソースに書かれている，moe.js も同じフォルダに保存します。
moe.js は外部の JavaScript で，実行ファイルの一種になると思うので，直接URLを書くわけには行きません。おそらくルール違反になると思います。
だから，URLの先頭の h を取って書きます↓。

ttp://park1.wakwak.com/~lambchop/moe/moe.js

↑これの先頭に半角小文字の h を付けて，ブラウザのアドレス欄にコピペしてEnterキーを押してください。
保存するかどうか聞いてくると思うので，「保存」をクリック。
先に保存したソースのHTMLと同じフォルダにそのままの名前で保存してください。

そして，最初に保存した HTML ファイルをブラウザで開くと画像の抜けた，ページが表示されると思います。
それで，ソースに書いてある，このような部分の

moe ( 256, 20, "cowgirl_hat.gif", "カウガール帽子") ;
moe ( 255, 317, "body.gif", "ラムチョップ:体", 0 ) ;
moe ( 202, 535, "bal_shu.gif", "バレエシューズ") ;
moe ( 346, 568, "nurse_body.gif", "看護婦さん") ;
moe ( 69, 522, "bal.gif", "バレリーナ") ;
moe ( 101, 9, "marin.gif", "セーラー服") ;
moe ( 199, 133, "embi.gif", "燕尾服") ;
　　～　　　　～　　　　　～
　　～　　　　～　　　　　～

「カウガール帽子」なら「カウガール帽子」みたいな絵を描いて，
背景が透明のGIFファイルで cowgirl_hat.gif という名前で
その保存したHTMLファイルと同じフォルダに保存すれば，「カウガール帽子」が自作のものに変わります。

本当はそんな方法ではなくて，表示された「ソース」と ダウンロードした「moe.js」を理解，自分なりにカスタマイズするべきものです。
でも簡易的にはこの方法で行けます。
「moe.js」 はテキストファイルですから，メモ帳などテキストエディタで閲覧編集可能です。
「moe.js」 も他の方が簡単にカスタマイズできるように詳細な説明が書いてあります。

それを理解して，カスタマイズするのも大切ですが，
それよりこれも，Flashと同じで，
ソースは理解しなくても，単なるコピーの保存で完成します。
でも絵を描くソフトが必要です。
もしお持ちでなければ背景が透明なGIFが作れるソフトを買ってください。
フリーソフトでもあるにはあると思いますが，私はよくわかりません。

どの程度のソフトをお持ちかよくわかりませんが，＃３の方が紹介されているようなGIFを作るのには，少しお金がかかるかもしれません。
手持ちのソフトでパッと思いつくのは，

Adobe Illustrator CS2
http://www.adobe.co.jp/products/illustrator/over …

です。
すみませんけど絵を描くだけで，■ 通常版 83,475円 （本体価格 79,500円） もしてしまいます。
フリーだと，PictBear 1.74↓
http://www.vector.co.jp/vpack/filearea/win95/art …
あたりが有名ですが，使ったことがほんの少ししかないため，良いか悪いかはわかりません。
もし，透明GIFがちゃんと作れるようなソフトをお持ちで無い場合は，なんとか試してみるなり探してみてください。


===絵は描けたとしてちょっと違う方法。=================

今見ているこのページがありますよね。
ブラウザのURL欄には　ｈttp://○○/□□=1747337 とか書いてあります。
そこをいったん全て消して，

javascript:void(document.body.contentEditable=true)

これ↑を貼り付けて，Enterキーを押してみてください。
そして，このページにある画像などをドラッグしてみてください。
おそらくドラッグできると思います。
ページで使われる場合は，

<p><a href="javascript:void(document.body.contentEditable=true)">編集可能にする</a></p>

と書いて，　編集可能にする　という部分をクリックするとそのページは編集可能になります。

とりあえず，絵やHTMLを完成させて，この方法を使うという手もあります。
でも絵の上には絵を重ねられませんので，
背景画像をうまく利用するなどしないとなりません。

===============================

JavaScript でするなら，ちょっと難しいかもしれませんが，＃３の方が書かれているURLの方法がいいと思います。

難しいかもしれませんが，なんとか頑張ってください。
としか言いようがないですね。
わかりやすく良いサンプルだと思います。

この回答へのお礼

締め切りが遅くなってすみませんでした。
完成してからと思っていたのですが、なかなか難しかった為先に締め切りをする事にしました。


＞===絵は描けたとしてちょっと違う方法。=================

こんな方法もある事をしれ本当にびっくりしました。


BlurFiltanさん分らない私の為に丁寧な説明と使えるソフトまで紹介して頂きありがとうございました。試行錯誤しながら頑張ってみたいと思います。

お礼日時：2006/01/01 08:11

No.4 回答者： natatin 回答日時： 2005/11/04 21:03

＞どうしたら出来るか分りますか？

画像移動ユーティリティー　モエ　を使って作ってますね　先程のページの右上に　配布元があります

作成方法もありますので

http://moe.ed8.jp/

皆さんが仰る様にFlashで作成された物が　ほとんどですので　私もご覧になられたのはFlashだと思います

JavaScriptやjavaアプレットで作られたのもあるので紹介させていただきました


　

No.3 回答者： natatin 回答日時： 2005/11/04 08:59

JavaScriptで作ってるのもありますね！

http://park1.wakwak.com/~lambchop/kisekae.html

この回答へのお礼

natatinさんお礼が遅くなってしまいすみませんでした。

HPを紹介して頂きありがとうございます。前見たのにとても似ていたのでJavaScriptだと思います。BlurFiltanさんにも質問したのですが、どうしたら出来るか分りますか？

お礼日時：2005/11/04 19:53

No.2 回答者： BlurFiltan 回答日時： 2005/11/03 12:31

質問者様がおっしゃっているサイトは，

本当にFlashが使われているのでしょうか？
＃１の方も「FLASHを使ってるのではないでしょうか。」と書かれているだけで，Flashだと確証されているわけではありませんよ。

以下はFlashだとして限定した場合の回答です。

Flashだと比較的簡単にできます。
Flash作成ソフトを購入して，

インスタンスをドラッグしたい
http://hakuhin.hp.infoseek.co.jp/main/as/mouse.h …

ここに書かれていることをしっかり理解すればできます。
スクリプトを理解することはすごく簡単だと思います。コピペすれば使えますし。
それより，絵を描いたり，それをムービークリップにしたりする作業が，少し慣れるまで時間がかかると思います。

その前に，
まず，ソフトが必要ですが，ソフトは macromedelia からFlash 8 というシリーズのソフトが出ています。
こういう感じのFlashを作れるソフトは macromedelia のFlash 8か，もしくはその旧バージョンでしか作りにくいと思います。
一般的には下の２つのソフトのうちどちらかで可能です。

Flash Basic 8
http://www.macromedia.com/jp/software/flash/basic/
26,250円（税抜 25,000円）

Flash Professional 8
http://www.macromedia.com/jp/software/flash/flas …
88,200円（税抜き　84,000円）

高いように思われるかもしれませんが，
サンプルで表示されているような絵もアニメも作れますし，値段の割にかなり得なソフトだと思います。
Flash Basic 8 とFlash Professional 8 ではどちらが良いかというと，
「絵を動かす」ということに関して言えばどちらも同じです。
ただ，書いた絵にボカした効果などを付けたり，動画ビデオを取り込んだりするのには，
Flash Professional 8 の方が向いています。また，携帯用のFlashはFlash Professional 8 の方でしか作れません。
どこまでを望まれるかによって変わりますが，あまり高度なことを求めなければ，Flash Basic 8で十分です。というか，普通の人には十分すぎます。
操作の難しさはどちらも全く同じです。

上に書いた価格はあくまでも希望価格というもので，電気屋さんなどに行けばもっと安くなります。

上で書いたように，動かすプログラム(ActionScriptと言います) より，まず絵を描くことなどの操作面に慣れが必要で，少なくとも半月～１ヶ月程度は四苦八苦するとは思いますが，努力すればするほど，Flashの良さがわかり自分のしたい表現を，どんどん発揮できるソフトだとわかると思います。
また，最初は絶対に本が必要です。
付属のマニュアルやネットでは絶対に使い方や基本は身に付きません。
もしFlashをされるようでしたら，絵の描き方から丁寧に説明されている本を選んでください。
だいたい２千円台くらいでそういう本があると思います。

電気屋さんに行けば，
FlashMaker3というソフトの方が目立つ場所にたくさん売っていると思いますが，そちらのソフトでは，「描いた物をマウスで動かす」ということはできませんので間違えないように注意してください。

この回答へのお礼

BlurFiltanさんお礼が遅くなってしまいすみませんでした。


＞＃１の方も「FLASHを使ってるのではないでしょうか。」と書かれているだけで，Flashだと確証されているわけではありませんよ。

PCが詳しくない為そうかと思ってしまいました(汗)

この質問でFlashについて初めて知りました(汗)ソフトの紹介そしてその違いまで説明して頂き、こういうソフトの存在を知り勉強になりました。しかしちょっと(大分)お値段が良すぎて手に届きません。お金を貯めてもう少しPCに詳しくなってから考えたいと思います。BlurFiltanさんFlashについて丁寧な回答をして頂きありがとうございました。

で、ここまで丁寧な回答を頂いた後に言いづらいのですが、natatinさんの載せているHPの感じだったので多分JavaScriptだと思います(大汗)

また質問してあれなんですが、どうしたら出来るか分りますか？

お礼日時：2005/11/04 19:37

No.1 回答者： mendokusa 回答日時： 2005/10/31 12:07

FLASHを使ってるのではないでしょうか。

この回答へのお礼

mendokusaさん、お早い回答ありがとうございます。

＞FLASHを使ってるのではないでしょうか。

そうだったのですか(汗)どうしたら出来るか分りますか？

お礼日時：2005/10/31 14:10