memo.393

以前作ったもの。
ネットで検索できるようにメモ。

前の記事の続き、
FlashBuilder4.5のActionScriptモバイルプロジェクトでの設定のお話。

まず横向き固定にする方向は、hoge-app.xmlに

<!-- hoge-app.xml内のinitialWindow要素に指定 -->
<aspectRatio>landscape</aspectRatio> 

を設定するだけでOK。
これでデバッグプレビューすると確かに横向きでプレビューされる。
が、stage.stageWidthは320、stage.stageHeightは480と変更されていない。
(ちなみにFlexモバイルプロジェクトの場合はstage.stageWidthは480、stage.stageHeightは320となり問題ないようす)

ではどうしたらいいか、
結論としては、ドキュメントクラスのコンストラクタに以下の一行を追加
stage.setAspectRatio(StageAspectRatio.PORTRAIT);

//前提で、hoge-app.xmlに<aspectRatio>landscape</aspectRatio>と設定
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
trace(stage.stageWidth, stage.stageHeight); //出力：320,480
stage.setAspectRatio(StageAspectRatio.PORTRAIT);
trace(stage.stageWidth, stage.stageHeight); //出力：480,320

解せないのが、なぜPORTRAITなのか。
通常はPORTRAITは縦、LANDSCAPEは横をあらわすので、stage.setAspectRatio(StageAspectRatio.LANDSCAPE);と設定すればいいと思ったのだけど、これだとstage.stageWidthは320、stage.stageHeightは480のままとなった。

//前提で、hoge-app.xmlに<aspectRatio>landscape</aspectRatio>と設定
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
trace(stage.stageWidth, stage.stageHeight); //出力：320,480
stage.setAspectRatio(StageAspectRatio.LANDSCAPE);
trace(stage.stageWidth, stage.stageHeight); //出力：320,480

解せぬ。

※2011.8.15追記
上記設定だと実機転送した際に横方向にはならない様子。。。
やはりsetAspectRatio()にはStageAspectRatio.LANDSCAPEを設定しないと横向き固定にはなりませんでした。
上に書いたLANDSCAPE設定での懸念されるステージサイズは、
trace(stage.stageWidth, stage.stageHeight); //出力：320,480
となっているようで実機起動上では特に問題なさげ。
ステージサイズがちゃんと取れないのはデバッグプレビューだけでのバグってことなのか！？

※2011.8.18追記
コメント欄にて教えていただきました。
stage.setOrientation(StageOrientation.DEFAULT)を設定することで想定したstageサイズを取得することができました。

//前提で、hoge-app.xmlに<aspectRatio>landscape</aspectRatio>と設定
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
trace(stage.stageWidth, stage.stageHeight); //出力：320,480
stage.setAspectRatio(StageAspectRatio.LANDSCAPE);
stage.setOrientation(StageOrientation.DEFAULT)；
trace(stage.stageWidth, stage.stageHeight); //出力：480,320

だいぶはまってネットに情報が見当たらなかったのでメモ。

FlashBuilder4.5でiPhone、Androind等のアプリを作るため、以下2つのプロジェクトが用意されました。

1. Flexモバイルプロジェクト
2. ActionScriptモバイルプロジェクト

1.はMXMLベースのプロジェクトで2はASだけで作れるプロジェクト。
ボクはMXMLはさっぱりなのでASだけで作れる2.を選択。
普通のFlashコンテンツを作ると同様にドキュメントクラスからゴリゴリ書いていけばOKですが、
iOS用の書き出しをした際にステージサイズの参照値おかしなことになりました。

こちらの想定は、シミュレートデバイスが、iPhone3GSなら320 × 480、
iPhone4設定なら、640 × 960となってほしいところですが、
stage.stageWidth,stage.stageHeightのtrace結果は常に、500, 375

なんぞこれ、と思えどステージサイズの設定する箇所は見当たらず。
ためしにapp.xmlのwidthとheightに直接値(320 480)を入れてみるも変化無し。
さらにドキュメントクラスにSWFのembedタグを書いてみるも変化無し。

FlashBuilderのHelpを観てみるとこんなページに行き着きました。
http://www.randytroppmann.com/2011/04/12/pure-as3-workflow-with-flex-builder-4-5/

そこに書かれていた見慣れぬ1行を追加してみると。。。

stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

これを入れることでstage.stageWidth,stageHeightが想定通りの値となりました。
(シミュレートデバイスを変えることにより値も変化する)
とりあえず、よくわからんけど、上記一行は必須らしい。

P.S.
Retina対応もできるらしいけど、3G/3GSとRetinaの混合設定がよくわからん。。
highを書くだけで、Objective-Cみたいに自動でいい感じに変換してくれるのか、それとも2種類の画角を分けて作らないのいけないのか。。
Retinaの実機がないから検証できんのよね。。

ProgressionでPreloader.asからindex.swfを読み込むときにこんなエラーダイアログに悩まされてました。

どういうときにこのエラーになるかというと、Preloader.swfがindex.swfの読みこみが終わらないうちに、ブラウザを閉じてしまうとこうなります。
index.swfが重い場合、「ローディング長いからもう観なくていいや」ってブラウザ落とすと上記ダイアログで固まるんですね。
最高にうざい状態です。

で、エラーとしては、IOErrorってわかってるので、そこのエラー処理を書いてあげればいいんですけど、読み込みの処理はPreloader.asの親クラスに書いてあるので、どのオブジェクトに対して、IOErrorのハンドリングをすればいいのかわからなかったのですが、ついに重い腰をあげて親クラスの中身を覗いてみたら、5分で解決したというオチです。

結論としては、こんな感じ。

//Preloader.asの atReady()の中に一行追加
override protected function atReady():void{
//↓これを追加
this.addEventListener(IOErrorEvent.IO_ERROR, function():void { trace("エラー") } );
}

Preloader.asのatReady()の中で、thisに対してIOErrorのハンドリングを書けばOKです。

なぜ、thisに書くかといえば、Preloader.asの親クラス、CastPreloader.asの中にこの一行があるので。

_loader.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR, super.dispatchEvent );
//_loaderはindex.swfを読むためのもの

リスナー関数でsuper.dispatchEventを飛ばしてるから、Preloader.asのthisでイベントを取れるようです。

ちなみに、CastPreloader.as内の_loaderは、Preloader.asからはcontentLoaderInfoで参照が取れるので、Preloader.as内で、

//thisの代わりにcontentLoaderInfoでイベントをハンドリング
contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, function():void { trace("エラー") } );

という感じで書いてみると、一応traceは出力されるんですけども、traceの前に最初のエラーが表示されてしまい、まったく意味がないことになりました。
なので、contentLoaderInfoではなく、素直にthisでIOErrorEventをハンドリングすればOK。

はまったのでメモメモ。

FlashをHTMLでの領域を指定できる便利ライブラリSWFSize。
Progressionにも採用されてて単体で使うケースがあんまりなかったのだけど、単体で使ったらIE6だけでエラーになった。
具体的には最低サイズ以下(resizeが機能したとき）になるとブラウザが固まる。

なんだこりゃとググってみると開発者のHIGEさんからのコメントが。

さらにググるとボクのケースでの原因と一致する記事を発見。
IEでonresizeの操作がうまくいかない – Miuran Business Systems

具体的にはDTDがonresizeに対応していなかったということ。

<!--最初に書いてた宣言-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--修正した宣言-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--"http://www.w3.org/TR/html4/loose.dtd"を削除-->

普段DOCTYPE宣言とか意味もよくわからず呪文のように書いてる（正確にはコピペ…）からこういうところよくわからんです。。

ちょっとはまったので検索用のメモ

FlashIDEを使わずにFlexSDK(FlashDevelop)で製作中に、Flashのコンポーネント(具体的にはComboBox)が使いたいと。
FlashDevelopにはコンポーネントのライブラリが入ってない。
どっかにないかなと探すとfl.swcってやつが見つかった。

EVOLVE | Downloads

DLして、プロジェクトにライブラリパスを通すとコンポーネント系のコード補完がでるようになってインスタンス化することもできるようになった。

がしかし、addChidすると以下のようなエラーがでる。

TypeError: Error #2007: パラメーター child は null 以外でなければなりません。
at flash.display::DisplayObjectContainer/addChildAt()
at fl.controls::BaseButton/drawBackground()
at fl.controls::BaseButton/draw()
at fl.core::UIComponent/drawNow()
at fl.controls::ComboBox/drawLayout()[D:\DEVELOP\test_lib\fl\controls\ComboBox.as:1500]
at fl.controls::ComboBox/draw()[D:\DEVELOP\test_lib\fl\controls\ComboBox.as:1421]
at fl.core::UIComponent/callLaterDispatcher()

たぶんコードはあるけど、アセット的なグラフィックデータが用意されてないんじゃないかなぁ、と。
ランタイムエラーかつ、妙な時間差で発生するので、何が悪いかわからなくてちょっとはまってしまった。
対策としては、FlashIDEからあらかじめComboBoxクラスを埋め込みアセットクラスでswcとかにして書き出しておき、それを使えばaddChildしてもエラーにならずに使うことができるよ、と。

あらかじめ、コンポーネント一式を含んだオレオレswcを用意しておいてもいいかもね。

先日、東京てらこ 15で発表してきたお話をメモ。

本題は、スクリーンセーバーDL用の特設サイト作りましたよってお話。
Re-BUILD

////////////////////////////////////////////////////////////////////////////
まず最初からスクリーンセーバーを作ろうと思ったわけじゃなくって。。
以前から考えてたネタをワンダフル用に作ってたら、アレもコレもとだんだんと手がこんできたので、これスクリーンセーバーにすればいいんじゃね、と。
じゃあSWFをスクリーンセーバーにするにはどうすりゃいいの？ってことで調べてみました。

ざくっとググって以下の二つが見つかりました。

• 1)InstantStorm：winのみ
• 2)fla:ver：win/mac

1)は完全無料でいろいろかゆいとこに手が届くような感じだけどmac用は不可
とりあえずwin用にはこっちを使いました。

2）はwin/macどちらも対応で、低機能の無料版と高機能の有料版があるんだけど無料版ではOSX10.6用（64bit版）の対応はできない、と。
win用/mac用で個々にライセンスが分かれていて各ライセンスが19,800円
win/mac、まとめて買うと34,800円。
mac用にはこっちの有料版を使いました。
・・・えぇ、mac用のライセンス買いましたよ。19,800円。

////////////////////////////////////////////////////////////////////////////
あと製作に関する裏話的なこと。

もともとは数年前にみた海外のサイト（たぶん製作会社だったと思う。。）で、地平線がみえるようなシンプルなランドスケープなデザインに、ランダムに家がでてきてスクロールして流れていくようなやつをみたときに、こういうの作ってみたいなーと思ってたのが最初。
（当のサイトはググっても見つけられず。。思い出補正でぜんぜん違うものかも。。）

なんとなくChemical Brothers – Star Guitarを思い出した人もいるかも
Chemical Brothers – Star Guitar
これ、好きなんです。DVD持ってます。

あと、groovisions – GRV2196を思い出した人もいるかも
GRV2196
これ、好きなんです。DVD持ってます。

++++++++++++++++++++++++++++++++++++++++++++
GRV2196はyoutubeになかったけどGRV2126を発見。
これは観てなかったのだけど、トラックの形とかそっくりだったｗ
(トラックは軽トラの側面画像を適当にトレースしてたんだけどね）

////////////////////////////////////////////////////////////////////////////
元になるソースはwonderflにアップしてあります。
（実際にスクリーンセーバーに使ってるものとはちょっと違います）
なにげに車を描画するクラスがボリュームありますｗ

Re-BUILD – wonderfl build flash online

たとえば、aImage00.png,aImage01.png,aImage02.pngって画像をEmbedで埋め込んだ場合に、クラス名をfor文とかでまわすにはどうすればいいかということ。

二通りのやり方があるみたい。
まずは、ここの記事に教えていただきました。
[Embed]したものを動的に使いたいとき:TWO HEARTS

ポイントはstaticにして、配列アクセス演算子を使うということ。
直感的に納得できる感じ。
↓サンプルソース

package assetImage
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.utils.getDefinitionByName;

	public class Main2 extends Sprite
	{
		[Embed(source = 'asset/aImage00.png')] private static var AImage0:Class;
		[Embed(source = 'asset/aImage01.png')] private static var AImage1:Class;
		[Embed(source = 'asset/aImage02.png')] private static var AImage2:Class;

		public function Main2():void
		{
			for (var i:int =  0; i < 3; i++)
			{
				var bm:Bitmap = new Main2["AImage" + i];
				addChild(bm).x = bm.width * i + 20 * i;
			}
		}
	}
}

つづいて、getDefinitionByNameを使う方法
ここで教えていただきました。
■ 埋め込みアセットクラスをgetDefinitionByName()で参照する :棚からパルチャギ

こっちは埋め込むクラス名に対して、埋め込んだ場所のクラスをパッケージから書いたりとと直感的には全くわからない仕様。
(どうもmxmlのお作法もまざってるっぽい)
↓サンプルソース

package assetImage
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.utils.getDefinitionByName;

	public class Main1 extends Sprite
	{
		[Embed(source = 'asset/aImage00.png')] private var AImage0:Class;
		[Embed(source = 'asset/aImage01.png')] private var AImage1:Class;
		[Embed(source = 'asset/aImage02.png')] private var AImage2:Class;

		public function Main1():void
		{
			for (var i:int =  0; i < 3; i++)
			{
				var bm:Bitmap = new (getDefinitionByName("assetImage.Main_AImage"+i) as Class);
				addChild(bm).x = bm.width * i + 20 * i;
			}
		}
	}
}

とりあえずどっちでもよさげ。

世の中に記事がなさそうだったのでメモ。
考えればすぐわかりそうだけど、ちょっと迷った。

MovieClipの色変更したいときは、変更したい色情報を持ったColorTransformインスタンスを生成、
DisplayObject.transform.colorTransformに突っ込んであげればよい。

//オレンジ色を四角を生成
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xFFCC00);
mc.graphics.drawRect(0,0,100,100);
addChild(mc);

//白くする
var ct:ColorTransform =  new ColorTransform(1,1,1,1,255,255,255,0);
mc.transform.colorTransform = ct;

ColorTransformのコンストラクタに与える引数の各項目に関しては、”FlashIDEでのカラー効果→「スタイル：詳細」”のパラメータと一致する。
(どの項目がどれにあたるかはリファレンス参照）

ところがColorTransformでは「スタイル：着色」にある「濃淡」の項目がまかなえない。（と思う）
では濃淡項目はAS的になんになるのか？

たぶんColorクラスのbreigtnessプロパティと思う。
なのでColorクラスを使う。
Colorクラスは、ColorTransformクラスを継承したクラスなので、同じように設定可能。
以下のようにすればOK。

import fl.motion.Color;

//オレンジ色を四角を生成
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xFFCC00);
mc.graphics.drawRect(0,0,100,100);
addChild(mc);

//濃度50%で白くする
var col:Color =  new Color(1,1,1,1,255,255,255,0);
col.brightness = 0.5;
mc.transform.colorTransform = col;

（まだ、ちゃんと検証してないけど）
FlashCS4で発生した奇奇怪怪な現象。

よく似た画像ファイル2枚をEmbedで埋め込むと1枚しか表示されない。
さらにどっちが表示されるかは、パブリッシュするたびに異なる。

発生した条件。
画像の縦横幅が同じ。
ファイルサイズの誤差が1kb未満
(例：24kbと24.5kbとか）
もちろんこの二つのファイル名は変えてある。

どうもFlash側でこの条件のファイルは同じ画像と認識されてるくさい。
で、結果的には、前のエントリと似たようなことになるんではないかと思う。
あとでちゃんと調べる。

つまりは、IDEでEmbedなんて使うなってことらしい。