info

category : FlashAS3
[flash]Interface Interspersely  @ FlashAS3 2009年7月13日

私が大学生時代、かれこれ5,6年前に作ったflashインターフェイス集のflashです。
このころ作ったものはかなりアレですが、経験が無い分自由奔放な挙動をしています。
ふと思い出して見てみたらネタとして使えるなぁと思い、これからこのインターフェイスたちを
Papervision3Dバリバリでリメイクしてみようと思います。リメイク制作は「やる気」と「勇気」と「仕事量」に
影響を受けるのでかなり鈍速で進めていきます。そしてやはり基本方針は
「ロマン > 実用性」 なのでそこんとこよろしく。

スクリーンショット1

Interface Interspersely

[FLAR]試作  @ FlashAS3 , FLAR , Flash DEMO , Papervision3D 2009年5月22日

今巷でウワサのFLARです。
このpdfを印刷してウェブカムで写せば赤緑青の立方体が現れます。それだけです。
ARはGPLというライセンスでソースコードを公開しなくてはならないらしいので
クソ汚いソースファイルを載せておきます。基本的に動けばいいぐらいで作っているので
中は大変なことになっています。
これを作るにあたってSaqooshaさんのサイトを参考にしました。この方すごいです。
http://saqoosha.net/flartoolkit/start-up-guide/
また、マーカーデータをつくるときはタロタローグさんのサイトを使用しました。
http://flash.tarotaro.org/ar/MarkerGeneratorOnline.html

スクリーンショット1

AR試作

[Papervision3D]triangle3D  @ FlashAS3 , Flash DEMO , Papervision3D 2009年5月20日

久々にPapervision3Dでtriangle3Dです。
三角形ポリゴンにバラバラになって別の形にトランスフォーム!

スクリーンショット1

triangle3D

追記:すこし自分のためにコードのおさらい

Papervision3Dの三角形ポリゴンひとつだけつかうにはTriangleMesh3Dを使う。
毎回使い方わすれるのでメモ。

import org.papervision3d.core.geom.TriangleMesh3D;
import org.papervision3d.core.geom.renderables.Triangle3D;
import org.papervision3d.core.geom.renderables.Vertex3D;
import org.papervision3d.core.math.NumberUV;
var mesh:TriangleMesh3D = new TriangleMesh3D(mat, new Array(), new Array(), null );
var v0:Vertex3D= new Vertex3D( -10, -10, 0 );
var v1:Vertex3D= new Vertex3D( 10, -10, 0 );
var v2:Vertex3D= new Vertex3D( 0, 10, 0 );
mesh.geometry.vertices.push( v0 );
mesh.geometry.vertices.push( v1 );
mesh.geometry.vertices.push( v2 );
var uvA:NumberUV= new NumberUV( 0, 0 );
var uvC:NumberUV= new NumberUV( 1, 0 );
var uvB:NumberUV= new NumberUV( 0, 1 );
mesh.geometry.faces.push( new Triangle3D( mesh, new Array(v0,v1,v2), null, new Array(uvA,uvC,uvB) ));
mesh.geometry.ready = true;
scene.addChild(mesh);

DisplayObject3Dの面はgeometry.facesに格納されている。
アクセスするときはこんな感じ。

var meshface:Triangle3D=item.geometry.faces[0];

そしてこのDisplayObject3Dの面であるTriangle3Dには頂点が定義されている。
その頂点の情報はverticesに格納されておりx,y,zプロパティがある。
アクセスするときはこんな感じ。

var meshface:Triangle3D=item.geometry.faces[0];
var vx:Number=meshface.vertices[0].x;
var vy:Number=meshface.vertices[0].y;
var vz:Number=meshface.vertices[0].z;
//三角形ポリゴンなのでお察しの通りverticesはvertices[2]まである。

DisplayObject3Dの面Triangle3D(以下モデルMesh)に
外部のTriangleMesh3D(以下外部Mesh)及び外部Meshの面Triangle3Dをぴったし合わせるには
・モデルMeshの頂点定義から三角形の中心点の座標を計算して出す。
・その座標に外部Meshを移動させる。
・モデルMeshの頂点座標から外部Meshの座標を引く。
・出てきた値を外部Meshの面の各頂点座標に適応する。
という処理が必要です。
別にむずかしいことではないですね。
足し算して割り算して代入して引き算して代入って感じです。
ただこれだとモデルMeshが座標(0,0,0)にありrotationXYZが0の状態しか
形作ることができないので今後の課題にしておこう。

[JavaScript]swfobject2.1  @ JavaScript , FlashAS3 Tips 2009年5月15日

flashをhtmlに貼り付けるときに便利なswfobjectというJavaScriptライブラリがあります。
今まで1.5を使っていました。2.1が出ているんだけど面倒くさいなぁと避けていたのですが、
flashばっかりだと飽きるのでちょいと気分転換に調べ上げました。
swfobjectはこの↓サイトでダウンロードできます。
スクリーンショット1
http://code.google.com/p/swfobject/

まずhtmlに貼り付けるには下記のようにします。サンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>

<div id="flashcontent"></div>
<script type="text/javascript">
swfobject.embedSWF("swf/main.swf", "flashcontent", "400", "300", "9.0.45");
</script>

</body>
</html>

1.5のときと同じようにdivタグにidをつけ、
flashplayerのバージョンが足りないときに表示するコードを記述する。
embedするためのコードの引数は下記のようになっています。

swfobject.embedSWF(swfファイル, divタグのid, flashの幅, flashの高さ, 必要なバージョン, expressInstall.swf, flashvars, params, attributes);

5個目までは分かると思いますので6個目から説明します。
6個目以降は必ずしも必要ではありません。
expressInstall.swfはflashplayerのバージョンが足りないときに画面遷移なしに
その場で最新flashplayerをインストールすることができるモジュールです。
使わないときはfalseを渡します。
これを使って貼り付けてflashplayerのバージョンが足りないときは下図のような
画面が出てインストールすることが出来ます。
スクリーンショット2

スクリーンショット3

見た目がアレなので素直にAdobeのサイトへ飛ばすリンクを記述したほうがいいかも。
7個目のflashvarsはflashに値を渡したいときに使います。
使い方:

var flashvars = {};
flashvars.id = "232";

8個目のparamsはmenuやallowfullscreenを設定するものです。
使い方:

var params = {};
params.menu = "false";
params.wmode = "opaque";
params.allowfullscreen = "true";
params.allowscriptaccess = "sameDomain";

9個目のattributesはnameやstyleclassを設定するものです。
使い方:

var attributes = {};
attributes.name = "flashswf";
attributes.styleclass = "jack";
attributes.align = "middle";

これら全部の引数を使うとコードはこんなふうになります。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>

<div id="flashcontent"></div>
<script type="text/javascript">
var flashvars = {};
flashvars.id = "232";

var params = {};
params.menu = "false";
params.wmode = "opaque";
params.allowfullscreen = "true";
params.allowscriptaccess = "sameDomain";

var attributes = {};
attributes.name = "flashswf";
attributes.styleclass = "jack";
attributes.align = "middle";
swfobject.embedSWF("swf/main.swf", "flashcontent", "400", "300", "9.0.45", "swf/expressInstall.swf", flashvars, params, attributes);
</script>

</body>
</html>

以上がswfobject2.1の説明です。便利ですねー。
ここまで長々と説明してきましたが、自分で書くのめんどくせーってときは
swfobjectのサイトでswfobject_generator_1_2_air.zipをダウンロードして使えばコピペで済みます。

JavaScriptをかましたMac対応ScrollBarとかswfobject1.5用に作っていたので
2.1のものも作らなければ。

[Papervision3D]PapervisionX  @ FlashAS3 , Papervision3D 2009年5月8日

PapervisionXという新しいPapervisionが開発中だそうです。
ソース
英語サイトですがわかるところをピックアップすると
・PapervisionXはcs4 branchではない。
・PapervisionXはFlashPlayer10の3D APIをベースとして一から作り直している次期バージョンです。
・FlashPlayer10の3D APIを使うので品質、速度、ファイルサイズがよくなるはず。
・Papervision3D2.0はまだ続くよ!
とゆーことです。
リリースはまだまだ先のようですが一般的にFP10が普及したら使ってみたいですねぇ。

[Tips]ポップアップブロック  @ FlashAS3 , FlashAS3 Tips 2009年4月20日

flashから新規ウィンドウでリンクを開こうとすると
ポップアップブロックにかかるんですが何かいい回避方法知りませんか?
という質問を5回ぐらいはされているような気がする。そのたびにサンプル作って
こうするとよいですよと教えているような気がする。
面倒くさいのでここにサンプルを記す。
サンプル[ActionScript3.0 FlashPlayer9.0]
サンプル[ActionScript2.0 FlashPlayer8.0]
ソースファイル[両方]

[AS3]jsからflashのメソッドを叩く  @ JavaScript , FlashAS3 , FlashAS3 Tips 2009年4月17日

jsからflashのメソッドを叩くメモ。

あらかじめ↓のようなjsメソッドを用意する。
今回は例としてブラウザサイズが変更されたらflashメソッドを叩くことにする。

function init_callback(){
	if(window.addEventListener&&!window.opera){
		window.addEventListener('resize', onResize, false);
		window.onresize = document.onresize = onResize;
	}else{
		if(window.opera){
			window.onresize = onResize;
		}else{
			window.onresize = document.onresize = onResize;
		}
	}
}
function onResize(){
	callMovie(so.getAttribute("id")).windowResizeEvent();
}
function callMovie(id){
	if(swfwheel_safari || navigator.appName.indexOf("Microsoft") != -1){
		return window[id];
	}else{
		return document[id];
	}
}

そしてこんな↓感じでいつも通りswfを貼り付ける。

<div id="flashcontents"></div>
<script type="text/javascript">
<!--
var so = new SWFObject('swf/main.swf', 'main', '1000', '640', '9.0.45', '#ffffff');
so.write('flashcontents');
//-->

flash側は↓のinit_callbackを任意のタイミングで叩く。
叩くとブラウザリサイズ時にcall_from_jsメソッドが実行される。

function init_callback():void{
	ExternalInterface.call("init_callback");
	ExternalInterface.addCallback("windowResizeEvent", call_from_js);
}
function call_from_js():void{
	//実行される処理
}
[AS3]埋め込みフォントの盲点  @ FlashAS3 , FlashAS3 Tips 2009年4月13日

フォントを埋め込んで外部ファイル化するときに
ぶつかったちょっとした問題の原因がわかったのでメモ。
まず埋め込みフォントの外部ファイル化の仕方。

フォントを埋め込んだswf
・ライブラリで右クリック
・新しいフォント
・名前をアルファベットで入力
・フォントを選択してok押下
・ライブラリに出来た「A」を右クリックしてリンケージを選択
・「ActionScriptに書き出し」「最初のフレームに書き出し」をチェック
・クラス名、基本クラスはデフォのままok押下
・パブリッシュ

外部埋め込みフォントを使うswf
・上述したswfをloaderでload
・読み込むときのコードは↓こんな感じ。いつもとちょっと違う

var urlRequest:URLRequest=new URLRequest(url);
var loaderContext:LoaderContext=new LoaderContext();
loaderContext.applicationDomain=ApplicationDomain.currentDomain;
target_loader.load(urlRequest, loaderContext);

・ロードが終わったら今度は↓のコード実行してフォント名を取得

var class_name="フォントシンボルのリンケージ";
var loadedFont:Font = new Font();
var LoadFontClass:Class=ApplicationDomain.currentDomain.getDefinition(class_name) as Class;
Font.registerFont(LoadFontClass);
loadedFont = new LoadFontClass();
font_name=loadedFont.fontName;

・フォント名が取得できたら任意のテキストフィールドに適応させる

var tex:TextField=テキストフィールド;
var texf=tex.getTextFormat();
texf.font=font_name;
tex.setTextFormat(texf);
tex.embedFonts=true;
tex.antiAliasType=AntiAliasType.NORMAL;

以上の処理で外部埋め込みフォントを使用できる。
しかしさっき特定の文字しか表示されないという問題が起こってしまいました。
色々調べたらどうやらloadするswfに外部のフォントと同じフォントを埋め込んでおくと
外部のフォントが適応されないらしい。言ってる意味がわかるだろうか。。。

埋め込むフォント:ヒラギノ角ゴ
font.swf :フォントを埋め込んだ外部ファイル
main.swf :font.swfをロードするファイル
とするとmain.swfにヒラギノ角ゴのフォントを一文字でも埋め込んでおくと
main.swfに埋め込んだ文字しか表示されなくなるということみたいです。
こんなことで2時間ちかく使ってしまった。

追記
同じフォントの静止テキストも無いほうが良いようです。