FlashDevelop Code Snippetsを使いこなそう

FlashDevelopの設定 Code Snippets編


対象環境:FlashDevelop 3.0.4 RTM
※3.0.x系ならいけます。


概要


FlashDevelopのコード補完機能の1つSnippets(スニペット)をカスタマイズして、AS3コードを簡単に作成できるようにしちゃいましょう。
※AS3以外でもFlashDevelopで編集可能な形式(cssとかas2とか)でもできちゃいます。
では↓から本文


CodeSnippetsってご存知ですか?
以前にもご紹介したと思いますが、下のような画面を出してコードを簡単に入力しちゃおう!的な機能(定型文の貼り付け機能)です。getとかsetとかこれを使うと簡単?ですよね。
コードスニペット画面


この画面は以下のように出します
[CTRL]+[B]


[CTRL]+[B]を押下した状態で、[if]と入力し、[Tab]を押下してみましょう。
下のようになるはずです。
IFのSnippets補完の例


この機能...少し使いにくいと感じた方いませんか?
実はこの機能カスタマイズが簡単にできるようになっています!


Code Snippetsの設定方法


設定画面の出し方


設定画面は以下のように出します
メニューバー[Tools]→[Code Snippets...]
という手順を踏むと以下の画面のようになります
コードスニペット設定画面


設定方法


いくつか特殊な文字がありますが、それほど難しくありません。


  • $(EntryPoint) ... エントリーポイント。[Tab]押下後にカーソルが来る場所を示します

  • $(CSLB) ... 改行です。普通に[Enter]で改行してもいいので、あってもなくても....

初期状態で使われているのはこれだけです。説明不要ですねw
勿論このパラメータはかなりの種類があります。
自分がよく使っているやつだけ後ほど解説します。


実践編


まぁ、作りながら覚えるのが一番ということで、GetterとSetterを独自で作成してみよう!
使う変数はクリップボードから値を取り出す$(Clipboard)とカーソルがある行の文字を取り出す$(CurWord)です。


作り方


  • Code Snippetsの設定画面を出します。

  • [Add]ボタンを押下します。(①の箇所)

  • SnippetNameの箇所に好きな名前を入力します。(②の箇所)
    (今回はgetsetという名前にしました)

  • 設定コードを入力します。

  • [Save]ボタンを押下します。(③の箇所)

  • これで使えるようになります!

blog_58_04.png
なお、消したい場合は、左側の登録されているスニペット一覧から選択し、[Delete]を押下します。
また、既存のスニペット又は自作のスニペットを変更する場合には、スニペット一覧から変更対象を選択して、設定コード入力画面に入力後に[Save]を押下してください。


今回の設定内容は下の通りです。



public function get $(Clipboard)():$(CurWord) { return _$(Clipboard); }
public function set $(Clipboard)( value:$(CurWord) ):void { _$(Clipboard) = value; }


使い方


下のようなprivateメンバーがあるとします。
private var _x:int;


こいつのゲッターとセッター作るのメンドクセーというときに使います。


  • メンバー変数の[_(アンダースコア)]以外の箇所をコピーします。

  • ゲッターとセッターを作りたい場所で、メンバーの型(この場合はint)と入力します。

  • [CTRL]+[B]を押下して、スニペット画面を出します。

  • getsetを選択してから(キーボードでgetsetと入力すると多分うまくいかないw)、[Tab]を押下します

  • 出来上がり!

以下のようなコードが自動生成されるはずです。



public function get x():int { return _x; }
public function set x( value:int ):void { _x = value; }


CurWordとClipboardの変数を使ったスニペットです。
これ使いたかったから、すごく使いにくいw
本来はメンバー変数を定義した後に、$(MbrTypName)とか使うとちょっとラクチン


まとめ


  • $(Clipboard) ... クリップボードの中身を貼り付ける

  • $(CurWord) ... カーソルのある行の文字を貼り付ける

使えるSnippetsの例


Event系は結構登録しておくと便利だったりします。
以下に設定例を掲載しておきます


dispatchEventの例


登録名:dispatchEvent


設定内容



dispatchEvent(new Event($(EntryPoint), true));


使い方
[CTRL]+[B]→[di]入力→[Tab]押下
dispatchEventが入った!こんだけw


イベントハンドラーの例


登録名:EventHandler


設定内容



private function $(Clipboard)(event:$(EntryPoint)):void
{

}


使い方
addEventListenerでEventHandler名を書きます。
ダブルクリック等でそのEventHandler名を選択しコピーします。
任意の場所で[CTRL]+[B]でSnippetsを出します。
[ev]とか入力して[Tab]押下でハンドラーができちゃいます。
まぁ、ありゃ便利だけど、なくても...という感じがしないでもないですが、使い慣れると楽ですよ!


その他


他にもまだまだあります!
Snippets Nameの隣のプルダウンメニュー内に変数の一覧がありますので、是非ご覧下さい。
(Insert Instructionのところ)


ちなみにこのSnippetsの設定ファイルはエクスポート・インポートができるようになってるので、こんなの作ったよーというのが簡単に共有できます。
誰かwiki作ってくれ!!!!!


各Instruction($()ではじまる変数みたいなの)の説明は要望があれば、頑張っちゃいます!
あんま反応がないブログだけどねぇー

スポンサーサイト

デザインのお勉強

ユーザビリティの勉強


デザイナとプログラマだと視点が違うということを実感した今日この頃...
デザイナはかっこいい・クールな画面を作りがちなのですかね?
こんなことをいうとデザイナに怒られそうだけど。


自分はどちらかというとわかりやすいデザインが好きです。
なので、楽天とかYahooなどの情報詰め込みまくりサイトはあんまり使わないです。
欲しい情報がすぐに見つかるサイト又は簡単に検索できるサイトがいいなと感じます。
商品買うときもAmazon一択です。楽天だと商品説明長すぎるんだもの。
まぁターゲット層が違うってことですかね。自分はお呼びでない雰囲気です。


最近はWebサイトもカスタムできるとこが多くなって嬉しいです。
Youtubeとか、いらない画面消せるのってすごくいいなと感じます。


まぁRIA触るのなら、ユーザビリティは避けて通れませんよね!


ということで勉強するために

買いました!
結構人気の本?


お勧めあったら教えてくださいね!アフィリエイトリンクから買いますよw

Flex3 バイキュービック法 解説編

バイキュービック法の解説編


この記事の続きです


Blogのフォーマットがあんまりよくないですね。
領域がせまくてソースコードが綺麗に表示できないzzz


重み付けの関数


まずは重みつけの関数から解説です。


関数名:bicubicWeightCalc


引数:distance:Number


目的:引数に応じた重みを計算する


下の画像の青い点が
var targetX:Number = Number(x) / changeScaleX
var targetY:Number = Number(y) / changeScaleY
の結果である拡縮前画像の位置です。
この青い点からどれくらい離れているのかが引数distanceになります。
blog-56-01.png


一番左側のX座標を0とし、青い点のX座標をtargetXとして、仮に1.3という数値とすると
距離distanceは| 1.3 - 0 | = 1.3になります。


距離が2以上離れている場合には、重み付けは0となり、変換後の色には反映されません。


今回は距離が1以上2未満なので、距離に応じた重み付けがされます


具体的には以下のような重みつけです。



// 距離が0以上1.0未満の場合の重み計算
if ( distance < 1.0 )
{
weight = 1 + ( a + 1.0 ) * d3p - ( a + 3.0 ) * d2p;
}// 距離が1.0以上2.0未満の場合の重み計算
else if ( distance < 2.0 )
{
weight = a * d3p - 5.0 * a * d2p + 8.0 * a * distance - 4.0 * a;
}
else
weight = 0.0;

ここで、d3pはdistanceの3乗を示し、d2pはdistanceの2乗を示しています。
また、aは定数項で、今回はよく使用される-1を設定してあります。
綺麗にいかない場合などはここをいじればどうにかなるかもしれません。


バイキュービック法の本体


関数名:bicubic


引数:targetBitmapData


widthSize


heightSize


isCalcAlpha


目的:バイキュービック法でtargetBitmapDataをwidthSize*heightSizeのBitmapDataオブジェクトに変換する


変換元となる画像はBitmapData型として渡します。
※JavaではBufferedImage型とかかな?


変換後の縦サイズはheightSize、横サイズはwidthSizeとします。


isCalcAlphaは未実装ですw
PNG画像を持ってきた際に、アルファ値も計算できるようにつけてあるだけです。
いれたら、処理が重くなったので、アルファ値計算しないようにしました。


処理フロー



  • 中身が空であるwidthSize*heightSizeのBitmapDataオブジェクトを作成します。

  • このBitmapDataオブジェクトの全てのピクセルに色を設定します
    ※for(var y...)とfor(var x...)の部分

  • ある箇所(x,y)の座標に色を設定する際には、元画像と変換後画像との比率から中心となる元画像の座標を計算します。



// 比率の計算箇所
var changeScaleX:Number = widthSize / targetBitmapData.width;
var changeScaleY:Number = heightSize / targetBitmapData.height;

... 省略 ...
// 変換後の画素位置に対応する元画像の位置の計算箇所
var targetX:Number = Number(x) / changeScaleX;
var targetY:Number = Number(y) / changeScaleY;

ixとiyを使用しているfor文が周囲の画素を調べている箇所です。
ix,iyのループの初期値はint(targetX[Y]) - 1です。
つまり、元画像の計算の中心となる箇所の1マス左側から調べ始めます。


もし、調査する範囲を4×4より広くしたければ、このfor文のint(targetX -1)の[-1]を変化させてください。(終了条件のint(targetX) + 2のところでも可)


あとは先程の重み付けの計算をする関数で重みを計算し、(ix,iy)の画素データの各色に重みを掛けてあげて、16ピクセル全てを合計します。


最後に合計してできた各色のデータを重みの合計で割ってあげれば、埋め込む色データの感性です。
該当箇所は以下のところです。



// 各色に重みを掛けている箇所
red += ( Number( color & 0x00ff0000 ) >> 16 ) * weight;
green += ( Number( color & 0x0000ff00 ) >> 8 ) * weight;
blue += ( Number( color & 0x000000ff ) ) * weight;

// できた色を重みの合計で割っている箇所
red /= totalWeight;
green /= totalWeight;
blue /= totalWeight;

ここで、colorは変換前の画像の(ix,iy)の位置の画素データです。
マスクを掛けた後にビットシフトして重みを掛けています


また、weightはX方向重みweightXとY方向重みweightYの積です。


こんなとこかなぁ…
処理速度が遅いのはまたなんとかしよう...

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