NoteBill vol.1 Nov.8 - F-site seminar note

NoteBill vol.1 > 05 つぎ いこう つぎぃ

05 つぎ いこう つぎぃ

まずは開脚前転やて

サンプルのnotebill.zip を解凍してくださいませ

ファイル構成は こんな感じになっていると思います

notebill.fla が このサンプルのFLAファイル

readBill.txt は 手抜きのReadMeファイル

あとはすべて 外部ASファイルです。Debugフォルダ, notebillフォルダ内を含め 次のようなファイルです。

このファイルたちは実際にどこで使用されているのか notebill.flaファイルを見てみましょう

メインタイムライン フレーム１ asレイヤーにmain.as をインクルードしている となってます。

ここに main.as の中身が書かれているということですね。

では こんどはライブラリパネルを開いてみてください

NoteBill vol.1 > NoteBill Classes > NoteBill classes はムービークリップシンボルですが 絵は真っ白

何もありません。あるのは includeレイヤーにある #include の一行。

実際私はタイムラインで止めたいフレームに this.stop(); を書く以外は ほとんど 外に書くというやり方をとります。

ひとそれぞれ好きなやり方があると思いますので 色々試行錯誤しましょうね。

さて FLAファイルに #include したのは 上のmain.as と notebill/notebill_classes.as だけです。

他のファイルは どうなっているのか 見てください。

• main.as 内

// Debug 用 デバッグが終わればいりません
#include "Debug/debugToString.as"

// Model, View, Controller の 各クラス include ---------------------
#include "NoteBillModel.as"
#include "NoteBillView.as"
#include "NoteBillController.as"

ここに MVC 3つのクラス をまた #include 。デバッグ用のファイルも#include しています。

ここフレーム 1に書かれているのと同じです。

• notebill/notebill_classes.as内

#initclip 0

// _global.notebill に 各クラスを定義します
if (typeof _global.notebill == "undefined") {
	_global.notebill = new Object();
}

// NoteBill に使用する ボタン と ラベル のクラス
#include "notebill/Button.as"
#include "notebill/Label.as"

// NoteBill クラス
#include "notebill/NoteBill.as"

// クラスの登録
Object.registerClass("note_bg",        _global.notebill.Button);
Object.registerClass("note_title",     _global.notebill.Label);
Object.registerClass("note_text",      _global.notebill.Label);
Object.registerClass("note_closeBtn",  _global.notebill.Button);
Object.registerClass("note_resizeBtn", _global.notebill.Button);

Object.registerClass("NoteBillSymbol", _global.notebill.NoteBill);

#endinitclip

やや 今度は ＃initclip #endinitclip が出てきました。

noteデータを表現する ムービークリップをあとでNoteBillとしてattachMovie していくのに

必要なクラスたちを あらかじめ定義して各シンボルに割り当てるのです

ライブラリ NoteBill vol.1 > NoteBill の プロパティを見てみましょう

他にNoteBillに使用される各パーツも同様にattachMovie しますので リンケージ識別子をつけています

ライブラリ NoteBill vol.1 > NoteBill Design フォルダ内をみてください

これらもnotebill/notebill_classes.as 内で 各クラスに割り当てているのです

そしてそのパーツMCたちは どこにおいてあるでしょうか

ライブラリ NoteBill vol.1 > NoteBill をダブルクリック (編集)してください

deadPreview というもの以外すべてガイドレイヤーで配置されています

この配置は 試しに配置しているだけで 実際はすべてNoteBill.asの中で スクリプトで配置されます

この方法は デザインをする上では とてもわかりにくいかもしれません。

が のちに 動的にリサイズするとき こういうやり方がやりやすい場合もあります

deadPreview というのは 簡単に言うと

オーサリング時にムービーを配置して あらかじめ位置とサイズを変更し

その位置・大きさをもとに あとで各部品をattach していく。というときに利用します

いらなくなったら内部でunloadMovieしちゃうので dead なわけです。

でも今回NoteBillは全部attachされるので ... いりまへんな。

だいたいの構成はわかりましたでしょうか？

では クラスの中身を見ずに FLAをパブリッシュしてみてください。

出力パネルに 出力されていますか？

あ ファイル > パブリッシュ設定 > Flash > オプション

Traceアクションを省略 の チェックをはずしてくださいませ

Button
Label
NoteBill
// NoteBill vol.1 Nov 8 2003 by icutommy - Shinya Tomikawa
NoteBillModel
NoteBillView
NoteBillController
// main -----------------------------
*** Model#init 
>>> View#init _level0.stage_mc
+++ Controller#init
>>> View#setModel [object NoteBillModel]
*** Model#addView [object NoteBillView]
>>> View#setController [object NoteBillController]
+++ Controller#setModel [object NoteBillModel]
+++ Controller#setView [object NoteBillView]
*** Model#loadNotes myNote

そして ステージをドラッグしたり テキストを編集したりしてみてください。

Model View Controller が どんなやりとりをしているかが ずらずら出てきましたね

このやりとりを先にtraceしながら 少しずつメソッドを書いていく というのが 私のやり方です。

興味のあるかたは 出力パネルを追いながらクラスファイルの中を見てくださいませ。

ビバノンノン

ババンバ バンバンバン ... :)

どないですか。ぼんやりとMVCダンスを踊ったはる方たちの気持ちが ... わからんよね:)

さあメソッドを少しずつ traceしまくって書いていきましょう

どんなプロパティが必要か 考えまくりましょう

決めた本を一冊ちゃんと読みましょう(自分にゆうてます)

MLや フォーラムで みなさんと語りまくりましょう(最近私ごぶさたしてます ほんまに すいません...)

私もMLなどで みなさんに ほんまにお世話になり

こないな中途半端なノートでも 何とか... 書けるようになりました。感謝しております。

私の今回の NoteBill のサンプルが 何かのお役に立てたら ほんまに Happy です

このノート・サンプルへのご意見は FWiki-ja の NoteBill に書いてくださいませ

(ページの書き込みだけでなく自由に編集可能なWikiというシステムを使っています

その編集のヘルプはページ下部の HowToWiki へ)

こんなんできましたぁ という あなたのMVCサンプルへのリンクなども お願いしますね

みなさんで経験を共有して つらく楽しいFlashAsLife をー

最後まで 読んでくださって ほんまに ありがとうございました。

まだまだ日々日々修行中の ジャイアンじゃいやん tommy でした

ではでは

icutommy = ["i see you", "tommy", "thanx!"]
trace(icutommy[2])
/**************************************************
icutommy - 富川 真也 <icutommy@mbc.nifty.com>
FWiki-ja
http://hpcgi2.nifty.com/icutommy/fwiki_ja/wiki.cgi
**************************************************/

<< 前へ | INDEX

©2003 icutommy - Shinya Tomikawa