FlashDevelop 3.0.0 RC2 Pluginを追加してデバック機能を使う

FlashDevelopに3rd Party Pluginを追加してデバック機能を使用する


通常通りの手順だと動かなかったので、ソースをコンパイルしなおしました
そしたら、動いた!!以下画面
FlashDevelop_21_1.gif


SUGEEEEEEEEEEE!!!!!


さて、導入方法です


  1. FlashDevelop3rdParyPluginの一覧が掲載されているサイトへいきます→ココ

  2. FDBというのが今回落としたいPluginです orange.zero.jpと書いてあるところをクリックしましょう
    FlashDevelop_21_2.gif

  3. とりあえず、一番上のfdbPlugin0.4.6.1.zip (include src)を落としましょう
    作成者は日本人みたいですね。ありがとうございます><

  4. 落とせたファイルを解凍します

  5. 解凍してできたフォルダには[doc]フォルダがあります
    readme_jp.txtを読むとインストール方法がわかるはずです

  6. 一応書くと、[bin]にある、[Aga.Controls.dll]と[FdbPlugin.dll]をFlashDevelopのインストールフォルダ→[Plugins]にコピーすれば、インストールの完了です

※RC2だと動かなかった C#2008 XEでちょっといじったら動いた
FdbPlugin.dllだけ、下のファイルを使うと動くと思う
ここから落とせますなーんもチェックしてないので、使用は自己責任でお願いします!!!!


設定


ちゃんとインストールできていると、メニューバーに[Debug]ができます
設定は[F10]押して[Settings]画面から[FDBPlugin]で設定できます
FlexSDKLocaleをja_JPにしとくといいでしょう
Debug時のPlayerもお好きなものに変更しましょう


使い方


  1. BreakPointを設定したい箇所にカーソルを出す

  2. メニューバーの[Debug]→[ToggleBraekPoint]を選択する

  3. BreakPointを設定した箇所には色がつく(デフォルトは黄色)
    勿論設定で変更可能

  4. [Debug]を実行するには[Debug]→[Start]でいけます

  5. 後はステップインするなり、ステップオーバーするなり、変数にマウスカーソルを合わせて値をみるなりしてください

なお、FlashPleyerが初期化状態で止まったりしますが、BreakPointで強制的に処理をとめてるだけみたいなので、間違えて消さない方がいいと思います


メモ:これいれたら、いたるところの[FlashDevelop]フォルダが出来た(・w・`


Forumみるとこれベタボメされてましたね。ショートカットキーは不具合(他のショートカットキーと競合?)らしく、未実装に戻っていました



スポンサーサイト

FlashDevelop ショートカットキー

FlashDevelopで使用できるショートカットキー


※ 環境:FlashDevelop 3.0.0 RC2


Ctrl + Q


行コメントアウト 行の先頭に[ // ]がつきます


  1. マウスカーソルが出ている行でCtrl + Qを押すとその行の先頭に[ // ]がつく

  2. 行を範囲選択した状態でCtrl + Qを押すと範囲選択した箇所全ての行の先頭に[ // ]がつく

  3. コメントアウトしている行でCtrl + Qを押すとコメントアウトが解除される

Ctrl + Shift + B


ブロックコメントアウト[ /* */ ] 範囲選択状態限定


Ctrl + B その1



forと入力 → Ctrl + Bを押すと下のようになる
for (var i:int = 0; i < ; i++)
{

}

Ctrl + B その2


スニペット:定型文補完


例えば、Ctrl + Bを押し一覧からgetを選択すると以下のようになる


public function get () { return ; }まで入る


setを選択すると



public function set (value):void
{

}


となる


Ctrl + Shift + K


Windowsのカラーピッカーがでる
その画面上で色を選択すると選択した色の16進表記24bitカラーコードが出力される


Ctrl + F2 及び F2,Shift+F2


Bookmark機能 Ctrl + F2でカーソルがある位置に星印がつく
F2でそのBookmarkした箇所に移動。Shift+F2で戻る
なお、Bookmarkを消去したいときには、メニューバーから操作する
[Search]→[Clear Bookmarks]


F4


関数やクラス宣言、インポート文等の箇所で使用すると、その宣言してファイルを開き、該当箇所まで飛ぶ
例えば


setParameter(ball);


というメソッドが呼ばれている箇所があるとする
ここで、setParameterのどこでもいいのでカーソルを出してからF4を押すと
public function setParameter(ball:Ball):voidの箇所まで飛ぶ
勿論、import flash.display.Sprite;のSpriteの箇所でやっても同じようにSprite.asが開いてその箇所まで飛ぶ
まあ、説明するより試した方が早いと思います
なお、Shift + F4で元の箇所に戻ります


Ctrl + T


上の行と入れ替える
なお、複数行を範囲選択してCtrl + Tを押しても一番上の行しか入れ替わらない


Ctrl + D


現在の選択行(カーソルが出ている行)と同じ行を選択行の下に作成する(複製する)
Ctrl + Qとセットでどうぞ


Ctrl + Shift + [X],[C],[D]


  1. [ X ] … 選択行を切り取り

  2. [ C ] … 選択行をコピー

  3. [ D ] … 選択行を削除

ダブルクリック


単語を選択***.+++のような状況でも***の箇所でダブルクリックすれば、***部分だけを範囲選択できる


トリプルクリック


行を選択


Ctrl + Shift + F


折りたたみ
折りたたまれている箇所ならば展開される


他にもあるけどおしまい


F4がかなり便利!!


押しにくいショートカットキーばかりな気がする…


Flex3 ドラック&ドロップでSpriteを動かす

ドラックアンドドロップでSpriteを動かしてみます


完成例とソースコード


こちらから確認してください
操作方法:横のボタンを押すと画面上に四角ができます
四角を選択してドラックドロップすると、その位置に移動します
四角の右下辺りをドラックしていくと四角のサイズを変更できます
ドロップした位置で大きさが確定します
仕様:枠からはみ出ます(笑)


長いので、まとめを先にみるといいかも→まとめ


作成するプロジェクト


mxmlで画面を作りたいので、Flex 3 Projectを選択します


コアクラス以外の解説


Main.mxml


画面作っているだけです。ボタンをクリックするとsquareButtonClickが実行されます


SpriteDragDropFunction.as


squareButtonClickの動作が実装されています
Squareクラスを生成して、UIComponent:containerにaddChildして追加しているだけです


ドラックアンドドロップの実装方法


全てのマウス操作における動作はSquare.asに実装されています
コメント、改行等含めて170行です


メンバ変数



public static const DEFAULT_WIDTH:int = 30;
public static const DEFAULT_HEIGHT:int = 30;

private var _dummySquareAlpha:Number = 0.0;
private var _isSizeChanged:Boolean;
private var _isMoved:Boolean;

定数はあってもなくてもどちらでも…
dummySquareAlphaはダミー領域の透明度です(後述)
isSizeChangedはサイズ変更モードを示すフラグです
isMovedは移動モードを示すフラグです


コンストラクタ



public function Square()
{
_isSizeChanged = false;
_isMoved = false;

this.x = 30;
this.y = 30;

drawSquare();

addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
}

イベントリスナーを3つ追加しています


  1. MOUSE_DOWNイベント…マウスが押されたときに発生するイベント

  2. MOUSE_UPイベント…マウスが離されたときに発生するイベント

  3. MOUSE_OUTイベント…マウスがこのスプライト上から離れたときに発生するイベント

drawSquareメソッド



private function drawSquare(sqWidth:int = DEFAULT_WIDTH,
sqHeight:int = DEFAULT_HEIGHT):void
{
this.graphics.beginFill(0x000066);
this.graphics.lineStyle(1.0, 0x0000ff);
this.graphics.drawRect(0, 0, sqWidth, sqHeight);
this.graphics.endFill();
}

引数で指定されたサイズの四角を描画するメソッドです
引数が指定されない場合はデフォルト値で描画されます


mouseDownHandler



private function mouseDownHandler(event:MouseEvent):void
{
// マウスのどの箇所が押されたかをチェックする
var mousePosition:int = checkMousePosition(event.localX, event.localY);

// 四角の右下周辺が選択されていたら、サイズ変更モード
if (mousePosition == 22 )
{
_isSizeChanged = true;
// 変更後のサイズがわかるように仮想的な四角を作る
var virtualShape:Shape = new Shape;
virtualShape.name = "virtualShape"; //後で取り出しやすいように名前をつけとく
virtualShape.x = 0;
virtualShape.y = 0;
// 四角の大きさに合わせた仮想四角の作成
drawVirtualSquare(virtualShape, this.width, this.height);
this.addChild(virtualShape);

// MOUSE MOVEイベントを受け取るためのリスナー登録
addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}
else
{
// Spriteの移動モード
_isMoved = true;
// 標準でついているstartDragを使うと簡単に移動する
this.startDrag()
}
}

マウスが押された位置によってモードが変化します
押された位置の判定はcheckMousePositionメソッドで行っています
なお、event.localX及びlocalYで現在のマウスの座標を取得できます
サイズ変更モードでは、変更後のサイズがわかるように仮想的な四角を作り「ここにできますよ」と視覚的に訴えるようにしています
移動モードはSpriteに標準でついているメソッドstartDragを実行するだけです
これを実行するだけで、マウスポインタにスプライトオブジェクトが吸着するようになります


mouseUpHandler



private function mouseUpHandler(event:MouseEvent):void
{
// サイズ変更モード
if (_isSizeChanged)
{
// 仮想四角を消去
var temp:Shape = this.getChildByName("virtualShape") as Shape;
this.removeChild(temp);
// 前回の四角を消去
this.graphics.clear();
// 現在のマウス座標の位置に四角の右下が来るように再描画
drawSquare(event.localX, event.localY);

_isSizeChanged = false;
removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}
else if (_isMoved) // ドラックドロップでの移動モード
{
// これまた、標準でついているstopDragを使用してDragDropを終了する
this.stopDrag();
_isMoved = false;
}
}

サイズ変更モードでは、


  1. 仮想的な四角の除去
    addChildした仮想的な四角を取り出し、removeChildに渡して除去

  2. サイズ変更する前の四角の除去
    graphics.clear()の実行

  3. 現在のマウスの位置までの四角の作成
    drawSquare(event.localX,event.localY)の実行

  4. 後処理
    フラグをfalseにし、設定したイベントをremoveする

を実行しています


移動モードでは、stopDrag()を実行するだけで、マウスポインタの位置にスプライトオブジェクトが移動します(マウスポインタへの吸着もなくなります)




private function mouseOutHandler(event:MouseEvent):void
{
if (_isMoved)
{
_isMoved = false;
this.stopDrag();
}
else if (_isSizeChanged)
{
// 仮想四角の除去
var temp:Shape = this.getChildByName("virtualShape") as Shape;
this.removeChild(temp);

// フラグをfalse
_isSizeChanged = false;

// イベントの除去
removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}
}

マウスがスプライトオブジェクトの範囲外にいった際の処理です
フラグ等がたったままだと次回以降の操作に支障がでるので、フラグが立っている場合には、各種設定を除去します


mouseMoveHandler



private function mouseMoveHandler(event:MouseEvent):void
{
// 前の仮想四角を取り出す
var temp:Shape = this.getChildByName("virtualShape") as Shape;
// 仮想四角のgraphicsを消去する
temp.graphics.clear();
// 再度現在の位置に仮想四角を描画する
drawVirtualSquare(temp,event.localX, event.localY);
}

マウスが移動している際の処理です
動作はコメントどうり


drawVirtualSquareメソッド


サイズ変更の際にどの位置にどのくらいの大きさの四角ができるのかを表現するメソッドです
ポイントとしては、実際のマウスの位置より大きめにダミー領域を作ることです
理由としては、現在のマウスの位置まで仮想四角を作るだけだと、mouseOutイベントが発生してしまうからです(下図参照)
ダミー領域なし
entry_20_1.gif

ダミー領域あり
entry_20_2.gif
ソースはリンク先を参照のこと省略


checkMousePosition


マウスがスプライトオブジェクトのどのあたりにいるのかを調べるメソッドです
まず、X方向の右端にいるかのチェックをしています
この際に右端という判定はスプライトの幅(width)の10分の1の位置から右端までの間にあれば、右端と判定されます(最低保障として3のせていますが)
同様にして左端、上端、下端と判定しています
返り値の形ですが、どうしようか悩んだ末、Xの値を10倍した値にYの状態を加算した値を戻しています(ifネストしまくってもいいんですが、めんどくさかったので)
X方向の状態は左端が1で、右端が2、それ以外(ようするにcenter)が0という値がセットされます
Y方向の状態は上端が1で、下端が2、それ以外(middle)が0という値がセットされます
※ソースはリンク先を参照のこと


まとめ


ドラックアンドドロップしたいなら、mouseUp,mouseDown,mouseMoveを受け取ること


Spriteオブジェクトを動かしたいだけなら、startDrag()及びstopDrag()で十分


ドラックアンドドロップでサイズ変更をしたかったら、ダミー領域を作る


mouseOutイベントでの処理を実装すること


ダミー領域を見たい場合


_dummySquareAlphaを0.0以外の値にすると表示されるようになります(最大値は1.0)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。