TONPOOBLOG » actionscript2

BitmapDataの「2880ピクセルの罠」もとい、「幅or高さ8,192ピクセル＆ピクセル総数16,777,216の罠」

tonpoo — Wed, 03 Mar 2010 03:37:11 +0000

またまた今更ながらの備忘録メモ。FlashPlayer8から使えるようになったBitmapDataクラスによって、動的にフィルターをかけたり、グラデーションのついたマスク表現などを使えるようになりました。

が、フィルターやグラデーションマスクといった機能、サイズ（ファイルサイズではなく、width x heightのサイズ）の大きな画像やオブジェクトに対しては効きません。具体的には、対象となるオブジェクトのwidthまたはheightが2880ピクセルを超過すると、こうした機能が無効になります。

で、その詳しい理由については下記のURLが詳しい：

Flash 8 のイメージ API の概要 | デベロッパーセンター

該当する部分の引用：

メモ : Flash Player では、ビットマップの最大サイズは幅、高さいずれも 2880 ピクセルに制限されています。この制約よりも大きい BitmapData インスタンスを作成しようとすると、ビットマップは作成されません。これは、クライアントの RAM を使い切るような Flash ムービーを作成できないようにするために設定されています。2880 × 2880 ピクセルのビットマップには、約 32 MB 程度の RAM が必要です。

~~残念ながらFlashPlayer10でもまだこの点についての変更は無い模様。~~なぜこの記事を書いてるかというと、今現在この問題で引っかかってるため。さて、どうして回避したものか・・・。

＜追記＞

kaedeさんからコメントで情報いただきましたが、FlashPlayer10からはBitmapDataサイズの制限が拡大されていますね。

BitmapData – ActionScript 3.0 言語およびコンポーネントリファレンス

当該部分を引用：

AIR 1.5 および Flash Player 10 では、BitmapData オブジェクトの最大サイズは幅または高さが 8,192 ピクセルで、ピクセルの総数は 16,777,216 を超えないようにする必要があります（したがって、BitmapData オブジェクトの幅が 8,192 ピクセルの場合、高さは 2,048 ピクセル以下にする必要があります）。Flash Player 9 以前および AIR 1.1 以前では、高さの制限は 2,880 ピクセル、幅の制限は 2,880 ピクセルです。幅または高さに 2880 より大きい値を指定すると、新しいインスタンスは作成されません。

なるほど、8192 x 8192ピクセル、ってのはダメなんですね。で、改めて今回作業してるファイルを見ると、cacheAsBitmapかけようと思ったインスタンスの横幅が9600ピクセル・・・。そ、そりゃあダメですよね。

FlashからExternalInterfaceクラスを使ってLightboxを呼び出す

tonpoo — Tue, 22 Dec 2009 13:55:06 +0000

「Flash（swf）からLightboxを呼び出す」というニーズがこれまでに何回かあり、またついさっきもあって、その都度ちょっと面倒だったりしたのでメモ。なお、ウチの会社ではswfファイルの埋め込みには通常swfobject2を使ってるので、以下は「Lightbox2.04 + swfobject2 + ActionScript（ExternalInterfaceクラス）」という組み合わせが前提となっています。

Lightboxを入手

まず使用するLightboxのバージョンは2.04。Lokesh Dhakar氏によるLightbox 2の公式サイトで入手。

ベースHTMLの作成

次にベースとなるHTMLを作成。今回はとりあえずSWFObject 2 HTML and JavaScript ジェネレーターを使ってサクっと作りました。ポイントとしては、「SWFの定義」のオプションを一部変更すること。

まず、Lightboxを表示した際に、swfコンテンツが上に来てしまうのを避けるため、wmodeをtransparentに設定。また、ExternalInterfaceクラスを使うので、allowscriptaccessをalwaysに設定。できあがったHTMLは下記の通り：

Lightbox用のライブラリを組み込み

上記のベースHTMLのheadセクションに、Lightbox動作のためのjsファイルとcssファイルを組み込む下記の記述を追加。

Lightboxを起動させるJavaScriptメソッドを追加

Lightboxを直接起動させるJavaScriptのメソッドがないので、下記ページを参考にそのためのメソッドを追加。

Execute Lightbox Scripts From Flash at Codefidelity
（情報元：Flash から Lightbox を起動する方法 – minorio のプログラミング・メモ）

具体的に追加する内容は下記の通り。

最終的にできあがったhtmlは下記の通り。

ExternalInterfaceで呼び出し

次はFlash側の用意。sample.flaというファイル（ActionScript3）を用意、ステージ上にボタン用のMovieClipインスタンスを３つ配置し、それぞれbtn0, btn1, btn2という名前を付ける。sample.flaのドキュメントクラスとしてSampleクラスを指定。Sample.asの内容は下記の通り。

package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.external.ExternalInterface;

	public class Sample extends MovieClip{
		public function Sample() {
			//Lightbox用の設定
			lightboxArray = new Array();
			lightboxArray[0] = {
				src:"images/photo0.jpg",
				caption:"写真その0"
			};
			lightboxArray[1] = {
				src:"images/photo1.jpg",
				caption:"写真その1"
			};
			lightboxArray[2] = {
				src:"images/photo2.jpg",
				caption:"写真その2"
			};
			//ボタンの設定
			for (var i:uint = 0; i < 3; i++) {
				var btn:MovieClip = this["btn" + i];
				btn.id = i;
				btn.buttonMode = true;
				btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);
			}
		}

		public var lightboxArray:Array;
		public var btn0:MovieClip;
		public var btn1:MovieClip;
		public var btn2:MovieClip;

		//ボタン用メソッド
		public function onBtnClick(e:MouseEvent):void {
			var btn:MovieClip = e.target as MovieClip;
			var id:uint = btn.id;
			var src:String = lightboxArray[id].src;
			var caption:String = lightboxArray[id].caption;
			//LightboxDelegateメソッドを呼び出し
			ExternalInterface.call("LightboxDelegate",src,caption );
		}
	}
}

これで完成！

オマケ：IE7～8でのLightboxの表示バグフィックス

Lightboxを使った縦に長いページをIEで閲覧した場合、ページをスクロールしてからLightboxを起動すると、Lightboxの背景（黒い透過）部分が途中で切れてしまう。これを回避するためにとりあえずやったのがlightbox.cssの改造。具体的には#overlayのpositionをabsoluteからfixに変更（+IE6ではおかしくなってしまうので、スターハックを使ってabsoluteのまま）部分を下記のようにしました。

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}
* html #overlay {
	position: absolute;
}

以上、備忘録もかねて参考までに。

ECMAScript 第5版承認－ActionScript次期バージョンはどうなるか？

tonpoo — Sat, 19 Dec 2009 10:40:58 +0000

前にECMAScript HarmonyとActionScriptという記事を書きましたが、そのECMAScriptの最新版、ECMA-262第5版の仕様策定が完了したそうです。

・ECMAScript 第5版承認 – スラッシュドット・ジャパン
・InfoQ: ECMAScript 5リリース

上記ページを読んでも正直よくわかんないんですが、前者の記事では

Microsoft/Yahooが主導するマイナーチェンジとバグフィックスが主のECMAScript 3.1と、 Adobe/Mozilla/Opera/Googleが主導する野心的な機能拡張である ECMAScript 4の間で対立があったが、 ECMAScript Harmonyと呼ばれる統合計画によって ES3.1をベースに ES4のサブセットを取り込む形で両者が合意した経緯がある。

・・・と書かれている一方、後者の記事では

ECMAScript 4を合理化しようという初期の試みは大失敗に終わった。結局、Adobe社のActionScriptだけが提案された変更点に対応しただけだった。

・・・と書かれています。これはつまり、
●ECMAScript本体の方は3.1をベースにES4の一部機能（仕様）を取り込むにとどまった。
●ES4に対応したのはActionScriptだけだった。
・・・というようなことなんでしょうか？

とりあえず、ActionScript次期バージョンへの影響が心配されます。AS3にやっと慣れてきた手前、この学習資産が無駄にならなきゃいいんだけど・・・。

ECMAScript HarmonyとActionScript

tonpoo — Tue, 21 Jul 2009 01:02:38 +0000

先日、とある機会に友人と話をしていたときのこと。（webページの記述言語が）html4.01からxhtml1.0になり、かつては書籍などにも↓

HTMLは1999年12月公表の4.01で終了しており、マークアップ言語の開発はXHTMLに引き継がれている

・・・とまで書かれていたにもかかわらず、当のxhtmlの策定が打ち切られ、webページの記述言語は再びhtmlに戻ることになるらしい。「今後はこっちが主流になるよ、って言うんで勉強しても、数年たったら結局あっちに戻る」とかって言うのは嫌ですねえ。なんていう話をしたら、「そうですよねえ。ActionScriptもそんな感じらしいですよ」と言われてビックリ！

で、その時は酒が入ってたので、その後調べるのを忘れてしまっていたんだけど、さっきたまたま関連する記事を発見。

BeInteractive! [ECMAScript Harmony と ActionScript]

今新たに策定されようしている ECMAScript Harmony は、ECMAScript 3.1 がベースで、今まで策定されてきた ECMAScript 4 とは異なる部分が多々あります。そのため、ECMAScript 4 準拠を目指していた ActionScript 3.0 は、当然のことながら ECMAScript Harmony と異なる部分が多々あります。そして、現時点で、ECMAScript Harmony には、パッケージや名前空間といった仕様は入れず、今後も議論の対象としない、ということが決定しているので、ActionScript 3.0 は機能を削らない限り、ECMAScript Harmony 非互換非準拠になることが既に決定している訳です。

・・・ってコレ一年前の記事じゃないですか！えええええ。し、知らなかった・・・。むー、もしかして次期バージョン（ActionScript4？）では、ECMAScript3準拠のActionScript1ないし2の書き方に戻るようになったりするんでしょうか。うー、憂鬱・・・。

FlashDevelopのコードアシスト機能

tonpoo — Thu, 25 Jun 2009 11:45:09 +0000

昨日のSpark project 勉強会 #10の中で、Adobeの西村さんがFlash Builderの特徴（？）として挙げていた項目の中に、「ASDocの参照機能」と「getter/setterを一発で設定できる」というものがあった様に記憶してるんですが、これらの機能はFlashDevelopでも存在するんですね。

Flash Develop + CS3 – Flash OOP Japan
以下、上記ページからの引用：

【FlashDevelopコードアシスト.xls】

［Ctrl］
＋
［Space］
文脈に応じたコードヒントが表示されます。”.”の後や途中まで入力したプロパティ名など、色んなところで使ってみてください。

［Ctrl］
＋
［Shift］
＋
［Space］
メソッドの () の中で使用すると、そのメソッドの引数に関して説明が表示されます。メソッドにASDocがあればそれに応じた説明が表示されます。説明が多い場合は省略して表示されますが、その際は［F1］キーで拡大できます。なお、IMEが全角の場合は無効となるので注意してください。

［Ctrl］
＋
［Alt］
＋
［Space］
そのプロジェクトで使えるクラスのリストが表示されます。

［Ctrl］
＋
［Shift］
＋
［1］
最新版 Beta6 より追加された新機能で、文脈に応じたコード生成を行います。
例えば、
・addEventListener() の、引数内のイベントタイプ・ハンドラ関数名よりイベントハンドラ関数のコード生成
・変数名より getter/setter 関数のコード生成
・関数内のローカル変数をインスタンスプロパティへ変換しコード生成
マウスカーソルの位置を変えて実行してみてください。なお、公式Wikiにはキャプチャ画像つきで詳しく載っています。
http://www.flashdevelop.org/wikidocs/index.php?title=Features:Generation

［Ctrl］＋［Space］	文脈に応じたコードヒントが表示されます。”.”の後や途中まで入力したプロパティ名など、色んなところで使ってみてください。
［Ctrl］＋［Shift］＋［Space］	メソッドの () の中で使用すると、そのメソッドの引数に関して説明が表示されます。メソッドにASDocがあればそれに応じた説明が表示されます。説明が多い場合は省略して表示されますが、その際は［F1］キーで拡大できます。なお、IMEが全角の場合は無効となるので注意してください。
［Ctrl］＋［Alt］＋［Space］	そのプロジェクトで使えるクラスのリストが表示されます。
［Ctrl］＋［Shift］＋［1］	最新版 Beta6 より追加された新機能で、文脈に応じたコード生成を行います。例えば、・addEventListener() の、引数内のイベントタイプ・ハンドラ関数名よりイベントハンドラ関数のコード生成・変数名より getter/setter 関数のコード生成・関数内のローカル変数をインスタンスプロパティへ変換しコード生成マウスカーソルの位置を変えて実行してみてください。なお、公式Wikiにはキャプチャ画像つきで詳しく載っています。 http://www.flashdevelop.org/wikidocs/index.php?title=Features:Generation

FlashDevelop、すばらしい！（Adobeさん、スイマセン・・・）

MovieClip.scrollRectプロパティ

tonpoo — Fri, 29 May 2009 09:41:00 +0000

「超訳：Tweenerドキュメント＆言語リファレンス」の翻訳作業を進める中で、MovieClip.scrollRectプロパティというものの存在を知った。

import flash.geom.Rectangle;

//ステージ上にムービークリップ（灰色・100×300）を生成
var mc:MovieClip = this.createEmptyMovieClip(“movie_mc”,this.getNextHighestDepth());
mc.beginFill(0×999999);
mc.moveTo(0,0);
mc.lineTo(100,0);
mc.lineTo(100,300);
mc.lineTo(0,300);
mc.endFill();

//生成したムービークリップの中にテキストフィールドを生成し、ダミーテキストを表示
var txt:TextField = mc.createTextField(“movie_txt”,mc.getNextHighestDepth(),0,0,100,300);
txt.wordWrap = true;
txt.multiline = true;
txt.text = “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”;

//scrollRectとして設定するためのRectangleオブジェクトを生成
var rect:Rectangle = new Rectangle(0,0,mc._width,100);

//生成したムービークリップのscrollRectとしてrectを設定
mc.scrollRect = rect;
//scrollRectプロパティを設定したムービークリップのcachaAsBitmapプロパティをtrueに設定
mc.cacheAsBitmap = true;

ここまでだとマスクと何ら変わりない。scrollRectの「scrollって何？」って思ったら、こういうことらしい↓

this.onMouseDown = function():Void{
    this.onEnterFrame = function():Void{
        //scrollRectに設定したRectangleオブジェクトのyプロパティを変更
        rect.y ++;
        //scrollRectオブジェクトを再設定
        mc.scrollRect = rect;
    };
};

this.onMouseUp = function():Void{
    delete this.onEnterFrame;
};

おお、スクロールする！うん、割とこれは便利かもしれないですね。今後、活用しよう。

ちなみにTweenerの特殊プロパティを使ってscrollRectをトゥイーンさせた例は下記の通り。

import flash.geom.Rectangle;
import caurina.transitions.Tweener;
import caurina.transitions.properties.DisplayShortcuts;
DisplayShortcuts.init();

//ステージ上にムービークリップ（灰色・100×300）を生成
var mc:MovieClip = this.createEmptyMovieClip(“movie_mc”,this.getNextHighestDepth());
mc.beginFill(0×999999);
mc.moveTo(0,0);
mc.lineTo(100,0);
mc.lineTo(100,300);
mc.lineTo(0,300);
mc.endFill();

//生成したムービークリップの中にテキストフィールドを生成し、ダミーテキストを表示
var txt:TextField = mc.createTextField(“movie_txt”,mc.getNextHighestDepth(),0,0,100,300);
txt.wordWrap = true;
txt.multiline = true;
txt.text = “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”;

//scrollRectとして設定するためのRectangleオブジェクトを生成
var rect:Rectangle = new Rectangle(0,0,mc._width,100);
mc.scrollRect =rect;
//scrollRectプロパティを設定したムービークリップのcachaAsBitmapプロパティをtrueに設定
mc.cacheAsBitmap = true;

//Tweenerの特殊プロパティを使ってscrollRectを操作
this.onMouseDown = function():Void{
    Tweener.addTween(mc,{
        _scrollRect:rect,
        _scrollRect_y:(mc._height),
        time:2
    });
};

配列の（浅い）コピー

tonpoo — Wed, 20 May 2009 08:48:00 +0000

ActionScriptで配列をコピーする方法について。

Flash CS4 Professional ActionScript 2.0

下記のように単に元配列を参照しただけでは、copy_arrayへの変更が元配列（base_array）にも及んでしまう。

var base_array:Array = new Array(“a”,“b”,“c”);
var copy_array:Array = base_array;
copy_array.shift();
trace(base_array); //”b”,”c”←base_arrayの方も変更されている
trace(copy_array); //”b”,”c”

Array.slice()メソッドを引数なしで使うことで、配列の（浅い）コピーを作ることができる。

var base_array:Array = new Array(“a”,“b”,“c”);
var copy_array:Array = base_array.slice();
copy_array.shift();
trace(base_array); //”a”,”b”,”c”←base_arrayの方は元のまま
trace(copy_array); //”b”,”c”

Tweener 1.32.74

tonpoo — Wed, 20 May 2009 01:28:00 +0000

Tweenerがバージョンアップ（1.31.74→1.32.74）との報告が公式MLでありました。

[Tweener] Tweener 1.32.74

変更点についての記述は下記の通り（一部抜粋）。

変更点は至ってわずか（ほんのコード2行分）。でも重要な変更です。

＊Tweenの上書きを「オプション」扱いとし、デフォルトでは無効とした。
＊addTween()に「overwrite:」パラメーターを新規に追加。この値が「true」だったら、新しいtweenとオーバーラップする同一オブジェクトの同一プロパティに設定されているすべてのtweenを上書きする。

Tweenの上書きをたくさん使ってるような場合には、この変更によって互換性が失われることがあるかもしれません。ただ、特に大量の数のtweenを生成する場合のパフォーマンスが大幅に向上されるので、こうすることが重要だと考えました。

公式サイトの方にはまだ反映されてないし、上記メールの文中にあるURLはSVN用のものなので、Subversion使ってる人向けってことですかね。

超訳：Tweenerドキュメント＆言語リファレンス

tonpoo — Wed, 22 Apr 2009 02:35:00 +0000

Tweenerのドキュメントの一部を日本語化してみました。ただ、未完成＆わりといいかげんなので、参考程度に利用してみてください。

［Ctrl］＋［Space］	文脈に応じたコードヒントが表示されます。”.”の後や途中まで入力したプロパティ名など、色んなところで使ってみてください。
［Ctrl］＋［Shift］＋［Space］	メソッドの () の中で使用すると、そのメソッドの引数に関して説明が表示されます。メソッドにASDocがあればそれに応じた説明が表示されます。説明が多い場合は省略して表示されますが、その際は［F1］キーで拡大できます。なお、IMEが全角の場合は無効となるので注意してください。
［Ctrl］＋［Alt］＋［Space］	そのプロジェクトで使えるクラスのリストが表示されます。
［Ctrl］＋［Shift］＋［1］	最新版 Beta6 より追加された新機能で、文脈に応じたコード生成を行います。例えば、・addEventListener() の、引数内のイベントタイプ・ハンドラ関数名よりイベントハンドラ関数のコード生成・変数名より getter/setter 関数のコード生成・関数内のローカル変数をインスタンスプロパティへ変換しコード生成マウスカーソルの位置を変えて実行してみてください。なお、公式Wikiにはキャプチャ画像つきで詳しく載っています。 http://www.flashdevelop.org/wikidocs/index.php?title=Features:Generation