memo-memo

めちゃめちゃ久々の更新です。

しかも内容は若干しょぼい。。。。

 

今まで、何かオブジェクトをドラッグさせる様な場合、

ball.addEventListener(MouseEvent.MOUSE_DOWN, ballDown);
stage.addEventListener(MouseEvent.MOUSE_UP, ballUp);

function ballDown(e:MouseEvent):void{
 ball.addEventListener(Event.ENTER_FRAME, ballEnter);
}

function ballUp(e:MouseEvent):void{
 ball.removeEventListener(Event.ENTER_FRAME, ballEnter);
}

function ballEnter(e:Event):void{
 ball.x += stage.mouseX - ball.x;
 ball.y += stage.mouseY - ball.y;
}

こんな感じの書き方をしてました。赤文字のballは、ドラッグして動かしたいオブジェクトのインスタンス名です。

 

 

これでも動くけど、もっと簡単に書ける方法を、いまさら知ったので、メモしときます。

ball.addEventListener(MouseEvent.MOUSE_DOWN, ballDown);
ball.addEventListener(MouseEvent.MOUSE_UP, ballUp);

function ballDown(e:MouseEvent):void{
 ball.startDrag();
}

function ballUp(e:MouseEvent):void{
 ball.stopDrag();
}

 

startDrag()、stopDrag()….

こんなメソッドがあったのね。。。。。

リファレンスはこちら。

ジグザグ時計 – wonderfl build flash online

コードは、
http://wonderfl.net/c/dEsm
にあります。

flocessingのドキュメントはこちら。

今回はflocessingを使ってみたくて、簡単なサンプルを作ってみました。

コンストラクタ

39〜51行目のコンストラクタで、初期設定をしています。

drawDefaultLine

41行目のdrawDefaultLineメソッドの処理内容は、108〜113行目に書いてあります。
flocessingで使えるメソッドであるstrokeとlineを使ってます。
109行目のstroke(0xffffff,1);は、線の色を設定しています。第一引数が色で、第二引数がアルファ。
110〜112行目のlineメソッドの使い方は、

line(x1,y1,x2,y2);

上記の様な感じで、線を開始する点と終わる点を記述します。

addText

43〜45行目のメソッドaddTextは、「hours」、「minutes」、「seconds」を画面に表示させてるメソッドです。
内容は、115行目〜127行目に書いてあります。
まず、116行目〜118行目でテキストの設定をしています。今回は、117行目で色を白に設定し、118行目でサイズを30にしました。
次に、120行目〜122行目でテキストフィールドのインスタンス化と設定を行ってます。
123行目の

addField.text = word;

で、第一引数に指定された文字列を入れてます。
125行目の

addField.y = (stage.stageHeight / 3) * lineNumber - addField.height;

で、第二引数lineNumberを使って、yの値を設定しています。

ここで考えたのが、今回は縦に3分割するレイアウトとしたので、lineNumberには上から何番目かの数字を代入する様にしました。
例えば、minutesだったら、上から2番目なので44行目にある様に、addText(“minutes”, 2)と呼び出す様にしてあります。

これはあんまり汎用的ではないかも…….
126行目でaddChildして表示させます。

addHoursTextField

48行目〜50行目のaddHoursTextFieldメソッドは、数字が表示されるテキストフィールドを配置するメソッドです。
基本的には、addTextと殆ど同じです。128行目〜136行目にあります。
129行目〜132行目で、テキストフィールドの設定を行ってます。今回は、第一引数にテキストフィールドのインスタンスが指定されてます。
133行目〜135行目で、xとyと位置を決めて、addChildしてます。yの値の出し方は、addTextと同様。
この時点では、テキストフィールドは配置されたけど、その中には何も書かれてません。
最終的にDateで取得した時間が入ります。
ここまでで、コンストラクタ内にあるメソッドの説明は終了です。

次はdrawメソッドです。flocessignを使った場合、クラス内にdraw（）を書くと、勝手にenterframeで
繰り返してくれるらしいです。初期設定で止める事も出来るけど、今回は止めずに使ってみました。
54行目〜57行目で、現在の時間を取得して、時間、分、秒を各々変数に格納してます。
で、58〜66行目のif文ですが、条件の(nowSeconds != seconds)は、一秒毎に処理される様に書いてます。
65行目のnowSeconds = seconds;で、今の秒数を変数nowSecondsに格納して、それと等しくなければ（1秒経ったら）
if文を実行します。drawメソッドは、enterframeで実行されていているけど、if文の中身は、1秒に一回だけの処理でいいので、
こうしました。
で、今度はif文の中。

createPoints

59行目〜61行目で実行しているcreatePointsメソッドについて。
このメソッドは、最終的にジグザグの波形を作る時のポイントを格納する配列を返すメソッドです。
第一引数に時間（ジグザグの数）、第二引数に、中心となるyの値を指定します。
メソッドの内容は75行目〜99行目です。
まず77行目のif文で、第一引数が０じゃないかどうかを分岐してます。
もし０なら、（０分とか、０秒とか）ジグザグにする必要がないので分岐してます。
で、その中の78行目〜94行目のfor文で、ポイントを配列に格納していきます。
79行目〜81行目は変数の定義
82行目の

xPoint = stageWidth/3*2-25 - (halfBase*(points - i));

は、格納するポイントのxの値です。
stageWidth/3*2-25は、画面の右側の、ジグザグが表示されるスペースの幅の中央です。
そこから、第一引数pointからi分引いた数と、山の半分の値である変数halfBaceをかけた値を引けば、
一番最初の山のxポイントが解ります。説明がむずかしい…..

次は、yの値ですが、ジグザグにするには、偶数か奇数かをif文で分岐し、さらに繰り返し処理の最初と最後もyの値を変えなくちゃなりません。その処理が、83行目〜91行目です。
最初の条件の(i==0 || i == points*2)は、最初と最後の繰り返しです。
この時のyの値は第二引数で指定したHeightになります。
次の条件(i%2)は奇数の時です。
この時のyの値は第二引数で指定したHeightから50を引いた値になります。
最後は偶数のとき。
この時のyの値は第二引数で指定したHeightに50を足した値になります。
92行目で変数xPointと変数yPointを使ってPointのインスタンス化をしています。
で、93行目で配列newArrayに格納します。
96行目と97行目で、ジグザグ線の開始位置と終了位置のポイントを配列に格納しています。
開始位置はunshiftで最初に、終了位置はpushで最後に格納しています。
で、98行目でreturnします。

drawLine

次に62行目〜64行目で使っているdrwLineメソッドです。このメソッドは、第一引数に（ポイントが入った）配列を、第二引数に数値を取ります。第二引数の数値は、色の情報です。
内容は、101行目〜106行目です。
これはfor文とflocessingのstrokeとlineを使って、配列に格納されたポイントを順番に読み取って、線を書いていっています。
104行目の

line(point[i].x,point[i].y,point[i+1].x,point[i+1].y);

は、配列pointの、今の繰り返し番号？(iの事)の、xおよびyの値から、
その次の繰り返し番号(i+1)のxおよびyまで線を引いています。(日本語にすると余計難しい…)
67行目〜69行目で、addTextFieldで作った空っぽのテキストフィールドに時間を入れてます。

右側のString(hours + 100).substring(1)等の説明は、以前の記事に書いてあります。

http://blog.jokerstyle.org/archives/420
70行目〜72行目で、colorTransformで、色を消していってます。

以上で説明終了です。

終了ですが、とっても解りづらい説明になってしまった……

それに、正直もう少しブラッシュアップ出来そうな気がしてます。特にポイントを配列に格納したりする処理は、

別のクラスの方がいい気がする…..

もう少し勉強しなきゃ。

久々の更新になってしまいました。
表題の件、
スクプトを使って、テキストフィールドを作成して、文字を書く(配置する？)方法。

package{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	public class textFieldTest extends Sprite{
		private var label:TextField;

		public function textFieldTest(){
			addTextField();
		}

		private function addTextField():void{
			label = new TextField();
			label.autoSize = TextFieldAutoSize.LEFT;
			label.background = true;

			var format:TextFormat = new TextFormat();
			format.color = 0x000000;
			format.size = 50;

			label.defaultTextFormat = format;
			label.text = "123456789";
			label.x = (stage.stageWidth - label.width)/2;
			label.y = (stage.stageHeight - label.height)/2;
			addChild(label);
		}
	}
}

こんな感じで動きます。

コンストラクタをtextFieldTestとして、その中でaddTextField関数を実行してます。

まず、赤文字の部分でTextFieldをインスタンス化します。

緑文字の部分は設定です。今回は左揃えにするTextFieldAutoSize.LEFTと、背景の塗りを有効にするbackgroundを使用しました。(塗りの色の設定をして忘れたので、白ですが)

次に青文字の部分でTextFormatをインスタンス化して、プロパティを橙色文字で設定。

今回はテキストの色を黒にして、サイズを50としました。

紫文字でプロパティを設定したTextFormatをプロパティに追加。

以下、同様にプロパティを設定していく。テキストを「123456789」として、xとyの値を設定して、

最後にaddChildする。

下記の様になります。

今日は、CurveModifiersを使ってみた。
インスタンスを動かす時に、直線ではなく、
中間のポイントを指定してやる事で、曲線的に動かすことが出来る。

import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;

CurveModifiers.init();

start_mc.buttonMode = true;

start_mc.addEventListener(MouseEvent.CLICK, tween);

function tween(event:MouseEvent){
	start_mc.removeEventListener(MouseEvent.CLICK, tween);
	Tweener.addTween(memo_mc,
                        {_bezier:[{x:125,y:200},{x:275,y:0}],
                          x:350,y:100,time:3,transition:"linear"});
}

こんな感じ。
赤文字の部分が、CurveModifiersの部分。
ポイントは、いくらでも増やせるみたい。

どんどん記事もコードも大雑把になっていく…
とりあえずメモって事で。
ぼちぼち、tweenerの機能をまとめた様な記事が書きたいな。
時間がない!!!

若干手抜きだけど、サンプルを作ってみました。
どうやら、tweenerには、特殊なプロパティなるものが存在して、
それらを使うには、各々クラスを読み込まなきゃならないらしい。
FilterShortcutsを使う為には、

import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();

が、ColorShortcutsを使う為には、

import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();

が、各々必要。
必要なクラスを読み込んで、初期化しているっぽい。
で、その二つを使ったサンプルを作りました。
時間無くて、若干手抜き…

//Tweener読み込み
import caurina.transitions.Tweener
import caurina.transitions.properties.FilterShortcuts;
import caurina.transitions.properties.ColorShortcuts;

//初期化
Tweener.init(stage);
FilterShortcuts.init();
ColorShortcuts.init();

//グローバル変数
var timer;
var cont;
var ball;
var check = 1;

//ボタンモード
switch_mc.buttonMode = true;

//インスタンス化
cont = new Container();
timer = new Timer(100);

//タイマーイベント
timer.addEventListener(TimerEvent.TIMER, tween);
//stageをクリックしたら、on/off
switch_mc.addEventListener(MouseEvent.CLICK, repeat);

function tween(event){
	//場所をランダムにして、コンテナーの上にaddChild
	ball = new Ball();
	ball.x = Math.floor(Math.random()*300);
	ball.y = Math.floor(Math.random()*300);
	trace(ball.x);
	trace(ball.y);
	cont.addChild(ball);
	//tweenerで、addChildしたものをアニメーション
	Tweener.addTween(ball,{time:0.5,
　　　　　　　　_color:0x3E64FD,
　　　　　　　　_Blur_blurX:10,
　　　　　　　　_Blur_blurY:10,_Blur_quality:100, transition:"easeOutQuart"});
}

//stageをクリックしたら、アニメーションのon/off
function repeat(event){
	if(check == 0){
		switch_mc.gotoAndStop(1);
		timer.stop();
		check = 1;
	}else if(check == 1){
		switch_mc.gotoAndStop(2);
		timer.start();
		stage.addChild(cont);
		check = 0;
	}
}

リンケージの設定は、丸いボールが、Ball
空っぽのmcが、Container
赤文字の部分が、FilterShortcuts。青文字の部分が、ColorShortcuts。

このブログも、若干手抜きになってる…
次は、もうちょい解りやすく書かなきゃ。