2010.1

ボタンのロールオーバー、ロールアウト、クリックの設定。

2010.01.15 / Notes

ボタンオブジェクトに対して、ロールオーバー、ロールアウト、クリックをまとめて設定するスクリプトです。
ロールオーバー、ロールアウト、クリックのイベントリスナーごと、関数内に記述して、内包しているリスナーの関数を実行しています。リスナーの関数は一つだけ書いて、イベントタイプの文字列で振り分けるようにしています。

setButton(button, "test");

//ボタンにロールオーバー、ロールアウト、クリックの設定
function setButton(button:DisplayObject, str:String):void {
	button.addEventListener(MouseEvent.ROLL_OVER, mouseEvent);
	button.addEventListener(MouseEvent.ROLL_OUT, mouseEvent);
	button.addEventListener(MouseEvent.CLICK, mouseEvent);
	
	//イベントのタイプで処理を振り分け
	function mouseEvent(event:MouseEvent):void {
		switch (event.type) {
			case "rollOver": //ロールオーバーのとき
				button.alpha = 0.5;
				trace(str+"over");
				break;
			case "rollOut": //ロールアウトのとき
				button.alpha = 1;
				trace(str+"out");
				break;
			case "click": //クリックのとき
				button.alpha = 0;
				trace(str+"click");
				break;
		}
	}
}

setButton(button, "test");

//ボタンにロールオーバー、ロールアウト、クリックの設定

function setButton(button:DisplayObject, str:String):void {

button.addEventListener(MouseEvent.ROLL_OVER, mouseEvent);

button.addEventListener(MouseEvent.ROLL_OUT, mouseEvent);

button.addEventListener(MouseEvent.CLICK, mouseEvent);

//イベントのタイプで処理を振り分け

function mouseEvent(event:MouseEvent):void {

switch (event.type) {

case "rollOver": //ロールオーバーのとき

button.alpha = 0.5;

trace(str+"over");

break;

case "rollOut": //ロールアウトのとき

button.alpha = 1;

trace(str+"out");

break;

case "click": //クリックのとき

button.alpha = 0;

trace(str+"click");

break;

}

イベントリスナーで引数を渡す方法。

2010.01.13 / Notes

マウスのクリック時などのイベントリスナーで、追加の引数を渡す方法です。
通常イベントリスナーから呼び出すリスナーの関数には引数を渡すことができませんが、次の方法で任意に渡すことができます。

stage.addEventListener(MouseEvent.CLICK, mouseClick("test"));

function mouseClick(str:String = null):Function {
	return function(event:MouseEvent):void {

		//クリックされたときの処理
		trace(str);
	}
}

stage.addEventListener(MouseEvent.CLICK, mouseClick("test"));

function mouseClick(str:String = null):Function {

return function(event:MouseEvent):void {

//クリックされたときの処理

trace(str);

}

イベントリスナーから呼び出す関数の戻り値に、イベントオブジェクトを引数とする関数を返すことで、引数を受け取ることが可能になります。
上記のスクリプトでは無名関数にしているので少し読みづらいですが、書き換えると次のようになります。

function mouseClick(str:String = null):Function {
	return mouseEvent;

	function mouseEvent(event:MouseEvent):void {

		//クリックされたときの処理
		trace(str);
	}
}

function mouseClick(str:String = null):Function {

return mouseEvent;

function mouseEvent(event:MouseEvent):void {

//クリックされたときの処理

trace(str);

}

ActionScriptで配列のシャッフル。

2010.01.12 / Notes

配列の順番をランダムにソートしてシャッフルを行うスクリプトです。

var array_01:Array = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
var array_02:Array = array_01.slice(); //array_01を複製

shuffleArray(array_02); //シャッフルを実行

trace(array_01); //1,2,3,4,5,6,7,8,9,10
trace(array_02); //3,2,10,4,6,8,1,7,9,5

//配列をランダムにソートしてシャッフル
function shuffleArray(array:Array):void {
	array.sort(function () {
		return Math.floor(Math.random()*3)-1;
	});
}

var array_01:Array = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

var array_02:Array = array_01.slice(); //array_01を複製

shuffleArray(array_02); //シャッフルを実行

trace(array_01); //1,2,3,4,5,6,7,8,9,10

trace(array_02); //3,2,10,4,6,8,1,7,9,5

//配列をランダムにソートしてシャッフル

function shuffleArray(array:Array):void {

array.sort(function () {

return Math.floor(Math.random()*3)-1;

});

}

ウィンドウ内をスクロールするフィールド。

2010.01.11 / Labs

縦横に複数のページを持つフィールドを、ウィンドウ内でスクロールします。グリッド状に縦横にページを作成して、方向キーの操作でページをスクロールします。
サンプルはこちら
（方向キーを有効にするには、一度FLASHエリアをクリックして、フォーカスを当てる必要があります）

package {
	
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import caurina.transitions.Tweener;

	public class Main extends Sprite {
		
		public function Main() {
			var piece:Rectangle = new Rectangle(0, 0, 800, 600); //ページのサイズ
			var current:Point = new Point(0, 0); //フィールド内のページ位置
			var pivot:Sprite = new Sprite(); //ステージの中心点
			var field:Sprite = new Sprite();
			pivot.addChild(field);
			stage.addChild(pivot);
			setPivot(pivot);
			
			//ステージのスケールを固定で、原点を左上に
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			//横15×縦10のページでフィールドを作成
			makeField(new Point(15, 10));
			
			//フィールドを作成
			function makeField(grid:Point):void {
				for (var i:uint = 0; i < grid.y; i++) {
					for (var j:uint = 0; j < grid.x; j++) {
						
						//ページに矩形を描きランダムに彩色
						var shape:Shape = new Shape;
						shape.x = piece.width*j-piece.width/2;
						shape.y = piece.height*i-piece.height/2;
						shape.graphics.beginFill(Math.random()*0x1000000);
						shape.graphics.drawRect(piece.x, piece.y, piece.width, piece.height);
						shape.graphics.endFill();
						field.addChild(shape);
					}
				}
				stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress(grid));
			}
			
			//方向キーでスクロールの設定
			function onKeyPress(grid:Point):Function {
				return function(event:KeyboardEvent):void {
					switch (event.keyCode) {
						case 37: current.x--; break; //左キー
						case 38: current.y--; break; //上キー
						case 39: current.x++; break; //右キー
						case 40: current.y++; break; //下キー
					}
					
					//フィールドの端まで移動したとき
					if (current.x < 0) current.x = 0;
					if (current.x >= grid.x) current.x = grid.x-1;
					if (current.y < 0) current.y = 0;
					if (current.y >= grid.y) current.y = grid.y-1;
					
					Tweener.addTween(field, {time:0.75, x:-piece.width*current.x, y:-piece.height*current.y});
				}
			}
			
			//ステージサイズに合わせて中心点を移動
			function setPivot(pivot:Sprite):void {
				stage.addEventListener(Event.RESIZE, transfield);
				transfield();
				
				function transfield():void {
					Tweener.addTween(pivot, {time:0.75, x:stage.stageWidth/2, y:stage.stageHeight/2});
				}
			}
		}
	}
}

package {

import flash.display.Shape;

import flash.display.Sprite;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.events.Event;

import flash.events.KeyboardEvent;

import flash.geom.Point;

import flash.geom.Rectangle;

import caurina.transitions.Tweener;

public class Main extends Sprite {

public function Main() {

var piece:Rectangle = new Rectangle(0, 0, 800, 600); //ページのサイズ

var current:Point = new Point(0, 0); //フィールド内のページ位置

var pivot:Sprite = new Sprite(); //ステージの中心点

var field:Sprite = new Sprite();

pivot.addChild(field);

stage.addChild(pivot);

setPivot(pivot);

//ステージのスケールを固定で、原点を左上に

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

//横15×縦10のページでフィールドを作成

makeField(new Point(15, 10));

//フィールドを作成

function makeField(grid:Point):void {

for (var i:uint = 0; i < grid.y; i++) {

for (var j:uint = 0; j < grid.x; j++) {

//ページに矩形を描きランダムに彩色

var shape:Shape = new Shape;

shape.x = piece.width*j-piece.width/2;

shape.y = piece.height*i-piece.height/2;

shape.graphics.beginFill(Math.random()*0x1000000);

shape.graphics.drawRect(piece.x, piece.y, piece.width, piece.height);

shape.graphics.endFill();

field.addChild(shape);

}

stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress(grid));

}

//方向キーでスクロールの設定

function onKeyPress(grid:Point):Function {

return function(event:KeyboardEvent):void {

switch (event.keyCode) {

case 37: current.x--; break; //左キー

case 38: current.y--; break; //上キー

case 39: current.x++; break; //右キー

case 40: current.y++; break; //下キー

}

//フィールドの端まで移動したとき

if (current.x < 0) current.x = 0;

if (current.x >= grid.x) current.x = grid.x-1;

if (current.y < 0) current.y = 0;

if (current.y >= grid.y) current.y = grid.y-1;

Tweener.addTween(field, {time:0.75, x:-piece.width*current.x, y:-piece.height*current.y});

}

//ステージサイズに合わせて中心点を移動

function setPivot(pivot:Sprite):void {

stage.addEventListener(Event.RESIZE, transfield);

transfield();

function transfield():void {

Tweener.addTween(pivot, {time:0.75, x:stage.stageWidth/2, y:stage.stageHeight/2});

}

QuicKeysで作業を自動化。

2010.01.09 / Notes

QuicKeysではMacの作業を記録して、ショートカットキーに登録できます。
Mac OS XにはAutomatorという、作業の自動化を行うアプリケーションがありますが、QuicKeysはより柔軟に作業のプロセスを記録できます。

Web制作の中でウィンドウの操作とテキストの加工は、繰り返し行うことの多い作業です。
QuicKeysではブラウザでHTMLをプレビューの際に、モニターの解像度を想定してウィンドウのサイズを調整して表示や、選択したテキストに対してタグで囲ったりする処理も記録できます。
処理の記録には、Macでの実際の操作をリアルタイムに記録する方法と、専用のエディタで作成する方法があります。エディタの編集画面は次のようになります。

ウィンドウの位置、サイズを調整

ウィンドウを画面の左半分にリサイズして表示します。画面の左側でコーディングを行い、右側でブラウザのプレビューといった使い方をしています。

テキストをタグで囲む

選択したテキストに対して、<p>タグで囲む処理です。

QuicKeysの製品ページ