Flashなブログ [ 動くWebは好きですか？]

らくがきボード設置の不具合について

当ブログでは「ラクガキボード」がメインで動いておらず、設置方法の紹介として記事内にあるだけでした。そのため、以前より挙動がおかしいという設置不具合があるのを、報告として本日受け取るまで知りませんでした…。。

そこで調べてみると…Flash内に広告が入ったりと修正がかけられており、アドレスを少し変えないといけないように見えましたので、準拠するように以下、当ブログ内のラクガキボード設置記事内容を一部修正しました。

以前より設置されていて、挙動がおかしいと感じている方は『注意2』をお読みください。新しく設置しようとしている方は、特に気にしないで下さい。(^ ^;　まだおかしな部分があれば、ご報告頂けると嬉しいです。デキル限り早い検証と対応をさせていただきまっす。

---

■ラクガキボード設置に関する情報 [ 修正版 ]
http://blogs.yahoo.co.jp/loveforloves/1129467.html

スクリプト制作難航記 [ 本日も失敗 ]

ここ最近、ActionScriptを仕事に使う事がやけに多くって、ハマる確率も高くなってきています。本日も罠にハマりました…。しかし今日のはハマって自分で『いい勉強になった、知らなかった』と素直に思るほどのスッキリ具合だ。

今回の問題は画像読み込みを使う人がいつかは引っ掛かる罠かも知れない?!

■画像が消える？
『ホントです。私見たんです。確かに消えてました。なんていうか、どこもおかしくないのに、設定も一通り見たし、検証もしたのに、なんで表示されないのか謎なんです！(東京都・31才・♂)』と、そう言いたい。これは『アルファを持ったオブジェクト・画像を10枚以上重ねると起こる現象』。今日はPNG画像を20枚使ったところでハマったようです。

Flashで着せ替えシステムを作っていました。つまりベースの体が一番下にあり、その上に服とか、アイテムとか、透過PNGで作られたパーツをボタンを押して重ねていくというもの。この20枚のPNG画像同じ場所にあり、ボタンで一枚づつ重ねていくと、途中(11枚目)から、既に表示させたはずの服が消えている事に気付く。なぜ？　それはすっごい調べましたよ。自分のスクリプトに間違いがないかどうか。でも結局は『Flashの仕様』だという事が分かりました。アルファを持った、つまり半透明な値を持ったオブジェクト(画像でもそうでなくてもアルファに関連したオブジェクトなら当てはまるようです)は描画の能力に結構な負担がかかり、それを10枚重ねるなんて事をすると、その負担もすごい。そのためにわざとFlashが消しているらしいのです。

それこそ『実際に負担が大きいか計ってから消してよ！』とか思うわけです。今回使用した画像なんて、ホントに小さいモノだし、動かしてもいないので大した負担じゃないはずです。300枚くらいは平気で置けてもおかしくないほどのモノです。だいたいそんな事、確かマニュアルにも書いてなかったと思いますし(詳しく見てませんけど)、良くある[http://www.macromedia.com/jp/support/flash/ts/documents/fl0115.html Flashの限界]みたいなものにも、出てきてなかったように思えます。

…とは言いつつも、原因が分かってスッキリ！　結局のところ、こういうシステムはアルファ(半透明の意味で使用)を使わないとデータの軽減もできないため『Flashでやるには制限があるという事で、決定！』みたいです。尚、私は持っていませんが、MX2004でも同様だという話を聞きました。

　今日の一句
　『かさねるな　10枚までだよ　PNG(ピーエヌジー)』

誰かの転ばぬ先の杖となる事を祈って。(ちょっとあるかも)

ちなみに、検索しても最初は情報が見つかりませんでした。原因は自分の検索キーワードと、実際の記事内のワードが異なっていたからです…(^ ^;　そこで、この記事も同じ問題でひっかかる人のためにキーワードを載せておきます。『PNG　PICT　透過　重ねる　消える　表示されない　10枚　アルファ』こんなもんでしょう。

ラクガキボード設置方法

http://219.101.47.232/main4ad.swf?version=20050404&rid=5383&skin=1&outline=DDDDDD&pub=2&charset=2&bgimg=&bgcolor=FFFFFF&default_set=1

---

当店のお客様(誰！)から、質問がありました。『ラクガキボード』って、Yahoo！ブログに貼れるんですか？』と。実際見てもらうと分かりますが、このラクガキボードFlashは、javascriptを記事内に直接記述する事で動いています。つまり普通であれば、javascriptを記事内で動かせない・記述自体できないYahoo！ブログでは表示できないように見えます。確かに現在Yahoo！ブログ内で気軽にjavascriptが使えるのは『Flashに記述したコードのみ』だと思います。間違っちゃいません。そこで、javascriptから実際に書き出されるコードをひも解き、最終的なWikiコードにしたいと思います。

[ 1 ]　まず登録
ラクガキボードサイト「http://rakugaki.kayac.com/index.php」を訪問し、利用者登録を済ませると「<script Language=javascript src=ttp://rakugaki.kayac.com/rakugaki_tag.php?rid=xxxx></script>」のようなコードがメールで送られてくると思います。その『http://219.101.47.232/rakugaki_tag.php?rid=xxxx』をブラウザのアドレスにコピーし、直接URLへ飛びます。

※xxxxなどの部分は各自違うと思いますのでご自分の数字などをそのままお使いください(以下同様)

[ 2 ]　ソースから必要な情報を収集
出て来たページでブラウザの「ソースを表示」としてみると、document　.write　から始まる4行が見られると思います。そこの4行目から必要な情報を抜き出します。まず『http://219.101.47.232/main4ad.swf?version=2005xxxx』こんな部分。そして『&rid=xxxx&skin=1&outline=0000CC&pub=2&charset=2&bgimg=&bgcolor=FFFFFF&default_set=1』こんな部分、設定によって多少数字など違うと思います。実はこのような記述が4行目には『2回』出てきますが、内容は同じなので中盤あたりのものでも、後半のものでも、どちらでも構いません。

[ 3 ]　Wikiの文法にまとめる
これをWiki文法でのFlash貼り構文[[embed(ファイル名,0,X,Y)]]に当てはめます。[ 2 ]で抜き出した二つを連結させて『ファイル名』のところへ入れてやります。

[[embed(http://219.101.47.232/main4ad.swf?version=2005xxxx&rid=xxxx&skin=1&outline=0000CC&pub=2&charset=2&bgimg=&bgcolor=FFFFFF&default_set=1,0,130,276)]]

Xは130、Yは276がこのFlashの本来の100％サイズなので、それを固定で大丈夫です。ただ [ 2 ] ではFlashの他にもdocument　.write　で表示されていたはずの、タイトル画像(こんなの→http://219.101.47.232/head_img/title3_on.gif)があるのですが、それまでまとめては表示できません。必要であればWikiテーブルなどを使って位置合わせするのもいいかも知れません。(^ ^

[ 4 ]　動作OK
以上で試してみましたが、普通に動きますし、保存もできました。ただ『タイトル画像がない』だけです。(- -;;

尚、上のFlashはWikiテーブルによってセンター揃えしています。(上のFlash表示の実コード↓)
||<#FFFFFF' style=text-align:center;width:560px; ``[[embed(http://219.101&#46;47.232/main4ad.swf?version=20050404&rid=5383&skin=1&outline=DDDDDD&pub=2&charset=2&bgimg=&bgcolor=FFFFFF&default_set=1,0,130,276)]]||

---

■注意■Yahoo！ブログの仕様が変わり『219.101.47.232』の部分があると登録できない文字が〜とエラーになります。回避するためには、ちゃ〜さん(情報thanx！)がご紹介くださった方法 - 真ん中の「.」を文字コードにして入力 - を試してみると良いです。「.」の文字コードは「.」ですので、上の[ 4 ]でもありますが『219.101.47.232』→『219.101.47.232』と実際のWikiコードを変更すると上手く貼れます！

■注意2■05/09/25　当ブログではラクガキボードがメインで動いておらず、質問を頂いてから初めて知ったのですが、どうもラクガキFlashのファイル名などに変更があったようです。記事内に今までありました「http://219.101.47.232/main4ad.swf」の部分を本日より正常に動作する『http://219.101.47.232/main4ad.swf』に変更しています！　今までに設置されていた方はお気を付けください。新しく設置される方は、この注意は関係ありません。(^ ^

スクリプト制作難航記 [ _visible ]

Flash関連という事で、難航記とは苦労や失敗談を語るコーナーです。今日のお題は「_visible」。FlashでActionScriptを触った事のある方なら、初日か次の日くらいにはイジっているだろうプロパティ。オブジェクトの表示/非表示を切り替えたりする『使えるアイツ』です。でも、今回は一時期『使えないヤツ』でした…。

このようなケースは今までに遭遇してもおかしくないのですが、なぜか見事罠にハマった今回。では早速事例の紹介です。

■MCに付けたハズの_visibleがリセットされる？
ステージ上のあるターゲットとなるMCに対してjpgやswfを読み込ませるloadMovie。loadMovieで読み込まれたjpgやswfも、基本として「ターゲットとなるMCのプロパティを継承」します。例えば元のターゲットMCで_xscale=50だったら、読み込まれたjpgの横幅も半分で表示されます。_rotationや_alphaだって継承します。

ただし、今回のお題となる「_visible」は『継承しません』。というか勝手に_visible=trueに変更されます。そのため、読み込み後にfalseに指定しないと勝手に出て来るという面倒くささ。(たぶん外部読み込みを良く使う方なら、このヘンに処理を追加するのは『メンドウダナ』とか『ヤダナ』とか思うと考えてます)

※ただ今回は配列を使ったfor＋attachMovie＋loadMovieというスビャーズラーデローンな状態だったため余計にメンドウだと感じただけかも知れません

ちなみに、前に見たどこぞのサイト情報で(オフィシャルとかではない)、『_visibleでfalseに設定されたMCのスクリプトは停止する』ような事が書かれていた事がありますが、それはないです。見えてなくても動いてます。そして『見た目を透明にしたいなら継承してくれるプロパティの_alphaを使えば？』と思う人も居るかも知れませんが「_visible=false」と「_alpha=0」では、見た目は一緒(笑)ですが、_alpha=0の方が処理が重いです。見た目だけに騙されたりしない強い心を持ちましょう。

誰かの転ばぬ先の杖となる事を祈って。(ほぼない)

私も昔「名古屋のマッドスクリプター」の異名をとった事もありますが(そんな事は世間には知られていませんが)、本家マッドスクリプターの野中氏のサイトに普通に載ってる情報でした。(「loadMovie」と「_visible」でググったら即ひっかかりました)

　→　気になる方は是非本家の文献をご覧ください。

スクリプト制作難航記 [ 他サーバ内HTMLへの埋め込み ]

注意・以下は制作に関するお話であり、EASY QUIZ MAKER の設置やカスタマイズには全く関係のないお話です。「えーなんだか分からないけど難しそう〜。。」とか落ち込む必要は全くありません

EASY QUIZ MAKERβ版サンプル公開中ですが、自分への戒めにするとともに、これから生まれてくるFlash使いさんへ捧げる制作"難航"記です。実はテストしてみて、途中でパスの問題に気がつきました。他のサーバにあるHTML(丁度今回のYahoo！ブログ記事など)に埋め込むと、そのHTMLが基点となるために、絶対パス指定でないと外部ファイルが読めない。至極当然の話です。ただ、仕事ではそのような使い方を想定して作った経験はありませんでした。

他サーバから設定ファイルを読もうとすると『絶対パスが必要』。つまり配布しても私以外の人は、自分のサーバ内でしか動かせないという事になる。(各個人個人の絶対パスを私が知らないため)　そこでちょっとひらめいた。古典的な方法ではあるが『URLにパラメータを付ける方法』を使えばいいじゃないか。実は知らない人も意外と居るのではないかと思いますが『FlashをURLにパラメータを付けて呼び出すと、Flash内の変数として扱う事が可能』なんです。これで各自、自分の設置場所までの絶対パスを書いてもらおう。

■URL＋パラメータの書き方
例えば以下のようにswfが置かれているとします

　http://xxx.xx.xx/equiz.swf

そしてFlashの中にある変数「url」に「http://ooo.oo.oo/quiz/」を代入したい。Flashの中に入れておく事ができない場合や、外部テキストを読み込ませるほどでもない時、上記URLに続けて『?マーク+変数名=パラメータ』と繋げるだけでFlash内に変数を渡す事ができます。つまり以下でOK。

　http://xxx.xx.xx/equiz.swf?url=http://ooo.oo.oo/quiz/　　※これで変数「url」に「http://ooo.oo.oo/quiz/」が入ります

こうすれば、私がみんなのサーバのパスを知らなくても、各自で書いてもらって解決だ！………と、ここまで作ってふと気がついた。なんだよ、今まで使った事ないけど…お前を初めて使うけど……もしかして、お前、こんな時のためにずっと隠れていたんだな……『_url*2』君よぉ。。

*2・【_url】※恥ずかしながら、マジで今初めて使いマス
　　　MovieClipオブジェクトが読み込まれたURLを調べる(読み取り専用)

こいつ、どこのHTMLに埋め込まれていようと『自分(本体)の置き場所をパッと言う事ができる』ニクいヤツなんですね。結局『_url』を使って、今のところ無事に動作しております。これ以上の詳細は面倒＆読む人は居ないという理由から割愛です。まぁこうやって『試行錯誤して作られているんだな』とか思って頂ければ、私の苦悩の時間も浮かばれるというものです。かしこ。