2008年5月アーカイブ

今までこのブログは、Firefoxで書いて、Firefoxで確認していたら、


IEでは、flashが見れていなかったらしく、お詫び申し上げます


id:mongchang曰く、Objectタグがダメらしく、今朝Papervision系は直しました。

IE6, Firefox, Opera, Sleipnir, Safariで、一応確認しました。

Google Analyticsによると、約半数がIEということで、

多くの人が見れずにいたのかぁって思うとちょっと残念。



リンクを貼っておくので、

思いたる節がある人は、見に来てください。


・[Papervision3D2.0]#1GreatWhiteを使ってみる
・[Papervision3D2.0]#2 GreatWhiteでMouseEventを使うなどしてみる
・[Papervision3D2.0]#3 Tweenerでトゥィ―――ンする
・[Papervision3D2.0]#4 PV2.0でGlowFilterを使う
・[Flex][Air] BlurFilterでぼかす



次以降、flashを貼る時のためのテンプレ
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="externalFlash" align="middle" height="縦幅" width="横幅" > 　　<param name="movie" value="swfのURL" /> 　　<param name="bgcolor" value="#CCCCCC" /><param name="base" value="." /> 　　<embed src="swfのURL" base="." bgcolor="#CCCCCC" name="externalFlash" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="縦幅" width="横幅" > </object>

AirではWindowの右下を引っ張ったりすると、サイズが変わるんだけど、

ある時はリサイズ可能で、ある時はリサイズ不可能にしたい


resizableっていうプロパティがあったので、それを使おうとしたら、


「読み取り専用です。」



はい？？？


なんか、初期化の段階でセットしなきゃいけないらしく、動的にころころ変えることはできないらしい



そこで、


maxWidth = width; minWidth = width; maxHeight = height; minHeight = heigh;

ってやればリサイズ不可能じゃね？？？


許可したい場合は、適当な値を代入する



もっといい方法があれば教えてください



-------------------------追記(2008/10/3)------------------------------

[Air] 動的にリサイズを可能にしたり不可能にしたりする 〜その２〜
にもっと別の方法のソースを書きました。

Max OS Ⅹで検索すると、NetInfoでなんとかかんとかって出てくるんだけど、

アプリケーション -> ユーティリティを何度見ても、そんなアプリはない・・・


どうやら、10.5から変わったようで。


OS再インストールした時のためのメモー



1. アプリケーション -> ウーティリティ -> ディレクトリユーティリティを起動

2. 鍵マークをクリック

3. パスワードを入力

4. メニューの編集から「ルートユーザを有効」をクリック

5. メニューの編集から「ルートパスワードを設定」をクリックし、設定

6. 鍵マークをクリックし、設定をロック


以上

1000speakersでプレゼンした時に、スライドがシャッって動くようなのをflexでやったんだけど、



動いてる方向にぼかしを入れるともっときれいになるってデザイナーの人に教えてもらったので、



次回のプレゼンするためのメモ



とりあえず、↓みたいになればいい





ソース:myBlurFilter.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300" fontSize="14"> <mx:Script> <![CDATA[ import caurina.transitions.Tweener; private var blur:BlurFilter = new BlurFilter(); private function moveLeft():void { blur.blurX = 8; setFilter(); Tweener.addTween(myPanel, {x:-300, time:1, transition:"easeIn", onComplete:moveLeftComp}); } private function moveLeftComp():void { myPanel.x = 300; Tweener.addTween(myPanel, {x:50, time:1, transition:"easeOutz"}); Tweener.addTween(blur, {blurX:0, time:1, transition:"easeOut", onUpdate:setFilter, onComplete:clearFilter}); } private function moveUp():void { blur.blurY = 8; setFilter(); Tweener.addTween(myPanel, {y:-300, time:1, transition:"easeIn", onComplete:moveUpComp}); } private function moveUpComp():void { myPanel.y = 350; Tweener.addTween(myPanel, {y:50, time:1, transition:"easeOut"}); Tweener.addTween(blur, {blurY:0, time:1, transition:"easeOut", onUpdate:setFilter, onComplete:clearFilter}); } private function moveDown():void { blur.blurY = 8; setFilter(); Tweener.addTween(myPanel, {y:350, time:1, transition:"easeIn", onComplete:moveDownComp}); } private function moveDownComp():void { myPanel.y = -200; Tweener.addTween(myPanel, {y:50, time:1, transition:"easeOut"}); Tweener.addTween(blur, {blurY:0, time:1, transition:"easeOut", onUpdate:setFilter, onComplete:clearFilter}); } private function moveRight():void { blur.blurX = 8; setFilter(); Tweener.addTween(myPanel, {x:350, time:1, transition:"easeIn", onComplete:moveRightComp}); } private function moveRightComp():void { myPanel.x = -200; Tweener.addTween(myPanel, {x:50, time:1, transition:"easeOut"}); Tweener.addTween(blur, {blurX:0, time:1, transition:"easeOut", onUpdate:setFilter, onComplete:clearFilter}); } private function clearFilter():void { myPanel.filters = null; } private function setFilter():void { myPanel.filters = [blur]; } ]]> </mx:Script> <mx:HBox width="100%"> <mx:Button label="←" click="moveLeft()" /> <mx:Button label="↑" click="moveUp()" /> <mx:Button label="↓" click="moveDown()" /> <mx:Button label="→" click="moveRight()" /> </mx:HBox> <mx:Canvas id="myCanvas" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Panel id="myPanel" width="200" height="200" x="50" y="50"> <mx:Label text="あいうえお　かきくけこ" /> <mx:Label text="さしすせそ　たちつてと" /> <mx:Label text="なにぬねの　はひふへほ" /> <mx:Label text="まみむめも　や　ゆ　よ" /> <mx:Label text="らりるれろ　わ　　　を" /> </mx:Panel> </mx:Canvas> </mx:Application>


BlurFilterのコンストラクタは、
BlurFilter(blurX = 4, blurY = 4, quality = 1)で

・blurXは水平方向のぼかし(0.0〜255.0)、
・blurYは垂直方向のぼかし(0.0〜255.0)で
２のべき乗を指定すると速いらしい

・quialityは、なんかいblurをかけるか(?)で、値を大きくしたら重くなるので、１〜３にするといいらしい


これを適用させるには、filtersプロパティにこれを代入すればいいのだが、filtersの型はArrayなので"[","]"でくくってArrayにしてやる。
filterを外すには、filtersにnullを入れれば良い
private function clearFilter():void { myPanel.filters = null; } private function setFilter():void { myPanel.filters = [blur]; }



また、Panelの移動のTweenにtransition:"easeOut"を指定し、徐々に減速して行くようにしたので、ぼかしも少しずつ減っていかないと不自然だった。
そこで、blurXにtweenをかけて値を減らしていけば良いと思ったのだが、BlurFilterは処理が重くなるのを避けるために、Bindableではないらしい。
なので、blurXのtweenを適用させるために、TweenerのonUpdateを用いて、filterをセットし直す。
Tweener.addTween(blur, {blurX:0, time:1, transition:"easeOut", onUpdate:setFilter, onComplete:clearFilter});

今までPapervision3DでたくさんTweenerを使ってきて、TweenerはPapervision3D用のライブラリだと思ってたら、フツーのFlexのコンポーネントとかでも使えたww


Tweenerのコードは、↓からどうぞ
http://code.google.com/p/tweener/


Tweenerの使い方は、1000Speakersでしゃべった時のスライドによると、


Tweener.addTween(
        対象のオブジェクト,
        {
            対象のプロパティ:tween後の値,
             time: tweenの時間（秒）,
             transition:tweenの仕方
        }
);


ってあったけど、さらに、

Tweener.addTween(
        対象のオブジェクト,
        {
            対象のプロパティ:tween後の値,
             time: tweenの時間（秒）,
             transition:tweenの仕方,
            onComplete:tween終了後に呼ばれる関数
        }
);

のように、関数を指定してやると、tweenの後処理を行える


追記：
[Flex][Air] BlurFilterでぼかすにこれを使ったソースを載せました

Macならともかく、WindowsのデフォルトのChrome(クローム)はあんま格好良くないわけで、


でもタイトルバーを消すと、一緒に「閉じる」「最大化」「元のサイズに戻す」「最小化」が消えちゃうわけで、

それを自分で実装する時に、イベントに登録するメソッド



・閉じる
<mx:Button label="×" click="close()" />

・最大化
<mx:Button label="□" click="maximize()" />

・元のサイズに戻る
<mx:Button label="呂" click="restore()" />

・最小化
<mx:Button label="_" click="minimize()" />


「最大化」と「元のサイズに戻す」はViewStackに入れると幸せになれる予感

　コンポーネントをデフォルトアプリケーションのmxmlに直接書かずに、ActionScriptからnewしてaddChildする時に、mxmlだとwidth="100%"とか書けたのに、asでwidth=100%;などと書くとエラーが出る。


どうにかならないかなって思ってたら、



親切で美しい吉村さんが教えてくれました




width = 100%;とせずに、


percentWidth = 100;とすればいいとのこと


heightも同様に、percentHeightっていうプロパティがあるそうで





し、知らなかったぁ・・・

Papervison3D2.0でGlowFilterを使う時のメモ

まず、GreatWhiteでは使えない（たぶん
なので、GreatWhiteではなくEffectsの方を使う。

FilterはGlowFilterじゃなくてもいいはずだけど、使ったことないからわかんない

ぇっと、前回の[Papervision3D2.0]#3 Tweenerでトゥィ―――ンするのマウスオーバーしたPlaneを光らせるようにする。





ソース（ myGlowFilter.mxml)

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="600" height="300"> <mx:Script> <![CDATA[ import org.papervision3d.events.InteractiveScene3DEvent; import org.papervision3d.core.effects.LayerEffect; import org.papervision3d.core.layers.EffectLayer; import flash.events.MouseEvent; import flash.events.Event; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.cameras.FreeCamera3D; import mx.core.UIComponent; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import caurina.transitions.Tweener; private var myScene:Scene3D; private var myCamera:FreeCamera3D; private var myViewport:Viewport3D; private var myRenderer:BasicRenderEngine; private var rootNode:DisplayObject3D; private var effectLayer:EffectLayer; private function init():void{ //ＵＩコンポーネント作成 var myNestingComponent:UIComponent = new UIComponent(); addChild(myNestingComponent); myViewport = new Viewport3D(600, 300, false, true); myNestingComponent.addChild(myViewport); setup(); this.addEventListener(Event.ENTER_FRAME, renderLoop);//イベントリスナー登録 // MouseEvent① this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); } private function setup():void{ myScene = new Scene3D(); //シーン生成 myRenderer = new BasicRenderEngine(); //レンダリング専用クラス myCamera = new FreeCamera3D; //カメラオブジェクト生成 myCamera.zoom = 3; //カメラズーム myCamera.focus = 500; //カメラフォーカス rootNode = new DisplayObject3D("rootNode"); //ルートノード myScene.addChild(rootNode); // エフェクト effectLayer = new EffectLayer(); effectLayer.addEffect(new LayerEffect(new GlowFilter(0xFFFFFF, 1, 16, 16, 3, 3, false, false))); myViewport.addRenderLayer(effectLayer); var color:Array = [0xffa8a8, 0xffa8d3, 0xffa8ff, 0xd3a8ff, 0xa8a8ff, 0xa8d3ff, 0xa8ffff, 0xa8ffd3, 0xa8ffa8, 0xd3ffa8, 0xffffa8, 0xffd3a8]; var material:Array = new Array(); for(var index:int = 0; index < color.length; index++) { var cm:ColorMaterial = new ColorMaterial(color[index]); cm.interactive = true; material.push(cm); } for(index = 0; index < 50; index++) { var plane:Plane = new Plane(material[index%material.length], 150, 150); plane.x = 200 * index - 5000; plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onMouseOver); plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onMouseOut); rootNode.addChild(plane); } } // マウスオーバーイベント private function onMouseOver(e:InteractiveScene3DEvent):void { DisplayObject3D(e.target).renderLayer = effectLayer; } private function onMouseOut(e:InteractiveScene3DEvent):void { DisplayObject3D(e.target).renderLayer = null; } //回転してレンダリング private function renderLoop(myEvent:Event):void{ if(isMouseDown) { var dx:int = (myViewport.mouseX - mouseDownedX); Tweener.addTween(rootNode, {x:rootNode.x - dx*6, time:3, transition:"easeOut"}); Tweener.addTween(myCamera, {rotationY: dx, time:1, transition:"easeOut"}); } else { Tweener.addTween(myCamera, {rotationY: 0, time:3, transition:"easeOut"}); } myRenderer.renderScene(myScene, myCamera, myViewport); } private var isMouseDown:Boolean; private var mouseDownedX:int; private var mouseDownedY:int; private function onMouseDown(e:Event):void { isMouseDown = true; mouseDownedX = myViewport.mouseX; mouseDownedY = myViewport.mouseY; } private function onMouseUp(e:Event):void { isMouseDown = false; } ]]> </mx:Script> </mx:Application>


GlowFilter自体はどのオブジェクトにマウスオーバーしても同じにするので、インスタンスは一度だけnewしてそれを使いまわす。
// エフェクト effectLayer = new EffectLayer(); effectLayer.addEffect(new LayerEffect(new GlowFilter(0xFFFFFF, 1, 16, 16, 3, 3, false, false))); myViewport.addRenderLayer(effectLayer);


これをMouseOverした時に適用するには、renderLayerプロパティにこれを代入するだけ
// マウスオーバーイベント private function onMouseOver(e:InteractiveScene3DEvent):void { DisplayObject3D(e.target).renderLayer = effectLayer; } private function onMouseOut(e:InteractiveScene3DEvent):void { DisplayObject3D(e.target).renderLayer = null; }


MouseEvent(InteractiveScene3DEvent)を有効にするのに、cameraとmaterialのinteractiveプロパティをtrueにするのを忘れずに（[Papervision3D2.0]#2 GreatWhiteでMouseEventを使うなどしてみる）
myViewport = new Viewport3D(600, 300, false, true); cm.interactive = true;

1000speakersで見た人もいるだろうが、今まで使っていたノートPCの液晶が液漏れを起こし、画面中央にブラックホールが発生してしまった。プログラムを書くときに見えない部分があると激しくやりにくいため、レッツノートと悩んだ挙句、世界再薄という言葉に惹かれMacBookAir購入に踏み切った。
MacBookAirは世界最薄といういわばスーパーサイヤ人であるが、そのまま素直にMacを使うだけではダメだ。というかWindows版しかないソフトでの課題が出せない。
なので、スーパーサイヤ人３になるべく、WindowsとFusionしようと思ったのだが、MacBookAirはCPUが弱いから無理だと言われる。なんと、Fusionは二人の気を全く同じにしなければいけないという初歩的なところでつまずいてしまった･･･。実際に無理やりFusionしようとして失敗し、ガリガリやデブの状態になってしまい、さらに30分たっても元に戻らないなど致命的なエラーが出た例も報告されているようだ。
なので、Fusionを諦め、Billy's boot campで修行をすることにした。


MacBookAirにbootcampでWindowsを入れる時のメモ


まず、Bootcampでインストールするには、WindowsXPのServicePack2以降が適用済みのフルインストールディスクが必要らしい。
WindowsXP HomeEditionのSP1を持っていたので、それにパッチを当ててSP2のディスクが作れるみたい。


・Service Pack 適用済みブート可能 WindowsXP CDを作成してみよう
Windows XP ServicePack3 RC適用のディスクを作るbatファイルを配布。DLしてbatを起動するだけでisoができる。

・Service Pack 適用済みブート可能 CD-ROM を作成するには
↑とほとんど同じ。他人のbatが怖い場合はここに載ってるコマンドでやればいい。（まぁ同じだけど）

・Windows XP SP2適用済CDを作るソフト
GUIベースでSP適用済みisoが作れるソフトがあるらしい。後で知った




これが出来たら、Macでbootcampを起動し、パーティションを分けて、基本指示に従えばOK



注意点は、
Windowsインストール時のキーボード選択で、一度｢s｣を押して、その後、106日本語を選ぶのと、
Macからデータにアクセスすることを考えて、FAT32でFormatすること



Windowsのインストールが終わったら、MacのInstallDIsk1を入れて、ドライバのインストール。



OSの選択は、PC起動時に「Option」を押し続けると選択画面が出る。デフォルトはbootcampの設定画面で選択可能



Windowsでの右クリックは、
・｢caps｣+｢shift｣+｢F10｣か、
・パッドを｢2本の指｣で押さえたままクリック
とかで実現できる。



なんか今日の記事変だｗｗ

今回は、Tweenerについて

これのソースあんま出したくなかったけど、 1000spで受けよかったし、自分でもまた使うだろうからメモ








ソース（ myTweener.mxml)

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="600" height="300"> <mx:Script> <![CDATA[ import flash.events.MouseEvent; import flash.events.Event; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.cameras.FreeCamera3D; import mx.core.UIComponent; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import caurina.transitions.Tweener; private var myScene:Scene3D; private var myCamera:FreeCamera3D; private var myViewport:Viewport3D; private var myRenderer:BasicRenderEngine; private var rootNode:DisplayObject3D; private function init():void{ //ＵＩコンポーネント作成 var myNestingComponent:UIComponent = new UIComponent(); addChild(myNestingComponent); myViewport = new Viewport3D(600, 300, false, false); myNestingComponent.addChild(myViewport); setup(); this.addEventListener(Event.ENTER_FRAME, renderLoop);//イベントリスナー登録 // MouseEvent① this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); } private function setup():void{ myScene = new Scene3D(); //シーン生成 myRenderer = new BasicRenderEngine(); //レンダリング専用クラス myCamera = new FreeCamera3D; //カメラオブジェクト生成 myCamera.zoom = 3; //カメラズーム myCamera.focus = 500; //カメラフォーカス rootNode = new DisplayObject3D("rootNode"); //ルートノード myScene.addChild(rootNode); var color:Array = [0xffa8a8, 0xffa8d3, 0xffa8ff, 0xd3a8ff, 0xa8a8ff, 0xa8d3ff, 0xa8ffff, 0xa8ffd3, 0xa8ffa8, 0xd3ffa8, 0xffffa8, 0xffd3a8]; var material:Array = new Array(); for(var index:int = 0; index < color.length; index++) { material.push(new ColorMaterial(color[index])); } for(index = 0; index < 50; index++) { var plane:Plane = new Plane(material[index%material.length], 150, 150); plane.x = 200 * index - 5000; rootNode.addChild(plane); } } //回転してレンダリング private function renderLoop(myEvent:Event):void{ if(isMouseDown) { var dx:int = (myViewport.mouseX - mouseDownedX); Tweener.addTween(rootNode, {x:rootNode.x - dx*6, time:3, transition:"easeOut"}); Tweener.addTween(myCamera, {rotationY: dx, time:1, transition:"easeOut"}); } else { Tweener.addTween(myCamera, {rotationY: 0, time:3, transition:"easeOut"}); } myRenderer.renderScene(myScene, myCamera, myViewport); } private var isMouseDown:Boolean; private var mouseDownedX:int; private var mouseDownedY:int; private function onMouseDown(e:Event):void { isMouseDown = true; mouseDownedX = myViewport.mouseX; mouseDownedY = myViewport.mouseY; } private function onMouseUp(e:Event):void { isMouseDown = false; } ]]> </mx:Script> </mx:Application>


Tweenerは、Papervsionに含まれていないので、svnでhttp://tweener.googlecode.com/svn/trunk/をチェックアウトし、Tweenerのソースを落とし、ビルドパスに追加
マウスイベントは、[Papervision3D2.0]#2 GreatWhiteでMouseEventを使うなどしてみると同じようにAddEventListnerする。

実際にTweenさせているのは、renderLoop内のたった７行だけ
if(isMouseDown) { var dx:int = (myViewport.mouseX - mouseDownedX); Tweener.addTween(rootNode, {x:rootNode.x - dx*6, time:3, transition:"easeOut"}); Tweener.addTween(myCamera, {rotationY: dx, time:1, transition:"easeOut"}); } else { Tweener.addTween(myCamera, {rotationY: 0, time:3, transition:"easeOut"}); }

トゥイーンは、たった1行
Tweener.addTween(対象オブジェクト, {プロパティ:値, time:Tweenする時間(秒)}, transition:Tweenのタイプ)
とするだけでできる。Tweenのタイプ(?)は、閃光的網站・弛緩複合体の tweener も弄ってみた(3)にいっぱい載ってるので、それを参考にした。


＜参考＞
・tweener も弄ってみた(3)　閃光的網站・弛緩複合体
・パステルカラー