ParaFla! ノート現在との差分 - HOMING★WONDER

ParaFla! ノート - (2010/12/28 (火) 06:21:51) の最新版との変更点

追加された行は緑色になります。

削除された行は赤色になります。

#include_js(http://www31.atwiki.jp/kouraku_tiritomado/pub/SyntaxHilighter/Scripts/shCore.js) #include_js(http://www31.atwiki.jp/kouraku_tiritomado/pub/SyntaxHilighter/Scripts/shBrushCpp.js) 最近、フリーのFLASHエディタで遊んでいます。とりあえず目標は携帯待ち受けの自作ですが（※）、コレはなかなか優秀なオモチャの予感です。（※）→&sizex(-3){[[待ち受け出来ました！>ジムニー格納庫携帯電話・JA11メーター風待ち受けFLASH]]} ***説明 ParaFla! はフリーのFLASHエディタです。アクションスクリプト（AS）も使えます。いかんせん投げっぱなしの「フリーの開発環境」らしい性格が強く、諸々の疑問点はありますが全体的にはコンパクトかつ多機能です。把握してみればシステマチックで統一された仕様も見えてきて、どちらかと言うとマニア好みの良ツールです。ネット上にも多数の解説サイトがあり、学習環境はそれなりに整っています。私も自習ノートとして重箱の隅をつつくようなネタをまとめておこうと思います。 ***オススメサイト（いきなり他力本願） #divclass(marginleft16){ -[[ParaFla! Wiki>>http://www.wikihouse.com/ParaFla/]] まさに本家というWikiです。解説はあんまりないのですが、膨大なサンプルがアップされており、具体性と即効性はピカイチです。 -[[パラフラ学習帳>>http://parafla776.jog.buttobi.net/]] 紙芝居ツールとしての概要、使い方が分かりやすいサイトです。 -[[ParaFla! 進学講座>>http://www.geocities.jp/para_core/kouza/]] 私が一番参考に使ったサイトです。「よくある文法リファレンス」として便利。 -[[区立ぱらふら予備校>>http://www.geocities.jp/dr0p4u/how2/]] AS どころかプログラム初心者で、右も左もサッパリならこちらをどうぞ。 -[[デザインFlash待受画像ギャラリー! Design Flash Wall Gallery!>>http://nsflash.com/]] むしろフラッシュのダウンロードサイトですが、[[携帯向けactionscript>>http://nsflash.com/action/action.html]]には、FSCommand2() が見やすくまとめてあります。 } ***SWF4・秀丸ハイライトファイル #divclass(marginleft16){ 100行以上書くような場合、スクリプトエディタは別に用意した方が無難です（使いやすいテキストエディタであれば、なんでも良いと思います）。 -&html(<a href="http://www31.atwiki.jp/kouraku_tiritomado?cmd=upload&act=open&pageid=23&file=parafla_swf4.zip"><img src="http://www31.atwiki.jp/kouraku_tiritomado?cmd=upload&act=open&pageid=15&file=ico_file.gif" style="vertical-align:middle;"></a> <a href="http://www31.atwiki.jp/kouraku_tiritomado?cmd=upload&act=open&pageid=23&file=parafla_swf4.zip"> ダウンロード >> parafla_swf4.zip</a>) 私は秀丸を使っているので、お土産にタイプミス防止・判読性向上のために作った強調表示定義ファイルを置いときます。ParaFla!SWF4 関数や制御構文、スプライトプロパティなどを強調表示1～4に設定するシンプルなものです。ご自由にお使い下さい。 ---- } ***エラーは分かりにくい #divclass(marginleft16){ Flash をフリーの環境で作るとなると、動作確認が Flash プレーヤーで済む反面、エラー情報などは疎遠になりがちです。 ParaFla! 自体も、構成や AS に難があってもほとんどスルーします。プレビューするとフリーズこそしませんが、「動かしてみたらエラーが出たので、そのまま止まってダンマリ」という方向でまとめられています。フリー環境にそこまで求めても贅沢ですが、勉強しながらおそるおそる触っている頃は「？？？」になることも多々あります。たとえば深度の重複などは、まずキレイに動くことはないくらいのヒューマンエラーですが、プレビュー前から明らかな場合でも、やはりスルーされて妙な具合になります。全体的にそういうポイントが多々あるので、そういうつもりで居ないと戸惑うと思います。開発の基本ですが、変数を画面に出力する "Hello World" 的な仕掛けで、積極的にデバッグするしかありません。 ---- } ***ParaFla! の "スプライト" って何だ？ #divclass(marginleft16){ どうも私は根本的にスプライトを理解するまでヒトヤマありました。多分、一般的な ”スプライト”の言葉の意味にひっぱられて広義に解釈できなかっただけとは思うんですが…同様にとっつきが悪くて迷い込んだ人は、こちらのメモを読んでみて下さい。 [[→ モノ好きだから読んでみる。>ParaFla! の "スプライト" って何だ？]] ---- } ***removeClip() と duplicateClip() したスプライトの寿命 #divclass(marginleft16){ インスタンスの動的生成には解放がつきもののはずですが、意外と騒がれないのが気になって調べてみました。どうも削除を行う removeClip() は正の AS 深度のスプライトしか削除しないようです。 #html2(){<pre name="code" class="cpp">duplicateClip("srcHoge","destHoge1",-1); // 1フレームで自動的に削除される。 duplicateClip("srcHoge","destHoge2",0); // removeClip()で明示的に削除されるまで残る。</pre>} duplicateClip() に設定した深度がマイナスだと 1 フレームで消えます。一方、正の値を使用したときは removeClip() 可能なので、removeClip() するまで存命します。 ParaFla! の深度ゼロは AS深度の -16127 に相当し、ParaFla! から設定可能な深度は ±256 に限られます。duplicateClip() を呼びだし複製したスプライトを、もし ParaFla! で最初から存在するスプライトの裏に配置したければ、duplicateClip() の深度には -16127±256 の範囲にある負の値を設定する必要があります。もちろん負の深度なので1フレームで消えます。基本的に毎フレーム複製する必要があります。それでも毎フレーム複製するのは処理負荷だと思ったら、前後関係が発生するリソースを、あらかじめスプライトにまとめましょう。スプライトごと複製してしまえば正の範囲の AS 深度にマスク画像などを置く事が出来ます。 -全て負の深度（ -16127±256 ）に置く必要があり、毎フレーム複製処理の必要なケース ↑深度の値が大きい↑ 親スプライト &tt(){├ }動的な複製スプライト（マスク対象） &tt(){│　└ }イメージ画像 &tt(){└ }マスク画像 ↓深度の値が小さい↓ -正の深度に複製可能で、毎フレーム複製処理の必要がないケース。 ↑深度の値が大きい↑ 親スプライト &tt(){└ }動的な複製スプライト &tt(){　　├ }イメージ画像（マスク対象） &tt(){　　└ }マスク画像 ↓深度の値が小さい↓ ---- } ***SWF4 rotation の不思議仕様精度落ち対策 #divclass(marginleft16){ 携帯待ち受けなどに使われるSWF4環境には、わりと残念な仕様が多いようで、私が確認した現象とその対策をメモしておきます。 -【現象1】アナログ時計の針を回転させたら、どんどん縮んでいく。 -【現象2】細かな位置・角度変更を続けると動きがガタつく、位置がズレる、縮んで消えるなどする。結論から言ってしまうと、「スプライトは座標の記録や計算の精度が低く、誤差が累積しやすいので出来るだけ慎重に動かす」という事なのですが、同じような現象に困った時は、こちらのメモを確認してみて下さい。 [[→ モノ好きだから読んでみる。>SWF4 rotation の不思議仕様・精度落ち対策]] ---- } ---- #javascript(){{ <script type="text/javascript"></script> }}

#include_js(http://www31.atwiki.jp/kouraku_tiritomado/pub/SyntaxHilighter/Scripts/shCore.js) #include_js(http://www31.atwiki.jp/kouraku_tiritomado/pub/SyntaxHilighter/Scripts/shBrushCpp.js) #include(ParaFlaHeaderMenu) #divclass(marginleft16){{ **目次 &color(red){【注意】結構古いコンテンツなので話半分でお願いします！} #divclass(marginleft16){ #contents(fromhere=true) } }} ***説明 #divclass(marginleft16){ParaFla! はフリーのFLASHエディタです。アクションスクリプト（AS）も使えます。ネット上にも多数の解説サイトがあり環境は整っていますが、一部わかりにくいところもあります。私がつまづいたポイントをまとめておきます。困った時に、副読本としてご覧いただければ幸い。} ***オススメサイト #divclass(marginleft16){ -[[ParaFla! Wiki>>http://www.wikihouse.com/ParaFla/]] まさに本家というWikiです。解説はあんまりないのですが、膨大なサンプルがアップされており、具体性と即効性はピカイチです。 -[[パラフラ学習帳>>http://parafla776.jog.buttobi.net/]] 紙芝居ツールとしての概要、使い方が分かりやすいサイトです。 -[[ParaFla! 進学講座>>http://www.geocities.jp/para_core/kouza/]] 私が一番参考に使ったサイトです。「よくある文法リファレンス」として便利。 -[[区立ぱらふら予備校>>http://www.geocities.jp/dr0p4u/how2/]] AS どころかプログラム初心者で、右も左もサッパリならこちらをどうぞ。 -[[デザインFlash待受画像ギャラリー! Design Flash Wall Gallery!>>http://nsflash.com/]] むしろフラッシュのダウンロードサイトですが、[[携帯向けactionscript>>http://nsflash.com/action/action.html]]には、FSCommand2() が見やすくまとめてあります。 } ***デバッグ出力のススメ #divclass(marginleft16){ ParaFla! は、実行前から明らかな設定ミスや衝突があっても、エラー報告がほとんど起こらずプレビューが強行されます（もちろん表示類は妙な事になります）。変数などはこまめに画面に表示したり、一手間を心がけた方が良さそうです。とくに慣れるまでは用心した方が無難。 } ***"スプライト"の説明 #divclass(marginleft16){ 要はレイヤーとかそういうもののようです。 [[→ モノ好きだから読んでみる。>ParaFla! の "スプライト" って何だ？]] } ***removeClip() と duplicateClip() したスプライトの寿命 #divclass(marginleft16){ インスタンスの動的生成には解放がつきもの。どうも削除を行う removeClip() は正の AS 深度のスプライトしか削除しないようです。 #html2(){<pre name="code" class="cpp:nocontrols">// 深度が負のスプライトは、1フレームで自動的に削除されます。 // 必然的に、毎フレームduplicateClip()することになります。 duplicateClip("srcHoge","destHoge1",-1); // 深度が-1なので1フレームで自動削除 // 深度が0以上のスプライトは、removeClip()されるまで残ります。 duplicateClip("srcHoge","destHoge2",0); // 深度が0なので残り続けます。</pre>} duplicateClip() に設定した深度がマイナスだと 1 フレームで消えます。一方、正の値を使用したときは removeClip() 可能なので、removeClip() するまで存命します。 ParaFla! の深度ゼロは AS深度の -16127 に相当し、ParaFla! から設定可能な深度は ±256 に限られます。duplicateClip() を呼びだし複製したスプライトを、もし ParaFla! で最初から存在するスプライトの裏に配置したければ、duplicateClip() の深度には -16127±256 の範囲にある負の値を設定する必要があります。もちろん負の深度なので1フレームで消えます。基本的に毎フレーム複製する必要があります。それでも毎フレーム複製するのは処理負荷だと思ったら、前後関係が発生するリソースを、あらかじめスプライトにまとめましょう。スプライトごと複製してしまえば正の範囲の AS 深度にマスク画像などを置く事が出来ます。 -全て負の深度（ -16127±256 ）に置く必要があり、毎フレーム複製処理の必要なケース ↑深度の値が大きい↑ 親スプライト &tt(){├ }動的な複製スプライト（マスク対象） &tt(){│　└ }イメージ画像 &tt(){└ }マスク画像 ↓深度の値が小さい↓ -正の深度に複製可能で、毎フレーム複製処理の必要がないケース。 ↑深度の値が大きい↑ 親スプライト &tt(){└ }動的な複製スプライト &tt(){　　├ }イメージ画像（マスク対象） &tt(){　　└ }マスク画像 ↓深度の値が小さい↓ } ***SWF4 rotation の不思議仕様精度落ち対策 #divclass(marginleft16){ 携帯待ち受けなどに使われるSWF4環境では、計算精度云々は怪しい環境が多いようです。私が確認した現象とその対策をメモ。 -【現象1】アナログ時計の針を回転させたら、どんどん縮んでいく。 -【現象2】細かな位置・角度変更を続けると動きがガタつく、位置がズレる、縮んで消えるなどする。結論から言ってしまうと、「スプライトは座標の記録や計算の精度が低く、誤差が累積しやすいので出来るだけ慎重に動かす」という事なのですが、同じような現象に困った時は、こちらのメモを確認してみて下さい。 [[→ モノ好きだから読んでみる。>SWF4 rotation の不思議仕様・精度落ち対策]] } ---- ---- #javascript(){{ <script type="text/javascript"></script> }}

表示オプション

横に並べて表示：

変化行の前後のみ表示：