ParaFla! ノートの編集履歴ソース - HOMING★WONDER

ParaFla! ノート - (2011/09/09 (金) 06:17:09) のソース

#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行以上書くような場合、スクリプトエディタは別に用意した方が無難です（使いやすいテキストエディタであれば、なんでも良いと思います）。
私は秀丸を使っているので、お土産にタイプミス防止・判読性向上のために作った強調表示定義ファイルを置いときます。ParaFla!SWF4 関数や制御構文、スプライトプロパティなどを強調表示1～4に設定するシンプルなものです。ご自由にお使い下さい。
-&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>)
----
}

***デバッグ出力のススメ
#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"><!--
dp.SyntaxHighlighter.ClipboardSwf = 'http://www31.atwiki.jp/kouraku_tiritomado/pub/SyntaxHilighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
//--></script>
}}