ActionScript

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

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});

}

ブラウザでFLASHを再生中、デバッグのためにパラメータなどを出力する方法です。
ActionScriptを制作中によく利用するtraceですが、ブラウザで再生中には実行することができません。そこでJavaScriptとの連携を利用して同様のことを実現します。
はじめにHTML内にJavaScriptで、引数を受け取りダイアログで表示するスクリプトを記述します。関数名は「flashTrace」としておきます。

<script type="text/javascript">
function flashTrace($str) {
alert($str);
}
</script>

function flashTrace($str) {

alert($str);

}

</script>

次にActionScriptでは、JavaScriptの関数を実行するたスクリプトを記述します。引数の一つ目がJavaScriptの関数名で、二つ目が出力したいパラメータです。

ExternalInterface.call("flashTrace", "デバッグのテスト");

1	ExternalInterface.call("flashTrace", "デバッグのテスト");

これでブラウザで再生中に、ダイアログでActionScript内のパラメータを出力することができます。
ですが、このままだとFLASHで制作中のときには、traceも併記する必要が出てしまいます。その場合、下記のようにブラウザで再生かどうかを判定して、どちらか実行する関数にしておくと便利です。

ft("デバッグのテスト");

function ft(str:String):void {
	
	//サーバへのアクセスを判定してJavascript、またはtraceを実行
	if (loaderInfo.url.indexOf("http") == 0) {
		ExternalInterface.call("flashTrace", str);
	} else {
		trace(str);
	}
}

ft("デバッグのテスト");

function ft(str:String):void {

//サーバへのアクセスを判定してJavascript、またはtraceを実行

if (loaderInfo.url.indexOf("http") == 0) {

ExternalInterface.call("flashTrace", str);

} else {

trace(str);

}

ちなみにサーバへのアクセス（http://）ではなく、ブラウザで直接HTMLファイルを開いた場合（file://）には、FLASHのセキュリティでJavaScriptが実行されません。外部サーバではなくローカルで実行するには、Webサーバをローカル環境に構築する必要があります。

FLASHでビットマップのフルスクリーン表示。

2010.01.02 / Labs

外部ビットマップデータを読み込んで、ウィンドウ全面に表示されるように拡大・縮小を行います。ウィンドウのサイズが変更されたら、それに合わせてビットマップもリサイズします。
サンプルはこちら

package {
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.net.URLRequest;	

	public class Main extends Sprite {
		
		public function Main() {
			var loader:Loader = new Loader();
			var info:LoaderInfo = loader.contentLoaderInfo;
			
			//ビットマップデータの読み込み
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			loader.load(new URLRequest("image.jpg"));
			
			//ステージのスケールを固定で、原点を左上に
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			//ビットマップの読み込みが完了した時
			function onComplete(event:Event):void {
				var bmd:BitmapData = new BitmapData(info.width, info.height);
				var bm:Bitmap = new Bitmap(bmd, PixelSnapping.NEVER, true);
				
				//ビットマップを描画
				bmd.draw(loader);
				stage.addChild(bm);
				adjustBitmap(bm);
			}
			
			//ビットマップをステージのサイズに合わせる
			function adjustBitmap(bm:Bitmap):void {
				var inner:Number = bm.width/bm.height; //ビットマップの縦横比
				var outer:Number; //ステージの縦横比
				
				//ステージのサイズが変更された時
				stage.addEventListener(Event.RESIZE, transSize);
				transSize();
				
				//ビットマップを拡大・縮小
				function transSize():void {
					var size_x:uint = stage.stageWidth;
					var size_y:uint = stage.stageHeight;
					
					outer = size_x/size_y;
					
					//ビットマップ、ステージの縦横比を比較してサイズを変更
					if (inner >= outer) {
						size_x = size_x*(inner/outer);
					} else {
						size_y = size_y*(outer/inner);
					}
					bm.width = size_x;
					bm.height = size_y;
				}
			}
		}
	}
}

package {

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.Loader;

import flash.display.LoaderInfo;

import flash.display.PixelSnapping;

import flash.display.Sprite;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.events.Event;

import flash.net.URLRequest;

public class Main extends Sprite {

public function Main() {

var loader:Loader = new Loader();

var info:LoaderInfo = loader.contentLoaderInfo;

//ビットマップデータの読み込み

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

loader.load(new URLRequest("image.jpg"));

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

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

//ビットマップの読み込みが完了した時

function onComplete(event:Event):void {

var bmd:BitmapData = new BitmapData(info.width, info.height);

var bm:Bitmap = new Bitmap(bmd, PixelSnapping.NEVER, true);

//ビットマップを描画

bmd.draw(loader);

stage.addChild(bm);

adjustBitmap(bm);

}

//ビットマップをステージのサイズに合わせる

function adjustBitmap(bm:Bitmap):void {

var inner:Number = bm.width/bm.height; //ビットマップの縦横比

var outer:Number; //ステージの縦横比

//ステージのサイズが変更された時

stage.addEventListener(Event.RESIZE, transSize);

transSize();

//ビットマップを拡大・縮小

function transSize():void {

var size_x:uint = stage.stageWidth;

var size_y:uint = stage.stageHeight;

outer = size_x/size_y;

//ビットマップ、ステージの縦横比を比較してサイズを変更

if (inner >= outer) {

size_x = size_x*(inner/outer);

} else {

size_y = size_y*(outer/inner);

}

bm.width = size_x;

bm.height = size_y;

}

photo by : Josefrén

Almondlab

ActionScript

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

ブラウザ上でActionSctiptの簡易デバッグ。

FLASHでビットマップのフルスクリーン表示。