Epic->yoshimax

[FLASH, デバック] Q. ブラウザからtracelogを出力したい

A. デバック用FLASH Playerのインストールを行うと
任意の場所にログファイルが書き出されます。

++++++++++++++++++++++++++++++++++++++++++++
手順

1.
Adobe Flash Player のバージョンテスト
http://www.adobe.com/jp/support/flashplayer/ts/documents/tn_15507.htm

2.
デバック用FLASH Playerのダウンロード
http://www.adobe.com/support/flashplayer/downloads.html

3.
デバック用FLASH Playerの設定ファイルを設置する
mm.cfg
http://saqoosha.net/2007/12/12/626/
http://www.adobe.com/devnet/flashplayer/articles/fplayer9_security_05.html
+++++++++++++++
/home/username/mm.cfg
Macintosh: /Users/username

ErrorReportingEnable=1
TraceOutputFileEnable=1
PolicyFileLog=1
PolicyFileLogAppend=1

4.
ログファイルを確認する
$pwd
/Users/ユーザー名/Library/Preferences/Macromedia/Flash Player/Logs
$ ls
flashlog.txt policyfiles.txt

5.
トレースの内容の確認
tail -f flashlog.txt

Q. progressionに組み込まれているSWFWheelを利用して
macでマウスホイールを取得したい

A.
Progression 3.1.0のリリースノートからSWFWheelが実装されている事がわかる。

プロジェクトの書き出しでmac Mouse Wheelを利用で書き出すと、

Index.asに
import org.libspark.ui.SWFWheel;

// SWFWheel を有効化する
SWFWheel.initialize( stage );

が書き出される。

SWFWheelは、
MouseEvent.MOUSE_WHEELでそのままmacのホィールを取得してくれるので
以下のようにコードを書けば、マウスホイールの値を取得できる。

IndexScane.as
import flash.events.MouseEvent;
this.progression.stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheel);

private function mouseWheel(event:MouseEvent):void {
trace( "MouseDelta" , event.delta );
}

progressionでは、preloaderからindex.swfを読み込んでいるようです。
Preloader.asからその読み込み状況を取得できるようになっているので、
以下のように記載する事で読み込み完了、状況、エラーが取得できるので
その値を使ってプログレスバーの作成が可能になります。

Preloader.as　
public function Preloader() {
// 読み込みたい SWF ファイルの URL を設定します。
url = "index.swf";
// SWF ファイルの URL の起点を、自身の SWF ファイルが存在するフォルダにするかどうかを指定します。
useSWFBasePath = false;
addEventListener(ProgressEvent.PROGRESS, progressListener);
addEventListener(Event.COMPLETE, onCompleteListener);
addEventListener(IOErrorEvent.IO_ERROR, onIOerrorListener);
}

private function onIOerrorListener(event:IOErrorEvent):void {
trace("IOERROR" + event.text);
}

private function onCompleteListener(event:Event):void {
trace("COMPLATE");
}

private function progressListener(event:ProgressEvent):void {
trace(event.bytesLoaded + "/" + event.bytesTotal);
trace(Math.round(event.bytesLoaded / event.bytesTotal * 100));
}

だと思ったら progressionで既にメソッドが定義されているので
以下のようにするだけで、取得できるみたいです。

Preloader.as
protected override function _onCastLoadStart():void {
trace("LoadSTART");
// 実行したいコマンドを登録します。
addCommand(

);
}
/*======================================================================*/
/**
* ダウンロード処理を実行中にデータを受信したときに送出されます。
*/
protected override function _onProgress():void {
trace(bytesLoaded + "/" + bytesTotal);
trace(Math.round(bytesLoaded / bytesTotal * 100));
}
/*======================================================================*/
/**
* オブジェクトが読み込みを完了した瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onCastLoadComplete():void {
trace("LoadComplate");
// 実行したいコマンドを登録します。
addCommand(

);
}

参考にさせていただいたサイト
・Progressionのpreloader.flaを使ってみる
・Progression の Preloader で読み込み中のバイト数を得る
・AS3 さくっと使える、PreLoader
・ExPreloaderを使ってみる
・AS3 Apple Style Preloader

flex and flash developer | steven sacks AS3 Apple Style Preloaderを利用して
アップルでよく使われるタイプのローダーを実装する。

1.上記サイトのCircleSlicePreloader.asをパスが通ってる
net/stevensacks/preloadersフォルダ以下に設置する

2.ActionScriptに以下のように記載する
import net.stevensacks.preloaders.CircleSlicePreloader;

var preload:CircleSlicePreloader = new CircleSlicePreloader();
preload.x = stage.stageWidth/2;
preload.y = stage.stageHeight/2;
addChild(preload);

progressionでCastImageLoaderでイメージを読み込むとき
ローディングアニメーションを簡易的に表示したい。

var loader = new CastImageLoader();
loader.addEventListener(CastEvent.CAST_LOAD_COMPLETE, loadCompleteHandler);
loader.addEventListener(CastEvent.CAST_LOAD_START, loadStartHandler);

イメージを読み込む前と完了後にイベントが発生するので
読み込み時にイメージを表示して、完了時に削除すれば読み込みイメージを表示できる。

ここでは、
flex and flash developer | steven sacks AS3 Apple Style Preloaderを読み込みイメージとして利用する。

import net.stevensacks.preloaders.CircleSlicePreloader;
import flash.display.Sprite;

private var container:Sprite = new Sprite();
private var loader = new CastImageLoader();
private var preload:CircleSlicePreloader = new CircleSlicePreloader();

public function Btn_Image( initObject:Object = null ) {
super( initObject );
if (initObject.imageUrl != null) {
var urlReq:URLRequest = new URLRequest(initObject.imageUrl);
loader.addEventListener(CastEvent.CAST_LOAD_COMPLETE, loadCompleteHandler);
loader.addEventListener(CastEvent.CAST_LOAD_START, loadStartHandler);
loader.load(urlReq);
}
}

//イメージ読み込み開始のハンドラ
private function loadStartHandler(e:CastEvent):void {
loader.removeEventListener(CastEvent.CAST_LOAD_START, loadStartHandler);
var sList:SerialList = new SerialList();
sList.addCommand(
new AddChild(this, preload)
);
sList.execute();
}

//イメージ読み込み完了のハンドラ
private function loadCompleteHandler(e:CastEvent):void {
loader.removeEventListener(CastEvent.CAST_LOAD_COMPLETE, loadCompleteHandler);
var sList:SerialList = new SerialList();
sList.addCommand(
new Wait(1000), // アニメーションの表示テスト
new RemoveChild(this, preload),
new Prop(loader, { x:-(loader.width/2), y:-(loader.height/2)} ),
new AddChild(this, loader)
);
sList.execute();
}

参考にさせていただいたサイト
・Is It So Easy? CastImageLoaderを使ってみる
・kanariia.com blog CastImageLoaderのロード中にCastMovieClipを表示してみる
・Flashのフレームワーク「Progression3」を始めてみよう！　第5回　Progression3でWebサイトを作る（後編）

NLOC LAB AS3 TextField メモを参考に埋め込みフォントをつかいさらに
アルファーを適応する為にBITMAP化する

ここでハマったのは、
embedTF.embedFonts = true;
ではフォントは埋め込まれず、ライブラリーに自分で登録する必要があると
言う事です。

フォント埋め込み参考：　embedFonts の使用方法について　

事前準備さえできていれば、
BitmapdataにdrawしてそこからBitmapを作成しaddChildで表示コンテナに
登録する事で文字をビットマップとして表示できるようです。

private var TF:TextField;
private var Fmt:TextFormat;
private var BMP:Bitmap;

Fmt = new TextFormat();
Fmt.font = "ヒラギノ丸ゴ ProN W4";
//embedFmt.font = "_ゴシック";
Fmt.size = 12;
Fmt.color = 0x000000;

TF = new TextField();
TF.autoSize = TextFieldAutoSize.LEFT;
TF.defaultTextFormat = embedFmt;
TF.embedFonts = true;
TF.text = "あいうえお yoshimax";
TF.alpha = 1;
var _bmd:BitmapData = new BitmapData( TF.width, TF.height, true, 0x00ffffff );
_bmd.draw( embedTF );
BMP = new Bitmap( _bmd );
addChild( BMP );
BMP.x = stage.stageWidth/2;
BMP.y = stage.stageHeight/2;

・fldkit
iPhoneのヘルパー

・wonderflに投稿してみました 7
Papervison3Dをwonderflで。

・Unity iPhone Examples
iPhoneのサンプル

・Augmented Reality
FLARToolKit を利用 /デザインもいい

・Papervision3D Previewer 1.3

・FLARToolKit スタートガイド
FLARToolKitのガイド

・物理エンジン Box2D for iPhone 公開
iPhoneで物理エンジン

progressionなどで使われているSWFAddressでは、
/#/XXX のURLでベージが遷移する。

#にrewrite したら %23 にURIエンコードされてしまったのでメモ
NE オプションをつければよいみたいです。

さくらレンタルサーバでは以下のように設置したら
正常にrewriteされました。

.htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^html/privacy\.html$ /#/privacy [NE,R=301,L]
RewriteRule ^html/contact\.html$ /#/contact [NE,R=301,L]

アクションスクリプトから色を変化を試してみる。

FLASH CS3のプロパティ<詳細<拡張効果で以下のような変更を
スクリプトから行ってみる。

+++++++++++++++++++++++++++++++++++++++++++++
1. ColorTransform メソッド
ActionScript 3.0 コンポーネントリファレンスガイド ColorTransform より

ColorTransformのメソッドの引数は以下のように定義されているので
public function ColorTransform(redMultiplier:Number = 1.0, greenMultiplier:Number = 1.0, blueMultiplier:Number = 1.0, alphaMultiplier:Number = 1.0, redOffset:Number = 0, greenOffset:Number = 0, blueOffset:Number = 0, alphaOffset:Number = 0)

以下のように書く事ができる。

import flash.geom.ColorTransform;
var color:ColorTransform = new ColorTransform(0.36,1,1,1,64,129,-70,0);
test_mc.transform.colorTransform = color;

+++++++++++++++++++++++++++++++++++++++++++++
2. ColorTransform プロパティ
ActionScript 3.0 コンポーネントリファレンスガイド ColorTransform より

redMultiplier:Number (default = 1.0) -- 赤の乗数の値 (0 ～ 1) です。
greenMultiplier:Number (default = 1.0) -- 緑の乗数の値 (0 ～ 1) です。
blueMultiplier:Number (default = 1.0) -- 青の乗数の値 (0 ～ 1) です。
alphaMultiplier:Number (default = 1.0) -- アルファ透明度の乗数の値 (0 ～ 1) です。
redOffset:Number (default = 0) -- 赤のカラーチャンネルのオフセット値 (-255 ～ 255) です。
greenOffset:Number (default = 0) -- 緑のカラーチャンネルのオフセット値 (-255 ～ 255) です。
blueOffset:Number (default = 0) -- 青のカラーチャンネルのオフセット値 (-255 ～ 255) です。
alphaOffset:Number (default = 0) -- アルファ透明度のチャンネル値のオフセット (-255 ～ 255) です。

なのでプロパティを変更する書き方で書くと、
以下のように書く事ができる。

import flash.geom.ColorTransform;
var color:ColorTransform = new ColorTransform();

color.redMultiplier = 0.36;
color.redOffset = 64;
color.greenMultiplier = 1;
color.greenOffset = 129;
color.blueMultiplier = 1;
color.blueOffset = -70;
color.alphaMultiplier = 1;
color.alphaOffset = 0;

test_mc.transform.colorTransform = color;

のように書く事ができる。

+++++++++++++++++++++++++++++++++++++++++++++
3. Tweenerのスペシャルプロパティを利用

Tweener DocumentationColorShortcuts より

以下のように書く事ができる。

import caurina.transitions.Tweener;
import caurina.transitions.properties.*;
import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();

Tweener.addTween(bgSprite, {_color_redMultiplier:0.36, time:5, delay:10, transition: "linear", onComplete: changeBgcolor });
Tweener.addTween(bgSprite, {_color_redOffset:64, time:5, delay:10, transition: "linear" });
Tweener.addTween(bgSprite, {_color_greenMultiplier:1, time:5, delay:10, transition: "linear" });
Tweener.addTween(bgSprite, {_color_greenOffset:129, time:5, delay:10, transition: "linear" });
Tweener.addTween(bgSprite, {_color_blueMultiplier:1, time:5, delay:10, transition: "linear" });
Tweener.addTween(bgSprite, {_color_blueOffset:-70, time:5, delay:10, transition: "linear" });

参考にさせていただいたサイト
・FlashゲームPG講座 For AS3.0【DisplayObject クラスについて】

phpの先頭に

ini_set("error_reporting", 8192);
ini_set("display_errors", "On");

と記載する

progression3で以下のエラーが出た場合のチェックポイント
Error: Error #9034: scene_ は予約された書式なので使用することができません。

var page1:SceneObject = addScene(new SceneObject("01.Feb.2008.NEWS"));

シーンの名前に.(ドット)などは利用できないみたいです。
詳しくは参考サイトで確認。

参考にさせていただいたサイト
Progression (旧) : コンパイルエラーの原因がつかめない。「Error #9034」

Q. インスタンス毎にマウスホイールイベントを取得してスクロールを行いたい

A. インスタンスの上にマウスカーソルが乗った時にホィールイベントをリスナー
して、外れた時にリスナーを解除する。

import org.libspark.ui.SWFWheel;

// SWFWheel を有効化する
SWFWheel.initialize( stage );

sidemenu_mc.addEventListener(MouseEvent.ROLL_OVER,SidemenuMouseOver);
sidemenu_mc.addEventListener(MouseEvent.ROLL_OUT,SidemenuMouseOut);

function SidemenuMouseOver(event:MouseEvent):void{
event.target.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
// 色を変化させる
Tweener.updateTime();
Tweener.addTween(event.target, {_tintBrightness :0.5, time:0.2, delay:0, transition: "easeInOutQuint", onComplete:function(){
Tweener.addTween(event.target, {_tintBrightness :0, time:0.4, delay:0, transition: "easeInOutQuint"});
}});
}
function SidemenuMouseOut(event:MouseEvent):void{
event.target.removeEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
}
function onMouseWheel(event:MouseEvent):void {
if(event.delta >= 0){
// 上へ動くメソッドへ
onENTERTop(event);
}else{
// 下へ動くメソッドへ
onENTERBottom(event);
}
//trace( event.delta.toString() );
}

FlashDevelopが便利だという事なので試してみる。

クラス名やメソッドの補完を以下のサイトを参考に
projectのclasspathを設定してみる。

参考にさせていただいたサイト
FlashDevelop Beta5

すると以下の画像のように補完される。

Papervision3D Public Beta 2.0 - Great WhiteにおいてCubeの引数を試してみる

++++++++++++++++++++++++++++++++++++++++++++++++
Cubeの引数に関して調べてみる
++++++++++++++++++++++++++++++++++++++++++++++++
cubeのAPIにリファレンスによると

Cube(
materials:MaterialsList,
width:Number = 500,
depth:Number = 500,
height:Number = 500,
segmentsS:int = 1,
segmentsT:int = 1,
segmentsH:int = 1,
insideFaces:int = 0,
excludeFaces:int = 0)

となっている。

segmentsS:int = 1,
segmentsT:int = 1,
segmentsH:int = 1,
がよくわからないので

サンプルのFLASHを作成して
実際に頂点の値を取り出してみました。

cube.geometry.vertices.lengthのメソッドで実際の頂点の数が取り出せます。

それぞれの座標は
cube.geometry.vertices[position_num].x;
cube.geometry.vertices[position_num].y;
cube.geometry.vertices[position_num].z;
で取り出せます。

応用としては、
[ActionScript] PaperVision3D Tweenerの応用にあるように、実際には表示しないで立体の座標をとりだし
移動先の座標を割り出すなどの使い方もあるようです。

++++++++++++++++++++++++++++++++++++++++++++++++
ソースはこちら
++++++++++++++++++++++++++++++++++++++++++++++++
package {
import flash.display.*;
import flash.events.*;

import org.papervision3d.view.*;
import org.papervision3d.materials.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.primitives.*;

import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.cameras.*;
import org.papervision3d.materials.special.CompositeMaterial;

import caurina.transitions.Tweener;
import caurina.transitions.properties.*;

import flash.text.TextField;

public class Main extends BasicView {
private var sphere:Sphere;
private var cube:Cube;
private var bitmapFileMaterial:BitmapFileMaterial;
private var position_num:Number = 0;

public function Main() {
//super(1440, 720, true, true, CameraType.FREE);
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.quality = StageQuality.LOW;
init();
}

Public function init():void {

// material
var colorMaterial:ColorMaterial = new ColorMaterial( 0x666666, 0.3 );
var wireframeMaterial:WireframeMaterial = new WireframeMaterial( 0x333333, 1 );
var compositeMaterial:CompositeMaterial = new CompositeMaterial();
compositeMaterial.addMaterial(colorMaterial);
compositeMaterial.addMaterial(wireframeMaterial);
compositeMaterial.doubleSided = true;

// cube
cube = new Cube(new MaterialsList({all:compositeMaterial}), 200, 200, 200, 5, 5, 5);
scene.addChild(cube);

// sphere
sphere = new Sphere(new ColorMaterial(0xFF0000,1),5,10,10);
scene.addChild(sphere);

camera.x = 200;
camera.y = 200
camera.z = 300;
camera.focus = 350;
camera.zoom = 1;
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
startRendering();

// sphere を 頂点の座標で動かす
moveSphare();
}

private function moveSphare(){

if( position_num >= cube.geometry.vertices.length ) position_num = 0;
text_1.text = cube.geometry.vertices.length.toString();
text_2.text = position_num.toString();
text_3.text = cube.geometry.vertices[position_num].x;
text_4.text = cube.geometry.vertices[position_num].y;
text_5.text = cube.geometry.vertices[position_num].z;

Tweener.addTween(sphere, {
x:cube.geometry.vertices[position_num].x,
y:cube.geometry.vertices[position_num].y,
z:cube.geometry.vertices[position_num].z,
time:0.2,
delay:0.1,
transition: "easeInOutQuart",
onComplete: moveSphare });

position_num++;

}

private function enterFrameHandler(event:Event):void {
}
}
}

pv3dのgeometry.vertices を試してみるメモ

cube = new Cube(new MaterialsList({all:compositeMaterial}), 200, 200, 200, 5, 5, 5);

[サンプル FLASH]
[ソース as3]

sphere2 = new Sphere(compositeMaterial, 200, 10, 10);

[サンプル FLASH]
[ソース as3]

cylinder = new Cylinder(compositeMaterial, 200, 200, 10, 10);

[サンプル FLASH]
[ソース as3]

IE8でIE7互換モードを指定する3つの方法

A. IE8のブラウザの設定を変更する

B. DOCTYPE,METAタグを指定する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7">

C. ヘッダーに値を指定する
.htaccess に
Header set X-UA-Compatible "IE=EmulateIE7"
を指定する

safari で ブラウザの更新、ヒストリーバックのあと
iframeをjavascriptから更新しようとしても更新されない現象でハマったのでメモ

以下のサイトで同様な現象の報告を発見したので参考にさせていただきました。
Safari caching my iframes!

safariは、srcでなくframeのidをベースでキャッシュされる
考え方で対応すればよいみたいです。

なので、iframeのidを毎回変更します。

var PagePath = new Array();
PagePath[0] = 'html/list.html';
PagePath[1] = 'html/news.html';

var frame_id = new Date().getTime();
div.innerHTML = '<div id="iframe_outer" class="a"><iframe id="a'+ frame_id + '" name="a'+ frame_id + '" src="' + PagePath[selected_number] + '" height="500" width="670" frameborder="0"></iframe></div>';
div.injectInside(document.body);

actionscriptの勉強の為に
オンラインで FLASHが作成できる wonderFL で[Papervision3D Public Beta 2.0 - Great White] geometry.vertices
のスクリプトを実行してみました。

ほとんどコピペで動きました。

参考サイト
ブラウザだけでできる！wonderflではじめるFlash制作
第1回　wonderflでFlashのHello World!をつくる

papervision 3dでcubeの図形を書き、その頂点の位置を移動してみます。

頂点の座標に0.5を掛けて立方体を変形してみました。

var v = cube.geometry.vertices[position_num];
Tweener.addTween(v, {
x:cube.geometry.vertices[position_num].x * 0.5,
y:cube.geometry.vertices[position_num].y * 0.5 ,
z:cube.geometry.vertices[position_num].z * 0.5 ,
time:0.2,
delay:0.2,
transition: "easeInOutQuart" });
position_num++;

図形が小さくなっているのが確認できました。