Category Archive: ActionScript

[AS]SWFSizeを使うとIE6でフリーズする場合はDTD宣言に注意する

はまったのでメモメモ。

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宣言とか意味もよくわからず呪文のように書いてる(正確にはコピペ…)からこういうところよくわからんです。。

[AS]fl.swcを使った際にちょっとはまったこと

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

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を用意しておいてもいいかもね。

[Event][AS]スクリーンセーバー作りました。>>Re-BUILD

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

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

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

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

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を発見。
これは観てなかったのだけど、トラックの形とかそっくりだったw
(トラックは軽トラの側面画像を適当にトレースしてたんだけどね)

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

Re-BUILD – wonderfl build flash online

[GAE/J][Event]FLASHerによる【初めてのGAE(GoogleAppEngine)】

先日、東京てらこ 14に参加してきました。

GoogleAPIということで「はじめてのGAE(GoogleAppEngine)」というテーマで発表しました。

発表のスライドはこちら。
【初めてのGAE/てらこ14発表資料】

///////////////////////////////////////////////////////////////////////////

環境設定のざっくりとした流れ
1.Eclipseのインストール

2.Eclipseの日本語化

3.(Eclipseへ)Goolge Plugin for Eclipseのインストール

4.(Eclipseへ)Slim3 Plugin for Eclipseのインストール

1~3.については以下に詳しく書いてありました。
Google App Engine for Java(GAE/J)プログラミング入門: 「開発環境の準備からデプロイまで」 (1/5)
※一点だけはまったのは日本語化する際に、Eclipseのインストール場所に注意
気持ち的にc:\Program Files\eclipseにインストールしたところだけど、途中のファイルパスにスペースの入ったフォルダがあるとだめみたい。
というわけで、c:\にインストールしました。

4.に関しては以下に詳しく書いてあります。
Slim3 日本語サイト(非公式)
※Eclipse3.4と3.5をサポートと書いてありますが、3.6でも一応できるようです。

///////////////////////////////////////////////////////////////////////////

実際に作ってみたサンプル
393.bz/Invader
GAEと連動してレトロアーケードゲーム的なネームエントリーによるスコア共有の仕組みを仕込んでいます。
(NAMEとSCOREをGAEのDatastore(DB的なもの)に保存し、別ドメインからアクセス)
///////////////////////////////////////////////////////////////////////////

作成したGAE/Jのプロジェクト一式はこちら
Flash2GAE(10MB)

一応invaderゲームプロジェクト一式はこちら
(やっつけ書いたのでソース汚い。。)
InvaderForGAE(1MB)

///////////////////////////////////////////////////////////////////////////

今回のポイントは、別ドメインからGAEのドメインへのアクセス。
何もしないとセキュリティポリシー引っ掛かりますが、crossdomain.xmlをGAE側においてあげれば問題ないみたい。
配置の仕方は、GAEのwarフォルダ内にcrossdomain.xmlを置いた状態でデプロイ処理(アップロード)をするだけ。

不明なところがありましたら、コメントなりどうぞ。
(というかJavaはぜんぜんよくわかってませんが…)

///////////////////////////////////////////////////////////////////////////
PS.
他の方の発表を聞いて、Python+AMFの方が楽そうだなぁと思ったのでそっちも試してみたいところ。
pyAMFというライブラリがあるみたい。
さらにもっとお手軽なのは、PREAIR
これならJavaもPythonも書かなくてもAS3だけでGAEと連動できるサービス作れちゃう!

[AS]Embedした複数の画像(クラス)を連番(文字列)で参照したい場合の方法

たとえば、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 Main 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 Main():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;
			}
		}
	}
}

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

[AS]FMSにアップしたmp4なファイルをFLVPlaybackで再生するときのファイルパス指定の注意

結構はまったのでメモ

まず、以前のエントリーでFMS経由で動画ファイルを指定する際は拡張子が不要ということを書いたけど、これは正確ではなかった。
正確には、[FMSにflv形式でアップされているファイル]にアクセスするときは、拡張子を書かないが正解。

では、f4v形式や、mp4形式のファイルをアップした際はどうするか?
単純に拡張子をつければいいわけではなかった。
ファイル名の頭に、[mp4:]をつける必要があった。

//独自プレイヤーでの実装例(いろいろ省略)
var nc:NetConnection = new NetConnection();
nc.connect("rtmp://hoge.moge.ore/dore");
var ns:NetStream = new NetStream(nc);
ns.play("mp4:hoge.mp4");
//ns.play("mp4:hoge.f4v");//f4v形式での例

以上を踏まえて、FLVPlaybackを利用する際のパス指定も同じにしようと思ったらそうはいかなかった。

悪い例

//誤ったファイルパスの指定
var flvPlayback:FLVPlayback = new FLVPlayback();
flvPlayback.play("rtmp://hoge.moge.ore/dore/mp4:hoge.mp4");

これだとうまく接続できなかった。
FMSのヘルプを観てると、違った書き方をしてる例があった。
(19ページの上の方)

正しい例

var flvPlayback:FLVPlayback = new FLVPlayback();
flvPlayback.play("rtmp://hoge.moge.ore/mp4:dore/hoge.mp4");

[mp4:]の記述はファイルの頭ではなく、ひとつ上のフォルダに記述するらしい。
なんでかは詳しくわからんけども、今回はこれでうまく接続できた。
うまくいかない人は試してみるといいかも。

[JSFL]ステージにあるシェイプやグループ化されたものを、連番付きのシンボルに一括変換するJSFL

ステージにあるシェイプやグループ化されたものを、連番付きのシンボルに一括変換するJSFL
↑がふとほしくなり、Twitterで聞いてみるも見つからず。
ググってみるも見つからず。
・・・簡単そうだから自分で書いてみたけどよくわからずw

そしたらflabakaさんが作ってくれた!
ステージにあるシェイプやグループ化されたものを、連番付きのシンボルに一括変換するJSFL:flabaka

jsflのソースを読んでみて、convertToSymbol()なるメソッド使えばいいのかと知る。
自分の使いたかった機能としてflabakaさんとことはちょっと違うものにしたので一応公開。

選択したオブジェクトを重なりが下から順に連番でMovieClipに変換。
さらにシンボル名と同じ名前をインスタンス名に設定される。


矩形ツール等で描いたシェイプはそのままではシンボル化できずエラーになる。。。
シェイプは、グループ化しておけばOK。
(プリミティブ矩形ツールで書いたものはそのままでもOK)

var mcName = prompt(“MovieClipの名前を指定”,”parts”);
var startIndex = eval(prompt(“連番の初期値を指定”,0))

var dom = fl.getDocumentDOM();

if (dom.selection.length)
{
var array = dom.selection;
dom.selectNone();

for (var i = 0 ; i < array.length ; i++) { array[i].selected = true; dom.convertToSymbol("movie clip", mcName+(array.length -1 - i+ startIndex),"top left"); dom.selection[0].name = mcName+(array.length -1 - i+startIndex) dom.selectNone(); } } [/sourcecode]
ダウンロード:object2Symbol.mxp

>flabakaさん
勉強させてもらいました!ありがとうございまっす!!

[Windows7][mac osx10.6]win7をサーバー、mac OSX10.6をクライアントでのsynergyによるマウスキーボード共有の設定メモ

win:サーバー(synergy1.3.1)、mac:クライアント(synergyKM)で出来た。

mac側のsynergyKMはGUIで設定可能。
特にAppleScript書かずともログインで自動起動した。
(メニューバーに追加ってのにチェックしたせいかな)

win側の設定では、macのコンピューター名には.localをつける必要なし。
(synergy1.3.1では必要だった)

[AS]FlashIDEでのカラー効果→「スタイル:着色」内の各項目をASでコントロールするには?

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

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;

[AS3][?]画像ファイルをEmbedしても正常に表示できないことがある

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

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

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

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

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